feat: SW-963 Optimized code

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/TabletCodeInput/index.tsx

@@ -1,24 +0,0 @@
-import { useFormContext } from "react-hook-form"
-import { useIntl } from "react-intl"
-
-import Input from "@/components/TempDesignSystem/Form/Input"
-
-import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
-
-export default function TabletCodeInput({
-  updateValue,
-}: {
-  updateValue: (val: string) => void
-}) {
-  const intl = useIntl()
-  const { register } = useFormContext<BookingWidgetSchema>()
-  return (
-    <Input
-      label={intl.formatMessage({ id: "Add code" })}
-      {...register("bookingCode.value", {
-        onChange: (e) => updateValue(e.target.value),
-      })}
-      autoComplete="off"
-    />
-  )
-}

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css

@@ -92,7 +92,7 @@
     bottom: 0;
     display: block;
     left: 0;
-    right: 24px;
+    right: var(--Spacing-x3);
   }
 }
 
@@ -107,9 +107,9 @@
   .bookingCodeRememberVisible {
     padding: var(--Spacing-x2);
     position: absolute;
-    top: calc(100% + 24px);
+    top: calc(100% + var(--Spacing-x3));
     left: calc(0% - var(--Spacing-x-half));
     width: 360px;
-    box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--popup-box-shadow);
   }
 }

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react"
 import { Dialog, DialogTrigger, Popover } from "react-aria-components"
-import { type  FieldError,useFormContext } from "react-hook-form"
+import { type FieldError, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
@@ -8,12 +8,12 @@ import { ErrorCircleIcon, InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import Input from "@/components/TempDesignSystem/Form/Input"
 import Switch from "@/components/TempDesignSystem/Form/Switch"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import Input from "../Input"
-import TabletCodeInput from "./TabletCodeInput"
+import { Input as BookingWidgetInput } from "../Input"
 
 import styles from "./booking-code.module.css"
 
@@ -55,7 +55,9 @@ export default function BookingCode() {
         ref.current &&
         target &&
         !ref.current.contains(target) &&
-        target.getAttribute("value") !== "Remove extra rooms"
+        // This is for mobile layout having "Remove extra rooms" button outside the container
+        target.getAttribute("value") !==
+          intl.formatMessage({ id: "Remove extra rooms" })
       ) {
         setShowRemember(false)
         if (codeError) {
@@ -63,7 +65,7 @@ export default function BookingCode() {
         }
       }
     },
-    [setShowRemember, setValue, ref, codeError]
+    [setShowRemember, setValue, intl, ref, codeError]
   )
 
   function showRememberCheck() {
@@ -120,7 +122,7 @@ export default function BookingCode() {
           </Caption>
           <CodeRulesModal />
         </div>
-        <Input
+        <BookingWidgetInput
           className="input"
           type="search"
           placeholder={addCode}
@@ -260,7 +262,7 @@ export function RemoveExtraRooms({ ...props }: ButtonProps) {
 
   return (
     <Button
-      value="Remove extra rooms"
+      value={intl.formatMessage({ id: "Remove extra rooms" })}
       type="button"
       onClick={removeExtraRooms}
       size="small"
@@ -330,7 +332,13 @@ function TabletBookingCode({
           <Dialog>
             {({ close }) => (
               <div className={styles.popover}>
-                <TabletCodeInput updateValue={updateValue} />
+                <Input
+                  label={intl.formatMessage({ id: "Add code" })}
+                  {...register("bookingCode.value", {
+                    onChange: (e) => updateValue(e.target.value),
+                  })}
+                  autoComplete="off"
+                />
                 <div className={styles.bookingCodeRememberVisible}>
                   {codeError?.message ? (
                     <RemoveExtraRooms />

apps/scandic-web/components/Forms/BookingWidget/FormContent/Input/index.tsx

@@ -5,7 +5,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 
 import styles from "./input.module.css"
 
-const Input = forwardRef<
+export const Input = forwardRef<
   HTMLInputElement,
   InputHTMLAttributes<HTMLInputElement>
 >(function InputComponent(props, ref) {
@@ -15,5 +15,3 @@ const Input = forwardRef<
     </Body>
   )
 })
-
-export default Input

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/Dialog/dialog.module.css

@@ -38,7 +38,7 @@
    */
     top: calc(100% + var(--Spacing-x4));
     z-index: 99;
-    box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--popup-box-shadow);
     max-height: 380px;
     height: auto;
   }

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -15,7 +15,7 @@ import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import isValidJson from "@/utils/isValidJson"
 
-import Input from "../Input"
+import { Input } from "../Input"
 import { init, localStorageKey, reducer, sessionStorageKey } from "./reducer"
 import SearchList from "./SearchList"