public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix not saving if identifier not edited from its field

pull/11887/head
Siddharth Movaliya 2023-10-31 23:37:54 +05:30
parent 7c741a078b
commit 47cccbe144
2 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/public/static/locales/en/common.json
View File

@ -2097,5 +2097,8 @@
"view_overlay_calendar_events":"View your calendar events to prevent clashed booking.", "view_overlay_calendar_events":"View your calendar events to prevent clashed booking.",
"lock_timezone_toggle_on_booking_page": "Lock timezone on booking page", "lock_timezone_toggle_on_booking_page": "Lock timezone on booking page",
"description_lock_timezone_toggle_on_booking_page" : "To lock the timezone on booking page, useful for in-person events.", "description_lock_timezone_toggle_on_booking_page" : "To lock the timezone on booking page, useful for in-person events.",
"click_to_learn_more" : "Click to learn more",
"edit_identifier" : "Edit identifier",
"identifier_change_not_suggested" : "It is not recommended to change the identifier. Letters, numbers & hyphens only.",
"ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑" "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
} }

39
packages/features/form-builder/FormBuilder.tsx
View File

@ -416,8 +416,10 @@ function FieldEditDialog({
const fieldTypes = Object.values(fieldTypesConfigMap); const fieldTypes = Object.values(fieldTypesConfigMap);
const [identifierBadge, setIdentifierBadge] = useState<string>(fieldForm.getValues("label") || ""); const [identifier, setIdentifier] = useState({
const [identifierFieldVisible, setIdentifierFieldVisible] = useState<boolean>(false); badge: fieldForm.getValues("name") || fieldForm.getValues("label") || "",
fieldVisible: false,
});
return ( return (
<Dialog open={dialog.isOpen} onOpenChange={onOpenChange}> <Dialog open={dialog.isOpen} onOpenChange={onOpenChange}>
@ -455,7 +457,13 @@ function FieldEditDialog({
} }
placeholder={t(fieldForm.getValues("defaultLabel") || "")} placeholder={t(fieldForm.getValues("defaultLabel") || "")}
onChange={(e) => { onChange={(e) => {
setIdentifierBadge(e.target.value); if (!identifier.fieldVisible) {
setIdentifier({
...identifier,
badge: getFieldIdentifier(e.target.value),
});
fieldForm.setValue("name", getFieldIdentifier(e.target.value));
}
}} }}
containerClassName="mt-6" containerClassName="mt-6"
label={t("label")} label={t("label")}
@ -499,22 +507,19 @@ function FieldEditDialog({
<Link <Link
href="https://cal.com/docs/core-features/event-types/booking-questions#booking-field-identifier" href="https://cal.com/docs/core-features/event-types/booking-questions#booking-field-identifier"
target="_blank"> target="_blank">
<Tooltip content="Click to learn more ↗" side="top"> <Tooltip content={`${t("click_to_learn_more")}` + " ↗"} side="top">
<Info className="hover:bg-emphasis h-5 w-5 cursor-pointer rounded p-0.5" /> <Info className="hover:bg-emphasis h-5 w-5 cursor-pointer rounded p-0.5" />
</Tooltip> </Tooltip>
</Link> </Link>
{!identifierFieldVisible && identifierBadge !== "" && ( {!identifier.fieldVisible && identifier.badge !== "" && (
<Badge variant="grayWithoutHover" className="text-subtle"> <Badge variant="grayWithoutHover" className="text-subtle">
{identifierBadge?.replaceAll(".", "-").replaceAll(" ", "-")} {getFieldIdentifier(identifier.badge)}
<Tooltip content="Edit identifier" side="top"> <Tooltip content={`${t("edit_identifier")}`} side="top">
<div <div
data-testid="edit-identifier" data-testid="edit-identifier"
onClick={() => { onClick={() => {
fieldForm.setValue( fieldForm.setValue("name", getFieldIdentifier(identifier.badge));
"name", setIdentifier({ ...identifier, fieldVisible: true });
identifierBadge?.replaceAll(".", "-").replaceAll(" ", "-")
);
setIdentifierFieldVisible(true);
}}> }}>
<Edit className="hover:text-emphasis h-4 w-4 cursor-pointer" /> <Edit className="hover:text-emphasis h-4 w-4 cursor-pointer" />
</div> </div>
@ -522,12 +527,16 @@ function FieldEditDialog({
</Badge> </Badge>
)} )}
</div> </div>
{identifierFieldVisible && ( {identifier.fieldVisible && (
<> <>
<InputField <InputField
required required
{...fieldForm.register("name")} {...fieldForm.register("name")}
onChange={(e) => { onChange={(e) => {
setIdentifier({
...identifier,
badge: getFieldIdentifier(e.target.value || ""),
});
fieldForm.setValue("name", getFieldIdentifier(e.target.value || "")); fieldForm.setValue("name", getFieldIdentifier(e.target.value || ""));
}} }}
disabled={ disabled={
@ -537,9 +546,7 @@ function FieldEditDialog({
label={t("identifier")} label={t("identifier")}
labelClassName="invisible -mb-2" labelClassName="invisible -mb-2"
/> />
<p className="text-subtle text-sm"> <p className="text-subtle text-sm">{t("identifier_change_not_suggested")}</p>
You will not be able to edit these later. Letters, numbers & hyphens only.
</p>
</> </>
)} )}
</div> </div>