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] 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>