From e25a3d58f7b20405d21ff71f3498399d2bdf1521 Mon Sep 17 00:00:00 2001
From: Snehasish <snehasish@Snehasishs-MacBook-Air.local>
Date: Fri, 31 Jan 2025 10:05:44 +0530
Subject: [PATCH 1/8] feat: add new review-split-expense template

---
 .../fyle/split-expense/split-expense.page.ts  | 21 +++++++
 .../review-split-expense.component.html       | 21 +++++++
 .../review-split-expense.component.scss       |  1 +
 .../review-split-expense.component.spec.ts    | 24 ++++++++
 .../review-split-expense.component.ts         | 55 +++++++++++++++++++
 src/app/shared/shared.module.ts               |  2 +
 6 files changed, 124 insertions(+)
 create mode 100644 src/app/shared/components/review-split-expense/review-split-expense.component.html
 create mode 100644 src/app/shared/components/review-split-expense/review-split-expense.component.scss
 create mode 100644 src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts
 create mode 100644 src/app/shared/components/review-split-expense/review-split-expense.component.ts

diff --git a/src/app/fyle/split-expense/split-expense.page.ts b/src/app/fyle/split-expense/split-expense.page.ts
index 8b940917aa..3381e086dd 100644
--- a/src/app/fyle/split-expense/split-expense.page.ts
+++ b/src/app/fyle/split-expense/split-expense.page.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/member-ordering */
 import { CostCentersService } from 'src/app/core/services/cost-centers.service';
 import { Component } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -49,6 +50,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { ExpensesService } from 'src/app/core/services/platform/v1/spender/expenses.service';
 import { Expense as PlatformExpense } from 'src/app/core/models/platform/v1/expense.model';
 import { PlatformFile } from 'src/app/core/models/platform/platform-file.model';
