feat: Dashboard > Home: Card expenses section display exact amount

fylein · Dec 17, 2024 · ee3d1f9 · ee3d1f9
1 parent cb9cd69
commit ee3d1f9
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 8 deletions.
diff --git a/src/app/shared/components/spent-cards/card-detail/card-detail.component.html b/src/app/shared/components/spent-cards/card-detail/card-detail.component.html
@@ -25,7 +25,16 @@
           <span class="stats--expenses-amount-currency">
             {{ currencySymbol }}
           </span>
-          {{ cardDetail.stats.totalDraftValue | humanizeCurrency : homeCurrency : true }}
+          <ng-container
+            *ngIf="!isSmallScreen && cardDetail.stats.totalDraftValue < 1000000000; else humanizeDraftAmount"
+          >
+            {{
+              { value: cardDetail.stats.totalDraftValue, currencyCode: homeCurrency, skipSymbol: true } | exactCurrency
+            }}
+          </ng-container>
+          <ng-template #humanizeDraftAmount>
+            {{ cardDetail.stats.totalDraftValue | humanizeCurrency : homeCurrency : true }}
+          </ng-template>
         </div>
       </div>
       <div class="stats--ccc-stats-title">
@@ -43,7 +52,16 @@
           <span class="stats--expenses-amount-currency">
             {{ currencySymbol }}
           </span>
-          {{ cardDetail.stats.totalAmountValue | humanizeCurrency : homeCurrency : true }}
+          <ng-container
+            *ngIf="!isSmallScreen && cardDetail.stats.totalAmountValue < 1000000000; else humanizeTotalAmount"
+          >
+            {{
+              { value: cardDetail.stats.totalAmountValue, currencyCode: homeCurrency, skipSymbol: true } | exactCurrency
+            }}
+          </ng-container>
+          <ng-template #humanizeTotalAmount>
+            {{ cardDetail.stats.totalAmountValue | humanizeCurrency : homeCurrency : true }}
+          </ng-template>
         </div>
       </div>
       <div class="stats--ccc-stats-title">

diff --git a/src/app/shared/components/spent-cards/card-detail/card-detail.component.scss b/src/app/shared/components/spent-cards/card-detail/card-detail.component.scss
@@ -41,22 +41,29 @@
     margin-top: 16px;
     display: flex;
     justify-content: space-between;
+    align-items: center;
 
     &__margin-top {
       margin-top: 24px;
     }
   }
 
-  &--ccc-classified-count,
+  &--ccc-classified-count {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 28px;
+    color: $black;
+  }
+
   &--ccc-classified-amount {
     font-weight: 500;
-    font-size: 18px;
+    font-size: 14px;
     line-height: 28px;
     color: $black;
   }
 
   &--ccc-stats-title {
-    font-size: 16px;
+    font-size: 14px;
     line-height: 20px;
     color: $black-2;
   }

diff --git a/src/app/shared/components/spent-cards/card-detail/card-detail.component.spec.ts b/src/app/shared/components/spent-cards/card-detail/card-detail.component.spec.ts
@@ -6,6 +6,7 @@ import { IonicModule } from '@ionic/angular';
 import { TrackingService } from 'src/app/core/services/tracking.service';
 import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe';
 import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe';
+import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe';
 import { MaskNumber } from 'src/app/shared/pipes/mask-number.pipe';
 import { CardDetailComponent } from './card-detail.component';
 import { cardDetailsRes } from 'src/app/core/mock-data/platform-corporate-card-detail.data';
@@ -41,7 +42,13 @@ describe('CardDetailComponent', () => {
     ]);
     const orgSettingServiceSpy = jasmine.createSpyObj('OrgSettingsService', ['get']);
     TestBed.configureTestingModule({
-      declarations: [CardDetailComponent, HumanizeCurrencyPipe, MaskNumber, MockCorporateCardComponent],
+      declarations: [
+        CardDetailComponent,
+        HumanizeCurrencyPipe,
+        ExactCurrencyPipe,
+        MaskNumber,
+        MockCorporateCardComponent,
+      ],
       imports: [IonicModule.forRoot(), RouterModule, RouterTestingModule],
       providers: [
         FyCurrencyPipe,

diff --git a/src/app/shared/components/spent-cards/card-detail/card-detail.component.ts b/src/app/shared/components/spent-cards/card-detail/card-detail.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, HostListener, Input, OnInit } from '@angular/core';
 import { Params, Router } from '@angular/router';
 import { PlatformCorporateCardDetail } from 'src/app/core/models/platform-corporate-card-detail.model';
 import { OrgSettingsService } from 'src/app/core/services/org-settings.service';
@@ -9,7 +9,7 @@ import { TrackingService } from 'src/app/core/services/tracking.service';
   templateUrl: './card-detail.component.html',
   styleUrls: ['./card-detail.component.scss'],
 })
-export class CardDetailComponent {
+export class CardDetailComponent implements OnInit {
   @Input() cardDetail: PlatformCorporateCardDetail;
 
   @Input() homeCurrency: string;
@@ -22,6 +22,14 @@ export class CardDetailComponent {
     private orgSettingService: OrgSettingsService
   ) {}
 
+  // To track if the screen is small (320px or below)
+  isSmallScreen = false;
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    this.isSmallScreen = window.innerWidth <= 320;
+  }
+
   goToExpensesPage(state: string, cardDetail: PlatformCorporateCardDetail): void {
     if (state === 'incompleteExpenses' && cardDetail.stats.totalDraftTxns && cardDetail.stats.totalDraftTxns > 0) {
       const queryParams: Params = {
@@ -44,4 +52,8 @@ export class CardDetailComponent {
       this.trackingService.dashboardOnTotalCardExpensesClick();
     }
   }
+
+  ngOnInit(): void {
+    this.isSmallScreen = window.innerWidth <= 320;
+  }
 }