feat: refractoring in my-profile page (#2800)

* feat: refractoring in my-profile page * minor * feat: tasks added for showing Add Commute Details (#2801) * feat: tasks added for showing Add Commute Details * minor * minor * pr comment
fylein · Mar 6, 2024 · 2cbaf71 · 2cbaf71
1 parent f7900d0
commit 2cbaf71
Show file tree

Hide file tree

Showing 10 changed files with 183 additions and 39 deletions.
diff --git a/src/app/core/mock-data/commute-details-response.data.ts b/src/app/core/mock-data/commute-details-response.data.ts
@@ -0,0 +1,34 @@
+import { CommuteDetailsResponse } from '../models/platform/commute-details-response.model';
+import { PlatformApiResponse } from '../models/platform/platform-api-response.model';
+
+export const commuteDetailsResponseData: PlatformApiResponse<CommuteDetailsResponse> = {
+  count: 1,
+  offset: 0,
+  data: [
+    {
+      user_id: 'uswr93Wqcfjv',
+      full_name: 'John Doe',
+      email: 'ajain@fyle.in',
+      commute_details: {
+        distance: 10,
+        distance_unit: 'KM',
+        home_location: {
+          formatted_address: 'Home',
+          latitude: 12.9715987,
+          longitude: 77.5945667,
+          country: 'India',
+          state: 'Karnataka',
+          city: 'Bangalore',
+        },
+        work_location: {
+          formatted_address: 'Work',
+          latitude: 12.9715987,
+          longitude: 77.5945667,
+          country: 'India',
+          state: 'Karnataka',
+          city: 'Bangalore',
+        },
+      },
+    },
+  ],
+};
diff --git a/src/app/core/models/task-event.enum.ts b/src/app/core/models/task-event.enum.ts
@@ -8,4 +8,5 @@ export enum TASKEVENT {
   openPotentialDuplicates = 6,
   openSentBackAdvance = 7,
   mobileNumberVerification = 8,
+  commuteDetails = 9,
 }
diff --git a/src/app/core/models/task-icon.enum.ts b/src/app/core/models/task-icon.enum.ts
@@ -3,4 +3,5 @@ export enum TaskIcon {
   WARNING = 'warning-outline',
   ADVANCE = 'wallet',
   MOBILE = 'phone',
+  LOCATION = 'location',
 }
diff --git a/src/app/core/services/platform/v1/spender/employees.service.ts b/src/app/core/services/platform/v1/spender/employees.service.ts
@@ -3,13 +3,23 @@ import { SpenderService } from './spender.service';
 import { Observable } from 'rxjs';
 import { CommuteDetails } from 'src/app/core/models/platform/v1/commute-details.model';
 import { CommuteDetailsResponse } from 'src/app/core/models/platform/commute-details-response.model';
+import { PlatformApiResponse } from 'src/app/core/models/platform/platform-api-response.model';
+import { ExtendedOrgUser } from 'src/app/core/models/extended-org-user.model';
 
 @Injectable({
   providedIn: 'root',
 })
 export class EmployeesService {
   constructor(private spenderService: SpenderService) {}
 
+  getCommuteDetails(eou: ExtendedOrgUser): Observable<PlatformApiResponse<CommuteDetailsResponse>> {
+    return this.spenderService.get('/employees', {
+      params: {
+        user_id: `eq.${eou.us.id}`,
+      },
+    });
+  }
+
   postCommuteDetails(commuteDetails: CommuteDetails): Observable<{ data: CommuteDetailsResponse }> {
     return this.spenderService.post('/employees/commute_details', {
       data: {

diff --git a/src/app/core/services/tasks.service.spec.ts b/src/app/core/services/tasks.service.spec.ts
@@ -42,6 +42,9 @@ import { OrgSettingsService } from './org-settings.service';
 import { ExpensesService } from './platform/v1/spender/expenses.service';
 import { expenseDuplicateSets } from '../mock-data/platform/v1/expense-duplicate-sets.data';
 import { completeStats, incompleteStats } from '../mock-data/platform/v1/expenses-stats.data';
+import { EmployeesService } from './platform/v1/spender/employees.service';
+import { orgSettingsRes } from '../mock-data/org-settings.data';
+import { commuteDetailsResponseData } from '../mock-data/commute-details-response.data';
 
 describe('TasksService', () => {
   let tasksService: TasksService;
@@ -55,6 +58,7 @@ describe('TasksService', () => {
   let humanizeCurrencyPipe: jasmine.SpyObj<HumanizeCurrencyPipe>;
   let orgSettingsService: jasmine.SpyObj<OrgSettingsService>;
   let expensesService: jasmine.SpyObj<ExpensesService>;
+  let employeesService: jasmine.SpyObj<EmployeesService>;
 
   const mockTaskClearSubject = new Subject();
   const homeCurrency = 'INR';
@@ -76,6 +80,7 @@ describe('TasksService', () => {
     const currencyServiceSpy = jasmine.createSpyObj('CurrencyService', ['getHomeCurrency']);
     const humanizeCurrencyPipeSpy = jasmine.createSpyObj('HumanizeCurrencyPipe', ['transform']);
     const orgSettingsServiceSpy = jasmine.createSpyObj('OrgSettingsService', ['get']);
+    const employeesServiceSpy = jasmine.createSpyObj('EmployeesService', ['getCommuteDetails']);
 
     TestBed.configureTestingModule({
       providers: [
@@ -120,6 +125,10 @@ describe('TasksService', () => {
           provide: ExpensesService,
           useValue: expensesServiceSpy,
         },
+        {
+          provide: EmployeesService,
+          useValue: employeesServiceSpy,
+        },
       ],
     });
     tasksService = TestBed.inject(TasksService);
@@ -136,6 +145,7 @@ describe('TasksService', () => {
     humanizeCurrencyPipe = TestBed.inject(HumanizeCurrencyPipe) as jasmine.SpyObj<HumanizeCurrencyPipe>;
     orgSettingsService = TestBed.inject(OrgSettingsService) as jasmine.SpyObj<OrgSettingsService>;
     expensesService = TestBed.inject(ExpensesService) as jasmine.SpyObj<ExpensesService>;
+    employeesService = TestBed.inject(EmployeesService) as jasmine.SpyObj<EmployeesService>;
   });
 
   it('should be created', () => {
@@ -700,6 +710,8 @@ describe('TasksService', () => {
       .and.returnValue(of(incompleteStats));
 
     corporateCreditCardExpenseService.getCorporateCards.and.returnValue(of([mastercardRTFCard]));
+    orgSettingsService.get.and.returnValue(of(orgSettingsRes));
+    employeesService.getCommuteDetails.and.returnValue(of(commuteDetailsResponseData));
   }
 
   it('should be able to fetch tasks with no filters', (done) => {

diff --git a/src/app/core/services/tasks.service.ts b/src/app/core/services/tasks.service.ts
@@ -17,6 +17,8 @@ import { TaskDictionary } from '../models/task-dictionary.model';
 import { CorporateCreditCardExpenseService } from './corporate-credit-card-expense.service';
 import { Datum } from '../models/v2/stats-response.model';
 import { ExpensesService } from './platform/v1/spender/expenses.service';
+import { OrgSettingsService } from './org-settings.service';
+import { EmployeesService } from './platform/v1/spender/employees.service';
 
 @Injectable({
   providedIn: 'root',
@@ -40,7 +42,9 @@ export class TasksService {
     private advancesRequestService: AdvanceRequestService,
     private currencyService: CurrencyService,
     private corporateCreditCardExpenseService: CorporateCreditCardExpenseService,
-    private expensesService: ExpensesService
+    private expensesService: ExpensesService,
+    private orgSettingsService: OrgSettingsService,
+    private employeesService: EmployeesService
   ) {
     this.refreshOnTaskClear();
   }
@@ -294,6 +298,7 @@ export class TasksService {
       draftExpenses: this.getDraftExpensesTasks(),
       teamReports: this.getTeamReportsTasks(),
       sentBackAdvances: this.getSentBackAdvanceTasks(),
+      setCommuteDetails: this.getCommuteDetailsTasks(),
     }).pipe(
       map(
         ({
@@ -305,6 +310,7 @@ export class TasksService {
           draftExpenses,
           teamReports,
           sentBackAdvances,
+          setCommuteDetails,
         }) => {
           this.totalTaskCount$.next(
             mobileNumberVerification.length +
@@ -314,7 +320,8 @@ export class TasksService {
               unreportedExpenses.length +
               teamReports.length +
               potentialDuplicates.length +
-              sentBackAdvances.length
+              sentBackAdvances.length +
+              setCommuteDetails.length
           );
           this.expensesTaskCount$.next(draftExpenses.length + unreportedExpenses.length + potentialDuplicates.length);
           this.reportsTaskCount$.next(sentBackReports.length + unsubmittedReports.length);
@@ -331,6 +338,7 @@ export class TasksService {
             !filters?.sentBackAdvances
           ) {
             return mobileNumberVerification
+              .concat(setCommuteDetails)
               .concat(potentialDuplicates)
               .concat(sentBackReports)
               .concat(draftExpenses)
@@ -827,4 +835,52 @@ export class TasksService {
   mapScalarAdvanceStatsResponse(statsResponse: Datum[]): { totalCount: number; totalAmount: number } {
     return this.getStatsFromResponse(statsResponse, 'count(areq_id)', 'sum(areq_amount)');
   }
+
+  getCommuteDetailsTasks(): Observable<DashboardTask[]> {
+    const isCommuteDeductionEnabled$ = this.orgSettingsService
+      .get()
+      .pipe(
+        map(
+          (orgSettings) =>
+            orgSettings.mileage?.allowed &&
+            orgSettings.mileage.enabled &&
+            orgSettings.commute_deduction_settings?.allowed &&
+            orgSettings.commute_deduction_settings.enabled
+        )
+      );
+
+    const commuteDetails$ = from(this.authService.getEou()).pipe(
+      switchMap((eou) => this.employeesService.getCommuteDetails(eou))
+    );
+
+    return forkJoin({
+      isCommuteDeductionEnabled: isCommuteDeductionEnabled$,
+      commuteDetails: commuteDetails$,
+    }).pipe(
+      switchMap(({ isCommuteDeductionEnabled, commuteDetails }) => {
+        if (isCommuteDeductionEnabled && !commuteDetails.data[0]?.commute_details?.home_location) {
+          return of(this.getCommuteDetailsTask());
+        }
+        return of<DashboardTask[]>([]);
+      })
+    );
+  }
+
+  getCommuteDetailsTask(): DashboardTask[] {
+    const task = [
+      {
+        hideAmount: true,
+        header: 'Add Commute Details',
+        subheader: 'Add your Home and Work locations to easily deduct commute distance from your mileage expenses',
+        icon: TaskIcon.LOCATION,
+        ctas: [
+          {
+            content: 'Add',
+            event: TASKEVENT.commuteDetails,
+          },
+        ],
+      },
+    ];
+    return task;
+  }
 }
diff --git a/src/app/fyle/dashboard/tasks/tasks.component.ts b/src/app/fyle/dashboard/tasks/tasks.component.ts
@@ -27,6 +27,8 @@ import { FilterPill } from 'src/app/shared/components/fy-filter-pills/filter-pil
 import { SelectedFilters } from 'src/app/shared/components/fy-filters/selected-filters.interface';
 import { ExpensesService } from 'src/app/core/services/platform/v1/spender/expenses.service';
 import { ExpensesQueryParams } from 'src/app/core/models/platform/v1/expenses-query-params.model';
+import { FySelectCommuteDetailsComponent } from 'src/app/shared/components/fy-select-commute-details/fy-select-commute-details.component';
+import { OverlayResponse } from 'src/app/core/models/overlay-response.modal';
 
 @Component({
   selector: 'app-tasks',
@@ -371,6 +373,9 @@ export class TasksComponent implements OnInit {
       case TASKEVENT.mobileNumberVerification:
         this.onMobileNumberVerificationTaskClick(taskCta);
         break;
+      case TASKEVENT.commuteDetails:
+        this.onCommuteDetailsTaskClick();
+        break;
       default:
         break;
     }
@@ -645,4 +650,30 @@ export class TasksComponent implements OnInit {
       isSeparateCard,
     });
   }
+
+  showToastMessage(message: string, type: 'success' | 'failure'): void {
+    const panelClass = type === 'success' ? 'msb-success' : 'msb-failure';
+    this.matSnackBar.openFromComponent(ToastMessageComponent, {
+      ...this.snackbarProperties.setSnackbarProperties(type, { message }),
+      panelClass,
+    });
+    this.trackingService.showToastMessage({ ToastContent: message });
+  }
+
+  async onCommuteDetailsTaskClick(): Promise<void> {
+    const commuteDetailsModal = await this.modalController.create({
+      component: FySelectCommuteDetailsComponent,
+      mode: 'ios',
+    });
+
+    await commuteDetailsModal.present();
+
+    const { data } = (await commuteDetailsModal.onWillDismiss()) as OverlayResponse<{ action: string }>;
+
+    // Show toast message and refresh the page once commute details are saved
+    if (data.action === 'save') {
+      this.showToastMessage('Commute details saved successfully', 'success');
+      this.doRefresh();
+    }
+  }
 }
diff --git a/src/app/fyle/my-profile/my-profile.page.html b/src/app/fyle/my-profile/my-profile.page.html
@@ -38,15 +38,20 @@
 
       <ng-container *ngIf="isMileageEnabled && isCommuteDeductionEnabled">
         <div class="my-profile__section-header">Commute Details</div>
-        <div *ngIf="!isCommuteDetailsPresent" class="my-profile__card" (click)="openCommuteDetailsModal()" matRipple>
+        <div
+          *ngIf="!commuteDetails?.home_location"
+          class="my-profile__card"
+          (click)="openCommuteDetailsModal()"
+          matRipple
+        >
           <div class="my-profile__card__title">Add Location</div>
           <ion-icon
             class="my-profile__navigate-icon"
             src="../../../assets/svg/arrow-right.svg"
             slot="icon-only"
           ></ion-icon>
         </div>
-        <div *ngIf="commuteDetails" class="my-profile__card">
+        <div *ngIf="commuteDetails?.home_location" class="my-profile__card">
           <div class="my-profile__card__content-container">
             <div class="my-profile__card__location-detail-card">
               <div class="my-profile__card__location-icon-container">

diff --git a/src/app/fyle/my-profile/my-profile.page.ts b/src/app/fyle/my-profile/my-profile.page.ts
@@ -33,12 +33,11 @@ import { EventData } from 'src/app/core/models/event-data.model';
 import { PreferenceSetting } from 'src/app/core/models/preference-setting.model';
 import { CopyCardDetails } from 'src/app/core/models/copy-card-details.model';
 import { SpenderService } from 'src/app/core/services/platform/v1/spender/spender.service';
-import { PlatformApiResponse } from 'src/app/core/models/platform/platform-api-response.model';
 import { CommuteDetails } from 'src/app/core/models/platform/v1/commute-details.model';
-import { CommuteDetailsResponse } from 'src/app/core/models/platform/commute-details-response.model';
 import { FySelectCommuteDetailsComponent } from 'src/app/shared/components/fy-select-commute-details/fy-select-commute-details.component';
 import { ModalPropertiesService } from 'src/app/core/services/modal-properties.service';
 import { ToastType } from 'src/app/core/enums/toast-type.enum';
+import { EmployeesService } from 'src/app/core/services/platform/v1/spender/employees.service';
 
 @Component({
   selector: 'app-my-profile',
@@ -84,8 +83,6 @@ export class MyProfilePage {
 
   isMastercardRTFEnabled: boolean;
 
-  isCommuteDetailsPresent: boolean;
-
   isMileageEnabled: boolean;
 
   isCommuteDeductionEnabled: boolean;
@@ -109,7 +106,8 @@ export class MyProfilePage {
     private spenderService: SpenderService,
     private activatedRoute: ActivatedRoute,
     private modalController: ModalController,
-    private modalProperties: ModalPropertiesService
+    private modalProperties: ModalPropertiesService,
+    private employeesService: EmployeesService
   ) {}
 
   setupNetworkWatcher(): void {
@@ -225,22 +223,12 @@ export class MyProfilePage {
   }
 
   setCommuteDetails(): void {
-    this.eou$.subscribe((eou) => {
-      const queryParams = {
-        params: {
-          user_id: `eq.${eou.us.id}`,
-        },
-      };
-      return this.spenderService
-        .get<PlatformApiResponse<CommuteDetailsResponse>>('/employees', queryParams)
-        .subscribe((res) => {
-          this.isCommuteDetailsPresent = !!res.data?.[0]?.commute_details?.home_location;
-          if (this.isCommuteDetailsPresent) {
-            this.commuteDetails = res.data[0].commute_details;
-            this.mileageDistanceUnit = this.commuteDetails.distance_unit === 'MILES' ? 'Miles' : 'KM';
-          }
-        });
-    });
+    from(this.authService.getEou())
+      .pipe(switchMap((eou) => this.employeesService.getCommuteDetails(eou)))
+      .subscribe((res) => {
+        this.commuteDetails = res.data[0].commute_details;
+        this.mileageDistanceUnit = this.commuteDetails.distance_unit === 'MILES' ? 'Miles' : 'KM';
+      });
   }
 
   setCCCFlags(): void {
@@ -433,7 +421,6 @@ export class MyProfilePage {
     const commuteDetailsModal = await this.modalController.create({
       component: FySelectCommuteDetailsComponent,
       componentProps: {
-        distanceUnit: this.mileageDistanceUnit,
         existingCommuteDetails: this.commuteDetails,
       },
       mode: 'ios',