xero-configuration works!
+ + +
+
diff --git a/src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.component.ts b/src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.component.ts
index e264dfbd1..2f71cdd42 100644
--- a/src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.component.ts
+++ b/src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.component.ts
@@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { brandingConfig, brandingContent, brandingFeatureConfig } from 'src/app/branding/branding-config';
@Component({
selector: 'app-xero-configuration',
@@ -7,6 +9,20 @@ import { Component, OnInit } from '@angular/core';
})
export class XeroConfigurationComponent implements OnInit {
+ readonly brandingContent = brandingContent.xero.configuration;
+
+ modules: MenuItem[] = [
+ {label: this.brandingContent.exportSetting.stepName, routerLink: '/integrations/xero/main/configuration/export_settings'},
+ {label: this.brandingContent.importSetting.stepName, routerLink: '/integrations/xero/main/configuration/import_settings'},
+ {label: this.brandingContent.advancedSettings.stepName, routerLink: '/integrations/xero/main/configuration/advanced_settings'}
+ ];
+
+ activeModule: MenuItem = this.modules[0];
+
+ readonly isGradientAllowed: boolean = brandingFeatureConfig.isGradientAllowed;
+
+ readonly brandingConfig = brandingConfig;
+
constructor() { }
ngOnInit(): void {
diff --git a/src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.module.ts b/src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.module.ts
index e6059944a..8c01c16d7 100644
--- a/src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.module.ts
+++ b/src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.module.ts
@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
import { XeroConfigurationRoutingModule } from './xero-configuration-routing.module';
import { XeroConfigurationComponent } from './xero-configuration.component';
import { XeroSharedModule } from '../../xero-shared/xero-shared.module';
+import { SharedModule } from 'src/app/shared/shared.module';
@NgModule({
@@ -13,6 +14,7 @@ import { XeroSharedModule } from '../../xero-shared/xero-shared.module';
imports: [
CommonModule,
XeroSharedModule,
+ SharedModule,
XeroConfigurationRoutingModule
]
})
diff --git a/src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.html b/src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.html
new file mode 100644
index 000000000..086364e0f
--- /dev/null
+++ b/src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.html
@@ -0,0 +1,404 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.scss b/src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.scss
new file mode 100644
index 000000000..c5d9724aa
--- /dev/null
+++ b/src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.scss
@@ -0,0 +1,25 @@
+.clone-setting {
+ &--field-section {
+ @apply tw-px-24-px;
+ }
+
+ &--field {
+ @apply tw-p-24-px;
+ }
+
+ &--export-setting-header {
+ @apply tw-flex tw-justify-between;
+ }
+
+ &--dependent-field {
+ @apply tw-pt-24-px;
+ }
+}
+
+:host ::ng-deep .reimbursableExpense .clone-setting-field--label-text, :host ::ng-deep .creditCardExpense .clone-setting-field--label-text {
+ @apply tw-text-16-px tw-text-text-primary tw-pl-0 #{!important};
+}
+
+:host ::ng-deep p-dropdown .p-disabled {
+ @apply tw-text-input-read-only-text tw-bg-select-disabled-bg tw-border-select-disabled-border tw-border-solid tw-opacity-100 #{!important};
+}
diff --git a/src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.spec.ts b/src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.spec.ts
new file mode 100644
index 000000000..f56b788bc
--- /dev/null
+++ b/src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { XeroCloneSettingsComponent } from './xero-clone-settings.component';
+
+describe('XeroCloneSettingsComponent', () => {
+ let component: XeroCloneSettingsComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Send Error Notification to
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Would you like to continue?`; + this.primaryButtonText = 'Yes'; + this.warningEvent = ConfigurationWarningEvent.RESET_CONFIGURATION; + + this.isWarningDialogVisible = true; + } + + acceptWarning(data: ConfigurationWarningOut): void { + this.isWarningDialogVisible = false; + if (data.hasAccepted) { + this.router.navigate([`/integrations/xero/onboarding/export_settings`]); + } + } + + navigateToPreviousStep(): void { + this.router.navigate([`/integrations/xero/onboarding/connector`]); + } + + closeModel() { + this.customFieldForm.reset(); + this.showCustomFieldDialog = false; + } + + showPreviewDialog(visible: boolean) { + this.isPreviewDialogVisible = visible; + } + + closeDialog() { + this.isPreviewDialogVisible = false; + } + + saveFyleExpenseField(): void { + this.customField = { + attribute_type: this.customFieldForm.value.attribute_type.split(' ').join('_').toUpperCase(), + display_name: this.customFieldForm.value.attribute_type, + source_placeholder: this.customFieldForm.value.source_placeholder, + is_dependent: false + }; + + if (this.customFieldControl) { + this.fyleFields.pop(); + this.fyleFields.push(this.customField); + this.fyleFields.push(this.customFieldOption[0]); + const expenseField = { + source_field: this.customField.attribute_type, + destination_field: this.customFieldControl.value.destination_field, + import_to_fyle: true, + is_custom: true, + source_placeholder: this.customField.source_placeholder + }; + (this.importSettingForm.get('expenseFields') as FormArray).controls.filter(field => field.value.destination_field === this.customFieldControl.value.destination_field)[0].patchValue(expenseField); + ((this.importSettingForm.get('expenseFields') as FormArray).controls.filter(field => field.value.destination_field === this.customFieldControl.value.destination_field)[0] as FormGroup).controls.import_to_fyle.disable(); + this.customFieldForm.reset(); + this.showCustomFieldDialog = false; + } + } + + save(): void { + this.isSaveInProgress = true; + const cloneSettingPayload = XeroCloneSettingModel.constructPayload(this.exportSettingForm, this.importSettingForm, this.advancedSettingForm); + + this.cloneSettingService.postCloneSettings(cloneSettingPayload).subscribe((response) => { + this.isSaveInProgress = false; + this.toastService.displayToastMessage(ToastSeverity.SUCCESS, 'Cloned settings successfully'); + this.router.navigate([`/integrations/xero/onboarding/done`]); + }, () => { + this.isSaveInProgress = false; + this.toastService.displayToastMessage(ToastSeverity.ERROR, 'Failed to clone settings'); + }); + + } + + private setupOnboardingSteps(): void { + const onboardingSteps = new XeroOnboardingModel().getOnboardingSteps('Clone Settings', this.workspaceService.getOnboardingState()); + this.onboardingSteps.push(onboardingSteps[0]); + this.onboardingSteps.push({ + active: false, + completed: false, + step: 'Clone Settings', + icon: 'gear-medium', + route: '/integrations/xero/onboarding/clone_settings', + styleClasses: ['step-name-export--text'] + }); + } + + private initializeCustomFieldForm(shouldShowDialog: boolean) { + this.customFieldForm.reset(); + this.showCustomFieldDialog = shouldShowDialog; + } + + private createTaxCodeWatcher(): void { + this.importSettingForm.controls.taxCode.valueChanges.subscribe((isTaxCodeEnabled) => { + if (isTaxCodeEnabled) { + this.importSettingForm.controls.defaultTaxCode.setValidators(Validators.required); + } else { + this.importSettingForm.controls.defaultTaxCode.clearValidators(); + this.importSettingForm.controls.defaultTaxCode.setValue(null); + } + }); + } + + private createCOAWatcher(): void { + this.importSettingForm.controls.importCategories.valueChanges.subscribe((isImportCategoriesEnabled) => { + if (!isImportCategoriesEnabled) { + this.importSettingForm.controls.chartOfAccountTypes.setValue(['Expense']); + } + }); + } + + private createImportCustomerWatcher(): void { + this.importSettingForm.controls.importCustomers.valueChanges.subscribe((isCustomerImportEnabled) => { + if (isCustomerImportEnabled) { + this.fyleFields = this.fyleFields.filter((field) => field.attribute_type !== XeroFyleField.PROJECT); + } else { + const fyleField = this.fyleFields.filter((field) => field.attribute_type === XeroFyleField.PROJECT); + if (fyleField.length === 0) { + this.fyleFields.pop(); + this.fyleFields.push({ attribute_type: XeroFyleField.PROJECT, display_name: 'Project', is_dependent: false }); + this.fyleFields.push(this.customFieldOption[0]); + } + } + }); + } + + private setupImportSettingFormWatcher(): void { + this.createTaxCodeWatcher(); + this.createCOAWatcher(); + this.createImportCustomerWatcher(); + const expenseFieldArray = this.importSettingForm.get('expenseFields') as FormArray; + expenseFieldArray.controls.forEach((control:any) => { + control.valueChanges.subscribe((value: { source_field: string; destination_field: string; }) => { + if (value.source_field === 'custom_field') { + this.initializeCustomFieldForm(true); + this.customFieldType = ''; + this.customFieldControl = control; + this.customFieldControl.patchValue({ + source_field: '', + destination_field: control.value.destination_field, + import_to_fyle: control.value.import_to_fyle, + is_custom: control.value.is_custom, + source_placeholder: null + }); + } + }); + }); + } + + setupAdvancedSettingFormWatcher() { + XeroAdvancedSettingModel.setConfigurationSettingValidatorsAndWatchers(this.advancedSettingForm); + } + + updateCustomerImportAvailability(isMapped: boolean) { + this.isProjectMapped = isMapped; + } + + private setupPage(): void { + this.setupOnboardingSteps(); + const destinationAttributes = [ + XeroFyleField.TAX_CODE, XeroFyleField.BANK_ACCOUNT + ]; + + forkJoin([ + this.cloneSettingService.getCloneSettings(), + this.mappingService.getGroupedDestinationAttributes(destinationAttributes, 'v1', 'xero'), + this.mappingService.getFyleFields('v1'), + this.xeroConnectorService.getXeroCredentials(this.workspaceService.getWorkspaceId()), + this.configurationService.getAdditionalEmails(), + this.xeroImportSettingsService.getXeroField() + ]).subscribe(([cloneSetting, destinationAttributes, fyleFieldsResponse, xeroCredentials, adminEmails, xeroFields]) => { + this.cloneSetting = cloneSetting; + + // Export Settings + this.bankAccounts = destinationAttributes.BANK_ACCOUNT.map((option: DestinationAttribute) => ExportSettingModel.formatGeneralMappingPayload(option)); + + this.reimbursableExportTypes = XeroExportSettingModel.getReimbursableExportTypes(); + this.exportSettingForm = XeroExportSettingModel.mapAPIResponseToFormGroup(cloneSetting.export_settings); + + this.helperService.addExportSettingFormValidator(this.exportSettingForm); + const [exportSettingValidatorRule, exportModuleRule] = XeroExportSettingModel.getValidators(); + + this.helperService.setConfigurationSettingValidatorsAndWatchers(exportSettingValidatorRule, this.exportSettingForm); + + this.helperService.setExportTypeValidatorsAndWatchers(exportModuleRule, this.exportSettingForm); + + // Import Settings + this.xeroFields = xeroFields; + this.taxCodes = destinationAttributes.TAX_CODE.map((option: DestinationAttribute) => ExportSettingModel.formatGeneralMappingPayload(option)); + + if (xeroCredentials && xeroCredentials.country !== 'US') { + this.isTaxGroupSyncAllowed = true; + } + + this.isCustomerPresent = this.xeroFields.findIndex((data:IntegrationField) => data.attribute_type === XeroFyleField.CUSTOMER) !== -1 ? true : false; + + this.xeroFields = this.xeroFields.filter((data) => data.attribute_type !== XeroFyleField.CUSTOMER); + + cloneSetting.import_settings.workspace_general_settings.charts_of_accounts = cloneSetting.import_settings.workspace_general_settings.charts_of_accounts.map((name: string) => name[0]+name.substr(1).toLowerCase()); + + this.isProjectMapped = cloneSetting.import_settings.mapping_settings.findIndex((data: { source_field: XeroFyleField; destination_field: XeroFyleField; }) => data.source_field === XeroFyleField.PROJECT && data.destination_field !== XeroFyleField.CUSTOMER) !== -1 ? true : false; + + this.importSettingForm = XeroImportSettingModel.mapAPIResponseToFormGroup(cloneSetting.import_settings, this.xeroFields, this.isCustomerPresent); + this.fyleFields = fyleFieldsResponse; + this.fyleFields.push({ attribute_type: 'custom_field', display_name: 'Create a Custom Field', is_dependent: true }); + this.setupImportSettingFormWatcher(); + this.initializeCustomFieldForm(false); + + // Advanced Settings + this.adminEmails = adminEmails; + if (this.cloneSetting.advanced_settings.workspace_schedules?.additional_email_options && this.cloneSetting.advanced_settings.workspace_schedules?.additional_email_options.length > 0) { + this.adminEmails = this.adminEmails.concat(this.cloneSetting.advanced_settings.workspace_schedules?.additional_email_options).flat(); + } + + this.billPaymentAccounts = destinationAttributes.BANK_ACCOUNT.map((option: DestinationAttribute) => ExportSettingModel.formatGeneralMappingPayload(option)); + this.advancedSettingForm = XeroAdvancedSettingModel.mapAPIResponseToFormGroup(this.cloneSetting.advanced_settings, this.adminEmails); + this.setupAdvancedSettingFormWatcher(); + + this.isLoading = false; + }); + } + + ngOnInit(): void { + this.setupPage(); + } + +} diff --git a/src/app/integrations/xero/xero-onboarding/xero-onboarding-advanced-settings/xero-onboarding-advanced-settings.component.html b/src/app/integrations/xero/xero-onboarding/xero-onboarding-advanced-settings/xero-onboarding-advanced-settings.component.html index 7065c19e6..70cdc677c 100644 --- a/src/app/integrations/xero/xero-onboarding/xero-onboarding-advanced-settings/xero-onboarding-advanced-settings.component.html +++ b/src/app/integrations/xero/xero-onboarding/xero-onboarding-advanced-settings/xero-onboarding-advanced-settings.component.html @@ -1 +1,4 @@ -
xero-onboarding-advanced-settings works!
+
+
diff --git a/src/app/integrations/xero/xero-onboarding/xero-onboarding-advanced-settings/xero-onboarding-advanced-settings.component.ts b/src/app/integrations/xero/xero-onboarding/xero-onboarding-advanced-settings/xero-onboarding-advanced-settings.component.ts
index 0a88b4fae..5291c3320 100644
--- a/src/app/integrations/xero/xero-onboarding/xero-onboarding-advanced-settings/xero-onboarding-advanced-settings.component.ts
+++ b/src/app/integrations/xero/xero-onboarding/xero-onboarding-advanced-settings/xero-onboarding-advanced-settings.component.ts
@@ -1,4 +1,8 @@
import { Component, OnInit } from '@angular/core';
+import { brandingContent } from 'src/app/branding/branding-config';
+import { OnboardingStepper } from 'src/app/core/models/misc/onboarding-stepper.model';
+import { XeroOnboardingModel } from 'src/app/core/models/xero/xero-configuration/xero-onboarding.model';
+import { WorkspaceService } from 'src/app/core/services/common/workspace.service';
@Component({
selector: 'app-xero-onboarding-advanced-settings',
@@ -7,7 +11,14 @@ import { Component, OnInit } from '@angular/core';
})
export class XeroOnboardingAdvancedSettingsComponent implements OnInit {
- constructor() { }
+ brandingContent = brandingContent.xero.configuration.advancedSettings;
+
+ onboardingSteps: OnboardingStepper[] = new XeroOnboardingModel().getOnboardingSteps(this.brandingContent.stepName, this.workspaceService.getOnboardingState());
+
+ constructor(
+ private workspaceService: WorkspaceService
+ ) { }
+
ngOnInit(): void {
}
diff --git a/src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.html b/src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.html
index aa6ca777b..05d4496d2 100644
--- a/src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.html
+++ b/src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.html
@@ -1 +1,43 @@
-xero-onboarding-connector works!
+
+
diff --git a/src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.ts b/src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.ts
index e4b31e35b..542a7bf4f 100644
--- a/src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.ts
+++ b/src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.ts
@@ -1,4 +1,26 @@
import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { brandingConfig, brandingContent, brandingFeatureConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { BrandingConfiguration } from 'src/app/core/models/branding/branding-configuration.model';
+import { CloneSettingExist } from 'src/app/core/models/common/clone-setting.model';
+import { DestinationAttribute } from 'src/app/core/models/db/destination-attribute.model';
+import { ConfigurationCta, ConfigurationWarningEvent, ToastSeverity, XeroOnboardingState } 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 { XeroCredentials } from 'src/app/core/models/xero/db/xero-credential.model';
+import { TenantMapping, TenantMappingModel, TenantMappingPost } from 'src/app/core/models/xero/db/xero-tenant-mapping.model';
+import { XeroExportSettingGet } from 'src/app/core/models/xero/xero-configuration/xero-export-settings.model';
+import { XeroOnboardingModel } from 'src/app/core/models/xero/xero-configuration/xero-onboarding.model';
+import { CloneSettingService } from 'src/app/core/services/common/clone-setting.service';
+import { HelperService } from 'src/app/core/services/common/helper.service';
+import { IntegrationsToastService } from 'src/app/core/services/common/integrations-toast.service';
+import { WorkspaceService } from 'src/app/core/services/common/workspace.service';
+import { UserService } from 'src/app/core/services/misc/user.service';
+import { XeroConnectorService } from 'src/app/core/services/xero/xero-configuration/xero-connector.service';
+import { XeroExportSettingsService } from 'src/app/core/services/xero/xero-configuration/xero-export-settings.service';
+import { XeroHelperService } from 'src/app/core/services/xero/xero-core/xero-helper.service';
+import { environment } from 'src/environments/environment';
@Component({
selector: 'app-xero-onboarding-connector',
@@ -7,9 +29,231 @@ import { Component, OnInit } from '@angular/core';
})
export class XeroOnboardingConnectorComponent implements OnInit {
- constructor() { }
+ brandingContent = brandingContent.xero.configuration.connector;
+
+ onboardingSteps: OnboardingStepper[] = new XeroOnboardingModel().getOnboardingSteps(this.brandingContent.stepName, this.workspaceService.getOnboardingState());
+
+ isLoading: boolean = true;
+
+ redirectLink: string = brandingKbArticles.onboardingArticles.XERO.CONNECTOR;
+
+ brandingConfig: BrandingConfiguration = brandingConfig;
+
+ ConfigurationCtaText = ConfigurationCta;
+
+ saveInProgress: boolean = false;
+
+ xeroConnectionInProgress: boolean = false;
+
+ xeroCompanyName: string | null;
+
+ isContinueDisabled: boolean = true;
+
+ showDisconnectQBO: boolean = false;
+
+ isWarningDialogVisible: boolean = false;
+
+ xeroTokenExpired: boolean = false;
+
+ isXeroConnected: boolean = false;
+
+ private oauthCallbackSubscription: Subscription;
+
+ readonly fyleOrgName: string = this.userService.getUserProfile().org_name;
+
+ private isCloneSettingsDisabled: boolean;
+
+ warningHeaderText: string;
+
+ warningContextText: string;
+
+ primaryButtonText: string;
+
+ warningEvent: ConfigurationWarningEvent;
+
+ showDisconnectXero: boolean;
+
+ tenantList: DestinationAttribute[];
+
+ xeroTenantselected: DestinationAttribute;
+
+ constructor(
+ private workspaceService: WorkspaceService,
+ private userService: UserService,
+ private xeroConnectorService: XeroConnectorService,
+ private exportSettingService: XeroExportSettingsService,
+ private helperService: HelperService,
+ private router: Router,
+ private toastService: IntegrationsToastService,
+ private cloneSettingService: CloneSettingService,
+ private xeroHelperService: XeroHelperService
+ ) { }
+
+ private checkCloneSettingsAvailablity(): void {
+ this.cloneSettingService.checkCloneSettingsExists().subscribe((response: CloneSettingExist) => {
+ if (response.is_available) {
+ this.warningHeaderText = 'Your settings are pre-filled';
+ this.warningContextText = `Your previous organization's settings (${response.workspace_name}) have been copied over to the current organization
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ You can change the settings or reset the configuration to restart the process from the beginning
`; + this.primaryButtonText = 'Continue'; + this.warningEvent = ConfigurationWarningEvent.CLONE_SETTINGS; + this.isWarningDialogVisible = true; + this.isContinueDisabled = false; + this.isCloneSettingsDisabled = true; + } else { + this.router.navigate(['/integrations/xero/onboarding/export_settings']); + } + }); + } + + disconnectXero(): void { + this.isLoading = true; + this.xeroConnectorService.revokeXeroConnection(this.workspaceService.getWorkspaceId()).subscribe(() => { + this.showDisconnectXero = false; + this.xeroCompanyName = null; + this.xeroConnectionInProgress = false; + this.isXeroConnected = false; + this.isContinueDisabled = true; + this.xeroConnectorService.getXeroCredentials(this.workspaceService.getWorkspaceId()).subscribe((xeroCredentials: XeroCredentials) => { + this.showOrHideDisconnectXero(); + }, (error) => { + // Token expired + if ('id' in error.error) { + // We have a Xero row present in DB + this.xeroTokenExpired = error.error.is_expired; + if (this.xeroTokenExpired) { + this.xeroCompanyName = error.error.company_name; + } + } + this.isContinueDisabled = true; + this.isXeroConnected = false; + this.isLoading = false; + }); + }); + } + + private postXeroCredentials(code: string): void { + this.xeroConnectorService.connectXero(this.workspaceService.getWorkspaceId(), code).subscribe((xeroCredentials: XeroCredentials) => { + this.isXeroConnected = true; + this.xeroConnectionInProgress = false; + }, (error) => { + const errorMessage = 'message' in error.error ? error.error.message : 'Failed to connect to Xero Tenant. Please try again'; + if (errorMessage === 'Please choose the correct Xero Tenten') { + this.isXeroConnected = false; + this.xeroConnectionInProgress = false; + } else { + this.toastService.displayToastMessage(ToastSeverity.ERROR, errorMessage); + this.router.navigate([`/integrations/xero/onboarding/landing`]); + } + }); + } + + connectXero(companyDetails: DestinationAttribute): void { + this.xeroTenantselected = companyDetails; + this.isContinueDisabled = false; + } + + connectToXero() { + this.xeroConnectionInProgress = true; + const url = `${environment.xero_authorize_uri}?client_id=${environment.xero_oauth_client_id}&scope=${environment.xero_scope}&response_type=code&redirect_uri=${environment.xero_oauth_redirect_uri}&state=xero_local_redirect`; + this.oauthCallbackSubscription = this.helperService.oauthCallbackUrl.subscribe((callbackURL: string) => { + const code = callbackURL.split('code=')[1]?.split('&')[0]; + this.postXeroCredentials(code); + }); + this.helperService.oauthHandler(url); + } + + acceptWarning(data: ConfigurationWarningOut): void { + this.isWarningDialogVisible = false; + if (data.hasAccepted) { + if (data.event === ConfigurationWarningEvent.CLONE_SETTINGS) { + this.router.navigate(['/integrations/xero/onboarding/clone_settings']); + } + } + } + + private constructPayloadAndSave(): void { + if (this.isContinueDisabled) { + return; + } else if (this.isCloneSettingsDisabled && this.xeroCompanyName) { + this.router.navigate(['/integrations/xero/onboarding/export_settings']); + return; + } + if (this.xeroTenantselected && !this.xeroCompanyName) { + this.xeroConnectionInProgress = true; + this.isContinueDisabled = true; + const tenantMappingPayload: TenantMappingPost = TenantMappingModel.constructPayload(this.xeroTenantselected); + this.xeroConnectorService.postTenantMapping(tenantMappingPayload).subscribe((response:TenantMapping) => { + this.xeroHelperService.refreshXeroDimensions().subscribe(() => { + this.workspaceService.setOnboardingState(XeroOnboardingState.EXPORT_SETTINGS); + this.xeroConnectionInProgress = false; + this.xeroTokenExpired = false; + this.showOrHideDisconnectXero(); + this.isXeroConnected = true; + this.xeroCompanyName = response.tenant_name; + this.checkCloneSettingsAvailablity(); + }); + }); + } else if (!this.isContinueDisabled && this.xeroCompanyName){ + this.checkCloneSettingsAvailablity(); + } + } + + save(): void { + if (this.isContinueDisabled) { + return; + } else if (this.isCloneSettingsDisabled) { + this.constructPayloadAndSave(); + return; + } + + if (!brandingFeatureConfig.featureFlags.cloneSettings) { + this.constructPayloadAndSave(); + } else { + this.checkCloneSettingsAvailablity(); + } + } + + getTenant() { + this.xeroConnectorService.getXeroTenants().subscribe((tenantList: DestinationAttribute[]) => { + this.tenantList = tenantList; + this.isXeroConnected = false; + this.isContinueDisabled = true; + this.xeroConnectionInProgress = false; + this.showOrHideDisconnectXero(); + }); + } + + private showOrHideDisconnectXero(): void { + this.exportSettingService.getExportSettings().subscribe((exportSettings: XeroExportSettingGet) => { + // Do nothing + this.isLoading = false; + + if (!(exportSettings.workspace_general_settings?.reimbursable_expenses_object || exportSettings.workspace_general_settings?.corporate_credit_card_expenses_object)) { + this.showDisconnectXero = true; + } + }, () => { + // Showing Disconnect Xero button since the customer didn't set up the next step + this.showDisconnectXero = true; + this.isLoading = false; + }); + } + + private setupPage() { + this.xeroConnectorService.getTenantMappings().subscribe((tenant: TenantMapping) => { + this.xeroCompanyName = tenant.tenant_name; + this.isXeroConnected = true; + this.isContinueDisabled = false; + this.showOrHideDisconnectXero(); + this.xeroConnectionInProgress = false; + }, + () => { + this.getTenant(); + }); + } ngOnInit(): void { + this.setupPage(); } } diff --git a/src/app/integrations/xero/xero-onboarding/xero-onboarding-done/xero-onboarding-done.component.html b/src/app/integrations/xero/xero-onboarding/xero-onboarding-done/xero-onboarding-done.component.html index 2c41378ad..59345d37f 100644 --- a/src/app/integrations/xero/xero-onboarding/xero-onboarding-done/xero-onboarding-done.component.html +++ b/src/app/integrations/xero/xero-onboarding/xero-onboarding-done/xero-onboarding-done.component.html @@ -1 +1 @@ -
xero-onboarding-done works!
+xero-onboarding-export-settings works!
+
+
diff --git a/src/app/integrations/xero/xero-onboarding/xero-onboarding-export-settings/xero-onboarding-export-settings.component.ts b/src/app/integrations/xero/xero-onboarding/xero-onboarding-export-settings/xero-onboarding-export-settings.component.ts
index 157c772d5..1eb90695a 100644
--- a/src/app/integrations/xero/xero-onboarding/xero-onboarding-export-settings/xero-onboarding-export-settings.component.ts
+++ b/src/app/integrations/xero/xero-onboarding/xero-onboarding-export-settings/xero-onboarding-export-settings.component.ts
@@ -1,4 +1,8 @@
import { Component, OnInit } from '@angular/core';
+import { brandingContent } from 'src/app/branding/branding-config';
+import { OnboardingStepper } from 'src/app/core/models/misc/onboarding-stepper.model';
+import { XeroOnboardingModel } from 'src/app/core/models/xero/xero-configuration/xero-onboarding.model';
+import { WorkspaceService } from 'src/app/core/services/common/workspace.service';
@Component({
selector: 'app-xero-onboarding-export-settings',
@@ -7,7 +11,13 @@ import { Component, OnInit } from '@angular/core';
})
export class XeroOnboardingExportSettingsComponent implements OnInit {
- constructor() { }
+ brandingContent = brandingContent.xero.configuration.exportSetting;
+
+ onboardingSteps: OnboardingStepper[] = new XeroOnboardingModel().getOnboardingSteps(this.brandingContent.stepName, this.workspaceService.getOnboardingState());
+
+ constructor(
+ private workspaceService: WorkspaceService
+ ) { }
ngOnInit(): void {
}
diff --git a/src/app/integrations/xero/xero-onboarding/xero-onboarding-import-settings/xero-onboarding-import-settings.component.html b/src/app/integrations/xero/xero-onboarding/xero-onboarding-import-settings/xero-onboarding-import-settings.component.html
index 96c11da89..22c596262 100644
--- a/src/app/integrations/xero/xero-onboarding/xero-onboarding-import-settings/xero-onboarding-import-settings.component.html
+++ b/src/app/integrations/xero/xero-onboarding/xero-onboarding-import-settings/xero-onboarding-import-settings.component.html
@@ -1 +1,4 @@
-xero-onboarding-import-settings works!
+
+
diff --git a/src/app/integrations/xero/xero-onboarding/xero-onboarding-import-settings/xero-onboarding-import-settings.component.ts b/src/app/integrations/xero/xero-onboarding/xero-onboarding-import-settings/xero-onboarding-import-settings.component.ts
index 27dfc9e63..76a104468 100644
--- a/src/app/integrations/xero/xero-onboarding/xero-onboarding-import-settings/xero-onboarding-import-settings.component.ts
+++ b/src/app/integrations/xero/xero-onboarding/xero-onboarding-import-settings/xero-onboarding-import-settings.component.ts
@@ -1,4 +1,8 @@
import { Component, OnInit } from '@angular/core';
+import { brandingContent } from 'src/app/branding/branding-config';
+import { OnboardingStepper } from 'src/app/core/models/misc/onboarding-stepper.model';
+import { XeroOnboardingModel } from 'src/app/core/models/xero/xero-configuration/xero-onboarding.model';
+import { WorkspaceService } from 'src/app/core/services/common/workspace.service';
@Component({
selector: 'app-xero-onboarding-import-settings',
@@ -7,7 +11,13 @@ import { Component, OnInit } from '@angular/core';
})
export class XeroOnboardingImportSettingsComponent implements OnInit {
- constructor() { }
+ brandingContent = brandingContent.xero.configuration.importSetting;
+
+ onboardingSteps: OnboardingStepper[] = new XeroOnboardingModel().getOnboardingSteps(this.brandingContent.stepName, this.workspaceService.getOnboardingState());
+
+ constructor(
+ private workspaceService: WorkspaceService
+ ) { }
ngOnInit(): void {
}
diff --git a/src/app/integrations/xero/xero-onboarding/xero-onboarding-landing/xero-onboarding-landing.component.html b/src/app/integrations/xero/xero-onboarding/xero-onboarding-landing/xero-onboarding-landing.component.html
index 6d618195e..79332a4a8 100644
--- a/src/app/integrations/xero/xero-onboarding/xero-onboarding-landing/xero-onboarding-landing.component.html
+++ b/src/app/integrations/xero/xero-onboarding/xero-onboarding-landing/xero-onboarding-landing.component.html
@@ -1 +1,17 @@
-xero-onboarding-landing works!
+
+
+
+
+
+
+
+xero-advanced-settings works!
+
+
+
+
diff --git a/src/app/integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.ts b/src/app/integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.ts
index 4615d75cf..c4cdcedd7 100644
--- a/src/app/integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.ts
+++ b/src/app/integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.ts
@@ -1,4 +1,19 @@
import { Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Router } from '@angular/router';
+import { forkJoin } from 'rxjs';
+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 { IntegrationsToastService } from 'src/app/core/services/common/integrations-toast.service';
+import { MappingService } from 'src/app/core/services/common/mapping.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';
@Component({
selector: 'app-xero-advanced-settings',
@@ -7,9 +22,108 @@ import { Component, OnInit } from '@angular/core';
})
export class XeroAdvancedSettingsComponent implements OnInit {
- constructor() { }
+ appName: AppName = AppName.XERO;
+
+ isLoading: boolean = true;
+
+ isOnboarding: boolean = false;
+
+ supportArticleLink: string = brandingKbArticles.onboardingArticles.XERO.ADVANCED_SETTING;
+
+ advancedSettings: XeroAdvancedSettingGet;
+
+ workspaceGeneralSettings: XeroWorkspaceGeneralSetting;
+
+ billPaymentAccounts: DestinationAttribute[];
+
+ advancedSettingForm: FormGroup;
+
+ memoStructure: string[] = [];
+
+ brandingConfig = brandingConfig;
+
+ adminEmails: EmailOption[] = [];
+
+ paymentSyncOptions: SelectFormOption[] = XeroAdvancedSettingModel.getPaymentSyncOptions();
+
+ hours: SelectFormOption[] = [...Array(24).keys()].map(day => {
+ return {
+ label: (day + 1).toString(),
+ value: day + 1
+ };
+ });
+
+ ConfigurationCtaText = ConfigurationCta;
+
+ isSaveInProgress: boolean;
+
+ readonly brandingFeatureConfig = brandingFeatureConfig;
+
+ readonly brandingContent = brandingContent.configuration.advancedSettings;
+
+
+ constructor(
+ private advancedSettingService: XeroAdvancedSettingsService,
+ private router: Router,
+ private workspaceService: WorkspaceService,
+ private xeroHelperService: XeroHelperService,
+ private mappingService: MappingService,
+ private toastService: IntegrationsToastService
+ ) { }
+
+ navigateToPreviousStep(): void {
+ this.router.navigate([`/integrations/xero/onboarding/import_settings`]);
+ }
+
+ save(): void {
+ const advancedSettingPayload = XeroAdvancedSettingModel.constructPayload(this.advancedSettingForm);
+ this.isSaveInProgress = true;
+
+ this.advancedSettingService.postAdvancedSettings(advancedSettingPayload).subscribe(() => {
+ this.isSaveInProgress = false;
+ this.toastService.displayToastMessage(ToastSeverity.SUCCESS, 'Advanced settings saved successfully');
+
+ if (this.isOnboarding) {
+ this.workspaceService.setOnboardingState(XeroOnboardingState.COMPLETE);
+ this.router.navigate([`/integrations/xero/onboarding/done`]);
+ }
+ }, () => {
+ this.isSaveInProgress = false;
+ this.toastService.displayToastMessage(ToastSeverity.ERROR, 'Error saving advanced settings, please try again later');
+ });
+ }
+
+ refreshDimensions() {
+ this.xeroHelperService.refreshXeroDimensions().subscribe();
+ }
+
+ private setupFormWatchers() {
+ XeroAdvancedSettingModel.setConfigurationSettingValidatorsAndWatchers(this.advancedSettingForm);
+ }
+
+
+ private setupPage() {
+ this.isOnboarding = this.router.url.includes('onboarding');
+ forkJoin([
+ this.advancedSettingService.getAdvancedSettings(),
+ this.mappingService.getDestinationAttributes(XeroFyleField.BANK_ACCOUNT, 'v1', 'xero'),
+ this.workspaceService.getWorkspaceGeneralSettings(),
+ 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.advancedSettingForm = XeroAdvancedSettingModel.mapAPIResponseToFormGroup(this.advancedSettings, this.adminEmails);
+
+ this.setupFormWatchers();
+ this.isLoading = false;
+ });
+ }
ngOnInit(): void {
+ this.setupPage();
}
}
diff --git a/src/app/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.html b/src/app/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.html
index dd1a112dd..4805b9d77 100644
--- a/src/app/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.html
+++ b/src/app/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.html
@@ -1 +1,205 @@
-
+
+
+
+
+xero-export-settings works!
+
+
+
+
+
+
+
+
+
+
+
+
+ xero-import-settings works!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/integrations/xero/xero-shared/xero-import-settings/xero-import-settings.component.ts b/src/app/integrations/xero/xero-shared/xero-import-settings/xero-import-settings.component.ts
index a0e7dfe9e..bdd4710ba 100644
--- a/src/app/integrations/xero/xero-shared/xero-import-settings/xero-import-settings.component.ts
+++ b/src/app/integrations/xero/xero-shared/xero-import-settings/xero-import-settings.component.ts
@@ -1,4 +1,21 @@
import { Component, OnInit } from '@angular/core';
+import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { forkJoin } from 'rxjs';
+import { brandingConfig, brandingContent, brandingFeatureConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { ExpenseField, ImportSettingMappingRow, ImportSettingsModel } from 'src/app/core/models/common/import-settings.model';
+import { DestinationAttribute } from 'src/app/core/models/db/destination-attribute.model';
+import { FyleField, IntegrationField } from 'src/app/core/models/db/mapping.model';
+import { AppName, ConfigurationCta, ToastSeverity, XeroOnboardingState } from 'src/app/core/models/enum/enum.model';
+import { XeroFyleField } from 'src/app/core/models/enum/enum.model';
+import { XeroWorkspaceGeneralSetting } from 'src/app/core/models/xero/db/xero-workspace-general-setting.model';
+import { XeroImportSettingGet, XeroImportSettingModel } from 'src/app/core/models/xero/xero-configuration/xero-import-settings.model';
+import { IntegrationsToastService } from 'src/app/core/services/common/integrations-toast.service';
+import { MappingService } from 'src/app/core/services/common/mapping.service';
+import { WorkspaceService } from 'src/app/core/services/common/workspace.service';
+import { XeroConnectorService } from 'src/app/core/services/xero/xero-configuration/xero-connector.service';
+import { XeroImportSettingsService } from 'src/app/core/services/xero/xero-configuration/xero-import-settings.service';
+import { XeroHelperService } from 'src/app/core/services/xero/xero-core/xero-helper.service';
@Component({
selector: 'app-xero-import-settings',
@@ -7,9 +24,264 @@ import { Component, OnInit } from '@angular/core';
})
export class XeroImportSettingsComponent implements OnInit {
- constructor() { }
+ isLoading: boolean = true;
+
+ appName: string = AppName.XERO;
+
+ isOnboarding: boolean;
+
+ importSettings: XeroImportSettingGet;
+
+ fyleExpenseFields: FyleField[];
+
+ workspaceGeneralSettings: XeroWorkspaceGeneralSetting;
+
+ xeroExpenseFields: IntegrationField[];
+
+ taxCodes: DestinationAttribute[];
+
+ importSettingsForm: FormGroup;
+
+ customFieldType: string;
+
+ customFieldControl: AbstractControl;
+
+ customFieldForm: FormGroup = this.formBuilder.group({
+ attribute_type: ['', Validators.required],
+ display_name: [''],
+ source_placeholder: ['', Validators.required]
+ });
+
+ showCustomFieldDialog: boolean;
+
+ isPreviewDialogVisible: boolean;
+
+ customField: ExpenseField;
+
+ customFieldOption: ExpenseField[] = ImportSettingsModel.getCustomFieldOption();
+
+ isSaveInProgress: boolean;
+
+ ConfigurationCtaText = ConfigurationCta;
+
+ chartOfAccountTypesList: string[] = XeroImportSettingModel.getChartOfAccountTypesList();
+
+ isTaxGroupSyncAllowed: boolean;
+
+ isProjectMapped: boolean;
+
+ isCustomerPresent: boolean;
+
+ readonly brandingFeatureConfig = brandingFeatureConfig;
+
+ readonly brandingContent = brandingContent.xero.configuration.importSetting;
+
+ readonly supportArticleLink = brandingKbArticles.onboardingArticles.XERO.IMPORT_SETTING;
+
+ readonly brandingConfig = brandingConfig;
+
+ constructor(
+ private importSettingService: XeroImportSettingsService,
+ private workspaceService: WorkspaceService,
+ private router: Router,
+ private mappingService: MappingService,
+ private xeroHelperService: XeroHelperService,
+ private formBuilder: FormBuilder,
+ private toastService: IntegrationsToastService,
+ private xeroConnectorService: XeroConnectorService
+ ) { }
+
+ closeModel() {
+ this.customFieldForm.reset();
+ this.showCustomFieldDialog = false;
+ }
+
+ showPreviewDialog(visible: boolean) {
+ this.isPreviewDialogVisible = visible;
+ }
+
+ closeDialog() {
+ this.isPreviewDialogVisible = false;
+ }
+
+ refreshDimensions() {
+ this.xeroHelperService.refreshXeroDimensions().subscribe();
+ }
+
+ navigateToPreviousStep(): void {
+ this.router.navigate([`/integrations/qbo/onboarding/export_settings`]);
+ }
+
+ saveFyleExpenseField(): void {
+ this.customField = {
+ attribute_type: this.customFieldForm.value.attribute_type.split(' ').join('_').toUpperCase(),
+ display_name: this.customFieldForm.value.attribute_type,
+ source_placeholder: this.customFieldForm.value.source_placeholder,
+ is_dependent: false
+ };
+
+ if (this.customFieldControl) {
+ this.fyleExpenseFields.pop();
+ this.fyleExpenseFields.push(this.customField);
+ this.fyleExpenseFields.push(this.customFieldOption[0]);
+ const expenseField = {
+ source_field: this.customField.attribute_type,
+ destination_field: this.customFieldControl.value.destination_field,
+ import_to_fyle: true,
+ is_custom: true,
+ source_placeholder: this.customField.source_placeholder
+ };
+ (this.importSettingsForm.get('expenseFields') as FormArray).controls.filter(field => field.value.destination_field === this.customFieldControl.value.destination_field)[0].patchValue(expenseField);
+ ((this.importSettingsForm.get('expenseFields') as FormArray).controls.filter(field => field.value.destination_field === this.customFieldControl.value.destination_field)[0] as FormGroup).controls.import_to_fyle.disable();
+ this.customFieldForm.reset();
+ this.showCustomFieldDialog = false;
+ }
+ }
+
+ private initializeCustomFieldForm(shouldShowDialog: boolean) {
+ this.customFieldForm.reset();
+ this.showCustomFieldDialog = shouldShowDialog;
+ }
+
+ private createTaxCodeWatcher(): void {
+ this.importSettingsForm.controls.taxCode.valueChanges.subscribe((isTaxCodeEnabled) => {
+ if (isTaxCodeEnabled) {
+ this.importSettingsForm.controls.defaultTaxCode.setValidators(Validators.required);
+ } else {
+ this.importSettingsForm.controls.defaultTaxCode.clearValidators();
+ this.importSettingsForm.controls.defaultTaxCode.setValue(null);
+ }
+ });
+ }
+
+ private createCOAWatcher(): void {
+ this.importSettingsForm.controls.importCategories.valueChanges.subscribe((isImportCategoriesEnabled) => {
+ if (!isImportCategoriesEnabled) {
+ this.importSettingsForm.controls.chartOfAccountTypes.setValue(['Expense']);
+ }
+ });
+ }
+
+ private setupFormWatchers(): void {
+ this.createTaxCodeWatcher();
+ this.createImportCustomerWatcher();
+ this.createCOAWatcher();
+ const expenseFieldArray = this.importSettingsForm.get('expenseFields') as FormArray;
+ expenseFieldArray.controls.forEach((control:any) => {
+ control.valueChanges.subscribe((value: { source_field: string; destination_field: string; }) => {
+ if (value.source_field === 'custom_field') {
+ this.initializeCustomFieldForm(true);
+ this.customFieldType = '';
+ this.customFieldControl = control;
+ this.customFieldControl.patchValue({
+ source_field: '',
+ destination_field: control.value.destination_field,
+ import_to_fyle: control.value.import_to_fyle,
+ is_custom: control.value.is_custom,
+ source_placeholder: null
+ });
+ }
+ });
+ });
+ }
+
+ private constructPayloadAndSave() {
+ this.isSaveInProgress = true;
+ const importSettingPayload = XeroImportSettingModel.constructPayload(this.importSettingsForm);
+ this.importSettingService.postImportSettings(importSettingPayload).subscribe(() => {
+ this.isSaveInProgress = false;
+ this.toastService.displayToastMessage(ToastSeverity.SUCCESS, 'Import settings saved successfully');
+
+ if (this.isOnboarding) {
+ this.workspaceService.setOnboardingState(XeroOnboardingState.ADVANCED_CONFIGURATION);
+ this.router.navigate([`/integrations/xero/onboarding/advanced_settings`]);
+ }
+ }, () => {
+ this.isSaveInProgress = false;
+ this.toastService.displayToastMessage(ToastSeverity.ERROR, 'Error saving import settings, please try again later');
+ });
+ }
+
+ save(): void {
+ if (this.importSettingsForm.valid) {
+ this.constructPayloadAndSave();
+ }
+ }
+
+ private createImportCustomerWatcher(): void {
+ if (brandingConfig.brandId === 'co') {
+ const formArray = this.importSettingsForm.get('expenseFields') as FormArray;
+ const index = formArray.value.findIndex((data:any) => data.destination_field === XeroFyleField.CUSTOMER);
+ formArray.controls.at(index)?.get('import_to_fyle')?.valueChanges.subscribe((isCustomerImportEnabled) => {
+ if (isCustomerImportEnabled) {
+ formArray.controls.at(index)?.get('source_field')?.patchValue(XeroFyleField.PROJECT);
+ this.importSettingsForm.controls.importCustomers.patchValue(true);
+ } else {
+ formArray.controls.at(index)?.get('source_field')?.patchValue('DISABLED_XERO_SOURCE_FIELD');
+ this.importSettingsForm.controls.importCustomers.patchValue(false);
+ }
+ });
+ } else {
+ this.importSettingsForm.controls.importCustomers.valueChanges.subscribe((isCustomerImportEnabled) => {
+ if (isCustomerImportEnabled) {
+ this.fyleExpenseFields = this.fyleExpenseFields.filter((field) => field.attribute_type !== XeroFyleField.PROJECT);
+ } else {
+ const fyleField = this.fyleExpenseFields.filter((field) => field.attribute_type === XeroFyleField.PROJECT);
+ if (fyleField.length === 0) {
+ this.fyleExpenseFields.pop();
+ this.fyleExpenseFields.push({ attribute_type: XeroFyleField.PROJECT, display_name: 'Project', is_dependent: false });
+ this.fyleExpenseFields.push(this.customFieldOption[0]);
+ }
+ }
+ });
+ }
+ }
+
+ setupPage() {
+ this.isOnboarding = this.router.url.includes('onboarding');
+ forkJoin([
+ this.importSettingService.getImportSettings(),
+ this.mappingService.getFyleFields('v1'),
+ this.importSettingService.getXeroField(),
+ this.mappingService.getDestinationAttributes(XeroFyleField.TAX_CODE, 'v1', 'xero'),
+ this.workspaceService.getWorkspaceGeneralSettings(),
+ this.xeroConnectorService.getXeroCredentials(this.workspaceService.getWorkspaceId())
+ ]).subscribe(response => {
+ this.importSettings = response[0];
+ this.fyleExpenseFields = response[1];
+ this.xeroExpenseFields = response[2];
+ this.taxCodes = response[3];
+ this.workspaceGeneralSettings = response[4];
+
+ this.isCustomerPresent = this.xeroExpenseFields.findIndex((data:IntegrationField) => data.attribute_type === XeroFyleField.CUSTOMER) !== -1 ? true : false;
+
+ this.importSettingsForm = XeroImportSettingModel.mapAPIResponseToFormGroup(this.importSettings, this.xeroExpenseFields, this.isCustomerPresent);
+
+ if (response[5] && response[5].country !== 'US') {
+ this.isTaxGroupSyncAllowed = true;
+ }
+
+ // This is only for Fyle
+ if (brandingConfig.brandId !== 'co') {
+ this.xeroExpenseFields = this.xeroExpenseFields.filter((data) => data.attribute_type !== XeroFyleField.CUSTOMER);
+ }
+
+ this.isProjectMapped = this.importSettings.mapping_settings.findIndex((data) => data.source_field === XeroFyleField.PROJECT && data.destination_field !== XeroFyleField.CUSTOMER) !== -1 ? true : false;
+
+ this.fyleExpenseFields.push({ attribute_type: 'custom_field', display_name: 'Create a Custom Field', is_dependent: true });
+ this.setupFormWatchers();
+ this.initializeCustomFieldForm(false);
+
+ this.isLoading = false;
+ });
+ }
+
+ updateCustomerImportAvailability(isMapped: boolean) {
+ this.isProjectMapped = isMapped;
+ }
ngOnInit(): void {
+ this.setupPage();
}
}
diff --git a/src/app/integrations/xero/xero-shared/xero-shared.module.ts b/src/app/integrations/xero/xero-shared/xero-shared.module.ts
index 3b75313b4..3cb6c47d9 100644
--- a/src/app/integrations/xero/xero-shared/xero-shared.module.ts
+++ b/src/app/integrations/xero/xero-shared/xero-shared.module.ts
@@ -4,6 +4,7 @@ import { XeroAdvancedSettingsComponent } from './xero-advanced-settings/xero-adv
import { XeroExportSettingsComponent } from './xero-export-settings/xero-export-settings.component';
import { XeroImportSettingsComponent } from './xero-import-settings/xero-import-settings.component';
import { SharedModule } from 'src/app/shared/shared.module';
+import { MultiSelectModule } from 'primeng/multiselect';
@NgModule({
declarations: [
@@ -13,7 +14,8 @@ import { SharedModule } from 'src/app/shared/shared.module';
],
imports: [
CommonModule,
- SharedModule
+ SharedModule,
+ MultiSelectModule
],
exports: [
XeroExportSettingsComponent,
diff --git a/src/app/integrations/xero/xero.module.ts b/src/app/integrations/xero/xero.module.ts
index e43b6d6ac..f4000278f 100644
--- a/src/app/integrations/xero/xero.module.ts
+++ b/src/app/integrations/xero/xero.module.ts
@@ -2,12 +2,16 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { XeroRoutingModule } from './xero-routing.module';
+import { XeroSharedModule } from './xero-shared/xero-shared.module';
+import { SharedModule } from 'src/app/shared/shared.module';
@NgModule({
declarations: [],
imports: [
CommonModule,
- XeroRoutingModule
+ XeroRoutingModule,
+ XeroSharedModule,
+ SharedModule
]
})
export class XeroModule { }
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 a47007587..3441b6160 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
@@ -47,7 +47,7 @@
-
-
+
@@ -90,7 +90,7 @@
+
diff --git a/src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.ts b/src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.ts
index 0a9c727e1..fee783dcf 100644
--- a/src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.ts
+++ b/src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.ts
@@ -3,7 +3,7 @@ import { AbstractControl, FormArray, FormGroup } from '@angular/forms';
import { brandingConfig, brandingFeatureConfig } from 'src/app/branding/branding-config';
import { ImportDefaultField, ImportSettingMappingRow, ImportSettingsCustomFieldRow, ImportSettingsModel } from 'src/app/core/models/common/import-settings.model';
import { FyleField, IntegrationField } from 'src/app/core/models/db/mapping.model';
-import { AppName, MappingSourceField } from 'src/app/core/models/enum/enum.model';
+import { AppName, MappingSourceField, XeroFyleField } from 'src/app/core/models/enum/enum.model';
import { Sage300DefaultFields, Sage300DependentImportFields, Sage300ImportSettingModel } from 'src/app/core/models/sage300/sage300-configuration/sage300-import-settings.model';
import { MappingSetting } from 'src/app/core/models/intacct/intacct-configuration/import-settings.model';
import { HelperService } from 'src/app/core/services/common/helper.service';
@@ -50,12 +50,16 @@ export class ConfigurationImportFieldComponent implements OnInit {
AppName = AppName;
+ isXeroProjectMapped: boolean;
+
readonly brandingConfig = brandingConfig;
readonly brandingFeatureConfig = brandingFeatureConfig;
readonly isAsterikAllowed: boolean = brandingFeatureConfig.isAsterikAllowed;
+ @Output() xeroProjectMapping:EventEmitter = new EventEmitter();
+
constructor(
public windowService: WindowService
) { }
@@ -105,6 +109,23 @@ export class ConfigurationImportFieldComponent implements OnInit {
} else {
(this.form.get('expenseFields') as FormArray).at(index)?.get('import_to_fyle')?.setValue(true);
}
+
+ if (selectedValue === MappingSourceField.PROJECT && (this.form.get('expenseFields') as FormArray).at(index)?.get('source_field')?.value !== XeroFyleField.CUSTOMER && this.appName === AppName.XERO) {
+ this.isXeroProjectMapped = true;
+ this.xeroProjectMapping.emit(this.isXeroProjectMapped);
+ } else {
+ this.isXeroProjectMapped = false;
+ this.xeroProjectMapping.emit(this.isXeroProjectMapped);
+ }
+ }
+
+ getOptions(expenseField: AbstractControl): FyleField[]{
+ if (expenseField.value.destination_field === 'CUSTOMER' && this.appName === AppName.XERO && !expenseField.value.import_to_fyle) {
+ return this.filteredFyleFields;
+ } else if (expenseField.value.source_field === 'CATEGORY') {
+ return this.fyleFieldOptions;
+ }
+ return this.fyleFieldOptions;
}
removeFilter(expenseField: AbstractControl) {
@@ -112,6 +133,8 @@ export class ConfigurationImportFieldComponent implements OnInit {
(expenseField as FormGroup).controls.import_to_fyle.patchValue(false);
(expenseField as FormGroup).controls.import_to_fyle.enable();
event?.stopPropagation();
+ this.isXeroProjectMapped = false;
+ this.xeroProjectMapping.emit(this.isXeroProjectMapped);
}
onShowWarningForDependentFields(event: any, formGroup: AbstractControl): void {
@@ -132,7 +155,7 @@ export class ConfigurationImportFieldComponent implements OnInit {
}
ngOnInit(): void {
- this.filteredFyleFields = this.fyleFieldOptions.filter(option => option.attribute_type !== 'CATEGORY');
+ this.filteredFyleFields = this.appName !== AppName.XERO ? this.fyleFieldOptions.filter(option => option.attribute_type !== 'CATEGORY') : [{ attribute_type: 'DISABLED_XERO_SOURCE_FIELD', display_name: 'Project', is_dependent: false }];
}
}
diff --git a/src/app/shared/components/configuration/configuration-toggle-field/configuration-toggle-field.component.html b/src/app/shared/components/configuration/configuration-toggle-field/configuration-toggle-field.component.html
index 5cbb934a1..1c087c0ed 100644
--- a/src/app/shared/components/configuration/configuration-toggle-field/configuration-toggle-field.component.html
+++ b/src/app/shared/components/configuration/configuration-toggle-field/configuration-toggle-field.component.html
@@ -22,6 +22,6 @@
-
+
+ ![]()
+
diff --git a/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.ts b/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.ts
index dd59939ab..cda9f112a 100644
--- a/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.ts
+++ b/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.ts
@@ -51,6 +51,8 @@ export class AppLandingPageHeaderComponent implements OnInit {
@Input() showQBOButton: boolean;
+ @Input() showXeroButton: boolean;
+
@Input() logoWidth: string = '140px';
@Input() logoStyleClasses: string = 'tw-py-10-px tw-px-20-px';
@@ -59,6 +61,8 @@ export class AppLandingPageHeaderComponent implements OnInit {
qboConnectButtonSource: string = 'assets/buttons/connect-to-qbo.svg';
+ xeroConnectButtonSource: string = 'assets/buttons/connect-to-xero.svg';
+
readonly brandingConfig = brandingConfig;
readonly isGradientAllowed: boolean = brandingFeatureConfig.isGradientAllowed;
@@ -87,7 +91,7 @@ export class AppLandingPageHeaderComponent implements OnInit {
connect(): void {
- if (this.appName === AppName.TRAVELPERK || this.appName === AppName.BUSINESS_CENTRAL || this.appName === AppName.BAMBOO_HR) {
+ if (this.appName === AppName.TRAVELPERK || this.appName === AppName.BUSINESS_CENTRAL || this.appName === AppName.BAMBOO_HR || this.appName === AppName.XERO) {
this.initiateOAuth();
return;
} else if (this.postConnectionRoute === 'qbd/onboarding/export_settings') {
diff --git a/src/app/shared/components/input/dropdown/dropdown.component.html b/src/app/shared/components/input/dropdown/dropdown.component.html
index 613bc17eb..2eafb9c8a 100644
--- a/src/app/shared/components/input/dropdown/dropdown.component.html
+++ b/src/app/shared/components/input/dropdown/dropdown.component.html
@@ -4,6 +4,7 @@
[ngClass]="additionalClasses ? additionalClasses : ''"
[placeholder]="placeholder"
[options]="options"
+ [disabled]="isDisabled"
[formControlName]="formControllerName">
-
-
+
diff --git a/src/app/shared/components/configuration/configuration-toggle-field/configuration-toggle-field.component.ts b/src/app/shared/components/configuration/configuration-toggle-field/configuration-toggle-field.component.ts
index 4438c1277..924c295e7 100644
--- a/src/app/shared/components/configuration/configuration-toggle-field/configuration-toggle-field.component.ts
+++ b/src/app/shared/components/configuration/configuration-toggle-field/configuration-toggle-field.component.ts
@@ -1,6 +1,7 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { brandingConfig, brandingContent, brandingFeatureConfig } from 'src/app/branding/branding-config';
+import { AppName } from 'src/app/core/models/enum/enum.model';
import { WindowService } from 'src/app/core/services/common/window.service';
@Component({
@@ -28,6 +29,12 @@ export class ConfigurationToggleFieldComponent implements OnInit {
@Input() hideToggle: boolean = false;
+ @Input() disabled: boolean = false;
+
+ @Input() appName: string;
+
+ AppName = AppName;
+
readonly brandingFeatureConfig = brandingFeatureConfig;
readonly isAsterikAllowed: boolean = brandingFeatureConfig.isAsterikAllowed;
@@ -36,6 +43,8 @@ export class ConfigurationToggleFieldComponent implements OnInit {
readonly brandingConfig = brandingConfig;
+ readonly brandingXeroContent = brandingContent.xero.configuration.importSetting.toggleToastMessage;
+
constructor(
public windowService: WindowService
) { }
diff --git a/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.html b/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.html
index 00a20ffbf..6e9204ddc 100644
--- a/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.html
+++ b/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.html
@@ -52,6 +52,11 @@
(mouseover)="qboConnectButtonSource = 'assets/buttons/connect-to-qbo-active.svg'"
(mouseout)="qboConnectButtonSource = 'assets/buttons/connect-to-qbo.svg'">
+
@@ -90,7 +90,7 @@
+
+
diff --git a/src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.ts b/src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.ts
index 0a9c727e1..fee783dcf 100644
--- a/src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.ts
+++ b/src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.ts
@@ -3,7 +3,7 @@ import { AbstractControl, FormArray, FormGroup } from '@angular/forms';
import { brandingConfig, brandingFeatureConfig } from 'src/app/branding/branding-config';
import { ImportDefaultField, ImportSettingMappingRow, ImportSettingsCustomFieldRow, ImportSettingsModel } from 'src/app/core/models/common/import-settings.model';
import { FyleField, IntegrationField } from 'src/app/core/models/db/mapping.model';
-import { AppName, MappingSourceField } from 'src/app/core/models/enum/enum.model';
+import { AppName, MappingSourceField, XeroFyleField } from 'src/app/core/models/enum/enum.model';
import { Sage300DefaultFields, Sage300DependentImportFields, Sage300ImportSettingModel } from 'src/app/core/models/sage300/sage300-configuration/sage300-import-settings.model';
import { MappingSetting } from 'src/app/core/models/intacct/intacct-configuration/import-settings.model';
import { HelperService } from 'src/app/core/services/common/helper.service';
@@ -50,12 +50,16 @@ export class ConfigurationImportFieldComponent implements OnInit {
AppName = AppName;
+ isXeroProjectMapped: boolean;
+
readonly brandingConfig = brandingConfig;
readonly brandingFeatureConfig = brandingFeatureConfig;
readonly isAsterikAllowed: boolean = brandingFeatureConfig.isAsterikAllowed;
+ @Output() xeroProjectMapping:EventEmitter
-
+ ![]()
+
diff --git a/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.ts b/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.ts
index dd59939ab..cda9f112a 100644
--- a/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.ts
+++ b/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.ts
@@ -51,6 +51,8 @@ export class AppLandingPageHeaderComponent implements OnInit {
@Input() showQBOButton: boolean;
+ @Input() showXeroButton: boolean;
+
@Input() logoWidth: string = '140px';
@Input() logoStyleClasses: string = 'tw-py-10-px tw-px-20-px';
@@ -59,6 +61,8 @@ export class AppLandingPageHeaderComponent implements OnInit {
qboConnectButtonSource: string = 'assets/buttons/connect-to-qbo.svg';
+ xeroConnectButtonSource: string = 'assets/buttons/connect-to-xero.svg';
+
readonly brandingConfig = brandingConfig;
readonly isGradientAllowed: boolean = brandingFeatureConfig.isGradientAllowed;
@@ -87,7 +91,7 @@ export class AppLandingPageHeaderComponent implements OnInit {
connect(): void {
- if (this.appName === AppName.TRAVELPERK || this.appName === AppName.BUSINESS_CENTRAL || this.appName === AppName.BAMBOO_HR) {
+ if (this.appName === AppName.TRAVELPERK || this.appName === AppName.BUSINESS_CENTRAL || this.appName === AppName.BAMBOO_HR || this.appName === AppName.XERO) {
this.initiateOAuth();
return;
} else if (this.postConnectionRoute === 'qbd/onboarding/export_settings') {
diff --git a/src/app/shared/components/input/dropdown/dropdown.component.html b/src/app/shared/components/input/dropdown/dropdown.component.html
index 613bc17eb..2eafb9c8a 100644
--- a/src/app/shared/components/input/dropdown/dropdown.component.html
+++ b/src/app/shared/components/input/dropdown/dropdown.component.html
@@ -4,6 +4,7 @@
[ngClass]="additionalClasses ? additionalClasses : ''"
[placeholder]="placeholder"
[options]="options"
+ [disabled]="isDisabled"
[formControlName]="formControllerName">
-
diff --git a/src/app/shared/components/input/toggle/toggle.component.ts b/src/app/shared/components/input/toggle/toggle.component.ts
index 7f7344e95..7d9f11064 100644
--- a/src/app/shared/components/input/toggle/toggle.component.ts
+++ b/src/app/shared/components/input/toggle/toggle.component.ts
@@ -12,6 +12,8 @@ export class ToggleComponent {
@Input() formControllerName: string;
+ @Input() isDisabled: boolean;
+
constructor() { }
}
diff --git a/src/app/shared/components/onboarding/clone-setting/clone-setting-field/clone-setting-field.component.html b/src/app/shared/components/onboarding/clone-setting/clone-setting-field/clone-setting-field.component.html
index 30142dbf5..febfb0120 100644
--- a/src/app/shared/components/onboarding/clone-setting/clone-setting-field/clone-setting-field.component.html
+++ b/src/app/shared/components/onboarding/clone-setting/clone-setting-field/clone-setting-field.component.html
@@ -1,6 +1,6 @@
-