feat: support split expense grouping for Xero (#1075)

* feat: add split expense grouping config to xero export settings

* feat: add split expense grouping config to xero clone settings (#1072)

src/app/core/models/xero/xero-configuration/xero-export-settings.model.ts

@@ -2,7 +2,7 @@ import { FormControl, FormGroup } from "@angular/forms";
 import { SelectFormOption } from "../../common/select-form-option.model";
 import { DefaultDestinationAttribute, DestinationAttribute } from "../../db/destination-attribute.model";
 import { ExpenseGroupSettingGet, ExpenseGroupSettingPost } from "../../db/expense-group-setting.model";
-import { AutoMapEmployeeOptions, ExpenseGroupingFieldOption, ExpenseState, ExportDateType, XeroCCCExpenseState, XeroCorporateCreditCardExpensesObject, XeroReimbursableExpensesObject } from "../../enum/enum.model";
+import { AutoMapEmployeeOptions, ExpenseGroupingFieldOption, ExpenseState, ExportDateType, SplitExpenseGrouping, XeroCCCExpenseState, XeroCorporateCreditCardExpensesObject, XeroReimbursableExpensesObject } from "../../enum/enum.model";
 import { ExportModuleRule, ExportSettingModel, ExportSettingValidatorRule } from "../../common/export-settings.model";
 import { brandingContent } from "src/app/branding/branding-config";
 
@@ -12,7 +12,8 @@ export type XeroExpenseGroupSettingPost = {
   reimbursable_export_date_type: ExportDateType | null;
   corporate_credit_card_expense_group_fields?: string[] | null;
   ccc_export_date_type: ExportDateType | null;
-  reimbursable_expense_state: ExpenseState
+  reimbursable_expense_state: ExpenseState;
+  split_expense_grouping: SplitExpenseGrouping
 };
 
 export interface XeroExpenseGroupSettingGet extends XeroExpenseGroupSettingPost {}
@@ -167,10 +168,23 @@ export class XeroExportSettingModel {
     ];
   }
 
+  static getSplitExpenseGroupingOptions() {
+    return [
+      {
+        label: 'Single Line Item',
+        value: SplitExpenseGrouping.SINGLE_LINE_ITEM
+      },
+      {
+        label: 'Multiple Line Item',
+        value: SplitExpenseGrouping.MULTIPLE_LINE_ITEM
+      }
+    ];
+  }
+
   static getValidators(): [ExportSettingValidatorRule, ExportModuleRule[]] {
     const exportSettingValidatorRule: ExportSettingValidatorRule = {
       reimbursableExpense: ['reimbursableExportType', 'reimbursableExportGroup', 'reimbursableExportDate', 'expenseState'],
-      creditCardExpense: ['creditCardExportType', 'creditCardExportGroup', 'creditCardExportDate', 'cccExpenseState', 'bankAccount']
+      creditCardExpense: ['creditCardExportType', 'creditCardExportGroup', 'creditCardExportDate', 'cccExpenseState', 'bankAccount', 'splitExpenseGrouping']
     };
 
     const exportModuleRule: ExportModuleRule[] = [
@@ -204,7 +218,8 @@ export class XeroExportSettingModel {
       creditCardExportDate: new FormControl(exportSettings?.expense_group_settings?.ccc_export_date_type),
       bankAccount: new FormControl(exportSettings?.general_mappings?.bank_account?.id ? findObjectByDestinationId(destinationAttribute, exportSettings.general_mappings.bank_account.id) : null),
       autoMapEmployees: new FormControl(exportSettings?.workspace_general_settings?.auto_map_employees),
-      searchOption: new FormControl('')
+      searchOption: new FormControl(''),
+      splitExpenseGrouping: new FormControl(exportSettings?.expense_group_settings?.split_expense_grouping)
     });
   }
 
@@ -215,7 +230,8 @@ export class XeroExportSettingModel {
         reimbursable_expense_state: exportSettingsForm.get('expenseState')?.value,
         reimbursable_export_date_type: exportSettingsForm.get('reimbursableExportDate')?.value ? exportSettingsForm.get('reimbursableExportDate')?.value : ExportDateType.CURRENT_DATE,
         ccc_expense_state: exportSettingsForm.get('cccExpenseState')?.value,
-        ccc_export_date_type: exportSettingsForm.get('creditCardExportDate')?.value ? exportSettingsForm.get('creditCardExportDate')?.value : ExportDateType.SPENT_AT
+        ccc_export_date_type: exportSettingsForm.get('creditCardExportDate')?.value ? exportSettingsForm.get('creditCardExportDate')?.value : ExportDateType.SPENT_AT,
+        split_expense_grouping: exportSettingsForm.get('splitExpenseGrouping')?.value ? exportSettingsForm.get('splitExpenseGrouping')?.value : SplitExpenseGrouping.MULTIPLE_LINE_ITEM
       },
       workspace_general_settings: {
         reimbursable_expenses_object: exportSettingsForm.get('reimbursableExpense')?.value ? XeroReimbursableExpensesObject.PURCHASE_BILL : null,

src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.html

@@ -178,6 +178,21 @@
                         [tooltipText]="'The selected date will reflect in the corporate card expenses exported to Xero.'">
                     </app-clone-setting-field>
                 </div>
+
+                <div class="clone-setting--field" *ngIf="brandingFeatureConfig.featureFlags.exportSettings.splitExpenseGrouping && 
+                    exportSettingForm.controls.creditCardExportType.value === XeroCorporateCreditCardExpensesObject.BANK_TRANSACTION">
+                    <app-clone-setting-field
+                        [iconSource]="'question-square-outline'"
+                        [label]="'How should the split expenses be grouped?'"
+                        [options]="splitExpenseGroupingOptions"
+                        [placeholder]="'Select split expense grouping'"
+                        [form]="exportSettingForm"
+                        [isFieldMandatory]="true"
+                        [formControllerName]="'splitExpenseGrouping'"
+                        [dropdownDisplayKey]="'label'"
+                        [tooltipText]="'The selected option will dictate how split expenses will be exported to Xero.'">
+                    </app-clone-setting-field>
+                </div>
             </div>
         </div>
 

src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.ts

@@ -2,13 +2,13 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { forkJoin } from 'rxjs';
-import { brandingConfig, brandingContent } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingContent, brandingFeatureConfig } from 'src/app/branding/branding-config';
 import { ExportSettingModel } from 'src/app/core/models/common/export-settings.model';
 import { ExpenseField, ImportSettingsModel } from 'src/app/core/models/common/import-settings.model';
 import { SelectFormOption } from 'src/app/core/models/common/select-form-option.model';
 import { DefaultDestinationAttribute, DestinationAttribute } from 'src/app/core/models/db/destination-attribute.model';
 import { FyleField, IntegrationField } from 'src/app/core/models/db/mapping.model';
-import { AppName, ConfigurationCta, ConfigurationWarningEvent, InputType, ToastSeverity, XeroFyleField } from 'src/app/core/models/enum/enum.model';
+import { AppName, ConfigurationCta, ConfigurationWarningEvent, InputType, ToastSeverity, XeroCorporateCreditCardExpensesObject, XeroFyleField } from 'src/app/core/models/enum/enum.model';
 import { ConfigurationWarningOut } from 'src/app/core/models/misc/configuration-warning.model';
 import { OnboardingStepper } from 'src/app/core/models/misc/onboarding-stepper.model';
 import { QBDEmailOptions } from 'src/app/core/models/qbd/qbd-configuration/qbd-advanced-setting.model';
@@ -40,6 +40,8 @@ export class XeroCloneSettingsComponent implements OnInit {
 
   brandingConfig = brandingConfig;
 
+  brandingFeatureConfig = brandingFeatureConfig;
+
   bankAccounts: DefaultDestinationAttribute[];
 
   reimbursableExportTypes = XeroExportSettingModel.getReimbursableExportTypes();
@@ -60,6 +62,8 @@ export class XeroCloneSettingsComponent implements OnInit {
 
   cccExpenseStateOptions = XeroExportSettingModel.getCCCExpenseStateOptions();
 
+  splitExpenseGroupingOptions = XeroExportSettingModel.getSplitExpenseGroupingOptions();
+
   exportSettingForm: FormGroup;
 
   xeroFields: IntegrationField[];
@@ -133,6 +137,8 @@ export class XeroCloneSettingsComponent implements OnInit {
 
   brandingContent = brandingContent;
 
+  XeroCorporateCreditCardExpensesObject = XeroCorporateCreditCardExpensesObject;
+
   constructor(
     private cloneSettingService: CloneSettingService,
     private configurationService: ConfigurationService,

src/app/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.html

@@ -190,6 +190,21 @@ <h5>
                             [formControllerName]="'creditCardExportDate'">
                         </app-configuration-select-field>
                     </div>
+
+                    <div *ngIf="brandingFeatureConfig.featureFlags.exportSettings.splitExpenseGrouping && exportSettingForm.get('creditCardExportType')?.value === XeroCorporateCreditCardExpensesObject.BANK_TRANSACTION" class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-border-tertiary tw-rounded-12-px">
+                        <app-configuration-select-field
+                            [form]="exportSettingForm"
+                            [isFieldMandatory]="true"
+                            [showClearIcon]="true"
+                            [mandatoryErrorListName]="'split expense grouping'"
+                            [label]="'How should the split expenses be grouped?'"
+                            [subLabel]="'Choose how expenses should be grouped for split expenses'"
+                            [options]="splitExpenseGroupingOptions"
+                            [iconPath]="'question-square-outline'"
+                            [placeholder]="'Select the split expense grouping type'"
+                            [formControllerName]="'splitExpenseGrouping'">
+                        </app-configuration-select-field>
+                    </div>
                 </div>
             </div>
             <app-configuration-step-footer

src/app/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.ts

@@ -6,7 +6,7 @@ import { brandingConfig, brandingContent, brandingFeatureConfig, brandingKbArtic
 import { ExportSettingModel, ExportSettingOptionSearch } from 'src/app/core/models/common/export-settings.model';
 import { SelectFormOption } from 'src/app/core/models/common/select-form-option.model';
 import { DestinationAttribute } from 'src/app/core/models/db/destination-attribute.model';
-import { AppName, ConfigurationCta, ConfigurationWarningEvent, EmployeeFieldMapping, ExpenseGroupingFieldOption, XeroExportSettingDestinationOptionKey, ToastSeverity, XeroOnboardingState } from 'src/app/core/models/enum/enum.model';
+import { AppName, ConfigurationCta, ConfigurationWarningEvent, EmployeeFieldMapping, ExpenseGroupingFieldOption, XeroExportSettingDestinationOptionKey, ToastSeverity, XeroOnboardingState, XeroCorporateCreditCardExpensesObject } from 'src/app/core/models/enum/enum.model';
 import { ConfigurationWarningOut } from 'src/app/core/models/misc/configuration-warning.model';
 import { XeroExportSettingGet, XeroExportSettingModel } from 'src/app/core/models/xero/xero-configuration/xero-export-settings.model';
 import { HelperService } from 'src/app/core/services/common/helper.service';
@@ -49,6 +49,8 @@ export class XeroExportSettingsComponent implements OnInit {
 
   cccExpenseGroupingDateOptions = XeroExportSettingModel.getCCCExpenseGroupingDateOptions();
 
+  splitExpenseGroupingOptions = XeroExportSettingModel.getSplitExpenseGroupingOptions();
+
   autoMapEmployeeTypes = XeroExportSettingModel.getAutoMapEmployeeOptions();
 
   expenseStateOptions = XeroExportSettingModel.getReimbursableExpenseStateOptions();
@@ -86,6 +88,8 @@ export class XeroExportSettingsComponent implements OnInit {
 
   readonly brandingContent = brandingContent.xero.configuration.exportSetting;
 
+  readonly XeroCorporateCreditCardExpensesObject = XeroCorporateCreditCardExpensesObject;
+
   constructor(
     public helperService: HelperService,
     private exportSettingService: XeroExportSettingsService,