diff --git a/src/app/core/mock-data/task.data.ts b/src/app/core/mock-data/task.data.ts index c4773d527b..f94d9b8792 100644 --- a/src/app/core/mock-data/task.data.ts +++ b/src/app/core/mock-data/task.data.ts @@ -18,10 +18,10 @@ export const draftExpenseTaskSample = deepFreeze({ }); export const draftExpenseTaskSample2 = deepFreeze({ - amount: '132.57B', + amount: '76234.47', count: 339, header: 'Incomplete expenses', - subheader: '339 expenses worth ₹132.57B require additional information', + subheader: '339 expenses worth ₹76234.47 require additional information', icon: TaskIcon.WARNING, ctas: [ { @@ -46,10 +46,10 @@ export const potentailDuplicateTaskSample = deepFreeze({ }); export const teamReportTaskSample = deepFreeze({ - amount: '733.48K', + amount: '5177243929.65', count: 2, header: 'Reports to be approved', - subheader: '2 reports worth ₹733.48K require your approval', + subheader: '2 reports worth ₹5177243929.65 require your approval', icon: TaskIcon.REPORT, ctas: [ { @@ -60,10 +60,10 @@ export const teamReportTaskSample = deepFreeze({ }); export const sentBackReportTaskSample = deepFreeze({ - amount: '4.5K', + amount: '4500.00', count: 2, header: 'Reports sent back!', - subheader: '2 reports worth ₹4.5K were sent back by your approver', + subheader: '2 reports worth ₹4500.00 were sent back by your approver', icon: TaskIcon.REPORT, ctas: [ { @@ -74,10 +74,10 @@ export const sentBackReportTaskSample = deepFreeze({ }); export const sentBackReportTaskSingularSample = deepFreeze({ - amount: '4.5K', + amount: '4500.00', count: 1, header: 'Report sent back!', - subheader: '1 report worth ₹4.5K was sent back by your approver', + subheader: '1 report worth ₹4500.00 was sent back by your approver', icon: TaskIcon.REPORT, ctas: [ { @@ -102,10 +102,10 @@ export const unreportedExpenseTaskSample = deepFreeze({ }); export const unreportedExpenseTaskSample2 = deepFreeze({ - amount: '142.26K', + amount: '30.00', count: 3, header: 'Expenses are ready to report', - subheader: '3 expenses worth ₹142.26K can be added to a report', + subheader: '3 expenses worth ₹30.00 can be added to a report', icon: TaskIcon.REPORT, ctas: [ { @@ -116,10 +116,10 @@ export const unreportedExpenseTaskSample2 = deepFreeze({ }); export const unsubmittedReportTaskSample = deepFreeze({ - amount: '93.17K', + amount: '93165.91', count: 2, header: 'Unsubmitted reports', - subheader: '2 reports worth ₹93.17K remain in draft state', + subheader: '2 reports worth ₹93165.91 remain in draft state', icon: TaskIcon.REPORT, ctas: [ { @@ -130,10 +130,10 @@ export const unsubmittedReportTaskSample = deepFreeze({ }); export const sentBackAdvanceTaskSample = deepFreeze({ - amount: '123.37M', + amount: '123370000.00', count: 5, header: 'Advances sent back!', - subheader: '5 advances worth ₹123.37M were sent back by your approver', + subheader: '5 advances worth ₹123370000.00 were sent back by your approver', icon: TaskIcon.ADVANCE, ctas: [ { diff --git a/src/app/core/services/tasks.service.spec.ts b/src/app/core/services/tasks.service.spec.ts index 8670123d2f..71c90ca87a 100644 --- a/src/app/core/services/tasks.service.spec.ts +++ b/src/app/core/services/tasks.service.spec.ts @@ -2,6 +2,7 @@ import { TestBed } from '@angular/core/testing'; import { cloneDeep } from 'lodash'; import { filter, of, reduce, Subject, switchMap, take } from 'rxjs'; import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe'; +import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe'; import { TASKEVENT } from '../models/task-event.enum'; import { TaskIcon } from '../models/task-icon.enum'; import { @@ -80,6 +81,7 @@ describe('TasksService', () => { let corporateCreditCardExpenseService: jasmine.SpyObj; let currencyService: jasmine.SpyObj; let humanizeCurrencyPipe: jasmine.SpyObj; + let exactCurrencyPipe: jasmine.SpyObj; let expensesService: jasmine.SpyObj; let employeesService: jasmine.SpyObj; let spenderReportsService: jasmine.SpyObj; @@ -101,6 +103,7 @@ describe('TasksService', () => { ]); const currencyServiceSpy = jasmine.createSpyObj('CurrencyService', ['getHomeCurrency']); const humanizeCurrencyPipeSpy = jasmine.createSpyObj('HumanizeCurrencyPipe', ['transform']); + const exactCurrencyPipeSpy = jasmine.createSpyObj('ExactCurrencyPipe', ['transform']); const orgSettingsServiceSpy = jasmine.createSpyObj('OrgSettingsService', ['get']); const employeesServiceSpy = jasmine.createSpyObj('EmployeesService', ['getCommuteDetails']); const spenderReportsServiceSpy = jasmine.createSpyObj('SpenderReportsService', ['getReportsStats']); @@ -119,6 +122,10 @@ describe('TasksService', () => { provide: HumanizeCurrencyPipe, useValue: humanizeCurrencyPipeSpy, }, + { + provide: ExactCurrencyPipe, + useValue: exactCurrencyPipeSpy, + }, { provide: UserEventService, useValue: userEventServiceSpy, @@ -180,6 +187,7 @@ describe('TasksService', () => { ) as jasmine.SpyObj; currencyService = TestBed.inject(CurrencyService) as jasmine.SpyObj; humanizeCurrencyPipe = TestBed.inject(HumanizeCurrencyPipe) as jasmine.SpyObj; + exactCurrencyPipe = TestBed.inject(ExactCurrencyPipe) as jasmine.SpyObj; expensesService = TestBed.inject(ExpensesService) as jasmine.SpyObj; employeesService = TestBed.inject(EmployeesService) as jasmine.SpyObj; orgSettingsService = TestBed.inject(OrgSettingsService) as jasmine.SpyObj; @@ -198,12 +206,12 @@ describe('TasksService', () => { it('should be able to fetch tasks related to sent back advances', (done) => { currencyService.getHomeCurrency.and.returnValue(of(homeCurrency)); advanceRequestService.getAdvanceRequestStats.and.returnValue(of(sentBackAdvancesResponse)); - humanizeCurrencyPipe.transform - .withArgs(sentBackAdvancesResponse.total_amount, homeCurrency, true) - .and.returnValue('123.37M'); - humanizeCurrencyPipe.transform - .withArgs(sentBackAdvancesResponse.total_amount, homeCurrency) - .and.returnValue('₹123.37M'); + exactCurrencyPipe.transform + .withArgs({ value: sentBackAdvancesResponse.total_amount, currencyCode: homeCurrency, skipSymbol: true }) + .and.returnValue('123370000.00'); + exactCurrencyPipe.transform + .withArgs({ value: sentBackAdvancesResponse.total_amount, currencyCode: homeCurrency }) + .and.returnValue('₹123370000.00'); tasksService.getSentBackAdvanceTasks().subscribe((sentBackAdvancesData) => { expect(sentBackAdvancesData).toEqual([sentBackAdvanceTaskSample]); @@ -214,13 +222,12 @@ describe('TasksService', () => { it('should be able to fetch unsubmitted reports', (done) => { spenderReportsService.getReportsStats.and.returnValue(of(expectedReportStats.draft)); currencyService.getHomeCurrency.and.returnValue(of(homeCurrency)); - humanizeCurrencyPipe.transform - .withArgs(expectedReportStats.draft.total_amount, homeCurrency, true) - .and.returnValue('93.17K'); - humanizeCurrencyPipe.transform - .withArgs(expectedReportStats.draft.total_amount, homeCurrency) - .and.returnValue('₹93.17K'); - humanizeCurrencyPipe.transform.and.returnValue('93.1K'); + exactCurrencyPipe.transform + .withArgs({ value: expectedReportStats.draft.total_amount, currencyCode: homeCurrency, skipSymbol: true }) + .and.returnValue('93165.91'); + exactCurrencyPipe.transform + .withArgs({ value: expectedReportStats.draft.total_amount, currencyCode: homeCurrency }) + .and.returnValue('₹93165.91'); tasksService.getUnsubmittedReportsTasks().subscribe((unsubmittedReportsTasks) => { expect(unsubmittedReportsTasks).toEqual([unsubmittedReportTaskSample]); done(); @@ -250,10 +257,12 @@ describe('TasksService', () => { it('should be able to fetch unreported expenses tasks', () => { getUnreportedExpenses(); currencyService.getHomeCurrency.and.returnValue(of(homeCurrency)); - humanizeCurrencyPipe.transform - .withArgs(completeStats.data.total_amount, homeCurrency, true) - .and.returnValue('142.26K'); - humanizeCurrencyPipe.transform.withArgs(completeStats.data.total_amount, homeCurrency).and.returnValue('₹142.26K'); + exactCurrencyPipe.transform + .withArgs({ value: completeStats.data.total_amount, currencyCode: homeCurrency, skipSymbol: true }) + .and.returnValue('30.00'); + exactCurrencyPipe.transform + .withArgs({ value: completeStats.data.total_amount, currencyCode: homeCurrency }) + .and.returnValue('₹30.00'); tasksService.getUnreportedExpensesTasks().subscribe((unrepotedExpensesTasks) => { expect(unrepotedExpensesTasks).toEqual([unreportedExpenseTaskSample2]); }); @@ -268,12 +277,12 @@ describe('TasksService', () => { currencyService.getHomeCurrency.and.returnValue(of(homeCurrency)); - humanizeCurrencyPipe.transform - .withArgs(expectedSentBackResponse.total_amount, homeCurrency, true) - .and.returnValue('4.5K'); - humanizeCurrencyPipe.transform - .withArgs(expectedSentBackResponse.total_amount, homeCurrency) - .and.returnValue('₹4.5K'); + exactCurrencyPipe.transform + .withArgs({ value: expectedSentBackResponse.total_amount, currencyCode: homeCurrency, skipSymbol: true }) + .and.returnValue('4500.00'); + exactCurrencyPipe.transform + .withArgs({ value: expectedSentBackResponse.total_amount, currencyCode: homeCurrency }) + .and.returnValue('₹4500.00'); tasksService.getSentBackReportTasks().subscribe((sentBackReportsTasks) => { expect(sentBackReportsTasks).toEqual([sentBackReportTaskSample]); @@ -290,12 +299,12 @@ describe('TasksService', () => { currencyService.getHomeCurrency.and.returnValue(of(homeCurrency)); - humanizeCurrencyPipe.transform - .withArgs(expectedSentBackResponse.total_amount, homeCurrency, true) - .and.returnValue('4.5K'); - humanizeCurrencyPipe.transform - .withArgs(expectedSentBackResponse.total_amount, homeCurrency) - .and.returnValue('₹4.5K'); + exactCurrencyPipe.transform + .withArgs({ value: expectedSentBackResponse.total_amount, currencyCode: homeCurrency, skipSymbol: true }) + .and.returnValue('4500.00'); + exactCurrencyPipe.transform + .withArgs({ value: expectedSentBackResponse.total_amount, currencyCode: homeCurrency }) + .and.returnValue('₹4500.00'); tasksService.getSentBackReportTasks().subscribe((sentBackReportsTasks) => { expect(sentBackReportsTasks).toEqual([sentBackReportTaskSingularSample]); @@ -307,12 +316,12 @@ describe('TasksService', () => { authService.getEou.and.returnValue(new Promise((resolve) => resolve(extendedOrgUserResponse))); currencyService.getHomeCurrency.and.returnValue(of(homeCurrency)); - humanizeCurrencyPipe.transform - .withArgs(expectedReportStats.report.total_amount, homeCurrency, true) - .and.returnValue('733.48K'); - humanizeCurrencyPipe.transform - .withArgs(expectedReportStats.report.total_amount, homeCurrency) - .and.returnValue('₹733.48K'); + exactCurrencyPipe.transform + .withArgs({ value: expectedReportStats.report.total_amount, currencyCode: homeCurrency, skipSymbol: true }) + .and.returnValue('5177243929.65'); + exactCurrencyPipe.transform + .withArgs({ value: expectedReportStats.report.total_amount, currencyCode: homeCurrency }) + .and.returnValue('₹5177243929.65'); approverReportsService.getReportsStats .withArgs({ @@ -331,12 +340,12 @@ describe('TasksService', () => { authService.getEou.and.returnValue(new Promise((resolve) => resolve(extendedOrgUserResponseSpender))); currencyService.getHomeCurrency.and.returnValue(of(homeCurrency)); - humanizeCurrencyPipe.transform - .withArgs(expectedReportStats.report.total_amount, homeCurrency, true) - .and.returnValue('733.48K'); - humanizeCurrencyPipe.transform - .withArgs(expectedReportStats.report.total_amount, homeCurrency) - .and.returnValue('₹733.48K'); + exactCurrencyPipe.transform + .withArgs({ value: expectedReportStats.report.total_amount, currencyCode: homeCurrency, skipSymbol: true }) + .and.returnValue('5177243929.65'); + exactCurrencyPipe.transform + .withArgs({ value: expectedReportStats.report.total_amount, currencyCode: homeCurrency }) + .and.returnValue('₹5177243929.65'); tasksService.getTeamReportsTasks().subscribe((teamReportsTasks) => { expect(teamReportsTasks).toEqual([]); @@ -363,12 +372,12 @@ describe('TasksService', () => { currencyService.getHomeCurrency.and.returnValue(of(homeCurrency)); - humanizeCurrencyPipe.transform - .withArgs(incompleteStats.data.total_amount, homeCurrency, true) - .and.returnValue('132.57B'); - humanizeCurrencyPipe.transform - .withArgs(incompleteStats.data.total_amount, homeCurrency) - .and.returnValue('₹132.57B'); + exactCurrencyPipe.transform + .withArgs({ value: incompleteStats.data.total_amount, currencyCode: homeCurrency, skipSymbol: true }) + .and.returnValue('76234.47'); + exactCurrencyPipe.transform + .withArgs({ value: incompleteStats.data.total_amount, currencyCode: homeCurrency }) + .and.returnValue('₹76234.47'); tasksService.getDraftExpensesTasks().subscribe((draftExpensesTasks) => { expect(draftExpensesTasks).toEqual([draftExpenseTaskSample2]); @@ -651,8 +660,10 @@ describe('TasksService', () => { it('should be able to generate unreported expenses tasks when no reports present', () => { const totalCount = incompleteStats.data.count; - humanizeCurrencyPipe.transform.withArgs(totalCount, homeCurrency, true).and.returnValue('142.26K'); - humanizeCurrencyPipe.transform.withArgs(totalCount, homeCurrency).and.returnValue('₹142.26K'); + exactCurrencyPipe.transform + .withArgs({ value: totalCount, currencyCode: homeCurrency, skipSymbol: true }) + .and.returnValue('339.00'); + exactCurrencyPipe.transform.withArgs({ value: totalCount, currencyCode: homeCurrency }).and.returnValue('₹339.00'); const tasks = tasksService.mapAggregateToUnreportedExpensesTask( { @@ -661,7 +672,7 @@ describe('TasksService', () => { }, homeCurrency ); - expect(tasks[0].subheader).toEqual('1 expense worth ₹142.26K can be added to a report'); + expect(tasks[0].subheader).toEqual('1 expense worth ₹339.00 can be added to a report'); }); it('should not be generating tasks when no corresponding data is present', () => { @@ -863,12 +874,12 @@ describe('TasksService', () => { }); it('should generate proper content in all cases for sent back advances', () => { - humanizeCurrencyPipe.transform - .withArgs(sentBackAdvancesResponse.total_amount, homeCurrency, true) - .and.returnValue('123.37M'); - humanizeCurrencyPipe.transform - .withArgs(sentBackAdvancesResponse.total_amount, homeCurrency) - .and.returnValue('₹123.37M'); + exactCurrencyPipe.transform + .withArgs({ value: sentBackAdvancesResponse.total_amount, currencyCode: homeCurrency, skipSymbol: true }) + .and.returnValue('123370000.00'); + exactCurrencyPipe.transform + .withArgs({ value: sentBackAdvancesResponse.total_amount, currencyCode: homeCurrency }) + .and.returnValue('₹123370000.00'); const sentBackAdvanceTask = tasksService.mapSentBackAdvancesToTasks( { @@ -880,10 +891,10 @@ describe('TasksService', () => { expect(sentBackAdvanceTask).toEqual([ { - amount: '123.37M', + amount: '123370000.00', count: 1, header: 'Advance sent back!', - subheader: '1 advance worth ₹123.37M was sent back by your approver', + subheader: '1 advance worth ₹123370000.00 was sent back by your approver', icon: TaskIcon.ADVANCE, ctas: [ { @@ -896,11 +907,18 @@ describe('TasksService', () => { }); it('should generate proper content in all cases for sent back reports', () => { - humanizeCurrencyPipe.transform - .withArgs(sentBackResponse[0].aggregates[1].function_value, homeCurrency, true) + exactCurrencyPipe.transform + .withArgs({ + value: sentBackResponse[0].aggregates[1].function_value, + currencyCode: homeCurrency, + skipSymbol: true, + }) .and.returnValue('44.53'); - humanizeCurrencyPipe.transform - .withArgs(sentBackResponse[0].aggregates[1].function_value, homeCurrency) + exactCurrencyPipe.transform + .withArgs({ + value: sentBackResponse[0].aggregates[1].function_value, + currencyCode: homeCurrency, + }) .and.returnValue('₹44.53'); const sentBackReportTask = tasksService.mapSentBackReportsToTasks( @@ -929,12 +947,16 @@ describe('TasksService', () => { }); it('should generate proper content in all cases of draft expenses tasks', () => { - humanizeCurrencyPipe.transform - .withArgs(incompleteExpensesResponse[0].aggregates[1].function_value, homeCurrency, true) - .and.returnValue('132.57B'); - humanizeCurrencyPipe.transform - .withArgs(incompleteExpensesResponse[0].aggregates[1].function_value, homeCurrency) - .and.returnValue('₹132.57B'); + exactCurrencyPipe.transform + .withArgs({ + value: incompleteExpensesResponse[0].aggregates[1].function_value, + currencyCode: homeCurrency, + skipSymbol: true, + }) + .and.returnValue('132573333762.37'); + exactCurrencyPipe.transform + .withArgs({ value: incompleteExpensesResponse[0].aggregates[1].function_value, currencyCode: homeCurrency }) + .and.returnValue('₹132573333762.37'); const tasks = tasksService.mapAggregateToDraftExpensesTask( { @@ -946,10 +968,10 @@ describe('TasksService', () => { expect(tasks).toEqual([ { - amount: '132.57B', + amount: '132573333762.37', count: 1, header: 'Incomplete expense', - subheader: '1 expense worth ₹132.57B require additional information', + subheader: '1 expense worth ₹132573333762.37 require additional information', icon: TaskIcon.WARNING, ctas: [ { @@ -962,8 +984,12 @@ describe('TasksService', () => { }); it('should generate proper content in all cases of unsubmitted report tasks', () => { - humanizeCurrencyPipe.transform - .withArgs(unsubmittedReportsResponse[0].aggregates[1].function_value, homeCurrency, true) + exactCurrencyPipe.transform + .withArgs({ + value: unsubmittedReportsResponse[0].aggregates[1].function_value, + currencyCode: homeCurrency, + skipSymbol: true, + }) .and.returnValue('0.00'); const tasks = tasksService.mapAggregateToUnsubmittedReportTask( @@ -992,12 +1018,19 @@ describe('TasksService', () => { }); it('should be able to generate proper content in all cases of team report tasks', () => { - humanizeCurrencyPipe.transform - .withArgs(teamReportResponse[0].aggregates[1].function_value, homeCurrency, true) - .and.returnValue('733.48K'); - humanizeCurrencyPipe.transform - .withArgs(teamReportResponse[0].aggregates[1].function_value, homeCurrency) - .and.returnValue('₹733.48K'); + exactCurrencyPipe.transform + .withArgs({ + value: teamReportResponse[0].aggregates[1].function_value, + currencyCode: homeCurrency, + skipSymbol: true, + }) + .and.returnValue('733479.83'); + exactCurrencyPipe.transform + .withArgs({ + value: teamReportResponse[0].aggregates[1].function_value, + currencyCode: homeCurrency, + }) + .and.returnValue('₹733479.83'); const tasks = tasksService.mapAggregateToTeamReportTask( { @@ -1009,10 +1042,10 @@ describe('TasksService', () => { expect(tasks).toEqual([ { - amount: '733.48K', + amount: '733479.83', count: 1, header: 'Report to be approved', - subheader: '1 report worth ₹733.48K requires your approval', + subheader: '1 report worth ₹733479.83 requires your approval', icon: TaskIcon.REPORT, ctas: [ { diff --git a/src/app/core/services/tasks.service.ts b/src/app/core/services/tasks.service.ts index 9999b9dc8b..df5b3b7f39 100644 --- a/src/app/core/services/tasks.service.ts +++ b/src/app/core/services/tasks.service.ts @@ -4,6 +4,7 @@ import { map, switchMap } from 'rxjs/operators'; import { FilterPill } from 'src/app/shared/components/fy-filter-pills/filter-pill.interface'; import { SelectedFilters } from 'src/app/shared/components/fy-filters/selected-filters.interface'; import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe'; +import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe'; import { TASKEVENT } from '../models/task-event.enum'; import { TaskFilters } from '../models/task-filters.model'; import { TaskIcon } from '../models/task-icon.enum'; @@ -43,6 +44,7 @@ export class TasksService { constructor( private reportService: ReportService, private humanizeCurrency: HumanizeCurrencyPipe, + private exactCurrency: ExactCurrencyPipe, private userEventService: UserEventService, private authService: AuthService, private advancesRequestService: AdvanceRequestService, @@ -684,14 +686,18 @@ export class TasksService { } getAmountString(amount: number, currency: string): string { - return amount > 0 ? ` worth ${this.humanizeCurrency.transform(amount, currency)} ` : ''; + return amount > 0 ? ` worth ${this.exactCurrency.transform({ value: amount, currencyCode: currency })} ` : ''; } mapSentBackReportsToTasks(aggregate: PlatformReportsStatsResponse, homeCurrency: string): DashboardTask[] { if (aggregate.count > 0) { return [ { - amount: this.humanizeCurrency.transform(aggregate.total_amount, homeCurrency, true), + amount: this.exactCurrency.transform({ + value: aggregate.total_amount, + currencyCode: homeCurrency, + skipSymbol: true, + }), count: aggregate.count, header: `Report${aggregate.count === 1 ? '' : 's'} sent back!`, subheader: `${aggregate.count} report${aggregate.count === 1 ? '' : 's'}${this.getAmountString( @@ -725,7 +731,11 @@ export class TasksService { } sent back by your approver`; return [ { - amount: this.humanizeCurrency.transform(aggregate.totalAmount, homeCurrency, true), + amount: this.exactCurrency.transform({ + value: aggregate.totalAmount, + currencyCode: homeCurrency, + skipSymbol: true, + }), count: aggregate.totalCount, header: headerMessage, subheader: subheaderMessage, @@ -747,7 +757,11 @@ export class TasksService { if (aggregate.count > 0) { return [ { - amount: this.humanizeCurrency.transform(aggregate.total_amount, homeCurrency, true), + amount: this.exactCurrency.transform({ + value: aggregate.total_amount, + currencyCode: homeCurrency, + skipSymbol: true, + }), count: aggregate.count, header: `Unsubmitted report${aggregate.count === 1 ? '' : 's'}`, subheader: `${aggregate.count} report${aggregate.count === 1 ? '' : 's'}${this.getAmountString( @@ -772,7 +786,11 @@ export class TasksService { if (aggregate.count > 0) { return [ { - amount: this.humanizeCurrency.transform(aggregate.total_amount, homeCurrency, true), + amount: this.exactCurrency.transform({ + value: aggregate.total_amount, + currencyCode: homeCurrency, + skipSymbol: true, + }), count: aggregate.count, header: `Report${aggregate.count === 1 ? '' : 's'} to be approved`, subheader: `${aggregate.count} report${aggregate.count === 1 ? '' : 's'}${this.getAmountString( @@ -800,7 +818,11 @@ export class TasksService { if (aggregate.totalCount > 0) { return [ { - amount: this.humanizeCurrency.transform(aggregate.totalAmount, homeCurrency, true), + amount: this.exactCurrency.transform({ + value: aggregate.totalAmount, + currencyCode: homeCurrency, + skipSymbol: true, + }), count: aggregate.totalCount, header: `Incomplete expense${aggregate.totalCount === 1 ? '' : 's'}`, subheader: `${aggregate.totalCount} expense${aggregate.totalCount === 1 ? '' : 's'}${this.getAmountString( @@ -827,7 +849,11 @@ export class TasksService { ): DashboardTask[] { if (aggregate.totalCount > 0) { const task = { - amount: this.humanizeCurrency.transform(aggregate.totalAmount, homeCurrency, true), + amount: this.exactCurrency.transform({ + value: aggregate.totalAmount, + currencyCode: homeCurrency, + skipSymbol: true, + }), count: aggregate.totalCount, header: 'Expenses are ready to report', subheader: `${aggregate.totalCount} expense${aggregate.totalCount === 1 ? '' : 's'} ${this.getAmountString( diff --git a/src/app/fyle/dashboard/stat-badge/stat-badge.component.html b/src/app/fyle/dashboard/stat-badge/stat-badge.component.html index bc4e4ceaff..a4b771f2bc 100644 --- a/src/app/fyle/dashboard/stat-badge/stat-badge.component.html +++ b/src/app/fyle/dashboard/stat-badge/stat-badge.component.html @@ -2,7 +2,7 @@
- +
- + @@ -44,7 +44,12 @@ {{ currencySymbol }} - {{ value | humanizeCurrency: currency:true }} + + {{ { value: value, currencyCode: currency, skipSymbol: true } | exactCurrency }} + + + {{ value | humanizeCurrency : currency : true }} +
{ beforeEach(waitForAsync(() => { const fyCurrencyPipeSpy = jasmine.createSpyObj('FyCurrencyPipe', ['transform']); TestBed.configureTestingModule({ - declarations: [StatBadgeComponent, HumanizeCurrencyPipe, FyCurrencyPipe], + declarations: [StatBadgeComponent, HumanizeCurrencyPipe, ExactCurrencyPipe, FyCurrencyPipe], imports: [IonicModule.forRoot()], providers: [ { diff --git a/src/app/fyle/dashboard/stat-badge/stat-badge.component.ts b/src/app/fyle/dashboard/stat-badge/stat-badge.component.ts index de97bf0f6d..85fc1cd201 100644 --- a/src/app/fyle/dashboard/stat-badge/stat-badge.component.ts +++ b/src/app/fyle/dashboard/stat-badge/stat-badge.component.ts @@ -25,7 +25,10 @@ export class StatBadgeComponent { @Output() badgeClicked = new EventEmitter(); - onBadgeClicked() { + // To track if the screen is small (370px or below) + isSmallScreen = window.innerWidth <= 370; + + onBadgeClicked(): void { if (!this.loading) { this.badgeClicked.emit(this.reportState); if (this.expenseState) { diff --git a/src/app/fyle/dashboard/stats/stats.component.scss b/src/app/fyle/dashboard/stats/stats.component.scss index 6de58c3d98..309386f265 100644 --- a/src/app/fyle/dashboard/stats/stats.component.scss +++ b/src/app/fyle/dashboard/stats/stats.component.scss @@ -20,7 +20,7 @@ $ccc-bank-name: #c4cae8; &--header { font-size: 14px; line-height: 18px; - color: $grey-light; + color: $black-light; font-weight: 500; } @@ -87,14 +87,12 @@ $ccc-bank-name: #c4cae8; } &--report-stats-row { - padding-bottom: 18px; - padding-top: 18px; + padding: 24px 0 20px 0; --ion-grid-column-padding: 0; } &--expenses-stats-row { - padding-bottom: 18px; - padding-top: 8px; + padding: 24px 0 20px 0; --ion-grid-column-padding: 0; } } diff --git a/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.html b/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.html index 11bec2a1ba..4eab786c86 100644 --- a/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.html +++ b/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.html @@ -2,7 +2,7 @@
- + - +
{{ task.header }}
- + + + {{ currencySymbol$ | async }} @@ -33,18 +35,16 @@ - + {{ task.subheader }} - - + + {{ cta.content }} - -
- -
+ + diff --git a/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.scss b/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.scss index 0c969a8233..5555689ab2 100644 --- a/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.scss +++ b/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.scss @@ -4,38 +4,35 @@ background-color: $pure-white; &--icon { font-size: 24px; + padding-top: 4px; + color: $blue-black; + &__warning { - font-size: 28px; + font-size: 20px; position: relative; - color: $grey-light; top: -2px; left: -5px; } &__expense { - color: $grey-light; - font-size: 32px; + font-size: 20px; position: relative; top: -6px; left: -8px; } &__advance { - color: $grey-light; position: relative; top: -6px; left: -8px; - height: 32px; - width: 32px; + font-size: 20px; } &__mobile { - color: $grey-light; position: relative; bottom: 4px; right: 6px; - height: 28px; - width: 28px; + font-size: 20px; } } @@ -44,10 +41,18 @@ } &--cta-row { - padding-top: 17px; + padding-top: 11px; + max-width: fit-content; + display: flex; &-icon { color: $black; + font-size: 14px; + padding: 0; + } + + &-icon-container { + padding: 3px 0 0 2px; } } @@ -62,7 +67,7 @@ } &--header-col { - padding-top: 0; + padding: 0; } &--card { @@ -78,31 +83,36 @@ } &--amount { - font-size: 18px; + font-size: 12px; line-height: 28px; - font-weight: 500; + padding: 0; color: $dark-blue; + display: flex; + align-items: center; + gap: 2px; } &--header { - font-size: 18px; + font-size: 14px; line-height: 23px; font-weight: 500; - color: $dark-blue; - padding-top: 4px; + color: $blue-black; + padding: 4px 0 0 0; } &--subheader { - font-size: 16px; + font-size: 12px; line-height: 20px; color: $blue-black; + padding: 0; } &--cta { font-size: 14px; line-height: 20px; font-weight: 500; - color: $brand-primary; + color: $blue-black; white-space: nowrap; + padding: 0; } } diff --git a/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.spec.ts b/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.spec.ts index fcf867aa28..7d6849cd54 100644 --- a/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.spec.ts +++ b/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.spec.ts @@ -28,10 +28,10 @@ describe('TasksCardComponent', () => { component = fixture.componentInstance; component.currencySymbol$ = of('₹'); component.task = { - amount: '142.26K', + amount: '14200.26', count: 13, header: 'Complete', - subheader: '13 expenses worth ₹142.26K can be added to a report', + subheader: '13 expenses worth ₹14200.26 can be added to a report', icon: TaskIcon.REPORT, ctas: [ { @@ -83,11 +83,11 @@ describe('TasksCardComponent', () => { tick(); })); - it('should display the correct header and subheader for the first task', () => { + it('should display the correct header and amount for the first task', () => { const taskHeader = getElementBySelector(fixture, '.task--header'); expect(getTextContent(taskHeader)).toContain('Complete'); - const taskSubheader = getElementBySelector(fixture, '.task--subheader'); - expect(getTextContent(taskSubheader)).toContain('13 expenses worth ₹142.26K can be added to a report'); + const taskAmount = getElementBySelector(fixture, '.task--amount'); + expect(getTextContent(taskAmount)).toContain('14200.26'); }); }); diff --git a/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.html b/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.html index 7637938391..60912db7d8 100644 --- a/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.html +++ b/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.html @@ -1,33 +1,47 @@
- {{ advanceRequest.created_at | date: 'MMM dd, YYYY' }} + {{ advanceRequest.created_at | date : 'MMM dd, YYYY' }}
-
-
- {{ advanceRequest.purpose | ellipsis: 30 }} +
+ +
+
-
- {{ currencySymbol }} - {{ advanceRequest.orig_amount || advanceRequest.amount | humanizeCurrency: advanceRequest.currency:true }} - -
-
-
-
-
-
-
- Approved on {{ advanceRequest.areq_approved_at | date: 'MMM dd, YYYY' }} +
+ +
+ {{ advanceRequest.purpose | ellipsis : 30 }} +
+ + +
+ {{ currencySymbol }} + + {{ + { + value: advanceRequest.orig_amount || advanceRequest.amount || 0, + currencyCode: advanceRequest.currency, + skipSymbol: true + } | exactCurrency + }} + +
+ + +
+
+ Approved on {{ advanceRequest.areq_approved_at | date : 'MMM dd, YYYY' }} +
-
- {{ internalState.name }} -
+
+ +
+ {{ internalState.name }}
diff --git a/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.scss b/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.scss index 0437055ef7..0a0d34fa61 100644 --- a/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.scss +++ b/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.scss @@ -8,7 +8,7 @@ $advance_paid_color: darken(#5cb85c, 15%); $advance_rejected_color: #d50000; .advance-card { - padding: 16px; + padding: 12px 12px 0 12px; background-color: $pure-white; &__with-border { @@ -21,7 +21,7 @@ $advance_rejected_color: #d50000; } &--date { - color: $grey-light; + color: $black-light; padding: 16px 0 12px 16px; background-color: $white; font-weight: 500; @@ -29,33 +29,49 @@ $advance_rejected_color: #d50000; &--main-info { margin-bottom: 6px; + display: flex; + justify-content: space-between; + } + + &--list-icon { + width: 16px; + padding-top: 2px; } &--purpose { line-height: 23px; color: $black-2; - font-size: 18px; + font-size: 14px; font-weight: 500; - max-width: 60%; + max-width: 70%; + white-space: nowrap; } - &--purpose-amount-block { + &--purpose-amount-date-block { display: flex; - justify-content: space-between; + justify-content: flex-start; + align-items: flex-start; + gap: 8px; + width: 70%; + } + + &--purpose-amount-date-container { + width: 100%; + } + + &--amount-block { + margin-top: 10px; } &--currency { color: $black-light; font-weight: 500; font-size: 16px; - line-height: 1.25; } &--amount { color: $black; - font-size: 20px; - line-height: 1.3; - margin-right: 6px; + font-size: 16px; font-weight: 500; } diff --git a/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.spec.ts b/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.spec.ts index 076b421073..ebcfeb0008 100644 --- a/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.spec.ts +++ b/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.spec.ts @@ -6,6 +6,7 @@ import { AdvanceRequestService } from 'src/app/core/services/advance-request.ser import { EllipsisPipe } from 'src/app/shared/pipes/ellipses.pipe'; import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe'; import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe'; +import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe'; import { MyAdvancesCardComponent } from './my-advances-card.component'; import * as dayjs from 'dayjs'; import { click, getElementBySelector, getTextContent } from 'src/app/core/dom-helpers'; @@ -19,7 +20,7 @@ describe('MyAdvancesCardComponent', () => { beforeEach(waitForAsync(() => { const advanceRequestServiceSpy = jasmine.createSpyObj('AdvanceRequestService', ['getInternalStateAndDisplayName']); TestBed.configureTestingModule({ - declarations: [MyAdvancesCardComponent, EllipsisPipe, HumanizeCurrencyPipe, DatePipe], + declarations: [MyAdvancesCardComponent, EllipsisPipe, HumanizeCurrencyPipe, ExactCurrencyPipe, DatePipe], imports: [IonicModule.forRoot()], providers: [ FyCurrencyPipe, diff --git a/src/app/fyle/my-advances/my-advances.page.html b/src/app/fyle/my-advances/my-advances.page.html index 5b45b74e92..154cabeed8 100644 --- a/src/app/fyle/my-advances/my-advances.page.html +++ b/src/app/fyle/my-advances/my-advances.page.html @@ -36,7 +36,7 @@
- +
diff --git a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html index 8da31cda7a..3c2512f8e2 100644 --- a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html +++ b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html @@ -1,5 +1,6 @@
+ @@ -9,7 +10,7 @@ class="report-list--header--row-icon" > - Add to Report + Add to Report
- - + + + + +
{{ report.purpose }}
{{ report.num_expenses }} Expense{{ report.num_expenses > 1 ? 's' : '' }}
- -
{{ reportCurrencySymbol }} - {{ - report.amount || 0 | humanizeCurrency : report.currency : true - }} + + {{ { value: report.amount || 0, currencyCode: report.currency, skipSymbol: true } | exactCurrency }} +
+ +
{{ report.state | reportState : data.isNewReportsFlowEnabled | snakeCaseToSpaceCase | titlecase }} diff --git a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss index 54c7dc3ebe..24234fd847 100644 --- a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss +++ b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss @@ -3,16 +3,21 @@ $reports_sent_back_color: #da1e28; .report-list { &--header { - font-size: 24px; + font-size: 18px; line-height: 1.3; color: $black; - margin-bottom: 24px; font-weight: 500; + border-bottom: 1px solid $grey; &--row-icon-container { display: flex; align-items: center; justify-content: center; + font-size: 20px; + } + + &--handle-bar-icon { + margin: 0 0 2px 0; } } @@ -20,21 +25,26 @@ $reports_sent_back_color: #da1e28; margin-top: 10px; } + &--list-icon { + width: 16px; + height: 16px; + } + &--currency-amount-container { - margin-bottom: 4px; + margin: 10px 0 4px 0; } &--currency { color: $black-light; font-weight: 500; - font-size: 14px; + font-size: 16px; line-height: 1.3; margin-right: 2px; } &--amount { color: $black; - font-size: 20px; + font-size: 16px; line-height: 1.3; font-weight: 500; } @@ -42,19 +52,24 @@ $reports_sent_back_color: #da1e28; &--purpose { font-weight: 500; color: $black; - font-size: 18px; + font-size: 14px; line-height: 1.3; } &--count { - color: $blue-black; + color: $dark-grey; + font-size: 12px; line-height: 1.3; margin-top: 2px; } + &--report-card { + padding-top: 6px; + } + &--divider { border-bottom: 1px solid $grey-lighter; - margin-bottom: 14px; + margin-bottom: 6px; } &--state { diff --git a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.spec.ts b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.spec.ts index 0ea0386428..ae603ad8a6 100644 --- a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.spec.ts +++ b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.spec.ts @@ -15,6 +15,7 @@ import { ReportState } from 'src/app/shared/pipes/report-state.pipe'; import { SnakeCaseToSpaceCase } from 'src/app/shared/pipes/snake-case-to-space-case.pipe'; import { AddTxnToReportDialogComponent } from './add-txn-to-report-dialog.component'; import { expectedReportsSinglePage } from 'src/app/core/mock-data/platform-report.data'; +import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe'; describe('AddTxnToReportDialogComponent', () => { let component: AddTxnToReportDialogComponent; @@ -32,6 +33,7 @@ describe('AddTxnToReportDialogComponent', () => { AddTxnToReportDialogComponent, FyZeroStateComponent, HumanizeCurrencyPipe, + ExactCurrencyPipe, ReportState, SnakeCaseToSpaceCase, ], diff --git a/src/app/fyle/my-expenses/my-expenses.page.html b/src/app/fyle/my-expenses/my-expenses.page.html index c30ce4e4c5..407b4556d3 100644 --- a/src/app/fyle/my-expenses/my-expenses.page.html +++ b/src/app/fyle/my-expenses/my-expenses.page.html @@ -65,12 +65,12 @@ - - {{allExpensesStats?.count}} {{(allExpensesStats?.count > 1) ? 'expenses' : 'expense'}} +
+ {{allExpensesStats?.count}} {{(allExpensesStats?.count > 1) ? 'expenses' : 'expense'}} - ({{(allExpensesStats.amount || 0) | humanizeCurrency: homeCurrency }}) + ({{ { value: allExpensesStats.amount || 0, currencyCode: homeCurrency } | exactCurrency }}) - +
@@ -121,6 +121,7 @@ @@ -212,6 +213,7 @@ diff --git a/src/app/fyle/my-expenses/my-expenses.page.scss b/src/app/fyle/my-expenses/my-expenses.page.scss index 66f62f5cca..9df0de97cd 100644 --- a/src/app/fyle/my-expenses/my-expenses.page.scss +++ b/src/app/fyle/my-expenses/my-expenses.page.scss @@ -37,12 +37,17 @@ } &--multiselect-title { - padding-left: 12px; - padding-right: 0px; + display: flex; + align-items: center; + flex-wrap: wrap; + color: $blue-black; + padding: 20px 0px 20px 12px; + font-size: 18px; + gap: 4px; } &--multiselect-amount { - font-size: 16px; + font-size: 14px; font-weight: 400; } @@ -294,8 +299,9 @@ &--footer-conatiner { display: flex; justify-content: space-around; - padding: 14px 36px; + padding: 16px; position: fixed; + gap: 16px; bottom: 0; width: 100%; background-color: $pure-white; @@ -312,10 +318,13 @@ height: auto; background-color: transparent; color: $black; - font-size: 16px; + font-size: 14px; line-height: 1.25; + border: 1px solid $grey; + border-radius: 4px; + &__disabled { - opacity: 0.2; + opacity: 0.6; } } @@ -326,7 +335,6 @@ font-size: 14px; line-height: 1.3; border-radius: 4px; - width: 100%; &__disabled { opacity: 0.8; diff --git a/src/app/fyle/my-reports/my-reports.page.html b/src/app/fyle/my-reports/my-reports.page.html index bda5d9237f..bef8ea5ec1 100644 --- a/src/app/fyle/my-reports/my-reports.page.html +++ b/src/app/fyle/my-reports/my-reports.page.html @@ -72,7 +72,7 @@ - +
Add Expenses
- {{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }} - - {{ selectedTotalAmount || 0 | humanizeCurrency : homeCurrency }} + {{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }} +
+
+ {{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }}
diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss index aa08f632b9..f5d7ea983a 100644 --- a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss +++ b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss @@ -7,14 +7,18 @@ } &--title-container { - color: $black; + color: $blue-black; font-weight: 500; - margin-left: -10%; } &--title { - font-size: 20px; - line-height: 26px; + font-size: 14px; + margin-bottom: 4px; + } + + &--total-amount { + font-size: 12px; + font-weight: 400; } &--close { diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts index 9a0d19a7cb..48ab48325e 100644 --- a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts +++ b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts @@ -8,6 +8,7 @@ import { click, getElementBySelector, getTextContent } from 'src/app/core/dom-he import { CurrencyService } from 'src/app/core/services/currency.service'; import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe'; import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe'; +import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe'; import { AddExpensesToReportComponent } from './add-expenses-to-report.component'; import { expenseData } from 'src/app/core/mock-data/platform/v1/expense.data'; @@ -28,7 +29,7 @@ describe('AddExpensesToReportComponent', () => { const routerSpy = jasmine.createSpyObj('Router', ['navigate']); TestBed.configureTestingModule({ - declarations: [AddExpensesToReportComponent, HumanizeCurrencyPipe], + declarations: [AddExpensesToReportComponent, HumanizeCurrencyPipe, ExactCurrencyPipe], imports: [IonicModule.forRoot()], providers: [ FyCurrencyPipe, @@ -194,13 +195,18 @@ describe('AddExpensesToReportComponent', () => { expect(getTextContent(getElementBySelector(fixture, '.report-list--title'))).toEqual('Add Expenses'); }); - it('should show number of expenses and total amount', () => { + it('should show number of expenses', () => { component.selectedElements = [expense1, expense2]; fixture.detectChanges(); - expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--title'))).toEqual( - '2 Expenses - $500.00' - ); + expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--title'))).toEqual('2 Expenses'); + }); + + it('should show total amount', () => { + component.selectedElements = [expense1, expense2]; + fixture.detectChanges(); + + expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--total-amount'))).toEqual('$500.00'); }); it('should zero state message if no unreported expense exist', () => { diff --git a/src/app/fyle/my-view-report/my-view-report.page.html b/src/app/fyle/my-view-report/my-view-report.page.html index 9345133e70..a61b6d084f 100644 --- a/src/app/fyle/my-view-report/my-view-report.page.html +++ b/src/app/fyle/my-view-report/my-view-report.page.html @@ -29,11 +29,11 @@
- - + +
- {{report.purpose | ellipsis: 15}} + {{report.purpose | ellipsis: 25}}
- -
- {{ reportCurrencySymbol }} - - {{ report.amount || 0 | humanizeCurrency: report.currency:true }} - -
- - - - - - +
{{report.state | reportState : simplifyReportsSettings.enabled | snakeCaseToSpaceCase}} @@ -65,6 +53,17 @@ + + +
+ {{ reportCurrencySymbol }} + + {{ { value: report.amount || 0, currencyCode: report.currency, skipSymbol: true } | exactCurrency }} + +
+ + +
diff --git a/src/app/fyle/my-view-report/my-view-report.page.scss b/src/app/fyle/my-view-report/my-view-report.page.scss index 8969457693..97dd17f96a 100644 --- a/src/app/fyle/my-view-report/my-view-report.page.scss +++ b/src/app/fyle/my-view-report/my-view-report.page.scss @@ -100,7 +100,13 @@ &--amount { color: $white; - float: right; + font-size: 18px; + } + + &--purpose-state { + display: flex; + justify-content: space-between; + align-items: center; } &--purpose-amount-block { @@ -109,14 +115,14 @@ color: $pure-white; &__purpose { - font-size: 16px; + font-size: 14px; line-height: 18px; font-weight: 500; - max-width: 85%; + max-width: 100%; } &__amount { - font-size: 20px; + font-size: 18px; font-weight: 500; } } diff --git a/src/app/fyle/my-view-report/my-view-report.page.spec.ts b/src/app/fyle/my-view-report/my-view-report.page.spec.ts index add7003fe6..e15e4d0eab 100644 --- a/src/app/fyle/my-view-report/my-view-report.page.spec.ts +++ b/src/app/fyle/my-view-report/my-view-report.page.spec.ts @@ -33,6 +33,7 @@ import { ToastMessageComponent } from 'src/app/shared/components/toast-message/t import { EllipsisPipe } from 'src/app/shared/pipes/ellipses.pipe'; import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe'; import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe'; +import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe'; import { ReportState } from 'src/app/shared/pipes/report-state.pipe'; import { SnakeCaseToSpaceCase } from 'src/app/shared/pipes/snake-case-to-space-case.pipe'; import { NetworkService } from '../../core/services/network.service'; @@ -124,6 +125,7 @@ describe('MyViewReportPage', () => { MyViewReportPage, EllipsisPipe, HumanizeCurrencyPipe, + ExactCurrencyPipe, ReportState, SnakeCaseToSpaceCase, AsyncPipe, diff --git a/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.html b/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.html index 125fd4a339..9687d8ef82 100644 --- a/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.html +++ b/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.html @@ -10,53 +10,53 @@
-
TRANSACTION DETAILS
+
Transaction Details
{{txnDetails.btxn_description}}
-
- - {{ txnDetails.btxn_currency | currencySymbol }} - - - {{ txnDetails.btxn_amount | currency: txnDetails.btxn_currency: '' }} - - - DR - CR - -
{{txnDetails.btxn_transaction_dt | date: 'MMM dd, YYYY'}}
+
+ + {{ txnDetails.btxn_currency | currencySymbol }} + + + {{ { value: txnDetails.btxn_amount, currencyCode: txnDetails.btxn_currency, skipSymbol: true } | + exactCurrency }} + + + DR + CR + +
-
SELECT A MATCHING EXPENSE
+
Select a matching expense
-
-
IN CASE THERE IS NO MATCH
+
In case there is no match
diff --git a/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss b/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss index 61d4eeb2ef..a261cc407c 100644 --- a/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss +++ b/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss @@ -59,13 +59,13 @@ &--title { font-size: 14px; padding: 16px 50px 8px 16px; - font-weight: 400; - color: $grey-light; + font-weight: 500; + color: $black-light; } &--date { - height: 14px; - color: $black-light; + color: $dark-grey; + font-size: 12px; } &--action-title { @@ -82,7 +82,7 @@ } &--main-info { - margin-bottom: 6px; + margin-bottom: 2px; } &--icon-policy-violation { @@ -101,10 +101,15 @@ justify-content: space-between; } - &--currency { + &--amount-block { + margin-top: 10px; + font-size: 16px; color: $black-light; + } + + &--currency { + color: $black; font-weight: 400; - font-size: 16px; line-height: 1.25; margin-right: -2px; vertical-align: text-bottom; @@ -112,14 +117,12 @@ &--amount { color: $black; - font-size: 20px; line-height: 1.3; margin-right: 6px; font-weight: 500; } &--type { - color: $grey-light; font-size: 12px; line-height: 1.3; font-weight: 400; @@ -133,7 +136,7 @@ &--purpose { line-height: 23px; color: $black-2; - font-size: 18px; + font-size: 14px; font-weight: 500; max-width: 60%; text-overflow: ellipsis; diff --git a/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.spec.ts b/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.spec.ts index 138b4514d1..998b8c0a9f 100644 --- a/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.spec.ts +++ b/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.spec.ts @@ -11,6 +11,8 @@ import { CurrencyPipe, DatePipe } from '@angular/common'; import { CurrencySymbolPipe } from 'src/app/shared/pipes/currency-symbol.pipe'; import { ExpensePreviewComponent } from './expense-preview/expense-preview.component'; import { click, getElementBySelector, getTextContent } from 'src/app/core/dom-helpers'; +import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe'; +import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe'; describe('PersonalCardsMatchedExpensesPage', () => { let component: PersonalCardsMatchedExpensesPage; @@ -34,7 +36,7 @@ describe('PersonalCardsMatchedExpensesPage', () => { const modalControllerSpy = jasmine.createSpyObj('ModalController', ['create']); const modalPropertiesSpy = jasmine.createSpyObj('ModalPropertiesService', ['getModalDefaultProperties']); TestBed.configureTestingModule({ - declarations: [PersonalCardsMatchedExpensesPage, CurrencyPipe, DatePipe, CurrencySymbolPipe], + declarations: [PersonalCardsMatchedExpensesPage, CurrencyPipe, DatePipe, CurrencySymbolPipe, ExactCurrencyPipe], imports: [IonicModule.forRoot(), RouterTestingModule, RouterModule], providers: [ UrlSerializer, @@ -50,6 +52,8 @@ describe('PersonalCardsMatchedExpensesPage', () => { provide: ModalPropertiesService, useValue: modalPropertiesSpy, }, + FyCurrencyPipe, + CurrencyPipe, ], }).compileComponents(); personalCardsService = TestBed.inject(PersonalCardsService) as jasmine.SpyObj; diff --git a/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.html b/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.html index 0073733591..df55c738ed 100644 --- a/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.html +++ b/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.html @@ -3,36 +3,35 @@
-
+
-
+
-
+
-
+
-
-
+
diff --git a/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.scss b/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.scss index 73cfd41e92..38fa0623b8 100644 --- a/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.scss +++ b/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.scss @@ -1,6 +1,7 @@ .shimmer { &--section { margin-bottom: 30px; + padding: 12px; } &--date { @@ -15,16 +16,18 @@ } &--desc { - width: 65%; - height: 22px; + width: 100%; + height: 20px; } &--amount { - width: 25%; + width: 35%; + height: 22px; + margin-bottom: 8px; } &--sub-header { - width: 35%; + width: 45%; height: 20px; } } diff --git a/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.html b/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.html index 453a03eb44..1cba58ab1f 100644 --- a/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.html +++ b/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.html @@ -1,33 +1,47 @@
- {{ advanceRequest.areq_created_at | date: 'MMM dd, YYYY' }} + {{ advanceRequest.areq_created_at | date : 'MMM dd, YYYY' }}
-
-
- {{ advanceRequest.areq_purpose | ellipsis: 30 }} +
+ +
+
-
- {{ currencySymbol }} - {{ advanceRequest.areq_amount || 0 | humanizeCurrency: advanceRequest.areq_currency:true }} - -
-
-
-
-
-
-
- Approved on {{ advanceRequest.areq_approved_at | date: 'MMM dd, YYYY' }} + +
+
+ {{ advanceRequest.areq_purpose | ellipsis : 30 }} +
+ + +
+ {{ currencySymbol }} + + {{ + { value: advanceRequest.areq_amount || 0, currencyCode: advanceRequest.areq_currency, skipSymbol: true } + | exactCurrency + }} + +
+ + +
+
+
+ Approved on {{ advanceRequest.areq_approved_at | date : 'MMM dd, YYYY' }} +
+
-
- {{ internalState.name }} -
+
+ + +
+ {{ internalState.name }}
diff --git a/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.scss b/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.scss index 0437055ef7..589371a453 100644 --- a/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.scss +++ b/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.scss @@ -8,7 +8,7 @@ $advance_paid_color: darken(#5cb85c, 15%); $advance_rejected_color: #d50000; .advance-card { - padding: 16px; + padding: 12px 12px 0 12px; background-color: $pure-white; &__with-border { @@ -21,7 +21,7 @@ $advance_rejected_color: #d50000; } &--date { - color: $grey-light; + color: $black-light; padding: 16px 0 12px 16px; background-color: $white; font-weight: 500; @@ -29,42 +29,60 @@ $advance_rejected_color: #d50000; &--main-info { margin-bottom: 6px; + display: flex; + justify-content: space-between; + } + + &--list-icon { + width: 16px; + height: 16px; + padding-top: 2px; } &--purpose { - line-height: 23px; color: $black-2; - font-size: 18px; + font-size: 14px; font-weight: 500; - max-width: 60%; + max-width: 70%; + white-space: nowrap; } - &--purpose-amount-block { + &--purpose-amount-date-block { display: flex; - justify-content: space-between; + justify-content: flex-start; + align-items: flex-start; + gap: 8px; + width: 70%; + } + + &--purpose-amount-date-container { + width: 100%; + } + + &--amount-block { + margin-top: 10px; } &--currency { color: $black-light; font-weight: 500; font-size: 16px; - line-height: 1.25; } &--amount { color: $black; - font-size: 20px; - line-height: 1.3; - margin-right: 6px; + font-size: 16px; font-weight: 500; } &--secondary-info-block { display: flex; justify-content: space-between; + color: $black-light; + font-size: 12px; } &--approval { - margin-bottom: 8px; + margin-top: 2px; } } diff --git a/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.spec.ts b/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.spec.ts index 2cf994c607..58248eb2ae 100644 --- a/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.spec.ts +++ b/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.spec.ts @@ -5,6 +5,7 @@ import { TeamAdvCardComponent } from './team-adv-card.component'; import { AdvanceRequestService } from 'src/app/core/services/advance-request.service'; import { EllipsisPipe } from 'src/app/shared/pipes/ellipses.pipe'; import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe'; +import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe'; import { extendedAdvReqDraft } from 'src/app/core/mock-data/extended-advance-request.data'; import { ExtendedAdvanceRequest } from 'src/app/core/models/extended_advance_request.model'; import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe'; @@ -25,7 +26,7 @@ describe('TeamAdvCardComponent', () => { }); TestBed.configureTestingModule({ - declarations: [TeamAdvCardComponent, HumanizeCurrencyPipe, EllipsisPipe, FyCurrencyPipe], + declarations: [TeamAdvCardComponent, HumanizeCurrencyPipe, ExactCurrencyPipe, EllipsisPipe, FyCurrencyPipe], imports: [IonicModule.forRoot(), MatRippleModule], providers: [ { provide: AdvanceRequestService, useValue: advanceRequestServiceSpy }, diff --git a/src/app/fyle/team-advance/team-advance.page.html b/src/app/fyle/team-advance/team-advance.page.html index 89f2360013..9bf9f853a2 100644 --- a/src/app/fyle/team-advance/team-advance.page.html +++ b/src/app/fyle/team-advance/team-advance.page.html @@ -29,7 +29,7 @@ >
- +
diff --git a/src/app/fyle/view-expense/view-expense.page.html b/src/app/fyle/view-expense/view-expense.page.html index 3786fff5cd..88f5e6910c 100644 --- a/src/app/fyle/view-expense/view-expense.page.html +++ b/src/app/fyle/view-expense/view-expense.page.html @@ -70,7 +70,7 @@
{{ expenseCurrencySymbol }} - {{ expense.amount | humanizeCurrency: expense.currency:true }} + {{ { value: expense.amount, currencyCode: expense.currency , skipSymbol: true } | exactCurrency }}
+
+ {{ projectFieldName | titlecase }}: {{ expense.project?.name || '-' }} +
+
+ Card: {{ cardNumber | maskNumber }} {{'(' + cardNickname + ')'}} +
+
+ +
{{ projectFieldName | titlecase }} : {{ expense.project?.name || '-' }}
-
-
-
+
{{ expenseCurrencySymbol }} - {{ expense.amount || 0 | humanizeCurrency: expense.currency:true }} + {{ { value: expense.amount || 0, currencyCode: expense.currency , skipSymbol: true} | exactCurrency }}
- +
+
{{ projectFieldName | titlecase }} : {{ perDiemExpense.project?.name || '-' }}
-
-
-
+
{{ expenseCurrencySymbol }} - {{ perDiemExpense.amount || 0 | humanizeCurrency: perDiemExpense.currency:true }} + {{ { value: perDiemExpense.amount || 0, currencyCode: perDiemExpense.currency, skipSymbol: true } | + exactCurrency }}
- +
+
- - + +
- {{report.purpose | ellipsis: 15}} + {{report.purpose | ellipsis: 25}}
- -
- {{ reportCurrencySymbol }} - - {{ report.amount || 0 | humanizeCurrency: report.currency:true }} - -
- - - - - - +
{{report.state | reportState : simplifyReportsSettings.enabled | snakeCaseToSpaceCase}} @@ -61,6 +49,17 @@ + + +
+ {{ reportCurrencySymbol }} + + {{ { value: report.amount || 0, currencyCode: report.currency, skipSymbol: true } | exactCurrency }} + +
+ + +
@@ -75,7 +74,7 @@ - +
@@ -89,7 +88,7 @@
- +
View Info diff --git a/src/app/fyle/view-team-report/view-team-report.page.scss b/src/app/fyle/view-team-report/view-team-report.page.scss index 8a1f5378fe..158445dfd8 100644 --- a/src/app/fyle/view-team-report/view-team-report.page.scss +++ b/src/app/fyle/view-team-report/view-team-report.page.scss @@ -33,9 +33,9 @@ $sent-back-color: #da1e28; background: url('../../../assets/images/card.png') no-repeat bottom; background-size: 100% 100%; margin: 12px 0; - padding: 8px; + padding: 0 8px; border-radius: 16px; - height: 140px; + height: 150px; position: relative; } @@ -73,6 +73,10 @@ $sent-back-color: #da1e28; color: $pure-white; } + &--view-info-container { + padding: 0 5px; + } + &--view-info { display: flex; float: right; @@ -238,7 +242,13 @@ $sent-back-color: #da1e28; &--amount { color: $white; - float: right; + font-size: 18px; + } + + &--purpose-state { + display: flex; + justify-content: space-between; + align-items: center; } &--purpose-amount-block { @@ -247,18 +257,22 @@ $sent-back-color: #da1e28; color: $pure-white; &__purpose { - font-size: 16px; + font-size: 14px; line-height: 18px; font-weight: 500; - max-width: 85%; + max-width: 100%; } &__amount { - font-size: 20px; + font-size: 18px; font-weight: 500; } } + &--submitted-date-container { + padding: 0 5px; + } + &--submitted-date { font-weight: 500; font-size: 12px; @@ -274,7 +288,7 @@ $sent-back-color: #da1e28; } &--employee-name-block { - padding: 0 5px; + padding: 14px 5px 0 5px; } &--employee-name { diff --git a/src/app/fyle/view-team-report/view-team-report.page.spec.ts b/src/app/fyle/view-team-report/view-team-report.page.spec.ts index 22722fe61e..70f727b2f7 100644 --- a/src/app/fyle/view-team-report/view-team-report.page.spec.ts +++ b/src/app/fyle/view-team-report/view-team-report.page.spec.ts @@ -32,6 +32,7 @@ import { ToastMessageComponent } from 'src/app/shared/components/toast-message/t import { EllipsisPipe } from 'src/app/shared/pipes/ellipses.pipe'; import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe'; import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe'; +import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe'; import { NetworkService } from '../../core/services/network.service'; import { TrackingService } from '../../core/services/tracking.service'; import { ViewTeamReportPage } from './view-team-report.page'; @@ -77,6 +78,7 @@ describe('ViewTeamReportPageV2', () => { let snackbarProperties: jasmine.SpyObj; let statusService: jasmine.SpyObj; let humanizeCurrency: jasmine.SpyObj; + let exactCurrency: jasmine.SpyObj; let orgSettingsService: jasmine.SpyObj; let approverReportsService: jasmine.SpyObj; let launchDarklyService: jasmine.SpyObj; @@ -107,6 +109,7 @@ describe('ViewTeamReportPageV2', () => { const snackbarPropertiesSpy = jasmine.createSpyObj('SnackbarPropertiesService', ['setSnackbarProperties']); const statusServiceSpy = jasmine.createSpyObj('StatusService', ['find', 'createStatusMap', 'post']); const humanizeCurrencySpy = jasmine.createSpyObj('HumanizeCurrencyPipe', ['transform']); + const exactCurrencySpy = jasmine.createSpyObj('ExactCurrencyPipe', ['transform']); const orgSettingsServiceSpy = jasmine.createSpyObj('OrgSettingsService', ['get']); const approverReportsServiceSpy = jasmine.createSpyObj('ApproverReportsService', [ 'getReportById', @@ -119,7 +122,7 @@ describe('ViewTeamReportPageV2', () => { refinerService = jasmine.createSpyObj('RefinerService', ['startSurvey']); TestBed.configureTestingModule({ - declarations: [ViewTeamReportPage, EllipsisPipe, HumanizeCurrencyPipe], + declarations: [ViewTeamReportPage, EllipsisPipe, HumanizeCurrencyPipe, ExactCurrencyPipe], imports: [IonicModule.forRoot(), FormsModule], providers: [ FyCurrencyPipe, @@ -203,6 +206,10 @@ describe('ViewTeamReportPageV2', () => { provide: HumanizeCurrencyPipe, useValue: humanizeCurrencySpy, }, + { + provide: ExactCurrencyPipe, + useValue: exactCurrencySpy, + }, { provide: OrgSettingsService, useValue: orgSettingsServiceSpy, @@ -233,6 +240,7 @@ describe('ViewTeamReportPageV2', () => { snackbarProperties = TestBed.inject(SnackbarPropertiesService) as jasmine.SpyObj; statusService = TestBed.inject(StatusService) as jasmine.SpyObj; humanizeCurrency = TestBed.inject(HumanizeCurrencyPipe) as jasmine.SpyObj; + exactCurrency = TestBed.inject(ExactCurrencyPipe) as jasmine.SpyObj; orgSettingsService = TestBed.inject(OrgSettingsService) as jasmine.SpyObj; approverReportsService = TestBed.inject(ApproverReportsService) as jasmine.SpyObj; launchDarklyService = TestBed.inject(LaunchDarklyService) as jasmine.SpyObj; @@ -566,7 +574,7 @@ describe('ViewTeamReportPageV2', () => { describe('approveReport(): ', () => { it('should open the modal and approve the report', fakeAsync(() => { - humanizeCurrency.transform.and.callThrough(); + exactCurrency.transform.and.callThrough(); const popoverSpy = jasmine.createSpyObj('popover', ['present', 'onWillDismiss']); popoverSpy.onWillDismiss.and.resolveTo({ data: { @@ -589,6 +597,7 @@ describe('ViewTeamReportPageV2', () => { componentProps: { title: 'Approve Report', message: '3 expenses of amount undefined will be approved', + leftAlign: true, flaggedExpensesCount: 0, primaryCta: { text: 'Approve', @@ -602,11 +611,11 @@ describe('ViewTeamReportPageV2', () => { component: PopupAlertComponent, cssClass: 'pop-up-in-center', }); - expect(humanizeCurrency.transform).toHaveBeenCalledOnceWith( - reportWithExpenses.amount, - reportWithExpenses.currency, - false - ); + expect(exactCurrency.transform).toHaveBeenCalledOnceWith({ + value: reportWithExpenses.amount, + currencyCode: reportWithExpenses.currency, + skipSymbol: false, + }); expect(approverReportsService.approve).toHaveBeenCalledOnceWith(platformReportData.id); expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'enterprise', 'team_reports']); expect(launchDarklyService.getVariation).toHaveBeenCalledOnceWith('nps_survey', false); diff --git a/src/app/fyle/view-team-report/view-team-report.page.ts b/src/app/fyle/view-team-report/view-team-report.page.ts index a81e4792c1..1886231a81 100644 --- a/src/app/fyle/view-team-report/view-team-report.page.ts +++ b/src/app/fyle/view-team-report/view-team-report.page.ts @@ -20,7 +20,7 @@ import * as dayjs from 'dayjs'; import { StatusService } from 'src/app/core/services/status.service'; import { ExtendedStatus } from 'src/app/core/models/extended_status.model'; import { PopupAlertComponent } from 'src/app/shared/components/popup-alert/popup-alert.component'; -import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe'; +import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe'; import { ExtendedOrgUser } from 'src/app/core/models/extended-org-user.model'; import { OrgSettingsService } from 'src/app/core/services/org-settings.service'; import { EditReportNamePopoverComponent } from '../my-view-report/edit-report-name-popover/edit-report-name-popover.component'; @@ -147,7 +147,7 @@ export class ViewTeamReportPage { private refinerService: RefinerService, private snackbarProperties: SnackbarPropertiesService, private statusService: StatusService, - private humanizeCurrency: HumanizeCurrencyPipe, + private exactCurrency: ExactCurrencyPipe, private orgSettingsService: OrgSettingsService, private approverReportsService: ApproverReportsService ) {} @@ -353,13 +353,18 @@ export class ViewTeamReportPage { const report = await this.report$.pipe(take(1)).toPromise(); const expenses = await this.expenses$.toPromise(); - const rpAmount = this.humanizeCurrency.transform(report.amount, report.currency, false); + const rpAmount = this.exactCurrency.transform({ + value: report.amount, + currencyCode: report.currency, + skipSymbol: false, + }); const flaggedExpensesCount = expenses.filter((expense) => expense.is_policy_flagged).length; const popover = await this.popoverController.create({ componentProps: { flaggedExpensesCount, title: 'Approve Report', message: report.num_expenses + ' expenses of amount ' + rpAmount + ' will be approved', + leftAlign: true, primaryCta: { text: 'Approve', action: 'approve', diff --git a/src/app/shared/components/create-new-report-v2/create-new-report.component.html b/src/app/shared/components/create-new-report-v2/create-new-report.component.html index 2777b65f82..b5b3b0cea0 100644 --- a/src/app/shared/components/create-new-report-v2/create-new-report.component.html +++ b/src/app/shared/components/create-new-report-v2/create-new-report.component.html @@ -5,8 +5,10 @@
Create new report
- {{ selectedElements.length }} {{ selectedElements.length > 1 ? 'Expenses' : 'Expense' }} - - {{ selectedTotalAmount || 0 | humanizeCurrency : homeCurrency }} + {{ selectedElements.length }} {{ selectedElements.length > 1 ? 'expenses' : 'expense' }} +
+
+ {{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }}
@@ -40,7 +42,7 @@
Please enter report name.
-
EXPENSES
+
Expenses
{ 'create', ]); const humanizeCurrencyPipeSpy = jasmine.createSpyObj('HumanizeCurrency', ['transform']); + const exactCurrencyPipeSpy = jasmine.createSpyObj('ExactCurrency', ['transform']); const fyCurrencyPipeSpy = jasmine.createSpyObj('FyCurrencyPipe', ['transform']); TestBed.configureTestingModule({ - declarations: [CreateNewReportComponent, HumanizeCurrencyPipe, FyCurrencyPipe], + declarations: [CreateNewReportComponent, HumanizeCurrencyPipe, ExactCurrencyPipe, FyCurrencyPipe], imports: [ IonicModule.forRoot(), MatIconModule, @@ -59,6 +61,7 @@ describe('CreateNewReportComponent', () => { { provide: CurrencyService, useValue: currencyService }, { provide: ExpenseFieldsService, useValue: expenseFieldsService }, { provide: HumanizeCurrencyPipe, useValue: humanizeCurrencyPipeSpy }, + { provide: ExactCurrencyPipe, useValue: exactCurrencyPipeSpy }, { provide: FyCurrencyPipe, useValue: fyCurrencyPipeSpy }, { provide: SpenderReportsService, useValue: spenderReportsService }, ], diff --git a/src/app/shared/components/expense-card-lite/expense-card-lite.component.html b/src/app/shared/components/expense-card-lite/expense-card-lite.component.html index 479ebd8213..58abcf718a 100644 --- a/src/app/shared/components/expense-card-lite/expense-card-lite.component.html +++ b/src/app/shared/components/expense-card-lite/expense-card-lite.component.html @@ -12,6 +12,10 @@
+ + +
+
@@ -20,20 +24,20 @@
-
+
{{ expense.vendor }}
-
+
{{ expense.txn_dt | date : 'MMM dd, YYYY' }}
-
-
-
-
+
+
{{ expense.currency | currencySymbol }} - {{ expense.amount }} + + {{ { value: expense.amount, currencyCode: expense.currency, skipSymbol: true } | exactCurrency }} + diff --git a/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss b/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss index 2cb6a07615..bf07cf84ad 100644 --- a/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss +++ b/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss @@ -2,16 +2,13 @@ .expenses-card { &--date { - color: $grey-light; - font-size: 14px; - padding: 16px 0 12px 16px; - background-color: $white; - font-weight: 500; + color: $dark-grey; + font-size: 12px; } &--body { min-height: 92px; - padding: 16px; + padding: 12px; background: $pure-white; } @@ -24,23 +21,28 @@ &--receipt-container { background-color: $light-grey; border-radius: 8px; - height: 65px; - padding: 15px; + height: 72px; + max-width: 56px; + padding: 20px; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; } &--receipt-image-container { background-color: $light-grey; border-radius: 8px; - height: 64px; - min-width: 64px; + height: 72px; + max-width: 56px; display: flex; justify-content: center; align-items: center; } &--receipt-image { - height: 60px; - width: 80px; + height: auto; + width: 56px; } &--with-image { @@ -50,8 +52,8 @@ } &--receipt-icon { - height: 35px; - width: 35px; + height: 28px; + width: 28px; stroke: $black-light; &__pdf { @@ -66,8 +68,13 @@ margin-right: auto; } + &--vertical-dotted-border { + border-left: 2px dashed $border-tertiary; + height: auto; + margin: 0 8px; + } + &--category-vendor-project-container { - padding: 3px 20px 4px 11px; width: 100%; overflow: hidden; text-overflow: ellipsis; @@ -91,7 +98,7 @@ &--category { color: $black; - font-size: 16px; + font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; @@ -101,7 +108,7 @@ &--vendor { color: $blue-black; - font-size: 14px; + font-size: 12px; line-height: 1.2; margin-top: 2px; white-space: nowrap; @@ -119,7 +126,7 @@ } &--currency { - color: $black-light; + color: $black; font-weight: 400; font-size: 16px; line-height: 1.25; @@ -129,7 +136,7 @@ &--amount { color: $black; - font-size: 20px; + font-size: 16px; line-height: 1.3; margin-right: 6px; font-weight: 500; diff --git a/src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts b/src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts index 28e1a0aee7..ffc1f3eb1c 100644 --- a/src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts +++ b/src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts @@ -8,6 +8,9 @@ import { CurrencySymbolPipe } from '../../pipes/currency-symbol.pipe'; import { getElementBySelector, getTextContent } from 'src/app/core/dom-helpers'; import { of } from 'rxjs'; import { platformExpenseData, platformExpenseWithExtractedData } from 'src/app/core/mock-data/platform/v1/expense.data'; +import { ExactCurrencyPipe } from '../../pipes/exact-currency.pipe'; +import { FyCurrencyPipe } from '../../pipes/fy-currency.pipe'; +import { CurrencyPipe } from '@angular/common'; describe('ExpenseCardLiteComponent', () => { let expenseCardLiteComponent: ExpenseCardLiteComponent; @@ -18,13 +21,15 @@ describe('ExpenseCardLiteComponent', () => { const expensesServiceSpy = jasmine.createSpyObj('ExpensesService', ['getExpenseById']); TestBed.configureTestingModule({ - declarations: [ExpenseCardLiteComponent, CurrencySymbolPipe], + declarations: [ExpenseCardLiteComponent, CurrencySymbolPipe, ExactCurrencyPipe], imports: [IonicModule.forRoot(), MatIconModule, MatIconTestingModule], providers: [ { provide: ExpensesService, useValue: expensesServiceSpy, }, + FyCurrencyPipe, + CurrencyPipe, ], }).compileComponents(); expensesService = TestBed.inject(ExpensesService) as jasmine.SpyObj; diff --git a/src/app/shared/components/expenses-card-v2/expenses-card.component.html b/src/app/shared/components/expenses-card-v2/expenses-card.component.html index 2ef71768af..d61b3dfbf4 100644 --- a/src/app/shared/components/expenses-card-v2/expenses-card.component.html +++ b/src/app/shared/components/expenses-card-v2/expenses-card.component.html @@ -22,13 +22,15 @@
+
+
@@ -51,6 +53,7 @@
+
+ +
@@ -134,6 +141,7 @@ + @@ -165,8 +173,10 @@ +
+
+
-
- {{ expenseFields?.project_id[0]?.field_name }}: - {{ expense?.project?.display_name ? expense?.project?.display_name : 'Unspecified' }} + + +
+
+ + {{ (expense.currency | currencySymbol : 'wide') || (homeCurrency | currencySymbol : 'wide') }} + + + + {{ { value: expense.amount, currencyCode: expense.currency, skipSymbol: true } | exactCurrency }} + + + {{ { value: expense.amount, currencyCode: homeCurrency, skipSymbol: true } | exactCurrency }} + + + +
+ +
+ ({{ expense.foreign_amount | humanizeCurrency : expense.foreign_currency }} at + {{ expense.amount / expense.foreign_amount | currency : expense.currency : 'code' }})
+ +
-
Expense information
-
missing
-
-
-
- - {{ (expense.currency | currencySymbol : 'wide') || (homeCurrency | currencySymbol : 'wide') }} - +
Expense information missing
- - - {{ expense.amount | humanizeCurrency : expense.currency : true }} - - - {{ expense.amount | humanizeCurrency : homeCurrency : true }} - - - -
+ +
+
+ + {{ (expense.currency | currencySymbol : 'wide') || (homeCurrency | currencySymbol : 'wide') }} + -
- ({{ expense.foreign_amount | humanizeCurrency : expense.foreign_currency }} at - {{ expense.amount / expense.foreign_amount | currency : expense.currency : 'code' }}) + + + {{ expense.amount | humanizeCurrency : expense.currency : true }} + + + {{ expense.amount | humanizeCurrency : homeCurrency : true }} + + + +
+ +
+ ({{ expense.foreign_amount | humanizeCurrency : expense.foreign_currency }} at + {{ expense.amount / expense.foreign_amount | currency : expense.currency : 'code' }}) +
+
-
+ +
+
{{ expense.state | expenseState | titlecase }} diff --git a/src/app/shared/components/expenses-card-v2/expenses-card.component.scss b/src/app/shared/components/expenses-card-v2/expenses-card.component.scss index 532908672d..2daf7ce055 100644 --- a/src/app/shared/components/expenses-card-v2/expenses-card.component.scss +++ b/src/app/shared/components/expenses-card-v2/expenses-card.component.scss @@ -2,9 +2,9 @@ .expenses-card { &--date { - color: $grey-light; + color: $black-light; font-size: 14px; - padding: 12px 0 12px 12px; + padding: 24px 0 16px 12px; background-color: $white; font-weight: 500; @@ -17,22 +17,26 @@ background-color: $pure-white; min-height: 106px; padding: 12px; - - &__with-border { - padding-top: 0; - } + margin-bottom: 6px; } &--deatils-block { width: 100%; overflow: hidden; text-overflow: ellipsis; + padding: 4px 0; + } + + &--vertical-dotted-border { + border-left: 2px dashed $border-tertiary; + height: auto; + margin: 0 8px; } &--checkbox-container { margin-top: auto; margin-bottom: auto; - margin-right: 16px; + margin-right: 8px; } &--checkbox { @@ -40,11 +44,6 @@ height: 20px; } - &--divider { - border-bottom: 1px solid $grey-lighter; - margin-bottom: 16px; - } - &--edit-icon { stroke: $brand-primary; font-size: 16px; @@ -104,35 +103,38 @@ &--receipt-container { background-color: $light-grey; border-radius: 8px; - height: 74px; padding: 20px; - min-width: 74px; + height: 72px; + width: 56px; + justify-content: center; + align-items: center; } &--receipt-image-container { background-color: $light-grey; border-radius: 8px; - height: 74px; - min-width: 75px; + height: 72px; + width: 56px; display: flex; justify-content: center; align-items: center; } &--receipt-image { - height: 70px; - width: 80px; + height: auto; + max-width: 56px; } &--with-image { background-size: cover; background-repeat: no-repeat; background-position: center; + width: 56px; } &--receipt-icon { - height: 35px; - width: 35px; + height: 20px; + width: 20px; color: $black-light; &__pdf { @@ -146,20 +148,21 @@ } &--receipt-thumbnail { - height: 74px; + height: 72px; margin-left: auto; margin-right: auto; } &--category-vendor-project-container { - padding: 3px 20px 4px 11px; width: 100%; overflow: hidden; text-overflow: ellipsis; + display: flex; + flex-direction: column; + &__align-vertical-center { display: flex; flex-direction: column; - justify-content: center; } &__error { @@ -171,27 +174,28 @@ } &--category-icon-container { - max-width: 170px; width: 100%; } &--category { color: $black; - font-size: 16px; + font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 126px; + max-width: 70%; + padding-right: 4px; } &--icons { display: flex; align-items: center; + padding-right: 4px; + gap: 4px; &__policy-violated-icon { - margin-left: 4px; width: 16px; height: 16px; color: $red; @@ -199,7 +203,6 @@ } &__split-icon { - margin-left: 4px; width: 16px; height: 16px; color: $brand-primary-light; @@ -208,7 +211,6 @@ &__duplicate-icon { width: 16px; height: 16px; - margin-left: 4px; color: $dark-yellow; } } @@ -222,8 +224,8 @@ } &--vendor { - color: $blue-black; - font-size: 14px; + color: $dark-grey; + font-size: 12px; line-height: 1.2; margin-top: 2px; white-space: nowrap; @@ -254,13 +256,21 @@ flex-direction: column; } + &--currency-amount-exchange-rate-container { + display: flex; + align-items: center; + gap: 4px; + margin-top: 10px; + flex-wrap: wrap; + } + &--currency-amount-container { - width: 100%; - white-space: nowrap; + display: flex; + gap: 2px; } &--currency { - color: $black-light; + color: $black; font-weight: 500; font-size: 16px; line-height: 1.25; @@ -269,10 +279,14 @@ &--amount { color: $black; - font-size: 20px; + font-size: 16px; line-height: 1.3; - margin-right: 6px; + margin-right: 2px; font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + white-space: nowrap; } &--icon { @@ -304,7 +318,6 @@ } &--state-container { - margin-top: 4px; align-self: flex-end; &__center { diff --git a/src/app/shared/components/fy-alert-info/fy-alert-info.component.scss b/src/app/shared/components/fy-alert-info/fy-alert-info.component.scss index bd37fe134b..c03c021512 100644 --- a/src/app/shared/components/fy-alert-info/fy-alert-info.component.scss +++ b/src/app/shared/components/fy-alert-info/fy-alert-info.component.scss @@ -7,6 +7,7 @@ $container-border: #dfdfe2; border: 1px solid $container-border; border-radius: 8px; padding: 12px 8px; + margin: 8px 0; display: flex; &--icon { diff --git a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.html b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.html index 09827d9d35..4b36601a15 100644 --- a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.html +++ b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.html @@ -13,39 +13,55 @@
-
- {{ description }} -
-
- Create expense - View expense - - - + + + + +
+ +
+ {{ description }} +
+ + +
+ {{ currency }} + + + {{ { value: amount, currencyCode: currency, skipSymbol: true } | exactCurrency }} + + + DR + CR + +
+ + +
+ Create expense + View expense + + + +
-
- {{ currency }} - - {{ amount | currency : currency : '' }} - - - DR - CR - -
diff --git a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.scss b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.scss index 75d9306fdf..ccb17d3de5 100644 --- a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.scss +++ b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.scss @@ -2,20 +2,17 @@ .personal-card-transaction { &--date { - color: $grey-light; + color: $black-light; font-size: 14px; - padding: 14px 0 4px 12px; + padding: 24px 16px 16px 16px; font-weight: 500; - - &__from-reports { - background-color: $pure-white; - } + background-color: $white; } &--body { background-color: $pure-white; min-height: 99px; - padding: 24px 4px 24px 12px; + padding: 12px; } &--deatils-block { @@ -41,15 +38,28 @@ } &--details { + display: flex; + justify-content: flex-start; + gap: 8px; flex-grow: 3; margin: 2px 25px 0px 0px; overflow: hidden; } + &--list-icon { + width: 16px; + height: 16px; + padding-top: 2px; + } + + &--vendor-amount-container { + max-width: 90%; + } + &--vendor { color: $black; - font-size: 18px; - font-weight: 500; + font-size: 14px; + font-weight: 400; line-height: 1.3; white-space: nowrap; overflow: hidden; @@ -57,10 +67,9 @@ } &--button { - color: $text-button-grey; + color: $brand-primary; font-size: 14px; line-height: 18px; - margin-top: 6px; font-weight: 500; &__not-filled { @@ -71,10 +80,11 @@ &--currency-amount-container { white-space: nowrap; flex-grow: 1; + margin: 10px 0; } &--currency { - color: $black-light; + color: $black; font-weight: 500; font-size: 16px; line-height: 20px; @@ -83,15 +93,15 @@ &--amount { color: $black; - font-size: 20px; + font-size: 16px; line-height: 26px; margin-right: 2px; font-weight: 500; } &--type { - color: $grey-light; - font-size: 12px; + color: $black-light; + font-size: 10px; line-height: 1.3; margin-right: 15px; font-weight: 400; diff --git a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.spec.ts b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.spec.ts index 7f74196afe..f74c86bd39 100644 --- a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.spec.ts +++ b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.spec.ts @@ -4,6 +4,11 @@ import { PersonalCardTransactionComponent } from './personal-card-transaction.co import { IonicModule } from '@ionic/angular'; import { DateFormatPipe } from '../../pipes/date-format.pipe'; import { getElementBySelector, getTextContent } from 'src/app/core/dom-helpers'; +import { ExactCurrencyPipe } from '../../pipes/exact-currency.pipe'; +import { FyCurrencyPipe } from '../../pipes/fy-currency.pipe'; +import { CurrencyPipe } from '@angular/common'; +import { MatIconModule } from '@angular/material/icon'; +import { MatIconTestingModule } from '@angular/material/icon/testing'; describe('PersonalCardTransactionComponent', () => { let component: PersonalCardTransactionComponent; @@ -12,13 +17,15 @@ describe('PersonalCardTransactionComponent', () => { beforeEach(waitForAsync(() => { const dateFormatPipeSpy = jasmine.createSpyObj('DateFormatPipe', ['transform']); TestBed.configureTestingModule({ - declarations: [PersonalCardTransactionComponent, DateFormatPipe], - imports: [IonicModule.forRoot(), IconModule], + declarations: [PersonalCardTransactionComponent, DateFormatPipe, ExactCurrencyPipe, FyCurrencyPipe], + imports: [IonicModule.forRoot(), IconModule, MatIconTestingModule, MatIconModule], providers: [ { provide: DateFormatPipe, useValue: dateFormatPipeSpy, }, + FyCurrencyPipe, + CurrencyPipe, ], }).compileComponents(); @@ -75,12 +82,12 @@ describe('PersonalCardTransactionComponent', () => { it('should return true when the transaction is selected', () => { component.selectedElements = ['btxn4xVrxJS1Kz', 'btxnspKO99BGrB']; component.selectAll = true; - expect(component.isSelected).toBe(true); + expect(component.isSelected).toBeTrue(); }); it('should return false when the transaction is not selected', () => { component.txnId = 'some-other-txn-id'; - expect(component.isSelected).toBe(false); + expect(component.isSelected).toBeFalse(); }); }); @@ -115,14 +122,14 @@ describe('PersonalCardTransactionComponent', () => { it('should display the currency, amount, and type', () => { component.currency = 'USD'; - component.amount = 123.45; + component.amount = 123678965.45; component.type = 'debit'; fixture.detectChanges(); const currencyElement = getElementBySelector(fixture, '.personal-card-transaction--currency'); expect(getTextContent(currencyElement)).toEqual('USD'); const amountElement = getElementBySelector(fixture, '.personal-card-transaction--amount'); - expect(getTextContent(amountElement)).toEqual('123.45'); + expect(getTextContent(amountElement)).toEqual('123,678,965.45'); const typeElement = getElementBySelector(fixture, '.personal-card-transaction--type'); expect(getTextContent(typeElement)).toEqual('DR'); diff --git a/src/app/shared/components/popup-alert/popup-alert.component.html b/src/app/shared/components/popup-alert/popup-alert.component.html index 31223bf7bb..6fe3ff0eeb 100644 --- a/src/app/shared/components/popup-alert/popup-alert.component.html +++ b/src/app/shared/components/popup-alert/popup-alert.component.html @@ -1,11 +1,11 @@
-
+
{{ title }}
-
+
diff --git a/src/app/shared/components/popup-alert/popup-alert.component.scss b/src/app/shared/components/popup-alert/popup-alert.component.scss index 5287a791d6..b8d007d055 100644 --- a/src/app/shared/components/popup-alert/popup-alert.component.scss +++ b/src/app/shared/components/popup-alert/popup-alert.component.scss @@ -7,16 +7,17 @@ $small-screen: 700px; &--header { color: $black; font-weight: 500; - font-size: 18px; + font-size: 16px; line-height: 1.3; padding-bottom: 16px; } &--body { - margin-bottom: 16px; + color: $blue-black; } &--cta-container { + padding-top: 8px; display: flex; justify-content: space-between; &__single-content { diff --git a/src/app/shared/components/popup-alert/popup-alert.component.ts b/src/app/shared/components/popup-alert/popup-alert.component.ts index 0557ce2c58..5f24d72d0b 100644 --- a/src/app/shared/components/popup-alert/popup-alert.component.ts +++ b/src/app/shared/components/popup-alert/popup-alert.component.ts @@ -10,6 +10,8 @@ export class PopupAlertComponent { @Input() message: string; + @Input() leftAlign = false; + @Input() primaryCta: { text: string; action: string; type?: string }; @Input() secondaryCta: { text: string; action: string; type?: string }; @@ -18,7 +20,7 @@ export class PopupAlertComponent { constructor(private popoverController: PopoverController) {} - ctaClickedEvent(action) { + ctaClickedEvent(action: string): void { this.popoverController.dismiss({ action, }); diff --git a/src/app/shared/components/reports-card/reports-card.component.html b/src/app/shared/components/reports-card/reports-card.component.html index b1dfa73f81..c197cf080f 100644 --- a/src/app/shared/components/reports-card/reports-card.component.html +++ b/src/app/shared/components/reports-card/reports-card.component.html @@ -1,6 +1,9 @@ +
{{ report.created_at | date : 'MMM dd, YYYY' }}
+ +
-
-
-
-
- {{ report.purpose | ellipsis : 40 }} -
-
- {{ reportCurrencySymbol }} - - {{ report.amount || 0 | humanizeCurrency : report.currency : true }} - +
+
+ + + +
+ +
+ {{ report.purpose | ellipsis : 40 }} +
+ + +
+ {{ report.num_expenses }} + {{ report.num_expenses === 1 ? 'Expense' : 'Expenses' }} +
+ + +
+ {{ reportCurrencySymbol }} + + {{ { value: report.amount || 0, currencyCode: report.currency, skipSymbol: true } | exactCurrency }} + +
-
-
-
-
- {{ report.num_expenses }} - {{ report.num_expenses === 1 ? 'Expense' : 'Expenses' }} -
-
- {{ report.state | reportState : simplifyReportsEnabled | snakeCaseToSpaceCase }} + + +
+
+
+ {{ report.state | reportState : simplifyReportsEnabled | snakeCaseToSpaceCase }} +
diff --git a/src/app/shared/components/reports-card/reports-card.component.scss b/src/app/shared/components/reports-card/reports-card.component.scss index 6e239503e5..722fb24654 100644 --- a/src/app/shared/components/reports-card/reports-card.component.scss +++ b/src/app/shared/components/reports-card/reports-card.component.scss @@ -1,26 +1,22 @@ @import '../../../../theme/colors.scss'; .reports-card { - padding: 16px; + padding: 12px; + margin-bottom: 6px; background-color: $pure-white; - &__with-border { - padding-top: 0; - } - &__no-top-margin { margin-top: 0; } &--divider { - border-bottom: 1px solid $grey-lighter; margin-bottom: 16px; } &--date { - color: $grey-light; + color: $black-light; font-size: 14px; - padding: 16px 0 12px 16px; + padding: 24px 14px 16px 14px; background-color: $white; font-weight: 500; } @@ -31,8 +27,23 @@ margin-right: 20px; } + &--container { + display: flex; + justify-content: space-between; + width: 100%; + } + &--main-info { + display: flex; + gap: 8px; margin-bottom: 6px; + width: 80%; + } + + &--list-icon { + width: 16px; + height: 16px; + padding-top: 2px; } &--icon-policy-violation { @@ -47,9 +58,10 @@ justify-content: space-between; } - &--purpose-amount-block { + &--purpose-num-amount-block { display: flex; - justify-content: space-between; + flex-direction: column; + width: 100%; } &--currency { @@ -60,26 +72,31 @@ margin-right: -2px; } + &--amount-block { + margin-top: 10px; + } + &--amount { color: $black; - font-size: 20px; + font-size: 16px; line-height: 1.3; - margin-right: 6px; font-weight: 500; } &--purpose { - line-height: 23px; color: $black-2; - font-size: 18px; + font-size: 14px; font-weight: 500; - max-width: 60%; + max-width: 90%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } &--no-transactions { - font-size: 14px; + font-size: 12px; line-height: 18px; - color: $blue-black; + color: $dark-grey; } } diff --git a/src/app/shared/components/reports-card/reports-card.component.spec.ts b/src/app/shared/components/reports-card/reports-card.component.spec.ts index e580853140..e344c1c636 100644 --- a/src/app/shared/components/reports-card/reports-card.component.spec.ts +++ b/src/app/shared/components/reports-card/reports-card.component.spec.ts @@ -5,6 +5,7 @@ import { MatIconTestingModule } from '@angular/material/icon/testing'; import { MatIconModule } from '@angular/material/icon'; import { EllipsisPipe } from '../../pipes/ellipses.pipe'; import { HumanizeCurrencyPipe } from '../../pipes/humanize-currency.pipe'; +import { ExactCurrencyPipe } from '../../pipes/exact-currency.pipe'; import { FyCurrencyPipe } from '../../pipes/fy-currency.pipe'; import { CurrencyPipe } from '@angular/common'; import { ReportState } from '../../pipes/report-state.pipe'; @@ -18,7 +19,14 @@ describe('ReportsCardComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ReportsCardComponent, EllipsisPipe, HumanizeCurrencyPipe, ReportState, SnakeCaseToSpaceCase], + declarations: [ + ReportsCardComponent, + EllipsisPipe, + HumanizeCurrencyPipe, + ExactCurrencyPipe, + ReportState, + SnakeCaseToSpaceCase, + ], imports: [IonicModule.forRoot(), MatIconTestingModule, MatIconModule], providers: [FyCurrencyPipe, CurrencyPipe], }).compileComponents(); diff --git a/src/app/shared/components/spent-cards/card-detail/card-detail.component.html b/src/app/shared/components/spent-cards/card-detail/card-detail.component.html index 43573a4d04..36ef056fa3 100644 --- a/src/app/shared/components/spent-cards/card-detail/card-detail.component.html +++ b/src/app/shared/components/spent-cards/card-detail/card-detail.component.html @@ -25,7 +25,21 @@ {{ currencySymbol }} - {{ cardDetail.stats.totalDraftValue | humanizeCurrency : homeCurrency : true }} + + {{ + { value: cardDetail.stats.totalDraftValue, currencyCode: homeCurrency, skipSymbol: true } | exactCurrency + }} + + + {{ cardDetail.stats.totalDraftValue | humanizeCurrency : homeCurrency : true }} +
@@ -43,7 +57,21 @@ {{ currencySymbol }} - {{ cardDetail.stats.totalAmountValue | humanizeCurrency : homeCurrency : true }} + + {{ + { value: cardDetail.stats.totalAmountValue, currencyCode: homeCurrency, skipSymbol: true } | exactCurrency + }} + + + {{ cardDetail.stats.totalAmountValue | humanizeCurrency : homeCurrency : true }} +
diff --git a/src/app/shared/components/spent-cards/card-detail/card-detail.component.scss b/src/app/shared/components/spent-cards/card-detail/card-detail.component.scss index e5f6c96736..47ee5ba332 100644 --- a/src/app/shared/components/spent-cards/card-detail/card-detail.component.scss +++ b/src/app/shared/components/spent-cards/card-detail/card-detail.component.scss @@ -41,22 +41,29 @@ margin-top: 16px; display: flex; justify-content: space-between; + align-items: center; &__margin-top { margin-top: 24px; } } - &--ccc-classified-count, + &--ccc-classified-count { + font-weight: 500; + font-size: 16px; + line-height: 28px; + color: $black; + } + &--ccc-classified-amount { font-weight: 500; - font-size: 18px; + font-size: 14px; line-height: 28px; color: $black; } &--ccc-stats-title { - font-size: 16px; + font-size: 14px; line-height: 20px; color: $black-2; } diff --git a/src/app/shared/components/spent-cards/card-detail/card-detail.component.spec.ts b/src/app/shared/components/spent-cards/card-detail/card-detail.component.spec.ts index 2641fafadb..c9d8c2bf64 100644 --- a/src/app/shared/components/spent-cards/card-detail/card-detail.component.spec.ts +++ b/src/app/shared/components/spent-cards/card-detail/card-detail.component.spec.ts @@ -6,6 +6,7 @@ import { IonicModule } from '@ionic/angular'; import { TrackingService } from 'src/app/core/services/tracking.service'; import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe'; import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe'; +import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe'; import { MaskNumber } from 'src/app/shared/pipes/mask-number.pipe'; import { CardDetailComponent } from './card-detail.component'; import { cardDetailsRes } from 'src/app/core/mock-data/platform-corporate-card-detail.data'; @@ -41,7 +42,13 @@ describe('CardDetailComponent', () => { ]); const orgSettingServiceSpy = jasmine.createSpyObj('OrgSettingsService', ['get']); TestBed.configureTestingModule({ - declarations: [CardDetailComponent, HumanizeCurrencyPipe, MaskNumber, MockCorporateCardComponent], + declarations: [ + CardDetailComponent, + HumanizeCurrencyPipe, + ExactCurrencyPipe, + MaskNumber, + MockCorporateCardComponent, + ], imports: [IonicModule.forRoot(), RouterModule, RouterTestingModule], providers: [ FyCurrencyPipe, diff --git a/src/app/shared/components/spent-cards/card-detail/card-detail.component.ts b/src/app/shared/components/spent-cards/card-detail/card-detail.component.ts index 1d802d9ac2..25fbf2bd05 100644 --- a/src/app/shared/components/spent-cards/card-detail/card-detail.component.ts +++ b/src/app/shared/components/spent-cards/card-detail/card-detail.component.ts @@ -16,6 +16,9 @@ export class CardDetailComponent { @Input() currencySymbol: string; + // To track if the screen is small (320px or below) + isSmallScreen = window.innerWidth <= 320; + constructor( private router: Router, private trackingService: TrackingService, diff --git a/src/app/shared/components/summary-tile/summary-tile.component.html b/src/app/shared/components/summary-tile/summary-tile.component.html index d2b831babe..12562a92b7 100644 --- a/src/app/shared/components/summary-tile/summary-tile.component.html +++ b/src/app/shared/components/summary-tile/summary-tile.component.html @@ -1,24 +1,27 @@
-
{{ category }}
+
+ {{ category }} +
+
- {{ purpose | ellipsis: 25 }} + {{ purpose | ellipsis : 25 }}
{{ merchant }}
+
Project: {{ project }}
-
-
-
- {{ currency }} + +
- {{ amount | humanizeCurrency: currency:true }} + {{ { value: amount, currencyCode: currency } | exactCurrency }}
- +
+
{{ ap.approver_name }}
- {{ ap.updated_at | date: 'MMM dd, YYYY' }} + {{ ap.updated_at | date : 'MMM dd, YYYY' }}
{ beforeEach(async () => { const fyCurrencyPipeSpy = jasmine.createSpyObj('FyCurrencyPipe', ['transform']); await TestBed.configureTestingModule({ - declarations: [FySummaryTileComponent, HumanizeCurrencyPipe, FyCurrencyPipe, SnakeCaseToSpaceCase, EllipsisPipe], + declarations: [ + FySummaryTileComponent, + HumanizeCurrencyPipe, + ExactCurrencyPipe, + FyCurrencyPipe, + SnakeCaseToSpaceCase, + EllipsisPipe, + ], imports: [IonicModule.forRoot()], providers: [ { diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 7fa67fda9a..f36580e46e 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -421,6 +421,6 @@ import { CCExpenseMerchantInfoPopoverComponent } from './components/cc-expense-m MobileNumberCardComponent, CCExpenseMerchantInfoPopoverComponent, ], - providers: [DecimalPipe, DatePipe, HumanizeCurrencyPipe, ImagePicker, FyCurrencyPipe, ReportState], + providers: [DecimalPipe, DatePipe, HumanizeCurrencyPipe, ImagePicker, FyCurrencyPipe, ReportState, ExactCurrencyPipe], }) export class SharedModule {} diff --git a/src/assets/svg/notch.svg b/src/assets/svg/notch.svg index cb688eb262..83b64c0fe1 100755 --- a/src/assets/svg/notch.svg +++ b/src/assets/svg/notch.svg @@ -1,3 +1,3 @@ - - + + \ No newline at end of file diff --git a/src/global.scss b/src/global.scss index ea13296024..1d756ac10e 100644 --- a/src/global.scss +++ b/src/global.scss @@ -87,7 +87,7 @@ ion-popover.error-popover { } .mat-bottom-sheet-1 { - padding: 24px 16px !important; + padding: 16px 12px 12px 12px !important; border-radius: 16px 16px 0px 0px !important; } @@ -528,9 +528,9 @@ mat-checkbox { } .mat-checkbox-label { - margin-left: 10px !important; font-size: 14px; - color: $black; + font-weight: 400; + color: $blue-black; } } @@ -1389,13 +1389,15 @@ ion-toggle.toggle-checked::before { border: 1px solid $brand-primary; border-radius: 14px; color: $brand-primary; - font-size: 12px; + font-size: 10px; font-weight: 500; display: inline-block; - line-height: 1; - padding: 5px 12px; + line-height: 18px; + padding: 2px 10px; text-align: center; text-transform: uppercase; + white-space: nowrap; + height: max-content; //get state keys for generating state class @each $state in map-keys($states) {