Skip to content

Commit

Permalink
Merge pull request #2298 from ORCID/lmendoza/9306-notification-email-…
Browse files Browse the repository at this point in the history
…frequency-account-settings-v2

9306-notification-email-frequency-account-settings
  • Loading branch information
leomendoza123 authored Jul 10, 2024
2 parents 971b3f8 + 776af35 commit 1a4cc1b
Show file tree
Hide file tree
Showing 10 changed files with 163 additions and 68 deletions.
4 changes: 3 additions & 1 deletion src/app/account-settings/account-settings.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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: [
Expand All @@ -71,6 +72,7 @@ import { AccountSettingsComponent } from './pages/account-settings/account-setti
SettingsSharingComponent,
SettingsSharingQrCodeComponent,
SettingsSharingHtmlCodeComponent,

],
imports: [
CommonModule,
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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;

}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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({
Expand Down Expand Up @@ -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()
Expand Down
3 changes: 1 addition & 2 deletions src/app/cdk/platform-info/browserlist.regexp.ts
Original file line number Diff line number Diff line change
@@ -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]*)?)/
4 changes: 4 additions & 0 deletions src/assets/vectors/email-unverfied-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/assets/vectors/email-verified-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions src/locale/properties/account/account.en.properties
Original file line number Diff line number Diff line change
Expand Up @@ -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

0 comments on commit 1a4cc1b

Please sign in to comment.