feat: my account v2

My Account v2 views including:
- My Information
- My Email Address
- Update Password and Security
- Update Communications (Preferred Communication Channel)
- Privacy And Settings (Consent Management)

docs/migration/2211_0/migration-comments-api-elements.json

@@ -0,0 +1 @@
+[]

docs/migration/2211_0/migration-comments-members.json

@@ -0,0 +1 @@
+[]

docs/migration/2211_0/renamed-api-mappings.json

@@ -0,0 +1 @@
+[]

feature-libs/user/_index.scss

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

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

@@ -4,10 +4,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { myAccountV2UserProfile } from './my-account-v2-user-profile.18n';
+import { myAccountV2Email } from './my-account-v2-email.18n';
+import { myAccountV2Password } from './my-account-v2-password.i18n';
 import userProfile from './userProfile.json';
 import address from './address.json';
 
 export const en = {
   userProfile,
+  myAccountV2UserProfile,
+  myAccountV2Email,
+  myAccountV2Password,
   address,
 };

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

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ * SPDX-FileCopyrightText: 2024 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-password.i18n.ts

@@ -0,0 +1,31 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const myAccountV2Password = {
+  myAccountV2PasswordForm: {
+    oldPassword: {
+      label: 'Old Password',
+      placeholder: 'Enter Old Password',
+    },
+    oldPasswordIsRequired: 'Old password is required.',
+    newPassword: {
+      label: 'New Password',
+      placeholder: 'Enter New Password',
+    },
+    passwordMinRequirements:
+      'Password must be six characters minimum, with one uppercase letter, one number, one symbol',
+    confirmPassword: {
+      label: 'Confirm New Password',
+      placeholder: 'Confirm New Password',
+    },
+    reloginIndicator: 'You need to log in again after setting password.',
+    bothPasswordMustMatch: 'Both password must match',
+    passwordUpdateSuccess: 'Password updated with success',
+    accessDeniedError: 'Access is denied',
+    newPasswordTitle: 'My Password',
+  },
+};

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

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ * SPDX-FileCopyrightText: 2024 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,6 +13,9 @@ export const userProfileTranslations: TranslationResources = {
 
 export const userProfileTranslationChunksConfig: TranslationChunksConfig = {
   userProfile: ['updateEmailForm', 'register', 'forgottenPassword'],
+  myAccountV2UserProfile: ['myAccountV2UserProfile'],
+  myAccountV2Email: ['myAccountV2Email'],
+  myAccountV2Password: ['myAccountV2PasswordForm'],
   address: [
     'addressForm',
     'addressBook',

feature-libs/user/profile/components/update-email/index.ts

@@ -7,3 +7,5 @@
 export * from './update-email-component.service';
 export * from './update-email.component';
 export * from './update-email.module';
+export * from './use-my-account-v2-email.ts';
+export * from './my-account-v2-email.component';

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

@@ -0,0 +1,115 @@
+<cx-spinner
+  class="overlay"
+  *ngIf="(isUpdating$ | async) || !(user$ | async); $"
+>
+</cx-spinner>
+<div>
+  <div class="flex-line">
+    <label class="headertext"
+      >{{ 'myAccountV2Email.myEmailAddress' | cxTranslate }}
+    </label>
+    <button class="editButton" *ngIf="!isEditing" (click)="onEdit()">
+      {{ 'common.edit' | cxTranslate }}
+    </button>
+  </div>
+  <div>
+    <div *ngIf="!isEditing">
+      <div class="flex-line">
+        <label class="text-head">
+          {{ 'myAccountV2Email.email' | cxTranslate }}
+        </label>
+        <label class="value">
+          {{ (user$ | async)?.uid }}
+        </label>
+      </div>
+    </div>
+  </div>
+  <cx-message
+    *ngIf="isEditing && showingAlert"
+    [text]="'myAccountV2Email.reloginIndicator' | cxTranslate"
+    [type]="globalMessageType.MSG_TYPE_INFO"
+    (closeMessage)="closeDialogConfirmationAlert()"
+  ></cx-message>
+  <div *ngIf="isEditing" class="email-editing-area">
+    <form (ngSubmit)="onSubmit()" [formGroup]="form">
+      <label>
+        <span class="text-head">{{
+          'myAccountV2Email.emailAddress' | cxTranslate
+        }}</span>
+        <input
+          type="text"
+          class="form-control"
+          [value]="(user$ | async)?.uid"
+          readonly
+        />
+      </label>
+
+      <label>
+        <span class="text-head">{{
+          'myAccountV2Email.newEmailAddress' | cxTranslate
+        }}</span>
+        <input
+          required="true"
+          type="email"
+          name="email"
+          formControlName="email"
+          placeholder="{{ 'myAccountV2Email.emailPlaceHolder' | cxTranslate }}"
+          class="form-control"
+        />
+        <cx-form-errors [control]="form.get('email')"></cx-form-errors>
+      </label>
+
+      <label>
+        <span class="text-head">{{
+          'myAccountV2Email.confirmNewEmailAddress' | cxTranslate
+        }}</span>
+        <input
+          required="true"
+          type="email"
+          name="confirmEmail"
+          formControlName="confirmEmail"
+          placeholder="{{ 'myAccountV2Email.emailPlaceHolder' | cxTranslate }}"
+          class="form-control"
+        />
+        <cx-form-errors [control]="form.get('confirmEmail')"></cx-form-errors>
+      </label>
+
+      <label>
+        <span class="label-content, text-head">{{
+          'myAccountV2Email.password' | cxTranslate
+        }}</span>
+        <input
+          required="true"
+          type="password"
+          name="password"
+          formControlName="password"
+          placeholder="{{
+            'myAccountV2Email.passwordPlaceHolder' | cxTranslate
+          }}"
+          class="form-control"
+          autocomplete="new-password"
+          [attr.aria-label]="
+            'myAccountV2Email.passwordPlaceHolder' | cxTranslate
+          "
+          cxPasswordVisibilitySwitch
+        />
+        <cx-form-errors [control]="form.get('password')"></cx-form-errors>
+      </label>
+
+      <div class="btn-group-row">
+        <div class="btn-group">
+          <button class="btn button-cancel button" (click)="cancelEdit()">
+            {{ 'common.cancel' | cxTranslate }}
+          </button>
+          <button
+            class="btn btn-primary button"
+            (click)="onSubmit()"
+            [disabled]="form.disabled"
+          >
+            {{ 'common.save' | cxTranslate }}
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>