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

src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html

@@ -1,5 +1,6 @@
 <ion-header>
   <div class="report-list--header">
+    <mat-icon class="fy-modal-top-bar report-list--header--handle-bar-icon" svgIcon="notch"></mat-icon>
     <ion-grid>
       <ion-row>
         <ion-col size="1" class="report-list--header--row-icon-container">
@@ -9,7 +10,7 @@
             class="report-list--header--row-icon"
           ></ion-icon>
         </ion-col>
-        <ion-col size="10" class="text-center">Add to Report</ion-col>
+        <ion-col size="10" class="report-list--header--title text-center">Add to Report</ion-col>
         <ion-col size="1" class="report-list--header--row-icon-container">
           <ion-icon
             data-testid="addIcon"
@@ -28,20 +29,23 @@
       <div data-testid="report" mat-ripple (click)="addTransactionToReport(report)">
         <div *ngIf="i > 0" class="report-list--divider"></div>
         <ion-grid class="ion-no-padding">
-          <ion-row>
-            <ion-col size="8.5" class="ion-no-padding">
+          <ion-row class="report-list--report-card">
+            <ion-col size="0.75">
+              <mat-icon class="report-list--list-icon" svgIcon="list"></mat-icon>
+            </ion-col>
+            <ion-col size="8.25" class="ion-no-padding">
               <div class="report-list--purpose">{{ report.purpose }}</div>
               <div class="report-list--count">
                 {{ report.num_expenses }} Expense{{ report.num_expenses > 1 ? 's' : '' }}
               </div>
-            </ion-col>
-            <ion-col size="3.5" class="ion-no-padding ion-text-right">
               <div class="report-list--currency-amount-container">
                 <span class="report-list--currency">{{ reportCurrencySymbol }}</span>
-                <span class="report-list--amount">{{
-                  report.amount || 0 | humanizeCurrency : report.currency : true
-                }}</span>
+                <span class="report-list--amount">
+                  {{ { value: report.amount || 0, currencyCode: report.currency, skipSymbol: true } | exactCurrency }}
+                </span>
               </div>
+            </ion-col>
+            <ion-col size="2.75" class="ion-no-padding ion-text-right">
               <div class="ion-text-right">
                 <div class="text-center report-list--state state-pill state-{{ report.state | reportState }}">
                   {{ report.state | reportState : data.isNewReportsFlowEnabled | snakeCaseToSpaceCase | titlecase }}

src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss

@@ -3,58 +3,73 @@ $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;
     }
   }
 
   &--list {
     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;
   }
 
   &--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 {

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,
       ],

src/app/fyle/my-expenses/my-expenses.page.html

@@ -65,12 +65,12 @@
   <ng-container multiselect>
     <ng-container *ngIf="homeCurrency$ | async as homeCurrency">
       <ng-container *ngIf="allExpensesStats$ | async as allExpensesStats">
-        <ion-title class="my-expenses--multiselect-title page-title">
-          {{allExpensesStats?.count}} {{(allExpensesStats?.count > 1) ? 'expenses' : 'expense'}}
+        <div class="my-expenses--multiselect-title page-title">
+          <span>{{allExpensesStats?.count}} {{(allExpensesStats?.count > 1) ? 'expenses' : 'expense'}}</span>
           <span class="my-expenses--multiselect-amount">
-            ({{(allExpensesStats.amount || 0) | humanizeCurrency: homeCurrency }})
+            ({{ { value: allExpensesStats.amount || 0, currencyCode: homeCurrency } | exactCurrency }})
           </span>
-        </ion-title>
+        </div>
       </ng-container>
     </ng-container>
     <ion-buttons mode="md" slot="end">
@@ -121,6 +121,7 @@
 
     <app-fy-loading-screen
       *ngIf="isLoading"
+      [isNewLoaderEnabled]="true"
       [isSelectionModeEnabled]="selectionMode"
       class="my-expenses--shimmers"
     ></app-fy-loading-screen>
@@ -212,6 +213,7 @@
     <ng-container *ngIf="isConnected$|async">
       <ng-container *ngIf="isLoadingDataInInfiniteScroll">
         <app-fy-loading-screen
