Update FCP modal for users with unverified emails

airbytehq · Jan 19, 2023 · f766423 · f766423
1 parent 77848b9
commit f766423
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/...d/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.module.scss b/...d/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.module.scss
@@ -33,6 +33,17 @@
   flex: 0 0 82px;
 }
 
-.warning {
-  color: colors.$red-400;
+.resendEmailLink {
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 0;
+  color: colors.$dark-blue;
+  border: none;
+  background-color: transparent;
+  font-size: inherit;
+
+  &:hover,
+  &:active {
+    color: colors.$blue;
+  }
 }
diff --git a/...ges/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx b/...ges/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx
@@ -1,7 +1,10 @@
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useEffect, useRef, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { Button } from "components/ui/Button";
+import { Callout } from "components/ui/Callout";
 import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
 import { ModalFooter } from "components/ui/Modal/ModalFooter";
@@ -64,27 +67,23 @@ export const EnrollmentModalContent: React.FC<EnrollmentModalContentProps> = ({
     };
   }, []);
 
-  const EnrollmentCta = () =>
-    emailVerified ? (
-      <Button isLoading={isLoading} onClick={startStripeCheckout}>
-        <FormattedMessage id="freeConnectorProgram.enrollmentModal.enrollButtonText" />
-      </Button>
-    ) : (
-      <Button isLoading={isLoading} onClick={sendEmailVerification}>
-        <FormattedMessage id="freeConnectorProgram.enrollmentModal.unvalidatedEmailButtonText" />
-      </Button>
-    );
-
   const EnrollmentEmailVerificationWarning = () => {
     const WarningContent = () => (
-      <FlexContainer>
-        <FlexContainer justifyContent="center" className={styles.iconContainer}>
-          <MailSVG />
-        </FlexContainer>
-        <Text size="lg" className={styles.warning}>
-          <FormattedMessage id="freeConnectorProgram.enrollmentModal.unvalidatedEmailWarning" />
+      <Callout>
+        <FontAwesomeIcon icon={faWarning} />
+        <Text>
+          <FormattedMessage
+            id="freeConnectorProgram.enrollmentModal.unvalidatedEmailWarning"
+            values={{
+              resendEmail: (content: React.ReactNode) => (
+                <button className={styles.resendEmailLink} onClick={sendEmailVerification}>
+                  {content}
+                </button>
+              ),
+            }}
+          />
         </Text>
-      </FlexContainer>
+      </Callout>
     );
 
     return <>{!emailVerified && <WarningContent />}</>;
@@ -146,7 +145,9 @@ export const EnrollmentModalContent: React.FC<EnrollmentModalContentProps> = ({
             </Button>
           </FlexItem>
           <FlexItem>
-            <EnrollmentCta />
+            <Button disabled={!emailVerified} isLoading={isLoading} onClick={startStripeCheckout}>
+              <FormattedMessage id="freeConnectorProgram.enrollmentModal.enrollButtonText" />
+            </Button>
           </FlexItem>
         </FlexContainer>
       </ModalFooter>

diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json
@@ -187,7 +187,7 @@
   "freeConnectorProgram.enrollmentModal.free": "<p1>Alpha and Beta Connectors are free while you're in the program.</p1><p2>The whole Connection is free until both Connectors have move into General Availability (GA)</p2>",
   "freeConnectorProgram.enrollmentModal.emailNotification": "We will let you know through email before a Connector you use moves to GA",
   "freeConnectorProgram.enrollmentModal.cardOnFile": "When both Connectors are in GA, the Connection will no longer be free. You'll need to have a credit card on file to enroll so Airbyte can handle a Connection's transition to paid service.",
-  "freeConnectorProgram.enrollmentModal.unvalidatedEmailWarning": "You must verify your email address to enroll in the Free connector program. Please check your inbox for a verification link, and try again after you've verified your address.",
+  "freeConnectorProgram.enrollmentModal.unvalidatedEmailWarning": "You need to <b>verify your email</b> address before you can enroll in the Free Connector Program. <resendEmail>Re-send verification email</resendEmail>.",
   "freeConnectorProgram.enrollmentModal.cancelButtonText": "Cancel",
   "freeConnectorProgram.enrollmentModal.enrollButtonText": "Enroll now!",
   "freeConnectorProgram.enrollmentModal.unvalidatedEmailButtonText": "Resend email validation",