feat: update message for enrolment, renewal, error modal when grace p…

…eriod is over (#16551) * feat: update message for enrollment, renewal, error modal when grace period is over * fix: replace hidesecondary with isGracePeriodOver * fix: add jsdoc for GetModalOptions interface * Update src/script/E2EIdentity/Modals/Modals.ts Co-authored-by: Thomas Belin <[email protected]> * refactor: remove duplicate jsdoc --------- Co-authored-by: Thomas Belin <[email protected]>
wireapp · Jan 18, 2024 · 8863c3c · 8863c3c
1 parent 1008e61
commit 8863c3c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git a/src/i18n/en-US.json b/src/i18n/en-US.json
@@ -168,7 +168,8 @@
   "acme.error.button.primary": "Retry",
   "acme.error.button.secondary": "Cancel",
   "acme.error.headline": "Something went wrong",
-  "acme.error.paragraph": "The certificate couldn’t be issued. [br] You can retry to get the certificate now, or you will get a reminder later.",
+  "acme.error.paragraph": "The certificate couldn't be issued. [br] You can retry to get the certificate now, or you will get a reminder later.",
+  "acme.error.gracePeriod.paragraph": "The certificate couldn't be issued. [br] Please try again, or reach out to your team admin.",
   "acme.inProgress.button.close": "Close window 'Getting Certificate'",
   "acme.inProgress.headline": "Getting Certificate...",
   "acme.inProgress.paragraph.alt": "Downloading...",
@@ -180,6 +181,7 @@
   "acme.renewCertificate.button.secondary": "Remind Me Later",
   "acme.renewCertificate.headline.alt": "Update end-to-end identity certificate",
   "acme.renewCertificate.paragraph": "The end-to-end identity certificate for this device expires soon. To keep your communication at the highest security level, update your certificate now. <br/> <br/> Enter your identity provider’s credentials in the next step to update the certificate automatically. <br/> <br/> <a href=\"{{url}}\" target=\"_blank\"> Learn more about end-to-end identity </a>",
+  "acme.renewCertificate.gracePeriodOver.paragraph": "The end-to-end identity certificate for this device has expired. To keep your Wire communication at the highest security level, please update the certificate. <br/> <br/> Enter your identity provider’s credentials in the next step to update the certificate automatically. <br/> <br/> <a href=\"{{url}}\" target=\"_blank\"> Learn more about end-to-end identity </a>",
   "acme.renewal.done.headline": "Certificate updated",
   "acme.renewal.done.paragraph": "The certificate is updated and your device is verified. You can find more details about this certificate in your [bold]Wire Preferences[/bold] under [bold]Devices.[/bold] <br/> <br/> <a href=\"{{url}}\" target=\"_blank\"> Learn more about end-to-end identity </a>",
   "acme.renewal.inProgress.headline": "Updating Certificate...",
@@ -188,7 +190,8 @@
   "acme.settingsChanged.button.secondary": "Remind Me Later",
   "acme.settingsChanged.headline.alt": "End-to-end identity certificate",
   "acme.settingsChanged.headline.main": "Team settings changed",
-  "acme.settingsChanged.paragraph": "As of today, your team uses end-to-end identity to make Wire’s usage more secure and practicable. The device verification takes place automatically using a certificate and replaces the previous manual process. This way, you communicate with the highest security standard. <br/> <br/> Enter your identity provider’s credentials in the next step to automatically get a verification certificate for this device. <br/> <br/> <a href=\"{{url}}\" target=\"_blank\">Learn more about end-to-end identity</a>",
+  "acme.settingsChanged.paragraph": "As of today, your team uses end-to-end identity to make Wire's usage more secure and practicable. The device verification takes place automatically using a certificate and replaces the previous manual process. This way, you communicate with the highest security standard. <br/> <br/> Enter your identity provider's credentials in the next step to automatically get a verification certificate for this device. <br/> <br/> <a href=\"{{url}}\" target=\"_blank\">Learn more about end-to-end identity</a>",
+  "acme.settingsChanged.gracePeriodOver.paragraph": "Your team now uses end-to-end identity to make Wire's usage more secure. The device verification takes place automatically using a certificate. <br/> <br/> Enter your identity provider's credentials in the next step to automatically get a verification certificate for this device. <br/> <br/> <a href=\"{{url}}\" target=\"_blank\">Learn more about end-to-end identity</a>",
   "addParticipantsConfirmLabel": "Add",
   "addParticipantsHeader": "Add participants",
   "addParticipantsHeaderWithCounter": "Add participants ({{number}})",

diff --git a/src/script/E2EIdentity/E2EIdentityEnrollment.ts b/src/script/E2EIdentity/E2EIdentityEnrollment.ts
@@ -363,13 +363,13 @@ export class E2EIHandler extends TypedEventEmitter<Events> {
     // Clear the e2e identity progress
     this.coreE2EIService.clearAllProgress();
 
-    const isSoftLockEnabled = await shouldEnableSoftLock(this.config!);
+    const disableSnooze = await shouldEnableSoftLock(this.config!);
 
     return new Promise<void>(resolve => {
       const {modalOptions, modalType} = getModalOptions({
         type: ModalType.ERROR,
         hideClose: true,
-        hideSecondary: isSoftLockEnabled,
+        hideSecondary: disableSnooze,
         primaryActionFn: async () => {
           this.currentStep = E2EIHandlerStep.INITIALIZED;
           await this.enroll();
@@ -379,6 +379,9 @@ export class E2EIHandler extends TypedEventEmitter<Events> {
           await this.startEnrollment(ModalType.ENROLL);
           resolve();
         },
+        extraParams: {
+          isGracePeriodOver: disableSnooze,
+        },
       });
 
       PrimaryModal.show(modalType, modalOptions);
@@ -404,6 +407,9 @@ export class E2EIHandler extends TypedEventEmitter<Events> {
           this.showSnoozeConfirmationModal();
           resolve();
         },
+        extraParams: {
+          isGracePeriodOver: disableSnooze,
+        },
         type: modalType,
         hideClose: true,
       });

diff --git a/src/script/E2EIdentity/Modals/Modals.ts b/src/script/E2EIdentity/Modals/Modals.ts
@@ -40,7 +40,16 @@ interface GetModalOptions {
   hideSecondary?: boolean;
   hidePrimary?: boolean;
   hideClose?: boolean;
-  extraParams?: {delayTime?: string; isRenewal?: boolean};
+  extraParams?: {
+    /** time left to remind the user again (only for enroll and renewal modal types). */
+    delayTime?: string;
+
+    /** Flag indicating if this is a renewal action */
+    isRenewal?: boolean;
+
+    /** Flag indicating if the grace period is over (only for enroll, renew or error modals) */
+    isGracePeriodOver?: boolean;
+  };
 }
 export const getModalOptions = ({
   type,
@@ -69,7 +78,9 @@ export const getModalOptions = ({
       options = {
         text: {
           closeBtnLabel: t('acme.settingsChanged.button.close'),
-          htmlMessage: t('acme.settingsChanged.paragraph', {}, {br: '<br>', ...replaceLearnMore}),
+          htmlMessage: extraParams?.isGracePeriodOver
+            ? t('acme.settingsChanged.gracePeriodOver.paragraph', {}, {br: '<br>', ...replaceLearnMore})
+            : t('acme.settingsChanged.paragraph', {}, {br: '<br>', ...replaceLearnMore}),
           title: t('acme.settingsChanged.headline.alt'),
         },
         primaryAction: {
@@ -90,7 +101,9 @@ export const getModalOptions = ({
       options = {
         text: {
           closeBtnLabel: t('acme.renewCertificate.button.close'),
-          htmlMessage: t('acme.renewCertificate.paragraph'),
+          htmlMessage: extraParams?.isGracePeriodOver
+            ? t('acme.renewCertificate.gracePeriodOver.paragraph')
+            : t('acme.renewCertificate.paragraph'),
           title: t('acme.renewCertificate.headline.alt'),
         },
         primaryAction: {
@@ -128,7 +141,9 @@ export const getModalOptions = ({
       options = {
         text: {
           closeBtnLabel: t('acme.error.button.close'),
-          htmlMessage: t('acme.error.paragraph', {}, {br: '<br>'}),
+          htmlMessage: extraParams?.isGracePeriodOver
+            ? t('acme.error.gracePeriod.paragraph', {}, {br: '<br>'})
+            : t('acme.error.paragraph', {}, {br: '<br>'}),
           title: t('acme.error.headline'),
         },
         primaryAction: {