fix: disable payment resume and duplicate modals in preview

frontend/src/features/admin-form/preview/PreviewFormPage.tsx

@@ -34,8 +34,8 @@ export const PreviewFormPage = (): JSX.Element => {
           <FormStartPage />
           <PublicFormWrapper>
             <FormInstructions />
-            <FormFields isPreview />
-            <FormEndPage isPreview />
+            <FormFields />
+            <FormEndPage />
             <FormFooter />
           </PublicFormWrapper>
         </FormSectionsProvider>

frontend/src/features/admin-form/preview/PreviewFormProvider.tsx

@@ -334,6 +334,7 @@ export const PreviewFormProvider = ({
         isLoading,
         handleLogout: undefined,
         isPaymentEnabled,
+        isPreview: true,
         ...commonFormValues,
         ...data,
         ...rest,

frontend/src/features/admin-form/template/TemplateFormPage.tsx

@@ -34,8 +34,8 @@ export const TemplateFormPage = (): JSX.Element => {
           <FormStartPage isTemplate />
           <PublicFormWrapper>
             <FormInstructions />
-            <FormFields isPreview />
-            <FormEndPage isPreview />
+            <FormFields />
+            <FormEndPage />
             <FormFooter />
           </PublicFormWrapper>
         </FormSectionsProvider>

frontend/src/features/admin-form/template/TemplateFormProvider.tsx

@@ -88,6 +88,8 @@ export const TemplateFormProvider = ({
         expiryInMs,
         isLoading,
         handleLogout: undefined,
+        isPreview: true,
+        isPaymentEnabled: false,
         ...commonFormValues,
         ...data,
         ...rest,

frontend/src/features/public-form/PublicFormContext.tsx

@@ -49,6 +49,9 @@ export interface PublicFormContextProps
 
   /** Whether payment is enabled */
   isPaymentEnabled: boolean
+
+  /** Whether it is a preview form */
+  isPreview: boolean
 }
 
 export const PublicFormContext = createContext<

frontend/src/features/public-form/PublicFormProvider.tsx

@@ -504,6 +504,7 @@ export const PublicFormProvider = ({
         expiryInMs,
         isLoading: isLoading || (!!data?.form.hasCaptcha && !hasLoaded),
         isPaymentEnabled,
+        isPreview: false,
         ...commonFormValues,
         ...data,
         ...rest,

frontend/src/features/public-form/components/FormEndPage/FormEndPageContainer.tsx

@@ -9,14 +9,8 @@ import { usePublicFormContext } from '~features/public-form/PublicFormContext'
 import { FeedbackFormInput } from './components/FeedbackBlock'
 import { FormEndPage } from './FormEndPage'
 
-interface FormEndPageContainerProps {
-  isPreview?: boolean
-}
-
-export const FormEndPageContainer = ({
-  isPreview,
-}: FormEndPageContainerProps): JSX.Element | null => {
-  const { form, formId, submissionData } = usePublicFormContext()
+export const FormEndPageContainer = (): JSX.Element | null => {
+  const { form, formId, submissionData, isPreview } = usePublicFormContext()
   const { submitFormFeedbackMutation } = usePublicFormMutations(
     formId,
     submissionData?.id ?? '',

frontend/src/features/public-form/components/FormFields/FormFieldsContainer.tsx

@@ -12,15 +12,15 @@ import { PublicSwitchEnvMessage } from '../PublicSwitchEnvMessage'
 import { FormFields } from './FormFields'
 import { FormFieldsSkeleton } from './FormFieldsSkeleton'
 
-interface FormFieldsContainerProps {
-  isPreview?: boolean
-}
-
-export const FormFieldsContainer = ({
-  isPreview,
-}: FormFieldsContainerProps): JSX.Element | null => {
-  const { form, isAuthRequired, isLoading, handleSubmitForm, submissionData } =
-    usePublicFormContext()
+export const FormFieldsContainer = (): JSX.Element | null => {
+  const {
+    form,
+    isAuthRequired,
+    isLoading,
+    handleSubmitForm,
+    submissionData,
+    isPreview,
+  } = usePublicFormContext()
 
   const renderFields = useMemo(() => {
     // Render skeleton when no data

frontend/src/features/public-form/components/FormFields/PublicFormSubmitButton.tsx

@@ -42,7 +42,7 @@ export const PublicFormSubmitButton = ({
   const isMobile = useIsMobile()
   const { isSubmitting } = useFormState()
   const formInputs = useWatch<FormFieldValues>({}) as FormFieldValues
-  const { formId, isPaymentEnabled } = usePublicFormContext()
+  const { formId, isPaymentEnabled, isPreview } = usePublicFormContext()
 
   const paymentEmailField = formInputs[
     PAYMENT_CONTACT_FIELD_ID
@@ -104,7 +104,7 @@ export const PublicFormSubmitButton = ({
         isLoading={isSubmitting}
         isDisabled={!!preventSubmissionLogic || !onSubmit}
         loadingText="Submitting"
-        onClick={isPaymentEnabled ? checkBeforeOpen : onSubmit}
+        onClick={isPaymentEnabled && !isPreview ? checkBeforeOpen : onSubmit}
       >
         <VisuallyHidden>End of form.</VisuallyHidden>
         {preventSubmissionLogic

frontend/src/features/public-form/components/FormPaymentPage/FormPaymentResumeModal.tsx

@@ -25,20 +25,20 @@ import { usePublicFormContext } from '../../PublicFormContext'
  */
 export const PublicFormPaymentResumeModal = (): JSX.Element => {
   const isMobile = useIsMobile()
-  const { isPaymentEnabled, formId } = usePublicFormContext()
+  const { isPaymentEnabled, formId, isPreview } = usePublicFormContext()
 
   const [lastPaymentMemory, , clearPaymentMemory] = useBrowserStm(formId)
 
   const { isOpen, onClose } = useDisclosure({
-    defaultIsOpen: Boolean(lastPaymentMemory && isPaymentEnabled),
+    defaultIsOpen: Boolean(lastPaymentMemory && isPaymentEnabled && !isPreview),
   })
 
   const navigate = useNavigate()
   if (!isOpen) {
     return <></>
   }
   const onSubmit = () => {
-    if (!lastPaymentMemory) {
+    if (!lastPaymentMemory || isPreview) {
       onClose()
       return
     }