From 5357414c60758dd3838d5d874c669bc92891dd25 Mon Sep 17 00:00:00 2001 From: hlkavya0213 <79827230+hlkavya0213@users.noreply.github.com> Date: Mon, 9 Oct 2023 18:02:20 +0530 Subject: [PATCH] feat: remove thumbnails across mobile app (#2499) --- src/app/core/mock-data/file-object.data.ts | 3 +- src/app/core/services/file.service.spec.ts | 41 +----- src/app/core/services/file.service.ts | 28 +---- .../split-expense/split-expense.page.spec.ts | 4 +- .../expense-card-lite.component.html | 14 +-- .../expense-card-lite.component.scss | 7 +- .../expense-card-lite.component.spec.ts | 69 ++++------ .../expense-card-lite.component.ts | 21 +--- .../expenses-card.component.html | 17 +-- .../expenses-card.component.scss | 7 +- .../expenses-card.component.spec.ts | 118 +----------------- .../expenses-card/expenses-card.component.ts | 61 ++------- src/assets/images/pdf-receipt-placeholder.png | Bin 0 -> 7933 bytes 13 files changed, 77 insertions(+), 313 deletions(-) create mode 100644 src/assets/images/pdf-receipt-placeholder.png diff --git a/src/app/core/mock-data/file-object.data.ts b/src/app/core/mock-data/file-object.data.ts index 8655f0fd8f..b6f37c79d9 100644 --- a/src/app/core/mock-data/file-object.data.ts +++ b/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', }, ]; diff --git a/src/app/core/services/file.service.spec.ts b/src/app/core/services/file.service.spec.ts index 15cf211c74..11d50a46de 100644 --- a/src/app/core/services/file.service.spec.ts +++ b/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' })); diff --git a/src/app/core/services/file.service.ts b/src/app/core/services/file.service.ts index 937437af53..225c8c7d80 100644 --- a/src/app/core/services/file.service.ts +++ b/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 { return this.apiService.post('/files/' + fileId + '/download_url').pipe(map((res) => res.url)); } - downloadThumbnailUrl(fileId: string): Observable { - return this.apiService.post('/files/download_urls', [ - { - id: fileId, - purpose: 'THUMBNAILx200x200', - }, - ]); - } - - getFilesWithThumbnail(txnId: string): Observable { - 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,7 +29,7 @@ export class FileService { advance_request_id: advanceRequestId, skip_html: 'true', }, - }), + }) ).pipe( map((files) => { files.map((file) => { @@ -59,7 +37,7 @@ export class FileService { this.setFileType(file as FileObject); }); return files as unknown as FileObject[]; - }), + }) ); } 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 492730b5f3..e7ac7feaef 100644 --- a/src/app/fyle/split-expense/split-expense.page.spec.ts +++ b/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', })); diff --git a/src/app/shared/components/expense-card-lite/expense-card-lite.component.html b/src/app/shared/components/expense-card-lite/expense-card-lite.component.html index ae9a29ff24..afce935eb9 100644 --- a/src/app/shared/components/expense-card-lite/expense-card-lite.component.html +++ b/src/app/shared/components/expense-card-lite/expense-card-lite.component.html @@ -1,6 +1,6 @@
- +
-
+
+ +
@@ -29,7 +25,7 @@
- {{ expense.txn_dt | date: 'MMM dd, YYYY' }} + {{ expense.txn_dt | date : 'MMM dd, YYYY' }}
diff --git a/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss b/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss index 6a59195d44..75507b99af 100644 --- a/src/app/shared/components/expense-card-lite/expense-card-lite.component.scss +++ b/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; diff --git a/src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts b/src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts index 009a8fbe0f..bcb7a45cd2 100644 --- a/src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts +++ b/src/app/shared/components/expense-card-lite/expense-card-lite.component.spec.ts @@ -1,22 +1,13 @@ -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; @@ -24,9 +15,7 @@ describe('ExpenseCardLiteComponent', () => { let fileService: jasmine.SpyObj; 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'); }); diff --git a/src/app/shared/components/expense-card-lite/expense-card-lite.component.ts b/src/app/shared/components/expense-card-lite/expense-card-lite.component.ts index d24e3763e8..22500e4ec2 100644 --- a/src/app/shared/components/expense-card-lite/expense-card-lite.component.ts +++ b/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; + }); } } diff --git a/src/app/shared/components/expenses-card/expenses-card.component.html b/src/app/shared/components/expenses-card/expenses-card.component.html index 99c560f7f0..28bc75e0b3 100644 --- a/src/app/shared/components/expenses-card/expenses-card.component.html +++ b/src/app/shared/components/expenses-card/expenses-card.component.html @@ -26,7 +26,7 @@
- +
+
@@ -62,7 +63,9 @@ class="expenses-card--receipt-container expenses-card--with-image" *ngIf="attachmentUploadInProgress" [ngStyle]="{ - 'background-image': inlineReceiptDataUrl && imageTransperencyOverlay + 'url(' + inlineReceiptDataUrl + ')' + 'background-image': + inlineReceiptDataUrl && + imageTransperencyOverlay + 'url(' + '../../../../assets/images/pdf-receipt-placeholder.png' + ')' }" >