Merged in fix/SW-449-booking-widget-url-date (pull request #884)

Fix/SW-449 booking widget url date

Approved-by: Chuma Mcphoy (We Ahead)

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx

@@ -49,11 +49,11 @@ export default async function SelectRatePage({
     searchParams.fromDate &&
     dt(searchParams.fromDate).isAfter(dt().subtract(1, "day"))
       ? searchParams.fromDate
-      : dt().utc().format("YYYY-MM-D")
+      : dt().utc().format("YYYY-MM-DD")
   const validToDate =
     searchParams.toDate && dt(searchParams.toDate).isAfter(validFromDate)
       ? searchParams.toDate
-      : dt().utc().add(1, "day").format("YYYY-MM-D")
+      : dt().utc().add(1, "day").format("YYYY-MM-DD")
   const adults = selectRoomParamsObject.room[0].adults || 1 // TODO: Handle multiple rooms
   const childrenCount = selectRoomParamsObject.room[0].child?.length
   const children = selectRoomParamsObject.room[0].child

components/DatePicker/index.tsx

@@ -47,7 +47,7 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
     if (!dt(selected).isBefore(dt(), "day")) {
       if (isSelectingFrom) {
         setValue(name, {
-          fromDate: dt(selected).format("YYYY-MM-D"),
+          fromDate: dt(selected).format("YYYY-MM-DD"),
           toDate: undefined,
         })
         setIsSelectingFrom(false)
@@ -57,11 +57,11 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
         if (toDate.isAfter(fromDate)) {
           setValue(name, {
             fromDate: selectedDate.fromDate,
-            toDate: toDate.format("YYYY-MM-D"),
+            toDate: toDate.format("YYYY-MM-DD"),
           })
         } else {
           setValue(name, {
-            fromDate: toDate.format("YYYY-MM-D"),
+            fromDate: toDate.format("YYYY-MM-DD"),
             toDate: selectedDate.fromDate,
           })
         }
@@ -75,7 +75,9 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
         if (!selectedDate.toDate) {
           setValue(name, {
             fromDate: selectedDate.fromDate,
-            toDate: dt(selectedDate.fromDate).add(1, "day").format("YYYY-MM-D"),
+            toDate: dt(selectedDate.fromDate)
+              .add(1, "day")
+              .format("YYYY-MM-DD"),
           })
           setIsSelectingFrom(true)
         }

components/TempDesignSystem/Form/Date/index.tsx

@@ -83,7 +83,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
         .date(Number(day))
 
       if (newDate.isValid()) {
-        setValue(name, newDate.format("YYYY-MM-D"), {
+        setValue(name, newDate.format("YYYY-MM-DD"), {
           shouldDirty: true,
           shouldTouch: true,
           shouldValidate: true,

middleware.ts

@@ -8,6 +8,7 @@ import * as cmsContent from "@/middlewares/cmsContent"
 import * as currentWebLogin from "@/middlewares/currentWebLogin"
 import * as currentWebLoginEmail from "@/middlewares/currentWebLoginEmail"
 import * as currentWebLogout from "@/middlewares/currentWebLogout"
+import * as dateFormat from "@/middlewares/dateFormat"
 import * as handleAuth from "@/middlewares/handleAuth"
 import * as myPages from "@/middlewares/myPages"
 import { getDefaultRequestHeaders } from "@/middlewares/utils"
@@ -52,6 +53,7 @@ export const middleware: NextMiddleware = async (request, event) => {
     webView,
     bookingFlow,
     cmsContent,
+    dateFormat,
   ]
 
   try {

middlewares/dateFormat.ts

@@ -0,0 +1,39 @@
+import { NextMiddleware, NextResponse } from "next/server"
+
+import { MiddlewareMatcher } from "@/types/middleware"
+
+/* 
+Middleware function to normalize date formats to support
+YYYY-MM-D and YYYY-MM-DD since the current web uses YYYY-MM-D 
+in the URL as parameters (toDate and fromDate)
+*/
+export const middleware: NextMiddleware = (request) => {
+  const url = request.nextUrl.clone()
+  const { searchParams } = url
+
+  function normalizeDate(date: string): string {
+    const datePattern = /^\d{4}-\d{1,2}-\d{1,2}$/
+    if (datePattern.test(date)) {
+      const [year, month, day] = date.split("-").map(Number)
+      return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`
+    }
+    return date
+  }
+
+  if (searchParams.has("fromDate")) {
+    const fromDate = searchParams.get("fromDate")!
+    searchParams.set("fromDate", normalizeDate(fromDate))
+  }
+
+  if (searchParams.has("toDate")) {
+    const toDate = searchParams.get("toDate")!
+    searchParams.set("toDate", normalizeDate(toDate))
+  }
+
+  return NextResponse.rewrite(url)
+}
+
+export const matcher: MiddlewareMatcher = (request) => {
+  const { searchParams } = request.nextUrl
+  return searchParams.has("fromDate") || searchParams.has("toDate")
+}

server/routers/hotels/query.ts

@@ -992,8 +992,8 @@ export const hotelQueryRouter = router({
         const apiLang = toApiLang(lang)
         const params = {
           Adults: input.adults,
-          EndDate: dt(input.toDate).format("YYYY-MM-D"),
-          StartDate: dt(input.fromDate).format("YYYY-MM-D"),
+          EndDate: dt(input.toDate).format("YYYY-MM-DD"),
+          StartDate: dt(input.fromDate).format("YYYY-MM-DD"),
           language: apiLang,
         }