feat: Dismiss Dialog for duplicate expenses

src/app/fyle/dashboard/tasks/dismiss-dialog/dismiss-dialog.component.html

@@ -0,0 +1,30 @@
+<div class="dismiss-dialog">
+  <ion-content>
+    <ion-grid class="dismiss-dialog--grid">
+      <ion-row>
+        <ion-col>
+          <div class="dismiss-dialog--header">Dismiss duplicate expenses</div>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <div class="dismiss-dialog--body">Are you sure you want to take this action?</div>
+        </ion-col>
+      </ion-row>
+      <ion-row class="dismiss-dialog--cta-container">
+        <ion-col size="6">
+          <div
+            [ngClass]="{ 'dismiss-dialog--cancel__disabled': dismissCallInProgress }"
+            class="dismiss-dialog--cancel"
+            (click)="cancel()"
+          >
+            No, go back
+          </div>
+        </ion-col>
+        <ion-col size="6">
+          <div class="dismiss-dialog--dismiss" (click)="dismiss()" appFormButtonValidation>Yes, Dismiss</div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ion-content>
+</div>

src/app/fyle/dashboard/tasks/dismiss-dialog/dismiss-dialog.component.scss

@@ -0,0 +1,43 @@
+@import '../../../../../theme/colors.scss';
+
+.dismiss-dialog {
+  &--header {
+    font-size: 16px;
+    line-height: 20.48px;
+    color: $black;
+    font-weight: 500;
+  }
+
+  &--body {
+    font-size: 14px;
+    line-height: 18px;
+    color: $blue-black;
+    font-weight: 400;
+    margin-top: 16px;
+  }
+
+  &--cta-container {
+    margin-top: 16px;
+  }
+
+  &--dismiss {
+    display: flex;
+    padding: 12px 16px;
+    justify-content: center;
+    color: #fff;
+    align-items: center;
+    border-radius: 4px;
+    background: $brand-gradient;
+  }
+
+  &--cancel {
+    display: flex;
+    padding: 12px 16px;
+    justify-content: center;
+    align-items: center;
+    color: $blue-black;
+    &__disabled {
+      opacity: 0.2;
+    }
+  }
+}

