web/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/index.tsx

"use client"

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

import { usePhoneNumberParsing } from "@scandic-hotels/common/hooks/usePhoneNumberParsing"
import { getDefaultCountryFromLang } from "@scandic-hotels/common/utils/phone"
import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import Phone from "@scandic-hotels/design-system/Form/Phone"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useFormTracking } from "@scandic-hotels/tracking/useFormTracking"

import { useBookingFlowConfig } from "../../../../bookingFlowConfig/bookingFlowConfigContext"
import { useRoomContext } from "../../../../contexts/EnterDetails/RoomContext"
import { useBookingFlowContext } from "../../../../hooks/useBookingFlowContext"
import useLang from "../../../../hooks/useLang"
import { getFormattedCountryList } from "../../../../misc/getFormatedCountryList"
import { useEnterDetailsStore } from "../../../../stores/enter-details"
import BookingFlowInput from "../../../BookingFlowInput"
import { getErrorMessage } from "../../../BookingFlowInput/errors"
import MemberPriceModal from "../MemberPriceModal"
import { SpecialRequests } from "../SpecialRequests"
import { JoinScandicFriendsCard } from "./JoinScandicFriendsCard"
import { PartnerSASJoinScandicFriendsCard } from "./PartnerSASJoinScandicFriendsCard"
import {
  type GuestDetailsSchema,
  guestDetailsSchema,
  signedInDetailsSchema,
} from "./schema"
import Signup from "./Signup"

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

import type { User } from "@scandic-hotels/trpc/types/user"

type DetailsProps = {
  user: User | null
}

