feat: add magic mail in setting page (#4049)

* feat: add magic mail in setting page

* fix: minor

* fix: comments and flaky tests

Author: ShrastyR

src/app/core/models/info-card-data.model.ts

@@ -4,4 +4,6 @@ export interface InfoCardData {
   contentToCopy: string;
   toastMessageContent: string;
   isShown: boolean;
+  showMagicEmail?: boolean;
+  showBetaTag?: boolean;
 }

src/app/fyle/my-profile/info-card/info-card.component.html

@@ -1,12 +1,30 @@
 <div class="info-card__card" (click)="copyToClipboard(contentToCopy)">
-  <div class="info-card__card__title">{{ title }}</div>
+  <div class="info-card__card__title-container">
+    <div class="info-card__card__title">{{ title }}</div>
+    @if (showBetaTag()) {
+      <div class="info-card__card__beta-tag">{{ 'infoCard.beta' | transloco }}</div>
+    }
+  </div>
   <div class="info-card__content-container">
     <div class="info-card__content-container__content">{{ content }}</div>
-    <div class="info-card__content-container__icon-container">
-      <ion-icon
-        class="info-card__content-container__icon-container__icon"
-        src="../../../../assets/svg/duplicate.svg"
-      ></ion-icon>
-    </div>
+    @if (!showEmail()) {
+      <div class="info-card__content-container__icon-container">
+        <ion-icon
+          class="info-card__content-container__icon-container__icon"
+          src="../../../../assets/svg/duplicate.svg"
+        ></ion-icon>
+      </div>
+    }
   </div>
+  @if (contentToCopy && showEmail()) {
+    <div class="info-card__email-container">
+      <div class="info-card__email-container__email">{{ contentToCopy }}</div>
+      <div class="info-card__email-container__icon-container">
+        <ion-icon
+          class="info-card__email-container__icon-container__icon"
+          src="../../../../assets/svg/duplicate.svg"
+        ></ion-icon>
+      </div>
+    </div>
+  }
 </div>

src/app/fyle/my-profile/info-card/info-card.component.scss

@@ -2,24 +2,40 @@
 
 .info-card {
   &__card {
-    align-items: center;
-    padding: 20px 0;
+    align-items: flex-start;
+    padding: 0;
+
+    &__title-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
 
     &__title {
       font-size: 16px;
       font-weight: 500;
       color: colors.$pure-black;
     }
+
+    &__beta-tag {
+      background-color: colors.$pure-black;
+      color: colors.$pure-white;
+      font-size: 12px;
+      font-weight: 500;
+      padding: 2px 8px;
+      border-radius: 12px;
+    }
   }
 
   &__content-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding-top: 8px;
+    padding-top: 6px;
 
     &__content {
-      font-size: 12px;
+      font-size: 14px;
       color: colors.$black-light;
     }
 
@@ -33,4 +49,28 @@
       }
     }
   }
+
+  &__email-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 6px;
+
+    &__email {
+      font-size: 14px;
+      font-weight: 500;
+      color: colors.$gray-25;
+    }
+
+    &__icon-container {
+      padding-left: 8px;
+      flex-shrink: 0;
+
+      &__icon {
+        height: 24px;
+        width: 24px;
+        color: colors.$brand-primary;
+      }
+    }
+  }
 }

src/app/fyle/my-profile/info-card/info-card.component.ts

@@ -1,15 +1,13 @@
-import { Component, Input, inject, output } from '@angular/core';
+import { Component, Input, inject, input, output } from '@angular/core';
 import { ClipboardService } from 'src/app/core/services/clipboard.service';
 import { IonIcon } from '@ionic/angular/standalone';
-
+import { TranslocoPipe } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-info-card',
   templateUrl: './info-card.component.html',
   styleUrls: ['./info-card.component.scss'],
