Merge branch 'main' into internal/add-vercel-functions-whatsapp-webhook

Author: baptisteArno

.env.dev.example

@@ -1,4 +1,3 @@
-# Make sure to change this to your own random string of 32 characters (https://docs.typebot.io/self-hosting/docker#2-add-the-required-configuration)
 ENCRYPTION_SECRET=H+KbL/OFrqbEuDy/1zX8bsPG+spXri3S
 
 DATABASE_URL=postgresql://postgres:typebot@localhost:5432/typebot

.vscode/settings.json

@@ -12,9 +12,10 @@
   "editor.tabSize": 2,
   "typescript.updateImportsOnFileMove.enabled": "always",
   "playwright.env": {
-    "DATABASE_URL": "postgresql://postgres:typebot@localhost:5432/typebot",
+    "DATABASE_URL": "postgresql://postgres:typebot@127.0.0.1:5432/typebot",
     "NEXT_PUBLIC_VIEWER_URL": "http://localhost:3001",
-    "NEXTAUTH_URL": "http://localhost:3000"
+    "NEXTAUTH_URL": "http://localhost:3000",
+    "ENCRYPTION_SECRET": "H+KbL/OFrqbEuDy/1zX8bsPG+spXri3S"
   },
   "[prisma]": {
     "editor.defaultFormatter": "Prisma.prisma"

apps/builder/package.json

@@ -13,6 +13,7 @@
     "format:check": "prettier --check ./src --ignore-path ../../.prettierignore"
   },
   "dependencies": {
+    "@typebot.io/theme": "workspace:*",
     "@braintree/sanitize-url": "7.0.1",
     "@chakra-ui/anatomy": "2.1.1",
     "@chakra-ui/react": "2.7.1",

apps/builder/src/components/ColorPicker.tsx

@@ -35,10 +35,16 @@ const colorsSelection: `#${string}`[] = [
 type Props = {
   value?: string
   defaultValue?: string
+  isDisabled?: boolean
   onColorChange: (color: string) => void
 }
 
-export const ColorPicker = ({ value, defaultValue, onColorChange }: Props) => {
+export const ColorPicker = ({
+  value,
+  defaultValue,
+  isDisabled,
+  onColorChange,
+}: Props) => {
   const { t } = useTranslate()
   const [color, setColor] = useState(defaultValue ?? '')
   const displayedValue = value ?? color
@@ -63,6 +69,7 @@ export const ColorPicker = ({ value, defaultValue, onColorChange }: Props) => {
           padding={0}
           borderRadius={3}
           borderWidth={1}
+          isDisabled={isDisabled}
         >
           <Box rounded="full" boxSize="14px" bgColor={displayedValue} />
         </Button>

apps/builder/src/components/ImageUploadContent/UnsplashPicker.tsx

@@ -141,6 +141,8 @@ export const UnsplashPicker = ({ imageSize, onImageSelect }: Props) => {
             fetchNewImages(query, 0)
           }}
           withVariableButton={false}
+          debounceTimeout={500}
+          forceDebounce
         />
         <Link
           isExternal

apps/builder/src/components/inputs/TextInput.tsx

@@ -24,6 +24,7 @@ import { env } from '@typebot.io/env'
 import { MoreInfoTooltip } from '../MoreInfoTooltip'
 
 export type TextInputProps = {
+  forceDebounce?: boolean
   defaultValue?: string
   onChange?: (value: string) => void
   debounceTimeout?: number
@@ -62,6 +63,7 @@ export const TextInput = forwardRef(function TextInput(
     autoComplete,
     isDisabled,
     autoFocus,
+    forceDebounce,
     onChange: _onChange,
     onFocus,
     onKeyUp,
@@ -83,7 +85,7 @@ export const TextInput = forwardRef(function TextInput(
   const onChange = useDebouncedCallback(
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onChange ?? (() => {}),
-    env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
+    env.NEXT_PUBLIC_E2E_TEST && !forceDebounce ? 0 : debounceTimeout
   )
 
   useEffect(() => {

apps/builder/src/features/blocks/inputs/payment/components/PaymentInputContent.tsx

@@ -1,6 +1,7 @@
 import { Text } from '@chakra-ui/react'
 import { useTranslate } from '@tolgee/react'
 import { PaymentInputBlock } from '@typebot.io/schemas'
+import { defaultPaymentInputOptions } from '@typebot.io/schemas/features/blocks/inputs/payment/constants'
 
 type Props = {
   block: PaymentInputBlock
@@ -9,11 +10,7 @@ type Props = {
 export const PaymentInputContent = ({ block }: Props) => {
   const { t } = useTranslate()
 
-  if (
-    !block.options?.amount ||
-    !block.options.credentialsId ||
-    !block.options.currency
-  )
+  if (!block.options?.amount || !block.options.credentialsId)
     return (
       <Text color="gray.500">
         {t('blocks.inputs.payment.placeholder.label')}
@@ -22,7 +19,7 @@ export const PaymentInputContent = ({ block }: Props) => {
   return (
     <Text noOfLines={1} pr="6">
       {t('blocks.inputs.payment.collect.label')} {block.options.amount}{' '}
-      {block.options.currency}
+      {block.options.currency ?? defaultPaymentInputOptions.currency}
     </Text>
   )
 }

apps/builder/src/features/blocks/inputs/payment/components/StripeConfigModal.tsx

@@ -163,6 +163,7 @@ export const StripeConfigModal = ({
                   placeholder="sk_test_..."
                   withVariableButton={false}
                   debounceTimeout={0}
+                  type="password"
                 />
               </HStack>
             </Stack>
@@ -187,6 +188,7 @@ export const StripeConfigModal = ({
                     placeholder="sk_live_..."
                     withVariableButton={false}
                     debounceTimeout={0}
+                    type="password"
                   />
                 </FormControl>
               </HStack>

apps/builder/src/features/blocks/inputs/phone/components/CountryCodeSelect.tsx

@@ -70,7 +70,7 @@ export const CountryCodeSelect = ({ countryCode, onSelect }: Props) => {
       <option value="DK">Denmark (+45)</option>
       <option value="DJ">Djibouti (+253)</option>
       <option value="DM">Dominica (+1809)</option>
-      <option value="DO">Dominican Republic (+1809)</option>
+      <option value="DO">Dominican Republic (+18XX)</option>
       <option value="EC">Ecuador (+593)</option>
       <option value="EG">Egypt (+20)</option>
       <option value="SV">El Salvador (+503)</option>

apps/builder/src/features/blocks/integrations/makeCom/components/MakeComContent.tsx

@@ -1,19 +1,16 @@
 import { Text } from '@chakra-ui/react'
 import { MakeComBlock } from '@typebot.io/schemas'
-import { isNotDefined } from '@typebot.io/lib'
 
 type Props = {
   block: MakeComBlock
 }
 
 export const MakeComContent = ({ block }: Props) => {
-  const webhook = block.options?.webhook
-
-  if (isNotDefined(webhook?.body))
+  if (!block.options?.webhook?.url)
     return <Text color="gray.500">Configure...</Text>
   return (
     <Text noOfLines={1} pr="6">
-      {webhook?.url ? 'Trigger scenario' : 'Disabled'}
+      Trigger scenario
     </Text>
   )
 }