diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx index 22203a697c..57ec69cf05 100644 --- a/apps/web/components/booking/pages/BookingPage.tsx +++ b/apps/web/components/booking/pages/BookingPage.tsx @@ -241,13 +241,11 @@ const BookingPage = ({ const querySchema = getBookingResponsesQuerySchema({ bookingFields: getBookingFieldsWithSystemFields(eventType), }); - // string value for - text, textarea, select, radio, - // string value with , for checkbox and multiselect - // Object {value:"", optionValue:""} for radioInput + const parsedQuery = querySchema.parse({ ...router.query, - // guest because we are supporting legacy URL with guest in it - // guests because the `name` of the corresponding bookingField is guests + // `guest` because we need to support legacy URL with `guest` query param support + // `guests` because the `name` of the corresponding bookingField is `guests` guests: router.query.guests || router.query.guest, }); @@ -265,14 +263,10 @@ const BookingPage = ({ const loggedInIsOwner = eventType?.users[0]?.id === session?.user?.id; - const getFormBuilderFieldValueFromQuery = (paramName: string) => { - return parsedQuery[paramName]; - }; - // There should only exists one default userData variable for primaryAttendee. const defaultUserValues = { - email: rescheduleUid ? booking?.attendees[0].email : getFormBuilderFieldValueFromQuery("email"), - name: rescheduleUid ? booking?.attendees[0].name : getFormBuilderFieldValueFromQuery("name"), + email: rescheduleUid ? booking?.attendees[0].email : parsedQuery["email"], + name: rescheduleUid ? booking?.attendees[0].name : parsedQuery["name"], }; const defaultValues = () => { @@ -284,7 +278,7 @@ const BookingPage = ({ const responses = eventType.bookingFields.reduce((responses, field) => { return { ...responses, - [field.name]: getFormBuilderFieldValueFromQuery(field.name), + [field.name]: parsedQuery[field.name], }; }, {}); defaults.responses = { @@ -340,23 +334,6 @@ const BookingPage = ({ defaultValues: defaultValues(), resolver: zodResolver(bookingFormSchema), // Since this isn't set to strict we only validate the fields in the schema }); - useEffect(() => { - // window.bookingForm = bookingForm; - }); - const selectedLocationType = useWatch({ - control: bookingForm.control, - name: "locationType", - defaultValue: ((): EventLocationType["type"] | undefined => { - if (router.query.location) { - return router.query.location as EventLocationType["type"]; - } - if (locations.length === 1) { - return locations[0]?.type; - } - })(), - }); - - const selectedLocation = getEventLocationType(selectedLocationType); // Calculate the booking date(s) let recurringStrings: string[] = [], diff --git a/packages/features/bookings/lib/getBookingResponsesSchema.ts b/packages/features/bookings/lib/getBookingResponsesSchema.ts index e38ae20969..a350446696 100644 --- a/packages/features/bookings/lib/getBookingResponsesSchema.ts +++ b/packages/features/bookings/lib/getBookingResponsesSchema.ts @@ -44,6 +44,15 @@ function preprocess({ // TODO: What about multiselect and checkbox?? } else if (field.type === "multiemail" || field.type === "checkbox" || field.type === "multiselect") { newResponses[field.name] = value instanceof Array ? value : [value]; + } else if (field.type === "radioInput") { + let parsedValue = { + optionValue: "", + value: "", + }; + try { + parsedValue = JSON.parse(value); + } catch (e) {} + newResponses[field.name] = parsedValue; } else { newResponses[field.name] = value; } diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx index d25c289eb7..3f4ae8af02 100644 --- a/packages/features/form-builder/Components.tsx +++ b/packages/features/form-builder/Components.tsx @@ -298,11 +298,13 @@ export const Components: Record = { propsType: "objectiveWithInput", factory: function RadioInputWithLabel({ name, options, optionsInputs, value, setValue, readOnly }) { useEffect(() => { - setValue({ - value: options[0]?.value, - optionValue: "", - }); - }, []); + if (!value) { + setValue({ + value: options[0]?.value, + optionValue: "", + }); + } + }, [options, setValue, value]); return (
@@ -330,7 +332,7 @@ export const Components: Record = { //TODO: ManageBookings: What does this location class do? className="location dark:bg-darkgray-300 dark:border-darkgray-300 h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2" value={option.value} - defaultChecked={i === 0} + defaultChecked={value?.value === option.value} /> {option.label ?? ""}