Feat/onboarding v2 ab test

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

@@ -158,7 +158,7 @@ export const OnboardingRegistrationForm = ({
           onLogin={() => onExistingEmail?.('')}
           className={{
             container:
-              'mx-auto mt-6 text-center text-text-secondary typo-callout',
+              'mx-auto mt-6 w-full justify-center border-t border-border-subtlest-tertiary pt-6 text-center text-text-secondary typo-callout',
             login: '!text-inherit',
           }}
         />

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

@@ -10,6 +10,8 @@ import type {
   RegistrationParameters,
 } from '../../lib/auth';
 import { AuthEventNames, AuthTriggers } from '../../lib/auth';
+import { useConditionalFeature } from '../../hooks/useConditionalFeature';
+import { featureOnboardingV2 } from '../../lib/featureManagement';
 import { formToJson } from '../../lib/form';
 import { Button, ButtonVariant, ButtonSize } from '../buttons/Button';
 import { PasswordField } from '../fields/PasswordField';
@@ -33,7 +35,6 @@ import {
   TypographyTag,
   TypographyType,
 } from '../typography/Typography';
-import { onboardingGradientClasses } from '../onboarding/common';
 import { useAuthData } from '../../contexts/AuthDataContext';
 import { authAtom } from '../../features/onboarding/store/onboarding.store';
 import { FunnelTargetId } from '../../features/onboarding/types/funnelEvents';
@@ -82,6 +83,11 @@ const RegistrationForm = ({
   const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
   const [name, setName] = useState('');
   const isRecruiterOnboarding = trigger === AuthTriggers.RecruiterSelfServe;
+  const { value: isOnboardingV2 } = useConditionalFeature({
+    feature: featureOnboardingV2,
+    shouldEvaluate: trigger === AuthTriggers.Onboarding,
+  });
+  const hideExperienceLevel = isRecruiterOnboarding || isOnboardingV2;
   const {
     username,
     setUsername,
@@ -163,7 +169,7 @@ const RegistrationForm = ({
     );
     delete values['cf-turnstile-response'];
 
-    const requiresExperienceLevel = !isRecruiterOnboarding;
+    const requiresExperienceLevel = !hideExperienceLevel;
     if (
       !values['traits.name']?.length ||
       !values['traits.username']?.length ||
@@ -275,9 +281,10 @@ const RegistrationForm = ({
             variant={ButtonVariant.Secondary}
           />
           <Typography
-            className={classNames('mt-0.5 flex-1', onboardingGradientClasses)}
+            className="mt-0.5 flex-1 text-text-primary"
             tag={TypographyTag.H2}
-            type={TypographyType.Title1}
+            type={TypographyType.Title2}
+            bold
           >
             Join daily.dev
           </Typography>
@@ -396,7 +403,7 @@ const RegistrationForm = ({
           }
           rightIcon={usernameIcon}
         />
-        {!isRecruiterOnboarding && (
+        {!hideExperienceLevel && (
           <ExperienceLevelDropdown
             className={{ container: 'w-full' }}
             name="traits.experienceLevel"

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

@@ -5,7 +5,9 @@ import type {
   AuthTriggersType,
   SocialRegistrationParameters,
 } from '../../lib/auth';
-import { AuthEventNames } from '../../lib/auth';
+import { AuthEventNames, AuthTriggers } from '../../lib/auth';
+import { useConditionalFeature } from '../../hooks/useConditionalFeature';
+import { featureOnboardingV2 } from '../../lib/featureManagement';
 import { formToJson } from '../../lib/form';
 import { Button, ButtonVariant } from '../buttons/Button';
 import ImageInput from '../fields/ImageInput';
@@ -57,9 +59,15 @@ export const SocialRegistrationForm = ({
   onSignup,
   isLoading,
   simplified,
+  trigger,
 }: SocialRegistrationFormProps): ReactElement => {
   const { logEvent } = useLogContext();
   const { user } = useContext(AuthContext);
+  const { value: isOnboardingV2 } = useConditionalFeature({
+    feature: featureOnboardingV2,
+    shouldEvaluate: trigger === AuthTriggers.Onboarding,
+  });
+  const hideExperienceLevel = isOnboardingV2;
   const [nameHint, setNameHint] = useState<string>(null);
   const [usernameHint, setUsernameHint] = useState<string>(null);
   const [experienceLevelHint, setExperienceLevelHint] = useState<string>(null);
@@ -118,7 +126,7 @@ export const SocialRegistrationForm = ({
       return;
     }
 
-    if (!values.experienceLevel?.length) {
+    if (!hideExperienceLevel && !values.experienceLevel?.length) {
       logError('Experience level not provided');
       setExperienceLevelHint('Please select your experience level');
       return;
@@ -229,18 +237,20 @@ export const SocialRegistrationForm = ({
           }
           rightIcon={isLoadingUsername ? <Loader /> : null}
         />
-        <ExperienceLevelDropdown
-          className={{ container: 'w-full' }}
-          name="experienceLevel"
-          onChange={() => {
-            if (experienceLevelHint) {
-              setExperienceLevelHint(null);
-            }
-          }}
-          valid={experienceLevelHint === null}
-          hint={experienceLevelHint}
-          saveHintSpace
-        />
+        {!hideExperienceLevel && (
+          <ExperienceLevelDropdown
+            className={{ container: 'w-full' }}
+            name="experienceLevel"
+            onChange={() => {
+              if (experienceLevelHint) {
+                setExperienceLevelHint(null);
+              }
+            }}
+            valid={experienceLevelHint === null}
+            hint={experienceLevelHint}
+            saveHintSpace
+          />
+        )}
         <span className="border-b border-border-subtlest-tertiary pb-4 text-text-secondary typo-subhead">
           Your email will be used to send you product and community updates
         </span>

packages/shared/src/lib/constants.ts

@@ -33,6 +33,7 @@ export const slackIntegration = 'https://r.daily.dev/slack';
 export const statusPage = 'https://r.daily.dev/status';
 export const businessWebsiteUrl = 'https://r.daily.dev/business';
 export const appsUrl = 'https://daily.dev/apps';
+export const mobileAppUrl = 'https://app.daily.dev';
 export const timezoneSettingsUrl = 'https://r.daily.dev/timezone';
 export const isDevelopment = process.env.NODE_ENV === 'development';
 export const isProductionAPI =

packages/shared/src/lib/featureManagement.ts

@@ -151,6 +151,8 @@ export const sharedPostPreviewFeature = new Feature(
   false,
 );
 
+export const featureOnboardingV2 = new Feature('onboarding_v2', isDevelopment);
+
 export const featureUpvoteCountThreshold = new Feature<{
   threshold: number;
   belowThresholdLabel: string;