feat: payment browser stm

frontend/package.json

@@ -149,7 +149,7 @@
     "@types/dedent": "^0.7.0",
     "@types/file-saver": "^2.0.3",
     "@types/gtag.js": "0.0.10",
-    "@types/jest": "^29.2.4",
+    "@types/jest": "^26.0.24",
     "@types/node": "^16.11.12",
     "@types/react": "^17.0.37",
     "@types/react-beautiful-dnd": "^13.1.2",

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

@@ -2,16 +2,13 @@
 import { createContext, RefObject, useContext } from 'react'
 import { UseQueryResult } from 'react-query'
 
-import { PaymentSubmissionData } from '~shared/types'
 import { PublicFormViewDto } from '~shared/types/form'
 
 export type SubmissionData = {
   /** Submission id */
   id: string | undefined
   /** Submission time in ms from epoch  */
   timestamp: number
-  // payment forms will return a paymentIntentId
-  paymentData?: PaymentSubmissionData
 }
 
 export interface PublicFormContextProps

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

@@ -22,6 +22,7 @@ import {
 } from '~shared/types/form'
 
 import { FORMID_REGEX } from '~constants/routes'
+import { useBrowserStm } from '~hooks/payments'
 import { useTimeout } from '~hooks/useTimeout'
 import { useToast } from '~hooks/useToast'
 import { HttpError } from '~services/ApiService'
@@ -35,6 +36,7 @@ import {
   trackVisitPublicForm,
 } from '~features/analytics/AnalyticsService'
 import { useEnv } from '~features/env/queries'
