🪟 🧪 [Experiment] Simplify signup left side (#22402)

letiescanciano · web-flow · commit 17c77fc819ef · 2023-02-09T08:43:24.000+01:00
* 🪟 🧪 [Experiment] Simplify signup left side We want to experiment if simplifying the left side on the sign up page and dividing the signup methods, increase conversion of corporate emails on the page. How? - Making Oauth the default method - Email/password method is still available but user will see an error for personal emails. They can still sign up though. Airtable details: https://airtable.com/appIuY0uKPVnk8TWT/tbl2SxXnUwf6fVCWS/viw9frYvld7ks7aNo/recnFzE4HBB8RP1uY?blocks=hide Demo: https://www.loom.com/share/9b706682d89845b1bf2455a1f3e1520d
diff --git a/airbyte-webapp/src/hooks/services/Experiment/experiments.ts b/airbyte-webapp/src/hooks/services/Experiment/experiments.ts
@@ -18,6 +18,7 @@ export interface Experiments {
   "authPage.signup.hideName": boolean;
   "authPage.signup.hideCompanyName": boolean;
   "onboarding.speedyConnection": boolean;
+  "authPage.signup.simplifyLeftSide": boolean;
   "connection.onboarding.sources": string;
   "connection.onboarding.destinations": string;
   "connection.autoDetectSchemaChanges": boolean;
diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -31,6 +31,7 @@
   "form.yourEmail": "Your email",
   "form.email.placeholder": "you@company.com",
   "form.email.error": "Enter a valid email",
+  "form.workEmail.error": "Enter a valid work email",
   "form.empty.error": "Required",
   "form.selectConnector": "Type to search for a connector",
   "form.searchName": "search by name...",
diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json
@@ -8,7 +8,7 @@
   "login.resendEmail": "Didn’t receive the email? Send it again",
   "login.yourEmail": "Your work email*",
   "login.inviteEmail": "For security, re-enter your invite email*",
-  "login.yourEmail.placeholder": "work.email@example.com",
+  "login.yourEmail.placeholder": "name@company.com",
   "login.yourEmail.notFound": "User not found",
   "login.unknownError": "An unknown error has occurred",
   "login.password": "Enter your password*",
@@ -160,6 +160,12 @@
   "firebase.auth.error.default": "Confirmation email cannot be sent. Please try again later.",
 
   "signup.password.minLength": "Password should be at least 12 characters",
+  "signup.details.noCreditCard": "No credit card required",
+  "signup.details.instantSetup": "Instant setup",
+  "signup.details.freeTrial": "14-day free trial",
+  "signup.title": "Create your Airbyte account",
+  "signup.method.email": "Sign up using email",
+  "signup.method.oauth": "Sign up using Google or GitHub",
   "email.duplicate": "Email already exists",
   "email.notfound": "Email not found",
   "email.disabled": "Your account is disabled",
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx
@@ -6,9 +6,11 @@ import { FlexContainer } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
 
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
+import { useExperiment } from "hooks/services/Experiment";
 
 import { Separator } from "./components/Separator";
 import { Disclaimer, SignupForm } from "./components/SignupForm";
+import { SimpleLeftSide } from "./components/SimpleLeftSide/SimpleLeftSide";
 import SpecialBlock from "./components/SpecialBlock";
 import styles from "./SignupPage.module.scss";
 import { OAuthLogin } from "../OAuthLogin";
@@ -19,7 +21,11 @@ interface SignupPageProps {
 
 const SignupPage: React.FC<SignupPageProps> = ({ highlightStyle }) => {
   useTrackPage(PageTrackingCodes.SIGNUP);
+  const isSimpleLeftSide = useExperiment("authPage.signup.simplifyLeftSide", false);
 
+  if (isSimpleLeftSide) {
+    return <SimpleLeftSide />;
+  }
   return (
     <FlexContainer direction="column" gap="xl">
       <HeadTitle titles={[{ id: "login.signup" }]} />
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.module.scss
@@ -1,5 +1,5 @@
-@use "../../../../../../scss/colors";
-@use "../../../../../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 
 .statusMessage {
   margin-top: variables.$spacing-md;
@@ -9,3 +9,19 @@
 .disclaimer {
   margin-top: variables.$spacing-xl;
 }
+
+.passwordCheckContainer {
+  margin-top: variables.$spacing-lg;
+}
+
+.checkIcon {
+  color: colors.$dark-blue-100;
+}
+
+.error {
+  color: colors.$red;
+}
+
+.valid {
+  color: colors.$green;
+}
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.tsx b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.tsx
@@ -1,3 +1,6 @@
+import { faCheckCircle, faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import classNames from "classnames";
 import { Field, FieldProps, Formik, Form } from "formik";
 import React, { useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -7,10 +10,13 @@ import * as yup from "yup";
 
 import { LabeledInput, Link } from "components";
 import { Button } from "components/ui/Button";
+import { FlexContainer } from "components/ui/Flex";
+import { Text } from "components/ui/Text";
 
 import { useExperiment } from "hooks/services/Experiment";
 import { FieldError } from "packages/cloud/lib/errors/FieldError";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
+import { FREE_EMAIL_SERVICE_PROVIDERS } from "packages/cloud/services/auth/freeEmailProviders";
 import { isGdprCountry } from "utils/dataPrivacy";
 import { links } from "utils/links";
 
@@ -75,6 +81,18 @@ export const CompanyNameField: React.FC = () => {
 export const EmailField: React.FC<{ label?: React.ReactNode }> = ({ label }) => {
   const { formatMessage } = useIntl();
 
+  const isCorporateEmail = (email?: string) =>
+    !FREE_EMAIL_SERVICE_PROVIDERS.some((provider) => email?.endsWith(`@${provider}`));
+
+  const getMessage = ({ touched, error, value }: { touched: boolean; error?: string; value?: string }) => {
+    if (touched && error) {
+      return formatMessage({ id: error });
+    }
+    if (touched && !isCorporateEmail(value)) {
+      return formatMessage({ id: "form.workEmail.error" });
+    }
+    return null;
+  };
   return (
     <Field name="email">
       {({ field, meta }: FieldProps<string>) => (
@@ -85,8 +103,8 @@ export const EmailField: React.FC<{ label?: React.ReactNode }> = ({ label }) =>
             id: "login.yourEmail.placeholder",
           })}
           type="text"
-          error={!!meta.error && meta.touched}
-          message={meta.touched && meta.error && formatMessage({ id: meta.error })}
+          error={(!!meta.error && meta.touched) || (meta.touched && !isCorporateEmail(field.value))}
+          message={getMessage({ touched: meta.touched, error: meta.error, value: field.value })}
         />
       )}
     </Field>
@@ -99,16 +117,36 @@ export const PasswordField: React.FC<{ label?: React.ReactNode }> = ({ label })
   return (
     <Field name="password">
       {({ field, meta }: FieldProps<string>) => (
-        <LabeledInput
-          {...field}
-          label={label || <FormattedMessage id="login.password" />}
-          placeholder={formatMessage({
-            id: "login.password.placeholder",
-          })}
-          type="password"
-          error={!!meta.error && meta.touched}
-          message={meta.touched && meta.error && formatMessage({ id: meta.error })}
-        />
+        <>
+          <LabeledInput
+            {...field}
+            label={label || <FormattedMessage id="login.password" />}
+            placeholder={formatMessage({
+              id: "login.password.placeholder",
+            })}
+            type="password"
+            error={!!meta.error && meta.touched}
+          />
+
+          <FlexContainer gap="sm" alignItems="center" className={styles.passwordCheckContainer}>
+            <FontAwesomeIcon
+              icon={Boolean(meta.error) && meta.touched ? faXmarkCircle : faCheckCircle}
+              className={classNames(styles.checkIcon, {
+                [styles.error]: Boolean(meta.error) && meta.touched,
+                [styles.valid]: meta.touched && !meta.error,
+              })}
+            />
+
+            <Text
+              size="sm"
+              className={classNames({
+                [styles.error]: Boolean(meta.error) && meta.touched,
+              })}
+            >
+              <FormattedMessage id="signup.password.minLength" />
+            </Text>
+          </FlexContainer>
+        </>
       )}
     </Field>
   );
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.module.scss
@@ -0,0 +1,11 @@
+@use "scss/colors";
+@use "scss/variables";
+
+.checkIcon {
+  color: colors.$dark-blue-100;
+}
+
+.detailTextContainer {
+  min-width: fit-content;
+  color: colors.$dark-blue;
+}
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.tsx b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.tsx
@@ -0,0 +1,64 @@
+import { faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { faCheckCircle, faEnvelope } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+import { FormattedMessage } from "react-intl";
+
+import { HeadTitle } from "components/common/HeadTitle";
+import { Button } from "components/ui/Button";
+import { FlexContainer } from "components/ui/Flex";
+import { Heading } from "components/ui/Heading";
+
+import styles from "./SimpleLeftSide.module.scss";
+import { OAuthLogin } from "../../../OAuthLogin";
+import { Disclaimer, SignupForm } from "../SignupForm";
+
+const Detail: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
+  return (
+    <FlexContainer gap="sm" alignItems="center" className={styles.detailTextContainer}>
+      <FontAwesomeIcon icon={faCheckCircle} className={styles.checkIcon} />
+      {children}
+    </FlexContainer>
+  );
+};
+export const SimpleLeftSide: React.FC = () => {
+  const [showOauth, setShowOauth] = useState(true);
+  return (
+    <FlexContainer direction="column" gap="xl">
+      <HeadTitle titles={[{ id: "login.signup" }]} />
+      <Heading as="h1" centered>
+        <FormattedMessage id="signup.title" />
+      </Heading>
+
+      <FlexContainer justifyContent="center" alignItems="center">
+        <Detail>
+          <FormattedMessage id="signup.details.noCreditCard" />
+        </Detail>
+        <Detail>
+          <FormattedMessage id="signup.details.instantSetup" />
+        </Detail>
+        <Detail>
+          <FormattedMessage id="signup.details.freeTrial" />
+        </Detail>
+      </FlexContainer>
+      {showOauth ? <OAuthLogin /> : <SignupForm />}
+
+      {showOauth ? (
+        <Button
+          onClick={() => setShowOauth(false)}
+          variant="clear"
+          size="sm"
+          icon={<FontAwesomeIcon icon={faEnvelope} />}
+        >
+          <FormattedMessage id="signup.method.email" />
+        </Button>
+      ) : (
+        <Button onClick={() => setShowOauth(true)} variant="clear" size="sm" icon={<FontAwesomeIcon icon={faGoogle} />}>
+          <FormattedMessage id="signup.method.oauth" />
+        </Button>
+      )}
+
+      <Disclaimer />
+    </FlexContainer>
+  );
+};
