From 30b6646ce0dea936c8edb786ec6eb4d420af5bc4 Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Fernadez Date: Tue, 9 Jul 2024 17:46:03 -0600 Subject: [PATCH 1/2] 9306-notification-email-frequency-account-settings --- .../account-settings.module.ts | 4 +- ...gs-defaults-email-frequency.component.html | 144 ++++++++++-------- ...gs-defaults-email-frequency.component.scss | 24 +++ ...-email-frequency.component.scss-theme.scss | 3 + ...ings-defaults-email-frequency.component.ts | 25 ++- .../cdk/platform-info/browserlist.regexp.ts | 3 +- src/assets/vectors/email-unverfied-icon.svg | 4 + src/assets/vectors/email-verified-icon.svg | 4 + .../properties/account/account.en.properties | 13 ++ 9 files changed, 159 insertions(+), 65 deletions(-) create mode 100644 src/assets/vectors/email-unverfied-icon.svg create mode 100644 src/assets/vectors/email-verified-icon.svg diff --git a/src/app/account-settings/account-settings.module.ts b/src/app/account-settings/account-settings.module.ts index 5156e8466a..b0c2724caf 100644 --- a/src/app/account-settings/account-settings.module.ts +++ b/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, diff --git a/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.html b/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.html index c887558a9d..24a3c6b35d 100644 --- a/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.html +++ b/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.html @@ -1,48 +1,90 @@ -

- 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. +

+ 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 +

+

+ + 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 +

-
-
- info -
-
+

+ Notification email address +

+

+ Your ORCID notification emails will be sent to: +

+ + -

- Account and record notifications -

-

- How often would you like to receive summary emails about: -

-
+

+ How often should we send you ORCID notification emails about: +

+

+ Items added or edited in your record by a trusted party +

- +

+ Adminstrative changes, such as being made a trusted individual +

-

- New features and tips +

+ Tips & features email

We occasionally send out an email with information on new features and tips @@ -110,26 +153,7 @@

-
I’d like to receive the ORCID new features and tips newsletter
+
I’d like to receive the ORCID tips & features email
 -

- - 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 - - - Privacy Policy - -

diff --git a/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.scss b/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.scss index b3fd173cf8..60d10e2824 100644 --- a/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.scss +++ b/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; + + } + } +} diff --git a/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.scss-theme.scss b/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.scss-theme.scss index 929c0caa28..05a08b4740 100644 --- a/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.scss-theme.scss +++ b/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); diff --git a/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.ts b/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.ts index 4cc86ef71c..4b20f0f152 100644 --- a/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.ts +++ b/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 as MatDialog } 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() constructor( private _platform: PlatformInfoService, private _fb: UntypedFormBuilder, - private _emailFrequency: AccountDefaultEmailFrequenciesService + private _emailFrequency: AccountDefaultEmailFrequenciesService, + private _dialog: MatDialog, + 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() diff --git a/src/app/cdk/platform-info/browserlist.regexp.ts b/src/app/cdk/platform-info/browserlist.regexp.ts index 545a90290e..bf8c4aa5cf 100644 --- a/src/app/cdk/platform-info/browserlist.regexp.ts +++ b/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]*)?)/ diff --git a/src/assets/vectors/email-unverfied-icon.svg b/src/assets/vectors/email-unverfied-icon.svg new file mode 100644 index 0000000000..104e43b206 --- /dev/null +++ b/src/assets/vectors/email-unverfied-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/vectors/email-verified-icon.svg b/src/assets/vectors/email-verified-icon.svg new file mode 100644 index 0000000000..9decedf4bb --- /dev/null +++ b/src/assets/vectors/email-verified-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/locale/properties/account/account.en.properties b/src/locale/properties/account/account.en.properties index 92580b16db..5caca32da5 100644 --- a/src/locale/properties/account/account.en.properties +++ b/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 \ No newline at end of file From e2b90130d3c27a7a2b7f259426a37e5a50c81945 Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Fernadez Date: Tue, 9 Jul 2024 18:16:25 -0600 Subject: [PATCH 2/2] 9306-notification-email-frequency-account-settings-v2 --- .../settings-defaults-email-frequency.component.spec.ts | 7 ++++--- .../settings-defaults-email-frequency.component.ts | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.spec.ts b/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.spec.ts index e55d3e2394..905a8ee499 100644 --- a/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.spec.ts +++ b/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,6 +11,7 @@ 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 @@ -18,16 +19,16 @@ describe('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() diff --git a/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.ts b/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.ts index 4b20f0f152..cc6207e5be 100644 --- a/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.ts +++ b/src/app/account-settings/components/settings-defaults-email-frequency/settings-defaults-email-frequency.component.ts @@ -14,7 +14,7 @@ import { EmailFrequencies, EmailFrequenciesValues, } from 'src/app/types/account-default-visibility.endpoint' -import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog' +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({ @@ -48,7 +48,7 @@ export class SettingsDefaultsEmailFrequencyComponent private _platform: PlatformInfoService, private _fb: UntypedFormBuilder, private _emailFrequency: AccountDefaultEmailFrequenciesService, - private _dialog: MatDialog, + private _dialog: MatLegacyDialog, private _userInfoService: UserInfoService ) {}