feat: CXSPA-4442 New components for email and personal info

feature-libs/user/_index.scss

@@ -6,7 +6,8 @@
 
 $skipComponentStyles: () !default;
 $selectors: cx-login, cx-login-form, cx-register, cx-reset-password,
-  cx-close-account, cx-close-account-modal !default;
+  cx-close-account, cx-close-account-modal, cx-my-new-account-v2-profile,
+  cx-my-new-account-v2-email, cx-my-account-v2-combined-profile-email !default;
 
 @each $selector in $selectors {
   #{$selector} {

feature-libs/user/profile/assets/translations/en/index.ts

@@ -5,7 +5,11 @@
  */
 
 import { userProfile } from './user-profile';
+import { myAccountV2UserProfile } from './my-account-v2-user-profile.18n';
+import { myAccountV2Email } from './my-account-v2-email.18n';
 
 export const en = {
   userProfile,
+  myAccountV2UserProfile,
+  myAccountV2Email,
 };

feature-libs/user/profile/assets/translations/en/my-account-v2-email.18n.ts

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const myAccountV2Email = {
+  myAccountV2Email: {
+    myEmailAddress: 'My Email Address',
+    email: 'Email',
+    emailAddress: 'Email Address',
+    newEmailAddress: 'New Email Address',
+    confirmNewEmailAddress: 'Confirm New Email Address',
+    emailPlaceHolder: 'Enter email',
+    passwordPlaceHolder: 'Enter password',
+    password: 'Password',
+    reloginIndicator:
+      'You need to log in again after setting a new email address.',
+  },
+};

feature-libs/user/profile/assets/translations/en/my-account-v2-user-profile.18n.ts

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const myAccountV2UserProfile = {
+  myAccountV2UserProfile: {
+    myEmailAddress: 'My Email Address',
+    myInformation: 'My Information',
+    name: 'Name',
+    customerId: 'CustomerId',
+    title: 'Title',
+    firstName: 'First name',
+    lastName: 'Last name',
+  },
+};

feature-libs/user/profile/assets/translations/translations.ts

@@ -13,4 +13,6 @@ export const userProfileTranslations: TranslationResources = {
 
 export const userProfileTranslationChunksConfig: TranslationChunksConfig = {
   userProfile: ['updateEmailForm', 'register', 'forgottenPassword'],
+  myAccountV2UserProfile: ['myAccountV2UserProfile'],
+  myAccountV2Email: ['myAccountV2Email'],
 };

feature-libs/user/profile/components/my-account-v2/combined-profile-email/index.ts

@@ -0,0 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './my-account-v2-combined-profile-email.component';
+export * from './my-account-v2-combined-profile-email.module';

feature-libs/user/profile/components/my-account-v2/combined-profile-email/my-account-v2-combined-profile-email.component.html

@@ -0,0 +1,15 @@
+<div>
+  <hr />
+  <div class="row">
+    <div class="col combined-profile-container">
+      <cx-my-new-account-v2-profile></cx-my-new-account-v2-profile>
+    </div>
+  </div>
+  <hr />
+  <div class="row">
+    <div class="col combined-profile-container">
+      <cx-my-new-account-v2-email></cx-my-new-account-v2-email>
+    </div>
+  </div>
+  <hr />
+</div>

feature-libs/user/profile/components/my-account-v2/combined-profile-email/my-account-v2-combined-profile-email.component.spec.ts

@@ -0,0 +1,16 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MyAccountV2CombinedProfileEmailComponent } from './my-account-v2-combined-profile-email.component';
+
+describe('MyProfileV2EmailComponent', () => {
+  let fixture: ComponentFixture<MyAccountV2CombinedProfileEmailComponent>;
+  let component: MyAccountV2CombinedProfileEmailComponent;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyAccountV2CombinedProfileEmailComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

feature-libs/user/profile/components/my-account-v2/combined-profile-email/my-account-v2-combined-profile-email.component.ts

@@ -0,0 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Component } from '@angular/core';
+@Component({
+  selector: 'cx-my-account-v2-combined-profile-email ',
+  templateUrl: './my-account-v2-combined-profile-email.component.html',
+})
+export class MyAccountV2CombinedProfileEmailComponent {}

feature-libs/user/profile/components/my-account-v2/combined-profile-email/my-account-v2-combined-profile-email.module.ts

@@ -0,0 +1,73 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { NgSelectModule } from '@ng-select/ng-select';
+import {
+  AuthGuard,
+  CmsConfig,
+  GlobalMessageService,
+  I18nModule,
+  provideDefaultConfig,
+  UrlModule,
+} from '@spartacus/core';
+import {
+  FormErrorsModule,
+  SpinnerModule,
+  NgSelectA11yModule,
+  MessageComponentModule,
+  PageSlotModule,
+} from '@spartacus/storefront';
+import { UserProfileFacade } from '@spartacus/user/profile/root';
+import { MyAccountV2CombinedProfileEmailComponent } from './my-account-v2-combined-profile-email.component';
+import { MyAccountV2ProfileComponentService } from '../user-profile';
+import { MyAccountV2EmailComponentService } from '../email';
+import { UpdateProfileModule } from '../../update-profile';
+import { UpdateEmailModule } from '../../update-email';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    SpinnerModule,
+    I18nModule,
+    FormErrorsModule,
+    RouterModule,
+    UrlModule,
+    NgSelectModule,
+    NgSelectA11yModule,
+    MessageComponentModule,
+    PageSlotModule,
+    UpdateProfileModule,
+    UpdateEmailModule,
+  ],
+  providers: [
+    provideDefaultConfig(<CmsConfig>{
+      cmsComponents: {
+        MyAccountV2CombinedProfileEmailComponent: {
+          component: MyAccountV2CombinedProfileEmailComponent,
+          guards: [AuthGuard],
+          providers: [
+            {
+              provide: MyAccountV2CombinedProfileEmailComponent,
+              useClass: MyAccountV2CombinedProfileEmailComponent,
+              deps: [UserProfileFacade, GlobalMessageService],
+            },
+            MyAccountV2EmailComponentService,
+            MyAccountV2ProfileComponentService,
+          ],
+        },
+      },
+    }),
+  ],
+  declarations: [MyAccountV2CombinedProfileEmailComponent],
+  exports: [MyAccountV2CombinedProfileEmailComponent],
+})
+export class NewCombinedProfileModule {}

