web/components/HotelReservation/EnterDetails/Details/index.tsx

"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useCallback } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"

import { useEnterDetailsStore } from "@/stores/enter-details"

import Button from "@/components/TempDesignSystem/Button"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Select from "@/components/TempDesignSystem/Form/Select"
import TextArea from "@/components/TempDesignSystem/Form/TextArea"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"

import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
import {
  ElevatorPreference,
  FloorPreference,
  guestDetailsSchema,
  signedInDetailsSchema,
} from "./schema"
import Signup from "./Signup"

import styles from "./details.module.css"

import type {
  DetailsProps,
  DetailsSchema,
} from "@/types/components/hotelReservation/enterDetails/details"

const formID = "enter-details"
export default function Details({ user, memberPrice }: DetailsProps) {
  const intl = useIntl()
  const initialData = useEnterDetailsStore((state) => state.guest)
  const updateDetails = useEnterDetailsStore(
    (state) => state.actions.updateDetails
  )

  const methods = useForm<DetailsSchema>({
    criteriaMode: "all",
    mode: "all",
    resolver: zodResolver(user ? signedInDetailsSchema : guestDetailsSchema),
    reValidateMode: "onChange",
    values: {
      countryCode: user?.address?.countryCode ?? initialData.countryCode,
      dateOfBirth: initialData.dateOfBirth,
      email: user?.email ?? initialData.email,
      firstName: user?.firstName ?? initialData.firstName,
      join: initialData.join,
      lastName: user?.lastName ?? initialData.lastName,
      membershipNo: initialData.membershipNo,
      phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
      zipCode: initialData.zipCode,
      specialRequests: initialData.specialRequests,
    },
  })

  const noPreferenceItem = {
    value: "",
    label: intl.formatMessage({
      id: "No preference",
    }),
  }

  const onSubmit = useCallback(
    (values: DetailsSchema) => {
      updateDetails(values)
    },
    [updateDetails]
  )

  return (
    <FormProvider {...methods}>
      <form
        className={styles.form}
        id={formID}
        onSubmit={methods.handleSubmit(onSubmit)}
      >
        {user ? null : (
          <JoinScandicFriendsCard name="join" memberPrice={memberPrice} />
        )}
        <div className={styles.container}>
          <Footnote
            color="uiTextHighContrast"
            textTransform="uppercase"
            type="label"
            className={styles.fullWidth}
          >
            {intl.formatMessage({ id: "Guest information" })}
          </Footnote>
          <Input
            label={intl.formatMessage({ id: "First name" })}
            maxLength={30}
            name="firstName"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          <Input
            label={intl.formatMessage({ id: "Last name" })}
            maxLength={30}
            name="lastName"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          <CountrySelect
            className={styles.fullWidth}
            label={intl.formatMessage({ id: "Country" })}
            name="countryCode"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          <Input
            className={styles.fullWidth}
            label={intl.formatMessage({ id: "Email address" })}
            name="email"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          <Phone
            className={styles.fullWidth}
            label={intl.formatMessage({ id: "Phone number" })}
            name="phoneNumber"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          {user ? null : (
            <div className={styles.fullWidth}>
              <Signup name="join" />
            </div>
          )}
          <Footnote
            color="uiTextHighContrast"
            textTransform="uppercase"
            type="label"
            className={styles.fullWidth}
          >
            {intl.formatMessage({ id: "Special requests" })}
          </Footnote>
          <Select
            className={styles.fullWidth}
            label={intl.formatMessage({ id: "Floor preference" })}
            name="specialRequests.floorPreference"
            items={[
              noPreferenceItem,
              {
                value: FloorPreference.HIGH,
                label: intl.formatMessage({ id: FloorPreference.HIGH }),
              },
              {
                value: FloorPreference.LOW,
                label: intl.formatMessage({ id: FloorPreference.LOW }),
              },
            ]}
          />
          <Select
            className={styles.fullWidth}
            label={intl.formatMessage({ id: "Elevator preference" })}
            name="specialRequests.elevatorPreference"
            items={[
              noPreferenceItem,
              {
                value: ElevatorPreference.AWAY_FROM_ELEVATOR,
                label: intl.formatMessage({
                  id: ElevatorPreference.AWAY_FROM_ELEVATOR,
                }),
              },
              {
                value: ElevatorPreference.NEAR_ELEVATOR,
                label: intl.formatMessage({
                  id: ElevatorPreference.NEAR_ELEVATOR,
                }),
              },
            ]}
          />
          <TextArea
            label={intl.formatMessage({
              id: "Is there anything else you would like us to know before your arrival?",
            })}
            name="specialRequests.comments"
            className={styles.fullWidth}
          />
        </div>
        <footer className={styles.footer}>
          <Button
            disabled={!methods.formState.isValid}
            intent="secondary"
            size="small"
            theme="base"
            type="submit"
          >
            {intl.formatMessage({ id: "Proceed to payment method" })}
          </Button>
        </footer>
      </form>
    </FormProvider>
  )
}