Merge pull request #1485 from sharetribe/fix-message-for-email-verifi…

…cation-double-click Fix message for email verification double click
sharetribe · Nov 30, 2021 · 154d077 · 154d077
2 parents 5c530c7 + 0953640
commit 154d077
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,9 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2021-XX-XX
 
+- [fix] Double click issue. Show dedicated message, when current user doesn't have a pending email
+  address, but there's a verification error.
+  [#1485](https://github.com/sharetribe/ftw-daily/pull/1485)
 - [change] Update comment about how scrollIntoView works with links using hash.
   [#1484](https://github.com/sharetribe/ftw-daily/pull/1484)
 - [fix] Account pages: mobile tab navigation should only scroll horizontally

diff --git a/src/forms/EmailVerificationForm/EmailVerificationForm.js b/src/forms/EmailVerificationForm/EmailVerificationForm.js
@@ -88,7 +88,37 @@ const EmailVerificationFormComponent = props => (
         </div>
       );
 
-      return emailVerified && !pendingEmail && !verificationError ? alreadyVerified : verifyEmail;
+      const currentEmail = <strong>{email}</strong>;
+      const alreadyVerifiedButErrorReturned = (
+        <div className={css.root}>
+          <div>
+            <IconEmailSuccess className={css.modalIcon} />
+            <h1 className={css.modalTitle}>
+              <FormattedMessage id="EmailVerificationForm.noPendingTitle" values={{ name }} />
+            </h1>
+
+            <p className={css.modalMessage}>
+              <FormattedMessage
+                id="EmailVerificationForm.noPendingText"
+                values={{ email: currentEmail, breakline: <br /> }}
+              />
+            </p>
+          </div>
+
+          <div className={css.bottomWrapper}>
+            <NamedLink className={css.submitButton} name="LandingPage">
+              <FormattedMessage id="EmailVerificationForm.successButtonText" />
+            </NamedLink>
+          </div>
+        </div>
+      );
+
+      const anyPendingEmailHasBeenVerifiedForCurrentUser = emailVerified && !pendingEmail;
+      return anyPendingEmailHasBeenVerifiedForCurrentUser && verificationError
+        ? alreadyVerifiedButErrorReturned
+        : anyPendingEmailHasBeenVerifiedForCurrentUser
+        ? alreadyVerified
+        : verifyEmail;
     }}
   />
 );

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -258,6 +258,8 @@
   "EditListingWizard.tabLabelPolicy": "Sauna rules",
   "EditListingWizard.tabLabelPricing": "Pricing",
   "EmailVerificationForm.finishAccountSetup": "We will need to send you email notifications. To allow this, please verify your email address {email}.",
+  "EmailVerificationForm.noPendingText": "Everything looks good. Your current email address is {email}. {breakline}Time to get out there – have a great day.",
+  "EmailVerificationForm.noPendingTitle": "You didn't have any pending email address, {name}.",
   "EmailVerificationForm.successButtonText": "Continue exploring",
   "EmailVerificationForm.successText": "Everything looks good. Time to get out there – have a great day.",
   "EmailVerificationForm.successTitle": "Thanks for verifying your email address, {name}.",