- {child.age !== -1 ? (
+
+
+
+ {child.age !== -1 ? (
+
+ {isValidated && child.age < 0 ? (
+
+
+ {intl.formatMessage({ id: "Child age is required" })}
+
+ ) : null}
)
}
diff --git a/components/GuestsRoomsPicker/ChildSelector/child-selector.module.css b/components/GuestsRoomsPicker/ChildSelector/child-selector.module.css
index 87c1f7767..c7391016a 100644
--- a/components/GuestsRoomsPicker/ChildSelector/child-selector.module.css
+++ b/components/GuestsRoomsPicker/ChildSelector/child-selector.module.css
@@ -1,8 +1,21 @@
.container {
- display: grid;
- grid-template-columns: repeat(4, auto);
+ display: flex;
+ justify-content: space-between;
align-items: center;
}
+.captionBold {
+ font-weight: 600;
+}
+.counterContainer {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 20px;
+}
+.counterBtn {
+ width: 40px;
+ height: 40px;
+}
.childInfoContainer {
display: grid;
@@ -10,6 +23,8 @@
grid-template-columns: 1fr 2fr;
}
-.textCenter {
- text-align: center;
+.error {
+ display: flex;
+ align-items: center;
+ gap: var(--Spacing-x1);
}
diff --git a/components/GuestsRoomsPicker/ChildSelector/index.tsx b/components/GuestsRoomsPicker/ChildSelector/index.tsx
index c1563f79f..c22c6a639 100644
--- a/components/GuestsRoomsPicker/ChildSelector/index.tsx
+++ b/components/GuestsRoomsPicker/ChildSelector/index.tsx
@@ -1,9 +1,13 @@
+"use client"
+
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { guestsRoomsStore } from "@/stores/guests-rooms"
+import { MinusIcon, PlusIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import ChildInfoSelector from "./ChildInfoSelector"
@@ -40,31 +44,50 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
return (
<>
- {childrenLabel}
-
- {children.length}
-
+
+ {childrenLabel}
+
+
+
+
+ {children.length}
+
+
+
{children.map((child, index) => (
-
-
-
+
))}
)
diff --git a/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx b/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx
index 6eb6022b4..a8e694010 100644
--- a/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx
+++ b/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx
@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
import { guestsRoomsStore } from "@/stores/guests-rooms"
import { guestRoomsSchema } from "../Forms/BookingWidget/schema"
+import { CloseLarge } from "../Icons"
import Button from "../TempDesignSystem/Button"
import Divider from "../TempDesignSystem/Divider"
import Subtitle from "../TempDesignSystem/Text/Subtitle"
@@ -30,10 +31,15 @@ export default function GuestsRoomsPicker({
return (
<>
+
{guestsData.map((room, index) => (
-
+
{roomLabel} {index + 1}
@@ -45,7 +51,7 @@ export default function GuestsRoomsPicker({
Remove Room
) : null} */}
-
+
))}
diff --git a/components/GuestsRoomsPicker/guests-rooms-picker.module.css b/components/GuestsRoomsPicker/guests-rooms-picker.module.css
index 7beb166d9..74a8163a0 100644
--- a/components/GuestsRoomsPicker/guests-rooms-picker.module.css
+++ b/components/GuestsRoomsPicker/guests-rooms-picker.module.css
@@ -1,14 +1,13 @@
.container {
overflow: hidden;
position: relative;
- z-index: 10;
&[data-isopen="true"] {
overflow: visible;
}
}
.roomContainer {
display: grid;
- gap: var(--Spacing-x1);
+ gap: var(--Spacing-x2);
}
.roomDetailsContainer {
display: grid;
@@ -17,14 +16,9 @@
}
.hideWrapper {
background-color: var(--Main-Grey-White);
- border-radius: var(--Corner-radius-Medium);
- box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.08);
- padding: var(--Spacing-x-one-and-half);
- position: absolute;
- /** BookingWidget padding + border-width */
- top: calc(100% + var(--Spacing-x2) + 1px);
- width: 360px;
- max-width: 100vw; /* for small screens having view port width of 320px */
+}
+.roomHeading {
+ margin-bottom: var(--Spacing-x1);
}
.btn {
background: none;
@@ -41,5 +35,83 @@
display: grid;
gap: var(--Spacing-x1);
grid-template-columns: auto;
- margin-top: 10px;
+ margin-top: var(--Spacing-x2);
+}
+
+@media screen and (max-width: 1366px) {
+ .hideWrapper {
+ bottom: 0;
+ left: 0;
+ overflow: auto;
+ position: fixed;
+ right: 0;
+ top: 100%;
+ transition: top 300ms ease;
+ z-index: 10002;
+ }
+
+ .container[data-isopen="true"] .hideWrapper {
+ top: 0;
+ }
+
+ .header {
+ background-color: var(--Main-Grey-White);
+ display: grid;
+ padding: var(--Spacing-x3) var(--Spacing-x2);
+ }
+
+ .close {
+ background: none;
+ border: none;
+ cursor: pointer;
+ display: flex;
+ justify-self: flex-end;
+ padding: 0;
+ }
+
+ .roomContainer {
+ padding: 0 var(--Spacing-x2);
+ }
+
+ .footer {
+ background: linear-gradient(
+ 180deg,
+ rgba(255, 255, 255, 0) 7.5%,
+ #ffffff 82.5%
+ );
+ padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ z-index: 10;
+ }
+
+ .footer button {
+ width: 100%;
+ }
+
+ .footer .hideOnMobile {
+ display: none;
+ }
+}
+
+@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);
+ left: calc((var(--Spacing-x1) + var(--Spacing-x2)) * -1);
+ max-width: calc(100vw - 20px);
+ padding: var(--Spacing-x2) var(--Spacing-x3);
+ position: absolute;
+ top: calc(100% + var(--Spacing-x2) + 1px + var(--Spacing-x4));
+ width: 360px;
+ }
+
+ .header {
+ display: none;
+ }
+
+ .footer .hideOnDesktop {
+ display: none;
+ }
}
diff --git a/components/TempDesignSystem/Button/button.module.css b/components/TempDesignSystem/Button/button.module.css
index 1ad432836..ab603eb8a 100644
--- a/components/TempDesignSystem/Button/button.module.css
+++ b/components/TempDesignSystem/Button/button.module.css
@@ -56,6 +56,12 @@ a.text {
outline: none;
}
+.elevated,
+a.elevated {
+ border: none;
+ box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+}
+
/* VARIANTS */
.default,
a.default {
diff --git a/components/TempDesignSystem/Button/variants.ts b/components/TempDesignSystem/Button/variants.ts
index 77abd40e4..f87d399f1 100644
--- a/components/TempDesignSystem/Button/variants.ts
+++ b/components/TempDesignSystem/Button/variants.ts
@@ -10,6 +10,7 @@ export const buttonVariants = cva(styles.btn, {
secondary: styles.secondary,
tertiary: styles.tertiary,
text: styles.text,
+ elevated: styles.elevated,
},
size: {
small: styles.small,
diff --git a/components/TempDesignSystem/Text/Caption/caption.module.css b/components/TempDesignSystem/Text/Caption/caption.module.css
index b5b9192bc..c6fe1302e 100644
--- a/components/TempDesignSystem/Text/Caption/caption.module.css
+++ b/components/TempDesignSystem/Text/Caption/caption.module.css
@@ -10,7 +10,7 @@ p.caption {
.bold {
font-family: var(--typography-Caption-Bold-fontFamily);
font-size: var(--typography-Caption-Bold-fontSize);
- font-weight: var(--typography-Caption-Bold-fontWeight);
+ font-weight: 500; /* var(--typography-Caption-Bold-fontWeight); /* Commented till figma values are fixed to 500 instead of medium */
letter-spacing: var(--typography-Caption-Bold-letterSpacing);
line-height: var(--typography-Caption-Bold-lineHeight);
text-decoration: var(--typography-Caption-Bold-textDecoration);