From b4b56d1083a3ec8e9caec2245c9eaceee1aab9cb Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 20 Dec 2024 02:29:09 +0800 Subject: [PATCH] fix: add feedback mutation to DupeForm and UseTemplate wizard --- .../UseTemplateWizardProvider.tsx | 36 +++++++++++++++- .../CreateFormWizardProvider.tsx | 8 +++- .../DupeFormWizardProvider.tsx | 42 +++++++++++++++---- frontend/src/features/workspace/mutations.ts | 21 ++++++---- 4 files changed, 86 insertions(+), 21 deletions(-) diff --git a/frontend/src/features/admin-form/template/UseTemplateModal/UseTemplateWizardProvider.tsx b/frontend/src/features/admin-form/template/UseTemplateModal/UseTemplateWizardProvider.tsx index 8a0a9779da..9c12d40a4b 100644 --- a/frontend/src/features/admin-form/template/UseTemplateModal/UseTemplateWizardProvider.tsx +++ b/frontend/src/features/admin-form/template/UseTemplateModal/UseTemplateWizardProvider.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react' -import { FormResponseMode } from '~shared/types' +import { FormResponseMode, PublicFormViewDto } from '~shared/types' import { useFormTemplate } from '~features/admin-form/common/queries' import { @@ -9,6 +9,7 @@ import { CreateFormWizardContextReturn, } from '~features/workspace/components/CreateFormModal/CreateFormWizardContext' import { useCommonFormWizardProvider } from '~features/workspace/components/CreateFormModal/CreateFormWizardProvider' +import { useEmailModeFeedbackMutation } from '~features/workspace/mutations' import { useUseTemplateMutations } from '../mutation' @@ -41,7 +42,7 @@ export const useUseTemplateWizardContext = ( }) }, [reset, getValues, isTemplateFormLoading, templateFormData?.form.title]) - const { handleSubmit } = formMethods + const { handleSubmit, setValue } = formMethods const { useEmailModeFormTemplateMutation, @@ -49,6 +50,8 @@ export const useUseTemplateWizardContext = ( useMultirespondentFormTemplateMutation, } = useUseTemplateMutations() + const { emailModeFeedbackMutation } = useEmailModeFeedbackMutation() + const handleCreateStorageModeOrMultirespondentForm = handleSubmit( ({ title, responseMode }) => { if (!formId) return @@ -81,6 +84,33 @@ export const useUseTemplateWizardContext = ( }, ) + // TODO: (Kill Email Mode) Remove this route after kill email mode is fully implemented. + // Collect email mode usage feedback before creating the form + const handleEmailFeedbackSubmit = () => { + // explicit set response to email as email feedback "button" interaction + // is not handled handled in FormResponseOptions + setValue('responseMode', FormResponseMode.Email) + setCurrentStep([CreateFormFlowStates.EmailFeedback, 1]) + } + + // TODO: (Kill Email Mode) Remove this route after kill email mode is fully implemented. + const handleCreateEmailModeForm = (feedbackForm: PublicFormViewDto) => + handleSubmit((inputs) => { + if (!inputs.reason) { + return new Error('Reason is required') + } + emailModeFeedbackMutation.mutate({ + body: { reason: inputs.reason }, + feedbackForm, + }) + return useEmailModeFormTemplateMutation.mutate({ + formIdToDuplicate: formId, + emails: inputs.emails.filter(Boolean), + title: inputs.title, + responseMode: FormResponseMode.Email, + }) + }) + const handleDetailsSubmit = handleSubmit((inputs) => { if (!formId) return if (inputs.responseMode === FormResponseMode.Email) { @@ -106,6 +136,8 @@ export const useUseTemplateWizardContext = ( formMethods, handleDetailsSubmit, handleCreateStorageModeOrMultirespondentForm, + handleEmailFeedbackSubmit, + handleCreateEmailModeForm, isSingpass, modalHeader: 'Duplicate form', } diff --git a/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx b/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx index 98a0c4c3be..be33bc8da7 100644 --- a/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx +++ b/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx @@ -6,7 +6,10 @@ import { FormResponseMode, PublicFormViewDto } from '~shared/types' import formsgSdk from '~utils/formSdk' -import { useCreateFormMutations } from '~features/workspace/mutations' +import { + useCreateFormMutations, + useEmailModeFeedbackMutation, +} from '~features/workspace/mutations' import { useWorkspaceContext } from '~features/workspace/WorkspaceContext' import { @@ -64,9 +67,10 @@ const useCreateFormWizardContext = (): CreateFormWizardContextReturn => { createEmailModeFormMutation, createStorageModeFormMutation, createMultirespondentModeFormMutation, - emailModeFeedbackMutation, } = useCreateFormMutations() + const { emailModeFeedbackMutation } = useEmailModeFeedbackMutation() + const { activeWorkspace, isDefaultWorkspace } = useWorkspaceContext() // do not mutate with workspaceId if it is 'All Forms' (default workspace) diff --git a/frontend/src/features/workspace/components/DuplicateFormModal/DupeFormWizardProvider.tsx b/frontend/src/features/workspace/components/DuplicateFormModal/DupeFormWizardProvider.tsx index 485c704e0a..1503fcd077 100644 --- a/frontend/src/features/workspace/components/DuplicateFormModal/DupeFormWizardProvider.tsx +++ b/frontend/src/features/workspace/components/DuplicateFormModal/DupeFormWizardProvider.tsx @@ -1,9 +1,12 @@ import { useEffect } from 'react' -import { FormResponseMode } from '~shared/types' +import { FormResponseMode, PublicFormViewDto } from '~shared/types' import { usePreviewForm } from '~features/admin-form/common/queries' -import { useDuplicateFormMutations } from '~features/workspace/mutations' +import { + useDuplicateFormMutations, + useEmailModeFeedbackMutation, +} from '~features/workspace/mutations' import { useDashboard } from '~features/workspace/queries' import { makeDuplicateFormTitle } from '~features/workspace/utils/createDuplicateFormTitle' import { useWorkspaceContext } from '~features/workspace/WorkspaceContext' @@ -57,7 +60,7 @@ export const useDupeFormWizardContext = (): CreateFormWizardContextReturn => { dashboardForms, ]) - const { handleSubmit } = formMethods + const { handleSubmit, setValue } = formMethods const { dupeEmailModeFormMutation, @@ -65,6 +68,8 @@ export const useDupeFormWizardContext = (): CreateFormWizardContextReturn => { dupeMultirespondentModeFormMutation, } = useDuplicateFormMutations() + const { emailModeFeedbackMutation } = useEmailModeFeedbackMutation() + const { activeWorkspace, isDefaultWorkspace } = useWorkspaceContext() // do not mutate with workspaceId if it is 'All Forms' (default workspace) @@ -105,17 +110,36 @@ export const useDupeFormWizardContext = (): CreateFormWizardContextReturn => { }, ) - const handleDetailsSubmit = handleSubmit((inputs) => { - if (!activeFormMeta?._id) return - if (inputs.responseMode === FormResponseMode.Email) { + // TODO: (Kill Email Mode) Remove this route after kill email mode is fully implemented. + // Collect email mode usage feedback before creating the form + const handleEmailFeedbackSubmit = () => { + // explicit set response to email as email feedback "button" interaction + // is not handled handled in FormResponseOptions + setValue('responseMode', FormResponseMode.Email) + setCurrentStep([CreateFormFlowStates.EmailFeedback, 1]) + } + + // TODO: (Kill Email Mode) Remove this route after kill email mode is fully implemented. + const handleCreateEmailModeForm = (feedbackForm: PublicFormViewDto) => + handleSubmit((inputs) => { + if (!activeFormMeta?._id) return + if (!inputs.reason) { + return new Error('Reason is required') + } + emailModeFeedbackMutation.mutate({ + body: { reason: inputs.reason }, + feedbackForm, + }) return dupeEmailModeFormMutation.mutate({ formIdToDuplicate: activeFormMeta._id, emails: inputs.emails.filter(Boolean), title: inputs.title, - responseMode: inputs.responseMode, + responseMode: FormResponseMode.Email, workspaceId, }) - } + }) + + const handleDetailsSubmit = handleSubmit(() => { setCurrentStep([CreateFormFlowStates.Landing, 1]) }) @@ -131,6 +155,8 @@ export const useDupeFormWizardContext = (): CreateFormWizardContextReturn => { formMethods, handleDetailsSubmit, handleCreateStorageModeOrMultirespondentForm, + handleEmailFeedbackSubmit, + handleCreateEmailModeForm, isSingpass, modalHeader: 'Duplicate form', } diff --git a/frontend/src/features/workspace/mutations.ts b/frontend/src/features/workspace/mutations.ts index 4a55fe8327..f23d16dbc7 100644 --- a/frontend/src/features/workspace/mutations.ts +++ b/frontend/src/features/workspace/mutations.ts @@ -103,19 +103,10 @@ export const useCreateFormMutations = () => { onError: handleError, }) - // TODO: (Kill Email Mode) Remove this route after kill email mode is fully implemented. - const emailModeFeedbackMutation = useMutation( - (params: { - body: AdminUseEmailModeFeedbackDto - feedbackForm: PublicFormViewDto - }) => submitUseEmailFormFeedback(params), - ) - return { createEmailModeFormMutation, createStorageModeFormMutation, createMultirespondentModeFormMutation, - emailModeFeedbackMutation, } } @@ -297,3 +288,15 @@ export const useWorkspaceMutations = () => { removeFormFromWorkspacesMutation, } } + +// TODO: (Kill Email Mode) Remove this route after kill email mode is fully implemented. +export const useEmailModeFeedbackMutation = () => { + const emailModeFeedbackMutation = useMutation( + (params: { + body: AdminUseEmailModeFeedbackDto + feedbackForm: PublicFormViewDto + }) => submitUseEmailFormFeedback(params), + ) + + return { emailModeFeedbackMutation } +}