+import { getPaymentPageUrl } from '~features/public-form/utils/urls'
 import {
   RecaptchaClosedError,
   useRecaptcha,
@@ -190,6 +192,7 @@ export const PublicFormProvider = ({
   const { handleLogoutMutation } = usePublicAuthMutations(formId)
 
   const navigate = useNavigate()
+  const [, storePaymentMemory] = useBrowserStm(formId)
   const handleSubmitForm: SubmitHandler<
     FormFieldValues & { payment_receipt_email_field?: { value: string } }
   > = useCallback(
@@ -275,13 +278,14 @@ export const PublicFormProvider = ({
                   onSuccess: ({
                     submissionId,
                     timestamp,
-                    // payment forms will return a paymentIntentId
+                    // payment forms will have non-empty paymentData field
                     paymentData,
                   }) => {
                     trackSubmitForm(form)
 
                     if (paymentData) {
-                      navigate(`/${formId}/payment/${paymentData.paymentId}`)
+                      navigate(getPaymentPageUrl(formId, paymentData.paymentId))
+                      storePaymentMemory(paymentData.paymentId)
                       return
                     }
                     setSubmissionData({
@@ -328,6 +332,7 @@ export const PublicFormProvider = ({
       submitStorageModeFormMutation,
       formId,
       navigate,
+      storePaymentMemory,
     ],
   )
 

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

@@ -19,6 +19,7 @@ import {
 import { useFetchPrefillQuery } from '~features/public-form/hooks/useFetchPrefillQuery'
 import { usePublicFormContext } from '~features/public-form/PublicFormContext'
 
+import { PublicFormPaymentResumeModal } from '../FormPaymentPage/FormPaymentResumeModal'
 import { FormPaymentPreview } from '../FormPaymentPreview/FormPaymentPreview'
 
 import { PublicFormSubmitButton } from './PublicFormSubmitButton'
@@ -136,6 +137,7 @@ export const FormFields = ({
               paymentDetails={form.payments_field}
             />
           )}
+        <PublicFormPaymentResumeModal />
         <PublicFormSubmitButton
           onSubmit={onSubmit ? formMethods.handleSubmit(onSubmit) : undefined}
           formFields={augmentedFormFields}

frontend/src/features/public-form/components/FormPaymentModal/FormPaymentModal.tsx

@@ -29,10 +29,9 @@ export const FormPaymentModal = ({
         <ModalContent>
           <ModalCloseButton />
           <ModalHeader>You are about to make payment</ModalHeader>
-          <ModalBody whiteSpace="pre-line">
-            {
-              'Please ensure that your form information is accurate. You will not be able to edit your form after you proceed.'
-            }
+          <ModalBody>
+            Please ensure that your form information is accurate. You will not
+            be able to edit your form after you proceed.
           </ModalBody>
           <ModalFooter>
             <ButtonGroup>

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

@@ -0,0 +1,94 @@
+import { useNavigate } from 'react-router-dom'
+import {
+  ButtonGroup,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  useDisclosure,
+} from '@chakra-ui/react'
+
+import { FormResponseMode } from '~shared/types'
+
+import { useBrowserStm } from '~hooks/payments'
+import { useIsMobile } from '~hooks/useIsMobile'
+import Button from '~components/Button'
+
+import { getPaymentPageUrl } from '~features/public-form/utils/urls'
+
+import { usePublicFormContext } from '../../PublicFormContext'
+
+/**
+ * This component is split up so that input changes will not rerender the
+ * entire FormFields component leading to terrible performance.
+ */
+export const PublicFormPaymentResumeModal = (): JSX.Element => {
+  const isMobile = useIsMobile()
+  const { form, formId } = usePublicFormContext()
+
+  const [lastPaymentMemory, , clearPaymentMemory] = useBrowserStm(formId)
+
+  const isPaymentEnabled =
+    form?.responseMode === FormResponseMode.Encrypt &&
+    form?.payments_field?.enabled
+
+  const { isOpen, onClose } = useDisclosure({
+    defaultIsOpen: Boolean(lastPaymentMemory && isPaymentEnabled),
+  })
+
+  const navigate = useNavigate()
+  if (!isOpen) {
+    return <></>
+  }
+  const onSubmit = () => {
+    if (!lastPaymentMemory) {
+      onClose()
+      return
+    }
+    navigate(getPaymentPageUrl(formId, lastPaymentMemory.paymentId))
+  }
+
+  const handleStartOver = () => {
+    clearPaymentMemory()
+    onClose()
+  }
+  return (
+    <Stack px={{ base: '1rem', md: 0 }} pt="2.5rem" pb="4rem">
+      <Modal
+        isOpen
+        onClose={() => {
+          // do nothing, prevent dismissal through backdrop touch
+        }}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader pb={'2rem'}>Restore previous session?</ModalHeader>
+          <ModalBody>
+            We noticed an incomplete session on this form. You can restore your
+            previous session and complete payment.
+          </ModalBody>
+          <ModalFooter pt={'2.5rem'} pb={'2.5rem'}>
+            <ButtonGroup
+              flexWrap={isMobile ? 'wrap-reverse' : 'wrap'}
+              justifyContent="end"
+            >
+              <Button
+                variant="clear"
+                onClick={handleStartOver}
+                isFullWidth={isMobile}
+              >
+                Start over again
+              </Button>
+              <Button onClick={onSubmit} isFullWidth={isMobile}>
+                Restore previous session
+              </Button>
+            </ButtonGroup>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Stack>
+  )
+}

frontend/src/features/public-form/components/FormPaymentPage/stripe/components/StripePaymentBlock.tsx

@@ -18,6 +18,7 @@ import { loadStripe } from '@stripe/stripe-js'
 
 import { FormColorTheme, FormResponseMode } from '~shared/types/form'
 
+import { useBrowserStm } from '~hooks/payments'
 import { centsToDollars } from '~utils/payments'
 import Button from '~components/Button'
 
@@ -46,11 +47,13 @@ const StripeCheckoutForm = ({
   isRetry,
   triggerPaymentStatusRefetch,
 }: StripeCheckoutFormProps) => {
+  const { formId } = usePublicFormContext()
   const stripe = useStripe()
   const elements = useElements()
 
   const [stripeMessage, setStripeMessage] = useState('')
   const [isStripeProcessing, setIsStripeProcessing] = useState(false)
+  const [, , clearPaymentMemory] = useBrowserStm(formId)
 
   useEffect(() => {
     if (isRetry) {
@@ -95,6 +98,7 @@ const StripeCheckoutForm = ({
       // In the event that customer is not on a payment that has a redirected flow,
       // we will trigger a payment status refetch
       triggerPaymentStatusRefetch()
+      clearPaymentMemory()
     }
     setIsStripeProcessing(false)
   }

frontend/src/features/public-form/utils/urls.ts

@@ -0,0 +1,3 @@
+export const getPaymentPageUrl = (formId: string, paymentId: string) => {
+  return `/${formId}/payment/${paymentId}`
+}

frontend/src/hooks/payments/index.ts

@@ -0,0 +1 @@
+export { useBrowserStm } from './useBrowserStm'

frontend/src/hooks/payments/useBrowserStm/__tests__/utils.test.ts

@@ -0,0 +1,44 @@
+import { addEntry, BrowserStmDto, getEntry, processEviction } from '../utils'
+
+const EMPTY_OBJ = {}
+describe('useBrowserStm', () => {
+  describe('processEviction', () => {
+    afterEach(() => {
+      jest.useRealTimers()
+    })
+    beforeEach(() => {
+      processEviction.cancel()
+    })
+    it('should only be called once if called in quick succession', () => {
+      // Arrange
+      const mockFn = jest.fn()
+
+      // Act, Assert
+      processEviction(EMPTY_OBJ, mockFn)
+      expect(mockFn).toBeCalledTimes(1)
+      processEviction(EMPTY_OBJ, mockFn)
+      expect(mockFn).toBeCalledTimes(1)
+    })
+
+    it('should evict entries that are old', (done) => {
+      // Arrange
+      const tempId = 'form1'
+      const mockDate = new Date('2020-12-21')
+
+      jest.useFakeTimers('modern').setSystemTime(mockDate)
+      const entryObj = addEntry(EMPTY_OBJ, {
+        formId: tempId,
+        paymentId: 'payment1',
+      })
+      jest.useRealTimers()
+      const mockFn = (retObject: BrowserStmDto) => {
+        // Assert
+        expect(getEntry(retObject, tempId)).toBeFalsy()
+        done()
+      }
+
+      // Act
+      processEviction(entryObj, mockFn)
+    })
+  })
+})

frontend/src/hooks/payments/useBrowserStm/index.ts

@@ -0,0 +1,57 @@
+import { useLocalStorage } from '../../useLocalStorage'
+
+import {
+  addEntry,
+  deleteEntry,
+  deserialize,
+  getEntry,
+  processEviction,
+  serialize,
+  StmEntryDto,
+} from './utils'
+
+const PAYMENT_STM_KEY = 'PAYMENT_STM_KEY'
+/**
+ * In local storage, add a marker that a form submission and payment
+ * has been submitted and is ongoing. The marker must be cleared when
+ * the payment flow is complete. The marker also contains a eviction policy
+ * of maxmium 1 day, that will be assess whenever this hook is used.
+ *
+ * Returns an array of three variables:
+ *
+ * - `lastPaymentMemory` returns the previous value. It will be an empty string if
+ * there's no previous value in memory
+ *
+ * - `storePaymentMemory` expects the paymentId that will be stored. Replacing
+ * the previous value, if any.
+ *
+ * - `clearPaymentMemory` sets the memory to be an empty string
+ *
+ * @returns lastPaymentMemory
+ */
+export const useBrowserStm = (
+  formId: string,
+): [
+  lastPaymentMemory: StmEntryDto | undefined,
+  storePaymentMemory: (paymentId: string) => void,
+  clearPaymentMemory: () => void,
+] => {
+  const [paymentMemory, setPaymentMemory] = useLocalStorage(
+    PAYMENT_STM_KEY,
+    JSON.stringify({}),
+  )
+
+  const entryObj = deserialize(paymentMemory || '')
+  processEviction(entryObj, (obj) => setPaymentMemory(serialize(obj)))
+
+  const lastPaymentMemory = getEntry(entryObj, formId)
+  const storePaymentMemory = (paymentId: string) => {
+    const updatedMemory = addEntry(entryObj, { formId, paymentId })
+    setPaymentMemory(serialize(updatedMemory))
+  }
+  const clearPaymentMemory = () => {
+    const updatedMemory = deleteEntry(entryObj, { formId })
+    setPaymentMemory(serialize(updatedMemory))
+  }
+  return [lastPaymentMemory, storePaymentMemory, clearPaymentMemory]
+}