feat: Add expenses to report (display exact amount) (#3331)

fylein · Dec 11, 2024 · 044025c · 044025c
1 parent f4a4cd9
commit 044025c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html
@@ -5,8 +5,10 @@
       <div *ngIf="selectedElements?.length === 0" class="report-list--title text-center">Add Expenses</div>
       <div *ngIf="selectedElements?.length > 0" class="add-expenses-to-report--title-container text-center">
         <div class="add-expenses-to-report--title">
-          {{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }} -
-          {{ selectedTotalAmount || 0 | humanizeCurrency : homeCurrency }}
+          {{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }}
+        </div>
+        <div class="add-expenses-to-report--total-amount">
+          {{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }}
         </div>
       </div>
     </ion-title>

diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss
@@ -7,14 +7,18 @@
   }
 
   &--title-container {
-    color: $black;
+    color: $blue-black;
     font-weight: 500;
-    margin-left: -10%;
   }
 
   &--title {
-    font-size: 20px;
-    line-height: 26px;
+    font-size: 14px;
+    margin-bottom: 4px;
+  }
+
+  &--total-amount {
+    font-size: 12px;
+    font-weight: 400;
   }
 
   &--close {

diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts
@@ -8,6 +8,7 @@ import { click, getElementBySelector, getTextContent } from 'src/app/core/dom-he
 import { CurrencyService } from 'src/app/core/services/currency.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 { AddExpensesToReportComponent } from './add-expenses-to-report.component';
 import { expenseData } from 'src/app/core/mock-data/platform/v1/expense.data';
 
@@ -28,7 +29,7 @@ describe('AddExpensesToReportComponent', () => {
     const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
 
     TestBed.configureTestingModule({
-      declarations: [AddExpensesToReportComponent, HumanizeCurrencyPipe],
+      declarations: [AddExpensesToReportComponent, HumanizeCurrencyPipe, ExactCurrencyPipe],
       imports: [IonicModule.forRoot()],
       providers: [
         FyCurrencyPipe,
@@ -194,13 +195,18 @@ describe('AddExpensesToReportComponent', () => {
     expect(getTextContent(getElementBySelector(fixture, '.report-list--title'))).toEqual('Add Expenses');
   });
 
-  it('should show number of expenses and total amount', () => {
+  it('should show number of expenses', () => {
     component.selectedElements = [expense1, expense2];
     fixture.detectChanges();
 
-    expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--title'))).toEqual(
-      '2 Expenses - $500.00'
-    );
+    expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--title'))).toEqual('2 Expenses');
+  });
+
+  it('should show total amount', () => {
+    component.selectedElements = [expense1, expense2];
+    fixture.detectChanges();
+
+    expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--total-amount'))).toEqual('$500.00');
   });
 
   it('should zero state message if no unreported expense exist', () => {