Prefill fields on HCB apply form via query parameters

Author: cjdenio

components/hcb/apply-button.js

@@ -1,30 +1,32 @@
 import { Button, Text, Image, Flex } from 'theme-ui'
 import Icon from '../icon'
+import Link from 'next/link'
 
 export default function ApplyButton() {
   return (
-    <Button
-      variant="ctaLg"
-      as="a"
-      href="/hcb/apply"
-      sx={{
-        width: '100%',
-        height: '4.2rem'
-        // borderRadius: '1.5rem',
-      }}
-    >
-      <Flex
+    <Link href="/hcb/apply" passHref legacyBehavior>
+      <Button
+        variant="ctaLg"
+        as="a"
         sx={{
-          alignItems: 'center',
-          gap: 3,
-          mr: '-32px' // Man...
+          width: '100%',
+          height: '4.2rem'
+          // borderRadius: '1.5rem',
         }}
       >
-        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
-          Apply now
-        </Text>
-        <Icon glyph="view-forward" size={46} color="white" />
-      </Flex>
-    </Button>
+        <Flex
+          sx={{
+            alignItems: 'center',
+            gap: 3,
+            mr: '-32px' // Man...
+          }}
+        >
+          <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
+            Apply now
+          </Text>
+          <Icon glyph="view-forward" size={46} color="white" />
+        </Flex>
+      </Button>
+    </Link>
   )
 }

components/hcb/apply/checkbox.js

@@ -1,20 +1,22 @@
 import { useEffect, useState } from 'react'
 import Icon from '../../icon'
+import { useRouter } from 'next/router'
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
   const [checked, setChecked] = useState(defaultChecked)
   const toggle = () => setChecked(!checked)
+  const router = useRouter()
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = router.query[name] || sessionStorage.getItem('bank-signup-' + name)
     if (value) {
       const input = document.getElementById(name)
-      input && setChecked(value === 'true')
+      input && setChecked(!!value)
     }
-  }, [name])
+  }, [router.query, name])
 
   return (
     <>

components/hcb/apply/field.js

@@ -18,12 +18,12 @@ export default function Field({
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = router.query[name] || sessionStorage.getItem('bank-signup-' + name)
     if (value) {
       const input = document.getElementById(name)
       if (input) input.value = value
     }
-  }, [name])
+  }, [router.query, name])
 
   return (
     <FlexCol gap={2} width={'100%'}>

pages/hcb/apply/index.js

@@ -67,7 +67,7 @@ export default function Apply() {
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
-      router.push(
+      router.replace(
         {
           pathname: router.pathname,
           query: { ...router.query, step: 1 }
@@ -110,9 +110,7 @@ export default function Apply() {
         <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
-            {step === 2 && (
-              <OrganizationInfoForm requiredFields={requiredFields} />
-            )}
+            {step === 2 && <OrganizationInfoForm requiredFields={requiredFields} />}
             {step === 3 && <PersonalInfoForm requiredFields={requiredFields} />}
           </FormContainer>
         </Box>