feat: Migrated get of v2 expenses in my-view-report to platform (#2629)

* Migrated get of v2 expenses in my-view-report to platform

* fix tests

* minor

src/app/core/services/platform/v1/spender/expenses.service.spec.ts

@@ -6,6 +6,7 @@ import { expenseData, readyToReportExpensesData2 } from 'src/app/core/mock-data/
 import { PAGINATION_SIZE } from 'src/app/constants';
 import { expensesResponse } from 'src/app/core/mock-data/platform/v1/expenses-response.data';
 import { getExpensesQueryParams } from 'src/app/core/mock-data/platform/v1/expenses-query-params.data';
+import { expensesCacheBuster$ } from '../../../transaction.service';
 
 describe('ExpensesService', () => {
   let service: ExpensesService;
@@ -77,6 +78,7 @@ describe('ExpensesService', () => {
 
   describe('getAllExpenses(): ', () => {
     it('should get all expenses for multiple pages', (done) => {
+      expensesCacheBuster$.next(null);
       spyOn(service, 'getExpensesCount').and.returnValue(of(4));
       spyOn(service, 'getExpenses').and.returnValue(of(readyToReportExpensesData2));
 
@@ -96,6 +98,7 @@ describe('ExpensesService', () => {
     });
 
     it('should get all expenses in a single page', (done) => {
+      expensesCacheBuster$.next(null);
       spyOn(service, 'getExpensesCount').and.returnValue(of(2));
       spyOn(service, 'getExpenses').and.returnValue(of(readyToReportExpensesData2));
 

src/app/core/services/platform/v1/spender/expenses.service.ts

@@ -36,6 +36,9 @@ export class ExpensesService {
       .pipe(map((expenses) => expenses.data));
   }
 
+  @Cacheable({
+    cacheBusterObserver: expensesCacheBuster$,
+  })
   getAllExpenses(params: ExpensesQueryParams): Observable<Expense[]> {
     return this.getExpensesCount(params.queryParams).pipe(
       switchMap((count) => {

src/app/fyle/my-view-report/add-expenses-to-report-v2/add-expenses-to-report-v2.component.html

@@ -0,0 +1,85 @@
+<ion-header mode="md">
+  <mat-icon class="fy-modal-top-bar" svgIcon="fy-rectangle"></mat-icon>
+  <ion-toolbar mode="md" class="fy-modal-toolbar">
+    <ion-title>
+      <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 }}
+        </div>
+      </div>
+    </ion-title>
+    <ion-buttons slot="start">
+      <ion-button (click)="close()">
+        <mat-icon class="fy-icon-close" svgIcon="fy-close"></mat-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button (click)="addNewExpense()">
+        <ion-icon class="report-list--add-icon" src="../../../../../assets/svg/fy-plus.svg"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="fy-modal">
+    <div *ngIf="unreportedExpenses?.length > 0" class="add-expenses-to-report--select-all-checkbox">
+      <mat-checkbox
+        class="custom-mat-checkbox create-new-report--checkbox"
+        [(ngModel)]="isSelectedAll"
+        (ngModelChange)="toggleSelectAll($event)"
+        name="select all"
+      >
+        Select all</mat-checkbox
+      >
+    </div>
+
+    <div *ngFor="let expense of unreportedExpenses as list; let i = index">
+      <app-expense-card-v2
+        [expense]="expense"
+        [expenseIndex]="i"
+        [previousExpenseTxnDate]="list[i - 1]?.spent_at"
+        [previousExpenseCreatedAt]="list[i - 1]?.created_at"
+        [isSelectionModeEnabled]="true"
+        [selectedElements]="selectedElements"
+        (cardClickedForSelection)="toggleExpense(expense)"
+        [isFromViewReports]="true"
+      >
+      </app-expense-card-v2>
+    </div>
+  </div>
+  <ng-container *ngIf="unreportedExpenses?.length === 0">
+    <div class="add-expenses-to-report--zero-state">
+      <div class="text-center">
+        <img src="../../../assets/images/zero-states/expenses.png" alt="No expense in this report" />
+        <div class="add-expenses-to-report--zero-state--header text-center">
+          Looks like there are no complete expenses!
+        </div>
+
+        <div class="add-expenses-to-report--zero-state--sub-header">
+          Click on the
+          <mat-icon class="add-expenses-to-report--zero-state--sub-header--icon" svgIcon="plus"></mat-icon>
+          to add a new expense to this report
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar mode="md" class="add-expenses-to-report--footer">
+    <div>
+      <div class="fy-footer-cta-container">
+        <ion-button
+          class="fy-footer-cta fy-footer-cta--primary"
+          [disabled]="!(selectedTotalExpenses > 0)"
+          (click)="addExpensestoReport()"
+        >
+          Add to Report
+        </ion-button>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-footer>

src/app/fyle/my-view-report/add-expenses-to-report-v2/add-expenses-to-report-v2.component.scss

@@ -0,0 +1,68 @@
+@import '.././../../../theme/colors.scss';
+
+.add-expenses-to-report {
+  &--toolbar {
+    background-color: $pure-white;
+    border-bottom: 1px solid $grey-lighter;
+  }
+
+  &--title-container {
+    color: $black;
+    font-weight: 500;
+    margin-left: -10%;
+  }
+
+  &--title {
+    font-size: 20px;
+    line-height: 26px;
+  }
+
+  &--close {
+    margin-left: 16px;
+  }
+
+  &--select-all-checkbox {
+    font-size: 14px;
+    padding: 16px 16px;
+    background-color: $pure-white;
+  }
+
+  &--zero-state {
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: $blue-black;
+    line-height: 1.5;
+    font-weight: 500;
+    margin: 20% 20px 10px;
+
+    &--header {
+      margin-top: 12px;
+      margin-bottom: 10px;
+      font-size: 15px;
+      color: $black;
+      font-weight: 500;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    &--sub-header {
+      font-size: 14px;
+      text-align: center;
+      color: $dark-grey;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: -1px;
+      &--icon {
+        height: 14px;
+        color: $dark-grey;
+      }
+    }
+  }
+
+  &--footer {
+    box-shadow: 0px -2px 40px rgba(215, 215, 215, 0.4);
+  }
+}