fix: QA fixes for commute deduction (#2835)

* fix: header fix for commute details * minor * QA fixes * minor * tests added * minor correction in modal opening logic
fylein · Mar 18, 2024 · 4bac1dd · 4bac1dd
1 parent e250ae4
commit 4bac1dd
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 63 deletions.
diff --git a/src/app/fyle/add-edit-mileage/add-edit-mileage-5.spec.ts b/src/app/fyle/add-edit-mileage/add-edit-mileage-5.spec.ts
@@ -739,7 +739,7 @@ export function TestCases5(getTestBed) {
         expect(component.fg.get('commuteDeduction').value).toEqual(CommuteDeduction.ONE_WAY);
       }));
 
-      it('should call updateDistanceOnDeductionChange method if commuteDeduction form control value changes', fakeAsync(() => {
+      it('should call updateDistanceOnDeductionChange method if commuteDeduction form control value changes and commuteDetails is defined', fakeAsync(() => {
         component.mode = 'edit';
         activatedRoute.snapshot.params.navigate_back = true;
         activatedRoute.snapshot.params.activeIndex = 0;
@@ -760,7 +760,9 @@ export function TestCases5(getTestBed) {
         orgSettingsService.get.and.returnValue(of(mockOrgSettings));
         employeesService.getCommuteDetails.and.returnValue(of(commuteDetailsResponseData));
         mileageService.getCommuteDeductionOptions.and.returnValue(commuteDeductionOptionsData1);
+        mileageService.isCommuteDeductionEnabled.and.returnValue(true);
         spyOn(component, 'updateDistanceOnDeductionChange');
+        spyOn(component, 'openCommuteDetailsModal');
         fixture.detectChanges();
 
         component.ionViewWillEnter();
@@ -769,8 +771,49 @@ export function TestCases5(getTestBed) {
 
         setupMatchers();
 
+        component.commuteDetails.id = 12345;
         component.fg.get('commuteDeduction').setValue(CommuteDeduction.ROUND_TRIP);
+
         expect(component.updateDistanceOnDeductionChange).toHaveBeenCalledTimes(1);
+        expect(component.openCommuteDetailsModal).not.toHaveBeenCalled();
+      }));
+
+      it('should call openCommuteDetailsModal method if commuteDeduction form control value changes and commuteDetails is not defined', fakeAsync(() => {
+        component.mode = 'edit';
+        activatedRoute.snapshot.params.navigate_back = true;
+        activatedRoute.snapshot.params.activeIndex = 0;
+        activatedRoute.snapshot.params.txnIds = JSON.stringify(['tx3qwe4ty', 'tx6sd7gh', 'txD3cvb6']);
+        activatedRoute.snapshot.params.id = 'tx3qwe4ty';
+        spyOn(component, 'getRecentlyUsedValues').and.returnValue(of(null));
+        statusService.find.and.returnValue(of(getEstatusApiResponse));
+        mileageRatesService.getAllMileageRates.and.returnValue(of([]));
+        mileageService.getOrgUserMileageSettings.and.returnValue(of(null));
+        mileageRatesService.filterEnabledMileageRates.and.returnValue([]);
+        const mockEtxn = cloneDeep(unflattenedTxnData);
+        mockEtxn.tx.commute_deduction = CommuteDeduction.ONE_WAY;
+        spyOn(component, 'getEditExpense').and.returnValue(of(mockEtxn));
+        accountsService.getEtxnSelectedPaymentMode.and.returnValue(null);
+        mileageService.isCommuteDeductionEnabled.and.returnValue(true);
+        const mockOrgSettings = cloneDeep(orgSettingsRes);
+        mockOrgSettings.commute_deduction_settings = { allowed: true, enabled: true };
+        orgSettingsService.get.and.returnValue(of(mockOrgSettings));
+        employeesService.getCommuteDetails.and.returnValue(of(commuteDetailsResponseData));
+        mileageService.getCommuteDeductionOptions.and.returnValue(commuteDeductionOptionsData1);
+        spyOn(component, 'updateDistanceOnDeductionChange');
+        spyOn(component, 'openCommuteDetailsModal');
+        fixture.detectChanges();
+
+        component.ionViewWillEnter();
+        tick(1000);
+        fixture.detectChanges();
+
+        setupMatchers();
+
+        component.commuteDetails = null;
+        component.fg.get('commuteDeduction').setValue(CommuteDeduction.ROUND_TRIP);
+
+        expect(component.updateDistanceOnDeductionChange).not.toHaveBeenCalled();
+        expect(component.openCommuteDetailsModal).toHaveBeenCalledTimes(1);
       }));
     });
 
@@ -940,6 +983,27 @@ export function TestCases5(getTestBed) {
 
         expect(component.commuteDetails).toBeNull();
       }));
+
+      it('should set commuteDetails and change commute deduction form value to null if user does not save commute details from mileage page', fakeAsync(() => {
+        const commuteDetailsModalSpy = jasmine.createSpyObj('commuteDetailsModal', ['present', 'onWillDismiss']);
+        commuteDetailsModalSpy.onWillDismiss.and.resolveTo({ data: { action: 'cancel' } });
+        modalController.create.and.resolveTo(commuteDetailsModalSpy);
+
+        component.openCommuteDetailsModal();
+        tick(100);
+
+        expect(modalController.create).toHaveBeenCalledOnceWith({
+          component: FySelectCommuteDetailsComponent,
+          mode: 'ios',
+        });
+        expect(commuteDetailsModalSpy.present).toHaveBeenCalledTimes(1);
+        expect(commuteDetailsModalSpy.onWillDismiss).toHaveBeenCalledTimes(1);
+        expect(authService.getEou).not.toHaveBeenCalled();
+        expect(employeesService.getCommuteDetails).not.toHaveBeenCalled();
+        expect(mileageService.getCommuteDeductionOptions).not.toHaveBeenCalled();
+        expect(component.showCommuteUpdatedPopover).not.toHaveBeenCalled();
+        expect(component.fg.get('commuteDeduction').value).toBeNull();
+      }));
     });
   });
 }
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
@@ -144,72 +144,68 @@
                           [touchedInParent]="fg.controls.route.touched"
                           [validInParent]="fg.controls.route.valid"
                           (distanceChange)="updateDistanceOnLocationChange()"
