feat: guest information form enter details

2024-10-03 11:12:36 +02:00
parent 4103e3fb37
commit 451d461c7f
50 changed files with 834 additions and 442 deletions
--- a/components/TempDesignSystem/Form/Phone/index.tsx
+++ b/components/TempDesignSystem/Form/Phone/index.tsx
@@ -2,11 +2,7 @@
 import "react-international-phone/style.css"

 import { isValidPhoneNumber, parsePhoneNumber } from "libphonenumber-js"
-import {
-  Input as AriaInput,
-  Label as AriaLabel,
-  TextField,
-} from "react-aria-components"
+import { TextField } from "react-aria-components"
 import { useController, useFormContext, useWatch } from "react-hook-form"
 import {
  CountrySelector,
@@ -18,6 +14,7 @@ import { useIntl } from "react-intl"

 import { ChevronDownIcon } from "@/components/Icons"
 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
+import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Label from "@/components/TempDesignSystem/Form/Label"
 import Body from "@/components/TempDesignSystem/Text/Body"

@@ -29,10 +26,12 @@ import type { PhoneProps } from "./phone"

 export default function Phone({
  ariaLabel = "Phone number input",
+  className = "",
  disabled = false,
  label,
  name = "phoneNumber",
  placeholder = "",
+  readOnly = false,
  registerOptions = {
    required: true,
  },
@@ -72,8 +71,9 @@ export default function Phone({
  }

  return (
-    <div className={styles.phone}>
+    <div className={`${styles.phone} ${className}`}>
      <CountrySelector
+        disabled={readOnly}
        dropdownArrowClassName={styles.arrow}
        flagClassName={styles.flag}
        onSelect={handleSelectCountry}
@@ -114,25 +114,21 @@ export default function Phone({
        isDisabled={disabled ?? field.disabled}
        isInvalid={fieldState.invalid}
        isRequired={!!registerOptions?.required}
+        isReadOnly={readOnly}
        name={field.name}
        type="tel"
      >
-        <AriaLabel className={styles.inputContainer} htmlFor={field.name}>
-          <Body asChild fontOnly>
-            <AriaInput
-              className={styles.input}
-              id={field.name}
-              name={field.name}
-              onBlur={field.onBlur}
-              onChange={handleChange}
-              placeholder={placeholder}
-              ref={field.ref}
-              required={!!registerOptions.required}
-              value={inputValue}
-            />
-          </Body>
-          <Label required={!!registerOptions.required}>{label}</Label>
-        </AriaLabel>
+        <AriaInputWithLabel
+          {...field}
+          id={field.name}
+          label={label}
+          onChange={handleChange}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          required={!!registerOptions.required}
+          type="tel"
+          value={inputValue}
+        />
        <ErrorMessage errors={formState.errors} name={field.name} />
      </TextField>
    </div>