fix: feature branch for auto-coding issues (#3209)

* feat: Add the auto-coded section in the add-edit-expense form * fix: added another star svg to pass custom color * fix: check added for undefined values * fix: if else block * fix: removed stars-color-filled icon and used sparkle instead * removing this from ngif * feat: Add the auto-coded icon in the view-expense screen * fix: css and null check * fix: removed stars-color-filled icon and replaced with sparkle * fix: Replace the scanning receipt loader * fix: lint and unit test * fix: Replace the scanning receipt loader (#3203) * fix: Replace the scanning receipt loader * fix: lint and unit test * feat: Add the auto-coded icon in the view-expense screen (#3202) * feat: Add the auto-coded icon in the view-expense screen * fix: css and null check * fix: removed stars-color-filled icon and replaced with sparkle * Revert "fix: Replace the scanning receipt loader (#3203)" (#3210) This reverts commit 689a94e. * fix: Replace the scanning receipt loader for single mode (#3211) * fix: lint issues in fy-currency (#3212) * fix: failing test cases and auto coding for edit and camera upload * fix: lint and other suggestions * fix: changed sparkle svg and other fixes * fix: added check for data in fy-currency * fix: removed any from fy-currency.component.spec.ts and refactored setExchangeRate * fix: lint issues * fix: lint issue * fix: added more tests to increase coverage
fylein · Sep 20, 2024 · afe36a9 · afe36a9
1 parent 9da06c1
commit afe36a9
Show file tree

Hide file tree

Showing 16 changed files with 300 additions and 88 deletions.
diff --git a/src/app/core/models/currency-amount-form-values.model.ts b/src/app/core/models/currency-amount-form-values.model.ts
@@ -0,0 +1,5 @@
+export interface CurrencyAmountFormValues {
+  currency: string;
+  amount: number;
+  homeCurrencyAmount: number;
+}
diff --git a/src/app/core/services/loader.service.spec.ts b/src/app/core/services/loader.service.spec.ts
@@ -36,6 +36,8 @@ describe('LoaderService', () => {
       expect(loadingController.create).toHaveBeenCalledOnceWith({
         message,
         duration,
+        spinner: 'crescent',
+        cssClass: '',
       });
       expect(loadingElementSpy.present).toHaveBeenCalledTimes(1);
     }));

diff --git a/src/app/core/services/loader.service.ts b/src/app/core/services/loader.service.ts
@@ -8,15 +8,26 @@ import { noop } from 'rxjs';
 export class LoaderService {
   constructor(private loadingController: LoadingController) {}
 
-  async showLoader(message = 'Please wait...', duration = 1000) {
+  async showLoader(message = 'Please wait...', duration = 1000, customLoaderUrl?: string): Promise<void> {
     const loading = await this.loadingController.create({
       message,
       duration,
+      spinner: customLoaderUrl ? null : 'crescent',
+      cssClass: customLoaderUrl ? 'custom-loading' : '',
     });
+
+    if (customLoaderUrl) {
+      loading.message = `
+        <div class="custom-loading">
+          <img src="${customLoaderUrl}" class="custom-loading-gif"/>
+          <span>${message}</span>
+        </div>
+      `;
+    }
     return await loading.present();
   }
 
-  hideLoader() {
+  hideLoader(): Promise<boolean | void> {
     return this.loadingController.dismiss().catch(noop);
   }
 }
diff --git a/src/app/fyle/add-edit-expense/add-edit-expense.page.html b/src/app/fyle/add-edit-expense/add-edit-expense.page.html
@@ -252,6 +252,7 @@
                   [expanded]="attachedReceiptsCount === 0"
                   [touchedInParent]="fg?.controls?.currencyObj?.touched"
                   [validInParent]="fg?.controls?.currencyObj?.valid"
+                  [autoCodedData]="autoCodedData"
                 >
                 </app-currency>
                 <div
@@ -299,7 +300,7 @@
                   <div
                     *ngIf="txnFields?.txn_dt"
                     [ngClass]="{'add-edit-expense--internal-block__invalid add-edit-expense--date__invalid': fg.controls.dateOfSpend.touched && !fg.controls.dateOfSpend.valid}"
-                    class="add-edit-expense--date add-edit-expense--internal-block add-edit-expense--internal-block__margin"
+                    class="add-edit-expense--date add-edit-expense--internal-block add-edit-expense--internal-block__margin add-edit-expense--internal-block--auto-coded"
                   >
                     <div
                       [ngClass]="{'add-edit-expense--date-label__invalid': fg.controls.dateOfSpend.touched && !fg.controls.dateOfSpend.valid}"
@@ -320,6 +321,13 @@
                       [name]="txnFields.txn_dt?.field_name || 'Date of Spend'"
                     />
                   </div>
+                  <div
+                    class="add-edit-expense--auto-coded"
+                    *ngIf="(autoCodedData?.date && fg.controls.dateOfSpend?.value) && (autoCodedData.date | date:'MMM dd, YYYY') === (fg.controls.dateOfSpend.value | date:'MMM dd, YYYY')"
+                  >
+                    <mat-icon class="add-edit-expense--sparkle-icon" svgIcon="sparkle"></mat-icon>
+                    Date is auto coded.
+                  </div>
                   <div
                     *ngIf="fg.controls.dateOfSpend.touched && !fg.controls.dateOfSpend.valid"
                     class="add-edit-expense--date-error"
@@ -488,6 +496,13 @@
                       [placeholder]="txnFields.org_category_id.placeholder"
                     >
                     </app-virtual-select>
+                    <div
+                      class="add-edit-expense--auto-coded"
+                      *ngIf="(autoCodedData?.category && fg.controls.category?.value?.displayName) && autoCodedData.category === fg.controls.category.value.displayName"
+                    >
+                      <mat-icon class="add-edit-expense--sparkle-icon" svgIcon="sparkle"></mat-icon>
+                      Category is auto coded.
+                    </div>
                   </div>
                   <div
                     *ngIf="fg.controls.category.touched && !fg.controls.category.valid"
@@ -904,6 +919,13 @@
                 [placeholder]="txnFields.vendor_id?.placeholder"
               >
               </app-virtual-select>
+              <div
+                class="add-edit-expense--auto-coded"
+                *ngIf="(autoCodedData?.vendor_name && fg.controls.vendor_id?.value?.display_name) && autoCodedData.vendor_name === fg.controls.vendor_id.value.display_name"
+              >
+                <mat-icon class="add-edit-expense--sparkle-icon" svgIcon="sparkle"></mat-icon>
+                Merchant is auto coded.
+              </div>
             </div>
             <div *ngIf="fg.controls.vendor_id.touched && !fg.controls.vendor_id.valid" class="add-edit-expense--error">
               Please select a merchant

diff --git a/src/app/fyle/add-edit-expense/add-edit-expense.page.scss b/src/app/fyle/add-edit-expense/add-edit-expense.page.scss
@@ -306,6 +306,9 @@
     &__invalid {
       margin-bottom: 0px;
     }
+    &--auto-coded {
+      margin-bottom: 0px;
+    }
   }
 
   &--split-expense-container {
@@ -734,4 +737,18 @@
     line-height: 16px;
     font-size: 12px;
   }
+
+  &--auto-coded {
+    display: flex;
+    align-items: center;
+    height: 12px;
+    font-size: 12px;
+    color: $black-light;
+    margin-top: 4px;
+  }
+
+  &--sparkle-icon {
+    width: 12px;
+    margin-right: 4px;
+  }
 }
diff --git a/src/app/fyle/add-edit-expense/add-edit-expense.page.ts b/src/app/fyle/add-edit-expense/add-edit-expense.page.ts
@@ -359,6 +359,8 @@ export class AddEditExpensePage implements OnInit {
 
   inpageExtractedData: ParsedResponse;
 
+  autoCodedData: ParsedResponse;
+
   actionSheetOptions$: Observable<{ text: string; handler: () => void }[]>;
 
   billableDefaultValue: boolean;
@@ -1265,6 +1267,9 @@ export class AddEditExpensePage implements OnInit {
           };
 
           const details = extractedDetails.parsedResponse as ParsedResponse;
+          if (details) {
+            this.autoCodedData = details;
+          }
 
           if (details) {
             return this.currencyService.getHomeCurrency().pipe(
@@ -1738,7 +1743,14 @@ export class AddEditExpensePage implements OnInit {
 
     const txnReceiptsCount$ = this.getReceiptCount();
 
-    from(this.loaderService.showLoader('Loading expense...', 15000))
+    // To conditionally change the loader for add and edit expense
+    const loader$ = this.activatedRoute.snapshot.params.dataUrl
+      ? from(
+          this.loaderService.showLoader('Scanning information from the receipt...', 15000, 'assets/images/scanning.gif')
+        )
+      : from(this.loaderService.showLoader('Loading expense...', 15000));
+
+    loader$
       .pipe(
         switchMap(() =>
           forkJoin({
@@ -1762,7 +1774,9 @@ export class AddEditExpensePage implements OnInit {
             taxGroups: this.taxGroups$,
           })
         ),
-        finalize(() => from(this.loaderService.hideLoader()))
+        finalize(() => {
+          this.loaderService.hideLoader();
+        })
       )
       .subscribe(
         ({
@@ -2684,6 +2698,12 @@ export class AddEditExpensePage implements OnInit {
     return this.platformExpense$.pipe(
       switchMap((expense) => {
         const etxn = this.transactionService.transformExpense(expense);
+
+        if (etxn && etxn.tx.extracted_data) {
+          this.autoCodedData = etxn.tx.extracted_data;
+          this.autoCodedData.vendor_name = etxn.tx.extracted_data.vendor;
+        }
+
         this.isIncompleteExpense = etxn.tx.state === 'DRAFT';
         this.source = etxn.tx.source || 'MOBILE';
         if (etxn.tx.state === 'DRAFT' && etxn.tx.extracted_data) {
@@ -3512,6 +3532,7 @@ export class AddEditExpensePage implements OnInit {
 
         if (this.inpageExtractedData) {
           etxn.tx.extracted_data = this.inpageExtractedData;
+          this.autoCodedData = this.inpageExtractedData;
         }
 
         // If user has not edited the amount, then send user_amount to check_policies
@@ -4395,6 +4416,12 @@ export class AddEditExpensePage implements OnInit {
   }
 
   async getParsedReceipt(base64Image: string, fileType: string): Promise<ParsedReceipt> {
+    await this.loaderService.showLoader(
+      'Scanning information from the receipt...',
+      15000,
+      'assets/images/scanning.gif'
+    );
+
     const parsedData: ParsedReceipt = await this.transactionOutboxService.parseReceipt(base64Image, fileType);
     const homeCurrency = await this.currencyService.getHomeCurrency().toPromise();
 
@@ -4413,6 +4440,7 @@ export class AddEditExpensePage implements OnInit {
         .toPromise();
     }
 
+    await this.loaderService.hideLoader();
     return parsedData;
   }
 
@@ -4454,6 +4482,9 @@ export class AddEditExpensePage implements OnInit {
 
         if (!this.inpageExtractedData) {
           this.inpageExtractedData = imageData.data;
+          if (this.inpageExtractedData) {
+            this.autoCodedData = this.inpageExtractedData;
+          }
         } else {
           this.inpageExtractedData = mergeWith(
             {},
@@ -4757,7 +4788,9 @@ export class AddEditExpensePage implements OnInit {
     from(this.loaderService.showLoader())
       .pipe(
         switchMap(() => attachements$),
-        finalize(() => from(this.loaderService.hideLoader()))
+        finalize(() => {
+          this.loaderService.hideLoader();
+        })
       )
       .subscribe(async (attachments) => {
         const attachmentsModal = await this.modalController.create({

diff --git a/src/app/fyle/view-expense/view-expense.page.html b/src/app/fyle/view-expense/view-expense.page.html
@@ -218,7 +218,14 @@
                   </div>
                 </ion-col>
                 <ion-col class="view-expense--content-container">
-                  <div class="view-expense--label">Spend Date</div>
+                  <div class="d-flex">
+                    <div class="view-expense--label">Spend Date</div>
+                    <ion-icon
+                      *ngIf="expense.extracted_data && (expense.spent_at | date:'MMM dd, YYYY') === (expense.extracted_data.date | date:'MMM dd, YYYY')"
+                      class="view-expense--sparkle-icon"
+                      src="../../../assets/svg/sparkle.svg"
+                    ></ion-icon>
+                  </div>
                   <div class="view-expense--value">{{ expense.spent_at | date: 'MMM dd, YYYY' }}</div>
                 </ion-col>
               </ion-row>

diff --git a/src/app/fyle/view-expense/view-expense.page.scss b/src/app/fyle/view-expense/view-expense.page.scss
@@ -193,4 +193,11 @@
     margin-top: 16px;
     border-bottom: 1px solid $grey;
   }
+
+  &--sparkle-icon {
+    width: 12px;
+    height: 12px;
+    margin: 2px 0px 2px 2px;
+    color: $brand-primary;
+  }
 }
diff --git a/src/app/shared/components/fy-currency/fy-currency.component.html b/src/app/shared/components/fy-currency/fy-currency.component.html
@@ -21,6 +21,10 @@
     </div>
   </form>
 </div>
+<div class="fy-currency__auto-coded" *ngIf="autoCodeMessage">
+  <mat-icon class="fy-currency__sparkle-icon" svgIcon="sparkle"></mat-icon>
+  {{ autoCodeMessage }}
+</div>
 <ng-container *ngIf="value?.currency && value?.orig_currency">
   <div class="fy-currency--exchange-rate-container" [ngClass]="{ expanded: expanded }">
     <mat-icon class="fy-currency--exchange-rate-icon" svgIcon="info-circle-fill"></mat-icon>

diff --git a/src/app/shared/components/fy-currency/fy-currency.component.scss b/src/app/shared/components/fy-currency/fy-currency.component.scss
@@ -59,6 +59,19 @@
     width: 70%;
   }
 
+  &__auto-coded {
+    display: flex;
+    align-items: center;
+    height: 12px;
+    font-size: 12px;
+    color: $black-light;
+  }
+
+  &__sparkle-icon {
+    width: 12px;
+    margin-right: 4px;
+  }
+
   &__invalid {
     border-bottom: 1px solid $red;
   }