+import { ReviewSplitExpenseComponent } from 'src/app/shared/components/review-split-expense/review-split-expense.component';
 
 @Component({
   selector: 'app-split-expense',
@@ -792,6 +794,7 @@ export class SplitExpensePage {
             concatMap((formattedSplitExpense) => {
               this.formattedSplitExpense = formattedSplitExpense;
               this.correctTotalSplitAmount();
+              this.openReviewSplitExpenseModal(this.formattedSplitExpense);
               return this.handlePolicyAndMissingFieldsCheck(formattedSplitExpense);
             }),
             catchError((errResponse: HttpErrorResponse) => {
@@ -1115,4 +1118,22 @@ export class SplitExpensePage {
 
     return isEvenSplit;
   }
+
+  async openReviewSplitExpenseModal(expense): Promise<void> {
+    const reviewModal = await this.modalController.create({
+      component: ReviewSplitExpenseComponent,
+      componentProps: {
+        splitExpenses: expense,
+        reportId: this.reportId || '',
+      },
+      mode: 'ios',
+      cssClass: 'fy-dialog-popover',
+      breakpoints: [0, 1],
+      initialBreakpoint: 1,
+      presentingElement: await this.modalController.getTop(),
+      ...this.modalProperties.getModalDefaultProperties(),
+    });
+
+    await reviewModal.present();
+  }
 }
diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.html b/src/app/shared/components/review-split-expense/review-split-expense.component.html
new file mode 100644
index 0000000000..c3f7def45e
--- /dev/null
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.html
@@ -0,0 +1,21 @@
+<ion-header mode="md">
+  <ion-buttons slot="start">
+    <ion-button (click)="close()">
+      <mat-icon class="fy-icon-close" svgIcon="cross"></mat-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-toolbar class="fy-modal-toolbar">
+    <ion-title>
+      <div>Review split expenses</div>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ng-container>
+    <div *ngFor="let expense of splitExpenses; let i = index">
+      <app-expense-card-v2 [expense]="expense" [expenseIndex]="i" (goToTransaction)="goToTransaction($event)">
+      </app-expense-card-v2>
+    </div>
+  </ng-container>
+</ion-content>
diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.scss b/src/app/shared/components/review-split-expense/review-split-expense.component.scss
new file mode 100644
index 0000000000..cee7b60cbd
--- /dev/null
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.scss
@@ -0,0 +1 @@
+@import '../../../../theme/colors.scss';
diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts b/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts
new file mode 100644
index 0000000000..b2cc7ed759
--- /dev/null
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ReviewSplitExpenseComponent } from './review-split-expense.component';
+
+describe('ReviewSplitExpenseComponent', () => {
+  let component: ReviewSplitExpenseComponent;
+  let fixture: ComponentFixture<ReviewSplitExpenseComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ReviewSplitExpenseComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ReviewSplitExpenseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.ts b/src/app/shared/components/review-split-expense/review-split-expense.component.ts
new file mode 100644
index 0000000000..e51215cc82
--- /dev/null
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.ts
@@ -0,0 +1,55 @@
+import { Component, Input } from '@angular/core';
+import { Expense } from 'src/app/core/models/platform/v1/expense.model';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-review-split-expense',
+  templateUrl: './review-split-expense.component.html',
+  styleUrls: ['./review-split-expense.component.scss'],
+})
+export class ReviewSplitExpenseComponent {
+  @Input() splitExpenses: Expense;
+
+  @Input() reportId: string;
+
+  constructor(private router: Router) {}
+
+  goToTransaction(event: { expense: Expense; expenseIndex: number }): void {
+    let category: string;
+
+    if (event.expense?.category?.name) {
+      category = event.expense.category.name.toLowerCase();
+    }
+
+    if (category === 'mileage') {
+      this.router.navigate([
+        '/',
+        'enterprise',
+        'add_edit_mileage',
+        { id: event.expense.id, navigate_back: true, persist_filters: true },
+      ]);
+    } else if (category === 'per diem') {
+      this.router.navigate([
+        '/',
+        'enterprise',
+        'add_edit_per_diem',
+        { id: event.expense.id, navigate_back: true, persist_filters: true },
+      ]);
+    } else {
+      this.router.navigate([
+        '/',
+        'enterprise',
+        'add_edit_expense',
+        { id: event.expense.id, navigate_back: true, persist_filters: true },
+      ]);
+    }
+  }
+
+  close(): void {
+    if (this.reportId) {
+      this.router.navigate(['/', 'enterprise', 'my_view_report', { id: this.reportId }]);
+    } else {
+      this.router.navigate(['/', 'enterprise', 'my_expenses']);
+    }
+  }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index bac0988267..f145e79996 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -117,6 +117,7 @@ import { CardDetailComponent } from './components/spent-cards/card-detail/card-d
 import { MaskNumber } from './pipes/mask-number.pipe';
 import { PolicyViolationActionComponent } from './components/fy-policy-violation/policy-violation-action/policy-violation-action.component';
 import { SplitExpensePolicyViolationComponent } from './components/split-expense-policy-violation/split-expense-policy-violation.component';
+import { ReviewSplitExpenseComponent } from './components/review-split-expense/review-split-expense.component';
 import { PolicyViolationRuleComponent } from './components/policy-violation-rule/policy-violation-rule.component';
 import { FyCurrencyComponent } from './components/fy-currency/fy-currency.component';
 import { FyCurrencyChooseCurrencyComponent } from './components/fy-currency/fy-currency-choose-currency/fy-currency-choose-currency.component';
@@ -249,6 +250,7 @@ import { CCExpenseMerchantInfoModalComponent } from './components/cc-expense-mer
     FyPolicyViolationComponent,
     PolicyViolationActionComponent,
     SplitExpensePolicyViolationComponent,
+    ReviewSplitExpenseComponent,
     PolicyViolationRuleComponent,
     FyCurrencyComponent,
     FyCurrencyChooseCurrencyComponent,

From a26844ec4015cca469bd54ff535e4276a69c7eeb Mon Sep 17 00:00:00 2001
From: Snehasish <snehasish@Snehasishs-MacBook-Air.local>
Date: Wed, 5 Feb 2025 11:02:31 +0530
Subject: [PATCH 2/8] fixing test cases

---
 .../split-expense/split-expense.page.spec.ts  |  4 +-
 .../fyle/split-expense/split-expense.page.ts  | 33 +++++++++----
 .../review-split-expense.component.html       | 18 +++----
 .../review-split-expense.component.scss       | 15 ++++++
 .../review-split-expense.component.spec.ts    | 34 +++++++++++--
 .../review-split-expense.component.ts         | 49 +++++--------------
 6 files changed, 91 insertions(+), 62 deletions(-)

diff --git a/src/app/fyle/split-expense/split-expense.page.spec.ts b/src/app/fyle/split-expense/split-expense.page.spec.ts
index 4c8cb66a54..77008309aa 100644
--- a/src/app/fyle/split-expense/split-expense.page.spec.ts
+++ b/src/app/fyle/split-expense/split-expense.page.spec.ts
@@ -680,7 +680,6 @@ describe('SplitExpensePage', () => {
       component.reportId = 'rpPNBrdR9NaE';
       const toastMessage = 'Expense split successfully.';
       component.showSuccessToast();
-      expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'enterprise', 'my_view_report', { id: 'rpPNBrdR9NaE' }]);
       expect(component.toastWithoutCTA).toHaveBeenCalledOnceWith(
         toastMessage,
         ToastType.SUCCESS,
@@ -692,7 +691,6 @@ describe('SplitExpensePage', () => {
       component.reportId = null;
       const toastMessage = 'Expense split successfully.';
       component.showSuccessToast();
-      expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'enterprise', 'my_expenses']);
       expect(component.toastWithoutCTA).toHaveBeenCalledOnceWith(
         toastMessage,
         ToastType.SUCCESS,
@@ -1948,7 +1946,7 @@ describe('SplitExpensePage', () => {
       }
     }));
 
-    it('should throw an error and show failure toast if postSplitExpenseComments API fails', fakeAsync(() => {
+    xit('should throw an error and show failure toast if postSplitExpenseComments API fails', fakeAsync(() => {
       splitExpenseService.postSplitExpenseComments.and.returnValue(
         throwError(() => new Error('Post Split Expense Comments API failed!'))
       );
diff --git a/src/app/fyle/split-expense/split-expense.page.ts b/src/app/fyle/split-expense/split-expense.page.ts
index 3381e086dd..4e116ebb25 100644
--- a/src/app/fyle/split-expense/split-expense.page.ts
+++ b/src/app/fyle/split-expense/split-expense.page.ts
@@ -569,11 +569,6 @@ export class SplitExpensePage {
   showSuccessToast(): void {
     this.saveSplitExpenseLoading = false;
     const toastMessage = 'Expense split successfully.';
-    if (this.reportId) {
-      this.router.navigate(['/', 'enterprise', 'my_view_report', { id: this.reportId }]);
-    } else {
-      this.router.navigate(['/', 'enterprise', 'my_expenses']);
-    }
     this.toastWithoutCTA(toastMessage, ToastType.SUCCESS, 'msb-success-with-camera-icon');
   }
 
@@ -700,6 +695,7 @@ export class SplitExpensePage {
         this.trackingService.splitExpenseSuccess(splitTrackingProps);
 
         const txnIds = txns.data.map((txn) => txn.id);
+        this.openReviewSplitExpenseModal(txns.data);
 
         if (comments) {
           return this.splitExpenseService
@@ -794,7 +790,6 @@ export class SplitExpensePage {
             concatMap((formattedSplitExpense) => {
               this.formattedSplitExpense = formattedSplitExpense;
               this.correctTotalSplitAmount();
-              this.openReviewSplitExpenseModal(this.formattedSplitExpense);
               return this.handlePolicyAndMissingFieldsCheck(formattedSplitExpense);
             }),
             catchError((errResponse: HttpErrorResponse) => {
@@ -1127,13 +1122,33 @@ export class SplitExpensePage {
         reportId: this.reportId || '',
       },
       mode: 'ios',
-      cssClass: 'fy-dialog-popover',
-      breakpoints: [0, 1],
-      initialBreakpoint: 1,
       presentingElement: await this.modalController.getTop(),
       ...this.modalProperties.getModalDefaultProperties(),
     });
 
     await reviewModal.present();
+
+    const { data } = await reviewModal.onWillDismiss();
+
+    if (data) {
+      if (data.action === 'close') {
+        if (this.reportId) {
+          this.router.navigate(['/', 'enterprise', 'my_view_report', { id: this.reportId }]);
+        } else {
+          this.router.navigate(['/', 'enterprise', 'my_expenses']);
+        }
+      } else if (data.action === 'navigate') {
+        const expense = data.expense;
+        let category = expense?.category?.name?.toLowerCase();
+
+        if (category === 'mileage') {
+          this.router.navigate(['/', 'enterprise', 'add_edit_mileage', { id: expense.id, persist_filters: true }]);
+        } else if (category === 'per diem') {
+          this.router.navigate(['/', 'enterprise', 'add_edit_per_diem', { id: expense.id, persist_filters: true }]);
+        } else {
+          this.router.navigate(['/', 'enterprise', 'add_edit_expense', { id: expense.id, persist_filters: true }]);
+        }
+      }
+    }
   }
 }
diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.html b/src/app/shared/components/review-split-expense/review-split-expense.component.html
index c3f7def45e..a290e5db98 100644
--- a/src/app/shared/components/review-split-expense/review-split-expense.component.html
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.html
@@ -1,13 +1,13 @@
-<ion-header mode="md">
-  <ion-buttons slot="start">
-    <ion-button (click)="close()">
-      <mat-icon class="fy-icon-close" svgIcon="cross"></mat-icon>
-    </ion-button>
-  </ion-buttons>
-  <ion-toolbar class="fy-modal-toolbar">
-    <ion-title>
+<ion-header mode="md" class="review-split-expense-modal">
+  <ion-toolbar>
+    <div class="review-split-expense-modal--header">
+      <ion-buttons>
+        <ion-button (click)="close()">
+          <mat-icon class="fy-icon-close" svgIcon="cross"></mat-icon>
+        </ion-button>
+      </ion-buttons>
       <div>Review split expenses</div>
-    </ion-title>
+    </div>
   </ion-toolbar>
 </ion-header>
 
diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.scss b/src/app/shared/components/review-split-expense/review-split-expense.component.scss
index cee7b60cbd..7dab3cf685 100644
--- a/src/app/shared/components/review-split-expense/review-split-expense.component.scss
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.scss
@@ -1 +1,16 @@
 @import '../../../../theme/colors.scss';
+
+.review-split-expense-modal {
+  padding-top: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid $grey;
+  &--header {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 27px;
+    gap: 10px;
+  }
+}
diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts b/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts
index b2cc7ed759..93fb5c0014 100644
--- a/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts
@@ -1,24 +1,52 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
+import { ModalController } from '@ionic/angular';
 import { ReviewSplitExpenseComponent } from './review-split-expense.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { expenseData } from 'src/app/core/mock-data/platform/v1/expense.data';
 
 describe('ReviewSplitExpenseComponent', () => {
   let component: ReviewSplitExpenseComponent;
   let fixture: ComponentFixture<ReviewSplitExpenseComponent>;
+  let modalControllerSpy: jasmine.SpyObj<ModalController>;
 
   beforeEach(waitForAsync(() => {
+    const modalSpy = jasmine.createSpyObj('ModalController', ['dismiss']);
+
     TestBed.configureTestingModule({
       declarations: [ReviewSplitExpenseComponent],
-      imports: [IonicModule.forRoot()],
+      providers: [{ provide: ModalController, useValue: modalSpy }],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ReviewSplitExpenseComponent);
     component = fixture.componentInstance;
+    modalControllerSpy = TestBed.inject(ModalController) as jasmine.SpyObj<ModalController>;
+
     fixture.detectChanges();
   }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should call modalController.dismiss with correct params on goToTransaction', () => {
+    const event = { expense: expenseData, expenseIndex: 0 };
+
+    component.goToTransaction(event);
+
+    expect(modalControllerSpy.dismiss).toHaveBeenCalledWith({
+      dismissed: true,
+      action: 'navigate',
+      expense: expenseData,
+    });
+  });
+
+  it('should call modalController.dismiss with correct params on close', () => {
+    component.close();
+
+    expect(modalControllerSpy.dismiss).toHaveBeenCalledWith({
+      dismissed: true,
+      action: 'close',
+    });
+  });
 });
diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.ts b/src/app/shared/components/review-split-expense/review-split-expense.component.ts
index e51215cc82..c49d9b82d6 100644
--- a/src/app/shared/components/review-split-expense/review-split-expense.component.ts
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.ts
@@ -1,7 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { Expense } from 'src/app/core/models/platform/v1/expense.model';
-import { Router } from '@angular/router';
-
+import { ModalController } from '@ionic/angular';
 @Component({
   selector: 'app-review-split-expense',
   templateUrl: './review-split-expense.component.html',
@@ -10,46 +9,20 @@ import { Router } from '@angular/router';
 export class ReviewSplitExpenseComponent {
   @Input() splitExpenses: Expense;
 
-  @Input() reportId: string;
-
-  constructor(private router: Router) {}
+  constructor(private modalController: ModalController) {}
 
   goToTransaction(event: { expense: Expense; expenseIndex: number }): void {
-    let category: string;
-
-    if (event.expense?.category?.name) {
-      category = event.expense.category.name.toLowerCase();
-    }
-
-    if (category === 'mileage') {
-      this.router.navigate([
-        '/',
-        'enterprise',
-        'add_edit_mileage',
-        { id: event.expense.id, navigate_back: true, persist_filters: true },
-      ]);
-    } else if (category === 'per diem') {
-      this.router.navigate([
-        '/',
-        'enterprise',
-        'add_edit_per_diem',
-        { id: event.expense.id, navigate_back: true, persist_filters: true },
-      ]);
-    } else {
-      this.router.navigate([
-        '/',
-        'enterprise',
-        'add_edit_expense',
-        { id: event.expense.id, navigate_back: true, persist_filters: true },
-      ]);
-    }
+    this.modalController.dismiss({
+      dismissed: true,
+      action: 'navigate',
+      expense: event.expense,
+    });
   }
 
   close(): void {
-    if (this.reportId) {
-      this.router.navigate(['/', 'enterprise', 'my_view_report', { id: this.reportId }]);
-    } else {
-      this.router.navigate(['/', 'enterprise', 'my_expenses']);
-    }
+    this.modalController.dismiss({
+      dismissed: true,
+      action: 'close',
+    });
   }
 }

From 0fa9224f2d6df6da8246257c34546f7b9c81fd08 Mon Sep 17 00:00:00 2001
From: Snehasish <snehasish@Snehasishs-MacBook-Air.local>
Date: Wed, 5 Feb 2025 11:04:54 +0530
Subject: [PATCH 3/8] minor

---
 src/app/fyle/split-expense/split-expense.page.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/fyle/split-expense/split-expense.page.ts b/src/app/fyle/split-expense/split-expense.page.ts
index 4e116ebb25..cfc2e5cc5b 100644
--- a/src/app/fyle/split-expense/split-expense.page.ts
+++ b/src/app/fyle/split-expense/split-expense.page.ts
@@ -1119,7 +1119,6 @@ export class SplitExpensePage {
       component: ReviewSplitExpenseComponent,
       componentProps: {
         splitExpenses: expense,
-        reportId: this.reportId || '',
       },
       mode: 'ios',
       presentingElement: await this.modalController.getTop(),

From f0a8dacdf537e55f0cbae66c39c874851a94cbdc Mon Sep 17 00:00:00 2001
From: Snehasish <snehasish@Snehasishs-MacBook-Air.local>
Date: Wed, 5 Feb 2025 11:11:36 +0530
Subject: [PATCH 4/8] minor

---
 src/app/fyle/split-expense/split-expense.page.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/fyle/split-expense/split-expense.page.ts b/src/app/fyle/split-expense/split-expense.page.ts
index cfc2e5cc5b..3dfe892ee9 100644
--- a/src/app/fyle/split-expense/split-expense.page.ts
+++ b/src/app/fyle/split-expense/split-expense.page.ts
@@ -51,6 +51,7 @@ import { ExpensesService } from 'src/app/core/services/platform/v1/spender/expen
 import { Expense as PlatformExpense } from 'src/app/core/models/platform/v1/expense.model';
 import { PlatformFile } from 'src/app/core/models/platform/platform-file.model';
 import { ReviewSplitExpenseComponent } from 'src/app/shared/components/review-split-expense/review-split-expense.component';
+import { Expense } from 'src/app/core/models/expense.model';
 
 @Component({
   selector: 'app-split-expense',
@@ -1114,7 +1115,7 @@ export class SplitExpensePage {
     return isEvenSplit;
   }
 
-  async openReviewSplitExpenseModal(expense): Promise<void> {
+  async openReviewSplitExpenseModal(expense: Expense): Promise<void> {
     const reviewModal = await this.modalController.create({
       component: ReviewSplitExpenseComponent,
       componentProps: {
@@ -1127,7 +1128,8 @@ export class SplitExpensePage {
 
     await reviewModal.present();
 
-    const { data } = await reviewModal.onWillDismiss();
+    const { data }: { data?: { dismissed: boolean; action: string; expense?: Expense } } =
+      await reviewModal.onWillDismiss();
 
     if (data) {
       if (data.action === 'close') {

From 4785b672073bdd2de7ce73a1f7fe33ce0b1454cb Mon Sep 17 00:00:00 2001
From: Snehasish <snehasish@Snehasishs-MacBook-Air.local>
Date: Wed, 5 Feb 2025 11:33:34 +0530
Subject: [PATCH 5/8] reverting changes of split-expense-page

---
 .../split-expense/split-expense.page.spec.ts  |  4 +-
 .../fyle/split-expense/split-expense.page.ts  | 47 ++-----------------
 2 files changed, 8 insertions(+), 43 deletions(-)

diff --git a/src/app/fyle/split-expense/split-expense.page.spec.ts b/src/app/fyle/split-expense/split-expense.page.spec.ts
index 77008309aa..4c8cb66a54 100644
--- a/src/app/fyle/split-expense/split-expense.page.spec.ts
+++ b/src/app/fyle/split-expense/split-expense.page.spec.ts
@@ -680,6 +680,7 @@ describe('SplitExpensePage', () => {
       component.reportId = 'rpPNBrdR9NaE';
       const toastMessage = 'Expense split successfully.';
       component.showSuccessToast();
+      expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'enterprise', 'my_view_report', { id: 'rpPNBrdR9NaE' }]);
       expect(component.toastWithoutCTA).toHaveBeenCalledOnceWith(
         toastMessage,
         ToastType.SUCCESS,
@@ -691,6 +692,7 @@ describe('SplitExpensePage', () => {
       component.reportId = null;
       const toastMessage = 'Expense split successfully.';
       component.showSuccessToast();
+      expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'enterprise', 'my_expenses']);
       expect(component.toastWithoutCTA).toHaveBeenCalledOnceWith(
         toastMessage,
         ToastType.SUCCESS,
@@ -1946,7 +1948,7 @@ describe('SplitExpensePage', () => {
       }
     }));
 
-    xit('should throw an error and show failure toast if postSplitExpenseComments API fails', fakeAsync(() => {
+    it('should throw an error and show failure toast if postSplitExpenseComments API fails', fakeAsync(() => {
       splitExpenseService.postSplitExpenseComments.and.returnValue(
         throwError(() => new Error('Post Split Expense Comments API failed!'))
       );
diff --git a/src/app/fyle/split-expense/split-expense.page.ts b/src/app/fyle/split-expense/split-expense.page.ts
index 3dfe892ee9..8b940917aa 100644
--- a/src/app/fyle/split-expense/split-expense.page.ts
+++ b/src/app/fyle/split-expense/split-expense.page.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/member-ordering */
 import { CostCentersService } from 'src/app/core/services/cost-centers.service';
 import { Component } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -50,8 +49,6 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { ExpensesService } from 'src/app/core/services/platform/v1/spender/expenses.service';
 import { Expense as PlatformExpense } from 'src/app/core/models/platform/v1/expense.model';
 import { PlatformFile } from 'src/app/core/models/platform/platform-file.model';
-import { ReviewSplitExpenseComponent } from 'src/app/shared/components/review-split-expense/review-split-expense.component';
-import { Expense } from 'src/app/core/models/expense.model';
 
 @Component({
   selector: 'app-split-expense',
@@ -570,6 +567,11 @@ export class SplitExpensePage {
   showSuccessToast(): void {
     this.saveSplitExpenseLoading = false;
     const toastMessage = 'Expense split successfully.';
+    if (this.reportId) {
+      this.router.navigate(['/', 'enterprise', 'my_view_report', { id: this.reportId }]);
+    } else {
+      this.router.navigate(['/', 'enterprise', 'my_expenses']);
+    }
     this.toastWithoutCTA(toastMessage, ToastType.SUCCESS, 'msb-success-with-camera-icon');
   }
 
@@ -696,7 +698,6 @@ export class SplitExpensePage {
         this.trackingService.splitExpenseSuccess(splitTrackingProps);
 
         const txnIds = txns.data.map((txn) => txn.id);
-        this.openReviewSplitExpenseModal(txns.data);
 
         if (comments) {
           return this.splitExpenseService
@@ -1114,42 +1115,4 @@ export class SplitExpensePage {
 
     return isEvenSplit;
   }
-
-  async openReviewSplitExpenseModal(expense: Expense): Promise<void> {
-    const reviewModal = await this.modalController.create({
-      component: ReviewSplitExpenseComponent,
-      componentProps: {
-        splitExpenses: expense,
-      },
-      mode: 'ios',
-      presentingElement: await this.modalController.getTop(),
-      ...this.modalProperties.getModalDefaultProperties(),
-    });
-
-    await reviewModal.present();
-
-    const { data }: { data?: { dismissed: boolean; action: string; expense?: Expense } } =
-      await reviewModal.onWillDismiss();
-
-    if (data) {
-      if (data.action === 'close') {
-        if (this.reportId) {
-          this.router.navigate(['/', 'enterprise', 'my_view_report', { id: this.reportId }]);
-        } else {
-          this.router.navigate(['/', 'enterprise', 'my_expenses']);
-        }
-      } else if (data.action === 'navigate') {
-        const expense = data.expense;
-        let category = expense?.category?.name?.toLowerCase();
-
-        if (category === 'mileage') {
-          this.router.navigate(['/', 'enterprise', 'add_edit_mileage', { id: expense.id, persist_filters: true }]);
-        } else if (category === 'per diem') {
-          this.router.navigate(['/', 'enterprise', 'add_edit_per_diem', { id: expense.id, persist_filters: true }]);
-        } else {
-          this.router.navigate(['/', 'enterprise', 'add_edit_expense', { id: expense.id, persist_filters: true }]);
-        }
-      }
-    }
-  }
 }

From a4b5a36b8e84098ce00802d294dc7fb1f44e7917 Mon Sep 17 00:00:00 2001
From: Snehasish <snehasish@Snehasishs-MacBook-Air.local>
Date: Wed, 5 Feb 2025 12:20:21 +0530
Subject: [PATCH 6/8] fixing code rabbit changes

---
 .../review-split-expense.component.spec.ts                | 8 ++++++++
 .../review-split-expense.component.ts                     | 2 +-
 src/app/shared/shared.module.ts                           | 1 +
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts b/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts
index 93fb5c0014..4bf0c67997 100644
--- a/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts
@@ -29,6 +29,14 @@ describe('ReviewSplitExpenseComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should initialize with split expenses input', () => {
+    const mockExpenses = [expenseData];
+    component.splitExpenses = mockExpenses;
+    fixture.detectChanges();
+
+    expect(component.splitExpenses).toEqual(mockExpenses);
+  });
+
   it('should call modalController.dismiss with correct params on goToTransaction', () => {
     const event = { expense: expenseData, expenseIndex: 0 };
 
diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.ts b/src/app/shared/components/review-split-expense/review-split-expense.component.ts
index c49d9b82d6..73cd6767fb 100644
--- a/src/app/shared/components/review-split-expense/review-split-expense.component.ts
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.ts
@@ -7,7 +7,7 @@ import { ModalController } from '@ionic/angular';
   styleUrls: ['./review-split-expense.component.scss'],
 })
 export class ReviewSplitExpenseComponent {
-  @Input() splitExpenses: Expense;
+  @Input() splitExpenses: Expense[];
 
   constructor(private modalController: ModalController) {}
 
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index f145e79996..9d8990ec73 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -422,6 +422,7 @@ import { CCExpenseMerchantInfoModalComponent } from './components/cc-expense-mer
     DashboardOptInComponent,
     MobileNumberCardComponent,
     CCExpenseMerchantInfoModalComponent,
+    ReviewSplitExpenseComponent,
   ],
   providers: [DecimalPipe, DatePipe, HumanizeCurrencyPipe, ImagePicker, FyCurrencyPipe, ReportState, ExactCurrencyPipe],
 })

From e9f9e315530a784eaf2ac6f5e5829ed19b3a08e7 Mon Sep 17 00:00:00 2001
From: Snehasish <snehasish@Snehasishs-MacBook-Air.local>
Date: Wed, 5 Feb 2025 15:48:03 +0530
Subject: [PATCH 7/8] fixing scss

---
 .../review-split-expense.component.html         | 12 +++++++++---
 .../review-split-expense.component.scss         | 17 ++++++++++++++---
 src/global.scss                                 | 10 ++++++++++
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.html b/src/app/shared/components/review-split-expense/review-split-expense.component.html
index a290e5db98..765c520e26 100644
--- a/src/app/shared/components/review-split-expense/review-split-expense.component.html
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.html
@@ -6,16 +6,22 @@
           <mat-icon class="fy-icon-close" svgIcon="cross"></mat-icon>
         </ion-button>
       </ion-buttons>
-      <div>Review split expenses</div>
+      <ion-title>Review split expenses</ion-title>
     </div>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
   <ng-container>
-    <div *ngFor="let expense of splitExpenses; let i = index">
-      <app-expense-card-v2 [expense]="expense" [expenseIndex]="i" (goToTransaction)="goToTransaction($event)">
+    <div *ngFor="let expense of splitExpenses; let i = index" class="review-split-expense-modal--body">
+      <app-expense-card-v2
+        [expense]="expense"
+        [expenseIndex]="i"
+        [showDt]="false"
+        (goToTransaction)="goToTransaction($event)"
+      >
       </app-expense-card-v2>
+      <div class="review-split-expense-modal--divier"></div>
     </div>
   </ng-container>
 </ion-content>
diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.scss b/src/app/shared/components/review-split-expense/review-split-expense.component.scss
index 7dab3cf685..7aaf87d9b0 100644
--- a/src/app/shared/components/review-split-expense/review-split-expense.component.scss
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.scss
@@ -1,9 +1,9 @@
 @import '../../../../theme/colors.scss';
 
 .review-split-expense-modal {
-  padding-top: 16px;
-  padding-bottom: 12px;
   border-bottom: 1px solid $grey;
+  margin-bottom: 8px;
+
   &--header {
     display: flex;
     justify-content: flex-start;
@@ -11,6 +11,17 @@
     font-size: 18px;
     font-weight: 500;
     line-height: 27px;
-    gap: 10px;
+    padding-inline: 12px;
+  }
+
+  &--body {
+    padding-inline: 16px;
+  }
+
+  &--divier {
+    height: 1px;
+    width: 100%;
+    margin-bottom: 6px;
+    background-color: $grey;
   }
 }
diff --git a/src/global.scss b/src/global.scss
index d7a672a004..c3d8e3b10e 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -912,6 +912,16 @@ ion-modal.fy-modal {
   }
 }
 
+ion-modal.review-split-expense-modal {
+  &::part(content) {
+    border-radius: 0 !important;
+    max-height: 100% !important;
+    position: absolute;
+    top: 0 !important;
+    bottom: 0 !important;
+  }
+}
+
 ion-modal.share-report-modal {
   &::part(content) {
     border-radius: 16px 16px 0 0 !important;

From e6f9e05491a62f4eb22520ed4e9de9fc3914c771 Mon Sep 17 00:00:00 2001
From: Snehasish <snehasish@Snehasishs-MacBook-Air.local>
Date: Thu, 6 Feb 2025 14:54:46 +0530
Subject: [PATCH 8/8] add test case , scss class name change and typo error

---
 .../review-split-expense.component.html             |  6 +++---
 .../review-split-expense.component.scss             |  6 +++---
 .../review-split-expense.component.spec.ts          | 13 ++++++++++---
 .../review-split-expense.component.ts               |  2 +-
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.html b/src/app/shared/components/review-split-expense/review-split-expense.component.html
index 765c520e26..335bc56a5f 100644
--- a/src/app/shared/components/review-split-expense/review-split-expense.component.html
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.html
@@ -13,15 +13,15 @@
 
 <ion-content>
   <ng-container>
-    <div *ngFor="let expense of splitExpenses; let i = index" class="review-split-expense-modal--body">
+    <div *ngFor="let expense of splitExpenses; let i = index" class="review-split-expense-modal--expense-container">
       <app-expense-card-v2
         [expense]="expense"
         [expenseIndex]="i"
         [showDt]="false"
-        (goToTransaction)="goToTransaction($event)"
+        (goToTransaction)="goToExpense($event)"
       >
       </app-expense-card-v2>
-      <div class="review-split-expense-modal--divier"></div>
+      <div class="review-split-expense-modal--divider"></div>
     </div>
   </ng-container>
 </ion-content>
diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.scss b/src/app/shared/components/review-split-expense/review-split-expense.component.scss
index 7aaf87d9b0..4b32b172d5 100644
--- a/src/app/shared/components/review-split-expense/review-split-expense.component.scss
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.scss
@@ -10,15 +10,15 @@
     align-items: center;
     font-size: 18px;
     font-weight: 500;
-    line-height: 27px;
+    line-height: 26px;
     padding-inline: 12px;
   }
 
-  &--body {
+  &--expense-container {
     padding-inline: 16px;
   }
 
-  &--divier {
+  &--divider {
     height: 1px;
     width: 100%;
     margin-bottom: 6px;
diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts b/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts
index 4bf0c67997..c8260da274 100644
--- a/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.spec.ts
@@ -37,10 +37,17 @@ describe('ReviewSplitExpenseComponent', () => {
     expect(component.splitExpenses).toEqual(mockExpenses);
   });
 
-  it('should call modalController.dismiss with correct params on goToTransaction', () => {
+  it('should handle empty split expenses array', () => {
+    component.splitExpenses = [];
+    fixture.detectChanges();
+
+    expect(component.splitExpenses).toEqual([]);
+  });
+
+  it('goToExpense(): should call modalController.dismiss with correct params on goToTransaction', () => {
     const event = { expense: expenseData, expenseIndex: 0 };
 
-    component.goToTransaction(event);
+    component.goToExpense(event);
 
     expect(modalControllerSpy.dismiss).toHaveBeenCalledWith({
       dismissed: true,
@@ -49,7 +56,7 @@ describe('ReviewSplitExpenseComponent', () => {
     });
   });
 
-  it('should call modalController.dismiss with correct params on close', () => {
+  it('close(): should call modalController.dismiss with correct params on close', () => {
     component.close();
 
     expect(modalControllerSpy.dismiss).toHaveBeenCalledWith({
diff --git a/src/app/shared/components/review-split-expense/review-split-expense.component.ts b/src/app/shared/components/review-split-expense/review-split-expense.component.ts
index 73cd6767fb..68a7033350 100644
--- a/src/app/shared/components/review-split-expense/review-split-expense.component.ts
+++ b/src/app/shared/components/review-split-expense/review-split-expense.component.ts
@@ -11,7 +11,7 @@ export class ReviewSplitExpenseComponent {
 
   constructor(private modalController: ModalController) {}
 
-  goToTransaction(event: { expense: Expense; expenseIndex: number }): void {
+  goToExpense(event: { expense: Expense; expenseIndex: number }): void {
     this.modalController.dismiss({
       dismissed: true,
       action: 'navigate',