Skip to content

Commit

Permalink
fix: Minor Design QA fix to add modal transition (#3396)
Browse files Browse the repository at this point in the history
* fix: Minor Design QA fix to add modal transition

* minor fix for unit test

* minor fix
  • Loading branch information
devendrafyle authored Jan 6, 2025
1 parent b7e67ba commit 8c8b5f2
Show file tree
Hide file tree
Showing 11 changed files with 124 additions and 61 deletions.
34 changes: 27 additions & 7 deletions src/app/fyle/add-edit-expense/add-edit-expense-6.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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);
}));
});
}
10 changes: 5 additions & 5 deletions src/app/fyle/add-edit-expense/add-edit-expense.page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -5237,12 +5237,12 @@ export class AddEditExpensePage implements OnInit {
}

async openCCExpenseMerchantInfoModal(): Promise<void> {
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 {
Expand Down
34 changes: 27 additions & 7 deletions src/app/fyle/view-expense/view-expense.page.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}));
});
10 changes: 5 additions & 5 deletions src/app/fyle/view-expense/view-expense.page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -518,11 +518,11 @@ export class ViewExpensePage {
}

async openCCExpenseMerchantInfoModal(): Promise<void> {
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();
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@
<ion-toolbar mode="md" class="fy-modal-toolbar">
<ion-buttons slot="start">
<ion-button
(click)="closePopover()"
class="cc-expense-merchant-info-popover__toolbar-close-btn"
(click)="dismissModal()"
class="cc-expense-merchant-info-modal__toolbar-close-btn"
data-testid="close-btn"
>
<mat-icon class="fy-icon-close" svgIcon="cross"></mat-icon>
</ion-button>
</ion-buttons>
<ion-title class="text-center cc-expense-merchant-info-popover__toolbar-title" data-testid="title"
<ion-title class="text-center cc-expense-merchant-info-modal__toolbar-title" data-testid="title"
>Merchant</ion-title
>
</ion-toolbar>
</ion-header>

<ion-content class="cc-expense-merchant-info-popover__content">
<div class="cc-expense-merchant-info-popover__body" data-testid="content">
<ion-content class="cc-expense-merchant-info-modal__content">
<div class="cc-expense-merchant-info-modal__body" data-testid="content">
<ng-container>This merchant name comes from the transaction.</ng-container>
</div>
</ion-content>
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -21,6 +23,6 @@
&__body {
font-size: 14px;
color: $black;
padding: 20px 16px;
padding: 12px 16px 20px 16px;
}
}
Original file line number Diff line number Diff line change
@@ -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<PopoverController>;
let fixture: ComponentFixture<CCExpenseMerchantInfoPopoverComponent>;
let component: CCExpenseMerchantInfoModalComponent;
let modalController: jasmine.SpyObj<ModalController>;
let fixture: ComponentFixture<CCExpenseMerchantInfoModalComponent>;

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<PopoverController>;
fixture = TestBed.createComponent(CCExpenseMerchantInfoModalComponent);
modalController = TestBed.inject(ModalController) as jasmine.SpyObj<ModalController>;
component = fixture.componentInstance;
fixture.detectChanges();
}));
Expand All @@ -39,7 +39,7 @@ describe('CCExpenseMerchantInfoComponent', () => {

fixture.detectChanges();

expect(popoverController.dismiss).toHaveBeenCalled();
expect(modalController.dismiss).toHaveBeenCalled();
});

describe('template', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -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();
}
}

This file was deleted.

6 changes: 3 additions & 3 deletions src/app/shared/shared.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down Expand Up @@ -283,7 +283,7 @@ import { CCExpenseMerchantInfoPopoverComponent } from './components/cc-expense-m
DashboardOptInComponent,
MobileNumberCardComponent,
ExactCurrencyPipe,
CCExpenseMerchantInfoPopoverComponent,
CCExpenseMerchantInfoModalComponent,
],
imports: [
CommonModule,
Expand Down Expand Up @@ -419,7 +419,7 @@ import { CCExpenseMerchantInfoPopoverComponent } from './components/cc-expense-m
ProfileOptInCardComponent,
DashboardOptInComponent,
MobileNumberCardComponent,
CCExpenseMerchantInfoPopoverComponent,
CCExpenseMerchantInfoModalComponent,
],
providers: [DecimalPipe, DatePipe, HumanizeCurrencyPipe, ImagePicker, FyCurrencyPipe, ReportState, ExactCurrencyPipe],
})
Expand Down
21 changes: 21 additions & 0 deletions src/global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit 8c8b5f2

Please sign in to comment.