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 }) => ( - - - - OR - - - -) - 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 ( - - -
- - - {placeholderText} - - {isMagicFormBuilderEnabled ? ( - <> - - Box - - ) : null} -
- - {isMagicFormBuilderEnabled ? ( - + +
+ + - - - ) : null} - - ) - }, -) + {placeholderText} + +
+ + + ) +}) 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 ( - <> - - - ) -} 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 ( <> - ) } 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 {}} /> -} - -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 - -export const TextPromptModal = ({ - isOpen, - onClose, -}: TextPromptModalProps): JSX.Element => { - const { - reset, - register, - handleSubmit, - setValue, - formState: { errors }, - } = useForm() - - 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 ( - - - - Write a prompt - - -
- - - - I want to create a form that collects... - -