Fixed the layout for orcid integration mvp notification in the inbox

Author: Camelia-Orcid

src/app/inbox/components/notification-permission/notification-permission.component.html

@@ -1,6 +1,9 @@
-<div class="intro">{{ notification?.notificationIntro }}</div>
+<div *ngIf="isOrcidIntegration" class="intro">
+<ng-container i18n="@@inbox.youCanBenefitFromAutomatic" >You can benefit from automatic updates to your record. Based on your verified email domains we have found an ORCID integration for</ng-container> <strong>{{ orcidIntegrationMemberName }}</strong>. <ng-container i18n="@@inbox.connectingWithThisIntegrationWillAllow" >Connecting with this integration will allow</ng-container> {{ orcidIntegrationMemberName }} <ng-container i18n="@@inbox.toAutomaticallyAddValidatedInformation" >to automatically add validated information to your ORCID record.</ng-container>
+</div>
+<div *ngIf="!isOrcidIntegration" class="intro">{{ notification?.notificationIntro }}</div>
 
-<div>
+<div *ngIf="!isOrcidIntegration">
   <strong>{{ notification?.source.sourceName.content }}</strong>
   <ng-container i18n="@@inbox.likeYourPermission"
     >would like your permission to interact with your ORCID Record as a trusted
@@ -24,7 +27,7 @@
     </li>
   </ul>
 </div>
-<div class="buttons-container">
+<div *ngIf="!isOrcidIntegration" class="buttons-container">
   <button
     *ngIf="!notification?.archivedDate"
     (click)="archive(); $event.stopPropagation()"
@@ -35,7 +38,7 @@
   >
     Archive without granting permissions
   </button>
-  <a
+  <a 
     target="_blank"
     rel="noopener noreferrer"
     [href]="notification?.authorizationUrl.uri"
@@ -50,3 +53,22 @@
     </button>
   </a>
 </div>
+
+<div *ngIf="isOrcidIntegration" class="buttons-container">
+  <a 
+    target="_blank"
+    rel="noopener noreferrer"
+    [href]="orcidIntegrationLink"
+  >
+    <button
+      mat-raised-button
+      color="primary"
+      class="grant-permission"
+      i18n="@@inbox.connectWith"
+    [innerHTML]="'Connect with ' + orcidIntegrationMemberName"
+    i18n="@@inbox.connectWith|Connect with {orcidIntegrationMemberName}"
+    >
+      Connect with
+    </button>
+  </a>
+</div>

src/app/inbox/components/notification-permission/notification-permission.component.ts

@@ -16,13 +16,20 @@ import { InboxService } from '../../../core/inbox/inbox.service'
 export class NotificationPermissionComponent implements OnInit {
   @Input() notification: InboxNotificationPermission
   itemsByType: { type: string; items: Item[] }[]
+  isOrcidIntegration: boolean = false
+  orcidIntegrationLink: string 
+  orcidIntegrationMemberName: string
 
   constructor(
     @Inject(WINDOW) private window: Window,
     private _inbox: InboxService
   ) {}
 
   ngOnInit(): void {
+    if(this.notification?.notificationIntro?.includes('::')) {
+      [this.orcidIntegrationMemberName,this.orcidIntegrationLink] = this.notification.notificationIntro.split('::')
+      this.isOrcidIntegration = true
+    } 
     this.itemsByType = chain(this.notification?.items.items)
       .groupBy('itemType')
       .map((value, key) => ({ type: key, items: value }))

src/locale/properties/inbox/inbox.en.properties

@@ -45,3 +45,7 @@ inbox.youDontHaveUnarchived=You don't have any unarchived notifications right no
 inbox.youDontHave=You don’t have any notifications yet.
 inbox.archiveWithout=Archive without granting permissions
 inbox.professionalActivities=Professional activities
+inbox.connectWith=Connect with
+inbox.youCanBenefitFromAutomatic=You can benefit from automatic updates to your record. Based on your verified email domains we have found an ORCID integration for
+inbox.connectingWithThisIntegrationWillAllow=Connecting with this integration will allow
+inbox.toAutomaticallyAddValidatedInformation=to automatically add validated information to your ORCID record. This will save you time and effort when maintaining your record, and help make sure it stays up-to-date.

src/locale/properties/inbox/inbox.lr.properties

@@ -49,3 +49,7 @@ inbox.service=LR
 inbox.connectingYour=LR
 inbox.archiveWithout=LR
 inbox.professionalActivities=LR
+inbox.connectWith=LR
+inbox.youCanBenefitFromAutomatic=LR
+inbox.connectingWithThisIntegrationWillAllow=LR
+inbox.toAutomaticallyAddValidatedInformation=LR

src/locale/properties/inbox/inbox.rl.properties

@@ -49,3 +49,7 @@ inbox.service=RL
 inbox.connectingYour=RL
 inbox.archiveWithout=RL
 inbox.professionalActivities=RL
+inbox.connectWith=RL
+inbox.youCanBenefitFromAutomatic=RL
+inbox.connectingWithThisIntegrationWillAllow=RL
+inbox.toAutomaticallyAddValidatedInformation=RL

src/locale/properties/inbox/inbox.xx.properties

@@ -49,3 +49,7 @@ inbox.service=X
 inbox.connectingYour=X
 inbox.archiveWithout=X
 inbox.professionalActivities=X
+inbox.connectWith=X
+inbox.youCanBenefitFromAutomatic=X
+inbox.connectingWithThisIntegrationWillAllow=X
+inbox.toAutomaticallyAddValidatedInformation=X