From 6cc678947b4974638851113b706ac05c8875a9a1 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Fri, 29 Nov 2024 23:11:09 +0800
Subject: [PATCH 01/22] feat: implement search functionality

---
 .../FieldListDrawer/FieldListDrawer.tsx       | 25 ++++++++++++++++++-
 .../field-panels/BasicFieldPanel.tsx          |  1 +
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
index 447887f94a..726ab65361 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
@@ -1,9 +1,14 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { BiSearch } from 'react-icons/bi'
 import {
   Box,
   Divider,
   Flex,
+  Icon,
+  Input,
+  InputGroup,
+  InputLeftElement,
   TabList,
   TabPanel,
   TabPanels,
@@ -24,7 +29,25 @@ import {
   MyInfoFieldPanel,
   PaymentsInputPanel,
 } from './field-panels'
-import { FieldSearchBar } from './FieldSearchBar'
+
+const FieldSearchBar = ({
+  searchValue,
+  onChange,
+}: {
+  searchValue: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+}) => (
+  <InputGroup>
+    <InputLeftElement>
+      <Icon as={BiSearch} color="secondary.500" fontSize="1.25rem" />
+    </InputLeftElement>
+    <Input
+      value={searchValue}
+      onChange={onChange}
+      placeholder="Search fields"
+    />
+  </InputGroup>
+)
 
 export const FieldListDrawer = (): JSX.Element => {
   const { t } = useTranslation()
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx
index a4ee0087c5..8251eef3f2 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { Box } from '@chakra-ui/react'
 import { Droppable } from '@hello-pangea/dnd'
 

From 768f9df317b12b4c4ab8fc9a1487542bbc97fa55 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Fri, 29 Nov 2024 23:34:12 +0800
Subject: [PATCH 02/22] feat: add mfb button beside search bar

---
 .../FieldListDrawer/FieldListDrawer.tsx       | 43 ++++++++++++++-----
 1 file changed, 32 insertions(+), 11 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
index 726ab65361..6fd712074d 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
@@ -1,8 +1,9 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { BiSearch } from 'react-icons/bi'
+import { BiSearch, BiSolidMagicWand } from 'react-icons/bi'
 import {
   Box,
+  Button,
   Divider,
   Flex,
   Icon,
@@ -14,6 +15,7 @@ import {
   TabPanels,
   Tabs,
   Text,
+  Tooltip,
 } from '@chakra-ui/react'
 
 import { Tab } from '~components/Tabs'
@@ -30,6 +32,22 @@ import {
   PaymentsInputPanel,
 } from './field-panels'
 
+const MagicFormBuilderButton = ({ ...styleProps }) => (
+  <Tooltip openDelay={800} hasArrow label="Create fields with AI">
+    <Button
+      padding="0"
+      backgroundColor="primary.200"
+      _hover={{
+        backgroundColor: 'primary.300',
+      }}
+      borderWidth={0}
+      {...styleProps}
+    >
+      <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
+    </Button>
+  </Tooltip>
+)
+
 const FieldSearchBar = ({
   searchValue,
   onChange,
@@ -37,16 +55,19 @@ const FieldSearchBar = ({
   searchValue: string
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
 }) => (
-  <InputGroup>
-    <InputLeftElement>
-      <Icon as={BiSearch} color="secondary.500" fontSize="1.25rem" />
-    </InputLeftElement>
-    <Input
-      value={searchValue}
-      onChange={onChange}
-      placeholder="Search fields"
-    />
-  </InputGroup>
+  <>
+    <InputGroup>
+      <InputLeftElement>
+        <Icon as={BiSearch} color="secondary.500" fontSize="1.25rem" />
+      </InputLeftElement>
+      <Input
+        value={searchValue}
+        onChange={onChange}
+        placeholder="Search fields"
+      />
+      <MagicFormBuilderButton ml="0.5rem" />
+    </InputGroup>
+  </>
 )
 
 export const FieldListDrawer = (): JSX.Element => {

From 8a68323c7c5ae1892771ad3b46ae3363417688ad Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Fri, 29 Nov 2024 23:43:49 +0800
Subject: [PATCH 03/22] fix: disable support for mfb for mobile

---
 .../FieldListDrawer/FieldListDrawer.tsx       | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
index 6fd712074d..894c1fc4b6 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
@@ -18,6 +18,7 @@ import {
   Tooltip,
 } from '@chakra-ui/react'
 
+import { useIsMobile } from '~hooks/useIsMobile'
 import { Tab } from '~components/Tabs'
 
 import { useCreatePageSidebar } from '~features/admin-form/create/common/CreatePageSidebarContext'
@@ -32,21 +33,24 @@ import {
   PaymentsInputPanel,
 } from './field-panels'
 
-const MagicFormBuilderButton = ({ ...styleProps }) => (
-  <Tooltip openDelay={800} hasArrow label="Create fields with AI">
-    <Button
-      padding="0"
-      backgroundColor="primary.200"
-      _hover={{
-        backgroundColor: 'primary.300',
-      }}
-      borderWidth={0}
-      {...styleProps}
-    >
-      <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
-    </Button>
-  </Tooltip>
-)
+const MagicFormBuilderButton = ({ ...styleProps }) => {
+  const isMobile = useIsMobile()
+  return !isMobile ? (
+    <Tooltip openDelay={800} hasArrow label="Create fields with AI">
+      <Button
+        padding="0"
+        backgroundColor="primary.200"
+        _hover={{
+          backgroundColor: 'primary.300',
+        }}
+        borderWidth={0}
+        {...styleProps}
+      >
+        <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
+      </Button>
+    </Tooltip>
+  ) : null
+}
 
 const FieldSearchBar = ({
   searchValue,

From d65f8384c7bcef089619860c94e063d932ec23f5 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Mon, 23 Dec 2024 16:31:14 +0800
Subject: [PATCH 04/22] feat: popover modal for input

---
 .../FieldListDrawer/FieldListDrawer.tsx       |  58 +++-----
 .../MagicFormBuilderContainer.tsx             | 133 ++++++++++++++++++
 2 files changed, 153 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
index 894c1fc4b6..ac2fb4766a 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
@@ -1,9 +1,8 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { BiSearch, BiSolidMagicWand } from 'react-icons/bi'
+import { BiSearch } from 'react-icons/bi'
 import {
   Box,
-  Button,
   Divider,
   Flex,
   Icon,
@@ -15,10 +14,8 @@ import {
   TabPanels,
   Tabs,
   Text,
-  Tooltip,
 } from '@chakra-ui/react'
 
-import { useIsMobile } from '~hooks/useIsMobile'
 import { Tab } from '~components/Tabs'
 
 import { useCreatePageSidebar } from '~features/admin-form/create/common/CreatePageSidebarContext'
@@ -32,25 +29,7 @@ import {
   MyInfoFieldPanel,
   PaymentsInputPanel,
 } from './field-panels'
-
-const MagicFormBuilderButton = ({ ...styleProps }) => {
-  const isMobile = useIsMobile()
-  return !isMobile ? (
-    <Tooltip openDelay={800} hasArrow label="Create fields with AI">
-      <Button
-        padding="0"
-        backgroundColor="primary.200"
-        _hover={{
-          backgroundColor: 'primary.300',
-        }}
-        borderWidth={0}
-        {...styleProps}
-      >
-        <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
-      </Button>
-    </Tooltip>
-  ) : null
-}
+import { MagicFormBuilderContainer } from './MagicFormBuilderContainer'
 
 const FieldSearchBar = ({
   searchValue,
@@ -58,21 +37,24 @@ const FieldSearchBar = ({
 }: {
   searchValue: string
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
-}) => (
-  <>
-    <InputGroup>
-      <InputLeftElement>
-        <Icon as={BiSearch} color="secondary.500" fontSize="1.25rem" />
-      </InputLeftElement>
-      <Input
-        value={searchValue}
-        onChange={onChange}
-        placeholder="Search fields"
-      />
-      <MagicFormBuilderButton ml="0.5rem" />
-    </InputGroup>
-  </>
-)
+}) => {
+  return (
+    <>
+      <InputGroup>
+        <InputLeftElement>
+          <Icon as={BiSearch} color="secondary.500" fontSize="1.25rem" />
+        </InputLeftElement>
+        <Input
+          mr="0.5rem"
+          value={searchValue}
+          onChange={onChange}
+          placeholder="Search fields"
+        />
+        <MagicFormBuilderContainer />
+      </InputGroup>
+    </>
+  )
+}
 
 export const FieldListDrawer = (): JSX.Element => {
   const { t } = useTranslation()
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
new file mode 100644
index 0000000000..fb306cbca2
--- /dev/null
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
@@ -0,0 +1,133 @@
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { BiSolidMagicWand } from 'react-icons/bi'
+import { HiSparkles } from 'react-icons/hi2'
+import {
+  Button,
+  Flex,
+  FormControl,
+  Icon,
+  Popover,
+  PopoverAnchor,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
+  Portal,
+  Text,
+  Textarea,
+  Tooltip,
+} from '@chakra-ui/react'
+
+import { useIsMobile } from '~hooks/useIsMobile'
+import { FormErrorMessage } from '~components/FormControl/FormErrorMessage/FormErrorMessage'
+
+import { useAssistanceMutations } from '~features/admin-form/assistance/mutations'
+
+const GENERATE_FORM_PLACEHOLDER =
+  'Describe form, fields and sections to create...'
+
+export const MagicFormBuilderContainer = () => {
+  const isMobile = useIsMobile()
+  const [isOpen, setIsOpen] = useState(false)
+
+  return !isMobile ? (
+    <>
+      <MagicFormBuilderPopover isOpen={isOpen} setIsOpen={setIsOpen} />
+    </>
+  ) : null
+}
+
+const MagicFormBuilderButton = ({
+  onClick,
+  ...styleProps
+}: { onClick: () => void } & React.ComponentProps<typeof Button>) => {
+  return (
+    <Tooltip openDelay={500} hasArrow label="Create fields with AI">
+      <Button
+        onClick={onClick}
+        padding="0"
+        backgroundColor="primary.200"
+        _hover={{
+          backgroundColor: 'primary.300',
+        }}
+        borderWidth={0}
+        {...styleProps}
+      >
+        <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
+      </Button>
+    </Tooltip>
+  )
+}
+
+interface TextPromptInputs {
+  prompt: string
+}
+
+const MagicFormBuilderPopover = ({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: boolean
+  setIsOpen: (isOpen: boolean) => void
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<TextPromptInputs>()
+
+  const { useMakeTextPromptMutation } = useAssistanceMutations()
+
+  const onSubmit = async ({ prompt }: TextPromptInputs) => {
+    useMakeTextPromptMutation.mutate(prompt, {
+      onSettled: () => setIsOpen(false),
+    })
+  }
+
+  return (
+    <Popover placement="right" isOpen={isOpen}>
+      <PopoverAnchor>
+        <MagicFormBuilderButton onClick={() => setIsOpen(!isOpen)} />
+      </PopoverAnchor>
+      <Portal>
+        {/* TODO: (MFBv1.1) Fix the position of the popover. */}
+        <PopoverContent bg="white" top="15vh" left="40vw">
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <PopoverHeader>
+              <Text textStyle="h4">Generate form</Text>
+            </PopoverHeader>
+            <PopoverCloseButton onClick={() => setIsOpen(false)} />
+            <PopoverBody>
+              <FormControl isRequired isInvalid={false}>
+                <Textarea
+                  placeholder={GENERATE_FORM_PLACEHOLDER}
+                  {...register('prompt', {
+                    required: 'Please enter a prompt.',
+                    maxLength: {
+                      value: 30,
+                      message: 'Please enter at most 500 characters.',
+                    },
+                  })}
+                />
+                <FormErrorMessage>{errors.prompt?.message}</FormErrorMessage>
+              </FormControl>
+            </PopoverBody>
+            <PopoverFooter>
+              <Flex justifyContent="flex-end">
+                <Button
+                  leftIcon={<HiSparkles fontSize="1.5rem" />}
+                  type="submit"
+                  isLoading={useMakeTextPromptMutation.isLoading}
+                >
+                  Generate
+                </Button>
+              </Flex>
+            </PopoverFooter>
+          </form>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  )
+}

From 23f0581ad5e867ad88ee092191f5ec1406b3cf40 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Tue, 24 Dec 2024 10:45:40 +0800
Subject: [PATCH 05/22] feat: add accept deny modal and created field ids from
 mfb

---
 .../assistance/AssistanceService.ts           |   2 +-
 .../admin-form/assistance/mutations.ts        |   7 +-
 .../BuilderAndDesignContent/BuilderFields.tsx |   9 +
 .../FieldRow/FieldRowContainer.tsx            |  31 +++-
 .../MagicFormBuilderContainer.tsx             | 168 +++++++++++++-----
 .../useMagicFormBuilderStore.tsx              |  22 +++
 .../admin-form.assistance.controller.ts       |   5 +-
 .../admin-form.assistance.service.ts          |  10 +-
 8 files changed, 200 insertions(+), 54 deletions(-)
 create mode 100644 frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx

diff --git a/frontend/src/features/admin-form/assistance/AssistanceService.ts b/frontend/src/features/admin-form/assistance/AssistanceService.ts
index de49afca22..68b1b24abd 100644
--- a/frontend/src/features/admin-form/assistance/AssistanceService.ts
+++ b/frontend/src/features/admin-form/assistance/AssistanceService.ts
@@ -9,7 +9,7 @@ export const makeTextPrompt = ({
   formId: string
   prompt: string
 }) => {
-  return ApiService.post<undefined>(
+  return ApiService.post<{ message: string; createdFieldIds?: string[] }>(
     `${ADMIN_FORM_ENDPOINT}/${formId}/assistance/text-prompt`,
     { prompt },
   ).then(({ data }) => data)
diff --git a/frontend/src/features/admin-form/assistance/mutations.ts b/frontend/src/features/admin-form/assistance/mutations.ts
index d5c87cfd2b..823cff5048 100644
--- a/frontend/src/features/admin-form/assistance/mutations.ts
+++ b/frontend/src/features/admin-form/assistance/mutations.ts
@@ -5,6 +5,7 @@ import { makeTextPrompt } from '~features/admin-form/assistance/AssistanceServic
 
 import { useToast } from '../../../hooks/useToast'
 import { adminFormKeys } from '../common/queries'
+import { useMagicFormBuilderStore } from '../create/builder-and-design/useMagicFormBuilderStore'
 
 export const useAssistanceMutations = () => {
   const { formId } = useParams()
@@ -19,7 +20,11 @@ export const useAssistanceMutations = () => {
   const useMakeTextPromptMutation = useMutation(
     (prompt: string) => makeTextPrompt({ formId, prompt }),
     {
-      onSuccess: () => {
+      onSuccess: (data) => {
+        const { createdFieldIds } = data
+        useMagicFormBuilderStore.setState({
+          recentlyCreatedFieldIds: new Set(createdFieldIds),
+        })
         queryClient.invalidateQueries(adminFormKeys.id(formId))
         toast.closeAll()
         toast({ description: 'Form generated successfully', status: 'success' })
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderFields.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderFields.tsx
index 5c87f5cf8c..e2c0eeddd8 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderFields.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderFields.tsx
@@ -11,6 +11,10 @@ import {
   stateDataSelector,
   useFieldBuilderStore,
 } from '../useFieldBuilderStore'
+import {
+  recentlyCreatedFieldIdsSelector,
+  useMagicFormBuilderStore,
+} from '../useMagicFormBuilderStore'
 import { useDesignColorTheme } from '../utils/useDesignColorTheme'
 
 import FieldRow from './FieldRow'
@@ -44,6 +48,10 @@ export const BuilderFields = ({
 
   const isDirty = useDirtyFieldStore(isDirtySelector)
 
+  const mfbRecentlyCreatedFieldIds = useMagicFormBuilderStore(
+    recentlyCreatedFieldIdsSelector,
+  )
+
   return (
     <>
       {fieldsWithQuestionNos.map((f, i) => {
@@ -64,6 +72,7 @@ export const BuilderFields = ({
             handleBuilderClick={handleBuilderClick}
             isDirty={isDirty}
             colorTheme={colorTheme}
+            isHighlighted={mfbRecentlyCreatedFieldIds.has(f._id)}
             {...activeFieldExtraProps}
           />
         )
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx
index 55636375cc..3de64c686f 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx
@@ -5,6 +5,7 @@ import { BiCog, BiDuplicate, BiGridHorizontal, BiTrash } from 'react-icons/bi'
 import { useIsMutating } from 'react-query'
 import {
   Box,
+  BoxProps,
   ButtonGroup,
   chakra,
   Collapse,
@@ -94,6 +95,30 @@ export interface FieldRowContainerProps {
   colorTheme?: FormColorTheme
   // handleBuilderClick is passed down to prevent unnecessary re-renders from useContext
   handleBuilderClick: CreatePageSidebarContextProps['handleBuilderClick']
+  isHighlighted?: boolean
+}
+
+/**
+ * Used for highlighting fields that were created by Magic Form Builder.
+ */
+const HighlightableBox = ({
+  children,
+  isHighlighted,
+  ...props
+}: {
+  children: React.ReactNode
+  isHighlighted?: boolean
+} & BoxProps) => {
+  return (
+    <Box
+      borderColor="danger.300"
+      borderRadius="0.25rem"
+      borderWidth={isHighlighted ? '0.125rem' : '0'}
+      {...props}
+    >
+      {children}
+    </Box>
+  )
 }
 
 const FieldRowContainer = ({
@@ -106,6 +131,7 @@ const FieldRowContainer = ({
   isDirty,
   colorTheme,
   handleBuilderClick,
+  isHighlighted,
 }: FieldRowContainerProps): JSX.Element => {
   const isMobile = useIsMobile()
   const numFormFieldMutations = useIsMutating(adminFormKeys.base)
@@ -285,7 +311,8 @@ const FieldRowContainer = ({
                   )}
                 </chakra.button>
               </Fade>
-              <Box
+              <HighlightableBox
+                isHighlighted={isHighlighted}
                 px={{ base: '0.75rem', md: '1.5rem' }}
                 pb={{ base: '0.75rem', md: '1.5rem' }}
                 w="100%"
@@ -300,7 +327,7 @@ const FieldRowContainer = ({
                     showMyInfoBadge={isMyInfoField}
                   />
                 </FormProvider>
-              </Box>
+              </HighlightableBox>
               <Collapse in={isActive} style={{ width: '100%' }}>
                 {isActive && (
                   <FieldButtonGroup
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
index fb306cbca2..ac6d898624 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { BiSolidMagicWand } from 'react-icons/bi'
+import { BiSolidMagicWand, BiTrash } from 'react-icons/bi'
 import { HiSparkles } from 'react-icons/hi2'
 import {
   Button,
@@ -20,11 +20,15 @@ import {
   Tooltip,
 } from '@chakra-ui/react'
 
+import { BxCheck } from '~/assets/icons'
+
 import { useIsMobile } from '~hooks/useIsMobile'
 import { FormErrorMessage } from '~components/FormControl/FormErrorMessage/FormErrorMessage'
 
 import { useAssistanceMutations } from '~features/admin-form/assistance/mutations'
 
+import { useMagicFormBuilderStore } from '../../useMagicFormBuilderStore'
+
 const GENERATE_FORM_PLACEHOLDER =
   'Describe form, fields and sections to create...'
 
@@ -61,16 +65,12 @@ const MagicFormBuilderButton = ({
   )
 }
 
-interface TextPromptInputs {
-  prompt: string
-}
-
-const MagicFormBuilderPopover = ({
-  isOpen,
-  setIsOpen,
+const MagicFormBuilderCreateFormPrompt = ({
+  onSettled,
+  onClose,
 }: {
-  isOpen: boolean
-  setIsOpen: (isOpen: boolean) => void
+  onSettled: () => void
+  onClose: () => void
 }) => {
   const {
     register,
@@ -82,50 +82,130 @@ const MagicFormBuilderPopover = ({
 
   const onSubmit = async ({ prompt }: TextPromptInputs) => {
     useMakeTextPromptMutation.mutate(prompt, {
-      onSettled: () => setIsOpen(false),
+      onSettled: onSettled,
     })
   }
 
   return (
-    <Popover placement="right" isOpen={isOpen}>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <PopoverHeader>
+        <Text textStyle="h4">Generate form</Text>
+      </PopoverHeader>
+      <PopoverCloseButton onClick={onClose} />
+      <PopoverBody>
+        <FormControl isRequired isInvalid={false}>
+          <Textarea
+            placeholder={GENERATE_FORM_PLACEHOLDER}
+            {...register('prompt', {
+              required: 'Please enter a prompt.',
+              maxLength: {
+                value: 30,
+                message: 'Please enter at most 500 characters.',
+              },
+            })}
+          />
+          <FormErrorMessage>{errors.prompt?.message}</FormErrorMessage>
+        </FormControl>
+      </PopoverBody>
+      <PopoverFooter>
+        <Flex justifyContent="flex-end">
+          <Button
+            leftIcon={<HiSparkles fontSize="1.5rem" />}
+            type="submit"
+            isLoading={useMakeTextPromptMutation.isLoading}
+          >
+            Generate
+          </Button>
+        </Flex>
+      </PopoverFooter>
+    </form>
+  )
+}
+
+const MagicFormBuilderAcceptDeny = ({
+  onAccept,
+  onDeny,
+  onClose,
+}: {
+  onAccept: () => void
+  onDeny: () => void
+  onClose: () => void
+}) => {
+  return (
+    <>
+      <PopoverHeader>
+        <Text textStyle="h4">Keep these changes?</Text>
+      </PopoverHeader>
+      <PopoverCloseButton onClick={onClose} />
+      <PopoverBody>
+        <Flex direction="column" gap="0.25rem">
+          <Button
+            leftIcon={<BxCheck />}
+            variant="solid"
+            onClick={onAccept}
+            colorScheme="success"
+          >
+            Accept
+          </Button>
+          <Button
+            leftIcon={<BiTrash />}
+            variant="solid"
+            onClick={onDeny}
+            colorScheme="danger"
+          >
+            Deny
+          </Button>
+        </Flex>
+      </PopoverBody>
+    </>
+  )
+}
+
+interface TextPromptInputs {
+  prompt: string
+}
+
+const MagicFormBuilderPopover = ({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: boolean
+  setIsOpen: (isOpen: boolean) => void
+}) => {
+  const [isAcceptDenyOpen, setIsAcceptDenyOpen] = useState(false)
+  const clearRecentlyCreatedFieldIds = useMagicFormBuilderStore(
+    (state) => state.clearRecentlyCreatedFieldIds,
+  )
+
+  const onClickDefaults = () => {
+    clearRecentlyCreatedFieldIds()
+    setIsOpen(false)
+    setTimeout(() => setIsAcceptDenyOpen(false), 100) // delay to allow popover to close before updating state
+  }
+
+  return (
+    <Popover isLazy placement="right" isOpen={isOpen}>
       <PopoverAnchor>
         <MagicFormBuilderButton onClick={() => setIsOpen(!isOpen)} />
       </PopoverAnchor>
       <Portal>
         {/* TODO: (MFBv1.1) Fix the position of the popover. */}
         <PopoverContent bg="white" top="15vh" left="40vw">
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <PopoverHeader>
-              <Text textStyle="h4">Generate form</Text>
-            </PopoverHeader>
-            <PopoverCloseButton onClick={() => setIsOpen(false)} />
-            <PopoverBody>
-              <FormControl isRequired isInvalid={false}>
-                <Textarea
-                  placeholder={GENERATE_FORM_PLACEHOLDER}
-                  {...register('prompt', {
-                    required: 'Please enter a prompt.',
-                    maxLength: {
-                      value: 30,
-                      message: 'Please enter at most 500 characters.',
-                    },
-                  })}
-                />
-                <FormErrorMessage>{errors.prompt?.message}</FormErrorMessage>
-              </FormControl>
-            </PopoverBody>
-            <PopoverFooter>
-              <Flex justifyContent="flex-end">
-                <Button
-                  leftIcon={<HiSparkles fontSize="1.5rem" />}
-                  type="submit"
-                  isLoading={useMakeTextPromptMutation.isLoading}
-                >
-                  Generate
-                </Button>
-              </Flex>
-            </PopoverFooter>
-          </form>
+          {!isAcceptDenyOpen ? (
+            <MagicFormBuilderCreateFormPrompt
+              onClose={() => setIsOpen(false)}
+              onSettled={() => setIsAcceptDenyOpen(true)}
+            />
+          ) : (
+            <MagicFormBuilderAcceptDeny
+              onAccept={onClickDefaults}
+              onDeny={() => {
+                // trigger deletion of fields with field ids in recentlyCreatedFieldIds
+                onClickDefaults()
+              }}
+              onClose={() => setIsOpen(false)}
+            />
+          )}
         </PopoverContent>
       </Portal>
     </Popover>
diff --git a/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx b/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx
new file mode 100644
index 0000000000..16e58230ba
--- /dev/null
+++ b/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx
@@ -0,0 +1,22 @@
+import create from 'zustand'
+
+export type MagicFormBuilderStore = {
+  recentlyCreatedFieldIds: Set<string>
+  setRecentlyCreatedFieldIds: (fieldIds: Set<string>) => void
+  clearRecentlyCreatedFieldIds: () => void
+}
+
+export const useMagicFormBuilderStore = create<MagicFormBuilderStore>(
+  (set) => ({
+    recentlyCreatedFieldIds: new Set(),
+    setRecentlyCreatedFieldIds: (fieldIds) =>
+      set({ recentlyCreatedFieldIds: fieldIds }),
+    clearRecentlyCreatedFieldIds: () =>
+      set({ recentlyCreatedFieldIds: new Set() }),
+  }),
+)
+
+export const recentlyCreatedFieldIdsSelector = (
+  state: MagicFormBuilderStore,
+): MagicFormBuilderStore['recentlyCreatedFieldIds'] =>
+  state.recentlyCreatedFieldIds
diff --git a/src/app/modules/form/admin-form/admin-form.assistance.controller.ts b/src/app/modules/form/admin-form/admin-form.assistance.controller.ts
index 15f8788cf0..c167eea984 100644
--- a/src/app/modules/form/admin-form/admin-form.assistance.controller.ts
+++ b/src/app/modules/form/admin-form/admin-form.assistance.controller.ts
@@ -32,7 +32,7 @@ interface ITextPrompt {
 
 const _handleTextPrompt: ControllerHandler<
   { formId: string },
-  { message: string },
+  { message: string; createdFieldIds?: string[] },
   ITextPrompt
 > = async (req, res) => {
   const { formId } = req.params
@@ -57,9 +57,10 @@ const _handleTextPrompt: ControllerHandler<
           userPrompt: req.body.prompt,
         }),
       )
-      .map(() =>
+      .map((createdFieldIds) =>
         res.status(StatusCodes.OK).json({
           message: 'Created form fields using text prompt successfully.',
+          createdFieldIds: createdFieldIds.map((field) => field._id.toString()),
         }),
       )
       .mapErr((error) => {
diff --git a/src/app/modules/form/admin-form/admin-form.assistance.service.ts b/src/app/modules/form/admin-form/admin-form.assistance.service.ts
index 2404087484..366155a310 100644
--- a/src/app/modules/form/admin-form/admin-form.assistance.service.ts
+++ b/src/app/modules/form/admin-form/admin-form.assistance.service.ts
@@ -12,7 +12,7 @@ import {
   RadioFieldBase,
   TableFieldBase,
 } from '../../../../../shared/types'
-import { IPopulatedForm } from '../../../../types'
+import { FormFieldSchema, IPopulatedForm } from '../../../../types'
 import { createLoggerWithLabel } from '../../../config/logger'
 import { PossibleDatabaseError } from '../../core/core.errors'
 import { FormNotFoundError } from '../form.errors'
@@ -274,7 +274,7 @@ export const createFormFieldsUsingTextPrompt = ({
   form: IPopulatedForm
   userPrompt: string
 }): ResultAsync<
-  undefined,
+  FormFieldSchema['_id'][],
   | ModelResponseFailureError
   | ModelResponseInvalidSchemaFormatError
   | ModelResponseInvalidSyntaxError
@@ -333,6 +333,8 @@ export const createFormFieldsUsingTextPrompt = ({
       )
       return createFormFields({ form, newFields: formFieldsToCreate, to: 0 })
     })
-    .andThen(() => updateFormMetadata(form, { ...form.metadata, mfb: true }))
-    .map(() => undefined)
+    .map((updatedFields) => {
+      updateFormMetadata(form, { ...form.metadata, mfb: true })
+      return updatedFields.map((field) => field._id)
+    })
 }

From 9af405ad5c344fe9db089d07e84e4a2f472cbfb1 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Tue, 24 Dec 2024 11:42:36 +0800
Subject: [PATCH 06/22] feat: add delete functionality for deny

---
 .../MagicFormBuilderContainer.tsx             | 15 +++++-
 .../UpdateFormFieldService.ts                 | 12 +++++
 .../mutations/useDeleteFormField.ts           | 48 ++++++++++++++++-
 src/app/models/form.server.model.ts           | 11 ++++
 .../form/admin-form/admin-form.controller.ts  | 52 +++++++++++++++++++
 .../form/admin-form/admin-form.service.ts     | 37 +++++++++++++
 .../v3/admin/forms/admin-forms.form.routes.ts | 17 ++++++
 src/types/form.ts                             |  5 ++
 8 files changed, 194 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
index ac6d898624..d367b71ad8 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
@@ -27,7 +27,11 @@ import { FormErrorMessage } from '~components/FormControl/FormErrorMessage/FormE
 
 import { useAssistanceMutations } from '~features/admin-form/assistance/mutations'
 
-import { useMagicFormBuilderStore } from '../../useMagicFormBuilderStore'
+import { useDeleteFormField } from '../../mutations/useDeleteFormField'
+import {
+  recentlyCreatedFieldIdsSelector,
+  useMagicFormBuilderStore,
+} from '../../useMagicFormBuilderStore'
 
 const GENERATE_FORM_PLACEHOLDER =
   'Describe form, fields and sections to create...'
@@ -176,6 +180,9 @@ const MagicFormBuilderPopover = ({
   const clearRecentlyCreatedFieldIds = useMagicFormBuilderStore(
     (state) => state.clearRecentlyCreatedFieldIds,
   )
+  const recentlyCreatedFieldIds = useMagicFormBuilderStore(
+    recentlyCreatedFieldIdsSelector,
+  )
 
   const onClickDefaults = () => {
     clearRecentlyCreatedFieldIds()
@@ -183,6 +190,8 @@ const MagicFormBuilderPopover = ({
     setTimeout(() => setIsAcceptDenyOpen(false), 100) // delay to allow popover to close before updating state
   }
 
+  const { deleteMultipleFormFieldsMutation } = useDeleteFormField()
+
   return (
     <Popover isLazy placement="right" isOpen={isOpen}>
       <PopoverAnchor>
@@ -200,7 +209,9 @@ const MagicFormBuilderPopover = ({
             <MagicFormBuilderAcceptDeny
               onAccept={onClickDefaults}
               onDeny={() => {
-                // trigger deletion of fields with field ids in recentlyCreatedFieldIds
+                deleteMultipleFormFieldsMutation.mutate(
+                  Array.from(recentlyCreatedFieldIds),
+                )
                 onClickDefaults()
               }}
               onClose={() => setIsOpen(false)}
diff --git a/frontend/src/features/admin-form/create/builder-and-design/UpdateFormFieldService.ts b/frontend/src/features/admin-form/create/builder-and-design/UpdateFormFieldService.ts
index 9c087f29c9..4337d6d7d5 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/UpdateFormFieldService.ts
+++ b/frontend/src/features/admin-form/create/builder-and-design/UpdateFormFieldService.ts
@@ -127,3 +127,15 @@ export const deleteSingleFormField = async ({
 }): Promise<void> => {
   return ApiService.delete(`${ADMIN_FORM_ENDPOINT}/${formId}/fields/${fieldId}`)
 }
+
+export const deleteMultipleFormFields = async ({
+  formId,
+  fieldIds,
+}: {
+  formId: string
+  fieldIds: string[]
+}): Promise<void> => {
+  return ApiService.post(`${ADMIN_FORM_ENDPOINT}/${formId}/fields/delete`, {
+    fieldIds,
+  })
+}
diff --git a/frontend/src/features/admin-form/create/builder-and-design/mutations/useDeleteFormField.ts b/frontend/src/features/admin-form/create/builder-and-design/mutations/useDeleteFormField.ts
index 0267708698..eca60aa9a8 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/mutations/useDeleteFormField.ts
+++ b/frontend/src/features/admin-form/create/builder-and-design/mutations/useDeleteFormField.ts
@@ -22,7 +22,10 @@ import {
   stateSelector,
   usePaymentStore,
 } from '../BuilderAndDesignDrawer/FieldListDrawer/field-panels/usePaymentStore'
-import { deleteSingleFormField } from '../UpdateFormFieldService'
+import {
+  deleteMultipleFormFields,
+  deleteSingleFormField,
+} from '../UpdateFormFieldService'
 import {
   FieldBuilderState,
   setToInactiveSelector,
@@ -137,6 +140,38 @@ export const useDeleteFormField = () => {
     },
   )
 
+  const handleDeleteMultipleFieldsSuccess = useCallback(
+    (_data: unknown, fieldIds: string[]) => {
+      queryClient.setQueryData<AdminFormDto>(adminFormKey, (oldForm) => {
+        // Should not happen, should not be able to update field if there is no
+        // existing data.
+        if (!oldForm) throw new Error('Query should have been set')
+        const deletedFieldIndices = fieldIds
+          .map((fieldId) =>
+            oldForm.form_fields.findIndex((ff) => ff._id === fieldId),
+          )
+          .filter((index) => index >= 0)
+        oldForm.form_fields = oldForm.form_fields.filter(
+          (_field, index) => !deletedFieldIndices.includes(index),
+        )
+        return oldForm
+      })
+      setToInactive()
+    },
+    [adminFormKey, queryClient, setToInactive],
+  )
+
+  const handleDeleteMultipleFieldsError = useCallback(
+    (error: Error) => {
+      toast.closeAll()
+      toast({
+        description: error.message,
+        status: 'danger',
+      })
+    },
+    [toast],
+  )
+
   return {
     deleteFieldMutation: useMutation(
       (fieldId: string) =>
@@ -149,6 +184,17 @@ export const useDeleteFormField = () => {
         onError: handleError,
       },
     ),
+    deleteMultipleFormFieldsMutation: useMutation(
+      (fieldIds: string[]) =>
+        deleteMultipleFormFields({
+          formId,
+          fieldIds,
+        }),
+      {
+        onSuccess: handleDeleteMultipleFieldsSuccess,
+        onError: handleDeleteMultipleFieldsError,
+      },
+    ),
     deletePaymentFieldMutation,
   }
 }
diff --git a/src/app/models/form.server.model.ts b/src/app/models/form.server.model.ts
index aceaa61567..70bfff2567 100644
--- a/src/app/models/form.server.model.ts
+++ b/src/app/models/form.server.model.ts
@@ -1183,6 +1183,17 @@ const compileFormModel = (db: Mongoose): IFormModel => {
     ).exec()
   }
 
+  FormSchema.statics.deleteFormFieldsByIds = async function (
+    formId: string,
+    fieldIds: string[],
+  ): Promise<IFormSchema | null> {
+    return this.findByIdAndUpdate(
+      formId,
+      { $pull: { form_fields: { _id: { $in: fieldIds } } } },
+      { new: true, runValidators: true },
+    ).exec()
+  }
+
   // Updates specified form logic.
   FormSchema.statics.updateFormLogic = async function (
     formId: string,
diff --git a/src/app/modules/form/admin-form/admin-form.controller.ts b/src/app/modules/form/admin-form/admin-form.controller.ts
index 7f5e87e2ac..283bd27016 100644
--- a/src/app/modules/form/admin-form/admin-form.controller.ts
+++ b/src/app/modules/form/admin-form/admin-form.controller.ts
@@ -2785,6 +2785,58 @@ export const handleDeleteFormField: ControllerHandler<
   )
 }
 
+/**
+ * Handler for PATCH /forms/:formId/fields/
+ * @security session
+ *
+ * @returns 204 when deletion is successful
+ * @returns 403 when current user does not have permissions to delete form fields
+ * @returns 404 when form cannot be found
+ * @returns 410 when deleting fields of an archived form
+ * @returns 422 when user in session cannot be retrieved from the database
+ * @returns 500 when database error occurs during deletion
+ */
+export const handleDeleteFormFields: ControllerHandler<
+  { formId: string },
+  { message: string } | ErrorDto,
+  { fieldIds: string[] }
+> = (req, res) => {
+  const { formId } = req.params
+  const { fieldIds } = req.body
+  const sessionUserId = (req.session as AuthedSessionData).user._id
+
+  return (
+    // Step 1: Retrieve currently logged in user.
+    UserService.getPopulatedUserById(sessionUserId)
+      .andThen((user) =>
+        // Step 2: Retrieve form with write permission check.
+        AuthService.getFormAfterPermissionChecks({
+          user,
+          formId,
+          level: PermissionLevel.Write,
+        }),
+      )
+      // Step 3: Delete form fields.
+      .andThen((form) => AdminFormService.deleteFormFields(form, fieldIds))
+      .map(() => res.sendStatus(StatusCodes.NO_CONTENT))
+      .mapErr((error) => {
+        logger.error({
+          message: 'Error occurred when deleting form fields',
+          meta: {
+            action: 'handleDeleteFormFields',
+            ...createReqMeta(req),
+            userId: sessionUserId,
+            formId,
+            fieldIds,
+          },
+          error,
+        })
+        const { errorMessage, statusCode } = mapRouteError(error)
+        return res.status(statusCode).json({ message: errorMessage })
+      })
+  )
+}
+
 /**
  * NOTE: Exported for testing.
  * Private handler for PUT /forms/:formId/end-page
diff --git a/src/app/modules/form/admin-form/admin-form.service.ts b/src/app/modules/form/admin-form/admin-form.service.ts
index 74545217c0..f905739fef 100644
--- a/src/app/modules/form/admin-form/admin-form.service.ts
+++ b/src/app/modules/form/admin-form/admin-form.service.ts
@@ -2157,6 +2157,43 @@ export const deleteFormField = <T extends IFormSchema>(
   })
 }
 
+/**
+ * Deletes multiple form fields from the given form by their ids.
+ * If any of the fieldIds does not exist, it will be ignored.
+ * @param form The form to delete the specified form fields for
+ * @param fieldIds the ids of the form fields to delete
+ * @returns ok(updated form) on success
+ * @returns err(PossibleDatabaseError) if db error is thrown during the deletion of form fields
+ * @returns err(FormNotFoundError) if the form cannot be found
+ */
+export const deleteFormFields = (
+  form: IPopulatedForm,
+  fieldIds: string[],
+): ResultAsync<IFormSchema, PossibleDatabaseError | FormNotFoundError> => {
+  const logMeta = {
+    action: 'deleteFormFields',
+    formId: form._id,
+    fieldIds,
+  }
+
+  return ResultAsync.fromPromise(
+    FormModel.deleteFormFieldsByIds(form._id, fieldIds),
+    (error) => {
+      logger.error({
+        message: 'Error occurred when deleting form fields',
+        meta: logMeta,
+        error,
+      })
+      return transformMongoError(error)
+    },
+  ).andThen((updatedForm) => {
+    if (!updatedForm) {
+      return errAsync(new FormNotFoundError())
+    }
+    return okAsync(updatedForm)
+  })
+}
+
 /**
  * Update the end page of the given form
  * @param formId the id of the form to update the end page for
diff --git a/src/app/routes/api/v3/admin/forms/admin-forms.form.routes.ts b/src/app/routes/api/v3/admin/forms/admin-forms.form.routes.ts
index aca2c4ce0d..4bec1945d2 100644
--- a/src/app/routes/api/v3/admin/forms/admin-forms.form.routes.ts
+++ b/src/app/routes/api/v3/admin/forms/admin-forms.form.routes.ts
@@ -188,6 +188,23 @@ AdminFormsFormRouter.put(
   AdminFormController.handleUpdateOptionsToRecipientsMap,
 )
 
+/**
+ * Deletes multiple form fields from the specified form.
+ * Uses POST for bulk deletion. See: https://stackoverflow.com/questions/21863326/delete-multiple-records-using-rest
+ * @security session
+ *
+ * @returns 204 when deletion is successful
+ * @returns 403 when current user does not have permissions to delete form fields
+ * @returns 404 when form cannot be found
+ * @returns 410 when deleting fields of an archived form
+ * @returns 422 when user in session cannot be retrieved from the database
+ * @returns 500 when database error occurs during deletion
+ */
+AdminFormsFormRouter.post(
+  '/:formId([a-fA-F0-9]{24})/fields/delete',
+  AdminFormController.handleDeleteFormFields,
+)
+
 /**
  * Duplicates the form field with the fieldId from the specified form
  * @security session
diff --git a/src/types/form.ts b/src/types/form.ts
index 920f0b5e1f..dc5b602956 100644
--- a/src/types/form.ts
+++ b/src/types/form.ts
@@ -363,6 +363,11 @@ export interface IFormModel extends Model<IFormSchema> {
     fieldId: string,
   ): Promise<IFormSchema | null>
 
+  deleteFormFieldsByIds(
+    formId: string,
+    fieldIds: string[],
+  ): Promise<IFormSchema | null>
+
   deactivateById(formId: string): Promise<IFormSchema | null>
 
   getMetaByUserIdOrEmail(

From 6d8b9f9c7425b196466abae5ccd08c4645844bdd Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Tue, 24 Dec 2024 11:51:37 +0800
Subject: [PATCH 07/22] feat: support field addition during revert

---
 .../FieldListDrawer/MagicFormBuilderContainer.tsx    | 12 ++++--------
 .../builder-and-design/useMagicFormBuilderStore.tsx  |  8 +++++++-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
index d367b71ad8..023853aaad 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
@@ -29,6 +29,7 @@ import { useAssistanceMutations } from '~features/admin-form/assistance/mutation
 
 import { useDeleteFormField } from '../../mutations/useDeleteFormField'
 import {
+  isAcceptDenyOpenSelector,
   recentlyCreatedFieldIdsSelector,
   useMagicFormBuilderStore,
 } from '../../useMagicFormBuilderStore'
@@ -70,10 +71,8 @@ const MagicFormBuilderButton = ({
 }
 
 const MagicFormBuilderCreateFormPrompt = ({
-  onSettled,
   onClose,
 }: {
-  onSettled: () => void
   onClose: () => void
 }) => {
   const {
@@ -85,9 +84,7 @@ const MagicFormBuilderCreateFormPrompt = ({
   const { useMakeTextPromptMutation } = useAssistanceMutations()
 
   const onSubmit = async ({ prompt }: TextPromptInputs) => {
-    useMakeTextPromptMutation.mutate(prompt, {
-      onSettled: onSettled,
-    })
+    useMakeTextPromptMutation.mutate(prompt)
   }
 
   return (
@@ -176,7 +173,6 @@ const MagicFormBuilderPopover = ({
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
 }) => {
-  const [isAcceptDenyOpen, setIsAcceptDenyOpen] = useState(false)
   const clearRecentlyCreatedFieldIds = useMagicFormBuilderStore(
     (state) => state.clearRecentlyCreatedFieldIds,
   )
@@ -184,10 +180,11 @@ const MagicFormBuilderPopover = ({
     recentlyCreatedFieldIdsSelector,
   )
 
+  const isAcceptDenyOpen = useMagicFormBuilderStore(isAcceptDenyOpenSelector)
+
   const onClickDefaults = () => {
     clearRecentlyCreatedFieldIds()
     setIsOpen(false)
-    setTimeout(() => setIsAcceptDenyOpen(false), 100) // delay to allow popover to close before updating state
   }
 
   const { deleteMultipleFormFieldsMutation } = useDeleteFormField()
@@ -203,7 +200,6 @@ const MagicFormBuilderPopover = ({
           {!isAcceptDenyOpen ? (
             <MagicFormBuilderCreateFormPrompt
               onClose={() => setIsOpen(false)}
-              onSettled={() => setIsAcceptDenyOpen(true)}
             />
           ) : (
             <MagicFormBuilderAcceptDeny
diff --git a/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx b/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx
index 16e58230ba..f593a076ad 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx
@@ -1,13 +1,15 @@
 import create from 'zustand'
 
 export type MagicFormBuilderStore = {
+  isAcceptDenyOpen: boolean
   recentlyCreatedFieldIds: Set<string>
   setRecentlyCreatedFieldIds: (fieldIds: Set<string>) => void
   clearRecentlyCreatedFieldIds: () => void
 }
 
 export const useMagicFormBuilderStore = create<MagicFormBuilderStore>(
-  (set) => ({
+  (set, get) => ({
+    isAcceptDenyOpen: get().recentlyCreatedFieldIds.size > 0,
     recentlyCreatedFieldIds: new Set(),
     setRecentlyCreatedFieldIds: (fieldIds) =>
       set({ recentlyCreatedFieldIds: fieldIds }),
@@ -16,6 +18,10 @@ export const useMagicFormBuilderStore = create<MagicFormBuilderStore>(
   }),
 )
 
+export const isAcceptDenyOpenSelector = (
+  state: MagicFormBuilderStore,
+): MagicFormBuilderStore['isAcceptDenyOpen'] => state.isAcceptDenyOpen
+
 export const recentlyCreatedFieldIdsSelector = (
   state: MagicFormBuilderStore,
 ): MagicFormBuilderStore['recentlyCreatedFieldIds'] =>

From c4ebcdbe949a3119b065343f8c3740c32c27c34e Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Tue, 24 Dec 2024 11:56:54 +0800
Subject: [PATCH 08/22] feat: remove old button

---
 .../EmptyFormPlaceholder.tsx                  | 158 ++++++------------
 .../MagicFormButton.tsx                       |  21 ---
 .../BuilderAndDesignContent/FormBuilder.tsx   |   3 -
 .../TextPromptModal.stories.tsx               |  22 ---
 .../MagicFormBuilderModal/TextPromptModal.tsx | 115 -------------
 .../MagicFormBuilderModal/index.tsx           |   1 -
 6 files changed, 48 insertions(+), 272 deletions(-)
 delete mode 100644 frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/MagicFormButton.tsx
 delete mode 100644 frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/TextPromptModal.stories.tsx
 delete mode 100644 frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/TextPromptModal.tsx
 delete mode 100644 frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/index.tsx

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/EmptyFormPlaceholder.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/EmptyFormPlaceholder.tsx
index 4e8de8fe52..8293c89642 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/EmptyFormPlaceholder.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/EmptyFormPlaceholder.tsx
@@ -4,132 +4,70 @@ import {
   ButtonProps,
   Center,
   chakra,
-  Flex,
   forwardRef,
   Icon,
   Text,
 } from '@chakra-ui/react'
 
-import { FormResponseMode } from '~shared/types'
-
 import { BxsWidget } from '~assets/icons/BxsWidget'
 import { useIsMobile } from '~hooks/useIsMobile'
 
-import { useAdminForm } from '~features/admin-form/common/queries'
-import { useUser } from '~features/user/queries'
-
-import { MagicFormButton } from './MagicFormButton'
-
-const OrDivider = ({ isMobile }: { isMobile: boolean }) => (
-  <Flex
-    width="100%"
-    maxW={isMobile ? '12rem' : '18rem'}
-    flexDir="row"
-    alignItems="center"
-    justifyContent="space-around"
-    verticalAlign="middle"
-  >
-    <Box flexGrow={1} height="1px" bgColor="black" />
-    <Text
-      textStyle="subhead-2"
-      color="secondary.500"
-      px="1.5rem"
-      textAlign={'center'}
-    >
-      OR
-    </Text>
-    <Box flexGrow={1} height="1px" bgColor="black" />
-  </Flex>
-)
-
 interface EmptyFormPlaceholderProps extends ButtonProps {
   isDraggingOver: boolean
   onClick: () => void
-  onMagicFormButtonClick: () => void
 }
 
 export const EmptyFormPlaceholder = forwardRef<
   EmptyFormPlaceholderProps,
   'button'
->(
-  (
-    { isDraggingOver, onClick, onMagicFormButtonClick, ...props },
-    ref,
-  ): JSX.Element => {
-    // TODO: (MFB) Remove isTest check when MFB is out of beta
-    const isTest = import.meta.env.STORYBOOK_NODE_ENV === 'test'
-    const isMobile = useIsMobile()
-    const { user } = useUser()
-    const { data: form } = useAdminForm()
-    const isStorageMode = form?.responseMode === FormResponseMode.Encrypt
-    // TODO: (MFB) Remove isTest check when MFB is out of beta
-    const isMagicFormBuilderEnabled =
-      isStorageMode && (isTest || user?.betaFlags?.mfb)
+>(({ isDraggingOver, onClick, ...props }, ref): JSX.Element => {
+  const isMobile = useIsMobile()
 
-    const placeholderText = useMemo(() => {
-      if (isDraggingOver) {
-        return 'Drop your field here'
-      }
-      return isMobile
-        ? 'Tap here to add a field'
-        : 'Drag a field from the Builder on the left to start'
-    }, [isDraggingOver, isMobile])
+  const placeholderText = useMemo(() => {
+    if (isDraggingOver) {
+      return 'Drop your field here'
+    }
+    return isMobile
+      ? 'Tap here to add a field'
+      : 'Drag a field from the Builder on the left to start'
+  }, [isDraggingOver, isMobile])
 
-    return (
-      <Box position="relative" h="13.75rem" m={{ base: 0, lg: '1.625rem' }}>
-        <chakra.button
-          _hover={{
-            bg: 'primary.200',
-          }}
-          _focus={{
-            boxShadow: '0 0 0 2px var(--chakra-colors-neutral-500)',
-          }}
-          h="100%"
-          w="100%"
-          border="1px dashed"
-          borderColor={isDraggingOver ? 'primary.700' : 'secondary.300'}
-          borderRadius="4px"
-          bg="neutral.100"
-          transitionProperty="common"
-          transitionDuration="normal"
-          onClick={onClick}
-          {...props}
-          ref={ref}
-        >
-          <Center flexDir="column" gap={'0.75rem'}>
-            <Icon
-              as={BxsWidget}
-              __css={{ color: 'secondary.500', fontSize: '1.5rem' }}
-            />
-            <Text
-              textStyle="subhead-2"
-              color="secondary.500"
-              px="1.5rem"
-              textAlign={'center'}
-            >
-              {placeholderText}
-            </Text>
-            {isMagicFormBuilderEnabled ? (
-              <>
-                <OrDivider isMobile={isMobile} />
-                <Box h="2.75rem">Box</Box>
-              </>
-            ) : null}
-          </Center>
-        </chakra.button>
-        {isMagicFormBuilderEnabled ? (
-          <Box
-            bottom="2.375rem"
-            w="100%"
-            px="2rem"
-            position="absolute"
-            display="flex"
-            justifyContent="center"
+  return (
+    <Box position="relative" h="13.75rem" m={{ base: 0, lg: '1.625rem' }}>
+      <chakra.button
+        _hover={{
+          bg: 'primary.200',
+        }}
+        _focus={{
+          boxShadow: '0 0 0 2px var(--chakra-colors-neutral-500)',
+        }}
+        h="100%"
+        w="100%"
+        border="1px dashed"
+        borderColor={isDraggingOver ? 'primary.700' : 'secondary.300'}
+        borderRadius="4px"
+        bg="neutral.100"
+        transitionProperty="common"
+        transitionDuration="normal"
+        onClick={onClick}
+        {...props}
+        ref={ref}
+      >
+        <Center flexDir="column" gap={'0.75rem'}>
+          <Icon
+            as={BxsWidget}
+            __css={{ color: 'secondary.500', fontSize: '1.5rem' }}
+          />
+          <Text
+            textStyle="subhead-2"
+            color="secondary.500"
+            px="1.5rem"
+            textAlign={'center'}
           >
-            <MagicFormButton onClick={onMagicFormButtonClick} />
-          </Box>
-        ) : null}
-      </Box>
-    )
-  },
-)
+            {placeholderText}
+          </Text>
+        </Center>
+      </chakra.button>
+    </Box>
+  )
+})
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/MagicFormButton.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/MagicFormButton.tsx
deleted file mode 100644
index 94cff71427..0000000000
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/MagicFormButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { BiSolidMagicWand } from 'react-icons/bi'
-
-import Button from '~components/Button'
-
-export const MagicFormButton = ({
-  onClick,
-}: {
-  onClick: () => void
-}): JSX.Element => {
-  return (
-    <>
-      <Button
-        maxW="100%"
-        rightIcon={<BiSolidMagicWand fontSize="1.5rem" />}
-        onClick={onClick}
-      >
-        Create fields with AI
-      </Button>
-    </>
-  )
-}
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx
index 8178b40e67..794b43a57a 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx
@@ -40,7 +40,6 @@ import { EmptyFormPlaceholder } from './BuilderAndDesignPlaceholder/EmptyFormPla
 import { FormBuilderFieldsSkeleton } from './FormBuilder/FormBuilderFieldsSkeleton'
 import BuilderAndDesignPlaceholder from './BuilderAndDesignPlaceholder'
 import { BuilderFields } from './BuilderFields'
-import { TextPromptModal } from './MagicFormBuilderModal'
 import { PaymentView } from './PaymentView'
 import { StartPageView } from './StartPageView'
 import { useBuilderFields } from './useBuilderFields'
@@ -110,7 +109,6 @@ export const FormBuilder = ({
 
   return (
     <>
-      <TextPromptModal isOpen={isOpen} onClose={onClose} />
       <Flex
         mb={0}
         flex={1}
@@ -174,7 +172,6 @@ export const FormBuilder = ({
                         {...provided.droppableProps}
                         isDraggingOver={snapshot.isDraggingOver}
                         onClick={handlePlaceholderClick}
-                        onMagicFormButtonClick={handleMagicFormButtonClick}
                       />
                     )
                   }
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/TextPromptModal.stories.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/TextPromptModal.stories.tsx
deleted file mode 100644
index 4e93fdc889..0000000000
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/TextPromptModal.stories.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Meta, StoryFn } from '@storybook/react'
-
-import { StoryRouter } from '~utils/storybook'
-
-import { TextPromptModal } from './TextPromptModal'
-
-export default {
-  title: 'Features/AdminForm/TextPromptModal',
-  component: TextPromptModal,
-  decorators: [
-    StoryRouter({
-      initialEntries: ['/61540ece3d4a6e50ac0cc6ff'],
-      path: '/:formId',
-    }),
-  ],
-} as Meta
-
-const Template: StoryFn = () => {
-  return <TextPromptModal isOpen={true} onClose={() => {}} />
-}
-
-export const OpenModal = Template.bind({})
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/TextPromptModal.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/TextPromptModal.tsx
deleted file mode 100644
index 9462502a2f..0000000000
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/TextPromptModal.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { useForm } from 'react-hook-form'
-import { BiRightArrowAlt } from 'react-icons/bi'
-import {
-  Container,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  Stack,
-  useBreakpointValue,
-  UseDisclosureReturn,
-} from '@chakra-ui/react'
-
-import Button from '~components/Button'
-import Textarea from '~components/Textarea'
-
-import { useAssistanceMutations } from '~features/admin-form/assistance/mutations'
-
-import { TextPromptIdeasSelector } from './TextPromptIdeasSelector'
-
-const TEXT_PROMPT_PLACEHOLDER =
-  "A good prompt includes the form's purpose, information about the respondent, and the information you need (e.g. specific questions or sections)."
-
-const TEXT_PROMPT_IDEAS = [
-  'employee feedback on workplace satisfaction, including fields on overall job satisfaction, suggestions for improvement, and comments on company culture.',
-  'community issue reports from citizens, including fields for location, description of the issue, and optional photo uploads.',
-  'applications for government grants from business entities, incorporating sections for project details, budget breakdown, and applicant qualifications.',
-]
-
-interface TextPromptInputs {
-  prompt: string
-}
-
-type TextPromptModalProps = Pick<UseDisclosureReturn, 'onClose' | 'isOpen'>
-
-export const TextPromptModal = ({
-  isOpen,
-  onClose,
-}: TextPromptModalProps): JSX.Element => {
-  const {
-    reset,
-    register,
-    handleSubmit,
-    setValue,
-    formState: { errors },
-  } = useForm<TextPromptInputs>()
-
-  const { useMakeTextPromptMutation } = useAssistanceMutations()
-
-  const modalSize = useBreakpointValue({
-    base: 'mobile',
-    xs: 'mobile',
-    md: 'full',
-  })
-
-  const onFormClose = () => {
-    reset()
-    onClose()
-  }
-
-  const onSubmit = async ({ prompt }: TextPromptInputs) => {
-    useMakeTextPromptMutation.mutate(prompt, {
-      onSettled: onFormClose,
-    })
-  }
-
-  return (
-    <Modal isOpen={isOpen} onClose={onFormClose} size={modalSize}>
-      <ModalContent py={{ base: 'initial', md: '4.5rem' }}>
-        <Container maxW="42.5rem">
-          <ModalHeader>Write a prompt</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <form onSubmit={handleSubmit(onSubmit)}>
-              <Stack spacing="0.75rem">
-                <FormControl isRequired isInvalid={!!errors.prompt}>
-                  <FormLabel>
-                    I want to create a form that collects...
-                  </FormLabel>
-                  <Textarea
-                    placeholder={TEXT_PROMPT_PLACEHOLDER}
-                    {...register('prompt', {
-                      required: 'Please enter a prompt.',
-                      maxLength: {
-                        value: 500,
-                        message: 'Please enter at most 500 characters.',
-                      },
-                    })}
-                  />
-                  <FormErrorMessage>{errors.prompt?.message}</FormErrorMessage>
-                </FormControl>
-                <TextPromptIdeasSelector
-                  promptIdeas={TEXT_PROMPT_IDEAS}
-                  handleIdeaClick={(idea) => setValue('prompt', idea)}
-                />
-                <Button
-                  rightIcon={<BiRightArrowAlt fontSize="1.5rem" />}
-                  type="submit"
-                  isFullWidth
-                  isLoading={useMakeTextPromptMutation.isLoading}
-                >
-                  Create form
-                </Button>
-              </Stack>
-            </form>
-          </ModalBody>
-        </Container>
-      </ModalContent>
-    </Modal>
-  )
-}
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/index.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/index.tsx
deleted file mode 100644
index f9ef4393dd..0000000000
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './TextPromptModal'

From 66521d8b8a3a2de01f92bb18aed5e9e030cafc26 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Tue, 24 Dec 2024 12:05:41 +0800
Subject: [PATCH 09/22] feat: move isAcceptDenyOpen away from store

---
 .../FieldListDrawer/MagicFormBuilderContainer.tsx         | 4 ++--
 .../builder-and-design/useMagicFormBuilderStore.tsx       | 8 +-------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
index 023853aaad..73ce2d302a 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
@@ -29,7 +29,6 @@ import { useAssistanceMutations } from '~features/admin-form/assistance/mutation
 
 import { useDeleteFormField } from '../../mutations/useDeleteFormField'
 import {
-  isAcceptDenyOpenSelector,
   recentlyCreatedFieldIdsSelector,
   useMagicFormBuilderStore,
 } from '../../useMagicFormBuilderStore'
@@ -180,7 +179,8 @@ const MagicFormBuilderPopover = ({
     recentlyCreatedFieldIdsSelector,
   )
 
-  const isAcceptDenyOpen = useMagicFormBuilderStore(isAcceptDenyOpenSelector)
+  const isAcceptDenyOpen =
+    !!recentlyCreatedFieldIds && recentlyCreatedFieldIds.size > 0
 
   const onClickDefaults = () => {
     clearRecentlyCreatedFieldIds()
diff --git a/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx b/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx
index f593a076ad..16e58230ba 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx
@@ -1,15 +1,13 @@
 import create from 'zustand'
 
 export type MagicFormBuilderStore = {
-  isAcceptDenyOpen: boolean
   recentlyCreatedFieldIds: Set<string>
   setRecentlyCreatedFieldIds: (fieldIds: Set<string>) => void
   clearRecentlyCreatedFieldIds: () => void
 }
 
 export const useMagicFormBuilderStore = create<MagicFormBuilderStore>(
-  (set, get) => ({
-    isAcceptDenyOpen: get().recentlyCreatedFieldIds.size > 0,
+  (set) => ({
     recentlyCreatedFieldIds: new Set(),
     setRecentlyCreatedFieldIds: (fieldIds) =>
       set({ recentlyCreatedFieldIds: fieldIds }),
@@ -18,10 +16,6 @@ export const useMagicFormBuilderStore = create<MagicFormBuilderStore>(
   }),
 )
 
-export const isAcceptDenyOpenSelector = (
-  state: MagicFormBuilderStore,
-): MagicFormBuilderStore['isAcceptDenyOpen'] => state.isAcceptDenyOpen
-
 export const recentlyCreatedFieldIdsSelector = (
   state: MagicFormBuilderStore,
 ): MagicFormBuilderStore['recentlyCreatedFieldIds'] =>

From 8c0847b8f99719e232910b9bdd390ce741f72cb8 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Tue, 24 Dec 2024 12:32:51 +0800
Subject: [PATCH 10/22] feat: add text prompt selector to popover

---
 .../MagicFormBuilderContainer.tsx             | 68 ++++++++++++++++++-
 1 file changed, 66 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
index 73ce2d302a..4d446c3531 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
@@ -3,9 +3,11 @@ import { useForm } from 'react-hook-form'
 import { BiSolidMagicWand, BiTrash } from 'react-icons/bi'
 import { HiSparkles } from 'react-icons/hi2'
 import {
+  Box,
   Button,
   Flex,
   FormControl,
+  HStack,
   Icon,
   Popover,
   PopoverAnchor,
@@ -18,6 +20,7 @@ import {
   Text,
   Textarea,
   Tooltip,
+  VStack,
 } from '@chakra-ui/react'
 
 import { BxCheck } from '~/assets/icons'
@@ -33,6 +36,24 @@ import {
   useMagicFormBuilderStore,
 } from '../../useMagicFormBuilderStore'
 
+const TEXT_PROMPT_IDEAS = [
+  {
+    label: 'Employee satisfaction survey',
+    prompt:
+      'employee feedback on workplace satisfaction, including fields on overall job satisfaction, suggestions for improvement, and comments on company culture.',
+  },
+  {
+    label: 'Community issue reports',
+    prompt:
+      'community issue reports from citizens, including fields for location, description of the issue, and optional photo uploads.',
+  },
+  {
+    label: 'Government grant applications',
+    prompt:
+      'applications for government grants from business entities, incorporating sections for project details, budget breakdown, and applicant qualifications.',
+  },
+]
+
 const GENERATE_FORM_PLACEHOLDER =
   'Describe form, fields and sections to create...'
 
@@ -69,6 +90,42 @@ const MagicFormBuilderButton = ({
   )
 }
 
+const PromptSelectorBar = ({
+  promptIdeas,
+  onClick,
+}: {
+  promptIdeas: {
+    label: string
+    prompt: string
+  }[]
+  onClick: (prompt: string) => void
+}) => {
+  return (
+    <Flex direction="column">
+      <Text textStyle="body-2">Or, try a sample:</Text>
+      <HStack
+        overflowX="auto"
+        gap="0.25rem"
+        mt="0.25rem"
+        pt="0.25rem"
+        pb="1rem"
+      >
+        {promptIdeas.map((idea) => (
+          <Button
+            variant="clear"
+            size="xs"
+            borderRadius="3rem"
+            bgColor="secondary.200"
+            onClick={() => onClick(idea.prompt)}
+          >
+            {idea.label}
+          </Button>
+        ))}
+      </HStack>
+    </Flex>
+  )
+}
+
 const MagicFormBuilderCreateFormPrompt = ({
   onClose,
 }: {
@@ -77,6 +134,7 @@ const MagicFormBuilderCreateFormPrompt = ({
   const {
     register,
     handleSubmit,
+    setValue,
     formState: { errors },
   } = useForm<TextPromptInputs>()
 
@@ -93,19 +151,25 @@ const MagicFormBuilderCreateFormPrompt = ({
       </PopoverHeader>
       <PopoverCloseButton onClick={onClose} />
       <PopoverBody>
-        <FormControl isRequired isInvalid={false}>
+        <FormControl isRequired isInvalid={!!errors.prompt?.message}>
           <Textarea
             placeholder={GENERATE_FORM_PLACEHOLDER}
             {...register('prompt', {
               required: 'Please enter a prompt.',
               maxLength: {
-                value: 30,
+                value: 500,
                 message: 'Please enter at most 500 characters.',
               },
             })}
           />
           <FormErrorMessage>{errors.prompt?.message}</FormErrorMessage>
         </FormControl>
+        <Box mt="0.5rem">
+          <PromptSelectorBar
+            promptIdeas={TEXT_PROMPT_IDEAS}
+            onClick={(prompt) => setValue('prompt', prompt)}
+          />
+        </Box>
       </PopoverBody>
       <PopoverFooter>
         <Flex justifyContent="flex-end">

From eeac69f1f4884d4125f0c5384cba1a78c2dc561a Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:51:59 +0800
Subject: [PATCH 11/22] fix: remove deleted  prop

---
 .../BuilderAndDesignPlaceholder/EmptyFormPlaceholder.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/EmptyFormPlaceholder.stories.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/EmptyFormPlaceholder.stories.tsx
index 3d46b5de1e..5abb7815dc 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/EmptyFormPlaceholder.stories.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/EmptyFormPlaceholder.stories.tsx
@@ -32,7 +32,6 @@ const Template: StoryFn = (args) => {
         {...args}
         isDraggingOver={false}
         onClick={() => {}}
-        onMagicFormButtonClick={() => {}}
       />
     </Box>
   )

From 70e96307d89c5557ed2c9b3153a3ad69855c6bff Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:53:10 +0800
Subject: [PATCH 12/22] feat: remove unused text prompt selector

---
 .../TextPromptIdeasSelector.tsx               | 55 -------------------
 1 file changed, 55 deletions(-)
 delete mode 100644 frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/TextPromptIdeasSelector.tsx

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/TextPromptIdeasSelector.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/TextPromptIdeasSelector.tsx
deleted file mode 100644
index f1f7e0abff..0000000000
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/MagicFormBuilderModal/TextPromptIdeasSelector.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { BiBulb } from 'react-icons/bi'
-import { Box, Button, Flex, Stack, Text } from '@chakra-ui/react'
-
-export const TextPromptIdeasSelector = ({
-  promptIdeas,
-  handleIdeaClick,
-}: {
-  promptIdeas: string[]
-  handleIdeaClick: (idea: string) => void
-}): JSX.Element => {
-  return (
-    <Box
-      bgColor="white"
-      border="1px"
-      borderColor="neutral.400"
-      py="1rem"
-      px="1rem"
-      borderRadius="0.25rem"
-    >
-      <Flex mb="1rem">
-        <BiBulb fontSize="1.6rem" />
-        <Text textStyle="subhead-1" px="1rem">
-          Try one of these
-        </Text>
-      </Flex>
-      {!promptIdeas?.length ? (
-        <Text>No prompt ideas found</Text>
-      ) : (
-        <Stack>
-          {promptIdeas.map((idea: string) => (
-            <Button
-              key={idea}
-              h="100%"
-              w="100%"
-              borderColor="secondary.200"
-              borderWidth="1px"
-              variant="clear"
-              color="secondary.500"
-              onClick={() => handleIdeaClick(idea)}
-            >
-              <Text
-                textAlign="left"
-                textStyle="subhead-1"
-                color="secondary.500"
-                fontWeight="400"
-              >
-                {idea}
-              </Text>
-            </Button>
-          ))}
-        </Stack>
-      )}
-    </Box>
-  )
-}

From 7441e9a07c3a0a5e0c31e50d45a95a3580578464 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Mon, 30 Dec 2024 13:21:18 +0800
Subject: [PATCH 13/22] fix: improve styling and add timeout to clearing field
 ids

---
 .../MagicFormBuilderContainer.tsx             | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
index 4d446c3531..c1b0a24b2e 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
@@ -20,7 +20,6 @@ import {
   Text,
   Textarea,
   Tooltip,
-  VStack,
 } from '@chakra-ui/react'
 
 import { BxCheck } from '~/assets/icons'
@@ -54,8 +53,7 @@ const TEXT_PROMPT_IDEAS = [
   },
 ]
 
-const GENERATE_FORM_PLACEHOLDER =
-  'Describe form, fields and sections to create...'
+const GENERATE_FORM_PLACEHOLDER = 'Describe form, fields and sections to create'
 
 export const MagicFormBuilderContainer = () => {
   const isMobile = useIsMobile()
@@ -75,13 +73,14 @@ const MagicFormBuilderButton = ({
   return (
     <Tooltip openDelay={500} hasArrow label="Create fields with AI">
       <Button
+        variant="outline"
         onClick={onClick}
         padding="0"
-        backgroundColor="primary.200"
+        borderColor="primary.200"
         _hover={{
-          backgroundColor: 'primary.300',
+          backgroundColor: 'primary.200',
         }}
-        borderWidth={0}
+        borderWidth="1px"
         {...styleProps}
       >
         <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
@@ -115,7 +114,10 @@ const PromptSelectorBar = ({
             variant="clear"
             size="xs"
             borderRadius="3rem"
-            bgColor="secondary.200"
+            bgColor="secondary.100"
+            _hover={{
+              backgroundColor: 'primary.200',
+            }}
             onClick={() => onClick(idea.prompt)}
           >
             {idea.label}
@@ -247,8 +249,10 @@ const MagicFormBuilderPopover = ({
     !!recentlyCreatedFieldIds && recentlyCreatedFieldIds.size > 0
 
   const onClickDefaults = () => {
-    clearRecentlyCreatedFieldIds()
     setIsOpen(false)
+    setTimeout(() => {
+      clearRecentlyCreatedFieldIds()
+    }, 100) // only clear after the popover is closed
   }
 
   const { deleteMultipleFormFieldsMutation } = useDeleteFormField()

From a965f831e8c99e7ee2ba46ff9cf34b90cd979703 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Mon, 30 Dec 2024 13:45:49 +0800
Subject: [PATCH 14/22] fix: popover posiitoning

---
 .../MagicFormBuilderContainer.tsx             | 61 +++++++++++--------
 1 file changed, 34 insertions(+), 27 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
index c1b0a24b2e..23ca0f0b58 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { forwardRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { BiSolidMagicWand, BiTrash } from 'react-icons/bi'
 import { HiSparkles } from 'react-icons/hi2'
@@ -7,6 +7,7 @@ import {
   Button,
   Flex,
   FormControl,
+  FormLabel,
   HStack,
   Icon,
   Popover,
@@ -66,29 +67,34 @@ export const MagicFormBuilderContainer = () => {
   ) : null
 }
 
-const MagicFormBuilderButton = ({
-  onClick,
-  ...styleProps
-}: { onClick: () => void } & React.ComponentProps<typeof Button>) => {
-  return (
-    <Tooltip openDelay={500} hasArrow label="Create fields with AI">
-      <Button
-        variant="outline"
-        onClick={onClick}
-        padding="0"
-        borderColor="primary.200"
-        _hover={{
-          backgroundColor: 'primary.200',
-        }}
-        borderWidth="1px"
-        {...styleProps}
-      >
-        <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
-      </Button>
-    </Tooltip>
-  )
-}
-
+const MagicFormBuilderButton = forwardRef(
+  (
+    {
+      onClick,
+      ...styleProps
+    }: { onClick: () => void } & React.ComponentProps<typeof Button>,
+    ref,
+  ) => {
+    return (
+      <Tooltip openDelay={500} hasArrow label="Create fields with AI">
+        <Button
+          ref={ref} // Rationale: forward ref allows the popover placement to work.
+          variant="outline"
+          onClick={onClick}
+          padding="0"
+          borderColor="primary.200"
+          _hover={{
+            backgroundColor: 'primary.200',
+          }}
+          borderWidth="1px"
+          {...styleProps}
+        >
+          <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
+        </Button>
+      </Tooltip>
+    )
+  },
+)
 const PromptSelectorBar = ({
   promptIdeas,
   onClick,
@@ -111,6 +117,7 @@ const PromptSelectorBar = ({
       >
         {promptIdeas.map((idea) => (
           <Button
+            key={idea.label}
             variant="clear"
             size="xs"
             borderRadius="3rem"
@@ -154,6 +161,7 @@ const MagicFormBuilderCreateFormPrompt = ({
       <PopoverCloseButton onClick={onClose} />
       <PopoverBody>
         <FormControl isRequired isInvalid={!!errors.prompt?.message}>
+          <FormLabel>I want to create a form that collects</FormLabel>
           <Textarea
             placeholder={GENERATE_FORM_PLACEHOLDER}
             {...register('prompt', {
@@ -258,13 +266,12 @@ const MagicFormBuilderPopover = ({
   const { deleteMultipleFormFieldsMutation } = useDeleteFormField()
 
   return (
-    <Popover isLazy placement="right" isOpen={isOpen}>
+    <Popover isLazy placement="right-start" isOpen={isOpen}>
       <PopoverAnchor>
         <MagicFormBuilderButton onClick={() => setIsOpen(!isOpen)} />
       </PopoverAnchor>
       <Portal>
-        {/* TODO: (MFBv1.1) Fix the position of the popover. */}
-        <PopoverContent bg="white" top="15vh" left="40vw">
+        <PopoverContent bg="white">
           {!isAcceptDenyOpen ? (
             <MagicFormBuilderCreateFormPrompt
               onClose={() => setIsOpen(false)}

From 6ea7103a0cfb36d506546fe181e52980286baea0 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Mon, 30 Dec 2024 13:48:46 +0800
Subject: [PATCH 15/22] feat: add beta flag

---
 .../FieldListDrawer/FieldListDrawer.tsx                      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
index ac2fb4766a..8452e8785b 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
@@ -19,6 +19,7 @@ import {
 import { Tab } from '~components/Tabs'
 
 import { useCreatePageSidebar } from '~features/admin-form/create/common/CreatePageSidebarContext'
+import { useUser } from '~features/user/queries'
 
 import { useCreateTabForm } from '../../../builder-and-design/useCreateTabForm'
 import { CreatePageDrawerCloseButton } from '../../../common'
@@ -38,6 +39,8 @@ const FieldSearchBar = ({
   searchValue: string
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
 }) => {
+  const { user } = useUser()
+
   return (
     <>
       <InputGroup>
@@ -50,7 +53,7 @@ const FieldSearchBar = ({
           onChange={onChange}
           placeholder="Search fields"
         />
-        <MagicFormBuilderContainer />
+        {user?.betaFlags?.mfb ? <MagicFormBuilderContainer /> : null}
       </InputGroup>
     </>
   )

From 8edf2ccd822fac6f3b008fdf519870aa57797e60 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Mon, 30 Dec 2024 13:51:35 +0800
Subject: [PATCH 16/22] feat: make active state for button

---
 .../FieldListDrawer/MagicFormBuilderContainer.tsx     | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
index 23ca0f0b58..bd044c8e0e 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
@@ -70,9 +70,12 @@ export const MagicFormBuilderContainer = () => {
 const MagicFormBuilderButton = forwardRef(
   (
     {
+      isActive,
       onClick,
       ...styleProps
-    }: { onClick: () => void } & React.ComponentProps<typeof Button>,
+    }: { isActive: boolean; onClick: () => void } & React.ComponentProps<
+      typeof Button
+    >,
     ref,
   ) => {
     return (
@@ -83,6 +86,7 @@ const MagicFormBuilderButton = forwardRef(
           onClick={onClick}
           padding="0"
           borderColor="primary.200"
+          backgroundColor={isActive ? 'primary.200' : undefined}
           _hover={{
             backgroundColor: 'primary.200',
           }}
@@ -268,7 +272,10 @@ const MagicFormBuilderPopover = ({
   return (
     <Popover isLazy placement="right-start" isOpen={isOpen}>
       <PopoverAnchor>
-        <MagicFormBuilderButton onClick={() => setIsOpen(!isOpen)} />
+        <MagicFormBuilderButton
+          isActive={isOpen}
+          onClick={() => setIsOpen(!isOpen)}
+        />
       </PopoverAnchor>
       <Portal>
         <PopoverContent bg="white">

From a7265847844a4e96a23219513f4c94871adc1ec3 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Mon, 30 Dec 2024 14:04:40 +0800
Subject: [PATCH 17/22] fix: update failing tc

---
 .../admin-form/__tests__/admin-form.assistance.service.spec.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/form/admin-form/__tests__/admin-form.assistance.service.spec.ts b/src/app/modules/form/admin-form/__tests__/admin-form.assistance.service.spec.ts
index be935b76d5..aa602db774 100644
--- a/src/app/modules/form/admin-form/__tests__/admin-form.assistance.service.spec.ts
+++ b/src/app/modules/form/admin-form/__tests__/admin-form.assistance.service.spec.ts
@@ -48,7 +48,7 @@ describe('admin-form.assistance.service', () => {
       beforeEach(() => {
         const mockedCreateFormFields =
           AdminFormService.createFormFields as jest.Mock
-        mockedCreateFormFields.mockReturnValue(okAsync({} as FormFieldSchema[]))
+        mockedCreateFormFields.mockReturnValue(okAsync([] as FormFieldSchema[]))
       })
 
       it('should successfully invoke createNewFields with correct # of fields when model response is valid', async () => {

From 89a3f1c8d9d12d2801490ff63e77e7833a92da14 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Mon, 30 Dec 2024 14:21:01 +0800
Subject: [PATCH 18/22] feat: add tc for delete fields by id

---
 .../__tests__/form.server.model.spec.ts       | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/src/app/models/__tests__/form.server.model.spec.ts b/src/app/models/__tests__/form.server.model.spec.ts
index 58eef8b335..81934f1777 100644
--- a/src/app/models/__tests__/form.server.model.spec.ts
+++ b/src/app/models/__tests__/form.server.model.spec.ts
@@ -1841,6 +1841,94 @@ describe('Form Model', () => {
       })
     })
 
+    describe('deleteFormFieldsByIds', () => {
+      it('should delete multiple form fields and return updated form when successful', async () => {
+        // Arrange
+        const fieldToDelete1 = generateDefaultField(BasicField.Decimal)
+        const fieldToDelete2 = generateDefaultField(BasicField.ShortText)
+        const fieldWhichShouldRemain = generateDefaultField(BasicField.Mobile)
+        const formParams = merge({}, MOCK_EMAIL_FORM_PARAMS, {
+          admin: populatedAdmin,
+          form_fields: [fieldToDelete1, fieldWhichShouldRemain, fieldToDelete2],
+        })
+        const form = await Form.create(formParams)
+
+        // Act
+        const actual = await Form.deleteFormFieldsByIds(form._id, [
+          fieldToDelete1._id,
+          fieldToDelete2._id,
+        ])
+
+        // Assert
+        // Only non-deleted form field remains
+        const expectedFormFieldIds = [
+          form.toObject<IFormDocument>().form_fields[1]._id.toString(),
+        ]
+        const retrievedForm = await Form.findById(form._id).lean()
+        // Check return shape.
+        expect(
+          actual?.toObject().form_fields.map((f: any) => f._id.toString()),
+        ).toEqual(expectedFormFieldIds)
+        // Check db state
+        expect(retrievedForm).not.toBeNull()
+        expect(
+          retrievedForm?.form_fields?.map((f) => f._id.toString()),
+        ).toEqual(expectedFormFieldIds)
+      })
+
+      it('should return form unchanged when all field ids are invalid', async () => {
+        const formParams = merge({}, MOCK_ENCRYPTED_FORM_PARAMS, {
+          admin: MOCK_ADMIN_OBJ_ID,
+          form_fields: [
+            generateDefaultField(BasicField.Date),
+            generateDefaultField(BasicField.Mobile),
+          ],
+        })
+        const form = await Form.create(formParams)
+
+        // Act
+        const actual = await Form.deleteFormFieldsByIds(form._id, [
+          new ObjectId().toHexString(),
+          new ObjectId().toHexString(),
+        ])
+
+        // Assert
+        expect(actual?.toObject()).toEqual({
+          ...form.toObject(),
+          lastModified: expect.any(Date),
+        })
+      })
+
+      it('should only delete field ids which are valid and ignore invalid field ids', async () => {
+        const fieldToDelete = generateDefaultField(BasicField.Date)
+        const fieldWhichShouldRemain = generateDefaultField(BasicField.Mobile)
+        const formParams = merge({}, MOCK_ENCRYPTED_FORM_PARAMS, {
+          admin: MOCK_ADMIN_OBJ_ID,
+          form_fields: [fieldToDelete, fieldWhichShouldRemain],
+        })
+
+        const form = await Form.create(formParams)
+
+        const actual = await Form.deleteFormFieldsByIds(form._id, [
+          fieldToDelete._id,
+          new ObjectId().toHexString(),
+        ])
+
+        // Assert
+        const expectedFormFieldIds = [fieldWhichShouldRemain._id.toString()]
+        const retrievedForm = await Form.findById(form._id).lean()
+        // Check return shape.
+        expect(
+          actual?.toObject().form_fields.map((f: any) => f._id.toString()),
+        ).toEqual(expectedFormFieldIds)
+        // Check db state
+        expect(retrievedForm).not.toBeNull()
+        expect(
+          retrievedForm?.form_fields?.map((f) => f._id.toString()),
+        ).toEqual(expectedFormFieldIds)
+      })
+    })
+
     describe('updateEndPageById', () => {
       it('should update end page and return updated form when successful', async () => {
         // Arrange

From 37e09406448ce2f9bc4ac1e41e4d0cd6b9b437c1 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Mon, 30 Dec 2024 23:54:46 +0800
Subject: [PATCH 19/22] feat: add tc for delete form fields controller and
 service

---
 .../admin-form.assistance.service.spec.ts     |  52 ++++++++
 .../__tests__/admin-form.service.spec.ts      | 126 ++++++++++++++++++
 2 files changed, 178 insertions(+)

diff --git a/src/app/modules/form/admin-form/__tests__/admin-form.assistance.service.spec.ts b/src/app/modules/form/admin-form/__tests__/admin-form.assistance.service.spec.ts
index aa602db774..c3e97eff33 100644
--- a/src/app/modules/form/admin-form/__tests__/admin-form.assistance.service.spec.ts
+++ b/src/app/modules/form/admin-form/__tests__/admin-form.assistance.service.spec.ts
@@ -194,6 +194,58 @@ describe('admin-form.assistance.service', () => {
         expect(calledNewFields[0].description).toBeTruthy()
         expect(calledNewFields[0].description.trim()).not.toBe('')
       })
+
+      it('should return created field ids provided by return value of AdminFormService.createFormFields', async () => {
+        // Arrange
+        const VALID_ALL_FIELDS_INCLUDED_RESPONSE =
+          '[{"title":"Cat Information","fieldType":"Section","required":false},{"title":"Please provide the name of your cat.","fieldType":"Statement","required":true,"description":"This information is needed to identify your pet."},{"title":"Your Email Address","fieldType":"Email","required":true},{"title":"Your Mobile Number","fieldType":"Mobile","required":true},{"title":"Your Home Phone Number","fieldType":"HomeNo","required":false},{"title":"How many cats do you have?","fieldType":"Number","required":true},{"title":"How much do you spend on cat care monthly?","fieldType":"Decimal","required":true},{"title":"Cat\'s Name (Short)","fieldType":"ShortText","required":true},{"title":"Tell us more about your cat (Long)","fieldType":"LongText","required":false},{"title":"Select your favorite cat breed","fieldType":"Dropdown","required":true,"fieldOptions":["Siamese","Persian","Maine Coon","Bengal","Sphynx"]},{"title":"Country/Region","fieldType":"CountryRegion","required":true},{"title":"Do you agree to share your cat\'s name for our records?","fieldType":"YesNo","required":true},{"title":"Do you want to receive updates about cat care?","fieldType":"Checkbox","required":false,"fieldOptions":["Yes, send me emails","No, thank you"]},{"title":"Select your preferred communication method","fieldType":"Radio","required":true,"fieldOptions":["Email","Phone","SMS"]},{"title":"Upload a picture of your cat","fieldType":"Attachment","required":false},{"title":"Select the date of your cat\'s birthday","fieldType":"Date","required":true},{"title":"Rate your satisfaction with our cat services (1-5)","fieldType":"Rating","required":true},{"title":"Your NRIC Number","fieldType":"Nric","required":true},{"title":"Your Business UEN (if applicable)","fieldType":"Uen","required":false},{"title":"Cat Care Records","fieldType":"Table","required":true,"columns":["Date","Activity","Notes"],"minimumRows":1,"addMoreRows":true}]'
+
+        MockedAiModel.sendUserTextPrompt = jest
+          .fn()
+          .mockReturnValue(okAsync(VALID_ALL_FIELDS_INCLUDED_RESPONSE))
+
+        const CREATED_FIELD_SCHEMAS = [
+          { _id: '507f1f77bcf86cd799439011' },
+          { _id: '507f1f77bcf86cd799439012' },
+          { _id: '507f1f77bcf86cd799439013' },
+          { _id: '507f1f77bcf86cd799439014' },
+          { _id: '507f1f77bcf86cd799439015' },
+          { _id: '507f1f77bcf86cd799439016' },
+          { _id: '507f1f77bcf86cd799439017' },
+          { _id: '507f1f77bcf86cd799439018' },
+          { _id: '507f1f77bcf86cd799439019' },
+          { _id: '507f1f77bcf86cd799439020' },
+          { _id: '507f1f77bcf86cd799439021' },
+          { _id: '507f1f77bcf86cd799439022' },
+          { _id: '507f1f77bcf86cd799439023' },
+          { _id: '507f1f77bcf86cd799439024' },
+          { _id: '507f1f77bcf86cd799439025' },
+          { _id: '507f1f77bcf86cd799439026' },
+          { _id: '507f1f77bcf86cd799439027' },
+          { _id: '507f1f77bcf86cd799439028' },
+          { _id: '507f1f77bcf86cd799439029' },
+          { _id: '507f1f77bcf86cd799439030' },
+        ]
+
+        const mockedCreateFormFields =
+          AdminFormService.createFormFields as jest.Mock
+        mockedCreateFormFields.mockReturnValueOnce(
+          okAsync(CREATED_FIELD_SCHEMAS as FormFieldSchema[]),
+        )
+
+        // Act
+        const createdFieldIds = await createFormFieldsUsingTextPrompt({
+          form: mockForm,
+          userPrompt: mockUserPrompt,
+        })
+
+        // Assert
+        expect(AdminFormService.createFormFields).toHaveBeenCalledTimes(1)
+        expect(createdFieldIds.isOk()).toBe(true)
+        expect(createdFieldIds._unsafeUnwrap()).toEqual(
+          CREATED_FIELD_SCHEMAS.map((field) => field._id),
+        )
+      })
     })
 
     describe('model errors', () => {
diff --git a/src/app/modules/form/admin-form/__tests__/admin-form.service.spec.ts b/src/app/modules/form/admin-form/__tests__/admin-form.service.spec.ts
index 22c7f37093..d103c7c28f 100644
--- a/src/app/modules/form/admin-form/__tests__/admin-form.service.spec.ts
+++ b/src/app/modules/form/admin-form/__tests__/admin-form.service.spec.ts
@@ -33,6 +33,7 @@ import { CreatePresignedPostError } from 'src/app/utils/aws-s3'
 import { formatErrorRecoveryMessage } from 'src/app/utils/handle-mongo-error'
 import { EditFieldActions } from 'src/shared/constants'
 import {
+  FormFieldSchema,
   FormLogicSchema,
   IEmailFormSchema,
   IFormDocument,
@@ -2428,6 +2429,131 @@ describe('admin-form.service', () => {
     })
   })
 
+  describe('deleteFormFields', () => {
+    const deleteFormFieldsSpy = jest.spyOn(FormModel, 'deleteFormFieldsByIds')
+
+    it('should return updated form when all fields to delete are found and deleted successfully', async () => {
+      // Arrange
+      const fieldsToDelete = [
+        generateDefaultField(BasicField.Mobile),
+        generateDefaultField(BasicField.Image),
+      ]
+
+      const mockUpdatedForm = {
+        title: 'some mock form',
+        form_fields: [generateDefaultField(BasicField.Nric)],
+      } as IFormSchema
+
+      const mockForm = {
+        ...mockUpdatedForm,
+        form_fields: [
+          ...fieldsToDelete,
+          ...(mockUpdatedForm.form_fields as FormFieldSchema[]),
+        ],
+      } as unknown as IPopulatedForm
+
+      deleteFormFieldsSpy.mockResolvedValueOnce(mockUpdatedForm)
+
+      // Act
+      const actual = await AdminFormService.deleteFormFields(
+        mockForm,
+        fieldsToDelete.map((f) => String(f._id)),
+      )
+
+      // Assert
+      expect(actual._unsafeUnwrap()).toEqual(mockUpdatedForm)
+      expect(deleteFormFieldsSpy).toHaveBeenCalledWith(
+        mockForm._id,
+        fieldsToDelete.map((f) => f._id),
+      )
+    })
+
+    it('should return FormNotFoundError when form cannot be found', async () => {
+      // Arrange
+      const mockForm = {
+        _id: new ObjectId(),
+        form_fields: [generateDefaultField(BasicField.Mobile)],
+      } as unknown as IPopulatedForm
+
+      deleteFormFieldsSpy.mockResolvedValueOnce(null)
+
+      // Act
+      const actual = await AdminFormService.deleteFormFields(mockForm, [
+        mockForm.form_fields[0]._id,
+      ])
+
+      // Assert
+      expect(actual._unsafeUnwrapErr()).toEqual(new FormNotFoundError())
+      expect(deleteFormFieldsSpy).toHaveBeenCalledWith(mockForm._id, [
+        mockForm.form_fields[0]._id,
+      ])
+    })
+
+    it('should return updated form when some fields to delete are found and some are not found', async () => {
+      // Arrange
+      const fieldsToDelete = [
+        generateDefaultField(BasicField.Mobile),
+        generateDefaultField(BasicField.Image),
+      ]
+
+      const mockUpdatedForm = {
+        title: 'some mock form',
+        form_fields: [generateDefaultField(BasicField.Nric)],
+      } as IFormSchema
+
+      const mockForm = {
+        ...mockUpdatedForm,
+        form_fields: [
+          ...fieldsToDelete,
+          ...(mockUpdatedForm.form_fields as FormFieldSchema[]),
+        ],
+      } as unknown as IPopulatedForm
+
+      deleteFormFieldsSpy.mockResolvedValueOnce(mockUpdatedForm)
+
+      // Act
+      const actual = await AdminFormService.deleteFormFields(
+        mockForm,
+        fieldsToDelete.map((f) => String(f._id)),
+      )
+
+      // Assert
+      expect(actual._unsafeUnwrap()).toEqual(mockUpdatedForm)
+      expect(deleteFormFieldsSpy).toHaveBeenCalledWith(
+        mockForm._id,
+        fieldsToDelete.map((f) => f._id),
+      )
+    })
+
+    it('should return unchanged form when no fields to delete are found', async () => {
+      // Arrange
+      const mockForm = {
+        title: 'some mock form',
+        form_fields: [generateDefaultField(BasicField.Nric)],
+        _id: new ObjectId(),
+      } as unknown as IPopulatedForm
+
+      const mockUpdatedForm = {
+        ...mockForm,
+      } as IFormSchema
+
+      deleteFormFieldsSpy.mockResolvedValueOnce(mockUpdatedForm)
+
+      const nonExistentFieldId = new ObjectId().toHexString()
+
+      // Act
+      const actual = await AdminFormService.deleteFormFields(mockForm, [
+        nonExistentFieldId,
+      ])
+
+      // Assert
+      expect(actual._unsafeUnwrap()).toEqual(mockUpdatedForm)
+      expect(deleteFormFieldsSpy).toHaveBeenCalledWith(mockForm._id, [
+        nonExistentFieldId,
+      ])
+    })
+  })
+
   describe('updateEndPage', () => {
     const updateSpy = jest.spyOn(FormModel, 'updateEndPageById')
     const MOCK_FORM_ID = new ObjectId().toHexString()

From b368fd04bdccc7f5cf215c432f0eb486b2807645 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Tue, 31 Dec 2024 00:37:26 +0800
Subject: [PATCH 20/22] feat: add stories for mfb popover

---
 .../FieldListDrawer.stories.tsx               |  8 ++
 .../FieldListDrawer/FieldListDrawer.tsx       |  5 +-
 .../MagicFormBuilderContainer.stories.tsx     | 41 +++++++++
 .../MagicFormBuilderContainer.tsx             | 86 +++++++++++--------
 4 files changed, 101 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.stories.tsx

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.stories.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.stories.tsx
index 68a3bc1dc9..7ff36706a0 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.stories.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.stories.tsx
@@ -39,6 +39,8 @@ const mrfModeHandlers = [
   getAdminFormView({ mode: FormResponseMode.Multirespondent }),
 ]
 
+const emailModeHandlers = [getAdminFormView({ mode: FormResponseMode.Email })]
+
 export const EncryptMode = {
   parameters: {
     msw: encryptModeHandlers,
@@ -50,3 +52,9 @@ export const MrfMode = {
     msw: mrfModeHandlers,
   },
 }
+
+export const EmailMode = {
+  parameters: {
+    msw: emailModeHandlers,
+  },
+}
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
index 8452e8785b..14d6008f16 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
@@ -39,7 +39,9 @@ const FieldSearchBar = ({
   searchValue: string
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
 }) => {
+  // TODO (MFB-v1.1): Remove useUser and isTest which is used for beta flag when out of beta
   const { user } = useUser()
+  const isTest = import.meta.env.STORYBOOK_NODE_ENV === 'test'
 
   return (
     <>
@@ -53,7 +55,8 @@ const FieldSearchBar = ({
           onChange={onChange}
           placeholder="Search fields"
         />
-        {user?.betaFlags?.mfb ? <MagicFormBuilderContainer /> : null}
+        {/* TODO (MFB-v1.1): Remove this beta flag and isTest check when out of beta*/}
+        {user?.betaFlags?.mfb || isTest ? <MagicFormBuilderContainer /> : null}
       </InputGroup>
     </>
   )
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.stories.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.stories.tsx
new file mode 100644
index 0000000000..a3661409b3
--- /dev/null
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.stories.tsx
@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/react/*'
+
+import { StoryRouter } from '~utils/storybook'
+
+import { MagicFormBuilderPopover } from './MagicFormBuilderContainer'
+
+export default {
+  component: MagicFormBuilderPopover,
+  title:
+    'Features/AdminForm/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer',
+  decorators: [StoryRouter({ initialEntries: ['/12345'], path: '/:formId' })],
+} as Meta
+
+const defaultArgs = {
+  isOpen: false,
+  isAcceptDenyOpen: false,
+  onMfbClick: () => {},
+  onClose: () => {},
+  onAccept: () => {},
+  onDeny: () => {},
+}
+
+export const NotActive = {
+  args: defaultArgs,
+}
+
+export const ActivePrompt = {
+  args: {
+    ...defaultArgs,
+    isOpen: true,
+    isAcceptDenyOpen: false,
+  },
+}
+
+export const ActiveAcceptDeny = {
+  args: {
+    ...defaultArgs,
+    isOpen: true,
+    isAcceptDenyOpen: true,
+  },
+}
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
index bd044c8e0e..c970950882 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
@@ -60,9 +60,40 @@ export const MagicFormBuilderContainer = () => {
   const isMobile = useIsMobile()
   const [isOpen, setIsOpen] = useState(false)
 
+  const clearRecentlyCreatedFieldIds = useMagicFormBuilderStore(
+    (state) => state.clearRecentlyCreatedFieldIds,
+  )
+  const recentlyCreatedFieldIds = useMagicFormBuilderStore(
+    recentlyCreatedFieldIdsSelector,
+  )
+
+  const onClickDefaults = () => {
+    setIsOpen(false)
+    setTimeout(() => {
+      clearRecentlyCreatedFieldIds()
+    }, 100) // only clear after the popover is closed
+  }
+
+  const { deleteMultipleFormFieldsMutation } = useDeleteFormField()
+
+  const isAcceptDenyOpen =
+    !!recentlyCreatedFieldIds && recentlyCreatedFieldIds.size > 0
+
   return !isMobile ? (
     <>
-      <MagicFormBuilderPopover isOpen={isOpen} setIsOpen={setIsOpen} />
+      <MagicFormBuilderPopover
+        isOpen={isOpen}
+        isAcceptDenyOpen={isAcceptDenyOpen}
+        onMfbClick={() => setIsOpen(!isOpen)}
+        onClose={() => setIsOpen(false)}
+        onAccept={onClickDefaults}
+        onDeny={() => {
+          deleteMultipleFormFieldsMutation.mutate(
+            Array.from(recentlyCreatedFieldIds),
+          )
+          onClickDefaults()
+        }}
+      />
     </>
   ) : null
 }
@@ -243,56 +274,35 @@ interface TextPromptInputs {
   prompt: string
 }
 
-const MagicFormBuilderPopover = ({
+export const MagicFormBuilderPopover = ({
   isOpen,
-  setIsOpen,
+  onMfbClick,
+  onClose,
+  isAcceptDenyOpen,
+  onAccept,
+  onDeny,
 }: {
   isOpen: boolean
-  setIsOpen: (isOpen: boolean) => void
+  onMfbClick: () => void
+  onClose: () => void
+  isAcceptDenyOpen: boolean
+  onAccept: () => void
+  onDeny: () => void
 }) => {
-  const clearRecentlyCreatedFieldIds = useMagicFormBuilderStore(
-    (state) => state.clearRecentlyCreatedFieldIds,
-  )
-  const recentlyCreatedFieldIds = useMagicFormBuilderStore(
-    recentlyCreatedFieldIdsSelector,
-  )
-
-  const isAcceptDenyOpen =
-    !!recentlyCreatedFieldIds && recentlyCreatedFieldIds.size > 0
-
-  const onClickDefaults = () => {
-    setIsOpen(false)
-    setTimeout(() => {
-      clearRecentlyCreatedFieldIds()
-    }, 100) // only clear after the popover is closed
-  }
-
-  const { deleteMultipleFormFieldsMutation } = useDeleteFormField()
-
   return (
     <Popover isLazy placement="right-start" isOpen={isOpen}>
       <PopoverAnchor>
-        <MagicFormBuilderButton
-          isActive={isOpen}
-          onClick={() => setIsOpen(!isOpen)}
-        />
+        <MagicFormBuilderButton isActive={isOpen} onClick={onMfbClick} />
       </PopoverAnchor>
       <Portal>
         <PopoverContent bg="white">
           {!isAcceptDenyOpen ? (
-            <MagicFormBuilderCreateFormPrompt
-              onClose={() => setIsOpen(false)}
-            />
+            <MagicFormBuilderCreateFormPrompt onClose={onClose} />
           ) : (
             <MagicFormBuilderAcceptDeny
-              onAccept={onClickDefaults}
-              onDeny={() => {
-                deleteMultipleFormFieldsMutation.mutate(
-                  Array.from(recentlyCreatedFieldIds),
-                )
-                onClickDefaults()
-              }}
-              onClose={() => setIsOpen(false)}
+              onAccept={onAccept}
+              onDeny={onDeny}
+              onClose={onClose}
             />
           )}
         </PopoverContent>

From 718385dd889d3b6cdc9f7ace1e122a5e0e8d53d9 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Tue, 31 Dec 2024 01:16:30 +0800
Subject: [PATCH 21/22] fix: bug where recently created field ids are shared
 across forms

---
 .../admin-form/assistance/mutations.ts        |  9 +++-
 .../BuilderAndDesignContent/BuilderFields.tsx | 12 ++---
 .../BuilderAndDesignContent/FormBuilder.tsx   | 15 +++++--
 .../MagicFormBuilderContainer.tsx             | 44 ++++++++++---------
 .../useMagicFormBuilderStore.tsx              | 21 +++++----
 5 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/frontend/src/features/admin-form/assistance/mutations.ts b/frontend/src/features/admin-form/assistance/mutations.ts
index 823cff5048..c235f2e3d8 100644
--- a/frontend/src/features/admin-form/assistance/mutations.ts
+++ b/frontend/src/features/admin-form/assistance/mutations.ts
@@ -22,8 +22,13 @@ export const useAssistanceMutations = () => {
     {
       onSuccess: (data) => {
         const { createdFieldIds } = data
-        useMagicFormBuilderStore.setState({
-          recentlyCreatedFieldIds: new Set(createdFieldIds),
+        useMagicFormBuilderStore.setState((state) => {
+          return {
+            recentlyCreatedFieldIds: {
+              ...state.recentlyCreatedFieldIds,
+              [formId]: new Set(createdFieldIds),
+            },
+          }
         })
         queryClient.invalidateQueries(adminFormKeys.id(formId))
         toast.closeAll()
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderFields.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderFields.tsx
index e2c0eeddd8..cf5789ef7b 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderFields.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderFields.tsx
@@ -11,10 +11,6 @@ import {
   stateDataSelector,
   useFieldBuilderStore,
 } from '../useFieldBuilderStore'
-import {
-  recentlyCreatedFieldIdsSelector,
-  useMagicFormBuilderStore,
-} from '../useMagicFormBuilderStore'
 import { useDesignColorTheme } from '../utils/useDesignColorTheme'
 
 import FieldRow from './FieldRow'
@@ -23,6 +19,7 @@ interface BuilderFieldsProps {
   responseMode: AdminFormDto['responseMode']
   fields: AdminFormDto['form_fields']
   visibleFieldIds: FieldIdSet
+  highlightFieldIds: FieldIdSet
   isDraggingOver: boolean
 }
 
@@ -30,6 +27,7 @@ export const BuilderFields = ({
   responseMode,
   fields,
   visibleFieldIds,
+  highlightFieldIds,
   isDraggingOver,
 }: BuilderFieldsProps) => {
   const fieldsWithQuestionNos = augmentWithQuestionNo(fields)
@@ -48,10 +46,6 @@ export const BuilderFields = ({
 
   const isDirty = useDirtyFieldStore(isDirtySelector)
 
-  const mfbRecentlyCreatedFieldIds = useMagicFormBuilderStore(
-    recentlyCreatedFieldIdsSelector,
-  )
-
   return (
     <>
       {fieldsWithQuestionNos.map((f, i) => {
@@ -72,7 +66,7 @@ export const BuilderFields = ({
             handleBuilderClick={handleBuilderClick}
             isDirty={isDirty}
             colorTheme={colorTheme}
-            isHighlighted={mfbRecentlyCreatedFieldIds.has(f._id)}
+            isHighlighted={highlightFieldIds.has(f._id)}
             {...activeFieldExtraProps}
           />
         )
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx
index 794b43a57a..99b170cc90 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx
@@ -34,6 +34,10 @@ import {
   setToInactiveSelector as setFieldBuilderToInactiveSelector,
   useFieldBuilderStore,
 } from '../useFieldBuilderStore'
+import {
+  recentlyCreatedFieldIdsSelector,
+  useMagicFormBuilderStore,
+} from '../useMagicFormBuilderStore'
 import { useDesignColorTheme } from '../utils/useDesignColorTheme'
 
 import { EmptyFormPlaceholder } from './BuilderAndDesignPlaceholder/EmptyFormPlaceholder'
@@ -66,9 +70,13 @@ export const FormBuilder = ({
     setEditingEndPageState: setToEditingEndPageSelector(state),
   }))
 
-  const { isOpen, onClose, onOpen } = useDisclosure()
-
-  const handleMagicFormButtonClick = onOpen
+  const recentlyCreatedFieldIds = useMagicFormBuilderStore(
+    recentlyCreatedFieldIdsSelector,
+  )
+  const highlightFieldIds: Set<string> =
+    form?._id && recentlyCreatedFieldIds[String(form._id)]
+      ? recentlyCreatedFieldIds[String(form._id)]
+      : new Set()
 
   const visibleFieldIds = useMemo(
     () =>
@@ -158,6 +166,7 @@ export const FormBuilder = ({
                           responseMode={form?.responseMode}
                           fields={builderFields}
                           visibleFieldIds={visibleFieldIds}
+                          highlightFieldIds={highlightFieldIds}
                           isDraggingOver={snapshot.isDraggingOver}
                         />
                         {provided.placeholder}
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
index c970950882..0a26b3c2ba 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx
@@ -2,6 +2,7 @@ import { forwardRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { BiSolidMagicWand, BiTrash } from 'react-icons/bi'
 import { HiSparkles } from 'react-icons/hi2'
+import { useParams } from 'react-router-dom'
 import {
   Box,
   Button,
@@ -57,7 +58,9 @@ const TEXT_PROMPT_IDEAS = [
 const GENERATE_FORM_PLACEHOLDER = 'Describe form, fields and sections to create'
 
 export const MagicFormBuilderContainer = () => {
+  const { formId } = useParams()
   const isMobile = useIsMobile()
+
   const [isOpen, setIsOpen] = useState(false)
 
   const clearRecentlyCreatedFieldIds = useMagicFormBuilderStore(
@@ -69,32 +72,33 @@ export const MagicFormBuilderContainer = () => {
 
   const onClickDefaults = () => {
     setIsOpen(false)
-    setTimeout(() => {
-      clearRecentlyCreatedFieldIds()
-    }, 100) // only clear after the popover is closed
+    if (formId) {
+      setTimeout(() => {
+        clearRecentlyCreatedFieldIds(formId)
+      }, 100) // only clear after the popover is closed
+    }
   }
 
   const { deleteMultipleFormFieldsMutation } = useDeleteFormField()
 
-  const isAcceptDenyOpen =
-    !!recentlyCreatedFieldIds && recentlyCreatedFieldIds.size > 0
+  const fieldIds = formId ? recentlyCreatedFieldIds[formId] : null
+  const isAcceptDenyOpen = !!fieldIds && fieldIds.size > 0
 
   return !isMobile ? (
-    <>
-      <MagicFormBuilderPopover
-        isOpen={isOpen}
-        isAcceptDenyOpen={isAcceptDenyOpen}
-        onMfbClick={() => setIsOpen(!isOpen)}
-        onClose={() => setIsOpen(false)}
-        onAccept={onClickDefaults}
-        onDeny={() => {
-          deleteMultipleFormFieldsMutation.mutate(
-            Array.from(recentlyCreatedFieldIds),
-          )
-          onClickDefaults()
-        }}
-      />
-    </>
+    <MagicFormBuilderPopover
+      isOpen={isOpen}
+      isAcceptDenyOpen={isAcceptDenyOpen}
+      onMfbClick={() => setIsOpen(!isOpen)}
+      onClose={() => setIsOpen(false)}
+      onAccept={onClickDefaults}
+      onDeny={() => {
+        onClickDefaults()
+        if (!formId) return
+        deleteMultipleFormFieldsMutation.mutate(
+          Array.from(recentlyCreatedFieldIds[formId]),
+        )
+      }}
+    />
   ) : null
 }
 
diff --git a/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx b/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx
index 16e58230ba..fe3bee0acf 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/useMagicFormBuilderStore.tsx
@@ -1,18 +1,23 @@
 import create from 'zustand'
 
 export type MagicFormBuilderStore = {
-  recentlyCreatedFieldIds: Set<string>
-  setRecentlyCreatedFieldIds: (fieldIds: Set<string>) => void
-  clearRecentlyCreatedFieldIds: () => void
+  recentlyCreatedFieldIds: {
+    [formId: string]: Set<string>
+  }
+  clearRecentlyCreatedFieldIds: (formId: string) => void
 }
 
 export const useMagicFormBuilderStore = create<MagicFormBuilderStore>(
   (set) => ({
-    recentlyCreatedFieldIds: new Set(),
-    setRecentlyCreatedFieldIds: (fieldIds) =>
-      set({ recentlyCreatedFieldIds: fieldIds }),
-    clearRecentlyCreatedFieldIds: () =>
-      set({ recentlyCreatedFieldIds: new Set() }),
+    recentlyCreatedFieldIds: {},
+    clearRecentlyCreatedFieldIds: (formId) =>
+      set((state) => ({
+        recentlyCreatedFieldIds: Object.fromEntries(
+          Object.entries(state.recentlyCreatedFieldIds).filter(
+            ([fid]) => fid !== formId,
+          ),
+        ),
+      })),
   }),
 )
 

From 7ca49d6d8d75cb062f71f28598508acb52ee81d3 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Tue, 31 Dec 2024 01:29:17 +0800
Subject: [PATCH 22/22] fix: remove unused import

---
 .../BuilderAndDesignContent/FormBuilder.tsx              | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx
index 99b170cc90..da440aa1f1 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx
@@ -1,13 +1,6 @@
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  Box,
-  Flex,
-  FlexProps,
-  Skeleton,
-  Stack,
-  useDisclosure,
-} from '@chakra-ui/react'
+import { Box, Flex, FlexProps, Skeleton, Stack } from '@chakra-ui/react'
 import { Droppable } from '@hello-pangea/dnd'
 
 import Button from '~components/Button'