xero advanced settings html cooding

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

@@ -89,7 +89,7 @@ export class XeroAdvancedSettingModel extends HelperUtility{
 
     Object.values(validatorRule).forEach((value, index) => {
       form.controls[keys[index]].valueChanges.subscribe((selectedValue) => {
-        if (selectedValue && ((keys[index] === 'billPaymentAccount' && selectedValue === PaymentSyncDirection.FYLE_TO_XERO) || (keys[index] !== 'billPaymentAccount'))) {
+        if (selectedValue && ((keys[index] === 'paymentSync' && selectedValue === PaymentSyncDirection.FYLE_TO_XERO) || (keys[index] !== 'paymentSync'))) {
           this.markControllerAsRequired(form, value);
         } else {
           this.clearValidatorAndResetValue(form, value);
@@ -98,7 +98,7 @@ export class XeroAdvancedSettingModel extends HelperUtility{
     });
   }
 
-  static mapAPIResponseToFormGroup(advancedSettings: XeroAdvancedSettingGet, isSkipExportEnabled: boolean, adminEmails: EmailOption[]): FormGroup {
+  static mapAPIResponseToFormGroup(advancedSettings: XeroAdvancedSettingGet, adminEmails: EmailOption[]): FormGroup {
     let paymentSync = '';
     if (advancedSettings.workspace_general_settings.sync_fyle_to_xero_payments) {
       paymentSync = PaymentSyncDirection.FYLE_TO_XERO;
@@ -107,17 +107,16 @@ export class XeroAdvancedSettingModel extends HelperUtility{
     }
     return new FormGroup({
       paymentSync: new FormControl(paymentSync),
-      billPaymentAccount: new FormControl(advancedSettings.general_mappings.payment_account),
+      billPaymentAccount: new FormControl(advancedSettings.general_mappings.payment_account.id ? advancedSettings.general_mappings.payment_account : null),
       changeAccountingPeriod: new FormControl(advancedSettings.workspace_general_settings.change_accounting_period),
       autoCreateVendors: new FormControl(advancedSettings.workspace_general_settings.auto_create_destination_entity),
       exportSchedule: new FormControl(advancedSettings.workspace_schedules?.enabled ? advancedSettings.workspace_schedules.interval_hours : false),
-      exportScheduleFrequency: new FormControl(advancedSettings.workspace_schedules?.enabled ? advancedSettings.workspace_schedules.interval_hours : null),
+      exportScheduleFrequency: new FormControl(advancedSettings.workspace_schedules?.enabled ? advancedSettings.workspace_schedules.interval_hours : 1),
       autoCreateMerchantDestinationEntity: new FormControl(advancedSettings.workspace_general_settings.auto_create_merchant_destination_entity ? advancedSettings.workspace_general_settings.auto_create_merchant_destination_entity : false),
-      skipExport: new FormControl(isSkipExportEnabled),
       search: new FormControl(),
       searchOption: new FormControl(),
       email: new FormControl(advancedSettings?.workspace_schedules?.emails_selected && advancedSettings?.workspace_schedules?.emails_selected?.length > 0 ? AdvancedSettingsModel.filterAdminEmails(advancedSettings?.workspace_schedules?.emails_selected, adminEmails) : []),
-      addedEmail: new FormControl([])
+      additionalEmails: new FormControl([])
     });
   }
 
@@ -138,8 +137,8 @@ export class XeroAdvancedSettingModel extends HelperUtility{
         enabled: advancedSettingsForm.get('exportSchedule')?.value ? true : false,
         interval_hours: advancedSettingsForm.get('exportScheduleFrequency')?.value ? advancedSettingsForm.get('exportScheduleFrequency')?.value : null,
         start_datetime: new Date(),
-        emails_selected: advancedSettingsForm.get('emails')?.value ? advancedSettingsForm.get('emails')?.value : [],
-        additional_email_options: advancedSettingsForm.get('addedEmail')?.value ? advancedSettingsForm.get('addedEmail')?.value : []
+        emails_selected: advancedSettingsForm.get('email')?.value ? AdvancedSettingsModel.formatSelectedEmails(advancedSettingsForm.get('email')?.value) : [],
+        additional_email_options: advancedSettingsForm.get('additionalEmails')?.value ? advancedSettingsForm.get('additionalEmails')?.value : []
       }
     };
     return advancedSettingPayload;

src/app/integrations/xero/xero-onboarding/xero-onboarding-done/xero-onboarding-done.component.html

@@ -1 +1 @@
-<p>xero-onboarding-done works!</p>
+<app-onboarding-done (launchIntegrationClick)="navigateToDashboard()"></app-onboarding-done>

src/app/integrations/xero/xero-onboarding/xero-onboarding-done/xero-onboarding-done.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-xero-onboarding-done',
@@ -7,7 +8,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class XeroOnboardingDoneComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private router: Router
+  ) { }
+
+  navigateToDashboard(): void {
+    this.router.navigate([`/integrations/xero/main/dashboard`]);
+  }
 
   ngOnInit(): void {
   }

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

@@ -1 +1,111 @@
-<p>xero-advanced-settings works!</p>
+<div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
+    <app-loader></app-loader>
+</div>
+<div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
+    <div>
+        <app-configuration-step-header
+            [headerText]="brandingContent.stepName"
+            [contentText]="'In this section, you can customize the integration based on your accounting requirements. '"
+            [redirectLink]="supportArticleLink"
+            [showSyncButton]="isOnboarding"
+            [appName]="appName"
+            (refreshDimension)="refreshDimensions()">
+        </app-configuration-step-header>
+    </div>
+    <form [formGroup]="advancedSettingForm">
+        <div class="tw-p-24-px">
+            <div class="tw-mb-16-px">
+                <app-configuration-step-sub-header
+                    [label]="'Automation'"
+                    [subLabel]="'You can automate the export and sync of your data in this section.'">
+                </app-configuration-step-sub-header>
+            </div>
+            <div class="tw-mb-16-px">
+                <div class="tw-rounded-12-px tw-border-border-tertiary tw-border tw-bg-white tw-mb-16-px">
+                    <app-configuration-toggle-field
+                        [form]="advancedSettingForm"
+                        [label]="'Schedule automatic export'" 
+                        [subLabel]="'Set up a schedule to frequently automate the export of expenses from ' + brandingConfig.brandName + ' to Xero.'"
+                        [formControllerName]="'exportSchedule'"
+                        [iconPath]="'calendar'">
+                    </app-configuration-toggle-field>
+
+                    <div *ngIf="advancedSettingForm.value.exportSchedule">
+                        <app-configuration-schedule-export
+                            [form]="advancedSettingForm"
+                            [appName]="appName"
+                            [isFieldMandatory]="false"
+                            [mandatoryErrorListName]="'automatic export method'"
+                            [label]="'Set up export frequency'"
+                            [subLabel]="'Set a frequency based on how often you want your expenses in ' + brandingConfig.brandName + ' to be exported to Xero.'"
+                            [options]="hours"
+                            [isEmailPresent]="brandingFeatureConfig.featureFlags.advancedSettings.emailNotification ? true: false"
+                            [formControllerName]="'exportScheduleFrequency'"
+                            [adminEmails]="adminEmails">
+                        </app-configuration-schedule-export>
+                    </div>
+                </div>
+            </div>
+
+            <div class="tw-mb-16-px">
+                <app-configuration-step-sub-header
+                    [label]="'Other Preferences'"
+                    [subLabel]="'Based on your preference, you can choose whether you want to create any new records in Xero from ' + brandingConfig.brandName + '. (when there is no employee record found, or when the accounting period is closed)'">
+                </app-configuration-step-sub-header>
+            </div>
+            <div class="tw-rounded-12-px tw-border-border-tertiary tw-border tw-bg-white tw-mb-16-px">
+                <app-configuration-toggle-field
+                    [form]="advancedSettingForm"
+                    [iconPath]="'calendar'"
+                    [label]="'Post entries in the next open accounting period'"
+                    [subLabel]="'If the accounting period in Xero is closed, the expenses from ' + brandingConfig.brandName + ' will be exported with a date stamp of the first day next open accounting period.'"
+                    [formControllerName]="'changeAccountingPeriod'">
+                </app-configuration-toggle-field>
+
+                <app-configuration-toggle-field *ngIf="brandingFeatureConfig.featureFlags.advancedSettings.autoCreateVendors"
+                    [form]="advancedSettingForm"
+                    [iconPath]="'user-plus'"
+                    [label]="brandingContent.autoCreateVendorsLabel"
+                    [subLabel]="'While exporting reimbursable expenses from ' + brandingConfig.brandName + ', the integration will automatically create a vendor if a match does not exist in Xero already.'"
+                    [formControllerName]="'autoCreateVendors'">
+                </app-configuration-toggle-field>
+
+                <app-configuration-select-field *ngIf="brandingFeatureConfig.featureFlags.advancedSettings.paymentsSync && workspaceGeneralSettings.reimbursable_expenses_object"
+                    [form]="advancedSettingForm"
+                    [options]="paymentSyncOptions"
+                    [iconPath]="'arrow-rotate'"
+                    [label]="brandingContent.paymentSyncLabel"
+                    [subLabel]="'When expense is marked paid in ' + brandingConfig.brandName + ' the transaction in Xero will be automatically be updated to Paid and vice versa.'"
+                    [placeholder]="'Select how payments should be synced for reimbursable expenses'"
+                    [formControllerName]="'paymentSync'">
+                </app-configuration-select-field>
+
+                <app-configuration-select-field *ngIf="advancedSettingForm.value.paymentSync && advancedSettingForm.value.paymentSync === 'fyle_to_xero'"
+                    [form]="advancedSettingForm"
+                    [destinationAttributes]="billPaymentAccounts"
+                    [optionLabel]="'name'"
+                    [isFieldMandatory]="true"
+                    [mandatoryErrorListName]="'payment account'"
+                    [label]="brandingContent.billPaymentAccountLabel"
+                    [subLabel]="'Once the payment for the reimbursable expense is complete in ' + brandingConfig.brandName + brandingContent.billPaymentAccountSubLabel + 'Xero.'"
+                    [placeholder]="'Select a Payment Account'"
+                    [formControllerName]="'billPaymentAccount'">
+                </app-configuration-select-field>
+
+                <app-configuration-toggle-field *ngIf="workspaceGeneralSettings.corporate_credit_card_expenses_object"
+                    [form]="advancedSettingForm"
+                    [iconPath]="'user-plus'"
+                    [label]="brandingContent.autoCreateMerchantsAsVendorsLabel"
+                    [subLabel]="brandingConfig.brandName + ' will auto-create a new vendor in Xero if a merchant added by an employee does not have a corresponding match in Xero.'"
+                    [formControllerName]="'autoCreateMerchantDestinationEntity'">
+                </app-configuration-toggle-field>
+            </div>
+        </div>
+        <app-configuration-step-footer
+            [ctaText] = "!isSaveInProgress ? (isOnboarding ? ConfigurationCtaText.SAVE_AND_CONTINUE : ConfigurationCtaText.SAVE) : ConfigurationCtaText.SAVING"
+            [isButtonDisabled]="!advancedSettingForm.valid"
+            [showBackButton]="isOnboarding ? true : false"
+            (save)="save()"
+            (navigateToPreviousStep)="navigateToPreviousStep()"></app-configuration-step-footer>
+    </form>
+</div>

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

@@ -2,18 +2,15 @@ import { Component, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { forkJoin } from 'rxjs';
-import { brandingConfig, brandingKbArticles } from 'src/app/branding/branding-config';
-import { AdvancedSettingsModel, ConditionField, ExpenseFilterPayload, ExpenseFilterResponse, SkipExportModel, SkipExportValidatorRule, skipExportValidator } from 'src/app/core/models/common/advanced-settings.model';
+import { brandingConfig, brandingContent, brandingFeatureConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { ConditionField, ExpenseFilterResponse } from 'src/app/core/models/common/advanced-settings.model';
 import { EmailOption, 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, ToastSeverity, XeroFyleField, XeroOnboardingState } from 'src/app/core/models/enum/enum.model';
 import { XeroWorkspaceGeneralSetting } from 'src/app/core/models/xero/db/xero-workspace-general-setting.model';
 import { XeroAdvancedSettingGet, XeroAdvancedSettingModel } from 'src/app/core/models/xero/xero-configuration/xero-advanced-settings.model';
-import { ConfigurationService } from 'src/app/core/services/common/configuration.service';
-import { HelperService } from 'src/app/core/services/common/helper.service';
 import { IntegrationsToastService } from 'src/app/core/services/common/integrations-toast.service';
 import { MappingService } from 'src/app/core/services/common/mapping.service';
-import { SkipExportService } from 'src/app/core/services/common/skip-export.service';
 import { WorkspaceService } from 'src/app/core/services/common/workspace.service';
 import { XeroAdvancedSettingsService } from 'src/app/core/services/xero/xero-configuration/xero-advanced-settings.service';
 import { XeroHelperService } from 'src/app/core/services/xero/xero-core/xero-helper.service';
@@ -29,28 +26,18 @@ export class XeroAdvancedSettingsComponent implements OnInit {
 
   isLoading: boolean = true;
 
-  saveInProgress: boolean;
-
   isOnboarding: boolean = false;
 
   supportArticleLink: string = brandingKbArticles.onboardingArticles.XERO.ADVANCED_SETTING;
 
-  skipExportRedirectLink: string = brandingKbArticles.onboardingArticles.XERO.SKIP_EXPORT;
-
   advancedSettings: XeroAdvancedSettingGet;
 
   workspaceGeneralSettings: XeroWorkspaceGeneralSetting;
 
   billPaymentAccounts: DestinationAttribute[];
 
-  expenseFilters: ExpenseFilterResponse;
-
-  conditionFieldOptions: ConditionField[];
-
   advancedSettingForm: FormGroup;
 
-  skipExportForm: FormGroup;
-
   memoStructure: string[] = [];
 
   brandingConfig = brandingConfig;
@@ -70,12 +57,15 @@ export class XeroAdvancedSettingsComponent implements OnInit {
 
   isSaveInProgress: boolean;
 
+  readonly brandingFeatureConfig = brandingFeatureConfig;
+
+  readonly brandingContent = brandingContent.configuration.advancedSettings;
+
+
   constructor(
     private advancedSettingService: XeroAdvancedSettingsService,
     private router: Router,
     private workspaceService: WorkspaceService,
-    private skipExportService: SkipExportService,
-    private helper: HelperService,
     private xeroHelperService: XeroHelperService,
     private mappingService: MappingService,
     private toastService: IntegrationsToastService
@@ -85,41 +75,7 @@ export class XeroAdvancedSettingsComponent implements OnInit {
     this.router.navigate([`/integrations/xero/onboarding/import_settings`]);
   }
 
-  private saveSkipExportFields(): void {
-    if (!this.skipExportForm.valid) {
-      return;
-    }
-    let valueField = this.skipExportForm.getRawValue();
-    if (!valueField.condition1.field_name) {
-      return;
-    }
-    valueField = SkipExportModel.constructSkipExportValue(valueField);
-    valueField.rank = 1;
-    const skipExportRank1: ExpenseFilterPayload = SkipExportModel.constructExportFilterPayload(valueField);
-    const payload1 = SkipExportModel.constructSkipExportPayload(skipExportRank1, this.skipExportForm.value.value1);
-    this.skipExportService.postExpenseFilter(payload1).subscribe(() => {
-      if (valueField.condition2 && valueField.operator2) {
-        valueField.rank = 2;
-        const skipExportRank2: ExpenseFilterPayload = SkipExportModel.constructExportFilterPayload(valueField);
-        const payload2 = SkipExportModel.constructSkipExportPayload(skipExportRank2, this.skipExportForm.value.value2);
-        this.skipExportService.postExpenseFilter(payload2).subscribe(() => {});
-      }
-    });
-  }
-
-  private saveSkipExport(): void {
-    if (!this.advancedSettingForm.value.skipExport && this.expenseFilters.results.length > 0){
-      this.expenseFilters.results.forEach((value) => {
-        this.deleteExpenseFilter(value.id);
-      });
-    }
-    if (this.advancedSettingForm.value.skipExport) {
-      this.saveSkipExportFields();
-    }
-  }
-
   save(): void {
-    this.saveSkipExport();
     const advancedSettingPayload = XeroAdvancedSettingModel.constructPayload(this.advancedSettingForm);
     this.isSaveInProgress = true;
 
@@ -141,30 +97,8 @@ export class XeroAdvancedSettingsComponent implements OnInit {
     this.xeroHelperService.refreshXeroDimensions().subscribe();
   }
 
-  deleteExpenseFilter(id: number) {
-    this.skipExportService.deleteExpenseFilter(id).subscribe();
-  }
-
-
-  skipExportWatcher(): void {
-    const skipExportFormWatcherFields: SkipExportValidatorRule = {
-      condition1: ['operator1', 'value1'],
-      condition2: ['operator2', 'value2'],
-      operator1: ['value1'],
-      operator2: ['value2']
-    };
-    this.helper.setConfigurationSettingValidatorsAndWatchers(skipExportFormWatcherFields, this.skipExportForm);
-
-    const formWatcher: skipExportValidator = {
-      'isChanged': ['condition1', 'operator1', 'value1'],
-      'isNotChanged': ['condition1', 'operator1', 'value1', 'condition2', 'operator2', 'value2', 'join_by']
-    };
-    this.helper.handleSkipExportFormInAdvancedSettingsUpdates(this.skipExportForm, formWatcher, this.advancedSettingForm);
-  }
-
   private setupFormWatchers() {
     XeroAdvancedSettingModel.setConfigurationSettingValidatorsAndWatchers(this.advancedSettingForm);
-    this.skipExportWatcher();
   }
 
 
@@ -174,21 +108,14 @@ export class XeroAdvancedSettingsComponent implements OnInit {
       this.advancedSettingService.getAdvancedSettings(),
       this.mappingService.getDestinationAttributes(XeroFyleField.BANK_ACCOUNT, 'v1', 'xero'),
       this.workspaceService.getWorkspaceGeneralSettings(),
-      this.advancedSettingService.getWorkspaceAdmins(),
-      this.skipExportService.getExpenseFilter(),
-      this.skipExportService.getExpenseFields('v1')
+      this.advancedSettingService.getWorkspaceAdmins()
     ]).subscribe(response => {
       this.advancedSettings = response[0];
       this.billPaymentAccounts = response[1];
       this.workspaceGeneralSettings = response[2];
       this.adminEmails = this.advancedSettings.workspace_schedules?.additional_email_options ? this.advancedSettings.workspace_schedules?.additional_email_options.concat(response[3]) : response[3];
-      this.expenseFilters = response[4];
-      this.conditionFieldOptions = response[5];
-
-      const isSkipExportEnabled = this.expenseFilters.count > 0;
-      this.advancedSettingForm = XeroAdvancedSettingModel.mapAPIResponseToFormGroup(this.advancedSettings, isSkipExportEnabled, this.adminEmails);
 
-      this.skipExportForm = SkipExportModel.setupSkipExportForm(this.expenseFilters, [], this.conditionFieldOptions);
+      this.advancedSettingForm = XeroAdvancedSettingModel.mapAPIResponseToFormGroup(this.advancedSettings, this.adminEmails);
 
       this.setupFormWatchers();
       this.isLoading = false;