feat: delete attachment using platform api (#3029)

src/app/core/mock-data/receipt-info.data.ts

@@ -2,13 +2,17 @@ import deepFreeze from 'deep-freeze-strict';
 import { ReceiptInfo } from '../models/receipt-info.model';
 
 export const receiptInfoData1: ReceiptInfo = deepFreeze({
+  id: '1',
+  name: 'invoice.pdf',
   type: 'pdf',
   url: 'https://sampledownloadurl.com',
   thumbnail: 'img/fy-pdf.svg',
 });
 
 export const receiptInfoData2: ReceiptInfo[] = deepFreeze([
   {
+    id: '1',
+    name: 'invoice.pdf',
     type: 'pdf',
     url: 'https://sampledownloadurl.com',
     thumbnail: 'img/fy-pdf.svg',

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

@@ -26,6 +26,12 @@ export class SpenderFileService {
       .pipe(map((response) => response.data));
   }
 
+  deleteFilesBulk(fileIds: string[]): Observable<{}> {
+    const data = fileIds.map((id) => ({ id }));
+    const payload = { data };
+    return this.spenderPlatformV1ApiService.post('/files/delete/bulk', payload);
+  }
+
   generateUrls(id: string): Observable<PlatformFileGenerateUrlsResponse> {
     const payload = {
       data: { id },

src/app/fyle/add-edit-expense/add-edit-expense.page.ts

@@ -136,7 +136,6 @@ import { CorporateCardTransactionRes } from 'src/app/core/models/platform/v1/cor
 import { corporateCardTransaction } from 'src/app/core/models/platform/v1/cc-transaction.model';
 import { PlatformFileGenerateUrlsResponse } from 'src/app/core/models/platform/platform-file-generate-urls-response.model';
 import { SpenderFileService } from 'src/app/core/services/platform/v1/spender/file.service';
-import { ReceiptInfo } from 'src/app/core/models/receipt-info.model';
 
 type FormValue = {
   currencyObj: {
@@ -3104,10 +3103,12 @@ export class AddEditExpensePage implements OnInit {
           ),
           map((response: PlatformFileGenerateUrlsResponse[]) => {
             const files = response.filter((file) => file.content_type !== 'text/html');
-            const receiptObjs: ReceiptInfo[] = files.map((file) => {
+            const receiptObjs: FileObject[] = files.map((file) => {
               const details = this.fileService.getReceiptsDetails(file.name, file.download_url);
 
-              const receipt: ReceiptInfo = {
+              const receipt: FileObject = {
+                id: file.id,
+                name: file.name,
                 url: file.download_url,
                 type: details.type,
                 thumbnail: details.thumbnail,
@@ -3231,10 +3232,12 @@ export class AddEditExpensePage implements OnInit {
         ),
         map((response: PlatformFileGenerateUrlsResponse[]) => {
           const files = response.filter((file) => file.content_type !== 'text/html');
-          const receiptObjs: ReceiptInfo[] = files.map((file) => {
+          const receiptObjs: FileObject[] = files.map((file) => {
             const details = this.fileService.getReceiptsDetails(file.name, file.download_url);
 
-            const receipt: ReceiptInfo = {
+            const receipt: FileObject = {
+              id: file.id,
+              name: file.name,
               url: file.download_url,
               type: details.type,
               thumbnail: details.thumbnail,

src/app/fyle/view-mileage/view-mileage.page.ts

@@ -330,6 +330,8 @@ export class ViewMileagePage {
           const details = this.fileService.getReceiptsDetails(response.name, response.download_url);
 
           const receipt: FileObject = {
+            id: response.id,
+            name: response.name,
             url: response.download_url,
             type: details.type,
             thumbnail: details.thumbnail,

src/app/shared/components/fy-view-attachment/fy-view-attachment.component.spec.ts

@@ -1,9 +1,8 @@
 import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
 import { IonicModule, ModalController, PopoverController } from '@ionic/angular';
-
+import { SpenderFileService } from 'src/app/core/services/platform/v1/spender/file.service';
 import { FyViewAttachmentComponent } from './fy-view-attachment.component';
 import { DomSanitizer } from '@angular/platform-browser';
-import { FileService } from 'src/app/core/services/file.service';
 import { LoaderService } from 'src/app/core/services/loader.service';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { of } from 'rxjs';
@@ -15,18 +14,17 @@ describe('FyViewAttachmentComponent', () => {
   let domSantizer: jasmine.SpyObj<DomSanitizer>;
   let modalController: jasmine.SpyObj<ModalController>;
   let popoverController: jasmine.SpyObj<PopoverController>;
-  let fileService: jasmine.SpyObj<FileService>;
+  let spenderFileService: jasmine.SpyObj<SpenderFileService>;
   let loaderService: jasmine.SpyObj<LoaderService>;
   let trackingService: jasmine.SpyObj<TrackingService>;
 
   beforeEach(waitForAsync(() => {
     const domSantizerSpy = jasmine.createSpyObj('DomSanitizer', ['bypassSecurityTrustUrl']);
     const modalControllerSpy = jasmine.createSpyObj('ModalController', ['dismiss']);
     const popoverControllerSpy = jasmine.createSpyObj('PopoverController', ['create']);
-    const fileServiceSpy = jasmine.createSpyObj('FileService', ['delete']);
     const loaderServiceSpy = jasmine.createSpyObj('LoaderService', ['hideLoader', 'showLoader']);
     const trackingServiceSpy = jasmine.createSpyObj('TracingService', ['deleteFileClicked', 'fileDeleted']);
-
+    const spenderFileServiceSpy = jasmine.createSpyObj('SpenderFileService', ['deleteFilesBulk']);
     TestBed.configureTestingModule({
       declarations: [FyViewAttachmentComponent],
       providers: [
@@ -43,8 +41,8 @@ describe('FyViewAttachmentComponent', () => {
           useValue: popoverControllerSpy,
         },
         {
-          provide: FileService,
-          useValue: fileServiceSpy,
+          provide: SpenderFileService,
+          useValue: spenderFileServiceSpy,
         },
         {
           provide: LoaderService,
@@ -64,8 +62,8 @@ describe('FyViewAttachmentComponent', () => {
     domSantizer = TestBed.inject(DomSanitizer) as jasmine.SpyObj<DomSanitizer>;
     modalController = TestBed.inject(ModalController) as jasmine.SpyObj<ModalController>;
     popoverController = TestBed.inject(PopoverController) as jasmine.SpyObj<PopoverController>;
+    spenderFileService = TestBed.inject(SpenderFileService) as jasmine.SpyObj<SpenderFileService>;
     loaderService = TestBed.inject(LoaderService) as jasmine.SpyObj<LoaderService>;
-    fileService = TestBed.inject(FileService) as jasmine.SpyObj<FileService>;
     trackingService = TestBed.inject(TrackingService) as jasmine.SpyObj<TrackingService>;
 
     const mockAttachments = [
@@ -189,7 +187,7 @@ describe('FyViewAttachmentComponent', () => {
       }) as any
     );
 
-    fileService.delete.and.returnValue(of(null));
+    spenderFileService.deleteFilesBulk.and.returnValue(of({}));
     spyOn(component, 'goToPrevSlide');
     spyOn(component, 'goToNextSlide');
     component.deleteAttachment();
@@ -208,7 +206,7 @@ describe('FyViewAttachmentComponent', () => {
         url: 'http://example.com/attachment3.pdf',
       },
     ]);
-    expect(fileService.delete).toHaveBeenCalledOnceWith('2');
+    expect(spenderFileService.deleteFilesBulk).toHaveBeenCalledOnceWith(['2']);
     expect(trackingService.deleteFileClicked).toHaveBeenCalledOnceWith({ 'File ID': '2' });
     expect(trackingService.fileDeleted).toHaveBeenCalledOnceWith({ 'File ID': '2' });
   }));
@@ -232,7 +230,7 @@ describe('FyViewAttachmentComponent', () => {
       }) as any
     );
 
-    fileService.delete.and.returnValue(of(null));
+    spenderFileService.deleteFilesBulk.and.returnValue(of({}));
     spyOn(component, 'goToPrevSlide');
     spyOn(component, 'goToNextSlide');
     component.deleteAttachment();
@@ -251,7 +249,7 @@ describe('FyViewAttachmentComponent', () => {
         url: 'http://example.com/attachment3.pdf',
       },
     ]);
-    expect(fileService.delete).toHaveBeenCalledOnceWith('1');
+    expect(spenderFileService.deleteFilesBulk).toHaveBeenCalledOnceWith(['1']);
     expect(trackingService.deleteFileClicked).toHaveBeenCalledOnceWith({ 'File ID': '1' });
     expect(trackingService.fileDeleted).toHaveBeenCalledOnceWith({ 'File ID': '1' });
   }));
@@ -283,15 +281,15 @@ describe('FyViewAttachmentComponent', () => {
       }) as any
     );
 
-    fileService.delete.and.returnValue(of(null));
+    spenderFileService.deleteFilesBulk.and.returnValue(of({}));
     spyOn(component, 'goToPrevSlide');
     spyOn(component, 'goToNextSlide');
     component.deleteAttachment();
     tick(1000);
 
     expect(modalController.dismiss).toHaveBeenCalledOnceWith({ attachments: component.attachments });
     expect(component.attachments.length).toBe(0);
-    expect(fileService.delete).toHaveBeenCalledOnceWith('1');
+    expect(spenderFileService.deleteFilesBulk).toHaveBeenCalledOnceWith(['1']);
     expect(trackingService.deleteFileClicked).toHaveBeenCalledOnceWith({ 'File ID': '1' });
     expect(trackingService.fileDeleted).toHaveBeenCalledOnceWith({ 'File ID': '1' });
   }));
@@ -333,7 +331,7 @@ describe('FyViewAttachmentComponent', () => {
       }) as any
     );
 
-    fileService.delete.and.returnValue(of(null));
+    spenderFileService.deleteFilesBulk.and.returnValue(of({}));
     spyOn(component, 'goToPrevSlide');
     spyOn(component, 'goToNextSlide');
 
@@ -353,7 +351,7 @@ describe('FyViewAttachmentComponent', () => {
         url: 'http://example.com/attachment3.pdf',
       },
     ]);
-    expect(fileService.delete).not.toHaveBeenCalledOnceWith('2');
+    expect(spenderFileService.deleteFilesBulk).not.toHaveBeenCalledOnceWith(['2']);
     expect(trackingService.deleteFileClicked).toHaveBeenCalledOnceWith({ 'File ID': null });
     expect(trackingService.fileDeleted).toHaveBeenCalledOnceWith({ 'File ID': null });
   }));

src/app/shared/components/fy-view-attachment/fy-view-attachment.component.ts

@@ -1,30 +1,31 @@
 import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { ModalController, PopoverController } from '@ionic/angular';
 import { DomSanitizer } from '@angular/platform-browser';
-import { PopupService } from 'src/app/core/services/popup.service';
 import { LoaderService } from 'src/app/core/services/loader.service';
-import { FileService } from 'src/app/core/services/file.service';
 import { from, of } from 'rxjs';
 import { switchMap, finalize } from 'rxjs/operators';
 import { PopupAlertComponent } from 'src/app/shared/components/popup-alert/popup-alert.component';
 import { SwiperComponent } from 'swiper/angular';
-import SwiperCore, { Pagination } from 'swiper';
 import { TrackingService } from 'src/app/core/services/tracking.service';
+import { SpenderFileService } from 'src/app/core/services/platform/v1/spender/file.service';
+import { FileObject } from 'src/app/core/models/file-obj.model';
+import { OverlayEventDetail } from '@ionic/core';
 
 @Component({
   selector: 'app-fy-view-attachment',
   templateUrl: './fy-view-attachment.component.html',
   styleUrls: ['./fy-view-attachment.component.scss'],
 })
 export class FyViewAttachmentComponent implements OnInit {
-  @Input() attachments: any[];
+  @Input() attachments: FileObject[];
 
   @Input() isMileageExpense: boolean;
 
   @Input() canEdit: boolean;
 
   @ViewChild('swiper', { static: false }) imageSlides?: SwiperComponent;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   sliderOptions: any;
 
   activeIndex = 0;
@@ -36,13 +37,12 @@ export class FyViewAttachmentComponent implements OnInit {
     private modalController: ModalController,
     private popoverController: PopoverController,
     private sanitizer: DomSanitizer,
-    private popupService: PopupService,
     private loaderService: LoaderService,
-    private fileService: FileService,
-    private trackingService: TrackingService
+    private trackingService: TrackingService,
+    private spenderFileService: SpenderFileService
   ) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.zoomScale = 1;
     this.sliderOptions = {
       zoom: {
@@ -57,39 +57,39 @@ export class FyViewAttachmentComponent implements OnInit {
     });
   }
 
-  ionViewWillEnter() {
+  ionViewWillEnter(): void {
     this.imageSlides.swiperRef.update();
   }
 
-  zoomIn() {
+  zoomIn(): void {
     this.zoomScale += 0.25;
   }
 
-  zoomOut() {
+  zoomOut(): void {
     this.zoomScale -= 0.25;
   }
 
-  resetZoom() {
+  resetZoom(): void {
     this.zoomScale = 1;
   }
 
-  onDoneClick() {
+  onDoneClick(): void {
     this.modalController.dismiss({ attachments: this.attachments });
   }
 
-  goToNextSlide() {
+  goToNextSlide(): void {
     this.imageSlides.swiperRef.slideNext();
   }
 
-  goToPrevSlide() {
+  goToPrevSlide(): void {
     this.imageSlides.swiperRef.slidePrev();
   }
 
-  getActiveIndex() {
+  getActiveIndex(): void {
     this.activeIndex = this.imageSlides.swiperRef.activeIndex;
   }
 
-  async deleteAttachment() {
+  async deleteAttachment(): Promise<void> {
     const activeIndex = await this.imageSlides.swiperRef.activeIndex;
     try {
       this.trackingService.deleteFileClicked({ 'File ID': this.attachments[activeIndex].id });
@@ -113,37 +113,36 @@ export class FyViewAttachmentComponent implements OnInit {
     });
 
     await deletePopover.present();
-    const { data } = await deletePopover.onWillDismiss();
-
-    if (data && data.action) {
-      if (data.action === 'remove') {
-        from(this.loaderService.showLoader())
-          .pipe(
-            switchMap(() => {
-              if (this.attachments[activeIndex].id) {
-                return this.fileService.delete(this.attachments[activeIndex].id);
-              } else {
-                return of(null);
-              }
-            }),
-            finalize(() => from(this.loaderService.hideLoader()))
-          )
-          .subscribe(() => {
-            try {
-              this.trackingService.fileDeleted({ 'File ID': this.attachments[activeIndex].id });
-            } catch (error) {}
-            this.attachments.splice(activeIndex, 1);
-            if (this.attachments.length === 0) {
-              this.modalController.dismiss({ attachments: this.attachments });
+    const response: OverlayEventDetail<{ action: string }> = await deletePopover.onWillDismiss();
+    const data = response.data;
+
+    if (data?.action === 'remove') {
+      from(this.loaderService.showLoader())
+        .pipe(
+          switchMap(() => {
+            if (this.attachments[activeIndex].id) {
+              return this.spenderFileService.deleteFilesBulk([this.attachments[activeIndex].id]);
             } else {
-              if (activeIndex > 0) {
-                this.goToPrevSlide();
-              } else {
-                this.goToNextSlide();
-              }
+              return of(null);
             }
-          });
-      }
+          }),
+          finalize(() => from(this.loaderService.hideLoader()))
+        )
+        .subscribe(() => {
+          try {
+            this.trackingService.fileDeleted({ 'File ID': this.attachments[activeIndex].id });
+          } catch (error) {}
+          this.attachments.splice(activeIndex, 1);
+          if (this.attachments.length === 0) {
+            this.modalController.dismiss({ attachments: this.attachments });
+          } else {
+            if (activeIndex > 0) {
+              this.goToPrevSlide();
+            } else {
+              this.goToNextSlide();
+            }
+          }
+        });
     }
   }
 }