9306-notification-email-frequency-account-settings

src/app/account-settings/account-settings.module.ts

@@ -5,7 +5,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'
 import { MatLegacyOptionModule as MatOptionModule } from '@angular/material/legacy-core'
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'
 import { MatDividerModule } from '@angular/material/divider'
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field'
 import { MatIconModule } from '@angular/material/icon'
@@ -46,6 +45,8 @@ import { SettingsSharingQrCodeComponent } from './components/settings-sharing-qr
 import { SettingsSharingComponent } from './components/settings-sharing/settings-sharing.component'
 import { SettingsComponent } from './components/settings/settings.component'
 import { AccountSettingsComponent } from './pages/account-settings/account-settings.component'
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'
+
 
 @NgModule({
   declarations: [
@@ -71,6 +72,7 @@ import { AccountSettingsComponent } from './pages/account-settings/account-setti
     SettingsSharingComponent,
     SettingsSharingQrCodeComponent,
     SettingsSharingHtmlCodeComponent,
+
   ],
   imports: [
     CommonModule,

src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.html

@@ -1,48 +1,90 @@
 <app-settings-panels-data *ngIf="form" [formGroup]="form">
-  <p i18n="@@account.orcidKeeps">
-    ORCID keeps you up-to-date with activity on your record with notifications
-    sent to your ORCID inbox. You can also have these notifications sent to you
-    by email. You can choose which types of notifications you wish to get by
-    email and how often you would like to receive them.
+  <p i18n="@@account.notifications">
+    Notifications keep you up-to-date with activity in your ORCID record.
+    Updates are automatically sent to your ORCID inbox but you can also have
+    them sent to you by email. You can choose the kind of notifications you wish
+    to receive by email and how often you want to receive them
+  </p>
+  <p>
+    <i i18n="@@account.inAdditionToTheOptional">
+      In addition to the optional account and record notifications, we may
+      occasionally send you emails with service messages relating to your ORCID
+      account. As the information in these emails may affect your privacy
+      settings and the functioning of your ORCID account, you cannot opt-out of
+      these service messages per our Privacy Policy
+    </i>
   </p>
 
-  <div
-    class="info margin-bottom-16"
-    [ngClass]="{
-      'orc-font-body-small': !isMobile,
-      'orc-font-small-print': isMobile
-    }"
-  >
-    <div>
-      <mat-icon class="large-material-icon">info</mat-icon>
-    </div>
-    <div class="col l11 m6 s3">
+  <h3 class="orc-font-body" i18n="@@account.notificationEmailAddress">
+    Notification email address
+  </h3>
+  <p class="margin-bottom-16" i18n="@@account.yourOrcidNotification">
+    Your ORCID notification emails will be sent to:
+  </p>
+
+  <div class="email-edit-container">
+    <div class="email-container">
+      <img
+        *ngIf="primaryEmailVerified"
+        cdkDragHandle
+        src="./assets/vectors/email-verified-icon.svg"
+        aria-labelledby="email-verified-address"
+      />
+      <img
+        *ngIf="!primaryEmailVerified"
+        cdkDragHandle
+        src="./assets/vectors/email-unverfied-icon.svg"
+        aria-labelledby="email-unverified-address"
+      />
+
       <div>
-        <ng-container i18n="@@account.settingEmailAlert1"
-          >Setting email frequency to</ng-container
+        <label class="orc-font-body-small">{{ primaryEmail }}</label>
+        <caption
+          id="email-verified-address"
+          *ngIf="primaryEmailVerified"
+          i18n="@@account.verifiedEmailAddress"
         >
-        <i i18n="@@account.settingEmailsAlert2">Never</i>
-        <ng-container i18n="@@account.settingEmailsAlert3">
-          may mean you miss out on useful or important messages about your ORCID
-          record.</ng-container
+          Verified email address
+        </caption>
+        <caption
+          id="email-unverified-address"
+          class="orc-font-small-print"
+          *ngIf="!primaryEmailVerified"
+          i18n="@@account.unverifiedEmailAddress"
         >
+          Unverified email address
+        </caption>
       </div>
     </div>
+    <div>
+      <button
+        mat-icon-button
+        (click)="openEmailModal()"
+        aria-labelledby="manage-your-emails"
+      >
+        <mat-icon>edit</mat-icon>
+      </button>
+      <a
+        (click)="openEmailModal()"
+        class="underline"
+        id="manage-your-emails"
+        i18n="@@account.manageYourEmails"
+      >
+        Manage your emails
+      </a>
+    </div>
   </div>
 
-  <h3 class="orc-font-body" i18n="@@account.accountAndRecord">
-    Account and record notifications
-  </h3>
-  <p class="margin-bottom-16" i18n="@@account.howOftenWould">
-    How often would you like to receive summary emails about:
-  </p>
-
   <div class="row">
     <label class="row">
-      <strong i18n="@@account.itemsAddedOrEdited"
-        >Items added or edited in your record by a trusted party</strong
-      >
+      <strong i18n="@@account.emailFrequency">Email frequency</strong>
     </label>
+    <p class="margin-bottom-16 row" i18n="@@account.howOftenShouldWeSend">
+      How often should we send you ORCID notification emails about:
+    </p>
+    <p class="margin-bottom-16 row" i18n="@@account.itemsAddedOrEdited">
+      Items added or edited in your record by a trusted party
+    </p>
     <mat-form-field
       appearance="outline"
       class="mat-form-field-min input-container"
@@ -59,11 +101,12 @@ <h3 class="orc-font-body" i18n="@@account.accountAndRecord">
   </div>
 
   <div class="row">
-    <label class="row">
-      <strong i18n="@@account.administrativeChanges"
-        >Administrative changes, such as being made a trusted individual</strong
-      >
-    </label>
+    <p
+      class="margin-bottom-16 row"
+      i18n="@@account.administrativeChangesSuchAs"
+    >
+      Adminstrative changes, such as being made a trusted individual
+    </p>
     <mat-form-field
       appearance="outline"
       class="mat-form-field-min input-container"
@@ -101,35 +144,16 @@ <h3 class="orc-font-body" i18n="@@account.accountAndRecord">
     </mat-form-field>
   </div>
 
-  <h3 class="orc-font-body" i18n="@@account.newFeatures">
-    New features and tips
+  <h3 class="orc-font-body" i18n="@@account.tipsAndFeatures">
+    Tips & features email
   </h3>
   <p i18n="@@account.weOccasionallySend">
     We occasionally send out an email with information on new features and tips
     for getting the best out of your ORCID record.
   </p>
   <mat-checkbox formControlName="sendQuarterlyTips" class="margin-bottom-16">
     <!-- prettier-ignore -->
-    <div class="mat-checkbox-content" i18n="@@account.idLikeToReceive"
-    >I’d like to receive the ORCID new features and tips newsletter</div>
+    <div class="mat-checkbox-content" i18n="@@account.idLikeToReceiveTheOrcidTips"
+    >I’d like to receive the ORCID tips & features email</div>
   </mat-checkbox>
-  <p class="italic">
-    <ng-container i18n="@@account.inAddition">
-      In addition to the notifications selected above, we may occasionally send
-      you emails with service messages related to or affecting your ORCID
-      Account. As this information may affect your visibility (privacy) settings
-      and the functioning of your ORCID account, you may not opt-out of service
-      messages per our
-    </ng-container>
-    <a
-      class="underline"
-      i18n="@@footer.privacypolicy"
-      href="/privacy-policy"
-      target="_blank"
-      rel="noopener noreferrer"
-      id="cy-privacy-policy"
-    >
-      Privacy Policy
-    </a>
-  </p>
 </app-settings-panels-data>

src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.scss

@@ -40,3 +40,27 @@ mat-checkbox {
   white-space: break-spaces;
   line-height: 1.4;
 }
+
+.email-edit-container {
+  padding: 16px 0 16px 0;
+  gap: 0px;
+  border: solid;
+  border-width: 1px 0 1px 0;
+  opacity: 0px;
+  display: flex;
+  justify-content: space-between;
+  max-width: 100%;
+  .email-container {
+    display: flex;
+    gap: 16px;
+    label {
+      font-weight: bold;
+    }
+    caption {
+      font-style: italic  ;
+      width: 100%;
+    display: flex;
+
+    }
+  }
+}

src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.scss-theme.scss

@@ -21,6 +21,9 @@
       ) !important;
     }
   }