feature-libs/user/profile/components/my-account-v2/email/index.ts

@@ -0,0 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './my-account-v2-email-component.service';
+export * from './my-account-v2-email.component';

feature-libs/user/profile/components/my-account-v2/email/my-account-v2-email-component.service.spec.ts

@@ -0,0 +1,192 @@
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { AbstractControl, ReactiveFormsModule } from '@angular/forms';
+import {
+  AuthRedirectService,
+  AuthService,
+  GlobalMessageService,
+  GlobalMessageType,
+  I18nTestingModule,
+  RoutingService,
+} from '@spartacus/core';
+import { FormErrorsModule } from '@spartacus/storefront';
+import { UserEmailFacade } from '@spartacus/user/profile/root';
+import { of } from 'rxjs';
+import { MyAccountV2EmailComponentService } from './my-account-v2-email-component.service';
+import createSpy = jasmine.createSpy;
+class MockUserEmailService implements Partial<UserEmailFacade> {
+  update = createSpy().and.returnValue(of({}));
+}
+class MockAuthService {
+  coreLogout = createSpy().and.returnValue(Promise.resolve());
+}
+class MockRoutingService {
+  go = createSpy().and.stub();
+  getUrl = createSpy().and.returnValue('');
+}
+class MockGlobalMessageService {
+  add = createSpy().and.stub();
+}
+
+class MockAuthRedirectService implements Partial<AuthRedirectService> {
+  setRedirectUrl = createSpy('setRedirectUrl');
+}
+
+describe('MyAccountV2EmailComponentService', () => {
+  let service: MyAccountV2EmailComponentService;
+  let userService: UserEmailFacade;
+  let authService: AuthService;
+  let routingService: RoutingService;
+  let globalMessageService: GlobalMessageService;
+  let newUid: AbstractControl;
+  let confirmNewUid: AbstractControl;
+  let password: AbstractControl;
+  let authRedirectService: AuthRedirectService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule, I18nTestingModule, FormErrorsModule],
+      providers: [
+        MyAccountV2EmailComponentService,
+        {
+          provide: RoutingService,
+          useClass: MockRoutingService,
+        },
+        {
+          provide: GlobalMessageService,
+          useClass: MockGlobalMessageService,
+        },
+        {
+          provide: UserEmailFacade,
+          useClass: MockUserEmailService,
+        },
+        {
+          provide: AuthService,
+          useClass: MockAuthService,
+        },
+        {
+          provide: AuthRedirectService,
+          useClass: MockAuthRedirectService,
+        },
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    service = TestBed.inject(MyAccountV2EmailComponentService);
+
+    routingService = TestBed.inject(RoutingService);
+    authService = TestBed.inject(AuthService);
+    userService = TestBed.inject(UserEmailFacade);
+    globalMessageService = TestBed.inject(GlobalMessageService);
+    authRedirectService = TestBed.inject(AuthRedirectService);
+
+    newUid = service.form.controls.email;
+    confirmNewUid = service.form.controls.confirmEmail;
+    password = service.form.controls.password;
+  });
+
+  it('should create', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('isUpdating$', () => {
+    it('should return true', () => {
+      service['busy$'].next(true);
+      let result;
+      service.isUpdating$.subscribe((value) => (result = value)).unsubscribe();
+      expect(result).toBeTrue();
+      expect(service.form.disabled).toBeTrue();
+    });
+
+    it('should return false', () => {
+      service['busy$'].next(false);
+      let result;
+      service.isUpdating$.subscribe((value) => (result = value)).unsubscribe();
+      expect(result).toBeFalse;
+      expect(service.form.disabled).toBeFalse();
+    });
+  });
+
+  describe('save', () => {
+    describe('success', () => {
+      beforeEach(() => {
+        newUid.setValue('[email protected]');
+        confirmNewUid.setValue('[email protected]');
+        password.setValue('Qwe123!');
+      });
+
+      it('should save valid email', () => {
+        service.save();
+        expect(userService.update).toHaveBeenCalledWith(
+          'Qwe123!',
+          '[email protected]'
+        );
+      });
+
+      it('should show message', () => {
+        service.save();
+        expect(globalMessageService.add).toHaveBeenCalledWith(
+          {
+            key: 'updateEmailForm.emailUpdateSuccess',
+            params: { newUid: '[email protected]' },
+          },
+          GlobalMessageType.MSG_TYPE_CONFIRMATION
+        );
+      });
+
+      it('should logout', () => {
+        service.save();
+        expect(authService.coreLogout).toHaveBeenCalled();
+      });
+
+      it(
+        'should reroute to the login page',
+        waitForAsync(() => {
+          service.save();
+          authService.coreLogout().then(() => {
+            expect(routingService.go).toHaveBeenCalledWith(
+              { cxRoute: 'login' },
+              {
+                state: {
+                  newUid: '[email protected]',
+                },
+              }
+            );
+          });
+        })
+      );
+
+      it('reset form', () => {
+        spyOn(service.form, 'reset').and.callThrough();
+        service.save();
+        expect(service.form.reset).toHaveBeenCalled();
+      });
+
+      it(
+        'should set the redirect url to the home page before navigating to the login page',
+        waitForAsync(() => {
+          service.save();
+          expect(authRedirectService.setRedirectUrl).toHaveBeenCalledWith(
+            routingService.getUrl({ cxRoute: 'home' })
+          );
+          authService.coreLogout().then(() => {
+            expect(authRedirectService.setRedirectUrl).toHaveBeenCalledBefore(
+              routingService.go
+            );
+          });
+        })
+      );
+    });
+
+    describe('error', () => {
+      it('should not save invalid email', () => {
+        confirmNewUid.setValue('[email protected]');
+        service.save();
+        expect(userService.update).not.toHaveBeenCalled();
+        expect(globalMessageService.add).not.toHaveBeenCalled();
+        expect(authService.coreLogout).not.toHaveBeenCalled();
+        expect(routingService.go).not.toHaveBeenCalled();
+      });
+    });
+  });
+});