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>
This commit is contained in:
Anwar Sadath
2024-03-22 13:41:40 -04:00
committed by GitHub
co-authored by Joe Au-Yeung
parent de41f20145
commit fbff9a9a3f
3 changed files with 38 additions and 6 deletions
@@ -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,
});
}
}
}}
/>
+20 -5
View File
@@ -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>
@@ -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") {