fix: open to correct ai mode based on ld flag

Author: kevinkim-ogp

packages/frontend/src/pages/AiBuilder/AiBuilderContext.tsx

@@ -7,6 +7,7 @@ import { datadogRum } from '@datadog/browser-rum'
 import { useIsMobile } from '@opengovsg/design-system-react'
 
 import PrimarySpinner from '@/components/PrimarySpinner'
+import { LaunchDarklyContext } from '@/contexts/LaunchDarkly'
 import { GET_APPS } from '@/graphql/queries/get-apps'
 import { getStepGroupTypeAndCaption, getStepStructure } from '@/helpers/toolbox'
 
@@ -40,6 +41,8 @@ interface AIBuilderContextValue extends AIBuilderSharedProps {
   stepGroupCaption: string | null
   // DataDog RUM Session ID so we can associate the trace with the RUM
   ddSessionId: string
+  // TODO(kevinkim-ogp): remove this once A/B test is complete
+  aiBuilderType: string
 }
 
 const AiBuilderContext = createContext<AIBuilderContextValue | undefined>(
@@ -69,6 +72,9 @@ export const AiBuilderContextProvider = ({
 }: AiBuilderContextProviderProps) => {
   const isMobile = useIsMobile()
   const ddSessionId = datadogRum.getInternalContext()?.session_id ?? ''
+  // TODO(kevinkim-ogp): remove this once A/B test is complete
+  const { getFlagValue } = useContext(LaunchDarklyContext)
+  const aiBuilderType = getFlagValue('ai-builder-type', 'none')
 
   const { data: getAppsData, loading: isLoadingAllApps } = useQuery(GET_APPS)
 
@@ -123,6 +129,8 @@ export const AiBuilderContextProvider = ({
         stepGroupType,
         stepGroupCaption,
         ddSessionId,
+        // TODO(kevinkim-ogp): remove this once A/B test is complete
+        aiBuilderType,
       }}
     >
       {children}

packages/frontend/src/pages/AiBuilder/index.tsx

@@ -15,7 +15,12 @@ import {
 } from './AiBuilderContext'
 
 function AiBuilderContent() {
-  const { flowName, isFormMode } = useAiBuilderContext()
+  const { aiBuilderType, flowName, isFormMode } = useAiBuilderContext()
+
+  // TODO(kevinkim-ogp): remove this once A/B test is complete
+  if (aiBuilderType === 'ai-form') {
+    return <InvalidEditorPage message="You do not have access to this." />
+  }
 
   return (
     <>

packages/frontend/src/pages/Flows/components/CreateFlowModal/index.tsx

@@ -22,7 +22,7 @@ interface CreateFlowModalProps {
 
 export default function CreateFlowModal(props: CreateFlowModalProps) {
   const { onClose } = props
-  const { createMode } = useCreateFlowContext()
+  const { createMode, aiBuilderType } = useCreateFlowContext()
 
   const navigate = useNavigate()
   const [createFlow, { loading }] = useMutation(CREATE_FLOW)
@@ -69,14 +69,18 @@ export default function CreateFlowModal(props: CreateFlowModalProps) {
       return
     }
 
-    if (createMode === 'ai-form') {
+    // TODO(kevinkim-ogp): remove aiBuilderType once A/B test is complete
+    if (
+      createMode === 'ai-form' &&
+      (aiBuilderType === 'ai-form' || aiBuilderType === 'all')
+    ) {
       // Store the flow name before switching to AI modal content
       setFlowName(trimmedFlowName)
       setShowAiModalContent(true)
       return
     }
 
-    if (createMode === 'ai-chat') {
+    if (createMode === 'ai-chat' && aiBuilderType === 'ai-chat') {
       event.preventDefault()
       onClose()
       navigate(`${URLS.EDITOR}/ai`, {

packages/frontend/src/pages/Flows/components/EmptyFlows.tsx

@@ -9,8 +9,12 @@ import CreatePipeTile, { TileProps } from './CreatePipeTile'
 
 export default function EmptyFlows({ onCreate }: { onCreate: () => void }) {
   const navigate = useNavigate()
-  const { canUseAiBuilder, setCreateMode, setSkipModeSelection } =
-    useCreateFlowContext()
+  const {
+    aiBuilderType,
+    canUseAiBuilder,
+    setCreateMode,
+    setSkipModeSelection,
+  } = useCreateFlowContext()
 
   const TILES = [
     canUseAiBuilder && {
@@ -19,9 +23,13 @@ export default function EmptyFlows({ onCreate }: { onCreate: () => void }) {
         'Describe your workflow and we'll create the steps for you',
       iconName: 'BiSolidMagicWand',
       onClick: () => {
-        setCreateMode('ai-form')
-        setSkipModeSelection(true)
-        onCreate()
+        if (aiBuilderType === 'ai-form' || aiBuilderType === 'all') {
+          setCreateMode('ai-form')
+          setSkipModeSelection(true)
+          onCreate()
+        } else {
+          navigate(`${URLS.EDITOR}/ai`)
+        }
       },
     },
     {