-                        ></app-route-selector>
+                        >
+                          <ng-container *ngIf="showCommuteDeductionField">
+                            <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}"
+                              >
+                                <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">
+                                      <ion-icon
+                                        class="add-edit-mileage--add-location--icon"
+                                        src="../../../assets/svg/plus-square.svg"
+                                      ></ion-icon>
+                                      Add Location
+                                    </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"
+                              >
+                                Please select commute deduction.
+                              </div>
+                            </ng-container>
+                          </ng-container>
+                        </app-route-selector>
                       </ng-container>
                     </ng-container>
                   </ng-container>
                 </ng-container>
               </ng-container>
 
-              <ng-container *ngIf="showCommuteDeductionField">
-                <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}"
-                  >
-                    <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>
-                      <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">
                 <div
                   *ngIf="mileageRatesOptions.length > 1"

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
@@ -1693,7 +1693,13 @@ export class AddEditMileagePage implements OnInit {
     );
 
     this.fg.controls.commuteDeduction.valueChanges.subscribe((commuteDeductionType: string) => {
-      this.updateDistanceOnDeductionChange(commuteDeductionType);
+      if (this.commuteDetails?.id) {
+        this.updateDistanceOnDeductionChange(commuteDeductionType);
+      } else {
+        if (!(commuteDeductionType === 'NO_DEDUCTION')) {
+          this.openCommuteDetailsModal();
+        }
+      }
     });
 
     this.fg.controls.route.valueChanges.pipe(distinctUntilKeyChanged('roundTrip')).subscribe(() => {
@@ -2998,6 +3004,9 @@ export class AddEditMileagePage implements OnInit {
           this.fg.patchValue({ commuteDeduction: 'NO_DEDUCTION' });
           this.showCommuteUpdatedPopover();
         });
+    } else {
+      // If user closes the modal without saving the commute details, reset the commute deduction field to null
+      this.fg.patchValue({ commuteDeduction: null }, { emitEvent: false });
     }
   }
 }
diff --git a/src/app/shared/components/fy-select-commute-details/fy-select-commute-details.component.html b/src/app/shared/components/fy-select-commute-details/fy-select-commute-details.component.html
@@ -1,5 +1,5 @@
 <ion-header mode="md">
-  <ion-toolbar class="text-center fy-modal-toolbar">
+  <ion-toolbar class="text-center commute-details--toolbar fy-modal-toolbar">
     <ion-buttons slot="start">
       <ion-button (click)="close()">
         <mat-icon class="fy-icon-close" svgIcon="cross"></mat-icon>

diff --git a/src/app/shared/components/fy-select-commute-details/fy-select-commute-details.component.scss b/src/app/shared/components/fy-select-commute-details/fy-select-commute-details.component.scss
@@ -1,6 +1,10 @@
 @import '../../../../theme/colors.scss';
 
 .commute-details {
+  &--toolbar {
+    margin-top: calc(env(safe-area-inset-top));
+  }
+
   &--header {
     &-save {
       --color: $brand-primary;

diff --git a/src/app/shared/components/route-selector/route-selector.component.html b/src/app/shared/components/route-selector/route-selector.component.html
@@ -137,6 +137,8 @@
     </mat-checkbox>
   </div>
 
+  <ng-content></ng-content>
+
   <ng-container *ngIf="txnFields?.distance">
     <div
       class="route-selector--text route-selector--internal-distance-block"