diff --git a/src/app/fyle/add-edit-expense/add-edit-expense-1.spec.ts b/src/app/fyle/add-edit-expense/add-edit-expense-1.spec.ts index 1231382fc2..0e3f4fa658 100644 --- a/src/app/fyle/add-edit-expense/add-edit-expense-1.spec.ts +++ b/src/app/fyle/add-edit-expense/add-edit-expense-1.spec.ts @@ -680,8 +680,25 @@ export function TestCases1(getTestBed) { spyOn(component, 'getCustomFields').and.returnValue(of(customFieldData1)); component.txnFields$ = of(expenseFieldObjData); spyOn(component, 'generateEtxnFromFg').and.returnValue(of(unflattenedExpData)); + const splitConfig = { + category: { + is_visible: !!expenseFieldObjData.org_category_id, + value: component.getFormValues().category, + is_mandatory: expenseFieldObjData.org_category_id?.is_mandatory || false, + }, + project: { + is_visible: !!expenseFieldObjData.project_id, + value: component.getFormValues().project, + is_mandatory: expenseFieldObjData.project_id?.is_mandatory || false, + }, + costCenter: { + is_visible: !!expenseFieldObjData.cost_center_id, + value: component.getFormValues().costCenter, + is_mandatory: expenseFieldObjData.cost_center_id?.is_mandatory || false, + }, + }; - component.openSplitExpenseModal('projects'); + component.openSplitExpenseModal(); expect(component.getCustomFields).toHaveBeenCalledTimes(1); expect(component.generateEtxnFromFg).toHaveBeenCalledTimes(1); expect(router.navigate).toHaveBeenCalledOnceWith([ @@ -689,7 +706,7 @@ export function TestCases1(getTestBed) { 'enterprise', 'split_expense', { - splitType: 'projects', + splitConfig, txnFields: JSON.stringify(txnFieldsMap2), txn: JSON.stringify(unflattenedExpData.tx), currencyObj: JSON.stringify(component.fg.controls.currencyObj.value), @@ -709,8 +726,25 @@ export function TestCases1(getTestBed) { component.fg.controls.report.setValue(expectedReportsPaginated[0]); spyOn(component, 'generateEtxnFromFg').and.returnValue(of(unflattenedExpData)); fixture.detectChanges(); + const splitConfig = { + category: { + is_visible: !!expenseFieldObjData.org_category_id, + value: component.getFormValues().category, + is_mandatory: expenseFieldObjData.org_category_id?.is_mandatory || false, + }, + project: { + is_visible: !!expenseFieldObjData.project_id, + value: component.getFormValues().project, + is_mandatory: expenseFieldObjData.project_id?.is_mandatory || false, + }, + costCenter: { + is_visible: !!expenseFieldObjData.cost_center_id, + value: component.getFormValues().costCenter, + is_mandatory: expenseFieldObjData.cost_center_id?.is_mandatory || false, + }, + }; - component.openSplitExpenseModal('projects'); + component.openSplitExpenseModal(); expect(component.getCustomFields).toHaveBeenCalledTimes(1); expect(component.generateEtxnFromFg).toHaveBeenCalledTimes(1); expect(router.navigate).toHaveBeenCalledOnceWith([ @@ -718,7 +752,7 @@ export function TestCases1(getTestBed) { 'enterprise', 'split_expense', { - splitType: 'projects', + splitConfig, txnFields: JSON.stringify(txnFieldsMap2), txn: JSON.stringify(unflattenedExpData.tx), currencyObj: JSON.stringify(component.fg.controls.currencyObj.value), @@ -731,34 +765,6 @@ export function TestCases1(getTestBed) { ]); }); - it('should open split expense modal by navigating to split expense with selectedProject as per form project', () => { - spyOn(component, 'getCustomFields').and.returnValue(of(customFieldData1)); - customInputsService.getAll.and.returnValue(of(null)); - component.txnFields$ = of(expenseFieldObjData); - spyOn(component, 'generateEtxnFromFg').and.returnValue(of(unflattenedExpData)); - component.fg.controls.project.setValue(expectedProjects4); - - component.openSplitExpenseModal('projects'); - expect(component.getCustomFields).toHaveBeenCalledTimes(1); - expect(component.generateEtxnFromFg).toHaveBeenCalledTimes(1); - expect(router.navigate).toHaveBeenCalledOnceWith([ - '/', - 'enterprise', - 'split_expense', - { - splitType: 'projects', - txnFields: JSON.stringify(txnFieldsMap2), - txn: JSON.stringify(unflattenedExpData.tx), - currencyObj: JSON.stringify(component.fg.controls.currencyObj.value), - fileObjs: JSON.stringify(unflattenedExpData.dataUrls), - selectedCCCTransaction: null, - selectedReportId: null, - selectedProject: JSON.stringify(expectedProjects4), - expenseFields: null, - }, - ]); - }); - it('should show split blocked popover if expense is already reported and report is selected as null in edit expense form', () => { spyOn(component, 'getCustomFields').and.returnValue(of(customFieldData1)); customInputsService.getAll.and.returnValue(of(null)); @@ -769,7 +775,7 @@ export function TestCases1(getTestBed) { component.fg.controls.report.setValue(null); spyOn(component, 'showSplitBlockedPopover'); - component.openSplitExpenseModal('projects'); + component.openSplitExpenseModal(); expect(component.getCustomFields).toHaveBeenCalledTimes(1); expect(component.generateEtxnFromFg).toHaveBeenCalledTimes(1); expect(router.navigate).not.toHaveBeenCalled(); @@ -788,7 +794,7 @@ export function TestCases1(getTestBed) { component.fg.controls.report.setValue(null); spyOn(component, 'showSplitBlockedPopover'); - component.openSplitExpenseModal('projects'); + component.openSplitExpenseModal(); expect(component.getCustomFields).toHaveBeenCalledTimes(1); expect(component.generateEtxnFromFg).toHaveBeenCalledTimes(1); expect(router.navigate).not.toHaveBeenCalled(); @@ -807,7 +813,7 @@ export function TestCases1(getTestBed) { component.fg.controls.report.setValue({ ...expectedReportsPaginated[0], id: null }); spyOn(component, 'showSplitBlockedPopover'); - component.openSplitExpenseModal('projects'); + component.openSplitExpenseModal(); expect(component.getCustomFields).toHaveBeenCalledTimes(1); expect(component.generateEtxnFromFg).toHaveBeenCalledTimes(1); expect(router.navigate).not.toHaveBeenCalled(); @@ -826,7 +832,7 @@ export function TestCases1(getTestBed) { component.fg.controls.report.setValue(null); spyOn(component, 'showSplitBlockedPopover'); - component.openSplitExpenseModal('projects'); + component.openSplitExpenseModal(); expect(component.getCustomFields).toHaveBeenCalledTimes(1); expect(component.generateEtxnFromFg).toHaveBeenCalledTimes(1); expect(router.navigate).not.toHaveBeenCalled(); @@ -845,7 +851,7 @@ export function TestCases1(getTestBed) { component.fg.controls.report.setValue(null); spyOn(component, 'showSplitBlockedPopover'); - component.openSplitExpenseModal('projects'); + component.openSplitExpenseModal(); expect(component.getCustomFields).toHaveBeenCalledTimes(1); expect(component.generateEtxnFromFg).toHaveBeenCalledTimes(1); expect(component.showSplitBlockedPopover).not.toHaveBeenCalled(); @@ -1173,7 +1179,7 @@ export function TestCases1(getTestBed) { expect(component.markPeronsalOrDismiss).toHaveBeenCalledOnceWith('dismiss'); }); - describe('splitExpCategoryHandler():', () => { + describe('splitExpenseHandler():', () => { beforeEach(() => { component.pendingTransactionAllowedToReportAndSplit = true; }); @@ -1183,83 +1189,15 @@ export function TestCases1(getTestBed) { spyOn(component, 'openSplitExpenseModal'); - component.splitExpCategoryHandler(); + component.splitExpenseHandler(); - expect(component.openSplitExpenseModal).toHaveBeenCalledOnceWith('categories'); + expect(component.openSplitExpenseModal).toHaveBeenCalledOnceWith(); }); it('should validation errors if any inside the form', () => { spyOn(component, 'showFormValidationErrors'); - component.splitExpCategoryHandler(); - - expect(component.showFormValidationErrors).toHaveBeenCalledTimes(1); - }); - - it('should show toast message if pendingTransactionAllowedToReportAndSplit is false', () => { - spyOn(component, 'showTransactionPendingToast'); - - component.pendingTransactionAllowedToReportAndSplit = false; - - component.splitExpCategoryHandler(); - - expect(component.showTransactionPendingToast).toHaveBeenCalledTimes(1); - }); - }); - - describe('splitExpProjectHandler():', () => { - beforeEach(() => { - component.pendingTransactionAllowedToReportAndSplit = true; - }); - - it('should call method to display split expense modal and split by project', () => { - setFormValid(); - - spyOn(component, 'openSplitExpenseModal'); - - component.splitExpProjectHandler(); - - expect(component.openSplitExpenseModal).toHaveBeenCalledOnceWith('projects'); - }); - - it('should show validation errors if any inside the form', () => { - spyOn(component, 'showFormValidationErrors'); - - component.splitExpProjectHandler(); - - expect(component.showFormValidationErrors).toHaveBeenCalledTimes(1); - }); - - it('should show toast message if pendingTransactionAllowedToReportAndSplit is false', () => { - spyOn(component, 'showTransactionPendingToast'); - - component.pendingTransactionAllowedToReportAndSplit = false; - - component.splitExpProjectHandler(); - - expect(component.showTransactionPendingToast).toHaveBeenCalledTimes(1); - }); - }); - - describe('splitExpCostCenterHandler():', () => { - beforeEach(() => { - component.pendingTransactionAllowedToReportAndSplit = true; - }); - - it('should call method to display split expense modal and split by cost centers', () => { - setFormValid(); - - spyOn(component, 'openSplitExpenseModal'); - - component.splitExpCostCenterHandler(); - - expect(component.openSplitExpenseModal).toHaveBeenCalledOnceWith('cost centers'); - }); - - it('The form should display the validation errors if they are found.', () => { - spyOn(component, 'showFormValidationErrors'); - - component.splitExpCostCenterHandler(); + component.splitExpenseHandler(); expect(component.showFormValidationErrors).toHaveBeenCalledTimes(1); }); @@ -1269,120 +1207,50 @@ export function TestCases1(getTestBed) { component.pendingTransactionAllowedToReportAndSplit = false; - component.splitExpCostCenterHandler(); + component.splitExpenseHandler(); expect(component.showTransactionPendingToast).toHaveBeenCalledTimes(1); }); }); describe('getActionSheetOptions():', () => { - it('should get all action sheet options and show cost centers options only if cost_center_id is present in txnFields', (done) => { + it('should get all action sheet options', (done) => { orgSettingsService.get.and.returnValue( of({ ...orgSettingsData, expense_settings: { ...orgSettingsData.expense_settings, split_expense_settings: { enabled: true } }, }) ); - component.activeCategories$ = of(sortedCategory); - component.costCenters$ = of(expectedCCdata); - projectsService.getAllActive.and.returnValue(of(projectsV1Data)); - component.filteredCategories$ = of(categorieListRes); - component.txnFields$ = of(expenseFieldObjData); component.isCccExpense = 'tx3qHxFNgRcZ'; component.canDismissCCCE = true; component.isCorporateCreditCardEnabled = true; component.canRemoveCardExpense = true; component.isExpenseMatchedForDebitCCCE = true; - spyOn(component, 'splitExpCategoryHandler'); - spyOn(component, 'splitExpProjectHandler'); - spyOn(component, 'splitExpCostCenterHandler'); + spyOn(component, 'splitExpenseHandler'); spyOn(component, 'markPersonalHandler'); spyOn(component, 'markDismissHandler'); spyOn(component, 'removeCCCHandler'); - launchDarklyService.getVariation.and.returnValue(of(true)); fixture.detectChanges(); let actionSheetOptions; component.getActionSheetOptions().subscribe((res) => { actionSheetOptions = res; - expect(res.length).toEqual(5); + expect(res.length).toEqual(4); expect(orgSettingsService.get).toHaveBeenCalledTimes(1); - expect(projectsService.getAllActive).toHaveBeenCalledTimes(1); - expect(launchDarklyService.getVariation).toHaveBeenCalledOnceWith( - 'show_project_mapped_categories_in_split_expense', - false - ); }); actionSheetOptions[0].handler(); - expect(component.splitExpCategoryHandler).toHaveBeenCalledTimes(1); + expect(component.splitExpenseHandler).toHaveBeenCalledTimes(1); actionSheetOptions[1].handler(); - expect(component.splitExpProjectHandler).toHaveBeenCalledTimes(1); - actionSheetOptions[2].handler(); expect(component.markPersonalHandler).toHaveBeenCalledTimes(1); - actionSheetOptions[3].handler(); + actionSheetOptions[2].handler(); expect(component.markDismissHandler).toHaveBeenCalledTimes(1); - actionSheetOptions[4].handler(); + actionSheetOptions[3].handler(); expect(component.removeCCCHandler).toHaveBeenCalledTimes(1); - expect(component.splitExpCostCenterHandler).not.toHaveBeenCalled(); done(); }); - it('should get all action sheet options and call titleCasePipe transform method if project_id is defined', (done) => { - orgSettingsService.get.and.returnValue( - of({ - ...orgSettingsData, - expense_settings: { ...orgSettingsData.expense_settings, split_expense_settings: { enabled: true } }, - }) - ); - component.activeCategories$ = of(sortedCategory); - component.costCenters$ = of(expectedCCdata); - projectsService.getAllActive.and.returnValue(of(projectsV1Data)); - component.filteredCategories$ = of(categorieListRes); - component.txnFields$ = of(txnFieldData); - component.isCccExpense = 'tx3qHxFNgRcZ'; - component.canDismissCCCE = true; - component.isCorporateCreditCardEnabled = true; - component.canRemoveCardExpense = true; - component.isExpenseMatchedForDebitCCCE = true; - spyOn(component, 'splitExpCategoryHandler'); - spyOn(component, 'splitExpProjectHandler'); - spyOn(component, 'splitExpCostCenterHandler'); - spyOn(component, 'markPersonalHandler'); - spyOn(component, 'markDismissHandler'); - spyOn(component, 'removeCCCHandler'); - launchDarklyService.getVariation.and.returnValue(of(true)); - fixture.detectChanges(); - - component.getActionSheetOptions().subscribe((actionSheetOptionsResponse) => { - const actionSheetOptions = actionSheetOptionsResponse; - expect(actionSheetOptionsResponse.length).toEqual(6); - expect(titleCasePipe.transform).toHaveBeenCalledTimes(2); - expect(titleCasePipe.transform).toHaveBeenCalledWith('Project'); - expect(titleCasePipe.transform).toHaveBeenCalledWith('Location'); - expect(orgSettingsService.get).toHaveBeenCalledTimes(1); - expect(projectsService.getAllActive).toHaveBeenCalledTimes(1); - expect(launchDarklyService.getVariation).toHaveBeenCalledOnceWith( - 'show_project_mapped_categories_in_split_expense', - false - ); - actionSheetOptions[0].handler(); - expect(component.splitExpCategoryHandler).toHaveBeenCalledTimes(1); - actionSheetOptions[1].handler(); - expect(component.splitExpProjectHandler).toHaveBeenCalledTimes(1); - actionSheetOptions[2].handler(); - expect(component.splitExpCostCenterHandler).toHaveBeenCalledTimes(1); - actionSheetOptions[3].handler(); - expect(component.markPersonalHandler).toHaveBeenCalledTimes(1); - actionSheetOptions[4].handler(); - expect(component.markDismissHandler).toHaveBeenCalledTimes(1); - actionSheetOptions[5].handler(); - expect(component.removeCCCHandler).toHaveBeenCalledTimes(1); - done(); - }); - }); - it('should get action sheet options when split expense is not allowed', (done) => { orgSettingsService.get.and.returnValue( of({ @@ -1390,17 +1258,11 @@ export function TestCases1(getTestBed) { expense_settings: { ...orgSettingsData.expense_settings, split_expense_settings: { enabled: false } }, }) ); - component.activeCategories$ = of(sortedCategory); - component.costCenters$ = of(expectedCCdata); - projectsService.getAllActive.and.returnValue(of(projectsV1Data)); - component.filteredCategories$ = of(categorieListRes); - component.txnFields$ = of(expenseFieldObjData); component.isCccExpense = 'tx3qHxFNgRcZ'; component.canDismissCCCE = true; component.isCorporateCreditCardEnabled = true; component.canRemoveCardExpense = true; component.isExpenseMatchedForDebitCCCE = true; - launchDarklyService.getVariation.and.returnValue(of(true)); spyOn(component, 'markPersonalHandler'); spyOn(component, 'markDismissHandler'); spyOn(component, 'removeCCCHandler'); @@ -1408,11 +1270,6 @@ export function TestCases1(getTestBed) { component.getActionSheetOptions().subscribe((res) => { expect(res.length).toEqual(3); expect(orgSettingsService.get).toHaveBeenCalledTimes(1); - expect(projectsService.getAllActive).toHaveBeenCalledTimes(1); - expect(launchDarklyService.getVariation).toHaveBeenCalledOnceWith( - 'show_project_mapped_categories_in_split_expense', - false - ); done(); }); }); @@ -1424,27 +1281,16 @@ export function TestCases1(getTestBed) { expense_settings: { ...orgSettingsData.expense_settings, split_expense_settings: { enabled: false } }, }) ); - component.activeCategories$ = of(sortedCategory); - component.costCenters$ = of(expectedCCdata); - projectsService.getAllActive.and.returnValue(of(projectsV1Data)); - component.filteredCategories$ = of(categorieListRes); - component.txnFields$ = of(expenseFieldObjData); component.isCccExpense = 'tx3qHxFNgRcZ'; component.canDismissCCCE = true; component.isCorporateCreditCardEnabled = true; component.canRemoveCardExpense = true; component.isExpenseMatchedForDebitCCCE = true; - launchDarklyService.getVariation.and.returnValue(of(true)); spyOn(component, 'removeCCCHandler'); component.getActionSheetOptions().subscribe((res) => { expect(res.length).toEqual(3); expect(orgSettingsService.get).toHaveBeenCalledTimes(1); - expect(projectsService.getAllActive).toHaveBeenCalledTimes(1); - expect(launchDarklyService.getVariation).toHaveBeenCalledOnceWith( - 'show_project_mapped_categories_in_split_expense', - false - ); done(); }); }); @@ -1456,11 +1302,6 @@ export function TestCases1(getTestBed) { expense_settings: { ...orgSettingsData.expense_settings, split_expense_settings: { enabled: false } }, }) ); - component.activeCategories$ = of(sortedCategory); - component.costCenters$ = of(expectedCCdata); - projectsService.getAllActive.and.returnValue(of(projectsV1Data)); - component.filteredCategories$ = of(categorieListRes); - component.txnFields$ = of(expenseFieldObjData); component.isCccExpense = 'tx3qHxFNgRcZ'; component.canDismissCCCE = false; component.isCorporateCreditCardEnabled = true; @@ -1472,11 +1313,6 @@ export function TestCases1(getTestBed) { component.getActionSheetOptions().subscribe((res) => { expect(res.length).toEqual(1); expect(orgSettingsService.get).toHaveBeenCalledTimes(1); - expect(projectsService.getAllActive).toHaveBeenCalledTimes(1); - expect(launchDarklyService.getVariation).toHaveBeenCalledOnceWith( - 'show_project_mapped_categories_in_split_expense', - false - ); done(); }); }); diff --git a/src/app/fyle/add-edit-expense/add-edit-expense.page.ts b/src/app/fyle/add-edit-expense/add-edit-expense.page.ts index 26cf084052..8eadf77448 100644 --- a/src/app/fyle/add-edit-expense/add-edit-expense.page.ts +++ b/src/app/fyle/add-edit-expense/add-edit-expense.page.ts @@ -750,7 +750,7 @@ export class AddEditExpensePage implements OnInit { await splitBlockedPopoverSpy.present(); } - openSplitExpenseModal(splitType: string): void { + openSplitExpenseModal(): void { const customFields$ = this.getCustomFields(); const formValue = this.getFormValues(); @@ -774,13 +774,30 @@ export class AddEditExpensePage implements OnInit { 'Looks like the tax amount is more than the expense amount. Please correct the tax amount before splitting it.'; return this.showSplitBlockedPopover(popoverMessage); } + const splitConfig = { + category: { + is_visible: !!res.txnFields.org_category_id, + value: formValue.category, + is_mandatory: res.txnFields.org_category_id?.is_mandatory || false, + }, + project: { + is_visible: !!res.txnFields.project_id, + value: formValue.project, + is_mandatory: res.txnFields.project_id?.is_mandatory || false, + }, + costCenter: { + is_visible: !!res.txnFields.cost_center_id, + value: formValue.costCenter, + is_mandatory: res.txnFields.cost_center_id?.is_mandatory || false, + }, + }; this.router.navigate([ '/', 'enterprise', 'split_expense', { - splitType, + splitConfig, txnFields: JSON.stringify(res.txnFields), txn: JSON.stringify(res.generatedEtxn.tx), currencyObj: JSON.stringify(this.fg.controls.currencyObj.value), @@ -991,34 +1008,10 @@ export class AddEditExpensePage implements OnInit { return this.markPeronsalOrDismiss('dismiss'); } - splitExpCategoryHandler(): void { - if (this.pendingTransactionAllowedToReportAndSplit) { - if (this.fg.valid) { - this.openSplitExpenseModal('categories'); - } else { - this.showFormValidationErrors(); - } - } else { - this.showTransactionPendingToast(); - } - } - - splitExpProjectHandler(): void { + splitExpenseHandler(): void { if (this.pendingTransactionAllowedToReportAndSplit) { if (this.fg.valid) { - this.openSplitExpenseModal('projects'); - } else { - this.showFormValidationErrors(); - } - } else { - this.showTransactionPendingToast(); - } - } - - splitExpCostCenterHandler(): void { - if (this.pendingTransactionAllowedToReportAndSplit) { - if (this.fg.valid) { - this.openSplitExpenseModal('cost centers'); + this.openSplitExpenseModal(); } else { this.showFormValidationErrors(); } @@ -1037,87 +1030,43 @@ export class AddEditExpensePage implements OnInit { } getActionSheetOptions(): Observable<{ text: string; handler: () => void }[]> { - const projects$ = this.activeCategories$.pipe( - switchMap((activeCategories) => this.projectsService.getAllActive(activeCategories)) - ); - return forkJoin({ - orgSettings: this.orgSettingsService.get(), - costCenters: this.costCenters$, - projects: projects$, - txnFields: this.txnFields$.pipe(take(1)), - filteredCategories: this.filteredCategories$.pipe(take(1)), - showProjectMappedCategoriesInSplitExpense: this.launchDarklyService.getVariation( - 'show_project_mapped_categories_in_split_expense', - false - ), - }).pipe( - map( - ({ - orgSettings, - costCenters, - projects, - txnFields, - filteredCategories, - showProjectMappedCategoriesInSplitExpense, - }) => { - const isSplitExpenseAllowed = orgSettings.expense_settings.split_expense_settings.enabled; - - const actionSheetOptions: { text: string; handler: () => void }[] = []; - - if (isSplitExpenseAllowed) { - const areCostCentersAvailable = costCenters.length > 0 && txnFields.cost_center_id; - const areProjectsAvailable = orgSettings.projects.enabled && projects.length > 0; - const areProjectDependentCategoriesAvailable = filteredCategories.length > 1; - const projectField = txnFields.project_id; - const costCenterField = txnFields.cost_center_id; + return this.orgSettingsService.get().pipe( + map((orgSettings) => { + const isSplitExpenseAllowed = orgSettings.expense_settings.split_expense_settings.enabled; - if (!showProjectMappedCategoriesInSplitExpense || areProjectDependentCategoriesAvailable) { - actionSheetOptions.push({ - text: 'Split Expense By Category', - handler: () => this.splitExpCategoryHandler(), - }); - } - - if (areProjectsAvailable) { - actionSheetOptions.push({ - text: 'Split Expense By ' + this.titleCasePipe.transform(projectField?.field_name), - handler: () => this.splitExpProjectHandler(), - }); - } - - if (areCostCentersAvailable) { - actionSheetOptions.push({ - text: 'Split Expense By ' + this.titleCasePipe.transform(costCenterField?.field_name), - handler: () => this.splitExpCostCenterHandler(), - }); - } - } + const actionSheetOptions: { text: string; handler: () => void }[] = []; - if (this.isCccExpense) { - if (this.isExpenseMatchedForDebitCCCE) { - actionSheetOptions.push({ - text: 'Mark as Personal', - handler: () => this.markPersonalHandler(), - }); - } + if (isSplitExpenseAllowed) { + actionSheetOptions.push({ + text: 'Split Expense', + handler: () => this.splitExpenseHandler(), + }); + } - if (this.canDismissCCCE) { - actionSheetOptions.push({ - text: 'Dimiss as Card Payment', - handler: () => this.markDismissHandler(), - }); - } + if (this.isCccExpense) { + if (this.isExpenseMatchedForDebitCCCE) { + actionSheetOptions.push({ + text: 'Mark as Personal', + handler: () => this.markPersonalHandler(), + }); } - if (this.isCorporateCreditCardEnabled && this.canRemoveCardExpense) { + if (this.canDismissCCCE) { actionSheetOptions.push({ - text: 'Remove Card Expense', - handler: () => this.removeCCCHandler(), + text: 'Dimiss as Card Payment', + handler: () => this.markDismissHandler(), }); } - return actionSheetOptions; } - ) + + if (this.isCorporateCreditCardEnabled && this.canRemoveCardExpense) { + actionSheetOptions.push({ + text: 'Remove Card Expense', + handler: () => this.removeCCCHandler(), + }); + } + return actionSheetOptions; + }) ); } diff --git a/src/app/fyle/split-expense/split-expense.page.html b/src/app/fyle/split-expense/split-expense.page.html index 9ce083aa88..ea6bd16818 100644 --- a/src/app/fyle/split-expense/split-expense.page.html +++ b/src/app/fyle/split-expense/split-expense.page.html @@ -8,7 +8,7 @@
-
Split by {{ splitExpenseHeader }}
+
Split expense
- +
- Total: -
{{ currency }} {{totalSplitAmount}}
+ No.of splits +
{{splitExpensesFormArray.controls.length}}
- Remaining: + Total amount +
{{ currency }} {{totalSplitAmount}}
+
+
+ Remaining amount
{{ currency }} {{remainingAmount }}
+
+ +
Cannot have more than 30 splits for an expense.
+
+
+ +
{{errorMessage}}
+
-

- SPLIT {{ i + 1 }} -

+
+
+ +
+
Split {{ i + 1 }}
+
- Percentage + Amount in %
+
+
+
Date of spend
+ * + +
+
+ Please select a valid date. +
+
+
@@ -152,30 +191,6 @@ Please select a cost center.
- -
-
-
Date
- * - -
-
- Please select a valid date. -
-
- -
-
- -
Add Split
-
- -
- -
- -
Split Evenly
-
-
-
- -
-
- -
-
- -

{{errorMessage}}

-
+ +
+ + +
diff --git a/src/app/fyle/split-expense/split-expense.page.scss b/src/app/fyle/split-expense/split-expense.page.scss index 327ae62e9a..31fbf3e831 100644 --- a/src/app/fyle/split-expense/split-expense.page.scss +++ b/src/app/fyle/split-expense/split-expense.page.scss @@ -42,7 +42,8 @@ $background-color: #fff; &--top-bar { background-color: $pure-white; - padding: 16px 16px 0 16px; + padding: 16px 16px 8px 16px; + gap: 10px; } &--container { @@ -54,6 +55,7 @@ $background-color: #fff; display: flex; justify-content: space-between; align-items: center; + padding-bottom: 24px; } &--internal-block { @@ -73,39 +75,59 @@ $background-color: #fff; &--card { padding: 16px; - margin-top: 24px; + margin-top: 18px; border-radius: 8px; - border: 1px solid $grey-lighter; + border: 1px solid $border-tertiary; + box-shadow: 0 0 4px 2px $shadow-xs; } &--card-header { display: flex; flex-direction: row; justify-content: space-between; + align-items: center; + margin-bottom: 30px; + } + + &--card-header-left-content { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 10px; + } + + &--icon-container { + padding: 4px; + border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; + background-color: $off-white; } &--index { font-size: 14px; font-weight: 500; - color: $grey-light; - margin: 0 auto 12px; line-height: 18px; } - &--remove { - margin-left: 43%; + &--split-count-icon { + width: 20px; + height: 20px; } &--remove-icon { background: none; - height: 18px; - width: 18px; + color: $red; + height: 20px; + width: 20px; } &--amount-percentage { display: flex; flex-direction: row; justify-content: space-between; + padding-bottom: 24px; } &--percentage { @@ -192,97 +214,78 @@ $background-color: #fff; &--more-actions { display: flex; align-items: center; - margin: 36px 0; - - &__divider { - width: 1px; - height: 18px; - margin: 0 20px; - background-color: $grey-lighter; - border-radius: 2px; - } + padding: 16px; + justify-content: space-between; + gap: 16px; + box-shadow: 0px 2px 10px 0px $shadow-lg; } &--add-more, &--split-evenly { display: flex; align-items: center; - color: $brand-primary; + justify-content: center; + padding: 12px 16px; + gap: 8px; } &--add-more-icon, &--split-evenly-icon { color: $brand-primary; - margin-right: 8px; - width: 20px; - height: 20px; + width: 16px; + height: 16px; } &--add-more-label, &--split-evenly-label { - color: $black-light; - font-size: 14px; + color: $blue-black; + font-size: 12px; line-height: 18px; font-weight: 500; } - &--primary-cta { - width: 100%; - height: 48px; - --border-width: 1px; - } - &--amount-block { display: flex; - border-bottom: 1px solid $grey-lighter; - padding: 22px 0 20px 0; + padding: 12px; + border-radius: 8px; + background: $pink-gradient-light-2; &__label { font-size: 12px; - line-height: 16px; + line-height: 18px; color: $black-light; - font-weight: 400; width: 50%; } } &--split-amount { font-weight: 500; - font-size: 20px; - line-height: 26px; + font-size: 16px; + line-height: 20px; color: $blue-black; } - &--limit { - padding: 16px; - margin-bottom: 16px; + &--remaining-amount { + text-align: right; } &--error-message-block { - width: 100%; - color: $pure-white; - padding: 16px; + color: $blue-black; + border-radius: 4px; + background-color: $pale-pink; + font-size: 12px; + padding: 8px 12px; + line-height: 15px; display: flex; align-items: center; - height: 44px; - } - - &--error-message { - margin: 0 !important; - } - - &--error-container { - display: flex; - background-color: $red; - margin: 16px; - border-radius: 8px; + margin-top: 3px; + border: 1px solid $red-1; } &--error-icon { - margin-right: 10px; - } - - &--footer { - background-color: $pure-white; + margin-right: 12px; + color: $red; + height: 18px; + width: 18px; } } diff --git a/src/theme/colors.scss b/src/theme/colors.scss index 2c802fae18..e0a4846032 100644 --- a/src/theme/colors.scss +++ b/src/theme/colors.scss @@ -45,6 +45,7 @@ $pink-shadow: #d7d7d799 !default; $success-bg: #e9f5ed !default; $black-shadow: rgba(0, 0, 0, 0.1) !default; $shadow-lg: rgba(44, 48, 78, 0.1); +$shadow-xs: rgba(44, 48, 78, 0.06); $brand-primary: #ff3366 !default; $brand-primary-light: #fe5196 !default; @@ -87,6 +88,7 @@ $pink-gradient: linear-gradient(162.38deg, $brand-primary 3.01%, $brand-primary- $pink-gradient-2: linear-gradient(97.33deg, #e1eeff 26.8%, #ffe4fb 97.18%); $pink-gradient-3: linear-gradient(97.33deg, #ffe4fb 26.8%, #e1eeff 97.18%); $pink-gradient-light: linear-gradient(90deg, #ff758c 0%, #ff7eb3 100%); +$pink-gradient-light-2: linear-gradient(97deg, rgba(225, 238, 255, 0.5) 26.8%, rgba(255, 228, 251, 0.5) 97.18%); $light-pink: #fff2f3 !default;