feat: Milestone 1: Expense view display exact amount

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">
@@ -114,6 +114,7 @@
 
     <app-fy-loading-screen
       *ngIf="isLoading"
+      [isNewLoaderEnabled]="true"
       [isSelectionModeEnabled]="selectionMode"
       class="my-expenses--shimmers"
     ></app-fy-loading-screen>
@@ -205,6 +206,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;
   }
 

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

src/app/shared/components/expenses-card-v2/expenses-card.component.html

@@ -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>
+      <!-- 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)"
         >
@@ -51,6 +53,7 @@
         </div>
       </ng-container>
 
+      <!-- Expense Receipt -->
       <div
         class="expenses-card--receipt-image-container expenses-card--with-image"
         [ngStyle]="{
@@ -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">
@@ -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">
@@ -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"
@@ -197,6 +207,7 @@
               </div>
             </div>
 
+            <!-- Merchant -->
             <div
               class="expenses-card--vendor"
               [ngClass]="{
@@ -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>
             </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>
 
-              <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>