import type { App_RoutingForms_Form } from "@prisma/client"; import type { NextRouter } from "next/router"; import { useRouter } from "next/router"; import { createContext, forwardRef, useContext, useState } from "react"; import { useForm } from "react-hook-form"; import { Controller } from "react-hook-form"; import { v4 as uuidv4 } from "uuid"; import { z } from "zod"; import { classNames } from "@calcom/lib"; import { CAL_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import type { ButtonProps } from "@calcom/ui"; import { Button, ConfirmationDialogContent, Dialog, DialogClose, DialogContent, Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Form, showToast, Switch, TextAreaField, TextField, SettingsToggle, } from "@calcom/ui"; import { MoreHorizontal } from "@calcom/ui/components/icon"; import { EmbedButton, EmbedDialog } from "@components/Embed"; import getFieldIdentifier from "../lib/getFieldIdentifier"; import type { SerializableForm } from "../types/types"; type RoutingForm = SerializableForm; const newFormModalQuerySchema = z.object({ action: z.literal("new").or(z.literal("duplicate")), target: z.string().optional(), }); const openModal = (router: NextRouter, option: z.infer) => { const query = { ...router.query, dialog: "new-form", ...option, }; router.push( { pathname: router.pathname, query, }, undefined, { shallow: true } ); }; function NewFormDialog({ appUrl }: { appUrl: string }) { const { t } = useLocale(); const router = useRouter(); const utils = trpc.useContext(); const mutation = trpc.viewer.appRoutingForms.formMutation.useMutation({ onSuccess: (_data, variables) => { router.push(`${appUrl}/form-edit/${variables.id}`); }, onError: (err) => { showToast(err.message || t("something_went_wrong"), "error"); }, onSettled: () => { utils.viewer.appRoutingForms.forms.invalidate(); }, }); const hookForm = useForm<{ name: string; description: string; shouldConnect: boolean; }>(); const { action, target } = router.query as z.infer; const formToDuplicate = action === "duplicate" ? target : null; const teamId = action === "new" ? Number(target) : null; const { register } = hookForm; return (

{t("form_description")}

{ const formId = uuidv4(); mutation.mutate({ id: formId, ...values, addFallback: true, teamId, duplicateFrom: formToDuplicate, }); }}>
{action === "duplicate" && ( { return ( { onChange(checked); }} /> ); }} /> )}
); } const dropdownCtx = createContext<{ dropdown: boolean }>({ dropdown: false }); export const FormActionsDropdown = ({ children, disabled, }: { disabled?: boolean; children: React.ReactNode; }) => { return (