Experimentally hide the Name and Company Name fields on the signup pa…

…ge (#15622) * Experimentally hide the Name and Company Name fields on the signup page * refactor validation schema
airbytehq · Aug 15, 2022 · ef7f1a0 · ef7f1a0
1 parent d63a24e
commit ef7f1a0
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/airbyte-webapp/src/hooks/services/Experiment/experiments.ts b/airbyte-webapp/src/hooks/services/Experiment/experiments.ts
@@ -7,4 +7,6 @@ export interface Experiments {
   "connector.orderOverwrite": Record<string, number>;
   "authPage.rightSideUrl": string | undefined;
   "authPage.hideSelfHostedCTA": boolean;
+  "authPage.signup.hideName": boolean;
+  "authPage.signup.hideCompanyName": boolean;
 }
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,12 +1,13 @@
 import { Field, FieldProps, Formik } from "formik";
-import React from "react";
+import React, { useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 import * as yup from "yup";
 
 import { LabeledInput, Link, LoadingButton } from "components";
 
 import { useConfig } from "config";
+import { useExperiment } from "hooks/services/Experiment";
 import { FieldError } from "packages/cloud/lib/errors/FieldError";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 
@@ -23,14 +24,6 @@ interface FormValues {
   security: boolean;
 }
 
-const SignupPageValidationSchema = yup.object().shape({
-  email: yup.string().email("form.email.error").required("form.empty.error"),
-  password: yup.string().min(12, "signup.password.minLength").required("form.empty.error"),
-  name: yup.string().required("form.empty.error"),
-  companyName: yup.string().required("form.empty.error"),
-  security: yup.boolean().oneOf([true], "form.empty.error"),
-});
-
 const MarginBlock = styled.div`
   margin-bottom: 15px;
 `;
@@ -197,6 +190,26 @@ export const SignupFormStatusMessage: React.FC = ({ children }) => (
 export const SignupForm: React.FC = () => {
   const { signUp } = useAuthService();
 
+  const showName = !useExperiment("authPage.signup.hideName", false);
+  const showCompanyName = !useExperiment("authPage.signup.hideCompanyName", false);
+
+  const validationSchema = useMemo(() => {
+    const shape = {
+      email: yup.string().email("form.email.error").required("form.empty.error"),
+      password: yup.string().min(12, "signup.password.minLength").required("form.empty.error"),
+      name: yup.string(),
+      companyName: yup.string(),
+      security: yup.boolean().oneOf([true], "form.empty.error"),
+    };
+    if (showName) {
+      shape.name = shape.name.required("form.empty.error");
+    }
+    if (showCompanyName) {
+      shape.companyName = shape.companyName.required("form.empty.error");
+    }
+    return yup.object().shape(shape);
+  }, [showName, showCompanyName]);
+
   return (
     <Formik<FormValues>
       initialValues={{
@@ -207,7 +220,7 @@ export const SignupForm: React.FC = () => {
         news: true,
         security: false,
       }}
-      validationSchema={SignupPageValidationSchema}
+      validationSchema={validationSchema}
       onSubmit={async (values, { setFieldError, setStatus }) =>
         signUp(values).catch((err) => {
           if (err instanceof FieldError) {
@@ -222,10 +235,12 @@ export const SignupForm: React.FC = () => {
     >
       {({ isValid, isSubmitting, values, status }) => (
         <Form>
-          <RowFieldItem>
-            <NameField />
-            <CompanyNameField />
-          </RowFieldItem>
+          {(showName || showCompanyName) && (
+            <RowFieldItem>
+              {showName && <NameField />}
+              {showCompanyName && <CompanyNameField />}
+            </RowFieldItem>
+          )}
 
           <FieldItem>
             <EmailField />