feat(SW-240): add translations

components/BookingWidget/bookingWidget.module.css

@@ -1,21 +1,35 @@
 .container {
-  display: none;
+  border-top: 1px solid var(--Base-Border-Subtle);
+  /* display: none; */
+}
+
+.form {
+  display: flex;
+  padding: var(--Spacing-x2) var(--Spacing-x5);
+}
+
+.input {
+  display: flex;
+  width: 100%;
+  max-width: 1250px;
+}
+
+.where {
+  width: 100%;
+  max-width: 280px;
+}
+
+.when {
+  width: 100%;
+  max-width: 240px;
 }
 
 /**
 * Update the styles after mobile UX is ready
 */
 
-@media screen and (min-width: 1367px) {
+@media screen and (max-width: 1367px) {
   .container {
-    display: grid;
-    padding: 0 var(--Spacing-x5);
-    gap: var(--Spacing-x3);
-  }
-  .form {
-    display: grid;
-    gap: var(--Spacing-x5);
-    grid-template-columns: repeat(6, auto);
-    align-items: center;
+    display: none;
   }
 }

components/BookingWidget/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
 
 import { dt } from "@/lib/dt"
 
@@ -12,6 +13,8 @@ import styles from "./bookingWidget.module.css"
 import { type BookingWidgetSchema } from "@/types/components/bookingWidget"
 
 export function BookingWidget() {
+  const { formatMessage } = useIntl()
+
   const methods = useForm<BookingWidgetSchema>({
     defaultValues: {
       search: {
@@ -49,11 +52,18 @@ export function BookingWidget() {
     <div id="booking-widget" className={styles.container}>
       <form onSubmit={methods.handleSubmit(onSubmit)} className={styles.form}>
         <FormProvider {...methods}>
-          <div>Search</div>
-          <div>Nights</div>
-          <div>Rooms</div>
-          <div>Bonus code</div>
-          <div>Bonus cheque or reward nights</div>
+          <div className={styles.input}>
+            <div className={styles.where}>
+              {formatMessage({ id: "Where to" })}
+            </div>
+            <div className={styles.when}>{formatMessage({ id: "When" })}</div>
+            <div className={styles.rooms}>
+              {formatMessage({ id: "Rooms & Guests" })}
+            </div>
+            <div className={styles.vouchers}>
+              {formatMessage({ id: "Booking codes and vouchers" })}
+            </div>
+          </div>
           <Button type="submit">Search</Button>
         </FormProvider>
       </form>

components/Current/Header/index.tsx

@@ -28,7 +28,7 @@ export default async function Header({
   /**
    * ToDo: Create logic to get this info from ContentStack based on page
    * */
-  const hideBookingWidget = true
+  const hideBookingWidget = false
 
   if (!data) {
     return null