feat: add 2026 registration flow with Google Sheets storage and confirmation email

components/Form/Registration/stepFour.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable react/no-unescaped-entities */
+import React, { FormEvent, useState, JSX } from 'react';
+import Button from '../../Buttons/button';
+import { CfpStepProps } from '../../../types/types';
+
+type ApiResponse = { success?: boolean; error?: string };
+
+function StepFourRegistration({ setStep, setForm, data }: CfpStepProps) {
+  const [submitting, setSubmitting] = useState<boolean>(false);
+  const [disabled, setDisabled] = useState<boolean>(false);
+  const [error, setError] = useState<string>('');
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError('');
+
+    const payload = {
+      fullName: data.fullName || '',
+      email: data.email || '',
+      company: data.company || '',
+      role: data.role || '',
+      preferredCity: data.preferredCity || '',
+      attendanceType: data.attendanceType || '',
+      timezone: data.timezone || '',
+      dietaryAccessibility: data.dietaryAccessibility || '',
+      updatesOptIn: Boolean(data.updatesOptIn),
+      sponsorDataSharing: Boolean(data.sponsorDataSharing),
+      notes: data.notes || '',
+    };
+
+    fetch('/api/registration/2026', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+      .then(async (res) => {
+        const body: ApiResponse = await res.json().catch(() => ({}));
+        if (!res.ok) {
+          const message = body.error || `Submission failed (${res.status})`;
+          throw new Error(message);
+        }
+        return body;
+      })
+      .then(() => {
+        setSubmitting(false);
+        setDisabled(true);
+        setStep(e, 0);
+      })
+      .catch((err: Error) => {
+        setSubmitting(false);
+        setError(err.message || 'Submission failed');
+      });
+  };
+
+  return (
+    <form className="mt-3" onSubmit={(e) => onSubmit(e)} aria-busy={submitting}>
+      <h1 id="step-four-heading" className="text-white font-bold text-4xl lg:text-3xl">Review & Submit</h1>
+      <p className="mt-3 text-dark-600">Review your details and submit your registration.</p>
+      <div className="mt-3 border w-full border-solid border-y-dark-600 divide-y" />
+      <div className="mt-10" role="group" aria-labelledby="step-four-heading">
+        <label htmlFor="notes" className="text-dark-600 text-lg">Notes</label>
+        <textarea
+          id="notes"
+          className="mt-3 w-full p-4 rounded-md focus:outline-none focus:ring-2 focus:ring-[#E50E99] focus:ring-offset-2 focus:ring-offset-gray-900 border border-[#E50E99]"
+          onChange={(e) => setForm((prev) => ({ ...prev, notes: e.target.value }))}
+          data-test="reg-step-four-notes"
+        />
+
+        <div className="mt-6 text-dark-600 text-md">
+          By clicking submit, you confirm the information is correct.
+        </div>
+        <div className="mt-3 w-full flex items-center justify-between lg:flex-col-reverse lg:items-start">
+          <div className="mt-3 w-full flex items-center justify-end lg:flex-col-reverse lg:items-start gap-4">
+            {/* Back button */}
+            <Button
+              type="button"
+              disabled={disabled}
+              onClick={() => !disabled && setStep(null, 3)}
+              className="text-gray-500 hover:text-gray-700 transition-colors disabled:opacity-50 w-36 lg:w-full"
+            >
+              Back
+            </Button>
+
+            {/* Submit button */}
+            <Button
+              type="submit"
+              disabled={submitting || disabled}
+              className="text-gray-500 hover:text-gray-700 transition-colors disabled:opacity-50 w-36 lg:w-full"
+              test="reg-step-four-next"
+            >
+              {submitting ? 'Submitting...' : 'Submit'}
+            </Button>
+          </div>
+
+          {error && (
+            <div
+              className="text-red-400 mt-2"
+              role="alert"
+              aria-live="assertive"
+            >
+              {error}
+            </div>
+          )}
+        </div>
+      </div>
+    </form>
+  );
+}
+
+export default StepFourRegistration;