-  imports: [
-    IonIcon
-  ],
+  imports: [IonIcon, TranslocoPipe],
 })
 export class InfoCardComponent {
   private clipboardService = inject(ClipboardService);
@@ -30,6 +28,10 @@ export class InfoCardComponent {
   //  Your application code writes to the input. This prevents migration.
   @Input() toastMessageContent: string;
 
+  readonly showEmail = input<boolean>(false);
+
+  readonly showBetaTag = input<boolean>(false);
+
   readonly copiedText = output<string>();
 
   async copyToClipboard(contentToCopy: string) {

src/app/fyle/my-profile/my-profile.page.html

@@ -70,6 +70,8 @@
                         [content]="infoCardData.content"
                         [contentToCopy]="infoCardData.contentToCopy"
                         [toastMessageContent]="infoCardData.toastMessageContent"
+                        [showEmail]="infoCardData.showMagicEmail"
+                        [showBetaTag]="infoCardData.showBetaTag"
                         (copiedText)="showToastMessage($event, 'success')"
                       ></app-info-card>
                     </div>

src/app/fyle/my-profile/my-profile.page.scss

@@ -141,17 +141,14 @@
   }
 
   &__info-card-container {
-    background-color: colors.$pure-white;
-    border-radius: 8px;
     margin-bottom: 24px;
 
     &__card {
-      margin: 0 16px;
-      border-bottom: 1px solid colors.$grey;
-
-      &--last {
-        border-bottom: none;
-      }
+      background-color: colors.$pure-white;
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 24px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     }
   }
 

src/app/fyle/my-profile/my-profile.page.spec.ts

@@ -1,5 +1,5 @@
 import { CUSTOM_ELEMENTS_SCHEMA, EventEmitter } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick, flush, waitForAsync } from '@angular/core/testing';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -43,6 +43,8 @@ import { WalkthroughService } from 'src/app/core/services/walkthrough.service';
 import { FeatureConfig } from 'src/app/core/models/feature-config.model';
 import { Component } from '@angular/core';
 import { EmployeeDetailsCardComponent } from './employee-details-card/employee-details-card.component';
+import { TranslocoService } from '@jsverse/transloco';
+import { TranslocoModule } from '@jsverse/transloco';
 
 // mock EmployeeDetailsCardComponent
 @Component({
@@ -123,9 +125,11 @@ describe('MyProfilePage', () => {
       'getIsOverlayClicked',
       'getProfileEmailOptInWalkthroughConfig',
     ]);
+    const translocoServiceSpy = jasmine.createSpyObj('TranslocoService', ['translate']);
+    translocoServiceSpy.translate.and.returnValue('');
 
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule, MyProfilePage],
+      imports: [RouterTestingModule, MyProfilePage, TranslocoModule],
       providers: [
         {
           provide: ActivatedRoute,
@@ -229,6 +233,10 @@ describe('MyProfilePage', () => {
           provide: WalkthroughService,
           useValue: walkthroughServiceSpy,
         },
+        {
+          provide: TranslocoService,
+          useValue: translocoServiceSpy,
+        },
         SpenderService,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
@@ -393,10 +401,7 @@ describe('MyProfilePage', () => {
         ...successToastProperties,
         panelClass: 'msb-success',
       });
-      expect(snackbarProperties.setSnackbarProperties).toHaveBeenCalledOnceWith(
-        'success',
-        { message }
-      );
+      expect(snackbarProperties.setSnackbarProperties).toHaveBeenCalledOnceWith('success', { message });
       expect(trackingService.showToastMessage).toHaveBeenCalledOnceWith({
         ToastContent: message,
       });
@@ -458,7 +463,7 @@ describe('MyProfilePage', () => {
     expect(platformEmployeeSettingsService.get).toHaveBeenCalledTimes(1);
     expect(orgService.getCurrentOrg).toHaveBeenCalledTimes(1);
     expect(orgSettingsService.get).toHaveBeenCalledTimes(1);
-    expect(component.setInfoCardsData).toHaveBeenCalledTimes(1);
+    expect(component.setInfoCardsData).toHaveBeenCalledTimes(2);
     expect(component.setPreferenceSettings).toHaveBeenCalledTimes(1);
     expect(component.setCCCFlags).toHaveBeenCalledTimes(1);
 
@@ -742,7 +747,10 @@ describe('MyProfilePage', () => {
 
   it('setInfoCardsData(): should show only email card for non USD orgs', () => {
     component.setInfoCardsData();
-    expect(component.infoCardsData).toEqual(allInfoCardsData);
+    expect(component.infoCardsData.length).toBe(1);
+    expect(component.infoCardsData[0].contentToCopy).toBe('[email protected]');
+    expect(component.infoCardsData[0].showMagicEmail).toBeTrue();
+    expect(component.infoCardsData[0].isShown).toBeTrue();
   });
 
   describe('toggleSetting():', () => {
@@ -1042,7 +1050,8 @@ describe('MyProfilePage', () => {
       employeesService.getCommuteDetails.and.returnValue(of(commuteDetailsResponseData));
 
       component.setCommuteDetails();
-      tick(100);
+      tick();
+      flush();
 
       expect(authService.getEou).toHaveBeenCalledTimes(1);
       expect(employeesService.getCommuteDetails).toHaveBeenCalledOnceWith(apiEouRes);
@@ -1068,7 +1077,8 @@ describe('MyProfilePage', () => {
       employeesService.getCommuteDetails.and.returnValue(of(commuteDetailsWithMiles));
 
       component.setCommuteDetails();
-      tick(100);
+      tick();
+      flush();
 
       expect(authService.getEou).toHaveBeenCalledTimes(1);
       expect(employeesService.getCommuteDetails).toHaveBeenCalledOnceWith(apiEouRes);

src/app/fyle/my-profile/my-profile.page.ts

@@ -1,9 +1,19 @@
 import { Component, EventEmitter, inject } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
-import { IonButtons, IonContent, IonHeader, IonIcon, IonSkeletonText, IonTitle, IonToolbar, ModalController, PopoverController } from '@ionic/angular/standalone';
+import {
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonSkeletonText,
+  IonTitle,
+  IonToolbar,
+  ModalController,
+  PopoverController,
+} from '@ionic/angular/standalone';
 import { Observable, Subscription, concat, forkJoin, from, noop, finalize } from 'rxjs';
-import { map, shareReplay, switchMap } from 'rxjs/operators';
+import { map, shareReplay, switchMap, take } from 'rxjs/operators';
 import { ExtendedOrgUser } from 'src/app/core/models/extended-org-user.model';
 import { InfoCardData } from 'src/app/core/models/info-card-data.model';
 import { Org } from 'src/app/core/models/org.model';
@@ -57,6 +67,7 @@ import { MatRipple } from '@angular/material/core';
 import { NgClass, AsyncPipe } from '@angular/common';
 import { InfoCardComponent } from './info-card/info-card.component';
 import { PreferenceSettingComponent } from './preference-setting/preference-setting.component';
+import { TranslocoService } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-my-profile',
@@ -79,7 +90,7 @@ import { PreferenceSettingComponent } from './preference-setting/preference-sett
     NgClass,
     PreferenceSettingComponent,
     ProfileOptInCardComponent,
-    RouterLink
+    RouterLink,
   ],
 })
 export class MyProfilePage {
@@ -137,6 +148,8 @@ export class MyProfilePage {
 
   private featureConfigService = inject(FeatureConfigService);
 
+  private translocoService = inject(TranslocoService);
+
   employeeSettings: EmployeeSettings;
 
   orgSettings: OrgSettings;
@@ -160,7 +173,7 @@ export class MyProfilePage {
 
   preferenceSettings: PreferenceSetting[] = [];
 
-  infoCardsData: CopyCardDetails[];
+  infoCardsData: InfoCardData[];
 
   commuteDetails: CommuteDetails;
 
@@ -375,8 +388,14 @@ export class MyProfilePage {
     this.org$ = this.orgService.getCurrentOrg();
     const orgSettings$ = this.orgSettingsService.get();
 
+    // Set info cards initially (without eou for email receipts card)
     this.setInfoCardsData();
 
+    // Subscribe to eou$ to update info cards when eou is available (for Magic mail card)
+    this.eou$.pipe(take(1)).subscribe((eou) => {
+      this.setInfoCardsData(eou);
+    });
+
     forkJoin({
       employeeSettings: employeeSettings$,
       orgSettings: orgSettings$,
@@ -456,18 +475,31 @@ export class MyProfilePage {
     this.preferenceSettings = allPreferenceSettings.filter((setting) => setting.isAllowed);
   }
 
-  setInfoCardsData(): void {
+  setInfoCardsData(eou?: ExtendedOrgUser): void {
     const fyleEmail = '[email protected]';
 
-    const allInfoCardsData: InfoCardData[] = [
-      {
-        title: 'Email receipts',
-        content: `Forward your receipts to Sage Expense Management at ${fyleEmail}.`,
-        contentToCopy: fyleEmail,
-        toastMessageContent: 'Email copied successfully',
+    const allInfoCardsData: InfoCardData[] = [];
+
+    if (eou?.ou?.special_email) {
+      allInfoCardsData.push({
+        title: this.translocoService.translate<string>('myProfile.magicMail.title'),
+        content: this.translocoService.translate<string>('myProfile.magicMail.content'),
+        contentToCopy: eou.ou.special_email,
+        toastMessageContent: this.translocoService.translate<string>('myProfile.emailCopiedSuccessfully'),
         isShown: true,
-      },
-    ];
+        showMagicEmail: true,
+        showBetaTag: true,
+      });
+    }
+
+    allInfoCardsData.push({
+      title: this.translocoService.translate<string>('myProfile.emailReceipts.title'),
+      content: this.translocoService.translate<string>('myProfile.emailReceipts.content'),
+      contentToCopy: fyleEmail,
+      toastMessageContent: this.translocoService.translate<string>('myProfile.emailCopiedSuccessfully'),
+      isShown: true,
+      showMagicEmail: true,
+    });
 
     this.infoCardsData = allInfoCardsData.filter((infoCardData) => infoCardData.isShown);
   }