+          [isNewLoaderEnabled]="true"
           [isSelectionModeEnabled]="selectionMode"
           class="my-expenses--shimmers"
         ></app-fy-loading-screen>

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;

src/app/shared/components/create-new-report-v2/create-new-report.component.html

@@ -5,8 +5,10 @@
       <div class="create-new-report--title-container text-center">
         <div class="create-new-report--title">Create new report</div>
         <div class="create-new-report--sub-title">
-          {{ selectedElements.length }} {{ selectedElements.length > 1 ? 'Expenses' : 'Expense' }} -
-          {{ selectedTotalAmount || 0 | humanizeCurrency : homeCurrency }}
+          {{ selectedElements.length }} {{ selectedElements.length > 1 ? 'expenses' : 'expense' }}
+        </div>
+        <div class="create-new-report--amount">
+          {{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }}
         </div>
       </div>
     </ion-title>
@@ -40,7 +42,7 @@
       <div class="create-new-report--error-message" *ngIf="showReportNameError">Please enter report name.</div>
     </div>
 
-    <div class="create-new-report--heading">EXPENSES</div>
+    <div class="create-new-report--heading">Expenses</div>
     <div class="create-new-report--select-all-checkbox">
       <mat-checkbox
         class="custom-mat-checkbox create-new-report--checkbox"

src/app/shared/components/create-new-report-v2/create-new-report.component.scss

@@ -4,18 +4,27 @@
   &--title-container {
     margin-left: -15%;
     color: $black;
-    padding: 16px;
+    padding: 12px;
   }
 
   &--title {
-    font-size: 20px;
-    line-height: 1.28;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 27px;
   }
 
   &--sub-title {
     font-size: 14px;
-    line-height: 1.28;
     margin-top: 4px;
+    font-weight: 500;
+    color: $blue-black;
+  }
+
+  &--amount {
+    font-size: 12px;
+    margin-top: 4px;
+    font-weight: 400;
+    color: $blue-black;
   }
 
   &--body {
@@ -24,7 +33,7 @@
   }
 
   &--name {
-    padding: 16px;
+    padding: 20px 12px;
     background-color: $pure-white;
   }
 
@@ -69,16 +78,16 @@
   }
 
   &--heading {
-    color: $grey-light;
+    color: $black-light;
     font-size: 14px;
-    padding: 16px 16px;
+    padding: 12px;
     background-color: $white;
     font-weight: 500;
   }
 
   &--select-all-checkbox {
     font-size: 14px;
-    padding: 16px 16px;
+    padding: 12px;
     background-color: $pure-white;
   }
 
@@ -113,11 +122,12 @@
   &--cta-container {
     display: flex;
     justify-content: space-between;
-    padding: 14px 35.5px;
+    gap: 16px;
+    padding: 16px;
     bottom: 0;
     width: 100%;
     background-color: $pure-white;
-    box-shadow: 0 -2px 12px $pink-shadow;
+    box-shadow: 0 2px 10px 0 rgba(44, 48, 78, 0.1);
     z-index: 999;
   }
 
@@ -129,9 +139,12 @@
     height: auto;
     background-color: transparent;
     color: $black;
-    font-size: 16px;
+    font-size: 14px;
     line-height: 1.25;
-    min-width: 40%;
+    flex: auto;
+    border-radius: 4px;
+    padding: 10px 12px;
+    border: 1px solid $grey;
 
     &__disabled {
       opacity: 0.2;

src/app/shared/components/create-new-report-v2/create-new-report.component.spec.ts

@@ -3,6 +3,7 @@ import { IonicModule } from '@ionic/angular';
 import { MatIconModule } from '@angular/material/icon';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { HumanizeCurrencyPipe } from '../../pipes/humanize-currency.pipe';
+import { ExactCurrencyPipe } from '../../pipes/exact-currency.pipe';
 import { ModalController } from '@ionic/angular';
 import { TrackingService } from 'src/app/core/services/tracking.service';
 import { CurrencyService } from 'src/app/core/services/currency.service';
@@ -41,10 +42,11 @@ describe('CreateNewReportComponent', () => {
       '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 },
       ],