feat: SW-1583 Used constants for strings

2025-03-06 16:23:16 +01:00
parent 23eaa772ea
commit 24bf96df41
12 changed files with 55 additions and 35 deletions
--- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils.ts
+++ b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils.ts
@@ -1,5 +1,6 @@
 import { notFound } from "next/navigation"

+import { REDEMPTION } from "@/constants/booking"
 import { getLocations } from "@/lib/trpc/memoizedRequests"

 import { generateChildrenString } from "@/components/HotelReservation/utils"
@@ -106,6 +107,6 @@ export async function getHotelSearchDetails<
    childrenInRoomString,
    childrenInRoom,
    bookingCode: selectHotelParams.bookingCode ?? undefined,
-    redemption: selectHotelParams.searchType === "redemption",
+    redemption: selectHotelParams.searchType === REDEMPTION,
  }
 }
--- a/apps/scandic-web/components/BookingWidget/Client.tsx
+++ b/apps/scandic-web/components/BookingWidget/Client.tsx
@@ -4,6 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useEffect, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"

+import { REDEMPTION } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 import { trpc } from "@/lib/trpc/client"
 import { StickyElementNameEnum } from "@/stores/sticky-position"
@@ -102,7 +103,7 @@ export default function BookingWidgetClient({
        value: selectedBookingCode,
        remember: false,
      },
-      redemption: params?.searchType === "redemption",
+      redemption: params?.searchType === REDEMPTION,
      rooms: defaultRoomsData,
    },
    shouldFocusError: false,
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
@@ -4,6 +4,8 @@ import { type FieldError, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"

+import { REDEMPTION } from "@/constants/booking"
+
 import { ErrorCircleIcon, InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
@@ -52,9 +54,14 @@ export default function BookingCode() {
  })

  function updateBookingCodeFormValue(value: string) {
+    // Set value and show error if validation fails
    setValue("bookingCode.value", value, { shouldValidate: true })
-    if (getValues("redemption")) {
-      setValue("redemption", false)
+
+    if (getValues(REDEMPTION)) {
+      // Remove the redemption as user types booking code and show notification for the same
+      setValue(REDEMPTION, false)
+      // Hide the above notification popup after 5 seconds by re-triggering validation
+      // This is kept consistent with location search field error notification timeout
      setTimeout(function () {
        trigger("bookingCode.value")
      }, 5000)
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx
@@ -4,6 +4,8 @@ import { useCallback, useEffect, useRef } from "react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"

+import { REDEMPTION } from "@/constants/booking"
+
 import { ErrorCircleIcon } from "@/components/Icons"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -13,7 +15,7 @@ import styles from "./reward-night.module.css"

 import type { BookingWidgetSchema } from "@/types/components/bookingWidget"

-export function RewardNight() {
+export default function RewardNight() {
  const intl = useIntl()
  const {
    setValue,
@@ -23,24 +25,27 @@ export function RewardNight() {
  } = useFormContext<BookingWidgetSchema>()
  const ref = useRef<HTMLDivElement | null>(null)
  const reward = intl.formatMessage({ id: "Book Reward Night" })
-  const redemptionErr = errors["redemption"]
+  const redemptionErr = errors[REDEMPTION]
  const bookingCode = getValues("bookingCode.value")
  const isMultiRoomError = redemptionErr?.message?.indexOf("Multi-room") === 0
  const errorInfoColor = isMultiRoomError ? "red" : "blue"

-  function validateBookingWidget(value: boolean) {
-    trigger("redemption")
+  function validateRedemption(value: boolean) {
+    // Validate redemption as per the rules defined in the schema
+    trigger(REDEMPTION)
    if (value && bookingCode) {
      setValue("bookingCode.value", "", { shouldValidate: true })
+      // Hide the notification popup after 5 seconds by re-triggering validation
+      // This is kept consistent with location search field error notification timeout
      setTimeout(() => {
-        trigger("redemption")
+        trigger(REDEMPTION)
      }, 5000)
    }
  }

  const resetOnMultiroomError = useCallback(() => {
    if (isMultiRoomError) {
-      setValue("redemption", false, { shouldValidate: true })
+      setValue(REDEMPTION, false, { shouldValidate: true })
    }
  }, [isMultiRoomError, setValue])

@@ -68,10 +73,10 @@ export function RewardNight() {
    <div ref={ref} onBlur={(e) => closeOnBlur(e.nativeEvent)}>
      <Checkbox
        hideError
-        name="redemption"
+        name={REDEMPTION}
        registerOptions={{
          onChange: (e) => {
-            validateBookingWidget(e.target.value)
+            validateRedemption(e.target.value)
          },
        }}
      >
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
@@ -10,7 +10,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { Tooltip } from "@/components/TempDesignSystem/Tooltip"

 import BookingCode from "../BookingCode"
-import { RewardNight } from "../RewardNight"
+import RewardNight from "../RewardNight"

 import styles from "./voucher.module.css"

--- a/apps/scandic-web/components/Forms/BookingWidget/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/index.tsx
@@ -4,6 +4,7 @@ import { useTransition } from "react"
 import { Form as FormRAC } from "react-aria-components"
 import { useFormContext } from "react-hook-form"

+import { REDEMPTION } from "@/constants/booking"
 import { selectHotel, selectRate } from "@/constants/routes/hotelReservation"

 import useLang from "@/hooks/useLang"
@@ -49,8 +50,8 @@ export default function Form({
      ...(data.bookingCode?.value
        ? { bookingCode: data.bookingCode.value }
        : {}),
-      // Followed current url structure to keep searchType=redemption param incase of reward night
-      ...(data.redemption ? { searchType: "redemption" } : {}),
+      // Followed current url structure to keep searchtype=redemption param incase of reward night
+      ...(data.redemption ? { searchType: REDEMPTION } : {}),
    })

    onClose()
--- a/apps/scandic-web/components/Forms/BookingWidget/schema.ts
+++ b/apps/scandic-web/components/Forms/BookingWidget/schema.ts
@@ -1,5 +1,7 @@
 import { z } from "zod"

+import { REDEMPTION } from "@/constants/booking"
+
 import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
 import type { Location } from "@/types/trpc/routers/hotel/locations"

@@ -133,7 +135,7 @@ export const bookingWidgetSchema = z
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: "Multi-room booking is not available with reward night.",
-        path: ["redemption"],
+        path: [REDEMPTION],
      })
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
@@ -145,7 +147,7 @@ export const bookingWidgetSchema = z
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: "Code and voucher is not available with reward night.",
-        path: ["redemption"],
+        path: [REDEMPTION],
      })
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
--- a/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx
+++ b/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx
@@ -4,14 +4,11 @@ import { useCallback, useEffect } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"

-import {
-  CloseLargeIcon,
-  ErrorCircleIcon,
-  PlusCircleIcon,
-  PlusIcon,
-} from "../Icons"
+import { REDEMPTION } from "@/constants/booking"
+
+import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
+
 import Button from "../TempDesignSystem/Button"
-import Caption from "../TempDesignSystem/Text/Caption"
 import { Tooltip } from "../TempDesignSystem/Tooltip"
 import { GuestsRoom } from "./GuestsRoom"

@@ -38,7 +35,7 @@ export default function GuestsRoomsPickerDialog({
  const addRoomLabel = intl.formatMessage({ id: "Add room" })
  const doneLabel = intl.formatMessage({ id: "Done" })
  // Disable add room if booking code is either voucher or corporate cheque, or reward night is enabled
-  const addRoomDisabledTextForSpecialRate = getValues("redemption")
+  const addRoomDisabledTextForSpecialRate = getValues(REDEMPTION)
    ? intl.formatMessage({
        id: "Multi-room booking is not available with reward night.",
      })
--- a/apps/scandic-web/components/HotelReservation/HotelCard/HotelPointsCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCard/HotelPointsCard/index.tsx
@@ -13,7 +13,7 @@ export default function HotelPointsCard({
 }: PointsCardProps) {
  const intl = useIntl()
  const pointsPerStay =
-    productTypePoints?.localPrice.pricePerStay ?? redemptionPrice
+    productTypePoints?.localPrice.pointsPerStay ?? redemptionPrice

  return (
    <div className={styles.poinstRow}>
--- a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
@@ -190,10 +190,13 @@ function HotelCard({
                  <Caption>
                    {intl.formatMessage({ id: "Available rates" })}
                  </Caption>
+                  {/* Display rate with full points option */}
                  <HotelPointsCard productTypePoints={price.redemption} />
+                  {/* Display rate with partial points option A */}
                  {price.redemptionA && (
                    <HotelPointsCard productTypePoints={price.redemptionA} />
                  )}
+                  {/* Display rate with partial points option B */}
                  {price.redemptionB && (
                    <HotelPointsCard productTypePoints={price.redemptionB} />
                  )}
--- a/apps/scandic-web/constants/booking.ts
+++ b/apps/scandic-web/constants/booking.ts
@@ -35,6 +35,9 @@ export enum ChildBedTypeEnum {
  Unknown = "Unknown",
 }

+export const REDEMPTION = "redemption"
+export const SEARCHTYPE = "searchtype"
+
 export const BOOKING_CONFIRMATION_NUMBER = "confirmationNumber"

 export const MEMBERSHIP_FAILED_ERROR = "MembershipFailedError"
--- a/apps/scandic-web/middlewares/bookingFlow.ts
+++ b/apps/scandic-web/middlewares/bookingFlow.ts
@@ -1,20 +1,20 @@
-import { NextResponse } from "next/server"
+import { type  NextMiddleware,NextResponse  } from "next/server"
+
+import { REDEMPTION, SEARCHTYPE } from "@/constants/booking"
+import { login } from "@/constants/routes/handleAuth"
+import { getPublicNextURL } from "@/server/utils"
+
+import { auth } from "@/auth"
+import { findLang } from "@/utils/languages"

 import { getDefaultRequestHeaders } from "./utils"

-import type { NextMiddleware } from "next/server"
-
 import type { MiddlewareMatcher } from "@/types/middleware"
-import { auth } from "@/auth"
-import { getPublicNextURL } from "@/server/utils"
-import { login } from "@/constants/routes/handleAuth"
-import { findLang } from "@/utils/languages"

 export const middleware: NextMiddleware = async (request) => {
  // Redirect user to login if reward nights search and not logged in
  const isRedemption =
-    request.nextUrl.searchParams.get("searchtype") === "redemption" ||
-    request.nextUrl.searchParams.get("searchType") === "redemption"
+    request.nextUrl.searchParams.get(SEARCHTYPE) === REDEMPTION
  const session = await auth() // Check for user session
  if (isRedemption && (!session || session?.error)) {
    const lang = findLang(request.nextUrl.pathname)!