Merged in feat/sw-2879-booking-widget-to-booking-flow-package (pull request #2532)

feat(SW-2879): Move BookingWidget to booking-flow package * Fix lockfile * Fix styling * a tiny little booking widget test * Tiny fixes * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Remove unused scripts * lint:fix * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Tiny lint fixes * update test * Update Input in booking-flow * Clean up comments etc * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Setup tracking context for booking-flow * Add missing use client * Fix temp tracking function * Pass booking to booking-widget * Remove comment * Add use client to booking widget tracking provider * Add use client to tracking functions * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Move debug page * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package Approved-by: Bianca Widstam
2025-08-05 09:20:20 +00:00
parent 03c9244fdf
commit 1bd8fe6821
206 changed files with 1936 additions and 796 deletions
--- a/packages/booking-flow/lib/components/BookingFlowInput/index.tsx
+++ b/packages/booking-flow/lib/components/BookingFlowInput/index.tsx
@@ -0,0 +1,109 @@
+"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