482 frontend user signup confirm details (#557)

* Set up confirm details file

* Added review details container and section titles

* Added new page

* Update to display confirm details in sign up

* Added details on form

* Finished main section of confirm details form

* Added page title text

* Fixed up some css

* Updated all CSS to tailwindcss

* Fixed logic error

client/src/components/composite/SignUpForm/PageConfig/PageConfig.tsx

@@ -5,6 +5,7 @@ import {
 } from "../Sections/PersonalSection"
 import { ContactSection } from "../Sections/ContactSection"
 import { AdditionalSection } from "../Sections/AdditionalSection"
+import { ConfirmDetailsSection } from "../Sections/ConfirmDetailsSection"
 import ConfirmationSection from "../Sections/ConfirmationSection"
 import SuccessSection from "../Sections/SuccessSection"
 
@@ -14,6 +15,7 @@ import {
   CONTACT_ROUTE,
   PAGES,
   PAYMENT_INFORMATION_ROUTE,
+  CONFIRM_DETAILS_ROUTE,
   PAYMENT_ROUTE,
   PERSONAL_ROUTE_1,
   PERSONAL_ROUTE_2,
@@ -60,10 +62,19 @@ export const PAGINATED_FORM_PAGES = (
   {
     index: PAGES.Additional,
     title: "Additional info",
-    nextButtonText: "Sign Up",
+    nextButtonText: "Next",
     onBack: () => navigateFn(CONTACT_ROUTE),
+    onNext: () =>
+      validateFormFn(PAGES.Additional, () => navigateFn(CONFIRM_DETAILS_ROUTE))
+  },
+
+  {
+    index: PAGES.ConfirmDetails,
+    title: "Review Details",
+    nextButtonText: "Sign Up",
+    onBack: () => navigateFn(ADDITIONAL_ROUTE),
     onNext: () => {
-      validateFormFn(PAGES.Additional, () => signUpFn())
+      signUpFn()
     },
     nextDisabled: disableSubmit
   },
@@ -109,6 +120,7 @@ export const PAGE_CONTENT = [
   <PersonalSectionSecond key="personal-second" />,
   <ContactSection key="contact" />,
   <AdditionalSection key="additional" />,
+  <ConfirmDetailsSection key="confirm-details" />,
   <PaymentInformationSection key="payment-info" />,
   <PaymentSection key="payment" />,
   <ConfirmationSection

client/src/components/composite/SignUpForm/Sections/ConfirmDetailsSection.story.tsx

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ConfirmDetailsSection } from "./ConfirmDetailsSection"
+const meta: Meta<typeof ConfirmDetailsSection> = {
+  component: ConfirmDetailsSection
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

client/src/components/composite/SignUpForm/Sections/ConfirmDetailsSection.tsx

@@ -0,0 +1,127 @@
+import { useSignUpFormData } from "store/SignUpForm"
+import ConfirmDetailsForm from "components/generic/ConfirmDetailsForm/ConfirmDetailsForm"
+
+const MyText = ({ text = "N/A" }: { text?: string }) => {
+  return <p className="mb-5">{text}</p>
+}
+
+const Field = ({ text }: { text: string }) => {
+  return (
+    <p className="font-family: Inter; mb-2 mt-5 text-gray-400 opacity-70">
+      {text}
+    </p>
+  )
+}
+
+const Title = ({ text }: { text: string }) => {
+  return (
+    <p className="font-family: Inter; mt-5 text-sm font-bold uppercase not-italic text-blue-800">
+      {text}
+    </p>
+  )
+}
+
+const SectionSeparator = () => {
+  return <hr className="h-px w-4/5 border-gray-400" />
+}
+
+export const ConfirmDetailsSection = () => {
+  const [
+    {
+      first_name,
+      last_name,
+      date_of_birth,
+      gender,
+      student_id,
+      university_year,
+      faculty,
+      email,
+      phone_number,
+      emergency_contact,
+      does_ski,
+      does_snowboarding,
+      does_racing,
+      dietary_requirements
+    }
+  ] = useSignUpFormData()
+
+  const full_name = `${first_name} ${last_name}`
+
+  const formatDateOfBirth = (
+    timestamp: { seconds: number; nanoseconds: number } | undefined
+  ) => {
+    if (!timestamp) return "N/A"
+
+    const dob = new Date(timestamp.seconds * 1000)
+
+    const day = dob.getDate().toString().padStart(2, "0")
+    const month = (dob.getMonth() + 1).toString().padStart(2, "0")
+    const year = dob.getFullYear()
+
+    return `${day}/${month}/${year}`
+  }
+
+  return (
+    <div>
+      <p className="font-family: Inter; mb-4 text-base leading-5 text-black">
+        Please review member details before proceeding to payment
+      </p>
+
+      <span className="mb-3 flex gap-5">
+        <ConfirmDetailsForm>
+          <Title text="Personal Details" />
+          <Field text="Name" />
+          <MyText text={full_name} />
+          <Field text="DOB" />
+          <MyText text={formatDateOfBirth(date_of_birth)} />
+          <Field text="Gender" />
+          {gender ? <MyText text={gender} /> : <MyText text="N/A" />}{" "}
+          <Field text="Student ID Number" />
+          <MyText text={student_id} />
+          <Field text="University Year" />
+          {university_year ? (
+            <MyText text={university_year} />
+          ) : (
+            <MyText text="N/A" />
+          )}{" "}
+          <Field text="Faculty" />
+          <MyText text={faculty} />
+          <SectionSeparator />
+          <Title text="Contact Information" />
+          <Field text="Email" />
+          <MyText text={email} />
+          <Field text="Mobile Number" />
+          <MyText text={phone_number.toString()} />
+          <Field text="Emergency Contact" />
+          {emergency_contact ? (
+            <MyText text={emergency_contact} />
+          ) : (
+            <MyText text="N/A" />
+          )}{" "}
+          <SectionSeparator />
+          <Title text="Additional Information" />
+          <Field text="Skier/Snowboarder?" />
+          <MyText
+            text={
+              does_ski && does_snowboarding
+                ? "Both"
+                : does_snowboarding
+                  ? "Snowboarder"
+                  : does_ski
+                    ? "Skier"
+                    : "New!"
+            }
+          />{" "}
+          <Field text="Keen on Racing?" />
+          <MyText text={does_racing ? "Yes" : "No"} />
+          <Field text="Dietary Requirements" />
+          {dietary_requirements ? (
+            <MyText text={dietary_requirements} />
+          ) : (
+            <MyText text="N/A" />
+          )}{" "}
+        </ConfirmDetailsForm>
+      </span>
+    </div>
+  )
+}

client/src/components/composite/SignUpForm/SignUpForm.tsx

@@ -46,6 +46,7 @@ export const ProtectedSignUpForm = ({
     case PAGES.PersonalSecond:
     case PAGES.Contact:
     case PAGES.Additional:
+    case PAGES.ConfirmDetails:
       if (currentUser) {
         return <Navigate to={oneLevelUp(PAYMENT_INFORMATION_ROUTE)} replace />
       }

client/src/components/composite/SignUpForm/utils/RouteNames.ts

@@ -2,6 +2,7 @@ export const PERSONAL_ROUTE_1 = "personal_1" as const
 export const PERSONAL_ROUTE_2 = "personal_2" as const
 export const CONTACT_ROUTE = "contact" as const
 export const ADDITIONAL_ROUTE = "additional" as const
+export const CONFIRM_DETAILS_ROUTE = "confirm-details" as const
 export const PAYMENT_INFORMATION_ROUTE = "payment-info" as const
 export const PAYMENT_ROUTE = "payment" as const
 export const CONFIRM_ROUTE = "confirm" as const
@@ -13,6 +14,7 @@ export type RouteNames =
   | typeof PERSONAL_ROUTE_2
   | typeof CONTACT_ROUTE
   | typeof ADDITIONAL_ROUTE
+  | typeof CONFIRM_DETAILS_ROUTE
   | typeof PAYMENT_INFORMATION_ROUTE
   | typeof PAYMENT_ROUTE
   | typeof CONFIRM_ROUTE
@@ -27,6 +29,7 @@ export enum PAGES {
   PersonalSecond,
   Contact,
   Additional,
+  ConfirmDetails,
   PaymentInfo,
   Payment,
   Confirm,

client/src/components/composite/SignUpForm/utils/Utils.tsx

@@ -5,6 +5,7 @@ import {
   CONFIRM_ROUTE,
   CONTACT_ROUTE,
   PAGES,
+  CONFIRM_DETAILS_ROUTE,
   PAYMENT_INFORMATION_ROUTE,
   PAYMENT_ROUTE,
   PERSONAL_ROUTE_1,
@@ -37,6 +38,9 @@ export const useCurrentStep = (): PAGES => {
     case PAYMENT_INFORMATION_ROUTE:
       return PAGES.PaymentInfo
 
+    case CONFIRM_DETAILS_ROUTE:
+      return PAGES.ConfirmDetails
+
     case PAYMENT_ROUTE:
       return PAGES.Payment
 

client/src/components/generic/ConfirmDetailsForm/ConfirmDetailsForm.story.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import ConfirmDetailsForm from "./ConfirmDetailsForm"
+
+const meta: Meta<typeof ConfirmDetailsForm> = {
+  component: ConfirmDetailsForm
+}
+
+export default meta
+
+type Story = StoryObj<typeof ConfirmDetailsForm>
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+        <p>Form Container</p>
+      </>
+    )
+  }
+}

client/src/components/generic/ConfirmDetailsForm/ConfirmDetailsForm.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react"
+
+interface IFormContainerProps {
+  children: ReactNode
+}
+
+const ConfirmDetailsForm = ({ children }: IFormContainerProps) => {
+  return (
+    <div className="flex-shrink: 0; h-full w-full overflow-y-auto rounded-md border border-gray-400 bg-white pl-6">
+      {children}
+    </div>
+  )
+}
+
+export default ConfirmDetailsForm