feat: cUrl import integration step

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/CurlImportView.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react'
+import {
+  Box,
+  Button,
+  HStack,
+  Stack,
+  Textarea as ChakraTextarea,
+  Tooltip,
+  Text,
+} from '@chakra-ui/react'
+import { OutlineInformationIcon } from 'assets/icons'
+import { parseCurlCommand, ParsedCurl } from 'services/curlParser'
+
+type Props = {
+  onImport: (parsed: ParsedCurl) => void
+}
+
+export const CurlImportView = ({ onImport }: Props) => {
+  const [curlInput, setCurlInput] = useState('')
+  const [curlError, setCurlError] = useState('')
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value
+    setCurlInput(value)
+
+    const trimmed = value.trim()
+    if (!trimmed) {
+      setCurlError('')
+      return
+    }
+
+    const parsed = parseCurlCommand(trimmed)
+    if (!parsed) {
+      setCurlError(
+        'Esse não parece ser um comando cURL válido. Confira e tente novamente.'
+      )
+    } else {
+      setCurlError('')
+    }
+  }
+
+  const handleImport = () => {
+    const parsed = parseCurlCommand(curlInput)
+    if (!parsed) return
+    onImport(parsed)
+  }
+
+  const isDisabled = !curlInput.trim() || !!curlError
+
+  return (
+    <Stack spacing={4} p={2}>
+      <Stack spacing={1}>
+        <Text fontWeight="bold" fontSize="lg">
+          Importar cURL
+        </Text>
+        <Text fontSize="sm" color="gray.500">
+          Cole aqui o comando cURL completo para preencher automaticamente os
+          campos de conexão (URL, método, headers, parâmetros).
+        </Text>
+      </Stack>
+      <Stack spacing={3}>
+        <HStack spacing={1}>
+          <Text fontSize="sm" fontWeight="semibold">
+            Comando cURL
+          </Text>
+          <Tooltip
+            label='Exemplo: curl -X GET "https://api.site.com/data" -H "Authorization: Bearer token"'
+            fontSize="xs"
+            placement="top"
+            hasArrow
+          >
+            <Box as="span" cursor="help">
+              <OutlineInformationIcon color="gray.400" />
+            </Box>
+          </Tooltip>
+        </HStack>
+        <ChakraTextarea
+          placeholder="Cole aqui o comando cURL..."
+          value={curlInput}
+          onChange={handleInputChange}
+          minH="120px"
+          resize="vertical"
+          borderColor={curlError ? 'red.400' : undefined}
+          focusBorderColor={curlError ? 'red.400' : 'blue.500'}
+        />
+        {curlError && (
+          <Text color="red.400" fontSize="xs">
+            {curlError}
+          </Text>
+        )}
+        <Button
+          colorScheme={isDisabled ? 'gray' : 'blue'}
+          isDisabled={isDisabled}
+          onClick={handleImport}
+          w="full"
+          borderRadius="xl"
+          _disabled={{ opacity: 1, cursor: 'not-allowed', color: 'gray.500' }}
+        >
+          Importar
+        </Button>
+      </Stack>
+    </Stack>
+  )
+}

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React, { useContext, useEffect, useMemo, useState } from 'react'
 import {
   Accordion,
   AccordionButton,
@@ -37,6 +37,9 @@ import { Input, Textarea } from 'components/shared/Textbox'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import * as z from 'zod'
+import { CurlImportView } from './CurlImportView'
+import type { ParsedCurl } from 'services/curlParser'
+import { StepNodeContext } from '../../../StepNode/StepNode'
 
 type Props = {
   step: WebhookStep
@@ -75,6 +78,22 @@ export const WebhookSettings = React.memo(function WebhookSettings({
   const [variablesKeyDown, setVariablesKeyDown] = useState<KeyboardEvent>()
   const [accordionIndex, setAccordionIndex] = useState<number[]>([0, 1, 2, 3, 4, 5])
 
+  const { registerBeforeClose } = useContext(StepNodeContext)
+  const [showCurlImport, setShowCurlImport] = useState(false)
+
+  useEffect(() => {
+    if (!registerBeforeClose) return
+    if (showCurlImport) {
+      registerBeforeClose(() => {
+        setShowCurlImport(false)
+        return true
+      })
+    } else {
+      registerBeforeClose(null)
+    }
+    return () => registerBeforeClose(null)
+  }, [showCurlImport, registerBeforeClose])
+
   const schema = z.object({
     url: z.string().url({ message: 'url inválida' }),
     pathPortion: z.string().min(1, { message: 'Campo obrigatório' }),
@@ -364,6 +383,32 @@ export const WebhookSettings = React.memo(function WebhookSettings({
   const handleBodyFormStateChange = (isCustomBody: boolean) =>
     onOptionsChange({ ...step.options, isCustomBody })
 
+  const handleCurlImport = (parsed: ParsedCurl) => {
+    setValue('url', parsed.url)
+    setValue('pathPortion', parsed.path || '/')
+    trigger('url')
+    trigger('pathPortion')
+
+    onOptionsChange({
+      ...step.options,
+      method: parsed.method,
+      url: parsed.url,
+      path: parsed.path || '/',
+      headers: parsed.headers,
+      parameters: parsed.parameters,
+      body: parsed.body,
+      isCustomBody: parsed.body !== '{}',
+      variablesForTest: [],
+      responseVariableMapping: [],
+    })
+
+    clearOptions()
+    setShowCurlImport(false)
+    successToast({
+      title: 'cURL importado com sucesso!',
+    })
+  }
+
   const resolveSession = (
     variablesForTest: VariableForTest[],
     variables: Variable[]
@@ -407,48 +452,55 @@ export const WebhookSettings = React.memo(function WebhookSettings({
     if (!typebot || !step.options || !!Object.keys(errors).length) return
     setIsTestResponseLoading(true)
 
-    const options = step.options as WebhookOptions
-    const parameters = step.options.parameters.concat(options.headers)
+    try {
+      const options = step.options as WebhookOptions
+      const parameters = step.options.parameters.concat(options.headers)
 
-    const localWebhook = {
-      method: options.method,
-      body: options.body,
-      path: options.path,
-      parameters: parameters,
-      url: options.url,
-    }
+      const localWebhook = {
+        method: options.method,
+        body: options.body,
+        path: options.path,
+        parameters: parameters,
+        url: options.url,
+      }
 
-    const session = resolveSession(options.variablesForTest, typebot.variables)
+      const session = resolveSession(options.variablesForTest, typebot.variables)
 
-    const { data } = await sendOctaRequest({
-      url: `validate/webhook`,
-      method: 'POST',
-      body: {
-        session,
-        webhook: localWebhook,
-      },
-    })
+      const { data } = await sendOctaRequest({
+        url: `validate/webhook`,
+        method: 'POST',
+        body: {
+          session,
+          webhook: localWebhook,
+        },
+      })
 
-    const { response, success } = data
+      const { response, success } = data
+
+      setSuccessTest(success)
+      setResponseData(data)
+      if (!success) {
+        errorToast({
+          title: 'Não foi possível executar sua integração.',
+        })
+      } else {
+        successToast({
+          title: 'Sua integração está funcionando!',
+        })
+      }
 
-    setIsTestResponseLoading(false)
-    setSuccessTest(success)
-    setResponseData(data)
-    if (!success) {
+      if (typeof response === 'object') {
+        setTestResponse(JSON.stringify(response, undefined, 2))
+        setResponseKeys(getDeepKeys(response))
+      } else {
+        setTestResponse(response)
+      }
+    } catch (err) {
       errorToast({
-        title: 'Não foi possível executar sua integração.',
+        title: 'Erro ao executar a requisição. Verifique os dados e tente novamente.',
       })
-    } else {
-      successToast({
-        title: 'Sua integração está funcionando!',
-      })
-    }
-
-    if (typeof response === 'object') {
-      setTestResponse(JSON.stringify(response, undefined, 2))
-      setResponseKeys(getDeepKeys(response))
-    } else {
-      setTestResponse(response)
+    } finally {
+      setIsTestResponseLoading(false)
     }
   }
 
@@ -458,17 +510,31 @@ export const WebhookSettings = React.memo(function WebhookSettings({
     [responseKeys]
   )
 
+  if (showCurlImport) {
+    return <CurlImportView onImport={handleCurlImport} />
+  }
+
   return (
     <Stack spacing={4}>
       (
       <Stack>
         <HStack justify="space-between">
           <Text>O que você quer fazer ?</Text>
-          <DropdownList<HttpMethodsWebhook>
-            currentItem={step.options.method}
-            onItemSelect={handleMethodChange}
-            items={Object.values(HttpMethodsWebhook)}
-          />
+          <HStack>
+            <Button
+              colorScheme="blue"
+              size="md"
+              borderRadius="md"
+              onClick={() => setShowCurlImport(true)}
+            >
+              Importar cURL
+            </Button>
+            <DropdownList<HttpMethodsWebhook>
+              currentItem={step.options.method}
+              onItemSelect={handleMethodChange}
+              items={Object.values(HttpMethodsWebhook)}
+            />
+          </HStack>
         </HStack>
         <HStack justify="space-between">
           <Text color="gray.400" fontSize="sm">
@@ -684,7 +750,6 @@ export const WebhookSettings = React.memo(function WebhookSettings({
           </Accordion>
         )}
       </Stack>
-      as
     </Stack>
   )
 })

apps/builder/components/shared/Graph/Nodes/StepNode/StepNode/StepNode.tsx

@@ -65,6 +65,7 @@ import { BlockStack } from './StepNode.style'
 type StepNodeContextProps = {
   setIsPopoverOpened?: (isPopoverOpened: boolean) => void
   setIsModalOpen?: (isModalOpen: boolean) => void
+  registerBeforeClose?: (handler: (() => boolean) | null) => void
 }
 
 export const StepNodeContext = createContext<StepNodeContextProps>({})
@@ -122,6 +123,11 @@ export const StepNode = ({
   })
 
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
+  const beforeCloseRef = useRef<(() => boolean) | null>(null)
+
+  const registerBeforeClose = (handler: (() => boolean) | null) => {
+    beforeCloseRef.current = handler
+  }
 
   const [validationMessages, setValidationMessages] =
     useState<Array<ValidationMessage>>()
@@ -169,6 +175,8 @@ export const StepNode = ({
   }, [cleanup])
 
   const handleModalClose = () => {
+    if (beforeCloseRef.current?.()) return
+
     updateStep(indices, { ...step })
 
     refreshConnections(step)
@@ -245,7 +253,7 @@ export const StepNode = ({
       menuPosition="absolute"
     />
   ) : (
-    <StepNodeContext.Provider value={{ setIsPopoverOpened, setIsModalOpen }}>
+    <StepNodeContext.Provider value={{ setIsPopoverOpened, setIsModalOpen, registerBeforeClose }}>
       <ContextMenu<HTMLDivElement>
         renderMenu={() => <StepNodeContextMenu indices={indices} />}
       >