feat: implement field deletion confirmation modal (#3694)

* feat: implement field deletion confirmation modal

* refactor: rename context vars to xxDisclosure

* refactor: remove unnecessary string literal

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignContent.tsx

@@ -34,7 +34,7 @@ export const BuilderAndDesignContent = ({
 
   const isMobile = useIsMobile()
   const {
-    mobileCreateEditModal: {
+    mobileCreateEditModalDisclosure: {
       isOpen: isMobileModalOpen,
       onOpen: onMobileModalOpen,
       onClose: onMobileModalClose,

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx

@@ -92,7 +92,8 @@ export const FieldRowContainer = ({
   }, [stateData, field])
 
   const {
-    mobileCreateEditModal: { onOpen: onMobileModalOpen },
+    mobileCreateEditModalDisclosure: { onOpen: onMobileModalOpen },
+    deleteFieldModalDisclosure: { onOpen: onDeleteModalOpen },
   } = useBuilderAndDesignContext()
 
   const ref = useRef<HTMLDivElement | null>(null)
@@ -142,9 +143,9 @@ export const FieldRowContainer = ({
     if (stateData.state === BuildFieldState.CreatingField) {
       setToInactive()
     } else if (stateData.state === BuildFieldState.EditingField) {
-      deleteFieldMutation.mutate(field._id)
+      onDeleteModalOpen()
     }
-  }, [field._id, deleteFieldMutation, setToInactive, stateData.state])
+  }, [setToInactive, stateData.state, onDeleteModalOpen])
 
   const isAnyMutationLoading = useMemo(
     () => duplicateFieldMutation.isLoading || deleteFieldMutation.isLoading,

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContext.ts

@@ -2,7 +2,8 @@ import { createContext, useContext } from 'react'
 import { UseDisclosureReturn } from '@chakra-ui/react'
 
 type BuilderAndDesignContextProps = {
-  mobileCreateEditModal: UseDisclosureReturn
+  mobileCreateEditModalDisclosure: UseDisclosureReturn
+  deleteFieldModalDisclosure: UseDisclosureReturn
 }
 
 export const BuilderAndDesignContext = createContext<

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/common/useEditFieldForm.ts

@@ -77,7 +77,7 @@ export const useEditFieldForm = <FormShape, FieldShape extends FormField>({
 
   const isMobile = useIsMobile()
   const {
-    mobileCreateEditModal: { onClose: onMobileModalClose },
+    mobileCreateEditModalDisclosure: { onClose: onMobileModalClose },
   } = useBuilderAndDesignContext()
 
   const isPendingField = useMemo(

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignTab.tsx

@@ -24,6 +24,7 @@ import {
   CREATE_PAGE_FIELDS_ORDERED,
   FIELD_LIST_DROP_ID,
 } from './constants'
+import { DeleteFieldModal } from './DeleteFieldModal'
 import { DndPlaceholderProps } from './types'
 import {
   updateCreateStateSelector,
@@ -95,17 +96,24 @@ export const BuilderAndDesignTab = (): JSX.Element => {
     [data, reorderFieldMutation, setToCreating, setPlaceholderProps],
   )
 
-  const mobileCreateEditModal = useDisclosure()
+  const mobileCreateEditModalDisclosure = useDisclosure()
+  const deleteFieldModalDisclosure = useDisclosure()
 
   return (
     <DragDropContext
       onDragStart={onDragStart}
       onDragUpdate={onDragUpdate}
       onDragEnd={onDragEnd}
     >
-      <BuilderAndDesignContext.Provider value={{ mobileCreateEditModal }}>
+      <BuilderAndDesignContext.Provider
+        value={{
+          mobileCreateEditModalDisclosure,
+          deleteFieldModalDisclosure,
+        }}
+      >
         <BuilderAndDesignDrawer />
         <BuilderAndDesignContent placeholderProps={placeholderProps} />
+        <DeleteFieldModal />
       </BuilderAndDesignContext.Provider>
     </DragDropContext>
   )

frontend/src/features/admin-form/create/builder-and-design/DeleteFieldModal/DeleteFieldModal.tsx

@@ -0,0 +1,74 @@
+import { useCallback, useMemo } from 'react'
+import {
+  ButtonGroup,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react'
+
+import Button from '~components/Button'
+import { ModalCloseButton } from '~components/Modal'
+
+import { BASICFIELD_TO_DRAWER_META } from '../../constants'
+import { useBuilderAndDesignContext } from '../BuilderAndDesignContext'
+import { useDeleteFormField } from '../mutations/useDeleteFormField'
+import {
+  BuildFieldState,
+  stateDataSelector,
+  useBuilderAndDesignStore,
+} from '../useBuilderAndDesignStore'
+
+export const DeleteFieldModal = (): JSX.Element => {
+  const stateData = useBuilderAndDesignStore(stateDataSelector)
+  const {
+    deleteFieldModalDisclosure: { isOpen, onClose },
+  } = useBuilderAndDesignContext()
+
+  const fieldTypeLabel = useMemo(() => {
+    if (stateData.state === BuildFieldState.EditingField) {
+      return BASICFIELD_TO_DRAWER_META[stateData.field.fieldType].label
+    }
+    return null
+  }, [stateData])
+
+  const { deleteFieldMutation } = useDeleteFormField()
+
+  const handleDeleteConfirmation = useCallback(() => {
+    if (stateData.state === BuildFieldState.EditingField) {
+      deleteFieldMutation.mutate(stateData.field._id, {
+        onSuccess: onClose,
+      })
+    }
+  }, [deleteFieldMutation, onClose, stateData])
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalCloseButton />
+        <ModalHeader>Delete {fieldTypeLabel} field</ModalHeader>
+        <ModalBody>
+          This field will be deleted permanently. Are you sure you want to
+          proceed?
+        </ModalBody>
+        <ModalFooter>
+          <ButtonGroup>
+            <Button variant="clear" colorScheme="secondary" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button
+              colorScheme="danger"
+              onClick={handleDeleteConfirmation}
+              isLoading={deleteFieldMutation.isLoading}
+            >
+              Yes, delete field
+            </Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

frontend/src/features/admin-form/create/builder-and-design/DeleteFieldModal/index.ts

@@ -0,0 +1 @@
+export * from './DeleteFieldModal'