diff --git a/packages/features/webhooks/components/WebhookForm.tsx b/packages/features/webhooks/components/WebhookForm.tsx index bf10b9cc5a..c4a02e60be 100644 --- a/packages/features/webhooks/components/WebhookForm.tsx +++ b/packages/features/webhooks/components/WebhookForm.tsx @@ -291,13 +291,20 @@ const WebhookForm = (props: { }, }); - const showTimeSection = formMethods - .watch("eventTriggers") - ?.find( - (trigger) => - trigger === WebhookTriggerEvents.AFTER_HOSTS_CAL_VIDEO_NO_SHOW || - trigger === WebhookTriggerEvents.AFTER_GUESTS_CAL_VIDEO_NO_SHOW - ); + const triggers = formMethods.watch("eventTriggers") || []; + const subscriberUrl = formMethods.watch("subscriberUrl"); + const time = formMethods.watch("time"); + const timeUnit = formMethods.watch("timeUnit"); + + const isCreating = !props?.webhook?.id; + const needsTime = triggers.some( + (t) => + t === WebhookTriggerEvents.AFTER_HOSTS_CAL_VIDEO_NO_SHOW || + t === WebhookTriggerEvents.AFTER_GUESTS_CAL_VIDEO_NO_SHOW + ); + const hasTime = !!time && !!timeUnit; + const hasUrl = !!subscriberUrl; + const showTimeSection = needsTime; const [useCustomTemplate, setUseCustomTemplate] = useState( props?.webhook?.payloadTemplate !== undefined && props?.webhook?.payloadTemplate !== null @@ -329,6 +336,17 @@ const WebhookForm = (props: { const [changeSecret, setChangeSecret] = useState(false); const hasSecretKey = !!props?.webhook?.secret; + const canSubmit = isCreating + ? hasUrl && triggers.length > 0 && (!needsTime || hasTime) + : formMethods.formState.isDirty || changeSecret; + + useEffect(() => { + if (isCreating && needsTime && !time && !timeUnit) { + formMethods.setValue("time", 5, { shouldDirty: true }); + formMethods.setValue("timeUnit", TimeUnit.MINUTE, { shouldDirty: true }); + } + }, [isCreating, needsTime, time, timeUnit, formMethods]); + useEffect(() => { if (changeSecret) { formMethods.unregister("secret", { keepDefaultValue: false }); @@ -585,7 +603,7 @@ const WebhookForm = (props: {