Skip to content

Commit

Permalink
feat: Update Matching expense card to display exact amount (#3375)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SahilK-027
SahilK-027 authored Dec 18, 2024
1 parent 9b6e8a9 commit b9d1086
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 62 deletions.
50 changes: 25 additions & 25 deletions src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,53 +10,53 @@
<ion-content class="matched-expenses">
<div class="matched-expenses--body">
<div class="matched-expenses--transaction">
<div class="matched-expenses--title">TRANSACTION DETAILS</div>
<div class="matched-expenses--title">Transaction Details</div>
<div class="matched-expenses--transaction-details">
<div class="matched-expenses--main-info">
<div class="matched-expenses--purpose-amount-block">
<div class="matched-expenses--purpose">
<span>{{txnDetails.btxn_description}}</span>
</div>
<div class="matched-expenses--amount-block">
<span
class="matched-expenses--currency"
[ngClass]="{'matched-expenses--green': txnDetails.btxn_transaction_type === 'credit'}"
>
{{ txnDetails.btxn_currency | currencySymbol }}
</span>
<span
class="matched-expenses--amount"
[ngClass]="{'matched-expenses--green': txnDetails.btxn_transaction_type === 'credit'}"
>
{{ txnDetails.btxn_amount | currency: txnDetails.btxn_currency: '' }}
</span>
<span
class="matched-expenses--type"
[ngClass]="{'matched-expenses--green': txnDetails.btxn_transaction_type === 'credit'}"
>
<ng-container *ngIf="txnDetails.btxn_transaction_type === 'debit'">DR</ng-container>
<ng-container *ngIf="txnDetails.btxn_transaction_type === 'credit'">CR</ng-container>
</span>
</div>
</div>
</div>
<div class="matched-expenses--date">{{txnDetails.btxn_transaction_dt | date: 'MMM dd, YYYY'}}</div>
<div class="matched-expenses--amount-block">
<span
class="matched-expenses--currency"
[ngClass]="{'matched-expenses--green': txnDetails.btxn_transaction_type === 'credit'}"
>
{{ txnDetails.btxn_currency | currencySymbol }}
</span>
<span
class="matched-expenses--amount"
[ngClass]="{'matched-expenses--green': txnDetails.btxn_transaction_type === 'credit'}"
>
{{ { value: txnDetails.btxn_amount, currencyCode: txnDetails.btxn_currency, skipSymbol: true } |
exactCurrency }}
</span>
<span
class="matched-expenses--type"
[ngClass]="{'matched-expenses--green': txnDetails.btxn_transaction_type === 'credit'}"
>
<ng-container *ngIf="txnDetails.btxn_transaction_type === 'debit'">DR</ng-container>
<ng-container *ngIf="txnDetails.btxn_transaction_type === 'credit'">CR</ng-container>
</span>
</div>
</div>
</div>

<div class="matched-expenses--action-content">
<div class="matched-expenses--action-title">SELECT A MATCHING EXPENSE</div>
<div class="matched-expenses--action-title">Select a matching expense</div>
<div class="matched-expenses--expenses-preview">
<ng-container *ngIf="expenseSuggestions && expenseSuggestions.length > 0">
<ng-container *ngFor="let expense of expenseSuggestions; let first = first;">
<div class="matched-expenses--divider" *ngIf="!first"></div>

<app-expense-card-lite [expense]="expense" (click)="openExpensePreview(expense.split_group_id)">
</app-expense-card-lite>
</ng-container>
</ng-container>
</div>
<div class="matched-expenses--action-title">IN CASE THERE IS NO MATCH</div>
<div class="matched-expenses--action-title">In case there is no match</div>
<div class="matched-expenses--action-container">
<div class="matched-expenses--action-card" (click)="createExpense()">
<div class="matched-expenses--block-action">
Expand Down
21 changes: 12 additions & 9 deletions src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,12 @@
font-size: 14px;
padding: 16px 50px 8px 16px;
font-weight: 400;
color: $grey-light;
color: $black-light;
}

&--date {
height: 14px;
color: $black-light;
color: $dark-grey;
font-size: 12px;
}

&--action-title {
Expand All @@ -82,7 +82,7 @@
}

&--main-info {
margin-bottom: 6px;
margin-bottom: 2px;
}

&--icon-policy-violation {
Expand All @@ -101,25 +101,28 @@
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;
}

&--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;
Expand All @@ -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;
Expand Down
6 changes: 5 additions & 1 deletion src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
Expand All @@ -50,6 +52,8 @@ describe('PersonalCardsMatchedExpensesPage', () => {
provide: ModalPropertiesService,
useValue: modalPropertiesSpy,
},
FyCurrencyPipe,
CurrencyPipe,
],
}).compileComponents();
personalCardsService = TestBed.inject(PersonalCardsService) as jasmine.SpyObj<PersonalCardsService>;
Expand Down
18 changes: 11 additions & 7 deletions src/app/shared/components/expense-card-lite/expense-card-lite.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
<div *ngIf="isReceiptPresent" class="expenses-card--receipt-image-container expenses-card--with-image">
<img class="expenses-card--receipt-image" [src]="'../../../../assets/images/pdf-receipt-placeholder.png'" />
</div>

<!-- Dashed Divider -->
<div class="expenses-card--vertical-dotted-border"></div>

<div class="d-flex expenses-card--deatils-block">
<div class="expenses-card--category-vendor-project-container">
<div class="d-flex expenses-card--category-icon-container">
Expand All @@ -20,20 +24,20 @@
</div>
</div>

<div>
<div class="expenses-card--vendor">
{{ expense.vendor }}
</div>

<div>
<div class="expenses-card--date">
{{ expense.txn_dt | date : 'MMM dd, YYYY' }}
</div>
</div>

<div class="d-flex">
<div>
<div class="expenses-card--currency-amount-container ion-text-right">
<div class="d-flex">
<div class="expenses-card--currency-amount-container">
<span class="expenses-card--currency">{{ expense.currency | currencySymbol }}</span>
<span class="expenses-card--amount"> {{ expense.amount }}</span>
<span class="expenses-card--amount">
{{ { value: expense.amount, currencyCode: expense.currency, skipSymbol: true } | exactCurrency }}
</span>

<span>
<ion-icon [src]="'assets/svg/arrow-right.svg'" class="expenses-card--icon" slot="icon-only"> </ion-icon>
Expand Down
45 changes: 26 additions & 19 deletions src/app/shared/components/expense-card-lite/expense-card-lite.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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 {
Expand All @@ -50,8 +52,8 @@
}

&--receipt-icon {
height: 35px;
width: 35px;
height: 28px;
width: 28px;
stroke: $black-light;

&__pdf {
Expand All @@ -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;
Expand All @@ -91,7 +98,7 @@

&--category {
color: $black;
font-size: 16px;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
Expand All @@ -101,7 +108,7 @@

&--vendor {
color: $blue-black;
font-size: 14px;
font-size: 12px;
line-height: 1.2;
margin-top: 2px;
white-space: nowrap;
Expand All @@ -119,7 +126,7 @@
}

&--currency {
color: $black-light;
color: $black;
font-weight: 400;
font-size: 16px;
line-height: 1.25;
Expand All @@ -129,7 +136,7 @@

&--amount {
color: $black;
font-size: 20px;
font-size: 16px;
line-height: 1.3;
margin-right: 6px;
font-weight: 500;
Expand Down
7 changes: 6 additions & 1 deletion src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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<ExpensesService>;
Expand Down

0 comments on commit b9d1086

Please sign in to comment.