diff --git a/src/app/fyle/add-edit-expense/add-edit-expense-6.spec.ts b/src/app/fyle/add-edit-expense/add-edit-expense-6.spec.ts index 3c2dd573be..81188644d1 100644 --- a/src/app/fyle/add-edit-expense/add-edit-expense-6.spec.ts +++ b/src/app/fyle/add-edit-expense/add-edit-expense-6.spec.ts @@ -87,7 +87,7 @@ import { ccTransactionData, ccTransactionData1 } from 'src/app/core/mock-data/cc import { ccTransactionResponseData } from 'src/app/core/mock-data/corporate-card-transaction-response.data'; import { cloneDeep } from 'lodash'; import { ExpenseTransactionStatus } from 'src/app/core/enums/platform/v1/expense-transaction-status.enum'; -import { CCExpenseMerchantInfoPopoverComponent } from 'src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component'; +import { CCExpenseMerchantInfoModalComponent } from 'src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component'; export function TestCases6(getTestBed) { describe('AddEditExpensePage-6', () => { @@ -1226,18 +1226,38 @@ export function TestCases6(getTestBed) { })); it('openCCExpenseMerchantInfoModal(): should open the transaction status info modal', fakeAsync(() => { - const popoverSpy = jasmine.createSpyObj('HTMLIonPopoverElement', ['present']); - popoverController.create.and.resolveTo(popoverSpy); + const modalSpy = jasmine.createSpyObj('modal', ['present']); + modalController.create.and.resolveTo(modalSpy); + + modalProperties.getModalDefaultProperties.and.returnValue({ + cssClass: 'merchant-info', + showBackdrop: true, + canDismiss: true, + backdropDismiss: true, + animated: true, + initialBreakpoint: 1, + breakpoints: [0, 1], + handle: false, + }); component.openCCExpenseMerchantInfoModal(); tick(); - expect(popoverController.create).toHaveBeenCalledOnceWith({ - component: CCExpenseMerchantInfoPopoverComponent, - cssClass: 'fy-dialog-popover', + expect(modalController.create).toHaveBeenCalledOnceWith({ + component: CCExpenseMerchantInfoModalComponent, + cssClass: 'merchant-info', + showBackdrop: true, + canDismiss: true, + backdropDismiss: true, + animated: true, + initialBreakpoint: 1, + breakpoints: [0, 1], + handle: false, }); - expect(popoverSpy.present).toHaveBeenCalledTimes(1); + + expect(modalSpy.present).toHaveBeenCalledTimes(1); + expect(modalProperties.getModalDefaultProperties).toHaveBeenCalledTimes(1); })); }); } diff --git a/src/app/fyle/add-edit-expense/add-edit-expense.page.ts b/src/app/fyle/add-edit-expense/add-edit-expense.page.ts index e54270a3cd..9c778afba4 100644 --- a/src/app/fyle/add-edit-expense/add-edit-expense.page.ts +++ b/src/app/fyle/add-edit-expense/add-edit-expense.page.ts @@ -140,7 +140,7 @@ import { SpenderFileService } from 'src/app/core/services/platform/v1/spender/fi import { ExpenseTransactionStatus } from 'src/app/core/enums/platform/v1/expense-transaction-status.enum'; import { RefinerService } from 'src/app/core/services/refiner.service'; import { CostCentersService } from 'src/app/core/services/cost-centers.service'; -import { CCExpenseMerchantInfoPopoverComponent } from 'src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component'; +import { CCExpenseMerchantInfoModalComponent } from 'src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component'; // eslint-disable-next-line type FormValue = { @@ -5237,12 +5237,12 @@ export class AddEditExpensePage implements OnInit { } async openCCExpenseMerchantInfoModal(): Promise { - const popover = await this.popoverController.create({ - component: CCExpenseMerchantInfoPopoverComponent, - cssClass: 'fy-dialog-popover', + const modal = await this.modalController.create({ + component: CCExpenseMerchantInfoModalComponent, + ...this.modalProperties.getModalDefaultProperties('merchant-info'), }); - await popover.present(); + await modal.present(); } private filterVendor(vendor: string): string | null { diff --git a/src/app/fyle/view-expense/view-expense.page.spec.ts b/src/app/fyle/view-expense/view-expense.page.spec.ts index 955e1a8e17..e564388f6f 100644 --- a/src/app/fyle/view-expense/view-expense.page.spec.ts +++ b/src/app/fyle/view-expense/view-expense.page.spec.ts @@ -58,7 +58,7 @@ import { paidReportData, } from 'src/app/core/mock-data/platform-report.data'; import { ExpenseTransactionStatus } from 'src/app/core/enums/platform/v1/expense-transaction-status.enum'; -import { CCExpenseMerchantInfoPopoverComponent } from 'src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component'; +import { CCExpenseMerchantInfoModalComponent } from 'src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component'; describe('ViewExpensePage', () => { let component: ViewExpensePage; @@ -1079,17 +1079,37 @@ describe('ViewExpensePage', () => { })); it('openCCExpenseMerchantInfoModal(): should open the transaction status info modal', fakeAsync(() => { - const popoverSpy = jasmine.createSpyObj('HTMLIonPopoverElement', ['present']); - popoverController.create.and.resolveTo(popoverSpy); + const modalSpy = jasmine.createSpyObj('modal', ['present']); + modalController.create.and.resolveTo(modalSpy); + + modalProperties.getModalDefaultProperties.and.returnValue({ + cssClass: 'merchant-info', + showBackdrop: true, + canDismiss: true, + backdropDismiss: true, + animated: true, + initialBreakpoint: 1, + breakpoints: [0, 1], + handle: false, + }); component.openCCExpenseMerchantInfoModal(); tick(); - expect(popoverController.create).toHaveBeenCalledOnceWith({ - component: CCExpenseMerchantInfoPopoverComponent, - cssClass: 'fy-dialog-popover', + expect(modalController.create).toHaveBeenCalledOnceWith({ + component: CCExpenseMerchantInfoModalComponent, + cssClass: 'merchant-info', + showBackdrop: true, + canDismiss: true, + backdropDismiss: true, + animated: true, + initialBreakpoint: 1, + breakpoints: [0, 1], + handle: false, }); - expect(popoverSpy.present).toHaveBeenCalledTimes(1); + + expect(modalSpy.present).toHaveBeenCalledTimes(1); + expect(modalProperties.getModalDefaultProperties).toHaveBeenCalledTimes(1); })); }); diff --git a/src/app/fyle/view-expense/view-expense.page.ts b/src/app/fyle/view-expense/view-expense.page.ts index 586dd0ea59..78174f1083 100644 --- a/src/app/fyle/view-expense/view-expense.page.ts +++ b/src/app/fyle/view-expense/view-expense.page.ts @@ -38,7 +38,7 @@ import { ApproverFileService } from 'src/app/core/services/platform/v1/approver/ import { PlatformFileGenerateUrlsResponse } from 'src/app/core/models/platform/platform-file-generate-urls-response.model'; import { ApproverReportsService } from 'src/app/core/services/platform/v1/approver/reports.service'; import { ExpenseTransactionStatus } from 'src/app/core/enums/platform/v1/expense-transaction-status.enum'; -import { CCExpenseMerchantInfoPopoverComponent } from 'src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component'; +import { CCExpenseMerchantInfoModalComponent } from 'src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component'; @Component({ selector: 'app-view-expense', @@ -518,11 +518,11 @@ export class ViewExpensePage { } async openCCExpenseMerchantInfoModal(): Promise { - const popover = await this.popoverController.create({ - component: CCExpenseMerchantInfoPopoverComponent, - cssClass: 'fy-dialog-popover', + const modal = await this.modalController.create({ + component: CCExpenseMerchantInfoModalComponent, + ...this.modalProperties.getModalDefaultProperties('merchant-info'), }); - await popover.present(); + await modal.present(); } } diff --git a/src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component.html b/src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component.html similarity index 56% rename from src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component.html rename to src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component.html index 556fc228db..13096599d6 100644 --- a/src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component.html +++ b/src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component.html @@ -2,21 +2,21 @@ - Merchant - -
+ +
This merchant name comes from the transaction.
diff --git a/src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component.scss b/src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component.scss similarity index 75% rename from src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component.scss rename to src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component.scss index 2e4195d257..c147da22db 100644 --- a/src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component.scss +++ b/src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component.scss @@ -4,8 +4,10 @@ border-radius: 10px; } -.cc-expense-merchant-info-popover { +.cc-expense-merchant-info-modal { position: relative; + height: auto; + min-height: auto; &__toolbar-title { color: $black; @@ -21,6 +23,6 @@ &__body { font-size: 14px; color: $black; - padding: 20px 16px; + padding: 12px 16px 20px 16px; } } diff --git a/src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component.spec.ts b/src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component.spec.ts similarity index 61% rename from src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component.spec.ts rename to src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component.spec.ts index ac9054a2c4..149edffc5c 100644 --- a/src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component.spec.ts +++ b/src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component.spec.ts @@ -1,30 +1,30 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { IonicModule, PopoverController } from '@ionic/angular'; +import { IonicModule, ModalController } from '@ionic/angular'; -import { CCExpenseMerchantInfoPopoverComponent } from './cc-expense-merchant-info-popover.component'; +import { CCExpenseMerchantInfoModalComponent } from './cc-expense-merchant-info-modal.component'; import { getElementBySelector } from 'src/app/core/dom-helpers'; describe('CCExpenseMerchantInfoComponent', () => { - let component: CCExpenseMerchantInfoPopoverComponent; - let popoverController: jasmine.SpyObj; - let fixture: ComponentFixture; + let component: CCExpenseMerchantInfoModalComponent; + let modalController: jasmine.SpyObj; + let fixture: ComponentFixture; beforeEach(waitForAsync(() => { - const popoverControllerSpy = jasmine.createSpyObj('PopoverController', ['dismiss']); + const modalControllerSpy = jasmine.createSpyObj('ModalController', ['dismiss']); TestBed.configureTestingModule({ - declarations: [CCExpenseMerchantInfoPopoverComponent], + declarations: [CCExpenseMerchantInfoModalComponent], imports: [IonicModule.forRoot()], providers: [ { - provide: PopoverController, - useValue: popoverControllerSpy, + provide: ModalController, + useValue: modalControllerSpy, }, ], }).compileComponents(); - fixture = TestBed.createComponent(CCExpenseMerchantInfoPopoverComponent); - popoverController = TestBed.inject(PopoverController) as jasmine.SpyObj; + fixture = TestBed.createComponent(CCExpenseMerchantInfoModalComponent); + modalController = TestBed.inject(ModalController) as jasmine.SpyObj; component = fixture.componentInstance; fixture.detectChanges(); })); @@ -39,7 +39,7 @@ describe('CCExpenseMerchantInfoComponent', () => { fixture.detectChanges(); - expect(popoverController.dismiss).toHaveBeenCalled(); + expect(modalController.dismiss).toHaveBeenCalled(); }); describe('template', () => { diff --git a/src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component.ts b/src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component.ts new file mode 100644 index 0000000000..c3c0d5b0bf --- /dev/null +++ b/src/app/shared/components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import { ModalController } from '@ionic/angular'; + +@Component({ + selector: 'app-cc-expense-merchant-info', + templateUrl: './cc-expense-merchant-info-modal.component.html', + styleUrls: ['./cc-expense-merchant-info-modal.component.scss'], +}) +export class CCExpenseMerchantInfoModalComponent { + constructor(private modalController: ModalController) {} + + dismissModal(): void { + this.modalController.dismiss(); + } +} diff --git a/src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component.ts b/src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component.ts deleted file mode 100644 index 021b111cd5..0000000000 --- a/src/app/shared/components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component } from '@angular/core'; -import { PopoverController } from '@ionic/angular'; - -@Component({ - selector: 'app-cc-expense-merchant-info', - templateUrl: './cc-expense-merchant-info-popover.component.html', - styleUrls: ['./cc-expense-merchant-info-popover.component.scss'], -}) -export class CCExpenseMerchantInfoPopoverComponent { - constructor(private popoverController: PopoverController) {} - - closePopover(): void { - this.popoverController.dismiss(); - } -} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index f36580e46e..bac0988267 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -153,7 +153,7 @@ import { DashboardOptInComponent } from './components/dashboard-opt-in/dashboard import { MobileNumberCardComponent } from './components/mobile-number-card/mobile-number-card.component'; import { PasswordCheckTooltipComponent } from './components/password-check-tooltip/password-check-tooltip.component'; import { ExactCurrencyPipe } from './pipes/exact-currency.pipe'; -import { CCExpenseMerchantInfoPopoverComponent } from './components/cc-expense-merchant-info-popover/cc-expense-merchant-info-popover.component'; +import { CCExpenseMerchantInfoModalComponent } from './components/cc-expense-merchant-info-modal/cc-expense-merchant-info-modal.component'; @NgModule({ declarations: [ @@ -283,7 +283,7 @@ import { CCExpenseMerchantInfoPopoverComponent } from './components/cc-expense-m DashboardOptInComponent, MobileNumberCardComponent, ExactCurrencyPipe, - CCExpenseMerchantInfoPopoverComponent, + CCExpenseMerchantInfoModalComponent, ], imports: [ CommonModule, @@ -419,7 +419,7 @@ import { CCExpenseMerchantInfoPopoverComponent } from './components/cc-expense-m ProfileOptInCardComponent, DashboardOptInComponent, MobileNumberCardComponent, - CCExpenseMerchantInfoPopoverComponent, + CCExpenseMerchantInfoModalComponent, ], providers: [DecimalPipe, DatePipe, HumanizeCurrencyPipe, ImagePicker, FyCurrencyPipe, ReportState, ExactCurrencyPipe], }) diff --git a/src/global.scss b/src/global.scss index 8a66bd6664..d7a672a004 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1115,6 +1115,27 @@ ion-modal.auto-height { } } +ion-modal.merchant-info { + &::part(content) { + border-radius: 16px 16px 0 0 !important; + position: absolute; + bottom: 0; + } + + --height: 120px; + + .ion-page { + position: relative; + display: block; + contain: content; + + .inner-content { + max-height: 60vh; + overflow: auto; + } + } +} + .icon--navigate { height: 14px; }