+  .email-edit-container {
+    border-color: mat.get-color-from-palette($background, ui-background-light);
+  }
 }
 
 @include settings-defaults-email-frequency($orcid-app-theme);

src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { SettingsDefaultsEmailFrequencyComponent } from './settings-defaults-email-frequency.component'
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
+import { MatLegacyDialogModule  } from '@angular/material/legacy-dialog'
 import { WINDOW_PROVIDERS } from '../../../cdk/window'
 import { UntypedFormBuilder } from '@angular/forms'
 import { PlatformInfoService } from '../../../cdk/platform-info'
@@ -11,23 +11,24 @@ import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack
 import { Overlay } from '@angular/cdk/overlay'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { RouterTestingModule } from '@angular/router/testing'
+import { UserInfoService } from 'src/app/core/user-info/user-info.service'
 
 describe('SettingsDefaultsEmailFrequencyComponent', () => {
   let component: SettingsDefaultsEmailFrequencyComponent
   let fixture: ComponentFixture<SettingsDefaultsEmailFrequencyComponent>
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, RouterTestingModule],
+      imports: [HttpClientTestingModule, RouterTestingModule, MatLegacyDialogModule],
       declarations: [SettingsDefaultsEmailFrequencyComponent],
       providers: [
         WINDOW_PROVIDERS,
         UntypedFormBuilder,
         PlatformInfoService,
         ErrorHandlerService,
+        UserInfoService,
         SnackbarService,
         MatSnackBar,
-        MatDialog,
         Overlay,
       ],
     }).compileComponents()

