fix: autocoded msg and error msg align fix and separate autocoded msg (…

…#3418) * fix: autocoded msg and error msg align fix and separate autocoded msg * fixing unit test * minor --------- Co-authored-by: Snehasish <[email protected]>
fylein · Jan 15, 2025 · b81e042 · b81e042
1 parent d3fdf9e
commit b81e042
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 41 deletions.
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
@@ -647,7 +647,7 @@
   }
 
   &--orig-amount-error {
-    margin: -68px 4px 48px 33%;
+    margin: -73px 4px 48px 53%;
   }
 
   &--mandatory {

diff --git a/src/app/shared/components/fy-currency/fy-currency.component.html b/src/app/shared/components/fy-currency/fy-currency.component.html
@@ -1,30 +1,38 @@
 <div class="fy-currency">
   <form [formGroup]="fg" class="fy-currency--form">
-    <div class="fy-currency--input-container fy-currency--currency-block">
-      <div class="fy-currency--label">
-        Currency
-        <span class="fy-currency--mandatory"> * </span>
+    <div class="fy-currency--input-wrapper fy-currency--currency-block">
+      <div class="fy-currency--input-container">
+        <div class="fy-currency--label">
+          Currency
+          <span class="fy-currency--mandatory"> * </span>
+        </div>
+        <input
+          class="fy-currency--input smartlook-show"
+          (click)="openCurrencyModal()"
+          formControlName="currency"
+          (blur)="onBlur()"
+        />
+      </div>
+      <div *ngIf="currencyAutoCodeMessage" class="fy-currency__auto-coded">
+        <mat-icon class="fy-currency__sparkle-icon" svgIcon="sparkle"></mat-icon>
+        {{ currencyAutoCodeMessage }}
       </div>
-      <input
-        class="fy-currency--input smartlook-show"
-        (click)="openCurrencyModal()"
-        formControlName="currency"
-        (blur)="onBlur()"
-      />
     </div>
-    <div class="fy-currency--input-container fy-currency--amount-block" [ngClass]="{ 'fy-currency__invalid': !valid }">
-      <div class="fy-currency--label">
-        Amount
-        <span class="fy-currency--mandatory"> * </span>
+    <div class="fy-currency--input-wrapper fy-currency--amount-block">
+      <div class="fy-currency--input-container" [ngClass]="{ 'fy-currency__invalid': !valid }">
+        <div class="fy-currency--label">
+          Amount
+          <span class="fy-currency--mandatory"> * </span>
+        </div>
+        <app-fy-number placeholder="00.00" formControlName="amount" [isAmount]="true"> </app-fy-number>
+      </div>
+      <div *ngIf="amountAutoCodeMessage" class="fy-currency__auto-coded">
+        <mat-icon class="fy-currency__sparkle-icon" svgIcon="sparkle"></mat-icon>
+        {{ amountAutoCodeMessage }}
       </div>
-      <app-fy-number placeholder="00.00" formControlName="amount" [isAmount]="true"> </app-fy-number>
     </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
@@ -38,7 +38,7 @@
 
   &--form {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     height: 70px;
   }
 
@@ -51,19 +51,20 @@
 
   &--currency-block {
     margin-right: 8px;
-    width: 30%;
+    width: 50%;
   }
 
   &--amount-block {
     margin-left: 8px;
-    width: 70%;
+    width: 50%;
   }
 
   &__auto-coded {
     display: flex;
     align-items: center;
     height: 12px;
     font-size: 12px;
+    margin-top: 5px;
     color: $black-light;
   }
 

diff --git a/src/app/shared/components/fy-currency/fy-currency.component.spec.ts b/src/app/shared/components/fy-currency/fy-currency.component.spec.ts
@@ -481,47 +481,49 @@ describe('FyCurrencyComponent', () => {
     expect(component.valid).toBeTrue();
   });
 
-  it('should set autoCodeMessage to "Currency and Amount are auto coded." when both are auto coded', () => {
+  it('should set currencyAutoCodeMessage to "Currency is auto coded." and amountAutoCodeMessage to "Amount is auto coded." when both are auto coded', () => {
     component.autoCodedData = { currency: 'USD', amount: 100 };
     component.fg = new FormGroup({
       currency: new FormControl('USD'),
       amount: new FormControl(100),
       homeCurrencyAmount: new FormControl(null),
     });
     component.showAutoCodeMessage();
-    expect(component.autoCodeMessage).toBe('Currency and Amount are auto coded.');
+    expect(component.currencyAutoCodeMessage).toBe('Currency is auto coded.');
+    expect(component.amountAutoCodeMessage).toBe('Amount is auto coded.');
   });
 
-  it('should set autoCodeMessage to "Currency is auto coded." when only currency is auto coded', () => {
+  it('should set currencyAutoCodeMessage to "Currency is auto coded." when only currency is auto coded', () => {
     component.autoCodedData = { currency: 'USD', amount: 100 };
     component.fg = new FormGroup({
       currency: new FormControl('USD'),
       amount: new FormControl(200),
       homeCurrencyAmount: new FormControl(null),
     });
     component.showAutoCodeMessage();
-    expect(component.autoCodeMessage).toBe('Currency is auto coded.');
+    expect(component.currencyAutoCodeMessage).toBe('Currency is auto coded.');
   });
 
-  it('should set autoCodeMessage to "Amount is auto coded." when only amount is auto coded', () => {
+  it('should set amountAutoCodeMessage to "Amount is auto coded." when only amount is auto coded', () => {
     component.autoCodedData = { currency: 'USD', amount: 100 };
     component.fg = new FormGroup({
       currency: new FormControl('EUR'),
       amount: new FormControl(100),
       homeCurrencyAmount: new FormControl(null),
     });
     component.showAutoCodeMessage();
-    expect(component.autoCodeMessage).toBe('Amount is auto coded.');
+    expect(component.amountAutoCodeMessage).toBe('Amount is auto coded.');
   });
 
-  it('should set autoCodeMessage to "" when neither currency nor amount is auto coded', () => {
+  it('should set currencyAutoCodeMessage and amountAutoCodeMessage to "" when neither currency nor amount is auto coded', () => {
     component.autoCodedData = { currency: 'USD', amount: 100 };
     component.fg = new FormGroup({
       currency: new FormControl('EUR'),
       amount: new FormControl(200),
       homeCurrencyAmount: new FormControl(null),
     });
     component.showAutoCodeMessage();
-    expect(component.autoCodeMessage).toBe('');
+    expect(component.currencyAutoCodeMessage).toBe('');
+    expect(component.amountAutoCodeMessage).toBe('');
   });
 });
diff --git a/src/app/shared/components/fy-currency/fy-currency.component.ts b/src/app/shared/components/fy-currency/fy-currency.component.ts
@@ -40,7 +40,9 @@ export class FyCurrencyComponent implements ControlValueAccessor, OnInit, OnChan
 
   @Input() autoCodedData: ParsedResponse;
 
-  autoCodeMessage = '';
+  currencyAutoCodeMessage = '';
+
+  amountAutoCodeMessage = '';
 
   exchangeRate = 1;
 
@@ -183,15 +185,8 @@ export class FyCurrencyComponent implements ControlValueAccessor, OnInit, OnChan
     const isCurrencyAutoCoded = currency && currency === formCurrency;
     const isAmountAutoCoded = amount && amount === formAmount;
 
-    if (isCurrencyAutoCoded && isAmountAutoCoded) {
-      this.autoCodeMessage = 'Currency and Amount are auto coded.';
-    } else if (isCurrencyAutoCoded) {
-      this.autoCodeMessage = 'Currency is auto coded.';
-    } else if (isAmountAutoCoded) {
-      this.autoCodeMessage = 'Amount is auto coded.';
-    } else {
-      this.autoCodeMessage = '';
-    }
+    this.currencyAutoCodeMessage = isCurrencyAutoCoded ? 'Currency is auto coded.' : '';
+    this.amountAutoCodeMessage = isAmountAutoCoded ? 'Amount is auto coded.' : '';
   }
 
   convertInnerValueToFormValue(innerVal: CurrencyObj): CurrencyAmountFormValues {