From c88b17839298077bdd1b0a435fb650c79e2dbca7 Mon Sep 17 00:00:00 2001 From: Hrishikesh Vaipurkar Date: Wed, 5 Mar 2025 09:47:12 +0100 Subject: [PATCH] feat: SW-963 Optimized code --- apps/scandic-web/app/globals.css | 1 + .../DatePicker/date-picker.module.css | 2 +- .../BookingCode/TabletCodeInput/index.tsx | 24 ------------------- .../BookingCode/booking-code.module.css | 6 ++--- .../FormContent/BookingCode/index.tsx | 24 ++++++++++++------- .../BookingWidget/FormContent/Input/index.tsx | 4 +--- .../SearchList/Dialog/dialog.module.css | 2 +- .../FormContent/Search/index.tsx | 2 +- .../guests-rooms-picker.module.css | 2 +- .../navigationMenuItem.module.css | 2 +- .../FindMyBooking/findMyBooking.module.css | 2 +- .../ReferenceCard/referenceCard.module.css | 2 +- .../languageSwitcher.module.css | 2 +- .../Popover/popover.module.css | 2 +- 14 files changed, 30 insertions(+), 47 deletions(-) delete mode 100644 apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/TabletCodeInput/index.tsx diff --git a/apps/scandic-web/app/globals.css b/apps/scandic-web/app/globals.css index eb0ab6f5d..1ad898ca0 100644 --- a/apps/scandic-web/app/globals.css +++ b/apps/scandic-web/app/globals.css @@ -131,6 +131,7 @@ --default-modal-z-index: 101; --modal-box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08); + --popup-box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1); @supports (interpolate-size: allow-keywords) { interpolate-size: allow-keywords; diff --git a/apps/scandic-web/components/DatePicker/date-picker.module.css b/apps/scandic-web/components/DatePicker/date-picker.module.css index cfd78c747..202b86c62 100644 --- a/apps/scandic-web/components/DatePicker/date-picker.module.css +++ b/apps/scandic-web/components/DatePicker/date-picker.module.css @@ -53,7 +53,7 @@ @media screen and (min-width: 1367px) { .hideWrapper { border-radius: var(--Corner-radius-Large); - box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--popup-box-shadow); padding: var(--Spacing-x2) var(--Spacing-x3); position: absolute; /** diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/TabletCodeInput/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/TabletCodeInput/index.tsx deleted file mode 100644 index 1be9f05d9..000000000 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/TabletCodeInput/index.tsx +++ /dev/null @@ -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() - return ( - updateValue(e.target.value), - })} - autoComplete="off" - /> - ) -} diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css index 191e74275..470729f51 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css +++ b/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); } } diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx index cd42c83cb..49b8a3513 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx +++ b/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() { - {({ close }) => (
- + updateValue(e.target.value), + })} + autoComplete="off" + />
{codeError?.message ? ( diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Input/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Input/index.tsx index 9871d70f0..757976a82 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Input/index.tsx +++ b/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 >(function InputComponent(props, ref) { @@ -15,5 +15,3 @@ const Input = forwardRef< ) }) - -export default Input diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/Dialog/dialog.module.css b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/Dialog/dialog.module.css index e41253da6..5b8ee04b5 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/Dialog/dialog.module.css +++ b/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; } diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx index 97399f7df..74b22b92a 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/GuestsRoomsPicker/guests-rooms-picker.module.css b/apps/scandic-web/components/GuestsRoomsPicker/guests-rooms-picker.module.css index ca70f9f48..10b52b6c0 100644 --- a/apps/scandic-web/components/GuestsRoomsPicker/guests-rooms-picker.module.css +++ b/apps/scandic-web/components/GuestsRoomsPicker/guests-rooms-picker.module.css @@ -177,7 +177,7 @@ background-color: var(--Main-Grey-White); display: grid; border-radius: var(--Corner-radius-Large); - box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--popup-box-shadow); max-width: calc(100vw - 20px); padding: var(--Spacing-x2) var(--Spacing-x3); width: 360px; diff --git a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css index 679850e07..39f60f154 100644 --- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css +++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css @@ -50,7 +50,7 @@ left: 50%; transform: translateX(-50%); border-radius: var(--Corner-radius-Large); - box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--popup-box-shadow); } .dropdown.isExpanded { display: grid; diff --git a/apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css b/apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css index 5f4d37d3a..b4051857a 100644 --- a/apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css +++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css @@ -1,5 +1,5 @@ .form { - box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--popup-box-shadow); } .form > div { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css index 4a6e39b13..0ae9af383 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css @@ -5,7 +5,7 @@ padding: var(--Spacing-x3); border-radius: var(--Corner-radius-Large); background-color: var(--Base-Surface-Primary-light-Normal); - box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--popup-box-shadow); } .referenceRow { diff --git a/apps/scandic-web/components/LanguageSwitcher/languageSwitcher.module.css b/apps/scandic-web/components/LanguageSwitcher/languageSwitcher.module.css index fb1147295..d73926d2c 100644 --- a/apps/scandic-web/components/LanguageSwitcher/languageSwitcher.module.css +++ b/apps/scandic-web/components/LanguageSwitcher/languageSwitcher.module.css @@ -87,7 +87,7 @@ position: absolute; background-color: var(--Base-Surface-Primary-light-Normal); border-radius: var(--Corner-radius-Large); - box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--popup-box-shadow); display: none; min-width: 12.5rem; z-index: var(--header-z-index); diff --git a/apps/scandic-web/components/TempDesignSystem/Popover/popover.module.css b/apps/scandic-web/components/TempDesignSystem/Popover/popover.module.css index 4d421b536..fd0da15d6 100644 --- a/apps/scandic-web/components/TempDesignSystem/Popover/popover.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Popover/popover.module.css @@ -1,7 +1,7 @@ .root { background-color: var(--Base-Surface-Primary-light-Normal); border-radius: var(--Corner-radius-Medium); - box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--popup-box-shadow); padding: var(--Spacing-x2); max-width: calc(360px + var(--Spacing-x2) * 2); overflow-y: auto;