fix: qbd direct import settings onboarding changes and content changes (#1083)

* qbd direct import settings onboarding changes and content changes

* qbd direct advanced settings onboarding changes and content changes (#1084)

Author: DhaaraniCIT

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

@@ -66,38 +66,38 @@ export const fyleContents = {
                 stepName: 'Import Settings',
                 headerText: '',
                 contentText: 'In this section, you can choose the fields required to be imported from QuickBooks Desktop to ' + brandingConfig.brandName + '. ',
-                importCategoriesLabel: 'Import the Chart of Accounts as Categories in ' + brandingConfig.brandName,
-                importCategoriesSubLabel: 'Imported account will be available as Categories in ' + brandingConfig.brandName + '.',
+                importCategoriesLabel: 'Import Chart of Accounts as Categories in ' + brandingConfig.brandName,
+                importCategoriesSubLabel: 'Chart of Accounts in QuickBooks will be imported as Categories in Fyle, available in a dropdown for employees to select when coding expenses.',
                 importItemsLabel: 'Import Products/Services from QuickBooks Desktop',
                 importItemsSubLabel: 'Products/services from QuickBooks Desktop will be imported as Categories in ' + brandingConfig.brandName + '.',
-                importVendorsAsMerchantsLabel: 'Import Vendors from QuickBooks Desktop',
-                chartOfAccountTypes: 'Select the accounts from QuickBooks Desktop to import as categories in ' + brandingConfig.brandName,
-                chartOfAccountTypesSubLabel: 'By default expense will be selected. Open the dropdown to select more as per your requirements.'
+                importVendorsAsMerchantsLabel: 'Import Vendors as Merchants in Fyle',
+                chartOfAccountTypes: 'Choose the type of accounts to be imported',
+                chartOfAccountTypesSubLabel: 'By default \'Expense\' type accounts will be imported. Open the dropdown to add or modify selections based on your needs.'
             },
             advancedSettings: {
                 stepName: 'Advanced Settings',
                 contentText: 'In this section, you can customize the integration based on your accounting requirements. ',
                 automationLabel: 'Automation',
                 automationSubLabel: 'You can automate the export and sync of your data in this section.',
                 customizeSectionLabel: 'Customization',
-                customizeSectionSubLabel: 'In this section, you can customize the data that you\'d like to export from Fyle to QuickBooks Desktop You can choose what data points need to be exported and what shouldn\'t be.',
+                customizeSectionSubLabel: 'In this section, you can customize the data that you\'d like to export from Fyle to QuickBooks Desktop.',
                 scheduleAutoExportLabel: 'Schedule automatic export',
                 scheduleAutoExportSubLabel: 'Set up a schedule to frequently automate the export of expenses from ' + brandingConfig.brandName + ' to QuickBooks Desktop.',
                 autoExportfrequencyLabel: 'Set up export frequency',
                 autoExportfrequencySubLabel: 'Set a frequency based on how often you want your expenses in Fyle to be exported to QuickBooks Desktop.',
-                topLevelMemoStructureLabel: 'Select the top level memo field data for QuickBooks Desktop',
-                topLevelMemoStructureSubLabel: 'You can customize the <b>data point</b> you would like to export to QuickBooks Desktop\’s <b>top-level memo</b> field while exporting expenses from ' + brandingConfig.brandName + '.',
-                memoStructureLabel: 'Set the line-item level memo field data for QuickBooks Desktop.',
-                memoStructureSubLabel: 'You can customize the data set you would like to export to QuickBooks Desktop\’s <b>transaction line-item level memo</b> field while exporting expenses from ' + brandingConfig.brandName + '.',
+                topLevelMemoStructureLabel: 'Customize the Top-Level Memo Field',
+                topLevelMemoStructureSubLabel: 'Select the datapoints you\'d like to export to QuickBooks Desktop’s top-level memo field when exporting expenses from Fyle.',
+                memoStructureLabel: 'Customize the Line-Item Level Memo Field',
+                memoStructureSubLabel: 'Select the datapoints you\'d like to export to QuickBooks Desktop\’s line-item level memo field when exporting expenses from Fyle.',
                 previewDescriptionFieldLabel: 'Preview of the Description Field',
                 otherPreferencesLabel: 'Other preferences',
                 otherPreferencesSubLabel: 'Based on your preference, you can choose whether you want to create any new records in QuickBooks Desktop from ' + brandingConfig.brandName + '.',
                 autoCreateMerchantsAsVendorsLabel: 'Auto-create merchants as vendors',
                 autoCreateMerchantsAsVendorsSubLabel: 'Fyle will auto-create a new vendor in QuickBooks Desktop if a merchant added by an employee does not have a corresponding match in QuickBooks Desktop. ',
-                skipExportLabel: 'Skip export of specific expenses from ' + brandingConfig.brandName + ' to QuickBooks Desktop',
-                skipExportSubLabel: 'You could choose to skip expenses from ' + brandingConfig.brandName + ' to QuickBooks Desktop by setting up a conditional rule. ',
-                autoCreateReimbursableEnitityLabel: 'Auto create reimbursable enitity',
-                autoCreateReimbursableEnititySubLabel: 'Do you want to create a reimbursable enitity if not present',
+                skipExportLabel: 'Skip Export of Specific Expenses from Fyle to QuickBooks Desktop',
+                skipExportSubLabel: 'Set up a conditional rule to selectively skip exporting certain expenses from Fyle to QuickBooks Desktop. ',
+                autoCreateReimbursableEnitityLabel: 'Auto-create fyle employees as ',
+                autoCreateReimbursableEnititySubLabel: 'If an employee in Fyle has no corresponding record in QuickBooks Desktop, the integration will automatically create a ',
                 accountingPeriodLabel: 'Post entries in the current accounting period',
                 accountingPeriodSubLabel: 'If there are expenses for which the accounting period is closed in QuickBooks Desktop, you can export those to the current month by enabling this option.'
             }

src/app/core/models/common/advanced-settings.model.ts

@@ -85,7 +85,7 @@ export class AdvancedSettingsModel {
       merchant: 'Pizza Hut',
       report_number: 'C/2021/12/R/1',
       spent_on: today.toLocaleDateString(),
-      expence_key: 'txDdlUFWkahX',
+      expense_key: 'txDdlUFWkahX',
       expense_link: `${environment.fyle_app_url}/app/main/#/enterprise/view_expense/`
     };
     let memoPreviewText = '';

src/app/core/models/qbd-direct/qbd-direct-configuration/qbd-direct-advanced-settings.model.ts

@@ -26,7 +26,7 @@ export class QbdDirectAdvancedSettingsModel extends AdvancedSettingsModel {
     }
 
     static defaultTopMemoOptions(): string[] {
-        return ["employee_name", "expense_key"];
+        return ["employee_name", "Expense/Report ID"];
     }
 
     static formatMemoStructure(memoStructure: string[], defaultMemoOptions: string[]): string[] {
@@ -58,6 +58,9 @@ export class QbdDirectAdvancedSettingsModel extends AdvancedSettingsModel {
 
         const topMemo: string[] = advancedSettingForm.controls.topMemoStructure.value;
 
+        const index = topMemo.indexOf('Expense/Report ID');
+        topMemo[index] = 'expense_key';
+
         const allSelectedEmails: EmailOption[] = advancedSettingForm.get('email')?.value;
 
         const selectedEmailsEmails = allSelectedEmails?.filter((email: EmailOption) => adminEmails.includes(email));

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

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

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

@@ -1,12 +1,31 @@
-import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { QbdDirectSharedModule } from '../../qbd-direct-shared/qbd-direct-shared.module';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { QbdDirectAdvancedSettingsComponent } from "../../qbd-direct-shared/qbd-direct-advanced-settings/qbd-direct-advanced-settings.component";
+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-advanced-settings',
   standalone: true,
-  imports: [],
+  imports: [CommonModule, QbdDirectSharedModule, SharedModule, QbdDirectAdvancedSettingsComponent],
   templateUrl: './qbd-direct-onboarding-advanced-settings.component.html',
   styleUrl: './qbd-direct-onboarding-advanced-settings.component.scss'
 })
-export class QbdDirectOnboardingAdvancedSettingsComponent {
+export class QbdDirectOnboardingAdvancedSettingsComponent implements OnInit {
+
+  brandingContent = brandingContent.configuration.advancedSettings;
+
+  onboardingSteps: OnboardingStepper[] = new QbdDirectOnboardingModel().getOnboardingSteps(this.brandingContent.stepName, this.workspaceService.getOnboardingState());
+
+  constructor(
+    private workspaceService: WorkspaceService
+  ) { }
+
+  ngOnInit(): void {
+  }
 
 }

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

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

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

@@ -1,12 +1,31 @@
-import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { QbdDirectSharedModule } from '../../qbd-direct-shared/qbd-direct-shared.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-import-settings',
   standalone: true,
-  imports: [],
+  imports: [QbdDirectSharedModule, SharedModule, CommonModule],
   templateUrl: './qbd-direct-onboarding-import-settings.component.html',
   styleUrl: './qbd-direct-onboarding-import-settings.component.scss'
 })
-export class QbdDirectOnboardingImportSettingsComponent {
+export class QbdDirectOnboardingImportSettingsComponent implements OnInit {
+
+  brandingContent = brandingContent.configuration.importSetting;
+
+  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-advanced-settings/qbd-direct-advanced-settings.component.html

@@ -54,9 +54,9 @@
 
                     <app-configuration-toggle-field *ngIf="isReimbursableExportTypePresent"
                         [form]="advancedSettingsForm"
-                        [label]="brandingContent.autoCreateReimbursableEnitityLabel" 
+                        [label]="brandingContent.autoCreateReimbursableEnitityLabel + (employeeMapping | snakeCaseToSpaceCase | lowercase) + 's in QuickBooks Desktop'" 
                         [iconPath]="'user-plus'"
-                        [subLabel]="brandingContent.autoCreateReimbursableEnititySubLabel"
+                        [subLabel]="brandingContent.autoCreateReimbursableEnititySubLabel + (employeeMapping | snakeCaseToSpaceCase | lowercase) + ' record for them, ensuring expenses are posted to this new record.'"
                         [formControllerName]="'autoCreateReimbursableEnitity'">
                     </app-configuration-toggle-field>
 
@@ -128,7 +128,7 @@
                 </div>
 
             </div>
-            <app-configuration-step-footer [ctaText]="!saveInProgress ? (isOnboarding ? ConfigurationCtaText.SAVE_AND_CONTINUE : ConfigurationCtaText.SAVE) : ConfigurationCtaText.SAVING" [isButtonDisabled]="!advancedSettingsForm.valid || saveInProgress || !skipExportForm.valid" (save)="save()"></app-configuration-step-footer>
+            <app-configuration-step-footer [ctaText]="!saveInProgress ? (isOnboarding ? ConfigurationCtaText.SAVE_AND_CONTINUE : ConfigurationCtaText.SAVE) : ConfigurationCtaText.SAVING" [isButtonDisabled]="!advancedSettingsForm.valid || saveInProgress || !skipExportForm.valid" (save)="save()" [showBackButton]="true" (navigateToPreviousStep)="navigateToPreviousStep()"></app-configuration-step-footer>
         </form>
     </div>
 </div>

src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-advanced-settings/qbd-direct-advanced-settings.component.ts

@@ -137,6 +137,10 @@ export class QbdDirectAdvancedSettingsComponent implements OnInit {
     }
   }
 
+  navigateToPreviousStep() {
+    this.router.navigate([`/integrations/qbd_direct/onboarding/import_settings`]);
+  }
+
   save() {
     this.saveInProgress = true;
     this.saveSkipExport();

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

@@ -65,7 +65,7 @@ <h5 class="lg:tw-w-3/5 md:tw-w-1/2 tw-text-slightly-normal-text-color tw-text-14
                     <app-configuration-toggle-field
                         [form]="importSettingForm"
                         [label]="brandingContent.importVendorsAsMerchantsLabel"
-                        [subLabel]="'Vendors from QuickBooks Online will be imported as merchants in ' + brandingConfig.brandName + ' and will be a selectable field while creating an expense.'"
+                        [subLabel]="'Vendors in QuickBooks will be imported as Merchants in Fyle, available in a dropdown for employees to select when coding expenses.'"
                         [formControllerName]="'importVendorsAsMerchants'"
                         [iconPath]="'arrow-tail-down'">
                     </app-configuration-toggle-field>