Merged in feat/SW-2078-update-confirmation-page-vouchers (pull request #1731)

Feat/SW-2078 update confirmation page vouchers and Corp Cheques rate * feat: SW-2078 Tablet bookingCode ref forward issue fix (cherry picked from commit 16a6a00fd99b6b6220a98ad74de062d67d35e1c0) * feat: SW-2078 Display Vouchers and Cheques prices on confirmation page (cherry picked from commit a76494de497a7d5e7641cb0036bd7055acf875c1) * feat: SW-2078 Rebase issue fix * feat: SW-2079 Updated rate title in terms modal * feat: SW-2078 Optimized code * feat: SW-2078 Removed extra tags Approved-by: Christian Andolf
2025-04-08 07:27:40 +00:00
parent c56a0b8ce9
commit 73cb423c95
26 changed files with 300 additions and 143 deletions
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
@@ -322,6 +322,15 @@ function TabletBookingCode({
  const codeVoucher = intl.formatMessage({ id: "Code / Voucher" })

  function toggleModal(isOpen: boolean) {
+    if (document.body) {
+      if (isOpen) {
+        document.body.style.overflow = "visible"
+      } else {
+        // !important needed to override 'overflow: hidden' set by react-aria.
+        // 'overflow: hidden' does not work in combination with other sticky positioned elements, which clip does.
+        document.body.style.overflow = "clip !important"
+      }
+    }
    if (!isOpen && !bookingCode?.value) {
      setValue("bookingCode.flag", false)
      setIsOpen(isOpen)
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx
@@ -2,6 +2,7 @@
 import React from "react"
 import { useIntl } from "react-intl"

+import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"

@@ -10,7 +11,7 @@ import { useBookingConfirmationStore } from "@/stores/booking-confirmation"

 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
-import Body from "@/components/TempDesignSystem/Text/Body"
+import IconChip from "@/components/TempDesignSystem/IconChip"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
@@ -45,15 +46,26 @@ function TableSection({ children }: React.PropsWithChildren) {
 function TableSectionHeader({
  title,
  subtitle,
+  bold,
 }: {
  title: string
  subtitle?: string
+  bold?: boolean
 }) {
+  const typographyVariant = bold
+    ? "Body/Paragraph/mdBold"
+    : "Body/Paragraph/mdRegular"
  return (
    <tr>
-      <th colSpan={2}>
-        <Body>{title}</Body>
-        {subtitle ? <Body>{subtitle}</Body> : null}
+      <th colSpan={2} align="left">
+        <Typography variant={typographyVariant}>
+          <p>{title}</p>
+        </Typography>
+        {subtitle ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p>{subtitle}</p>
+          </Typography>
+        ) : null}
      </th>
    </tr>
  )
@@ -130,12 +142,13 @@ export default function PriceDetailsModal() {
            <React.Fragment key={idx}>
              <TableSection>
                {rooms.length > 1 && (
-                  <Body textTransform="bold">
-                    {intl.formatMessage(
+                  <TableSectionHeader
+                    title={intl.formatMessage(
                      { id: "Room {roomIndex}" },
                      { roomIndex: idx + 1 }
                    )}
-                  </Body>
+                    bold
+                  />
                )}
                <TableSectionHeader title={room.name} subtitle={duration} />
                {room.roomFeatures
@@ -179,14 +192,14 @@ export default function PriceDetailsModal() {
                      currencyCode
                    )}
                  />
-                  {room.children ? (
+                  {room.childrenAges?.length ? (
                    <Row
                      label={intl.formatMessage(
                        {
                          id: "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
                        },
                        {
-                          totalChildren: room.children,
+                          totalChildren: room.childrenAges.length,
                          totalBreakfasts: diff,
                        }
                      )}
@@ -237,11 +250,26 @@ export default function PriceDetailsModal() {
          </tr>
          {bookingCode && (
            <tr className={styles.row}>
-              <td>
-                <MaterialIcon icon="sell" />
-                {bookingCode}
+              <td colSpan={2} align="left">
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <IconChip
+                    color="blue"
+                    icon={<DiscountIcon color="Icon/Feedback/Information" />}
+                  >
+                    {intl.formatMessage(
+                      { id: "<strong>Booking code</strong>: {value}" },
+                      {
+                        value: bookingCode,
+                        strong: (text) => (
+                          <Typography variant="Body/Supporting text (caption)/smBold">
+                            <strong>{text}</strong>
+                          </Typography>
+                        ),
+                      }
+                    )}
+                  </IconChip>
+                </Typography>
              </td>
-              <td></td>
            </tr>
          )}
        </TableSection>
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx
@@ -23,10 +23,13 @@ export default function ReceiptRoom({
  roomIndex,
 }: BookingConfirmationReceiptRoomProps) {
  const intl = useIntl()
-  const { room, currencyCode } = useBookingConfirmationStore((state) => ({
-    room: state.rooms[roomIndex],
-    currencyCode: state.currencyCode,
-  }))
+  const { room, currencyCode, isVatCurrency } = useBookingConfirmationStore(
+    (state) => ({
+      room: state.rooms[roomIndex],
+      currencyCode: state.currencyCode,
+      isVatCurrency: state.isVatCurrency,
+    })
+  )

  if (!room) {
    return <RoomSkeletonLoader />
@@ -56,7 +59,7 @@ export default function ReceiptRoom({
        ) : (
          <Typography variant="Body/Paragraph/mdRegular">
            <p className={styles.uiTextHighContrast}>
-              {formatPrice(intl, room.roomPrice, currencyCode)}
+              {room.formattedTotalCost}
            </p>
          </Typography>
        )}
@@ -91,9 +94,9 @@ export default function ReceiptRoom({
            </Button>
          }
          title={
-            (room.roomPoints
-              ? room.rateDefinition.title
-              : room.rateDefinition.cancellationText) || ""
+            (isVatCurrency
+              ? room.rateDefinition.cancellationText
+              : room.rateDefinition.title) || ""
          }
          subtitle={
            room.rateDefinition.cancellationRule ===
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx
@@ -15,6 +15,7 @@ import { LinkedReservationCardSkeleton } from "./LinkedReservationCardSkeleton"
 import Retry from "./Retry"

 import type { LinkedReservationProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/linkedReservation"
+import { CurrencyEnum } from "@/types/enums/currency"

 export function LinkedReservation({
  checkInTime,
@@ -27,13 +28,19 @@ export function LinkedReservation({
    confirmationNumber,
    lang,
  })
-  const { setRoom, setFormattedTotalCost, currencyCode, totalBookingPrice } =
-    useBookingConfirmationStore((state) => ({
-      setRoom: state.actions.setRoom,
-      setFormattedTotalCost: state.actions.setFormattedTotalCost,
-      currencyCode: state.currencyCode,
-      totalBookingPrice: state.totalBookingPrice,
-    }))
+  const {
+    setRoom,
+    setFormattedTotalCost,
+    currencyCode,
+    totalBookingPrice,
+    totalBookingCheques,
+  } = useBookingConfirmationStore((state) => ({
+    setRoom: state.actions.setRoom,
+    setFormattedTotalCost: state.actions.setFormattedTotalCost,
+    currencyCode: state.currencyCode,
+    totalBookingPrice: state.totalBookingPrice,
+    totalBookingCheques: state.totalBookingCheques,
+  }))
  const intl = useIntl()

  useEffect(() => {
@@ -41,18 +48,24 @@ export function LinkedReservation({
      const roomData = mapRoomState(data.booking, data.room, intl)
      setRoom(roomData, roomIndex)

-      const formattedTotalCost = formatPrice(
-        intl,
-        totalBookingPrice,
-        currencyCode
-      )
+      const formattedTotalCost = totalBookingCheques
+        ? formatPrice(
+            intl,
+            totalBookingCheques,
+            CurrencyEnum.CC,
+            totalBookingPrice,
+            currencyCode
+          )
+        : formatPrice(intl, totalBookingPrice, currencyCode)
+
      setFormattedTotalCost(formattedTotalCost)
    }
  }, [
    data,
    roomIndex,
-    setRoom,
    intl,
+    setRoom,
+    totalBookingCheques,
    totalBookingPrice,
    currencyCode,
    setFormattedTotalCost,
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/tracking.ts
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/tracking.ts
@@ -75,7 +75,7 @@ export function getTracking(
  }

  const noOfAdults = rooms.map((r) => r.adults).join(",")
-  const noOfChildren = rooms.map((r) => r.children ?? 0).join(",")
+  const noOfChildren = rooms.map((r) => r.childrenAges?.length ?? 0).join(",")
  const noOfRooms = rooms.length

  const hotelsTrackingData: TrackingSDKHotelInfo = {
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts
@@ -32,6 +32,20 @@ export function mapRoomState(
      booking.totalPrice,
      booking.currencyCode
    )
+  } else if (booking.cheques) {
+    formattedTotalCost = formatPrice(
+      intl,
+      booking.cheques,
+      CurrencyEnum.CC,
+      booking.totalPrice,
+      booking.currencyCode
+    )
+  } else if (booking.vouchers) {
+    formattedTotalCost = formatPrice(
+      intl,
+      booking.vouchers,
+      CurrencyEnum.Voucher
+    )
  }

  return {
@@ -39,7 +53,7 @@ export function mapRoomState(
    bedDescription: room.bedType.description,
    breakfast,
    breakfastIncluded,
-    children: booking.childrenAges.length,
+    cheques: booking.cheques,
    childrenAges: booking.childrenAges,
    childBedPreferences: booking.childBedPreferences,
    confirmationNumber: booking.confirmationNumber,
@@ -57,5 +71,6 @@ export function mapRoomState(
    totalPrice: booking.totalPrice,
    totalPriceExVat: booking.totalPriceExVat,
    vatAmount: booking.vatAmount,
+    vouchers: booking.vouchers,
  }
 }
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx
@@ -3,10 +3,12 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"

-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { dt } from "@/lib/dt"

+import IconChip from "@/components/TempDesignSystem/IconChip"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
@@ -328,13 +330,28 @@ export default function PriceDetailsTable({
            </td>
          </tr>
        ) : null}
-        {bookingCode && totalPrice.local.regularPrice && (
+        {bookingCode && (
          <tr className={styles.row}>
-            <td>
-              <MaterialIcon icon="sell" />
-              {bookingCode}
+            <td colSpan={2} align="left">
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <IconChip
+                  color="blue"
+                  icon={<DiscountIcon color="Icon/Feedback/Information" />}
+                >
+                  {intl.formatMessage(
+                    { id: "<strong>Booking code</strong>: {value}" },
+                    {
+                      value: bookingCode,
+                      strong: (text) => (
+                        <Typography variant="Body/Supporting text (caption)/smBold">
+                          <strong>{text}</strong>
+                        </Typography>
+                      ),
+                    }
+                  )}
+                </IconChip>
+              </Typography>
            </td>
-            <td></td>
          </tr>
        )}
      </TableSection>
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
@@ -3,7 +3,9 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"

+import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { dt } from "@/lib/dt"

@@ -12,6 +14,7 @@ import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Deskto
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
+import IconChip from "@/components/TempDesignSystem/IconChip"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -450,10 +453,24 @@ export default function SummaryUI({
          </div>
        </div>
        {booking.bookingCode && (
-          <div>
-            <MaterialIcon icon="sell" />
-            {booking.bookingCode}
-          </div>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <IconChip
+              color="blue"
+              icon={<DiscountIcon color="Icon/Feedback/Information" />}
+            >
+              {intl.formatMessage(
+                { id: "<strong>Booking code</strong>: {value}" },
+                {
+                  value: booking.bookingCode,
+                  strong: (text) => (
+                    <Typography variant="Body/Supporting text (caption)/smBold">
+                      <strong>{text}</strong>
+                    </Typography>
+                  ),
+                }
+              )}
+            </IconChip>
+          </Typography>
        )}
        <Divider className={styles.bottomDivider} color="primaryLightSubtle" />
      </div>
--- a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
@@ -5,8 +5,8 @@ import { useRouter, useSearchParams } from "next/navigation"
 import { memo, useCallback } from "react"
 import { useIntl } from "react-intl"

+import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { selectHotelMap, selectRate } from "@/constants/routes/hotelReservation"
@@ -185,14 +185,26 @@ function HotelCard({
          ) : (
            <>
              {bookingCode && (
-                <span className={`${fullPrice ? styles.strikedText : ""}`}>
-                  <IconChip
-                    color="blue"
-                    icon={<MaterialIcon icon="sell" size={20} />}
-                  >
-                    {bookingCode}
-                  </IconChip>
-                </span>
+                <div className={`${fullPrice ? styles.strikedText : ""}`}>
+                  <Typography variant="Body/Supporting text (caption)/smRegular">
+                    <IconChip
+                      color="blue"
+                      icon={<DiscountIcon color="Icon/Feedback/Information" />}
+                    >
+                      {intl.formatMessage(
+                        { id: "<strong>Booking code</strong>: {value}" },
+                        {
+                          value: bookingCode,
+                          strong: (text) => (
+                            <Typography variant="Body/Supporting text (caption)/smBold">
+                              <strong>{text}</strong>
+                            </Typography>
+                          ),
+                        }
+                      )}
+                    </IconChip>
+                  </Typography>
+                </div>
              )}
              {(!isUserLoggedIn ||
                !price?.member ||
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx
@@ -273,17 +273,24 @@ export function ReferenceCard({
          <Typography variant="Title/Overline/sm">
            <p>{intl.formatMessage({ id: "Booking code" })}</p>
          </Typography>
-          <IconChip
-            color="blue"
-            icon={<DiscountIcon color="Icon/Feedback/Information" />}
-          >
-            <Typography variant="Body/Supporting text (caption)/smBold">
-              <p className={styles.bookingCode}>
-                <strong>{intl.formatMessage({ id: "Booking code" })}</strong>:{" "}
-                {bookingCode}
-              </p>
-            </Typography>
-          </IconChip>
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <IconChip
+              color="blue"
+              icon={<DiscountIcon color="Icon/Feedback/Information" />}
+            >
+              {intl.formatMessage(
+                { id: "<strong>Booking code</strong>: {value}" },
+                {
+                  value: bookingCode,
+                  strong: (text) => (
+                    <Typography variant="Body/Supporting text (caption)/smBold">
+                      <strong>{text}</strong>
+                    </Typography>
+                  ),
+                }
+              )}
+            </IconChip>
+          </Typography>
        </div>
      )}
      <div className={styles.actionArea}>
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css
@@ -43,10 +43,6 @@
  display: none;
 }

-.bookingCode {
-  color: var(--UI-Semantic-Information);
-}
-
 .guaranteed {
  align-items: flex-start;
  border-radius: var(--Corner-radius-Medium);
--- a/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx
@@ -343,19 +343,24 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
          </div>
          <div className={styles.bookingInformation}>
            {bookingCode && (
-              <IconChip
-                color="blue"
-                icon={<DiscountIcon color="Icon/Feedback/Information" />}
-              >
-                <Typography variant="Body/Supporting text (caption)/smBold">
-                  <p className={styles.bookingCode}>
-                    <strong>
-                      {intl.formatMessage({ id: "Booking code" })}
-                    </strong>
-                    : {bookingCode}
-                  </p>
-                </Typography>
-              </IconChip>
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <IconChip
+                  color="blue"
+                  icon={<DiscountIcon color="Icon/Feedback/Information" />}
+                >
+                  {intl.formatMessage(
+                    { id: "<strong>Booking code</strong>: {value}" },
+                    {
+                      value: bookingCode,
+                      strong: (text) => (
+                        <Typography variant="Body/Supporting text (caption)/smBold">
+                          <strong>{text}</strong>
+                        </Typography>
+                      ),
+                    }
+                  )}
+                </IconChip>
+              </Typography>
            )}
            <div className={styles.priceDetails}>
              <div className={styles.price}>
--- a/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/room.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/room.module.css
@@ -6,10 +6,6 @@
  padding: var(--Spacing-x3) 0;
 }

-.bookingCode {
-  color: var(--UI-Semantic-Information);
-}
-
 .roomName {
  color: var(--Scandic-Brand-Burgundy);
  padding: 0 var(--Spacing-x2);
--- a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx
+++ b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx
@@ -291,17 +291,24 @@ export default function BookedRoomSidePeek({
            </div>
          </div>
          {bookingCode && (
-            <IconChip
-              color="blue"
-              icon={<DiscountIcon color="Icon/Feedback/Information" />}
-            >
-              <Typography variant="Body/Supporting text (caption)/smBold">
-                <p className={styles.bookingCode}>
-                  <strong>{intl.formatMessage({ id: "Booking code" })}</strong>
-                  {bookingCode}
-                </p>
-              </Typography>
-            </IconChip>
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <IconChip
+                color="blue"
+                icon={<DiscountIcon color="Icon/Feedback/Information" />}
+              >
+                {intl.formatMessage(
+                  { id: "<strong>Booking code</strong>: {value}" },
+                  {
+                    value: bookingCode,
+                    strong: (text) => (
+                      <Typography variant="Body/Supporting text (caption)/smBold">
+                        <strong>{text}</strong>
+                      </Typography>
+                    ),
+                  }
+                )}
+              </IconChip>
+            </Typography>
          )}

          <GuestDetails
--- a/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx
@@ -1,5 +1,6 @@
 "use client"

+import { forwardRef } from "react"
 import { Checkbox as AriaCheckbox } from "react-aria-components"
 import { useController, useFormContext } from "react-hook-form"

@@ -11,14 +12,13 @@ import styles from "./checkbox.module.css"

 import type { CheckboxProps } from "@/types/components/checkbox"

-export default function Checkbox({
-  className,
-  name,
-  children,
-  registerOptions,
-  hideError,
-  topAlign = false,
-}: React.PropsWithChildren<CheckboxProps>) {
+const Checkbox = forwardRef<
+  HTMLInputElement,
+  React.PropsWithChildren<CheckboxProps>
+>(function Checkbox(
+  { className, name, children, registerOptions, hideError, topAlign = false },
+  ref
+) {
  const { control } = useFormContext()
  const { field, fieldState } = useController({
    control,
@@ -43,6 +43,7 @@ export default function Checkbox({
            <span
              className={styles.checkbox}
              tabIndex={registerOptions?.disabled ? undefined : 0}
+              ref={ref}
            >
              {isSelected && (
                <MaterialIcon icon="check" color="Icon/Inverted" />
@@ -60,4 +61,6 @@ export default function Checkbox({
      )}
    </AriaCheckbox>
  )
-}
+})
+
+export default Checkbox
--- a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
@@ -1,4 +1,5 @@
 "use client"
+import { forwardRef, type HTMLAttributes, type WheelEvent } from "react"
 import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
@@ -10,24 +11,25 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"

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

-import type { HTMLAttributes, WheelEvent } from "react"
-
 import type { InputProps } from "./input"

-export default function Input({
-  "aria-label": ariaLabel,
-  className = "",
-  disabled = false,
-  helpText = "",
-  label,
-  maxLength,
-  name,
-  placeholder = "",
-  readOnly = false,
-  registerOptions = {},
-  type = "text",
-  hideError,
-}: InputProps) {
+const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  {
+    "aria-label": ariaLabel,
+    className = "",
+    disabled = false,
+    helpText = "",
+    label,
+    maxLength,
+    name,
+    placeholder = "",
+    readOnly = false,
+    registerOptions = {},
+    type = "text",
+    hideError,
+  },
+  ref
+) {
  const intl = useIntl()
  const { control } = useFormContext()
  let numberAttributes: HTMLAttributes<HTMLInputElement> = {}
@@ -58,6 +60,7 @@ export default function Input({
        >
          <AriaInputWithLabel
            {...field}
+            ref={ref}
            aria-labelledby={field.name}
            id={field.name}
            label={label}
@@ -85,4 +88,5 @@ export default function Input({
      )}
    />
  )
-}
+})
+export default Input