diff --git a/apps/builder/src/features/blocks/integrations/webhook/components/WebhookAdvancedConfigForm.tsx b/apps/builder/src/features/blocks/integrations/webhook/components/WebhookAdvancedConfigForm.tsx index 0b1f96246b..021b236940 100644 --- a/apps/builder/src/features/blocks/integrations/webhook/components/WebhookAdvancedConfigForm.tsx +++ b/apps/builder/src/features/blocks/integrations/webhook/components/WebhookAdvancedConfigForm.tsx @@ -30,6 +30,7 @@ import { getDeepKeys } from '../helpers/getDeepKeys' import { QueryParamsInputs, HeadersInputs } from './KeyValueInputs' import { DataVariableInputs } from './ResponseMappingInputs' import { VariableForTestInputs } from './VariableForTestInputs' +import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings' type Props = { blockId: string @@ -52,32 +53,31 @@ export const WebhookAdvancedConfigForm = ({ const [responseKeys, setResponseKeys] = useState([]) const { showToast } = useToast() - const handleMethodChange = (method: HttpMethod) => + const updateMethod = (method: HttpMethod) => onWebhookChange({ ...webhook, method }) - const handleQueryParamsChange = (queryParams: KeyValue[]) => + const updateQueryParams = (queryParams: KeyValue[]) => onWebhookChange({ ...webhook, queryParams }) - const handleHeadersChange = (headers: KeyValue[]) => + const updateHeaders = (headers: KeyValue[]) => onWebhookChange({ ...webhook, headers }) - const handleBodyChange = (body: string) => - onWebhookChange({ ...webhook, body }) + const updateBody = (body: string) => onWebhookChange({ ...webhook, body }) - const handleVariablesChange = (variablesForTest: VariableForTest[]) => + const updateVariablesForTest = (variablesForTest: VariableForTest[]) => onOptionsChange({ ...options, variablesForTest }) - const handleResponseMappingChange = ( + const updateResponseVariableMapping = ( responseVariableMapping: ResponseVariableMapping[] ) => onOptionsChange({ ...options, responseVariableMapping }) - const handleAdvancedConfigChange = (isAdvancedConfig: boolean) => + const updateAdvancedConfig = (isAdvancedConfig: boolean) => onOptionsChange({ ...options, isAdvancedConfig }) - const handleBodyFormStateChange = (isCustomBody: boolean) => + const updateIsCustomBody = (isCustomBody: boolean) => onOptionsChange({ ...options, isCustomBody }) - const handleTestRequestClick = async () => { + const executeTestRequest = async () => { if (!typebot || !webhook) return setIsTestResponseLoading(true) await Promise.all([updateWebhook(webhook.id, webhook), save()]) @@ -96,6 +96,9 @@ export const WebhookAdvancedConfigForm = ({ setIsTestResponseLoading(false) } + const updateIsExecutedOnClient = (isExecutedOnClient: boolean) => + onOptionsChange({ ...options, isExecutedOnClient }) + const ResponseMappingInputs = useMemo( () => function Component(props: TableListItemProps) { @@ -106,93 +109,96 @@ export const WebhookAdvancedConfigForm = ({ return ( <> - - {(options.isAdvancedConfig ?? true) && ( - <> - - Method: - - - - - - Query params - - - - - initialItems={webhook.queryParams} - onItemsChange={handleQueryParamsChange} - Item={QueryParamsInputs} - addLabel="Add a param" - /> - - - - - Headers - - - - - initialItems={webhook.headers} - onItemsChange={handleHeadersChange} - Item={HeadersInputs} - addLabel="Add a value" + onCheckChange={updateAdvancedConfig} + > + + + Method: + + + + + + Query params + + + + + initialItems={webhook.queryParams} + onItemsChange={updateQueryParams} + Item={QueryParamsInputs} + addLabel="Add a param" + /> + + + + + Headers + + + + + initialItems={webhook.headers} + onItemsChange={updateHeaders} + Item={HeadersInputs} + addLabel="Add a value" + /> + + + + + Body + + + + + {(options.isCustomBody ?? true) && ( + - - - - - Body - - - - - {(options.isCustomBody ?? true) && ( - - )} - - - - - Variable values for test - - - - - initialItems={ - options?.variablesForTest ?? { byId: {}, allIds: [] } - } - onItemsChange={handleVariablesChange} - Item={VariableForTestInputs} - addLabel="Add an entry" - /> - - - - - )} + )} + + + + + Variable values for test + + + + + initialItems={ + options?.variablesForTest ?? { byId: {}, allIds: [] } + } + onItemsChange={updateVariablesForTest} + Item={VariableForTestInputs} + addLabel="Add an entry" + /> + + + + {webhook.url && (