From fbff9a9a3f9c107488424bacc0852b6d0de9a155 Mon Sep 17 00:00:00 2001
From: Anwar Sadath <37188392+asadath1395@users.noreply.github.com>
Date: Fri, 22 Mar 2024 23:11:40 +0530
Subject: [PATCH] fix: Attendee address and phone number field not shown in
 booking questions (#13989)

* fix: Attendee address and phone number field not shown in booking questions

* Address review comments

---------

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
---
 .../components/eventtype/EventSetupTab.tsx    | 17 +++++++++++++
 .../features/form-builder/FormBuilder.tsx     | 25 +++++++++++++++----
 .../form-builder/FormBuilderField.tsx         |  2 +-
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx
index 250a5e23dd..a334e090ac 100644
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@@ -285,6 +285,23 @@ export const EventSetupTab = (
                           });
                           showToast(t("location_already_exists"), "warning");
                         }
+                        // Whenever location changes, we need to reset the locations item in booking questions list else it overflows
+                        // previously added values resulting in wrong behaviour
+                        const existingBookingFields = formMethods.getValues("bookingFields");
+                        const findLocation = existingBookingFields.findIndex(
+                          (field) => field.name === "location"
+                        );
+                        if (findLocation >= 0) {
+                          existingBookingFields[findLocation] = {
+                            ...existingBookingFields[findLocation],
+                            type: "radioInput",
+                            label: "",
+                            placeholder: "",
+                          };
+                          formMethods.setValue("bookingFields", existingBookingFields, {
+                            shouldDirty: true,
+                          });
+                        }
                       }
                     }}
                   />
diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index 1ffb1104f2..62e6ec8377 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -4,6 +4,7 @@ import { Controller, useFieldArray, useFormContext, useForm } from "react-hook-f
 import type { UseFormReturn, SubmitHandler } from "react-hook-form";
 import type { z } from "zod";
 
+import { getAndUpdateNormalizedValues } from "@calcom/features/form-builder/FormBuilderField";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
@@ -119,12 +120,17 @@ export const FormBuilder = function FormBuilder({
               : field.getOptionsAt
               ? dataStore.options[field.getOptionsAt as keyof typeof dataStore]
               : [];
-            const numOptions = options?.length ?? 0;
-            if (field.hideWhenJustOneOption && numOptions <= 1) {
+            const { hidden } = getAndUpdateNormalizedValues({ ...field, options }, t);
+            if (field.hideWhenJustOneOption && (hidden || !options?.length)) {
               return null;
             }
-            const fieldType = fieldTypesConfigMap[field.type];
-            const isRequired = field.required;
+            let fieldType = fieldTypesConfigMap[field.type];
+            let isRequired = field.required;
+            // For radioInput type, when there's only one option, the type and required takes the first options values
+            if (field.type === "radioInput" && options.length === 1) {
+              fieldType = fieldTypesConfigMap[field.optionsInputs?.[options[0].value].type || field.type];
+              isRequired = field.optionsInputs?.[options[0].value].required || field.required;
+            }
             const isFieldEditableSystemButOptional = field.editable === "system-but-optional";
             const isFieldEditableSystemButHidden = field.editable === "system-but-hidden";
             const isFieldEditableSystem = field.editable === "system";
@@ -227,7 +233,16 @@ export const FormBuilder = function FormBuilder({
                       data-testid="edit-field-action"
                       color="secondary"
                       onClick={() => {
-                        editField(index, field);
+                        const fieldToEdit = field;
+                        // For radioInput type, when there's only one option, the type and required takes the only first options values
+                        if (fieldToEdit.type === "radioInput" && options.length === 1) {
+                          fieldToEdit.type =
+                            fieldToEdit.optionsInputs?.[options[0].value].type || fieldToEdit.type;
+                          fieldToEdit.required =
+                            fieldToEdit.optionsInputs?.[options[0].value].required || fieldToEdit.required;
+                        }
+
+                        editField(index, fieldToEdit);
                       }}>
                       {t("edit")}
                     </Button>
diff --git a/packages/features/form-builder/FormBuilderField.tsx b/packages/features/form-builder/FormBuilderField.tsx
index 9328da26fa..52d363a16f 100644
--- a/packages/features/form-builder/FormBuilderField.tsx
+++ b/packages/features/form-builder/FormBuilderField.tsx
@@ -152,7 +152,7 @@ const WithLabel = ({
 /**
  * Ensures that `labels` and `placeholders`, wherever they are, are set properly. If direct values are not set, default values from fieldTypeConfig are used.
  */
-function getAndUpdateNormalizedValues(field: RhfFormFields[number], t: TFunction) {
+export function getAndUpdateNormalizedValues(field: RhfFormFields[number], t: TFunction) {
   let noLabel = false;
   let hidden = !!field.hidden;
   if (field.type === "radioInput") {