diff --git a/components/HotelReservation/EnterDetails/Details/details.module.css b/components/HotelReservation/EnterDetails/Details/details.module.css index e9a8cdaf0..62a947e3e 100644 --- a/components/HotelReservation/EnterDetails/Details/details.module.css +++ b/components/HotelReservation/EnterDetails/Details/details.module.css @@ -1,10 +1,10 @@ -.container { +.form { display: grid; gap: var(--Spacing-x2); padding: var(--Spacing-x3) 0px; } -.form { +.container { display: grid; gap: var(--Spacing-x2); grid-template-columns: 1fr 1fr; @@ -13,6 +13,7 @@ .country, .email, +.membershipNo, .phone { grid-column: 1/-1; } diff --git a/components/HotelReservation/EnterDetails/Details/index.tsx b/components/HotelReservation/EnterDetails/Details/index.tsx index 7d2b33681..806776ce8 100644 --- a/components/HotelReservation/EnterDetails/Details/index.tsx +++ b/components/HotelReservation/EnterDetails/Details/index.tsx @@ -9,7 +9,7 @@ import Button from "@/components/TempDesignSystem/Button" 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 Footnote from "@/components/TempDesignSystem/Text/Footnote" import { guestDetailsSchema, signedInDetailsSchema } from "./schema" import Signup from "./Signup" @@ -34,6 +34,7 @@ export default function Details({ user }: DetailsProps) { dateOfBirth: state.userData.dateOfBirth, zipCode: state.userData.zipCode, termsAccepted: state.userData.termsAccepted, + membershipNo: state.userData.membershipNo, })) const methods = useForm({ @@ -47,6 +48,7 @@ export default function Details({ user }: DetailsProps) { dateOfBirth: initialData.dateOfBirth, zipCode: initialData.zipCode, termsAccepted: initialData.termsAccepted, + membershipNo: initialData.membershipNo, }, criteriaMode: "all", mode: "all", @@ -58,17 +60,20 @@ export default function Details({ user }: DetailsProps) { return ( -
-
- - {intl.formatMessage({ id: "Guest information" })} - -
-
+ {user ? null : } + + {intl.formatMessage({ id: "Guest information" })} + +
- {user ? null : } - + {user ? null : ( + + )} +
-
+ ) } diff --git a/components/HotelReservation/EnterDetails/Details/schema.ts b/components/HotelReservation/EnterDetails/Details/schema.ts index 36efd9f81..2b8075da9 100644 --- a/components/HotelReservation/EnterDetails/Details/schema.ts +++ b/components/HotelReservation/EnterDetails/Details/schema.ts @@ -16,6 +16,21 @@ export const notJoinDetailsSchema = baseDetailsSchema.merge( zipCode: z.string().optional(), dateOfBirth: z.string().optional(), termsAccepted: z.boolean().default(false), + membershipNo: z + .string() + .optional() + .refine((val) => { + if (val) { + return !val.match(/[^0-9]/g) + } + return true + }, "Only digits are allowed") + .refine((num) => { + if (num) { + return num.length === 14 + } + return true + }, "Membership number needs to be 14 digits"), }) ) @@ -33,6 +48,7 @@ export const joinDetailsSchema = baseDetailsSchema.merge( return { message: ctx.defaultError } }, }), + membershipNo: z.string().optional(), }) ) diff --git a/stores/enter-details.ts b/stores/enter-details.ts index c6d69ab7e..88290619e 100644 --- a/stores/enter-details.ts +++ b/stores/enter-details.ts @@ -74,6 +74,7 @@ export function initEditDetailsState( zipCode: "", dateOfBirth: undefined, termsAccepted: false, + membershipNo: "", } let inputUserData = {}