feat: SW-1583 Used constants for strings

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)

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)
           },
         }}
       >

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"
 

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()

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,