qbd direct export settings onboarding changes and content changes

Author: DhaaraniCIT

src/app/branding/fyle-contents-config.ts

@@ -6,7 +6,7 @@ export const brandingConfig: BrandingConfiguration = config as BrandingConfigura
 export const fyleContents = {
     qbd_direct: {
         landing: {
-            contentText: 'Import data from QuickBooks Desktop to Fyle and export expenses from Fyle to QuickBooks Desktop',
+            contentText: 'Import data from QuickBooks Desktop to ' + brandingConfig.brandName + ' and export expenses from ' + brandingConfig.brandName + ' to QuickBooks Desktop',
             guideHeaderText: 'Guide to setup your integrations'
         },
         configuration: {
@@ -24,42 +24,42 @@ export const fyleContents = {
             exportSetting: {
                 stepName: 'Export Settings',
                 headerText: ' Export Corporate Card Expenses',
-                contentText: 'In this section, you can configure how and when the expenses from ' + brandingConfig.brandName + ' can be exported to QuickBooks Desktop',
+                contentText: 'In this section, you can configure how and when the expenses from ' + brandingConfig.brandName + ' need to be exported to QuickBooks Desktop.',
                 reimbursable: {
                     reimbursableExpenseLabel: 'Export Reimbursable Expenses',
                     reimbursableExpenseSubLabel: 'Enable this to export the reimbursable expenses from ' + brandingConfig.brandName + '. If not enabled, any <b>out-of-pocket</b> expenses will not be exported to Quickbooks Desktop.',
                     reimbursableExpenseTypeLabel: 'How should the expenses be exported?',
                     reimbursableExpenseTypeSubLabel: 'Choose the type of transaction in QuickBooks Desktop to export your ' + brandingConfig.brandName +' expenses.',
                     reimbursableExpenseStateLabel: 'At which state should the expenses be ready to export from ' + brandingConfig.brandName + '?',
-                    reimbursableExpenseStateSubLabel: 'You can export expenses either when they are awaiting closure after approval (Processing) or when the payment has been settled (Closed).',
+                    reimbursableExpenseStateSubLabel: 'You can export expenses either when they are awaiting payments after approval (Processing) or when the payment has been settled (Closed).',
                     reimbursableExpenseDateLabel: 'Set the expense ',
                     reimbursableExpenseDateSubLabel: 'Expenses will be grouped and posted using the configured date when exporting from ' + brandingConfig.brandName +' to QuickBooks Desktop',
                     reimbursableExpenseGroupLabel: 'How should the expenses be grouped?',
                     reimbursableExpenseGroupSubLabel: 'Expenses can either be exported as single line items (Expense) or as a grouped report with multiple line items (Report)',
                     employeeMappingLabel: 'How are your Employees represented in QuickBooks Desktop?',
-                    employeeMappingSubLabel: 'Select how you represent your employees in QuickBooks Desktop. This would help to export the expenses from ' + brandingConfig.brandName + ' to the correct employee/vendor record in QuickBooks Desktop.',
+                    employeeMappingSubLabel: 'Select how employees are represented in QuickBooks Desktop to ensure expenses from ' + brandingConfig.brandName + ' export to the correct employee/vendor record.',
                     autoMapEmployeesLabel: 'How should Employees in ' + brandingConfig.brandName + ' be mapped to ',
                     autoMapEmployeesSubLabel: 'Automatically map the employees in ' + brandingConfig.brandName + ' to their corresponding records in QuickBooks Desktop based on a unique parameter.',
-                    defaultReimbursableAccountPayableLabel: 'To which accounts payable account should the ',
+                    defaultReimbursableAccountPayableLabel: 'Select the Default Credit Account for adding ',
                     defaultReimbursableAccountPayableSubLabel: 'The integration will post the offset credit entry in '
                 },
                 corporateCard: {
                     creditCardExpenseLabel: 'Export corporate card expenses',
-                    creditCardExpenseSubLabel: 'Enable this to export the non-reimbursable expenses from ' + brandingConfig.brandName + '. If not enabled, any <b>corporate credit card </b> expenses will not be exported to Quickbooks Desktop.',
+                    creditCardExpenseSubLabel: 'Enable this to export the corporate credit card expenses from ' + brandingConfig.brandName + '. If not enabled, any <b>non-reimbursable </b> expenses will not be exported to Quickbooks Desktop.',
                     creditCardExpenseTypeLabel: 'How should the expenses be exported?',
                     creditCardExpenseTypeSubLabel: 'Choose the type of transaction in QuickBooks Desktop to export your ' + brandingConfig.brandName +' expenses.',
                     creditCardExpenseStateLabel: 'At which state should the expenses be ready to export from ' + brandingConfig.brandName + '?',
-                    creditCardExpenseStateSubLabel: 'You could choose to export ccc expenses when they have been approved and are awaiting payment clearance, or simply when they have been paid out.',
+                    creditCardExpenseStateSubLabel: 'You can export expenses either when they are awaiting closure after approval (Approved) or when the expense has been closed (Closed).',
                     creditCardExpenseDateLabel: 'Set the expense ',
                     creditCardExpenseDateSubLabel: 'Expenses will be grouped and posted using the configured date when exporting from ' + brandingConfig.brandName +' to QuickBooks Desktop',
                     creditCardExpenseGroupLabel: 'How should the expenses be grouped?',
                     creditCardExpenseGroupSubLabel: 'Expenses can either be exported as single line items (Expense) or as a grouped report with multiple line items (Report)',
                     creditCardExpenseNameinJELabel: 'Name in Journal Entry',
-                    creditCardExpenseNameinJESubLabel: 'You can select either the \'Merchant Name\' or the \'Employee Name\' to appear in the \'Name\' field of your Journal Entries.',
-                    defaultCCCAccountLabel: 'Set Default Credit Card Account as',
-                    defaultCCCAccountSubLabel: 'Post all your company corporate card transactions to a default credit card account.',
-                    defaultCCCAccountPayableLabel: 'To which accounts payable account should the ',
-                    defaultCCCAccountPayableSubLabel: 'The integration will post the offset credit entry in '
+                    creditCardExpenseNameinJESubLabel: 'You can select either the \'Merchant Name\' or the \'Employee Name\' to appear in the \'Name\' field of your journal entries.',
+                    defaultCCCAccountLabel: 'Set a Default Credit Card Account',
+                    defaultCCCAccountSubLabel: 'If there\'s no card-to-card mapping or when an expense lacks a corporate card transaction associated with it, expenses will be posted to the default card configured here.',
+                    defaultCCCAccountPayableLabel: 'Select the Default Credit Account for adding Journal Entry ',
+                    defaultCCCAccountPayableSubLabel: 'This account will be used for the credit line of the '
                 }
             },
             importSetting: {

src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-export-settings/qbd-direct-onboarding-export-settings.component.html

@@ -1 +1,4 @@
-<p>qbd-direct-onboarding-export-settings works!</p>
+<div class="tw-pb-48-px">
+    <app-onboarding-steppers [onboardingSteps]="onboardingSteps"></app-onboarding-steppers>
+    <app-qbd-direct-export-settings></app-qbd-direct-export-settings>
+</div>

src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-export-settings/qbd-direct-onboarding-export-settings.component.ts

@@ -1,12 +1,31 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { QbdDirectExportSettingsComponent } from "../../qbd-direct-shared/qbd-direct-export-settings/qbd-direct-export-settings.component";
+import { SharedModule } from 'src/app/shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { QbdOnboardingModule } from 'src/app/integrations/qbd/qbd-onboarding/qbd-onboarding.module';
+import { QbdDirectOnboardingModel } from 'src/app/core/models/qbd-direct/qbd-direct-configuration/qbd-direct-onboarding.model';
+import { brandingContent } from 'src/app/branding/branding-config';
+import { OnboardingStepper } from 'src/app/core/models/misc/onboarding-stepper.model';
+import { WorkspaceService } from 'src/app/core/services/common/workspace.service';
 
 @Component({
   selector: 'app-qbd-direct-onboarding-export-settings',
   standalone: true,
-  imports: [],
+  imports: [QbdDirectExportSettingsComponent, SharedModule, CommonModule],
   templateUrl: './qbd-direct-onboarding-export-settings.component.html',
   styleUrl: './qbd-direct-onboarding-export-settings.component.scss'
 })
-export class QbdDirectOnboardingExportSettingsComponent {
+export class QbdDirectOnboardingExportSettingsComponent implements OnInit {
+
+  brandingContent = brandingContent.configuration.exportSetting;
+
+  onboardingSteps: OnboardingStepper[] = new QbdDirectOnboardingModel().getOnboardingSteps(this.brandingContent.stepName, this.workspaceService.getOnboardingState());
+
+  constructor(
+    private workspaceService: WorkspaceService
+  ) { }
+
+  ngOnInit(): void {
+  }
 
 }

src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-export-settings/qbd-direct-export-settings.component.html

@@ -32,7 +32,7 @@
                                 [subLabel]="brandingContent.reimbursable.reimbursableExpenseTypeSubLabel"
                                 [options]="reimbursableExportTypes" 
                                 [iconPath]="'list'"
-                                [placeholder]="brandingContent.reimbursable.reimbursableExpenseTypeSubLabel"
+                                [placeholder]="'Select an export type'"
                                 [formControllerName]="'reimbursableExportType'" 
                                 [appName]="appName"
                                 [showExportPreview]="false">
@@ -65,8 +65,8 @@
                                 [optionLabel]="'value'"
                                 [isFieldMandatory]="true"
                                 [mandatoryErrorListName]="'accounts payable'"
-                                [label]="brandingContent.reimbursable.defaultReimbursableAccountPayableLabel + (exportSettingsForm.get('reimbursableExportType')?.value | snakeCaseToSpaceCase | titlecase) + ' be posted to?'"
-                                [subLabel]="brandingContent.reimbursable.defaultReimbursableAccountPayableSubLabel + (exportSettingsForm.get('reimbursableExportType')?.value | snakeCaseToSpaceCase | titlecase) + ' to the selected accounts payable account.'"
+                                [label]="brandingContent.reimbursable.defaultReimbursableAccountPayableLabel + (exportSettingsForm.get('reimbursableExportType')?.value | snakeCaseToSpaceCase | titlecase)"
+                                [subLabel]="brandingContent.reimbursable.defaultReimbursableAccountPayableSubLabel + (exportSettingsForm.get('reimbursableExportType')?.value | snakeCaseToSpaceCase | titlecase) + ' ,while debit lines will reflect the category chosen by the employee for each respective expense'"
                                 [iconPath]="'list'"
                                 [placeholder]="'Select accounts payable'"
                                 [isMultiLineOption]="true"
@@ -108,7 +108,7 @@
                             [label]="brandingContent.reimbursable.reimbursableExpenseDateLabel + (exportSettingsForm.value.reimbursableExportType | snakeCaseToSpaceCase | lowercase) + ' date as'"
                             [subLabel]="brandingContent.reimbursable.reimbursableExpenseDateSubLabel"
                             [options]="reimbursableExpenseGroupingDateOptions" [iconPath]="'calendar'"
-                            [placeholder]="'Select the date of the ' + (exportSettingsForm.value.reimbursableExportType | snakeCaseToSpaceCase | titlecase)"
+                            [placeholder]="'Select date'"
                             [formControllerName]="'reimbursableExportDate'">
                         </app-configuration-select-field>
                     </div>
@@ -117,7 +117,7 @@
                     <app-configuration-toggle-field
                         [form]="exportSettingsForm"
                         [label]="brandingContent.headerText"
-                        [subLabel]="brandingContent.contentText"
+                        [subLabel]="brandingContent.corporateCard.creditCardExpenseSubLabel"
                         [formControllerName]="'creditCardExpense'"
                         [isSectionHeader]="true"
                         [hideToggle]="!brandingFeatureConfig.featureFlags.exportSettings.reimbursableExpenses">
@@ -132,10 +132,10 @@
                             [isFieldMandatory]="true"
                             [mandatoryErrorListName]="'export module'"
                             [label]="brandingContent.corporateCard.creditCardExpenseTypeLabel"
-                            [subLabel]="brandingContent.corporateCard.creditCardExpenseSubLabel"
+                            [subLabel]="brandingContent.corporateCard.creditCardExpenseTypeSubLabel"
                             [options]="creditCardExportTypes"
                             [iconPath]="'list'"
-                            [placeholder]="'Select expense export type'"
+                            [placeholder]="'Select an export type'"
                             [formControllerName]="'creditCardExportType'"
                             [appName]="appName"
                             [showExportPreview]="false">
@@ -187,8 +187,8 @@
                                 [optionLabel]="'value'"
                                 [isFieldMandatory]="true"
                                 [mandatoryErrorListName]="'accounts payable'"
-                                [label]="brandingContent.corporateCard.defaultCCCAccountPayableLabel + (exportSettingsForm.get('creditCardExportType')?.value | snakeCaseToSpaceCase | titlecase) + ' be posted to?'"
-                                [subLabel]="brandingContent.corporateCard.defaultCCCAccountPayableSubLabel + (exportSettingsForm.get('creditCardExportType')?.value | snakeCaseToSpaceCase | titlecase) + ' to the selected accounts payable account.'"
+                                [label]="brandingContent.corporateCard.defaultCCCAccountPayableLabel + (exportSettingsForm.get('creditCardExportType')?.value | snakeCaseToSpaceCase | titlecase)"
+                                [subLabel]="brandingContent.corporateCard.defaultCCCAccountPayableSubLabel + (exportSettingsForm.get('creditCardExportType')?.value | snakeCaseToSpaceCase | titlecase) + ' ,while debit lines will reflect the category chosen by the employee for each respective expense'"
                                 [iconPath]="'list'"
                                 [placeholder]="'Select accounts payable'"
                                 [isMultiLineOption]="true"
@@ -237,7 +237,7 @@
                         [options]="creditCardExpenseGroupingFieldOptions"
                         [iconPath]="'question-square-outline'"
                         [placeholder]="'Select expense grouping'"
-                        [isDisableTextRequired]="false"
+                        [isDisableTextRequired]="true"
                         [isDisabled]="exportSettingsForm.get('creditCardExportType')?.value === QBDCorporateCreditCardExpensesObject.CREDIT_CARD_PURCHASE ? true : false"
                         [formControllerName]="'creditCardExportGroup'">
                     </app-configuration-select-field>
@@ -252,7 +252,7 @@
                         [subLabel]="brandingContent.corporateCard.creditCardExpenseDateSubLabel"
                         [options]="cccExpenseGroupingDateOptions"
                         [iconPath]="'calendar'"
-                        [placeholder]="'Select the date of the ' + (brandingConfig.brandId === 'fyle' ? (exportSettingsForm.value.creditCardExportType | snakeCaseToSpaceCase | titlecase) : (exportSettingsForm.value.creditCardExportType | snakeCaseToSpaceCase | lowercase))"
+                        [placeholder]="'Select date'"
                         [formControllerName]="'creditCardExportDate'">
                     </app-configuration-select-field>
                 </div>
@@ -261,7 +261,7 @@
             <app-configuration-step-footer
                 [ctaText]="!isSaveInProgress ? (isOnboarding ? ConfigurationCtaText.SAVE_AND_CONTINUE : ConfigurationCtaText.SAVE) : ConfigurationCtaText.SAVING"
                 [isButtonDisabled]="!exportSettingsForm.valid"
-                [showBackButton]="isOnboarding ? true : false"
+                [showBackButton]="false"
                 (save)="save()"
                 (navigateToPreviousStep)="navigateToPreviousStep()">
             </app-configuration-step-footer>

src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-shared.module.ts

@@ -4,6 +4,7 @@ import { SharedModule } from 'src/app/shared/shared.module';
 import { QbdDirectDownloadFileComponent } from './qbd-direct-download-file/qbd-direct-download-file.component';
 import { QbdDirectSetupConnectionComponent } from './qbd-direct-setup-connection/qbd-direct-setup-connection.component';
 import { QbdDirectDataSyncComponent } from './qbd-direct-data-sync/qbd-direct-data-sync.component';
+import { QbdDirectExportSettingsComponent } from './qbd-direct-export-settings/qbd-direct-export-settings.component';
 
 @NgModule({
   declarations: [],
@@ -12,12 +13,14 @@ import { QbdDirectDataSyncComponent } from './qbd-direct-data-sync/qbd-direct-da
     SharedModule,
     QbdDirectDownloadFileComponent,
     QbdDirectSetupConnectionComponent,
-    QbdDirectDataSyncComponent
+    QbdDirectDataSyncComponent,
+    QbdDirectExportSettingsComponent
   ],
   exports: [
     QbdDirectDownloadFileComponent,
     QbdDirectSetupConnectionComponent,
-    QbdDirectDataSyncComponent
+    QbdDirectDataSyncComponent,
+    QbdDirectExportSettingsComponent
   ]
 })
 export class QbdDirectSharedModule { }