Feat/onboarding v2 ab test

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

@@ -159,6 +159,8 @@ function AuthOptionsInner({
   simplified = false,
   ignoreMessages = false,
   onboardingSignupButton,
+  autoTriggerProvider,
+  socialProviderScopes,
 }: AuthOptionsProps): ReactElement {
   const { displayToast } = useToastNotification();
   const { syncSettings } = useSettingsContext();
@@ -552,6 +554,7 @@ function AuthOptionsInner({
       provider.toLowerCase(),
       callbackURL,
       additionalData,
+      socialProviderScopes,
     );
     if (!socialUrl) {
       logEvent({
@@ -605,6 +608,21 @@ function AuthOptionsInner({
     }, 500);
   };
 
+  const onProviderClickRef = useRef(onProviderClick);
+  onProviderClickRef.current = onProviderClick;
+  const autoTriggerFiredProvider = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (
+      !autoTriggerProvider ||
+      autoTriggerFiredProvider.current === autoTriggerProvider
+    ) {
+      return;
+    }
+    autoTriggerFiredProvider.current = autoTriggerProvider;
+    onProviderClickRef.current(autoTriggerProvider, false);
+  }, [autoTriggerProvider]);
+
   const onProviderMessage = async (e: MessageEvent) => {
     if (checkIsLoginMessage(e)) {
       return handleLoginMessage(e);

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

@@ -5,14 +5,16 @@ import { providerMap } from './common';
 import OrDivider from './OrDivider';
 import { useLogContext } from '../../contexts/LogContext';
 import type { AuthTriggersType } from '../../lib/auth';
-import { AuthEventNames } from '../../lib/auth';
+import { AuthEventNames, AuthTriggers } from '../../lib/auth';
 import type { ButtonProps } from '../buttons/Button';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { isIOSNative } from '../../lib/func';
 
 import { MemberAlready } from '../onboarding/MemberAlready';
 import SignupDisclaimer from './SignupDisclaimer';
 import { FunnelTargetId } from '../../features/onboarding/types/funnelEvents';
+import { useConditionalFeature } from '../../hooks/useConditionalFeature';
+import { featureOnboardingV2 } from '../../lib/featureManagement';
 
 interface ClassName {
   onboardingSignup?: string;
@@ -105,6 +107,10 @@ export const OnboardingRegistrationForm = ({
   trigger,
 }: OnboardingRegistrationFormProps): ReactElement => {
   const { logEvent } = useLogContext();
+  const { value: isOnboardingV2 } = useConditionalFeature({
+    feature: featureOnboardingV2,
+    shouldEvaluate: trigger === AuthTriggers.Onboarding,
+  });
 
   const trackOpenSignup = () => {
     logEvent({
@@ -157,8 +163,9 @@ export const OnboardingRegistrationForm = ({
         <MemberAlready
           onLogin={() => onExistingEmail?.('')}
           className={{
-            container:
-              'mx-auto mt-6 text-center text-text-secondary typo-callout',
+            container: isOnboardingV2
+              ? 'mx-auto mt-6 w-full justify-center border-t border-border-subtlest-tertiary pt-6 text-center text-text-secondary typo-callout'
+              : 'mx-auto mt-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';
@@ -82,6 +84,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 +170,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 +282,16 @@ const RegistrationForm = ({
             variant={ButtonVariant.Secondary}
           />
           <Typography
-            className={classNames('mt-0.5 flex-1', onboardingGradientClasses)}
+            className={
+              isOnboardingV2
+                ? 'mt-0.5 flex-1 text-text-primary'
+                : classNames('mt-0.5 flex-1', onboardingGradientClasses)
+            }
             tag={TypographyTag.H2}
-            type={TypographyType.Title1}
+            type={
+              isOnboardingV2 ? TypographyType.Title2 : TypographyType.Title1
+            }
+            bold={isOnboardingV2}
           >
             Join daily.dev
           </Typography>
@@ -396,7 +410,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/components/auth/common.tsx

@@ -42,7 +42,7 @@ export const providerMap: ProviderMap = {
     value: 'google',
   },
   github: {
-    icon: <GitHubIcon className="socialIcon" secondary />,
+    icon: <GitHubIcon className="socialIcon" />,
     label: 'GitHub',
     value: 'github',
   },
@@ -130,4 +130,6 @@ export interface AuthOptionsProps {
   targetId?: string;
   ignoreMessages?: boolean;
   onboardingSignupButton?: ButtonProps<'button'>;
+  autoTriggerProvider?: string;
+  socialProviderScopes?: string[];
 }

packages/shared/src/components/icons/GitHub/index.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 import type { IconProps } from '../../Icon';
 import Icon from '../../Icon';
 import WhiteIcon from './white.svg';
+import FilledIcon from './filled.svg';
 
 export const GitHubIcon = (props: IconProps): ReactElement => (
-  <Icon {...props} IconPrimary={WhiteIcon} IconSecondary={WhiteIcon} />
+  <Icon {...props} IconPrimary={WhiteIcon} IconSecondary={FilledIcon} />
 );

packages/shared/src/graphql/onboardingProfileTags.ts

@@ -0,0 +1,38 @@
+import { gql } from 'graphql-request';
+import { gqlClient } from './common';
+
+export type OnboardingTagsResult = {
+  includeTags: string[];
+};
+
+export const GITHUB_PROFILE_TAGS_MUTATION = gql`
+  mutation GitHubProfileTags {
+    githubProfileTags {
+      includeTags
+    }
+  }
+`;
+
+export const ONBOARDING_PROFILE_TAGS_MUTATION = gql`
+  mutation OnboardingProfileTags($prompt: String!) {
+    onboardingProfileTags(prompt: $prompt) {
+      includeTags
+    }
+  }
+`;
+
+export const requestGitHubProfileTags = async (): Promise<string[]> => {
+  const res = await gqlClient.request<{
+    githubProfileTags: OnboardingTagsResult;
+  }>(GITHUB_PROFILE_TAGS_MUTATION);
+  return res.githubProfileTags.includeTags;
+};
+
+export const requestOnboardingProfileTags = async (
+  prompt: string,
+): Promise<string[]> => {
+  const res = await gqlClient.request<{
+    onboardingProfileTags: OnboardingTagsResult;
+  }>(ONBOARDING_PROFILE_TAGS_MUTATION, { prompt });
+  return res.onboardingProfileTags.includeTags;
+};

packages/shared/src/lib/betterAuth.ts

@@ -149,6 +149,7 @@ const getBetterAuthSocialRedirect = async (
   provider: string,
   callbackURL: string,
   additionalData?: SocialAdditionalData,
+  scopes?: string[],
 ): Promise<BetterAuthSocialRedirectResponse> => {
   const absoluteCallbackURL = callbackURL.startsWith('http')
     ? callbackURL
@@ -167,6 +168,7 @@ const getBetterAuthSocialRedirect = async (
       errorCallbackURL: absoluteCallbackURL,
       disableRedirect: true,
       ...(additionalData && { additionalData }),
+      ...(scopes?.length && { scopes }),
     },
     'Failed to get social auth URL',
   );
@@ -182,12 +184,14 @@ export const getBetterAuthSocialRedirectData = (
   provider: string,
   callbackURL: string,
   additionalData?: SocialAdditionalData,
+  scopes?: string[],
 ): Promise<BetterAuthSocialRedirectResponse> =>
   getBetterAuthSocialRedirect(
     'sign-in/social',
     provider,
     callbackURL,
     additionalData,
+    scopes,
   );
 
 export const getBetterAuthSocialUrl = (

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://api.daily.dev/mobile';
 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,3 +151,5 @@ export const sharedPostPreviewFeature = new Feature(
   'shared_post_preview',
   false,
 );
+
+export const featureOnboardingV2 = new Feature('onboarding_v2', isDevelopment);

packages/webapp/__tests__/MostUpvotedPage.tsx

@@ -86,9 +86,12 @@ it('should request most upvoted feed when logged-in', async () => {
       version: 15,
     }),
   ]);
-  await waitFor(() => {
-    expect(screen.getAllByTestId('postItem').length).toBeTruthy();
-  });
+  await waitFor(
+    () => {
+      expect(screen.getAllByTestId('postItem').length).toBeTruthy();
+    },
+    { timeout: 3000 },
+  );
 });
 
 it('should request most upvoted feed when not', async () => {