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

fylein · Jan 12, 2025 · d826ac6 · d826ac6
1 parent e4dd85f
commit d826ac6
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 33 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 class="fy-currency__auto-coded" *ngIf="currencyAutoCodeMessage">
+        <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 class="fy-currency__auto-coded" *ngIf="amountAutoCodeMessage">
+        <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.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 {