Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

xero advanced settings html cooding #671

Merged
merged 5 commits into from
Mar 18, 2024
Merged

xero advanced settings html cooding #671

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2bd24fe
xero advanced settings html cooding
Mar 14, 2024
2cef126
save changes
Mar 15, 2024
3df184b
PR comments fix
Mar 15, 2024
edb26aa
PR comments fix
Mar 15, 2024
16ecb36
Xero Onboarding done coding (#672)
DhaaraniCIT Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions src/app/core/models/xero/xero-configuration/xero-advanced-settings.model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -107,13 +107,12 @@ 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) : []),
Expand Down
112 changes: 111 additions & 1 deletion ...ntegrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
[form]="advancedSettingForm"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also check if reimbursable export is present

[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
[form]="advancedSettingForm"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

check if ccc export is enabled

[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>
83 changes: 9 additions & 74 deletions .../integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -29,8 +26,6 @@ export class XeroAdvancedSettingsComponent implements OnInit {

isLoading: boolean = true;

saveInProgress: boolean;

isOnboarding: boolean = false;

supportArticleLink: string = brandingKbArticles.onboardingArticles.XERO.ADVANCED_SETTING;
Expand Down Expand Up @@ -70,12 +65,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
Expand All @@ -85,41 +83,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;

Expand All @@ -141,30 +105,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();
}


Expand All @@ -174,21 +116,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;
Expand Down
Loading