web/packages/booking-flow/lib/components/BookingFlowInput/index.tsx

"use client"

// This is almost a copy of the Input in TempDesignSystem, but since it's tightly coupled
// to the error messages we need to duplicate it for now. In the future we should
// rewrite it to be more reusable.

import { forwardRef } from "react"
import { Text, TextField } from "react-aria-components"
import {
  Controller,
  type RegisterOptions,
  useFormContext,
} from "react-hook-form"
import { useIntl } from "react-intl"

import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input as InputWithLabel } from "@scandic-hotels/design-system/Input"

import { getErrorMessage } from "./errors"

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

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  helpText?: string
  label: string
  name: string
  registerOptions?: RegisterOptions
  hideError?: boolean
}

const BookingFlowInput = forwardRef<HTMLInputElement, InputProps>(
  function Input(
    {
      "aria-label": ariaLabel,
      autoComplete,
      className = "",
      disabled = false,
      helpText = "",
      label,
      maxLength,
      name,
      placeholder,
      readOnly = false,
      registerOptions = {},
      type = "text",
      hideError,
      inputMode,
    },
    ref
  ) {
    const intl = useIntl()
    const { control } = useFormContext()

    return (
      <Controller
        disabled={disabled}
        control={control}
        name={name}
        rules={registerOptions}
        render={({ field, fieldState }) => (
          <TextField
            aria-label={ariaLabel}
            className={className}
            isDisabled={field.disabled}
            isInvalid={fieldState.invalid}
            isRequired={!!registerOptions.required}
            name={field.name}
            onBlur={field.onBlur}
            onChange={field.onChange}
            validationBehavior="aria"
            value={field.value}
          >
            <InputWithLabel
              {...field}
              ref={ref}
              aria-labelledby={field.name}
              autoComplete={autoComplete}
              id={field.name}
              label={label}
              maxLength={maxLength}
              placeholder={placeholder}
              readOnly={readOnly}
              required={!!registerOptions.required}
              type={type}
              inputMode={inputMode}
            />
            {helpText && !fieldState.error ? (
              <Caption asChild color="black">
                <Text className={styles.helpText} slot="description">
                  <MaterialIcon icon="check" size={20} />
                  {helpText}
                </Text>
              </Caption>
            ) : null}
            {fieldState.error && !hideError ? (
              <Caption className={styles.error} fontOnly>
                <MaterialIcon icon="info" color="Icon/Feedback/Error" />
                {getErrorMessage(intl, fieldState.error.message)}
              </Caption>
            ) : null}
          </TextField>
        )}
      />
    )
  }
)

export default BookingFlowInput