components/Form/Registration/stepOne.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable react/no-unescaped-entities */
+import React, { JSX, useState } from 'react';
+import Button from '../../Buttons/button';
+import { CfpStepProps } from '../../../types/types';
+
+import { isValidEmail } from '../../../utils/validation';
+
+function StepOneRegistration({ setStep, setForm, data }: CfpStepProps): JSX.Element {
+  const [touched, setTouched] = useState(false);
+
+  const fullName = data.fullName ?? '';
+  const email = data.email ?? '';
+
+  const isValid = fullName.trim().length > 0 && isValidEmail(email.trim());
+
+  return (
+    <form
+      className="mt-3"
+      onSubmit={(e) => setStep(e, 2)}
+      data-test="reg-step-one"
+      onBlur={() => setTouched(true)}
+    >
+      <h1 id="step-one-heading" className="text-white font-bold text-4xl lg:text-3xl">Personal Info</h1>
+      <p className="mt-3 text-dark-600">Tell us who you are so we can prepare your ticket.</p>
+      <div className="mt-3 border w-full border-solid border-dark-400 divide-y" />
+      <div className="mt-10" role="group" aria-labelledby="step-one-heading">
+        <label htmlFor="fullName" className="text-dark-600 text-lg">
+          Full name <span aria-hidden="true">*</span>
+        </label>
+        <input
+          id="fullName"
+          required
+          aria-required="true"
+          aria-invalid={touched && fullName.trim().length === 0}
+          aria-describedby={touched && fullName.trim().length === 0 ? "fullName-error" : undefined}
+          value={fullName}
+          className="mt-3 w-full p-4 rounded-md focus:outline-none focus:ring-2 focus:ring-[#E50E99] focus:ring-offset-2 focus:ring-offset-gray-900 border border-[#E50E99]"
+          onChange={(e) => setForm((prev) => ({ ...prev, fullName: e.target.value }))}
+          data-test="reg-step-one-name"
+        />
+        {touched && fullName.trim().length === 0 && (
+          <p id="fullName-error" className="text-red-400 text-sm mt-1" role="alert">
+            Full name is required
+          </p>
+        )}
+
+        <label htmlFor="email" className="text-dark-600 text-lg mt-6 block">
+          Email address <span aria-hidden="true">*</span>
+        </label>
+        <input
+          id="email"
+          required
+          type="email"
+          aria-required="true"
+          aria-invalid={touched && !isValidEmail(email.trim())}
+          aria-describedby={touched && !isValidEmail(email.trim()) ? "email-error" : undefined}
+          value={email}
+          className="mt-3 w-full p-4 rounded-md focus:outline-none focus:ring-2 focus:ring-[#E50E99] focus:ring-offset-2 focus:ring-offset-gray-900 border border-[#E50E99]"
+          onChange={(e) => setForm((prev) => ({ ...prev, email: e.target.value }))}
+          data-test="reg-step-one-email"
+        />
+        {touched && !isValidEmail(email.trim()) && (
+          <p id="email-error" className="text-red-400 text-sm mt-1" role="alert">
+            Please enter a valid email address
+          </p>
+        )}
+
+        <div className="mt-6">
+          <Button
+            type="submit"
+            className="bg-tetiary-pink p-3 rounded-md text-white mt-6 float-right w-36 lg:w-full lg:mt-8"
+            disabled={!isValid}
+            test="reg-step-one-next"
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+export default StepOneRegistration;

components/Form/Registration/stepThree.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable react/no-unescaped-entities */
+import React, { JSX, useState } from 'react';
+import Button from '../../Buttons/button';
+import { CfpStepProps } from '../../../types/types';
+
+function StepThreeRegistration({ setStep, setForm, data }: CfpStepProps): JSX.Element {
+
+  const dietary = data.dietaryAccessibility || '';
+  const updatesOptIn = !!data.updatesOptIn;
+  const sponsorDataSharing = !!data.sponsorDataSharing;
+  const notes = data.notes || '';
+
+  const [localUpdates, setLocalUpdates] = useState(updatesOptIn);
+  const [localSponsor, setLocalSponsor] = useState(sponsorDataSharing);
+
+  return (
+    <form className="mt-3" onSubmit={(e) => setStep(e, 4)} data-test="reg-step-three">
+      <h1 id="step-three-heading" className="text-white font-bold text-4xl lg:text-3xl">Consents & Notes</h1>
+      <p className="mt-3 text-dark-600">Tell us any dietary or accessibility needs and consent preferences.</p>
+      <div className="mt-3 border w-full border-solid border-dark-400 divide-y" />
+      <div className="mt-10" role="group" aria-labelledby="step-three-heading">
+        <label htmlFor="dietaryAccessibility" className="text-dark-600 text-lg">Dietary / Accessibility needs</label>
+        <textarea
+          id="dietaryAccessibility"
+          className="mt-3 w-full p-4 rounded-md focus:outline-none focus:ring-2 focus:ring-[#E50E99] focus:ring-offset-2 focus:ring-offset-gray-900 border border-[#E50E99]"
+          value={dietary}
+          onChange={(e) => setForm((prev) => ({ ...prev, dietaryAccessibility: e.target.value }))}
+          data-test="reg-step-three-dietary"
+        />
+
+        <fieldset className="mt-5 border-0 p-0">
+          <legend className="text-dark-600 text-lg mb-3">Communication Preferences</legend>
+
+          <div className="text-dark-600">
+            <label className="inline-flex items-center">
+              <input
+                type="checkbox"
+                id="updatesOptIn"
+                checked={localUpdates}
+                onChange={(e) => {
+                  setLocalUpdates(e.target.checked);
+                  setForm((prev) => ({ ...prev, updatesOptIn: e.target.checked }));
+                }}
+                data-test="reg-step-three-updates"
+                className="mr-2 focus:ring-2 focus:ring-[#E50E99]"
+              />
+              Receive occasional updates about the event
+            </label>
+          </div>
+
+          <div className="mt-3 text-dark-600">
+            <label className="inline-flex items-center">
+              <input
+                type="checkbox"
+                id="sponsorDataSharing"
+                checked={localSponsor}
+                onChange={(e) => {
+                  setLocalSponsor(e.target.checked);
+                  setForm((prev) => ({ ...prev, sponsorDataSharing: e.target.checked }));
+                }}
+                data-test="reg-step-three-sponsor"
+                className="mr-2 focus:ring-2 focus:ring-[#E50E99]"
+              />
+              Share my contact with sponsors (optional)
+            </label>
+          </div>
+        </fieldset>
+
+        <div className="mt-3 text-sm text-dark-600">
+          We process your data according to our <a href="/privacy" className="underline">Privacy Policy</a>. By submitting you agree to the <a href="https://github.com/asyncapi/community/blob/master/CODE_OF_CONDUCT.md" target="_blank" rel="noreferrer" className="underline" aria-label="Code of Conduct (opens in new tab)">Code of Conduct<span className="sr-only"> (opens in new tab)</span></a> and Privacy Policy.
+        </div>
+
+        <label htmlFor="notes" className="text-dark-600 text-lg mt-6 block">Notes (optional)</label>
+        <textarea
+          id="notes"
+          className="mt-3 w-full p-4 rounded-md focus:outline-none focus:ring-2 focus:ring-[#E50E99] focus:ring-offset-2 focus:ring-offset-gray-900 border border-[#E50E99]"
+          value={notes}
+          onChange={(e) => setForm((prev) => ({ ...prev, notes: e.target.value }))}
+          data-test="reg-step-three-notes"
+        />
+
+        <div className="mt-3 flex items-center justify-end gap-6 lg:flex-col-reverse lg:w-full lg:items-stretch">
+          {/* Back */}
+          <Button
+            type="button"
+            onClick={() => setStep(null, 2)}
+            className="text-gray-500 hover:text-gray-700 transition-colors lg:text-center w-36 lg:w-full"
+          >
+            Back
+          </Button>
+
+          {/* Next */}
+          <Button
+            type="submit"
+            className="text-gray-500 hover:text-gray-700 transition-colors lg:text-center w-36 lg:w-full"
+            test="reg-step-three-next"
+          >
+            Next
+          </Button>
+        </div>
+
+      </div>
+    </form>
+  );
+}
+
+export default StepThreeRegistration;