From aa58fc0287386d17bfd1e780f8d2770be7b98de5 Mon Sep 17 00:00:00 2001
From: Ashwin Thanaraj <37061471+ashwin1111@users.noreply.github.com>
Date: Thu, 7 Mar 2024 20:30:34 +0530
Subject: [PATCH] c1: Update category import style (#639)

---
 .../intacct-configuration/import-settings.model.ts | 14 ++++++++++++--
 .../intacct-c1-import-settings.component.html      | 13 +------------
 .../intacct-c1-import-settings.component.ts        | 13 ++++++++++++-
 .../configuration-import-field.component.html      |  6 +++---
 4 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/app/core/models/intacct/intacct-configuration/import-settings.model.ts b/src/app/core/models/intacct/intacct-configuration/import-settings.model.ts
index 13c578c97..edd55b8e0 100644
--- a/src/app/core/models/intacct/intacct-configuration/import-settings.model.ts
+++ b/src/app/core/models/intacct/intacct-configuration/import-settings.model.ts
@@ -1,5 +1,7 @@
 import { FormGroup } from "@angular/forms";
 import { DefaultDestinationAttribute } from "../../db/destination-attribute.model";
+import { FyleField } from "../../enum/enum.model";
+import { brandingConfig } from "src/app/branding/branding-config";
 
 const emptyDestinationAttribute = { id: null, name: null };
 
@@ -52,7 +54,7 @@ export class ImportSettings {
         const filteredExpenseFieldArray = expenseFieldArray.filter((field: MappingSetting) => field.destination_field && field.source_field);
 
         // Then map over the filtered array
-        const mappingSettings = filteredExpenseFieldArray.map((field: MappingSetting) => {
+        const mappingSettings = filteredExpenseFieldArray.filter((field: MappingSetting) => field.source_field !== 'CATEGORY').map((field: MappingSetting) => {
           return {
             source_field: field.source_field.toUpperCase(),
             destination_field: field.destination_field,
@@ -74,9 +76,17 @@ export class ImportSettings {
             };
         }
 
+        let isCategoryImportEnabled = false;
+
+        if (brandingConfig.brandId === 'fyle') {
+            isCategoryImportEnabled = importSettingsForm.value.importCategories ? importSettingsForm.value.importCategories : false;
+        } else {
+            isCategoryImportEnabled = filteredExpenseFieldArray.filter((field: MappingSetting) => field.source_field === 'CATEGORY' && field.import_to_fyle).length > 0 ? true : false;
+        }
+
         const importSettingPayload: ImportSettingPost = {
                 configurations: {
-                    import_categories: importSettingsForm.value.importCategories ? importSettingsForm.value.importCategories : false,
+                    import_categories: isCategoryImportEnabled,
                     import_tax_codes: importSettingsForm.value.importTaxCodes ? importSettingsForm.value.importTaxCodes : false,
                     import_vendors_as_merchants: importSettingsForm.value.importVendorAsMerchant ? importSettingsForm.value.importVendorAsMerchant : false
                 },
diff --git a/src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.html b/src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.html
index f73678c58..09061cf64 100644
--- a/src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.html
+++ b/src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.html
@@ -11,18 +11,7 @@
     </div>
     <div>
         <form [formGroup]="importSettingsForm">
-            <div class="tw-p-24-px">
-                <div class="tw-rounded-lg tw-border-border-tertiary tw-border">
-                    <app-configuration-toggle-field
-                        [form]="importSettingsForm"
-                        [label]="'Import the ' + (intacctCategoryDestination | snakeCaseToSpaceCase | sentenceCase | lowercase) + ' as categories in ' + brandingConfig.brandName"
-                        [subLabel]="'Imported ' + (intacctCategoryDestination | snakeCaseToSpaceCase | sentenceCase | lowercase) + ' will be available as categories in ' + brandingConfig.brandName + '.'"
-                        [formControllerName]="'importCategories'"
-                        [isSectionHeader]="false"
-                        [iconPath]="'arrow-tail-down'">
-                    </app-configuration-toggle-field>
-                </div>
-
+            <div class="tw-p-24-px tw-pt-0">
                 <div>
                     <app-configuration-import-field
                         [form]="importSettingsForm"
diff --git a/src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.ts b/src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.ts
index 2229fab52..e5e2b0149 100644
--- a/src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.ts
+++ b/src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.ts
@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
 import { RxwebValidators } from '@rxweb/reactive-form-validators';
 import { forkJoin } from 'rxjs';
 import { brandingConfig, brandingContent, brandingKbArticles } from 'src/app/branding/branding-config';
-import { IntacctCategoryDestination, ConfigurationCta, IntacctOnboardingState, IntacctUpdateEvent, Page, ProgressPhase, ToastSeverity, MappingSourceField, AppName, TrackingApp } from 'src/app/core/models/enum/enum.model';
+import { IntacctCategoryDestination, ConfigurationCta, IntacctOnboardingState, IntacctUpdateEvent, Page, ProgressPhase, ToastSeverity, MappingSourceField, AppName, TrackingApp, FyleField } from 'src/app/core/models/enum/enum.model';
 import { IntacctDestinationAttribute } from 'src/app/core/models/intacct/db/destination-attribute.model';
 import { ExpenseField } from 'src/app/core/models/intacct/db/expense-field.model';
 import { LocationEntityMapping } from 'src/app/core/models/intacct/db/location-entity-mapping.model';
@@ -245,6 +245,17 @@ export class IntacctC1ImportSettingsComponent implements OnInit {
       return (topPriorityFields.includes(b.attribute_type) ? 1 : 0) - (topPriorityFields.includes(a.attribute_type) ? 1 : 0);
     });
 
+    expenseFieldFormArray.push(this.createFormGroup({
+      source_field: FyleField.CATEGORY,
+      destination_field: 'GENERAL_LEDGER_ACCOUNT',
+      import_to_fyle: this.importSettings?.configurations.import_categories || false,
+      is_custom: false,
+      source_placeholder: null
+    }));
+
+    this.sageIntacctFields.push({ attribute_type: 'GENERAL_LEDGER_ACCOUNT', display_name: 'General Ledger Account', source_placeholder: '', is_dependent: false });
+    this.fyleFields.push({ attribute_type: FyleField.CATEGORY, display_name: 'Category', source_placeholder: '', is_dependent: false });
+
     // Handle only mapped fields
     this.sageIntacctFields.forEach((sageIntacctField) => {
       const fieldData = mappedFieldMap.get(sageIntacctField.attribute_type);
diff --git a/src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.html b/src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.html
index e0c0a47d5..b9c8cb3eb 100644
--- a/src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.html
+++ b/src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.html
@@ -76,8 +76,8 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
                         <app-svg-icon [isTextColorAllowed]="true" [svgSource]="'arrow-line'" [height]="'10px'" [width]="'100px'" [styleClasses]="'tw-self-center tw-text-border-secondary'"></app-svg-icon>
                     </div>
                     <div class="tw-w-28-vw">
-                        <p-dropdown (onChange)="onDropdownChange($event, i)" appendTo="body" [options]="fyleFieldOptions" [placeholder]="'Choose ' + brandingConfig.brandName + ' Expense field'" formControlName="source_field"
-                        optionLabel="display_name" optionValue="attribute_type" [ngClass]="{'selectedItem': expenseField.value.source_field, 'filterDropdown': !expenseField.value.source_field}" [dropdownIcon]="'pi pi-chevron-down ' + brandingConfig.brandId">
+                        <p-dropdown [disabled]="expenseField.value.source_field === 'CATEGORY'" (onChange)="onDropdownChange($event, i)" appendTo="body" [options]="fyleFieldOptions" [placeholder]="'Choose ' + brandingConfig.brandName + ' Expense field'" formControlName="source_field"
+                        optionLabel="display_name" optionValue="attribute_type" [ngClass]="{'selectedItem': expenseField.value.source_field, 'selectedAccItem !tw-text-text-secondary': expenseField.value.source_field === 'CATEGORY', 'filterDropdown': !expenseField.value.source_field}" [dropdownIcon]="'pi pi-chevron-down ' + brandingConfig.brandId">
                             <ng-template let-option pTemplate="item">
                             <div [ngClass]="{'custom-option': option.attribute_type === 'custom_field'}" class="tw-align-middle">
                                 <div *ngIf="brandingFeatureConfig.isIconsInsideButtonAllowed && option.attribute_type === 'custom_field'" class="tw-ml-0 tw-mr-6-px ">
@@ -90,7 +90,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
                                 <p>
                                     {{ item.display_name }}
                                 </p>
-                                <app-svg-icon [svgSource]="'cross-medium'" [c1SvgSource]="'grv-cross-filled-medium'" (click)="removeFilter(expenseField)" [height]="'18px'" [width]="'18px'" [styleClasses]="'tw-mt-4-px'"></app-svg-icon>
+                                <app-svg-icon *ngIf="expenseField.value.source_field !== 'CATEGORY'" [svgSource]="'cross-medium'" [c1SvgSource]="'grv-cross-filled-medium'" (click)="removeFilter(expenseField)" [height]="'18px'" [width]="'18px'" [styleClasses]="'tw-mt-4-px'"></app-svg-icon>
                             </ng-template>
                       </p-dropdown>
                       <p *ngIf="expenseField.value.source_field && !expenseField.valid && !hasDuplicateOption(expenseField, i, 'source_field')" class="tw-text-alert-toast tw-text-12-px tw-pt-4-px">