feat: signup corporate-only experiment with exposure and new_signup events

frontend/common/stores/account-store.js

@@ -17,6 +17,8 @@ import { hidePylon, identifyChatUser } from 'common/loadChat'
 import { service } from 'common/service'
 import { getBuildVersion } from 'common/services/useBuildVersion'
 import { createOnboardingSupportOptIn } from 'common/services/useOnboardingSupportOptIn'
+import flagsmith from '@flagsmith/flagsmith'
+import isFreeEmailDomain from 'common/utils/isFreeEmailDomain'
 
 const controller = {
   acceptInvite: (id) => {
@@ -244,6 +246,18 @@ const controller = {
         }
 
         data.setToken(Project.cookieAuthEnabled ? 'true' : res.key)
+        if (res.is_new_user) {
+          try {
+            flagsmith.trackEvent('new_signup', {
+              metadata: {
+                invite: !!API.getInvite(),
+                signup_method: type,
+              },
+            })
+          } catch (e) {
+            // never let analytics break the login flow
+          }
+        }
         return controller.onLogin()
       })
       .catch((e) => API.ajaxHandler(store, e))
@@ -265,6 +279,20 @@ const controller = {
       .then(async (res) => {
         data.setToken(Project.cookieAuthEnabled ? 'true' : res.key)
         API.trackEvent(Constants.events.REGISTER)
+        const freeEmailDomain = isFreeEmailDomain(user.email)
+        try {
+          flagsmith.trackEvent('new_signup', {
+            metadata: {
+              ...(freeEmailDomain && { domain: user.email.split('@')[1] }),
+              free_email_domain: freeEmailDomain,
+              invite: !!API.getInvite(),
+              signup_method: 'email',
+              utm_source: user.utm_data?.utm_source,
+            },
+          })
+        } catch (e) {
+          // never let analytics break the signup flow
+        }
         if (API.getReferrer()) {
           API.trackEvent(
             Constants.events.REFERRER_REGISTERED(API.getReferrer().utm_source),

frontend/common/useSignupExperiment.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState } from 'react'
+import flagsmith from '@flagsmith/flagsmith'
+import isFreeEmailDomain from './utils/isFreeEmailDomain'
+import { storageGet, storageSet } from './safeLocalStorage'
+
+// The experiment only starts (identify + exposure) once the visitor types a
+// free email domain — corporate-email visitors never enter the experiment.
+export default function useSignupExperiment(
+  useEnvironmentFlag: boolean,
+  email: string,
+) {
+  const [variant, setVariant] = useState<string>()
+  const started = useRef(false)
+
+  useEffect(() => {
+    if (useEnvironmentFlag || started.current || !isFreeEmailDomain(email)) {
+      return
+    }
+    started.current = true
+    const identifyAndExpose = async () => {
+      const id =
+        storageGet('signup_anonymous_id') ||
+        (crypto.randomUUID?.() ?? `${Date.now()}-${Math.random()}`)
+      storageSet('signup_anonymous_id', id)
+      // @ts-expect-error transient is missing from the SDK's identify type
+      await flagsmith.identify(id, {}, true)
+      const flag = flagsmith.getExperimentFlag('signup_corporate_only')
+      setVariant(flag?.enabled ? flag.variant : undefined)
+    }
+    identifyAndExpose().catch(() => {
+      started.current = false
+    })
+  }, [useEnvironmentFlag, email])
+
+  return variant
+}

frontend/package.json

@@ -63,7 +63,7 @@
     "@dnd-kit/abstract": "^0.3.2",
     "@dnd-kit/helpers": "^0.3.2",
     "@dnd-kit/react": "^0.3.2",
-    "@flagsmith/flagsmith": "11.0.0-internal.11",
+    "@flagsmith/flagsmith": "12.1.0",
     "@ionic/react": "^7.5.3",
     "@react-oauth/google": "^0.2.8",
     "@reduxjs/toolkit": "1.9.1",

frontend/web/components/pages/HomePage.tsx

@@ -31,6 +31,7 @@ import AccountStore from 'common/stores/account-store'
 import { LoginRequest, RegisterRequest } from 'common/types/requests'
 import { useGetBuildVersionQuery } from 'common/services/useBuildVersion'
 import { useUTMs } from 'common/useUTMs'
+import useSignupExperiment from 'common/useSignupExperiment'
 
 const HomePage: React.FC = () => {
   const history = useHistory()
@@ -180,6 +181,13 @@ const HomePage: React.FC = () => {
       currentLocation.indexOf('signup') !== -1)
   const disableSignup = preventSignup && isSignup
   const preventEmailPassword = Project.preventEmailPassword
+
+  const signupVariant = useSignupExperiment(
+    !isSignup || isInvite || !!preventEmailPassword || !!AccountStore.getUser(),
+    email,
+  )
+  const blockGenericEmailDomain =
+    signupVariant === 'signup_corporate_only' && isFreeEmailDomain(email)
   const disableForgotPassword = Project.preventForgotPassword
   const oauths: React.ReactNode[] = []
   const disableOauthRegister = Utils.getFlagsmithHasFeature(
@@ -627,12 +635,16 @@ const HomePage: React.FC = () => {
                                   name='email'
                                   id='email'
                                 />
-                                {isFreeEmailDomain(email) && (
-                                  <InfoMessage>
-                                    Signing up with a work email makes it easier
-                                    for co-workers to join your Flagsmith
-                                    organisation.
-                                  </InfoMessage>
+                                {blockGenericEmailDomain ? (
+                                  <ErrorMessage error='Please use your work email address to create your account.' />
+                                ) : (
+                                  isFreeEmailDomain(email) && (
+                                    <InfoMessage>
+                                      Signing up with a work email makes it
+                                      easier for co-workers to join your
+                                      Flagsmith organisation.
+                                    </InfoMessage>
+                                  )
                                 )}
                                 <InputGroup
                                   title='Password'
@@ -663,7 +675,10 @@ const HomePage: React.FC = () => {
                                     disabled={
                                       isLoading ||
                                       isSaving ||
-                                      !allRequirementsMet
+                                      !allRequirementsMet ||
+                                      !firstName.trim() ||
+                                      !lastName.trim() ||
+                                      blockGenericEmailDomain
                                     }
                                     className='px-4 mt-3 full-width'
                                     type='submit'