scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: SW-963 Optimized code

Browse Source
This commit is contained in:
Hrishikesh Vaipurkar
2025-03-05 09:47:12 +01:00
parent 2cd1b6c72c
commit c88b178392
14 changed files with 30 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/scandic-web/app/globals.css
View File

@@ -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;

2
apps/scandic-web/components/DatePicker/date-picker.module.css
View File

@@ -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;
/**

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

@@ -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"
/>
)
}

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

@@ -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);
}
}

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

@@ -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 />

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

@@ -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

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

@@ -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;
}

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

@@ -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"

2
apps/scandic-web/components/GuestsRoomsPicker/guests-rooms-picker.module.css
View File

@@ -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;

2
apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
View File

@@ -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;

2
apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css
View File

@@ -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 {

2
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css
View File

@@ -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 {

2
apps/scandic-web/components/LanguageSwitcher/languageSwitcher.module.css
View File

@@ -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);

2
apps/scandic-web/components/TempDesignSystem/Popover/popover.module.css
View File

@@ -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;