feat(funnels): enable funnels on onboarding

packages/shared/src/components/auth/AuthOptionsInner.tsx

@@ -36,8 +36,6 @@ import { labels } from '../../lib';
 import usePersistentState from '../../hooks/usePersistentState';
 import { IconSize } from '../Icon';
 import { MailIcon } from '../icons';
-import { useFeature } from '../GrowthBookProvider';
-import { featureOnboardingReorder } from '../../lib/featureManagement';
 import { usePixelsContext } from '../../contexts/PixelsContext';
 import { useAuthData } from '../../contexts/AuthDataContext';
 
@@ -61,12 +59,6 @@ const OnboardingRegistrationForm = dynamic(() =>
   ).then((mod) => mod.OnboardingRegistrationForm),
 );
 
-const OnboardingRegistrationFormExperiment = dynamic(() =>
-  import(
-    /* webpackChunkName: "onboardingRegistrationFormExperiment" */ './OnboardingRegistrationForm'
-  ).then((mod) => mod.OnboardingRegistrationFormExperiment),
-);
-
 const AuthSignBack = dynamic(() =>
   import(/* webpackChunkName: "authSignBack" */ './AuthSignBack').then(
     (mod) => mod.AuthSignBack,
@@ -130,8 +122,8 @@ function AuthOptionsInner({
   );
   const { refetchBoot, user, isFunnel } = useAuthContext();
   const router = useRouter();
-  const isOnboardingPage = !!router?.pathname?.startsWith('/onboarding');
-  const isReorderExperiment = useFeature(featureOnboardingReorder);
+  const isOnboardingOrFunnel =
+    !!router?.pathname?.startsWith('/onboarding') || isFunnel;
   const [flow, setFlow] = useState('');
   const [activeDisplay, setActiveDisplay] = useState(() =>
     storage.getItem(SIGNIN_METHOD_KEY) && !forceDefaultDisplay
@@ -206,7 +198,7 @@ function AuthOptionsInner({
     onRedirect: (redirect) => {
       windowPopup.current.location.href = redirect;
     },
-    keepSession: isFunnel,
+    keepSession: isOnboardingOrFunnel,
   });
 
   const {
@@ -223,12 +215,14 @@ function AuthOptionsInner({
       return displayToast(labels.auth.error.generic);
     },
   });
-  const onProfileSuccess = async (options: { redirect?: string } = {}) => {
+  const onProfileSuccess = async (
+    options: { redirect?: string; setSignBack?: boolean } = {},
+  ) => {
     setIsRegistration(true);
-    const { redirect } = options;
+    const { redirect, setSignBack = true } = options;
     const { data } = await refetchBoot();
 
-    if (data.user) {
+    if (data.user && setSignBack) {
       const provider = chosenProvider || 'password';
       onSignBackLogin(data.user as LoggedUser, provider as SignBackProvider);
     }
@@ -268,7 +262,7 @@ function AuthOptionsInner({
     if (!isNativeAuthSupported(provider)) {
       windowPopup.current = window.open();
     }
-    setChosenProvider(provider);
+    await setChosenProvider(provider);
     await onSocialRegistration(provider);
     onAuthStateUpdate?.({ isLoading: true });
   };
@@ -345,6 +339,7 @@ function AuthOptionsInner({
       return onSuccessfulLogin?.();
     }
 
+    onAuthStateUpdate({ defaultDisplay: AuthDisplay.SocialRegistration });
     return onSetActiveDisplay(AuthDisplay.SocialRegistration);
   };
 
@@ -363,11 +358,12 @@ function AuthOptionsInner({
     await syncSettings();
   };
 
-  const onRegister = (params: RegistrationFormValues) => {
-    validateRegistration({
+  const onRegister = async (params: RegistrationFormValues) => {
+    await validateRegistration({
       ...params,
       method: 'password',
     });
+    await onProfileSuccess({ setSignBack: false });
   };
 
   const onForgotPassword = (withEmail?: string) => {
@@ -389,11 +385,6 @@ function AuthOptionsInner({
     onPasswordLogin(params);
   };
 
-  const RegistrationFormComponent =
-    isReorderExperiment && isOnboardingPage
-      ? OnboardingRegistrationFormExperiment
-      : OnboardingRegistrationForm;
-
   return (
     <div
       className={classNames(
@@ -477,7 +468,7 @@ function AuthOptionsInner({
           />
         </Tab>
         <Tab label={AuthDisplay.OnboardingSignup}>
-          <RegistrationFormComponent
+          <OnboardingRegistrationForm
             onContinueWithEmail={() => {
               onAuthStateUpdate({
                 isAuthenticating: true,

packages/shared/src/components/auth/AuthenticationBanner.tsx

@@ -5,7 +5,6 @@ import classed from '../../lib/classed';
 import { OnboardingHeadline } from './OnboardingHeadline';
 import AuthOptions from './AuthOptions';
 import { AuthTriggers } from '../../lib/auth';
-import { MemberAlready } from '../onboarding/MemberAlready';
 import { useAuthContext } from '../../contexts/AuthContext';
 import { authGradientBg, BottomBannerContainer } from '../banners';
 import { ButtonVariant } from '../buttons/common';
@@ -69,18 +68,6 @@ export function AuthenticationBanner({
               variant: ButtonVariant.Primary,
             }}
           />
-          <MemberAlready
-            onLogin={() =>
-              showLogin({
-                trigger: AuthTriggers.Onboarding,
-                options: { isLogin: true },
-              })
-            }
-            className={{
-              container: 'justify-center text-text-secondary typo-callout',
-              login: 'font-bold',
-            }}
-          />
         </Section>
       </div>
     </BottomBannerContainer>

packages/shared/src/components/auth/OnboardingRegistrationForm.tsx

@@ -1,6 +1,5 @@
 import type { ReactElement } from 'react';
 import React, { useEffect } from 'react';
-import classNames from 'classnames';
 import type { AuthFormProps } from './common';
 import { providerMap } from './common';
 import OrDivider from './OrDivider';
@@ -9,16 +8,11 @@ import type { AuthTriggersType } from '../../lib/auth';
 import { AuthEventNames } from '../../lib/auth';
 import type { ButtonProps } from '../buttons/Button';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
-import AuthForm from './AuthForm';
-import { TextField } from '../fields/TextField';
-import { MailIcon } from '../icons';
-import { IconSize } from '../Icon';
-import Alert, { AlertParagraph, AlertType } from '../widgets/Alert';
 import { isIOSNative } from '../../lib/func';
 
-import { useCheckExistingEmail } from '../../hooks';
 import { MemberAlready } from '../onboarding/MemberAlready';
 import SignupDisclaimer from './SignupDisclaimer';
+import { FunnelTargetId } from '../../features/onboarding/types/funnelEvents';
 
 interface ClassName {
   onboardingSignup?: string;
@@ -101,135 +95,6 @@ const getSignupProviders = () => {
 };
 
 export const OnboardingRegistrationForm = ({
-  onSignup,
-  onExistingEmail,
-  onProviderClick,
-  targetId,
-  isReady,
-  trigger,
-  className,
-  onboardingSignupButton,
-}: OnboardingRegistrationFormProps): ReactElement => {
-  const { logEvent } = useLogContext();
-  const { email, onEmailCheck } = useCheckExistingEmail({
-    onBeforeEmailCheck: () => {
-      logEvent({
-        event_name: 'click',
-        target_type: AuthEventNames.SignUpProvider,
-        target_id: 'email',
-        extra: JSON.stringify({ trigger }),
-      });
-    },
-    onValidEmail: onSignup,
-  });
-  const onboardingSignupButtonProps = {
-    size: ButtonSize.Large,
-    variant: ButtonVariant.Primary,
-    ...onboardingSignupButton,
-  };
-
-  const onSocialClick = (provider: string) => {
-    onProviderClick?.(provider, email.alreadyExists);
-  };
-
-  useEffect(() => {
-    logEvent({
-      event_name: email.alreadyExists
-        ? AuthEventNames.OpenLogin
-        : AuthEventNames.OpenSignup,
-      extra: JSON.stringify({ trigger }),
-      target_id: targetId,
-    });
-    // @NOTE see https://dailydotdev.atlassian.net/l/cp/dK9h1zoM
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [email.alreadyExists]);
-
-  return (
-    <>
-      <AuthForm
-        className={classNames('mb-8 gap-8', className?.onboardingForm)}
-        onSubmit={onEmailCheck}
-        aria-label={email.alreadyExists ? 'Login form' : 'Signup form'}
-      >
-        <TextField
-          leftIcon={
-            <MailIcon aria-hidden role="presentation" size={IconSize.Small} />
-          }
-          required
-          inputId="email"
-          label="Email"
-          type="email"
-          name="email"
-          focused
-          pressed
-          className={{ container: 'bg-overlay-active-salt' }}
-        />
-
-        {email.alreadyExists && (
-          <>
-            <Alert type={AlertType.Error} flexDirection="flex-row">
-              <AlertParagraph className="!mt-0 flex-1">
-                Email is taken. Existing user?{' '}
-                <button
-                  type="button"
-                  onClick={() => {
-                    onExistingEmail(email.value);
-                  }}
-                  className="font-bold underline"
-                >
-                  Log in.
-                </button>
-              </AlertParagraph>
-            </Alert>
-          </>
-        )}
-
-        <Button
-          className="w-full"
-          loading={!isReady || email.isCheckPending}
-          type="submit"
-          variant={ButtonVariant.Primary}
-        >
-          Sign up - Free forever ➔
-        </Button>
-      </AuthForm>
-      <OrDivider
-        className={{
-          container: classNames('mb-8', className?.onboardingDivider),
-          text: 'text-text-tertiary',
-        }}
-        label="Or sign up with"
-        aria-hidden
-      />
-      <div
-        aria-label="Social login buttons"
-        className={classNames(
-          'flex flex-col gap-8 pb-8',
-          className.onboardingSignup,
-        )}
-        role="list"
-      >
-        {getSignupProviders().map((provider) => (
-          <Button
-            aria-label={`${email.alreadyExists ? 'Login' : 'Signup'} using ${
-              provider.label
-            }`}
-            icon={provider.icon}
-            key={provider.value}
-            loading={!isReady}
-            onClick={() => onSocialClick(provider.value)}
-            type="button"
-            {...onboardingSignupButtonProps}
-          >
-            {provider.label}
-          </Button>
-        ))}
-      </div>
-    </>
-  );
-};
-
-export const OnboardingRegistrationFormExperiment = ({
   isReady,
   onContinueWithEmail,
   onExistingEmail,
@@ -266,6 +131,7 @@ export const OnboardingRegistrationFormExperiment = ({
             <Button
               aria-label={`Continue using ${provider.label}`}
               className="w-full"
+              data-funnel-track={FunnelTargetId.SignupProvider}
               icon={provider.icon}
               loading={!isReady}
               onClick={() => onProviderClick?.(provider.value, false)}
@@ -297,6 +163,7 @@ export const OnboardingRegistrationFormExperiment = ({
         <Button
           aria-label="Signup using email"
           className="mb-8"
+          data-funnel-track={FunnelTargetId.SignupProvider}
           onClick={() => {
             trackOpenSignup();
             onContinueWithEmail?.();

packages/shared/src/components/auth/RegistrationForm.spec.tsx

@@ -10,12 +10,12 @@ import {
   mockRegistrationFlow,
 } from '../../../__tests__/fixture/auth';
 import { AuthContextProvider } from '../../contexts/AuthContext';
-import type { AuthOptionsProps } from './AuthOptions';
 import AuthOptions from './AuthOptions';
 import SettingsContext from '../../contexts/SettingsContext';
 import { mockGraphQL } from '../../../__tests__/helpers/graphql';
 import { GET_USERNAME_SUGGESTION } from '../../graphql/users';
 import { AuthTriggers } from '../../lib/auth';
+import type { AuthOptionsProps } from './common';
 
 const user = null;
 
@@ -92,11 +92,11 @@ const renderRegistration = async (
     },
   });
   await screen.findByTestId('registration_form');
-  const nameInput = screen.getByLabelText('Name');
+  const nameInput = screen.getByPlaceholderText('Name');
   fireEvent.input(screen.getByPlaceholderText('Enter a username'), {
     target: { value: username },
   });
-  fireEvent.input(screen.getByLabelText('Name'), {
+  fireEvent.input(screen.getByPlaceholderText('Name'), {
     target: { value: name },
   });
   simulateTextboxInput(nameInput as HTMLTextAreaElement, name);