web/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/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 { Button } from "@scandic-hotels/design-system/Button"

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

import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { useRoomContext } from "@/contexts/Details/Room"

import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
import { 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 }: DetailsProps) {
  const intl = useIntl()

  const { canProceedToPayment, lastRoom, isMultiRoom } = useEnterDetailsStore(
    (state) => ({
      canProceedToPayment: state.canProceedToPayment,
      lastRoom: state.lastRoom,
      isMultiRoom: state.rooms.length > 1,
    })
  )
  const {
    actions: { updateDetails },
    idx,
    room,
    roomNr,
  } = useRoomContext()
  const initialData = room.guest

  const memberRate = "member" in room.roomRate ? room.roomRate.member : null
  const isPaymentNext = idx === lastRoom
  const showContinueButton = isMultiRoom || !user

  const methods = useForm<DetailsSchema>({
    criteriaMode: "all",
    mode: "all",
    resolver: zodResolver(user ? signedInDetailsSchema : guestDetailsSchema),
    reValidateMode: "onChange",
    values: {
      countryCode: user?.address?.countryCode ?? initialData.countryCode,
      dateOfBirth:
        "dateOfBirth" in initialData ? initialData.dateOfBirth : undefined,
      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: "zipCode" in initialData ? initialData.zipCode : undefined,
      specialRequest: {
        comment: room.specialRequest.comment,
      },
    },
  })

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

  return (
    <FormProvider {...methods}>
      <form
        className={styles.form}
        id={`${formID}-room-${roomNr}`}
        onSubmit={methods.handleSubmit(onSubmit)}
      >
        {user || !memberRate ? null : <JoinScandicFriendsCard />}
        <div className={styles.container}>
          <Footnote
            color="uiTextHighContrast"
            textTransform="uppercase"
            type="label"
            className={styles.fullWidth}
          >
            {intl.formatMessage({
              defaultMessage: "Guest information",
            })}
          </Footnote>
          <Input
            label={intl.formatMessage({
              defaultMessage: "First name",
            })}
            maxLength={30}
            name="firstName"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          <Input
            label={intl.formatMessage({
              defaultMessage: "Last name",
            })}
            maxLength={30}
            name="lastName"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          <CountrySelect
            className={styles.fullWidth}
            label={intl.formatMessage({
              defaultMessage: "Country",
            })}
            name="countryCode"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          <Input
            className={styles.fullWidth}
            label={intl.formatMessage({
              defaultMessage: "Email address",
            })}
            name="email"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          <Phone
            className={styles.fullWidth}
            label={intl.formatMessage({
              defaultMessage: "Phone number",
            })}
            name="phoneNumber"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          {user ? null : (
            <div className={styles.fullWidth}>
              <Signup name="join" />
            </div>
          )}
          <SpecialRequests />
        </div>
        {showContinueButton ? (
          <footer className={styles.footer}>
            <Button
              isDisabled={
                !(
                  methods.formState.isValid ||
                  (isPaymentNext && canProceedToPayment)
                )
              }
              variant="Tertiary"
              typography="Body/Paragraph/mdBold"
              size="Medium"
              type="submit"
            >
              {isPaymentNext
                ? intl.formatMessage({
                    defaultMessage: "Continue",
                  })
                : intl.formatMessage(
                    {
                      defaultMessage: "Continue to room {nextRoomNumber}",
                    },
                    { nextRoomNumber: roomNr + 1 }
                  )}
            </Button>
          </footer>
        ) : null}
      </form>
    </FormProvider>
  )
}