handle 4xx responses during /join and fix red test

Author: kylemh

common/constants/api.ts

@@ -1,10 +1,18 @@
 import { patch, post } from 'common/utils/api-utils';
 import type { RegistrationFormValues } from 'components/Forms/RegistrationForm/RegistrationForm';
+import type { MilitaryDetailsFormShape } from 'components/Forms/UpdateProfileForm/steps/MilitaryDetails';
 import type { MilitaryStatusFormShape } from 'components/Forms/UpdateProfileForm/steps/MilitaryStatus';
+import type { PersonalDetailsFormShape } from 'components/Forms/UpdateProfileForm/steps/PersonalDetails';
 import type { ProfessionalDetailsFormShape } from 'components/Forms/UpdateProfileForm/steps/ProfessionalDetails';
 
 export const registerUser = (values: RegistrationFormValues) =>
   post('/api/registration/new', values);
 
-export const updateUser = (values: ProfessionalDetailsFormShape | MilitaryStatusFormShape) =>
+type FormShape =
+  | PersonalDetailsFormShape
+  | ProfessionalDetailsFormShape
+  | MilitaryStatusFormShape
+  | MilitaryDetailsFormShape;
+
+export const updateUser = (values: FormShape & { finalize?: boolean }) =>
   patch('/api/registration/update', values);

components/Forms/UpdateProfileForm/UpdateProfileForm.tsx

@@ -84,17 +84,17 @@ function UpdateProfileForm({
       await updateUser(values);
     } catch (error) {
       const axiosError = error as AxiosError;
-      if (axiosError.response?.status === 404) {
-        // Record no longer exists — cookie was cleared by the API, redirect to re-register
-        push('/join');
+      if (axiosError.response?.status === 401 || axiosError.response?.status === 404) {
+        push('/join?registrationError=true');
         return;
       }
       throw error;
     }
   };
 
-  const goToProfile = async () => {
+  const goToProfile = async (values: UpdateProfileFormShape) => {
     try {
+      await updateUser({ ...values, finalize: true });
       push('/join/success');
     } catch (error) {
       LogRocket.captureException(error as Error);

components/Forms/UpdateProfileForm/steps/MilitaryDetails.tsx

@@ -19,6 +19,8 @@ MilitaryDetails.initialValues = {
   payGrade: '',
 };
 
+export type MilitaryDetailsFormShape = typeof MilitaryDetails.initialValues;
+
 interface MilitaryDetailsProps {
   isSubmitting: boolean;
 }

pages/api/registration/update.ts

@@ -12,7 +12,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
   const email = req.cookies?.opCodeApplicantEmail;
 
-  // The cookie is cleared on the final successful step (when all fields are filled).
+  // The cookie is cleared when the client sends `finalize: true` on the final submit.
   // Additional PATCH requests can still arrive after that (e.g. user double-clicking),
   // so we need to bail out early rather than querying Airtable with an undefined email.
   if (!email) {
@@ -87,11 +87,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         }),
       );
 
-      /**
-       * If all fields are defined, the row is done! 🎉
-       * Now, we remove the cookie maintaining form state.
-       */
-      if (Object.values(payload).filter(val => !val).length === 0) {
+      if (req.body.finalize) {
         res.setHeader('Set-Cookie', [
           `opCodeApplicantEmail=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`,
         ]);
@@ -101,13 +97,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       await base(AIR_TABLE_TABLE_NAME).update(relevantRecord.id, parsedPayload);
 
       return res.status(200).json({ message: 'Success' });
+    } else {
+      return res.status(404).json({ message: `No record found for this email (${email})` });
     }
-
-    // No record found — clear the stale cookie so the page guard redirects to /
-    res.setHeader('Set-Cookie', [
-      `opCodeApplicantEmail=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`,
-    ]);
-    return res.status(404).json({ message: `No record found for this email (${email})` });
   } catch (error) {
     console.error('Error with /api/registration/update PATCH request:', error);
     return res.status(500).json({ message: 'Server Error' });

pages/join/index.tsx

@@ -1,23 +1,31 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { gtag } from 'common/utils/thirdParty/gtag';
 import Head from 'components/head';
 import HeroBanner from 'components/HeroBanner/HeroBanner';
 import Content from 'components/Content/Content';
 import { RegistrationForm } from 'components/Forms/RegistrationForm/RegistrationForm';
+import Modal from 'components/Modal/Modal';
 import Link from 'next/link';
 
 const pageTitle = 'Join';
 
 const profileUpdateURL = '/join/form';
 
 export default function Join() {
-  const { prefetch, push } = useRouter();
+  const { prefetch, push, query } = useRouter();
+  const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);
 
   useEffect(() => {
     prefetch(profileUpdateURL);
   }, []);
 
+  useEffect(() => {
+    if (query.registrationError) {
+      setIsErrorModalOpen(true);
+    }
+  }, [query.registrationError]);
+
   const handleSuccess = () => {
     gtag.conversionEvent({ adId: '9ZvVCOOFmrkBEK-Rnp4D', category: 'sign_up' });
     push(profileUpdateURL);
@@ -50,6 +58,28 @@ export default function Join() {
       </HeroBanner>
 
       <Content theme="gray" columns={[<RegistrationForm key="form" onSuccess={handleSuccess} />]} />
+
+      <Modal
+        isOpen={isErrorModalOpen}
+        onRequestClose={() => setIsErrorModalOpen(false)}
+        screenReaderLabel="Registration error"
+      >
+        <div className="space-y-4 text-center max-w-md">
+          <h2 className="text-xl font-bold">Registration Incomplete</h2>
+          <p>
+            It looks like we&apos;re missing information from the first step of registration. Please
+            complete the form below to get started.
+          </p>
+          <p>
+            If you&apos;ve already completed this step and were unexpectedly redirected here,
+            something may be wrong on our end. Please email us at{' '}
+            <a href="mailto:staff@operationcode.org?subject=Registration Issue">
+              staff@operationcode.org
+            </a>{' '}
+            so we can help.
+          </p>
+        </div>
+      </Modal>
     </>
   );
 }