Merge branch 'lmendoza/9313-qa-notification-email-address-in-account-…

…settings-doesnt-update-when-theres-a-change' of github.com:ORCID/orcid-angular into lmendoza/9313-qa-notification-email-address-in-account-settings-doesnt-update-when-theres-a-change
ORCID · Jul 29, 2024 · 38a1287 · 38a1287
2 parents 043e9c2 + fe4f57f
commit 38a1287
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,25 @@
+## v2.102.9 - 2024-07-24
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.102.8...v2.102.9)
+
+## v2.102.8 - 2024-07-24
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.102.7...v2.102.8)
+
+## v2.102.7 - 2024-07-24
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.102.6...v2.102.7)
+
+## v2.102.6 - 2024-07-24
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.102.5...v2.102.6)
+
+## v2.102.5 - 2024-07-23
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.102.4...v2.102.5)
+
+- [#2304](https://github.com/ORCID/orcid-angular/pull/2304): Lmendoza/9313 qa notification email address in account settings doesnt update when theres a change
+
 ## v2.102.4 - 2024-07-23
 
 [Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.102.3...v2.102.4)

diff --git a/...onents/settings-defaults-email-frequency/settings-defaults-email-frequency.component.html b/...onents/settings-defaults-email-frequency/settings-defaults-email-frequency.component.html
@@ -51,6 +51,7 @@ <h4 class="orc-font-body" i18n="@@account.notificationEmailAddress">
         <label class="orc-font-body-small">{{ primaryEmail }}</label>
         <caption
           id="email-verified-address"
+          class="orc-font-small-print"
           *ngIf="primaryEmailVerified"
           i18n="@@account.verifiedEmailAddress"
         >
@@ -77,6 +78,7 @@ <h4 class="orc-font-body" i18n="@@account.notificationEmailAddress">
       <a
         (click)="openEmailModal()"
         class="underline"
+        *ngIf="!isMobile"
         id="manage-your-emails"
         i18n="@@account.manageYourEmails"
       >

diff --git a/...onents/settings-defaults-email-frequency/settings-defaults-email-frequency.component.scss b/...onents/settings-defaults-email-frequency/settings-defaults-email-frequency.component.scss
@@ -20,7 +20,7 @@ mat-form-field {
 }
 
 label {
-  margin-bottom: 8px;
+  margin-bottom: 2px;
 }
 
 .italic {
@@ -51,9 +51,22 @@ mat-checkbox {
   justify-content: space-between;
   max-width: 100%;
   .email-container {
+    min-width: 0;
     display: flex;
     gap: 16px;
     align-items: center;
+    div {
+      min-width: 0;
+      line-height: 21px;
+    }
+    label,
+    caption {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-align: left;
+      display: block !important;
+    }
     label {
       font-weight: bold;
     }

diff --git a/...mponents/settings-defaults-email-frequency/settings-defaults-email-frequency.component.ts b/...mponents/settings-defaults-email-frequency/settings-defaults-email-frequency.component.ts
@@ -112,15 +112,18 @@ export class SettingsDefaultsEmailFrequencyComponent
         this.isMobile = platform.columns4 || platform.columns8
       })
 
-      this._record
+    this._record
       .getRecord()
       .pipe(takeUntil(this.$destroy))
       .subscribe((userRecord) => {
-        this.primaryEmail = userRecord.emails.emails.find((email) => email.primary).value
-        this.primaryEmailVerified = userRecord.emails.emails.find((email) => email.primary).verified
+        this.primaryEmail = userRecord.emails.emails.find(
+          (email) => email.primary
+        ).value
+        this.primaryEmailVerified = userRecord.emails.emails.find(
+          (email) => email.primary
+        ).verified
       })
   }
-
 
   openEmailModal() {
     return this._dialog

diff --git a/src/app/cdk/side-bar/modals/modal-email/modal-email.component.html b/src/app/cdk/side-bar/modals/modal-email/modal-email.component.html
@@ -249,18 +249,21 @@ <h2 class="orc-font-body-large" i18n="@@side-bar.emailAddressesUppercase">
           >your ORCID account settings.</a
         >
       </p>
-      <div appearance="outline" class="mat-form-field-min">
+      <mat-form-field
+        appearance="outline"
+        class="mat-form-field-min select-notifications-email"
+      >
         <mat-select
           outline="black"
           [aria-label]="ariaLabelSelect"
-          [attr.disabled]="hasOneEmailAddress()"
+          [attr.disabled]="!hasVerifiedEmailAddress()"
           (selectionChange)="makePrimary($event.value)"
           [ngClass]="{
-            'disabled-select-notifications-email': hasOneEmailAddress()
+            'disabled-select-notifications-email': !hasVerifiedEmailAddress()
           }"
           placeholder=" {{ primaryEmail?.value }}"
           [(value)]="primaryEmail"
-          class="select-notifications-email orc-font-body-small"
+          class="orc-font-body-small"
         >
           <ng-container *ngFor="let email of emails">
             <mat-option
@@ -275,7 +278,7 @@ <h2 class="orc-font-body-large" i18n="@@side-bar.emailAddressesUppercase">
             </mat-option>
           </ng-container>
         </mat-select>
-      </div>
+      </mat-form-field>
     </section>
   </div>
 </app-modal>
diff --git a/src/app/cdk/side-bar/modals/modal-email/modal-email.component.scss b/src/app/cdk/side-bar/modals/modal-email/modal-email.component.scss
@@ -104,14 +104,8 @@ mat-form-field {
 }
 
 .select-notifications-email {
-  padding: 0 8px 0 8px;
-  align-items: center;
-  display: flex;
   height: 38px;
   max-width: 402px;
-  width: auto;
-  border: solid 1px;
-  border-radius: 0 5px 5px 0;
 }
 .current-notification-email {
   font-weight: bold;

diff --git a/src/app/cdk/side-bar/modals/modal-email/modal-email.component.scss-theme.scss b/src/app/cdk/side-bar/modals/modal-email/modal-email.component.scss-theme.scss
@@ -29,10 +29,11 @@
     background: mat.get-color-from-palette($background, 'ui-background-light');
   }
 
+  ::ng-deep .mat-option-text {
+    color: black;
+  }
+
   .select-notifications-email {
-    ::ng-deep .mat-select-placeholder {
-      color: black;
-    }
     color: rgba(0, 0, 0, 0.12);
   }
 

diff --git a/src/app/cdk/side-bar/modals/modal-email/modal-email.component.ts b/src/app/cdk/side-bar/modals/modal-email/modal-email.component.ts
@@ -247,12 +247,17 @@ export class ModalEmailComponent implements OnInit, OnDestroy {
   }
 
   setNextEmailAsPrimary() {
-    const verifiedEmails = this.emails.filter((email) => email.verified)
-    const currentIndex = verifiedEmails.findIndex(
+    let emails = this.emails.filter((email) => email.verified)
+    // If there are no verified emails left, set any next email as primary
+    // we're counting the one being deleted
+    if (emails.length <= 1) {
+      emails = this.emails
+    }
+    const currentIndex = emails.findIndex(
       (value) => value.putCode === this.primaryEmail.putCode
     )
-    const nextIndex = (currentIndex + 1) % verifiedEmails.length
-    const nextEmail = verifiedEmails[nextIndex]
+    const nextIndex = (currentIndex + 1) % emails.length
+    const nextEmail = emails[nextIndex]
     this.makePrimary(nextEmail)
   }
 
@@ -402,7 +407,6 @@ export class ModalEmailComponent implements OnInit, OnDestroy {
       if (controlKey === this.primaryEmail?.putCode) {
         this.setNextEmailAsPrimary()
       }
-
       const i = this.emails.findIndex((value) => value.putCode === controlKey)
       this.emails.splice(i, 1)
       this.emailsForm.removeControl(controlKey)

diff --git a/src/app/cdk/side-bar/side-bar/side-bar.component.html b/src/app/cdk/side-bar/side-bar/side-bar.component.html
@@ -55,7 +55,6 @@ <h3 header class="orc-font-body" i18n="@@shared.emails">Emails</h3>
           [visibility]="
             isPublicRecord ? '' : email.verified ? email.visibility : 'PRIVATE'
           "
-          [bold]="email.primary"
           [isPublicRecord]="isPublicRecord"
           >{{ email.value }}