feat(SW-240): add translations

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>