Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Milestone 1: Expense view display exact amount #3311

Merged
merged 12 commits into from
Dec 19, 2024
Merged

feat: Milestone 1: Expense view display exact amount #3311

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ffa5771
Milestone 1: Expense view display exact amount
SahilK-027 Dec 9, 2024
d7648e1
minor
SahilK-027 Dec 9, 2024
a5dc109
Merge branch 'master' into FYLE-86cx5qh03
SahilK-027 Dec 9, 2024
f6b7ea6
feat: Update my Expense list view to use new shimmers (#3314)
SahilK-027 Dec 9, 2024
8533be3
feat: Update create-new-report amount section (#3315)
SahilK-027 Dec 10, 2024
e13ab12
fix: Update smaller screen size design for header (#3320)
SahilK-027 Dec 10, 2024
cb5be41
feat: Add to expenses to report section (Use Exact Amount) (#3322)
SahilK-027 Dec 10, 2024
3bb9dbf
feat: Expense card section (small screens) (#3323)
SahilK-027 Dec 10, 2024
6fbb7b6
minor
SahilK-027 Dec 12, 2024
b4211e9
minor
SahilK-027 Dec 13, 2024
e23e22c
minor font-size change
SahilK-027 Dec 13, 2024
e75fc4a
Merge branch 'Q4-DISPLAY-EXACT-AMOUNT' into FYLE-86cx5qh03
SahilK-027 Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/fyle/my-expenses/my-expenses.page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
<ion-title class="my-expenses--multiselect-title page-title">
{{allExpensesStats?.count}} {{(allExpensesStats?.count > 1) ? 'expenses' : 'expense'}}
<span class="my-expenses--multiselect-amount">
({{(allExpensesStats.amount || 0) | humanizeCurrency: homeCurrency }})
({{ { value: allExpensesStats.amount || 0, currencyCode: homeCurrency } | exactCurrency }})
</span>
</ion-title>
</ng-container>
Expand Down
3 changes: 2 additions & 1 deletion src/app/fyle/my-expenses/my-expenses.page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,11 @@
&--multiselect-title {
padding-left: 12px;
padding-right: 0px;
font-size: 18px;
}

&--multiselect-amount {
font-size: 16px;
font-size: 14px;
font-weight: 400;
}

Expand Down
98 changes: 61 additions & 37 deletions src/app/shared/components/expenses-card-v2/expenses-card.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,15 @@
<div class="expenses-card--divider" *ngIf="!showDt"></div>
<ng-container>
<div class="d-flex">
<!-- Expense select checkbox -->
<div *ngIf="isSelectionModeEnabled" class="expenses-card--checkbox-container">
<mat-checkbox class="custom-mat-checkbox expenses-card--checkbox" [checked]="isSelected" disabled>
</mat-checkbox>
</div>
SahilK-027 marked this conversation as resolved.
Show resolved Hide resolved
<!-- Expense Icon -->
<ng-container *ngIf="!isReceiptPresent && !attachmentUploadInProgress">
<div
class="expenses-card--receipt-container"
class="expenses-card--receipt-container d-flex"
*ngIf="!isOutboxExpense; else outboxExpenseDisplay"
(click)="addAttachments($event)"
SahilK-027 marked this conversation as resolved.
Show resolved Hide resolved
>
Expand All @@ -51,6 +53,7 @@
</div>
</ng-container>

<!-- Expense Receipt -->
<div
class="expenses-card--receipt-image-container expenses-card--with-image"
[ngStyle]="{
Expand Down Expand Up @@ -109,6 +112,10 @@
</ng-template>
</ng-template>

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

<!-- Expense sync loader -->
<div class="d-flex expenses-card--deatils-block">
<ng-container *ngIf="isConnected$ | async; else expenseCardDefaultView">
<ng-container *ngIf="isSycing$ | async; else expenseCardScanning">
Expand All @@ -134,6 +141,7 @@
</ng-container>
</ng-container>

<!-- Scanning loader -->
<ng-template #expenseCardScanning>
<ng-container *ngIf="!isScanCompleted; else expenseCardDefaultView">
<ng-container *ngIf="isScanInProgress; else scanFailed">
Expand Down Expand Up @@ -165,8 +173,10 @@
</ng-container>
</ng-template>

<!-- Expense details -->
<ng-template #expenseCardDefaultView>
<div *ngIf="!isDraft" class="expenses-card--category-vendor-project-container">
<!-- Category -->
<div class="d-flex expenses-card--category-icon-container">
<div
class="expenses-card--category"
Expand Down Expand Up @@ -197,6 +207,7 @@
</div>
</div>

<!-- Merchant -->
<div
class="expenses-card--vendor"
[ngClass]="{
Expand All @@ -206,53 +217,66 @@
>
{{ vendorDetails }}
</div>
<div
*ngIf="expenseFields && isProjectEnabled$ | async"
class="expenses-card--project"
[ngClass]="{ 'expenses-card--project__not-filled': !expense.project?.display_name }"
>
<div *ngIf="expense?.project?.display_name?.length > 0">
<span class="text-capitalize"> {{ expenseFields?.project_id[0]?.field_name }}: </span>
{{ expense?.project?.display_name ? expense?.project?.display_name : 'Unspecified' }}

<!-- Amount & Exchange rate -->
<div class="expenses-card--currency-amount-exchange-rate-container">
<div class="expenses-card--currency-amount-container">
<span class="expenses-card--currency">
{{ (expense.currency | currencySymbol : 'wide') || (homeCurrency | currencySymbol : 'wide') }}
</span>
<span class="expenses-card--amount">
<ng-container *ngIf="expense.currency">
{{ { value: expense.amount, currencyCode: expense.currency, skipSymbol: true } | exactCurrency }}
</ng-container>
<ng-container *ngIf="!expense.currency">
{{ { value: expense.amount, currencyCode: homeCurrency, skipSymbol: true } | exactCurrency }}
</ng-container>
</span>
<mat-icon *ngIf="showPaymentModeIcon" class="expenses-card--icon" svgIcon="cash"></mat-icon>
</div>

<div *ngIf="expense.foreign_currency && expense.foreign_amount" class="expenses-card--exchange-rate">
({{ expense.foreign_amount | humanizeCurrency : expense.foreign_currency }} at
{{ expense.amount / expense.foreign_amount | currency : expense.currency : 'code' }})
</div>
SahilK-027 marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>

<!-- Expense with missing info -->
<div
*ngIf="isDraft"
class="expenses-card--category-vendor-project-container expenses-card--category-vendor-project-container__align-vertical-center expenses-card--category-vendor-project-container__error"
>
<div>Expense information</div>
<div>missing</div>
</div>
<div class="expenses-card--default-view-container">
<div class="expenses-card--currency-amount-container ion-text-right">
<span class="expenses-card--currency">
{{ (expense.currency | currencySymbol : 'wide') || (homeCurrency | currencySymbol : 'wide') }}
</span>
<div>Expense information missing</div>
SahilK-027 marked this conversation as resolved.
Show resolved Hide resolved

<span class="expenses-card--amount">
<ng-container *ngIf="expense.currency">
{{ expense.amount | humanizeCurrency : expense.currency : true }}
</ng-container>
<ng-container *ngIf="!expense.currency">
{{ expense.amount | humanizeCurrency : homeCurrency : true }}
</ng-container>
</span>
<mat-icon *ngIf="showPaymentModeIcon" class="expenses-card--icon" svgIcon="cash"></mat-icon>
</div>
<!-- Amount & Exchange rate -->
<div class="expenses-card--currency-amount-exchange-rate-container">
<div class="expenses-card--currency-amount-container">
<span class="expenses-card--currency">
{{ (expense.currency | currencySymbol : 'wide') || (homeCurrency | currencySymbol : 'wide') }}
</span>

<div
*ngIf="expense.foreign_currency && expense.foreign_amount"
class="expenses-card--exchange-rate ion-text-right"
>
({{ expense.foreign_amount | humanizeCurrency : expense.foreign_currency }} at
{{ expense.amount / expense.foreign_amount | currency : expense.currency : 'code' }})
<span class="expenses-card--amount">
<ng-container *ngIf="expense.currency">
{{ expense.amount | humanizeCurrency : expense.currency : true }}
</ng-container>
<ng-container *ngIf="!expense.currency">
{{ expense.amount | humanizeCurrency : homeCurrency : true }}
</ng-container>
</span>
<mat-icon *ngIf="showPaymentModeIcon" class="expenses-card--icon" svgIcon="cash"></mat-icon>
</div>

<div *ngIf="expense.foreign_currency && expense.foreign_amount" class="expenses-card--exchange-rate">
({{ expense.foreign_amount | humanizeCurrency : expense.foreign_currency }} at
{{ expense.amount / expense.foreign_amount | currency : expense.currency : 'code' }})
</div>
</div>
</div>

<div
*ngIf="isDraft && !isFromViewReports"
class="expenses-card--state-container state-pill state-{{ expense.state | expenseState }}"
>
<!-- Expense state (Incomplete / Complete) & Critical policy violations-->
<div class="expenses-card--default-view-container">
<div class="expenses-card--state-container state-pill state-{{ expense.state | expenseState }}">
<span>
{{ expense.state | expenseState | titlecase }}
</span>
Expand Down
59 changes: 36 additions & 23 deletions src/app/shared/components/expenses-card-v2/expenses-card.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

.expenses-card {
&--date {
color: $grey-light;
color: $black-light;
font-size: 14px;
padding: 12px 0 12px 12px;
background-color: $white;
Expand All @@ -27,12 +27,19 @@
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 {
Expand Down Expand Up @@ -104,35 +111,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;
SahilK-027 marked this conversation as resolved.
Show resolved Hide resolved
}

&--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;
SahilK-027 marked this conversation as resolved.
Show resolved Hide resolved
}

&--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 {
Expand All @@ -146,20 +156,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 {
Expand All @@ -177,13 +188,13 @@

&--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: 164px;
}

&--icons {
Expand Down Expand Up @@ -222,7 +233,7 @@
}

&--vendor {
color: $blue-black;
color: $dark-grey;
font-size: 14px;
line-height: 1.2;
margin-top: 2px;
Expand Down Expand Up @@ -254,22 +265,25 @@
flex-direction: column;
}

&--currency-amount-container {
width: 100%;
white-space: nowrap;
&--currency-amount-exchange-rate-container {
display: flex;
align-items: center;
gap: 4px;
margin-top: 10px;
flex-wrap: wrap;
SahilK-027 marked this conversation as resolved.
Show resolved Hide resolved
}

&--currency {
color: $black-light;
color: $black;
font-weight: 500;
font-size: 16px;
font-size: 14px;
line-height: 1.25;
margin-right: 1px;
}

&--amount {
color: $black;
font-size: 20px;
font-size: 16px;
line-height: 1.3;
margin-right: 6px;
font-weight: 500;
Expand Down Expand Up @@ -304,7 +318,6 @@
}

&--state-container {
margin-top: 4px;
align-self: flex-end;

&__center {
Expand Down
6 changes: 3 additions & 3 deletions src/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1384,11 +1384,11 @@ ion-toggle.toggle-checked::before {
border: 1px solid $brand-primary;
border-radius: 14px;
color: $brand-primary;
font-size: 12px;
font-size: 10px;
SahilK-027 marked this conversation as resolved.
Show resolved Hide resolved
font-weight: 500;
display: inline-block;
line-height: 1;
padding: 5px 12px;
line-height: 18px;
padding: 2px 10px;
SahilK-027 marked this conversation as resolved.
Show resolved Hide resolved
text-align: center;
text-transform: uppercase;

Expand Down
Loading