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

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

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