web/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx

"use client"
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"

import {
  formatPhoneNumber,
  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 Input from "@/components/TempDesignSystem/Form/Input"
import useLang from "@/hooks/useLang"
import { getFormattedCountryList } from "@/utils/countries"
import { getErrorMessage } from "@/utils/getErrorMessage"

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

import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"

interface ModifyContactProps {
  guest: BookingConfirmation["booking"]["guest"]
  isFirstStep: boolean
}

export default function ModifyContact({
  guest,
  isFirstStep,
}: ModifyContactProps) {
  const intl = useIntl()
  const lang = useLang()
  const {
    getValues,
    formState: { errors },
  } = useFormContext()

  const phoneNumber = formatPhoneNumber(
    getValues("phoneNumber"),
    getValues("phoneNumberCC")
  )

  return (
    <>
      {isFirstStep ? (
        <div className={styles.container}>
          <div className={`${styles.row} ${styles.gridEqual}`}>
            <Input
              label={intl.formatMessage({
                id: "common.firstName",
                defaultMessage: "First name",
              })}
              maxLength={30}
              name="firstName"
              disabled={!!guest.firstName}
            />
            <Input
              label={intl.formatMessage({
                id: "common.lastName",
                defaultMessage: "Last name",
              })}
              maxLength={30}
              name="lastName"
              disabled={!!guest.lastName}
            />
          </div>
          <div className={styles.row}>
            <CountrySelect
              countries={getFormattedCountryList(intl)}
              errorMessage={getErrorMessage(
                intl,
                errors.countryCode?.message?.toString()
              )}
              label={intl.formatMessage({
                id: "common.country",
                defaultMessage: "Country",
              })}
              lang={lang}
              name="countryCode"
            />
          </div>
          <div className={styles.row}>
            <Input
              label={intl.formatMessage({
                id: "common.email",
                defaultMessage: "Email",
              })}
              name="email"
              type="email"
              registerOptions={{ required: true }}
            />
          </div>
          <div className={styles.row}>
            <Phone
              countryLabel={intl.formatMessage({
                id: "common.countryCode",
                defaultMessage: "Country code",
              })}
              countriesWithTranslatedName={getFormattedCountryList(intl)}
              defaultCountryCode={getDefaultCountryFromLang(lang)}
              errorMessage={getErrorMessage(
                intl,
                errors.phoneNumber?.message?.toString()
              )}
              label={intl.formatMessage({
                id: "common.phoneNumber",
                defaultMessage: "Phone number",
              })}
              name="phoneNumber"
              registerOptions={{ required: true }}
            />
          </div>
        </div>
      ) : (
        <>
          <Typography variant="Body/Paragraph/mdRegular">
            <p>
              {intl.formatMessage({
                id: "myStay.modifyContact.confirmationMessage",
                defaultMessage:
                  "Are you sure you want to change your guest details?",
              })}
            </p>
          </Typography>
          <div className={styles.container}>
            <Typography variant="Body/Paragraph/mdBold">
              <p data-hj-suppress>
                {getValues("firstName")} {getValues("lastName")}
              </p>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <p data-hj-suppress>{getValues("email")}</p>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <p data-hj-suppress>{phoneNumber}</p>
            </Typography>
          </div>
        </>
      )}
    </>
  )
}