feat: remove thumbnails across mobile app (#2499)

src/app/core/mock-data/file-object.data.ts

@@ -78,10 +78,9 @@ export const fileObjectData5: FileObject = {
   purpose: '',
 };
 
-export const thumbnailUrlMockData: FileObject[] = [
+export const fileUrlMockData: FileObject[] = [
   {
     id: 'fiwJ0nQTBpYH',
-    purpose: 'THUMBNAILx200x200',
     url: 'mock-url-1',
   },
 ];

src/app/core/services/file.service.spec.ts

@@ -1,12 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 import { of } from 'rxjs';
-import {
-  fileObjectAdv,
-  fileObjectAdv1,
-  fileObjectData,
-  fileObjectData4,
-  thumbnailUrlMockData,
-} from '../mock-data/file-object.data';
+import { fileObjectAdv, fileObjectAdv1, fileObjectData, fileObjectData4 } from '../mock-data/file-object.data';
 import { ApiService } from './api.service';
 import { DateService } from './date.service';
 
@@ -42,39 +36,6 @@ describe('FileService', () => {
     expect(fileService).toBeTruthy();
   });
 
-  it('downloadThumbnailUrl(): should return the file obj with thumbnail url', (done) => {
-    apiService.post.and.returnValue(of(thumbnailUrlMockData));
-
-    const fileId = 'fiwJ0nQTBpYH';
-    fileService.downloadThumbnailUrl(fileId).subscribe((res) => {
-      expect(res).toEqual(thumbnailUrlMockData);
-      expect(apiService.post).toHaveBeenCalledOnceWith('/files/download_urls', [
-        {
-          id: fileId,
-          purpose: 'THUMBNAILx200x200',
-        },
-      ]);
-      done();
-    });
-  });
-
-  it('getFilesWithThumbnail(): should return files with thumbnail for the given txn ID', (done) => {
-    apiService.get.and.returnValue(of([fileObjectData]));
-
-    const txnId = 'txdzGV1TZEg3';
-    fileService.getFilesWithThumbnail(txnId).subscribe((res) => {
-      expect(res).toEqual([fileObjectData]);
-      expect(apiService.get).toHaveBeenCalledOnceWith('/files', {
-        params: {
-          transaction_id: txnId,
-          skip_html: 'true',
-          purpose: 'THUMBNAILx200x200',
-        },
-      });
-      done();
-    });
-  });
-
   it('base64Download(): should return the base64 encoded file content', (done) => {
     apiService.get.and.returnValue(of({ content: 'base64encodedcontent' }));
 

src/app/core/services/file.service.ts

@@ -12,34 +12,12 @@ import { DateService } from './date.service';
   providedIn: 'root',
 })
 export class FileService {
-  constructor(
-    private apiService: ApiService,
-    private dateService: DateService,
-  ) {}
+  constructor(private apiService: ApiService, private dateService: DateService) {}
 
   downloadUrl(fileId: string): Observable<string> {
     return this.apiService.post<File>('/files/' + fileId + '/download_url').pipe(map((res) => res.url));
   }
 
-  downloadThumbnailUrl(fileId: string): Observable<FileObject[]> {
-    return this.apiService.post('/files/download_urls', [
-      {
-        id: fileId,
-        purpose: 'THUMBNAILx200x200',
-      },
-    ]);
-  }
-
-  getFilesWithThumbnail(txnId: string): Observable<FileObject[]> {
-    return this.apiService.get('/files', {
-      params: {
-        transaction_id: txnId,
-        skip_html: 'true',
-        purpose: 'THUMBNAILx200x200',
-      },
-    });
-  }
-
   base64Download(fileId: string): Observable<{ content: string }> {
     return this.apiService.get('/files/' + fileId + '/download_b64');
   }
@@ -51,15 +29,15 @@ export class FileService {
           advance_request_id: advanceRequestId,
           skip_html: 'true',
         },
-      }),
+      })
     ).pipe(
       map((files) => {
         files.map((file) => {
           this.dateService.fixDates(file);
           this.setFileType(file as FileObject);
         });
         return files as unknown as FileObject[];
-      }),
+      })
     );
   }
 

src/app/fyle/split-expense/split-expense.page.spec.ts

