feat: guest information form enter details

2024-10-03 11:12:36 +02:00
parent 4103e3fb37
commit 451d461c7f
50 changed files with 834 additions and 442 deletions
--- a/components/HotelReservation/EnterDetails/Details/details.module.css
+++ b/components/HotelReservation/EnterDetails/Details/details.module.css
@@ -0,0 +1,25 @@
+.container {
+  display: grid;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x3) 0px;
+}
+
+.form {
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr 1fr;
+  width: min(100%, 600px);
+}
+
+.country,
+.email,
+.phone {
+  grid-column: 1/-1;
+}
+
+.footer {
+  display: grid;
+  gap: var(--Spacing-x3);
+  justify-items: flex-start;
+  margin-top: var(--Spacing-x1);
+}
--- a/components/HotelReservation/EnterDetails/Details/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/index.tsx
@@ -0,0 +1,117 @@
+"use client"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
+import CheckboxCard from "@/components/TempDesignSystem/Form/Checkbox/Card"
+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 { detailsSchema, signedInDetailsSchema } from "./schema"
+
+import styles from "./details.module.css"
+
+import type {
+  DetailsProps,
+  DetailsSchema,
+} from "@/types/components/enterDetails/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 methods = useForm<DetailsSchema>({
+    defaultValues: {
+      countryCode: user?.address?.countryCode ?? "",
+      email: user?.email ?? "",
+      firstname: user?.firstName ?? "",
+      lastname: user?.lastName ?? "",
+      phoneNumber: user?.phoneNumber ?? "",
+    },
+    mode: "all",
+    resolver: zodResolver(user ? signedInDetailsSchema : detailsSchema),
+    reValidateMode: "onChange",
+  })
+
+  return (
+    <FormProvider {...methods}>
+      <section className={styles.container}>
+        <header>
+          <Body color="uiTextHighContrast" textTransform="bold">
+            {intl.formatMessage({ id: "Guest information" })}
+          </Body>
+        </header>
+        <form className={styles.form}>
+          <Input
+            label={intl.formatMessage({ id: "Firstname" })}
+            name="firstname"
+            readOnly={!!user}
+            registerOptions={{ required: true }}
+          />
+          <Input
+            label={intl.formatMessage({ id: "Lastname" })}
+            name="lastname"
+            readOnly={!!user}
+            registerOptions={{ required: true }}
+          />
+          <CountrySelect
+            className={styles.country}
+            label={intl.formatMessage({ id: "Country" })}
+            name="countryCode"
+            readOnly={!!user}
+            registerOptions={{ required: true }}
+          />
+          <Input
+            className={styles.email}
+            label={intl.formatMessage({ id: "Email address" })}
+            name="email"
+            readOnly={!!user}
+            registerOptions={{ required: true }}
+          />
+          <Phone
+            className={styles.phone}
+            label={intl.formatMessage({ id: "Phone number" })}
+            name="phoneNumber"
+            readOnly={!!user}
+            registerOptions={{ required: true }}
+          />
+        </form>
+        <footer className={styles.footer}>
+          {user ? null : (
+            <CheckboxCard
+              list={list}
+              saving
+              subtitle={intl.formatMessage(
+                {
+                  id: "{difference}{amount} {currency}",
+                },
+                {
+                  amount: "491",
+                  currency: "SEK",
+                  difference: "-",
+                }
+              )}
+              title={intl.formatMessage({ id: "Join Scandic Friends" })}
+            />
+          )}
+          <Button
+            disabled={!methods.formState.isValid}
+            intent="secondary"
+            size="small"
+            theme="base"
+          >
+            {intl.formatMessage({ id: "Proceed to payment method" })}
+          </Button>
+        </footer>
+      </section>
+    </FormProvider>
+  )
+}
--- a/components/HotelReservation/EnterDetails/Details/schema.ts
+++ b/components/HotelReservation/EnterDetails/Details/schema.ts
@@ -0,0 +1,19 @@
+import { z } from "zod"
+
+import { phoneValidator } from "@/utils/phoneValidator"
+
+export const detailsSchema = z.object({
+  countryCode: z.string(),
+  email: z.string().email(),
+  firstname: z.string(),
+  lastname: z.string(),
+  phoneNumber: phoneValidator(),
+})
+
+export const signedInDetailsSchema = z.object({
+  countryCode: z.string().optional(),
+  email: z.string().email().optional(),
+  firstname: z.string().optional(),
+  lastname: z.string().optional(),
+  phoneNumber: phoneValidator().optional(),
+})