src/app/fyle/dashboard/tasks/dismiss-dialog/dismiss-dialog.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { DismissDialogComponent } from './dismiss-dialog.component';
+
+describe('DismissDialogComponent', () => {
+  let component: DismissDialogComponent;
+  let fixture: ComponentFixture<DismissDialogComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [DismissDialogComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DismissDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/fyle/dashboard/tasks/dismiss-dialog/dismiss-dialog.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { PopoverController } from '@ionic/angular';
+import { catchError, finalize, map } from 'rxjs/operators';
+import { of } from 'rxjs';
+
+@Component({
+  selector: 'app-dismiss-dialog',
+  templateUrl: './dismiss-dialog.component.html',
+  styleUrls: ['./dismiss-dialog.component.scss'],
+})
+export class DismissDialogComponent implements OnInit {
+  // eslint-disable-next-line
+  @Input() dismissMethod: () => Observable<any>;
+
+  dismissCallInProgress: boolean;
+
+  constructor(private popoverController: PopoverController) {}
+
+  ngOnInit(): void {
+    this.dismissCallInProgress = false;
+  }
+
+  cancel(): void {
+    if (!this.dismissCallInProgress) {
+      this.popoverController.dismiss();
+    }
+  }
+
+  dismiss(): void {
+    this.dismissCallInProgress = true;
+    this.dismissMethod()
+      .pipe(
+        map(() => ({ status: 'success' })),
+        catchError(() =>
+          of({
+            status: 'error',
+          })
+        ),
+        finalize(() => (this.dismissCallInProgress = false))
+      )
+      .subscribe((res) => {
+        this.popoverController.dismiss(res);
+      });
+  }
+}

src/app/fyle/my-expenses/my-expenses.module.ts

@@ -16,6 +16,7 @@ import { AddTxnToReportDialogComponent } from './add-txn-to-report-dialog/add-tx
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { DismissDialogComponent } from '../dashboard/tasks/dismiss-dialog/dismiss-dialog.component';
 
 @NgModule({
   imports: [
@@ -40,6 +41,6 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
     SharedModule,
     MatCheckboxModule,
   ],
-  declarations: [MyExpensesPage, AddTxnToReportDialogComponent],
+  declarations: [MyExpensesPage, AddTxnToReportDialogComponent, DismissDialogComponent],
 })
 export class MyExpensesPageModule {}

src/app/fyle/potential-duplicates/potential-duplicates.page.ts

@@ -8,7 +8,11 @@ import { SnackbarPropertiesService } from 'src/app/core/services/snackbar-proper
 import { TrackingService } from 'src/app/core/services/tracking.service';
 import { ExpensesService } from 'src/app/core/services/platform/v1/spender/expenses.service';
 import { ToastMessageComponent } from 'src/app/shared/components/toast-message/toast-message.component';
+import { DismissDialogComponent } from '../dashboard/tasks/dismiss-dialog/dismiss-dialog.component';
+import { PopoverController } from '@ionic/angular';
+import { OverlayResponse } from 'src/app/core/models/overlay-response.modal';
 
+// eslint-disable-next-line
 type Expenses = Expense[];
 
 @Component({
@@ -34,7 +38,8 @@ export class PotentialDuplicatesPage {
     private router: Router,
     private snackbarProperties: SnackbarPropertiesService,
     private matSnackBar: MatSnackBar,
-    private trackingService: TrackingService
+    private trackingService: TrackingService,
+    private popoverController: PopoverController
   ) {}
 
   ionViewWillEnter(): void {
@@ -106,11 +111,24 @@ export class PotentialDuplicatesPage {
     return this.expensesService.dismissDuplicates(duplicateExpenseIds, targetExpenseIds);
   }
 
-  dismiss(expense: Expense): void {
-    const transactionIds = [expense.id];
-    const duplicateTxnIds = this.duplicateSetData[this.selectedSet];
+  async dismiss(expense: Expense): Promise<void> {
+    const targetExpenseIds = [expense.id];
+    const duplicateExpenseIds = this.duplicateSetData[this.selectedSet];
+
+    const popover = await this.popoverController.create({
+      component: DismissDialogComponent,
+      cssClass: 'dismiss-dialog',
+      backdropDismiss: false,
+      componentProps: {
+        dismissMethod: () => this.dismissDuplicates(duplicateExpenseIds, targetExpenseIds),
+      },
+    });
+
+    await popover.present();
+
+    const popoverResponse = (await popover.onDidDismiss()) as OverlayResponse<{ status: string }>;
 
-    this.dismissDuplicates(duplicateTxnIds, transactionIds).subscribe(() => {
+    if (popoverResponse.data?.status === 'success') {
       this.trackingService.dismissedIndividualExpenses();
       this.showDismissedSuccessToast();
       this.duplicateSetData[this.selectedSet] = this.duplicateSetData[this.selectedSet].filter(
@@ -119,12 +137,26 @@ export class PotentialDuplicatesPage {
       this.duplicateExpenses[this.selectedSet] = this.duplicateExpenses[this.selectedSet].filter(
         (exp) => exp.id !== expense.id
       );
-    });
+    }
   }
 
-  dismissAll(): void {
-    const txnIds = this.duplicateSetData[this.selectedSet];
-    this.dismissDuplicates(txnIds, txnIds).subscribe(() => {
+  async dismissAll(): Promise<void> {
+    const expenseIds = this.duplicateSetData[this.selectedSet];
+
+    const popover = await this.popoverController.create({
+      component: DismissDialogComponent,
+      cssClass: 'dismiss-dialog',
+      backdropDismiss: false,
+      componentProps: {
+        dismissMethod: () => this.dismissDuplicates(expenseIds, expenseIds),
+      },
+    });
+
+    await popover.present();
+
+    const popoverResponse = (await popover.onDidDismiss()) as OverlayResponse<{ status: string }>;
+
+    if (popoverResponse.data?.status === 'success') {
       if (this.selectedSet !== 0) {
         this.selectedSet--;
       }
@@ -134,7 +166,7 @@ export class PotentialDuplicatesPage {
       this.duplicateSets$.subscribe((duplicateExpenses) => {
         this.duplicateExpenses = duplicateExpenses;
       });
-    });
+    }
   }
 
   mergeExpense(): void {

src/global.scss

@@ -952,6 +952,17 @@ ion-modal.flag-unflag-modal {
   padding-top: 0 !important;
 }
 
+ion-popover.dismiss-dialog {
+  --width: 298px;
+
+  &::part(content) {
+    border-radius: 8px;
+    padding: 24px;
+  }
+
+  background: rgba(0, 0, 0, 0.6);
+}
+
 ion-popover.delete-dialog {
   --width: 296px;
   --max-height: 346px;

src/theme/colors.scss

@@ -47,6 +47,7 @@ $shadow-lg: rgba(44, 48, 78, 0.1);
 
 $brand-primary: #ff3366 !default;
 $brand-primary-light: #fe5196 !default;
+$brand-gradient: linear-gradient(162deg, #f36 3.01%, #fe5196 111.5%);
 
 $pink: #fe4c8e !default;