feat: add conditional signup values

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -6,14 +6,16 @@ import { useIntl } from "react-intl"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
+import { registerUserBookingFlow } from "@/actions/registerUserBookingFlow"
 import Button from "@/components/TempDesignSystem/Button"
-import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import { toast } from "@/components/TempDesignSystem/Toasts"
 
 import { detailsSchema, signedInDetailsSchema } from "./schema"
+import Signup from "./Signup"
 
 import styles from "./details.module.css"
 
@@ -25,28 +27,30 @@ import type {
 const formID = "enter-details"
 export default function Details({ user }: DetailsProps) {
   const intl = useIntl()
-
-  const list = [
-    { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
-    { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
-    { title: intl.formatMessage({ id: "Join at no cost" }) },
-  ]
-
   const initialData = useEnterDetailsStore((state) => ({
     countryCode: state.data.countryCode,
     email: state.data.email,
-    firstname: state.data.firstname,
-    lastname: state.data.lastname,
+    firstName: state.data.firstName,
+    lastName: state.data.lastName,
     phoneNumber: state.data.phoneNumber,
+    join: state.data.join,
+    dateOfBirth: state.data.dateOfBirth,
+    zipCode: state.data.zipCode,
+    termsAccepted: state.data.termsAccepted,
   }))
 
   const methods = useForm<DetailsSchema>({
     defaultValues: {
       countryCode: user?.address?.countryCode ?? initialData.countryCode,
       email: user?.email ?? initialData.email,
-      firstname: user?.firstName ?? initialData.firstname,
-      lastname: user?.lastName ?? initialData.lastname,
+      firstName: user?.firstName ?? initialData.firstName,
+      lastName: user?.lastName ?? initialData.lastName,
       phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
+      //@ts-expect-error: We use a literal for join to be true or false, which does not convert to a boolean
+      join: initialData.join,
+      dateOfBirth: initialData.dateOfBirth,
+      zipCode: initialData.zipCode,
+      termsAccepted: initialData.termsAccepted,
     },
     criteriaMode: "all",
     mode: "all",
@@ -56,10 +60,39 @@ export default function Details({ user }: DetailsProps) {
 
   const completeStep = useEnterDetailsStore((state) => state.completeStep)
 
+  // const errorMessage = intl.formatMessage({
+  //   id: "An error occurred. Please try again.",
+  // })
+
   const onSubmit = useCallback(
-    (values: DetailsSchema) => {
+    async function (values: DetailsSchema) {
+      if (values.join) {
+        const signupVals = {
+          firstName: values.firstName,
+          lastName: values.lastName,
+          email: values.email,
+          phoneNumber: values.phoneNumber,
+          address: {
+            zipCode: values.zipCode,
+            countryCode: values.countryCode,
+          },
+          dateOfBirth: values.dateOfBirth,
+        }
+
+        const res = await registerUserBookingFlow(signupVals)
+        if (!res.success) {
+          // if (res.error) {
+          //   toast.error(res.error)
+          // } else {
+          //   toast.error(errorMessage)
+          // }
+          return
+        }
+        console.log("Signed up user: ", res)
+      }
       completeStep(values)
     },
+
     [completeStep]
   )
 
@@ -77,14 +110,14 @@ export default function Details({ user }: DetailsProps) {
           onSubmit={methods.handleSubmit(onSubmit)}
         >
           <Input
-            label={intl.formatMessage({ id: "Firstname" })}
-            name="firstname"
+            label={intl.formatMessage({ id: "First name" })}
+            name="firstName"
             readOnly={!!user}
             registerOptions={{ required: true }}
           />
           <Input
-            label={intl.formatMessage({ id: "Lastname" })}
-            name="lastname"
+            label={intl.formatMessage({ id: "Last name" })}
+            name="lastName"
             readOnly={!!user}
             registerOptions={{ required: true }}
           />
@@ -109,26 +142,9 @@ export default function Details({ user }: DetailsProps) {
             readOnly={!!user}
             registerOptions={{ required: true }}
           />
+          {user ? null : <Signup name="join" />}
         </form>
         <footer className={styles.footer}>
-          {user ? null : (
-            <CheckboxCard
-              highlightSubtitle
-              list={list}
-              name="join"
-              subtitle={intl.formatMessage(
-                {
-                  id: "{difference}{amount} {currency}",
-                },
-                {
-                  amount: "491",
-                  currency: "SEK",
-                  difference: "-",
-                }
-              )}
-              title={intl.formatMessage({ id: "Join Scandic Friends" })}
-            />
-          )}
           <Button
             disabled={!methods.formState.isValid}
             form={formID}