fix: prevent phone input from running validation on mount when empty

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@summary/page.tsx

@@ -1,5 +1,3 @@
-import { notFound } from "next/navigation"
-
 import {
   getProfileSafely,
   getSelectedRoomAvailability,
@@ -12,7 +10,6 @@ import { SelectRateSearchParams } from "@/types/components/hotelReservation/sele
 import { LangParams, PageArgs, SearchParams } from "@/types/params"
 
 export default async function SummaryPage({
-  params,
   searchParams,
 }: PageArgs<LangParams, SearchParams<SelectRateSearchParams>>) {
   const selectRoomParams = new URLSearchParams(searchParams)

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx

@@ -49,7 +49,8 @@ export default async function StepPage({
     toDate,
   } = getQueryParamsForEnterDetails(selectRoomParams)
 
-  void getBreakfastPackages(searchParams.hotel)
+  const breakfastInput = { adults, fromDate, hotelId, toDate }
+  void getBreakfastPackages(breakfastInput)
   void getSelectedRoomAvailability({
     hotelId: parseInt(searchParams.hotel),
     adults,
@@ -74,7 +75,7 @@ export default async function StepPage({
     rateCode,
     roomTypeCode,
   })
-  const breakfastPackages = await getBreakfastPackages(searchParams.hotel)
+  const breakfastPackages = await getBreakfastPackages(breakfastInput)
   const user = await getProfileSafely()
   const savedCreditCards = await getCreditCardsSafely()
 

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -12,7 +12,6 @@ import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import { toast } from "@/components/TempDesignSystem/Toasts"
 
 import { detailsSchema, signedInDetailsSchema } from "./schema"
 import Signup from "./Signup"

components/TempDesignSystem/Form/Phone/index.tsx

@@ -58,8 +58,14 @@ export default function Phone({
       forceDialCode: true,
       value: phone,
       onChange: (value) => {
+        // If not checked trigger(name) forces validation on mount
+        // which shows error message before user even can see the form
+        if (value.inputValue) {
           setValue(name, value.phone)
           trigger(name)
+        } else {
+          setValue(name, "")
+        }
       },
     })
 

lib/trpc/memoizedRequests/index.ts

@@ -9,6 +9,8 @@ import {
 
 import { serverClient } from "../server"
 
+import type { BreackfastPackagesInput } from "@/types/requests/packages"
+
 export const getLocations = cache(async function getMemoizedLocations() {
   return serverClient().hotel.locations.get()
 })
@@ -135,7 +137,7 @@ export const getSiteConfig = cache(async function getMemoizedSiteConfig() {
 })
 
 export const getBreakfastPackages = cache(async function getMemoizedPackages(
-  hotelId: string
+  input: BreackfastPackagesInput
 ) {
-  return serverClient().hotel.packages.breakfast({ hotelId })
+  return serverClient().hotel.packages.breakfast(input)
 })

server/routers/hotels/input.ts

@@ -68,6 +68,15 @@ export const getHotelDataInputSchema = z.object({
   include: z.array(z.nativeEnum(HotelIncludeEnum)).optional(),
 })
 
-export const getBreakfastPackageInput = z.object({
+export const getBreakfastPackageInputSchema = z.object({
+  adults: z.number().min(1, { message: "at least one adult is required" }),
+  fromDate: z
+    .string()
+    .min(1, { message: "fromDate is required" })
+    .pipe(z.coerce.date()),
   hotelId: z.string().min(1, { message: "hotelId is required" }),
+  toDate: z
+    .string()
+    .min(1, { message: "toDate is required" })
+    .pipe(z.coerce.date()),
 })

server/routers/hotels/query.ts

@@ -2,6 +2,7 @@ import { metrics } from "@opentelemetry/api"
 
 import { Lang } from "@/constants/languages"
 import * as api from "@/lib/api"
+import { dt } from "@/lib/dt"
 import { GetHotelPage } from "@/lib/graphql/Query/HotelPage/HotelPage.graphql"
 import { request } from "@/lib/graphql/request"
 import {
@@ -31,7 +32,7 @@ import {
   getRoomPackagesSchema,
 } from "./schemas/packages"
 import {
-  getBreakfastPackageInput,
+  getBreakfastPackageInputSchema,
   getHotelDataInputSchema,
   getHotelInputSchema,
   getHotelsAvailabilityInputSchema,
@@ -982,14 +983,14 @@ export const hotelQueryRouter = router({
         return validatedPackagesData.data
       }),
     breakfast: safeProtectedServiceProcedure
-      .input(getBreakfastPackageInput)
+      .input(getBreakfastPackageInputSchema)
       .query(async function ({ ctx, input }) {
         const params = {
-          Adults: 2,
+          Adults: input.adults,
-          EndDate: "2024-10-28",
+          EndDate: dt(input.toDate).format("YYYY-MM-DD"),
-          StartDate: "2024-10-25",
+          StartDate: dt(input.fromDate).format("YYYY-MM-DD"),
         }
-        const metricsData = { ...input, ...params }
+        const metricsData = { ...params, hotelId: input.hotelId }
         breakfastPackagesCounter.add(1, metricsData)
         console.info(
           "api.package.breakfast start",

types/requests/packages.ts

@@ -0,0 +1,6 @@
+import { z } from "zod"
+
+import { getBreakfastPackageInputSchema } from "@/server/routers/hotels/input"
+
+export interface BreackfastPackagesInput
+  extends z.input<typeof getBreakfastPackageInputSchema> {}