feat(editor): ✨ Payment input

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

@@ -20,6 +20,7 @@ import {
 } from './contents'
 import { ConfigureContent } from './contents/ConfigureContent'
 import { ImageBubbleContent } from './contents/ImageBubbleContent'
+import { PaymentInputContent } from './contents/PaymentInputContent'
 import { PlaceholderContent } from './contents/PlaceholderContent'
 import { SendEmailContent } from './contents/SendEmailContent'
 import { TypebotLinkContent } from './contents/TypebotLinkContent'
@@ -68,6 +69,9 @@ export const StepNodeContent = ({ step, indices }: Props) => {
     case InputStepType.CHOICE: {
       return <ItemNodesList step={step} indices={indices} />
     }
+    case InputStepType.PAYMENT: {
+      return <PaymentInputContent step={step} />
+    }
     case LogicStepType.SET_VARIABLE: {
       return <SetVariableContent step={step} />
     }

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/PaymentInputContent.tsx

@@ -0,0 +1,20 @@
+import { Text } from '@chakra-ui/react'
+import { PaymentInputStep } from 'models'
+
+type Props = {
+  step: PaymentInputStep
+}
+
+export const PaymentInputContent = ({ step }: Props) => {
+  if (
+    !step.options.amount ||
+    !step.options.credentialsId ||
+    !step.options.currency
+  )
+    return <Text color="gray.500">Configure...</Text>
+  return (
+    <Text noOfLines={0} pr="6">
+      Collect {step.options.amount} {step.options.currency}
+    </Text>
+  )
+}