Merged in feat/SW-350-booking-widget-ui (pull request #634)

Feat/SW-350 booking widget ui

Approved-by: Simon.Emanuelsson

components/BookingWidget/Client.tsx

@@ -22,6 +22,7 @@ import type { Location } from "@/types/trpc/routers/hotel/locations"
 
 export default function BookingWidgetClient({
   locations,
+  type,
 }: BookingWidgetClientProps) {
   const [isOpen, setIsOpen] = useState(false)
 
@@ -99,8 +100,9 @@ export default function BookingWidgetClient({
         >
           <CloseLarge />
         </button>
-        <Form locations={locations} />
+        <Form locations={locations} type={type} />
       </section>
+      <div className={styles.backdrop} onClick={closeMobileSearch} />
       <MobileToggleButton openMobileSearch={openMobileSearch} />
     </FormProvider>
   )

components/BookingWidget/MobileToggleButton/button.module.css

@@ -6,6 +6,10 @@
   display: grid;
   gap: var(--Spacing-x-one-and-half);
   padding: var(--Spacing-x2);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--Base-Surface-Primary-light-Normal);
 }
 
 .complete {
@@ -13,7 +17,7 @@
 }
 
 .partial {
-  grid-template-columns: min(1fr, 150px) min-content min(1fr, 150px) 1fr;
+  grid-template-columns: minmax(auto, 150px) min-content minmax(auto, 150px) auto;
 }
 
 .icon {

components/BookingWidget/bookingWidget.module.css

@@ -1,16 +1,17 @@
-@media screen and (max-width: 1366px) {
+@media screen and (max-width: 767px) {
   .container {
     background-color: var(--UI-Input-Controls-Surface-Normal);
     bottom: -100%;
     display: grid;
     gap: var(--Spacing-x3);
     grid-template-rows: 36px 1fr;
-    height: 100dvh;
+    height: calc(100dvh - 20px);
     padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x7);
     position: fixed;
     transition: bottom 300ms ease;
     width: 100%;
     z-index: 10000;
+    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
   }
 
   .container[data-open="true"] {
@@ -23,13 +24,26 @@
     cursor: pointer;
     justify-self: flex-end;
   }
+
+  .container[data-open="true"] + .backdrop {
+    background-color: rgba(0, 0, 0, 0.4);
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+  }
 }
 
-@media screen and (min-width: 1367px) {
+@media screen and (min-width: 768px) {
   .container {
-    border-bottom: 1px solid var(--Base-Border-Subtle);
-    border-top: 1px solid var(--Base-Border-Subtle);
     display: block;
+    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
+    position: sticky;
+    top: 0;
+    z-index: 10000;
+    background-color: var(--Base-Surface-Primary-light-Normal);
   }
 
   .close {

components/BookingWidget/index.tsx

@@ -2,16 +2,18 @@ import { getLocations } from "@/lib/trpc/memoizedRequests"
 
 import BookingWidgetClient from "./Client"
 
+import type { BookingWidgetProps } from "@/types/components/bookingWidget"
+
 export function preload() {
   void getLocations()
 }
 
-export default async function BookingWidget() {
+export default async function BookingWidget({ type }: BookingWidgetProps) {
   const locations = await getLocations()
 
   if (!locations || "error" in locations) {
     return null
   }
 
-  return <BookingWidgetClient locations={locations.data} />
+  return <BookingWidgetClient locations={locations.data} type={type} />
 }

components/DatePicker/Screen/Desktop.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 

components/DatePicker/date-picker.module.css

@@ -41,7 +41,8 @@
   }
 
   .container[data-isopen="true"] .hideWrapper {
-    top: 0;
+    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
+    top: 20px;
   }
 }
 

components/Forms/BookingWidget/FormContent/Input/index.tsx

@@ -0,0 +1,18 @@
+import React, { forwardRef, InputHTMLAttributes } from "react"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./input.module.css"
+
+const Input = forwardRef<
+  HTMLInputElement,
+  InputHTMLAttributes<HTMLInputElement>
+>(function InputComponent(props, ref) {
+  return (
+    <Body asChild>
+      <input {...props} ref={ref} className={styles.input} />
+    </Body>
+  )
+})
+
+export default Input

components/Forms/BookingWidget/FormContent/Input/input.module.css

@@ -0,0 +1,22 @@
+.input {
+  background-color: transparent;
+  border: none;
+  height: 24px;
+  outline: none;
+  position: relative;
+  width: 100%;
+  z-index: 2;
+}
+
+.input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  background-image: url("/_static/icons/close.svg");
+  height: 20px;
+  width: 20px;
+}
+
+.input:disabled,
+.input:disabled::placeholder {
+  color: var(--Base-Text-Disabled);
+}

components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -13,6 +13,7 @@ import { useIntl } from "react-intl"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
+import Input from "../Input"
 import { init, localStorageKey, reducer, sessionStorageKey } from "./reducer"
 import SearchList from "./SearchList"
 
@@ -142,29 +143,26 @@ export default function Search({ locations }: SearchProps) {
             </Caption>
           </label>
           <div {...getRootProps({}, { suppressRefError: true })}>
-            <Body asChild>
-              <input
-                {...getInputProps({
-                  className: styles.input,
-                  id: name,
-                  onFocus(evt) {
-                    handleOnFocus(evt)
-                    openMenu()
+            <Input
+              {...getInputProps({
+                id: name,
+                onFocus(evt) {
+                  handleOnFocus(evt)
+                  openMenu()
+                },
+                placeholder: intl.formatMessage({
+                  id: "Destinations & hotels",
+                }),
+                ...register(name, {
+                  onBlur: function () {
+                    handleOnBlur()
+                    closeMenu()
                   },
-                  placeholder: intl.formatMessage({
-                    id: "Destinations & hotels",
-                  }),
-                  ...register(name, {
-                    onBlur: function () {
-                      handleOnBlur()
-                      closeMenu()
-                    },
-                    onChange: handleOnChange,
-                  }),
-                  type: "search",
-                })}
-              />
-            </Body>
+                  onChange: handleOnChange,
+                }),
+                type: "search",
+              })}
+            />
           </div>
           <SearchList
             getItemProps={getItemProps}

components/Forms/BookingWidget/FormContent/Search/search.module.css

@@ -7,42 +7,24 @@
 }
 
 .container:hover,
-.container:has(.input:active, .input:focus, .input:focus-within) {
+.container:has(input:active, input:focus, input:focus-within) {
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
 
-.container:has(.input:active, .input:focus, .input:focus-within) {
+.container:has(input:active, input:focus, input:focus-within) {
   border-color: 1px solid var(--UI-Input-Controls-Border-Focus);
 }
 
 .label:has(
-    ~ .inputContainer .input:active,
-    ~ .inputContainer .input:focus,
-    ~ .inputContainer .input:focus-within
+    ~ .inputContainer input:active,
+    ~ .inputContainer input:focus,
+    ~ .inputContainer input:focus-within
   )
   p {
   color: var(--UI-Text-Active);
 }
 
-.input {
-  background-color: transparent;
-  border: none;
-  height: 24px;
-  outline: none;
-  position: relative;
-  width: 100%;
-  z-index: 2;
-}
-
-.input::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-  appearance: none;
-  background-image: url("/_static/icons/close.svg");
-  height: 20px;
-  width: 20px;
-}
-
-.container:hover:has(.input:not(:active, :focus, :focus-within))
-  .input::-webkit-search-cancel-button {
+.container:hover:has(input:not(:active, :focus, :focus-within))
+  input::-webkit-search-cancel-button {
   display: none;
 }

components/Forms/BookingWidget/FormContent/Voucher/index.tsx

@@ -0,0 +1,71 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
+
+import Input from "../Input"
+
+import styles from "./voucher.module.css"
+
+export default function Voucher() {
+  const intl = useIntl()
+
+  const vouchers = intl.formatMessage({ id: "Code / Voucher" })
+  const useVouchers = intl.formatMessage({ id: "Use code/voucher" })
+  const addVouchers = intl.formatMessage({ id: "Add code" })
+  const bonus = intl.formatMessage({ id: "Use bonus cheque" })
+  const reward = intl.formatMessage({ id: "Book reward night" })
+  const disabledBookingOptionsHeader = intl.formatMessage({
+    id: "Disabled booking options header",
+  })
+  const disabledBookingOptionsText = intl.formatMessage({
+    id: "Disabled booking options text",
+  })
+
+  return (
+    <div className={styles.optionsContainer}>
+      <Tooltip
+        heading={disabledBookingOptionsHeader}
+        text={disabledBookingOptionsText}
+        position="bottom"
+        arrow="left"
+      >
+        <div className={styles.vouchers}>
+          <label>
+            <Caption color="disabled" textTransform="bold">
+              {vouchers}
+            </Caption>
+            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
+          </label>
+          <Input type="text" placeholder={addVouchers} disabled />
+        </div>
+      </Tooltip>
+      <Tooltip
+        heading={disabledBookingOptionsHeader}
+        text={disabledBookingOptionsText}
+        position="bottom"
+        arrow="left"
+      >
+        <div className={styles.options}>
+          <label className={`${styles.option} ${styles.checkboxVoucher}`}>
+            <input type="checkbox" disabled className={styles.checkbox} />
+            <Caption color="disabled">{useVouchers}</Caption>
+            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
+          </label>
+          <label className={styles.option}>
+            <input type="checkbox" disabled className={styles.checkbox} />
+            <Caption color="disabled">{bonus}</Caption>
+            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
+          </label>
+          <label className={styles.option}>
+            <input type="checkbox" disabled className={styles.checkbox} />
+            <Caption color="disabled">{reward}</Caption>
+            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
+          </label>
+        </div>
+      </Tooltip>
+    </div>
+  )
+}

components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css

@@ -0,0 +1,79 @@
+.options {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+
+.option {
+  display: flex;
+  gap: var(--Spacing-x2);
+  margin-top: var(--Spacing-x2);
+  align-items: center;
+}
+.vouchers {
+  width: 100%;
+  display: block;
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  border-radius: var(--Corner-radius-Small);
+}
+
+.optionsContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.checkbox {
+  width: 24px;
+  height: 24px;
+}
+
+.checkboxVoucher {
+  display: none;
+}
+
+@media screen and (min-width: 768px) {
+  .vouchers {
+    display: none;
+  }
+  .options {
+    flex-direction: row;
+    gap: var(--Spacing-x4);
+  }
+  .option {
+    margin-top: 0;
+    gap: var(--Spacing-x-one-and-half);
+  }
+  .checkboxVoucher {
+    display: flex;
+  }
+}
+
+@media screen and (max-width: 1366px) {
+  .vouchers {
+    background-color: var(--Base-Background-Primary-Normal);
+    border-radius: var(--Corner-radius-Medium);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .vouchers {
+    display: block;
+    max-width: 200px;
+  }
+  .options {
+    flex-direction: column;
+    max-width: 190px;
+    gap: 0;
+  }
+  .vouchers:hover,
+  .option:hover {
+    cursor: not-allowed;
+  }
+  .optionsContainer {
+    flex-direction: row;
+  }
+  .checkboxVoucher {
+    display: none;
+  }
+}

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -1,16 +1,29 @@
-.options {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
+.infoIcon {
+  stroke: var(--Base-Text-Disabled);
 }
 
-.option {
+.vouchersHeader {
   display: flex;
+  gap: var(--Spacing-x-one-and-half);
 }
 
-@media screen and (max-width: 1366px) {
-  .input {
+.checkbox {
+  width: 24px;
+  height: 24px;
+}
+.icon,
+.voucherRow {
+  display: none;
+}
+
+@media screen and (max-width: 767px) {
+  .voucherContainer {
+    padding: var(--Spacing-x2) 0 var(--Spacing-x4);
+  }
+}
+
+@media screen and (max-width: 1367px) {
+  .inputContainer {
     display: grid;
     gap: var(--Spacing-x2);
   }
@@ -29,52 +42,85 @@
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   }
 
-  .options {
-    gap: var(--Spacing-x2);
-    margin-top: var(--Spacing-x2);
-  }
-
-  .option {
-    gap: var(--Spacing-x2);
+  .button {
+    align-self: flex-end;
+    justify-content: center;
+    width: 100%;
   }
 }
 
-@media screen and (min-width: 1367px) {
+@media screen and (min-width: 768px) {
   .input {
     display: flex;
+    align-items: center;
+  }
+  .inputContainer {
+    display: flex;
+    flex: 2;
     gap: var(--Spacing-x2);
   }
+  .voucherContainer {
+    flex: 1;
+  }
 
   .rooms,
-  .vouchers,
   .when,
   .where {
-    border-right: 1px solid var(--Base-Surface-Subtle-Normal);
     width: 100%;
   }
 
-  .input input[type="text"] {
+  .inputContainer input[type="text"] {
     border: none;
     height: 24px;
   }
 
   .rooms,
   .when {
-    max-width: 240px;
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+    border-radius: var(--Corner-radius-Small);
   }
-
-  .vouchers {
-    max-width: 200px;
-    padding: var(--Spacing-x1) 0;
+  .when:hover,
+  .rooms:hover,
+  .rooms:has(.input:active, .input:focus, .input:focus-within) {
+    background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }
 
   .where {
-    max-width: 280px;
     position: relative;
   }
 
-  .options {
-    max-width: 158px;
+  .button {
+    justify-content: center;
+    width: 118px;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1366px) {
+  .inputContainer {
+    padding: var(--Spacing-x2) var(--Spacing-x2);
+  }
+  .buttonContainer {
+    padding-right: var(--Spacing-x2);
+  }
+  .input .buttonContainer .button {
+    padding: var(--Spacing-x1);
+    width: 48px;
+    height: 48px;
+  }
+  .buttonText {
+    display: none;
+  }
+  .icon {
+    display: flex;
+  }
+
+  .voucherRow {
+    display: flex;
+    background: var(--Base-Surface-Primary-light-Hover);
+    border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+    padding: var(--Spacing-x2);
+  }
+  .voucherContainer {
+    display: none;
   }
 }

components/Forms/BookingWidget/FormContent/index.tsx

@@ -5,9 +5,14 @@ import { useIntl } from "react-intl"
 import { dt } from "@/lib/dt"
 
 import DatePicker from "@/components/DatePicker"
+import { SearchIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
+import Input from "./Input"
 import Search from "./Search"
+import Voucher from "./Voucher"
 
 import styles from "./formContent.module.css"
 
@@ -15,53 +20,69 @@ import type { BookingWidgetFormContentProps } from "@/types/components/form/book
 
 export default function FormContent({
   locations,
+  formId,
+  formState,
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
   const selectedDate = useWatch({ name: "date" })
 
   const rooms = intl.formatMessage({ id: "Guests & Rooms" })
-  const vouchers = intl.formatMessage({ id: "Code / Voucher" })
-  const bonus = intl.formatMessage({ id: "Use bonus cheque" })
-  const reward = intl.formatMessage({ id: "Book reward night" })
 
   const nights = dt(selectedDate.to).diff(dt(selectedDate.from), "days")
 
   return (
-    <div className={styles.input}>
-      <div className={styles.where}>
-        <Search locations={locations} />
+    <>
+      <div className={styles.input}>
+        <div className={styles.inputContainer}>
+          <div className={styles.where}>
+            <Search locations={locations} />
+          </div>
+          <div className={styles.when}>
+            <Caption color="red" textTransform="bold">
+              {intl.formatMessage(
+                { id: "booking.nights" },
+                { totalNights: nights }
+              )}
+            </Caption>
+            <DatePicker />
+          </div>
+          <div className={styles.rooms}>
+            <label>
+              <Caption color="red" textTransform="bold">
+                {rooms}
+              </Caption>
+            </label>
+            <Input type="text" placeholder={rooms} />
+          </div>
+        </div>
+        <div className={styles.voucherContainer}>
+          <Voucher />
+        </div>
+        <div className={styles.buttonContainer}>
+          <Button
+            className={styles.button}
+            disabled={!formState.isValid}
+            form={formId}
+            intent="primary"
+            theme="base"
+            type="submit"
+          >
+            <Caption
+              color="white"
+              textTransform="bold"
+              className={styles.buttonText}
+            >
+              {intl.formatMessage({ id: "Search" })}
+            </Caption>
+            <div className={styles.icon}>
+              <SearchIcon color="white" width={28} height={28} />
+            </div>
+          </Button>
+        </div>
       </div>
-      <div className={styles.when}>
-        <Caption color="red" textTransform="bold">
-          {intl.formatMessage(
-            { id: "booking.nights" },
-            { totalNights: nights }
-          )}
-        </Caption>
-        <DatePicker />
+      <div className={styles.voucherRow}>
+        <Voucher />
       </div>
-      <div className={styles.rooms}>
-        <Caption color="red" textTransform="bold">
-          {rooms}
-        </Caption>
-        <input type="text" placeholder={rooms} />
-      </div>
-      <div className={styles.vouchers}>
-        <Caption color="uiTextMediumContrast" textTransform="bold">
-          {vouchers}
-        </Caption>
-        <input type="text" placeholder={vouchers} />
-      </div>
-      <div className={styles.options}>
-        <label className={styles.option}>
-          <input type="checkbox" />
-          <Caption color="textMediumContrast">{bonus}</Caption>
-        </label>
-        <label className={styles.option}>
-          <input type="checkbox" />
-          <Caption color="textMediumContrast">{reward}</Caption>
-        </label>
-      </div>
-    </div>
+    </>
   )
 }

components/Forms/BookingWidget/form.module.css

@@ -8,29 +8,31 @@
 
 .form {
   display: grid;
-  gap: var(--Spacing-x2);
   width: 100%;
 }
 
-@media screen and (max-width: 1366px) {
+@media screen and (max-width: 767px) {
   .form {
     align-self: flex-start;
   }
-
-  .button {
-    align-self: flex-end;
-    justify-content: center;
-    width: 100%;
-  }
 }
 
-@media screen and (min-width: 1367px) {
+@media screen and (min-width: 768px) {
   .section {
     display: flex;
   }
 
-  .button {
-    justify-content: center;
-    width: 118px;
+  .default {
+    border-radius: var(--Corner-radius-Medium);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .default {
+    padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
+      var(--Spacing-x-one-and-half) var(--Spacing-x1);
+  }
+  .full {
+    padding: var(--Spacing-x1) var(--Spacing-x5);
   }
 }

components/Forms/BookingWidget/index.tsx

@@ -1,12 +1,9 @@
 "use client"
 import { useRouter } from "next/navigation"
 import { useFormContext } from "react-hook-form"
-import { useIntl } from "react-intl"
-
-import Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import FormContent from "./FormContent"
+import { bookingWidgetVariants } from "./variants"
 
 import styles from "./form.module.css"
 
@@ -15,10 +12,13 @@ import type { BookingWidgetFormProps } from "@/types/components/form/bookingwidg
 
 const formId = "booking-widget"
 
-export default function Form({ locations }: BookingWidgetFormProps) {
-  const intl = useIntl()
+export default function Form({ locations, type }: BookingWidgetFormProps) {
   const router = useRouter()
 
+  const classNames = bookingWidgetVariants({
+    type,
+  })
+
   const { formState, handleSubmit, register } =
     useFormContext<BookingWidgetSchema>()
 
@@ -31,28 +31,19 @@ export default function Form({ locations }: BookingWidgetFormProps) {
   }
 
   return (
-    <section className={styles.section}>
+    <section className={classNames}>
       <form
         onSubmit={handleSubmit(onSubmit)}
         className={styles.form}
         id={formId}
       >
         <input {...register("location")} type="hidden" />
-        <FormContent locations={locations} />
+        <FormContent
+          locations={locations}
+          formId={formId}
+          formState={formState}
+        />
       </form>
-      <Button
-        className={styles.button}
-        disabled={!formState.isValid}
-        form={formId}
-        intent="primary"
-        size="small"
-        theme="base"
-        type="submit"
-      >
-        <Caption color="white" textTransform="bold">
-          {intl.formatMessage({ id: "Search" })}
-        </Caption>
-      </Button>
     </section>
   )
 }

components/Forms/BookingWidget/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./form.module.css"
+
+export const bookingWidgetVariants = cva(styles.section, {
+  variants: {
+    type: {
+      default: styles.default,
+      full: styles.full,
+    },
+  },
+  defaultVariants: {
+    type: "full",
+  },
+})

components/TempDesignSystem/TeaserCard/index.tsx

@@ -1,5 +1,3 @@
-import React from "react"
-
 import { ChevronRightIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"

components/TempDesignSystem/Text/Caption/caption.module.css

@@ -75,10 +75,14 @@ p.caption {
   color: var(--UI-Text-High-contrast);
 }
 
+.disabled {
+  color: var(--Base-Text-Disabled);
+}
+
 .center {
   text-align: center;
 }
 
 .left {
   text-align: left;
-}
+}

components/TempDesignSystem/Text/Caption/variants.ts

@@ -15,6 +15,7 @@ const config = {
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextActive: styles.uiTextActive,
       uiTextMediumContrast: styles.uiTextMediumContrast,
+      disabled: styles.disabled,
     },
     textTransform: {
       bold: styles.bold,

components/TempDesignSystem/Tooltip/index.tsx

@@ -0,0 +1,32 @@
+import { PropsWithChildren } from "react"
+
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import { tooltipVariants } from "./variants"
+
+import styles from "./tooltip.module.css"
+
+import { TooltipPosition, TooltipProps } from "@/types/components/tooltip"
+
+export function Tooltip<P extends TooltipPosition>({
+  heading,
+  text,
+  position,
+  arrow,
+  children,
+}: PropsWithChildren<TooltipProps<P>>) {
+  const className = tooltipVariants({ position, arrow })
+  return (
+    <div className={styles.tooltipContainer} role="tooltip" aria-label={text}>
+      <div className={className}>
+        {heading && (
+          <Caption textTransform="bold" color="white">
+            {heading}
+          </Caption>
+        )}
+        {text && <Caption color="white">{text}</Caption>}
+      </div>
+      {children}
+    </div>
+  )
+}

components/TempDesignSystem/Tooltip/tooltip.module.css

@@ -0,0 +1,137 @@
+.tooltipContainer {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip {
+  padding: var(--Spacing-x1);
+  background-color: var(--UI-Text-Active);
+  border: 0.5px solid var(--UI-Border-Active);
+  border-radius: var(--Corner-radius-Medium);
+  color: var(--Base-Text-Inverted);
+  position: absolute;
+  visibility: hidden;
+  z-index: 1000;
+  opacity: 0;
+  transition: opacity 0.3s;
+  max-width: 200px;
+}
+
+.tooltipContainer:hover .tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+.left {
+  right: 100%;
+}
+
+.right {
+  left: 100%;
+}
+
+.top {
+  bottom: 100%;
+}
+
+.bottom {
+  top: 100%;
+}
+
+.tooltip::before {
+  content: "";
+  position: absolute;
+  border-style: solid;
+}
+
+.bottom.arrowLeft::before {
+  top: -8px;
+  left: 16px;
+  border-width: 0 7px 8px 7px;
+  border-color: transparent transparent var(--UI-Text-Active) transparent;
+}
+
+.bottom.arrowCenter::before {
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 7px 8px 7px;
+  border-color: transparent transparent var(--UI-Text-Active) transparent;
+}
+
+.bottom.arrowRight::before {
+  top: -8px;
+  right: 16px;
+  border-width: 0 7px 8px 7px;
+  border-color: transparent transparent var(--UI-Text-Active) transparent;
+}
+
+.top.arrowLeft::before {
+  bottom: -8px;
+  left: 16px;
+  border-width: 8px 7px 0 7px;
+  border-color: var(--UI-Text-Active) transparent transparent transparent;
+}
+
+.top.arrowCenter::before {
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 8px 7px 0 7px;
+  border-color: var(--UI-Text-Active) transparent transparent transparent;
+}
+
+.top.arrowRight::before {
+  bottom: -8px;
+  right: 16px;
+  border-width: 8px 7px 0 7px;
+  border-color: var(--UI-Text-Active) transparent transparent transparent;
+}
+
+.left.arrowTop::before {
+  top: 16px;
+  right: -8px;
+  transform: translateY(-50%);
+  border-width: 7px 0 7px 8px;
+  border-color: transparent transparent transparent var(--UI-Text-Active);
+}
+
+.left.arrowCenter::before {
+  top: 50%;
+  right: -8px;
+  transform: translateY(-50%);
+  border-width: 7px 0 7px 8px;
+  border-color: transparent transparent transparent var(--UI-Text-Active);
+}
+
+.left.arrowBottom::before {
+  bottom: 16px;
+  right: -8px;
+  transform: translateY(50%);
+  border-width: 7px 0 7px 8px;
+  border-color: transparent transparent transparent var(--UI-Text-Active);
+}
+
+.right.arrowTop::before {
+  top: 16px;
+  left: -8px;
+  transform: translateY(-50%);
+  border-width: 7px 8px 7px 0;
+  border-color: transparent var(--UI-Text-Active) transparent transparent;
+}
+
+.right.arrowCenter::before {
+  top: 50%;
+  left: -8px;
+  transform: translateY(-50%);
+  border-width: 7px 8px 7px 0;
+  border-color: transparent var(--UI-Text-Active) transparent transparent;
+}
+
+.right.arrowBottom::before {
+  bottom: 16px;
+  left: -8px;
+  transform: translateY(50%);
+  border-width: 7px 8px 7px 0;
+  border-color: transparent var(--UI-Text-Active) transparent transparent;
+}

components/TempDesignSystem/Tooltip/variants.ts

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./tooltip.module.css"
+
+export const tooltipVariants = cva(styles.tooltip, {
+  variants: {
+    position: {
+      left: styles.left,
+      right: styles.right,
+      top: styles.top,
+      bottom: styles.bottom,
+    },
+    arrow: {
+      left: styles.arrowLeft,
+      right: styles.arrowRight,
+      center: styles.arrowCenter,
+      top: styles.arrowTop,
+      bottom: styles.arrowBottom,
+    },
+  },
+})

i18n/dictionaries/da.json

@@ -19,11 +19,12 @@
   "Any changes you've made will be lost.": "Alle ændringer, du har foretaget, går tabt.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på, at du vil fjerne kortet, der slutter me {lastFourDigits} fra din medlemsprofil?",
   "Arrival date": "Ankomstdato",
+  "as of today": "pr. dags dato",
   "As our": "Som vores {level}",
   "As our Close Friend": "Som vores nære ven",
   "At latest": "Senest",
   "At the hotel": "På hotellet",
-  "Attractions": "Attraktioner",
+  "Attraction": "Attraktion",
   "Back to scandichotels.com": "Tilbage til scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Seng type",
@@ -70,6 +71,8 @@
   "Description": "Beskrivelse",
   "Destination": "Destination",
   "Destinations & hotels": "Destinationer & hoteller",
+  "Disabled booking options header": "Vi beklager",
+  "Disabled booking options text": "Koder, checks og bonusnætter er endnu ikke tilgængelige på den nye hjemmeside.",
   "Discard changes": "Kassér ændringer",
   "Discard unsaved changes?": "Slette ændringer, der ikke er gemt?",
   "Distance to city centre": "{number}km til centrum",
@@ -117,6 +120,7 @@
   "Join Scandic Friends": "Tilmeld dig Scandic Friends",
   "Join at no cost": "Tilmeld dig uden omkostninger",
   "King bed": "Kingsize-seng",
+  "km to city center": "km til byens centrum",
   "Language": "Sprog",
   "Lastname": "Efternavn",
   "Latest searches": "Seneste søgninger",
@@ -258,6 +262,7 @@
   "Type of bed": "Sengtype",
   "Type of room": "Værelsestype",
   "Use bonus cheque": "Brug Bonus Cheque",
+  "Use code/voucher": "Brug kode/voucher",
   "User information": "Brugeroplysninger",
   "View as list": "Vis som liste",
   "View as map": "Vis som kort",

i18n/dictionaries/de.json

@@ -23,7 +23,7 @@
   "As our Close Friend": "Als unser enger Freund",
   "At latest": "Spätestens",
   "At the hotel": "Im Hotel",
-  "Attractions": "Attraktionen",
+  "Attraction": "Attraktion",
   "Back to scandichotels.com": "Zurück zu scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Bettentyp",
@@ -70,6 +70,8 @@
   "Description": "Beschreibung",
   "Destination": "Bestimmungsort",
   "Destinations & hotels": "Reiseziele & Hotels",
+  "Disabled booking options header": "Es tut uns leid",
+  "Disabled booking options text": "Codes, Schecks und Bonusnächte sind auf der neuen Website noch nicht verfügbar.",
   "Discard changes": "Änderungen verwerfen",
   "Discard unsaved changes?": "Nicht gespeicherte Änderungen verwerfen?",
   "Distance to city centre": "{number}km zum Stadtzentrum",
@@ -258,6 +260,7 @@
   "Type of bed": "Bettentyp",
   "Type of room": "Zimmerart",
   "Use bonus cheque": "Bonusscheck nutzen",
+  "Use code/voucher": "Code/Gutschein nutzen",
   "User information": "Nutzerinformation",
   "View as list": "Als Liste anzeigen",
   "View as map": "Als Karte anzeigen",

i18n/dictionaries/en.json

@@ -70,6 +70,8 @@
   "Description": "Description",
   "Destination": "Destination",
   "Destinations & hotels": "Destinations & hotels",
+  "Disabled booking options header": "We're sorry",
+  "Disabled booking options text": "Codes, cheques and reward nights aren't available on the new website yet.",
   "Discard changes": "Discard changes",
   "Discard unsaved changes?": "Discard unsaved changes?",
   "Distance to city centre": "{number}km to city centre",
@@ -117,6 +119,7 @@
   "Join Scandic Friends": "Join Scandic Friends",
   "Join at no cost": "Join at no cost",
   "King bed": "King bed",
+  "km to city center": "km to city center",
   "Language": "Language",
   "Lastname": "Lastname",
   "Latest searches": "Latest searches",
@@ -258,6 +261,7 @@
   "Type of bed": "Type of bed",
   "Type of room": "Type of room",
   "Use bonus cheque": "Use bonus cheque",
+  "Use code/voucher": "Use code/voucher",
   "User information": "User information",
   "View as list": "View as list",
   "View as map": "View as map",

i18n/dictionaries/fi.json

@@ -70,6 +70,8 @@
   "Description": "Kuvaus",
   "Destination": "Kohde",
   "Destinations & hotels": "Kohteet ja hotellit",
+  "Disabled booking options header": "Olemme pahoillamme",
+  "Disabled booking options text": "Koodit, sekit ja palkintoillat eivät ole vielä saatavilla uudella verkkosivustolla.",
   "Discard changes": "Hylkää muutokset",
   "Discard unsaved changes?": "Hylkäätkö tallentamattomat muutokset?",
   "Distance to city centre": "{number}km Etäisyys kaupunkiin",
@@ -117,6 +119,7 @@
   "Join Scandic Friends": "Liity jäseneksi",
   "Join at no cost": "Liity maksutta",
   "King bed": "King-vuode",
+  "km to city center": "km keskustaan",
   "Language": "Kieli",
   "Lastname": "Sukunimi",
   "Latest searches": "Viimeisimmät haut",
@@ -259,6 +262,7 @@
   "Type of bed": "Vuodetyyppi",
   "Type of room": "Huonetyyppi",
   "Use bonus cheque": "Käytä bonussekkiä",
+  "Use code/voucher": "Käytä koodia/voucheria",
   "User information": "Käyttäjän tiedot",
   "View as list": "Näytä listana",
   "View as map": "Näytä kartalla",

i18n/dictionaries/no.json

@@ -19,6 +19,7 @@
   "Any changes you've made will be lost.": "Eventuelle endringer du har gjort, går tapt.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på at du vil fjerne kortet som slutter på {lastFourDigits} fra medlemsprofilen din?",
   "Arrival date": "Ankomstdato",
+  "as of today": "per i dag",
   "As our": "Som vår {level}",
   "As our Close Friend": "Som vår nære venn",
   "At latest": "Senest",
@@ -69,6 +70,8 @@
   "Description": "Beskrivelse",
   "Destination": "Destinasjon",
   "Destinations & hotels": "Destinasjoner og hoteller",
+  "Disabled booking options header": "Vi beklager",
+  "Disabled booking options text": "Koder, checks og belønningsnætter er enda ikke tilgjengelige på den nye nettsiden.",
   "Discard changes": "Forkaste endringer",
   "Discard unsaved changes?": "Forkaste endringer som ikke er lagret?",
   "Distance to city centre": "{number}km til sentrum",
@@ -116,6 +119,7 @@
   "Join Scandic Friends": "Bli med i Scandic Friends",
   "Join at no cost": "Bli med uten kostnad",
   "King bed": "King-size-seng",
+  "km to city center": "km til sentrum",
   "Language": "Språk",
   "Lastname": "Etternavn",
   "Latest searches": "Siste søk",
@@ -257,6 +261,7 @@
   "Type of bed": "Sengtype",
   "Type of room": "Romtype",
   "Use bonus cheque": "Bruk bonussjekk",
+  "Use code/voucher": "Bruk kode/voucher",
   "User information": "Brukerinformasjon",
   "View as list": "Vis som liste",
   "View as map": "Vis som kart",

i18n/dictionaries/sv.json

@@ -19,6 +19,7 @@
   "Any changes you've made will be lost.": "Alla ändringar du har gjort kommer att gå förlorade.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Är du säker på att du vill ta bort kortet som slutar med {lastFourDigits} från din medlemsprofil?",
   "Arrival date": "Ankomstdatum",
+  "as of today": "per idag",
   "As our": "Som vår {level}",
   "As our Close Friend": "Som vår nära vän",
   "At latest": "Senast",
@@ -70,6 +71,8 @@
   "Description": "Beskrivning",
   "Destination": "Destination",
   "Destinations & hotels": "Destinationer & hotell",
+  "Disabled booking options header": "Vi beklagar",
+  "Disabled booking options text": "Koder, bonuscheckar och belöningsnätter är inte tillgängliga på den nya webbplatsen än.",
   "Discard changes": "Ignorera ändringar",
   "Discard unsaved changes?": "Vill du ignorera ändringar som inte har sparats?",
   "Distance to city centre": "{number}km till centrum",
@@ -118,6 +121,7 @@
   "Join Scandic Friends": "Gå med i Scandic Friends",
   "Join at no cost": "Gå med utan kostnad",
   "King bed": "King size-säng",
+  "km to city center": "km till stadens centrum",
   "Language": "Språk",
   "Lastname": "Efternamn",
   "Latest searches": "Senaste sökningarna",
@@ -258,7 +262,9 @@
   "Tripadvisor reviews": "{rating} ({count} recensioner på Tripadvisor)",
   "Type of bed": "Sängtyp",
   "Type of room": "Rumstyp",
-  "Use bonus cheque": "Use bonus cheque",
+  "uppercase letter": "stor bokstav",
+  "Use bonus cheque": "Använd bonuscheck",
+  "Use code/voucher": "Använd kod/voucher",
   "User information": "Användarinformation",
   "View as list": "Visa som lista",
   "View as map": "Visa som karta",

types/components/bookingWidget/index.ts

@@ -1,13 +1,24 @@
+import { VariantProps } from "class-variance-authority"
 import { z } from "zod"
 
 import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
+import { bookingWidgetVariants } from "@/components/Forms/BookingWidget/variants"
 
 import type { Locations } from "@/types/trpc/routers/hotel/locations"
 
 export type BookingWidgetSchema = z.output<typeof bookingWidgetSchema>
 
+export type BookingWidgetType = VariantProps<
+  typeof bookingWidgetVariants
+>["type"]
+
+export interface BookingWidgetProps {
+  type?: BookingWidgetType
+}
+
 export interface BookingWidgetClientProps {
   locations: Locations
+  type?: BookingWidgetType
 }
 
 export interface BookingWidgetToggleButtonProps {

types/components/form/bookingwidget.ts

@@ -1,11 +1,20 @@
+import { FormState, UseFormReturn } from "react-hook-form"
+
+import type {
+  BookingWidgetSchema,
+  BookingWidgetType,
+} from "@/types/components/bookingWidget"
 import type { Location, Locations } from "@/types/trpc/routers/hotel/locations"
 
 export interface BookingWidgetFormProps {
   locations: Locations
+  type?: BookingWidgetType
 }
 
 export interface BookingWidgetFormContentProps {
   locations: Locations
+  formId: string
+  formState: FormState<BookingWidgetSchema>
 }
 
 export enum ActionType {

types/components/search.ts

@@ -39,14 +39,14 @@ export interface ListItemProps
 
 export interface DialogProps
   extends React.PropsWithChildren,
-  VariantProps<typeof dialogVariants>,
-  Pick<SearchListProps, "getMenuProps"> {
+    VariantProps<typeof dialogVariants>,
+    Pick<SearchListProps, "getMenuProps"> {
   className?: string
 }
 
 export interface ErrorDialogProps
   extends React.PropsWithChildren,
-  Pick<SearchListProps, "getMenuProps"> { }
+    Pick<SearchListProps, "getMenuProps"> {}
 
 export interface ClearSearchButtonProps
   extends Pick<

types/components/tooltip.ts

@@ -0,0 +1,21 @@
+export type TooltipPosition = "left" | "right" | "top" | "bottom"
+type VerticalArrow = "top" | "bottom" | "center"
+type HorizontalArrow = "left" | "right" | "center"
+
+type ValidArrowMap = {
+  left: VerticalArrow
+  right: VerticalArrow
+  top: HorizontalArrow
+  bottom: HorizontalArrow
+}
+
+type ValidArrow<P extends TooltipPosition> = P extends keyof ValidArrowMap
+  ? ValidArrowMap[P]
+  : never
+
+export interface TooltipProps<P extends TooltipPosition = TooltipPosition> {
+  heading?: string
+  text?: string
+  position: P
+  arrow: ValidArrow<P>
+}