src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.ts

@@ -14,7 +14,9 @@ import {
   EmailFrequencies,
   EmailFrequenciesValues,
 } from 'src/app/types/account-default-visibility.endpoint'
-
+import { MatLegacyDialog } from '@angular/material/legacy-dialog'
+import { ModalEmailComponent } from 'src/app/cdk/side-bar/modals/modal-email/modal-email.component'
+import { UserInfoService } from 'src/app/core/user-info/user-info.service'
 @Component({
   selector: 'app-settings-defaults-email-frequency',
   templateUrl: './settings-defaults-email-frequency.component.html',
@@ -38,16 +40,24 @@ export class SettingsDefaultsEmailFrequencyComponent
   ]
   emailFrequenciesValues = EmailFrequenciesValues
   form: UntypedFormGroup
+  primaryEmail: string
+  primaryEmailVerified: string
   @Output() loading = new EventEmitter<boolean>()
 
   constructor(
     private _platform: PlatformInfoService,
     private _fb: UntypedFormBuilder,
-    private _emailFrequency: AccountDefaultEmailFrequenciesService
+    private _emailFrequency: AccountDefaultEmailFrequenciesService,
+    private _dialog: MatLegacyDialog,
+    private _userInfoService: UserInfoService
   ) {}
 
   ngOnInit(): void {
     this.loading.next(true)
+    this._userInfoService.getUserInfo().subscribe((value) => {
+      this.primaryEmail = value.PRIMARY_EMAIL
+      this.primaryEmailVerified = value.IS_PRIMARY_EMAIL_VERIFIED
+    })
     this._emailFrequency.get().subscribe((value) => {
       this.loading.next(false)
       this.form = this._fb.group({
@@ -100,6 +110,17 @@ export class SettingsDefaultsEmailFrequencyComponent
         this.isMobile = platform.columns4 || platform.columns8
       })
   }
+
+  openEmailModal() {
+    return this._dialog
+      .open(ModalEmailComponent, {
+        width: '850px',
+        maxWidth: '99%',
+        // data: this.userRecord,
+        // ariaLabel: getAriaLabel(this.editModalComponent, this.type),
+      })
+      .afterClosed()
+  }
   ngOnDestroy() {
     this.$destroy.next(true)
     this.$destroy.unsubscribe()

src/app/cdk/platform-info/browserlist.regexp.ts

@@ -1,3 +1,2 @@
 // tslint:disable-next-line: max-line-length
-export const BROWSERLIST_REGEXP =
-  /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+|17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
+export const BROWSERLIST_REGEXP = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+|17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/

src/locale/properties/account/account.en.properties

@@ -198,3 +198,16 @@ account.scopePathType.personUpdate=Add/update information about you (country, ke
 account.scopePathType.readLimited=Read your information with visibility set to Trusted Parties
 account.scopePathType.readPublic=Read public info only
 account.scopePathType.webhook=Notifies Application if there are changes to your record
+account.notifications=Notifications keep you up-to-date with activity in your ORCID record. Updates are automatically sent to your ORCID inbox but you can also have them sent to you by email. You can choose the kind of notifications you wish to receive by email and how often you want to receive them
+account.inAdditionToTheOptional=In addition to the optional account and record notifications, we may occasionally send you emails with service messages relating to your ORCID account. As the information in these emails may affect your privacy settings and the functioning of your ORCID account, you cannot opt-out of these service messages per our Privacy Policy
+account.notificationEmailAddress=Notification email address
+account.yourOrcidNotification=Your ORCID notification emails will be sent to:
+account.unverifiedEmailAddress=Unverified email address
+account.verifiedEmailAddress=Verified email address
+account.manageYourEmails=Manage your emails
+account.emailFrequency=Email frequency
+account.howOftenShouldWeSend=How often should we send you ORCID notification emails about:
+account.itemsAddedOrEdited=Items added or edited in your record by a trusted party
+account.administrativeChangesSuchAs=Adminstrative changes, such as being made a trusted individual
+account.tipsAndFeatures=Tips & features email
+account.idLikeToReceiveTheOrcidTips=I’d like to receive the ORCID tips & features email