fix: mandatory as per txnFields (#2823)

* fix: mandatory as per txnFields * for round trip disabling * fix: distance can be zero and fix for commute deduction mandatory message (#2826) * fix: distance can be zero and fix for commute deduction mandatory message * minor
fylein · Mar 14, 2024 · 547239f · 547239f
1 parent 7b14c61
commit 547239f
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 61 deletions.
diff --git a/src/app/fyle/add-edit-mileage/add-edit-mileage.page.html b/src/app/fyle/add-edit-mileage/add-edit-mileage.page.html
@@ -151,59 +151,62 @@
               </ng-container>
 
               <ng-container *ngIf="showCommuteDeductionField && commuteDeductionOptions">
-                <div
-                  class="add-edit-mileage--internal-block"
-                  [ngClass]="{'add-edit-mileage--internal-block__invalid': fg.controls.commuteDeduction.touched && !fg.controls.commuteDeduction.valid}"
-                >
-                  <app-fy-select
-                    [enableSearch]="false"
-                    [label]="'Commute Deduction'"
-                    [mandatory]="true"
-                    [nullOption]="false"
-                    [options]="commuteDeductionOptions"
-                    [selectModalHeader]="'Commute Deduction'"
-                    formControlName="commuteDeduction"
-                    [selectionElement]="commuteDeduction"
-                    [touchedInParent]="fg.controls.commuteDeduction.touched"
-                    [validInParent]="fg.controls.commuteDeduction.valid"
-                  >
-                  </app-fy-select>
-                  <ng-template
-                    #commuteDeduction
-                    let-label="label"
-                    let-value="value"
-                    let-distance="distance"
-                    let-selected="selected"
+                <ng-container *ngIf="txnFields$|async as txnFields">
+                  <div
+                    class="add-edit-mileage--internal-block"
+                    [ngClass]="{'add-edit-mileage--internal-block__invalid': fg.controls.commuteDeduction.touched && !fg.controls.commuteDeduction.valid}"
                   >
-                    <div>
-                      <div class="add-edit-mileage--commute-deduction">{{label}}</div>
-                      <div *ngIf="distance > 0" class="add-edit-mileage--payment-mode-section">
-                        {{distance.toFixed(2) + ' ' + distanceUnit}}
-                      </div>
-                      <div *ngIf="distance === 0" class="add-edit-mileage--payment-mode-section">
-                        {{distance + ' ' + distanceUnit}}
-                      </div>
-                      <div
-                        *ngIf="distance === null"
-                        class="add-edit-mileage--add-location"
-                        (click)="openCommuteDetailsModal()"
-                      >
-                        <ion-icon
-                          class="add-edit-mileage--add-location--icon"
-                          src="../../../assets/svg/plus-square.svg"
-                        ></ion-icon>
-                        Add Location
+                    <app-fy-select
+                      [enableSearch]="false"
+                      [label]="'Commute Deduction'"
+                      [mandatory]="txnFields.commute_deduction?.is_mandatory"
+                      [nullOption]="false"
+                      [options]="commuteDeductionOptions"
+                      [selectModalHeader]="'Commute Deduction'"
+                      formControlName="commuteDeduction"
+                      [selectionElement]="commuteDeduction"
+                      [touchedInParent]="fg.controls.commuteDeduction.touched"
+                      [validInParent]="fg.controls.commuteDeduction.valid"
+                      [placeholder]="txnFields.commute_deduction?.placeholder || 'Select Commute Deduction'"
+                    >
+                    </app-fy-select>
+                    <ng-template
+                      #commuteDeduction
+                      let-label="label"
+                      let-value="value"
+                      let-distance="distance"
+                      let-selected="selected"
+                    >
+                      <div>
+                        <div class="add-edit-mileage--commute-deduction">{{label}}</div>
+                        <div *ngIf="distance > 0" class="add-edit-mileage--payment-mode-section">
+                          {{distance.toFixed(2) + ' ' + distanceUnit}}
+                        </div>
+                        <div *ngIf="distance === 0" class="add-edit-mileage--payment-mode-section">
+                          {{distance + ' ' + distanceUnit}}
+                        </div>
+                        <div
+                          *ngIf="distance === null"
+                          class="add-edit-mileage--add-location"
+                          (click)="openCommuteDetailsModal()"
+                        >
+                          <ion-icon
+                            class="add-edit-mileage--add-location--icon"
+                            src="../../../assets/svg/plus-square.svg"
+                          ></ion-icon>
+                          Add Location
+                        </div>
                       </div>
-                    </div>
-                    <mat-icon *ngIf="selected" class="add-edit-mileage--check"> check </mat-icon>
-                  </ng-template>
-                </div>
-                <div
-                  *ngIf="fg.controls.commuteDeduction.touched && !fg.controls.commuteDeduction.valid"
-                  class="add-edit-mileage--error"
-                >
-                  Select Commute Deduction.
-                </div>
+                      <mat-icon *ngIf="selected" class="add-edit-mileage--check"> check </mat-icon>
+                    </ng-template>
+                  </div>
+                  <div
+                    *ngIf="fg.controls.commuteDeduction.touched && !fg.controls.commuteDeduction.valid"
+                    class="add-edit-mileage--error"
+                  >
+                    Please select commute deduction.
+                  </div>
+                </ng-container>
               </ng-container>
 
               <ng-container *ngIf="mileageRatesOptions$|async as mileageRatesOptions">

diff --git a/src/app/fyle/add-edit-mileage/add-edit-mileage.page.ts b/src/app/fyle/add-edit-mileage/add-edit-mileage.page.ts
@@ -550,7 +550,15 @@ export class AddEditMileagePage implements OnInit {
         }).pipe(
           switchMap(({ expenseFieldsMap, mileageCategoriesContainer }) => {
             // skipped distance unit, location 1 and location 2 - confirm this these are not used at all
-            const fields = ['purpose', 'txn_dt', 'cost_center_id', 'project_id', 'distance', 'billable'];
+            const fields = [
+              'purpose',
+              'txn_dt',
+              'cost_center_id',
+              'project_id',
+              'distance',
+              'billable',
+              'commute_deduction',
+            ];
 
             return this.expenseFieldsService.filterByOrgCategoryId(
               expenseFieldsMap,
@@ -1020,11 +1028,12 @@ export class AddEditMileagePage implements OnInit {
             txn_dt: this.fg.controls.dateOfSpend,
             project_id: this.fg.controls.project,
             billable: this.fg.controls.billable,
+            commute_deduction: this.fg.controls.commuteDeduction,
           };
 
           for (const [key, control] of Object.entries(keyToControlMap)) {
             control.clearValidators();
-            if (key === 'project_id') {
+            if (key === 'project_id' || key === 'commute_deduction') {
               control.updateValueAndValidity({
                 emitEvent: false,
               });
@@ -1051,11 +1060,13 @@ export class AddEditMileagePage implements OnInit {
                     ? null
                     : Validators.required
                 );
+              } else if (txnFieldKey === 'commute_deduction') {
+                control.setValidators(orgSettings.commute_deduction_settings.enabled ? Validators.required : null);
               } else {
                 control.setValidators(isConnected ? Validators.required : null);
               }
             }
-            if (txnFieldKey === 'project_id') {
+            if (txnFieldKey === 'project_id' || txnFieldKey === 'commute_deduction') {
               control.updateValueAndValidity({
                 emitEvent: false,
               });
@@ -2369,7 +2380,8 @@ export class AddEditMileagePage implements OnInit {
             cost_center_name: formValue.costCenter && formValue.costCenter.name,
             cost_center_code: formValue.costCenter && formValue.costCenter.code,
             commute_deduction: this.showCommuteDeductionField ? formValue.commuteDeduction : null,
-            commute_details_id: this.showCommuteDeductionField ? this.commuteDetails?.id : null,
+            commute_details_id:
+              this.showCommuteDeductionField && formValue.commuteDeduction ? this.commuteDetails?.id : null,
           },
           dataUrls: [],
           ou: etxn.ou,

diff --git a/...shared/components/route-selector/route-selector-modal/route-selector-modal.component.html b/...shared/components/route-selector/route-selector-modal/route-selector-modal.component.html
@@ -90,8 +90,12 @@
     >
     </app-fy-alert-info>
 
-    <div class="route-selector-modal--internal-block" *ngIf="mileageLocations.controls.length < 3">
-      <mat-checkbox [disabled]="isAmountDisabled" formControlName="roundTrip">
+    <div
+      class="route-selector-modal--internal-block"
+      *ngIf="mileageLocations.controls.length < 3"
+      [ngClass]="{ 'route-selector-modal--input-disabled': !distance }"
+    >
+      <mat-checkbox [disabled]="!distance" formControlName="roundTrip">
         <span class="route-selector-modal--checkbox"> Round Trip </span>
       </mat-checkbox>
     </div>

diff --git a/src/app/shared/components/route-selector/route-selector.component.html b/src/app/shared/components/route-selector/route-selector.component.html
@@ -127,8 +127,12 @@
     </ng-template>
   </div>
 
-  <div class="route-selector--internal-block" *ngIf="mileageLocations.controls.length < 3">
-    <mat-checkbox [disabled]="isAmountDisabled || !form.controls.distance" formControlName="roundTrip">
+  <div
+    class="route-selector--internal-block"
+    *ngIf="mileageLocations.controls.length < 3"
+    [ngClass]="{ 'route-selector--input-disabled': isRoundTripEnabled }"
+  >
+    <mat-checkbox [disabled]="isRoundTripEnabled" formControlName="roundTrip">
       <span class="route-selector--checkbox"> Round Trip </span>
     </mat-checkbox>
   </div>

diff --git a/src/app/shared/components/route-selector/route-selector.component.ts b/src/app/shared/components/route-selector/route-selector.component.ts
@@ -71,6 +71,10 @@ export class RouteSelectorComponent implements OnInit, ControlValueAccessor, OnD
     return this.form.controls.mileageLocations as FormArray;
   }
 
+  get isRoundTripEnabled(): boolean {
+    return this.isAmountDisabled || !this.form.controls.distance?.value;
+  }
+
   onTouched = () => {};
 
   ngDoCheck() {
@@ -83,10 +87,10 @@ export class RouteSelectorComponent implements OnInit, ControlValueAccessor, OnD
     this.onChangeSub.unsubscribe();
   }
 
-  customDistanceValidator(control: AbstractControl) {
+  customDistanceValidator(control: AbstractControl): { invalidDistance: boolean } {
     const passedInDistance = control.value && +control.value;
     if (passedInDistance !== null) {
-      return passedInDistance > 0
+      return passedInDistance >= 0
         ? null
         : {
             invalidDistance: true,