@@ -84,7 +84,7 @@ import {
   splitExpFile2,
   splitExpFile3,
   splitExpFileObj,
-  thumbnailUrlMockData,
+  fileUrlMockData,
   fileObjectData1,
 } from 'src/app/core/mock-data/file-object.data';
 import {
@@ -632,7 +632,7 @@ describe('SplitExpensePage', () => {
 
     it('should return the attached files when the transaction id is specified', (done) => {
       spyOn(component, 'getAttachedFiles').and.returnValue(of(fileObject8));
-      const FileObject9: FileObject[] = thumbnailUrlMockData.map((fileObject) => ({
+      const FileObject9: FileObject[] = fileUrlMockData.map((fileObject) => ({
         ...fileObject,
         id: 'fizBwnXhyZTp',
       }));

src/app/shared/components/expense-card-lite/expense-card-lite.component.html

@@ -1,6 +1,6 @@
 <div class="expenses-card--body">
   <div class="d-flex">
-    <ng-container *ngIf="!receiptThumbnail">
+    <ng-container *ngIf="!isReceiptPresent">
       <div class="expenses-card--receipt-container">
         <ion-icon
           class="expenses-card--receipt-icon expenses-card--receipt-icon__pdf"
@@ -9,13 +9,9 @@
       </div>
     </ng-container>
 
-    <div
-      class="expenses-card--receipt-thumbnail-container expenses-card--with-image"
-      [ngStyle]="{
-        'background-image': 'url(' + receiptThumbnail + ')'
-      }"
-      *ngIf="receiptThumbnail"
-    ></div>
+    <div *ngIf="isReceiptPresent" class="expenses-card--receipt-image-container expenses-card--with-image">
+      <img class="expenses-card--receipt-image" [src]="'../../../../assets/images/pdf-receipt-placeholder.png'" />
+    </div>
     <div class="d-flex expenses-card--deatils-block">
       <div class="expenses-card--category-vendor-project-container">
         <div class="d-flex expenses-card--category-icon-container">
@@ -29,7 +25,7 @@
         </div>
 
         <div>
-          {{ expense.txn_dt | date: 'MMM dd, YYYY' }}
+          {{ expense.txn_dt | date : 'MMM dd, YYYY' }}
         </div>
       </div>
 

src/app/shared/components/expense-card-lite/expense-card-lite.component.scss

@@ -28,7 +28,7 @@
     padding: 15px;
   }
 
-  &--receipt-thumbnail-container {
+  &--receipt-image-container {
     background-color: $light-grey;
     border-radius: 8px;
     height: 64px;
@@ -38,6 +38,11 @@
     align-items: center;
   }
 
+  &--receipt-image {
+    height: 60px;
+    width: 80px;
+  }
+
   &--with-image {
     background-size: cover;
     background-repeat: no-repeat;

src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts

@@ -1,32 +1,21 @@
-import { ComponentFixture, TestBed, async, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FileService } from 'src/app/core/services/file.service';
 import { ExpenseCardLiteComponent } from './expense-card-lite.component';
 import { IonicModule } from '@ionic/angular';
 import { MatIconModule } from '@angular/material/icon';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { CurrencySymbolPipe } from '../../pipes/currency-symbol.pipe';
-import { fileObjectData1 } from 'src/app/core/mock-data/file-object.data';
-import { of } from 'rxjs';
 import { getElementBySelector, getTextContent } from 'src/app/core/dom-helpers';
-import { FileObject } from 'src/app/core/models/file-obj.model';
-
-const thumbnailUrlMockData1: FileObject[] = [
-  {
-    id: 'fiwJ0nQTBpYH',
-    purpose: 'THUMBNAILx200x200',
-    url: '/assets/images/add-to-list.png',
-  },
-];
+import { of } from 'rxjs';
+import { fileObjectData } from 'src/app/core/mock-data/file-object.data';
 
 describe('ExpenseCardLiteComponent', () => {
   let expenseCardLiteComponent: ExpenseCardLiteComponent;
   let fixture: ComponentFixture<ExpenseCardLiteComponent>;
   let fileService: jasmine.SpyObj<FileService>;
 
   beforeEach(waitForAsync(() => {
-    const fileServiceSpy = jasmine.createSpyObj('FileService', ['getFilesWithThumbnail', 'downloadThumbnailUrl']);
-    fileServiceSpy.getFilesWithThumbnail.and.returnValue(of(fileObjectData1));
-    fileServiceSpy.downloadThumbnailUrl.and.returnValue(of(thumbnailUrlMockData1));
+    const fileServiceSpy = jasmine.createSpyObj('FileService', ['findByTransactionId']);
 
     TestBed.configureTestingModule({
       declarations: [ExpenseCardLiteComponent, CurrencySymbolPipe],
@@ -42,58 +31,48 @@ describe('ExpenseCardLiteComponent', () => {
 
     fixture = TestBed.createComponent(ExpenseCardLiteComponent);
     expenseCardLiteComponent = fixture.componentInstance;
-    const expense = { id: 'txn1234' };
-    expenseCardLiteComponent.expense = expense;
-    fixture.detectChanges();
   }));
 
   it('should create', () => {
     expect(expenseCardLiteComponent).toBeTruthy();
   });
 
-  it('should call getReceipt on initialization', () => {
-    spyOn(expenseCardLiteComponent, 'getReceipt');
-    expenseCardLiteComponent.ngOnInit();
-    expect(expenseCardLiteComponent.getReceipt).toHaveBeenCalledTimes(1);
-  });
+  const initialSetup = (fileData) => {
+    fileService.findByTransactionId.and.returnValue(of(fileData));
+    expenseCardLiteComponent.expense = { id: 'txn1234' };
+    fixture.detectChanges();
+  };
 
   describe('getReceipt():', () => {
-    it('should set receiptThumbnail if there is at least one thumbnail file', () => {
-      fixture.detectChanges();
-      expect(fileService.getFilesWithThumbnail).toHaveBeenCalledOnceWith(expenseCardLiteComponent.expense.id);
-      expect(fileService.downloadThumbnailUrl).toHaveBeenCalledOnceWith(fileObjectData1[0].id);
-      expect(expenseCardLiteComponent.receiptThumbnail).toEqual(thumbnailUrlMockData1[0].url);
+    it('should set isReceiptPresent to true when files are present', () => {
+      initialSetup([fileObjectData]);
+      expect(fileService.findByTransactionId).toHaveBeenCalledWith('txn1234');
+      expect(expenseCardLiteComponent.isReceiptPresent).toBeTruthy();
     });
 
-    it('should return an empty array if there are no thumbnail files', () => {
-      fileService.getFilesWithThumbnail.and.returnValue(of([]));
-      fixture.detectChanges();
-      expenseCardLiteComponent.getReceipt();
-      expect(fileService.getFilesWithThumbnail).toHaveBeenCalledWith(expenseCardLiteComponent.expense.id);
-      expect(expenseCardLiteComponent.receiptThumbnail).toEqual(thumbnailUrlMockData1[0].url);
+    it('should set isReceiptPresent to false when no files are present', () => {
+      initialSetup([]);
+      expect(fileService.findByTransactionId).toHaveBeenCalledWith('txn1234');
+      expect(expenseCardLiteComponent.isReceiptPresent).toBeFalsy();
     });
   });
 
-  it('should display the thumbnail when available', () => {
-    fixture.detectChanges();
+  it('should display the receipt when available', () => {
+    initialSetup([fileObjectData]);
     const element = fixture.nativeElement;
-    const thumbnailContainer = element.querySelector('.expenses-card--receipt-thumbnail-container');
-    const backgroundImage = thumbnailContainer.style.backgroundImage;
-    expect(thumbnailContainer).toBeTruthy();
-    expect(backgroundImage).toContain(expenseCardLiteComponent.receiptThumbnail);
+    const receiptContainer = element.querySelector('.expenses-card--receipt-image-container');
+    expect(receiptContainer).toBeTruthy();
   });
 
-  it('should display a default icon when no thumbnail available', () => {
-    expenseCardLiteComponent.receiptThumbnail = null;
-    fixture.detectChanges();
-
+  it('should display a default icon when no receipt available', () => {
+    initialSetup([]);
     const element = fixture.nativeElement;
     const icon = element.querySelector('.expenses-card--receipt-icon');
     expect(icon).toBeTruthy();
   });
 
   it('should display "Unspecified" if purpose is not present', () => {
-    fixture.detectChanges();
+    initialSetup([]);
     const purpose = getElementBySelector(fixture, '.expenses-card--category');
     expect(getTextContent(purpose)).toEqual('Unspecified');
   });

src/app/shared/components/expense-card-lite/expense-card-lite.component.ts

@@ -1,6 +1,4 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { noop } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
 import { FileObject } from 'src/app/core/models/file-obj.model';
 import { FileService } from 'src/app/core/services/file.service';
 
@@ -12,7 +10,7 @@ import { FileService } from 'src/app/core/services/file.service';
 export class ExpenseCardLiteComponent implements OnInit {
   @Input() expense;
 
-  receiptThumbnail: string;
+  isReceiptPresent: boolean;
 
   constructor(private fileService: FileService) {}
 
@@ -21,19 +19,8 @@ export class ExpenseCardLiteComponent implements OnInit {
   }
 
   getReceipt() {
-    this.fileService
-      .getFilesWithThumbnail(this.expense.id)
-      .pipe(
-        switchMap((ThumbFiles: FileObject[]) => {
-          if (ThumbFiles.length > 0) {
-            return this.fileService.downloadThumbnailUrl(ThumbFiles[0].id);
-          } else {
-            return [];
-          }
-        })
-      )
-      .subscribe((downloadUrl: FileObject[]) => {
-        this.receiptThumbnail = downloadUrl[0].url;
-      });
+    this.fileService.findByTransactionId(this.expense.id).subscribe((files: FileObject[]) => {
+      this.isReceiptPresent = files.length > 0;
+    });
   }
 }