const formID = "enter-details"
export default function Details({ user }: DetailsProps) {
  const refs = useRef<Record<string, HTMLElement | null>>({})

  const intl = useIntl()
  const lang = useLang()
  const config = useBookingFlowConfig()
  const bookingFlowContextUserData = useBookingFlowContext().user.data

  const { lastRoom, addPreSubmitCallback } = useEnterDetailsStore((state) => ({
    lastRoom: state.lastRoom,
    addPreSubmitCallback: state.actions.addPreSubmitCallback,
  }))

  const {
    actions: { updateDetails, updatePartialGuestData, setIncomplete },
    room,
    roomNr,
    idx,
  } = useRoomContext()

  let partialUser
  if (
    !user &&
    config.variant !== "scandic" &&
    bookingFlowContextUserData?.firstName &&
    bookingFlowContextUserData.lastName &&
    bookingFlowContextUserData.email
  ) {
    partialUser = {
      firstName: bookingFlowContextUserData.firstName,
      lastName: bookingFlowContextUserData.lastName,
      email: bookingFlowContextUserData.email,
    }
  }
  const initialData = {
    ...room.guest,
    ...partialUser,
  }

  const memberRate = "member" in room.roomRate ? room.roomRate.member : null

  const { phoneNumber, phoneNumberCC } = usePhoneNumberParsing(
    user?.phoneNumber || initialData.phoneNumber,
    initialData.phoneNumberCC
  )

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

  const {
    formState,
    handleSubmit,
    trigger,
    control,
    subscribe,
    setValue,
    watch,
    getValues,
  } = methods

  const { trackFormSubmit } = useFormTracking(
    "checkout",
    subscribe,
    control,
    lastRoom === idx ? "" : " - room 1"
  )

  useEffect(() => {
    async function callback() {
      await trigger()
      trackFormSubmit()
      const baseFieldOrder = [
        "firstName",
        "lastName",
        "countryCode",
        "email",
        "phoneNumber",
        "membershipNo",
      ]
      const joinChecked = methods.watch("join")
      const fieldOrder = joinChecked
        ? [...baseFieldOrder, "zipCode", "dateOfBirth"]
        : baseFieldOrder
      for (const name of fieldOrder) {
        const fieldError =
          methods.formState.errors[
            name as keyof typeof methods.formState.errors
          ]
        if (fieldError && refs.current[name]) {
          return refs.current[name] ?? undefined
        }
      }

      return
    }

    addPreSubmitCallback(`${idx}-details`, callback)
  }, [addPreSubmitCallback, idx, trigger, trackFormSubmit, methods])

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

  const updateDetailsStore = useCallback(() => {
    if (formState.isValid) {
      handleSubmit(onSubmit)()
    } else {
      updatePartialGuestData({
        firstName: getValues("firstName")?.toString(),
        lastName: getValues("lastName")?.toString(),
        membershipNo: getValues("membershipNo")?.toString(),
      })
      setIncomplete()
    }
  }, [
    formState.isValid,
    handleSubmit,
    onSubmit,
    updatePartialGuestData,
    getValues,
    setIncomplete,
  ])

  useEffect(updateDetailsStore, [updateDetailsStore])
  const countryCode = watch("countryCode")

  useEffect(() => {
    if (countryCode) {
      setValue("phoneNumberCC", countryCode.toLowerCase())
    }
  }, [countryCode, setValue])

  const showJoinCard = memberRate && !user

  return (
    <FormProvider {...methods}>
      <form
        className={styles.form}
        id={`${formID}-room-${roomNr}`}
        onSubmit={methods.handleSubmit(onSubmit)}
      >
        {showJoinCard ? (
          <JoinScandicCard updateDetailsStore={updateDetailsStore} />
        ) : null}
        <div className={styles.container}>
          <Typography variant="Title/Overline/sm" className={styles.fullWidth}>
            <p>
              {intl.formatMessage({
                id: "enterDetails.roomInfo.title",
                defaultMessage: "Guest information",
              })}
            </p>
          </Typography>
          <div
            ref={(el) => {
              refs.current.firstName = el
            }}
          >
            <BookingFlowInput
              autoComplete="given-name"
              label={intl.formatMessage({
                id: "common.firstName",
                defaultMessage: "First name",
              })}
              maxLength={30}
              name="firstName"
              readOnly={!!user}
              registerOptions={{ required: true, onBlur: updateDetailsStore }}
            />
          </div>
          <div
            ref={(el) => {
              refs.current.lastName = el
            }}
          >
            <BookingFlowInput
              autoComplete="family-name"
              label={intl.formatMessage({
                id: "common.lastName",
                defaultMessage: "Last name",
              })}
              maxLength={30}
              name="lastName"
              readOnly={!!user}
              registerOptions={{ required: true, onBlur: updateDetailsStore }}
            />
          </div>
          <div
            ref={(el) => {
              refs.current.countryCode = el
            }}
            className={styles.fullWidth}
          >
            <CountrySelect
              label={intl.formatMessage({
                id: "common.country",
                defaultMessage: "Country",
              })}
              lang={lang}
              countries={getFormattedCountryList(intl)}
              errorMessage={getErrorMessage(
                intl,
                config.variant,
                formState.errors.countryCode?.message
              )}
              name="countryCode"
              registerOptions={{ required: true, onBlur: updateDetailsStore }}
              disabled={!!user}
            />
          </div>
          <div
            ref={(el) => {
              refs.current.email = el
            }}
            className={styles.fullWidth}
          >
            <BookingFlowInput
              autoComplete="email"
              label={intl.formatMessage({
                id: "common.emailAddress",
                defaultMessage: "Email address",
              })}
              name="email"
              readOnly={!!user}
              registerOptions={{ required: true, onBlur: updateDetailsStore }}
            />
          </div>
          <div
            ref={(el) => {
              refs.current.phoneNumber = el
            }}
            className={styles.fullWidth}
          >
            <Phone
              countryLabel={intl.formatMessage({
                id: "common.countryCode",
                defaultMessage: "Country code",
              })}
              countriesWithTranslatedName={getFormattedCountryList(intl)}
              defaultCountryCode={getDefaultCountryFromLang(lang)}
              errorMessage={getErrorMessage(
                intl,
                config.variant,
                formState.errors.phoneNumber?.message
              )}
              label={intl.formatMessage({
                id: "common.phoneNumber",
                defaultMessage: "Phone number",
              })}
              name="phoneNumber"
              disabled={!!user}
              registerOptions={{ required: true, onBlur: updateDetailsStore }}
            />
          </div>
          {user ? null : (
            <div className={styles.fullWidth}>
              <Signup
                errors={formState.errors}
                name="join"
                registerOptions={{ onBlur: updateDetailsStore }}
                refs={refs}
              />
            </div>
          )}
          <SpecialRequests registerOptions={{ onBlur: updateDetailsStore }} />
        </div>
        <MemberPriceModal />
      </form>
    </FormProvider>
  )
}

function JoinScandicCard({
  updateDetailsStore,
}: {
  updateDetailsStore: () => void
}) {
  const config = useBookingFlowConfig()

  switch (config.enterDetailsMembershipIdInputLocation) {
    case "form":
      return <JoinScandicFriendsCard />
    case "join-card":
      return (
        <PartnerSASJoinScandicFriendsCard
          updateDetailsStore={updateDetailsStore}
        />
      )
    default:
      const _exhaustiveCheck: never =
        config.enterDetailsMembershipIdInputLocation
      return null
  }
}