-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as published
- by the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see
-Typebot is an open-source chatbot builder. It allows you to create advanced chatbots visually, embed them anywhere on your web/mobile apps, and collect results in real-time
+Typebot is an Fair Source chatbot builder. It allows you to create advanced chatbots visually, embed them anywhere on your web/mobile apps, and collect results in real-time
@@ -79,7 +79,7 @@ Built for **developers**:
The easiest way to get started with Typebot is with [the official managed service in the Cloud](https://app.typebot.io). You'll have high availability, backups, security, and maintenance all managed for you by me, [Baptiste, Typebot's founder](https://twitter.com/baptisteArno).
The cloud version can save a substantial amount of developer time and resources. For most sites this ends up being the best value option and the revenue goes to funding the maintenance and further development of Typebot.
-So you’ll be supporting open source software and getting a great service! 💙
+So you’ll be supporting fair source software and getting a great service! 💙
## Support & Community
@@ -110,4 +110,4 @@ Made with [contrib.rocks](https://contrib.rocks).
## License
-Most of Typebot's code is open-source under the GNU Affero General Public License Version 3 (AGPLv3). You will find more information about the license and how to comply with it [here](https://docs.typebot.io/self-hosting#license-requirements).
+Typebot's code is protected under a Functional Source License. You will find more information about the license and how to comply with it [here](https://docs.typebot.io/self-hosting#license-requirements).
diff --git a/apps/builder/.eslintignore b/apps/builder/.eslintignore
deleted file mode 100644
index ebd9b0fa7c..0000000000
--- a/apps/builder/.eslintignore
+++ /dev/null
@@ -1 +0,0 @@
-src/test/reporters
\ No newline at end of file
diff --git a/apps/builder/.eslintrc.js b/apps/builder/.eslintrc.js
deleted file mode 100644
index b56159ea9c..0000000000
--- a/apps/builder/.eslintrc.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
- root: true,
- extends: ['custom'],
-}
diff --git a/apps/builder/next-env.d.ts b/apps/builder/next-env.d.ts
index 4f11a03dc6..a4a7b3f5cf 100644
--- a/apps/builder/next-env.d.ts
+++ b/apps/builder/next-env.d.ts
@@ -2,4 +2,4 @@
///
-)
+);
diff --git a/apps/builder/src/components/ColorPicker.tsx b/apps/builder/src/components/ColorPicker.tsx
index 9fe01a6b0e..de03834af2 100644
--- a/apps/builder/src/components/ColorPicker.tsx
+++ b/apps/builder/src/components/ColorPicker.tsx
@@ -1,43 +1,43 @@
import {
+ Box,
+ Button,
+ type ButtonProps,
+ Center,
+ Input,
Popover,
- PopoverTrigger,
- PopoverContent,
PopoverArrow,
+ PopoverBody,
PopoverCloseButton,
+ PopoverContent,
PopoverHeader,
- Center,
- PopoverBody,
+ PopoverTrigger,
SimpleGrid,
- Input,
- Button,
Stack,
- ButtonProps,
- Box,
-} from '@chakra-ui/react'
-import { useTranslate } from '@tolgee/react'
-import React, { useState } from 'react'
-import tinyColor from 'tinycolor2'
-import { useDebouncedCallback } from 'use-debounce'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import React, { useState } from "react";
+import tinyColor from "tinycolor2";
+import { useDebouncedCallback } from "use-debounce";
const colorsSelection: `#${string}`[] = [
- '#666460',
- '#FFFFFF',
- '#A87964',
- '#D09C46',
- '#DE8031',
- '#598E71',
- '#4A8BB2',
- '#9B74B7',
- '#C75F96',
- '#0042DA',
-]
+ "#666460",
+ "#FFFFFF",
+ "#A87964",
+ "#D09C46",
+ "#DE8031",
+ "#598E71",
+ "#4A8BB2",
+ "#9B74B7",
+ "#C75F96",
+ "#0042DA",
+];
type Props = {
- value?: string
- defaultValue?: string
- isDisabled?: boolean
- onColorChange: (color: string) => void
-}
+ value?: string;
+ defaultValue?: string;
+ isDisabled?: boolean;
+ onColorChange: (color: string) => void;
+};
export const ColorPicker = ({
value,
@@ -45,25 +45,25 @@ export const ColorPicker = ({
isDisabled,
onColorChange,
}: Props) => {
- const { t } = useTranslate()
- const [color, setColor] = useState(defaultValue ?? '')
- const displayedValue = value ?? color
+ const { t } = useTranslate();
+ const [color, setColor] = useState(defaultValue ?? "");
+ const displayedValue = value ?? color;
const handleColorChange = (color: string) => {
- setColor(color)
- onColorChange(color)
- }
+ setColor(color);
+ onColorChange(color);
+ };
const handleClick = (color: string) => () => {
- setColor(color)
- onColorChange(color)
- }
+ setColor(color);
+ onColorChange(color);
+ };
return (
{displayedValue}
@@ -98,7 +98,7 @@ export const ColorPicker = ({
padding={0}
minWidth="unset"
borderRadius={3}
- borderWidth={color === '#FFFFFF' ? 1 : undefined}
+ borderWidth={color === "#FFFFFF" ? 1 : undefined}
_hover={{ background: color }}
onClick={handleClick(color)}
/>
@@ -108,7 +108,7 @@ export const ColorPicker = ({
borderRadius={3}
marginTop={3}
placeholder="#2a9d8f"
- aria-label={t('colorPicker.colorValue.ariaLabel')}
+ aria-label={t("colorPicker.colorValue.ariaLabel")}
size="sm"
value={displayedValue}
onChange={(e) => handleColorChange(e.target.value)}
@@ -118,25 +118,25 @@ export const ColorPicker = ({
color={displayedValue}
onColorChange={handleColorChange}
>
- {t('colorPicker.advancedColors')}
+ {t("colorPicker.advancedColors")}
- )
-}
+ );
+};
const NativeColorPicker = ({
color,
onColorChange,
...props
}: {
- color: string
- onColorChange: (color: string) => void
+ color: string;
+ onColorChange: (color: string) => void;
} & ButtonProps) => {
const debouncedOnColorChange = useDebouncedCallback((color: string) => {
- onColorChange(color)
- }, 200)
+ onColorChange(color);
+ }, 200);
return (
<>
@@ -151,5 +151,5 @@ const NativeColorPicker = ({
onChange={(e) => debouncedOnColorChange(e.target.value)}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/ConfirmModal.tsx b/apps/builder/src/components/ConfirmModal.tsx
index 0ac9b5469f..32c55e7559 100644
--- a/apps/builder/src/components/ConfirmModal.tsx
+++ b/apps/builder/src/components/ConfirmModal.tsx
@@ -1,4 +1,3 @@
-import { useRef, useState } from 'react'
import {
AlertDialog,
AlertDialogBody,
@@ -7,18 +6,19 @@ import {
AlertDialogHeader,
AlertDialogOverlay,
Button,
-} from '@chakra-ui/react'
-import { useTranslate } from '@tolgee/react'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { useRef, useState } from "react";
type ConfirmDeleteModalProps = {
- isOpen: boolean
- onConfirm: () => Promise | unknown
- onClose: () => void
- message: JSX.Element
- title?: string
- confirmButtonLabel: string
- confirmButtonColor?: 'blue' | 'red'
-}
+ isOpen: boolean;
+ onConfirm: () => Promise | unknown;
+ onClose: () => void;
+ message: JSX.Element;
+ title?: string;
+ confirmButtonLabel: string;
+ confirmButtonColor?: "blue" | "red";
+};
export const ConfirmModal = ({
title,
@@ -27,23 +27,23 @@ export const ConfirmModal = ({
onClose,
confirmButtonLabel,
onConfirm,
- confirmButtonColor = 'red',
+ confirmButtonColor = "red",
}: ConfirmDeleteModalProps) => {
- const { t } = useTranslate()
- const [confirmLoading, setConfirmLoading] = useState(false)
- const cancelRef = useRef(null)
+ const { t } = useTranslate();
+ const [confirmLoading, setConfirmLoading] = useState(false);
+ const cancelRef = useRef(null);
const onConfirmClick = async () => {
- setConfirmLoading(true)
+ setConfirmLoading(true);
try {
- await onConfirm()
+ await onConfirm();
} catch (e) {
- setConfirmLoading(false)
- return setConfirmLoading(false)
+ setConfirmLoading(false);
+ return setConfirmLoading(false);
}
- setConfirmLoading(false)
- onClose()
- }
+ setConfirmLoading(false);
+ onClose();
+ };
return (
- {title ?? t('confirmModal.defaultTitle')}
+ {title ?? t("confirmModal.defaultTitle")}
{message}
- {t('cancel')}
+ {t("cancel")}
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/ContextMenu.tsx b/apps/builder/src/components/ContextMenu.tsx
index c40f1767c1..80689d6473 100644
--- a/apps/builder/src/components/ContextMenu.tsx
+++ b/apps/builder/src/components/ContextMenu.tsx
@@ -1,82 +1,77 @@
-import * as React from 'react'
import {
- MutableRefObject,
- useCallback,
- useEffect,
- useRef,
- useState,
-} from 'react'
-import {
- useEventListener,
- Portal,
Menu,
MenuButton,
- PortalProps,
- MenuButtonProps,
- MenuProps,
-} from '@chakra-ui/react'
+ type MenuButtonProps,
+ type MenuProps,
+ Portal,
+ type PortalProps,
+ useEventListener,
+} from "@chakra-ui/react";
+import type { MutableRefObject } from "react";
+import * as React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
export interface ContextMenuProps {
- onOpen?: () => void
- renderMenu: ({ onClose }: { onClose: () => void }) => JSX.Element | null
+ onOpen?: () => void;
+ renderMenu: ({ onClose }: { onClose: () => void }) => JSX.Element | null;
children: (
ref: MutableRefObject,
- isOpened: boolean
- ) => JSX.Element | null
- menuProps?: MenuProps
- portalProps?: PortalProps
- menuButtonProps?: MenuButtonProps
- isDisabled?: boolean
+ isOpened: boolean,
+ ) => JSX.Element | null;
+ menuProps?: MenuProps;
+ portalProps?: PortalProps;
+ menuButtonProps?: MenuButtonProps;
+ isDisabled?: boolean;
}
export function ContextMenu(
- props: ContextMenuProps
+ props: ContextMenuProps,
) {
- const [isOpened, setIsOpened] = useState(false)
- const [isRendered, setIsRendered] = useState(false)
- const [isDeferredOpen, setIsDeferredOpen] = useState(false)
- const [position, setPosition] = useState<[number, number]>([0, 0])
- const targetRef = useRef(null)
+ const [isOpened, setIsOpened] = useState(false);
+ const [isRendered, setIsRendered] = useState(false);
+ const [isDeferredOpen, setIsDeferredOpen] = useState(false);
+ const [position, setPosition] = useState<[number, number]>([0, 0]);
+ const targetRef = useRef(null);
useEffect(() => {
if (isOpened) {
setTimeout(() => {
- setIsRendered(true)
+ setIsRendered(true);
setTimeout(() => {
- setIsDeferredOpen(true)
- })
- })
+ setIsDeferredOpen(true);
+ });
+ });
} else {
- setIsDeferredOpen(false)
+ setIsDeferredOpen(false);
const timeout = setTimeout(() => {
- setIsRendered(isOpened)
- }, 1000)
- return () => clearTimeout(timeout)
+ setIsRendered(isOpened);
+ }, 1000);
+ return () => clearTimeout(timeout);
}
- }, [isOpened])
+ }, [isOpened]);
useEventListener(
- 'contextmenu',
+ "contextmenu",
(e) => {
- if (props.isDisabled) return
+ if (props.isDisabled) return;
if (e.currentTarget === targetRef.current) {
- e.preventDefault()
- e.stopPropagation()
- props.onOpen?.()
- setIsOpened(true)
- setPosition([e.pageX, e.pageY])
+ e.preventDefault();
+ e.stopPropagation();
+ props.onOpen?.();
+ setIsOpened(true);
+ setPosition([e.pageX, e.pageY]);
} else {
- setIsOpened(false)
+ setIsOpened(false);
}
},
- targetRef.current
- )
+ targetRef.current,
+ );
const onCloseHandler = useCallback(() => {
- props.menuProps?.onClose?.()
- setIsOpened(false)
+ props.menuProps?.onClose?.();
+ setIsOpened(false);
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [props.menuProps?.onClose, setIsOpened])
+ }, [props.menuProps?.onClose, setIsOpened]);
return (
<>
@@ -94,10 +89,10 @@ export function ContextMenu(
w={1}
h={1}
style={{
- position: 'absolute',
+ position: "absolute",
left: position[0],
top: position[1],
- cursor: 'default',
+ cursor: "default",
}}
{...props.menuButtonProps}
/>
@@ -106,5 +101,5 @@ export function ContextMenu(
)}
- )
+ );
}
diff --git a/apps/builder/src/components/CopyButton.tsx b/apps/builder/src/components/CopyButton.tsx
index 9dcbb154e8..5a7808a214 100644
--- a/apps/builder/src/components/CopyButton.tsx
+++ b/apps/builder/src/components/CopyButton.tsx
@@ -1,37 +1,37 @@
-import React, { useEffect } from 'react'
-import { ButtonProps, Button, useClipboard } from '@chakra-ui/react'
-import { useTranslate } from '@tolgee/react'
+import { Button, type ButtonProps, useClipboard } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import React, { useEffect } from "react";
interface CopyButtonProps extends ButtonProps {
- textToCopy: string
- onCopied?: () => void
+ textToCopy: string;
+ onCopied?: () => void;
text?: {
- copy: string
- copied: string
- }
+ copy: string;
+ copied: string;
+ };
}
export const CopyButton = (props: CopyButtonProps) => {
- const { textToCopy, onCopied, ...buttonProps } = props
- const { hasCopied, onCopy, setValue } = useClipboard(textToCopy)
- const { t } = useTranslate()
+ const { textToCopy, onCopied, ...buttonProps } = props;
+ const { hasCopied, onCopy, setValue } = useClipboard(textToCopy);
+ const { t } = useTranslate();
useEffect(() => {
- setValue(textToCopy)
- }, [setValue, textToCopy])
+ setValue(textToCopy);
+ }, [setValue, textToCopy]);
return (
{
- onCopy()
- if (onCopied) onCopied()
+ onCopy();
+ if (onCopied) onCopied();
}}
{...buttonProps}
>
{!hasCopied
- ? props.text?.copy ?? t('copy')
- : props.text?.copied ?? t('copied')}
+ ? (props.text?.copy ?? t("copy"))
+ : (props.text?.copied ?? t("copied"))}
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/DropdownList.tsx b/apps/builder/src/components/DropdownList.tsx
index bab7be1905..72a96a1deb 100644
--- a/apps/builder/src/components/DropdownList.tsx
+++ b/apps/builder/src/components/DropdownList.tsx
@@ -1,7 +1,7 @@
+import { ChevronLeftIcon } from "@/components/icons";
import {
Button,
- ButtonProps,
- chakra,
+ type ButtonProps,
FormControl,
FormHelperText,
FormLabel,
@@ -12,34 +12,35 @@ import {
MenuList,
Portal,
Stack,
-} from '@chakra-ui/react'
-import { ChevronLeftIcon } from '@/components/icons'
-import React, { ReactNode } from 'react'
-import { MoreInfoTooltip } from './MoreInfoTooltip'
+ chakra,
+} from "@chakra-ui/react";
+import type { ReactNode } from "react";
+import React from "react";
+import { MoreInfoTooltip } from "./MoreInfoTooltip";
type Item =
| string
| number
| {
- label: string
- value: string
- }
+ label: string;
+ value: string;
+ };
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Props = {
- currentItem: string | number | undefined
+ currentItem: string | number | undefined;
onItemSelect: (
value: T extends string ? T : T extends number ? T : string,
- item?: T
- ) => void
- items: readonly T[]
- placeholder?: string
- label?: string
- isRequired?: boolean
- direction?: 'row' | 'column'
- helperText?: ReactNode
- moreInfoTooltip?: string
-}
+ item?: T,
+ ) => void;
+ items: readonly T[];
+ placeholder?: string;
+ label?: string;
+ isRequired?: boolean;
+ direction?: "row" | "column";
+ helperText?: ReactNode;
+ moreInfoTooltip?: string;
+};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const DropdownList = ({
@@ -49,31 +50,33 @@ export const DropdownList = ({
placeholder,
label,
isRequired,
- direction = 'column',
+ direction = "column",
helperText,
moreInfoTooltip,
...props
}: Props & ButtonProps) => {
const handleMenuItemClick = (item: T) => () => {
- if (typeof item === 'string' || typeof item === 'number')
- onItemSelect(item as T extends string ? T : T extends number ? T : string)
+ if (typeof item === "string" || typeof item === "number")
+ onItemSelect(
+ item as T extends string ? T : T extends number ? T : string,
+ );
else
onItemSelect(
item.value as T extends string ? T : T extends number ? T : string,
- item
- )
- }
+ item,
+ );
+ };
return (
{label && (
- {label}{' '}
+ {label}{" "}
{moreInfoTooltip && (
{moreInfoTooltip}
)}
@@ -82,7 +85,7 @@ export const DropdownList = ({
({
{currentItem
? getItemLabel(
items?.find((item) =>
- typeof item === 'string' || typeof item === 'number'
+ typeof item === "string" || typeof item === "number"
? currentItem === item
- : currentItem === item.value
- )
+ : currentItem === item.value,
+ ),
)
- : placeholder ?? 'Select an item'}
+ : (placeholder ?? "Select an item")}
-
+
{items.map((item) => (
({
textOverflow="ellipsis"
onClick={handleMenuItemClick(item)}
>
- {typeof item === 'object' ? item.label : item}
+ {typeof item === "object" ? item.label : item}
))}
@@ -122,11 +125,11 @@ export const DropdownList = ({
{helperText && {helperText} }
- )
-}
+ );
+};
const getItemLabel = (item?: Item) => {
- if (!item) return ''
- if (typeof item === 'object') return item.label
- return item
-}
+ if (!item) return "";
+ if (typeof item === "object") return item.label;
+ return item;
+};
diff --git a/apps/builder/src/components/EditableEmojiOrImageIcon.tsx b/apps/builder/src/components/EditableEmojiOrImageIcon.tsx
index fad061edaf..6b145d631c 100644
--- a/apps/builder/src/components/EditableEmojiOrImageIcon.tsx
+++ b/apps/builder/src/components/EditableEmojiOrImageIcon.tsx
@@ -1,27 +1,28 @@
+import { useParentModal } from "@/features/graph/providers/ParentModalProvider";
+import type { FilePathUploadProps } from "@/features/upload/api/generateUploadUrl";
import {
+ Flex,
Popover,
+ PopoverContent,
+ PopoverTrigger,
+ Portal,
Tooltip,
chakra,
- PopoverTrigger,
- PopoverContent,
- Flex,
useColorModeValue,
- Portal,
-} from '@chakra-ui/react'
-import React, { RefObject } from 'react'
-import { EmojiOrImageIcon } from './EmojiOrImageIcon'
-import { ImageUploadContent } from './ImageUploadContent'
-import { FilePathUploadProps } from '@/features/upload/api/generateUploadUrl'
-import { useTranslate } from '@tolgee/react'
-import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import type { RefObject } from "react";
+import React from "react";
+import { EmojiOrImageIcon } from "./EmojiOrImageIcon";
+import { ImageUploadContent } from "./ImageUploadContent";
type Props = {
- uploadFileProps: FilePathUploadProps
- icon?: string | null
- parentModalRef?: RefObject | undefined
- onChangeIcon: (icon: string) => void
- boxSize?: string
-}
+ uploadFileProps: FilePathUploadProps;
+ icon?: string | null;
+ parentModalRef?: RefObject | undefined;
+ onChangeIcon: (icon: string) => void;
+ boxSize?: string;
+};
export const EditableEmojiOrImageIcon = ({
uploadFileProps,
@@ -29,15 +30,15 @@ export const EditableEmojiOrImageIcon = ({
onChangeIcon,
boxSize,
}: Props) => {
- const { t } = useTranslate()
- const { ref: parentModalRef } = useParentModal()
- const bg = useColorModeValue('gray.100', 'gray.700')
+ const { t } = useTranslate();
+ const { ref: parentModalRef } = useParentModal();
+ const bg = useColorModeValue("gray.100", "gray.700");
return (
{({ onClose }: { onClose: () => void }) => (
<>
-
+
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/EmojiOrImageIcon.tsx b/apps/builder/src/components/EmojiOrImageIcon.tsx
index f68da2f986..a5c61478dd 100644
--- a/apps/builder/src/components/EmojiOrImageIcon.tsx
+++ b/apps/builder/src/components/EmojiOrImageIcon.tsx
@@ -1,29 +1,29 @@
-import { ToolIcon } from '@/components/icons'
-import React from 'react'
-import { chakra, IconProps, Image } from '@chakra-ui/react'
-import { isSvgSrc } from '@typebot.io/lib/utils'
+import { ToolIcon } from "@/components/icons";
+import { type IconProps, Image, chakra } from "@chakra-ui/react";
+import { isSvgSrc } from "@typebot.io/lib/utils";
+import React from "react";
type Props = {
- icon?: string | null
- emojiFontSize?: string
- boxSize?: string
- defaultIcon?: (props: IconProps) => JSX.Element
-}
+ icon?: string | null;
+ emojiFontSize?: string;
+ boxSize?: string;
+ defaultIcon?: (props: IconProps) => JSX.Element;
+};
export const EmojiOrImageIcon = ({
icon,
- boxSize = '25px',
+ boxSize = "25px",
emojiFontSize,
defaultIcon = ToolIcon,
}: Props) => {
return (
<>
{icon ? (
- icon.startsWith('http') || isSvgSrc(icon) ? (
+ icon.startsWith("http") || isSvgSrc(icon) ? (
@@ -21,4 +21,4 @@ export const GoogleLogo = (props: IconProps) => (
/>
-)
+);
diff --git a/apps/builder/src/components/ImageUploadContent/GiphyPicker.tsx b/apps/builder/src/components/ImageUploadContent/GiphyPicker.tsx
index f94eb74ca5..8b00563047 100644
--- a/apps/builder/src/components/ImageUploadContent/GiphyPicker.tsx
+++ b/apps/builder/src/components/ImageUploadContent/GiphyPicker.tsx
@@ -1,25 +1,25 @@
-import { Flex, Stack, Text } from '@chakra-ui/react'
-import { GiphyFetch } from '@giphy/js-fetch-api'
-import { Grid } from '@giphy/react-components'
-import { GiphyLogo } from '../logos/GiphyLogo'
-import React, { useState } from 'react'
-import { TextInput } from '../inputs'
-import { env } from '@typebot.io/env'
+import { Flex, Stack, Text } from "@chakra-ui/react";
+import { GiphyFetch } from "@giphy/js-fetch-api";
+import { Grid } from "@giphy/react-components";
+import { env } from "@typebot.io/env";
+import React, { useState } from "react";
+import { TextInput } from "../inputs";
+import { GiphyLogo } from "../logos/GiphyLogo";
type GiphySearchFormProps = {
- onSubmit: (url: string) => void
-}
+ onSubmit: (url: string) => void;
+};
-const giphyFetch = new GiphyFetch(env.NEXT_PUBLIC_GIPHY_API_KEY ?? '')
+const giphyFetch = new GiphyFetch(env.NEXT_PUBLIC_GIPHY_API_KEY ?? "");
export const GiphyPicker = ({ onSubmit }: GiphySearchFormProps) => {
- const [inputValue, setInputValue] = useState('')
+ const [inputValue, setInputValue] = useState("");
const fetchGifs = (offset: number) =>
- giphyFetch.search(inputValue, { offset, limit: 10 })
+ giphyFetch.search(inputValue, { offset, limit: 10 });
const fetchGifsTrending = (offset: number) =>
- giphyFetch.trending({ offset, limit: 10 })
+ giphyFetch.trending({ offset, limit: 10 });
return !env.NEXT_PUBLIC_GIPHY_API_KEY ? (
NEXT_PUBLIC_GIPHY_API_KEY is missing in environment
@@ -39,15 +39,15 @@ export const GiphyPicker = ({ onSubmit }: GiphySearchFormProps) => {
{
- e.preventDefault()
- onSubmit(gif.images.downsized.url)
+ e.preventDefault();
+ onSubmit(gif.images.downsized.url);
}}
- fetchGifs={inputValue === '' ? fetchGifsTrending : fetchGifs}
+ fetchGifs={inputValue === "" ? fetchGifsTrending : fetchGifs}
width={475}
columns={3}
className="my-4"
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/ImageUploadContent/IconPicker.tsx b/apps/builder/src/components/ImageUploadContent/IconPicker.tsx
index a1ed01541c..867dfa698e 100644
--- a/apps/builder/src/components/ImageUploadContent/IconPicker.tsx
+++ b/apps/builder/src/components/ImageUploadContent/IconPicker.tsx
@@ -1,113 +1,115 @@
import {
Button,
- Stack,
- Image,
HStack,
- useColorModeValue,
+ Image,
SimpleGrid,
+ Stack,
Text,
-} from '@chakra-ui/react'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { iconNames } from './iconNames'
-import { TextInput } from '../inputs'
-import { ColorPicker } from '../ColorPicker'
-import { useTranslate } from '@tolgee/react'
+ useColorModeValue,
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ColorPicker } from "../ColorPicker";
+import { TextInput } from "../inputs";
+import { iconNames } from "./iconNames";
-const batchSize = 200
+const batchSize = 200;
type Props = {
- onIconSelected: (url: string) => void
-}
+ onIconSelected: (url: string) => void;
+};
-const localStorageRecentIconNamesKey = 'recentIconNames'
-const localStorageDefaultIconColorKey = 'defaultIconColor'
+const localStorageRecentIconNamesKey = "recentIconNames";
+const localStorageDefaultIconColorKey = "defaultIconColor";
export const IconPicker = ({ onIconSelected }: Props) => {
- const initialIconColor = useColorModeValue('#222222', '#ffffff')
- const scrollContainer = useRef(null)
- const bottomElement = useRef(null)
+ const initialIconColor = useColorModeValue("#222222", "#ffffff");
+ const scrollContainer = useRef(null);
+ const bottomElement = useRef(null);
const [displayedIconNames, setDisplayedIconNames] = useState(
- iconNames.slice(0, batchSize)
- )
- const searchQuery = useRef('')
- const [selectedColor, setSelectedColor] = useState(initialIconColor)
+ iconNames.slice(0, batchSize),
+ );
+ const searchQuery = useRef("");
+ const [selectedColor, setSelectedColor] = useState(initialIconColor);
const isWhite = useMemo(
() =>
- initialIconColor === '#222222' &&
- (selectedColor.toLowerCase() === '#ffffff' ||
- selectedColor.toLowerCase() === '#fff' ||
- selectedColor === 'white'),
- [initialIconColor, selectedColor]
- )
- const [recentIconNames, setRecentIconNames] = useState([])
- const { t } = useTranslate()
+ initialIconColor === "#222222" &&
+ (selectedColor.toLowerCase() === "#ffffff" ||
+ selectedColor.toLowerCase() === "#fff" ||
+ selectedColor === "white"),
+ [initialIconColor, selectedColor],
+ );
+ const [recentIconNames, setRecentIconNames] = useState([]);
+ const { t } = useTranslate();
useEffect(() => {
- const recentIconNames = localStorage.getItem(localStorageRecentIconNamesKey)
+ const recentIconNames = localStorage.getItem(
+ localStorageRecentIconNamesKey,
+ );
const defaultIconColor = localStorage.getItem(
- localStorageDefaultIconColorKey
- )
- if (recentIconNames) setRecentIconNames(JSON.parse(recentIconNames))
- if (defaultIconColor) setSelectedColor(defaultIconColor)
- }, [])
+ localStorageDefaultIconColorKey,
+ );
+ if (recentIconNames) setRecentIconNames(JSON.parse(recentIconNames));
+ if (defaultIconColor) setSelectedColor(defaultIconColor);
+ }, []);
useEffect(() => {
- if (!bottomElement.current) return
+ if (!bottomElement.current) return;
const observer = new IntersectionObserver(handleObserver, {
root: scrollContainer.current,
- rootMargin: '200px',
- })
- if (bottomElement.current) observer.observe(bottomElement.current)
+ rootMargin: "200px",
+ });
+ if (bottomElement.current) observer.observe(bottomElement.current);
return () => {
- observer.disconnect()
- }
- }, [])
+ observer.disconnect();
+ };
+ }, []);
const handleObserver = (entities: IntersectionObserverEntry[]) => {
- const target = entities[0]
+ const target = entities[0];
if (target.isIntersecting && searchQuery.current.length <= 2)
setDisplayedIconNames((displayedIconNames) => [
...displayedIconNames,
...iconNames.slice(
displayedIconNames.length,
- displayedIconNames.length + batchSize
+ displayedIconNames.length + batchSize,
),
- ])
- }
+ ]);
+ };
const searchIcon = async (query: string) => {
- searchQuery.current = query
+ searchQuery.current = query;
if (query.length <= 2)
- return setDisplayedIconNames(iconNames.slice(0, batchSize))
+ return setDisplayedIconNames(iconNames.slice(0, batchSize));
const filteredIconNames = iconNames.filter((iconName) =>
- iconName.toLowerCase().includes(query.toLowerCase())
- )
- setDisplayedIconNames(filteredIconNames)
- }
+ iconName.toLowerCase().includes(query.toLowerCase()),
+ );
+ setDisplayedIconNames(filteredIconNames);
+ };
const updateColor = (color: string) => {
- if (!color.startsWith('#')) return
- localStorage.setItem(localStorageDefaultIconColorKey, color)
- setSelectedColor(color)
- }
+ if (!color.startsWith("#")) return;
+ localStorage.setItem(localStorageDefaultIconColorKey, color);
+ setSelectedColor(color);
+ };
const selectIcon = async (iconName: string) => {
localStorage.setItem(
localStorageRecentIconNamesKey,
- JSON.stringify([...new Set([iconName, ...recentIconNames].slice(0, 30))])
- )
- const svg = await (await fetch(`/icons/${iconName}.svg`)).text()
+ JSON.stringify([...new Set([iconName, ...recentIconNames].slice(0, 30))]),
+ );
+ const svg = await (await fetch(`/icons/${iconName}.svg`)).text();
const dataUri = `data:image/svg+xml;utf8,${svg
- .replace('
{
{recentIconNames.map((iconName) => (
{
{displayedIconNames.map((iconName) => (
{
- )
-}
+ );
+};
const Icon = ({ name, color }: { name: string; color: string }) => {
- const [svg, setSvg] = useState('')
+ const [svg, setSvg] = useState("");
const dataUri = useMemo(
() =>
`data:image/svg+xml;utf8,${svg.replace(
- ' {
fetch(`/icons/${name}.svg`)
.then((response) => response.text())
- .then((text) => setSvg(text))
- }, [name])
+ .then((text) => setSvg(text));
+ }, [name]);
- if (!svg) return null
+ if (!svg) return null;
- return (
- initialTab ?? displayedTabs[0]
- )
+ initialTab ?? displayedTabs[0],
+ );
const handleSubmit = (url: string) => {
- onSubmit(url)
- onClose && onClose()
- }
+ onSubmit(url);
+ onClose && onClose();
+ };
return (
- {displayedTabs.includes('link') && (
+ {displayedTabs.includes("link") && (
setCurrentTab('link')}
+ variant={currentTab === "link" ? "solid" : "ghost"}
+ onClick={() => setCurrentTab("link")}
size="sm"
>
Link
)}
- {displayedTabs.includes('upload') && (
+ {displayedTabs.includes("upload") && (
setCurrentTab('upload')}
+ variant={currentTab === "upload" ? "solid" : "ghost"}
+ onClick={() => setCurrentTab("upload")}
size="sm"
>
Upload
)}
- {displayedTabs.includes('emoji') && (
+ {displayedTabs.includes("emoji") && (
setCurrentTab('emoji')}
+ variant={currentTab === "emoji" ? "solid" : "ghost"}
+ onClick={() => setCurrentTab("emoji")}
size="sm"
>
Emoji
)}
- {displayedTabs.includes('giphy') && (
+ {displayedTabs.includes("giphy") && (
setCurrentTab('giphy')}
+ variant={currentTab === "giphy" ? "solid" : "ghost"}
+ onClick={() => setCurrentTab("giphy")}
size="sm"
>
Giphy
)}
- {displayedTabs.includes('unsplash') && (
+ {displayedTabs.includes("unsplash") && (
setCurrentTab('unsplash')}
+ variant={currentTab === "unsplash" ? "solid" : "ghost"}
+ onClick={() => setCurrentTab("unsplash")}
size="sm"
>
Unsplash
)}
- {displayedTabs.includes('icon') && (
+ {displayedTabs.includes("icon") && (
setCurrentTab('icon')}
+ variant={currentTab === "icon" ? "solid" : "ghost"}
+ onClick={() => setCurrentTab("icon")}
size="sm"
>
Icon
@@ -133,8 +134,8 @@ export const ImageUploadContent = ({
linkWithVariableButton={linkWithVariableButton}
/>
- )
-}
+ );
+};
const BodyContent = ({
uploadFileProps,
@@ -144,49 +145,49 @@ const BodyContent = ({
linkWithVariableButton,
onSubmit,
}: {
- uploadFileProps?: FilePathUploadProps
- tab: Tabs
- defaultUrl?: string
- imageSize: 'small' | 'regular' | 'thumb'
- linkWithVariableButton?: boolean
- onSubmit: (url: string) => void
+ uploadFileProps?: FilePathUploadProps;
+ tab: Tabs;
+ defaultUrl?: string;
+ imageSize: "small" | "regular" | "thumb";
+ linkWithVariableButton?: boolean;
+ onSubmit: (url: string) => void;
}) => {
switch (tab) {
- case 'upload': {
- if (!uploadFileProps) return null
+ case "upload": {
+ if (!uploadFileProps) return null;
return (
@@ -196,31 +197,31 @@ const UploadFileContent = ({
onFileUploaded={onNewUrl}
colorScheme="blue"
>
- {t('editor.header.uploadTab.uploadButton.label')}
+ {t("editor.header.uploadTab.uploadButton.label")}
- )
-}
+ );
+};
const EmbedLinkContent = ({
defaultUrl,
onNewUrl,
withVariableButton,
}: ContentProps & { defaultUrl?: string; withVariableButton?: boolean }) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
return (
- )
-}
+ );
+};
const GiphyContent = ({ onNewUrl }: ContentProps) => (
([])
- const [error, setError] = useState(null)
- const [searchQuery, setSearchQuery] = useState('')
- const scrollContainer = useRef(null)
- const bottomAnchor = useRef(null)
+ const unsplashLogoFillColor = useColorModeValue("black", "white");
+ const [isFetching, setIsFetching] = useState(false);
+ const [images, setImages] = useState([]);
+ const [error, setError] = useState(null);
+ const [searchQuery, setSearchQuery] = useState("");
+ const scrollContainer = useRef(null);
+ const bottomAnchor = useRef(null);
- const [nextPage, setNextPage] = useState(0)
+ const [nextPage, setNextPage] = useState(0);
const fetchNewImages = useCallback(async (query: string, page: number) => {
- if (query === '') return searchRandomImages()
- if (query.length <= 2) return
- setError(null)
- setIsFetching(true)
+ if (query === "") return searchRandomImages();
+ if (query.length <= 2) return;
+ setError(null);
+ setIsFetching(true);
try {
const result = await api.search.getPhotos({
query,
perPage: 30,
- orientation: 'landscape',
+ orientation: "landscape",
page,
- })
- if (result.errors) setError(result.errors[0])
+ });
+ if (result.errors) setError(result.errors[0]);
if (isDefined(result.response)) {
- if (page === 0) setImages(result.response.results)
+ if (page === 0) setImages(result.response.results);
else
setImages((images) => [
...images,
...(result.response?.results ?? []),
- ])
- setNextPage((page) => page + 1)
+ ]);
+ setNextPage((page) => page + 1);
}
} catch (err) {
- if (err && typeof err === 'object' && 'message' in err)
- setError(err.message as string)
- setError('Something went wrong')
+ if (err && typeof err === "object" && "message" in err)
+ setError(err.message as string);
+ setError("Something went wrong");
}
- setIsFetching(false)
- }, [])
+ setIsFetching(false);
+ }, []);
useEffect(() => {
- if (!bottomAnchor.current) return
+ if (!bottomAnchor.current) return;
const observer = new IntersectionObserver(
(entities: IntersectionObserverEntry[]) => {
- const target = entities[0]
- if (target.isIntersecting) fetchNewImages(searchQuery, nextPage + 1)
+ const target = entities[0];
+ if (target.isIntersecting) fetchNewImages(searchQuery, nextPage + 1);
},
{
root: scrollContainer.current,
- }
- )
+ },
+ );
if (bottomAnchor.current && nextPage > 0)
- observer.observe(bottomAnchor.current)
+ observer.observe(bottomAnchor.current);
return () => {
- observer.disconnect()
- }
- }, [fetchNewImages, nextPage, searchQuery])
+ observer.disconnect();
+ };
+ }, [fetchNewImages, nextPage, searchQuery]);
const searchRandomImages = async () => {
- setError(null)
- setIsFetching(true)
+ setError(null);
+ setIsFetching(true);
try {
const result = await api.photos.getRandom({
count: 30,
- orientation: 'landscape',
- })
+ orientation: "landscape",
+ });
- if (result.errors) setError(result.errors[0])
+ if (result.errors) setError(result.errors[0]);
if (isDefined(result.response))
setImages(
- Array.isArray(result.response) ? result.response : [result.response]
- )
+ Array.isArray(result.response) ? result.response : [result.response],
+ );
} catch (err) {
- if (err && typeof err === 'object' && 'message' in err)
- setError(err.message as string)
- setError('Something went wrong')
+ if (err && typeof err === "object" && "message" in err)
+ setError(err.message as string);
+ setError("Something went wrong");
}
- setIsFetching(false)
- }
+ setIsFetching(false);
+ };
- const selectImage = (image: UnsplashImageType) => {
- const url = image.urls[imageSize]
+ const selectImage = (image: UnsplashPhoto) => {
+ const url = image.urls[imageSize];
api.photos.trackDownload({
downloadLocation: image.links.download_location,
- })
- if (isDefined(url)) onImageSelect(url)
- }
+ });
+ if (isDefined(url)) onImageSelect(url);
+ };
useEffect(() => {
- searchRandomImages()
- }, [])
+ searchRandomImages();
+ }, []);
if (!env.NEXT_PUBLIC_UNSPLASH_ACCESS_KEY)
return (
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY is missing in environment
- )
+ );
return (
@@ -137,8 +137,8 @@ export const UnsplashPicker = ({ imageSize, onImageSelect }: Props) => {
autoFocus
placeholder="Search..."
onChange={(query) => {
- setSearchQuery(query)
- fetchNewImages(query, 0)
+ setSearchQuery(query);
+ fetchNewImages(query, 0);
}}
withVariableButton={false}
debounceTimeout={500}
@@ -183,18 +183,18 @@ export const UnsplashPicker = ({ imageSize, onImageSelect }: Props) => {
)}
- )
-}
+ );
+};
type UnsplashImageProps = {
- image: UnsplashImageType
- onClick: () => void
-}
+ image: UnsplashPhoto;
+ onClick: () => void;
+};
const UnsplashImage = ({ image, onClick }: UnsplashImageProps) => {
- const [isImageHovered, setIsImageHovered] = useState(false)
+ const [isImageHovered, setIsImageHovered] = useState(false);
- const { user, urls, alt_description } = image
+ const { user, urls, alt_description } = image;
return (
{
{
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/ImageUploadContent/UploadButton.tsx b/apps/builder/src/components/ImageUploadContent/UploadButton.tsx
index 4d150cb126..fe2a54920d 100644
--- a/apps/builder/src/components/ImageUploadContent/UploadButton.tsx
+++ b/apps/builder/src/components/ImageUploadContent/UploadButton.tsx
@@ -1,15 +1,16 @@
-import { useToast } from '@/hooks/useToast'
-import { Button, ButtonProps, chakra } from '@chakra-ui/react'
-import { ChangeEvent, useState } from 'react'
-import { FilePathUploadProps } from '@/features/upload/api/generateUploadUrl'
-import { trpc } from '@/lib/trpc'
-import { compressFile } from '@/helpers/compressFile'
+import type { FilePathUploadProps } from "@/features/upload/api/generateUploadUrl";
+import { compressFile } from "@/helpers/compressFile";
+import { useToast } from "@/hooks/useToast";
+import { trpc } from "@/lib/trpc";
+import { Button, type ButtonProps, chakra } from "@chakra-ui/react";
+import type { ChangeEvent } from "react";
+import { useState } from "react";
type UploadButtonProps = {
- fileType: 'image' | 'audio'
- filePathProps: FilePathUploadProps
- onFileUploaded: (url: string) => void
-} & ButtonProps
+ fileType: "image" | "audio";
+ filePathProps: FilePathUploadProps;
+ onFileUploaded: (url: string) => void;
+} & ButtonProps;
export const UploadButton = ({
fileType,
@@ -17,47 +18,50 @@ export const UploadButton = ({
onFileUploaded,
...props
}: UploadButtonProps) => {
- const [isUploading, setIsUploading] = useState(false)
- const { showToast } = useToast()
- const [file, setFile] = useState()
+ const [isUploading, setIsUploading] = useState(false);
+ const { showToast } = useToast();
+ const [file, setFile] = useState();
const { mutate } = trpc.generateUploadUrl.useMutation({
onSettled: () => {
- setIsUploading(false)
+ setIsUploading(false);
},
onSuccess: async (data) => {
- if (!file) return
- const formData = new FormData()
+ if (!file) return;
+ const formData = new FormData();
Object.entries(data.formData).forEach(([key, value]) => {
- formData.append(key, value)
- })
- formData.append('file', file)
+ formData.append(key, value);
+ });
+ formData.append("file", file);
const upload = await fetch(data.presignedUrl, {
- method: 'POST',
+ method: "POST",
body: formData,
- })
+ });
if (!upload.ok) {
- showToast({ description: 'Error while trying to upload the file.' })
- return
+ showToast({ description: "Error while trying to upload the file." });
+ return;
}
- onFileUploaded(data.fileUrl + '?v=' + Date.now())
+ onFileUploaded(data.fileUrl + "?v=" + Date.now());
},
- })
+ });
const handleInputChange = async (e: ChangeEvent) => {
- if (!e.target?.files) return
- setIsUploading(true)
- const file = e.target.files[0] as File | undefined
+ if (!e.target?.files) return;
+ setIsUploading(true);
+ const file = e.target.files[0] as File | undefined;
if (!file)
- return showToast({ description: 'Could not read file.', status: 'error' })
- setFile(await compressFile(file))
+ return showToast({
+ description: "Could not read file.",
+ status: "error",
+ });
+ setFile(await compressFile(file));
mutate({
filePathProps,
fileType: file.type,
- })
- }
+ });
+ };
return (
<>
@@ -67,7 +71,7 @@ export const UploadButton = ({
id="file-input"
display="none"
onChange={handleInputChange}
- accept={fileType === 'image' ? 'image/*' : 'audio/*'}
+ accept={fileType === "image" ? "image/*" : "audio/*"}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/ImageUploadContent/emoji/EmojiSearchableList.tsx b/apps/builder/src/components/ImageUploadContent/emoji/EmojiSearchableList.tsx
index 075632ada4..9145177655 100644
--- a/apps/builder/src/components/ImageUploadContent/emoji/EmojiSearchableList.tsx
+++ b/apps/builder/src/components/ImageUploadContent/emoji/EmojiSearchableList.tsx
@@ -1,120 +1,121 @@
-import emojis from './emojiList.json'
-import emojiTagsData from 'emojilib'
import {
- Stack,
- SimpleGrid,
- GridItem,
Button,
- Input as ClassicInput,
+ GridItem,
+ Input,
+ SimpleGrid,
+ Stack,
Text,
-} from '@chakra-ui/react'
-import { useState, ChangeEvent, useEffect, useRef } from 'react'
-import { useTranslate } from '@tolgee/react'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import emojiTagsData from "emojilib";
+import type { ChangeEvent } from "react";
+import { useEffect, useRef, useState } from "react";
+import emojis from "./emojiList.json";
-const emojiTags = emojiTagsData as Record
+const emojiTags = emojiTagsData as Record;
-const people = emojis['Smileys & Emotion'].concat(emojis['People & Body'])
-const nature = emojis['Animals & Nature']
-const food = emojis['Food & Drink']
-const activities = emojis['Activities']
-const travel = emojis['Travel & Places']
-const objects = emojis['Objects']
-const symbols = emojis['Symbols']
-const flags = emojis['Flags']
+const people = emojis["Smileys & Emotion"].concat(emojis["People & Body"]);
+const nature = emojis["Animals & Nature"];
+const food = emojis["Food & Drink"];
+const activities = emojis["Activities"];
+const travel = emojis["Travel & Places"];
+const objects = emojis["Objects"];
+const symbols = emojis["Symbols"];
+const flags = emojis["Flags"];
-const localStorageRecentEmojisKey = 'recentEmojis'
+const localStorageRecentEmojisKey = "recentEmojis";
export const EmojiSearchableList = ({
onEmojiSelected,
}: {
- onEmojiSelected: (emoji: string) => void
+ onEmojiSelected: (emoji: string) => void;
}) => {
- const scrollContainer = useRef(null)
- const bottomElement = useRef(null)
- const [isSearching, setIsSearching] = useState(false)
- const [filteredPeople, setFilteredPeople] = useState(people)
- const [filteredAnimals, setFilteredAnimals] = useState(nature)
- const [filteredFood, setFilteredFood] = useState(food)
- const [filteredTravel, setFilteredTravel] = useState(travel)
- const [filteredActivities, setFilteredActivities] = useState(activities)
- const [filteredObjects, setFilteredObjects] = useState(objects)
- const [filteredSymbols, setFilteredSymbols] = useState(symbols)
- const [filteredFlags, setFilteredFlags] = useState(flags)
- const [totalDisplayedCategories, setTotalDisplayedCategories] = useState(1)
- const [recentEmojis, setRecentEmojis] = useState([])
- const { t } = useTranslate()
+ const scrollContainer = useRef(null);
+ const bottomElement = useRef(null);
+ const [isSearching, setIsSearching] = useState(false);
+ const [filteredPeople, setFilteredPeople] = useState(people);
+ const [filteredAnimals, setFilteredAnimals] = useState(nature);
+ const [filteredFood, setFilteredFood] = useState(food);
+ const [filteredTravel, setFilteredTravel] = useState(travel);
+ const [filteredActivities, setFilteredActivities] = useState(activities);
+ const [filteredObjects, setFilteredObjects] = useState(objects);
+ const [filteredSymbols, setFilteredSymbols] = useState(symbols);
+ const [filteredFlags, setFilteredFlags] = useState(flags);
+ const [totalDisplayedCategories, setTotalDisplayedCategories] = useState(1);
+ const [recentEmojis, setRecentEmojis] = useState([]);
+ const { t } = useTranslate();
useEffect(() => {
- const recentIconNames = localStorage.getItem(localStorageRecentEmojisKey)
- if (!recentIconNames) return
- setRecentEmojis(JSON.parse(recentIconNames))
- }, [])
+ const recentIconNames = localStorage.getItem(localStorageRecentEmojisKey);
+ if (!recentIconNames) return;
+ setRecentEmojis(JSON.parse(recentIconNames));
+ }, []);
useEffect(() => {
- if (!bottomElement.current) return
+ if (!bottomElement.current) return;
const observer = new IntersectionObserver(handleObserver, {
root: scrollContainer.current,
- })
- if (bottomElement.current) observer.observe(bottomElement.current)
+ });
+ if (bottomElement.current) observer.observe(bottomElement.current);
return () => {
- observer.disconnect()
- }
- }, [])
+ observer.disconnect();
+ };
+ }, []);
const handleObserver = (entities: IntersectionObserverEntry[]) => {
- const target = entities[0]
- if (target.isIntersecting) setTotalDisplayedCategories((c) => c + 1)
- }
+ const target = entities[0];
+ if (target.isIntersecting) setTotalDisplayedCategories((c) => c + 1);
+ };
const handleSearchChange = async (e: ChangeEvent) => {
- const searchValue = e.target.value
- if (searchValue.length <= 2 && isSearching) return resetEmojiList()
- setIsSearching(true)
- setTotalDisplayedCategories(8)
+ const searchValue = e.target.value;
+ if (searchValue.length <= 2 && isSearching) return resetEmojiList();
+ setIsSearching(true);
+ setTotalDisplayedCategories(8);
const byTag = (emoji: string) =>
- emojiTags[emoji].find((tag) => tag.includes(searchValue))
- setFilteredPeople(people.filter(byTag))
- setFilteredAnimals(nature.filter(byTag))
- setFilteredFood(food.filter(byTag))
- setFilteredTravel(travel.filter(byTag))
- setFilteredActivities(activities.filter(byTag))
- setFilteredObjects(objects.filter(byTag))
- setFilteredSymbols(symbols.filter(byTag))
- setFilteredFlags(flags.filter(byTag))
- }
+ emojiTags[emoji].find((tag) => tag.includes(searchValue));
+ setFilteredPeople(people.filter(byTag));
+ setFilteredAnimals(nature.filter(byTag));
+ setFilteredFood(food.filter(byTag));
+ setFilteredTravel(travel.filter(byTag));
+ setFilteredActivities(activities.filter(byTag));
+ setFilteredObjects(objects.filter(byTag));
+ setFilteredSymbols(symbols.filter(byTag));
+ setFilteredFlags(flags.filter(byTag));
+ };
const resetEmojiList = () => {
- setTotalDisplayedCategories(1)
- setIsSearching(false)
- setFilteredPeople(people)
- setFilteredAnimals(nature)
- setFilteredFood(food)
- setFilteredTravel(travel)
- setFilteredActivities(activities)
- setFilteredObjects(objects)
- setFilteredSymbols(symbols)
- setFilteredFlags(flags)
- }
+ setTotalDisplayedCategories(1);
+ setIsSearching(false);
+ setFilteredPeople(people);
+ setFilteredAnimals(nature);
+ setFilteredFood(food);
+ setFilteredTravel(travel);
+ setFilteredActivities(activities);
+ setFilteredObjects(objects);
+ setFilteredSymbols(symbols);
+ setFilteredFlags(flags);
+ };
const selectEmoji = (emoji: string) => {
localStorage.setItem(
localStorageRecentEmojisKey,
- JSON.stringify([...new Set([emoji, ...recentEmojis].slice(0, 30))])
- )
- onEmojiSelected(emoji)
- }
+ JSON.stringify([...new Set([emoji, ...recentEmojis].slice(0, 30))]),
+ );
+ onEmojiSelected(emoji);
+ };
return (
-
{recentEmojis.length > 0 && (
- {t('emojiList.categories.recent.label')}
+ {t("emojiList.categories.recent.label")}
@@ -122,7 +123,7 @@ export const EmojiSearchableList = ({
{filteredPeople.length > 0 && (
- {t('emojiList.categories.people.label')}
+ {t("emojiList.categories.people.label")}
@@ -130,7 +131,7 @@ export const EmojiSearchableList = ({
{filteredAnimals.length > 0 && totalDisplayedCategories >= 2 && (
- {t('emojiList.categories.animalsAndNature.label')}
+ {t("emojiList.categories.animalsAndNature.label")}
@@ -138,7 +139,7 @@ export const EmojiSearchableList = ({
{filteredFood.length > 0 && totalDisplayedCategories >= 3 && (
- {t('emojiList.categories.foodAndDrink.label')}
+ {t("emojiList.categories.foodAndDrink.label")}
@@ -146,7 +147,7 @@ export const EmojiSearchableList = ({
{filteredTravel.length > 0 && totalDisplayedCategories >= 4 && (
- {t('emojiList.categories.travelAndPlaces.label')}
+ {t("emojiList.categories.travelAndPlaces.label")}
@@ -154,7 +155,7 @@ export const EmojiSearchableList = ({
{filteredActivities.length > 0 && totalDisplayedCategories >= 5 && (
- {t('emojiList.categories.activities.label')}
+ {t("emojiList.categories.activities.label")}
@@ -162,7 +163,7 @@ export const EmojiSearchableList = ({
{filteredObjects.length > 0 && totalDisplayedCategories >= 6 && (
- {t('emojiList.categories.objects.label')}
+ {t("emojiList.categories.objects.label")}
@@ -170,7 +171,7 @@ export const EmojiSearchableList = ({
{filteredSymbols.length > 0 && totalDisplayedCategories >= 7 && (
- {t('emojiList.categories.symbols.label')}
+ {t("emojiList.categories.symbols.label")}
@@ -178,7 +179,7 @@ export const EmojiSearchableList = ({
{filteredFlags.length > 0 && totalDisplayedCategories >= 8 && (
- {t('emojiList.categories.flags.label')}
+ {t("emojiList.categories.flags.label")}
@@ -186,17 +187,17 @@ export const EmojiSearchableList = ({
- )
-}
+ );
+};
const EmojiGrid = ({
emojis,
onEmojiClick,
}: {
- emojis: string[]
- onEmojiClick: (emoji: string) => void
+ emojis: string[];
+ onEmojiClick: (emoji: string) => void;
}) => {
- const handleClick = (emoji: string) => () => onEmojiClick(emoji)
+ const handleClick = (emoji: string) => () => onEmojiClick(emoji);
return (
))}
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/ImageUploadContent/index.tsx b/apps/builder/src/components/ImageUploadContent/index.tsx
index 7bbc1a5746..2d8cacb3fc 100644
--- a/apps/builder/src/components/ImageUploadContent/index.tsx
+++ b/apps/builder/src/components/ImageUploadContent/index.tsx
@@ -1 +1 @@
-export { ImageUploadContent } from './ImageUploadContent'
+export { ImageUploadContent } from "./ImageUploadContent";
diff --git a/apps/builder/src/components/MoreInfoTooltip.tsx b/apps/builder/src/components/MoreInfoTooltip.tsx
index 28e79c1a84..9dfb20ccc0 100644
--- a/apps/builder/src/components/MoreInfoTooltip.tsx
+++ b/apps/builder/src/components/MoreInfoTooltip.tsx
@@ -1,9 +1,9 @@
-import { Tooltip, chakra } from '@chakra-ui/react'
-import { HelpCircleIcon } from './icons'
+import { Tooltip, chakra } from "@chakra-ui/react";
+import { HelpCircleIcon } from "./icons";
type Props = {
- children: React.ReactNode
-}
+ children: React.ReactNode;
+};
export const MoreInfoTooltip = ({ children }: Props) => {
return (
@@ -12,5 +12,5 @@ export const MoreInfoTooltip = ({ children }: Props) => {
((props, ref) => {
+ forwardRef((props, ref) => {
const chakraProps = Object.fromEntries(
- Object.entries(props).filter(([key]) => !isValidMotionProp(key))
- )
+ Object.entries(props).filter(([key]) => !isValidMotionProp(key)),
+ );
- return ()
- const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false)
+ const { typebot, save } = useTypebot();
+ const [isReloading, setIsReloading] = useState(false);
+ const { data } = trpc.getAppVersionProcedure.useQuery();
+ const [currentVersion, setCurrentVersion] = useState();
+ const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false);
useEffect(() => {
- if (!data?.commitSha) return
- if (currentVersion === data.commitSha) return
- setCurrentVersion(data.commitSha)
- if (currentVersion === undefined) return
- setIsNewVersionAvailable(true)
- }, [data, currentVersion])
+ if (!data?.commitSha) return;
+ if (currentVersion === data.commitSha) return;
+ setCurrentVersion(data.commitSha);
+ if (currentVersion === undefined) return;
+ setIsNewVersionAvailable(true);
+ }, [data, currentVersion]);
const saveAndReload = async () => {
- if (isReloading) return
- setIsReloading(true)
- if (save) await save()
- window.location.reload()
- }
+ if (isReloading) return;
+ setIsReloading(true);
+ if (save) await save();
+ window.location.reload();
+ };
return (
@@ -40,9 +40,9 @@ export const NewVersionPopup = () => {
in={isNewVersionAvailable}
offsetY="20px"
style={{
- position: 'fixed',
- bottom: '18px',
- left: '18px',
+ position: "fixed",
+ bottom: "18px",
+ left: "18px",
zIndex: 42,
}}
unmountOnExit
@@ -61,7 +61,7 @@ export const NewVersionPopup = () => {
- New version available!
@@ -72,7 +72,7 @@ export const NewVersionPopup = () => {
- {typebot?.id ? 'Save and reload' : 'Reload'}
+ {typebot?.id ? "Save and reload" : "Reload"}
@@ -80,5 +80,5 @@ export const NewVersionPopup = () => {
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/PrimitiveList.tsx b/apps/builder/src/components/PrimitiveList.tsx
index e41da46ef5..b4e9debfa6 100644
--- a/apps/builder/src/components/PrimitiveList.tsx
+++ b/apps/builder/src/components/PrimitiveList.tsx
@@ -1,86 +1,89 @@
-import { Box, Button, Fade, Flex, IconButton, Stack } from '@chakra-ui/react'
-import { TrashIcon, PlusIcon } from '@/components/icons'
-import React, { useEffect, useState } from 'react'
-import { createId } from '@paralleldrive/cuid2'
+import { PlusIcon, TrashIcon } from "@/components/icons";
+import { Box, Button, Fade, Flex, IconButton, Stack } from "@chakra-ui/react";
+import { createId } from "@paralleldrive/cuid2";
+import React, { useEffect, useState } from "react";
-type ItemWithId = { id: string; value?: T }
+type ItemWithId = {
+ id: string;
+ value?: T;
+};
export type TableListItemProps = {
- item: T
- onItemChange: (item: T) => void
-}
+ item: T;
+ onItemChange: (item: T) => void;
+};
type Props = {
- initialItems?: T[]
- addLabel?: string
- newItemDefaultProps?: Partial
- hasDefaultItem?: boolean
- ComponentBetweenItems?: (props: unknown) => JSX.Element
- onItemsChange: (items: T[]) => void
- children: (props: TableListItemProps) => JSX.Element
-}
+ initialItems?: T[];
+ addLabel?: string;
+ newItemDefaultProps?: Partial;
+ hasDefaultItem?: boolean;
+ ComponentBetweenItems?: (props: unknown) => JSX.Element;
+ onItemsChange: (items: T[]) => void;
+ children: (props: TableListItemProps) => JSX.Element;
+};
const addIdToItems = (
- items: T[]
-): ItemWithId[] => items.map((item) => ({ id: createId(), value: item }))
+ items: T[],
+): ItemWithId[] => items.map((item) => ({ id: createId(), value: item }));
const removeIdFromItems = (
- items: ItemWithId[]
-): T[] => items.map((item) => item.value as T)
+ items: ItemWithId[],
+): T[] => items.map((item) => item.value as T);
export const PrimitiveList = ({
initialItems,
- addLabel = 'Add',
+ addLabel = "Add",
hasDefaultItem,
children,
ComponentBetweenItems,
onItemsChange,
}: Props) => {
- const [items, setItems] = useState[]>()
- const [showDeleteIndex, setShowDeleteIndex] = useState(null)
+ const [items, setItems] = useState[]>();
+ const [showDeleteIndex, setShowDeleteIndex] = useState(null);
useEffect(() => {
- if (items) return
+ if (items) return;
if (initialItems) {
- setItems(addIdToItems(initialItems))
+ setItems(addIdToItems(initialItems));
} else if (hasDefaultItem) {
- setItems(addIdToItems([]))
+ setItems(addIdToItems([]));
} else {
- setItems([])
+ setItems([]);
}
- }, [hasDefaultItem, initialItems, items])
+ }, [hasDefaultItem, initialItems, items]);
const createItem = () => {
- if (!items) return
- const newItems = [...items, { id: createId() }]
- setItems(newItems)
- onItemsChange(removeIdFromItems(newItems))
- }
+ if (!items) return;
+ const newItems = [...items, { id: createId() }];
+ setItems(newItems);
+ onItemsChange(removeIdFromItems(newItems));
+ };
const updateItem = (itemIndex: number, newValue: T) => {
- if (!items) return
+ if (!items) return;
const newItems = items.map((item, idx) =>
- idx === itemIndex ? { ...item, value: newValue } : item
- )
- setItems(newItems)
- onItemsChange(removeIdFromItems(newItems))
- }
+ idx === itemIndex ? { ...item, value: newValue } : item,
+ );
+ setItems(newItems);
+ onItemsChange(removeIdFromItems(newItems));
+ };
const deleteItem = (itemIndex: number) => () => {
- if (!items) return
- const newItems = [...items]
- newItems.splice(itemIndex, 1)
- setItems([...newItems])
- onItemsChange(removeIdFromItems([...newItems]))
- }
+ if (!items) return;
+ const newItems = [...items];
+ newItems.splice(itemIndex, 1);
+ setItems([...newItems]);
+ onItemsChange(removeIdFromItems([...newItems]));
+ };
const handleMouseEnter = (itemIndex: number) => () =>
- setShowDeleteIndex(itemIndex)
+ setShowDeleteIndex(itemIndex);
const handleCellChange = (itemIndex: number) => (item: T) =>
- updateItem(itemIndex, item)
+ updateItem(itemIndex, item);
- const handleMouseLeave = () => setShowDeleteIndex(null)
+ const handleMouseLeave = () => setShowDeleteIndex(null);
return (
@@ -104,9 +107,9 @@ export const PrimitiveList = ({
({
{addLabel}
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/Seo.tsx b/apps/builder/src/components/Seo.tsx
index 34dd9f8edb..99a3f3861e 100644
--- a/apps/builder/src/components/Seo.tsx
+++ b/apps/builder/src/components/Seo.tsx
@@ -1,25 +1,25 @@
-import { env } from '@typebot.io/env'
-import Head from 'next/head'
+import { env } from "@typebot.io/env";
+import Head from "next/head";
const getOrigin = () => {
- if (typeof window !== 'undefined') {
- return window.location.origin
+ if (typeof window !== "undefined") {
+ return window.location.origin;
}
- return env.NEXTAUTH_URL
-}
+ return env.NEXTAUTH_URL;
+};
export const Seo = ({
title,
- description = 'Create and publish conversational forms that collect 4 times more answers and feel native to your product',
+ description = "Create and publish conversational forms that collect 4 times more answers and feel native to your product",
imagePreviewUrl = `${getOrigin()}/images/og.png`,
}: {
- title: string
- description?: string
- currentUrl?: string
- imagePreviewUrl?: string
+ title: string;
+ description?: string;
+ currentUrl?: string;
+ imagePreviewUrl?: string;
}) => {
- const formattedTitle = `${title} | Typebot`
+ const formattedTitle = `${title} | Typebot`;
return (
@@ -38,5 +38,5 @@ export const Seo = ({
- {t('variables.set')}
+ {t("variables.set")}
{variableName}
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/SupportBubble.tsx b/apps/builder/src/components/SupportBubble.tsx
index b9b6b84fe3..9539e725f3 100644
--- a/apps/builder/src/components/SupportBubble.tsx
+++ b/apps/builder/src/components/SupportBubble.tsx
@@ -1,43 +1,44 @@
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { useUser } from '@/features/account/hooks/useUser'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import React, { useEffect, useState } from 'react'
-import { Bubble, BubbleProps } from '@typebot.io/nextjs'
-import { planToReadable } from '@/features/billing/helpers/planToReadable'
-import { Plan } from '@typebot.io/prisma'
+import { useUser } from "@/features/account/hooks/useUser";
+import { planToReadable } from "@/features/billing/helpers/planToReadable";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import type { BubbleProps } from "@typebot.io/js";
+import { Bubble } from "@typebot.io/nextjs";
+import { Plan } from "@typebot.io/prisma/enum";
+import { useEffect, useState } from "react";
-export const SupportBubble = (props: Omit) => {
- const { typebot } = useTypebot()
- const { user } = useUser()
- const { workspace } = useWorkspace()
+export const SupportBubble = (props: Omit) => {
+ const { typebot } = useTypebot();
+ const { user } = useUser();
+ const { workspace } = useWorkspace();
- const [lastViewedTypebotId, setLastViewedTypebotId] = useState(typebot?.id)
+ const [lastViewedTypebotId, setLastViewedTypebotId] = useState(typebot?.id);
useEffect(() => {
- if (!typebot?.id) return
- if (lastViewedTypebotId === typebot?.id) return
- setLastViewedTypebotId(typebot?.id)
- }, [lastViewedTypebotId, typebot?.id])
+ if (!typebot?.id) return;
+ if (lastViewedTypebotId === typebot?.id) return;
+ setLastViewedTypebotId(typebot?.id);
+ }, [lastViewedTypebotId, typebot?.id]);
- if (!workspace?.plan || workspace.plan === Plan.FREE) return null
+ if (!workspace?.plan || workspace.plan === Plan.FREE) return null;
return (
-)
+);
diff --git a/apps/builder/src/components/TableList.tsx b/apps/builder/src/components/TableList.tsx
index a12716346b..b9a5a74b91 100644
--- a/apps/builder/src/components/TableList.tsx
+++ b/apps/builder/src/components/TableList.tsx
@@ -1,3 +1,4 @@
+import { PlusIcon, TrashIcon } from "@/components/icons";
import {
Box,
Button,
@@ -6,35 +7,34 @@ import {
IconButton,
SlideFade,
Stack,
-} from '@chakra-ui/react'
-import { TrashIcon, PlusIcon } from '@/components/icons'
-import { createId } from '@paralleldrive/cuid2'
-import React, { useEffect, useState } from 'react'
+} from "@chakra-ui/react";
+import { createId } from "@paralleldrive/cuid2";
+import React, { useEffect, useState } from "react";
const defaultItem = {
id: createId(),
-}
+};
export type TableListItemProps = {
- item: T
- onItemChange: (item: T) => void
-}
+ item: T;
+ onItemChange: (item: T) => void;
+};
type Props = {
- initialItems?: T[]
- isOrdered?: boolean
- addLabel?: string
- newItemDefaultProps?: Partial
- hasDefaultItem?: boolean
- ComponentBetweenItems?: (props: unknown) => JSX.Element
- onItemsChange: (items: T[]) => void
- children: (props: TableListItemProps) => JSX.Element
-}
+ initialItems?: T[];
+ isOrdered?: boolean;
+ addLabel?: string;
+ newItemDefaultProps?: Partial;
+ hasDefaultItem?: boolean;
+ ComponentBetweenItems?: (props: unknown) => JSX.Element;
+ onItemsChange: (items: T[]) => void;
+ children: (props: TableListItemProps) => JSX.Element;
+};
export const TableList = ({
initialItems,
isOrdered,
- addLabel = 'Add',
+ addLabel = "Add",
newItemDefaultProps,
hasDefaultItem,
children,
@@ -43,58 +43,58 @@ export const TableList = ({
}: Props) => {
const [items, setItems] = useState(
addIdsIfMissing(initialItems) ??
- (hasDefaultItem ? ([defaultItem] as T[]) : [])
- )
- const [showDeleteIndex, setShowDeleteIndex] = useState(null)
+ (hasDefaultItem ? ([defaultItem] as T[]) : []),
+ );
+ const [showDeleteIndex, setShowDeleteIndex] = useState(null);
useEffect(() => {
if (items.length && initialItems && initialItems?.length === 0)
- setItems(initialItems)
- }, [initialItems, items.length])
+ setItems(initialItems);
+ }, [initialItems, items.length]);
const createItem = () => {
- const id = createId()
- const newItem = { id, ...newItemDefaultProps } as T
- setItems([...items, newItem])
- onItemsChange([...items, newItem])
- }
+ const id = createId();
+ const newItem = { id, ...newItemDefaultProps } as T;
+ setItems([...items, newItem]);
+ onItemsChange([...items, newItem]);
+ };
const insertItem = (itemIndex: number) => () => {
- const id = createId()
- const newItem = { id } as T
- const newItems = [...items]
- newItems.splice(itemIndex + 1, 0, newItem)
- setItems(newItems)
- onItemsChange(newItems)
- }
+ const id = createId();
+ const newItem = { id } as T;
+ const newItems = [...items];
+ newItems.splice(itemIndex + 1, 0, newItem);
+ setItems(newItems);
+ onItemsChange(newItems);
+ };
const updateItem = (itemIndex: number, updates: Partial) => {
const newItems = items.map((item, idx) =>
- idx === itemIndex ? { ...item, ...updates } : item
- )
- setItems(newItems)
- onItemsChange(newItems)
- }
+ idx === itemIndex ? { ...item, ...updates } : item,
+ );
+ setItems(newItems);
+ onItemsChange(newItems);
+ };
const deleteItem = (itemIndex: number) => () => {
- const newItems = [...items]
- newItems.splice(itemIndex, 1)
- setItems([...newItems])
- onItemsChange([...newItems])
- }
+ const newItems = [...items];
+ newItems.splice(itemIndex, 1);
+ setItems([...newItems]);
+ onItemsChange([...newItems]);
+ };
const handleMouseEnter = (itemIndex: number) => () =>
- setShowDeleteIndex(itemIndex)
+ setShowDeleteIndex(itemIndex);
const handleCellChange = (itemIndex: number) => (item: T) =>
- updateItem(itemIndex, item)
+ updateItem(itemIndex, item);
- const handleMouseLeave = () => setShowDeleteIndex(null)
+ const handleMouseLeave = () => setShowDeleteIndex(null);
return (
{items.map((item, itemIndex) => (
-
+
{itemIndex !== 0 && ComponentBetweenItems && (
({
@@ -131,8 +131,8 @@ export const TableList = ({
offsetY="-5px"
in={showDeleteIndex === itemIndex}
style={{
- position: 'absolute',
- top: '-15px',
+ position: "absolute",
+ top: "-15px",
}}
unmountOnExit
>
@@ -150,8 +150,8 @@ export const TableList = ({
offsetY="5px"
in={showDeleteIndex === itemIndex}
style={{
- position: 'absolute',
- bottom: '5px',
+ position: "absolute",
+ bottom: "5px",
}}
unmountOnExit
>
@@ -180,11 +180,11 @@ export const TableList = ({
)}
- )
-}
+ );
+};
const addIdsIfMissing = (items?: T[]): T[] | undefined =>
items?.map((item) => ({
id: createId(),
...item,
- }))
+ }));
diff --git a/apps/builder/src/components/TagsInput.tsx b/apps/builder/src/components/TagsInput.tsx
index c35ac010ae..d803456af8 100644
--- a/apps/builder/src/components/TagsInput.tsx
+++ b/apps/builder/src/components/TagsInput.tsx
@@ -1,100 +1,100 @@
+import { colors } from "@/lib/theme";
import {
HStack,
IconButton,
- Wrap,
+ Input,
Text,
+ Wrap,
WrapItem,
- Input,
-} from '@chakra-ui/react'
-import { useRef, useState } from 'react'
-import { CloseIcon } from './icons'
-import { colors } from '@/lib/theme'
-import { AnimatePresence, motion } from 'framer-motion'
-import { convertStrToList } from '@typebot.io/lib/convertStrToList'
-import { isEmpty } from '@typebot.io/lib/utils'
+} from "@chakra-ui/react";
+import { convertStrToList } from "@typebot.io/lib/convertStrToList";
+import { isEmpty } from "@typebot.io/lib/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import { useRef, useState } from "react";
+import { CloseIcon } from "./icons";
type Props = {
- items?: string[]
- placeholder?: string
- onChange: (value: string[]) => void
-}
+ items?: string[];
+ placeholder?: string;
+ onChange: (value: string[]) => void;
+};
export const TagsInput = ({ items, placeholder, onChange }: Props) => {
- const inputRef = useRef(null)
- const [inputValue, setInputValue] = useState('')
- const [isFocused, setIsFocused] = useState(false)
- const [focusedTagIndex, setFocusedTagIndex] = useState()
+ const inputRef = useRef(null);
+ const [inputValue, setInputValue] = useState("");
+ const [isFocused, setIsFocused] = useState(false);
+ const [focusedTagIndex, setFocusedTagIndex] = useState();
const handleInputChange = (e: React.ChangeEvent) => {
- e.preventDefault()
- setFocusedTagIndex(undefined)
- setInputValue(e.target.value)
+ e.preventDefault();
+ setFocusedTagIndex(undefined);
+ setInputValue(e.target.value);
if (e.target.value.length - inputValue.length > 0) {
- const values = convertStrToList(e.target.value)
+ const values = convertStrToList(e.target.value);
if (values.length > 1) {
- onChange([...(items ?? []), ...convertStrToList(e.target.value)])
- setInputValue('')
+ onChange([...(items ?? []), ...convertStrToList(e.target.value)]);
+ setInputValue("");
}
}
- }
+ };
const handleKeyDown = (e: React.KeyboardEvent) => {
- if (!items) return
+ if (!items) return;
- if (e.key === 'Backspace') {
+ if (e.key === "Backspace") {
if (focusedTagIndex !== undefined) {
if (focusedTagIndex === items.length - 1) {
- setFocusedTagIndex((idx) => idx! - 1)
+ setFocusedTagIndex((idx) => idx! - 1);
}
- removeItem(focusedTagIndex)
- return
+ removeItem(focusedTagIndex);
+ return;
}
- if (inputValue === '' && focusedTagIndex === undefined) {
- setFocusedTagIndex(items?.length - 1)
- return
+ if (inputValue === "" && focusedTagIndex === undefined) {
+ setFocusedTagIndex(items?.length - 1);
+ return;
}
}
- if (e.key === 'ArrowLeft') {
+ if (e.key === "ArrowLeft") {
if (focusedTagIndex !== undefined) {
- if (focusedTagIndex === 0) return
- setFocusedTagIndex(focusedTagIndex - 1)
- return
+ if (focusedTagIndex === 0) return;
+ setFocusedTagIndex(focusedTagIndex - 1);
+ return;
}
if (inputRef.current?.selectionStart === 0 && items) {
- setFocusedTagIndex(items.length - 1)
- return
+ setFocusedTagIndex(items.length - 1);
+ return;
}
}
- if (e.key === 'ArrowRight' && focusedTagIndex !== undefined) {
+ if (e.key === "ArrowRight" && focusedTagIndex !== undefined) {
if (focusedTagIndex === items.length - 1) {
- setFocusedTagIndex(undefined)
- return
+ setFocusedTagIndex(undefined);
+ return;
}
- setFocusedTagIndex(focusedTagIndex + 1)
+ setFocusedTagIndex(focusedTagIndex + 1);
}
- }
+ };
const removeItem = (index: number) => {
- if (!items) return
- const newItems = [...items]
- newItems.splice(index, 1)
- onChange(newItems)
- }
+ if (!items) return;
+ const newItems = [...items];
+ newItems.splice(index, 1);
+ onChange(newItems);
+ };
const addItem = (e: React.FormEvent) => {
- e.preventDefault()
- if (isEmpty(inputValue)) return
- setInputValue('')
- onChange(items ? [...items, inputValue.trim()] : [inputValue.trim()])
- }
+ e.preventDefault();
+ if (isEmpty(inputValue)) return;
+ setInputValue("");
+ onChange(items ? [...items, inputValue.trim()] : [inputValue.trim()]);
+ };
return (
{
{items?.map((item, index) => (
@@ -138,17 +138,17 @@ export const TagsInput = ({ items, placeholder, onChange }: Props) => {
- )
-}
+ );
+};
const Tag = ({
isFocused,
content,
onDeleteClick,
}: {
- isFocused?: boolean
- content: string
- onDeleteClick: () => void
+ isFocused?: boolean;
+ content: string;
+ onDeleteClick: () => void;
}) => (
{content}
@@ -170,4 +170,4 @@ const Tag = ({
onClick={onDeleteClick}
/>
-)
+);
diff --git a/apps/builder/src/components/TextLink.tsx b/apps/builder/src/components/TextLink.tsx
index 5bd28d2254..0db9da1902 100644
--- a/apps/builder/src/components/TextLink.tsx
+++ b/apps/builder/src/components/TextLink.tsx
@@ -1,9 +1,9 @@
-import Link, { LinkProps } from 'next/link'
-import React from 'react'
-import { chakra, HStack, TextProps } from '@chakra-ui/react'
-import { ExternalLinkIcon } from '@/components/icons'
+import { ExternalLinkIcon } from "@/components/icons";
+import { HStack, type TextProps, chakra } from "@chakra-ui/react";
+import Link, { type LinkProps } from "next/link";
+import React from "react";
-type TextLinkProps = LinkProps & TextProps & { isExternal?: boolean }
+type TextLinkProps = LinkProps & TextProps & { isExternal?: boolean };
export const TextLink = ({
children,
@@ -22,7 +22,7 @@ export const TextLink = ({
replace={replace}
scroll={scroll}
prefetch={prefetch}
- target={isExternal ? '_blank' : undefined}
+ target={isExternal ? "_blank" : undefined}
>
{isExternal ? (
@@ -37,4 +37,4 @@ export const TextLink = ({
)}
-)
+);
diff --git a/apps/builder/src/components/TimeSince.tsx b/apps/builder/src/components/TimeSince.tsx
index 4dc614dea4..928edfb013 100644
--- a/apps/builder/src/components/TimeSince.tsx
+++ b/apps/builder/src/components/TimeSince.tsx
@@ -1,46 +1,46 @@
-import { T } from '@tolgee/react'
+import { T } from "@tolgee/react";
type Props = {
- date: string
-}
+ date: string;
+};
export const TimeSince = ({ date }: Props) => {
const seconds = Math.floor(
- (new Date().getTime() - new Date(date).getTime()) / 1000
- )
+ (new Date().getTime() - new Date(date).getTime()) / 1000,
+ );
- let interval = seconds / 31536000
+ let interval = seconds / 31536000;
if (interval > 1) {
return (
-
{title && {title} }
@@ -106,19 +106,19 @@ export const Toast = ({
right={1}
/>
- )
-}
+ );
+};
const Icon = ({
customIcon,
status,
}: {
- customIcon?: React.ReactNode
- status: ToastProps['status']
+ customIcon?: React.ReactNode;
+ status: ToastProps["status"];
}) => {
- const accentColor = useColorModeValue('50', '0')
- const color = parseColor(status)
- const icon = parseIcon(status, customIcon)
+ const accentColor = useColorModeValue("50", "0");
+ const color = parseColor(status);
+ const icon = parseIcon(status, customIcon);
return (
- )
-}
+ );
+};
-const parseColor = (status: ToastProps['status']) => {
- if (!status) return 'red'
+const parseColor = (status: ToastProps["status"]) => {
+ if (!status) return "red";
switch (status) {
- case 'error':
- return 'red'
- case 'success':
- return 'green'
- case 'info':
- return 'blue'
+ case "error":
+ return "red";
+ case "success":
+ return "green";
+ case "info":
+ return "blue";
}
-}
+};
const parseIcon = (
- status: ToastProps['status'],
- customIcon?: React.ReactNode
+ status: ToastProps["status"],
+ customIcon?: React.ReactNode,
) => {
- if (customIcon) return customIcon
+ if (customIcon) return customIcon;
switch (status) {
- case 'error':
- return {
},
}}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/TypebotLogo.tsx b/apps/builder/src/components/TypebotLogo.tsx
index 96a22d0812..b0fef87b7a 100644
--- a/apps/builder/src/components/TypebotLogo.tsx
+++ b/apps/builder/src/components/TypebotLogo.tsx
@@ -1,4 +1,4 @@
-import { IconProps, Icon } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const TypebotLogo = ({
isDark,
@@ -9,7 +9,7 @@ export const TypebotLogo = ({
width="800"
height="800"
rx="80"
- fill={isDark ? 'white' : '#0042DA'}
+ fill={isDark ? "white" : "#0042DA"}
/>
+ Pick;
export const UnlockPlanAlertInfo = ({
buttonLabel,
@@ -25,8 +23,8 @@ export const UnlockPlanAlertInfo = ({
excludedPlans,
...props
}: Props) => {
- const { t } = useTranslate()
- const { isOpen, onOpen, onClose } = useDisclosure()
+ const { t } = useTranslate();
+ const { isOpen, onOpen, onClose } = useDisclosure();
return (
{props.children}
- {buttonLabel ?? t('billing.upgradeAlert.buttonDefaultLabel')}
+ {buttonLabel ?? t("billing.upgradeAlert.buttonDefaultLabel")}
([])
- const [error, setError] = useState(null)
- const [searchQuery, setSearchQuery] = useState('')
- const scrollContainer = useRef(null)
- const bottomAnchor = useRef(null)
+ const [isFetching, setIsFetching] = useState(false);
+ const [videos, setVideos] = useState([]);
+ const [error, setError] = useState(null);
+ const [searchQuery, setSearchQuery] = useState("");
+ const scrollContainer = useRef(null);
+ const bottomAnchor = useRef(null);
- const [nextPage, setNextPage] = useState(0)
+ const [nextPage, setNextPage] = useState(0);
const fetchNewVideos = useCallback(async (query: string, page: number) => {
- if (query === '') getInitialVideos()
+ if (query === "") getInitialVideos();
if (query.length <= 2) {
- setNextPage(0)
- return
+ setNextPage(0);
+ return;
}
- setError(null)
- setIsFetching(true)
+ setError(null);
+ setIsFetching(true);
try {
const result = await client.videos.search({
query,
per_page: 24,
size: videoSize,
page,
- })
+ });
if ((result as ErrorResponse).error)
- setError((result as ErrorResponse).error)
+ setError((result as ErrorResponse).error);
if (isDefined((result as Videos).videos)) {
- if (page === 0) setVideos((result as Videos).videos)
+ if (page === 0) setVideos((result as Videos).videos);
else
setVideos((videos) => [
...videos,
...((result as Videos)?.videos ?? []),
- ])
- setNextPage((page) => page + 1)
+ ]);
+ setNextPage((page) => page + 1);
}
} catch (err) {
- if (err && typeof err === 'object' && 'message' in err)
- setError(err.message as string)
- setError('Something went wrong')
+ if (err && typeof err === "object" && "message" in err)
+ setError(err.message as string);
+ setError("Something went wrong");
}
- setIsFetching(false)
- }, [])
+ setIsFetching(false);
+ }, []);
useEffect(() => {
- if (!bottomAnchor.current) return
+ if (!bottomAnchor.current) return;
const observer = new IntersectionObserver(
(entities: IntersectionObserverEntry[]) => {
- const target = entities[0]
- if (target.isIntersecting) fetchNewVideos(searchQuery, nextPage + 1)
+ const target = entities[0];
+ if (target.isIntersecting) fetchNewVideos(searchQuery, nextPage + 1);
},
{
root: scrollContainer.current,
- }
- )
+ },
+ );
if (bottomAnchor.current && nextPage > 0)
- observer.observe(bottomAnchor.current)
+ observer.observe(bottomAnchor.current);
return () => {
- observer.disconnect()
- }
- }, [fetchNewVideos, nextPage, searchQuery])
+ observer.disconnect();
+ };
+ }, [fetchNewVideos, nextPage, searchQuery]);
const getInitialVideos = async () => {
- setError(null)
- setIsFetching(true)
+ setError(null);
+ setIsFetching(true);
client.videos
.popular({
per_page: 24,
@@ -100,31 +105,31 @@ export const PexelsPicker = ({ videoSize, onVideoSelect }: Props) => {
})
.then((res) => {
if ((res as ErrorResponse).error) {
- setError((res as ErrorResponse).error)
+ setError((res as ErrorResponse).error);
}
- setVideos((res as Videos).videos)
- setIsFetching(false)
+ setVideos((res as Videos).videos);
+ setIsFetching(false);
})
.catch((err) => {
- if (err && typeof err === 'object' && 'message' in err)
- setError(err.message as string)
- setError('Something went wrong')
- setIsFetching(false)
- })
- }
+ if (err && typeof err === "object" && "message" in err)
+ setError(err.message as string);
+ setError("Something went wrong");
+ setIsFetching(false);
+ });
+ };
const selectVideo = (video: Video) => {
- const videoUrl = video.video_files[0].link
- if (isDefined(videoUrl)) onVideoSelect(videoUrl)
- }
+ const videoUrl = video.video_files[0].link;
+ if (isDefined(videoUrl)) onVideoSelect(videoUrl);
+ };
useEffect(() => {
- if (!env.NEXT_PUBLIC_PEXELS_API_KEY) return
- getInitialVideos()
- }, [])
+ if (!env.NEXT_PUBLIC_PEXELS_API_KEY) return;
+ getInitialVideos();
+ }, []);
if (!env.NEXT_PUBLIC_PEXELS_API_KEY)
- return NEXT_PUBLIC_PEXELS_API_KEY is missing in environment
+ return NEXT_PUBLIC_PEXELS_API_KEY is missing in environment ;
return (
@@ -133,8 +138,8 @@ export const PexelsPicker = ({ videoSize, onVideoSelect }: Props) => {
autoFocus
placeholder="Search..."
onChange={(query) => {
- setSearchQuery(query)
- fetchNewVideos(query, 0)
+ setSearchQuery(query);
+ fetchNewVideos(query, 0);
}}
withVariableButton={false}
debounceTimeout={500}
@@ -174,41 +179,41 @@ export const PexelsPicker = ({ videoSize, onVideoSelect }: Props) => {
)}
- )
-}
+ );
+};
type PexelsVideoProps = {
- video: Video
- onClick: () => void
-}
+ video: Video;
+ onClick: () => void;
+};
const PexelsVideo = ({ video, onClick }: PexelsVideoProps) => {
- const { user, url, video_pictures } = video
- const [isImageHovered, setIsImageHovered] = useState(false)
+ const { user, url, video_pictures } = video;
+ const [isImageHovered, setIsImageHovered] = useState(false);
const [thumbnailImage, setThumbnailImage] = useState(
- video_pictures[0].picture
- )
- const [imageIndex, setImageIndex] = useState(1)
+ video_pictures[0].picture,
+ );
+ const [imageIndex, setImageIndex] = useState(1);
useEffect(() => {
- let interval: NodeJS.Timer
+ let interval: NodeJS.Timer;
if (isImageHovered && video_pictures.length > 0) {
interval = setInterval(() => {
- setImageIndex((prevIndex) => (prevIndex + 1) % video_pictures.length)
- setThumbnailImage(video_pictures[imageIndex].picture)
- }, 200)
+ setImageIndex((prevIndex) => (prevIndex + 1) % video_pictures.length);
+ setThumbnailImage(video_pictures[imageIndex].picture);
+ }, 200);
} else {
- setThumbnailImage(video_pictures[0].picture)
- setImageIndex(1)
+ setThumbnailImage(video_pictures[0].picture);
+ setImageIndex(1);
}
return () => {
if (interval) {
- clearInterval(interval)
+ clearInterval(interval);
}
- }
- }, [isImageHovered, imageIndex, video_pictures])
+ };
+ }, [isImageHovered, imageIndex, video_pictures]);
return (
{
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/VideoUploadContent/VideoLinkEmbedContent.tsx b/apps/builder/src/components/VideoUploadContent/VideoLinkEmbedContent.tsx
index 2dda4fe9b3..d316aa26a3 100644
--- a/apps/builder/src/components/VideoUploadContent/VideoLinkEmbedContent.tsx
+++ b/apps/builder/src/components/VideoUploadContent/VideoLinkEmbedContent.tsx
@@ -1,38 +1,38 @@
-import { Stack, Text } from '@chakra-ui/react'
-import { useTranslate } from '@tolgee/react'
-import { VideoBubbleBlock } from '@typebot.io/schemas'
-import { TextInput } from '@/components/inputs'
-import { defaultVideoBubbleContent } from '@typebot.io/schemas/features/blocks/bubbles/video/constants'
-import { SwitchWithLabel } from '../inputs/SwitchWithLabel'
+import { TextInput } from "@/components/inputs";
+import { Stack, Text } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { defaultVideoBubbleContent } from "@typebot.io/blocks-bubbles/video/constants";
+import type { VideoBubbleBlock } from "@typebot.io/blocks-bubbles/video/schema";
+import { SwitchWithLabel } from "../inputs/SwitchWithLabel";
export const VideoLinkEmbedContent = ({
content,
updateUrl,
onSubmit,
}: {
- content?: VideoBubbleBlock['content']
- updateUrl: (url: string) => void
- onSubmit: (content: VideoBubbleBlock['content']) => void
+ content?: VideoBubbleBlock["content"];
+ updateUrl: (url: string) => void;
+ onSubmit: (content: VideoBubbleBlock["content"]) => void;
}) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const updateAspectRatio = (aspectRatio?: string) => {
return onSubmit({
...content,
aspectRatio,
- })
- }
+ });
+ };
const updateMaxWidth = (maxWidth?: string) => {
return onSubmit({
...content,
maxWidth,
- })
- }
+ });
+ };
const updateAutoPlay = (isAutoplayEnabled: boolean) => {
- return onSubmit({ ...content, isAutoplayEnabled })
- }
+ return onSubmit({ ...content, isAutoplayEnabled });
+ };
const updateControlsDisplay = (areControlsDisplayed: boolean) => {
if (areControlsDisplayed === false) {
@@ -41,28 +41,28 @@ export const VideoLinkEmbedContent = ({
...content,
isAutoplayEnabled: true,
areControlsDisplayed,
- })
+ });
}
- return onSubmit({ ...content, areControlsDisplayed })
- }
+ return onSubmit({ ...content, areControlsDisplayed });
+ };
return (
<>
- {t('video.urlInput.helperText')}
+ {t("video.urlInput.helperText")}
{content?.url && (
)}
- {content?.url && content?.type === 'url' && (
+ {content?.url && content?.type === "url" && (
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/icons.tsx b/apps/builder/src/components/icons.tsx
index bad82bc2e3..65137a372e 100644
--- a/apps/builder/src/components/icons.tsx
+++ b/apps/builder/src/components/icons.tsx
@@ -1,12 +1,12 @@
-import { IconProps, Icon, useColorModeValue } from '@chakra-ui/react'
+import { Icon, type IconProps, useColorModeValue } from "@chakra-ui/react";
export const featherIconsBaseProps: IconProps = {
- fill: 'none',
- stroke: 'currentColor',
- strokeWidth: '2px',
- strokeLinecap: 'round',
- strokeLinejoin: 'round',
-}
+ fill: "none",
+ stroke: "currentColor",
+ strokeWidth: "2px",
+ strokeLinecap: "round",
+ strokeLinejoin: "round",
+};
// 99% of these icons are from Feather icons (https://feathericons.com/)
@@ -15,7 +15,7 @@ export const SettingsIcon = (props: IconProps) => (
@@ -23,32 +23,32 @@ export const LogOutIcon = (props: IconProps) => (
-)
+);
export const ChevronLeftIcon = (props: IconProps) => (
-)
+);
export const ChevronRightIcon = (props: IconProps) => (
-)
+);
export const ChevronDownIcon = (props: IconProps) => (
-)
+);
export const PlusIcon = (props: IconProps) => (
-)
+);
export const FolderIcon = (props: IconProps) => (
(
>
-)
+);
export const MoreVerticalIcon = (props: IconProps) => (
@@ -67,7 +67,7 @@ export const MoreVerticalIcon = (props: IconProps) => (
-)
+);
export const MoreHorizontalIcon = (props: IconProps) => (
@@ -75,7 +75,7 @@ export const MoreHorizontalIcon = (props: IconProps) => (
-)
+);
export const GlobeIcon = (props: IconProps) => (
@@ -83,13 +83,13 @@ export const GlobeIcon = (props: IconProps) => (
-)
+);
export const ToolIcon = (props: IconProps) => (
-)
+);
export const FolderPlusIcon = (props: IconProps) => (
@@ -97,7 +97,7 @@ export const FolderPlusIcon = (props: IconProps) => (
-)
+);
export const TextIcon = (props: IconProps) => (
@@ -105,7 +105,7 @@ export const TextIcon = (props: IconProps) => (
-)
+);
export const ImageIcon = (props: IconProps) => (
@@ -113,7 +113,7 @@ export const ImageIcon = (props: IconProps) => (
-)
+);
export const CalendarIcon = (props: IconProps) => (
@@ -122,21 +122,21 @@ export const CalendarIcon = (props: IconProps) => (
-)
+);
export const FlagIcon = (props: IconProps) => (
-)
+);
export const BoldIcon = (props: IconProps) => (
-)
+);
export const ItalicIcon = (props: IconProps) => (
@@ -144,21 +144,21 @@ export const ItalicIcon = (props: IconProps) => (
-)
+);
export const UnderlineIcon = (props: IconProps) => (
-)
+);
export const LinkIcon = (props: IconProps) => (
-)
+);
export const SaveIcon = (props: IconProps) => (
@@ -166,26 +166,26 @@ export const SaveIcon = (props: IconProps) => (
-)
+);
export const CheckIcon = (props: IconProps) => (
-)
+);
export const ChatIcon = (props: IconProps) => (
-)
+);
export const TrashIcon = (props: IconProps) => (
-)
+);
export const LayoutIcon = (props: IconProps) => (
@@ -193,20 +193,20 @@ export const LayoutIcon = (props: IconProps) => (
-)
+);
export const CodeIcon = (props: IconProps) => (
-)
+);
export const EditIcon = (props: IconProps) => (
-)
+);
export const UploadIcon = (props: IconProps) => (
@@ -215,7 +215,7 @@ export const UploadIcon = (props: IconProps) => (
-)
+);
export const DownloadIcon = (props: IconProps) => (
@@ -223,7 +223,7 @@ export const DownloadIcon = (props: IconProps) => (
-)
+);
export const NumberIcon = (props: IconProps) => (
@@ -232,40 +232,40 @@ export const NumberIcon = (props: IconProps) => (
-)
+);
export const EmailIcon = (props: IconProps) => (
-)
+);
export const PhoneIcon = (props: IconProps) => (
-)
+);
export const CheckSquareIcon = (props: IconProps) => (
-)
+);
export const FilterIcon = (props: IconProps) => (
-)
+);
export const UserIcon = (props: IconProps) => (
-)
+);
export const ExpandIcon = (props: IconProps) => (
@@ -274,7 +274,7 @@ export const ExpandIcon = (props: IconProps) => (
-)
+);
export const ExternalLinkIcon = (props: IconProps) => (
@@ -282,7 +282,7 @@ export const ExternalLinkIcon = (props: IconProps) => (
-)
+);
export const FilmIcon = (props: IconProps) => (
@@ -295,13 +295,13 @@ export const FilmIcon = (props: IconProps) => (
-)
+);
export const ThunderIcon = (props: IconProps) => (
-)
+);
export const GripIcon = (props: IconProps) => (
@@ -312,56 +312,56 @@ export const GripIcon = (props: IconProps) => (
-)
+);
export const LockedIcon = (props: IconProps) => (
-)
+);
export const UnlockedIcon = (props: IconProps) => (
-)
+);
export const UndoIcon = (props: IconProps) => (
-)
+);
export const RedoIcon = (props: IconProps) => (
-)
+);
export const FileIcon = (props: IconProps) => (
-)
+);
export const EyeIcon = (props: IconProps) => (
-)
+);
export const SendEmailIcon = (props: IconProps) => (
-)
+);
export const GithubIcon = (props: IconProps) => (
@@ -369,10 +369,10 @@ export const GithubIcon = (props: IconProps) => (
fillRule="evenodd"
clipRule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
- fill={useColorModeValue('#24292f', 'white')}
+ fill={useColorModeValue("#24292f", "white")}
/>
-)
+);
export const UsersIcon = (props: IconProps) => (
@@ -381,7 +381,7 @@ export const UsersIcon = (props: IconProps) => (
-)
+);
export const AlignLeftTextIcon = (props: IconProps) => (
@@ -390,7 +390,7 @@ export const AlignLeftTextIcon = (props: IconProps) => (
-)
+);
export const BoxIcon = (props: IconProps) => (
@@ -398,7 +398,7 @@ export const BoxIcon = (props: IconProps) => (
-)
+);
export const HelpCircleIcon = (props: IconProps) => (
@@ -406,14 +406,14 @@ export const HelpCircleIcon = (props: IconProps) => (
-)
+);
export const CopyIcon = (props: IconProps) => (
-)
+);
export const TemplateIcon = (props: IconProps) => (
@@ -422,13 +422,13 @@ export const TemplateIcon = (props: IconProps) => (
-)
+);
export const MinusIcon = (props: IconProps) => (
-)
+);
export const LaptopIcon = (props: IconProps) => (
@@ -444,7 +444,7 @@ export const LaptopIcon = (props: IconProps) => (
strokeLinejoin="round"
/>
-)
+);
export const MouseIcon = (props: IconProps) => (
@@ -454,7 +454,7 @@ export const MouseIcon = (props: IconProps) => (
strokeLinecap="round"
/>
-)
+);
export const HardDriveIcon = (props: IconProps) => (
@@ -463,26 +463,26 @@ export const HardDriveIcon = (props: IconProps) => (
-)
+);
export const CreditCardIcon = (props: IconProps) => (
-)
+);
export const PlayIcon = (props: IconProps) => (
-)
+);
export const StarIcon = (props: IconProps) => (
-)
+);
export const BuoyIcon = (props: IconProps) => (
-)
+);
export const EyeOffIcon = (props: IconProps) => (
-)
+);
export const AlertIcon = (props: IconProps) => (
@@ -508,14 +508,14 @@ export const AlertIcon = (props: IconProps) => (
-)
+);
export const CloudOffIcon = (props: IconProps) => (
-)
+);
export const ListIcon = (props: IconProps) => (
@@ -526,7 +526,7 @@ export const ListIcon = (props: IconProps) => (
-)
+);
export const PackageIcon = (props: IconProps) => (
@@ -535,14 +535,14 @@ export const PackageIcon = (props: IconProps) => (
-)
+);
export const CloseIcon = (props: IconProps) => (
-)
+);
export const NoRadiusIcon = (props: IconProps) => (
@@ -555,7 +555,7 @@ export const NoRadiusIcon = (props: IconProps) => (
mask="url(#path-1-inside-1_1009_3)"
/>
-)
+);
export const MediumRadiusIcon = (props: IconProps) => (
@@ -568,7 +568,7 @@ export const MediumRadiusIcon = (props: IconProps) => (
mask="url(#path-1-inside-1_1009_4)"
/>
-)
+);
export const LargeRadiusIcon = (props: IconProps) => (
@@ -581,19 +581,19 @@ export const LargeRadiusIcon = (props: IconProps) => (
mask="url(#path-1-inside-1_1009_5)"
/>
-)
+);
export const DropletIcon = (props: IconProps) => (
-)
+);
export const TableIcon = (props: IconProps) => (
-)
+);
export const ShuffleIcon = (props: IconProps) => (
@@ -603,7 +603,7 @@ export const ShuffleIcon = (props: IconProps) => (
-)
+);
export const InfoIcon = (props: IconProps) => (
@@ -611,7 +611,7 @@ export const InfoIcon = (props: IconProps) => (
-)
+);
export const SmileIcon = (props: IconProps) => (
@@ -620,21 +620,21 @@ export const SmileIcon = (props: IconProps) => (
-)
+);
export const BookIcon = (props: IconProps) => (
-)
+);
export const ChevronLastIcon = (props: IconProps) => (
-)
+);
export const XCircleIcon = (props: IconProps) => (
@@ -642,7 +642,7 @@ export const XCircleIcon = (props: IconProps) => (
-)
+);
export const LightBulbIcon = (props: IconProps) => (
@@ -650,7 +650,7 @@ export const LightBulbIcon = (props: IconProps) => (
-)
+);
export const UnlinkIcon = (props: IconProps) => (
@@ -661,7 +661,7 @@ export const UnlinkIcon = (props: IconProps) => (
-)
+);
export const RepeatIcon = (props: IconProps) => (
@@ -670,14 +670,14 @@ export const RepeatIcon = (props: IconProps) => (
-)
+);
export const BracesIcon = (props: IconProps) => (
-)
+);
export const VideoPopoverIcon = (props: IconProps) => (
@@ -694,7 +694,7 @@ export const VideoPopoverIcon = (props: IconProps) => (
strokeLinejoin="round"
/>
-)
+);
export const WalletIcon = (props: IconProps) => (
@@ -702,4 +702,4 @@ export const WalletIcon = (props: IconProps) => (
-)
+);
diff --git a/apps/builder/src/components/inputs/AutocompleteInput.tsx b/apps/builder/src/components/inputs/AutocompleteInput.tsx
index 7af38e9175..e2b35723ec 100644
--- a/apps/builder/src/components/inputs/AutocompleteInput.tsx
+++ b/apps/builder/src/components/inputs/AutocompleteInput.tsx
@@ -1,37 +1,37 @@
+import { useParentModal } from "@/features/graph/providers/ParentModalProvider";
+import { VariablesButton } from "@/features/variables/components/VariablesButton";
+import { injectVariableInText } from "@/features/variables/helpers/injectVariableInTextInput";
+import { focusInput } from "@/helpers/focusInput";
+import { useOutsideClick } from "@/hooks/useOutsideClick";
import {
- useDisclosure,
- Popover,
- PopoverContent,
Button,
- useColorModeValue,
+ FormControl,
+ HStack,
+ Input,
+ Popover,
PopoverAnchor,
+ PopoverContent,
Portal,
- Input,
- HStack,
- FormControl,
-} from '@chakra-ui/react'
-import { useState, useRef, useEffect } from 'react'
-import { useDebouncedCallback } from 'use-debounce'
-import { isDefined } from '@typebot.io/lib'
-import { useOutsideClick } from '@/hooks/useOutsideClick'
-import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
-import { VariablesButton } from '@/features/variables/components/VariablesButton'
-import { Variable } from '@typebot.io/schemas'
-import { injectVariableInText } from '@/features/variables/helpers/injectVariableInTextInput'
-import { focusInput } from '@/helpers/focusInput'
-import { env } from '@typebot.io/env'
+ useColorModeValue,
+ useDisclosure,
+} from "@chakra-ui/react";
+import { env } from "@typebot.io/env";
+import { isDefined } from "@typebot.io/lib/utils";
+import type { Variable } from "@typebot.io/variables/schemas";
+import { useEffect, useRef, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
type Props = {
- items: string[] | undefined
- value?: string
- defaultValue?: string
- debounceTimeout?: number
- placeholder?: string
- withVariableButton?: boolean
- moreInfoTooltip?: string
- isRequired?: boolean
- onChange: (value: string) => void
-}
+ items: string[] | undefined;
+ value?: string;
+ defaultValue?: string;
+ debounceTimeout?: number;
+ placeholder?: string;
+ withVariableButton?: boolean;
+ moreInfoTooltip?: string;
+ isRequired?: boolean;
+ onChange: (value: string) => void;
+};
export const AutocompleteInput = ({
items,
@@ -43,116 +43,116 @@ export const AutocompleteInput = ({
defaultValue,
isRequired,
}: Props) => {
- const bg = useColorModeValue('gray.200', 'gray.700')
- const { onOpen, onClose, isOpen } = useDisclosure()
- const [isTouched, setIsTouched] = useState(false)
- const [inputValue, setInputValue] = useState(defaultValue ?? '')
+ const bg = useColorModeValue("gray.200", "gray.700");
+ const { onOpen, onClose, isOpen } = useDisclosure();
+ const [isTouched, setIsTouched] = useState(false);
+ const [inputValue, setInputValue] = useState(defaultValue ?? "");
const [carretPosition, setCarretPosition] = useState(
- inputValue.length ?? 0
- )
+ inputValue.length ?? 0,
+ );
const onChange = useDebouncedCallback(
_onChange,
- env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
- )
+ env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout,
+ );
useEffect(() => {
- if (isTouched || inputValue !== '' || !defaultValue || defaultValue === '')
- return
- setInputValue(defaultValue ?? '')
- }, [defaultValue, inputValue, isTouched])
+ if (isTouched || inputValue !== "" || !defaultValue || defaultValue === "")
+ return;
+ setInputValue(defaultValue ?? "");
+ }, [defaultValue, inputValue, isTouched]);
const [keyboardFocusIndex, setKeyboardFocusIndex] = useState<
number | undefined
- >()
- const dropdownRef = useRef(null)
- const itemsRef = useRef<(HTMLButtonElement | null)[]>([])
- const inputRef = useRef(null)
- const { ref: parentModalRef } = useParentModal()
+ >();
+ const dropdownRef = useRef(null);
+ const itemsRef = useRef<(HTMLButtonElement | null)[]>([]);
+ const inputRef = useRef(null);
+ const { ref: parentModalRef } = useParentModal();
const filteredItems = (
- inputValue === ''
- ? items ?? []
+ inputValue === ""
+ ? (items ?? [])
: [
...(items ?? []).filter(
(item) =>
- item.toLowerCase().startsWith((inputValue ?? '').toLowerCase()) &&
- item.toLowerCase() !== inputValue.toLowerCase()
+ item.toLowerCase().startsWith((inputValue ?? "").toLowerCase()) &&
+ item.toLowerCase() !== inputValue.toLowerCase(),
),
]
- ).slice(0, 50)
+ ).slice(0, 50);
useOutsideClick({
ref: dropdownRef,
handler: onClose,
isEnabled: isOpen,
- })
+ });
useEffect(
() => () => {
- onChange.flush()
+ onChange.flush();
},
- [onChange]
- )
+ [onChange],
+ );
const changeValue = (value: string) => {
- if (!isTouched) setIsTouched(true)
- if (!isOpen) onOpen()
- setInputValue(value)
- onChange(value)
- }
+ if (!isTouched) setIsTouched(true);
+ if (!isOpen) onOpen();
+ setInputValue(value);
+ onChange(value);
+ };
const handleItemClick = (value: string) => () => {
- setInputValue(value)
- onChange(value)
- setKeyboardFocusIndex(undefined)
- inputRef.current?.focus()
- }
+ setInputValue(value);
+ onChange(value);
+ setKeyboardFocusIndex(undefined);
+ inputRef.current?.focus();
+ };
const updateFocusedDropdownItem = (
- e: React.KeyboardEvent
+ e: React.KeyboardEvent,
) => {
- if (e.key === 'Enter' && isDefined(keyboardFocusIndex)) {
- handleItemClick(filteredItems[keyboardFocusIndex])()
- return setKeyboardFocusIndex(undefined)
+ if (e.key === "Enter" && isDefined(keyboardFocusIndex)) {
+ handleItemClick(filteredItems[keyboardFocusIndex])();
+ return setKeyboardFocusIndex(undefined);
}
- if (e.key === 'ArrowDown') {
- if (keyboardFocusIndex === undefined) return setKeyboardFocusIndex(0)
+ if (e.key === "ArrowDown") {
+ if (keyboardFocusIndex === undefined) return setKeyboardFocusIndex(0);
if (keyboardFocusIndex === filteredItems.length - 1)
- return setKeyboardFocusIndex(0)
+ return setKeyboardFocusIndex(0);
itemsRef.current[keyboardFocusIndex + 1]?.scrollIntoView({
- behavior: 'smooth',
- block: 'nearest',
- })
- return setKeyboardFocusIndex(keyboardFocusIndex + 1)
+ behavior: "smooth",
+ block: "nearest",
+ });
+ return setKeyboardFocusIndex(keyboardFocusIndex + 1);
}
- if (e.key === 'ArrowUp') {
+ if (e.key === "ArrowUp") {
if (keyboardFocusIndex === 0 || keyboardFocusIndex === undefined)
- return setKeyboardFocusIndex(filteredItems.length - 1)
+ return setKeyboardFocusIndex(filteredItems.length - 1);
itemsRef.current[keyboardFocusIndex - 1]?.scrollIntoView({
- behavior: 'smooth',
- block: 'nearest',
- })
- setKeyboardFocusIndex(keyboardFocusIndex - 1)
+ behavior: "smooth",
+ block: "nearest",
+ });
+ setKeyboardFocusIndex(keyboardFocusIndex - 1);
}
- }
+ };
const handleVariableSelected = (variable?: Variable) => {
- if (!variable) return
+ if (!variable) return;
const { text, carretPosition: newCarretPosition } = injectVariableInText({
variable,
text: inputValue,
at: carretPosition,
- })
- changeValue(text)
- focusInput({ at: newCarretPosition, input: inputRef.current })
- }
+ });
+ changeValue(text);
+ focusInput({ at: newCarretPosition, input: inputRef.current });
+ };
const updateCarretPosition = (e: React.FocusEvent) => {
- const carretPosition = e.target.selectionStart
- if (!carretPosition) return
- setCarretPosition(carretPosition)
- }
+ const carretPosition = e.target.selectionStart;
+ if (!carretPosition) return;
+ setCarretPosition(carretPosition);
+ };
return (
@@ -173,7 +173,7 @@ export const AutocompleteInput = ({
onFocus={onOpen}
onBlur={updateCarretPosition}
onKeyDown={updateFocusedDropdownItem}
- placeholder={!items ? 'Loading...' : placeholder}
+ placeholder={!items ? "Loading..." : placeholder}
isDisabled={!items}
/>
@@ -189,29 +189,27 @@ export const AutocompleteInput = ({
onMouseDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
>
- <>
- {filteredItems.map((item, idx) => {
- return (
- (itemsRef.current[idx] = el)}
- minH="40px"
- key={idx}
- onClick={handleItemClick(item)}
- fontSize="16px"
- fontWeight="normal"
- rounded="none"
- colorScheme="gray"
- role="menuitem"
- variant="ghost"
- bg={keyboardFocusIndex === idx ? bg : 'transparent'}
- justifyContent="flex-start"
- transition="none"
- >
- {item}
-
- )
- })}
-
+ {filteredItems.map((item, idx) => {
+ return (
+ (itemsRef.current[idx] = el)}
+ minH="40px"
+ key={idx}
+ onClick={handleItemClick(item)}
+ fontSize="16px"
+ fontWeight="normal"
+ rounded="none"
+ colorScheme="gray"
+ role="menuitem"
+ variant="ghost"
+ bg={keyboardFocusIndex === idx ? bg : "transparent"}
+ justifyContent="flex-start"
+ transition="none"
+ >
+ {item}
+
+ );
+ })}
)}
@@ -221,5 +219,5 @@ export const AutocompleteInput = ({
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/inputs/CodeEditor.tsx b/apps/builder/src/components/inputs/CodeEditor.tsx
index 4b989a5f6e..f5169cfe84 100644
--- a/apps/builder/src/components/inputs/CodeEditor.tsx
+++ b/apps/builder/src/components/inputs/CodeEditor.tsx
@@ -1,5 +1,6 @@
+import { VariablesButton } from "@/features/variables/components/VariablesButton";
import {
- BoxProps,
+ type BoxProps,
Fade,
FormControl,
FormHelperText,
@@ -8,36 +9,39 @@ import {
Stack,
useColorModeValue,
useDisclosure,
-} from '@chakra-ui/react'
-import React, { ReactNode, useEffect, useRef, useState } from 'react'
-import { useDebouncedCallback } from 'use-debounce'
-import { VariablesButton } from '@/features/variables/components/VariablesButton'
-import { Variable } from '@typebot.io/schemas'
-import { env } from '@typebot.io/env'
-import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror'
-import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night'
-import { githubLight } from '@uiw/codemirror-theme-github'
-import { LanguageName, loadLanguage } from '@uiw/codemirror-extensions-langs'
-import { isDefined } from '@udecode/plate-common'
-import { CopyButton } from '../CopyButton'
-import { MoreInfoTooltip } from '../MoreInfoTooltip'
+} from "@chakra-ui/react";
+import { env } from "@typebot.io/env";
+import type { Variable } from "@typebot.io/variables/schemas";
+import { isDefined } from "@udecode/plate-common";
+import {
+ type LanguageName,
+ loadLanguage,
+} from "@uiw/codemirror-extensions-langs";
+import { githubLight } from "@uiw/codemirror-theme-github";
+import { tokyoNight } from "@uiw/codemirror-theme-tokyo-night";
+import CodeMirror, { type ReactCodeMirrorRef } from "@uiw/react-codemirror";
+import type { ReactNode } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { CopyButton } from "../CopyButton";
+import { MoreInfoTooltip } from "../MoreInfoTooltip";
type Props = {
- label?: string
- value?: string
- defaultValue?: string
- lang: LanguageName
- isReadOnly?: boolean
- debounceTimeout?: number
- withVariableButton?: boolean
- height?: string
- maxHeight?: string
- minWidth?: string
- moreInfoTooltip?: string
- helperText?: ReactNode
- isRequired?: boolean
- onChange?: (value: string) => void
-}
+ label?: string;
+ value?: string;
+ defaultValue?: string;
+ lang: LanguageName;
+ isReadOnly?: boolean;
+ debounceTimeout?: number;
+ withVariableButton?: boolean;
+ height?: string;
+ maxHeight?: string;
+ minWidth?: string;
+ moreInfoTooltip?: string;
+ helperText?: ReactNode;
+ isRequired?: boolean;
+ onChange?: (value: string) => void;
+};
export const CodeEditor = ({
label,
defaultValue,
@@ -46,57 +50,57 @@ export const CodeEditor = ({
helperText,
isRequired,
onChange,
- height = '250px',
- maxHeight = '70vh',
+ height = "250px",
+ maxHeight = "70vh",
minWidth,
withVariableButton = true,
isReadOnly = false,
debounceTimeout = 1000,
...props
-}: Props & Omit) => {
- const theme = useColorModeValue(githubLight, tokyoNight)
- const codeEditor = useRef(null)
- const [carretPosition, setCarretPosition] = useState(0)
- const isVariableButtonDisplayed = withVariableButton && !isReadOnly
- const [value, _setValue] = useState(defaultValue ?? '')
- const { onOpen, onClose, isOpen } = useDisclosure()
+}: Props & Omit) => {
+ const theme = useColorModeValue(githubLight, tokyoNight);
+ const codeEditor = useRef(null);
+ const [carretPosition, setCarretPosition] = useState(0);
+ const isVariableButtonDisplayed = withVariableButton && !isReadOnly;
+ const [value, _setValue] = useState(defaultValue ?? "");
+ const { onOpen, onClose, isOpen } = useDisclosure();
const setValue = useDebouncedCallback(
(value) => {
- _setValue(value)
- onChange && onChange(value)
+ _setValue(value);
+ onChange && onChange(value);
},
- env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
- )
+ env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout,
+ );
- const handleVariableSelected = (variable?: Pick) => {
- codeEditor.current?.view?.focus()
- const insert = `{{${variable?.name}}}`
+ const handleVariableSelected = (variable?: Pick) => {
+ codeEditor.current?.view?.focus();
+ const insert = `{{${variable?.name}}}`;
codeEditor.current?.view?.dispatch({
changes: {
from: carretPosition,
insert,
},
selection: { anchor: carretPosition + insert.length },
- })
- }
+ });
+ };
const handleChange = (newValue: string) => {
- setValue(newValue)
- }
+ setValue(newValue);
+ };
const rememberCarretPosition = () => {
setCarretPosition(
- codeEditor.current?.view?.state?.selection.asSingle().main.head ?? 0
- )
- }
+ codeEditor.current?.view?.state?.selection.asSingle().main.head ?? 0,
+ );
+ };
useEffect(
() => () => {
- setValue.flush()
+ setValue.flush();
},
- [setValue]
- )
+ [setValue],
+ );
return (
{label && (
- {label}{' '}
+ {label}{" "}
{moreInfoTooltip && (
{moreInfoTooltip}
)}
@@ -117,9 +121,9 @@ export const CodeEditor = ({
@@ -157,7 +161,7 @@ export const CodeEditor = ({
extensions={[loadLanguage(lang)].filter(isDefined)}
editable={!isReadOnly}
style={{
- width: isVariableButtonDisplayed ? 'calc(100% - 32px)' : '100%',
+ width: isVariableButtonDisplayed ? "calc(100% - 32px)" : "100%",
}}
spellCheck={false}
basicSetup={{
@@ -186,5 +190,5 @@ export const CodeEditor = ({
{helperText && {helperText} }
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/inputs/NumberInput.tsx b/apps/builder/src/components/inputs/NumberInput.tsx
index 8b7d7027df..fb10a7bbf3 100644
--- a/apps/builder/src/components/inputs/NumberInput.tsx
+++ b/apps/builder/src/components/inputs/NumberInput.tsx
@@ -1,40 +1,44 @@
-import { VariablesButton } from '@/features/variables/components/VariablesButton'
+import { VariablesButton } from "@/features/variables/components/VariablesButton";
import {
- NumberInputProps,
NumberInput as ChakraNumberInput,
- NumberInputField,
- NumberInputStepper,
- NumberIncrementStepper,
- NumberDecrementStepper,
- HStack,
FormControl,
+ FormHelperText,
FormLabel,
+ HStack,
+ NumberDecrementStepper,
+ NumberIncrementStepper,
+ NumberInputField,
+ type NumberInputProps,
+ NumberInputStepper,
Stack,
Text,
- FormHelperText,
-} from '@chakra-ui/react'
-import { Variable, VariableString } from '@typebot.io/schemas'
-import { ReactNode, useEffect, useState } from 'react'
-import { useDebouncedCallback } from 'use-debounce'
-import { env } from '@typebot.io/env'
-import { MoreInfoTooltip } from '../MoreInfoTooltip'
+} from "@chakra-ui/react";
+import { env } from "@typebot.io/env";
+import type { Variable, VariableString } from "@typebot.io/variables/schemas";
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { MoreInfoTooltip } from "../MoreInfoTooltip";
type Value = HasVariable extends true | undefined
? number | VariableString
- : number
+ : number;
type Props = {
- defaultValue: Value | undefined
- debounceTimeout?: number
- withVariableButton?: HasVariable
- label?: string
- moreInfoTooltip?: string
- isRequired?: boolean
- direction?: 'row' | 'column'
- suffix?: string
- helperText?: ReactNode
- onValueChange: (value?: Value) => void
-} & Omit
+ defaultValue: Value | undefined;
+ debounceTimeout?: number;
+ withVariableButton?: HasVariable;
+ label?: string;
+ moreInfoTooltip?: string;
+ isRequired?: boolean;
+ direction?: "row" | "column";
+ suffix?: string;
+ helperText?: ReactNode;
+ onValueChange: (value?: Value) => void;
+} & Omit<
+ NumberInputProps,
+ "defaultValue" | "value" | "onChange" | "isRequired"
+>;
export const NumberInput = ({
defaultValue,
@@ -44,57 +48,57 @@ export const NumberInput = ({
label,
moreInfoTooltip,
isRequired,
- direction = 'column',
+ direction = "column",
suffix,
helperText,
...props
}: Props) => {
- const [isTouched, setIsTouched] = useState(false)
- const [value, setValue] = useState(defaultValue?.toString() ?? '')
+ const [isTouched, setIsTouched] = useState(false);
+ const [value, setValue] = useState(defaultValue?.toString() ?? "");
const onValueChangeDebounced = useDebouncedCallback(
onValueChange,
- env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
- )
+ env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout,
+ );
useEffect(() => {
- if (isTouched || value !== '' || !defaultValue) return
- setValue(defaultValue?.toString() ?? '')
- }, [defaultValue, isTouched, value])
+ if (isTouched || value !== "" || !defaultValue) return;
+ setValue(defaultValue?.toString() ?? "");
+ }, [defaultValue, isTouched, value]);
useEffect(
() => () => {
- onValueChangeDebounced.flush()
+ onValueChangeDebounced.flush();
},
- [onValueChangeDebounced]
- )
+ [onValueChangeDebounced],
+ );
const handleValueChange = (newValue: string) => {
- if (!isTouched) setIsTouched(true)
- if (value.startsWith('{{') && value.endsWith('}}') && newValue !== '')
- return
- setValue(newValue)
- if (newValue.endsWith('.') || newValue.endsWith(',')) return
- if (newValue === '') return onValueChangeDebounced(undefined)
+ if (!isTouched) setIsTouched(true);
+ if (value.startsWith("{{") && value.endsWith("}}") && newValue !== "")
+ return;
+ setValue(newValue);
+ if (newValue.endsWith(".") || newValue.endsWith(",")) return;
+ if (newValue === "") return onValueChangeDebounced(undefined);
if (
- newValue.startsWith('{{') &&
- newValue.endsWith('}}') &&
+ newValue.startsWith("{{") &&
+ newValue.endsWith("}}") &&
newValue.length > 4 &&
(withVariableButton ?? true)
) {
- onValueChangeDebounced(newValue as Value)
- return
+ onValueChangeDebounced(newValue as Value);
+ return;
}
- const numberedValue = parseFloat(newValue)
- if (isNaN(numberedValue)) return
- onValueChangeDebounced(numberedValue)
- }
+ const numberedValue = Number.parseFloat(newValue);
+ if (isNaN(numberedValue)) return;
+ onValueChangeDebounced(numberedValue);
+ };
const handleVariableSelected = (variable?: Variable) => {
- if (!variable) return
- const newValue = `{{${variable.name}}}`
- handleValueChange(newValue)
- }
+ if (!variable) return;
+ const newValue = `{{${variable.name}}}`;
+ handleValueChange(newValue);
+ };
const Input = (
({
- )
+ );
return (
{label && (
- {label}{' '}
+ {label}{" "}
{moreInfoTooltip && (
{moreInfoTooltip}
)}
)}
-
- {withVariableButton ?? true ? (
+
+ {(withVariableButton ?? true) ? (
{Input}
({
{helperText ? {helperText} : null}
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/inputs/RadioButtons.tsx b/apps/builder/src/components/inputs/RadioButtons.tsx
index 30afd23781..5753ad691f 100644
--- a/apps/builder/src/components/inputs/RadioButtons.tsx
+++ b/apps/builder/src/components/inputs/RadioButtons.tsx
@@ -2,58 +2,58 @@ import {
Box,
Flex,
Stack,
+ type UseRadioProps,
useColorModeValue,
useRadio,
useRadioGroup,
- UseRadioProps,
-} from '@chakra-ui/react'
-import { ReactNode } from 'react'
+} from "@chakra-ui/react";
+import type { ReactNode } from "react";
type Props = {
- options: readonly (T | { value: T; label: ReactNode })[]
- value?: T
- defaultValue?: T
- direction?: 'row' | 'column'
- size?: 'md' | 'sm'
- onSelect: (newValue: T) => void
-}
+ options: readonly (T | { value: T; label: ReactNode })[];
+ value?: T;
+ defaultValue?: T;
+ direction?: "row" | "column";
+ size?: "md" | "sm";
+ onSelect: (newValue: T) => void;
+};
export const RadioButtons = ({
options,
value,
defaultValue,
- direction = 'row',
- size = 'md',
+ direction = "row",
+ size = "md",
onSelect,
}: Props) => {
const { getRootProps, getRadioProps } = useRadioGroup({
value,
defaultValue,
onChange: onSelect,
- })
+ });
- const group = getRootProps()
+ const group = getRootProps();
return (
{options.map((item) => {
- const radio = getRadioProps({ value: parseValue(item) })
+ const radio = getRadioProps({ value: parseValue(item) });
return (
{parseLabel(item)}
- )
+ );
})}
- )
-}
+ );
+};
export const RadioCard = (
- props: UseRadioProps & { children: ReactNode; size?: 'md' | 'sm' }
+ props: UseRadioProps & { children: ReactNode; size?: "md" | "sm" },
) => {
- const { getInputProps, getCheckboxProps } = useRadio(props)
+ const { getInputProps, getCheckboxProps } = useRadio(props);
- const input = getInputProps()
- const checkbox = getCheckboxProps()
+ const input = getInputProps();
+ const checkbox = getCheckboxProps();
return (
@@ -64,28 +64,28 @@ export const RadioCard = (
borderWidth="2px"
borderRadius="md"
_checked={{
- borderColor: 'blue.400',
+ borderColor: "blue.400",
}}
_hover={{
- bgColor: useColorModeValue('gray.100', 'gray.700'),
+ bgColor: useColorModeValue("gray.100", "gray.700"),
}}
_active={{
- bgColor: useColorModeValue('gray.200', 'gray.600'),
+ bgColor: useColorModeValue("gray.200", "gray.600"),
}}
- px={props.size === 'sm' ? 3 : 5}
- py={props.size === 'sm' ? 1 : 2}
+ px={props.size === "sm" ? 3 : 5}
+ py={props.size === "sm" ? 1 : 2}
transition="background-color 150ms, color 150ms, border 150ms"
justifyContent="center"
- fontSize={props.size === 'sm' ? 'sm' : undefined}
+ fontSize={props.size === "sm" ? "sm" : undefined}
>
{props.children}
- )
-}
+ );
+};
const parseValue = (item: string | { value: string; label: ReactNode }) =>
- typeof item === 'string' ? item : item.value
+ typeof item === "string" ? item : item.value;
const parseLabel = (item: string | { value: string; label: ReactNode }) =>
- typeof item === 'string' ? item : item.label
+ typeof item === "string" ? item : item.label;
diff --git a/apps/builder/src/components/inputs/Select.tsx b/apps/builder/src/components/inputs/Select.tsx
index 604829ecf1..0a5fa4fb38 100644
--- a/apps/builder/src/components/inputs/Select.tsx
+++ b/apps/builder/src/components/inputs/Select.tsx
@@ -1,43 +1,44 @@
+import { useParentModal } from "@/features/graph/providers/ParentModalProvider";
+import { useOutsideClick } from "@/hooks/useOutsideClick";
import {
- useDisclosure,
+ Box,
+ Button,
Flex,
- Popover,
+ HStack,
+ IconButton,
Input,
- PopoverContent,
- Button,
- useColorModeValue,
- PopoverAnchor,
- Portal,
InputGroup,
InputRightElement,
+ Popover,
+ PopoverAnchor,
+ PopoverContent,
+ Portal,
Text,
- Box,
- IconButton,
- HStack,
-} from '@chakra-ui/react'
-import { useState, useRef, ChangeEvent, useEffect } from 'react'
-import { isDefined } from '@typebot.io/lib'
-import { useOutsideClick } from '@/hooks/useOutsideClick'
-import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
-import { ChevronDownIcon, CloseIcon } from '../icons'
+ useColorModeValue,
+ useDisclosure,
+} from "@chakra-ui/react";
+import { isDefined } from "@typebot.io/lib/utils";
+import type { ChangeEvent } from "react";
+import { useEffect, useRef, useState } from "react";
+import { ChevronDownIcon, CloseIcon } from "../icons";
-const dropdownCloseAnimationDuration = 300
+const dropdownCloseAnimationDuration = 300;
type RichItem = {
- icon?: JSX.Element
- label: string
- value: string
- extras?: Record
-}
+ icon?: JSX.Element;
+ label: string;
+ value: string;
+ extras?: Record;
+};
-type Item = string | RichItem
+type Item = string | RichItem;
type Props = {
- selectedItem?: string
- items: readonly T[] | undefined
- placeholder?: string
- onSelect?: (value: string | undefined, item?: T) => void
-}
+ selectedItem?: string;
+ items: readonly T[] | undefined;
+ placeholder?: string;
+ onSelect?: (value: string | undefined, item?: T) => void;
+};
export const Select = ({
selectedItem,
@@ -45,115 +46,115 @@ export const Select = ({
items,
onSelect,
}: Props) => {
- const focusedItemBgColor = useColorModeValue('gray.200', 'gray.700')
- const selectedItemBgColor = useColorModeValue('blue.50', 'blue.400')
- const [isTouched, setIsTouched] = useState(false)
- const { onOpen, onClose, isOpen } = useDisclosure()
+ const focusedItemBgColor = useColorModeValue("gray.200", "gray.700");
+ const selectedItemBgColor = useColorModeValue("blue.50", "blue.400");
+ const [isTouched, setIsTouched] = useState(false);
+ const { onOpen, onClose, isOpen } = useDisclosure();
const [inputValue, setInputValue] = useState(
getItemLabel(
items?.find((item) =>
- typeof item === 'string'
+ typeof item === "string"
? selectedItem === item
- : selectedItem === item.value
- ) ?? selectedItem
- )
- )
+ : selectedItem === item.value,
+ ) ?? selectedItem,
+ ),
+ );
useEffect(() => {
- if (!items || typeof items[0] === 'string' || !selectedItem || isTouched)
- return
+ if (!items || typeof items[0] === "string" || !selectedItem || isTouched)
+ return;
setInputValue(
getItemLabel(
(items as readonly RichItem[]).find(
- (item) => selectedItem === item.value
- ) ?? selectedItem
- )
- )
- }, [isTouched, items, selectedItem])
+ (item) => selectedItem === item.value,
+ ) ?? selectedItem,
+ ),
+ );
+ }, [isTouched, items, selectedItem]);
const [keyboardFocusIndex, setKeyboardFocusIndex] = useState<
number | undefined
- >()
- const dropdownRef = useRef(null)
- const itemsRef = useRef<(HTMLButtonElement | null)[]>([])
- const inputRef = useRef(null)
- const { ref: parentModalRef } = useParentModal()
+ >();
+ const dropdownRef = useRef(null);
+ const itemsRef = useRef<(HTMLButtonElement | null)[]>([]);
+ const inputRef = useRef(null);
+ const { ref: parentModalRef } = useParentModal();
const filteredItems = isTouched
? [
...(items ?? []).filter((item) =>
getItemLabel(item)
.toLowerCase()
- .includes((inputValue ?? '').toLowerCase())
+ .includes((inputValue ?? "").toLowerCase()),
),
]
- : items ?? []
+ : (items ?? []);
const closeDropdown = () => {
- onClose()
+ onClose();
setTimeout(() => {
- setIsTouched(false)
- }, dropdownCloseAnimationDuration)
- }
+ setIsTouched(false);
+ }, dropdownCloseAnimationDuration);
+ };
useOutsideClick({
ref: dropdownRef,
handler: closeDropdown,
isEnabled: isOpen,
- })
+ });
const updateInputValue = (e: ChangeEvent) => {
- if (!isOpen) onOpen()
- if (!isTouched) setIsTouched(true)
- setInputValue(e.target.value)
- }
+ if (!isOpen) onOpen();
+ if (!isTouched) setIsTouched(true);
+ setInputValue(e.target.value);
+ };
const handleItemClick = (item: T) => () => {
- if (!isTouched) setIsTouched(true)
- setInputValue(getItemLabel(item))
- onSelect?.(getItemValue(item), item)
- setKeyboardFocusIndex(undefined)
- closeDropdown()
- }
+ if (!isTouched) setIsTouched(true);
+ setInputValue(getItemLabel(item));
+ onSelect?.(getItemValue(item), item);
+ setKeyboardFocusIndex(undefined);
+ closeDropdown();
+ };
const updateFocusedDropdownItem = (
- e: React.KeyboardEvent
+ e: React.KeyboardEvent,
) => {
- if (e.key === 'Enter' && isDefined(keyboardFocusIndex)) {
- e.preventDefault()
- handleItemClick(filteredItems[keyboardFocusIndex])()
- return setKeyboardFocusIndex(undefined)
+ if (e.key === "Enter" && isDefined(keyboardFocusIndex)) {
+ e.preventDefault();
+ handleItemClick(filteredItems[keyboardFocusIndex])();
+ return setKeyboardFocusIndex(undefined);
}
- if (e.key === 'ArrowDown') {
- e.preventDefault()
- if (keyboardFocusIndex === undefined) return setKeyboardFocusIndex(0)
+ if (e.key === "ArrowDown") {
+ e.preventDefault();
+ if (keyboardFocusIndex === undefined) return setKeyboardFocusIndex(0);
if (keyboardFocusIndex === filteredItems.length - 1)
- return setKeyboardFocusIndex(0)
+ return setKeyboardFocusIndex(0);
itemsRef.current[keyboardFocusIndex + 1]?.scrollIntoView({
- behavior: 'smooth',
- block: 'nearest',
- })
- return setKeyboardFocusIndex(keyboardFocusIndex + 1)
+ behavior: "smooth",
+ block: "nearest",
+ });
+ return setKeyboardFocusIndex(keyboardFocusIndex + 1);
}
- if (e.key === 'ArrowUp') {
- e.preventDefault()
+ if (e.key === "ArrowUp") {
+ e.preventDefault();
if (keyboardFocusIndex === 0 || keyboardFocusIndex === undefined)
- return setKeyboardFocusIndex(filteredItems.length - 1)
+ return setKeyboardFocusIndex(filteredItems.length - 1);
itemsRef.current[keyboardFocusIndex - 1]?.scrollIntoView({
- behavior: 'smooth',
- block: 'nearest',
- })
- setKeyboardFocusIndex(keyboardFocusIndex - 1)
+ behavior: "smooth",
+ block: "nearest",
+ });
+ setKeyboardFocusIndex(keyboardFocusIndex - 1);
}
- }
+ };
const clearSelection = (e: React.MouseEvent) => {
- e.preventDefault()
- setInputValue('')
- onSelect?.(undefined)
- setKeyboardFocusIndex(undefined)
- closeDropdown()
- }
+ e.preventDefault();
+ setInputValue("");
+ onSelect?.(undefined);
+ setKeyboardFocusIndex(undefined);
+ closeDropdown();
+ };
return (
@@ -186,13 +187,13 @@ export const Select = ({
autoComplete="off"
ref={inputRef}
className="select-input"
- value={isTouched ? inputValue : ''}
+ value={isTouched ? inputValue : ""}
placeholder={
!items
- ? 'Loading...'
- : !isTouched && inputValue !== ''
- ? undefined
- : placeholder
+ ? "Loading..."
+ : !isTouched && inputValue !== ""
+ ? undefined
+ : placeholder
}
onChange={updateInputValue}
onFocus={onOpen}
@@ -202,7 +203,7 @@ export const Select = ({
/>
@@ -210,7 +211,7 @@ export const Select = ({
({
onMouseDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
>
- {filteredItems.length > 0 && (
- <>
- {filteredItems.map((item, idx) => {
- return (
- (itemsRef.current[idx] = el)}
- minH="40px"
- key={idx}
- onClick={handleItemClick(item)}
- fontSize="16px"
- fontWeight="normal"
- rounded="none"
- colorScheme="gray"
- role="menuitem"
- variant="ghost"
- bg={
- keyboardFocusIndex === idx
- ? focusedItemBgColor
- : selectedItem === getItemValue(item)
+ {filteredItems.length > 0 &&
+ filteredItems.map((item, idx) => {
+ return (
+ (itemsRef.current[idx] = el)}
+ minH="40px"
+ key={idx}
+ onClick={handleItemClick(item)}
+ fontSize="16px"
+ fontWeight="normal"
+ rounded="none"
+ colorScheme="gray"
+ role="menuitem"
+ variant="ghost"
+ bg={
+ keyboardFocusIndex === idx
+ ? focusedItemBgColor
+ : selectedItem === getItemValue(item)
? selectedItemBgColor
- : 'transparent'
- }
- justifyContent="flex-start"
- transition="none"
- leftIcon={
- typeof item === 'object' ? item.icon : undefined
- }
- >
- {getItemLabel(item)}
-
- )
- })}
-
- )}
+ : "transparent"
+ }
+ justifyContent="flex-start"
+ transition="none"
+ leftIcon={typeof item === "object" ? item.icon : undefined}
+ >
+ {getItemLabel(item)}
+
+ );
+ })}
- )
-}
+ );
+};
const getItemLabel = (item?: Item) => {
- if (!item) return ''
- if (typeof item === 'object') return item.label
- return item
-}
+ if (!item) return "";
+ if (typeof item === "object") return item.label;
+ return item;
+};
const getItemValue = (item: Item) => {
- if (typeof item === 'object') return item.value
- return item
-}
+ if (typeof item === "object") return item.value;
+ return item;
+};
diff --git a/apps/builder/src/components/inputs/SwitchWithLabel.tsx b/apps/builder/src/components/inputs/SwitchWithLabel.tsx
index da6cb0c64f..551b7f6a67 100644
--- a/apps/builder/src/components/inputs/SwitchWithLabel.tsx
+++ b/apps/builder/src/components/inputs/SwitchWithLabel.tsx
@@ -1,42 +1,42 @@
import {
FormControl,
- FormControlProps,
+ type FormControlProps,
FormLabel,
HStack,
Switch,
- SwitchProps,
-} from '@chakra-ui/react'
-import React, { useEffect, useState } from 'react'
-import { MoreInfoTooltip } from '../MoreInfoTooltip'
-import { isDefined } from '@typebot.io/lib'
+ type SwitchProps,
+} from "@chakra-ui/react";
+import { isDefined } from "@typebot.io/lib/utils";
+import React, { useEffect, useState } from "react";
+import { MoreInfoTooltip } from "../MoreInfoTooltip";
export type SwitchWithLabelProps = {
- label: string
- initialValue: boolean | undefined
- moreInfoContent?: string
- onCheckChange?: (isChecked: boolean) => void
- justifyContent?: FormControlProps['justifyContent']
-} & Omit
+ label: string;
+ initialValue: boolean | undefined;
+ moreInfoContent?: string;
+ onCheckChange?: (isChecked: boolean) => void;
+ justifyContent?: FormControlProps["justifyContent"];
+} & Omit;
export const SwitchWithLabel = ({
label,
initialValue,
moreInfoContent,
onCheckChange,
- justifyContent = 'space-between',
+ justifyContent = "space-between",
...switchProps
}: SwitchWithLabelProps) => {
- const [isChecked, setIsChecked] = useState(initialValue)
+ const [isChecked, setIsChecked] = useState(initialValue);
const handleChange = () => {
- setIsChecked(!isChecked)
- if (onCheckChange) onCheckChange(!isChecked)
- }
+ setIsChecked(!isChecked);
+ if (onCheckChange) onCheckChange(!isChecked);
+ };
useEffect(() => {
if (isChecked === undefined && isDefined(initialValue))
- setIsChecked(initialValue)
- }, [initialValue, isChecked])
+ setIsChecked(initialValue);
+ }, [initialValue, isChecked]);
return (
@@ -50,5 +50,5 @@ export const SwitchWithLabel = ({
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/inputs/TextInput.tsx b/apps/builder/src/components/inputs/TextInput.tsx
index 3a3cd34e27..b6566f04bd 100644
--- a/apps/builder/src/components/inputs/TextInput.tsx
+++ b/apps/builder/src/components/inputs/TextInput.tsx
@@ -1,53 +1,54 @@
-import { VariablesButton } from '@/features/variables/components/VariablesButton'
-import { injectVariableInText } from '@/features/variables/helpers/injectVariableInTextInput'
-import { focusInput } from '@/helpers/focusInput'
+import { VariablesButton } from "@/features/variables/components/VariablesButton";
+import { injectVariableInText } from "@/features/variables/helpers/injectVariableInTextInput";
+import { focusInput } from "@/helpers/focusInput";
import {
+ Input as ChakraInput,
FormControl,
FormHelperText,
FormLabel,
HStack,
- Input as ChakraInput,
- InputProps,
+ type InputProps,
Stack,
-} from '@chakra-ui/react'
-import { Variable } from '@typebot.io/schemas'
-import React, {
+} from "@chakra-ui/react";
+import { env } from "@typebot.io/env";
+import type { Variable } from "@typebot.io/variables/schemas";
+import type { ReactNode } from "react";
+import type React from "react";
+import {
forwardRef,
- ReactNode,
useEffect,
useImperativeHandle,
useRef,
useState,
-} from 'react'
-import { useDebouncedCallback } from 'use-debounce'
-import { env } from '@typebot.io/env'
-import { MoreInfoTooltip } from '../MoreInfoTooltip'
+} from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { MoreInfoTooltip } from "../MoreInfoTooltip";
export type TextInputProps = {
- forceDebounce?: boolean
- defaultValue?: string
- onChange?: (value: string) => void
- debounceTimeout?: number
- label?: ReactNode
- helperText?: ReactNode
- moreInfoTooltip?: string
- withVariableButton?: boolean
- isRequired?: boolean
- placeholder?: string
- isDisabled?: boolean
- direction?: 'row' | 'column'
- width?: 'full'
+ forceDebounce?: boolean;
+ defaultValue?: string;
+ onChange?: (value: string) => void;
+ debounceTimeout?: number;
+ label?: ReactNode;
+ helperText?: ReactNode;
+ moreInfoTooltip?: string;
+ withVariableButton?: boolean;
+ isRequired?: boolean;
+ placeholder?: string;
+ isDisabled?: boolean;
+ direction?: "row" | "column";
+ width?: "full";
} & Pick<
InputProps,
- | 'autoComplete'
- | 'onFocus'
- | 'onKeyUp'
- | 'type'
- | 'autoFocus'
- | 'size'
- | 'maxWidth'
- | 'flexShrink'
->
+ | "autoComplete"
+ | "onFocus"
+ | "onKeyUp"
+ | "type"
+ | "autoFocus"
+ | "size"
+ | "maxWidth"
+ | "flexShrink"
+>;
export const TextInput = forwardRef(function TextInput(
{
@@ -69,60 +70,60 @@ export const TextInput = forwardRef(function TextInput(
onKeyUp,
size,
maxWidth,
- direction = 'column',
+ direction = "column",
width,
flexShrink,
}: TextInputProps,
- ref
+ ref,
) {
- const inputRef = useRef(null)
- useImperativeHandle(ref, () => inputRef.current)
- const [isTouched, setIsTouched] = useState(false)
- const [localValue, setLocalValue] = useState(defaultValue ?? '')
+ const inputRef = useRef(null);
+ useImperativeHandle(ref, () => inputRef.current);
+ const [isTouched, setIsTouched] = useState(false);
+ const [localValue, setLocalValue] = useState(defaultValue ?? "");
const [carretPosition, setCarretPosition] = useState(
- localValue.length ?? 0
- )
+ localValue.length ?? 0,
+ );
const onChange = useDebouncedCallback(
// eslint-disable-next-line @typescript-eslint/no-empty-function
_onChange ?? (() => {}),
- env.NEXT_PUBLIC_E2E_TEST && !forceDebounce ? 0 : debounceTimeout
- )
+ env.NEXT_PUBLIC_E2E_TEST && !forceDebounce ? 0 : debounceTimeout,
+ );
useEffect(() => {
- if (isTouched || localValue !== '' || !defaultValue || defaultValue === '')
- return
- setLocalValue(defaultValue ?? '')
- }, [defaultValue, isTouched, localValue])
+ if (isTouched || localValue !== "" || !defaultValue || defaultValue === "")
+ return;
+ setLocalValue(defaultValue ?? "");
+ }, [defaultValue, isTouched, localValue]);
useEffect(
() => () => {
- onChange.flush()
+ onChange.flush();
},
- [onChange]
- )
+ [onChange],
+ );
const changeValue = (value: string) => {
- if (!isTouched) setIsTouched(true)
- setLocalValue(value)
- onChange(value)
- }
+ if (!isTouched) setIsTouched(true);
+ setLocalValue(value);
+ onChange(value);
+ };
const handleVariableSelected = (variable?: Variable) => {
- if (!variable) return
+ if (!variable) return;
const { text, carretPosition: newCarretPosition } = injectVariableInText({
variable,
text: localValue,
at: carretPosition,
- })
- changeValue(text)
- focusInput({ at: newCarretPosition, input: inputRef.current })
- }
+ });
+ changeValue(text);
+ focusInput({ at: newCarretPosition, input: inputRef.current });
+ };
const updateCarretPosition = (e: React.FocusEvent) => {
- const carretPosition = e.target.selectionStart
- if (!carretPosition) return
- setCarretPosition(carretPosition)
- }
+ const carretPosition = e.target.selectionStart;
+ if (!carretPosition) return;
+ setCarretPosition(carretPosition);
+ };
const Input = (
{label && (
- {label}{' '}
+ {label}{" "}
{moreInfoTooltip && (
{moreInfoTooltip}
)}
)}
{withVariableButton ? (
-
+
{Input}
@@ -169,5 +170,5 @@ export const TextInput = forwardRef(function TextInput(
)}
{helperText && {helperText} }
- )
-})
+ );
+});
diff --git a/apps/builder/src/components/inputs/Textarea.tsx b/apps/builder/src/components/inputs/Textarea.tsx
index 666b39689d..9d3cb45fa0 100644
--- a/apps/builder/src/components/inputs/Textarea.tsx
+++ b/apps/builder/src/components/inputs/Textarea.tsx
@@ -1,34 +1,36 @@
-import { VariablesButton } from '@/features/variables/components/VariablesButton'
-import { injectVariableInText } from '@/features/variables/helpers/injectVariableInTextInput'
-import { focusInput } from '@/helpers/focusInput'
+import { VariablesButton } from "@/features/variables/components/VariablesButton";
+import { injectVariableInText } from "@/features/variables/helpers/injectVariableInTextInput";
+import { focusInput } from "@/helpers/focusInput";
import {
+ Textarea as ChakraTextarea,
FormControl,
+ FormHelperText,
FormLabel,
HStack,
- Textarea as ChakraTextarea,
- TextareaProps,
- FormHelperText,
Stack,
-} from '@chakra-ui/react'
-import { Variable } from '@typebot.io/schemas'
-import React, { ReactNode, useEffect, useRef, useState } from 'react'
-import { useDebouncedCallback } from 'use-debounce'
-import { env } from '@typebot.io/env'
-import { MoreInfoTooltip } from '../MoreInfoTooltip'
+ type TextareaProps,
+} from "@chakra-ui/react";
+import { env } from "@typebot.io/env";
+import type { Variable } from "@typebot.io/variables/schemas";
+import type { ReactNode } from "react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { MoreInfoTooltip } from "../MoreInfoTooltip";
type Props = {
- id?: string
- defaultValue?: string
- debounceTimeout?: number
- label?: string
- moreInfoTooltip?: string
- withVariableButton?: boolean
- isRequired?: boolean
- placeholder?: string
- helperText?: ReactNode
- onChange: (value: string) => void
- direction?: 'row' | 'column'
-} & Pick
+ id?: string;
+ defaultValue?: string;
+ debounceTimeout?: number;
+ label?: string;
+ moreInfoTooltip?: string;
+ withVariableButton?: boolean;
+ isRequired?: boolean;
+ placeholder?: string;
+ helperText?: ReactNode;
+ onChange: (value: string) => void;
+ direction?: "row" | "column";
+} & Pick;
export const Textarea = ({
id,
@@ -42,55 +44,55 @@ export const Textarea = ({
isRequired,
minH,
helperText,
- direction = 'column',
+ direction = "column",
width,
}: Props) => {
- const inputRef = useRef(null)
- const [isTouched, setIsTouched] = useState(false)
- const [localValue, setLocalValue] = useState(defaultValue ?? '')
+ const inputRef = useRef(null);
+ const [isTouched, setIsTouched] = useState(false);
+ const [localValue, setLocalValue] = useState(defaultValue ?? "");
const [carretPosition, setCarretPosition] = useState(
- localValue.length ?? 0
- )
+ localValue.length ?? 0,
+ );
const onChange = useDebouncedCallback(
_onChange,
- env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
- )
+ env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout,
+ );
useEffect(() => {
- if (isTouched || localValue !== '' || !defaultValue || defaultValue === '')
- return
- setLocalValue(defaultValue ?? '')
- }, [defaultValue, isTouched, localValue])
+ if (isTouched || localValue !== "" || !defaultValue || defaultValue === "")
+ return;
+ setLocalValue(defaultValue ?? "");
+ }, [defaultValue, isTouched, localValue]);
useEffect(
() => () => {
- onChange.flush()
+ onChange.flush();
},
- [onChange]
- )
+ [onChange],
+ );
const changeValue = (value: string) => {
- if (!isTouched) setIsTouched(true)
- setLocalValue(value)
- onChange(value)
- }
+ if (!isTouched) setIsTouched(true);
+ setLocalValue(value);
+ onChange(value);
+ };
const handleVariableSelected = (variable?: Variable) => {
- if (!variable) return
+ if (!variable) return;
const { text, carretPosition: newCarretPosition } = injectVariableInText({
variable,
text: localValue,
at: carretPosition,
- })
- changeValue(text)
- focusInput({ at: newCarretPosition, input: inputRef.current })
- }
+ });
+ changeValue(text);
+ focusInput({ at: newCarretPosition, input: inputRef.current });
+ };
const updateCarretPosition = (e: React.FocusEvent) => {
- const carretPosition = e.target.selectionStart
- if (!carretPosition) return
- setCarretPosition(carretPosition)
- }
+ const carretPosition = e.target.selectionStart;
+ if (!carretPosition) return;
+ setCarretPosition(carretPosition);
+ };
const Textarea = (
changeValue(e.target.value)}
placeholder={placeholder}
- minH={minH ?? '150px'}
+ minH={minH ?? "150px"}
/>
- )
+ );
return (
{label && (
- {label}{' '}
+ {label}{" "}
{moreInfoTooltip && (
{moreInfoTooltip}
)}
)}
{withVariableButton ? (
-
+
{Textarea}
@@ -130,5 +132,5 @@ export const Textarea = ({
)}
{helperText && {helperText} }
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/inputs/VariableSearchInput.tsx b/apps/builder/src/components/inputs/VariableSearchInput.tsx
index fa669bc318..71fba141a2 100644
--- a/apps/builder/src/components/inputs/VariableSearchInput.tsx
+++ b/apps/builder/src/components/inputs/VariableSearchInput.tsx
@@ -1,47 +1,49 @@
+import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { useParentModal } from "@/features/graph/providers/ParentModalProvider";
+import { useOutsideClick } from "@/hooks/useOutsideClick";
import {
- useDisclosure,
- Flex,
- Popover,
- Input,
- PopoverContent,
Button,
- InputProps,
- IconButton,
+ Flex,
+ FormControl,
+ FormHelperText,
+ FormLabel,
HStack,
- useColorModeValue,
+ IconButton,
+ Input,
+ type InputProps,
+ Popover,
PopoverAnchor,
+ PopoverContent,
Portal,
+ Stack,
Tag,
Text,
- FormControl,
- FormLabel,
- FormHelperText,
- Stack,
-} from '@chakra-ui/react'
-import { EditIcon, PlusIcon, TrashIcon } from '@/components/icons'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { createId } from '@paralleldrive/cuid2'
-import { Variable } from '@typebot.io/schemas'
-import React, { useState, useRef, ChangeEvent, ReactNode } from 'react'
-import { byId, isDefined, isNotDefined } from '@typebot.io/lib'
-import { useOutsideClick } from '@/hooks/useOutsideClick'
-import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
-import { MoreInfoTooltip } from '../MoreInfoTooltip'
-import { useTranslate } from '@tolgee/react'
+ useColorModeValue,
+ useDisclosure,
+} from "@chakra-ui/react";
+import { createId } from "@paralleldrive/cuid2";
+import { useTranslate } from "@tolgee/react";
+import { byId, isDefined, isNotDefined } from "@typebot.io/lib/utils";
+import type { Variable } from "@typebot.io/variables/schemas";
+import type { ChangeEvent, ReactNode } from "react";
+import type React from "react";
+import { useRef, useState } from "react";
+import { MoreInfoTooltip } from "../MoreInfoTooltip";
type Props = {
- initialVariableId: string | undefined
- autoFocus?: boolean
+ initialVariableId: string | undefined;
+ autoFocus?: boolean;
onSelectVariable: (
- variable: Pick | undefined
- ) => void
- label?: string
- placeholder?: string
- helperText?: ReactNode
- moreInfoTooltip?: string
- direction?: 'row' | 'column'
- width?: 'full'
-} & Omit
+ variable: Pick | undefined,
+ ) => void;
+ label?: string;
+ placeholder?: string;
+ helperText?: ReactNode;
+ moreInfoTooltip?: string;
+ direction?: "row" | "column";
+ width?: "full";
+} & Omit;
export const VariableSearchInput = ({
initialVariableId,
@@ -51,154 +53,156 @@ export const VariableSearchInput = ({
label,
helperText,
moreInfoTooltip,
- direction = 'column',
+ direction = "column",
isRequired,
width,
...inputProps
}: Props) => {
- const focusedItemBgColor = useColorModeValue('gray.200', 'gray.700')
+ const focusedItemBgColor = useColorModeValue("gray.200", "gray.700");
const { onOpen, onClose, isOpen } = useDisclosure({
defaultIsOpen: autoFocus,
- })
+ });
const { typebot, createVariable, deleteVariable, updateVariable } =
- useTypebot()
- const variables = typebot?.variables ?? []
+ useTypebot();
+ const variables = typebot?.variables ?? [];
const [inputValue, setInputValue] = useState(
- variables.find(byId(initialVariableId))?.name ?? ''
- )
+ variables.find(byId(initialVariableId))?.name ?? "",
+ );
const [filteredItems, setFilteredItems] = useState(
- variables ?? []
- )
+ variables ?? [],
+ );
const [keyboardFocusIndex, setKeyboardFocusIndex] = useState<
number | undefined
- >()
- const dropdownRef = useRef(null)
- const inputRef = useRef(null)
- const createVariableItemRef = useRef(null)
- const itemsRef = useRef<(HTMLButtonElement | null)[]>([])
- const { ref: parentModalRef } = useParentModal()
- const { t } = useTranslate()
+ >();
+ const dropdownRef = useRef(null);
+ const inputRef = useRef(null);
+ const createVariableItemRef = useRef(null);
+ const itemsRef = useRef<(HTMLButtonElement | null)[]>([]);
+ const { ref: parentModalRef } = useParentModal();
+ const { t } = useTranslate();
useOutsideClick({
ref: dropdownRef,
handler: () => {
- onClose()
- setInputValue(variables.find(byId(initialVariableId))?.name ?? '')
+ onClose();
+ setInputValue(variables.find(byId(initialVariableId))?.name ?? "");
},
isEnabled: isOpen,
- })
+ });
const onInputChange = (e: ChangeEvent) => {
- setInputValue(e.target.value)
- if (e.target.value === '') {
+ setInputValue(e.target.value);
+ if (e.target.value === "") {
if (inputValue.length > 0) {
- onSelectVariable(undefined)
+ onSelectVariable(undefined);
}
- setFilteredItems([...variables.slice(0, 50)])
- return
+ setFilteredItems([...variables.slice(0, 50)]);
+ return;
}
setFilteredItems([
...variables
.filter((item) =>
- item.name.toLowerCase().includes((e.target.value ?? '').toLowerCase())
+ item.name
+ .toLowerCase()
+ .includes((e.target.value ?? "").toLowerCase()),
)
.slice(0, 50),
- ])
- }
+ ]);
+ };
const handleVariableNameClick = (variable: Variable) => () => {
- setInputValue(variable.name)
- onSelectVariable(variable)
- setKeyboardFocusIndex(undefined)
- inputRef.current?.blur()
- onClose()
- }
+ setInputValue(variable.name);
+ onSelectVariable(variable);
+ setKeyboardFocusIndex(undefined);
+ inputRef.current?.blur();
+ onClose();
+ };
const handleCreateNewVariableClick = () => {
- if (!inputValue || inputValue === '') return
- const id = 'v' + createId()
- onSelectVariable({ id, name: inputValue })
- createVariable({ id, name: inputValue, isSessionVariable: true })
- inputRef.current?.blur()
- onClose()
- }
+ if (!inputValue || inputValue === "") return;
+ const id = "v" + createId();
+ onSelectVariable({ id, name: inputValue });
+ createVariable({ id, name: inputValue, isSessionVariable: true });
+ inputRef.current?.blur();
+ onClose();
+ };
const handleDeleteVariableClick =
(variable: Variable) => (e: React.MouseEvent) => {
- e.stopPropagation()
- deleteVariable(variable.id)
- setFilteredItems(filteredItems.filter((item) => item.id !== variable.id))
+ e.stopPropagation();
+ deleteVariable(variable.id);
+ setFilteredItems(filteredItems.filter((item) => item.id !== variable.id));
if (variable.name === inputValue) {
- setInputValue('')
+ setInputValue("");
}
- }
+ };
const handleRenameVariableClick =
(variable: Variable) => (e: React.MouseEvent) => {
- e.stopPropagation()
- const name = prompt(t('variables.rename'), variable.name)
- if (!name) return
- updateVariable(variable.id, { name })
+ e.stopPropagation();
+ const name = prompt(t("variables.rename"), variable.name);
+ if (!name) return;
+ updateVariable(variable.id, { name });
setFilteredItems(
filteredItems.map((item) =>
- item.id === variable.id ? { ...item, name } : item
- )
- )
- }
+ item.id === variable.id ? { ...item, name } : item,
+ ),
+ );
+ };
const isCreateVariableButtonDisplayed =
(inputValue?.length ?? 0) > 0 &&
- isNotDefined(variables.find((v) => v.name === inputValue))
+ isNotDefined(variables.find((v) => v.name === inputValue));
const handleKeyUp = (e: React.KeyboardEvent) => {
- if (e.key === 'Enter' && isDefined(keyboardFocusIndex)) {
+ if (e.key === "Enter" && isDefined(keyboardFocusIndex)) {
if (keyboardFocusIndex === 0 && isCreateVariableButtonDisplayed)
- handleCreateNewVariableClick()
+ handleCreateNewVariableClick();
else
handleVariableNameClick(
filteredItems[
keyboardFocusIndex - (isCreateVariableButtonDisplayed ? 1 : 0)
- ]
- )()
- return setKeyboardFocusIndex(undefined)
+ ],
+ )();
+ return setKeyboardFocusIndex(undefined);
}
- if (e.key === 'ArrowDown') {
- if (keyboardFocusIndex === undefined) return setKeyboardFocusIndex(0)
- if (keyboardFocusIndex >= filteredItems.length) return
+ if (e.key === "ArrowDown") {
+ if (keyboardFocusIndex === undefined) return setKeyboardFocusIndex(0);
+ if (keyboardFocusIndex >= filteredItems.length) return;
itemsRef.current[keyboardFocusIndex + 1]?.scrollIntoView({
- behavior: 'smooth',
- block: 'nearest',
- })
- return setKeyboardFocusIndex(keyboardFocusIndex + 1)
+ behavior: "smooth",
+ block: "nearest",
+ });
+ return setKeyboardFocusIndex(keyboardFocusIndex + 1);
}
- if (e.key === 'ArrowUp') {
- if (keyboardFocusIndex === undefined) return
- if (keyboardFocusIndex <= 0) return setKeyboardFocusIndex(undefined)
+ if (e.key === "ArrowUp") {
+ if (keyboardFocusIndex === undefined) return;
+ if (keyboardFocusIndex <= 0) return setKeyboardFocusIndex(undefined);
itemsRef.current[keyboardFocusIndex - 1]?.scrollIntoView({
- behavior: 'smooth',
- block: 'nearest',
- })
- return setKeyboardFocusIndex(keyboardFocusIndex - 1)
+ behavior: "smooth",
+ block: "nearest",
+ });
+ return setKeyboardFocusIndex(keyboardFocusIndex - 1);
}
- return setKeyboardFocusIndex(undefined)
- }
+ return setKeyboardFocusIndex(undefined);
+ };
const openDropdown = () => {
- if (inputValue === '') setFilteredItems(variables)
- onOpen()
- }
+ if (inputValue === "") setFilteredItems(variables);
+ onOpen();
+ };
return (
{label && (
- {label}{' '}
+ {label}{" "}
{moreInfoTooltip && (
{moreInfoTooltip}
)}
@@ -220,7 +224,7 @@ export const VariableSearchInput = ({
onChange={onInputChange}
onFocus={openDropdown}
onKeyDown={handleKeyUp}
- placeholder={placeholder ?? t('variables.select')}
+ placeholder={placeholder ?? t("variables.select")}
autoComplete="off"
{...inputProps}
/>
@@ -254,10 +258,10 @@ export const VariableSearchInput = ({
bgColor={
keyboardFocusIndex === 0
? focusedItemBgColor
- : 'transparent'
+ : "transparent"
}
>
- {t('create')}
+ {t("create")}
{inputValue}
@@ -265,62 +269,59 @@ export const VariableSearchInput = ({
)}
- {filteredItems.length > 0 && (
- <>
- {filteredItems.map((item, idx) => {
- const indexInList = isCreateVariableButtonDisplayed
- ? idx + 1
- : idx
- return (
- (itemsRef.current[idx] = el)}
- role="menuitem"
- minH="40px"
- key={idx}
- onClick={handleVariableNameClick(item)}
- fontSize="16px"
- fontWeight="normal"
- rounded="none"
- colorScheme="gray"
- variant="ghost"
- justifyContent="space-between"
- bgColor={
- keyboardFocusIndex === indexInList
- ? focusedItemBgColor
- : 'transparent'
- }
- transition="none"
- >
-
- {item.name}
-
+ {filteredItems.length > 0 &&
+ filteredItems.map((item, idx) => {
+ const indexInList = isCreateVariableButtonDisplayed
+ ? idx + 1
+ : idx;
+ return (
+ (itemsRef.current[idx] = el)}
+ role="menuitem"
+ minH="40px"
+ key={idx}
+ onClick={handleVariableNameClick(item)}
+ fontSize="16px"
+ fontWeight="normal"
+ rounded="none"
+ colorScheme="gray"
+ variant="ghost"
+ justifyContent="space-between"
+ bgColor={
+ keyboardFocusIndex === indexInList
+ ? focusedItemBgColor
+ : "transparent"
+ }
+ transition="none"
+ >
+
+ {item.name}
+
-
-
-
- )
- })}
-
- )}
+
+
+
+ );
+ })}
{helperText && {helperText} }
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/inputs/index.tsx b/apps/builder/src/components/inputs/index.tsx
index 9db702e325..b539242544 100644
--- a/apps/builder/src/components/inputs/index.tsx
+++ b/apps/builder/src/components/inputs/index.tsx
@@ -1,3 +1,3 @@
-export { TextInput } from './TextInput'
-export { Textarea } from './Textarea'
-export { NumberInput } from './NumberInput'
+export { TextInput } from "./TextInput";
+export { Textarea } from "./Textarea";
+export { NumberInput } from "./NumberInput";
diff --git a/apps/builder/src/components/logos/AzureAdLogo.tsx b/apps/builder/src/components/logos/AzureAdLogo.tsx
index f094427d4e..5b001c914e 100644
--- a/apps/builder/src/components/logos/AzureAdLogo.tsx
+++ b/apps/builder/src/components/logos/AzureAdLogo.tsx
@@ -1,4 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const AzureAdLogo = (props: IconProps) => {
return (
@@ -27,5 +27,5 @@ export const AzureAdLogo = (props: IconProps) => {
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/logos/FacebookLogo.tsx b/apps/builder/src/components/logos/FacebookLogo.tsx
index 5e29e1d68e..8931cc9df5 100644
--- a/apps/builder/src/components/logos/FacebookLogo.tsx
+++ b/apps/builder/src/components/logos/FacebookLogo.tsx
@@ -1,4 +1,4 @@
-import { IconProps, Icon } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const FacebookLogo = (props: IconProps) => (
@@ -8,4 +8,4 @@ export const FacebookLogo = (props: IconProps) => (
fill="#fff"
/>
-)
+);
diff --git a/apps/builder/src/components/logos/GiphyLogo.tsx b/apps/builder/src/components/logos/GiphyLogo.tsx
index 16ece7384c..c3041ccdb9 100644
--- a/apps/builder/src/components/logos/GiphyLogo.tsx
+++ b/apps/builder/src/components/logos/GiphyLogo.tsx
@@ -1,4 +1,4 @@
-import { IconProps, Icon, useColorModeValue } from '@chakra-ui/react'
+import { Icon, type IconProps, useColorModeValue } from "@chakra-ui/react";
export const GiphyLogo = (props: IconProps) => (
@@ -15,9 +15,9 @@ export const GiphyLogo = (props: IconProps) => (
-)
+);
diff --git a/apps/builder/src/components/logos/GitlabLogo.tsx b/apps/builder/src/components/logos/GitlabLogo.tsx
index f5b0e25e03..aad593b992 100644
--- a/apps/builder/src/components/logos/GitlabLogo.tsx
+++ b/apps/builder/src/components/logos/GitlabLogo.tsx
@@ -1,4 +1,4 @@
-import { IconProps, Icon } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const GitlabLogo = (props: IconProps) => (
@@ -31,4 +31,4 @@ export const GitlabLogo = (props: IconProps) => (
fill="#E24329"
/>
-)
+);
diff --git a/apps/builder/src/components/logos/KeycloakLogo.tsx b/apps/builder/src/components/logos/KeycloakLogo.tsx
index bfa68202f0..73ee7daacc 100644
--- a/apps/builder/src/components/logos/KeycloakLogo.tsx
+++ b/apps/builder/src/components/logos/KeycloakLogo.tsx
@@ -1,4 +1,4 @@
-import { IconProps, Icon } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const KeycloackLogo = (props: IconProps) => (
@@ -8,4 +8,4 @@ export const KeycloackLogo = (props: IconProps) => (
fill="#fff"
/>
-)
+);
diff --git a/apps/builder/src/components/logos/PexelsLogo.tsx b/apps/builder/src/components/logos/PexelsLogo.tsx
index ddf50d1ea7..d77784a0b0 100644
--- a/apps/builder/src/components/logos/PexelsLogo.tsx
+++ b/apps/builder/src/components/logos/PexelsLogo.tsx
@@ -1,4 +1,4 @@
-import { IconProps, Icon, useColorModeValue } from '@chakra-ui/react'
+import { Icon, type IconProps, useColorModeValue } from "@chakra-ui/react";
export const PexelsLogo = (props: IconProps) => (
@@ -18,8 +18,8 @@ export const PexelsLogo = (props: IconProps) => (
-)
+);
diff --git a/apps/builder/src/components/logos/StripeLogo.tsx b/apps/builder/src/components/logos/StripeLogo.tsx
index 880e69fa39..f9bb4ab9e9 100644
--- a/apps/builder/src/components/logos/StripeLogo.tsx
+++ b/apps/builder/src/components/logos/StripeLogo.tsx
@@ -1,16 +1,16 @@
-import { Icon, IconProps } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const StripeLogo = (props: IconProps) => {
return (
- )
-}
+ );
+};
diff --git a/apps/builder/src/components/logos/UnsplashLogo.tsx b/apps/builder/src/components/logos/UnsplashLogo.tsx
index 82571facda..b8fb29a3b8 100644
--- a/apps/builder/src/components/logos/UnsplashLogo.tsx
+++ b/apps/builder/src/components/logos/UnsplashLogo.tsx
@@ -1,7 +1,7 @@
-import { IconProps, Icon } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const UnsplashLogo = (props: IconProps) => (
-)
+);
diff --git a/apps/builder/src/components/logos/WhatsAppLogo.tsx b/apps/builder/src/components/logos/WhatsAppLogo.tsx
index a5b9a7d336..2bf9f2732e 100644
--- a/apps/builder/src/components/logos/WhatsAppLogo.tsx
+++ b/apps/builder/src/components/logos/WhatsAppLogo.tsx
@@ -1,6 +1,6 @@
-import { IconProps, Icon } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
-export const whatsAppBrandColor = '#25D366'
+export const whatsAppBrandColor = "#25D366";
export const WhatsAppLogo = (props: IconProps) => (
@@ -11,4 +11,4 @@ export const WhatsAppLogo = (props: IconProps) => (
fill="currentColor"
/>
-)
+);
diff --git a/apps/builder/src/features/account/UserProvider.tsx b/apps/builder/src/features/account/UserProvider.tsx
index 3e1fb1ca27..3debc6659f 100644
--- a/apps/builder/src/features/account/UserProvider.tsx
+++ b/apps/builder/src/features/account/UserProvider.tsx
@@ -1,119 +1,120 @@
-import { signOut, useSession } from 'next-auth/react'
-import { useRouter } from 'next/router'
-import { createContext, ReactNode, useEffect, useState } from 'react'
-import { isDefined, isNotDefined } from '@typebot.io/lib'
-import { User } from '@typebot.io/schemas'
-import { setUser as setSentryUser } from '@sentry/nextjs'
-import { useToast } from '@/hooks/useToast'
-import { updateUserQuery } from './queries/updateUserQuery'
-import { useDebouncedCallback } from 'use-debounce'
-import { env } from '@typebot.io/env'
-import { useColorMode } from '@chakra-ui/react'
+import { useToast } from "@/hooks/useToast";
+import { useColorMode } from "@chakra-ui/react";
+import { setUser as setSentryUser } from "@sentry/nextjs";
+import { env } from "@typebot.io/env";
+import { isDefined, isNotDefined } from "@typebot.io/lib/utils";
+import type { User } from "@typebot.io/schemas/features/user/schema";
+import { signOut, useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import type { ReactNode } from "react";
+import { createContext, useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { updateUserQuery } from "./queries/updateUserQuery";
export const userContext = createContext<{
- user?: User
- isLoading: boolean
- currentWorkspaceId?: string
- logOut: () => void
- updateUser: (newUser: Partial) => void
+ user?: User;
+ isLoading: boolean;
+ currentWorkspaceId?: string;
+ logOut: () => void;
+ updateUser: (newUser: Partial) => void;
}>({
isLoading: false,
logOut: () => {},
updateUser: () => {},
-})
+});
-const debounceTimeout = 1000
+const debounceTimeout = 1000;
export const UserProvider = ({ children }: { children: ReactNode }) => {
- const router = useRouter()
- const { data: session, status } = useSession()
- const [user, setUser] = useState()
- const { showToast } = useToast()
- const [currentWorkspaceId, setCurrentWorkspaceId] = useState()
- const { setColorMode } = useColorMode()
+ const router = useRouter();
+ const { data: session, status } = useSession();
+ const [user, setUser] = useState();
+ const { showToast } = useToast();
+ const [currentWorkspaceId, setCurrentWorkspaceId] = useState();
+ const { setColorMode } = useColorMode();
useEffect(() => {
- const currentColorScheme = localStorage.getItem('chakra-ui-color-mode') as
- | 'light'
- | 'dark'
- | null
- if (!currentColorScheme) return
- const systemColorScheme = window.matchMedia('(prefers-color-scheme: dark)')
+ const currentColorScheme = localStorage.getItem("chakra-ui-color-mode") as
+ | "light"
+ | "dark"
+ | null;
+ if (!currentColorScheme) return;
+ const systemColorScheme = window.matchMedia("(prefers-color-scheme: dark)")
.matches
- ? 'dark'
- : 'light'
+ ? "dark"
+ : "light";
const userPrefersSystemMode =
- !user?.preferredAppAppearance || user.preferredAppAppearance === 'system'
+ !user?.preferredAppAppearance || user.preferredAppAppearance === "system";
const computedColorMode = userPrefersSystemMode
? systemColorScheme
- : user?.preferredAppAppearance
- if (computedColorMode === currentColorScheme) return
- setColorMode(computedColorMode)
- }, [setColorMode, user?.preferredAppAppearance])
+ : user?.preferredAppAppearance;
+ if (computedColorMode === currentColorScheme) return;
+ setColorMode(computedColorMode);
+ }, [setColorMode, user?.preferredAppAppearance]);
useEffect(() => {
- if (isDefined(user) || isNotDefined(session)) return
+ if (isDefined(user) || isNotDefined(session)) return;
setCurrentWorkspaceId(
- localStorage.getItem('currentWorkspaceId') ?? undefined
- )
- const parsedUser = session.user as User
- setUser(parsedUser)
+ localStorage.getItem("currentWorkspaceId") ?? undefined,
+ );
+ const parsedUser = session.user as User;
+ setUser(parsedUser);
if (parsedUser?.id) {
- setSentryUser({ id: parsedUser.id })
+ setSentryUser({ id: parsedUser.id });
}
- }, [session, user])
+ }, [session, user]);
useEffect(() => {
- if (!router.isReady) return
- if (status === 'loading') return
- const isSignInPath = ['/signin', '/register'].includes(router.pathname)
+ if (!router.isReady) return;
+ if (status === "loading") return;
+ const isSignInPath = ["/signin", "/register"].includes(router.pathname);
const isPathPublicFriendly = /\/typebots\/.+\/(edit|theme|settings)/.test(
- router.pathname
- )
- if (isSignInPath || isPathPublicFriendly) return
- if (!user && status === 'unauthenticated')
+ router.pathname,
+ );
+ if (isSignInPath || isPathPublicFriendly) return;
+ if (!user && status === "unauthenticated")
router.replace({
- pathname: '/signin',
+ pathname: "/signin",
query: {
redirectPath: router.asPath,
},
- })
- }, [router, status, user])
+ });
+ }, [router, status, user]);
const updateUser = (updates: Partial) => {
- if (isNotDefined(user)) return
- const newUser = { ...user, ...updates }
- setUser(newUser)
- saveUser(updates)
- }
+ if (isNotDefined(user)) return;
+ const newUser = { ...user, ...updates };
+ setUser(newUser);
+ saveUser(updates);
+ };
const saveUser = useDebouncedCallback(
async (updates: Partial) => {
- if (isNotDefined(user)) return
- const { error } = await updateUserQuery(user.id, updates)
- if (error) showToast({ title: error.name, description: error.message })
- await refreshUser()
+ if (isNotDefined(user)) return;
+ const { error } = await updateUserQuery(user.id, updates);
+ if (error) showToast({ title: error.name, description: error.message });
+ await refreshUser();
},
- env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
- )
+ env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout,
+ );
const logOut = () => {
- signOut()
- setUser(undefined)
- }
+ signOut();
+ setUser(undefined);
+ };
useEffect(() => {
return () => {
- saveUser.flush()
- }
- }, [saveUser])
+ saveUser.flush();
+ };
+ }, [saveUser]);
return (
{
>
{children}
- )
-}
+ );
+};
export const refreshUser = async () => {
- await fetch('/api/auth/session?update')
- reloadSession()
-}
+ await fetch("/api/auth/session?update");
+ reloadSession();
+};
const reloadSession = () => {
- const event = new Event('visibilitychange')
- document.dispatchEvent(event)
-}
+ const event = new Event("visibilitychange");
+ document.dispatchEvent(event);
+};
diff --git a/apps/builder/src/features/account/account.spec.ts b/apps/builder/src/features/account/account.spec.ts
index 18adb985d4..ed4876a2e5 100644
--- a/apps/builder/src/features/account/account.spec.ts
+++ b/apps/builder/src/features/account/account.spec.ts
@@ -1,47 +1,47 @@
-import { getTestAsset } from '@/test/utils/playwright'
-import test, { expect } from '@playwright/test'
-import { env } from '@typebot.io/env'
-import { userId } from '@typebot.io/playwright/databaseSetup'
+import { getTestAsset } from "@/test/utils/playwright";
+import test, { expect } from "@playwright/test";
+import { env } from "@typebot.io/env";
+import { userId } from "@typebot.io/playwright/databaseSetup";
-test.describe.configure({ mode: 'parallel' })
+test.describe.configure({ mode: "parallel" });
-test('should display user info properly', async ({ page }) => {
- await page.goto('/typebots')
- await page.click('text=Settings & Members')
+test("should display user info properly", async ({ page }) => {
+ await page.goto("/typebots");
+ await page.click("text=Settings & Members");
expect(
- page.locator('input[type="email"]').getAttribute('disabled')
- ).toBeDefined()
- await page.getByRole('textbox', { name: 'Name:' }).fill('John Doe')
- await page.setInputFiles('input[type="file"]', getTestAsset('avatar.jpg'))
- await expect(page.locator('img >> nth=1')).toHaveAttribute(
- 'src',
+ page.locator('input[type="email"]').getAttribute("disabled"),
+ ).toBeDefined();
+ await page.getByRole("textbox", { name: "Name:" }).fill("John Doe");
+ await page.setInputFiles('input[type="file"]', getTestAsset("avatar.jpg"));
+ await expect(page.locator("img >> nth=1")).toHaveAttribute(
+ "src",
new RegExp(
- `${env.S3_ENDPOINT}${env.S3_PORT ? `:${env.S3_PORT}` : ''}/${
+ `${env.S3_ENDPOINT}${env.S3_PORT ? `:${env.S3_PORT}` : ""}/${
env.S3_BUCKET
}/public/users/${userId}/avatar`,
- 'gm'
- )
- )
- await page.click('text="Preferences"')
- await expect(page.locator('text=Trackpad')).toBeVisible()
-})
+ "gm",
+ ),
+ );
+ await page.click('text="Preferences"');
+ await expect(page.locator("text=Trackpad")).toBeVisible();
+});
-test('should be able to create and delete api tokens', async ({ page }) => {
- await page.goto('/typebots')
- await page.click('text=Settings & Members')
- await expect(page.locator('text=Github')).toBeVisible()
- await page.click('text="Create"')
- await expect(page.locator('button >> text="Create token"')).toBeDisabled()
- await page.fill('[placeholder="I.e. Zapier, Github, Make.com"]', 'CLI')
- await expect(page.locator('button >> text="Create token"')).toBeEnabled()
- await page.click('button >> text="Create token"')
- await expect(page.locator('text=Please copy your token')).toBeVisible()
- await expect(page.locator('button >> text="Copy"')).toBeVisible()
- await page.click('button >> text="Done"')
- await expect(page.locator('text=CLI')).toBeVisible()
- await page.click('text="Delete" >> nth=2')
- await expect(page.locator('strong >> text="Github"')).toBeVisible()
- await page.click('button >> text="Delete" >> nth=-1')
- await expect(page.locator('button >> text="Delete" >> nth=-1')).toBeEnabled()
- await expect(page.locator('text="Github"')).toBeHidden()
-})
+test("should be able to create and delete api tokens", async ({ page }) => {
+ await page.goto("/typebots");
+ await page.click("text=Settings & Members");
+ await expect(page.locator("text=Github")).toBeVisible();
+ await page.click('text="Create"');
+ await expect(page.locator('button >> text="Create token"')).toBeDisabled();
+ await page.fill('[placeholder="I.e. Zapier, Github, Make.com"]', "CLI");
+ await expect(page.locator('button >> text="Create token"')).toBeEnabled();
+ await page.click('button >> text="Create token"');
+ await expect(page.locator("text=Please copy your token")).toBeVisible();
+ await expect(page.locator('button >> text="Copy"')).toBeVisible();
+ await page.click('button >> text="Done"');
+ await expect(page.locator("text=CLI")).toBeVisible();
+ await page.click('text="Delete" >> nth=2');
+ await expect(page.locator('strong >> text="Github"')).toBeVisible();
+ await page.click('button >> text="Delete" >> nth=-1');
+ await expect(page.locator('button >> text="Delete" >> nth=-1')).toBeEnabled();
+ await expect(page.locator('text="Github"')).toBeHidden();
+});
diff --git a/apps/builder/src/features/account/components/ApiTokensList.tsx b/apps/builder/src/features/account/components/ApiTokensList.tsx
index 2ee74794b3..791105a21c 100644
--- a/apps/builder/src/features/account/components/ApiTokensList.tsx
+++ b/apps/builder/src/features/account/components/ApiTokensList.tsx
@@ -1,67 +1,68 @@
+import { ConfirmModal } from "@/components/ConfirmModal";
+import { TimeSince } from "@/components/TimeSince";
+import { useToast } from "@/hooks/useToast";
import {
- TableContainer,
- Table,
- Thead,
- Tr,
- Th,
- Tbody,
- Td,
Button,
- Text,
- Heading,
Checkbox,
+ Flex,
+ Heading,
Skeleton,
Stack,
- Flex,
+ Table,
+ TableContainer,
+ Tbody,
+ Td,
+ Text,
+ Th,
+ Thead,
+ Tr,
useDisclosure,
-} from '@chakra-ui/react'
-import { ConfirmModal } from '@/components/ConfirmModal'
-import { useToast } from '@/hooks/useToast'
-import { User } from '@typebot.io/prisma'
-import React, { useState } from 'react'
-import { byId, isDefined } from '@typebot.io/lib'
-import { CreateTokenModal } from './CreateTokenModal'
-import { useApiTokens } from '../hooks/useApiTokens'
-import { ApiTokenFromServer } from '../types'
-import { deleteApiTokenQuery } from '../queries/deleteApiTokenQuery'
-import { T, useTranslate } from '@tolgee/react'
-import { TimeSince } from '@/components/TimeSince'
+} from "@chakra-ui/react";
+import { T, useTranslate } from "@tolgee/react";
+import { byId, isDefined } from "@typebot.io/lib/utils";
+import type { Prisma } from "@typebot.io/prisma/types";
+import React, { useState } from "react";
+import { useApiTokens } from "../hooks/useApiTokens";
+import { deleteApiTokenQuery } from "../queries/deleteApiTokenQuery";
+import type { ApiTokenFromServer } from "../types";
+import { CreateTokenModal } from "./CreateTokenModal";
-type Props = { user: User }
+type Props = { user: Prisma.User };
export const ApiTokensList = ({ user }: Props) => {
- const { t } = useTranslate()
- const { showToast } = useToast()
+ const { t } = useTranslate();
+ const { showToast } = useToast();
const { apiTokens, isLoading, mutate } = useApiTokens({
userId: user.id,
onError: (e) =>
- showToast({ title: 'Failed to fetch tokens', description: e.message }),
- })
+ showToast({ title: "Failed to fetch tokens", description: e.message }),
+ });
const {
isOpen: isCreateOpen,
onOpen: onCreateOpen,
onClose: onCreateClose,
- } = useDisclosure()
- const [deletingId, setDeletingId] = useState()
+ } = useDisclosure();
+ const [deletingId, setDeletingId] = useState();
const refreshListWithNewToken = (token: ApiTokenFromServer) => {
- if (!apiTokens) return
- mutate({ apiTokens: [token, ...apiTokens] })
- }
+ if (!apiTokens) return;
+ mutate({ apiTokens: [token, ...apiTokens] });
+ };
const deleteToken = async (tokenId?: string) => {
- if (!apiTokens || !tokenId) return
- const { error } = await deleteApiTokenQuery({ userId: user.id, tokenId })
- if (!error) mutate({ apiTokens: apiTokens.filter((t) => t.id !== tokenId) })
- }
+ if (!apiTokens || !tokenId) return;
+ const { error } = await deleteApiTokenQuery({ userId: user.id, tokenId });
+ if (!error)
+ mutate({ apiTokens: apiTokens.filter((t) => t.id !== tokenId) });
+ };
return (
- {t('account.apiTokens.heading')}
- {t('account.apiTokens.description')}
+ {t("account.apiTokens.heading")}
+ {t("account.apiTokens.description")}
- {t('account.apiTokens.createButton.label')}
+ {t("account.apiTokens.createButton.label")}
{
- {t('account.apiTokens.table.nameHeader')}
- {t('account.apiTokens.table.createdHeader')}
+ {t("account.apiTokens.table.nameHeader")}
+ {t("account.apiTokens.table.createdHeader")}
@@ -94,7 +95,7 @@ export const ApiTokensList = ({ user }: Props) => {
variant="outline"
onClick={() => setDeletingId(token.id)}
>
- {t('account.apiTokens.deleteButton.label')}
+ {t("account.apiTokens.deleteButton.label")}
@@ -132,8 +133,8 @@ export const ApiTokensList = ({ user }: Props) => {
/>
}
- confirmButtonLabel={t('account.apiTokens.deleteButton.label')}
+ confirmButtonLabel={t("account.apiTokens.deleteButton.label")}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/account/components/ApiTokensModal.tsx b/apps/builder/src/features/account/components/ApiTokensModal.tsx
index 1073d3c6a8..f117c8874d 100644
--- a/apps/builder/src/features/account/components/ApiTokensModal.tsx
+++ b/apps/builder/src/features/account/components/ApiTokensModal.tsx
@@ -5,18 +5,18 @@ import {
ModalFooter,
ModalHeader,
ModalOverlay,
-} from '@chakra-ui/react'
-import { ApiTokensList } from './ApiTokensList'
-import { useUser } from '../hooks/useUser'
+} from "@chakra-ui/react";
+import { useUser } from "../hooks/useUser";
+import { ApiTokensList } from "./ApiTokensList";
type Props = {
- isOpen: boolean
- onClose: () => void
-}
+ isOpen: boolean;
+ onClose: () => void;
+};
export const ApiTokensModal = ({ isOpen, onClose }: Props) => {
- const { user } = useUser()
+ const { user } = useUser();
- if (!user) return
+ if (!user) return;
return (
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/account/components/AppearanceRadioGroup.tsx b/apps/builder/src/features/account/components/AppearanceRadioGroup.tsx
index ea7b604876..d15f2ad9f0 100644
--- a/apps/builder/src/features/account/components/AppearanceRadioGroup.tsx
+++ b/apps/builder/src/features/account/components/AppearanceRadioGroup.tsx
@@ -1,39 +1,39 @@
import {
- RadioGroup,
HStack,
- VStack,
- Stack,
+ Image,
Radio,
+ RadioGroup,
+ Stack,
Text,
- Image,
-} from '@chakra-ui/react'
-import { useTranslate } from '@tolgee/react'
+ VStack,
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
type Props = {
- defaultValue: string
- onChange: (value: string) => void
-}
+ defaultValue: string;
+ onChange: (value: string) => void;
+};
export const AppearanceRadioGroup = ({ defaultValue, onChange }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const appearanceData = [
{
- value: 'light',
- label: t('account.preferences.appearance.lightLabel'),
- image: '/images/light-mode.png',
+ value: "light",
+ label: t("account.preferences.appearance.lightLabel"),
+ image: "/images/light-mode.png",
},
{
- value: 'dark',
- label: t('account.preferences.appearance.darkLabel'),
- image: '/images/dark-mode.png',
+ value: "dark",
+ label: t("account.preferences.appearance.darkLabel"),
+ image: "/images/dark-mode.png",
},
{
- value: 'system',
- label: t('account.preferences.appearance.systemLabel'),
- image: '/images/system-mode.png',
+ value: "system",
+ label: t("account.preferences.appearance.systemLabel"),
+ image: "/images/system-mode.png",
},
- ]
+ ];
return (
@@ -54,7 +54,7 @@ export const AppearanceRadioGroup = ({ defaultValue, onChange }: Props) => {
@@ -67,5 +67,5 @@ export const AppearanceRadioGroup = ({ defaultValue, onChange }: Props) => {
))}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/account/components/CreateTokenModal.tsx b/apps/builder/src/features/account/components/CreateTokenModal.tsx
index 4c1c631330..118f0d0e5b 100644
--- a/apps/builder/src/features/account/components/CreateTokenModal.tsx
+++ b/apps/builder/src/features/account/components/CreateTokenModal.tsx
@@ -1,30 +1,31 @@
-import { CopyButton } from '@/components/CopyButton'
-import { useTranslate } from '@tolgee/react'
+import { CopyButton } from "@/components/CopyButton";
import {
+ Button,
+ Input,
+ InputGroup,
+ InputRightElement,
Modal,
- ModalOverlay,
+ ModalBody,
+ ModalCloseButton,
ModalContent,
+ ModalFooter,
ModalHeader,
- ModalCloseButton,
- ModalBody,
+ ModalOverlay,
Stack,
- Input,
- ModalFooter,
- Button,
Text,
- InputGroup,
- InputRightElement,
-} from '@chakra-ui/react'
-import React, { FormEvent, useRef, useState } from 'react'
-import { createApiTokenQuery } from '../queries/createApiTokenQuery'
-import { ApiTokenFromServer } from '../types'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import type { FormEvent } from "react";
+import React, { useRef, useState } from "react";
+import { createApiTokenQuery } from "../queries/createApiTokenQuery";
+import type { ApiTokenFromServer } from "../types";
type Props = {
- userId: string
- isOpen: boolean
- onNewToken: (token: ApiTokenFromServer) => void
- onClose: () => void
-}
+ userId: string;
+ isOpen: boolean;
+ onNewToken: (token: ApiTokenFromServer) => void;
+ onClose: () => void;
+};
export const CreateTokenModal = ({
userId,
@@ -32,22 +33,22 @@ export const CreateTokenModal = ({
onClose,
onNewToken,
}: Props) => {
- const inputRef = useRef(null)
- const { t } = useTranslate()
- const [name, setName] = useState('')
- const [isSubmitting, setIsSubmitting] = useState(false)
- const [newTokenValue, setNewTokenValue] = useState()
+ const inputRef = useRef(null);
+ const { t } = useTranslate();
+ const [name, setName] = useState("");
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [newTokenValue, setNewTokenValue] = useState();
const createToken = async (e: FormEvent) => {
- e.preventDefault()
- setIsSubmitting(true)
- const { data } = await createApiTokenQuery(userId, { name })
+ e.preventDefault();
+ setIsSubmitting(true);
+ const { data } = await createApiTokenQuery(userId, { name });
if (data?.apiToken) {
- setNewTokenValue(data.apiToken.token)
- onNewToken(data.apiToken)
+ setNewTokenValue(data.apiToken.token);
+ onNewToken(data.apiToken);
}
- setIsSubmitting(false)
- }
+ setIsSubmitting(false);
+ };
return (
@@ -55,16 +56,16 @@ export const CreateTokenModal = ({
{newTokenValue
- ? t('account.apiTokens.createModal.createdHeading')
- : t('account.apiTokens.createModal.createHeading')}
+ ? t("account.apiTokens.createModal.createdHeading")
+ : t("account.apiTokens.createModal.createHeading")}
- {t('account.apiTokens.createModal.copyInstruction')}{' '}
+ {t("account.apiTokens.createModal.copyInstruction")}{" "}
- {t('account.apiTokens.createModal.securityWarning')}
+ {t("account.apiTokens.createModal.securityWarning")}
@@ -77,12 +78,12 @@ export const CreateTokenModal = ({
) : (
- {t('account.apiTokens.createModal.nameInput.label')}
+ {t("account.apiTokens.createModal.nameInput.label")}
{newTokenValue ? (
- {t('account.apiTokens.createModal.doneButton.label')}
+ {t("account.apiTokens.createModal.doneButton.label")}
) : (
- {t('account.apiTokens.createModal.createButton.label')}
+ {t("account.apiTokens.createModal.createButton.label")}
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/account/components/GraphNavigationRadioGroup.tsx b/apps/builder/src/features/account/components/GraphNavigationRadioGroup.tsx
index e66205032b..e73246cad1 100644
--- a/apps/builder/src/features/account/components/GraphNavigationRadioGroup.tsx
+++ b/apps/builder/src/features/account/components/GraphNavigationRadioGroup.tsx
@@ -1,40 +1,40 @@
-import { MouseIcon, LaptopIcon } from '@/components/icons'
-import { useTranslate } from '@tolgee/react'
+import { LaptopIcon, MouseIcon } from "@/components/icons";
import {
HStack,
Radio,
RadioGroup,
Stack,
- VStack,
Text,
-} from '@chakra-ui/react'
-import { GraphNavigation } from '@typebot.io/prisma'
+ VStack,
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { GraphNavigation } from "@typebot.io/prisma/enum";
type Props = {
- defaultValue: string
- onChange: (value: string) => void
-}
+ defaultValue: string;
+ onChange: (value: string) => void;
+};
export const GraphNavigationRadioGroup = ({
defaultValue,
onChange,
}: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const graphNavigationData = [
{
value: GraphNavigation.MOUSE,
- label: t('account.preferences.graphNavigation.mouse.label'),
- description: t('account.preferences.graphNavigation.mouse.description'),
+ label: t("account.preferences.graphNavigation.mouse.label"),
+ description: t("account.preferences.graphNavigation.mouse.description"),
icon:
@@ -64,5 +64,5 @@ export const GraphNavigationRadioGroup = ({
))}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/account/components/MyAccountForm.tsx b/apps/builder/src/features/account/components/MyAccountForm.tsx
index bd86629685..792ff552c1 100644
--- a/apps/builder/src/features/account/components/MyAccountForm.tsx
+++ b/apps/builder/src/features/account/components/MyAccountForm.tsx
@@ -1,31 +1,31 @@
-import { Stack, HStack, Avatar, Text, Tooltip } from '@chakra-ui/react'
-import { UploadIcon } from '@/components/icons'
-import React, { useState } from 'react'
-import { ApiTokensList } from './ApiTokensList'
-import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
-import { useUser } from '../hooks/useUser'
-import { TextInput } from '@/components/inputs/TextInput'
-import { useTranslate } from '@tolgee/react'
+import { UploadButton } from "@/components/ImageUploadContent/UploadButton";
+import { UploadIcon } from "@/components/icons";
+import { TextInput } from "@/components/inputs/TextInput";
+import { Avatar, HStack, Stack, Text, Tooltip } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import React, { useState } from "react";
+import { useUser } from "../hooks/useUser";
+import { ApiTokensList } from "./ApiTokensList";
export const MyAccountForm = () => {
- const { t } = useTranslate()
- const { user, updateUser } = useUser()
- const [name, setName] = useState(user?.name ?? '')
- const [email, setEmail] = useState(user?.email ?? '')
+ const { t } = useTranslate();
+ const { user, updateUser } = useUser();
+ const [name, setName] = useState(user?.name ?? "");
+ const [email, setEmail] = useState(user?.email ?? "");
const handleFileUploaded = async (url: string) => {
- updateUser({ image: url })
- }
+ updateUser({ image: url });
+ };
const handleNameChange = (newName: string) => {
- setName(newName)
- updateUser({ name: newName })
- }
+ setName(newName);
+ updateUser({ name: newName });
+ };
const handleEmailChange = (newEmail: string) => {
- setEmail(newEmail)
- updateUser({ email: newEmail })
- }
+ setEmail(newEmail);
+ updateUser({ email: newEmail });
+ };
return (
@@ -42,16 +42,16 @@ export const MyAccountForm = () => {
fileType="image"
filePathProps={{
userId: user.id,
- fileName: 'avatar',
+ fileName: "avatar",
}}
leftIcon={
- {t('account.myAccount.changePhotoButton.specification')}
+ {t("account.myAccount.changePhotoButton.specification")}
@@ -59,17 +59,17 @@ export const MyAccountForm = () => {
+
{
{user &&
- {t('account.preferences.language.heading')}
+ {t("account.preferences.language.heading")}
{Object.keys(localeHumanReadable).map((locale) => (
{
@@ -91,15 +91,15 @@ export const UserPreferencesForm = () => {
))}
- {currentLanguage !== 'en' && (
+ {currentLanguage !== "en" && (
- {t('account.preferences.language.tooltip')}
+ {t("account.preferences.language.tooltip")}
)}
- {t('account.preferences.graphNavigation.heading')}
+ {t("account.preferences.graphNavigation.heading")}
{
- {t('account.preferences.appearance.heading')}
+ {t("account.preferences.appearance.heading")}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/account/hooks/useApiTokens.ts b/apps/builder/src/features/account/hooks/useApiTokens.ts
index d38aafd373..69238a26ae 100644
--- a/apps/builder/src/features/account/hooks/useApiTokens.ts
+++ b/apps/builder/src/features/account/hooks/useApiTokens.ts
@@ -1,30 +1,30 @@
-import { fetcher } from '@/helpers/fetcher'
-import useSWR from 'swr'
-import { env } from '@typebot.io/env'
-import { ApiTokenFromServer } from '../types'
+import { fetcher } from "@/helpers/fetcher";
+import { env } from "@typebot.io/env";
+import useSWR from "swr";
+import type { ApiTokenFromServer } from "../types";
type ServerResponse = {
- apiTokens: ApiTokenFromServer[]
-}
+ apiTokens: ApiTokenFromServer[];
+};
export const useApiTokens = ({
userId,
onError,
}: {
- userId?: string
- onError: (error: Error) => void
+ userId?: string;
+ onError: (error: Error) => void;
}) => {
const { data, error, mutate } = useSWR(
userId ? `/api/users/${userId}/api-tokens` : null,
fetcher,
{
dedupingInterval: env.NEXT_PUBLIC_E2E_TEST ? 0 : undefined,
- }
- )
- if (error) onError(error)
+ },
+ );
+ if (error) onError(error);
return {
apiTokens: data?.apiTokens,
isLoading: !error && !data,
mutate,
- }
-}
+ };
+};
diff --git a/apps/builder/src/features/account/hooks/useUser.ts b/apps/builder/src/features/account/hooks/useUser.ts
index c484569725..08f8069f1e 100644
--- a/apps/builder/src/features/account/hooks/useUser.ts
+++ b/apps/builder/src/features/account/hooks/useUser.ts
@@ -1,4 +1,4 @@
-import { useContext } from 'react'
-import { userContext } from '../UserProvider'
+import { useContext } from "react";
+import { userContext } from "../UserProvider";
-export const useUser = () => useContext(userContext)
+export const useUser = () => useContext(userContext);
diff --git a/apps/builder/src/features/account/queries/createApiTokenQuery.ts b/apps/builder/src/features/account/queries/createApiTokenQuery.ts
index fba8971fa9..1dddb07326 100644
--- a/apps/builder/src/features/account/queries/createApiTokenQuery.ts
+++ b/apps/builder/src/features/account/queries/createApiTokenQuery.ts
@@ -1,14 +1,14 @@
-import { sendRequest } from '@typebot.io/lib'
-import { ApiTokenFromServer } from '../types'
+import { sendRequest } from "@typebot.io/lib/utils";
+import type { ApiTokenFromServer } from "../types";
export const createApiTokenQuery = (
userId: string,
- { name }: { name: string }
+ { name }: { name: string },
) =>
sendRequest<{ apiToken: ApiTokenFromServer & { token: string } }>({
url: `/api/users/${userId}/api-tokens`,
- method: 'POST',
+ method: "POST",
body: {
name,
},
- })
+ });
diff --git a/apps/builder/src/features/account/queries/deleteApiTokenQuery.ts b/apps/builder/src/features/account/queries/deleteApiTokenQuery.ts
index 0de20aff91..34148f1be4 100644
--- a/apps/builder/src/features/account/queries/deleteApiTokenQuery.ts
+++ b/apps/builder/src/features/account/queries/deleteApiTokenQuery.ts
@@ -1,14 +1,14 @@
-import { ApiToken } from '@typebot.io/prisma'
-import { sendRequest } from '@typebot.io/lib'
+import { sendRequest } from "@typebot.io/lib/utils";
+import type { Prisma } from "@typebot.io/prisma/types";
export const deleteApiTokenQuery = ({
userId,
tokenId,
}: {
- userId: string
- tokenId: string
+ userId: string;
+ tokenId: string;
}) =>
- sendRequest<{ apiToken: ApiToken }>({
+ sendRequest<{ apiToken: Prisma.ApiToken }>({
url: `/api/users/${userId}/api-tokens/${tokenId}`,
- method: 'DELETE',
- })
+ method: "DELETE",
+ });
diff --git a/apps/builder/src/features/account/queries/updateUserQuery.ts b/apps/builder/src/features/account/queries/updateUserQuery.ts
index 2ddb2a0927..214f02c48e 100644
--- a/apps/builder/src/features/account/queries/updateUserQuery.ts
+++ b/apps/builder/src/features/account/queries/updateUserQuery.ts
@@ -1,9 +1,9 @@
-import { sendRequest } from '@typebot.io/lib'
-import { User } from '@typebot.io/schemas'
+import { sendRequest } from "@typebot.io/lib/utils";
+import type { User } from "@typebot.io/schemas/features/user/schema";
export const updateUserQuery = async (id: string, user: Partial) =>
sendRequest({
url: `/api/users/${id}`,
- method: 'PATCH',
+ method: "PATCH",
body: user,
- })
+ });
diff --git a/apps/builder/src/features/account/types.ts b/apps/builder/src/features/account/types.ts
index 4daf9a623e..9eff39ae56 100644
--- a/apps/builder/src/features/account/types.ts
+++ b/apps/builder/src/features/account/types.ts
@@ -1 +1,5 @@
-export type ApiTokenFromServer = { id: string; name: string; createdAt: string }
+export type ApiTokenFromServer = {
+ id: string;
+ name: string;
+ createdAt: string;
+};
diff --git a/apps/builder/src/features/analytics/analytics.spec.ts b/apps/builder/src/features/analytics/analytics.spec.ts
index 7352dfe613..86109835f7 100644
--- a/apps/builder/src/features/analytics/analytics.spec.ts
+++ b/apps/builder/src/features/analytics/analytics.spec.ts
@@ -1,32 +1,32 @@
-import { getTestAsset } from '@/test/utils/playwright'
-import test, { expect } from '@playwright/test'
-import { createId } from '@paralleldrive/cuid2'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
import {
importTypebotInDatabase,
injectFakeResults,
-} from '@typebot.io/playwright/databaseActions'
-import { starterWorkspaceId } from '@typebot.io/playwright/databaseSetup'
+} from "@typebot.io/playwright/databaseActions";
+import { starterWorkspaceId } from "@typebot.io/playwright/databaseSetup";
-test('analytics are not available for non-pro workspaces', async ({ page }) => {
- const typebotId = createId()
+test("analytics are not available for non-pro workspaces", async ({ page }) => {
+ const typebotId = createId();
await importTypebotInDatabase(
- getTestAsset('typebots/results/submissionHeader.json'),
+ getTestAsset("typebots/results/submissionHeader.json"),
{
id: typebotId,
workspaceId: starterWorkspaceId,
- }
- )
- await injectFakeResults({ typebotId, count: 10 })
- await page.goto(`/typebots/${typebotId}/results/analytics`)
- const firstDropoffBox = page.locator('text="%" >> nth=0')
- await firstDropoffBox.hover()
+ },
+ );
+ await injectFakeResults({ typebotId, count: 10 });
+ await page.goto(`/typebots/${typebotId}/results/analytics`);
+ const firstDropoffBox = page.locator('text="%" >> nth=0');
+ await firstDropoffBox.hover();
await expect(
- page.locator('text="Upgrade your plan to PRO to reveal drop-off rate."')
- ).toBeVisible()
- await firstDropoffBox.click()
+ page.locator('text="Upgrade your plan to PRO to reveal drop-off rate."'),
+ ).toBeVisible();
+ await firstDropoffBox.click();
await expect(
page.locator(
- 'text="You need to upgrade your plan in order to unlock in-depth analytics"'
- )
- ).toBeVisible()
-})
+ 'text="You need to upgrade your plan in order to unlock in-depth analytics"',
+ ),
+ ).toBeVisible();
+});
diff --git a/apps/builder/src/features/analytics/api/getInDepthAnalyticsData.ts b/apps/builder/src/features/analytics/api/getInDepthAnalyticsData.ts
index 280ffa9171..2e7e2d0713 100644
--- a/apps/builder/src/features/analytics/api/getInDepthAnalyticsData.ts
+++ b/apps/builder/src/features/analytics/api/getInDepthAnalyticsData.ts
@@ -1,26 +1,26 @@
-import prisma from '@typebot.io/lib/prisma'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { z } from 'zod'
-import { canReadTypebots } from '@/helpers/databaseRules'
-import { totalAnswersSchema } from '@typebot.io/schemas/features/analytics'
-import { parseGroups } from '@typebot.io/schemas'
-import { isInputBlock } from '@typebot.io/schemas/helpers'
-import { defaultTimeFilter, timeFilterValues } from '../constants'
+import { canReadTypebots } from "@/helpers/databaseRules";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import { isInputBlock } from "@typebot.io/blocks-core/helpers";
+import { parseGroups } from "@typebot.io/groups/schemas";
+import prisma from "@typebot.io/prisma";
+import { totalAnswersSchema } from "@typebot.io/schemas/features/analytics";
+import { z } from "@typebot.io/zod";
+import { defaultTimeFilter, timeFilterValues } from "../constants";
import {
parseFromDateFromTimeFilter,
parseToDateFromTimeFilter,
-} from '../helpers/parseDateFromTimeFilter'
+} from "../helpers/parseDateFromTimeFilter";
export const getInDepthAnalyticsData = authenticatedProcedure
.meta({
openapi: {
- method: 'GET',
- path: '/v1/typebots/{typebotId}/analytics/inDepthData',
+ method: "GET",
+ path: "/v1/typebots/{typebotId}/analytics/inDepthData",
protect: true,
summary:
- 'List total answers in blocks and off-default paths visited edges',
- tags: ['Analytics'],
+ "List total answers in blocks and off-default paths visited edges",
+ tags: ["Analytics"],
},
})
.input(
@@ -28,33 +28,33 @@ export const getInDepthAnalyticsData = authenticatedProcedure
typebotId: z.string(),
timeFilter: z.enum(timeFilterValues).default(defaultTimeFilter),
timeZone: z.string().optional(),
- })
+ }),
)
.output(
z.object({
totalAnswers: z.array(totalAnswersSchema),
offDefaultPathVisitedEdges: z.array(
- z.object({ edgeId: z.string(), total: z.number() })
+ z.object({ edgeId: z.string(), total: z.number() }),
),
- })
+ }),
)
.query(
async ({ input: { typebotId, timeFilter, timeZone }, ctx: { user } }) => {
const typebot = await prisma.typebot.findFirst({
where: canReadTypebots(typebotId, user),
select: { publishedTypebot: true },
- })
+ });
if (!typebot?.publishedTypebot)
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Published typebot not found',
- })
+ code: "NOT_FOUND",
+ message: "Published typebot not found",
+ });
- const fromDate = parseFromDateFromTimeFilter(timeFilter, timeZone)
- const toDate = parseToDateFromTimeFilter(timeFilter, timeZone)
+ const fromDate = parseFromDateFromTimeFilter(timeFilter, timeZone);
+ const toDate = parseToDateFromTimeFilter(timeFilter, timeZone);
const totalAnswersPerBlock = await prisma.answer.groupBy({
- by: ['blockId', 'resultId'],
+ by: ["blockId", "resultId"],
where: {
result: {
typebotId: typebot.publishedTypebot.typebotId,
@@ -69,14 +69,14 @@ export const getInDepthAnalyticsData = authenticatedProcedure
in: parseGroups(typebot.publishedTypebot.groups, {
typebotVersion: typebot.publishedTypebot.version,
}).flatMap((group) =>
- group.blocks.filter(isInputBlock).map((block) => block.id)
+ group.blocks.filter(isInputBlock).map((block) => block.id),
),
},
},
- })
+ });
const totalAnswersV2PerBlock = await prisma.answerV2.groupBy({
- by: ['blockId', 'resultId'],
+ by: ["blockId", "resultId"],
where: {
result: {
typebotId: typebot.publishedTypebot.typebotId,
@@ -91,24 +91,24 @@ export const getInDepthAnalyticsData = authenticatedProcedure
in: parseGroups(typebot.publishedTypebot.groups, {
typebotVersion: typebot.publishedTypebot.version,
}).flatMap((group) =>
- group.blocks.filter(isInputBlock).map((block) => block.id)
+ group.blocks.filter(isInputBlock).map((block) => block.id),
),
},
},
- })
+ });
const uniqueCounts = totalAnswersPerBlock
.concat(totalAnswersV2PerBlock)
.reduce<{
- [key: string]: Set
+ [key: string]: Set;
}>((acc, { blockId, resultId }) => {
- acc[blockId] = acc[blockId] || new Set()
- acc[blockId].add(resultId)
- return acc
- }, {})
+ acc[blockId] = acc[blockId] || new Set();
+ acc[blockId].add(resultId);
+ return acc;
+ }, {});
const offDefaultPathVisitedEdges = await prisma.visitedEdge.groupBy({
- by: ['edgeId'],
+ by: ["edgeId"],
where: {
result: {
typebotId: typebot.publishedTypebot.typebotId,
@@ -121,7 +121,7 @@ export const getInDepthAnalyticsData = authenticatedProcedure
},
},
_count: { resultId: true },
- })
+ });
return {
totalAnswers: Object.keys(uniqueCounts).map((blockId) => ({
@@ -132,6 +132,6 @@ export const getInDepthAnalyticsData = authenticatedProcedure
edgeId: e.edgeId,
total: e._count.resultId,
})),
- }
- }
- )
+ };
+ },
+ );
diff --git a/apps/builder/src/features/analytics/api/getStats.ts b/apps/builder/src/features/analytics/api/getStats.ts
index e264307a0c..9ba37dee19 100644
--- a/apps/builder/src/features/analytics/api/getStats.ts
+++ b/apps/builder/src/features/analytics/api/getStats.ts
@@ -1,23 +1,23 @@
-import prisma from '@typebot.io/lib/prisma'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { z } from 'zod'
-import { canReadTypebots } from '@/helpers/databaseRules'
-import { Stats, statsSchema } from '@typebot.io/schemas'
-import { defaultTimeFilter, timeFilterValues } from '../constants'
+import { canReadTypebots } from "@/helpers/databaseRules";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import prisma from "@typebot.io/prisma";
+import { type Stats, statsSchema } from "@typebot.io/results/schemas/answers";
+import { z } from "@typebot.io/zod";
+import { defaultTimeFilter, timeFilterValues } from "../constants";
import {
parseFromDateFromTimeFilter,
parseToDateFromTimeFilter,
-} from '../helpers/parseDateFromTimeFilter'
+} from "../helpers/parseDateFromTimeFilter";
export const getStats = authenticatedProcedure
.meta({
openapi: {
- method: 'GET',
- path: '/v1/typebots/{typebotId}/analytics/stats',
+ method: "GET",
+ path: "/v1/typebots/{typebotId}/analytics/stats",
protect: true,
- summary: 'Get results stats',
- tags: ['Analytics'],
+ summary: "Get results stats",
+ tags: ["Analytics"],
},
})
.input(
@@ -25,7 +25,7 @@ export const getStats = authenticatedProcedure
typebotId: z.string(),
timeFilter: z.enum(timeFilterValues).default(defaultTimeFilter),
timeZone: z.string().optional(),
- })
+ }),
)
.output(z.object({ stats: statsSchema }))
.query(
@@ -33,15 +33,15 @@ export const getStats = authenticatedProcedure
const typebot = await prisma.typebot.findFirst({
where: canReadTypebots(typebotId, user),
select: { publishedTypebot: true, id: true },
- })
+ });
if (!typebot?.publishedTypebot)
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Published typebot not found',
- })
+ code: "NOT_FOUND",
+ message: "Published typebot not found",
+ });
- const fromDate = parseFromDateFromTimeFilter(timeFilter, timeZone)
- const toDate = parseToDateFromTimeFilter(timeFilter, timeZone)
+ const fromDate = parseFromDateFromTimeFilter(timeFilter, timeZone);
+ const toDate = parseToDateFromTimeFilter(timeFilter, timeZone);
const [totalViews, totalStarts, totalCompleted] =
await prisma.$transaction([
@@ -83,16 +83,16 @@ export const getStats = authenticatedProcedure
: undefined,
},
}),
- ])
+ ]);
const stats: Stats = {
totalViews,
totalStarts,
totalCompleted,
- }
+ };
return {
stats,
- }
- }
- )
+ };
+ },
+ );
diff --git a/apps/builder/src/features/analytics/api/getTotalVisitedEdges.ts b/apps/builder/src/features/analytics/api/getTotalVisitedEdges.ts
index b083aa21ec..0953bd2dd9 100644
--- a/apps/builder/src/features/analytics/api/getTotalVisitedEdges.ts
+++ b/apps/builder/src/features/analytics/api/getTotalVisitedEdges.ts
@@ -1,23 +1,23 @@
-import prisma from '@typebot.io/lib/prisma'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { z } from 'zod'
-import { canReadTypebots } from '@/helpers/databaseRules'
-import { totalVisitedEdgesSchema } from '@typebot.io/schemas'
-import { defaultTimeFilter, timeFilterValues } from '../constants'
+import { canReadTypebots } from "@/helpers/databaseRules";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import prisma from "@typebot.io/prisma";
+import { totalVisitedEdgesSchema } from "@typebot.io/schemas/features/analytics";
+import { z } from "@typebot.io/zod";
+import { defaultTimeFilter, timeFilterValues } from "../constants";
import {
parseFromDateFromTimeFilter,
parseToDateFromTimeFilter,
-} from '../helpers/parseDateFromTimeFilter'
+} from "../helpers/parseDateFromTimeFilter";
export const getTotalVisitedEdges = authenticatedProcedure
.meta({
openapi: {
- method: 'GET',
- path: '/v1/typebots/{typebotId}/analytics/totalVisitedEdges',
+ method: "GET",
+ path: "/v1/typebots/{typebotId}/analytics/totalVisitedEdges",
protect: true,
- summary: 'List total edges used in results',
- tags: ['Analytics'],
+ summary: "List total edges used in results",
+ tags: ["Analytics"],
},
})
.input(
@@ -25,30 +25,30 @@ export const getTotalVisitedEdges = authenticatedProcedure
typebotId: z.string(),
timeFilter: z.enum(timeFilterValues).default(defaultTimeFilter),
timeZone: z.string().optional(),
- })
+ }),
)
.output(
z.object({
totalVisitedEdges: z.array(totalVisitedEdgesSchema),
- })
+ }),
)
.query(
async ({ input: { typebotId, timeFilter, timeZone }, ctx: { user } }) => {
const typebot = await prisma.typebot.findFirst({
where: canReadTypebots(typebotId, user),
select: { id: true },
- })
+ });
if (!typebot?.id)
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Published typebot not found',
- })
+ code: "NOT_FOUND",
+ message: "Published typebot not found",
+ });
- const fromDate = parseFromDateFromTimeFilter(timeFilter, timeZone)
- const toDate = parseToDateFromTimeFilter(timeFilter, timeZone)
+ const fromDate = parseFromDateFromTimeFilter(timeFilter, timeZone);
+ const toDate = parseToDateFromTimeFilter(timeFilter, timeZone);
const edges = await prisma.visitedEdge.groupBy({
- by: ['edgeId'],
+ by: ["edgeId"],
where: {
result: {
typebotId: typebot.id,
@@ -61,13 +61,13 @@ export const getTotalVisitedEdges = authenticatedProcedure
},
},
_count: { resultId: true },
- })
+ });
return {
totalVisitedEdges: edges.map((e) => ({
edgeId: e.edgeId,
total: e._count.resultId,
})),
- }
- }
- )
+ };
+ },
+ );
diff --git a/apps/builder/src/features/analytics/api/router.ts b/apps/builder/src/features/analytics/api/router.ts
index 8b1252ef0b..e58241b8ba 100644
--- a/apps/builder/src/features/analytics/api/router.ts
+++ b/apps/builder/src/features/analytics/api/router.ts
@@ -1,8 +1,8 @@
-import { router } from '@/helpers/server/trpc'
-import { getStats } from './getStats'
-import { getInDepthAnalyticsData } from './getInDepthAnalyticsData'
+import { router } from "@/helpers/server/trpc";
+import { getInDepthAnalyticsData } from "./getInDepthAnalyticsData";
+import { getStats } from "./getStats";
export const analyticsRouter = router({
getInDepthAnalyticsData,
getStats,
-})
+});
diff --git a/apps/builder/src/features/analytics/components/AnalyticsGraphContainer.tsx b/apps/builder/src/features/analytics/components/AnalyticsGraphContainer.tsx
index 00957e20a3..2cfba55907 100644
--- a/apps/builder/src/features/analytics/components/AnalyticsGraphContainer.tsx
+++ b/apps/builder/src/features/analytics/components/AnalyticsGraphContainer.tsx
@@ -1,53 +1,53 @@
+import { ChangePlanModal } from "@/features/billing/components/ChangePlanModal";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { Graph } from "@/features/graph/components/Graph";
+import { EventsCoordinatesProvider } from "@/features/graph/providers/EventsCoordinateProvider";
+import { GraphProvider } from "@/features/graph/providers/GraphProvider";
+import { trpc } from "@/lib/trpc";
import {
Flex,
Spinner,
useColorModeValue,
useDisclosure,
-} from '@chakra-ui/react'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import {
- Edge,
- GroupV6,
- Stats,
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { blockHasItems, isInputBlock } from "@typebot.io/blocks-core/helpers";
+import type { GroupV6 } from "@typebot.io/groups/schemas";
+import { isDefined } from "@typebot.io/lib/utils";
+import type { Stats } from "@typebot.io/results/schemas/answers";
+import type {
TotalAnswers,
TotalVisitedEdges,
-} from '@typebot.io/schemas'
-import React, { useMemo } from 'react'
-import { StatsCards } from './StatsCards'
-import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
-import { Graph } from '@/features/graph/components/Graph'
-import { GraphProvider } from '@/features/graph/providers/GraphProvider'
-import { useTranslate } from '@tolgee/react'
-import { trpc } from '@/lib/trpc'
-import { isDefined } from '@typebot.io/lib'
-import { EventsCoordinatesProvider } from '@/features/graph/providers/EventsCoordinateProvider'
-import { timeFilterValues } from '../constants'
-import { blockHasItems, isInputBlock } from '@typebot.io/schemas/helpers'
+} from "@typebot.io/schemas/features/analytics";
+import type { Edge } from "@typebot.io/typebot/schemas/edge";
+import React, { useMemo } from "react";
+import type { timeFilterValues } from "../constants";
+import { StatsCards } from "./StatsCards";
-const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
type Props = {
- timeFilter: (typeof timeFilterValues)[number]
- onTimeFilterChange: (timeFilter: (typeof timeFilterValues)[number]) => void
- stats?: Stats
-}
+ timeFilter: (typeof timeFilterValues)[number];
+ onTimeFilterChange: (timeFilter: (typeof timeFilterValues)[number]) => void;
+ stats?: Stats;
+};
export const AnalyticsGraphContainer = ({
timeFilter,
onTimeFilterChange,
stats,
}: Props) => {
- const { t } = useTranslate()
- const { isOpen, onOpen, onClose } = useDisclosure()
- const { typebot, publishedTypebot } = useTypebot()
+ const { t } = useTranslate();
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const { typebot, publishedTypebot } = useTypebot();
const { data } = trpc.analytics.getInDepthAnalyticsData.useQuery(
{
typebotId: typebot?.id as string,
timeFilter,
timeZone,
},
- { enabled: isDefined(publishedTypebot) }
- )
+ { enabled: isDefined(publishedTypebot) },
+ );
const totalVisitedEdges = useMemo(() => {
if (
@@ -57,9 +57,9 @@ export const AnalyticsGraphContainer = ({
!data?.totalAnswers ||
!stats?.totalViews
)
- return
- const firstEdgeId = publishedTypebot.events[0].outgoingEdgeId
- if (!firstEdgeId) return
+ return;
+ const firstEdgeId = publishedTypebot.events[0].outgoingEdgeId;
+ if (!firstEdgeId) return;
return populateEdgesWithVisitData({
edgeId: firstEdgeId,
edges: publishedTypebot.edges,
@@ -70,7 +70,7 @@ export const AnalyticsGraphContainer = ({
: [],
totalAnswers: data.totalAnswers,
edgeVisitHistory: [],
- })
+ });
}, [
data?.offDefaultPathVisitedEdges,
data?.totalAnswers,
@@ -78,16 +78,16 @@ export const AnalyticsGraphContainer = ({
publishedTypebot?.groups,
publishedTypebot?.events,
stats?.totalViews,
- ])
+ ]);
return (
- {t('analytics.viewsLabel')}
+ {t("analytics.viewsLabel")}
{stats ? (
{stats.totalViews}
) : (
@@ -49,7 +49,7 @@ export const StatsCards = ({
)}
- {t('analytics.startsLabel')}
+ {t("analytics.startsLabel")}
{stats ? (
{stats.totalStarts}
) : (
@@ -57,12 +57,12 @@ export const StatsCards = ({
)}
- {t('analytics.completionRateLabel')}
+ {t("analytics.completionRateLabel")}
{stats ? (
- {computeCompletionRate(t('analytics.notAvailableLabel'))(
+ {computeCompletionRate(t("analytics.notAvailableLabel"))(
stats.totalCompleted,
- stats.totalStarts
+ stats.totalStarts,
)}
) : (
@@ -76,5 +76,5 @@ export const StatsCards = ({
boxShadow="md"
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/analytics/components/TimeFilterDropdown.tsx b/apps/builder/src/features/analytics/components/TimeFilterDropdown.tsx
index 6ba70f0359..5ead414cc6 100644
--- a/apps/builder/src/features/analytics/components/TimeFilterDropdown.tsx
+++ b/apps/builder/src/features/analytics/components/TimeFilterDropdown.tsx
@@ -1,11 +1,11 @@
-import { DropdownList } from '@/components/DropdownList'
-import { timeFilterLabels, timeFilterValues } from '../constants'
-import { ButtonProps } from '@chakra-ui/react'
+import { DropdownList } from "@/components/DropdownList";
+import type { ButtonProps } from "@chakra-ui/react";
+import { timeFilterLabels, type timeFilterValues } from "../constants";
type Props = {
- timeFilter: (typeof timeFilterValues)[number]
- onTimeFilterChange: (timeFilter: (typeof timeFilterValues)[number]) => void
-} & ButtonProps
+ timeFilter: (typeof timeFilterValues)[number];
+ onTimeFilterChange: (timeFilter: (typeof timeFilterValues)[number]) => void;
+} & ButtonProps;
export const TimeFilterDropdown = ({
timeFilter,
@@ -23,4 +23,4 @@ export const TimeFilterDropdown = ({
}
{...props}
/>
-)
+);
diff --git a/apps/builder/src/features/analytics/constants.ts b/apps/builder/src/features/analytics/constants.ts
index ebba096afa..fe0b95606e 100644
--- a/apps/builder/src/features/analytics/constants.ts
+++ b/apps/builder/src/features/analytics/constants.ts
@@ -1,24 +1,24 @@
export const timeFilterValues = [
- 'today',
- 'last7Days',
- 'last30Days',
- 'monthToDate',
- 'lastMonth',
- 'yearToDate',
- 'allTime',
-] as const
+ "today",
+ "last7Days",
+ "last30Days",
+ "monthToDate",
+ "lastMonth",
+ "yearToDate",
+ "allTime",
+] as const;
export const timeFilterLabels: Record<
(typeof timeFilterValues)[number],
string
> = {
- today: 'Today',
- last7Days: 'Last 7 days',
- last30Days: 'Last 30 days',
- monthToDate: 'Month to date',
- lastMonth: 'Last month',
- yearToDate: 'Year to date',
- allTime: 'All time',
-}
+ today: "Today",
+ last7Days: "Last 7 days",
+ last30Days: "Last 30 days",
+ monthToDate: "Month to date",
+ lastMonth: "Last month",
+ yearToDate: "Year to date",
+ allTime: "All time",
+};
-export const defaultTimeFilter = 'last7Days' as const
+export const defaultTimeFilter = "last7Days" as const;
diff --git a/apps/builder/src/features/analytics/helpers/computeTotalUsersAtBlock.ts b/apps/builder/src/features/analytics/helpers/computeTotalUsersAtBlock.ts
index 65304b6b26..5fc372f3b6 100644
--- a/apps/builder/src/features/analytics/helpers/computeTotalUsersAtBlock.ts
+++ b/apps/builder/src/features/analytics/helpers/computeTotalUsersAtBlock.ts
@@ -1,10 +1,10 @@
-import { isNotDefined } from '@typebot.io/lib'
-import { PublicTypebotV6 } from '@typebot.io/schemas'
-import { isInputBlock } from '@typebot.io/schemas/helpers'
-import {
+import { isInputBlock } from "@typebot.io/blocks-core/helpers";
+import { isNotDefined } from "@typebot.io/lib/utils";
+import type {
TotalAnswers,
TotalVisitedEdges,
-} from '@typebot.io/schemas/features/analytics'
+} from "@typebot.io/schemas/features/analytics";
+import type { PublicTypebotV6 } from "@typebot.io/typebot/schemas/publicTypebot";
export const computeTotalUsersAtBlock = (
currentBlockId: string,
@@ -13,49 +13,49 @@ export const computeTotalUsersAtBlock = (
totalVisitedEdges,
totalAnswers,
}: {
- publishedTypebot: PublicTypebotV6
- totalVisitedEdges: TotalVisitedEdges[]
- totalAnswers: TotalAnswers[]
- }
+ publishedTypebot: PublicTypebotV6;
+ totalVisitedEdges: TotalVisitedEdges[];
+ totalAnswers: TotalAnswers[];
+ },
): number => {
- let totalUsers = 0
+ let totalUsers = 0;
const currentGroup = publishedTypebot.groups.find((group) =>
- group.blocks.find((block) => block.id === currentBlockId)
- )
- if (!currentGroup) return 0
+ group.blocks.find((block) => block.id === currentBlockId),
+ );
+ if (!currentGroup) return 0;
const currentBlockIndex = currentGroup.blocks.findIndex(
- (block) => block.id === currentBlockId
- )
- const previousBlocks = currentGroup.blocks.slice(0, currentBlockIndex + 1)
+ (block) => block.id === currentBlockId,
+ );
+ const previousBlocks = currentGroup.blocks.slice(0, currentBlockIndex + 1);
for (const block of previousBlocks.reverse()) {
if (currentBlockId !== block.id && isInputBlock(block))
- return totalAnswers.find((t) => t.blockId === block.id)?.total ?? 0
+ return totalAnswers.find((t) => t.blockId === block.id)?.total ?? 0;
const incomingEdges = publishedTypebot.edges.filter(
- (edge) => edge.to.blockId === block.id
- )
- if (!incomingEdges.length) continue
+ (edge) => edge.to.blockId === block.id,
+ );
+ if (!incomingEdges.length) continue;
totalUsers += incomingEdges.reduce(
(acc, incomingEdge) =>
acc +
(totalVisitedEdges.find(
- (totalEdge) => totalEdge.edgeId === incomingEdge.id
+ (totalEdge) => totalEdge.edgeId === incomingEdge.id,
)?.total ?? 0),
- 0
- )
+ 0,
+ );
}
const edgesConnectedToGroup = publishedTypebot.edges.filter(
(edge) =>
- edge.to.groupId === currentGroup.id && isNotDefined(edge.to.blockId)
- )
+ edge.to.groupId === currentGroup.id && isNotDefined(edge.to.blockId),
+ );
totalUsers += edgesConnectedToGroup.reduce(
(acc, connectedEdge) =>
acc +
(totalVisitedEdges.find(
- (totalEdge) => totalEdge.edgeId === connectedEdge.id
+ (totalEdge) => totalEdge.edgeId === connectedEdge.id,
)?.total ?? 0),
- 0
- )
+ 0,
+ );
- return totalUsers
-}
+ return totalUsers;
+};
diff --git a/apps/builder/src/features/analytics/helpers/getTotalAnswersAtBlock.ts b/apps/builder/src/features/analytics/helpers/getTotalAnswersAtBlock.ts
index c17769e707..40cc9be18b 100644
--- a/apps/builder/src/features/analytics/helpers/getTotalAnswersAtBlock.ts
+++ b/apps/builder/src/features/analytics/helpers/getTotalAnswersAtBlock.ts
@@ -1,6 +1,6 @@
-import { byId } from '@typebot.io/lib'
-import { PublicTypebotV6 } from '@typebot.io/schemas'
-import { TotalAnswers } from '@typebot.io/schemas/features/analytics'
+import { byId } from "@typebot.io/lib/utils";
+import type { TotalAnswers } from "@typebot.io/schemas/features/analytics";
+import type { PublicTypebotV6 } from "@typebot.io/typebot/schemas/publicTypebot";
export const getTotalAnswersAtBlock = (
currentBlockId: string,
@@ -8,13 +8,13 @@ export const getTotalAnswersAtBlock = (
publishedTypebot,
totalAnswers,
}: {
- publishedTypebot: PublicTypebotV6
- totalAnswers: TotalAnswers[]
- }
+ publishedTypebot: PublicTypebotV6;
+ totalAnswers: TotalAnswers[];
+ },
): number => {
const block = publishedTypebot.groups
.flatMap((g) => g.blocks)
- .find(byId(currentBlockId))
- if (!block) throw new Error(`Block ${currentBlockId} not found`)
- return totalAnswers.find((t) => t.blockId === block.id)?.total ?? 0
-}
+ .find(byId(currentBlockId));
+ if (!block) throw new Error(`Block ${currentBlockId} not found`);
+ return totalAnswers.find((t) => t.blockId === block.id)?.total ?? 0;
+};
diff --git a/apps/builder/src/features/analytics/helpers/parseDateFromTimeFilter.ts b/apps/builder/src/features/analytics/helpers/parseDateFromTimeFilter.ts
index 783012c421..d9fd60fd85 100644
--- a/apps/builder/src/features/analytics/helpers/parseDateFromTimeFilter.ts
+++ b/apps/builder/src/features/analytics/helpers/parseDateFromTimeFilter.ts
@@ -1,72 +1,72 @@
-import { timeFilterValues } from '../constants'
import {
+ endOfMonth,
startOfDay,
- subDays,
- startOfYear,
startOfMonth,
- endOfMonth,
+ startOfYear,
+ subDays,
subMonths,
-} from 'date-fns'
-import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz'
+} from "date-fns";
+import { utcToZonedTime, zonedTimeToUtc } from "date-fns-tz";
+import type { timeFilterValues } from "../constants";
export const parseFromDateFromTimeFilter = (
timeFilter: (typeof timeFilterValues)[number],
- userTimezone: string = 'UTC'
+ userTimezone = "UTC",
): Date | null => {
- const nowInUserTimezone = utcToZonedTime(new Date(), userTimezone)
+ const nowInUserTimezone = utcToZonedTime(new Date(), userTimezone);
switch (timeFilter) {
- case 'today': {
- return zonedTimeToUtc(startOfDay(nowInUserTimezone), userTimezone)
+ case "today": {
+ return zonedTimeToUtc(startOfDay(nowInUserTimezone), userTimezone);
}
- case 'last7Days': {
+ case "last7Days": {
return zonedTimeToUtc(
subDays(startOfDay(nowInUserTimezone), 6),
- userTimezone
- )
+ userTimezone,
+ );
}
- case 'last30Days': {
+ case "last30Days": {
return zonedTimeToUtc(
subDays(startOfDay(nowInUserTimezone), 29),
- userTimezone
- )
+ userTimezone,
+ );
}
- case 'lastMonth': {
+ case "lastMonth": {
return zonedTimeToUtc(
subMonths(startOfMonth(nowInUserTimezone), 1),
- userTimezone
- )
+ userTimezone,
+ );
}
- case 'monthToDate': {
- return zonedTimeToUtc(startOfMonth(nowInUserTimezone), userTimezone)
+ case "monthToDate": {
+ return zonedTimeToUtc(startOfMonth(nowInUserTimezone), userTimezone);
}
- case 'yearToDate': {
- return zonedTimeToUtc(startOfYear(nowInUserTimezone), userTimezone)
+ case "yearToDate": {
+ return zonedTimeToUtc(startOfYear(nowInUserTimezone), userTimezone);
}
- case 'allTime':
- return null
+ case "allTime":
+ return null;
}
-}
+};
export const parseToDateFromTimeFilter = (
timeFilter: (typeof timeFilterValues)[number],
- userTimezone: string = 'UTC'
+ userTimezone = "UTC",
): Date | null => {
- const nowInUserTimezone = utcToZonedTime(new Date(), userTimezone)
+ const nowInUserTimezone = utcToZonedTime(new Date(), userTimezone);
switch (timeFilter) {
- case 'lastMonth': {
+ case "lastMonth": {
return zonedTimeToUtc(
subMonths(endOfMonth(nowInUserTimezone), 1),
- userTimezone
- )
+ userTimezone,
+ );
}
- case 'last30Days':
- case 'last7Days':
- case 'today':
- case 'monthToDate':
- case 'yearToDate':
- case 'allTime':
- return null
+ case "last30Days":
+ case "last7Days":
+ case "today":
+ case "monthToDate":
+ case "yearToDate":
+ case "allTime":
+ return null;
}
-}
+};
diff --git a/apps/builder/src/features/auth/api/customAdapter.ts b/apps/builder/src/features/auth/api/customAdapter.ts
index 891de5be31..10d069b746 100644
--- a/apps/builder/src/features/auth/api/customAdapter.ts
+++ b/apps/builder/src/features/auth/api/customAdapter.ts
@@ -1,49 +1,129 @@
+import { convertInvitationsToCollaborations } from "@/features/auth/helpers/convertInvitationsToCollaborations";
+import { getNewUserInvitations } from "@/features/auth/helpers/getNewUserInvitations";
+import { joinWorkspaces } from "@/features/auth/helpers/joinWorkspaces";
+import { parseWorkspaceDefaultPlan } from "@/features/workspace/helpers/parseWorkspaceDefaultPlan";
+import { createId } from "@paralleldrive/cuid2";
+import { env } from "@typebot.io/env";
+import { generateId } from "@typebot.io/lib/utils";
+import { WorkspaceRole } from "@typebot.io/prisma/enum";
+import type { Prisma } from "@typebot.io/prisma/types";
+import type { TelemetryEvent } from "@typebot.io/telemetry/schemas";
+import { trackEvents } from "@typebot.io/telemetry/trackEvents";
+import type { Account, Awaitable, User } from "next-auth";
+
// Forked from https://github.com/nextauthjs/adapters/blob/main/packages/prisma/src/index.ts
-import {
- PrismaClient,
- Prisma,
- WorkspaceRole,
- Session,
-} from '@typebot.io/prisma'
-import type { Adapter, AdapterUser } from 'next-auth/adapters'
-import { createId } from '@paralleldrive/cuid2'
-import { generateId } from '@typebot.io/lib'
-import { TelemetryEvent } from '@typebot.io/schemas/features/telemetry'
-import { convertInvitationsToCollaborations } from '@/features/auth/helpers/convertInvitationsToCollaborations'
-import { getNewUserInvitations } from '@/features/auth/helpers/getNewUserInvitations'
-import { joinWorkspaces } from '@/features/auth/helpers/joinWorkspaces'
-import { parseWorkspaceDefaultPlan } from '@/features/workspace/helpers/parseWorkspaceDefaultPlan'
-import { env } from '@typebot.io/env'
-import { trackEvents } from '@typebot.io/telemetry/trackEvents'
-export function customAdapter(p: PrismaClient): Adapter {
+interface AdapterUser extends User {
+ id: string;
+ email: string;
+ emailVerified: Date | null;
+}
+
+interface AdapterAccount extends Account {
+ userId: string;
+}
+interface AdapterSession {
+ sessionToken: string;
+ userId: string;
+ expires: Date;
+}
+interface VerificationToken {
+ identifier: string;
+ expires: Date;
+ token: string;
+}
+
+type Adapter = DefaultAdapter &
+ (WithVerificationToken extends true
+ ? {
+ createVerificationToken: (
+ verificationToken: VerificationToken,
+ ) => Awaitable;
+ /**
+ * Return verification token from the database
+ * and delete it so it cannot be used again.
+ */
+ useVerificationToken: (params: {
+ identifier: string;
+ token: string;
+ }) => Awaitable;
+ }
+ : {});
+interface DefaultAdapter {
+ createUser: (user: Omit) => Awaitable;
+ getUser: (id: string) => Awaitable;
+ getUserByEmail: (email: string) => Awaitable;
+ /** Using the provider id and the id of the user for a specific account, get the user. */
+ getUserByAccount: (
+ providerAccountId: Pick,
+ ) => Awaitable;
+ updateUser: (
+ user: Partial & Pick,
+ ) => Awaitable;
+ /** @todo Implement */
+ deleteUser?: (
+ userId: string,
+ ) => Promise | Awaitable;
+ linkAccount: (
+ account: AdapterAccount,
+ ) => Promise | Awaitable;
+ /** @todo Implement */
+ unlinkAccount?: (
+ providerAccountId: Pick,
+ ) => Promise | Awaitable;
+ /** Creates a session for the user and returns it. */
+ createSession: (session: {
+ sessionToken: string;
+ userId: string;
+ expires: Date;
+ }) => Awaitable;
+ getSessionAndUser: (sessionToken: string) => Awaitable<{
+ session: AdapterSession;
+ user: AdapterUser;
+ } | null>;
+ updateSession: (
+ session: Partial & Pick,
+ ) => Awaitable;
+ deleteSession: (
+ sessionToken: string,
+ ) => Promise | Awaitable;
+ createVerificationToken?: (
+ verificationToken: VerificationToken,
+ ) => Awaitable;
+ useVerificationToken?: (params: {
+ identifier: string;
+ token: string;
+ }) => Awaitable;
+}
+
+export function customAdapter(p: Prisma.PrismaClient): Adapter {
return {
- createUser: async (data: Omit) => {
+ createUser: async (data) => {
if (!data.email)
- throw Error('Provider did not forward email but it is required')
- const user = { id: createId(), email: data.email as string }
+ throw Error("Provider did not forward email but it is required");
+ const user = { id: createId(), email: data.email as string };
const { invitations, workspaceInvitations } = await getNewUserInvitations(
p,
- user.email
- )
+ user.email,
+ );
if (
env.DISABLE_SIGNUP &&
env.ADMIN_EMAIL?.every((email) => email !== user.email) &&
invitations.length === 0 &&
workspaceInvitations.length === 0
)
- throw Error('New users are forbidden')
+ throw Error("New users are forbidden");
const newWorkspaceData = {
name: data.name ? `${data.name}'s workspace` : `My workspace`,
plan: parseWorkspaceDefaultPlan(data.email),
- }
+ };
const createdUser = await p.user.create({
data: {
...data,
id: user.id,
apiTokens: {
- create: { name: 'Default', token: generateId(24) },
+ create: { name: "Default", token: generateId(24) },
},
workspaces:
workspaceInvitations.length > 0
@@ -61,31 +141,31 @@ export function customAdapter(p: PrismaClient): Adapter {
include: {
workspaces: { select: { workspaceId: true } },
},
- })
- const newWorkspaceId = createdUser.workspaces.pop()?.workspaceId
- const events: TelemetryEvent[] = []
+ });
+ const newWorkspaceId = createdUser.workspaces.pop()?.workspaceId;
+ const events: TelemetryEvent[] = [];
if (newWorkspaceId) {
events.push({
- name: 'Workspace created',
+ name: "Workspace created",
workspaceId: newWorkspaceId,
userId: createdUser.id,
data: newWorkspaceData,
- })
+ });
}
events.push({
- name: 'User created',
+ name: "User created",
userId: createdUser.id,
data: {
email: data.email,
- name: data.name ? (data.name as string).split(' ')[0] : undefined,
+ name: data.name ? (data.name as string).split(" ")[0] : undefined,
},
- })
- await trackEvents(events)
+ });
+ await trackEvents(events);
if (invitations.length > 0)
- await convertInvitationsToCollaborations(p, user, invitations)
+ await convertInvitationsToCollaborations(p, user, invitations);
if (workspaceInvitations.length > 0)
- await joinWorkspaces(p, user, workspaceInvitations)
- return createdUser as AdapterUser
+ await joinWorkspaces(p, user, workspaceInvitations);
+ return createdUser as AdapterUser;
},
getUser: async (id) =>
(await p.user.findUnique({ where: { id } })) as AdapterUser,
@@ -95,8 +175,8 @@ export function customAdapter(p: PrismaClient): Adapter {
const account = await p.account.findUnique({
where: { provider_providerAccountId },
select: { user: true },
- })
- return (account?.user ?? null) as AdapterUser | null
+ });
+ return (account?.user ?? null) as AdapterUser | null;
},
updateUser: async (data) =>
(await p.user.update({ where: { id: data.id }, data })) as AdapterUser,
@@ -120,19 +200,22 @@ export function customAdapter(p: PrismaClient): Adapter {
oauth_token: data.oauth_token as string,
refresh_token_expires_in: data.refresh_token_expires_in as number,
},
- })
+ });
},
unlinkAccount: async (provider_providerAccountId) => {
- await p.account.delete({ where: { provider_providerAccountId } })
+ await p.account.delete({ where: { provider_providerAccountId } });
},
async getSessionAndUser(sessionToken) {
const userAndSession = await p.session.findUnique({
where: { sessionToken },
include: { user: true },
- })
- if (!userAndSession) return null
- const { user, ...session } = userAndSession
- return { user, session } as { user: AdapterUser; session: Session }
+ });
+ if (!userAndSession) return null;
+ const { user, ...session } = userAndSession;
+ return { user, session } as {
+ user: AdapterUser;
+ session: AdapterSession;
+ };
},
createSession: (data) => p.session.create({ data }),
updateSession: (data) =>
@@ -142,12 +225,17 @@ export function customAdapter(p: PrismaClient): Adapter {
createVerificationToken: (data) => p.verificationToken.create({ data }),
async useVerificationToken(identifier_token) {
try {
- return await p.verificationToken.delete({ where: { identifier_token } })
+ return await p.verificationToken.delete({
+ where: { identifier_token },
+ });
} catch (error) {
- if ((error as Prisma.PrismaClientKnownRequestError).code === 'P2025')
- return null
- throw error
+ if (
+ (error as Prisma.Prisma.PrismaClientKnownRequestError).code ===
+ "P2025"
+ )
+ return null;
+ throw error;
}
},
- }
+ };
}
diff --git a/apps/builder/src/features/auth/components/DividerWithText.tsx b/apps/builder/src/features/auth/components/DividerWithText.tsx
index c6e9c17445..7931205f0d 100644
--- a/apps/builder/src/features/auth/components/DividerWithText.tsx
+++ b/apps/builder/src/features/auth/components/DividerWithText.tsx
@@ -1,15 +1,15 @@
import {
- FlexProps,
- Flex,
Box,
Divider,
+ Flex,
+ type FlexProps,
Text,
useColorModeValue,
-} from '@chakra-ui/react'
-import React from 'react'
+} from "@chakra-ui/react";
+import React from "react";
export const DividerWithText = (props: FlexProps) => {
- const { children, ...flexProps } = props
+ const { children, ...flexProps } = props;
return (
@@ -18,7 +18,7 @@ export const DividerWithText = (props: FlexProps) => {
{children}
@@ -27,5 +27,5 @@ export const DividerWithText = (props: FlexProps) => {
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/auth/components/SignInError.tsx b/apps/builder/src/features/auth/components/SignInError.tsx
index 1f57b11495..4579814bd4 100644
--- a/apps/builder/src/features/auth/components/SignInError.tsx
+++ b/apps/builder/src/features/auth/components/SignInError.tsx
@@ -1,26 +1,26 @@
-import { useTranslate } from '@tolgee/react'
-import { Alert } from '@chakra-ui/react'
+import { Alert } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
type Props = {
- error: string
-}
+ error: string;
+};
export const SignInError = ({ error }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const errors: Record = {
- Signin: t('auth.error.default'),
- OAuthSignin: t('auth.error.default'),
- OAuthCallback: t('auth.error.default'),
- OAuthCreateAccount: t('auth.error.email'),
- EmailCreateAccount: t('auth.error.default'),
- Callback: t('auth.error.default'),
- OAuthAccountNotLinked: t('auth.error.oauthNotLinked'),
- default: t('auth.error.unknown'),
- }
- if (!errors[error]) return null
+ Signin: t("auth.error.default"),
+ OAuthSignin: t("auth.error.default"),
+ OAuthCallback: t("auth.error.default"),
+ OAuthCreateAccount: t("auth.error.email"),
+ EmailCreateAccount: t("auth.error.default"),
+ Callback: t("auth.error.default"),
+ OAuthAccountNotLinked: t("auth.error.oauthNotLinked"),
+ default: t("auth.error.unknown"),
+ };
+ if (!errors[error]) return null;
return (
{errors[error]}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/auth/components/SignInForm.tsx b/apps/builder/src/features/auth/components/SignInForm.tsx
index 85689f16de..3b60045ea8 100644
--- a/apps/builder/src/features/auth/components/SignInForm.tsx
+++ b/apps/builder/src/features/auth/components/SignInForm.tsx
@@ -1,141 +1,141 @@
+import { TextLink } from "@/components/TextLink";
+import { useToast } from "@/hooks/useToast";
+import { sanitizeUrl } from "@braintree/sanitize-url";
import {
+ Alert,
+ AlertIcon,
Button,
- HTMLChakraProps,
+ Flex,
+ HStack,
+ type HTMLChakraProps,
Input,
+ SlideFade,
+ Spinner,
Stack,
- HStack,
Text,
- Spinner,
- Alert,
- Flex,
- AlertIcon,
- SlideFade,
-} from '@chakra-ui/react'
-import React, { ChangeEvent, FormEvent, useEffect } from 'react'
-import { useState } from 'react'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import type { BuiltInProviderType } from "next-auth/providers/index";
import {
- ClientSafeProvider,
+ type ClientSafeProvider,
+ type LiteralUnion,
getProviders,
- LiteralUnion,
signIn,
useSession,
-} from 'next-auth/react'
-import { DividerWithText } from './DividerWithText'
-import { SocialLoginButtons } from './SocialLoginButtons'
-import { useRouter } from 'next/router'
-import { BuiltInProviderType } from 'next-auth/providers'
-import { useToast } from '@/hooks/useToast'
-import { TextLink } from '@/components/TextLink'
-import { SignInError } from './SignInError'
-import { useTranslate } from '@tolgee/react'
-import { sanitizeUrl } from '@braintree/sanitize-url'
+} from "next-auth/react";
+import { useRouter } from "next/router";
+import type { ChangeEvent, FormEvent } from "react";
+import React, { useEffect, useState } from "react";
+import { DividerWithText } from "./DividerWithText";
+import { SignInError } from "./SignInError";
+import { SocialLoginButtons } from "./SocialLoginButtons";
type Props = {
- defaultEmail?: string
-}
+ defaultEmail?: string;
+};
export const SignInForm = ({
defaultEmail,
-}: Props & HTMLChakraProps<'form'>) => {
- const { t } = useTranslate()
- const router = useRouter()
- const { status } = useSession()
- const [authLoading, setAuthLoading] = useState(false)
- const [isLoadingProviders, setIsLoadingProviders] = useState(true)
+}: Props & HTMLChakraProps<"form">) => {
+ const { t } = useTranslate();
+ const router = useRouter();
+ const { status } = useSession();
+ const [authLoading, setAuthLoading] = useState(false);
+ const [isLoadingProviders, setIsLoadingProviders] = useState(true);
- const [emailValue, setEmailValue] = useState(defaultEmail ?? '')
- const [isMagicLinkSent, setIsMagicLinkSent] = useState(false)
+ const [emailValue, setEmailValue] = useState(defaultEmail ?? "");
+ const [isMagicLinkSent, setIsMagicLinkSent] = useState(false);
- const { showToast } = useToast()
+ const { showToast } = useToast();
const [providers, setProviders] =
useState<
Record, ClientSafeProvider>
- >()
+ >();
const hasNoAuthProvider =
- !isLoadingProviders && Object.keys(providers ?? {}).length === 0
+ !isLoadingProviders && Object.keys(providers ?? {}).length === 0;
useEffect(() => {
- if (status === 'authenticated') {
- const redirectPath = router.query.redirectPath?.toString()
- router.replace(redirectPath ? sanitizeUrl(redirectPath) : '/typebots')
- return
+ if (status === "authenticated") {
+ const redirectPath = router.query.redirectPath?.toString();
+ router.replace(redirectPath ? sanitizeUrl(redirectPath) : "/typebots");
+ return;
}
- ;(async () => {
- const providers = await getProviders()
- setProviders(providers ?? undefined)
- setIsLoadingProviders(false)
- })()
- }, [status, router])
+ (async () => {
+ const providers = await getProviders();
+ setProviders(providers ?? undefined);
+ setIsLoadingProviders(false);
+ })();
+ }, [status, router]);
useEffect(() => {
- if (!router.isReady) return
- if (router.query.error === 'ip-banned') {
+ if (!router.isReady) return;
+ if (router.query.error === "ip-banned") {
showToast({
- status: 'info',
+ status: "info",
description:
- 'Your account has suspicious activity and is being reviewed by our team. Feel free to contact us.',
- })
+ "Your account has suspicious activity and is being reviewed by our team. Feel free to contact us.",
+ });
}
- }, [router.isReady, router.query.error, showToast])
+ }, [router.isReady, router.query.error, showToast]);
const handleEmailChange = (e: ChangeEvent) =>
- setEmailValue(e.target.value)
+ setEmailValue(e.target.value);
const handleEmailSubmit = async (e: FormEvent) => {
- e.preventDefault()
- if (isMagicLinkSent) return
- setAuthLoading(true)
+ e.preventDefault();
+ if (isMagicLinkSent) return;
+ setAuthLoading(true);
try {
- const response = await signIn('email', {
+ const response = await signIn("email", {
email: emailValue,
redirect: false,
- })
+ });
if (response?.error) {
- if (response.error.includes('rate-limited'))
+ if (response.error.includes("rate-limited"))
showToast({
- status: 'info',
- description: t('auth.signinErrorToast.tooManyRequests'),
- })
- else if (response.error.includes('sign-up-disabled'))
+ status: "info",
+ description: t("auth.signinErrorToast.tooManyRequests"),
+ });
+ else if (response.error.includes("sign-up-disabled"))
showToast({
- title: t('auth.signinErrorToast.title'),
- description: t('auth.signinErrorToast.description'),
- })
+ title: t("auth.signinErrorToast.title"),
+ description: t("auth.signinErrorToast.description"),
+ });
else
showToast({
- status: 'info',
- description: t('errorMessage'),
+ status: "info",
+ description: t("errorMessage"),
details: {
- content: 'Check server logs to see relevent error message.',
- lang: 'json',
+ content: "Check server logs to see relevent error message.",
+ lang: "json",
},
- })
+ });
} else {
- setIsMagicLinkSent(true)
+ setIsMagicLinkSent(true);
}
} catch (e) {
showToast({
- status: 'info',
- description: 'An error occured while signing in',
- })
+ status: "info",
+ description: "An error occured while signing in",
+ });
}
- setAuthLoading(false)
- }
+ setAuthLoading(false);
+ };
- if (isLoadingProviders) return
- {t('auth.noProvider.preLink')}{' '}
+ {t("auth.noProvider.preLink")}{" "}
- {t('auth.noProvider.link')}
+ {t("auth.noProvider.link")}
- )
+ );
return (
{!isMagicLinkSent && (
@@ -143,7 +143,7 @@ export const SignInForm = ({
{t('auth.orEmailLabel')}
+ {t("auth.orEmailLabel")}
@@ -177,13 +177,13 @@ export const SignInForm = ({
- {t('auth.magicLink.title')}
- {t('auth.magicLink.description')}
+ {t("auth.magicLink.title")}
+ {t("auth.magicLink.description")}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/auth/components/SignInPage.tsx b/apps/builder/src/features/auth/components/SignInPage.tsx
index c05f9eb8a9..7fd56c71e9 100644
--- a/apps/builder/src/features/auth/components/SignInPage.tsx
+++ b/apps/builder/src/features/auth/components/SignInPage.tsx
@@ -1,66 +1,66 @@
-import { Seo } from '@/components/Seo'
-import { TextLink } from '@/components/TextLink'
-import { T, useTranslate } from '@tolgee/react'
-import { VStack, Heading, Text } from '@chakra-ui/react'
-import { useRouter } from 'next/router'
-import { SignInForm } from './SignInForm'
+import { Seo } from "@/components/Seo";
+import { TextLink } from "@/components/TextLink";
+import { Heading, Text, VStack } from "@chakra-ui/react";
+import { T, useTranslate } from "@tolgee/react";
+import { useRouter } from "next/router";
+import { SignInForm } from "./SignInForm";
type Props = {
- type: 'signin' | 'signup'
- defaultEmail?: string
-}
+ type: "signin" | "signup";
+ defaultEmail?: string;
+};
export const SignInPage = ({ type }: Props) => {
- const { t } = useTranslate()
- const { query } = useRouter()
+ const { t } = useTranslate();
+ const { query } = useRouter();
return (
{
- throw new Error('Sentry is working')
+ throw new Error("Sentry is working");
}}
>
- {type === 'signin'
- ? t('auth.signin.heading')
- : t('auth.register.heading')}
+ {type === "signin"
+ ? t("auth.signin.heading")
+ : t("auth.register.heading")}
- {type === 'signin' ? (
+ {type === "signin" ? (
- {t('auth.signin.noAccountLabel.preLink')}{' '}
+ {t("auth.signin.noAccountLabel.preLink")}{" "}
- {t('auth.signin.noAccountLabel.link')}
+ {t("auth.signin.noAccountLabel.link")}
) : (
- {t('auth.register.alreadyHaveAccountLabel.preLink')}{' '}
+ {t("auth.register.alreadyHaveAccountLabel.preLink")}{" "}
- {t('auth.register.alreadyHaveAccountLabel.link')}
+ {t("auth.register.alreadyHaveAccountLabel.link")}
)}
) : null}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/auth/components/SocialLoginButtons.tsx b/apps/builder/src/features/auth/components/SocialLoginButtons.tsx
index db627552a8..e5065cb636 100644
--- a/apps/builder/src/features/auth/components/SocialLoginButtons.tsx
+++ b/apps/builder/src/features/auth/components/SocialLoginButtons.tsx
@@ -1,59 +1,59 @@
-import { Stack, Button } from '@chakra-ui/react'
-import { GithubIcon } from '@/components/icons'
+import { GoogleLogo } from "@/components/GoogleLogo";
+import { GithubIcon } from "@/components/icons";
+import { AzureAdLogo } from "@/components/logos/AzureAdLogo";
+import { FacebookLogo } from "@/components/logos/FacebookLogo";
+import { GitlabLogo } from "@/components/logos/GitlabLogo";
+import { KeycloackLogo } from "@/components/logos/KeycloakLogo";
+import { Button, Stack } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { omit } from "@typebot.io/lib/utils";
+import type { BuiltInProviderType } from "next-auth/providers/index";
import {
- ClientSafeProvider,
- LiteralUnion,
+ type ClientSafeProvider,
+ type LiteralUnion,
signIn,
useSession,
-} from 'next-auth/react'
-import { useRouter } from 'next/router'
-import React, { useState } from 'react'
-import { stringify } from 'qs'
-import { BuiltInProviderType } from 'next-auth/providers'
-import { GoogleLogo } from '@/components/GoogleLogo'
-import { omit } from '@typebot.io/lib'
-import { AzureAdLogo } from '@/components/logos/AzureAdLogo'
-import { FacebookLogo } from '@/components/logos/FacebookLogo'
-import { GitlabLogo } from '@/components/logos/GitlabLogo'
-import { useTranslate } from '@tolgee/react'
-import { KeycloackLogo } from '@/components/logos/KeycloakLogo'
+} from "next-auth/react";
+import { useRouter } from "next/router";
+import { stringify } from "qs";
+import React, { useState } from "react";
type Props = {
providers:
| Record, ClientSafeProvider>
- | undefined
-}
+ | undefined;
+};
export const SocialLoginButtons = ({ providers }: Props) => {
- const { t } = useTranslate()
- const { query } = useRouter()
- const { status } = useSession()
+ const { t } = useTranslate();
+ const { query } = useRouter();
+ const { status } = useSession();
const [authLoading, setAuthLoading] =
- useState>()
+ useState>();
const handleSignIn = async (provider: string) => {
- setAuthLoading(provider)
+ setAuthLoading(provider);
await signIn(provider, {
callbackUrl:
query.callbackUrl?.toString() ??
- `/typebots?${stringify(omit(query, 'error', 'callbackUrl'))}`,
- })
- setTimeout(() => setAuthLoading(undefined), 3000)
- }
+ `/typebots?${stringify(omit(query, "error", "callbackUrl"))}`,
+ });
+ setTimeout(() => setAuthLoading(undefined), 3000);
+ };
- const handleGitHubClick = () => handleSignIn('github')
+ const handleGitHubClick = () => handleSignIn("github");
- const handleGoogleClick = () => handleSignIn('google')
+ const handleGoogleClick = () => handleSignIn("google");
- const handleFacebookClick = () => handleSignIn('facebook')
+ const handleFacebookClick = () => handleSignIn("facebook");
- const handleGitlabClick = () => handleSignIn('gitlab')
+ const handleGitlabClick = () => handleSignIn("gitlab");
- const handleAzureAdClick = () => handleSignIn('azure-ad')
+ const handleAzureAdClick = () => handleSignIn("azure-ad");
- const handleCustomOAuthClick = () => handleSignIn('custom-oauth')
+ const handleCustomOAuthClick = () => handleSignIn("custom-oauth");
- const handleKeyCloackClick = () => handleSignIn('keycloak')
+ const handleKeyCloackClick = () => handleSignIn("keycloak");
return (
@@ -63,12 +63,12 @@ export const SocialLoginButtons = ({ providers }: Props) => {
onClick={handleGitHubClick}
data-testid="github"
isLoading={
- ['loading', 'authenticated'].includes(status) ||
- authLoading === 'github'
+ ["loading", "authenticated"].includes(status) ||
+ authLoading === "github"
}
variant="outline"
>
- {t('auth.socialLogin.githubButton.label')}
+ {t("auth.socialLogin.githubButton.label")}
)}
{providers?.google && (
@@ -77,12 +77,12 @@ export const SocialLoginButtons = ({ providers }: Props) => {
onClick={handleGoogleClick}
data-testid="google"
isLoading={
- ['loading', 'authenticated'].includes(status) ||
- authLoading === 'google'
+ ["loading", "authenticated"].includes(status) ||
+ authLoading === "google"
}
variant="outline"
>
- {t('auth.socialLogin.googleButton.label')}
+ {t("auth.socialLogin.googleButton.label")}
)}
{providers?.facebook && (
@@ -91,12 +91,12 @@ export const SocialLoginButtons = ({ providers }: Props) => {
onClick={handleFacebookClick}
data-testid="facebook"
isLoading={
- ['loading', 'authenticated'].includes(status) ||
- authLoading === 'facebook'
+ ["loading", "authenticated"].includes(status) ||
+ authLoading === "facebook"
}
variant="outline"
>
- {t('auth.socialLogin.facebookButton.label')}
+ {t("auth.socialLogin.facebookButton.label")}
)}
{providers?.gitlab && (
@@ -105,43 +105,43 @@ export const SocialLoginButtons = ({ providers }: Props) => {
onClick={handleGitlabClick}
data-testid="gitlab"
isLoading={
- ['loading', 'authenticated'].includes(status) ||
- authLoading === 'gitlab'
+ ["loading", "authenticated"].includes(status) ||
+ authLoading === "gitlab"
}
variant="outline"
>
- {t('auth.socialLogin.gitlabButton.label', {
+ {t("auth.socialLogin.gitlabButton.label", {
gitlabProviderName: providers.gitlab.name,
})}
)}
- {providers?.['azure-ad'] && (
+ {providers?.["azure-ad"] && (
- {t('auth.socialLogin.customButton.label', {
- customProviderName: providers['custom-oauth'].name,
+ {t("auth.socialLogin.customButton.label", {
+ customProviderName: providers["custom-oauth"].name,
})}
)}
@@ -151,14 +151,14 @@ export const SocialLoginButtons = ({ providers }: Props) => {
onClick={handleKeyCloackClick}
data-testid="keycloak"
isLoading={
- ['loading', 'authenticated'].includes(status) ||
- authLoading === 'keycloak'
+ ["loading", "authenticated"].includes(status) ||
+ authLoading === "keycloak"
}
variant="outline"
>
- {t('auth.socialLogin.keycloakButton.label')}
+ {t("auth.socialLogin.keycloakButton.label")}
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/auth/helpers/convertInvitationsToCollaborations.ts b/apps/builder/src/features/auth/helpers/convertInvitationsToCollaborations.ts
index f90c08ab37..669a85f12d 100644
--- a/apps/builder/src/features/auth/helpers/convertInvitationsToCollaborations.ts
+++ b/apps/builder/src/features/auth/helpers/convertInvitationsToCollaborations.ts
@@ -1,15 +1,16 @@
-import { Invitation, PrismaClient, WorkspaceRole } from '@typebot.io/prisma'
+import { WorkspaceRole } from "@typebot.io/prisma/enum";
+import type { Prisma } from "@typebot.io/prisma/types";
-export type InvitationWithWorkspaceId = Invitation & {
+export type InvitationWithWorkspaceId = Prisma.Invitation & {
typebot: {
- workspaceId: string | null
- }
-}
+ workspaceId: string | null;
+ };
+};
export const convertInvitationsToCollaborations = async (
- p: PrismaClient,
+ p: Prisma.PrismaClient,
{ id, email }: { id: string; email: string },
- invitations: InvitationWithWorkspaceId[]
+ invitations: InvitationWithWorkspaceId[],
) => {
await p.collaboratorsOnTypebots.createMany({
data: invitations.map((invitation) => ({
@@ -17,18 +18,18 @@ export const convertInvitationsToCollaborations = async (
type: invitation.type,
userId: id,
})),
- })
+ });
const workspaceInvitations = invitations.reduce(
(acc, invitation) =>
acc.some(
- (inv) => inv.typebot.workspaceId === invitation.typebot.workspaceId
+ (inv) => inv.typebot.workspaceId === invitation.typebot.workspaceId,
)
? acc
: [...acc, invitation],
- []
- )
+ [],
+ );
for (const invitation of workspaceInvitations) {
- if (!invitation.typebot.workspaceId) continue
+ if (!invitation.typebot.workspaceId) continue;
await p.memberInWorkspace.createMany({
data: [
{
@@ -38,11 +39,11 @@ export const convertInvitationsToCollaborations = async (
},
],
skipDuplicates: true,
- })
+ });
}
return p.invitation.deleteMany({
where: {
email,
},
- })
-}
+ });
+};
diff --git a/apps/builder/src/features/auth/helpers/getAuthenticatedUser.ts b/apps/builder/src/features/auth/helpers/getAuthenticatedUser.ts
index 38b456a051..a3eb82e9e5 100644
--- a/apps/builder/src/features/auth/helpers/getAuthenticatedUser.ts
+++ b/apps/builder/src/features/auth/helpers/getAuthenticatedUser.ts
@@ -1,38 +1,38 @@
-import prisma from '@typebot.io/lib/prisma'
-import { getAuthOptions } from '@/pages/api/auth/[...nextauth]'
-import * as Sentry from '@sentry/nextjs'
-import { User } from '@typebot.io/prisma'
-import { NextApiRequest, NextApiResponse } from 'next'
-import { getServerSession } from 'next-auth'
-import { env } from '@typebot.io/env'
-import { mockedUser } from '@typebot.io/lib/mockedUser'
+import { getAuthOptions } from "@/pages/api/auth/[...nextauth]";
+import * as Sentry from "@sentry/nextjs";
+import { env } from "@typebot.io/env";
+import { mockedUser } from "@typebot.io/lib/mockedUser";
+import prisma from "@typebot.io/prisma";
+import type { Prisma } from "@typebot.io/prisma/types";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { getServerSession } from "next-auth";
export const getAuthenticatedUser = async (
req: NextApiRequest,
- res: NextApiResponse
-): Promise => {
- const bearerToken = extractBearerToken(req)
- if (bearerToken) return authenticateByToken(bearerToken)
+ res: NextApiResponse,
+): Promise => {
+ const bearerToken = extractBearerToken(req);
+ if (bearerToken) return authenticateByToken(bearerToken);
const user = env.NEXT_PUBLIC_E2E_TEST
? mockedUser
: ((await getServerSession(req, res, getAuthOptions({})))?.user as
- | User
- | undefined)
- if (!user || !('id' in user)) return
- Sentry.setUser({ id: user.id })
- return user
-}
+ | Prisma.User
+ | undefined);
+ if (!user || !("id" in user)) return;
+ Sentry.setUser({ id: user.id });
+ return user;
+};
const authenticateByToken = async (
- apiToken: string
-): Promise => {
- if (typeof window !== 'undefined') return
+ apiToken: string,
+): Promise => {
+ if (typeof window !== "undefined") return;
const user = (await prisma.user.findFirst({
where: { apiTokens: { some: { token: apiToken } } },
- })) as User
- Sentry.setUser({ id: user.id })
- return user
-}
+ })) as Prisma.User;
+ Sentry.setUser({ id: user.id });
+ return user;
+};
const extractBearerToken = (req: NextApiRequest) =>
- req.headers['authorization']?.slice(7)
+ req.headers["authorization"]?.slice(7);
diff --git a/apps/builder/src/features/auth/helpers/getNewUserInvitations.ts b/apps/builder/src/features/auth/helpers/getNewUserInvitations.ts
index 014d1c48f5..bf5885cfd4 100644
--- a/apps/builder/src/features/auth/helpers/getNewUserInvitations.ts
+++ b/apps/builder/src/features/auth/helpers/getNewUserInvitations.ts
@@ -1,12 +1,12 @@
-import { PrismaClient, WorkspaceInvitation } from '@typebot.io/prisma'
-import { InvitationWithWorkspaceId } from './convertInvitationsToCollaborations'
+import type { Prisma } from "@typebot.io/prisma/types";
+import type { InvitationWithWorkspaceId } from "./convertInvitationsToCollaborations";
export const getNewUserInvitations = async (
- p: PrismaClient,
- email: string
+ p: Prisma.PrismaClient,
+ email: string,
): Promise<{
- invitations: InvitationWithWorkspaceId[]
- workspaceInvitations: WorkspaceInvitation[]
+ invitations: InvitationWithWorkspaceId[];
+ workspaceInvitations: Prisma.WorkspaceInvitation[];
}> => {
const [invitations, workspaceInvitations] = await p.$transaction([
p.invitation.findMany({
@@ -16,7 +16,7 @@ export const getNewUserInvitations = async (
p.workspaceInvitation.findMany({
where: { email },
}),
- ])
+ ]);
- return { invitations, workspaceInvitations }
-}
+ return { invitations, workspaceInvitations };
+};
diff --git a/apps/builder/src/features/auth/helpers/joinWorkspaces.ts b/apps/builder/src/features/auth/helpers/joinWorkspaces.ts
index 0332260bb4..064f095050 100644
--- a/apps/builder/src/features/auth/helpers/joinWorkspaces.ts
+++ b/apps/builder/src/features/auth/helpers/joinWorkspaces.ts
@@ -1,9 +1,9 @@
-import { PrismaClient, WorkspaceInvitation } from '@typebot.io/prisma'
+import type { Prisma } from "@typebot.io/prisma/types";
export const joinWorkspaces = async (
- p: PrismaClient,
+ p: Prisma.PrismaClient,
{ id, email }: { id: string; email: string },
- invitations: WorkspaceInvitation[]
+ invitations: Prisma.WorkspaceInvitation[],
) => {
await p.$transaction([
p.memberInWorkspace.createMany({
@@ -19,5 +19,5 @@ export const joinWorkspaces = async (
email,
},
}),
- ])
-}
+ ]);
+};
diff --git a/apps/builder/src/features/auth/helpers/sendVerificationRequest.ts b/apps/builder/src/features/auth/helpers/sendVerificationRequest.ts
index 1cf579b0ea..10f2140df8 100644
--- a/apps/builder/src/features/auth/helpers/sendVerificationRequest.ts
+++ b/apps/builder/src/features/auth/helpers/sendVerificationRequest.ts
@@ -1,15 +1,15 @@
-import { sendMagicLinkEmail } from '@typebot.io/emails'
+import { sendMagicLinkEmail } from "@typebot.io/emails/emails/MagicLinkEmail";
type Props = {
- identifier: string
- url: string
-}
+ identifier: string;
+ url: string;
+};
export const sendVerificationRequest = async ({ identifier, url }: Props) => {
try {
- await sendMagicLinkEmail({ url, to: identifier })
+ await sendMagicLinkEmail({ url, to: identifier });
} catch (err) {
- console.error(err)
- throw new Error(`Magic link email could not be sent. See error above.`)
+ console.error(err);
+ throw new Error(`Magic link email could not be sent. See error above.`);
}
-}
+};
diff --git a/apps/builder/src/features/billing/api/createCheckoutSession.ts b/apps/builder/src/features/billing/api/createCheckoutSession.ts
index 7d15cced98..b874aebcf1 100644
--- a/apps/builder/src/features/billing/api/createCheckoutSession.ts
+++ b/apps/builder/src/features/billing/api/createCheckoutSession.ts
@@ -1,16 +1,16 @@
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { Plan } from '@typebot.io/prisma'
-import { z } from 'zod'
-import { createCheckoutSession as createCheckoutSessionHandler } from '@typebot.io/billing/api/createCheckoutSession'
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { createCheckoutSession as createCheckoutSessionHandler } from "@typebot.io/billing/api/createCheckoutSession";
+import { Plan } from "@typebot.io/prisma/enum";
+import { z } from "@typebot.io/zod";
export const createCheckoutSession = authenticatedProcedure
.meta({
openapi: {
- method: 'POST',
- path: '/v1/billing/subscription/checkout',
+ method: "POST",
+ path: "/v1/billing/subscription/checkout",
protect: true,
- summary: 'Create checkout session to create a new subscription',
- tags: ['Billing'],
+ summary: "Create checkout session to create a new subscription",
+ tags: ["Billing"],
},
})
.input(
@@ -18,7 +18,7 @@ export const createCheckoutSession = authenticatedProcedure
email: z.string(),
company: z.string(),
workspaceId: z.string(),
- currency: z.enum(['usd', 'eur']),
+ currency: z.enum(["usd", "eur"]),
plan: z.enum([Plan.STARTER, Plan.PRO]),
returnUrl: z.string(),
vat: z
@@ -27,13 +27,13 @@ export const createCheckoutSession = authenticatedProcedure
value: z.string(),
})
.optional(),
- })
+ }),
)
.output(
z.object({
checkoutUrl: z.string(),
- })
+ }),
)
.mutation(async ({ input, ctx: { user } }) =>
- createCheckoutSessionHandler({ ...input, user })
- )
+ createCheckoutSessionHandler({ ...input, user }),
+ );
diff --git a/apps/builder/src/features/billing/api/createCustomCheckoutSession.ts b/apps/builder/src/features/billing/api/createCustomCheckoutSession.ts
index a397434f95..d9fafc7b6f 100644
--- a/apps/builder/src/features/billing/api/createCustomCheckoutSession.ts
+++ b/apps/builder/src/features/billing/api/createCustomCheckoutSession.ts
@@ -1,16 +1,16 @@
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { z } from 'zod'
-import { createCustomCheckoutSession as createCustomCheckoutSessionHandler } from '@typebot.io/billing/api/createCustomCheckoutSession'
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { createCustomCheckoutSession as createCustomCheckoutSessionHandler } from "@typebot.io/billing/api/createCustomCheckoutSession";
+import { z } from "@typebot.io/zod";
export const createCustomCheckoutSession = authenticatedProcedure
.meta({
openapi: {
- method: 'POST',
- path: '/v1/billing/subscription/custom-checkout',
+ method: "POST",
+ path: "/v1/billing/subscription/custom-checkout",
protect: true,
summary:
- 'Create custom checkout session to make a workspace pay for a custom plan',
- tags: ['Billing'],
+ "Create custom checkout session to make a workspace pay for a custom plan",
+ tags: ["Billing"],
},
})
.input(
@@ -18,16 +18,16 @@ export const createCustomCheckoutSession = authenticatedProcedure
email: z.string(),
workspaceId: z.string(),
returnUrl: z.string(),
- })
+ }),
)
.output(
z.object({
checkoutUrl: z.string(),
- })
+ }),
)
.mutation(async ({ input, ctx: { user } }) =>
createCustomCheckoutSessionHandler({
...input,
user,
- })
- )
+ }),
+ );
diff --git a/apps/builder/src/features/billing/api/getBillingPortalUrl.ts b/apps/builder/src/features/billing/api/getBillingPortalUrl.ts
index 7b1b3e8ab0..46a4d5e2fc 100644
--- a/apps/builder/src/features/billing/api/getBillingPortalUrl.ts
+++ b/apps/builder/src/features/billing/api/getBillingPortalUrl.ts
@@ -1,27 +1,27 @@
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { z } from 'zod'
-import { getBillingPortalUrl as getBillingPortalUrlHandler } from '@typebot.io/billing/api/getBillingPortalUrl'
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { getBillingPortalUrl as getBillingPortalUrlHandler } from "@typebot.io/billing/api/getBillingPortalUrl";
+import { z } from "@typebot.io/zod";
export const getBillingPortalUrl = authenticatedProcedure
.meta({
openapi: {
- method: 'GET',
- path: '/v1/billing/subscription/portal',
+ method: "GET",
+ path: "/v1/billing/subscription/portal",
protect: true,
- summary: 'Get Stripe billing portal URL',
- tags: ['Billing'],
+ summary: "Get Stripe billing portal URL",
+ tags: ["Billing"],
},
})
.input(
z.object({
workspaceId: z.string(),
- })
+ }),
)
.output(
z.object({
billingPortalUrl: z.string(),
- })
+ }),
)
.query(async ({ input: { workspaceId }, ctx: { user } }) =>
- getBillingPortalUrlHandler({ workspaceId, user })
- )
+ getBillingPortalUrlHandler({ workspaceId, user }),
+ );
diff --git a/apps/builder/src/features/billing/api/getSubscription.ts b/apps/builder/src/features/billing/api/getSubscription.ts
index 3c17e52823..4ddb4781b2 100644
--- a/apps/builder/src/features/billing/api/getSubscription.ts
+++ b/apps/builder/src/features/billing/api/getSubscription.ts
@@ -1,28 +1,28 @@
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { z } from 'zod'
-import { subscriptionSchema } from '@typebot.io/schemas/features/billing/subscription'
-import { getSubscription as getSubscriptionHandler } from '@typebot.io/billing/api/getSubscription'
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { getSubscription as getSubscriptionHandler } from "@typebot.io/billing/api/getSubscription";
+import { subscriptionSchema } from "@typebot.io/billing/schemas/subscription";
+import { z } from "@typebot.io/zod";
export const getSubscription = authenticatedProcedure
.meta({
openapi: {
- method: 'GET',
- path: '/v1/billing/subscription',
+ method: "GET",
+ path: "/v1/billing/subscription",
protect: true,
- summary: 'List invoices',
- tags: ['Billing'],
+ summary: "List invoices",
+ tags: ["Billing"],
},
})
.input(
z.object({
workspaceId: z.string(),
- })
+ }),
)
.output(
z.object({
- subscription: subscriptionSchema.or(z.null().openapi({ type: 'string' })),
- })
+ subscription: subscriptionSchema.or(z.null().openapi({ type: "string" })),
+ }),
)
.query(async ({ input: { workspaceId }, ctx: { user } }) =>
- getSubscriptionHandler({ workspaceId, user })
- )
+ getSubscriptionHandler({ workspaceId, user }),
+ );
diff --git a/apps/builder/src/features/billing/api/getUsage.ts b/apps/builder/src/features/billing/api/getUsage.ts
index 2e006019a9..0a446ad96a 100644
--- a/apps/builder/src/features/billing/api/getUsage.ts
+++ b/apps/builder/src/features/billing/api/getUsage.ts
@@ -1,15 +1,15 @@
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { z } from 'zod'
-import { getUsage as getUsageHandler } from '@typebot.io/billing/api/getUsage'
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { getUsage as getUsageHandler } from "@typebot.io/billing/api/getUsage";
+import { z } from "@typebot.io/zod";
export const getUsage = authenticatedProcedure
.meta({
openapi: {
- method: 'GET',
- path: '/v1/billing/usage',
+ method: "GET",
+ path: "/v1/billing/usage",
protect: true,
- summary: 'Get current plan usage',
- tags: ['Billing'],
+ summary: "Get current plan usage",
+ tags: ["Billing"],
},
})
.input(
@@ -17,11 +17,11 @@ export const getUsage = authenticatedProcedure
workspaceId: z
.string()
.describe(
- '[Where to find my workspace ID?](../how-to#how-to-find-my-workspaceid)'
+ "[Where to find my workspace ID?](../how-to#how-to-find-my-workspaceid)",
),
- })
+ }),
)
.output(z.object({ totalChatsUsed: z.number(), resetsAt: z.date() }))
.query(async ({ input: { workspaceId }, ctx: { user } }) =>
- getUsageHandler({ workspaceId, user })
- )
+ getUsageHandler({ workspaceId, user }),
+ );
diff --git a/apps/builder/src/features/billing/api/listInvoices.ts b/apps/builder/src/features/billing/api/listInvoices.ts
index 074b521e76..b4accf0c34 100644
--- a/apps/builder/src/features/billing/api/listInvoices.ts
+++ b/apps/builder/src/features/billing/api/listInvoices.ts
@@ -1,16 +1,16 @@
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { z } from 'zod'
-import { invoiceSchema } from '@typebot.io/schemas/features/billing/invoice'
-import { listInvoices as listInvoicesHandler } from '@typebot.io/billing/api/listInvoices'
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { listInvoices as listInvoicesHandler } from "@typebot.io/billing/api/listInvoices";
+import { invoiceSchema } from "@typebot.io/billing/schemas/invoice";
+import { z } from "@typebot.io/zod";
export const listInvoices = authenticatedProcedure
.meta({
openapi: {
- method: 'GET',
- path: '/v1/billing/invoices',
+ method: "GET",
+ path: "/v1/billing/invoices",
protect: true,
- summary: 'List invoices',
- tags: ['Billing'],
+ summary: "List invoices",
+ tags: ["Billing"],
},
})
.input(
@@ -18,15 +18,15 @@ export const listInvoices = authenticatedProcedure
workspaceId: z
.string()
.describe(
- '[Where to find my workspace ID?](../how-to#how-to-find-my-workspaceid)'
+ "[Where to find my workspace ID?](../how-to#how-to-find-my-workspaceid)",
),
- })
+ }),
)
.output(
z.object({
invoices: z.array(invoiceSchema),
- })
+ }),
)
.query(async ({ input: { workspaceId }, ctx: { user } }) =>
- listInvoicesHandler({ workspaceId, user })
- )
+ listInvoicesHandler({ workspaceId, user }),
+ );
diff --git a/apps/builder/src/features/billing/api/router.ts b/apps/builder/src/features/billing/api/router.ts
index de4cd5317c..2997e5d9e5 100644
--- a/apps/builder/src/features/billing/api/router.ts
+++ b/apps/builder/src/features/billing/api/router.ts
@@ -1,11 +1,11 @@
-import { router } from '@/helpers/server/trpc'
-import { createCheckoutSession } from './createCheckoutSession'
-import { getBillingPortalUrl } from './getBillingPortalUrl'
-import { getSubscription } from './getSubscription'
-import { getUsage } from './getUsage'
-import { listInvoices } from './listInvoices'
-import { updateSubscription } from './updateSubscription'
-import { createCustomCheckoutSession } from './createCustomCheckoutSession'
+import { router } from "@/helpers/server/trpc";
+import { createCheckoutSession } from "./createCheckoutSession";
+import { createCustomCheckoutSession } from "./createCustomCheckoutSession";
+import { getBillingPortalUrl } from "./getBillingPortalUrl";
+import { getSubscription } from "./getSubscription";
+import { getUsage } from "./getUsage";
+import { listInvoices } from "./listInvoices";
+import { updateSubscription } from "./updateSubscription";
export const billingRouter = router({
getBillingPortalUrl,
@@ -15,4 +15,4 @@ export const billingRouter = router({
getSubscription,
getUsage,
createCustomCheckoutSession,
-})
+});
diff --git a/apps/builder/src/features/billing/api/updateSubscription.ts b/apps/builder/src/features/billing/api/updateSubscription.ts
index c83b582b9d..9f7db0c057 100644
--- a/apps/builder/src/features/billing/api/updateSubscription.ts
+++ b/apps/builder/src/features/billing/api/updateSubscription.ts
@@ -1,17 +1,17 @@
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { Plan } from '@typebot.io/prisma'
-import { workspaceSchema } from '@typebot.io/schemas'
-import { z } from 'zod'
-import { updateSubscription as updateSubscriptionHandler } from '@typebot.io/billing/api/updateSubscription'
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { updateSubscription as updateSubscriptionHandler } from "@typebot.io/billing/api/updateSubscription";
+import { Plan } from "@typebot.io/prisma/enum";
+import { workspaceSchema } from "@typebot.io/workspaces/schemas";
+import { z } from "@typebot.io/zod";
export const updateSubscription = authenticatedProcedure
.meta({
openapi: {
- method: 'PATCH',
- path: '/v1/billing/subscription',
+ method: "PATCH",
+ path: "/v1/billing/subscription",
protect: true,
- summary: 'Update subscription',
- tags: ['Billing'],
+ summary: "Update subscription",
+ tags: ["Billing"],
},
})
.input(
@@ -19,18 +19,18 @@ export const updateSubscription = authenticatedProcedure
returnUrl: z.string(),
workspaceId: z.string(),
plan: z.enum([Plan.STARTER, Plan.PRO]),
- currency: z.enum(['usd', 'eur']),
- })
+ currency: z.enum(["usd", "eur"]),
+ }),
)
.output(
z.object({
workspace: workspaceSchema.nullish(),
checkoutUrl: z.string().nullish(),
- })
+ }),
)
.mutation(async ({ input, ctx: { user } }) =>
updateSubscriptionHandler({
...input,
user,
- })
- )
+ }),
+ );
diff --git a/apps/builder/src/features/billing/billing.spec.ts b/apps/builder/src/features/billing/billing.spec.ts
index 0391eeb69f..492477d9da 100644
--- a/apps/builder/src/features/billing/billing.spec.ts
+++ b/apps/builder/src/features/billing/billing.spec.ts
@@ -2,127 +2,127 @@ import {
addSubscriptionToWorkspace,
cancelSubscription,
createClaimableCustomPlan,
-} from '@/test/utils/databaseActions'
-import test, { expect } from '@playwright/test'
-import { createId } from '@paralleldrive/cuid2'
-import { Plan } from '@typebot.io/prisma'
+} from "@/test/utils/databaseActions";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { env } from "@typebot.io/env";
import {
createTypebots,
createWorkspaces,
deleteWorkspaces,
injectFakeResults,
-} from '@typebot.io/playwright/databaseActions'
-import { env } from '@typebot.io/env'
+} from "@typebot.io/playwright/databaseActions";
+import { Plan } from "@typebot.io/prisma/enum";
-const usageWorkspaceId = createId()
-const usageTypebotId = createId()
-const planChangeWorkspaceId = createId()
-const enterpriseWorkspaceId = createId()
+const usageWorkspaceId = createId();
+const usageTypebotId = createId();
+const planChangeWorkspaceId = createId();
+const enterpriseWorkspaceId = createId();
test.beforeAll(async () => {
await createWorkspaces([
{
id: usageWorkspaceId,
- name: 'Usage Workspace',
+ name: "Usage Workspace",
plan: Plan.STARTER,
},
{
id: planChangeWorkspaceId,
- name: 'Plan Change Workspace',
+ name: "Plan Change Workspace",
},
{
id: enterpriseWorkspaceId,
- name: 'Enterprise Workspace',
+ name: "Enterprise Workspace",
},
- ])
- await createTypebots([{ id: usageTypebotId, workspaceId: usageWorkspaceId }])
-})
+ ]);
+ await createTypebots([{ id: usageTypebotId, workspaceId: usageWorkspaceId }]);
+});
test.afterAll(async () => {
await deleteWorkspaces([
usageWorkspaceId,
planChangeWorkspaceId,
enterpriseWorkspaceId,
- ])
-})
-
-test('should display valid usage', async ({ page }) => {
- await page.goto('/typebots')
- await page.click('text=Settings & Members')
- await page.click('text=Billing & Usage')
- await expect(page.locator('text="/ 10,000"')).toBeVisible()
- await page.getByText('Members', { exact: true }).click()
+ ]);
+});
+
+test("should display valid usage", async ({ page }) => {
+ await page.goto("/typebots");
+ await page.click("text=Settings & Members");
+ await page.click("text=Billing & Usage");
+ await expect(page.locator('text="/ 10,000"')).toBeVisible();
+ await page.getByText("Members", { exact: true }).click();
await expect(
- page.getByRole('heading', { name: 'Members (1/5)' })
- ).toBeVisible()
- await page.click('text=Pro workspace', { force: true })
-
- await page.click('text=Pro workspace')
- await page.click('text="Custom workspace"')
- await page.click('text=Settings & Members')
- await page.click('text=Billing & Usage')
- await expect(page.locator('text="/ 100,000"')).toBeVisible()
- await expect(page.getByText('Upgrade to Starter')).toBeHidden()
- await expect(page.getByText('Upgrade to Pro')).toBeHidden()
- await expect(page.getByText('Need custom limits?')).toBeHidden()
- await page.getByText('Members', { exact: true }).click()
+ page.getByRole("heading", { name: "Members (1/5)" }),
+ ).toBeVisible();
+ await page.click("text=Pro workspace", { force: true });
+
+ await page.click("text=Pro workspace");
+ await page.click('text="Custom workspace"');
+ await page.click("text=Settings & Members");
+ await page.click("text=Billing & Usage");
+ await expect(page.locator('text="/ 100,000"')).toBeVisible();
+ await expect(page.getByText("Upgrade to Starter")).toBeHidden();
+ await expect(page.getByText("Upgrade to Pro")).toBeHidden();
+ await expect(page.getByText("Need custom limits?")).toBeHidden();
+ await page.getByText("Members", { exact: true }).click();
await expect(
- page.getByRole('heading', { name: 'Members (1/20)' })
- ).toBeVisible()
- await page.click('text=Custom workspace', { force: true })
-
- await page.click('text=Custom workspace')
- await page.click('text="Free workspace"')
- await page.click('text=Settings & Members')
- await page.click('text=Billing & Usage')
- await expect(page.locator('text="/ 200"')).toBeVisible()
- await page.getByText('Members', { exact: true }).click()
+ page.getByRole("heading", { name: "Members (1/20)" }),
+ ).toBeVisible();
+ await page.click("text=Custom workspace", { force: true });
+
+ await page.click("text=Custom workspace");
+ await page.click('text="Free workspace"');
+ await page.click("text=Settings & Members");
+ await page.click("text=Billing & Usage");
+ await expect(page.locator('text="/ 200"')).toBeVisible();
+ await page.getByText("Members", { exact: true }).click();
await expect(
- page.getByRole('heading', { name: 'Members (1/1)' })
- ).toBeVisible()
- await page.click('text=Free workspace', { force: true })
+ page.getByRole("heading", { name: "Members (1/1)" }),
+ ).toBeVisible();
+ await page.click("text=Free workspace", { force: true });
await injectFakeResults({
count: 10,
typebotId: usageTypebotId,
- })
- await page.click('text=Free workspace')
- await page.click('text="Usage Workspace"')
- await page.click('text=Settings & Members')
- await page.click('text=Billing & Usage')
- await expect(page.locator('text="/ 2,000"')).toBeVisible()
- await expect(page.locator('text="10" >> nth=0')).toBeVisible()
+ });
+ await page.click("text=Free workspace");
+ await page.click('text="Usage Workspace"');
+ await page.click("text=Settings & Members");
+ await page.click("text=Billing & Usage");
+ await expect(page.locator('text="/ 2,000"')).toBeVisible();
+ await expect(page.locator('text="10" >> nth=0')).toBeVisible();
await expect(page.locator('[role="progressbar"] >> nth=0')).toHaveAttribute(
- 'aria-valuenow',
- '1'
- )
+ "aria-valuenow",
+ "1",
+ );
await injectFakeResults({
typebotId: usageTypebotId,
count: 1090,
- })
- await page.click('text="Settings"')
- await page.click('text="Billing & Usage"')
- await expect(page.locator('text="/ 2,000"')).toBeVisible()
- await expect(page.locator('text="1,100"')).toBeVisible()
- await expect(page.locator('[aria-valuenow="55"]')).toBeVisible()
-})
-
-test('plan changes should work', async ({ page }) => {
- test.setTimeout(80000)
+ });
+ await page.click('text="Settings"');
+ await page.click('text="Billing & Usage"');
+ await expect(page.locator('text="/ 2,000"')).toBeVisible();
+ await expect(page.locator('text="1,100"')).toBeVisible();
+ await expect(page.locator('[aria-valuenow="55"]')).toBeVisible();
+});
+
+test("plan changes should work", async ({ page }) => {
+ test.setTimeout(80000);
// Upgrade to STARTER
- await page.goto('/typebots')
- await page.click('text=Pro workspace')
- await page.click('text=Plan Change Workspace')
- await page.click('text=Settings & Members')
- await page.click('text=Billing & Usage')
- await expect(page.locator('text="$39"')).toBeVisible()
- await page.click('button >> text=Upgrade >> nth=0')
- await page.getByLabel('Company name').fill('Company LLC')
- await page.getByRole('button', { name: 'Go to checkout' }).click()
- await page.waitForNavigation()
- expect(page.url()).toContain('https://checkout.stripe.com')
- await expect(page.locator('text=$39 >> nth=0')).toBeVisible()
+ await page.goto("/typebots");
+ await page.click("text=Pro workspace");
+ await page.click("text=Plan Change Workspace");
+ await page.click("text=Settings & Members");
+ await page.click("text=Billing & Usage");
+ await expect(page.locator('text="$39"')).toBeVisible();
+ await page.click("button >> text=Upgrade >> nth=0");
+ await page.getByLabel("Company name").fill("Company LLC");
+ await page.getByRole("button", { name: "Go to checkout" }).click();
+ await page.waitForNavigation();
+ expect(page.url()).toContain("https://checkout.stripe.com");
+ await expect(page.locator("text=$39 >> nth=0")).toBeVisible();
const stripeId = await addSubscriptionToWorkspace(
planChangeWorkspaceId,
[
@@ -134,86 +134,86 @@ test('plan changes should work', async ({ page }) => {
price: env.STRIPE_STARTER_CHATS_PRICE_ID,
},
],
- { plan: Plan.STARTER }
- )
+ { plan: Plan.STARTER },
+ );
// Update plan with additional quotas
- await page.goto('/typebots')
- await page.click('text=Settings & Members')
- await page.click('text=Billing & Usage')
- await expect(page.locator('text="/ 2,000"')).toBeVisible()
- await expect(page.getByText('/ 2,000')).toBeVisible()
+ await page.goto("/typebots");
+ await page.click("text=Settings & Members");
+ await page.click("text=Billing & Usage");
+ await expect(page.locator('text="/ 2,000"')).toBeVisible();
+ await expect(page.getByText("/ 2,000")).toBeVisible();
// Upgrade to PRO
- await expect(page.locator('text="$89"')).toBeVisible()
- await page.click('button >> text=Upgrade')
+ await expect(page.locator('text="$89"')).toBeVisible();
+ await page.click("button >> text=Upgrade");
await expect(
- page.locator('text="Workspace PRO plan successfully updated" >> nth=0')
- ).toBeVisible()
+ page.locator('text="Workspace PRO plan successfully updated" >> nth=0'),
+ ).toBeVisible();
// Go to customer portal
await Promise.all([
page.waitForNavigation(),
page.click('text="Billing portal"'),
- ])
- await expect(page.getByText('$39.00')).toBeVisible({
+ ]);
+ await expect(page.getByText("$39.00")).toBeVisible({
timeout: 10000,
- })
- await expect(page.getByText('$50.00')).toBeVisible({
+ });
+ await expect(page.getByText("$50.00")).toBeVisible({
timeout: 10000,
- })
- await expect(page.locator('text="Add payment method"')).toBeVisible()
- await cancelSubscription(stripeId)
+ });
+ await expect(page.locator('text="Add payment method"')).toBeVisible();
+ await cancelSubscription(stripeId);
// Cancel subscription
- await page.goto('/typebots')
- await page.click('text=Settings & Members')
- await page.click('text=Billing & Usage')
+ await page.goto("/typebots");
+ await page.click("text=Settings & Members");
+ await page.click("text=Billing & Usage");
await expect(
- page.getByTestId('current-subscription').getByTestId('pro-plan-tag')
- ).toBeVisible()
- await expect(page.getByText('Will be cancelled on')).toBeVisible()
-})
-
-test('should display invoices', async ({ page }) => {
- await page.goto('/typebots')
- await page.click('text=Settings & Members')
- await page.click('text=Billing & Usage')
- await expect(page.locator('text="Invoices"')).toBeHidden()
- await page.click('text=Pro workspace', { force: true })
-
- await page.click('text=Pro workspace')
- await page.click('text=Plan Change Workspace')
- await page.click('text=Settings & Members')
- await page.click('text=Billing & Usage')
- await expect(page.locator('text="Invoices"')).toBeVisible()
- await expect(page.locator('tr')).toHaveCount(4)
- await expect(page.getByText('$39.00')).toBeVisible()
- await expect(page.getByText('$50.00')).toBeVisible()
-})
-
-test('custom plans should work', async ({ page }) => {
- await page.goto('/typebots')
- await page.click('text=Pro workspace')
- await page.click('text=Enterprise Workspace')
- await page.click('text=Settings & Members')
- await page.click('text=Billing & Usage')
- await expect(page.getByTestId('current-subscription')).toHaveText(
- 'Current workspace subscription: Free'
- )
+ page.getByTestId("current-subscription").getByTestId("pro-plan-tag"),
+ ).toBeVisible();
+ await expect(page.getByText("Will be cancelled on")).toBeVisible();
+});
+
+test("should display invoices", async ({ page }) => {
+ await page.goto("/typebots");
+ await page.click("text=Settings & Members");
+ await page.click("text=Billing & Usage");
+ await expect(page.locator('text="Invoices"')).toBeHidden();
+ await page.click("text=Pro workspace", { force: true });
+
+ await page.click("text=Pro workspace");
+ await page.click("text=Plan Change Workspace");
+ await page.click("text=Settings & Members");
+ await page.click("text=Billing & Usage");
+ await expect(page.locator('text="Invoices"')).toBeVisible();
+ await expect(page.locator("tr")).toHaveCount(4);
+ await expect(page.getByText("$39.00")).toBeVisible();
+ await expect(page.getByText("$50.00")).toBeVisible();
+});
+
+test("custom plans should work", async ({ page }) => {
+ await page.goto("/typebots");
+ await page.click("text=Pro workspace");
+ await page.click("text=Enterprise Workspace");
+ await page.click("text=Settings & Members");
+ await page.click("text=Billing & Usage");
+ await expect(page.getByTestId("current-subscription")).toHaveText(
+ "Current workspace subscription: Free",
+ );
await createClaimableCustomPlan({
- currency: 'usd',
+ currency: "usd",
price: 239,
workspaceId: enterpriseWorkspaceId,
chatsLimit: 100000,
storageLimit: 50,
seatsLimit: 10,
- name: 'Acme custom plan',
- description: 'Description of the deal',
- })
+ name: "Acme custom plan",
+ description: "Description of the deal",
+ });
- await page.goto('/typebots?claimCustomPlan=true')
+ await page.goto("/typebots?claimCustomPlan=true");
- await expect(page.getByRole('list').getByText('$239.00')).toBeVisible()
- await expect(page.getByText('Subscribe to Acme custom plan')).toBeVisible()
-})
+ await expect(page.getByRole("list").getByText("$239.00")).toBeVisible();
+ await expect(page.getByText("Subscribe to Acme custom plan")).toBeVisible();
+});
diff --git a/apps/builder/src/features/billing/components/BillingPortalButton.tsx b/apps/builder/src/features/billing/components/BillingPortalButton.tsx
index 747dc4e922..6519dc12d4 100644
--- a/apps/builder/src/features/billing/components/BillingPortalButton.tsx
+++ b/apps/builder/src/features/billing/components/BillingPortalButton.tsx
@@ -1,15 +1,15 @@
-import { useToast } from '@/hooks/useToast'
-import { trpc } from '@/lib/trpc'
-import { useTranslate } from '@tolgee/react'
-import { Button, ButtonProps, Link } from '@chakra-ui/react'
+import { useToast } from "@/hooks/useToast";
+import { trpc } from "@/lib/trpc";
+import { Button, type ButtonProps, Link } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
type Props = {
- workspaceId: string
-} & Pick
+ workspaceId: string;
+} & Pick;
export const BillingPortalButton = ({ workspaceId, colorScheme }: Props) => {
- const { t } = useTranslate()
- const { showToast } = useToast()
+ const { t } = useTranslate();
+ const { showToast } = useToast();
const { data } = trpc.billing.getBillingPortalUrl.useQuery(
{
workspaceId,
@@ -18,10 +18,10 @@ export const BillingPortalButton = ({ workspaceId, colorScheme }: Props) => {
onError: (error) => {
showToast({
description: error.message,
- })
+ });
},
- }
- )
+ },
+ );
return (
{
isLoading={!data}
colorScheme={colorScheme}
>
- {t('billing.billingPortalButton.label')}
+ {t("billing.billingPortalButton.label")}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/billing/components/BillingSettingsLayout.tsx b/apps/builder/src/features/billing/components/BillingSettingsLayout.tsx
index 755950eeb2..f30e63fb73 100644
--- a/apps/builder/src/features/billing/components/BillingSettingsLayout.tsx
+++ b/apps/builder/src/features/billing/components/BillingSettingsLayout.tsx
@@ -1,15 +1,15 @@
-import { Stack } from '@chakra-ui/react'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import React from 'react'
-import { InvoicesList } from './InvoicesList'
-import { ChangePlanForm } from './ChangePlanForm'
-import { UsageProgressBars } from './UsageProgressBars'
-import { CurrentSubscriptionSummary } from './CurrentSubscriptionSummary'
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { Stack } from "@chakra-ui/react";
+import React from "react";
+import { ChangePlanForm } from "./ChangePlanForm";
+import { CurrentSubscriptionSummary } from "./CurrentSubscriptionSummary";
+import { InvoicesList } from "./InvoicesList";
+import { UsageProgressBars } from "./UsageProgressBars";
export const BillingSettingsLayout = () => {
- const { workspace, currentRole } = useWorkspace()
+ const { workspace, currentRole } = useWorkspace();
- if (!workspace) return null
+ if (!workspace) return null;
return (
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/billing/components/ChangePlanForm.tsx b/apps/builder/src/features/billing/components/ChangePlanForm.tsx
index 5524a130ff..8bcb8af7d5 100644
--- a/apps/builder/src/features/billing/components/ChangePlanForm.tsx
+++ b/apps/builder/src/features/billing/components/ChangePlanForm.tsx
@@ -1,97 +1,98 @@
-import { Stack, HStack, Text } from '@chakra-ui/react'
-import { Plan, WorkspaceRole } from '@typebot.io/prisma'
-import { TextLink } from '@/components/TextLink'
-import { useToast } from '@/hooks/useToast'
-import { trpc } from '@/lib/trpc'
-import { PreCheckoutModal, PreCheckoutModalProps } from './PreCheckoutModal'
-import { useState } from 'react'
-import { ParentModalProvider } from '@/features/graph/providers/ParentModalProvider'
-import { useUser } from '@/features/account/hooks/useUser'
-import { StarterPlanPricingCard } from './StarterPlanPricingCard'
-import { ProPlanPricingCard } from './ProPlanPricingCard'
-import { useTranslate } from '@tolgee/react'
-import { StripeClimateLogo } from './StripeClimateLogo'
-import { guessIfUserIsEuropean } from '@typebot.io/billing/helpers/guessIfUserIsEuropean'
-import { WorkspaceInApp } from '@/features/workspace/WorkspaceProvider'
+import { TextLink } from "@/components/TextLink";
+import { useUser } from "@/features/account/hooks/useUser";
+import { ParentModalProvider } from "@/features/graph/providers/ParentModalProvider";
+import type { WorkspaceInApp } from "@/features/workspace/WorkspaceProvider";
+import { useToast } from "@/hooks/useToast";
+import { trpc } from "@/lib/trpc";
+import { HStack, Stack, Text } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { guessIfUserIsEuropean } from "@typebot.io/billing/helpers/guessIfUserIsEuropean";
+import { Plan, WorkspaceRole } from "@typebot.io/prisma/enum";
+import { useState } from "react";
+import type { PreCheckoutModalProps } from "./PreCheckoutModal";
+import { PreCheckoutModal } from "./PreCheckoutModal";
+import { ProPlanPricingCard } from "./ProPlanPricingCard";
+import { StarterPlanPricingCard } from "./StarterPlanPricingCard";
+import { StripeClimateLogo } from "./StripeClimateLogo";
type Props = {
- workspace: WorkspaceInApp
- currentRole?: WorkspaceRole
- excludedPlans?: ('STARTER' | 'PRO')[]
-}
+ workspace: WorkspaceInApp;
+ currentRole?: WorkspaceRole;
+ excludedPlans?: ("STARTER" | "PRO")[];
+};
export const ChangePlanForm = ({
workspace,
currentRole,
excludedPlans,
}: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
- const { user } = useUser()
- const { showToast } = useToast()
+ const { user } = useUser();
+ const { showToast } = useToast();
const [preCheckoutPlan, setPreCheckoutPlan] =
- useState()
+ useState();
- const trpcContext = trpc.useContext()
+ const trpcContext = trpc.useContext();
const { data, refetch } = trpc.billing.getSubscription.useQuery({
workspaceId: workspace.id,
- })
+ });
const { mutate: updateSubscription, isLoading: isUpdatingSubscription } =
trpc.billing.updateSubscription.useMutation({
onError: (error) => {
showToast({
description: error.message,
- })
+ });
},
onSuccess: ({ workspace, checkoutUrl }) => {
if (checkoutUrl) {
- window.location.href = checkoutUrl
- return
+ window.location.href = checkoutUrl;
+ return;
}
- refetch()
- trpcContext.workspace.getWorkspace.invalidate()
+ refetch();
+ trpcContext.workspace.getWorkspace.invalidate();
showToast({
- status: 'success',
- description: t('billing.updateSuccessToast.description', {
+ status: "success",
+ description: t("billing.updateSuccessToast.description", {
plan: workspace?.plan,
}),
- })
+ });
},
- })
+ });
- const handlePayClick = async (plan: 'STARTER' | 'PRO') => {
- if (!user) return
+ const handlePayClick = async (plan: "STARTER" | "PRO") => {
+ if (!user) return;
const newSubscription = {
plan,
workspaceId: workspace.id,
currency:
data?.subscription?.currency ??
- (guessIfUserIsEuropean() ? 'eur' : 'usd'),
- } as const
+ (guessIfUserIsEuropean() ? "eur" : "usd"),
+ } as const;
if (workspace.stripeId) {
updateSubscription({
...newSubscription,
returnUrl: window.location.href,
- })
+ });
} else {
- setPreCheckoutPlan(newSubscription)
+ setPreCheckoutPlan(newSubscription);
}
- }
+ };
if (
data?.subscription?.cancelDate ||
- data?.subscription?.status === 'past_due'
+ data?.subscription?.status === "past_due"
)
- return null
+ return null;
const isSubscribed =
(workspace.plan === Plan.STARTER || workspace.plan === Plan.PRO) &&
- workspace.stripeId
+ workspace.stripeId;
- if (workspace.plan !== Plan.FREE && !isSubscribed) return null
+ if (workspace.plan !== Plan.FREE && !isSubscribed) return null;
if (currentRole !== WorkspaceRole.ADMIN)
return (
@@ -99,16 +100,16 @@ export const ChangePlanForm = ({
Only workspace admins can change the subscription plan. Contact your
workspace admin to change the plan.
- )
+ );
return (
- {t('billing.contribution.preLink')}{' '}
+ {t("billing.contribution.preLink")}{" "}
- {t('billing.contribution.link')}
+ {t("billing.contribution.link")}
@@ -125,7 +126,7 @@ export const ChangePlanForm = ({
{data && (
- {excludedPlans?.includes('STARTER') ? null : (
+ {excludedPlans?.includes("STARTER") ? null : (
handlePayClick(Plan.STARTER)}
@@ -134,7 +135,7 @@ export const ChangePlanForm = ({
/>
)}
- {excludedPlans?.includes('PRO') ? null : (
+ {excludedPlans?.includes("PRO") ? null : (
handlePayClick(Plan.PRO)}
@@ -147,11 +148,11 @@ export const ChangePlanForm = ({
)}
- {t('billing.customLimit.preLink')}{' '}
-
- {t('billing.customLimit.link')}
+ {t("billing.customLimit.preLink")}{" "}
+
+ {t("billing.customLimit.link")}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/billing/components/ChangePlanModal.tsx b/apps/builder/src/features/billing/components/ChangePlanModal.tsx
index 9e53d85937..da3928c8a0 100644
--- a/apps/builder/src/features/billing/components/ChangePlanModal.tsx
+++ b/apps/builder/src/features/billing/components/ChangePlanModal.tsx
@@ -1,24 +1,24 @@
-import { AlertInfo } from '@/components/AlertInfo'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { useTranslate } from '@tolgee/react'
+import { AlertInfo } from "@/components/AlertInfo";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
import {
+ Button,
+ HStack,
Modal,
ModalBody,
ModalContent,
ModalFooter,
ModalOverlay,
Stack,
- Button,
- HStack,
-} from '@chakra-ui/react'
-import { ChangePlanForm } from './ChangePlanForm'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { ChangePlanForm } from "./ChangePlanForm";
export type ChangePlanModalProps = {
- type?: string
- isOpen: boolean
- excludedPlans?: ('STARTER' | 'PRO')[]
- onClose: () => void
-}
+ type?: string;
+ isOpen: boolean;
+ excludedPlans?: ("STARTER" | "PRO")[];
+ onClose: () => void;
+};
export const ChangePlanModal = ({
onClose,
@@ -26,21 +26,21 @@ export const ChangePlanModal = ({
type,
excludedPlans,
}: ChangePlanModalProps) => {
- const { t } = useTranslate()
- const { workspace, currentRole } = useWorkspace()
+ const { t } = useTranslate();
+ const { workspace, currentRole } = useWorkspace();
return (
{type && (
- {t('billing.upgradeLimitLabel', { type: type })}
+ {t("billing.upgradeLimitLabel", { type: type })}
)}
{workspace && (
@@ -55,11 +55,11 @@ export const ChangePlanModal = ({
- {t('cancel')}
+ {t("cancel")}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/billing/components/ChatsProTiersModal.tsx b/apps/builder/src/features/billing/components/ChatsProTiersModal.tsx
index b6206fb3bb..8bfb1865e3 100644
--- a/apps/builder/src/features/billing/components/ChatsProTiersModal.tsx
+++ b/apps/builder/src/features/billing/components/ChatsProTiersModal.tsx
@@ -1,13 +1,13 @@
import {
+ Heading,
Modal,
- ModalOverlay,
+ ModalBody,
+ ModalCloseButton,
ModalContent,
+ ModalFooter,
ModalHeader,
- ModalCloseButton,
- ModalBody,
+ ModalOverlay,
Stack,
- ModalFooter,
- Heading,
Table,
TableContainer,
Tbody,
@@ -15,25 +15,25 @@ import {
Th,
Thead,
Tr,
-} from '@chakra-ui/react'
-import { useTranslate } from '@tolgee/react'
-import { proChatTiers } from '@typebot.io/billing/constants'
-import { formatPrice } from '@typebot.io/billing/helpers/formatPrice'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { proChatTiers } from "@typebot.io/billing/constants";
+import { formatPrice } from "@typebot.io/billing/helpers/formatPrice";
type Props = {
- isOpen: boolean
- onClose: () => void
-}
+ isOpen: boolean;
+ onClose: () => void;
+};
export const ChatsProTiersModal = ({ isOpen, onClose }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
return (
- {t('billing.tiersModal.heading')}
+ {t("billing.tiersModal.heading")}
@@ -51,33 +51,33 @@ export const ChatsProTiersModal = ({ isOpen, onClose }: Props) => {
const pricePerMonth =
(tier.flat_amount ??
proChatTiers.at(-2)?.flat_amount ??
- 0) / 100
+ 0) / 100;
return (
- {tier.up_to === 'inf'
- ? '2,000,000+'
+ {tier.up_to === "inf"
+ ? "2,000,000+"
: tier.up_to.toLocaleString()}
- {index === 0 ? 'included' : formatPrice(pricePerMonth)}
+ {index === 0 ? "included" : formatPrice(pricePerMonth)}
{index === proChatTiers.length - 1
? formatPrice(4.42, { maxFractionDigits: 2 })
: index === 0
- ? 'included'
- : formatPrice(
- (((pricePerMonth * 100) /
- ((tier.up_to as number) -
- (proChatTiers.at(0)?.up_to as number))) *
- 1000) /
- 100,
- { maxFractionDigits: 2 }
- )}
+ ? "included"
+ : formatPrice(
+ (((pricePerMonth * 100) /
+ ((tier.up_to as number) -
+ (proChatTiers.at(0)?.up_to as number))) *
+ 1000) /
+ 100,
+ { maxFractionDigits: 2 },
+ )}
- )
+ );
})}
@@ -86,5 +86,5 @@ export const ChatsProTiersModal = ({ isOpen, onClose }: Props) => {
-}
+ workspace: Pick;
+};
export const CurrentSubscriptionSummary = ({ workspace }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const { data } = trpc.billing.getSubscription.useQuery({
workspaceId: workspace.id,
- })
+ });
const isSubscribed =
(workspace.plan === Plan.STARTER || workspace.plan === Plan.PRO) &&
- workspace.stripeId
+ workspace.stripeId;
return (
- {t('billing.currentSubscription.heading')}
+ {t("billing.currentSubscription.heading")}
- {t('billing.currentSubscription.subheading')}
+ {t("billing.currentSubscription.subheading")}
- ({t('billing.currentSubscription.cancelDate')}{' '}
+ ({t("billing.currentSubscription.cancelDate")}{" "}
{data.subscription.cancelDate.toDateString()})
)}
- {data?.subscription?.status === 'past_due' && (
+ {data?.subscription?.status === "past_due" && (
)}
@@ -55,10 +55,10 @@ export const CurrentSubscriptionSummary = ({ workspace }: Props) => {
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/billing/components/FeaturesList.tsx b/apps/builder/src/features/billing/components/FeaturesList.tsx
index 11e2015d71..da4906a9e1 100644
--- a/apps/builder/src/features/billing/components/FeaturesList.tsx
+++ b/apps/builder/src/features/billing/components/FeaturesList.tsx
@@ -1,13 +1,13 @@
+import { CheckIcon } from "@/components/icons";
import {
- ListProps,
- UnorderedList,
Flex,
- ListItem,
ListIcon,
-} from '@chakra-ui/react'
-import { CheckIcon } from '@/components/icons'
+ ListItem,
+ type ListProps,
+ UnorderedList,
+} from "@chakra-ui/react";
-type FeaturesListProps = { features: (string | JSX.Element)[] } & ListProps
+type FeaturesListProps = { features: (string | JSX.Element)[] } & ListProps;
export const FeaturesList = ({ features, ...props }: FeaturesListProps) => (
@@ -18,4 +18,4 @@ export const FeaturesList = ({ features, ...props }: FeaturesListProps) => (
))}
-)
+);
diff --git a/apps/builder/src/features/billing/components/InvoicesList.tsx b/apps/builder/src/features/billing/components/InvoicesList.tsx
index 9c1e003c15..287e76742b 100644
--- a/apps/builder/src/features/billing/components/InvoicesList.tsx
+++ b/apps/builder/src/features/billing/components/InvoicesList.tsx
@@ -1,48 +1,48 @@
+import { DownloadIcon, FileIcon } from "@/components/icons";
+import { useToast } from "@/hooks/useToast";
+import { trpc } from "@/lib/trpc";
import {
- Stack,
- Heading,
Checkbox,
+ Heading,
+ IconButton,
Skeleton,
+ Stack,
Table,
TableContainer,
Tbody,
Td,
+ Text,
Th,
Thead,
Tr,
- IconButton,
- Text,
-} from '@chakra-ui/react'
-import { DownloadIcon, FileIcon } from '@/components/icons'
-import Link from 'next/link'
-import React from 'react'
-import { trpc } from '@/lib/trpc'
-import { useToast } from '@/hooks/useToast'
-import { useTranslate } from '@tolgee/react'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import Link from "next/link";
+import React from "react";
type Props = {
- workspaceId: string
-}
+ workspaceId: string;
+};
export const InvoicesList = ({ workspaceId }: Props) => {
- const { t } = useTranslate()
- const { showToast } = useToast()
+ const { t } = useTranslate();
+ const { showToast } = useToast();
const { data, status } = trpc.billing.listInvoices.useQuery(
{
workspaceId,
},
{
onError: (error) => {
- showToast({ description: error.message })
+ showToast({ description: error.message });
},
- }
- )
+ },
+ );
return (
- {t('billing.invoices.heading')}
- {data?.invoices.length === 0 && status !== 'loading' ? (
- {t('billing.invoices.empty')}
+ {t("billing.invoices.heading")}
+ {data?.invoices.length === 0 && status !== "loading" ? (
+ {t("billing.invoices.empty")}
) : (
@@ -50,8 +50,8 @@ export const InvoicesList = ({ workspaceId }: Props) => {
#
- {t('billing.invoices.paidAt')}
- {t('billing.invoices.subtotal')}
+ {t("billing.invoices.paidAt")}
+ {t("billing.invoices.subtotal")}
@@ -65,7 +65,7 @@ export const InvoicesList = ({ workspaceId }: Props) => {
{invoice.date
? new Date(invoice.date * 1000).toDateString()
- : ''}
+ : ""}
{getFormattedPrice(invoice.amount, invoice.currency)}
@@ -77,13 +77,13 @@ export const InvoicesList = ({ workspaceId }: Props) => {
variant="outline"
href={invoice.url}
target="_blank"
- aria-label={'Download invoice'}
+ aria-label={"Download invoice"}
/>
)}
))}
- {status === 'loading' &&
+ {status === "loading" &&
Array.from({ length: 3 }).map((_, idx) => (
@@ -102,14 +102,14 @@ export const InvoicesList = ({ workspaceId }: Props) => {
)}
- )
-}
+ );
+};
const getFormattedPrice = (amount: number, currency: string) => {
- const formatter = new Intl.NumberFormat('en-US', {
- style: 'currency',
+ const formatter = new Intl.NumberFormat("en-US", {
+ style: "currency",
currency,
- })
+ });
- return formatter.format(amount / 100)
-}
+ return formatter.format(amount / 100);
+};
diff --git a/apps/builder/src/features/billing/components/LockTag.tsx b/apps/builder/src/features/billing/components/LockTag.tsx
index 8b6a1711da..39c858bb9f 100644
--- a/apps/builder/src/features/billing/components/LockTag.tsx
+++ b/apps/builder/src/features/billing/components/LockTag.tsx
@@ -1,14 +1,14 @@
-import { Tag, TagProps } from '@chakra-ui/react'
-import { LockedIcon } from '@/components/icons'
-import { Plan } from '@typebot.io/prisma'
-import { planColorSchemes } from './PlanTag'
+import { LockedIcon } from "@/components/icons";
+import { Tag, type TagProps } from "@chakra-ui/react";
+import type { Plan } from "@typebot.io/prisma/enum";
+import { planColorSchemes } from "./PlanTag";
export const LockTag = ({ plan, ...props }: { plan?: Plan } & TagProps) => (
-)
+);
diff --git a/apps/builder/src/features/billing/components/PlanTag.tsx b/apps/builder/src/features/billing/components/PlanTag.tsx
index c4e4f171da..fbcd4fab37 100644
--- a/apps/builder/src/features/billing/components/PlanTag.tsx
+++ b/apps/builder/src/features/billing/components/PlanTag.tsx
@@ -1,15 +1,15 @@
-import { Tag, TagProps, ThemeTypings } from '@chakra-ui/react'
-import { Plan } from '@typebot.io/prisma'
+import { Tag, type TagProps, type ThemeTypings } from "@chakra-ui/react";
+import { Plan } from "@typebot.io/prisma/enum";
-export const planColorSchemes: Record = {
- [Plan.LIFETIME]: 'purple',
- [Plan.PRO]: 'blue',
- [Plan.OFFERED]: 'orange',
- [Plan.STARTER]: 'orange',
- [Plan.FREE]: 'gray',
- [Plan.CUSTOM]: 'yellow',
- [Plan.UNLIMITED]: 'yellow',
-}
+export const planColorSchemes: Record = {
+ [Plan.LIFETIME]: "purple",
+ [Plan.PRO]: "blue",
+ [Plan.OFFERED]: "orange",
+ [Plan.STARTER]: "orange",
+ [Plan.FREE]: "gray",
+ [Plan.CUSTOM]: "yellow",
+ [Plan.UNLIMITED]: "yellow",
+};
export const PlanTag = ({
plan,
@@ -25,7 +25,7 @@ export const PlanTag = ({
>
Lifetime
- )
+ );
}
case Plan.PRO: {
return (
@@ -36,7 +36,7 @@ export const PlanTag = ({
>
Pro
- )
+ );
}
case Plan.OFFERED:
case Plan.STARTER: {
@@ -48,7 +48,7 @@ export const PlanTag = ({
>
Starter
- )
+ );
}
case Plan.FREE: {
return (
@@ -59,7 +59,7 @@ export const PlanTag = ({
>
Free
- )
+ );
}
case Plan.CUSTOM: {
return (
@@ -70,7 +70,7 @@ export const PlanTag = ({
>
Custom
- )
+ );
}
case Plan.UNLIMITED: {
return (
@@ -81,7 +81,7 @@ export const PlanTag = ({
>
Unlimited
- )
+ );
}
}
-}
+};
diff --git a/apps/builder/src/features/billing/components/PreCheckoutModal.tsx b/apps/builder/src/features/billing/components/PreCheckoutModal.tsx
index 5b4c550c0b..7b974ad728 100644
--- a/apps/builder/src/features/billing/components/PreCheckoutModal.tsx
+++ b/apps/builder/src/features/billing/components/PreCheckoutModal.tsx
@@ -1,8 +1,8 @@
-import { TextInput } from '@/components/inputs'
-import { Select } from '@/components/inputs/Select'
-import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
-import { useToast } from '@/hooks/useToast'
-import { trpc } from '@/lib/trpc'
+import { TextInput } from "@/components/inputs";
+import { Select } from "@/components/inputs/Select";
+import { useParentModal } from "@/features/graph/providers/ParentModalProvider";
+import { useToast } from "@/hooks/useToast";
+import { trpc } from "@/lib/trpc";
import {
Button,
FormControl,
@@ -13,25 +13,26 @@ import {
ModalContent,
ModalOverlay,
Stack,
-} from '@chakra-ui/react'
-import { useRouter } from 'next/router'
-import React, { FormEvent, useState } from 'react'
-import { isDefined } from '@typebot.io/lib'
-import { useTranslate } from '@tolgee/react'
-import { taxIdTypes } from '@typebot.io/billing/taxIdTypes'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { taxIdTypes } from "@typebot.io/billing/taxIdTypes";
+import { isDefined } from "@typebot.io/lib/utils";
+import { useRouter } from "next/router";
+import type { FormEvent } from "react";
+import React, { useState } from "react";
export type PreCheckoutModalProps = {
selectedSubscription:
| {
- plan: 'STARTER' | 'PRO'
- workspaceId: string
- currency: 'eur' | 'usd'
+ plan: "STARTER" | "PRO";
+ workspaceId: string;
+ currency: "eur" | "usd";
}
- | undefined
- existingCompany?: string
- existingEmail?: string
- onClose: () => void
-}
+ | undefined;
+ existingCompany?: string;
+ existingEmail?: string;
+ onClose: () => void;
+};
const vatCodeLabels = taxIdTypes.map((taxIdType) => ({
label: `${taxIdType.emoji} ${taxIdType.name} (${taxIdType.code})`,
@@ -39,7 +40,7 @@ const vatCodeLabels = taxIdTypes.map((taxIdType) => ({
extras: {
placeholder: taxIdType.placeholder,
},
-}))
+}));
export const PreCheckoutModal = ({
selectedSubscription,
@@ -47,44 +48,44 @@ export const PreCheckoutModal = ({
existingEmail,
onClose,
}: PreCheckoutModalProps) => {
- const { t } = useTranslate()
- const { ref } = useParentModal()
- const vatValueInputRef = React.useRef(null)
- const router = useRouter()
- const { showToast } = useToast()
+ const { t } = useTranslate();
+ const { ref } = useParentModal();
+ const vatValueInputRef = React.useRef(null);
+ const router = useRouter();
+ const { showToast } = useToast();
const { mutate: createCheckoutSession, isLoading: isCreatingCheckout } =
trpc.billing.createCheckoutSession.useMutation({
onError: (error) => {
showToast({
description: error.message,
- })
+ });
},
onSuccess: ({ checkoutUrl }) => {
- router.push(checkoutUrl)
+ router.push(checkoutUrl);
},
- })
+ });
const [customer, setCustomer] = useState({
- company: existingCompany ?? '',
- email: existingEmail ?? '',
+ company: existingCompany ?? "",
+ email: existingEmail ?? "",
vat: {
type: undefined as string | undefined,
- value: '',
+ value: "",
},
- })
- const [vatValuePlaceholder, setVatValuePlaceholder] = useState('')
+ });
+ const [vatValuePlaceholder, setVatValuePlaceholder] = useState("");
const updateCustomerCompany = (company: string) => {
- setCustomer((customer) => ({ ...customer, company }))
- }
+ setCustomer((customer) => ({ ...customer, company }));
+ };
const updateCustomerEmail = (email: string) => {
- setCustomer((customer) => ({ ...customer, email }))
- }
+ setCustomer((customer) => ({ ...customer, email }));
+ };
const updateVatType = (
type: string | undefined,
- vatCode?: (typeof vatCodeLabels)[number]
+ vatCode?: (typeof vatCodeLabels)[number],
) => {
setCustomer((customer) => ({
...customer,
@@ -92,10 +93,10 @@ export const PreCheckoutModal = ({
...customer.vat,
type,
},
- }))
- setVatValuePlaceholder(vatCode?.extras?.placeholder ?? '')
- vatValueInputRef.current?.focus()
- }
+ }));
+ setVatValuePlaceholder(vatCode?.extras?.placeholder ?? "");
+ vatValueInputRef.current?.focus();
+ };
const updateVatValue = (value: string) => {
setCustomer((customer) => ({
@@ -104,13 +105,13 @@ export const PreCheckoutModal = ({
...customer.vat,
value,
},
- }))
- }
+ }));
+ };
const goToCheckout = (e: FormEvent) => {
- e.preventDefault()
- if (!selectedSubscription) return
- const { email, company, vat } = customer
+ e.preventDefault();
+ if (!selectedSubscription) return;
+ const { email, company, vat } = customer;
createCheckoutSession({
...selectedSubscription,
email,
@@ -120,8 +121,8 @@ export const PreCheckoutModal = ({
vat.value && vat.type
? { type: vat.type, value: vat.value }
: undefined,
- })
- }
+ });
+ };
return (
@@ -131,7 +132,7 @@ export const PreCheckoutModal = ({
- {t('billing.preCheckoutModal.taxId.label')}
+ {t("billing.preCheckoutModal.taxId.label")}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/billing/components/ProPlanPricingCard.tsx b/apps/builder/src/features/billing/components/ProPlanPricingCard.tsx
index aa336584b2..d50cedd2ff 100644
--- a/apps/builder/src/features/billing/components/ProPlanPricingCard.tsx
+++ b/apps/builder/src/features/billing/components/ProPlanPricingCard.tsx
@@ -1,30 +1,30 @@
+import { MoreInfoTooltip } from "@/components/MoreInfoTooltip";
import {
- Stack,
- Heading,
- chakra,
- HStack,
Button,
- Text,
- Tooltip,
Flex,
+ HStack,
+ Heading,
+ Stack,
Tag,
+ Text,
+ Tooltip,
+ chakra,
useColorModeValue,
useDisclosure,
-} from '@chakra-ui/react'
-import { Plan } from '@typebot.io/prisma'
-import { FeaturesList } from './FeaturesList'
-import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
-import { formatPrice } from '@typebot.io/billing/helpers/formatPrice'
-import { ChatsProTiersModal } from './ChatsProTiersModal'
-import { prices } from '@typebot.io/billing/constants'
-import { T, useTranslate } from '@tolgee/react'
+} from "@chakra-ui/react";
+import { T, useTranslate } from "@tolgee/react";
+import { prices } from "@typebot.io/billing/constants";
+import { formatPrice } from "@typebot.io/billing/helpers/formatPrice";
+import { Plan } from "@typebot.io/prisma/enum";
+import { ChatsProTiersModal } from "./ChatsProTiersModal";
+import { FeaturesList } from "./FeaturesList";
type Props = {
- currentPlan: Plan
- currency?: 'usd' | 'eur'
- isLoading: boolean
- onPayClick: () => void
-}
+ currentPlan: Plan;
+ currency?: "usd" | "eur";
+ isLoading: boolean;
+ onPayClick: () => void;
+};
export const ProPlanPricingCard = ({
currentPlan,
@@ -32,18 +32,18 @@ export const ProPlanPricingCard = ({
isLoading,
onPayClick,
}: Props) => {
- const { isOpen, onOpen, onClose } = useDisclosure()
- const { t } = useTranslate()
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const { t } = useTranslate();
const getButtonLabel = () => {
if (currentPlan === Plan.PRO)
- return t('billing.pricingCard.upgradeButton.current')
- return t('upgrade')
- }
+ return t("billing.pricingCard.upgradeButton.current");
+ return t("upgrade");
+ };
return (
<>
-
@@ -60,12 +60,12 @@ export const ProPlanPricingCard = ({
pos="absolute"
top="-10px"
colorScheme="blue"
- bg={useColorModeValue('blue.500', 'blue.400')}
+ bg={useColorModeValue("blue.500", "blue.400")}
variant="solid"
fontWeight="semibold"
style={{ marginTop: 0 }}
>
- {t('billing.pricingCard.pro.mostPopularLabel')}
+ {t("billing.pricingCard.pro.mostPopularLabel")}
@@ -76,7 +76,7 @@ export const ProPlanPricingCard = ({
params={{
strong: (
Pro
@@ -84,14 +84,14 @@ export const ProPlanPricingCard = ({
}}
/>
- {t('billing.pricingCard.pro.description')}
+ {t("billing.pricingCard.pro.description")}
{formatPrice(prices.PRO, { currency })}
- {t('billing.pricingCard.perMonth')}
+ {t("billing.pricingCard.perMonth")}
@@ -99,9 +99,9 @@ export const ProPlanPricingCard = ({
label={
- {t('billing.pricingCard.pro.everythingFromStarter')}
+ {t("billing.pricingCard.pro.everythingFromStarter")}
- {t('billing.pricingCard.plus')}
+ {t("billing.pricingCard.plus")}
- 10,000 {t('billing.pricingCard.chatsPerMonth')}
+ 10,000 {t("billing.pricingCard.chatsPerMonth")}
- {t('billing.pricingCard.chatsTooltip')}
+ {t("billing.pricingCard.chatsTooltip")}
- Extra chats:{' '}
+ Extra chats:{" "}
See tiers
,
- t('billing.pricingCard.pro.whatsAppIntegration'),
- t('billing.pricingCard.pro.customDomains'),
- t('billing.pricingCard.pro.analytics'),
+ t("billing.pricingCard.pro.whatsAppIntegration"),
+ t("billing.pricingCard.pro.customDomains"),
+ t("billing.pricingCard.pro.analytics"),
]}
/>
@@ -157,5 +157,5 @@ export const ProPlanPricingCard = ({
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx b/apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx
index 2ebdabcd95..b6d3ae32aa 100644
--- a/apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx
+++ b/apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx
@@ -1,25 +1,25 @@
+import { MoreInfoTooltip } from "@/components/MoreInfoTooltip";
import {
- Stack,
- Heading,
- chakra,
- HStack,
Button,
+ HStack,
+ Heading,
+ Stack,
Text,
+ chakra,
useColorModeValue,
-} from '@chakra-ui/react'
-import { Plan } from '@typebot.io/prisma'
-import { FeaturesList } from './FeaturesList'
-import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
-import { formatPrice } from '@typebot.io/billing/helpers/formatPrice'
-import { prices } from '@typebot.io/billing/constants'
-import { T, useTranslate } from '@tolgee/react'
+} from "@chakra-ui/react";
+import { T, useTranslate } from "@tolgee/react";
+import { prices } from "@typebot.io/billing/constants";
+import { formatPrice } from "@typebot.io/billing/helpers/formatPrice";
+import { Plan } from "@typebot.io/prisma/enum";
+import { FeaturesList } from "./FeaturesList";
type Props = {
- currentPlan: Plan
- currency?: 'eur' | 'usd'
- isLoading?: boolean
- onPayClick: () => void
-}
+ currentPlan: Plan;
+ currency?: "eur" | "usd";
+ isLoading?: boolean;
+ onPayClick: () => void;
+};
export const StarterPlanPricingCard = ({
currentPlan,
@@ -27,14 +27,14 @@ export const StarterPlanPricingCard = ({
currency,
onPayClick,
}: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const getButtonLabel = () => {
- if (currentPlan === Plan.PRO) return t('downgrade')
+ if (currentPlan === Plan.PRO) return t("downgrade");
if (currentPlan === Plan.STARTER)
- return t('billing.pricingCard.upgradeButton.current')
- return t('upgrade')
- }
+ return t("billing.pricingCard.upgradeButton.current");
+ return t("upgrade");
+ };
return (
{t('billing.pricingCard.starter.description')}
+ {t("billing.pricingCard.starter.description")}
{formatPrice(prices.STARTER, { currency })}
- {t('billing.pricingCard.perMonth')}
+ {t("billing.pricingCard.perMonth")}
- 2,000 {t('billing.pricingCard.chatsPerMonth')}
+ 2,000 {t("billing.pricingCard.chatsPerMonth")}
- {t('billing.pricingCard.chatsTooltip')}
+ {t("billing.pricingCard.chatsTooltip")}
Extra chats: $10 per 500
,
- t('billing.pricingCard.starter.brandingRemoved'),
- t('billing.pricingCard.starter.fileUploadBlock'),
- t('billing.pricingCard.starter.createFolders'),
- 'Direct priority support',
+ t("billing.pricingCard.starter.brandingRemoved"),
+ t("billing.pricingCard.starter.fileUploadBlock"),
+ t("billing.pricingCard.starter.createFolders"),
+ "Direct priority support",
]}
/>
@@ -102,5 +102,5 @@ export const StarterPlanPricingCard = ({
{getButtonLabel()}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/billing/components/StripeClimateLogo.tsx b/apps/builder/src/features/billing/components/StripeClimateLogo.tsx
index b51e79ddb8..932435f152 100644
--- a/apps/builder/src/features/billing/components/StripeClimateLogo.tsx
+++ b/apps/builder/src/features/billing/components/StripeClimateLogo.tsx
@@ -1,4 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const StripeClimateLogo = (props: IconProps) => (
(
fill="url(#StripeClimate-gradient-c)"
/>
-)
+);
diff --git a/apps/builder/src/features/billing/components/UpgradeButton.tsx b/apps/builder/src/features/billing/components/UpgradeButton.tsx
index 9b1d345be2..3311ee1ea8 100644
--- a/apps/builder/src/features/billing/components/UpgradeButton.tsx
+++ b/apps/builder/src/features/billing/components/UpgradeButton.tsx
@@ -1,23 +1,23 @@
-import { Button, ButtonProps, useDisclosure } from '@chakra-ui/react'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import React from 'react'
-import { isNotDefined } from '@typebot.io/lib'
-import { ChangePlanModal } from './ChangePlanModal'
-import { useTranslate } from '@tolgee/react'
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { Button, type ButtonProps, useDisclosure } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { isNotDefined } from "@typebot.io/lib/utils";
+import React from "react";
+import { ChangePlanModal } from "./ChangePlanModal";
type Props = {
- limitReachedType?: string
- excludedPlans?: ('STARTER' | 'PRO')[]
-} & ButtonProps
+ limitReachedType?: string;
+ excludedPlans?: ("STARTER" | "PRO")[];
+} & ButtonProps;
export const UpgradeButton = ({
limitReachedType,
excludedPlans,
...props
}: Props) => {
- const { t } = useTranslate()
- const { isOpen, onOpen, onClose } = useDisclosure()
- const { workspace } = useWorkspace()
+ const { t } = useTranslate();
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const { workspace } = useWorkspace();
return (
- {props.children ?? t('upgrade')}
+ {props.children ?? t("upgrade")}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/billing/components/UsageProgressBars.tsx b/apps/builder/src/features/billing/components/UsageProgressBars.tsx
index b3f454794a..49c6afd11b 100644
--- a/apps/builder/src/features/billing/components/UsageProgressBars.tsx
+++ b/apps/builder/src/features/billing/components/UsageProgressBars.tsx
@@ -1,49 +1,49 @@
+import { AlertIcon } from "@/components/icons";
+import type { WorkspaceInApp } from "@/features/workspace/WorkspaceProvider";
+import { defaultQueryOptions, trpc } from "@/lib/trpc";
import {
- Stack,
Flex,
+ HStack,
Heading,
Progress,
- Text,
Skeleton,
- HStack,
+ Stack,
+ Text,
Tooltip,
-} from '@chakra-ui/react'
-import { AlertIcon } from '@/components/icons'
-import { WorkspaceInApp } from '@/features/workspace/WorkspaceProvider'
-import { parseNumberWithCommas } from '@typebot.io/lib'
-import { defaultQueryOptions, trpc } from '@/lib/trpc'
-import { getChatsLimit } from '@typebot.io/billing/helpers/getChatsLimit'
-import { useTranslate } from '@tolgee/react'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { getChatsLimit } from "@typebot.io/billing/helpers/getChatsLimit";
+import { parseNumberWithCommas } from "@typebot.io/lib/utils";
type Props = {
- workspace: WorkspaceInApp
-}
+ workspace: WorkspaceInApp;
+};
export const UsageProgressBars = ({ workspace }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const { data, isLoading } = trpc.billing.getUsage.useQuery(
{
workspaceId: workspace.id,
},
- defaultQueryOptions
- )
- const totalChatsUsed = data?.totalChatsUsed ?? 0
+ defaultQueryOptions,
+ );
+ const totalChatsUsed = data?.totalChatsUsed ?? 0;
- const workspaceChatsLimit = getChatsLimit(workspace)
+ const workspaceChatsLimit = getChatsLimit(workspace);
const chatsPercentage =
- workspaceChatsLimit === 'inf'
+ workspaceChatsLimit === "inf"
? 0
- : Math.round((totalChatsUsed / workspaceChatsLimit) * 100)
+ : Math.round((totalChatsUsed / workspaceChatsLimit) * 100);
return (
- {t('billing.usage.heading')}
+ {t("billing.usage.heading")}
- {t('billing.usage.chats.heading')}
+ {t("billing.usage.chats.heading")}
{chatsPercentage >= 80 && (
{
p="3"
label={
- {t('billing.usage.chats.alert.soonReach')}
+ {t("billing.usage.chats.alert.soonReach")}
}
>
@@ -73,14 +73,14 @@ export const UsageProgressBars = ({ workspace }: Props) => {
{parseNumberWithCommas(totalChatsUsed)}
- /{' '}
- {workspaceChatsLimit === 'inf'
- ? t('billing.usage.unlimited')
+ /{" "}
+ {workspaceChatsLimit === "inf"
+ ? t("billing.usage.unlimited")
: parseNumberWithCommas(workspaceChatsLimit)}
@@ -91,9 +91,9 @@ export const UsageProgressBars = ({ workspace }: Props) => {
value={chatsPercentage}
rounded="full"
isIndeterminate={isLoading}
- colorScheme={'blue'}
+ colorScheme={"blue"}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/billing/helpers/hasProPerks.ts b/apps/builder/src/features/billing/helpers/hasProPerks.ts
index a0ed05b3d3..92a049f803 100644
--- a/apps/builder/src/features/billing/helpers/hasProPerks.ts
+++ b/apps/builder/src/features/billing/helpers/hasProPerks.ts
@@ -1,9 +1,10 @@
-import { isDefined } from '@typebot.io/lib'
-import { Workspace, Plan } from '@typebot.io/prisma'
+import { isDefined } from "@typebot.io/lib/utils";
+import { Plan } from "@typebot.io/prisma/enum";
+import type { Workspace } from "@typebot.io/workspaces/schemas";
-export const hasProPerks = (workspace?: Pick) =>
+export const hasProPerks = (workspace?: Pick) =>
isDefined(workspace) &&
(workspace.plan === Plan.PRO ||
workspace.plan === Plan.LIFETIME ||
workspace.plan === Plan.CUSTOM ||
- workspace.plan === Plan.UNLIMITED)
+ workspace.plan === Plan.UNLIMITED);
diff --git a/apps/builder/src/features/billing/helpers/isFreePlan.ts b/apps/builder/src/features/billing/helpers/isFreePlan.ts
index ba632f5584..ffa119708b 100644
--- a/apps/builder/src/features/billing/helpers/isFreePlan.ts
+++ b/apps/builder/src/features/billing/helpers/isFreePlan.ts
@@ -1,5 +1,6 @@
-import { isNotDefined } from '@typebot.io/lib'
-import { Workspace, Plan } from '@typebot.io/prisma'
+import { isNotDefined } from "@typebot.io/lib/utils";
+import { Plan } from "@typebot.io/prisma/enum";
+import type { Workspace } from "@typebot.io/workspaces/schemas";
-export const isFreePlan = (workspace?: Pick) =>
- isNotDefined(workspace) || workspace?.plan === Plan.FREE
+export const isFreePlan = (workspace?: Pick) =>
+ isNotDefined(workspace) || workspace?.plan === Plan.FREE;
diff --git a/apps/builder/src/features/billing/helpers/planToReadable.ts b/apps/builder/src/features/billing/helpers/planToReadable.ts
index b48bc18e17..d68cfb87d3 100644
--- a/apps/builder/src/features/billing/helpers/planToReadable.ts
+++ b/apps/builder/src/features/billing/helpers/planToReadable.ts
@@ -1,17 +1,17 @@
-import { Plan } from '@typebot.io/prisma'
+import { Plan } from "@typebot.io/prisma/enum";
export const planToReadable = (plan?: Plan) => {
- if (!plan) return
+ if (!plan) return;
switch (plan) {
case Plan.FREE:
- return 'Free'
+ return "Free";
case Plan.LIFETIME:
- return 'Lifetime'
+ return "Lifetime";
case Plan.OFFERED:
- return 'Offered'
+ return "Offered";
case Plan.PRO:
- return 'Pro'
+ return "Pro";
case Plan.UNLIMITED:
- return 'Unlimited'
+ return "Unlimited";
}
-}
+};
diff --git a/apps/builder/src/features/billing/helpers/storageToReadable.ts b/apps/builder/src/features/billing/helpers/storageToReadable.ts
index 6644ea5e5b..e7e0388e92 100644
--- a/apps/builder/src/features/billing/helpers/storageToReadable.ts
+++ b/apps/builder/src/features/billing/helpers/storageToReadable.ts
@@ -1,7 +1,9 @@
export const storageToReadable = (bytes: number) => {
- if (bytes == 0) {
- return '0'
+ if (bytes === 0) {
+ return "0";
}
- const e = Math.floor(Math.log(bytes) / Math.log(1024))
- return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B'
-}
+ const e = Math.floor(Math.log(bytes) / Math.log(1024));
+ return (
+ (bytes / Math.pow(1024, e)).toFixed(2) + " " + " KMGTP".charAt(e) + "B"
+ );
+};
diff --git a/apps/builder/src/features/blocks/bubbles/audio/audio.spec.ts b/apps/builder/src/features/blocks/bubbles/audio/audio.spec.ts
index 1eb59c256d..0831303364 100644
--- a/apps/builder/src/features/blocks/bubbles/audio/audio.spec.ts
+++ b/apps/builder/src/features/blocks/bubbles/audio/audio.spec.ts
@@ -1,16 +1,16 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { getTestAsset } from '@/test/utils/playwright'
-import { proWorkspaceId } from '@typebot.io/playwright/databaseSetup'
-import { BubbleBlockType } from '@typebot.io/schemas/features/blocks/bubbles/constants'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { BubbleBlockType } from "@typebot.io/blocks-bubbles/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
+import { proWorkspaceId } from "@typebot.io/playwright/databaseSetup";
const audioSampleUrl =
- 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
+ "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
-test('should work as expected', async ({ page }) => {
- const typebotId = createId()
+test("should work as expected", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -18,29 +18,29 @@ test('should work as expected', async ({ page }) => {
type: BubbleBlockType.AUDIO,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.getByText('Click to edit...').click()
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.getByText("Click to edit...").click();
await page
- .getByPlaceholder('Paste the audio file link...')
- .fill(audioSampleUrl)
- await expect(page.locator('audio')).toHaveAttribute('src', audioSampleUrl)
- await page.getByRole('button', { name: 'Upload' }).click()
- await page.setInputFiles('input[type="file"]', getTestAsset('sample.mp3'))
- await expect(page.locator('audio')).toHaveAttribute(
- 'src',
+ .getByPlaceholder("Paste the audio file link...")
+ .fill(audioSampleUrl);
+ await expect(page.locator("audio")).toHaveAttribute("src", audioSampleUrl);
+ await page.getByRole("button", { name: "Upload" }).click();
+ await page.setInputFiles('input[type="file"]', getTestAsset("sample.mp3"));
+ await expect(page.locator("audio")).toHaveAttribute(
+ "src",
RegExp(
`/public/workspaces/${proWorkspaceId}/typebots/${typebotId}/blocks`,
- 'gm'
- )
- )
- await page.getByRole('button', { name: 'Test', exact: true }).click()
- await expect(page.locator('audio')).toHaveAttribute(
- 'src',
+ "gm",
+ ),
+ );
+ await page.getByRole("button", { name: "Test", exact: true }).click();
+ await expect(page.locator("audio")).toHaveAttribute(
+ "src",
RegExp(
`/public/workspaces/${proWorkspaceId}/typebots/${typebotId}/blocks`,
- 'gm'
- )
- )
-})
+ "gm",
+ ),
+ );
+});
diff --git a/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleForm.tsx b/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleForm.tsx
index 83500d4dba..d6ca32b513 100644
--- a/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleForm.tsx
+++ b/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleForm.tsx
@@ -1,53 +1,53 @@
-import { Button, Flex, HStack, Stack, Text } from '@chakra-ui/react'
-import { TextInput } from '@/components/inputs'
-import { useState } from 'react'
-import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
-import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
-import { useTranslate } from '@tolgee/react'
-import { FilePathUploadProps } from '@/features/upload/api/generateUploadUrl'
-import { AudioBubbleBlock } from '@typebot.io/schemas'
-import { defaultAudioBubbleContent } from '@typebot.io/schemas/features/blocks/bubbles/audio/constants'
+import { UploadButton } from "@/components/ImageUploadContent/UploadButton";
+import { TextInput } from "@/components/inputs";
+import { SwitchWithLabel } from "@/components/inputs/SwitchWithLabel";
+import type { FilePathUploadProps } from "@/features/upload/api/generateUploadUrl";
+import { Button, Flex, HStack, Stack, Text } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { defaultAudioBubbleContent } from "@typebot.io/blocks-bubbles/audio/constants";
+import type { AudioBubbleBlock } from "@typebot.io/blocks-bubbles/audio/schema";
+import { useState } from "react";
type Props = {
- uploadFileProps: FilePathUploadProps
- content: AudioBubbleBlock['content']
- onContentChange: (content: AudioBubbleBlock['content']) => void
-}
+ uploadFileProps: FilePathUploadProps;
+ content: AudioBubbleBlock["content"];
+ onContentChange: (content: AudioBubbleBlock["content"]) => void;
+};
export const AudioBubbleForm = ({
uploadFileProps,
content,
onContentChange,
}: Props) => {
- const { t } = useTranslate()
- const [currentTab, setCurrentTab] = useState<'link' | 'upload'>('link')
+ const { t } = useTranslate();
+ const [currentTab, setCurrentTab] = useState<"link" | "upload">("link");
- const updateUrl = (url: string) => onContentChange({ ...content, url })
+ const updateUrl = (url: string) => onContentChange({ ...content, url });
const updateAutoPlay = (isAutoplayEnabled: boolean) =>
- onContentChange({ ...content, isAutoplayEnabled })
+ onContentChange({ ...content, isAutoplayEnabled });
return (
setCurrentTab('upload')}
+ variant={currentTab === "upload" ? "solid" : "ghost"}
+ onClick={() => setCurrentTab("upload")}
size="sm"
>
- {t('editor.blocks.bubbles.audio.settings.upload.label')}
+ {t("editor.blocks.bubbles.audio.settings.upload.label")}
setCurrentTab('link')}
+ variant={currentTab === "link" ? "solid" : "ghost"}
+ onClick={() => setCurrentTab("link")}
size="sm"
>
- {t('editor.blocks.bubbles.audio.settings.embedLink.label')}
+ {t("editor.blocks.bubbles.audio.settings.embedLink.label")}
- {currentTab === 'upload' && (
+ {currentTab === "upload" && (
- {t('editor.blocks.bubbles.audio.settings.chooseFile.label')}
+ {t("editor.blocks.bubbles.audio.settings.chooseFile.label")}
)}
- {currentTab === 'link' && (
+ {currentTab === "link" && (
<>
- {t('editor.blocks.bubbles.audio.settings.worksWith.text')}
+ {t("editor.blocks.bubbles.audio.settings.worksWith.text")}
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleIcon.tsx b/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleIcon.tsx
index bfcf98f80f..7e9d290b36 100644
--- a/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleIcon.tsx
+++ b/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleIcon.tsx
@@ -1,10 +1,10 @@
-import { featherIconsBaseProps } from '@/components/icons'
-import { Icon, IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { featherIconsBaseProps } from "@/components/icons";
+import { Icon, type IconProps } from "@chakra-ui/react";
+import React from "react";
export const AudioBubbleIcon = (props: IconProps) => (
-)
+);
diff --git a/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleNode.tsx b/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleNode.tsx
index a27546a1f1..0981e8c8a8 100644
--- a/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleNode.tsx
+++ b/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleNode.tsx
@@ -1,19 +1,19 @@
-import { chakra, Text } from '@chakra-ui/react'
-import { isDefined } from '@typebot.io/lib'
-import { useTranslate } from '@tolgee/react'
-import { AudioBubbleBlock } from '@typebot.io/schemas'
-import { findUniqueVariable } from '@typebot.io/variables/findUniqueVariableValue'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { VariableTag } from '@/features/graph/components/nodes/block/VariableTag'
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { VariableTag } from "@/features/graph/components/nodes/block/VariableTag";
+import { Text, chakra } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import type { AudioBubbleBlock } from "@typebot.io/blocks-bubbles/audio/schema";
+import { isDefined } from "@typebot.io/lib/utils";
+import { findUniqueVariable } from "@typebot.io/variables/findUniqueVariableValue";
type Props = {
- url: NonNullable['url']
-}
+ url: NonNullable["url"];
+};
export const AudioBubbleNode = ({ url }: Props) => {
- const { typebot } = useTypebot()
- const { t } = useTranslate()
- const variable = typebot ? findUniqueVariable(typebot?.variables)(url) : null
+ const { typebot } = useTypebot();
+ const { t } = useTranslate();
+ const variable = typebot ? findUniqueVariable(typebot?.variables)(url) : null;
return isDefined(url) ? (
variable ? (
@@ -23,6 +23,6 @@ export const AudioBubbleNode = ({ url }: Props) => {
{t('clickToEdit')}
- )
-}
+ {t("clickToEdit")}
+ );
+};
diff --git a/apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleContent.tsx b/apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleContent.tsx
index 6c1b288261..e3614b3b5d 100644
--- a/apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleContent.tsx
+++ b/apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleContent.tsx
@@ -1,21 +1,21 @@
-import { useTranslate } from '@tolgee/react'
-import { Stack, Text } from '@chakra-ui/react'
-import { EmbedBubbleBlock } from '@typebot.io/schemas'
-import { SetVariableLabel } from '@/components/SetVariableLabel'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { SetVariableLabel } from "@/components/SetVariableLabel";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { Stack, Text } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import type { EmbedBubbleBlock } from "@typebot.io/blocks-bubbles/embed/schema";
type Props = {
- block: EmbedBubbleBlock
-}
+ block: EmbedBubbleBlock;
+};
export const EmbedBubbleContent = ({ block }: Props) => {
- const { typebot } = useTypebot()
- const { t } = useTranslate()
+ const { typebot } = useTypebot();
+ const { t } = useTranslate();
if (!block.content?.url)
- return {t('clickToEdit')}
+ return {t("clickToEdit")} ;
return (
- {t('editor.blocks.bubbles.embed.node.show.text')}
+ {t("editor.blocks.bubbles.embed.node.show.text")}
{typebot &&
block.content.waitForEvent?.isEnabled &&
block.content.waitForEvent.saveDataInVariableId && (
@@ -25,5 +25,5 @@ export const EmbedBubbleContent = ({ block }: Props) => {
/>
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleIcon.tsx b/apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleIcon.tsx
index dc341222bf..1ff2a2028e 100644
--- a/apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleIcon.tsx
+++ b/apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleIcon.tsx
@@ -1,7 +1,7 @@
-import { LayoutIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { LayoutIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const EmbedBubbleIcon = (props: IconProps) => (
['height']
- ) => height && onSubmit({ ...content, height })
+ height?: NonNullable["height"],
+ ) => height && onSubmit({ ...content, height });
const updateWaitEventName = (name: string) =>
- onSubmit({ ...content, waitForEvent: { ...content?.waitForEvent, name } })
+ onSubmit({ ...content, waitForEvent: { ...content?.waitForEvent, name } });
const updateWaitForEventEnabled = (isEnabled: boolean) =>
onSubmit({
...content,
waitForEvent: { ...content?.waitForEvent, isEnabled },
- })
+ });
- const updateSaveDataInVariableId = (variable?: Pick) =>
+ const updateSaveDataInVariableId = (variable?: Pick) =>
onSubmit({
...content,
waitForEvent: {
...content?.waitForEvent,
saveDataInVariableId: variable?.id,
},
- })
+ });
return (
- {t('editor.blocks.bubbles.embed.settings.worksWith.text')}
+ {t("editor.blocks.bubbles.embed.settings.worksWith.text")}
@@ -62,7 +63,7 @@ export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
label="Height:"
defaultValue={content?.height ?? defaultEmbedBubbleContent.height}
onValueChange={handleHeightChange}
- suffix={t('editor.blocks.bubbles.embed.settings.numberInput.unit')}
+ suffix={t("editor.blocks.bubbles.embed.settings.numberInput.unit")}
direction="row"
/>
{
/>
- )
-}
+ );
+};
const extractUrlFromIframe = (iframe: string) =>
- [...iframe.matchAll(/src="([^"]+)"/g)][0][1]
+ [...iframe.matchAll(/src="([^"]+)"/g)][0][1];
diff --git a/apps/builder/src/features/blocks/bubbles/embed/embed.spec.ts b/apps/builder/src/features/blocks/bubbles/embed/embed.spec.ts
index 008b43dcfa..60af987286 100644
--- a/apps/builder/src/features/blocks/bubbles/embed/embed.spec.ts
+++ b/apps/builder/src/features/blocks/bubbles/embed/embed.spec.ts
@@ -1,54 +1,57 @@
-import test, { expect } from '@playwright/test'
-import { createId } from '@paralleldrive/cuid2'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { BubbleBlockType } from '@typebot.io/schemas/features/blocks/bubbles/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { BubbleBlockType } from "@typebot.io/blocks-bubbles/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-const pdfSrc = 'https://www.orimi.com/pdf-test.pdf'
-const siteSrc = 'https://app.cal.com/baptistearno/15min'
+const pdfSrc = "https://www.orimi.com/pdf-test.pdf";
+const siteSrc = "https://app.cal.com/baptistearno/15min";
-test.describe.parallel('Embed bubble block', () => {
- test.describe('Content settings', () => {
- test('should import and parse embed correctly', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: BubbleBlockType.EMBED,
- }),
- },
- ])
+test.describe
+ .parallel("Embed bubble block", () => {
+ test.describe("Content settings", () => {
+ test("should import and parse embed correctly", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: BubbleBlockType.EMBED,
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Click to edit...')
- await page.fill('input[placeholder="Paste the link or code..."]', pdfSrc)
- await expect(page.locator('text="Show embed"')).toBeVisible()
- })
- })
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Click to edit...");
+ await page.fill(
+ 'input[placeholder="Paste the link or code..."]',
+ pdfSrc,
+ );
+ await expect(page.locator('text="Show embed"')).toBeVisible();
+ });
+ });
- test.describe('Preview', () => {
- test('should display embed correctly', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: BubbleBlockType.EMBED,
- content: {
- url: siteSrc,
- height: 700,
- },
- }),
- },
- ])
+ test.describe("Preview", () => {
+ test("should display embed correctly", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: BubbleBlockType.EMBED,
+ content: {
+ url: siteSrc,
+ height: 700,
+ },
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Test')
- await expect(page.locator('iframe#embed-bubble-content')).toHaveAttribute(
- 'src',
- siteSrc
- )
- })
- })
-})
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Test");
+ await expect(
+ page.locator("iframe#embed-bubble-content"),
+ ).toHaveAttribute("src", siteSrc);
+ });
+ });
+ });
diff --git a/apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleContent.tsx b/apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleContent.tsx
index d363445c53..f9bec9de28 100644
--- a/apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleContent.tsx
+++ b/apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleContent.tsx
@@ -1,22 +1,22 @@
-import { useTranslate } from '@tolgee/react'
-import { Box, Text, Image } from '@chakra-ui/react'
-import { ImageBubbleBlock } from '@typebot.io/schemas'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { findUniqueVariable } from '@typebot.io/variables/findUniqueVariableValue'
-import { VariableTag } from '@/features/graph/components/nodes/block/VariableTag'
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { VariableTag } from "@/features/graph/components/nodes/block/VariableTag";
+import { Box, Image, Text } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import type { ImageBubbleBlock } from "@typebot.io/blocks-bubbles/image/schema";
+import { findUniqueVariable } from "@typebot.io/variables/findUniqueVariableValue";
type Props = {
- block: ImageBubbleBlock
-}
+ block: ImageBubbleBlock;
+};
export const ImageBubbleContent = ({ block }: Props) => {
- const { typebot } = useTypebot()
- const { t } = useTranslate()
+ const { typebot } = useTypebot();
+ const { t } = useTranslate();
const variable = typebot
? findUniqueVariable(typebot?.variables)(block.content?.url)
- : null
+ : null;
return !block.content?.url ? (
- {t('clickToEdit')}
+ {t("clickToEdit")}
) : variable ? (
Display
@@ -56,11 +56,11 @@ export const ImageBubbleSettings = ({
uploadFileProps={uploadFileProps}
defaultUrl={block.content?.url}
onSubmit={updateImage}
- excludedTabs={['emoji']}
+ excludedTabs={["emoji"]}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/bubbles/image/image.spec.ts b/apps/builder/src/features/blocks/bubbles/image/image.spec.ts
index 1e84c43549..ae8d20a3e0 100644
--- a/apps/builder/src/features/blocks/bubbles/image/image.spec.ts
+++ b/apps/builder/src/features/blocks/bubbles/image/image.spec.ts
@@ -1,123 +1,135 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { getTestAsset } from '@/test/utils/playwright'
-import { proWorkspaceId } from '@typebot.io/playwright/databaseSetup'
-import { BubbleBlockType } from '@typebot.io/schemas/features/blocks/bubbles/constants'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { BubbleBlockType } from "@typebot.io/blocks-bubbles/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
+import { proWorkspaceId } from "@typebot.io/playwright/databaseSetup";
const unsplashImageSrc =
- 'https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
+ "https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80";
-test.describe.parallel('Image bubble block', () => {
- test.describe('Content settings', () => {
- test('should upload image file correctly', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: BubbleBlockType.IMAGE,
- }),
- },
- ])
+test.describe
+ .parallel("Image bubble block", () => {
+ test.describe("Content settings", () => {
+ test("should upload image file correctly", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: BubbleBlockType.IMAGE,
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click('text=Click to edit...')
- await page.getByRole('button', { name: 'Upload' }).click()
- await page.setInputFiles('input[type="file"]', getTestAsset('avatar.jpg'))
- await expect(page.locator('img')).toHaveAttribute(
- 'src',
- new RegExp(
- `/public/workspaces/${proWorkspaceId}/typebots/${typebotId}/blocks/block2`,
- 'gm'
- )
- )
- })
+ await page.click("text=Click to edit...");
+ await page.getByRole("button", { name: "Upload" }).click();
+ await page.setInputFiles(
+ 'input[type="file"]',
+ getTestAsset("avatar.jpg"),
+ );
+ await expect(page.locator("img")).toHaveAttribute(
+ "src",
+ new RegExp(
+ `/public/workspaces/${proWorkspaceId}/typebots/${typebotId}/blocks/block2`,
+ "gm",
+ ),
+ );
+ });
- test('should import image link correctly', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: BubbleBlockType.IMAGE,
- }),
- },
- ])
+ test("should import image link correctly", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: BubbleBlockType.IMAGE,
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click('text=Click to edit...')
- await page.fill(
- 'input[placeholder="Paste the image link..."]',
- unsplashImageSrc
- )
- await expect(page.locator('img')).toHaveAttribute('src', unsplashImageSrc)
- })
+ await page.click("text=Click to edit...");
+ await page.fill(
+ 'input[placeholder="Paste the image link..."]',
+ unsplashImageSrc,
+ );
+ await expect(page.locator("img")).toHaveAttribute(
+ "src",
+ unsplashImageSrc,
+ );
+ });
- test('should import gifs correctly', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: BubbleBlockType.IMAGE,
- }),
- },
- ])
+ test("should import gifs correctly", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: BubbleBlockType.IMAGE,
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click('text=Click to edit...')
- await page.click('text=Giphy')
- const firstGiphyImage = page.locator('.giphy-gif-img >> nth=0')
- await expect(firstGiphyImage).toHaveAttribute(
- 'src',
- new RegExp('giphy.com/media', 'gm')
- )
- const trendingfirstImageSrc = await firstGiphyImage.getAttribute('src')
- expect(trendingfirstImageSrc).toMatch(new RegExp('giphy.com/media', 'gm'))
- await page.type('[placeholder="Search..."]', 'fun')
- await expect(page.locator('[placeholder="Search..."]')).toHaveValue('fun')
- await page.waitForTimeout(500)
- await expect(firstGiphyImage).toHaveAttribute(
- 'src',
- new RegExp('giphy.com/media', 'gm')
- )
- const funFirstImageSrc = await firstGiphyImage.getAttribute('src')
- expect(funFirstImageSrc).toMatch(new RegExp('giphy.com/media', 'gm'))
- expect(trendingfirstImageSrc).not.toBe(funFirstImageSrc)
- await firstGiphyImage.click({
- force: true,
- position: { x: 0, y: 0 },
- })
- await expect(page.locator('img[alt="Group image"]')).toHaveAttribute(
- 'src',
- new RegExp('giphy.com/media', 'gm')
- )
- })
- })
+ await page.click("text=Click to edit...");
+ await page.click("text=Giphy");
+ const firstGiphyImage = page.locator(".giphy-gif-img >> nth=0");
+ await expect(firstGiphyImage).toHaveAttribute(
+ "src",
+ /giphy.com\/media/gm,
+ );
+ const trendingfirstImageSrc = await firstGiphyImage.getAttribute("src");
+ expect(trendingfirstImageSrc).toMatch(/giphy.com\/media/gm);
+ await page.type('[placeholder="Search..."]', "fun");
+ await expect(page.locator('[placeholder="Search..."]')).toHaveValue(
+ "fun",
+ );
+ await page.waitForTimeout(500);
+ await expect(firstGiphyImage).toHaveAttribute(
+ "src",
+ /giphy.com\/media/gm,
+ );
+ const funFirstImageSrc = await firstGiphyImage.getAttribute("src");
+ expect(funFirstImageSrc).toMatch(/giphy.com\/media/gm);
+ expect(trendingfirstImageSrc).not.toBe(funFirstImageSrc);
+ await firstGiphyImage.click({
+ force: true,
+ position: { x: 0, y: 0 },
+ });
+ await expect(page.locator('img[alt="Group image"]')).toHaveAttribute(
+ "src",
+ /giphy.com\/media/gm,
+ );
+ });
+ });
- test.describe('Preview', () => {
- test('should display correctly', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: BubbleBlockType.IMAGE,
- content: {
- url: unsplashImageSrc,
- },
- }),
- },
- ])
+ test.describe("Preview", () => {
+ test("should display correctly", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: BubbleBlockType.IMAGE,
+ content: {
+ url: unsplashImageSrc,
+ },
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Test')
- await expect(page.locator('img')).toHaveAttribute('src', unsplashImageSrc)
- })
- })
-})
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Test");
+ await expect(page.locator("img")).toHaveAttribute(
+ "src",
+ unsplashImageSrc,
+ );
+ });
+ });
+ });
diff --git a/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleContent.tsx b/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleContent.tsx
index dac07335aa..fcc5a62ed0 100644
--- a/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleContent.tsx
+++ b/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleContent.tsx
@@ -1,25 +1,25 @@
-import { Flex } from '@chakra-ui/react'
-import { TextBubbleBlock } from '@typebot.io/schemas'
-import React from 'react'
-import { PlateBlock } from './plate/PlateBlock'
+import { Flex } from "@chakra-ui/react";
+import type { TextBubbleBlock } from "@typebot.io/blocks-bubbles/text/schema";
+import React from "react";
+import { PlateBlock } from "./plate/PlateBlock";
type Props = {
- block: TextBubbleBlock
-}
+ block: TextBubbleBlock;
+};
export const TextBubbleContent = ({ block }: Props) => {
- const isEmpty = (block.content?.richText?.length ?? 0) === 0
+ const isEmpty = (block.content?.richText?.length ?? 0) === 0;
return (
{block.content?.richText?.map((element, idx) => (
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx b/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx
index 474bc4db23..9bbd370d65 100644
--- a/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx
+++ b/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx
@@ -1,15 +1,15 @@
-import React, { useEffect, useRef } from 'react'
-import { Plate } from '@udecode/plate-core'
-import { platePlugins } from '@/lib/plate'
-import { TElement } from '@udecode/plate-common'
-import { TextEditorEditorContent } from './TextEditorEditorContent'
+import { platePlugins } from "@/lib/plate";
+import type { TElement } from "@udecode/plate-common";
+import { Plate } from "@udecode/plate-core";
+import React, { useEffect, useRef } from "react";
+import { TextEditorEditorContent } from "./TextEditorEditorContent";
type TextBubbleEditorContentProps = {
- id: string
- initialValue: TElement[]
- onChange: (newContent: TElement[]) => void
- onClose: () => void
-}
+ id: string;
+ initialValue: TElement[];
+ onChange: (newContent: TElement[]) => void;
+ onClose: () => void;
+};
export const TextBubbleEditor = ({
id,
@@ -17,18 +17,18 @@ export const TextBubbleEditor = ({
onChange,
onClose,
}: TextBubbleEditorContentProps) => {
- const textEditorValueRef = useRef(initialValue)
+ const textEditorValueRef = useRef(initialValue);
const setTextEditorValue = (newValue: TElement[]) => {
- textEditorValueRef.current = newValue
- }
+ textEditorValueRef.current = newValue;
+ };
useEffect(
() => () => {
- onChange(textEditorValueRef.current)
+ onChange(textEditorValueRef.current);
},
- [onChange]
- )
+ [onChange],
+ );
return (
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleIcon.tsx b/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleIcon.tsx
index 31859827c5..248b0ff9c2 100644
--- a/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleIcon.tsx
+++ b/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleIcon.tsx
@@ -1,7 +1,7 @@
-import { ChatIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { ChatIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const TextBubbleIcon = (props: IconProps) => (
(null)
- const rememberedSelection = useRef(null)
- const textEditorRef = useRef(null)
- const plateContentRef = useRef(null)
+ const varDropdownRef = useRef(null);
+ const rememberedSelection = useRef(null);
+ const textEditorRef = useRef(null);
+ const plateContentRef = useRef(null);
const handleVariableSelected = (variable?: Variable) => {
- setIsVariableDropdownOpen(false)
- if (!variable) return
- focusEditor(editor)
- insertText(editor, '{{' + variable.name + '}}')
- }
+ setIsVariableDropdownOpen(false);
+ if (!variable) return;
+ focusEditor(editor);
+ insertText(editor, "{{" + variable.name + "}}");
+ };
useOutsideClick({
ref: textEditorRef,
handler: closeEditor,
- })
+ });
const handleKeyDown = (e: React.KeyboardEvent) => {
- if (e.shiftKey) return
- if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) closeEditor()
- }
+ if (e.shiftKey) return;
+ if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) closeEditor();
+ };
const computeTargetCoord = useCallback(() => {
- if (rememberedSelection.current) return { top: 0, left: 0 }
- const selection = window.getSelection()
- const relativeParent = textEditorRef.current
- if (!selection || !relativeParent) return { top: 0, left: 0 }
- const range = selection.getRangeAt(0)
- const selectionBoundingRect = range.getBoundingClientRect()
- const relativeRect = relativeParent.getBoundingClientRect()
+ if (rememberedSelection.current) return { top: 0, left: 0 };
+ const selection = window.getSelection();
+ const relativeParent = textEditorRef.current;
+ if (!selection || !relativeParent) return { top: 0, left: 0 };
+ const range = selection.getRangeAt(0);
+ const selectionBoundingRect = range.getBoundingClientRect();
+ const relativeRect = relativeParent.getBoundingClientRect();
return {
top: selectionBoundingRect.bottom - relativeRect.top,
left: selectionBoundingRect.left - relativeRect.left,
- }
- }, [])
+ };
+ }, []);
useEffect(() => {
- if (!isVariableDropdownOpen) return
- const el = varDropdownRef.current
- if (!el) return
- const { top, left } = computeTargetCoord()
- if (top === 0 && left === 0) return
- el.style.top = `${top}px`
- el.style.left = `${left}px`
- }, [computeTargetCoord, isVariableDropdownOpen])
+ if (!isVariableDropdownOpen) return;
+ const el = varDropdownRef.current;
+ if (!el) return;
+ const { top, left } = computeTargetCoord();
+ if (top === 0 && left === 0) return;
+ el.style.top = `${top}px`;
+ el.style.left = `${left}px`;
+ }, [computeTargetCoord, isVariableDropdownOpen]);
return (
{
className="prevent-group-drag"
onContextMenuCapture={(e) => e.stopPropagation()}
sx={{
- '.slate-ToolbarButton-active': {
- color: useColorModeValue('blue.500', 'blue.300') + ' !important',
+ ".slate-ToolbarButton-active": {
+ color: useColorModeValue("blue.500", "blue.300") + " !important",
},
'[class^="PlateFloatingLink___Styled"]': {
- '--tw-bg-opacity': useColorModeValue('1', '.1') + '!important',
- backgroundColor: useColorModeValue('white', 'gray.800'),
- borderRadius: 'md',
- transitionProperty: 'background-color',
- transitionDuration: 'normal',
+ "--tw-bg-opacity": useColorModeValue("1", ".1") + "!important",
+ backgroundColor: useColorModeValue("white", "gray.800"),
+ borderRadius: "md",
+ transitionProperty: "background-color",
+ transitionDuration: "normal",
},
'[class^="FloatingVerticalDivider___"]': {
- '--tw-bg-opacity': useColorModeValue('1', '.4') + '!important',
+ "--tw-bg-opacity": useColorModeValue("1", ".4") + "!important",
},
- '.slate-a': {
- color: useColorModeValue('blue.500', 'blue.300'),
+ ".slate-a": {
+ color: useColorModeValue("blue.500", "blue.300"),
},
}}
>
@@ -110,23 +110,23 @@ export const TextEditorEditorContent = ({ closeEditor }: Props) => {
{
- setIsVariableDropdownOpen(false)
+ setIsVariableDropdownOpen(false);
}}
onFocus={() => {
- rememberedSelection.current = null
- if (!isFirstFocus || !editor) return
- if (editor.children.length === 0) return
+ rememberedSelection.current = null;
+ if (!isFirstFocus || !editor) return;
+ if (editor.children.length === 0) return;
selectEditor(editor, {
- edge: 'end',
- })
- setIsFirstFocus(false)
+ edge: "end",
+ });
+ setIsFirstFocus(false);
}}
onBlur={() => {
- if (!editor) return
- rememberedSelection.current = editor.selection
+ if (!editor) return;
+ rememberedSelection.current = editor.selection;
}}
aria-label="Text editor"
/>
@@ -140,7 +140,7 @@ export const TextEditorEditorContent = ({ closeEditor }: Props) => {
initialVariableId={undefined}
onSelectVariable={handleVariableSelected}
placeholder={t(
- 'editor.blocks.bubbles.textEditor.searchVariable.placeholder'
+ "editor.blocks.bubbles.textEditor.searchVariable.placeholder",
)}
autoFocus
/>
@@ -148,5 +148,5 @@ export const TextEditorEditorContent = ({ closeEditor }: Props) => {
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/bubbles/textBubble/components/TextEditorToolBar.tsx b/apps/builder/src/features/blocks/bubbles/textBubble/components/TextEditorToolBar.tsx
index e704dffd02..5ea204b4fd 100644
--- a/apps/builder/src/features/blocks/bubbles/textBubble/components/TextEditorToolBar.tsx
+++ b/apps/builder/src/features/blocks/bubbles/textBubble/components/TextEditorToolBar.tsx
@@ -1,44 +1,44 @@
import {
- StackProps,
+ BoldIcon,
+ ItalicIcon,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ LinkIcon,
+ UnderlineIcon,
+ UserIcon,
+} from "@/components/icons";
+import {
HStack,
IconButton,
+ type StackProps,
useColorModeValue,
-} from '@chakra-ui/react'
+} from "@chakra-ui/react";
import {
MARK_BOLD,
MARK_ITALIC,
MARK_UNDERLINE,
-} from '@udecode/plate-basic-marks'
-import { getPluginType, useEditorRef } from '@udecode/plate-core'
-import {
- BoldIcon,
- ItalicIcon,
- UnderlineIcon,
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- LinkIcon,
- UserIcon,
-} from '@/components/icons'
-import { MarkToolbarButton } from './plate/MarkToolbarButton'
-import { LinkToolbarButton } from './plate/LinkToolbarButton'
+} from "@udecode/plate-basic-marks";
+import { getPluginType, useEditorRef } from "@udecode/plate-core";
+import { LinkToolbarButton } from "./plate/LinkToolbarButton";
+import { MarkToolbarButton } from "./plate/MarkToolbarButton";
type Props = {
- onVariablesButtonClick: () => void
-} & StackProps
+ onVariablesButtonClick: () => void;
+} & StackProps;
export const TextEditorToolBar = ({
onVariablesButtonClick,
...props
}: Props) => {
- const editor = useEditorRef()
+ const editor = useEditorRef();
const handleVariablesButtonMouseDown = (e: React.MouseEvent) => {
- e.stopPropagation()
- e.preventDefault()
- onVariablesButtonClick()
- }
+ e.stopPropagation();
+ e.preventDefault();
+ onVariablesButtonClick();
+ };
return (
(null)
+ const bgColor = useColorModeValue("white", "gray.800");
+ const urlInputRef = useRef(null);
const insertState = useFloatingLinkInsertState({
...state,
floatingOptions: {
...floatingOptions,
...state?.floatingOptions,
},
- })
+ });
const {
props: insertProps,
ref: insertRef,
hidden,
textInputProps,
- } = useFloatingLinkInsert(insertState)
+ } = useFloatingLinkInsert(insertState);
const { props } = useFloatingLinkUrlInput({
ref: urlInputRef,
- })
+ });
const editState = useFloatingLinkEditState({
...state,
@@ -68,15 +68,15 @@ export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {
...floatingOptions,
...state?.floatingOptions,
},
- })
+ });
const {
props: editProps,
ref: editRef,
editButtonProps,
unlinkButtonProps,
- } = useFloatingLinkEdit(editState)
+ } = useFloatingLinkEdit(editState);
- if (hidden) return null
+ if (hidden) return null;
const input = (
- )
+ );
const editContent = editState.isEditing ? (
input
@@ -135,7 +135,7 @@ export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {
{...unlinkButtonProps}
/>
- )
+ );
return (
<>
@@ -147,5 +147,5 @@ export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {
{editContent}
- )
+ );
}
diff --git a/apps/builder/src/features/blocks/bubbles/textBubble/components/plate/LinkToolbarButton.tsx b/apps/builder/src/features/blocks/bubbles/textBubble/components/plate/LinkToolbarButton.tsx
index 2cf51393e2..5745435559 100644
--- a/apps/builder/src/features/blocks/bubbles/textBubble/components/plate/LinkToolbarButton.tsx
+++ b/apps/builder/src/features/blocks/bubbles/textBubble/components/plate/LinkToolbarButton.tsx
@@ -1,23 +1,23 @@
-import React from 'react'
-import { IconButton, IconButtonProps } from '@chakra-ui/react'
+import { IconButton, type IconButtonProps } from "@chakra-ui/react";
import {
useLinkToolbarButton,
useLinkToolbarButtonState,
-} from '@udecode/plate-link'
+} from "@udecode/plate-link";
+import React from "react";
-type Props = IconButtonProps
+type Props = IconButtonProps;
export const LinkToolbarButton = ({ ...rest }: Props) => {
- const state = useLinkToolbarButtonState()
- const { props } = useLinkToolbarButton(state)
+ const state = useLinkToolbarButtonState();
+ const { props } = useLinkToolbarButton(state);
return (
+
{(element.children as TDescendant[])?.map((child, idx) => (
- )
+ );
}
default: {
return (
@@ -21,7 +26,7 @@ export const PlateBlock = ({ element }: { element: TElement | TText }) => {
- )
- return
{str.trim().slice(0, -3)}
- )
+ );
}
return str.split(/\{\{(.*?\}\})/g).map((str, idx) => {
- if (str.endsWith('}}')) {
- const variableName = str.trim().slice(0, -2)
+ if (str.endsWith("}}")) {
+ const variableName = str.trim().slice(0, -2);
const matchingVariable = typebot?.variables.find(
- (variable) => variable.name === variableName
- )
- if (!matchingVariable) return '{{' + str
+ (variable) => variable.name === variableName,
+ );
+ if (!matchingVariable) return "{{" + str;
return (
{str.trim().slice(0, -2)}
- )
+ );
}
- return str
- })
+ return str;
+ });
})}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/bubbles/textBubble/textBubble.spec.ts b/apps/builder/src/features/blocks/bubbles/textBubble/textBubble.spec.ts
index 458ce4f8c6..62d3f7e329 100644
--- a/apps/builder/src/features/blocks/bubbles/textBubble/textBubble.spec.ts
+++ b/apps/builder/src/features/blocks/bubbles/textBubble/textBubble.spec.ts
@@ -1,12 +1,12 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { BubbleBlockType } from '@typebot.io/schemas/features/blocks/bubbles/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { BubbleBlockType } from "@typebot.io/blocks-bubbles/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-test.describe('Text bubble block', () => {
- test('rich text features should work', async ({ page }) => {
- const typebotId = createId()
+test.describe("Text bubble block", () => {
+ test("rich text features should work", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -14,54 +14,54 @@ test.describe('Text bubble block', () => {
type: BubbleBlockType.TEXT,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.getByTestId('block block2').locator('div').first().click()
- await page.click('[data-testid="bold-button"]')
- await page.type('div[role="textbox"]', 'Bold text')
- await page.press('div[role="textbox"]', 'Shift+Enter')
+ await page.getByTestId("block block2").locator("div").first().click();
+ await page.click('[data-testid="bold-button"]');
+ await page.type('div[role="textbox"]', "Bold text");
+ await page.press('div[role="textbox"]', "Shift+Enter");
- await page.click('[data-testid="bold-button"]')
- await page.click('[data-testid="italic-button"]')
- await page.type('div[role="textbox"]', 'Italic text')
- await page.press('div[role="textbox"]', 'Shift+Enter')
+ await page.click('[data-testid="bold-button"]');
+ await page.click('[data-testid="italic-button"]');
+ await page.type('div[role="textbox"]', "Italic text");
+ await page.press('div[role="textbox"]', "Shift+Enter");
- await page.click('[data-testid="underline-button"]')
- await page.click('[data-testid="italic-button"]')
- await page.type('div[role="textbox"]', 'Underlined text')
- await page.press('div[role="textbox"]', 'Shift+Enter')
+ await page.click('[data-testid="underline-button"]');
+ await page.click('[data-testid="italic-button"]');
+ await page.type('div[role="textbox"]', "Underlined text");
+ await page.press('div[role="textbox"]', "Shift+Enter");
- await page.click('[data-testid="bold-button"]')
- await page.click('[data-testid="italic-button"]')
- await page.type('div[role="textbox"]', 'Everything text')
- await page.press('div[role="textbox"]', 'Shift+Enter')
+ await page.click('[data-testid="bold-button"]');
+ await page.click('[data-testid="italic-button"]');
+ await page.type('div[role="textbox"]', "Everything text");
+ await page.press('div[role="textbox"]', "Shift+Enter");
- await page.type('div[role="textbox"]', 'My super link')
- await page.waitForTimeout(300)
- await page.press('div[role="textbox"]', 'Shift+Meta+ArrowLeft')
- await page.click('[data-testid="link-button"]')
- await page.fill('input[placeholder="Paste link"]', 'https://github.com')
- await page.press('input[placeholder="Paste link"]', 'Enter')
- await page.press('div[role="textbox"]', 'ArrowRight')
- await page.press('div[role="textbox"]', 'Shift+Enter')
- await page.click('button[aria-label="Insert variable"]')
- await page.fill('[data-testid="variables-input"]', 'test')
- await page.getByRole('menuitem', { name: 'Create test' }).click()
+ await page.type('div[role="textbox"]', "My super link");
+ await page.waitForTimeout(300);
+ await page.press('div[role="textbox"]', "Shift+Meta+ArrowLeft");
+ await page.click('[data-testid="link-button"]');
+ await page.fill('input[placeholder="Paste link"]', "https://github.com");
+ await page.press('input[placeholder="Paste link"]', "Enter");
+ await page.press('div[role="textbox"]', "ArrowRight");
+ await page.press('div[role="textbox"]', "Shift+Enter");
+ await page.click('button[aria-label="Insert variable"]');
+ await page.fill('[data-testid="variables-input"]', "test");
+ await page.getByRole("menuitem", { name: "Create test" }).click();
- await page.click('text=Test')
- await expect(page.locator('span.slate-bold >> nth=0')).toHaveText(
- 'Bold text'
- )
- await expect(page.locator('span.slate-italic >> nth=0')).toHaveText(
- 'Italic text'
- )
- await expect(page.locator('span.slate-underline >> nth=0')).toHaveText(
- 'Underlined text'
- )
+ await page.click("text=Test");
+ await expect(page.locator("span.slate-bold >> nth=0")).toHaveText(
+ "Bold text",
+ );
+ await expect(page.locator("span.slate-italic >> nth=0")).toHaveText(
+ "Italic text",
+ );
+ await expect(page.locator("span.slate-underline >> nth=0")).toHaveText(
+ "Underlined text",
+ );
await expect(
- page.locator('typebot-standard').locator('a[href="https://github.com"]')
- ).toHaveText('My super link')
- })
-})
+ page.locator("typebot-standard").locator('a[href="https://github.com"]'),
+ ).toHaveText("My super link");
+ });
+});
diff --git a/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx b/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx
index 807574a90e..e74d608440 100644
--- a/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx
+++ b/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx
@@ -1,30 +1,30 @@
-import { useTranslate } from '@tolgee/react'
-import { Box, Text } from '@chakra-ui/react'
-import { VideoBubbleBlock } from '@typebot.io/schemas'
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { VariableTag } from "@/features/graph/components/nodes/block/VariableTag";
+import { Box, Text } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
import {
VideoBubbleContentType,
embedBaseUrls,
-} from '@typebot.io/schemas/features/blocks/bubbles/video/constants'
-import { VariableTag } from '@/features/graph/components/nodes/block/VariableTag'
-import { findUniqueVariable } from '@typebot.io/variables/findUniqueVariableValue'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+} from "@typebot.io/blocks-bubbles/video/constants";
+import type { VideoBubbleBlock } from "@typebot.io/blocks-bubbles/video/schema";
+import { findUniqueVariable } from "@typebot.io/variables/findUniqueVariableValue";
type Props = {
- block: VideoBubbleBlock
-}
+ block: VideoBubbleBlock;
+};
export const VideoBubbleContent = ({ block }: Props) => {
- const { typebot } = useTypebot()
- const { t } = useTranslate()
+ const { typebot } = useTypebot();
+ const { t } = useTranslate();
if (!block.content?.url || !block.content.type)
- return {t('clickToEdit')}
+ return {t("clickToEdit")} ;
const variable = typebot
? findUniqueVariable(typebot?.variables)(block.content?.url)
- : null
+ : null;
switch (block.content.type) {
case VideoBubbleContentType.URL:
return (
-
+
{variable ? (
Display
- )
+ );
case VideoBubbleContentType.GUMLET:
case VideoBubbleContentType.VIMEO:
case VideoBubbleContentType.YOUTUBE: {
- const baseUrl = embedBaseUrls[block.content.type]
+ const baseUrl = embedBaseUrls[block.content.type];
return (
- )
+ );
}
case VideoBubbleContentType.TIKTOK: {
return (
@@ -74,17 +74,17 @@ export const VideoBubbleContent = ({ block }: Props) => {
- )
+ );
}
}
-}
+};
diff --git a/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleIcon.tsx b/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleIcon.tsx
index ccf87fd064..42a6777478 100644
--- a/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleIcon.tsx
+++ b/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleIcon.tsx
@@ -1,7 +1,7 @@
-import { FilmIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { FilmIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const VideoBubbleIcon = (props: IconProps) => (
(
- initialTab ?? displayedTabs[0]
- )
+ initialTab ?? displayedTabs[0],
+ );
const updateUrl = (url: string) => {
const {
@@ -47,10 +48,10 @@ export const VideoUploadContent = ({
url: matchedUrl,
id,
videoSizeSuggestion,
- } = parseVideoUrl(url)
- if (currentTab !== 'link') {
+ } = parseVideoUrl(url);
+ if (currentTab !== "link") {
// Allow user to update video settings after selection
- setCurrentTab('link')
+ setCurrentTab("link");
}
return onSubmit({
...content,
@@ -60,25 +61,25 @@ export const VideoUploadContent = ({
...(!content?.aspectRatio && !content?.maxWidth
? videoSizeSuggestion
: {}),
- })
- }
+ });
+ };
return (
- {displayedTabs.includes('link') && (
+ {displayedTabs.includes("link") && (
setCurrentTab('link')}
+ variant={currentTab === "link" ? "solid" : "ghost"}
+ onClick={() => setCurrentTab("link")}
size="sm"
>
Link
)}
- {displayedTabs.includes('pexels') && (
+ {displayedTabs.includes("pexels") && (
setCurrentTab('pexels')}
+ variant={currentTab === "pexels" ? "solid" : "ghost"}
+ onClick={() => setCurrentTab("pexels")}
size="sm"
>
Pexels
@@ -87,16 +88,16 @@ export const VideoUploadContent = ({
{/* Body content to be displayed below conditionally based on currentTab */}
- {currentTab === 'link' && (
+ {currentTab === "link" && (
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/bubbles/video/video.spec.ts b/apps/builder/src/features/blocks/bubbles/video/video.spec.ts
index d7d0047e06..5e7208d737 100644
--- a/apps/builder/src/features/blocks/bubbles/video/video.spec.ts
+++ b/apps/builder/src/features/blocks/bubbles/video/video.spec.ts
@@ -1,109 +1,113 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { BubbleBlockType } from '@typebot.io/schemas/features/blocks/bubbles/constants'
-import { VideoBubbleContentType } from '@typebot.io/schemas/features/blocks/bubbles/video/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { BubbleBlockType } from "@typebot.io/blocks-bubbles/constants";
+import { VideoBubbleContentType } from "@typebot.io/blocks-bubbles/video/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
const videoSrc =
- 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4'
-const youtubeVideoSrc = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-const vimeoVideoSrc = 'https://vimeo.com/649301125'
+ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4";
+const youtubeVideoSrc = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
+const vimeoVideoSrc = "https://vimeo.com/649301125";
-test.describe.parallel('Video bubble block', () => {
- test.describe('Content settings', () => {
- test('should import video url correctly', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: BubbleBlockType.VIDEO,
- }),
- },
- ])
+test.describe
+ .parallel("Video bubble block", () => {
+ test.describe("Content settings", () => {
+ test("should import video url correctly", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: BubbleBlockType.VIDEO,
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click('text=Click to edit...')
- await page.fill('input[placeholder="Paste the video link..."]', videoSrc)
- await expect(page.locator('video > source')).toHaveAttribute(
- 'src',
- videoSrc
- )
- })
- })
+ await page.click("text=Click to edit...");
+ await page.fill(
+ 'input[placeholder="Paste the video link..."]',
+ videoSrc,
+ );
+ await expect(page.locator("video > source")).toHaveAttribute(
+ "src",
+ videoSrc,
+ );
+ });
+ });
- test.describe('Preview', () => {
- test('should display video correctly', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: BubbleBlockType.VIDEO,
- content: {
- type: VideoBubbleContentType.URL,
- url: videoSrc,
- },
- }),
- },
- ])
+ test.describe("Preview", () => {
+ test("should display video correctly", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: BubbleBlockType.VIDEO,
+ content: {
+ type: VideoBubbleContentType.URL,
+ url: videoSrc,
+ },
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Test')
- await expect(page.locator('video').nth(1)).toHaveAttribute(
- 'src',
- videoSrc
- )
- })
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Test");
+ await expect(page.locator("video").nth(1)).toHaveAttribute(
+ "src",
+ videoSrc,
+ );
+ });
- test('should display youtube video correctly', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: BubbleBlockType.VIDEO,
- content: {
- type: VideoBubbleContentType.YOUTUBE,
- url: youtubeVideoSrc,
- id: 'dQw4w9WgXcQ',
- },
- }),
- },
- ])
+ test("should display youtube video correctly", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: BubbleBlockType.VIDEO,
+ content: {
+ type: VideoBubbleContentType.YOUTUBE,
+ url: youtubeVideoSrc,
+ id: "dQw4w9WgXcQ",
+ },
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Test')
- await expect(page.locator('iframe').nth(1)).toHaveAttribute(
- 'src',
- 'https://www.youtube.com/embed/dQw4w9WgXcQ'
- )
- })
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Test");
+ await expect(page.locator("iframe").nth(1)).toHaveAttribute(
+ "src",
+ "https://www.youtube.com/embed/dQw4w9WgXcQ",
+ );
+ });
- test('should display vimeo video correctly', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: BubbleBlockType.VIDEO,
- content: {
- type: VideoBubbleContentType.VIMEO,
- url: vimeoVideoSrc,
- id: '649301125',
- },
- }),
- },
- ])
+ test("should display vimeo video correctly", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: BubbleBlockType.VIDEO,
+ content: {
+ type: VideoBubbleContentType.VIMEO,
+ url: vimeoVideoSrc,
+ id: "649301125",
+ },
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Test')
- await expect(page.locator('iframe').nth(1)).toHaveAttribute(
- 'src',
- 'https://player.vimeo.com/video/649301125'
- )
- })
- })
-})
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Test");
+ await expect(page.locator("iframe").nth(1)).toHaveAttribute(
+ "src",
+ "https://player.vimeo.com/video/649301125",
+ );
+ });
+ });
+ });
diff --git a/apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts b/apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts
index f61757268e..64b93cda80 100644
--- a/apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts
@@ -1,103 +1,114 @@
-import test, { expect } from '@playwright/test'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
import {
createTypebots,
importTypebotInDatabase,
-} from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { getTestAsset } from '@/test/utils/playwright'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
+} from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-test.describe.parallel('Buttons input block', () => {
- test('can edit button items', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: InputBlockType.CHOICE,
- items: [
- {
- id: 'choice1',
- },
- ],
- }),
- },
- ])
+test.describe
+ .parallel("Buttons input block", () => {
+ test("can edit button items", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: InputBlockType.CHOICE,
+ items: [
+ {
+ id: "choice1",
+ },
+ ],
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.getByRole('textbox').last().fill('Item 1')
- await page.getByRole('textbox').last().press('Enter')
- await page.getByRole('textbox').last().fill('Item 2')
- await page.getByRole('textbox').last().press('Enter')
- await page.getByRole('textbox').last().fill('Item 3')
- await page.getByRole('textbox').last().press('Enter')
- await page.getByRole('textbox').last().press('Escape')
- await page.click('text=Item 2', { button: 'right' })
- await page.click('text=Delete')
- await expect(page.locator('text=Item 2')).toBeHidden()
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.getByRole("textbox").last().fill("Item 1");
+ await page.getByRole("textbox").last().press("Enter");
+ await page.getByRole("textbox").last().fill("Item 2");
+ await page.getByRole("textbox").last().press("Enter");
+ await page.getByRole("textbox").last().fill("Item 3");
+ await page.getByRole("textbox").last().press("Enter");
+ await page.getByRole("textbox").last().press("Escape");
+ await page.click("text=Item 2", { button: "right" });
+ await page.click("text=Delete");
+ await expect(page.locator("text=Item 2")).toBeHidden();
- await page.click('text=Test')
- await page.getByRole('button', { name: 'Item 3' }).click()
- await expect(page.getByRole('button', { name: 'Item 3' })).toBeHidden()
- await expect(page.getByTestId('guest-bubble')).toHaveText('Item 3')
- await page.click('button[aria-label="Close"]')
+ await page.click("text=Test");
+ await page.getByRole("button", { name: "Item 3" }).click();
+ await expect(page.getByRole("button", { name: "Item 3" })).toBeHidden();
+ await expect(page.getByTestId("guest-bubble")).toHaveText("Item 3");
+ await page.click('button[aria-label="Close"]');
- await page.getByTestId('block block2').click({ position: { x: 0, y: 0 } })
- await page.click('text=Multiple choice?')
- await page.getByLabel('Button label:').fill('Go')
- await page.getByPlaceholder('Select a variable').nth(1).click()
- await page.getByText('var1').click()
- await expect(page.getByText('Setvar1')).toBeVisible()
- await page.getByTestId('block block2').click({ position: { x: 0, y: 0 } })
+ await page
+ .getByTestId("block block2")
+ .click({ position: { x: 0, y: 0 } });
+ await page.click("text=Multiple choice?");
+ await page.getByLabel("Button label:").fill("Go");
+ await page.getByPlaceholder("Select a variable").nth(1).click();
+ await page.getByText("var1").click();
+ await expect(page.getByText("Setvar1")).toBeVisible();
+ await page
+ .getByTestId("block block2")
+ .click({ position: { x: 0, y: 0 } });
- await page.locator('span').filter({ hasText: 'Item 1' }).hover()
- await page.waitForTimeout(1000)
- await page.click('[aria-label="Add item"]')
- await page.getByTestId('block block2').getByRole('textbox').fill('Item 2')
- await page.getByTestId('block block2').getByRole('textbox').press('Enter')
+ await page.locator("span").filter({ hasText: "Item 1" }).hover();
+ await page.waitForTimeout(1000);
+ await page.click('[aria-label="Add item"]');
+ await page
+ .getByTestId("block block2")
+ .getByRole("textbox")
+ .fill("Item 2");
+ await page
+ .getByTestId("block block2")
+ .getByRole("textbox")
+ .press("Enter");
- await page.click('text=Test')
+ await page.click("text=Test");
- await page.getByRole('checkbox', { name: 'Item 3' }).click()
- await page.getByRole('checkbox', { name: 'Item 1' }).click()
- await page.locator('text=Go').click()
+ await page.getByRole("checkbox", { name: "Item 3" }).click();
+ await page.getByRole("checkbox", { name: "Item 1" }).click();
+ await page.locator("text=Go").click();
- await expect(page.locator('text="Item 3, Item 1"')).toBeVisible()
- })
-})
+ await expect(page.locator('text="Item 3, Item 1"')).toBeVisible();
+ });
+ });
-test('Variable buttons should work', async ({ page }) => {
- const typebotId = createId()
+test("Variable buttons should work", async ({ page }) => {
+ const typebotId = createId();
await importTypebotInDatabase(
- getTestAsset('typebots/inputs/variableButton.json'),
+ getTestAsset("typebots/inputs/variableButton.json"),
{
id: typebotId,
- }
- )
+ },
+ );
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Test')
- await page.getByRole('button', { name: 'Variable item' }).click()
- await expect(page.getByTestId('guest-bubble')).toHaveText('Variable item')
- await expect(page.locator('text=Ok great!')).toBeVisible()
- await page.click('text="Item 1"')
- await page.getByRole('textbox').last().fill('{{Item 2}}')
- await page.getByTestId('block block1').click({ position: { x: 0, y: 0 } })
- await page.click('text=Multiple choice?')
- await page.click('text="Restart"')
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Test");
+ await page.getByRole("button", { name: "Variable item" }).click();
+ await expect(page.getByTestId("guest-bubble")).toHaveText("Variable item");
+ await expect(page.locator("text=Ok great!")).toBeVisible();
+ await page.click('text="Item 1"');
+ await page.getByRole("textbox").last().fill("{{Item 2}}");
+ await page.getByTestId("block block1").click({ position: { x: 0, y: 0 } });
+ await page.click("text=Multiple choice?");
+ await page.click('text="Restart"');
await page
- .locator('typebot-standard')
- .getByRole('checkbox', { name: 'Variable item' })
+ .locator("typebot-standard")
+ .getByRole("checkbox", { name: "Variable item" })
.first()
- .click()
+ .click();
await page
- .locator('typebot-standard')
- .getByRole('checkbox', { name: 'Variable item' })
+ .locator("typebot-standard")
+ .getByRole("checkbox", { name: "Variable item" })
.nth(1)
- .click()
- await page.locator('text="Send"').click()
+ .click();
+ await page.locator('text="Send"').click();
await expect(
- page.locator('text="Variable item, Variable item"')
- ).toBeVisible()
-})
+ page.locator('text="Variable item, Variable item"'),
+ ).toBeVisible();
+});
diff --git a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockNode.tsx b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockNode.tsx
index 8cb72cd769..91edc3ba2d 100644
--- a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockNode.tsx
+++ b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockNode.tsx
@@ -1,32 +1,33 @@
-import { BlockIndices, ChoiceInputBlock } from '@typebot.io/schemas'
-import React from 'react'
-import { Stack, Tag, Text, Wrap } from '@chakra-ui/react'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { SetVariableLabel } from '@/components/SetVariableLabel'
-import { ItemNodesList } from '@/features/graph/components/nodes/item/ItemNodesList'
-import { useTranslate } from '@tolgee/react'
+import { SetVariableLabel } from "@/components/SetVariableLabel";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { ItemNodesList } from "@/features/graph/components/nodes/item/ItemNodesList";
+import { Stack, Tag, Text, Wrap } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import type { BlockIndices } from "@typebot.io/blocks-core/schemas/schema";
+import type { ChoiceInputBlock } from "@typebot.io/blocks-inputs/choice/schema";
+import React from "react";
type Props = {
- block: ChoiceInputBlock
- indices: BlockIndices
-}
+ block: ChoiceInputBlock;
+ indices: BlockIndices;
+};
export const ButtonsBlockNode = ({ block, indices }: Props) => {
- const { typebot } = useTypebot()
- const { t } = useTranslate()
+ const { typebot } = useTypebot();
+ const { t } = useTranslate();
const dynamicVariableName = typebot?.variables.find(
- (variable) => variable.id === block.options?.dynamicVariableId
- )?.name
+ (variable) => variable.id === block.options?.dynamicVariableId,
+ )?.name;
return (
{block.options?.dynamicVariableId ? (
- {t('blocks.inputs.button.variables.display.label')}
+ {t("blocks.inputs.button.variables.display.label")}
{dynamicVariableName}
- {t('blocks.inputs.button.variables.buttons.label')}
+ {t("blocks.inputs.button.variables.buttons.label")}
) : (
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockSettings.tsx b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockSettings.tsx
index bfc329f223..b0f7b533f5 100644
--- a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockSettings.tsx
@@ -1,37 +1,38 @@
-import { TextInput } from '@/components/inputs'
-import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
-import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
-import { FormControl, FormLabel, Stack } from '@chakra-ui/react'
-import { ChoiceInputBlock, Variable } from '@typebot.io/schemas'
-import React from 'react'
-import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
-import { defaultChoiceInputOptions } from '@typebot.io/schemas/features/blocks/inputs/choice/constants'
-import { useTranslate } from '@tolgee/react'
+import { MoreInfoTooltip } from "@/components/MoreInfoTooltip";
+import { SwitchWithRelatedSettings } from "@/components/SwitchWithRelatedSettings";
+import { TextInput } from "@/components/inputs";
+import { VariableSearchInput } from "@/components/inputs/VariableSearchInput";
+import { FormControl, FormLabel, Stack } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { defaultChoiceInputOptions } from "@typebot.io/blocks-inputs/choice/constants";
+import type { ChoiceInputBlock } from "@typebot.io/blocks-inputs/choice/schema";
+import type { Variable } from "@typebot.io/variables/schemas";
+import React from "react";
type Props = {
- options?: ChoiceInputBlock['options']
- onOptionsChange: (options: ChoiceInputBlock['options']) => void
-}
+ options?: ChoiceInputBlock["options"];
+ onOptionsChange: (options: ChoiceInputBlock["options"]) => void;
+};
export const ButtonsBlockSettings = ({ options, onOptionsChange }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const updateIsMultiple = (isMultipleChoice: boolean) =>
- onOptionsChange({ ...options, isMultipleChoice })
+ onOptionsChange({ ...options, isMultipleChoice });
const updateIsSearchable = (isSearchable: boolean) =>
- onOptionsChange({ ...options, isSearchable })
+ onOptionsChange({ ...options, isSearchable });
const updateButtonLabel = (buttonLabel: string) =>
- onOptionsChange({ ...options, buttonLabel })
+ onOptionsChange({ ...options, buttonLabel });
const updateSearchInputPlaceholder = (searchInputPlaceholder: string) =>
- onOptionsChange({ ...options, searchInputPlaceholder })
+ onOptionsChange({ ...options, searchInputPlaceholder });
const updateSaveVariable = (variable?: Variable) =>
- onOptionsChange({ ...options, variableId: variable?.id })
+ onOptionsChange({ ...options, variableId: variable?.id });
const updateDynamicDataVariable = (variable?: Variable) =>
- onOptionsChange({ ...options, dynamicVariableId: variable?.id })
+ onOptionsChange({ ...options, dynamicVariableId: variable?.id });
return (
{
onCheckChange={updateIsMultiple}
>
- {t('blocks.inputs.button.settings.dynamicData.label')}{' '}
+ {t("blocks.inputs.button.settings.dynamicData.label")}{" "}
- {t('blocks.inputs.button.settings.dynamicData.infoText.label')}
+ {t("blocks.inputs.button.settings.dynamicData.infoText.label")}
{
- {t('blocks.inputs.settings.saveAnswer.label')}
+ {t("blocks.inputs.settings.saveAnswer.label")}
{
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsIcon.tsx b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsIcon.tsx
index 9b27887777..83172bf448 100644
--- a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsIcon.tsx
+++ b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsIcon.tsx
@@ -1,7 +1,7 @@
-import { CheckSquareIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { CheckSquareIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const ButtonsInputIcon = (props: IconProps) => (
(null)
- const ref = useRef(null)
- const arrowColor = useColorModeValue('white', 'gray.800')
+ ? t("blocks.inputs.button.clickToEdit.label")
+ : ""),
+ );
+ const editableRef = useRef(null);
+ const ref = useRef(null);
+ const arrowColor = useColorModeValue("white", "gray.800");
- const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
+ const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation();
const handleInputSubmit = () => {
- if (itemValue === '') deleteItem(indices)
+ if (itemValue === "") deleteItem(indices);
else
updateItem(indices, {
- content: itemValue === '' ? undefined : itemValue,
- } as Item)
- }
+ content: itemValue === "" ? undefined : itemValue,
+ } as Item);
+ };
const handleKeyPress = async (e: React.KeyboardEvent) => {
if (
- e.key === 'Escape' &&
- (itemValue === t('blocks.inputs.button.clickToEdit.label') ||
- itemValue === '')
+ e.key === "Escape" &&
+ (itemValue === t("blocks.inputs.button.clickToEdit.label") ||
+ itemValue === "")
)
- deleteItem(indices)
+ deleteItem(indices);
if (
- e.key === 'Enter' &&
- itemValue !== '' &&
- itemValue !== t('blocks.inputs.button.clickToEdit.label')
+ e.key === "Enter" &&
+ itemValue !== "" &&
+ itemValue !== t("blocks.inputs.button.clickToEdit.label")
)
- handlePlusClick()
- }
+ handlePlusClick();
+ };
const handleEditableChange = (val: string) => {
- if (itemValue !== '') return setItemValue(val)
- const values = convertStrToList(val)
+ if (itemValue !== "") return setItemValue(val);
+ const values = convertStrToList(val);
if (values.length === 1) {
- setItemValue(values[0])
+ setItemValue(values[0]);
} else {
values.forEach((v, i) => {
createItem(
{ content: v },
- { ...indices, itemIndex: indices.itemIndex + i }
- )
- })
+ { ...indices, itemIndex: indices.itemIndex + i },
+ );
+ });
}
- }
+ };
const handlePlusClick = () => {
- const itemIndex = indices.itemIndex + 1
- createItem({}, { ...indices, itemIndex })
- }
+ const itemIndex = indices.itemIndex + 1;
+ createItem({}, { ...indices, itemIndex });
+ };
- const updateItemSettings = (settings: Omit) => {
- updateItem(indices, { ...item, ...settings })
- }
+ const updateItemSettings = (settings: Omit) => {
+ updateItem(indices, { ...item, ...settings });
+ };
return (
{
flex="1"
startWithEditView={
isEmpty(item.content) ||
- item.content === t('blocks.inputs.button.clickToEdit.label')
+ item.content === t("blocks.inputs.button.clickToEdit.label")
}
value={itemValue}
onChange={handleEditableChange}
@@ -118,9 +121,9 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
+
- )
-}
+ );
+};
const HitboxExtension = () => (
) => void
-}
+ item: ButtonItem;
+ onSettingsChange: (updates: Omit) => void;
+};
export const ButtonsItemSettings = ({ item, onSettingsChange }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const updateIsDisplayConditionEnabled = (isEnabled: boolean) =>
onSettingsChange({
@@ -21,7 +22,7 @@ export const ButtonsItemSettings = ({ item, onSettingsChange }: Props) => {
...item.displayCondition,
isEnabled,
},
- })
+ });
const updateDisplayCondition = (condition: Condition) =>
onSettingsChange({
@@ -30,14 +31,14 @@ export const ButtonsItemSettings = ({ item, onSettingsChange }: Props) => {
...item.displayCondition,
condition,
},
- })
+ });
return (
{
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/date/components/DateInputIcon.tsx b/apps/builder/src/features/blocks/inputs/date/components/DateInputIcon.tsx
index edc31117af..15494a0b85 100644
--- a/apps/builder/src/features/blocks/inputs/date/components/DateInputIcon.tsx
+++ b/apps/builder/src/features/blocks/inputs/date/components/DateInputIcon.tsx
@@ -1,7 +1,7 @@
-import { CalendarIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { CalendarIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const DateInputIcon = (props: IconProps) => (
{
: defaultDateInputOptions.format)
}
moreInfoTooltip={`
- ${t(
- 'blocks.inputs.date.settings.format.example.label'
- )} dd/MM/yyyy, MM/dd/yy, yyyy-MM-dd
+ ${t("blocks.inputs.date.settings.format.example.label")} dd/MM/yyyy, MM/dd/yy, yyyy-MM-dd
`}
- placeholder={options?.hasTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'}
+ placeholder={options?.hasTime ? "dd/MM/yyyy HH:mm" : "dd/MM/yyyy"}
onChange={updateFormat}
/>
- {t('blocks.inputs.settings.saveAnswer.label')}
+ {t("blocks.inputs.settings.saveAnswer.label")}
{
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/date/components/DateNodeContent.tsx b/apps/builder/src/features/blocks/inputs/date/components/DateNodeContent.tsx
index 3dfe4da290..dd2af297c7 100644
--- a/apps/builder/src/features/blocks/inputs/date/components/DateNodeContent.tsx
+++ b/apps/builder/src/features/blocks/inputs/date/components/DateNodeContent.tsx
@@ -1,14 +1,14 @@
-import React from 'react'
-import { Text } from '@chakra-ui/react'
-import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
+import { WithVariableContent } from "@/features/graph/components/nodes/block/WithVariableContent";
+import { Text } from "@chakra-ui/react";
+import React from "react";
type Props = {
- variableId?: string
-}
+ variableId?: string;
+};
export const DateNodeContent = ({ variableId }: Props) => {
return variableId ? (
Pick a date
- )
-}
+ Pick a date
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/date/date.spec.ts b/apps/builder/src/features/blocks/inputs/date/date.spec.ts
index 87d8fe65af..95f395b6fe 100644
--- a/apps/builder/src/features/blocks/inputs/date/date.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/date/date.spec.ts
@@ -1,12 +1,12 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-test.describe('Date input block', () => {
- test('options should work', async ({ page }) => {
- const typebotId = createId()
+test.describe("Date input block", () => {
+ test("options should work", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -14,50 +14,50 @@ test.describe('Date input block', () => {
type: InputBlockType.DATE,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click('text=Test')
+ await page.click("text=Test");
await expect(page.locator('[data-testid="from-date"]')).toHaveAttribute(
- 'type',
- 'date'
- )
- await page.locator('[data-testid="from-date"]').fill('2021-01-01')
- await page.getByLabel('Send').click()
- await expect(page.locator('text="01/01/2021"')).toBeVisible()
+ "type",
+ "date",
+ );
+ await page.locator('[data-testid="from-date"]').fill("2021-01-01");
+ await page.getByLabel("Send").click();
+ await expect(page.locator('text="01/01/2021"')).toBeVisible();
- await page.click(`text=Pick a date`)
- await page.click('text=Is range?')
- await page.click('text=With time?')
- await page.getByLabel('From label:').fill('Previous:')
- await page.getByLabel('To label:').fill('After:')
- await page.getByLabel('Button label:').fill('Go')
+ await page.click(`text=Pick a date`);
+ await page.click("text=Is range?");
+ await page.click("text=With time?");
+ await page.getByLabel("From label:").fill("Previous:");
+ await page.getByLabel("To label:").fill("After:");
+ await page.getByLabel("Button label:").fill("Go");
- await page.click('text=Restart')
+ await page.click("text=Restart");
await expect(page.locator(`[data-testid="from-date"]`)).toHaveAttribute(
- 'type',
- 'datetime-local'
- )
+ "type",
+ "datetime-local",
+ );
await expect(page.locator(`[data-testid="to-date"]`)).toHaveAttribute(
- 'type',
- 'datetime-local'
- )
- await page.locator('[data-testid="from-date"]').fill('2021-01-01T11:00')
- await page.locator('[data-testid="to-date"]').fill('2022-01-01T09:00')
- await page.getByRole('button', { name: 'Go' }).click()
+ "type",
+ "datetime-local",
+ );
+ await page.locator('[data-testid="from-date"]').fill("2021-01-01T11:00");
+ await page.locator('[data-testid="to-date"]').fill("2022-01-01T09:00");
+ await page.getByRole("button", { name: "Go" }).click();
await expect(
- page.locator('text="01/01/2021 11:00 to 01/01/2022 09:00"')
- ).toBeVisible()
+ page.locator('text="01/01/2021 11:00 to 01/01/2022 09:00"'),
+ ).toBeVisible();
- await page.click(`text=Pick a date`)
- await page.getByPlaceholder('dd/MM/yyyy HH:mm').fill('dd.MM HH:mm')
- await page.click('text=Restart')
- await page.locator('[data-testid="from-date"]').fill('2023-01-01T11:00')
- await page.locator('[data-testid="to-date"]').fill('2023-02-01T09:00')
- await page.getByRole('button', { name: 'Go' }).click()
+ await page.click(`text=Pick a date`);
+ await page.getByPlaceholder("dd/MM/yyyy HH:mm").fill("dd.MM HH:mm");
+ await page.click("text=Restart");
+ await page.locator('[data-testid="from-date"]').fill("2023-01-01T11:00");
+ await page.locator('[data-testid="to-date"]').fill("2023-02-01T09:00");
+ await page.getByRole("button", { name: "Go" }).click();
await expect(
- page.locator('text="01.01 11:00 to 01.02 09:00"')
- ).toBeVisible()
- })
-})
+ page.locator('text="01.01 11:00 to 01.02 09:00"'),
+ ).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputIcon.tsx b/apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputIcon.tsx
index 1d90b19888..a1518c6a10 100644
--- a/apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputIcon.tsx
+++ b/apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputIcon.tsx
@@ -1,7 +1,7 @@
-import { EmailIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { EmailIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const EmailInputIcon = (props: IconProps) => (
+
{labels?.placeholder ?? defaultEmailInputOptions.labels.placeholder}
- )
+ );
diff --git a/apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputSettings.tsx b/apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputSettings.tsx
index eddbafa0e5..0bc00fd88d 100644
--- a/apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputSettings.tsx
@@ -1,31 +1,35 @@
-import { TextInput } from '@/components/inputs'
-import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
-import { FormLabel, Stack } from '@chakra-ui/react'
-import { useTranslate } from '@tolgee/react'
-import { EmailInputBlock, Variable } from '@typebot.io/schemas'
-import { defaultEmailInputOptions } from '@typebot.io/schemas/features/blocks/inputs/email/constants'
-import React from 'react'
+import { TextInput } from "@/components/inputs";
+import { VariableSearchInput } from "@/components/inputs/VariableSearchInput";
+import { FormLabel, Stack } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { defaultEmailInputOptions } from "@typebot.io/blocks-inputs/email/constants";
+import type { EmailInputBlock } from "@typebot.io/blocks-inputs/email/schema";
+import type { Variable } from "@typebot.io/variables/schemas";
+import React from "react";
type Props = {
- options: EmailInputBlock['options']
- onOptionsChange: (options: EmailInputBlock['options']) => void
-}
+ options: EmailInputBlock["options"];
+ onOptionsChange: (options: EmailInputBlock["options"]) => void;
+};
export const EmailInputSettings = ({ options, onOptionsChange }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const handlePlaceholderChange = (placeholder: string) =>
- onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
+ onOptionsChange({
+ ...options,
+ labels: { ...options?.labels, placeholder },
+ });
const handleButtonLabelChange = (button: string) =>
- onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+ onOptionsChange({ ...options, labels: { ...options?.labels, button } });
const handleVariableChange = (variable?: Variable) =>
- onOptionsChange({ ...options, variableId: variable?.id })
+ onOptionsChange({ ...options, variableId: variable?.id });
const handleRetryMessageChange = (retryMessageContent: string) =>
- onOptionsChange({ ...options, retryMessageContent })
+ onOptionsChange({ ...options, retryMessageContent });
return (
{
onChange={handlePlaceholderChange}
/>
{
/>
- {t('blocks.inputs.settings.saveAnswer.label')}
+ {t("blocks.inputs.settings.saveAnswer.label")}
{
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/emailInput/emailInput.spec.ts b/apps/builder/src/features/blocks/inputs/emailInput/emailInput.spec.ts
index e071964d84..10ccf15809 100644
--- a/apps/builder/src/features/blocks/inputs/emailInput/emailInput.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/emailInput/emailInput.spec.ts
@@ -1,13 +1,13 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
-import { defaultEmailInputOptions } from '@typebot.io/schemas/features/blocks/inputs/email/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { defaultEmailInputOptions } from "@typebot.io/blocks-inputs/email/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-test.describe('Email input block', () => {
- test('options should work', async ({ page }) => {
- const typebotId = createId()
+test.describe("Email input block", () => {
+ test("options should work", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -15,37 +15,37 @@ test.describe('Email input block', () => {
type: InputBlockType.EMAIL,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click('text=Test')
+ await page.click("text=Test");
await expect(
page.locator(
- `input[placeholder="${defaultEmailInputOptions.labels.placeholder}"]`
- )
- ).toHaveAttribute('type', 'email')
+ `input[placeholder="${defaultEmailInputOptions.labels.placeholder}"]`,
+ ),
+ ).toHaveAttribute("type", "email");
- await page.click(`text=${defaultEmailInputOptions.labels.placeholder}`)
+ await page.click(`text=${defaultEmailInputOptions.labels.placeholder}`);
await page.fill(
`input[value="${defaultEmailInputOptions.labels.placeholder}"]`,
- 'Your email...'
- )
- await expect(page.locator('text=Your email...')).toBeVisible()
- await page.getByLabel('Button label:').fill('Go')
+ "Your email...",
+ );
+ await expect(page.locator("text=Your email...")).toBeVisible();
+ await page.getByLabel("Button label:").fill("Go");
await page.fill(
`input[value="${defaultEmailInputOptions.retryMessageContent}"]`,
- 'Try again bro'
- )
+ "Try again bro",
+ );
- await page.click('text=Restart')
- await page.locator(`input[placeholder="Your email..."]`).fill('test@test')
- await page.getByRole('button', { name: 'Go' }).click()
- await expect(page.locator('text=Try again bro')).toBeVisible()
+ await page.click("text=Restart");
+ await page.locator(`input[placeholder="Your email..."]`).fill("test@test");
+ await page.getByRole("button", { name: "Go" }).click();
+ await expect(page.locator("text=Try again bro")).toBeVisible();
await page
.locator(`input[placeholder="Your email..."]`)
- .fill('test@test.com')
- await page.getByRole('button', { name: 'Go' }).click()
- await expect(page.locator('text=test@test.com')).toBeVisible()
- })
-})
+ .fill("test@test.com");
+ await page.getByRole("button", { name: "Go" }).click();
+ await expect(page.locator("text=test@test.com")).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputContent.tsx b/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputContent.tsx
index e819dbe1d6..35c09572ff 100644
--- a/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputContent.tsx
+++ b/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputContent.tsx
@@ -1,22 +1,22 @@
-import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
-import { Text } from '@chakra-ui/react'
-import { useTranslate } from '@tolgee/react'
-import { FileInputBlock } from '@typebot.io/schemas'
+import { WithVariableContent } from "@/features/graph/components/nodes/block/WithVariableContent";
+import { Text } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import type { FileInputBlock } from "@typebot.io/blocks-inputs/file/schema";
type Props = {
- options: FileInputBlock['options']
-}
+ options: FileInputBlock["options"];
+};
export const FileInputContent = ({ options }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
return options?.variableId ? (
{options?.isMultipleAllowed
- ? t('blocks.inputs.file.collectMultiple.label')
- : t('blocks.inputs.file.collectSingle.label')}
+ ? t("blocks.inputs.file.collectMultiple.label")
+ : t("blocks.inputs.file.collectSingle.label")}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputIcon.tsx b/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputIcon.tsx
index a1d8009240..58d9d84251 100644
--- a/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputIcon.tsx
+++ b/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputIcon.tsx
@@ -1,7 +1,7 @@
-import { UploadIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { UploadIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const FileInputIcon = (props: IconProps) => (
{
/>
- {t('blocks.inputs.settings.placeholder.label')}
+ {t("blocks.inputs.settings.placeholder.label")}
{
options?.labels?.placeholder ??
defaultFileInputOptions.labels.placeholder
}
- height={'100px'}
+ height={"100px"}
withVariableButton={false}
/>
@@ -109,7 +113,7 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
{
/>
{options?.isMultipleAllowed && (
{
)}
{!(options?.isRequired ?? defaultFileInputOptions.isRequired) && (
{
{options?.isMultipleAllowed
- ? t('blocks.inputs.file.settings.saveMultipleUpload.label')
- : t('blocks.inputs.file.settings.saveSingleUpload.label')}
+ ? t("blocks.inputs.file.settings.saveMultipleUpload.label")
+ : t("blocks.inputs.file.settings.saveSingleUpload.label")}
{
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts b/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts
index 26ed08f239..a60831cea9 100644
--- a/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts
@@ -1,15 +1,15 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { freeWorkspaceId } from '@typebot.io/playwright/databaseSetup'
-import { getTestAsset } from '@/test/utils/playwright'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
+import { freeWorkspaceId } from "@typebot.io/playwright/databaseSetup";
-test.describe.configure({ mode: 'parallel' })
+test.describe.configure({ mode: "parallel" });
-test('options should work', async ({ page }) => {
- const typebotId = createId()
+test("options should work", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -17,65 +17,65 @@ test('options should work', async ({ page }) => {
type: InputBlockType.FILE,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click('text=Test')
- await expect(page.locator(`text=Click to upload`)).toBeVisible()
- await expect(page.locator(`text="Skip"`)).toBeHidden()
+ await page.click("text=Test");
+ await expect(page.locator(`text=Click to upload`)).toBeVisible();
+ await expect(page.locator(`text="Skip"`)).toBeHidden();
await page
.locator(`input[type="file"]`)
- .setInputFiles([getTestAsset('avatar.jpg')])
+ .setInputFiles([getTestAsset("avatar.jpg")]);
await expect(
- page.getByRole('img', { name: 'Attached image 1' })
- ).toBeVisible()
- await page.click('text="Collect file"')
- await page.click('text="Required?"')
- await page.click('text="Allow multiple files?"')
- await page.fill('div[contenteditable=true]', 'Upload now!! ')
- await page.click('text="Labels"')
- await page.fill('[value="Upload"]', 'Go')
- await page.fill('[value="Clear"]', 'Reset')
- await page.fill('[value="Skip"]', 'Pass')
- await page.click('text="Restart"')
- await expect(page.locator(`text="Pass"`)).toBeVisible()
- await expect(page.locator(`text="Upload now!!"`)).toBeVisible()
+ page.getByRole("img", { name: "Attached image 1" }),
+ ).toBeVisible();
+ await page.click('text="Collect file"');
+ await page.click('text="Required?"');
+ await page.click('text="Allow multiple files?"');
+ await page.fill("div[contenteditable=true]", "Upload now!! ");
+ await page.click('text="Labels"');
+ await page.fill('[value="Upload"]', "Go");
+ await page.fill('[value="Clear"]', "Reset");
+ await page.fill('[value="Skip"]', "Pass");
+ await page.click('text="Restart"');
+ await expect(page.locator(`text="Pass"`)).toBeVisible();
+ await expect(page.locator(`text="Upload now!!"`)).toBeVisible();
await page
.locator(`input[type="file"]`)
.setInputFiles([
- getTestAsset('avatar.jpg'),
- getTestAsset('avatar.jpg'),
- getTestAsset('avatar.jpg'),
- ])
- await expect(page.getByRole('img', { name: 'avatar.jpg' })).toHaveCount(3)
- await page.locator('text="Go"').click()
+ getTestAsset("avatar.jpg"),
+ getTestAsset("avatar.jpg"),
+ getTestAsset("avatar.jpg"),
+ ]);
+ await expect(page.getByRole("img", { name: "avatar.jpg" })).toHaveCount(3);
+ await page.locator('text="Go"').click();
await expect(
- page.getByRole('img', { name: 'Attached image 1' })
- ).toBeVisible()
-})
+ page.getByRole("img", { name: "Attached image 1" }),
+ ).toBeVisible();
+});
-test.describe('Free workspace', () => {
+test.describe("Free workspace", () => {
test("shouldn't be able to publish typebot", async ({ page }) => {
- const typebotId = createId()
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
...parseDefaultGroupWithBlock({
type: InputBlockType.FILE,
}),
- version: '6',
+ version: "6",
workspaceId: freeWorkspaceId,
},
- ])
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text="Collect file"')
- await page.click('text="Allow multiple files?"')
- await page.click('text="Publish"')
+ ]);
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click('text="Collect file"');
+ await page.click('text="Allow multiple files?"');
+ await page.click('text="Publish"');
await expect(
page.locator(
- 'text="You need to upgrade your plan in order to use file input blocks"'
- )
- ).toBeVisible()
- })
-})
+ 'text="You need to upgrade your plan in order to use file input blocks"',
+ ),
+ ).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/blocks/inputs/number/components/NumberInputIcon.tsx b/apps/builder/src/features/blocks/inputs/number/components/NumberInputIcon.tsx
index 497cb0717c..8e614722a6 100644
--- a/apps/builder/src/features/blocks/inputs/number/components/NumberInputIcon.tsx
+++ b/apps/builder/src/features/blocks/inputs/number/components/NumberInputIcon.tsx
@@ -1,7 +1,7 @@
-import { NumberIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { NumberIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const NumberInputIcon = (props: IconProps) => (
['min']
- ) => onOptionsChange({ ...options, min })
+ min?: NonNullable["min"],
+ ) => onOptionsChange({ ...options, min });
const handleMaxChange = (
- max?: NonNullable['max']
- ) => onOptionsChange({ ...options, max })
+ max?: NonNullable["max"],
+ ) => onOptionsChange({ ...options, max });
const handleStepChange = (
- step?: NonNullable['step']
- ) => onOptionsChange({ ...options, step })
+ step?: NonNullable["step"],
+ ) => onOptionsChange({ ...options, step });
const handleVariableChange = (variable?: Variable) => {
- onOptionsChange({ ...options, variableId: variable?.id })
- }
+ onOptionsChange({ ...options, variableId: variable?.id });
+ };
return (
{
onChange={handlePlaceholderChange}
/>
- {t('blocks.inputs.settings.saveAnswer.label')}
+ {t("blocks.inputs.settings.saveAnswer.label")}
{
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/number/components/NumberNodeContent.tsx b/apps/builder/src/features/blocks/inputs/number/components/NumberNodeContent.tsx
index f7f8e7a13c..c5ea72e6d6 100644
--- a/apps/builder/src/features/blocks/inputs/number/components/NumberNodeContent.tsx
+++ b/apps/builder/src/features/blocks/inputs/number/components/NumberNodeContent.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import { Text } from '@chakra-ui/react'
-import { NumberInputBlock } from '@typebot.io/schemas'
-import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
-import { defaultNumberInputOptions } from '@typebot.io/schemas/features/blocks/inputs/number/constants'
+import { WithVariableContent } from "@/features/graph/components/nodes/block/WithVariableContent";
+import { Text } from "@chakra-ui/react";
+import { defaultNumberInputOptions } from "@typebot.io/blocks-inputs/number/constants";
+import type { NumberInputBlock } from "@typebot.io/blocks-inputs/number/schema";
+import React from "react";
type Props = {
- options: NumberInputBlock['options']
-}
+ options: NumberInputBlock["options"];
+};
export const NumberNodeContent = ({
options: { variableId, labels } = {},
@@ -14,7 +14,7 @@ export const NumberNodeContent = ({
variableId ? (
+
{labels?.placeholder ?? defaultNumberInputOptions.labels.placeholder}
- )
+ );
diff --git a/apps/builder/src/features/blocks/inputs/number/number.spec.ts b/apps/builder/src/features/blocks/inputs/number/number.spec.ts
index 50f4900904..4b04d82029 100644
--- a/apps/builder/src/features/blocks/inputs/number/number.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/number/number.spec.ts
@@ -1,13 +1,13 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
-import { defaultNumberInputOptions } from '@typebot.io/schemas/features/blocks/inputs/number/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { defaultNumberInputOptions } from "@typebot.io/blocks-inputs/number/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-test.describe('Number input block', () => {
- test('options should work', async ({ page }) => {
- const typebotId = createId()
+test.describe("Number input block", () => {
+ test("options should work", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -15,33 +15,33 @@ test.describe('Number input block', () => {
type: InputBlockType.NUMBER,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click('text=Test')
+ await page.click("text=Test");
await expect(
page.locator(
- `input[placeholder="${defaultNumberInputOptions.labels.placeholder}"]`
- )
- ).toHaveAttribute('type', 'number')
+ `input[placeholder="${defaultNumberInputOptions.labels.placeholder}"]`,
+ ),
+ ).toHaveAttribute("type", "number");
- await page.click(`text=${defaultNumberInputOptions.labels.placeholder}`)
- await page.getByLabel('Placeholder:').fill('Your number...')
- await expect(page.locator('text=Your number...')).toBeVisible()
- await page.getByLabel('Button label:').fill('Go')
- await page.fill('[role="spinbutton"] >> nth=0', '0')
- await page.fill('[role="spinbutton"] >> nth=1', '100')
- await page.fill('[role="spinbutton"] >> nth=2', '10')
+ await page.click(`text=${defaultNumberInputOptions.labels.placeholder}`);
+ await page.getByLabel("Placeholder:").fill("Your number...");
+ await expect(page.locator("text=Your number...")).toBeVisible();
+ await page.getByLabel("Button label:").fill("Go");
+ await page.fill('[role="spinbutton"] >> nth=0', "0");
+ await page.fill('[role="spinbutton"] >> nth=1', "100");
+ await page.fill('[role="spinbutton"] >> nth=2', "10");
- await page.click('text=Restart')
- const input = page.locator(`input[placeholder="Your number..."]`)
- await input.fill('-1')
- await input.press('Enter')
- await input.fill('150')
- await input.press('Enter')
- await input.fill('50')
- await input.press('Enter')
- await expect(page.locator('text=50')).toBeVisible()
- })
-})
+ await page.click("text=Restart");
+ const input = page.locator(`input[placeholder="Your number..."]`);
+ await input.fill("-1");
+ await input.press("Enter");
+ await input.fill("150");
+ await input.press("Enter");
+ await input.fill("50");
+ await input.press("Enter");
+ await expect(page.locator("text=50")).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx b/apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx
index 3aaab7157e..3c79823685 100644
--- a/apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx
@@ -1,104 +1,104 @@
+import { TextInput } from "@/components/inputs";
import {
- Stack,
Accordion,
AccordionButton,
AccordionIcon,
AccordionItem,
AccordionPanel,
-} from '@chakra-ui/react'
-import React from 'react'
-import { TextInput } from '@/components/inputs'
-import { PaymentAddress } from '@typebot.io/schemas'
-import { useTranslate } from '@tolgee/react'
+ Stack,
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import type { PaymentAddress } from "@typebot.io/blocks-inputs/payment/schema";
+import React from "react";
type Props = {
- address: PaymentAddress
- onAddressChange: (address: PaymentAddress) => void
-}
+ address: PaymentAddress;
+ onAddressChange: (address: PaymentAddress) => void;
+};
export const PaymentAddressSettings = ({ address, onAddressChange }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const updateCountry = (country: string) =>
onAddressChange({
...address,
country,
- })
+ });
const updateLine1 = (line1: string) =>
onAddressChange({
...address,
line1,
- })
+ });
const updateLine2 = (line2: string) =>
onAddressChange({
...address,
line2,
- })
+ });
const updateCity = (city: string) =>
onAddressChange({
...address,
city,
- })
+ });
const updateState = (state: string) =>
onAddressChange({
...address,
state,
- })
+ });
const updatePostalCode = (postalCode: string) =>
onAddressChange({
...address,
postalCode,
- })
+ });
return (
- {t('blocks.inputs.payment.settings.address.label')}
+ {t("blocks.inputs.payment.settings.address.label")}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/payment/components/PaymentInputContent.tsx b/apps/builder/src/features/blocks/inputs/payment/components/PaymentInputContent.tsx
index a281694112..76652015d5 100644
--- a/apps/builder/src/features/blocks/inputs/payment/components/PaymentInputContent.tsx
+++ b/apps/builder/src/features/blocks/inputs/payment/components/PaymentInputContent.tsx
@@ -1,25 +1,25 @@
-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'
+import { Text } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { defaultPaymentInputOptions } from "@typebot.io/blocks-inputs/payment/constants";
+import type { PaymentInputBlock } from "@typebot.io/blocks-inputs/payment/schema";
type Props = {
- block: PaymentInputBlock
-}
+ block: PaymentInputBlock;
+};
export const PaymentInputContent = ({ block }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
if (!block.options?.amount || !block.options.credentialsId)
return (
- {t('blocks.inputs.payment.placeholder.label')}
+ {t("blocks.inputs.payment.placeholder.label")}
- )
+ );
return (
- {t('blocks.inputs.payment.collect.label')} {block.options.amount}{' '}
+ {t("blocks.inputs.payment.collect.label")} {block.options.amount}{" "}
{block.options.currency ?? defaultPaymentInputOptions.currency}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/payment/components/PaymentInputIcon.tsx b/apps/builder/src/features/blocks/inputs/payment/components/PaymentInputIcon.tsx
index 22438e63c5..b823ed7bf6 100644
--- a/apps/builder/src/features/blocks/inputs/payment/components/PaymentInputIcon.tsx
+++ b/apps/builder/src/features/blocks/inputs/payment/components/PaymentInputIcon.tsx
@@ -1,7 +1,7 @@
-import { CreditCardIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { CreditCardIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const PaymentInputIcon = (props: IconProps) => (
) =>
onOptionsChange({
...options,
currency: e.target.value,
- })
+ });
const updateName = (name: string) =>
onOptionsChange({
...options,
additionalInformation: { ...options?.additionalInformation, name },
- })
+ });
const updateEmail = (email: string) =>
onOptionsChange({
...options,
additionalInformation: { ...options?.additionalInformation, email },
- })
+ });
const updatePhoneNumber = (phoneNumber: string) =>
onOptionsChange({
...options,
additionalInformation: { ...options?.additionalInformation, phoneNumber },
- })
+ });
const updateButtonLabel = (button: string) =>
onOptionsChange({
...options,
labels: { ...options?.labels, button },
- })
+ });
const updateSuccessLabel = (success: string) =>
onOptionsChange({
...options,
labels: { ...options?.labels, success },
- })
+ });
const updateDescription = (description: string) =>
onOptionsChange({
...options,
additionalInformation: { ...options?.additionalInformation, description },
- })
+ });
const updateAddress = (address: PaymentAddress) =>
onOptionsChange({
...options,
additionalInformation: { ...options?.additionalInformation, address },
- })
+ });
return (
- {t('blocks.inputs.payment.settings.provider.label')}
+ {t("blocks.inputs.payment.settings.provider.label")}
{
/>
- {t('blocks.inputs.payment.settings.account.label')}
+ {t("blocks.inputs.payment.settings.account.label")}
{workspace && (
{
onCredentialsSelect={updateCredentials}
onCreateNewClick={onOpen}
credentialsName={t(
- 'blocks.inputs.payment.settings.accountText.label',
+ "blocks.inputs.payment.settings.accountText.label",
{
- provider: 'Stripe',
- }
+ provider: "Stripe",
+ },
)}
/>
)}
- {t('blocks.inputs.payment.settings.currency.label')}
+ {t("blocks.inputs.payment.settings.currency.label")}
{
{
- {t('blocks.inputs.payment.settings.additionalInformation.label')}
+ {t("blocks.inputs.payment.settings.additionalInformation.label")}
{
/>
{
/>
{
onNewCredentials={updateCredentials}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/payment/components/StripeConfigModal.tsx b/apps/builder/src/features/blocks/inputs/payment/components/StripeConfigModal.tsx
index b283f8ea65..f6779e0d88 100644
--- a/apps/builder/src/features/blocks/inputs/payment/components/StripeConfigModal.tsx
+++ b/apps/builder/src/features/blocks/inputs/payment/components/StripeConfigModal.tsx
@@ -1,35 +1,36 @@
+import { MoreInfoTooltip } from "@/components/MoreInfoTooltip";
+import { TextLink } from "@/components/TextLink";
+import { TextInput } from "@/components/inputs";
+import { useUser } from "@/features/account/hooks/useUser";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { useToast } from "@/hooks/useToast";
+import { trpc } from "@/lib/trpc";
import {
- Modal,
- ModalOverlay,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
Button,
FormControl,
FormLabel,
+ HStack,
+ Modal,
+ ModalBody,
+ ModalCloseButton,
+ ModalContent,
+ ModalFooter,
+ ModalHeader,
+ ModalOverlay,
Stack,
Text,
- HStack,
-} from '@chakra-ui/react'
-import React, { useState } from 'react'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { useToast } from '@/hooks/useToast'
-import { TextInput } from '@/components/inputs'
-import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
-import { TextLink } from '@/components/TextLink'
-import { StripeCredentials } from '@typebot.io/schemas'
-import { trpc } from '@/lib/trpc'
-import { isNotEmpty } from '@typebot.io/lib'
-import { useUser } from '@/features/account/hooks/useUser'
-import { useTranslate } from '@tolgee/react'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import type { StripeCredentials } from "@typebot.io/blocks-inputs/payment/schema";
+import { isNotEmpty } from "@typebot.io/lib/utils";
+import type React from "react";
+import { useState } from "react";
type Props = {
- isOpen: boolean
- onClose: () => void
- onNewCredentials: (id: string) => void
-}
+ isOpen: boolean;
+ onClose: () => void;
+ onNewCredentials: (id: string) => void;
+};
export const StripeConfigModal = ({
isOpen,
@@ -44,79 +45,79 @@ export const StripeConfigModal = ({
onClose={onClose}
/>
- )
-}
+ );
+};
export const StripeCreateModalContent = ({
onNewCredentials,
onClose,
-}: Pick) => {
- const { t } = useTranslate()
- const { user } = useUser()
- const { workspace } = useWorkspace()
- const [isCreating, setIsCreating] = useState(false)
- const { showToast } = useToast()
+}: Pick) => {
+ const { t } = useTranslate();
+ const { user } = useUser();
+ const { workspace } = useWorkspace();
+ const [isCreating, setIsCreating] = useState(false);
+ const { showToast } = useToast();
const [stripeConfig, setStripeConfig] = useState<
- StripeCredentials['data'] & { name: string }
+ StripeCredentials["data"] & { name: string }
>({
- name: '',
- live: { publicKey: '', secretKey: '' },
- test: { publicKey: '', secretKey: '' },
- })
+ name: "",
+ live: { publicKey: "", secretKey: "" },
+ test: { publicKey: "", secretKey: "" },
+ });
const {
credentials: {
listCredentials: { refetch: refetchCredentials },
},
- } = trpc.useContext()
+ } = trpc.useContext();
const { mutate } = trpc.credentials.createCredentials.useMutation({
onMutate: () => setIsCreating(true),
onSettled: () => setIsCreating(false),
onError: (err) => {
showToast({
description: err.message,
- status: 'error',
- })
+ status: "error",
+ });
},
onSuccess: (data) => {
- refetchCredentials()
- onNewCredentials(data.credentialsId)
- onClose()
+ refetchCredentials();
+ onNewCredentials(data.credentialsId);
+ onClose();
},
- })
+ });
const handleNameChange = (name: string) =>
setStripeConfig({
...stripeConfig,
name,
- })
+ });
const handlePublicKeyChange = (publicKey: string) =>
setStripeConfig({
...stripeConfig,
live: { ...stripeConfig.live, publicKey },
- })
+ });
const handleSecretKeyChange = (secretKey: string) =>
setStripeConfig({
...stripeConfig,
live: { ...stripeConfig.live, secretKey },
- })
+ });
const handleTestPublicKeyChange = (publicKey: string) =>
setStripeConfig({
...stripeConfig,
test: { ...stripeConfig.test, publicKey },
- })
+ });
const handleTestSecretKeyChange = (secretKey: string) =>
setStripeConfig({
...stripeConfig,
test: { ...stripeConfig.test, secretKey },
- })
+ });
const createCredentials = async (e: React.FormEvent) => {
- e.preventDefault()
- if (!user?.email || !workspace?.id) return
+ e.preventDefault();
+ if (!user?.email || !workspace?.id) return;
mutate({
credentials: {
data: {
@@ -131,16 +132,16 @@ export const StripeCreateModalContent = ({
},
},
name: stripeConfig.name,
- type: 'stripe',
+ type: "stripe",
workspaceId: workspace.id,
},
- })
- }
+ });
+ };
return (
- {t('blocks.inputs.payment.settings.stripeConfig.title.label')}
+ {t("blocks.inputs.payment.settings.stripeConfig.title.label")}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/payment/components/UpdateStripeCredentialsModalContent.tsx b/apps/builder/src/features/blocks/inputs/payment/components/UpdateStripeCredentialsModalContent.tsx
index 425d065f95..8e41de903d 100644
--- a/apps/builder/src/features/blocks/inputs/payment/components/UpdateStripeCredentialsModalContent.tsx
+++ b/apps/builder/src/features/blocks/inputs/payment/components/UpdateStripeCredentialsModalContent.tsx
@@ -1,43 +1,43 @@
-import { TextInput } from '@/components/inputs'
-import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
-import { TextLink } from '@/components/TextLink'
-import { useUser } from '@/features/account/hooks/useUser'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { trpc } from '@/lib/trpc'
+import { MoreInfoTooltip } from "@/components/MoreInfoTooltip";
+import { TextLink } from "@/components/TextLink";
+import { TextInput } from "@/components/inputs";
+import { useUser } from "@/features/account/hooks/useUser";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { trpc } from "@/lib/trpc";
import {
- Text,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- Stack,
+ Button,
+ FormControl,
FormLabel,
HStack,
- FormControl,
+ ModalBody,
+ ModalCloseButton,
+ ModalContent,
ModalFooter,
- Button,
-} from '@chakra-ui/react'
-import { useTranslate } from '@tolgee/react'
-import { isNotEmpty } from '@typebot.io/lib'
-import { StripeCredentials } from '@typebot.io/schemas'
-import { useEffect, useState } from 'react'
+ ModalHeader,
+ Stack,
+ Text,
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import type { StripeCredentials } from "@typebot.io/blocks-inputs/payment/schema";
+import { isNotEmpty } from "@typebot.io/lib/utils";
+import { useEffect, useState } from "react";
type Props = {
- credentialsId: string
- onUpdate: () => void
-}
+ credentialsId: string;
+ onUpdate: () => void;
+};
export const UpdateStripeCredentialsModalContent = ({
credentialsId,
onUpdate,
}: Props) => {
- const { t } = useTranslate()
- const { user } = useUser()
- const { workspace } = useWorkspace()
- const [isCreating, setIsCreating] = useState(false)
+ const { t } = useTranslate();
+ const { user } = useUser();
+ const { workspace } = useWorkspace();
+ const [isCreating, setIsCreating] = useState(false);
const [stripeConfig, setStripeConfig] = useState<
- StripeCredentials['data'] & { name: string }
- >()
+ StripeCredentials["data"] & { name: string }
+ >();
const { data: existingCredentials } =
trpc.credentials.getCredentials.useQuery(
@@ -47,64 +47,64 @@ export const UpdateStripeCredentialsModalContent = ({
},
{
enabled: !!workspace?.id,
- }
- )
+ },
+ );
useEffect(() => {
- if (!existingCredentials || stripeConfig) return
+ if (!existingCredentials || stripeConfig) return;
setStripeConfig({
name: existingCredentials.name,
live: existingCredentials.data.live,
test: existingCredentials.data.test,
- })
- }, [existingCredentials, stripeConfig])
+ });
+ }, [existingCredentials, stripeConfig]);
const { mutate } = trpc.credentials.updateCredentials.useMutation({
onMutate: () => setIsCreating(true),
onSettled: () => setIsCreating(false),
onSuccess: () => {
- onUpdate()
+ onUpdate();
},
- })
+ });
const handleNameChange = (name: string) =>
stripeConfig &&
setStripeConfig({
...stripeConfig,
name,
- })
+ });
const handlePublicKeyChange = (publicKey: string) =>
stripeConfig &&
setStripeConfig({
...stripeConfig,
live: { ...stripeConfig.live, publicKey },
- })
+ });
const handleSecretKeyChange = (secretKey: string) =>
stripeConfig &&
setStripeConfig({
...stripeConfig,
live: { ...stripeConfig.live, secretKey },
- })
+ });
const handleTestPublicKeyChange = (publicKey: string) =>
stripeConfig &&
setStripeConfig({
...stripeConfig,
test: { ...stripeConfig.test, publicKey },
- })
+ });
const handleTestSecretKeyChange = (secretKey: string) =>
stripeConfig &&
setStripeConfig({
...stripeConfig,
test: { ...stripeConfig.test, secretKey },
- })
+ });
const updateCreds = async (e: React.FormEvent) => {
- e.preventDefault()
- if (!user?.email || !workspace?.id || !stripeConfig) return
+ e.preventDefault();
+ if (!user?.email || !workspace?.id || !stripeConfig) return;
mutate({
credentialsId,
credentials: {
@@ -120,16 +120,16 @@ export const UpdateStripeCredentialsModalContent = ({
},
},
name: stripeConfig.name,
- type: 'stripe',
+ type: "stripe",
workspaceId: workspace.id,
},
- })
- }
+ });
+ };
return (
- {t('blocks.inputs.payment.settings.stripeConfig.title.label')}
+ {t("blocks.inputs.payment.settings.stripeConfig.title.label")}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/payment/currencies.tsx b/apps/builder/src/features/blocks/inputs/payment/currencies.tsx
index c185183d79..001c426502 100644
--- a/apps/builder/src/features/blocks/inputs/payment/currencies.tsx
+++ b/apps/builder/src/features/blocks/inputs/payment/currencies.tsx
@@ -3,543 +3,543 @@
export const currencies = [
{
- code: 'AED',
- description: 'United Arab Emirates Dirham',
+ code: "AED",
+ description: "United Arab Emirates Dirham",
},
{
- code: 'AFN',
- description: 'Afghan Afghani**',
+ code: "AFN",
+ description: "Afghan Afghani**",
},
{
- code: 'ALL',
- description: 'Albanian Lek',
+ code: "ALL",
+ description: "Albanian Lek",
},
{
- code: 'AMD',
- description: 'Armenian Dram',
+ code: "AMD",
+ description: "Armenian Dram",
},
{
- code: 'ANG',
- description: 'Netherlands Antillean Gulden',
+ code: "ANG",
+ description: "Netherlands Antillean Gulden",
},
{
- code: 'AOA',
- description: 'Angolan Kwanza**',
+ code: "AOA",
+ description: "Angolan Kwanza**",
},
{
- code: 'ARS',
- description: 'Argentine Peso**',
+ code: "ARS",
+ description: "Argentine Peso**",
},
{
- code: 'AUD',
- description: 'Australian Dollar',
+ code: "AUD",
+ description: "Australian Dollar",
},
{
- code: 'AWG',
- description: 'Aruban Florin',
+ code: "AWG",
+ description: "Aruban Florin",
},
{
- code: 'AZN',
- description: 'Azerbaijani Manat',
+ code: "AZN",
+ description: "Azerbaijani Manat",
},
{
- code: 'BAM',
- description: 'Bosnia & Herzegovina Convertible Mark',
+ code: "BAM",
+ description: "Bosnia & Herzegovina Convertible Mark",
},
{
- code: 'BBD',
- description: 'Barbadian Dollar',
+ code: "BBD",
+ description: "Barbadian Dollar",
},
{
- code: 'BDT',
- description: 'Bangladeshi Taka',
+ code: "BDT",
+ description: "Bangladeshi Taka",
},
{
- code: 'BGN',
- description: 'Bulgarian Lev',
+ code: "BGN",
+ description: "Bulgarian Lev",
},
{
- code: 'BIF',
- description: 'Burundian Franc',
+ code: "BIF",
+ description: "Burundian Franc",
},
{
- code: 'BMD',
- description: 'Bermudian Dollar',
+ code: "BMD",
+ description: "Bermudian Dollar",
},
{
- code: 'BND',
- description: 'Brunei Dollar',
+ code: "BND",
+ description: "Brunei Dollar",
},
{
- code: 'BOB',
- description: 'Bolivian Boliviano**',
+ code: "BOB",
+ description: "Bolivian Boliviano**",
},
{
- code: 'BRL',
- description: 'Brazilian Real**',
+ code: "BRL",
+ description: "Brazilian Real**",
},
{
- code: 'BSD',
- description: 'Bahamian Dollar',
+ code: "BSD",
+ description: "Bahamian Dollar",
},
{
- code: 'BWP',
- description: 'Botswana Pula',
+ code: "BWP",
+ description: "Botswana Pula",
},
{
- code: 'BZD',
- description: 'Belize Dollar',
+ code: "BZD",
+ description: "Belize Dollar",
},
{
- code: 'CAD',
- description: 'Canadian Dollar',
+ code: "CAD",
+ description: "Canadian Dollar",
},
{
- code: 'CDF',
- description: 'Congolese Franc',
+ code: "CDF",
+ description: "Congolese Franc",
},
{
- code: 'CHF',
- description: 'Swiss Franc',
+ code: "CHF",
+ description: "Swiss Franc",
},
{
- code: 'CLP',
- description: 'Chilean Peso**',
+ code: "CLP",
+ description: "Chilean Peso**",
},
{
- code: 'CNY',
- description: 'Chinese Renminbi Yuan',
+ code: "CNY",
+ description: "Chinese Renminbi Yuan",
},
{
- code: 'COP',
- description: 'Colombian Peso**',
+ code: "COP",
+ description: "Colombian Peso**",
},
{
- code: 'CRC',
- description: 'Costa Rican Colón**',
+ code: "CRC",
+ description: "Costa Rican Colón**",
},
{
- code: 'CVE',
- description: 'Cape Verdean Escudo**',
+ code: "CVE",
+ description: "Cape Verdean Escudo**",
},
{
- code: 'CZK',
- description: 'Czech Koruna**',
+ code: "CZK",
+ description: "Czech Koruna**",
},
{
- code: 'DJF',
- description: 'Djiboutian Franc**',
+ code: "DJF",
+ description: "Djiboutian Franc**",
},
{
- code: 'DKK',
- description: 'Danish Krone',
+ code: "DKK",
+ description: "Danish Krone",
},
{
- code: 'DOP',
- description: 'Dominican Peso',
+ code: "DOP",
+ description: "Dominican Peso",
},
{
- code: 'DZD',
- description: 'Algerian Dinar',
+ code: "DZD",
+ description: "Algerian Dinar",
},
{
- code: 'EGP',
- description: 'Egyptian Pound',
+ code: "EGP",
+ description: "Egyptian Pound",
},
{
- code: 'ETB',
- description: 'Ethiopian Birr',
+ code: "ETB",
+ description: "Ethiopian Birr",
},
{
- code: 'EUR',
- description: 'Euro',
+ code: "EUR",
+ description: "Euro",
},
{
- code: 'FJD',
- description: 'Fijian Dollar',
+ code: "FJD",
+ description: "Fijian Dollar",
},
{
- code: 'FKP',
- description: 'Falkland Islands Pound**',
+ code: "FKP",
+ description: "Falkland Islands Pound**",
},
{
- code: 'GBP',
- description: 'British Pound',
+ code: "GBP",
+ description: "British Pound",
},
{
- code: 'GEL',
- description: 'Georgian Lari',
+ code: "GEL",
+ description: "Georgian Lari",
},
{
- code: 'GIP',
- description: 'Gibraltar Pound',
+ code: "GIP",
+ description: "Gibraltar Pound",
},
{
- code: 'GMD',
- description: 'Gambian Dalasi',
+ code: "GMD",
+ description: "Gambian Dalasi",
},
{
- code: 'GNF',
- description: 'Guinean Franc**',
+ code: "GNF",
+ description: "Guinean Franc**",
},
{
- code: 'GTQ',
- description: 'Guatemalan Quetzal**',
+ code: "GTQ",
+ description: "Guatemalan Quetzal**",
},
{
- code: 'GYD',
- description: 'Guyanese Dollar',
+ code: "GYD",
+ description: "Guyanese Dollar",
},
{
- code: 'HKD',
- description: 'Hong Kong Dollar',
+ code: "HKD",
+ description: "Hong Kong Dollar",
},
{
- code: 'HNL',
- description: 'Honduran Lempira**',
+ code: "HNL",
+ description: "Honduran Lempira**",
},
{
- code: 'HRK',
- description: 'Croatian Kuna',
+ code: "HRK",
+ description: "Croatian Kuna",
},
{
- code: 'HTG',
- description: 'Haitian Gourde',
+ code: "HTG",
+ description: "Haitian Gourde",
},
{
- code: 'HUF',
- description: 'Hungarian Forint**',
+ code: "HUF",
+ description: "Hungarian Forint**",
},
{
- code: 'IDR',
- description: 'Indonesian Rupiah',
+ code: "IDR",
+ description: "Indonesian Rupiah",
},
{
- code: 'ILS',
- description: 'Israeli New Sheqel',
+ code: "ILS",
+ description: "Israeli New Sheqel",
},
{
- code: 'INR',
- description: 'Indian Rupee**',
+ code: "INR",
+ description: "Indian Rupee**",
},
{
- code: 'ISK',
- description: 'Icelandic Króna',
+ code: "ISK",
+ description: "Icelandic Króna",
},
{
- code: 'JMD',
- description: 'Jamaican Dollar',
+ code: "JMD",
+ description: "Jamaican Dollar",
},
{
- code: 'JPY',
- description: 'Japanese Yen',
+ code: "JPY",
+ description: "Japanese Yen",
},
{
- code: 'KES',
- description: 'Kenyan Shilling',
+ code: "KES",
+ description: "Kenyan Shilling",
},
{
- code: 'KGS',
- description: 'Kyrgyzstani Som',
+ code: "KGS",
+ description: "Kyrgyzstani Som",
},
{
- code: 'KHR',
- description: 'Cambodian Riel',
+ code: "KHR",
+ description: "Cambodian Riel",
},
{
- code: 'KMF',
- description: 'Comorian Franc',
+ code: "KMF",
+ description: "Comorian Franc",
},
{
- code: 'KRW',
- description: 'South Korean Won',
+ code: "KRW",
+ description: "South Korean Won",
},
{
- code: 'KYD',
- description: 'Cayman Islands Dollar',
+ code: "KYD",
+ description: "Cayman Islands Dollar",
},
{
- code: 'KZT',
- description: 'Kazakhstani Tenge',
+ code: "KZT",
+ description: "Kazakhstani Tenge",
},
{
- code: 'LAK',
- description: 'Lao Kip**',
+ code: "LAK",
+ description: "Lao Kip**",
},
{
- code: 'LBP',
- description: 'Lebanese Pound',
+ code: "LBP",
+ description: "Lebanese Pound",
},
{
- code: 'LKR',
- description: 'Sri Lankan Rupee',
+ code: "LKR",
+ description: "Sri Lankan Rupee",
},
{
- code: 'LRD',
- description: 'Liberian Dollar',
+ code: "LRD",
+ description: "Liberian Dollar",
},
{
- code: 'LSL',
- description: 'Lesotho Loti',
+ code: "LSL",
+ description: "Lesotho Loti",
},
{
- code: 'MAD',
- description: 'Moroccan Dirham',
+ code: "MAD",
+ description: "Moroccan Dirham",
},
{
- code: 'MDL',
- description: 'Moldovan Leu',
+ code: "MDL",
+ description: "Moldovan Leu",
},
{
- code: 'MGA',
- description: 'Malagasy Ariary',
+ code: "MGA",
+ description: "Malagasy Ariary",
},
{
- code: 'MKD',
- description: 'Macedonian Denar',
+ code: "MKD",
+ description: "Macedonian Denar",
},
{
- code: 'MNT',
- description: 'Mongolian Tögrög',
+ code: "MNT",
+ description: "Mongolian Tögrög",
},
{
- code: 'MOP',
- description: 'Macanese Pataca',
+ code: "MOP",
+ description: "Macanese Pataca",
},
{
- code: 'MRO',
- description: 'Mauritanian Ouguiya',
+ code: "MRO",
+ description: "Mauritanian Ouguiya",
},
{
- code: 'MUR',
- description: 'Mauritian Rupee**',
+ code: "MUR",
+ description: "Mauritian Rupee**",
},
{
- code: 'MVR',
- description: 'Maldivian Rufiyaa',
+ code: "MVR",
+ description: "Maldivian Rufiyaa",
},
{
- code: 'MWK',
- description: 'Malawian Kwacha',
+ code: "MWK",
+ description: "Malawian Kwacha",
},
{
- code: 'MXN',
- description: 'Mexican Peso**',
+ code: "MXN",
+ description: "Mexican Peso**",
},
{
- code: 'MYR',
- description: 'Malaysian Ringgit',
+ code: "MYR",
+ description: "Malaysian Ringgit",
},
{
- code: 'MZN',
- description: 'Mozambican Metical',
+ code: "MZN",
+ description: "Mozambican Metical",
},
{
- code: 'NAD',
- description: 'Namibian Dollar',
+ code: "NAD",
+ description: "Namibian Dollar",
},
{
- code: 'NGN',
- description: 'Nigerian Naira',
+ code: "NGN",
+ description: "Nigerian Naira",
},
{
- code: 'NIO',
- description: 'Nicaraguan Córdoba**',
+ code: "NIO",
+ description: "Nicaraguan Córdoba**",
},
{
- code: 'NOK',
- description: 'Norwegian Krone',
+ code: "NOK",
+ description: "Norwegian Krone",
},
{
- code: 'NPR',
- description: 'Nepalese Rupee',
+ code: "NPR",
+ description: "Nepalese Rupee",
},
{
- code: 'NZD',
- description: 'New Zealand Dollar',
+ code: "NZD",
+ description: "New Zealand Dollar",
},
{
- code: 'PAB',
- description: 'Panamanian Balboa**',
+ code: "PAB",
+ description: "Panamanian Balboa**",
},
{
- code: 'PEN',
- description: 'Peruvian Nuevo Sol**',
+ code: "PEN",
+ description: "Peruvian Nuevo Sol**",
},
{
- code: 'PGK',
- description: 'Papua New Guinean Kina',
+ code: "PGK",
+ description: "Papua New Guinean Kina",
},
{
- code: 'PHP',
- description: 'Philippine Peso',
+ code: "PHP",
+ description: "Philippine Peso",
},
{
- code: 'PKR',
- description: 'Pakistani Rupee',
+ code: "PKR",
+ description: "Pakistani Rupee",
},
{
- code: 'PLN',
- description: 'Polish Złoty',
+ code: "PLN",
+ description: "Polish Złoty",
},
{
- code: 'PYG',
- description: 'Paraguayan Guaraní**',
+ code: "PYG",
+ description: "Paraguayan Guaraní**",
},
{
- code: 'QAR',
- description: 'Qatari Riyal',
+ code: "QAR",
+ description: "Qatari Riyal",
},
{
- code: 'RON',
- description: 'Romanian Leu',
+ code: "RON",
+ description: "Romanian Leu",
},
{
- code: 'RSD',
- description: 'Serbian Dinar',
+ code: "RSD",
+ description: "Serbian Dinar",
},
{
- code: 'RUB',
- description: 'Russian Ruble',
+ code: "RUB",
+ description: "Russian Ruble",
},
{
- code: 'RWF',
- description: 'Rwandan Franc',
+ code: "RWF",
+ description: "Rwandan Franc",
},
{
- code: 'SAR',
- description: 'Saudi Riyal',
+ code: "SAR",
+ description: "Saudi Riyal",
},
{
- code: 'SBD',
- description: 'Solomon Islands Dollar',
+ code: "SBD",
+ description: "Solomon Islands Dollar",
},
{
- code: 'SCR',
- description: 'Seychellois Rupee',
+ code: "SCR",
+ description: "Seychellois Rupee",
},
{
- code: 'SEK',
- description: 'Swedish Krona',
+ code: "SEK",
+ description: "Swedish Krona",
},
{
- code: 'SGD',
- description: 'Singapore Dollar',
+ code: "SGD",
+ description: "Singapore Dollar",
},
{
- code: 'SHP',
- description: 'Saint Helenian Pound**',
+ code: "SHP",
+ description: "Saint Helenian Pound**",
},
{
- code: 'SLL',
- description: 'Sierra Leonean Leone',
+ code: "SLL",
+ description: "Sierra Leonean Leone",
},
{
- code: 'SOS',
- description: 'Somali Shilling',
+ code: "SOS",
+ description: "Somali Shilling",
},
{
- code: 'SRD',
- description: 'Surinamese Dollar**',
+ code: "SRD",
+ description: "Surinamese Dollar**",
},
{
- code: 'STD',
- description: 'São Tomé and Príncipe Dobra',
+ code: "STD",
+ description: "São Tomé and Príncipe Dobra",
},
{
- code: 'SVC',
- description: 'Salvadoran Colón**',
+ code: "SVC",
+ description: "Salvadoran Colón**",
},
{
- code: 'SZL',
- description: 'Swazi Lilangeni',
+ code: "SZL",
+ description: "Swazi Lilangeni",
},
{
- code: 'THB',
- description: 'Thai Baht',
+ code: "THB",
+ description: "Thai Baht",
},
{
- code: 'TJS',
- description: 'Tajikistani Somoni',
+ code: "TJS",
+ description: "Tajikistani Somoni",
},
{
- code: 'TOP',
- description: 'Tongan Paʻanga',
+ code: "TOP",
+ description: "Tongan Paʻanga",
},
{
- code: 'TRY',
- description: 'Turkish Lira',
+ code: "TRY",
+ description: "Turkish Lira",
},
{
- code: 'TTD',
- description: 'Trinidad and Tobago Dollar',
+ code: "TTD",
+ description: "Trinidad and Tobago Dollar",
},
{
- code: 'TWD',
- description: 'New Taiwan Dollar',
+ code: "TWD",
+ description: "New Taiwan Dollar",
},
{
- code: 'TZS',
- description: 'Tanzanian Shilling',
+ code: "TZS",
+ description: "Tanzanian Shilling",
},
{
- code: 'UAH',
- description: 'Ukrainian Hryvnia',
+ code: "UAH",
+ description: "Ukrainian Hryvnia",
},
{
- code: 'UGX',
- description: 'Ugandan Shilling',
+ code: "UGX",
+ description: "Ugandan Shilling",
},
{
- code: 'USD',
- description: 'United States Dollar',
+ code: "USD",
+ description: "United States Dollar",
},
{
- code: 'UYU',
- description: 'Uruguayan Peso**',
+ code: "UYU",
+ description: "Uruguayan Peso**",
},
{
- code: 'UZS',
- description: 'Uzbekistani Som',
+ code: "UZS",
+ description: "Uzbekistani Som",
},
{
- code: 'VND',
- description: 'Vietnamese Đồng',
+ code: "VND",
+ description: "Vietnamese Đồng",
},
{
- code: 'VUV',
- description: 'Vanuatu Vatu',
+ code: "VUV",
+ description: "Vanuatu Vatu",
},
{
- code: 'WST',
- description: 'Samoan Tala',
+ code: "WST",
+ description: "Samoan Tala",
},
{
- code: 'XAF',
- description: 'Central African Cfa Franc',
+ code: "XAF",
+ description: "Central African Cfa Franc",
},
{
- code: 'XCD',
- description: 'East Caribbean Dollar',
+ code: "XCD",
+ description: "East Caribbean Dollar",
},
{
- code: 'XOF',
- description: 'West African Cfa Franc**',
+ code: "XOF",
+ description: "West African Cfa Franc**",
},
{
- code: 'XPF',
- description: 'Cfp Franc**',
+ code: "XPF",
+ description: "Cfp Franc**",
},
{
- code: 'YER',
- description: 'Yemeni Rial',
+ code: "YER",
+ description: "Yemeni Rial",
},
{
- code: 'ZAR',
- description: 'South African Rand',
+ code: "ZAR",
+ description: "South African Rand",
},
{
- code: 'ZMW',
- description: 'Zambian Kwacha',
+ code: "ZMW",
+ description: "Zambian Kwacha",
},
-]
+];
diff --git a/apps/builder/src/features/blocks/inputs/payment/payment.spec.ts b/apps/builder/src/features/blocks/inputs/payment/payment.spec.ts
index 49a8cc2a7b..3e6c8ec083 100644
--- a/apps/builder/src/features/blocks/inputs/payment/payment.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/payment/payment.spec.ts
@@ -1,14 +1,14 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { stripePaymentForm } from '@/test/utils/selectorUtils'
-import { env } from '@typebot.io/env'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
+import { stripePaymentForm } from "@/test/utils/selectorUtils";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { env } from "@typebot.io/env";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-test.describe('Payment input block', () => {
- test('Can configure Stripe account', async ({ page }) => {
- const typebotId = createId()
+test.describe("Payment input block", () => {
+ test("Can configure Stripe account", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -16,53 +16,53 @@ test.describe('Payment input block', () => {
type: InputBlockType.PAYMENT,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Configure...')
- await page.getByRole('button', { name: 'Select Stripe account' }).click()
- await page.getByRole('menuitem', { name: 'Connect new' }).click()
- await page.fill('[placeholder="Typebot"]', 'My Stripe Account')
- await page.fill('[placeholder="sk_test_..."]', env.STRIPE_SECRET_KEY ?? '')
- await page.fill('[placeholder="sk_live_..."]', env.STRIPE_SECRET_KEY ?? '')
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Configure...");
+ await page.getByRole("button", { name: "Select Stripe account" }).click();
+ await page.getByRole("menuitem", { name: "Connect new" }).click();
+ await page.fill('[placeholder="Typebot"]', "My Stripe Account");
+ await page.fill('[placeholder="sk_test_..."]', env.STRIPE_SECRET_KEY ?? "");
+ await page.fill('[placeholder="sk_live_..."]', env.STRIPE_SECRET_KEY ?? "");
await page.fill(
'[placeholder="pk_test_..."]',
- env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY ?? ''
- )
+ env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY ?? "",
+ );
await page.fill(
'[placeholder="pk_live_..."]',
- env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY ?? ''
- )
- await expect(page.locator('button >> text="Connect"')).toBeEnabled()
- await page.click('button >> text="Connect"')
- await expect(page.locator('text="Secret test key:"')).toBeHidden()
- await expect(page.locator('text="My Stripe Account"')).toBeVisible()
- await page.fill('[placeholder="30.00"] >> nth=-1', '30.00')
- await page.selectOption('select', 'EUR')
- await page.click('text=Additional information')
- await page.fill('[placeholder="John Smith"]', 'Baptiste')
- await page.fill('[placeholder="john@gmail.com"]', 'test@typebot.io')
- await expect(page.locator('text="Phone number:"')).toBeVisible()
+ env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY ?? "",
+ );
+ await expect(page.locator('button >> text="Connect"')).toBeEnabled();
+ await page.click('button >> text="Connect"');
+ await expect(page.locator('text="Secret test key:"')).toBeHidden();
+ await expect(page.locator('text="My Stripe Account"')).toBeVisible();
+ await page.fill('[placeholder="30.00"] >> nth=-1', "30.00");
+ await page.selectOption("select", "EUR");
+ await page.click("text=Additional information");
+ await page.fill('[placeholder="John Smith"]', "Baptiste");
+ await page.fill('[placeholder="john@gmail.com"]', "test@typebot.io");
+ await expect(page.locator('text="Phone number:"')).toBeVisible();
- await page.click('text=Test')
+ await page.click("text=Test");
await stripePaymentForm(page)
.locator(`[placeholder="1234 1234 1234 1234"]`)
- .fill('4000000000000002')
+ .fill("4000000000000002");
await stripePaymentForm(page)
.locator(`[placeholder="MM / YY"]`)
- .fill('12 / 25')
- await stripePaymentForm(page).locator(`[placeholder="CVC"]`).fill('240')
- await page.getByRole('button', { name: 'Pay 30,00 €' }).click()
+ .fill("12 / 25");
+ await stripePaymentForm(page).locator(`[placeholder="CVC"]`).fill("240");
+ await page.getByRole("button", { name: "Pay 30,00 €" }).click();
await expect(
- page.locator(`text="Your card has been declined."`)
- ).toBeVisible()
+ page.locator(`text="Your card has been declined."`),
+ ).toBeVisible();
await stripePaymentForm(page)
.locator(`[placeholder="1234 1234 1234 1234"]`)
- .fill('4242424242424242')
- const zipInput = stripePaymentForm(page).getByPlaceholder('90210')
- const isZipInputVisible = await zipInput.isVisible()
- if (isZipInputVisible) await zipInput.fill('12345')
- await page.getByRole('button', { name: 'Pay 30,00 €' }).click()
- await expect(page.locator(`text="Success"`)).toBeVisible()
- })
-})
+ .fill("4242424242424242");
+ const zipInput = stripePaymentForm(page).getByPlaceholder("90210");
+ const isZipInputVisible = await zipInput.isVisible();
+ if (isZipInputVisible) await zipInput.fill("12345");
+ await page.getByRole("button", { name: "Pay 30,00 €" }).click();
+ await expect(page.locator(`text="Success"`)).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/blocks/inputs/phone/components/CountryCodeSelect.tsx b/apps/builder/src/features/blocks/inputs/phone/components/CountryCodeSelect.tsx
index 60a3695430..4c15a83d5a 100644
--- a/apps/builder/src/features/blocks/inputs/phone/components/CountryCodeSelect.tsx
+++ b/apps/builder/src/features/blocks/inputs/phone/components/CountryCodeSelect.tsx
@@ -1,21 +1,21 @@
-import { Select } from '@chakra-ui/react'
-import { useTranslate } from '@tolgee/react'
-import React, { ChangeEvent } from 'react'
+import { Select } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import React, { type ChangeEvent } from "react";
type Props = {
- countryCode?: string
- onSelect: (countryCode: string) => void
-}
+ countryCode?: string;
+ onSelect: (countryCode: string) => void;
+};
export const CountryCodeSelect = ({ countryCode, onSelect }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const handleOnChange = (e: ChangeEvent) => {
- onSelect(e.target.value)
- }
+ onSelect(e.target.value);
+ };
return (
{
Zambia (+260)
Zimbabwe (+263)
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/phone/components/PhoneInputIcon.tsx b/apps/builder/src/features/blocks/inputs/phone/components/PhoneInputIcon.tsx
index 342a74605a..f82b28c5ec 100644
--- a/apps/builder/src/features/blocks/inputs/phone/components/PhoneInputIcon.tsx
+++ b/apps/builder/src/features/blocks/inputs/phone/components/PhoneInputIcon.tsx
@@ -1,7 +1,7 @@
-import { PhoneIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { PhoneIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const PhoneInputIcon = (props: IconProps) => (
{
onChange={handlePlaceholderChange}
/>
{
/>
- {t('blocks.inputs.phone.settings.defaultCountry.label')}
+ {t("blocks.inputs.phone.settings.defaultCountry.label")}
{
/>
{
/>
- {t('blocks.inputs.settings.saveAnswer.label')}
+ {t("blocks.inputs.settings.saveAnswer.label")}
{
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/phone/components/PhoneNodeContent.tsx b/apps/builder/src/features/blocks/inputs/phone/components/PhoneNodeContent.tsx
index 178721e73f..9f39985d81 100644
--- a/apps/builder/src/features/blocks/inputs/phone/components/PhoneNodeContent.tsx
+++ b/apps/builder/src/features/blocks/inputs/phone/components/PhoneNodeContent.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import { Text } from '@chakra-ui/react'
-import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
-import { PhoneNumberInputBlock } from '@typebot.io/schemas'
-import { defaultPhoneInputOptions } from '@typebot.io/schemas/features/blocks/inputs/phone/constants'
+import { WithVariableContent } from "@/features/graph/components/nodes/block/WithVariableContent";
+import { Text } from "@chakra-ui/react";
+import { defaultPhoneInputOptions } from "@typebot.io/blocks-inputs/phone/constants";
+import type { PhoneNumberInputBlock } from "@typebot.io/blocks-inputs/phone/schema";
+import React from "react";
type Props = {
- options: PhoneNumberInputBlock['options']
-}
+ options: PhoneNumberInputBlock["options"];
+};
export const PhoneNodeContent = ({
options: { variableId, labels } = {},
@@ -14,7 +14,7 @@ export const PhoneNodeContent = ({
variableId ? (
+
{labels?.placeholder ?? defaultPhoneInputOptions.labels.placeholder}
- )
+ );
diff --git a/apps/builder/src/features/blocks/inputs/phone/phone.spec.ts b/apps/builder/src/features/blocks/inputs/phone/phone.spec.ts
index 0f522830ac..d2f8456f4a 100644
--- a/apps/builder/src/features/blocks/inputs/phone/phone.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/phone/phone.spec.ts
@@ -1,13 +1,13 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
-import { defaultPhoneInputOptions } from '@typebot.io/schemas/features/blocks/inputs/phone/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { defaultPhoneInputOptions } from "@typebot.io/blocks-inputs/phone/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-test.describe('Phone input block', () => {
- test('options should work', async ({ page }) => {
- const typebotId = createId()
+test.describe("Phone input block", () => {
+ test("options should work", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -15,34 +15,34 @@ test.describe('Phone input block', () => {
type: InputBlockType.PHONE,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click('text=Test')
+ await page.click("text=Test");
await expect(
page.locator(
- `input[placeholder="${defaultPhoneInputOptions.labels.placeholder}"]`
- )
- ).toHaveAttribute('type', 'tel')
+ `input[placeholder="${defaultPhoneInputOptions.labels.placeholder}"]`,
+ ),
+ ).toHaveAttribute("type", "tel");
- await page.click(`text=${defaultPhoneInputOptions.labels.placeholder}`)
- await page.getByLabel('Placeholder:').fill('+33 XX XX XX XX')
- await page.getByLabel('Button label:').fill('Go')
+ await page.click(`text=${defaultPhoneInputOptions.labels.placeholder}`);
+ await page.getByLabel("Placeholder:").fill("+33 XX XX XX XX");
+ await page.getByLabel("Button label:").fill("Go");
await page.fill(
`input[value="${defaultPhoneInputOptions.retryMessageContent}"]`,
- 'Try again bro'
- )
+ "Try again bro",
+ );
- await page.click('text=Restart')
- await page.locator(`input[placeholder="+33 XX XX XX XX"]`).type('+33 6 73')
- await expect(page.getByText('🇫🇷')).toBeVisible()
- await page.locator('button >> text="Go"').click()
- await expect(page.locator('text=Try again bro')).toBeVisible()
+ await page.click("text=Restart");
+ await page.locator(`input[placeholder="+33 XX XX XX XX"]`).type("+33 6 73");
+ await expect(page.getByText("🇫🇷")).toBeVisible();
+ await page.locator('button >> text="Go"').click();
+ await expect(page.locator("text=Try again bro")).toBeVisible();
await page
.locator(`input[placeholder="+33 XX XX XX XX"]`)
- .fill('+33 6 73 54 45 67')
- await page.locator('button >> text="Go"').click()
- await expect(page.locator('text=+33 6 73 54 45 67')).toBeVisible()
- })
-})
+ .fill("+33 6 73 54 45 67");
+ await page.locator('button >> text="Go"').click();
+ await expect(page.locator("text=+33 6 73 54 45 67")).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceIcon.tsx b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceIcon.tsx
index d9a4d34660..6276cc040d 100644
--- a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceIcon.tsx
+++ b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceIcon.tsx
@@ -1,7 +1,7 @@
-import { ImageIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { ImageIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const PictureChoiceIcon = (props: IconProps) => (
(null)
+ const emptyImageBgColor = useColorModeValue("gray.100", "gray.700");
+ const { openedItemId, setOpenedItemId } = useGraph();
+ const { updateItem, createItem, typebot } = useTypebot();
+ const ref = useRef(null);
const handlePlusClick = (e: React.MouseEvent) => {
- e.stopPropagation()
- const itemIndex = indices.itemIndex + 1
- createItem({}, { ...indices, itemIndex })
- }
+ e.stopPropagation();
+ const itemIndex = indices.itemIndex + 1;
+ createItem({}, { ...indices, itemIndex });
+ };
- const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
+ const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation();
const openPopover = () => {
- setOpenedItemId(item.id)
- }
+ setOpenedItemId(item.id);
+ };
const handleItemChange = (updates: Partial) => {
- updateItem(indices, { ...item, ...updates })
- }
+ updateItem(indices, { ...item, ...updates });
+ };
const handleMouseWheel = (e: WheelEvent) => {
- e.stopPropagation()
- }
- useEventListener('wheel', handleMouseWheel, ref.current)
+ e.stopPropagation();
+ };
+ useEventListener("wheel", handleMouseWheel, ref.current);
const blockId = typebot
? typebot.groups.at(indices.groupIndex)?.blocks?.at(indices.blockIndex)?.id
- : undefined
+ : undefined;
return (
@@ -149,5 +150,5 @@ export const PictureChoiceItemNode = ({
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx
index f48e2df78a..869f3854c5 100644
--- a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
-import { TextInput, Textarea } from '@/components/inputs'
-import { PictureChoiceItem } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
+import { ImageUploadContent } from "@/components/ImageUploadContent";
+import { SwitchWithRelatedSettings } from "@/components/SwitchWithRelatedSettings";
+import { TextInput, Textarea } from "@/components/inputs";
+import { ConditionForm } from "@/features/blocks/logic/condition/components/ConditionForm";
import {
Button,
HStack,
@@ -9,21 +10,20 @@ import {
PopoverTrigger,
Stack,
Text,
-} from '@chakra-ui/react'
-import { ImageUploadContent } from '@/components/ImageUploadContent'
-import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
-import { ConditionForm } from '@/features/blocks/logic/condition/components/ConditionForm'
-import { Condition } from '@typebot.io/schemas'
-import { LogicalOperator } from '@typebot.io/schemas/features/blocks/logic/condition/constants'
-import { useTranslate } from '@tolgee/react'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import type { PictureChoiceItem } from "@typebot.io/blocks-inputs/pictureChoice/schema";
+import { LogicalOperator } from "@typebot.io/conditions/constants";
+import type { Condition } from "@typebot.io/conditions/schemas";
+import React from "react";
type Props = {
- workspaceId: string
- typebotId: string
- blockId: string
- item: PictureChoiceItem
- onItemChange: (updates: Partial) => void
-}
+ workspaceId: string;
+ typebotId: string;
+ blockId: string;
+ item: PictureChoiceItem;
+ onItemChange: (updates: Partial) => void;
+};
export const PictureChoiceItemSettings = ({
workspaceId,
@@ -32,16 +32,16 @@ export const PictureChoiceItemSettings = ({
item,
onItemChange,
}: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
- const updateTitle = (title: string) => onItemChange({ ...item, title })
+ const updateTitle = (title: string) => onItemChange({ ...item, title });
const updateImage = (pictureSrc: string) => {
- onItemChange({ ...item, pictureSrc })
- }
+ onItemChange({ ...item, pictureSrc });
+ };
const updateDescription = (description: string) =>
- onItemChange({ ...item, description })
+ onItemChange({ ...item, description });
const updateIsDisplayConditionEnabled = (isEnabled: boolean) =>
onItemChange({
@@ -50,7 +50,7 @@ export const PictureChoiceItemSettings = ({
...item.displayCondition,
isEnabled,
},
- })
+ });
const updateDisplayCondition = (condition: Condition) =>
onItemChange({
@@ -59,13 +59,13 @@ export const PictureChoiceItemSettings = ({
...item.displayCondition,
condition,
},
- })
+ });
return (
- {t('blocks.inputs.picture.itemSettings.image.label')}
+ {t("blocks.inputs.picture.itemSettings.image.label")}
{({ onClose }) => (
@@ -73,8 +73,8 @@ export const PictureChoiceItemSettings = ({
{item.pictureSrc
- ? t('blocks.inputs.picture.itemSettings.image.change.label')
- : t('blocks.inputs.picture.itemSettings.image.pick.label')}
+ ? t("blocks.inputs.picture.itemSettings.image.change.label")
+ : t("blocks.inputs.picture.itemSettings.image.pick.label")}
@@ -87,10 +87,10 @@ export const PictureChoiceItemSettings = ({
}}
defaultUrl={item.pictureSrc}
onSubmit={(url) => {
- updateImage(url)
- onClose()
+ updateImage(url);
+ onClose();
}}
- excludedTabs={['emoji']}
+ excludedTabs={["emoji"]}
/>
@@ -98,17 +98,17 @@ export const PictureChoiceItemSettings = ({
@@ -123,5 +123,5 @@ export const PictureChoiceItemSettings = ({
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceNode.tsx b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceNode.tsx
index fd29b7b5f1..862030ad77 100644
--- a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceNode.tsx
+++ b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceNode.tsx
@@ -1,38 +1,38 @@
-import { BlockIndices } from '@typebot.io/schemas'
-import React from 'react'
-import { Stack, Tag, Wrap, Text } from '@chakra-ui/react'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { SetVariableLabel } from '@/components/SetVariableLabel'
-import { ItemNodesList } from '@/features/graph/components/nodes/item/ItemNodesList'
-import { PictureChoiceBlock } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
-import { useTranslate } from '@tolgee/react'
+import { SetVariableLabel } from "@/components/SetVariableLabel";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { ItemNodesList } from "@/features/graph/components/nodes/item/ItemNodesList";
+import { Stack, Tag, Text, Wrap } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import type { BlockIndices } from "@typebot.io/blocks-core/schemas/schema";
+import type { PictureChoiceBlock } from "@typebot.io/blocks-inputs/pictureChoice/schema";
+import React from "react";
type Props = {
- block: PictureChoiceBlock
- indices: BlockIndices
-}
+ block: PictureChoiceBlock;
+ indices: BlockIndices;
+};
export const PictureChoiceNode = ({ block, indices }: Props) => {
- const { t } = useTranslate()
- const { typebot } = useTypebot()
+ const { t } = useTranslate();
+ const { typebot } = useTypebot();
const dynamicVariableName = typebot?.variables.find(
(variable) =>
- variable.id === block.options?.dynamicItems?.pictureSrcsVariableId
- )?.name
+ variable.id === block.options?.dynamicItems?.pictureSrcsVariableId,
+ )?.name;
return (
{block.options?.dynamicItems?.isEnabled && dynamicVariableName ? (
- {t('blocks.inputs.picture.settings.dynamicVariables.display.label')}
+ {t("blocks.inputs.picture.settings.dynamicVariables.display.label")}
{dynamicVariableName}
{t(
- 'blocks.inputs.picture.settings.dynamicVariables.pictures.label'
+ "blocks.inputs.picture.settings.dynamicVariables.pictures.label",
)}
@@ -46,5 +46,5 @@ export const PictureChoiceNode = ({ block, indices }: Props) => {
/>
) : null}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceSettings.tsx b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceSettings.tsx
index c4eecc98f8..12d54e739f 100644
--- a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceSettings.tsx
@@ -1,31 +1,31 @@
-import { TextInput } from '@/components/inputs'
-import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
-import { FormLabel, Stack } from '@chakra-ui/react'
-import { Variable } from '@typebot.io/schemas'
-import React from 'react'
-import { PictureChoiceBlock } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
-import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
-import { defaultPictureChoiceOptions } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice/constants'
-import { useTranslate } from '@tolgee/react'
+import { SwitchWithRelatedSettings } from "@/components/SwitchWithRelatedSettings";
+import { TextInput } from "@/components/inputs";
+import { VariableSearchInput } from "@/components/inputs/VariableSearchInput";
+import { FormLabel, Stack } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { defaultPictureChoiceOptions } from "@typebot.io/blocks-inputs/pictureChoice/constants";
+import type { PictureChoiceBlock } from "@typebot.io/blocks-inputs/pictureChoice/schema";
+import type { Variable } from "@typebot.io/variables/schemas";
+import React from "react";
type Props = {
- options?: PictureChoiceBlock['options']
- onOptionsChange: (options: PictureChoiceBlock['options']) => void
-}
+ options?: PictureChoiceBlock["options"];
+ onOptionsChange: (options: PictureChoiceBlock["options"]) => void;
+};
export const PictureChoiceSettings = ({ options, onOptionsChange }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const updateIsMultiple = (isMultipleChoice: boolean) =>
- onOptionsChange({ ...options, isMultipleChoice })
+ onOptionsChange({ ...options, isMultipleChoice });
const updateButtonLabel = (buttonLabel: string) =>
- onOptionsChange({ ...options, buttonLabel })
+ onOptionsChange({ ...options, buttonLabel });
const updateSaveVariable = (variable?: Variable) =>
- onOptionsChange({ ...options, variableId: variable?.id })
+ onOptionsChange({ ...options, variableId: variable?.id });
const updateSearchInputPlaceholder = (searchInputPlaceholder: string) =>
- onOptionsChange({ ...options, searchInputPlaceholder })
+ onOptionsChange({ ...options, searchInputPlaceholder });
const updateIsSearchable = (isSearchable: boolean) =>
- onOptionsChange({ ...options, isSearchable })
+ onOptionsChange({ ...options, isSearchable });
const updateIsDynamicItemsEnabled = (isEnabled: boolean) =>
onOptionsChange({
@@ -34,7 +34,7 @@ export const PictureChoiceSettings = ({ options, onOptionsChange }: Props) => {
...options?.dynamicItems,
isEnabled,
},
- })
+ });
const updateDynamicItemsPictureSrcsVariable = (variable?: Variable) =>
onOptionsChange({
@@ -43,7 +43,7 @@ export const PictureChoiceSettings = ({ options, onOptionsChange }: Props) => {
...options?.dynamicItems,
pictureSrcsVariableId: variable?.id,
},
- })
+ });
const updateDynamicItemsTitlesVariable = (variable?: Variable) =>
onOptionsChange({
@@ -52,7 +52,7 @@ export const PictureChoiceSettings = ({ options, onOptionsChange }: Props) => {
...options?.dynamicItems,
titlesVariableId: variable?.id,
},
- })
+ });
const updateDynamicItemsDescriptionsVariable = (variable?: Variable) =>
onOptionsChange({
@@ -61,19 +61,19 @@ export const PictureChoiceSettings = ({ options, onOptionsChange }: Props) => {
...options?.dynamicItems,
descriptionsVariableId: variable?.id,
},
- })
+ });
return (
{
/>
{
onCheckChange={updateIsMultiple}
>
{
{
>
- {t('blocks.inputs.picture.settings.dynamicItems.images.label')}
+ {t("blocks.inputs.picture.settings.dynamicItems.images.label")}
{
- {t('blocks.inputs.picture.settings.dynamicItems.titles.label')}
+ {t("blocks.inputs.picture.settings.dynamicItems.titles.label")}
{
{t(
- 'blocks.inputs.picture.settings.dynamicItems.descriptions.label'
+ "blocks.inputs.picture.settings.dynamicItems.descriptions.label",
)}
{
- {t('blocks.inputs.settings.saveAnswer.label')}
+ {t("blocks.inputs.settings.saveAnswer.label")}
{
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/pictureChoice/pictureChoice.spec.ts b/apps/builder/src/features/blocks/inputs/pictureChoice/pictureChoice.spec.ts
index 207f41306e..0bad4a1be9 100644
--- a/apps/builder/src/features/blocks/inputs/pictureChoice/pictureChoice.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/pictureChoice/pictureChoice.spec.ts
@@ -1,117 +1,131 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
const firstImageSrc =
- 'https://images.unsplash.com/flagged/photo-1575517111839-3a3843ee7f5d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80'
+ "https://images.unsplash.com/flagged/photo-1575517111839-3a3843ee7f5d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80";
const secondImageSrc =
- 'https://images.unsplash.com/photo-1582582621959-48d27397dc69?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2938&q=80'
+ "https://images.unsplash.com/photo-1582582621959-48d27397dc69?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2938&q=80";
const thirdImageSrc =
- 'https://images.unsplash.com/photo-1564019472231-4586c552dc27?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
+ "https://images.unsplash.com/photo-1564019472231-4586c552dc27?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80";
-test.describe.parallel('Picture choice input block', () => {
- test('can edit items', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: InputBlockType.PICTURE_CHOICE,
- items: [
- {
- id: 'choice1',
- },
- ],
- }),
- },
- ])
+test.describe
+ .parallel("Picture choice input block", () => {
+ test("can edit items", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: InputBlockType.PICTURE_CHOICE,
+ items: [
+ {
+ id: "choice1",
+ },
+ ],
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.getByTestId('item-node').click()
- await page.getByRole('button', { name: 'Pick an image' }).click()
- await page.getByPlaceholder('Paste the image link...').fill(firstImageSrc)
- await page.getByLabel('Title:').fill('First image')
- await page.getByLabel('Description:').fill('First description')
- await page.getByText('Default').click()
- await page.getByRole('img', { name: 'Picture choice image' }).hover()
- await page.getByRole('button', { name: 'Add item' }).click()
- await page.getByTestId('item-node').last().click()
- await page.getByRole('button', { name: 'Pick an image' }).click()
- await page.getByPlaceholder('Paste the image link...').fill(secondImageSrc)
- await page.getByLabel('Title:').fill('Second image')
- await page.getByLabel('Description:').fill('Second description')
- await page.getByRole('img', { name: 'Picture choice image' }).last().hover()
- await page.getByRole('button', { name: 'Add item' }).click()
- await page.getByTestId('item-node').last().click()
- await expect(
- page.getByRole('button', { name: 'Pick an image' })
- ).toHaveCount(1)
- await page.getByRole('button', { name: 'Pick an image' }).click()
- await page.getByPlaceholder('Paste the image link...').fill(thirdImageSrc)
- await page.getByLabel('Title:').fill('Third image')
- await page.getByLabel('Description:').fill('Third description')
- await page.getByRole('button', { name: 'Test' }).click()
- await expect(
- page.getByRole('button', {
- name: 'First image First image First description',
- })
- ).toBeVisible()
- await expect(
- page.getByRole('button', {
- name: 'Second image Second image Second description',
- })
- ).toBeVisible()
- await page
- .getByRole('button', {
- name: 'Third image Third image Third description',
- })
- .click()
- await expect(page.getByTestId('guest-bubble')).toBeVisible()
- await expect(
- page.locator('typebot-standard').getByText('Third image')
- ).toBeVisible()
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.getByTestId("item-node").click();
+ await page.getByRole("button", { name: "Pick an image" }).click();
+ await page
+ .getByPlaceholder("Paste the image link...")
+ .fill(firstImageSrc);
+ await page.getByLabel("Title:").fill("First image");
+ await page.getByLabel("Description:").fill("First description");
+ await page.getByText("Default").click();
+ await page.getByRole("img", { name: "Picture choice image" }).hover();
+ await page.getByRole("button", { name: "Add item" }).click();
+ await page.getByTestId("item-node").last().click();
+ await page.getByRole("button", { name: "Pick an image" }).click();
+ await page
+ .getByPlaceholder("Paste the image link...")
+ .fill(secondImageSrc);
+ await page.getByLabel("Title:").fill("Second image");
+ await page.getByLabel("Description:").fill("Second description");
+ await page
+ .getByRole("img", { name: "Picture choice image" })
+ .last()
+ .hover();
+ await page.getByRole("button", { name: "Add item" }).click();
+ await page.getByTestId("item-node").last().click();
+ await expect(
+ page.getByRole("button", { name: "Pick an image" }),
+ ).toHaveCount(1);
+ await page.getByRole("button", { name: "Pick an image" }).click();
+ await page
+ .getByPlaceholder("Paste the image link...")
+ .fill(thirdImageSrc);
+ await page.getByLabel("Title:").fill("Third image");
+ await page.getByLabel("Description:").fill("Third description");
+ await page.getByRole("button", { name: "Test" }).click();
+ await expect(
+ page.getByRole("button", {
+ name: "First image First image First description",
+ }),
+ ).toBeVisible();
+ await expect(
+ page.getByRole("button", {
+ name: "Second image Second image Second description",
+ }),
+ ).toBeVisible();
+ await page
+ .getByRole("button", {
+ name: "Third image Third image Third description",
+ })
+ .click();
+ await expect(page.getByTestId("guest-bubble")).toBeVisible();
+ await expect(
+ page.locator("typebot-standard").getByText("Third image"),
+ ).toBeVisible();
- await page.getByTestId('block block2').click({ position: { x: 0, y: 0 } })
- await page.getByText('Multiple choice?').click()
- await page.getByLabel('Submit button label:').fill('Go')
- await page.getByRole('button', { name: 'Restart' }).click()
- await page
- .getByRole('checkbox', {
- name: 'First image First image First description',
- })
- .click()
- await page
- .getByRole('checkbox', {
- name: 'Second image Second image Second description',
- })
- .click()
- await page.getByRole('button', { name: 'Go' }).click()
- await expect(
- page.locator('typebot-standard').getByText('First image, Second image')
- ).toBeVisible()
+ await page
+ .getByTestId("block block2")
+ .click({ position: { x: 0, y: 0 } });
+ await page.getByText("Multiple choice?").click();
+ await page.getByLabel("Submit button label:").fill("Go");
+ await page.getByRole("button", { name: "Restart" }).click();
+ await page
+ .getByRole("checkbox", {
+ name: "First image First image First description",
+ })
+ .click();
+ await page
+ .getByRole("checkbox", {
+ name: "Second image Second image Second description",
+ })
+ .click();
+ await page.getByRole("button", { name: "Go" }).click();
+ await expect(
+ page.locator("typebot-standard").getByText("First image, Second image"),
+ ).toBeVisible();
- await page.getByTestId('block block2').click({ position: { x: 0, y: 0 } })
- await page.getByText('Is searchable?').click()
- await page.getByLabel('Input placeholder:').fill('Search...')
- await page.getByRole('button', { name: 'Restart' }).click()
- await page.getByPlaceholder('Search...').fill('second')
- await expect(
- page.getByRole('checkbox', {
- name: 'First image First image First description',
- })
- ).toBeHidden()
- await page
- .getByRole('checkbox', {
- name: 'Second image Second image Second description',
- })
- .click()
- await page.getByRole('button', { name: 'Go' }).click()
- await expect(
- page.locator('typebot-standard').getByText('Second image')
- ).toBeVisible()
- })
-})
+ await page
+ .getByTestId("block block2")
+ .click({ position: { x: 0, y: 0 } });
+ await page.getByText("Is searchable?").click();
+ await page.getByLabel("Input placeholder:").fill("Search...");
+ await page.getByRole("button", { name: "Restart" }).click();
+ await page.getByPlaceholder("Search...").fill("second");
+ await expect(
+ page.getByRole("checkbox", {
+ name: "First image First image First description",
+ }),
+ ).toBeHidden();
+ await page
+ .getByRole("checkbox", {
+ name: "Second image Second image Second description",
+ })
+ .click();
+ await page.getByRole("button", { name: "Go" }).click();
+ await expect(
+ page.locator("typebot-standard").getByText("Second image"),
+ ).toBeVisible();
+ });
+ });
diff --git a/apps/builder/src/features/blocks/inputs/rating/components/RatingInputContent.tsx b/apps/builder/src/features/blocks/inputs/rating/components/RatingInputContent.tsx
index 9ddb535ec0..80369c40ef 100644
--- a/apps/builder/src/features/blocks/inputs/rating/components/RatingInputContent.tsx
+++ b/apps/builder/src/features/blocks/inputs/rating/components/RatingInputContent.tsx
@@ -1,27 +1,27 @@
-import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
-import { Text } from '@chakra-ui/react'
-import { useTranslate } from '@tolgee/react'
-import { RatingInputBlock } from '@typebot.io/schemas'
-import { defaultRatingInputOptions } from '@typebot.io/schemas/features/blocks/inputs/rating/constants'
+import { WithVariableContent } from "@/features/graph/components/nodes/block/WithVariableContent";
+import { Text } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { defaultRatingInputOptions } from "@typebot.io/blocks-inputs/rating/constants";
+import type { RatingInputBlock } from "@typebot.io/blocks-inputs/rating/schema";
type Props = {
- variableId?: string
- block: RatingInputBlock
-}
+ variableId?: string;
+ block: RatingInputBlock;
+};
export const RatingInputContent = ({ variableId, block }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
return variableId ? (
- {t('blocks.inputs.rating.from.label')}{' '}
- {block.options?.buttonType === 'Icons'
+ {t("blocks.inputs.rating.from.label")}{" "}
+ {block.options?.buttonType === "Icons"
? 1
- : block.options?.startsAt ?? defaultRatingInputOptions.startsAt}{' '}
- {t('blocks.inputs.rating.to.label')}{' '}
+ : (block.options?.startsAt ?? defaultRatingInputOptions.startsAt)}{" "}
+ {t("blocks.inputs.rating.to.label")}{" "}
{block.options?.length ?? defaultRatingInputOptions.length}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/rating/components/RatingInputIcon.tsx b/apps/builder/src/features/blocks/inputs/rating/components/RatingInputIcon.tsx
index f4f822a6b8..bbea8a864d 100644
--- a/apps/builder/src/features/blocks/inputs/rating/components/RatingInputIcon.tsx
+++ b/apps/builder/src/features/blocks/inputs/rating/components/RatingInputIcon.tsx
@@ -1,7 +1,7 @@
-import { StarIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { StarIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const RatingInputIcon = (props: IconProps) => (
- {t('blocks.inputs.rating.settings.maximum.label')}
+ {t("blocks.inputs.rating.settings.maximum.label")}
{
- {t('blocks.inputs.rating.settings.type.label')}
+ {t("blocks.inputs.rating.settings.type.label")}
- {buttonType === 'Numbers' && (
+ {buttonType === "Numbers" && (
{
/>
)}
- {buttonType === 'Icons' && (
+ {buttonType === "Icons" && (
{
onCheckChange={handleCustomIconCheck}
/>
)}
- {buttonType === 'Icons' && options?.customIcon?.isEnabled && (
+ {buttonType === "Icons" && options?.customIcon?.isEnabled && (
{
)}
- {t('blocks.inputs.settings.saveAnswer.label')}
+ {t("blocks.inputs.settings.saveAnswer.label")}
{
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/rating/rating.spec.ts b/apps/builder/src/features/blocks/inputs/rating/rating.spec.ts
index eba8fb871e..0419ae1edc 100644
--- a/apps/builder/src/features/blocks/inputs/rating/rating.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/rating/rating.spec.ts
@@ -1,8 +1,8 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
const boxSvg = `
`
+ `;
-test('options should work', async ({ page }) => {
- const typebotId = createId()
+test("options should work", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -26,28 +26,30 @@ test('options should work', async ({ page }) => {
type: InputBlockType.RATING,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click('text=Test')
- await expect(page.locator(`text=Send`)).toBeHidden()
- await page.getByRole('checkbox', { name: '8' }).click()
- await page.locator(`text=Send`).click()
- await expect(page.getByTestId('guest-bubble')).toHaveText('8')
- await page.click('text=Rate from 0 to 10')
- await page.click('text="10"')
- await page.click('text="5"')
- await page.getByText('One click submit').click()
- await page.click('text=Numbers')
- await page.click('text=Icons')
- await page.click('text="Custom icon?"')
- await page.fill('[placeholder="... "]', boxSvg)
- await page.fill('[placeholder="Not likely at all"]', 'Not likely at all')
- await page.fill('[placeholder="Extremely likely"]', 'Extremely likely')
- await page.click('text="Restart"')
- await expect(page.locator(`text=Not likely at all`)).toBeVisible()
- await expect(page.locator(`text=Extremely likely`)).toBeVisible()
- await page.locator('typebot-standard').locator(`svg >> nth=4`).click()
- await expect(page.locator('typebot-standard').locator(`text=5`)).toBeVisible()
-})
+ await page.click("text=Test");
+ await expect(page.locator(`text=Send`)).toBeHidden();
+ await page.getByRole("checkbox", { name: "8" }).click();
+ await page.locator(`text=Send`).click();
+ await expect(page.getByTestId("guest-bubble")).toHaveText("8");
+ await page.click("text=Rate from 0 to 10");
+ await page.click('text="10"');
+ await page.click('text="5"');
+ await page.getByText("One click submit").click();
+ await page.click("text=Numbers");
+ await page.click("text=Icons");
+ await page.click('text="Custom icon?"');
+ await page.fill('[placeholder="... "]', boxSvg);
+ await page.fill('[placeholder="Not likely at all"]', "Not likely at all");
+ await page.fill('[placeholder="Extremely likely"]', "Extremely likely");
+ await page.click('text="Restart"');
+ await expect(page.locator(`text=Not likely at all`)).toBeVisible();
+ await expect(page.locator(`text=Extremely likely`)).toBeVisible();
+ await page.locator("typebot-standard").locator(`svg >> nth=4`).click();
+ await expect(
+ page.locator("typebot-standard").locator(`text=5`),
+ ).toBeVisible();
+});
diff --git a/apps/builder/src/features/blocks/inputs/textInput/components/TextInputIcon.tsx b/apps/builder/src/features/blocks/inputs/textInput/components/TextInputIcon.tsx
index 3fb8aab871..2fd9ecc07c 100644
--- a/apps/builder/src/features/blocks/inputs/textInput/components/TextInputIcon.tsx
+++ b/apps/builder/src/features/blocks/inputs/textInput/components/TextInputIcon.tsx
@@ -1,7 +1,7 @@
-import { TextIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { TextIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const TextInputIcon = (props: IconProps) => (
{
/>
)}
- )
+ );
return (
-
+
{options?.labels?.placeholder ??
defaultTextInputOptions.labels.placeholder}
@@ -60,5 +60,5 @@ export const TextInputNodeContent = ({ options }: Props) => {
/>
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/textInput/components/TextInputSettings.tsx b/apps/builder/src/features/blocks/inputs/textInput/components/TextInputSettings.tsx
index 17a11eae0e..3bffc32bc6 100644
--- a/apps/builder/src/features/blocks/inputs/textInput/components/TextInputSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/textInput/components/TextInputSettings.tsx
@@ -1,83 +1,87 @@
-import { DropdownList } from '@/components/DropdownList'
-import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
-import { TextInput } from '@/components/inputs'
-import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
-import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
-import { FormLabel, Stack } from '@chakra-ui/react'
-import { useTranslate } from '@tolgee/react'
-import { TextInputBlock, Variable } from '@typebot.io/schemas'
-import { fileVisibilityOptions } from '@typebot.io/schemas/features/blocks/inputs/file/constants'
-import { defaultTextInputOptions } from '@typebot.io/schemas/features/blocks/inputs/text/constants'
-import React from 'react'
+import { DropdownList } from "@/components/DropdownList";
+import { SwitchWithRelatedSettings } from "@/components/SwitchWithRelatedSettings";
+import { TextInput } from "@/components/inputs";
+import { SwitchWithLabel } from "@/components/inputs/SwitchWithLabel";
+import { VariableSearchInput } from "@/components/inputs/VariableSearchInput";
+import { FormLabel, Stack } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { fileVisibilityOptions } from "@typebot.io/blocks-inputs/file/constants";
+import { defaultTextInputOptions } from "@typebot.io/blocks-inputs/text/constants";
+import type { TextInputBlock } from "@typebot.io/blocks-inputs/text/schema";
+import type { Variable } from "@typebot.io/variables/schemas";
+import React from "react";
type Props = {
- options: TextInputBlock['options']
- onOptionsChange: (options: TextInputBlock['options']) => void
-}
+ options: TextInputBlock["options"];
+ onOptionsChange: (options: TextInputBlock["options"]) => void;
+};
export const TextInputSettings = ({ options, onOptionsChange }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const updatePlaceholder = (placeholder: string) =>
- onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
+ onOptionsChange({
+ ...options,
+ labels: { ...options?.labels, placeholder },
+ });
const updateButtonLabel = (button: string) =>
- onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+ onOptionsChange({ ...options, labels: { ...options?.labels, button } });
const updateIsLong = (isLong: boolean) =>
- onOptionsChange({ ...options, isLong })
+ onOptionsChange({ ...options, isLong });
const updateVariableId = (variable?: Variable) =>
- onOptionsChange({ ...options, variableId: variable?.id })
+ onOptionsChange({ ...options, variableId: variable?.id });
const updateAttachmentsEnabled = (isEnabled: boolean) =>
onOptionsChange({
...options,
attachments: { ...options?.attachments, isEnabled },
- })
+ });
- const updateAttachmentsSaveVariableId = (variable?: Pick) =>
+ const updateAttachmentsSaveVariableId = (variable?: Pick) =>
onOptionsChange({
...options,
attachments: { ...options?.attachments, saveVariableId: variable?.id },
- })
+ });
const updateVisibility = (
- visibility: (typeof fileVisibilityOptions)[number]
+ visibility: (typeof fileVisibilityOptions)[number],
) =>
onOptionsChange({
...options,
attachments: { ...options?.attachments, visibility },
- })
+ });
const updateAudioClipEnabled = (isEnabled: boolean) =>
onOptionsChange({
...options,
audioClip: { ...options?.audioClip, isEnabled },
- })
+ });
- const updateAudioClipSaveVariableId = (variable?: Pick) =>
+ const updateAudioClipSaveVariableId = (variable?: Pick) =>
onOptionsChange({
...options,
audioClip: { ...options?.audioClip, saveVariableId: variable?.id },
- })
+ });
const updateAudioClipVisibility = (
- visibility: (typeof fileVisibilityOptions)[number]
+ visibility: (typeof fileVisibilityOptions)[number],
) =>
onOptionsChange({
...options,
audioClip: { ...options?.audioClip, visibility },
- })
+ });
return (
{
onChange={updatePlaceholder}
/>
{
/>
{
- {t('blocks.inputs.settings.saveAnswer.label')}
+ {t("blocks.inputs.settings.saveAnswer.label")}
{
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/textInput/textInput.spec.ts b/apps/builder/src/features/blocks/inputs/textInput/textInput.spec.ts
index 5049676bae..2add3479e0 100644
--- a/apps/builder/src/features/blocks/inputs/textInput/textInput.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/textInput/textInput.spec.ts
@@ -1,112 +1,122 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
-import { defaultTextInputOptions } from '@typebot.io/schemas/features/blocks/inputs/text/constants'
-import { getTestAsset } from '@/test/utils/playwright'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { defaultTextInputOptions } from "@typebot.io/blocks-inputs/text/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-test.describe.parallel('Text input block', () => {
- test('options should work', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: InputBlockType.TEXT,
- }),
- },
- ])
+test.describe
+ .parallel("Text input block", () => {
+ test("options should work", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: InputBlockType.TEXT,
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click('text=Test')
- await expect(
- page.locator(
- `input[placeholder="${defaultTextInputOptions.labels.placeholder}"]`
- )
- ).toHaveAttribute('type', 'text')
+ await page.click("text=Test");
+ await expect(
+ page.locator(
+ `input[placeholder="${defaultTextInputOptions.labels.placeholder}"]`,
+ ),
+ ).toHaveAttribute("type", "text");
- await page.click(`text=${defaultTextInputOptions.labels.placeholder}`)
- await page.getByLabel('Placeholder:').fill('Your name...')
- await page.getByLabel('Button label:').fill('Go')
- await page.click('text=Long text?')
+ await page.click(`text=${defaultTextInputOptions.labels.placeholder}`);
+ await page.getByLabel("Placeholder:").fill("Your name...");
+ await page.getByLabel("Button label:").fill("Go");
+ await page.click("text=Long text?");
- await page.click('text=Restart')
- await expect(
- page.locator(`textarea[placeholder="Your name..."]`)
- ).toBeVisible()
- await expect(page.getByRole('button', { name: 'Go' })).toBeVisible()
- })
+ await page.click("text=Restart");
+ await expect(
+ page.locator(`textarea[placeholder="Your name..."]`),
+ ).toBeVisible();
+ await expect(page.getByRole("button", { name: "Go" })).toBeVisible();
+ });
- test('attachments should work', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: InputBlockType.TEXT,
- }),
- },
- ])
+ test("attachments should work", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: InputBlockType.TEXT,
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click(`text=${defaultTextInputOptions.labels.placeholder}`)
- await page.getByText('Allow attachments').click()
- await page.locator('[data-testid="variables-input"]').first().click()
- await page.getByText('var1').click()
- await page.getByRole('button', { name: 'Test' }).click()
- await page
- .getByPlaceholder('Type your answer...')
- .fill('Help me with these')
- await page.getByLabel('Add attachments').click()
- await expect(page.getByRole('menuitem', { name: 'Document' })).toBeVisible()
- await expect(
- page.getByRole('menuitem', { name: 'Photos & videos' })
- ).toBeVisible()
- await page
- .locator('#document-upload')
- .setInputFiles(getTestAsset('typebots/theme.json'))
- await expect(page.getByText('theme.json')).toBeVisible()
- await page
- .locator('#photos-upload')
- .setInputFiles([getTestAsset('avatar.jpg'), getTestAsset('avatar.jpg')])
- await expect(page.getByRole('img', { name: 'avatar.jpg' })).toHaveCount(2)
- await page.getByRole('img', { name: 'avatar.jpg' }).first().hover()
- await page.getByLabel('Remove attachment').first().click()
- await expect(page.getByRole('img', { name: 'avatar.jpg' })).toHaveCount(1)
- await page.getByLabel('Send').click()
- await expect(
- page.getByRole('img', { name: 'Attached image 1' })
- ).toBeVisible()
- await expect(page.getByText('Help me with these')).toBeVisible()
- })
+ await page.click(`text=${defaultTextInputOptions.labels.placeholder}`);
+ await page.getByText("Allow attachments").click();
+ await page.locator('[data-testid="variables-input"]').first().click();
+ await page.getByText("var1").click();
+ await page.getByRole("button", { name: "Test" }).click();
+ await page
+ .getByPlaceholder("Type your answer...")
+ .fill("Help me with these");
+ await page.getByLabel("Add attachments").click();
+ await expect(
+ page.getByRole("menuitem", { name: "Document" }),
+ ).toBeVisible();
+ await expect(
+ page.getByRole("menuitem", { name: "Photos & videos" }),
+ ).toBeVisible();
+ await page
+ .locator("#document-upload")
+ .setInputFiles(getTestAsset("typebots/theme.json"));
+ await expect(page.getByText("theme.json")).toBeVisible();
+ await page
+ .locator("#photos-upload")
+ .setInputFiles([
+ getTestAsset("avatar.jpg"),
+ getTestAsset("avatar.jpg"),
+ ]);
+ await expect(page.getByRole("img", { name: "avatar.jpg" })).toHaveCount(
+ 2,
+ );
+ await page.getByRole("img", { name: "avatar.jpg" }).first().hover();
+ await page.getByLabel("Remove attachment").first().click();
+ await expect(page.getByRole("img", { name: "avatar.jpg" })).toHaveCount(
+ 1,
+ );
+ await page.getByLabel("Send").click();
+ await expect(
+ page.getByRole("img", { name: "Attached image 1" }),
+ ).toBeVisible();
+ await expect(page.getByText("Help me with these")).toBeVisible();
+ });
- test('audio clips should work', async ({ page }) => {
- const typebotId = createId()
- await createTypebots([
- {
- id: typebotId,
- ...parseDefaultGroupWithBlock({
- type: InputBlockType.TEXT,
- }),
- },
- ])
+ test("audio clips should work", async ({ page }) => {
+ const typebotId = createId();
+ await createTypebots([
+ {
+ id: typebotId,
+ ...parseDefaultGroupWithBlock({
+ type: InputBlockType.TEXT,
+ }),
+ },
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click(`text=${defaultTextInputOptions.labels.placeholder}`)
- await page.getByText('Allow audio clip').click()
- await page.locator('[data-testid="variables-input"]').first().click()
- await page.getByText('var1').click()
- await page.getByRole('button', { name: 'Test' }).click()
- await page.getByRole('button', { name: 'Record voice' }).click()
- await page.waitForTimeout(1000)
- await page.getByRole('button', { name: 'Send' }).click()
- await expect(page.locator('audio')).toHaveAttribute(
- 'src',
- /http:\/\/localhost:9000/
- )
- })
-})
+ await page.click(`text=${defaultTextInputOptions.labels.placeholder}`);
+ await page.getByText("Allow audio clip").click();
+ await page.locator('[data-testid="variables-input"]').first().click();
+ await page.getByText("var1").click();
+ await page.getByRole("button", { name: "Test" }).click();
+ await page.getByRole("button", { name: "Record voice" }).click();
+ await page.waitForTimeout(1000);
+ await page.getByRole("button", { name: "Send" }).click();
+ await expect(page.locator("audio")).toHaveAttribute(
+ "src",
+ /blob:http:\/\/localhost:3000/,
+ );
+ });
+ });
diff --git a/apps/builder/src/features/blocks/inputs/url/components/UrlInputIcon.tsx b/apps/builder/src/features/blocks/inputs/url/components/UrlInputIcon.tsx
index 2bda3974f8..7611419403 100644
--- a/apps/builder/src/features/blocks/inputs/url/components/UrlInputIcon.tsx
+++ b/apps/builder/src/features/blocks/inputs/url/components/UrlInputIcon.tsx
@@ -1,7 +1,7 @@
-import { GlobeIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { GlobeIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const UrlInputIcon = (props: IconProps) => (
{
onChange={handlePlaceholderChange}
/>
{
/>
- {t('blocks.inputs.settings.saveAnswer.label')}
+ {t("blocks.inputs.settings.saveAnswer.label")}
{
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/url/components/UrlNodeContent.tsx b/apps/builder/src/features/blocks/inputs/url/components/UrlNodeContent.tsx
index 2792adf7c2..0d9307eb16 100644
--- a/apps/builder/src/features/blocks/inputs/url/components/UrlNodeContent.tsx
+++ b/apps/builder/src/features/blocks/inputs/url/components/UrlNodeContent.tsx
@@ -1,20 +1,20 @@
-import React from 'react'
-import { Text } from '@chakra-ui/react'
-import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
-import { UrlInputBlock } from '@typebot.io/schemas'
-import { defaultUrlInputOptions } from '@typebot.io/schemas/features/blocks/inputs/url/constants'
+import { WithVariableContent } from "@/features/graph/components/nodes/block/WithVariableContent";
+import { Text } from "@chakra-ui/react";
+import { defaultUrlInputOptions } from "@typebot.io/blocks-inputs/url/constants";
+import type { UrlInputBlock } from "@typebot.io/blocks-inputs/url/schema";
+import React from "react";
type Props = {
- options: UrlInputBlock['options']
-}
+ options: UrlInputBlock["options"];
+};
export const UrlNodeContent = ({ options }: Props) => {
return options?.variableId ? (
+
{options?.labels?.placeholder ??
defaultUrlInputOptions.labels.placeholder}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/inputs/url/url.spec.ts b/apps/builder/src/features/blocks/inputs/url/url.spec.ts
index 9bcd6ca3e2..cd78adb19e 100644
--- a/apps/builder/src/features/blocks/inputs/url/url.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/url/url.spec.ts
@@ -1,13 +1,13 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
-import { defaultUrlInputOptions } from '@typebot.io/schemas/features/blocks/inputs/url/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { defaultUrlInputOptions } from "@typebot.io/blocks-inputs/url/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-test.describe('Url input block', () => {
- test('options should work', async ({ page }) => {
- const typebotId = createId()
+test.describe("Url input block", () => {
+ test("options should work", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -15,34 +15,34 @@ test.describe('Url input block', () => {
type: InputBlockType.URL,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
- await page.click('text=Test')
+ await page.click("text=Test");
await expect(
page.locator(
- `input[placeholder="${defaultUrlInputOptions.labels.placeholder}"]`
- )
- ).toHaveAttribute('type', 'url')
+ `input[placeholder="${defaultUrlInputOptions.labels.placeholder}"]`,
+ ),
+ ).toHaveAttribute("type", "url");
- await page.click(`text=${defaultUrlInputOptions.labels.placeholder}`)
- await page.getByLabel('Placeholder:').fill('Your URL...')
- await expect(page.locator('text=Your URL...')).toBeVisible()
- await page.getByLabel('Button label:').fill('Go')
+ await page.click(`text=${defaultUrlInputOptions.labels.placeholder}`);
+ await page.getByLabel("Placeholder:").fill("Your URL...");
+ await expect(page.locator("text=Your URL...")).toBeVisible();
+ await page.getByLabel("Button label:").fill("Go");
await page.fill(
`input[value="${defaultUrlInputOptions.retryMessageContent}"]`,
- 'Try again bro'
- )
+ "Try again bro",
+ );
- await page.click('text=Restart')
- await page.locator(`input[placeholder="Your URL..."]`).fill('test')
- await page.locator('button >> text="Go"').click()
- await expect(page.locator('text=Try again bro')).toBeVisible()
+ await page.click("text=Restart");
+ await page.locator(`input[placeholder="Your URL..."]`).fill("test");
+ await page.locator('button >> text="Go"').click();
+ await expect(page.locator("text=Try again bro")).toBeVisible();
await page
.locator(`input[placeholder="Your URL..."]`)
- .fill('https://website.com')
- await page.locator('button >> text="Go"').click()
- await expect(page.locator('text=https://website.com')).toBeVisible()
- })
-})
+ .fill("https://website.com");
+ await page.locator('button >> text="Go"').click();
+ await expect(page.locator("text=https://website.com")).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/blocks/integrations/chatwoot/chatwoot.spec.ts b/apps/builder/src/features/blocks/integrations/chatwoot/chatwoot.spec.ts
index d51e2147c4..9778bd637d 100644
--- a/apps/builder/src/features/blocks/integrations/chatwoot/chatwoot.spec.ts
+++ b/apps/builder/src/features/blocks/integrations/chatwoot/chatwoot.spec.ts
@@ -1,16 +1,16 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integrations/constants'
-import { defaultChatwootOptions } from '@typebot.io/schemas/features/blocks/integrations/chatwoot/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { defaultChatwootOptions } from "@typebot.io/blocks-integrations/chatwoot/constants";
+import { IntegrationBlockType } from "@typebot.io/blocks-integrations/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-const typebotId = createId()
+const typebotId = createId();
-const chatwootTestWebsiteToken = 'tueXiiqEmrWUCZ4NUyoR7nhE'
+const chatwootTestWebsiteToken = "tueXiiqEmrWUCZ4NUyoR7nhE";
-test.describe('Chatwoot block', () => {
- test('should be configurable', async ({ page }) => {
+test.describe("Chatwoot block", () => {
+ test("should be configurable", async ({ page }) => {
await createTypebots([
{
id: typebotId,
@@ -18,25 +18,25 @@ test.describe('Chatwoot block', () => {
type: IntegrationBlockType.CHATWOOT,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.getByText('Configure...').click()
- await expect(page.getByLabel('Base URL')).toHaveAttribute(
- 'value',
- defaultChatwootOptions.baseUrl
- )
- await page.getByLabel('Website token').fill(chatwootTestWebsiteToken)
- await expect(page.getByText('Open Chatwoot')).toBeVisible()
- await page.getByRole('button', { name: 'Set user details' }).click()
- await page.getByLabel('ID').fill('123')
- await page.getByLabel('Name').fill('John Doe')
- await page.getByLabel('Email').fill('john@email.com')
- await page.getByLabel('Avatar URL').fill('https://domain.com/avatar.png')
- await page.getByLabel('Phone number').fill('+33654347543')
- await page.getByRole('button', { name: 'Test', exact: true }).click()
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.getByText("Configure...").click();
+ await expect(page.getByLabel("Base URL")).toHaveAttribute(
+ "value",
+ defaultChatwootOptions.baseUrl,
+ );
+ await page.getByLabel("Website token").fill(chatwootTestWebsiteToken);
+ await expect(page.getByText("Open Chatwoot")).toBeVisible();
+ await page.getByRole("button", { name: "Set user details" }).click();
+ await page.getByLabel("ID").fill("123");
+ await page.getByLabel("Name").fill("John Doe");
+ await page.getByLabel("Email").fill("john@email.com");
+ await page.getByLabel("Avatar URL").fill("https://domain.com/avatar.png");
+ await page.getByLabel("Phone number").fill("+33654347543");
+ await page.getByRole("button", { name: "Test", exact: true }).click();
await expect(
- page.getByText('Chatwoot block is not supported in preview').nth(0)
- ).toBeVisible()
- })
-})
+ page.getByText("Chatwoot block is not supported in preview").nth(0),
+ ).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootLogo.tsx b/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootLogo.tsx
index 07ae02fe6e..b95e75adcf 100644
--- a/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootLogo.tsx
+++ b/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootLogo.tsx
@@ -1,4 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const ChatwootLogo = (props: IconProps) => (
(
-)
+);
diff --git a/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootNodeBody.tsx b/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootNodeBody.tsx
index 910d148085..ad87fc23f3 100644
--- a/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootNodeBody.tsx
+++ b/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootNodeBody.tsx
@@ -1,15 +1,15 @@
-import { Text } from '@chakra-ui/react'
-import { ChatwootBlock } from '@typebot.io/schemas'
+import { Text } from "@chakra-ui/react";
+import type { ChatwootBlock } from "@typebot.io/blocks-integrations/chatwoot/schema";
type Props = {
- block: ChatwootBlock
-}
+ block: ChatwootBlock;
+};
export const ChatwootNodeBody = ({ block }: Props) =>
- block.options?.task === 'Close widget' ? (
+ block.options?.task === "Close widget" ? (
Close Chatwoot
) : (block.options?.websiteToken?.length ?? 0) === 0 ? (
Configure...
) : (
Open Chatwoot
- )
+ );
diff --git a/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootSettings.tsx b/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootSettings.tsx
index fdc4678cae..72e5430d1c 100644
--- a/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootSettings.tsx
+++ b/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootSettings.tsx
@@ -1,5 +1,5 @@
-import { DropdownList } from '@/components/DropdownList'
-import { TextInput } from '@/components/inputs'
+import { DropdownList } from "@/components/DropdownList";
+import { TextInput } from "@/components/inputs";
import {
Accordion,
AccordionButton,
@@ -7,25 +7,25 @@ import {
AccordionItem,
AccordionPanel,
Stack,
-} from '@chakra-ui/react'
-import { ChatwootBlock } from '@typebot.io/schemas'
+} from "@chakra-ui/react";
import {
chatwootTasks,
defaultChatwootOptions,
-} from '@typebot.io/schemas/features/blocks/integrations/chatwoot/constants'
-import React from 'react'
+} from "@typebot.io/blocks-integrations/chatwoot/constants";
+import type { ChatwootBlock } from "@typebot.io/blocks-integrations/chatwoot/schema";
+import React from "react";
type Props = {
- options: ChatwootBlock['options']
- onOptionsChange: (options: ChatwootBlock['options']) => void
-}
+ options: ChatwootBlock["options"];
+ onOptionsChange: (options: ChatwootBlock["options"]) => void;
+};
export const ChatwootSettings = ({ options, onOptionsChange }: Props) => {
const updateTask = (task: (typeof chatwootTasks)[number]) => {
- onOptionsChange({ ...options, task })
- }
+ onOptionsChange({ ...options, task });
+ };
- const task = options?.task ?? defaultChatwootOptions.task
+ const task = options?.task ?? defaultChatwootOptions.task;
return (
@@ -34,14 +34,14 @@ export const ChatwootSettings = ({ options, onOptionsChange }: Props) => {
onItemSelect={updateTask}
items={chatwootTasks}
/>
- {task === 'Show widget' && (
+ {task === "Show widget" && (
<>
{
- onOptionsChange({ ...options, baseUrl })
+ onOptionsChange({ ...options, baseUrl });
}}
withVariableButton={false}
/>
@@ -68,7 +68,7 @@ export const ChatwootSettings = ({ options, onOptionsChange }: Props) => {
onOptionsChange({
...options,
user: { ...options?.user, id },
- })
+ });
}}
/>
{
onOptionsChange({
...options,
user: { ...options?.user, name },
- })
+ });
}}
/>
{
onOptionsChange({
...options,
user: { ...options?.user, email },
- })
+ });
}}
/>
{
onOptionsChange({
...options,
user: { ...options?.user, avatarUrl },
- })
+ });
}}
/>
{
onOptionsChange({
...options,
user: { ...options?.user, phoneNumber },
- })
+ });
}}
/>
@@ -117,5 +117,5 @@ export const ChatwootSettings = ({ options, onOptionsChange }: Props) => {
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsLogo.tsx b/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsLogo.tsx
index 74444291ab..fd15b16b53 100644
--- a/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsLogo.tsx
+++ b/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsLogo.tsx
@@ -1,4 +1,4 @@
-import { IconProps, Icon } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const GoogleAnalyticsLogo = (props: IconProps) => (
@@ -98,4 +98,4 @@ export const GoogleAnalyticsLogo = (props: IconProps) => (
-)
+);
diff --git a/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsNodeBody.tsx b/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsNodeBody.tsx
index a3d69f8eff..fb697f5442 100644
--- a/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsNodeBody.tsx
+++ b/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsNodeBody.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
-import { Text } from '@chakra-ui/react'
-import { GoogleAnalyticsBlock } from '@typebot.io/schemas'
+import { Text } from "@chakra-ui/react";
+import type { GoogleAnalyticsBlock } from "@typebot.io/blocks-integrations/googleAnalytics/schema";
+import React from "react";
type Props = {
- action: NonNullable['action']
-}
+ action: NonNullable["action"];
+};
export const GoogleAnalyticsNodeBody = ({ action }: Props) => (
-
- {action ? `Track "${action}"` : 'Configure...'}
+
+ {action ? `Track "${action}"` : "Configure..."}
-)
+);
diff --git a/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx b/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx
index 62c65a0c81..39ebfd8dbd 100644
--- a/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx
+++ b/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx
@@ -1,4 +1,4 @@
-import { NumberInput, TextInput } from '@/components/inputs'
+import { NumberInput, TextInput } from "@/components/inputs";
import {
Accordion,
AccordionButton,
@@ -7,41 +7,41 @@ import {
AccordionPanel,
Box,
Stack,
-} from '@chakra-ui/react'
-import { GoogleAnalyticsBlock } from '@typebot.io/schemas'
-import React from 'react'
+} from "@chakra-ui/react";
+import type { GoogleAnalyticsBlock } from "@typebot.io/blocks-integrations/googleAnalytics/schema";
+import React from "react";
type Props = {
- options?: GoogleAnalyticsBlock['options']
- onOptionsChange: (options: GoogleAnalyticsBlock['options']) => void
-}
+ options?: GoogleAnalyticsBlock["options"];
+ onOptionsChange: (options: GoogleAnalyticsBlock["options"]) => void;
+};
export const GoogleAnalyticsSettings = ({
options,
onOptionsChange,
}: Props) => {
const updateTrackingId = (trackingId: string) =>
- onOptionsChange({ ...options, trackingId })
+ onOptionsChange({ ...options, trackingId });
const updateCategory = (category: string) =>
- onOptionsChange({ ...options, category })
+ onOptionsChange({ ...options, category });
const updateAction = (action: string) =>
- onOptionsChange({ ...options, action })
+ onOptionsChange({ ...options, action });
- const updateLabel = (label: string) => onOptionsChange({ ...options, label })
+ const updateLabel = (label: string) => onOptionsChange({ ...options, label });
const updateValue = (value: number | `{{${string}}}` | undefined) =>
onOptionsChange({
...options,
value,
- })
+ });
const updateSendTo = (sendTo?: string) =>
onOptionsChange({
...options,
sendTo,
- })
+ });
return (
@@ -99,5 +99,5 @@ export const GoogleAnalyticsSettings = ({
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleAnalytics/googleAnalytics.spec.ts b/apps/builder/src/features/blocks/integrations/googleAnalytics/googleAnalytics.spec.ts
index a4966ffc3c..8dde63c5b6 100644
--- a/apps/builder/src/features/blocks/integrations/googleAnalytics/googleAnalytics.spec.ts
+++ b/apps/builder/src/features/blocks/integrations/googleAnalytics/googleAnalytics.spec.ts
@@ -1,12 +1,12 @@
-import test from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integrations/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test from "@playwright/test";
+import { IntegrationBlockType } from "@typebot.io/blocks-integrations/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-test.describe('Google Analytics block', () => {
- test('its configuration should work', async ({ page }) => {
- const typebotId = createId()
+test.describe("Google Analytics block", () => {
+ test("its configuration should work", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -14,15 +14,15 @@ test.describe('Google Analytics block', () => {
type: IntegrationBlockType.GOOGLE_ANALYTICS,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Configure...')
- await page.fill('input[placeholder="G-123456..."]', 'G-VWX9WG1TNS')
- await page.fill('input[placeholder="Example: conversion"]', 'conversion')
- await page.click('text=Advanced')
- await page.fill('input[placeholder="Example: Typebot"]', 'Typebot')
- await page.fill('input[placeholder="Example: Campaign Z"]', 'Campaign Z')
- await page.fill('input[placeholder="Example: 0"]', '0')
- })
-})
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Configure...");
+ await page.fill('input[placeholder="G-123456..."]', "G-VWX9WG1TNS");
+ await page.fill('input[placeholder="Example: conversion"]', "conversion");
+ await page.click("text=Advanced");
+ await page.fill('input[placeholder="Example: Typebot"]', "Typebot");
+ await page.fill('input[placeholder="Example: Campaign Z"]', "Campaign Z");
+ await page.fill('input[placeholder="Example: 0"]', "0");
+ });
+});
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/api/getAccessToken.ts b/apps/builder/src/features/blocks/integrations/googleSheets/api/getAccessToken.ts
index 92bf7a27e1..64d4b7dd06 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/api/getAccessToken.ts
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/api/getAccessToken.ts
@@ -1,19 +1,19 @@
-import prisma from '@typebot.io/lib/prisma'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { z } from 'zod'
-import { isReadWorkspaceFobidden } from '@/features/workspace/helpers/isReadWorkspaceFobidden'
-import { decrypt } from '@typebot.io/lib/api/encryption/decrypt'
-import { GoogleSheetsCredentials } from '@typebot.io/schemas'
-import { OAuth2Client } from 'google-auth-library'
-import { env } from '@typebot.io/env'
+import { isReadWorkspaceFobidden } from "@/features/workspace/helpers/isReadWorkspaceFobidden";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import type { GoogleSheetsCredentials } from "@typebot.io/blocks-integrations/googleSheets/schema";
+import { env } from "@typebot.io/env";
+import { decrypt } from "@typebot.io/lib/api/encryption/decrypt";
+import prisma from "@typebot.io/prisma";
+import { z } from "@typebot.io/zod";
+import { OAuth2Client } from "google-auth-library";
export const getAccessToken = authenticatedProcedure
.input(
z.object({
workspaceId: z.string(),
credentialsId: z.string(),
- })
+ }),
)
.query(async ({ input: { workspaceId, credentialsId }, ctx: { user } }) => {
const workspace = await prisma.workspace.findFirst({
@@ -33,28 +33,31 @@ export const getAccessToken = authenticatedProcedure
},
},
},
- })
+ });
if (!workspace || isReadWorkspaceFobidden(workspace, user))
- throw new TRPCError({ code: 'NOT_FOUND', message: 'Workspace not found' })
+ throw new TRPCError({
+ code: "NOT_FOUND",
+ message: "Workspace not found",
+ });
- const credentials = workspace.credentials[0]
+ const credentials = workspace.credentials[0];
if (!credentials)
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Credentials not found',
- })
+ code: "NOT_FOUND",
+ message: "Credentials not found",
+ });
const decryptedCredentials = (await decrypt(
credentials.data,
- credentials.iv
- )) as GoogleSheetsCredentials['data']
+ credentials.iv,
+ )) as GoogleSheetsCredentials["data"];
const client = new OAuth2Client({
clientId: env.GOOGLE_CLIENT_ID,
clientSecret: env.GOOGLE_CLIENT_SECRET,
redirectUri: `${env.NEXTAUTH_URL}/api/credentials/google-sheets/callback`,
- })
+ });
- client.setCredentials(decryptedCredentials)
+ client.setCredentials(decryptedCredentials);
- return { accessToken: (await client.getAccessToken()).token }
- })
+ return { accessToken: (await client.getAccessToken()).token };
+ });
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/api/getSpreadsheetName.ts b/apps/builder/src/features/blocks/integrations/googleSheets/api/getSpreadsheetName.ts
index 5a19ca83a6..ebeecc48e0 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/api/getSpreadsheetName.ts
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/api/getSpreadsheetName.ts
@@ -1,10 +1,10 @@
-import prisma from '@typebot.io/lib/prisma'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { z } from 'zod'
-import { isReadWorkspaceFobidden } from '@/features/workspace/helpers/isReadWorkspaceFobidden'
-import { getAuthenticatedGoogleClient } from '@typebot.io/lib/google'
-import { GoogleSpreadsheet } from 'google-spreadsheet'
+import { isReadWorkspaceFobidden } from "@/features/workspace/helpers/isReadWorkspaceFobidden";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import { getAuthenticatedGoogleClient } from "@typebot.io/lib/google";
+import prisma from "@typebot.io/prisma";
+import { z } from "@typebot.io/zod";
+import { GoogleSpreadsheet } from "google-spreadsheet";
export const getSpreadsheetName = authenticatedProcedure
.input(
@@ -12,7 +12,7 @@ export const getSpreadsheetName = authenticatedProcedure
workspaceId: z.string(),
credentialsId: z.string(),
spreadsheetId: z.string(),
- })
+ }),
)
.query(
async ({
@@ -37,36 +37,36 @@ export const getSpreadsheetName = authenticatedProcedure
},
},
},
- })
+ });
if (!workspace || isReadWorkspaceFobidden(workspace, user))
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Workspace not found',
- })
+ code: "NOT_FOUND",
+ message: "Workspace not found",
+ });
- const credentials = workspace.credentials[0]
+ const credentials = workspace.credentials[0];
if (!credentials)
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Credentials not found',
- })
+ code: "NOT_FOUND",
+ message: "Credentials not found",
+ });
- const client = await getAuthenticatedGoogleClient(credentials.id)
+ const client = await getAuthenticatedGoogleClient(credentials.id);
if (!client)
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Google client could not be initialized',
- })
+ code: "NOT_FOUND",
+ message: "Google client could not be initialized",
+ });
try {
- const googleSheet = new GoogleSpreadsheet(spreadsheetId, client)
+ const googleSheet = new GoogleSpreadsheet(spreadsheetId, client);
- await googleSheet.loadInfo()
+ await googleSheet.loadInfo();
- return { name: googleSheet.title }
+ return { name: googleSheet.title };
} catch (e) {
- return { name: '' }
+ return { name: "" };
}
- }
- )
+ },
+ );
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/api/router.ts b/apps/builder/src/features/blocks/integrations/googleSheets/api/router.ts
index 8f3ae6d4b3..139ff81b9a 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/api/router.ts
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/api/router.ts
@@ -1,8 +1,8 @@
-import { router } from '@/helpers/server/trpc'
-import { getAccessToken } from './getAccessToken'
-import { getSpreadsheetName } from './getSpreadsheetName'
+import { router } from "@/helpers/server/trpc";
+import { getAccessToken } from "./getAccessToken";
+import { getSpreadsheetName } from "./getSpreadsheetName";
export const googleSheetsRouter = router({
getAccessToken,
getSpreadsheetName,
-})
+});
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/components/CellWithValueStack.tsx b/apps/builder/src/features/blocks/integrations/googleSheets/components/CellWithValueStack.tsx
index 236c57e31a..b21ae1e6ea 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/components/CellWithValueStack.tsx
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/components/CellWithValueStack.tsx
@@ -1,8 +1,8 @@
-import { Stack } from '@chakra-ui/react'
-import { DropdownList } from '@/components/DropdownList'
-import { Cell } from '@typebot.io/schemas'
-import { TableListItemProps } from '@/components/TableList'
-import { TextInput } from '@/components/inputs'
+import { DropdownList } from "@/components/DropdownList";
+import type { TableListItemProps } from "@/components/TableList";
+import { TextInput } from "@/components/inputs";
+import { Stack } from "@chakra-ui/react";
+import type { Cell } from "@typebot.io/blocks-integrations/googleSheets/schema";
export const CellWithValueStack = ({
item,
@@ -10,13 +10,13 @@ export const CellWithValueStack = ({
columns,
}: TableListItemProps & { columns: string[] }) => {
const handleColumnSelect = (column: string) => {
- if (item.column === column) return
- onItemChange({ ...item, column })
- }
+ if (item.column === column) return;
+ onItemChange({ ...item, column });
+ };
const handleValueChange = (value: string) => {
- if (item.value === value) return
- onItemChange({ ...item, value })
- }
+ if (item.value === value) return;
+ onItemChange({ ...item, value });
+ };
return (
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/components/CellWithVariableIdStack.tsx b/apps/builder/src/features/blocks/integrations/googleSheets/components/CellWithVariableIdStack.tsx
index a8b041c478..81e425cb44 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/components/CellWithVariableIdStack.tsx
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/components/CellWithVariableIdStack.tsx
@@ -1,8 +1,9 @@
-import { Stack } from '@chakra-ui/react'
-import { DropdownList } from '@/components/DropdownList'
-import { ExtractingCell, Variable } from '@typebot.io/schemas'
-import { TableListItemProps } from '@/components/TableList'
-import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
+import { DropdownList } from "@/components/DropdownList";
+import type { TableListItemProps } from "@/components/TableList";
+import { VariableSearchInput } from "@/components/inputs/VariableSearchInput";
+import { Stack } from "@chakra-ui/react";
+import type { ExtractingCell } from "@typebot.io/blocks-integrations/googleSheets/schema";
+import type { Variable } from "@typebot.io/variables/schemas";
export const CellWithVariableIdStack = ({
item,
@@ -10,14 +11,14 @@ export const CellWithVariableIdStack = ({
columns,
}: TableListItemProps & { columns: string[] }) => {
const handleColumnSelect = (column: string) => {
- if (item.column === column) return
- onItemChange({ ...item, column })
- }
+ if (item.column === column) return;
+ onItemChange({ ...item, column });
+ };
const handleVariableIdChange = (variable?: Variable) => {
- if (item.variableId === variable?.id) return
- onItemChange({ ...item, variableId: variable?.id })
- }
+ if (item.variableId === variable?.id) return;
+ onItemChange({ ...item, variableId: variable?.id });
+ };
return (
@@ -33,5 +34,5 @@ export const CellWithVariableIdStack = ({
placeholder="Select a variable"
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsConnectModal.tsx b/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsConnectModal.tsx
index 35d7905107..186c113822 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsConnectModal.tsx
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsConnectModal.tsx
@@ -1,30 +1,30 @@
+import { AlertInfo } from "@/components/AlertInfo";
+import { GoogleLogo } from "@/components/GoogleLogo";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
import {
+ Button,
+ Flex,
+ Image,
Modal,
- ModalOverlay,
+ ModalBody,
+ ModalCloseButton,
ModalContent,
+ ModalFooter,
ModalHeader,
- ModalCloseButton,
- ModalBody,
+ ModalOverlay,
Stack,
Text,
- Image,
- Button,
- ModalFooter,
- Flex,
-} from '@chakra-ui/react'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import Link from 'next/link'
-import React from 'react'
-import { AlertInfo } from '@/components/AlertInfo'
-import { GoogleLogo } from '@/components/GoogleLogo'
-import { getGoogleSheetsConsentScreenUrlQuery } from '../queries/getGoogleSheetsConsentScreenUrlQuery'
+} from "@chakra-ui/react";
+import Link from "next/link";
+import React from "react";
+import { getGoogleSheetsConsentScreenUrlQuery } from "../queries/getGoogleSheetsConsentScreenUrlQuery";
type Props = {
- isOpen: boolean
- typebotId?: string
- blockId?: string
- onClose: () => void
-}
+ isOpen: boolean;
+ typebotId?: string;
+ blockId?: string;
+ onClose: () => void;
+};
export const GoogleSheetConnectModal = ({
typebotId,
@@ -37,17 +37,17 @@ export const GoogleSheetConnectModal = ({
@@ -75,13 +75,13 @@ export const GoogleSheetConnectModalContent = ({
as={Link}
leftIcon={
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsLogo.tsx b/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsLogo.tsx
index db05f2ff1b..0da8d2a6e0 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsLogo.tsx
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsLogo.tsx
@@ -1,4 +1,4 @@
-import { IconProps, Icon } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const GoogleSheetsLogo = (props: IconProps) => (
@@ -141,4 +141,4 @@ export const GoogleSheetsLogo = (props: IconProps) => (
-)
+);
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsNodeContent.tsx b/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsNodeContent.tsx
index 78ca6bd942..03b1bc90f6 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsNodeContent.tsx
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsNodeContent.tsx
@@ -1,20 +1,20 @@
-import React from 'react'
-import { Stack, Text } from '@chakra-ui/react'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { SetVariableLabel } from '@/components/SetVariableLabel'
-import { GoogleSheetsBlock } from '@typebot.io/schemas'
-import { GoogleSheetsAction } from '@typebot.io/schemas/features/blocks/integrations/googleSheets/constants'
+import { SetVariableLabel } from "@/components/SetVariableLabel";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { Stack, Text } from "@chakra-ui/react";
+import { GoogleSheetsAction } from "@typebot.io/blocks-integrations/googleSheets/constants";
+import type { GoogleSheetsBlock } from "@typebot.io/blocks-integrations/googleSheets/schema";
+import React from "react";
type Props = {
- options?: GoogleSheetsBlock['options']
-}
+ options?: GoogleSheetsBlock["options"];
+};
export const GoogleSheetsNodeContent = ({ options }: Props) => {
- const { typebot } = useTypebot()
+ const { typebot } = useTypebot();
return (
-
- {options?.action ?? 'Configure...'}
+
+ {options?.action ?? "Configure..."}
{typebot &&
options?.action === GoogleSheetsAction.GET &&
@@ -27,8 +27,8 @@ export const GoogleSheetsNodeContent = ({ options }: Props) => {
variables={typebot.variables}
variableId={variableId}
/>
- ) : null
+ ) : null,
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettings.tsx b/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettings.tsx
index 2777a006f2..1ba30f2344 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettings.tsx
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettings.tsx
@@ -1,3 +1,8 @@
+import { DropdownList } from "@/components/DropdownList";
+import { TableList } from "@/components/TableList";
+import { CredentialsDropdown } from "@/features/credentials/components/CredentialsDropdown";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
import {
Accordion,
AccordionButton,
@@ -7,10 +12,13 @@ import {
Stack,
Text,
useDisclosure,
-} from '@chakra-ui/react'
-import { DropdownList } from '@/components/DropdownList'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+} from "@chakra-ui/react";
import {
+ GoogleSheetsAction,
+ defaultGoogleSheetsOptions,
+ totalRowsToExtractOptions,
+} from "@typebot.io/blocks-integrations/googleSheets/constants";
+import type {
Cell,
ExtractingCell,
GoogleSheetsBlock,
@@ -18,58 +26,50 @@ import {
GoogleSheetsGetOptionsV6,
GoogleSheetsInsertRowOptions,
GoogleSheetsUpdateRowOptionsV6,
-} from '@typebot.io/schemas'
-import React, { useMemo } from 'react'
-import { isDefined } from '@typebot.io/lib'
-import { SheetsDropdown } from './SheetsDropdown'
-import { CellWithValueStack } from './CellWithValueStack'
-import { CellWithVariableIdStack } from './CellWithVariableIdStack'
-import { GoogleSheetConnectModal } from './GoogleSheetsConnectModal'
-import { TableList } from '@/components/TableList'
-import { CredentialsDropdown } from '@/features/credentials/components/CredentialsDropdown'
-import { RowsFilterTableList } from './RowsFilterTableList'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { useSheets } from '../hooks/useSheets'
-import { Sheet } from '../types'
-import {
- GoogleSheetsAction,
- defaultGoogleSheetsOptions,
- totalRowsToExtractOptions,
-} from '@typebot.io/schemas/features/blocks/integrations/googleSheets/constants'
-import { GoogleSpreadsheetPicker } from './GoogleSpreadsheetPicker'
+} from "@typebot.io/blocks-integrations/googleSheets/schema";
+import { isDefined } from "@typebot.io/lib/utils";
+import React, { useMemo } from "react";
+import { useSheets } from "../hooks/useSheets";
+import type { Sheet } from "../types";
+import { CellWithValueStack } from "./CellWithValueStack";
+import { CellWithVariableIdStack } from "./CellWithVariableIdStack";
+import { GoogleSheetConnectModal } from "./GoogleSheetsConnectModal";
+import { GoogleSpreadsheetPicker } from "./GoogleSpreadsheetPicker";
+import { RowsFilterTableList } from "./RowsFilterTableList";
+import { SheetsDropdown } from "./SheetsDropdown";
type Props = {
- options: GoogleSheetsBlock['options']
- onOptionsChange: (options: GoogleSheetsBlock['options']) => void
- blockId: string
-}
+ options: GoogleSheetsBlock["options"];
+ onOptionsChange: (options: GoogleSheetsBlock["options"]) => void;
+ blockId: string;
+};
export const GoogleSheetsSettings = ({
options,
onOptionsChange,
blockId,
}: Props) => {
- const { workspace } = useWorkspace()
- const { typebot } = useTypebot()
- const { save } = useTypebot()
+ const { workspace } = useWorkspace();
+ const { typebot } = useTypebot();
+ const { save } = useTypebot();
const { sheets, isLoading } = useSheets({
credentialsId: options?.credentialsId,
spreadsheetId: options?.spreadsheetId,
- })
- const { isOpen, onOpen, onClose } = useDisclosure()
+ });
+ const { isOpen, onOpen, onClose } = useDisclosure();
const sheet = useMemo(
() => sheets?.find((s) => s.id === options?.sheetId),
- [sheets, options?.sheetId]
- )
+ [sheets, options?.sheetId],
+ );
const handleCredentialsIdChange = (credentialsId: string | undefined) =>
onOptionsChange({
...options,
credentialsId,
- })
+ });
const handleSpreadsheetIdChange = (spreadsheetId: string | undefined) =>
- onOptionsChange({ ...options, spreadsheetId })
+ onOptionsChange({ ...options, spreadsheetId });
const handleSheetIdChange = (sheetId: string | undefined) =>
- onOptionsChange({ ...options, sheetId })
+ onOptionsChange({ ...options, sheetId });
const handleActionChange = (action: GoogleSheetsAction) =>
onOptionsChange({
@@ -77,12 +77,12 @@ export const GoogleSheetsSettings = ({
spreadsheetId: options?.spreadsheetId,
sheetId: options?.sheetId,
action,
- })
+ });
const handleCreateNewClick = async () => {
- await save()
- onOpen()
- }
+ await save();
+ onOpen();
+ };
return (
@@ -124,7 +124,7 @@ export const GoogleSheetsSettings = ({
options.credentialsId &&
isDefined(options.sheetId) && (
- )
-}
+ );
+};
const ActionOptions = ({
options,
@@ -149,38 +149,38 @@ const ActionOptions = ({
options:
| GoogleSheetsGetOptionsV6
| GoogleSheetsInsertRowOptions
- | GoogleSheetsUpdateRowOptionsV6
- sheet?: Sheet
- onOptionsChange: (options: GoogleSheetsBlock['options']) => void
+ | GoogleSheetsUpdateRowOptionsV6;
+ sheet?: Sheet;
+ onOptionsChange: (options: GoogleSheetsBlock["options"]) => void;
}) => {
const handleInsertColumnsChange = (cellsToInsert: Cell[]) =>
onOptionsChange({
...options,
cellsToInsert,
- } as GoogleSheetsBlock['options'])
+ } as GoogleSheetsBlock["options"]);
const handleUpsertColumnsChange = (cellsToUpsert: Cell[]) =>
onOptionsChange({
...options,
cellsToUpsert,
- } as GoogleSheetsBlock['options'])
+ } as GoogleSheetsBlock["options"]);
const handleExtractingCellsChange = (cellsToExtract: ExtractingCell[]) =>
onOptionsChange({
...options,
cellsToExtract,
- } as GoogleSheetsBlock['options'])
+ } as GoogleSheetsBlock["options"]);
- const handleFilterChange = (filter: GoogleSheetsGetOptions['filter']) =>
- onOptionsChange({ ...options, filter } as GoogleSheetsBlock['options'])
+ const handleFilterChange = (filter: GoogleSheetsGetOptions["filter"]) =>
+ onOptionsChange({ ...options, filter } as GoogleSheetsBlock["options"]);
const updateTotalRowsToExtract = (
- totalRowsToExtract: GoogleSheetsGetOptions['totalRowsToExtract']
+ totalRowsToExtract: GoogleSheetsGetOptions["totalRowsToExtract"],
) =>
onOptionsChange({
...options,
totalRowsToExtract,
- } as GoogleSheetsBlock['options'])
+ } as GoogleSheetsBlock["options"]);
switch (options.action) {
case GoogleSheetsAction.INSERT_ROW:
@@ -198,7 +198,7 @@ const ActionOptions = ({
/>
)}
- )
+ );
case GoogleSheetsAction.UPDATE_ROW:
return (
@@ -243,37 +243,35 @@ const ActionOptions = ({
- )
+ );
case GoogleSheetsAction.GET:
return (
- <>
-
-
-
- Select row(s)
-
-
+
+
+
+ Select row(s)
+
+
-
-
-
-
+
+
+
@@ -302,8 +300,8 @@ const ActionOptions = ({
- )
+ );
default:
- return <>
+ return <>;
}
-}
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSpreadsheetPicker.tsx b/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSpreadsheetPicker.tsx
index 2c87c96a66..f644cb819d 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSpreadsheetPicker.tsx
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSpreadsheetPicker.tsx
@@ -1,20 +1,20 @@
-import { FileIcon } from '@/components/icons'
-import { trpc } from '@/lib/trpc'
-import { Button, Flex, HStack, IconButton, Text } from '@chakra-ui/react'
-import { env } from '@typebot.io/env'
-import React, { useEffect, useState } from 'react'
-import { GoogleSheetsLogo } from './GoogleSheetsLogo'
-import { isDefined } from '@typebot.io/lib'
+import { FileIcon } from "@/components/icons";
+import { trpc } from "@/lib/trpc";
+import { Button, Flex, HStack, IconButton, Text } from "@chakra-ui/react";
+import { env } from "@typebot.io/env";
+import { isDefined } from "@typebot.io/lib/utils";
+import React, { useEffect, useState } from "react";
+import { GoogleSheetsLogo } from "./GoogleSheetsLogo";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare const window: any
+declare const window: any;
type Props = {
- spreadsheetId?: string
- credentialsId: string
- workspaceId: string
- onSpreadsheetIdSelect: (spreadsheetId: string) => void
-}
+ spreadsheetId?: string;
+ credentialsId: string;
+ workspaceId: string;
+ onSpreadsheetIdSelect: (spreadsheetId: string) => void;
+};
export const GoogleSpreadsheetPicker = ({
spreadsheetId,
@@ -22,12 +22,12 @@ export const GoogleSpreadsheetPicker = ({
credentialsId,
onSpreadsheetIdSelect,
}: Props) => {
- const [isPickerInitialized, setIsPickerInitialized] = useState(false)
+ const [isPickerInitialized, setIsPickerInitialized] = useState(false);
const { data } = trpc.sheets.getAccessToken.useQuery({
workspaceId,
credentialsId,
- })
+ });
const { data: spreadsheetData, status } =
trpc.sheets.getSpreadsheetName.useQuery(
{
@@ -35,60 +35,60 @@ export const GoogleSpreadsheetPicker = ({
credentialsId,
spreadsheetId: spreadsheetId as string,
},
- { enabled: !!spreadsheetId }
- )
+ { enabled: !!spreadsheetId },
+ );
useEffect(() => {
- loadScript('gapi', 'https://apis.google.com/js/api.js', () => {
- window.gapi.load('picker', () => {
- setIsPickerInitialized(true)
- })
- })
- }, [])
+ loadScript("gapi", "https://apis.google.com/js/api.js", () => {
+ window.gapi.load("picker", () => {
+ setIsPickerInitialized(true);
+ });
+ });
+ }, []);
const loadScript = (
id: string,
src: string,
- callback: { (): void; (): void; (): void }
+ callback: { (): void; (): void; (): void },
) => {
- const existingScript = document.getElementById(id)
+ const existingScript = document.getElementById(id);
if (existingScript) {
- callback()
- return
+ callback();
+ return;
}
- const script = document.createElement('script')
- script.type = 'text/javascript'
+ const script = document.createElement("script");
+ script.type = "text/javascript";
- script.onload = function () {
- callback()
- }
+ script.onload = () => {
+ callback();
+ };
- script.src = src
- document.head.appendChild(script)
- }
+ script.src = src;
+ document.head.appendChild(script);
+ };
const createPicker = () => {
- if (!data) return
- if (!isPickerInitialized) throw new Error('Google Picker not inited')
+ if (!data) return;
+ if (!isPickerInitialized) throw new Error("Google Picker not inited");
const picker = new window.google.picker.PickerBuilder()
.addView(window.google.picker.ViewId.SPREADSHEETS)
.setOAuthToken(data.accessToken)
.setDeveloperKey(env.NEXT_PUBLIC_GOOGLE_API_KEY)
.setCallback(pickerCallback)
- .build()
+ .build();
- picker.setVisible(true)
- }
+ picker.setVisible(true);
+ };
const pickerCallback = (data: { action: string; docs: { id: string }[] }) => {
- if (data.action !== 'picked') return
- const spreadsheetId = data.docs[0]?.id
- if (!spreadsheetId) return
- onSpreadsheetIdSelect(spreadsheetId)
- }
+ if (data.action !== "picked") return;
+ const spreadsheetId = data.docs[0]?.id;
+ if (!spreadsheetId) return;
+ onSpreadsheetIdSelect(spreadsheetId);
+ };
- if (spreadsheetData && spreadsheetData.name !== '')
+ if (spreadsheetData && spreadsheetData.name !== "")
return (
@@ -100,19 +100,19 @@ export const GoogleSpreadsheetPicker = ({
icon={
- )
+ );
return (
Pick a spreadsheet
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/components/RowsFilterComparisonItem.tsx b/apps/builder/src/features/blocks/integrations/googleSheets/components/RowsFilterComparisonItem.tsx
index 5a43d6433b..0f6410c977 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/components/RowsFilterComparisonItem.tsx
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/components/RowsFilterComparisonItem.tsx
@@ -1,10 +1,10 @@
-import { DropdownList } from '@/components/DropdownList'
-import { TextInput } from '@/components/inputs'
-import { TableListItemProps } from '@/components/TableList'
-import { Stack } from '@chakra-ui/react'
-import { RowsFilterComparison } from '@typebot.io/schemas'
-import { ComparisonOperators } from '@typebot.io/schemas/features/blocks/logic/condition/constants'
-import React from 'react'
+import { DropdownList } from "@/components/DropdownList";
+import type { TableListItemProps } from "@/components/TableList";
+import { TextInput } from "@/components/inputs";
+import { Stack } from "@chakra-ui/react";
+import type { RowsFilterComparison } from "@typebot.io/blocks-integrations/googleSheets/schema";
+import { ComparisonOperators } from "@typebot.io/conditions/constants";
+import React from "react";
export const RowsFilterComparisonItem = ({
item,
@@ -12,21 +12,21 @@ export const RowsFilterComparisonItem = ({
onItemChange,
}: TableListItemProps & { columns: string[] }) => {
const handleColumnSelect = (column: string) => {
- if (column === item.column) return
- onItemChange({ ...item, column })
- }
+ if (column === item.column) return;
+ onItemChange({ ...item, column });
+ };
const handleSelectComparisonOperator = (
- comparisonOperator: ComparisonOperators
+ comparisonOperator: ComparisonOperators,
) => {
- if (comparisonOperator === item.comparisonOperator) return
- onItemChange({ ...item, comparisonOperator })
- }
+ if (comparisonOperator === item.comparisonOperator) return;
+ onItemChange({ ...item, comparisonOperator });
+ };
const handleChangeValue = (value: string) => {
- if (value === item.value) return
- onItemChange({ ...item, value })
- }
+ if (value === item.value) return;
+ onItemChange({ ...item, value });
+ };
return (
@@ -45,11 +45,11 @@ export const RowsFilterComparisonItem = ({
{item.comparisonOperator !== ComparisonOperators.IS_SET &&
item.comparisonOperator !== ComparisonOperators.IS_EMPTY && (
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/components/RowsFilterTableList.tsx b/apps/builder/src/features/blocks/integrations/googleSheets/components/RowsFilterTableList.tsx
index c6b2e74127..366ee071cc 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/components/RowsFilterTableList.tsx
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/components/RowsFilterTableList.tsx
@@ -1,19 +1,19 @@
-import { DropdownList } from '@/components/DropdownList'
-import { TableList } from '@/components/TableList'
-import { Flex } from '@chakra-ui/react'
-import {
+import { DropdownList } from "@/components/DropdownList";
+import { TableList } from "@/components/TableList";
+import { Flex } from "@chakra-ui/react";
+import type {
GoogleSheetsGetOptions,
RowsFilterComparison,
-} from '@typebot.io/schemas'
-import React from 'react'
-import { RowsFilterComparisonItem } from './RowsFilterComparisonItem'
-import { LogicalOperator } from '@typebot.io/schemas/features/blocks/logic/condition/constants'
+} from "@typebot.io/blocks-integrations/googleSheets/schema";
+import { LogicalOperator } from "@typebot.io/conditions/constants";
+import React from "react";
+import { RowsFilterComparisonItem } from "./RowsFilterComparisonItem";
type Props = {
- filter: GoogleSheetsGetOptions['filter']
- columns: string[]
- onFilterChange: (filter: GoogleSheetsGetOptions['filter']) => void
-}
+ filter: GoogleSheetsGetOptions["filter"];
+ columns: string[];
+ onFilterChange: (filter: GoogleSheetsGetOptions["filter"]) => void;
+};
export const RowsFilterTableList = ({
filter,
@@ -25,10 +25,10 @@ export const RowsFilterTableList = ({
...filter,
logicalOperator: filter?.logicalOperator ?? LogicalOperator.AND,
comparisons,
- })
+ });
const updateLogicalOperator = (logicalOperator: LogicalOperator) =>
- filter && onFilterChange({ ...filter, logicalOperator })
+ filter && onFilterChange({ ...filter, logicalOperator });
return (
@@ -47,5 +47,5 @@ export const RowsFilterTableList = ({
>
{(props) =>
@@ -26,13 +26,13 @@ export const SheetsDropdown = ({
row. Also make sure your header row does not contain duplicates.
- )
+ );
return (
({ label: s.name, value: s.id }))}
onSelect={onSelectSheetId}
- placeholder={'Select the sheet'}
+ placeholder={"Select the sheet"}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts b/apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts
index 13e77ce754..9d31a7501b 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts
@@ -1,164 +1,168 @@
-import test, { expect, Page } from '@playwright/test'
-import { importTypebotInDatabase } from '@typebot.io/playwright/databaseActions'
-import { createId } from '@paralleldrive/cuid2'
-import { getTestAsset } from '@/test/utils/playwright'
-
-test.describe.parallel('Google sheets integration', () => {
- test('Insert row should work', async ({ page }) => {
- const typebotId = createId()
- await importTypebotInDatabase(
- getTestAsset('typebots/integrations/googleSheets.json'),
- {
- id: typebotId,
- }
- )
- await page.goto(`/typebots/${typebotId}/edit`)
- await fillInSpreadsheetInfo(page)
- await page.click('text=Select an operation')
- await page.click('text=Insert a row')
-
- await page.click('text=Add a value')
- await page.click('text=Select a column')
- await page.getByRole('menuitem', { name: 'Email' }).click()
- await page.click('[aria-label="Insert a variable"]')
- await page.getByRole('menuitem', { name: 'Email' }).last().click()
-
- await page.click('text=Add a value')
- await page.click('text=Select a column')
- await page.click('text=First name')
- await page.fill(
- 'input[placeholder="Type a value..."] >> nth = 1',
- 'Georges'
- )
-
- await page.click('text=Test')
- await page
- .locator('typebot-standard')
- .locator('input[placeholder="Type your email..."]')
- .fill('georges@gmail.com')
- await page
- .locator('typebot-standard')
- .locator('input[placeholder="Type your email..."]')
- .press('Enter')
- await expect(
- page.getByText('Succesfully inserted row in CRM > Sheet1').nth(0)
- ).toBeVisible()
- })
-
- test('Update row should work', async ({ page }) => {
- const typebotId = createId()
- await importTypebotInDatabase(
- getTestAsset('typebots/integrations/googleSheets.json'),
- {
- id: typebotId,
- }
- )
- await page.goto(`/typebots/${typebotId}/edit`)
- await fillInSpreadsheetInfo(page)
- await page.click('text=Select an operation')
- await page.click('text=Update a row')
-
- await page.getByRole('button', { name: 'Row(s) to update' }).click()
- await page.getByRole('button', { name: 'Add filter rule' }).click()
- await page.click('text=Select a column')
- await page.getByRole('menuitem', { name: 'Email' }).click()
- await page.getByRole('button', { name: 'Select an operator' }).click()
- await page.getByRole('menuitem', { name: 'Equal to' }).click()
- await page.click('[aria-label="Insert a variable"]')
- await page.getByRole('menuitem', { name: 'Email' }).last().click()
-
- await page.getByRole('button', { name: 'Cells to update' }).click()
- await page.click('text=Add a value')
- await page.click('text=Select a column')
- await page.click('text=Last name')
- await page.fill(
- 'input[placeholder="Type a value..."] >> nth = 1',
- 'Last name'
- )
-
- await page.click('text=Test')
- await page
- .locator('typebot-standard')
- .locator('input[placeholder="Type your email..."]')
- .fill('test@test.com')
- await page
- .locator('typebot-standard')
- .locator('input[placeholder="Type your email..."]')
- .press('Enter')
- await expect(
- page.getByText('Succesfully updated matching rows').nth(0)
- ).toBeVisible({ timeout: 10000 })
- })
-
- test('Get row should work', async ({ page }) => {
- const typebotId = createId()
- await importTypebotInDatabase(
- getTestAsset('typebots/integrations/googleSheetsGet.json'),
- {
- id: typebotId,
- }
- )
- await page.goto(`/typebots/${typebotId}/edit`)
- await fillInSpreadsheetInfo(page)
- await page.click('text=Select an operation')
- await page.click('text=Get data from sheet')
-
- await page.getByRole('button', { name: 'Select row(s)' }).click()
- await page.getByRole('button', { name: 'Add filter rule' }).click()
- await page.click('text=Select a column')
- await page.getByRole('menuitem', { name: 'Email' }).click()
- await page.getByRole('button', { name: 'Select an operator' }).click()
- await page.getByRole('menuitem', { name: 'Equal to' }).click()
- await page.click('[aria-label="Insert a variable"]')
- await page.getByRole('menuitem', { name: 'Email' }).last().click()
-
- await page.getByRole('button', { name: 'Add filter rule' }).click()
- await page.getByRole('button', { name: 'AND', exact: true }).click()
- await page.getByRole('menuitem', { name: 'OR' }).click()
-
- await page.getByRole('button', { name: 'Columns to extract' }).click()
- await page.click('text=Select a column')
- await page.getByRole('menuitem', { name: 'Email' }).click()
- await page.getByRole('button', { name: 'Select an operator' }).click()
- await page.getByRole('menuitem', { name: 'Equal to' }).click()
- await page.getByPlaceholder('Type a value...').nth(-1).fill('test@test.com')
-
- await page.click('text=Select a column')
- await page.getByRole('menuitem', { name: 'First name' }).click()
- await createNewVar(page, 'First name')
-
- await page.click('text=Add a value')
- await page.click('text=Select a column')
- await page.getByRole('menuitem', { name: 'Last name' }).click()
- await createNewVar(page, 'Last name')
-
- await page.click('text=Test')
- await page
- .locator('typebot-standard')
- .locator('input[placeholder="Type your email..."]')
- .fill('test2@test.com')
- await page
- .locator('typebot-standard')
- .locator('input[placeholder="Type your email..."]')
- .press('Enter')
- await expect(
- page.locator('typebot-standard').locator('text=Georges2')
- ).toBeVisible()
- })
-})
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect, type Page } from "@playwright/test";
+import { importTypebotInDatabase } from "@typebot.io/playwright/databaseActions";
+
+test.describe
+ .parallel("Google sheets integration", () => {
+ test("Insert row should work", async ({ page }) => {
+ const typebotId = createId();
+ await importTypebotInDatabase(
+ getTestAsset("typebots/integrations/googleSheets.json"),
+ {
+ id: typebotId,
+ },
+ );
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await fillInSpreadsheetInfo(page);
+ await page.click("text=Select an operation");
+ await page.click("text=Insert a row");
+
+ await page.click("text=Add a value");
+ await page.click("text=Select a column");
+ await page.getByRole("menuitem", { name: "Email" }).click();
+ await page.click('[aria-label="Insert a variable"]');
+ await page.getByRole("menuitem", { name: "Email" }).last().click();
+
+ await page.click("text=Add a value");
+ await page.click("text=Select a column");
+ await page.click("text=First name");
+ await page.fill(
+ 'input[placeholder="Type a value..."] >> nth = 1',
+ "Georges",
+ );
+
+ await page.click("text=Test");
+ await page
+ .locator("typebot-standard")
+ .locator('input[placeholder="Type your email..."]')
+ .fill("georges@gmail.com");
+ await page
+ .locator("typebot-standard")
+ .locator('input[placeholder="Type your email..."]')
+ .press("Enter");
+ await expect(
+ page.getByText("Succesfully inserted row in CRM > Sheet1").nth(0),
+ ).toBeVisible();
+ });
+
+ test("Update row should work", async ({ page }) => {
+ const typebotId = createId();
+ await importTypebotInDatabase(
+ getTestAsset("typebots/integrations/googleSheets.json"),
+ {
+ id: typebotId,
+ },
+ );
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await fillInSpreadsheetInfo(page);
+ await page.click("text=Select an operation");
+ await page.click("text=Update a row");
+
+ await page.getByRole("button", { name: "Row(s) to update" }).click();
+ await page.getByRole("button", { name: "Add filter rule" }).click();
+ await page.click("text=Select a column");
+ await page.getByRole("menuitem", { name: "Email" }).click();
+ await page.getByRole("button", { name: "Select an operator" }).click();
+ await page.getByRole("menuitem", { name: "Equal to" }).click();
+ await page.click('[aria-label="Insert a variable"]');
+ await page.getByRole("menuitem", { name: "Email" }).last().click();
+
+ await page.getByRole("button", { name: "Cells to update" }).click();
+ await page.click("text=Add a value");
+ await page.click("text=Select a column");
+ await page.click("text=Last name");
+ await page.fill(
+ 'input[placeholder="Type a value..."] >> nth = 1',
+ "Last name",
+ );
+
+ await page.click("text=Test");
+ await page
+ .locator("typebot-standard")
+ .locator('input[placeholder="Type your email..."]')
+ .fill("test@test.com");
+ await page
+ .locator("typebot-standard")
+ .locator('input[placeholder="Type your email..."]')
+ .press("Enter");
+ await expect(
+ page.getByText("Succesfully updated matching rows").nth(0),
+ ).toBeVisible({ timeout: 10000 });
+ });
+
+ test("Get row should work", async ({ page }) => {
+ const typebotId = createId();
+ await importTypebotInDatabase(
+ getTestAsset("typebots/integrations/googleSheetsGet.json"),
+ {
+ id: typebotId,
+ },
+ );
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await fillInSpreadsheetInfo(page);
+ await page.click("text=Select an operation");
+ await page.click("text=Get data from sheet");
+
+ await page.getByRole("button", { name: "Select row(s)" }).click();
+ await page.getByRole("button", { name: "Add filter rule" }).click();
+ await page.click("text=Select a column");
+ await page.getByRole("menuitem", { name: "Email" }).click();
+ await page.getByRole("button", { name: "Select an operator" }).click();
+ await page.getByRole("menuitem", { name: "Equal to" }).click();
+ await page.click('[aria-label="Insert a variable"]');
+ await page.getByRole("menuitem", { name: "Email" }).last().click();
+
+ await page.getByRole("button", { name: "Add filter rule" }).click();
+ await page.getByRole("button", { name: "AND", exact: true }).click();
+ await page.getByRole("menuitem", { name: "OR" }).click();
+
+ await page.getByRole("button", { name: "Columns to extract" }).click();
+ await page.click("text=Select a column");
+ await page.getByRole("menuitem", { name: "Email" }).click();
+ await page.getByRole("button", { name: "Select an operator" }).click();
+ await page.getByRole("menuitem", { name: "Equal to" }).click();
+ await page
+ .getByPlaceholder("Type a value...")
+ .nth(-1)
+ .fill("test@test.com");
+
+ await page.click("text=Select a column");
+ await page.getByRole("menuitem", { name: "First name" }).click();
+ await createNewVar(page, "First name");
+
+ await page.click("text=Add a value");
+ await page.click("text=Select a column");
+ await page.getByRole("menuitem", { name: "Last name" }).click();
+ await createNewVar(page, "Last name");
+
+ await page.click("text=Test");
+ await page
+ .locator("typebot-standard")
+ .locator('input[placeholder="Type your email..."]')
+ .fill("test2@test.com");
+ await page
+ .locator("typebot-standard")
+ .locator('input[placeholder="Type your email..."]')
+ .press("Enter");
+ await expect(
+ page.locator("typebot-standard").locator("text=Georges2"),
+ ).toBeVisible();
+ });
+ });
const fillInSpreadsheetInfo = async (page: Page) => {
- await page.click('text=Configure...')
- await page.click('text=Select Sheets account')
- await page.click('text=pro-user@email.com')
+ await page.click("text=Configure...");
+ await page.click("text=Select Sheets account");
+ await page.click("text=pro-user@email.com");
- await page.waitForTimeout(1000)
+ await page.waitForTimeout(1000);
- await page.fill('input[placeholder="Select the sheet"]', 'Sh')
- await page.click('text=Sheet1')
-}
+ await page.fill('input[placeholder="Select the sheet"]', "Sh");
+ await page.click("text=Sheet1");
+};
const createNewVar = async (page: Page, name: string) => {
- await page.fill('input[placeholder="Select a variable"] >> nth=-1', name)
- await page.getByRole('menuitem', { name: `Create ${name}` }).click()
-}
+ await page.fill('input[placeholder="Select a variable"] >> nth=-1', name);
+ await page.getByRole("menuitem", { name: `Create ${name}` }).click();
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/hooks/useSheets.ts b/apps/builder/src/features/blocks/integrations/googleSheets/hooks/useSheets.ts
index 762853921a..9f35f80ac6 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/hooks/useSheets.ts
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/hooks/useSheets.ts
@@ -1,28 +1,28 @@
-import { stringify } from 'qs'
-import { fetcher } from '@/helpers/fetcher'
-import useSWR from 'swr'
-import { Sheet } from '../types'
+import { fetcher } from "@/helpers/fetcher";
+import { stringify } from "qs";
+import useSWR from "swr";
+import type { Sheet } from "../types";
export const useSheets = ({
credentialsId,
spreadsheetId,
onError,
}: {
- credentialsId?: string
- spreadsheetId?: string
- onError?: (error: Error) => void
+ credentialsId?: string;
+ spreadsheetId?: string;
+ onError?: (error: Error) => void;
}) => {
- const queryParams = stringify({ credentialsId })
+ const queryParams = stringify({ credentialsId });
const { data, error, mutate } = useSWR<{ sheets: Sheet[] }, Error>(
!credentialsId || !spreadsheetId
? null
: `/api/integrations/google-sheets/spreadsheets/${spreadsheetId}/sheets?${queryParams}`,
- fetcher
- )
- if (error) onError && onError(error)
+ fetcher,
+ );
+ if (error) onError && onError(error);
return {
sheets: data?.sheets,
isLoading: !error && !data,
mutate,
- }
-}
+ };
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/hooks/useSpreadsheets.ts b/apps/builder/src/features/blocks/integrations/googleSheets/hooks/useSpreadsheets.ts
index d341064575..9aa29d1a71 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/hooks/useSpreadsheets.ts
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/hooks/useSpreadsheets.ts
@@ -1,24 +1,24 @@
-import { stringify } from 'qs'
-import { fetcher } from '@/helpers/fetcher'
-import useSWR from 'swr'
-import { Spreadsheet } from '../types'
+import { fetcher } from "@/helpers/fetcher";
+import { stringify } from "qs";
+import useSWR from "swr";
+import type { Spreadsheet } from "../types";
export const useSpreadsheets = ({
credentialsId,
onError,
}: {
- credentialsId: string
- onError?: (error: Error) => void
+ credentialsId: string;
+ onError?: (error: Error) => void;
}) => {
- const queryParams = stringify({ credentialsId })
+ const queryParams = stringify({ credentialsId });
const { data, error, mutate } = useSWR<{ files: Spreadsheet[] }, Error>(
`/api/integrations/google-sheets/spreadsheets?${queryParams}`,
- fetcher
- )
- if (error) onError && onError(error)
+ fetcher,
+ );
+ if (error) onError && onError(error);
return {
spreadsheets: data?.files,
isLoading: !error && !data,
mutate,
- }
-}
+ };
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/queries/createSheetsCredentialQuery.ts b/apps/builder/src/features/blocks/integrations/googleSheets/queries/createSheetsCredentialQuery.ts
index e507cc0ae0..fd36aab809 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/queries/createSheetsCredentialQuery.ts
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/queries/createSheetsCredentialQuery.ts
@@ -1,10 +1,10 @@
-import { stringify } from 'qs'
-import { sendRequest } from '@typebot.io/lib'
+import { sendRequest } from "@typebot.io/lib/utils";
+import { stringify } from "qs";
export const createSheetsCredentialQuery = async (code: string) => {
- const queryParams = stringify({ code })
+ const queryParams = stringify({ code });
return sendRequest({
url: `/api/credentials/google-sheets/callback?${queryParams}`,
- method: 'GET',
- })
-}
+ method: "GET",
+ });
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/queries/getGoogleSheetsConsentScreenUrlQuery.ts b/apps/builder/src/features/blocks/integrations/googleSheets/queries/getGoogleSheetsConsentScreenUrlQuery.ts
index 39991c172a..0ff5b9f34c 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/queries/getGoogleSheetsConsentScreenUrlQuery.ts
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/queries/getGoogleSheetsConsentScreenUrlQuery.ts
@@ -1,16 +1,16 @@
-import { stringify } from 'qs'
+import { stringify } from "qs";
export const getGoogleSheetsConsentScreenUrlQuery = (
redirectUrl: string,
workspaceId: string,
blockId?: string,
- typebotId?: string
+ typebotId?: string,
) => {
const queryParams = stringify({
redirectUrl,
blockId,
workspaceId,
typebotId,
- })
- return `/api/credentials/google-sheets/consent-url?${queryParams}`
-}
+ });
+ return `/api/credentials/google-sheets/consent-url?${queryParams}`;
+};
diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/types.ts b/apps/builder/src/features/blocks/integrations/googleSheets/types.ts
index aed13605ea..a67e1b4385 100644
--- a/apps/builder/src/features/blocks/integrations/googleSheets/types.ts
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/types.ts
@@ -1,3 +1,3 @@
-export type Sheet = { id: string; name: string; columns: string[] }
+export type Sheet = { id: string; name: string; columns: string[] };
-export type Spreadsheet = { id: string; name: string }
+export type Spreadsheet = { id: string; name: string };
diff --git a/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComContent.tsx b/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComContent.tsx
index b8b5ad8757..e21e75f8d3 100644
--- a/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComContent.tsx
+++ b/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComContent.tsx
@@ -1,16 +1,16 @@
-import { Text } from '@chakra-ui/react'
-import { MakeComBlock } from '@typebot.io/schemas'
+import { Text } from "@chakra-ui/react";
+import type { MakeComBlock } from "@typebot.io/blocks-integrations/makeCom/schema";
type Props = {
- block: MakeComBlock
-}
+ block: MakeComBlock;
+};
export const MakeComContent = ({ block }: Props) => {
if (!block.options?.webhook?.url)
- return Configure...
+ return Configure... ;
return (
Trigger scenario
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComLogo.tsx b/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComLogo.tsx
index dbb9156f9c..abfdfb3d97 100644
--- a/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComLogo.tsx
+++ b/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComLogo.tsx
@@ -1,4 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const MakeComLogo = (props: IconProps) => (
(
-)
+);
diff --git a/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComSettings.tsx b/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComSettings.tsx
index 7b2f228a16..3472fdd164 100644
--- a/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComSettings.tsx
+++ b/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComSettings.tsx
@@ -1,13 +1,14 @@
-import { Alert, AlertIcon, Button, Link, Stack, Text } from '@chakra-ui/react'
-import { ExternalLinkIcon } from '@/components/icons'
-import { MakeComBlock, HttpRequest } from '@typebot.io/schemas'
-import React from 'react'
-import { HttpRequestAdvancedConfigForm } from '../../webhook/components/HttpRequestAdvancedConfigForm'
+import { ExternalLinkIcon } from "@/components/icons";
+import { Alert, AlertIcon, Button, Link, Stack, Text } from "@chakra-ui/react";
+import type { MakeComBlock } from "@typebot.io/blocks-integrations/makeCom/schema";
+import type { HttpRequest } from "@typebot.io/blocks-integrations/webhook/schema";
+import React from "react";
+import { HttpRequestAdvancedConfigForm } from "../../webhook/components/HttpRequestAdvancedConfigForm";
type Props = {
- block: MakeComBlock
- onOptionsChange: (options: MakeComBlock['options']) => void
-}
+ block: MakeComBlock;
+ onOptionsChange: (options: MakeComBlock["options"]) => void;
+};
export const MakeComSettings = ({
block: { id: blockId, options },
@@ -17,14 +18,14 @@ export const MakeComSettings = ({
onOptionsChange({
...options,
webhook: newLocalWebhook,
- })
- }
+ });
+ };
- const url = options?.webhook?.url
+ const url = options?.webhook?.url;
return (
-
+
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/openai/api/listModels.ts b/apps/builder/src/features/blocks/integrations/openai/api/listModels.ts
index 8a896a1e65..2c2e8b86c5 100644
--- a/apps/builder/src/features/blocks/integrations/openai/api/listModels.ts
+++ b/apps/builder/src/features/blocks/integrations/openai/api/listModels.ts
@@ -1,13 +1,13 @@
-import prisma from '@typebot.io/lib/prisma'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { z } from 'zod'
-import { isReadWorkspaceFobidden } from '@/features/workspace/helpers/isReadWorkspaceFobidden'
-import { decrypt } from '@typebot.io/lib/api/encryption/decrypt'
-import { OpenAICredentials } from '@typebot.io/schemas/features/blocks/integrations/openai'
-import { isNotEmpty } from '@typebot.io/lib/utils'
-import { OpenAI, ClientOptions } from 'openai'
-import { defaultOpenAIOptions } from '@typebot.io/schemas/features/blocks/integrations/openai/constants'
+import { isReadWorkspaceFobidden } from "@/features/workspace/helpers/isReadWorkspaceFobidden";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import { defaultOpenAIOptions } from "@typebot.io/blocks-integrations/openai/constants";
+import type { OpenAICredentials } from "@typebot.io/blocks-integrations/openai/schema";
+import { decrypt } from "@typebot.io/lib/api/encryption/decrypt";
+import { isNotEmpty } from "@typebot.io/lib/utils";
+import prisma from "@typebot.io/prisma";
+import { z } from "@typebot.io/zod";
+import { type ClientOptions, OpenAI } from "openai";
export const listModels = authenticatedProcedure
.input(
@@ -16,8 +16,8 @@ export const listModels = authenticatedProcedure
workspaceId: z.string(),
baseUrl: z.string(),
apiVersion: z.string().optional(),
- type: z.enum(['gpt', 'tts']),
- })
+ type: z.enum(["gpt", "tts"]),
+ }),
)
.query(
async ({
@@ -43,43 +43,43 @@ export const listModels = authenticatedProcedure
},
},
},
- })
+ });
if (!workspace || isReadWorkspaceFobidden(workspace, user))
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'No workspace found',
- })
+ code: "NOT_FOUND",
+ message: "No workspace found",
+ });
- const credentials = workspace.credentials.at(0)
+ const credentials = workspace.credentials.at(0);
if (!credentials)
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'No credentials found',
- })
+ code: "NOT_FOUND",
+ message: "No credentials found",
+ });
const data = (await decrypt(
credentials.data,
- credentials.iv
- )) as OpenAICredentials['data']
+ credentials.iv,
+ )) as OpenAICredentials["data"];
const config = {
apiKey: data.apiKey,
baseURL: baseUrl ?? defaultOpenAIOptions.baseUrl,
defaultHeaders: {
- 'api-key': data.apiKey,
+ "api-key": data.apiKey,
},
defaultQuery: isNotEmpty(apiVersion)
? {
- 'api-version': apiVersion,
+ "api-version": apiVersion,
}
: undefined,
- } satisfies ClientOptions
+ } satisfies ClientOptions;
- const openai = new OpenAI(config)
+ const openai = new OpenAI(config);
- const models = await openai.models.list()
+ const models = await openai.models.list();
return {
models:
@@ -87,6 +87,6 @@ export const listModels = authenticatedProcedure
.filter((model) => model.id.includes(type))
.sort((a, b) => b.created - a.created)
.map((model) => model.id) ?? [],
- }
- }
- )
+ };
+ },
+ );
diff --git a/apps/builder/src/features/blocks/integrations/openai/api/router.ts b/apps/builder/src/features/blocks/integrations/openai/api/router.ts
index 134a514525..bafc7242f5 100644
--- a/apps/builder/src/features/blocks/integrations/openai/api/router.ts
+++ b/apps/builder/src/features/blocks/integrations/openai/api/router.ts
@@ -1,6 +1,6 @@
-import { router } from '@/helpers/server/trpc'
-import { listModels } from './listModels'
+import { router } from "@/helpers/server/trpc";
+import { listModels } from "./listModels";
export const openAIRouter = router({
listModels,
-})
+});
diff --git a/apps/builder/src/features/blocks/integrations/openai/components/ModelsDropdown.tsx b/apps/builder/src/features/blocks/integrations/openai/components/ModelsDropdown.tsx
index 95277f611a..524afbf0f0 100644
--- a/apps/builder/src/features/blocks/integrations/openai/components/ModelsDropdown.tsx
+++ b/apps/builder/src/features/blocks/integrations/openai/components/ModelsDropdown.tsx
@@ -1,17 +1,17 @@
-import { Select } from '@/components/inputs/Select'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { useToast } from '@/hooks/useToast'
-import { trpc } from '@/lib/trpc'
-import { defaultOpenAIOptions } from '@typebot.io/schemas/features/blocks/integrations/openai/constants'
+import { Select } from "@/components/inputs/Select";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { useToast } from "@/hooks/useToast";
+import { trpc } from "@/lib/trpc";
+import { defaultOpenAIOptions } from "@typebot.io/blocks-integrations/openai/constants";
type Props = {
- baseUrl?: string
- apiVersion?: string
- credentialsId: string
- defaultValue?: string
- type: 'gpt' | 'tts'
- onChange: (model: string | undefined) => void
-}
+ baseUrl?: string;
+ apiVersion?: string;
+ credentialsId: string;
+ defaultValue?: string;
+ type: "gpt" | "tts";
+ onChange: (model: string | undefined) => void;
+};
export const ModelsDropdown = ({
baseUrl,
@@ -21,8 +21,8 @@ export const ModelsDropdown = ({
credentialsId,
type,
}: Props) => {
- const { workspace } = useWorkspace()
- const { showToast } = useToast()
+ const { workspace } = useWorkspace();
+ const { showToast } = useToast();
const { data } = trpc.openAI.listModels.useQuery(
{
@@ -37,11 +37,11 @@ export const ModelsDropdown = ({
onError: (error) => {
showToast({
description: error.message,
- status: 'error',
- })
+ status: "error",
+ });
},
- }
- )
+ },
+ );
return (
@@ -96,7 +97,7 @@ export const OpenAICredentialsModal = ({
label="API key"
helperText={
<>
- You can generate an API key{' '}
+ You can generate an API key{" "}
here
@@ -119,7 +120,7 @@ export const OpenAICredentialsModal = ({
Create
@@ -128,5 +129,5 @@ export const OpenAICredentialsModal = ({
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/openai/components/OpenAILogo.tsx b/apps/builder/src/features/blocks/integrations/openai/components/OpenAILogo.tsx
index c683c6bd9d..445ee5fd3a 100644
--- a/apps/builder/src/features/blocks/integrations/openai/components/OpenAILogo.tsx
+++ b/apps/builder/src/features/blocks/integrations/openai/components/OpenAILogo.tsx
@@ -1,7 +1,7 @@
-import { Icon, IconProps } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const OpenAILogo = (props: IconProps) => (
-)
+);
diff --git a/apps/builder/src/features/blocks/integrations/openai/components/OpenAINodeBody.tsx b/apps/builder/src/features/blocks/integrations/openai/components/OpenAINodeBody.tsx
index f66cd81ac7..7c851deda6 100644
--- a/apps/builder/src/features/blocks/integrations/openai/components/OpenAINodeBody.tsx
+++ b/apps/builder/src/features/blocks/integrations/openai/components/OpenAINodeBody.tsx
@@ -1,23 +1,23 @@
-import { SetVariableLabel } from '@/components/SetVariableLabel'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { Stack, Text } from '@chakra-ui/react'
-import { OpenAIBlock } from '@typebot.io/schemas/features/blocks/integrations/openai'
+import { SetVariableLabel } from "@/components/SetVariableLabel";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { Stack, Text } from "@chakra-ui/react";
+import type { OpenAIBlock } from "@typebot.io/blocks-integrations/openai/schema";
type Props = {
- options: OpenAIBlock['options']
-}
+ options: OpenAIBlock["options"];
+};
export const OpenAINodeBody = ({ options }: Props) => {
- const { typebot } = useTypebot()
+ const { typebot } = useTypebot();
return (
-
- {options?.task ?? 'Configure...'}
+
+ {options?.task ?? "Configure..."}
{typebot &&
options &&
- 'responseMapping' in options &&
+ "responseMapping" in options &&
options.responseMapping
?.map((mapping) => mapping.variableId)
.map((variableId, idx) =>
@@ -27,11 +27,11 @@ export const OpenAINodeBody = ({ options }: Props) => {
variables={typebot.variables}
variableId={variableId}
/>
- ) : null
+ ) : null,
)}
{typebot &&
options &&
- 'saveUrlInVariableId' in options &&
+ "saveUrlInVariableId" in options &&
options.saveUrlInVariableId && (
{
/>
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/openai/components/OpenAISettings.tsx b/apps/builder/src/features/blocks/integrations/openai/components/OpenAISettings.tsx
index f1e28e37bf..4597d44821 100644
--- a/apps/builder/src/features/blocks/integrations/openai/components/OpenAISettings.tsx
+++ b/apps/builder/src/features/blocks/integrations/openai/components/OpenAISettings.tsx
@@ -1,3 +1,7 @@
+import { DropdownList } from "@/components/DropdownList";
+import { TextInput } from "@/components/inputs";
+import { CredentialsDropdown } from "@/features/credentials/components/CredentialsDropdown";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
import {
Accordion,
AccordionButton,
@@ -5,71 +9,67 @@ import {
AccordionItem,
AccordionPanel,
Stack,
- useDisclosure,
Text,
-} from '@chakra-ui/react'
-import React from 'react'
-import { CredentialsDropdown } from '@/features/credentials/components/CredentialsDropdown'
+ useDisclosure,
+} from "@chakra-ui/react";
import {
+ defaultOpenAIOptions,
+ openAITasks,
+} from "@typebot.io/blocks-integrations/openai/constants";
+import type {
ChatCompletionOpenAIOptions,
CreateImageOpenAIOptions,
CreateSpeechOpenAIOptions,
OpenAIBlock,
-} from '@typebot.io/schemas/features/blocks/integrations/openai'
-import { OpenAICredentialsModal } from './OpenAICredentialsModal'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { DropdownList } from '@/components/DropdownList'
-import { OpenAIChatCompletionSettings } from './createChatCompletion/OpenAIChatCompletionSettings'
-import { TextInput } from '@/components/inputs'
-import {
- defaultOpenAIOptions,
- openAITasks,
-} from '@typebot.io/schemas/features/blocks/integrations/openai/constants'
-import { OpenAICreateSpeechSettings } from './audio/OpenAICreateSpeechSettings'
+} from "@typebot.io/blocks-integrations/openai/schema";
+import React from "react";
+import { OpenAICredentialsModal } from "./OpenAICredentialsModal";
+import { OpenAICreateSpeechSettings } from "./audio/OpenAICreateSpeechSettings";
+import { OpenAIChatCompletionSettings } from "./createChatCompletion/OpenAIChatCompletionSettings";
-type OpenAITask = (typeof openAITasks)[number]
+type OpenAITask = (typeof openAITasks)[number];
type Props = {
- block: OpenAIBlock
- onOptionsChange: (options: OpenAIBlock['options']) => void
-}
+ block: OpenAIBlock;
+ onOptionsChange: (options: OpenAIBlock["options"]) => void;
+};
export const OpenAISettings = ({
block: { options },
onOptionsChange,
}: Props) => {
- const { workspace } = useWorkspace()
- const { isOpen, onOpen, onClose } = useDisclosure()
+ const { workspace } = useWorkspace();
+ const { isOpen, onOpen, onClose } = useDisclosure();
const updateCredentialsId = (credentialsId: string | undefined) => {
onOptionsChange({
...options,
credentialsId,
- })
- }
+ });
+ };
const updateTask = (task: OpenAITask) => {
onOptionsChange({
credentialsId: options?.credentialsId,
task,
- } as OpenAIBlock['options'])
- }
+ } as OpenAIBlock["options"]);
+ };
const updateBaseUrl = (baseUrl: string) => {
onOptionsChange({
...options,
baseUrl,
- })
- }
+ });
+ };
const updateApiVersion = (apiVersion: string) => {
onOptionsChange({
...options,
apiVersion,
- })
- }
+ });
+ };
- const baseUrl = options?.baseUrl ?? defaultOpenAIOptions.baseUrl
+ const baseUrl = options?.baseUrl ?? defaultOpenAIOptions.baseUrl;
return (
@@ -132,8 +132,8 @@ export const OpenAISettings = ({
)}
- )
-}
+ );
+};
const OpenAITaskSettings = ({
options,
@@ -142,28 +142,28 @@ const OpenAITaskSettings = ({
options:
| ChatCompletionOpenAIOptions
| CreateImageOpenAIOptions
- | CreateSpeechOpenAIOptions
- onOptionsChange: (options: OpenAIBlock['options']) => void
+ | CreateSpeechOpenAIOptions;
+ onOptionsChange: (options: OpenAIBlock["options"]) => void;
}): JSX.Element | null => {
switch (options.task) {
- case 'Create chat completion': {
+ case "Create chat completion": {
return (
| undefined
+ variable: Pick | undefined,
) => {
onOptionsChange({
...options,
saveUrlInVariableId: variable?.id,
- })
- }
+ });
+ };
return (
- Read the{' '}
+ Read the{" "}
API reference
- {' '}
+ {" "}
to better understand the available options.
{options.credentialsId && (
@@ -94,5 +94,5 @@ export const OpenAICreateSpeechSettings = ({
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/ChatCompletionMessageItem.tsx b/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/ChatCompletionMessageItem.tsx
index 7ccdb9a99e..995c46e2ca 100644
--- a/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/ChatCompletionMessageItem.tsx
+++ b/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/ChatCompletionMessageItem.tsx
@@ -1,24 +1,24 @@
-import { DropdownList } from '@/components/DropdownList'
-import { Textarea } from '@/components/inputs'
-import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
-import { TableListItemProps } from '@/components/TableList'
-import { HStack, Stack, Text } from '@chakra-ui/react'
-import { Variable } from '@typebot.io/schemas'
-import { ChatCompletionOpenAIOptions } from '@typebot.io/schemas/features/blocks/integrations/openai'
+import { DropdownList } from "@/components/DropdownList";
+import type { TableListItemProps } from "@/components/TableList";
+import { Textarea } from "@/components/inputs";
+import { VariableSearchInput } from "@/components/inputs/VariableSearchInput";
+import { HStack, Stack, Text } from "@chakra-ui/react";
import {
chatCompletionMessageCustomRoles,
chatCompletionMessageRoles,
deprecatedRoles,
-} from '@typebot.io/schemas/features/blocks/integrations/openai/constants'
+} from "@typebot.io/blocks-integrations/openai/constants";
+import type { ChatCompletionOpenAIOptions } from "@typebot.io/blocks-integrations/openai/schema";
+import type { Variable } from "@typebot.io/variables/schemas";
type Props = TableListItemProps<
- NonNullable[number]
->
+ NonNullable[number]
+>;
const roles = [
...chatCompletionMessageCustomRoles,
...chatCompletionMessageRoles,
-]
+];
export const ChatCompletionMessageItem = ({ item, onItemChange }: Props) => {
const changeRole = (role: (typeof roles)[number]) => {
@@ -26,25 +26,26 @@ export const ChatCompletionMessageItem = ({ item, onItemChange }: Props) => {
...item,
role,
content: undefined,
- })
- }
+ });
+ };
const changeSingleMessageContent = (content: string) => {
- if (item.role === 'Messages sequence ✨' || item.role === 'Dialogue') return
- onItemChange({ ...item, content })
- }
+ if (item.role === "Messages sequence ✨" || item.role === "Dialogue")
+ return;
+ onItemChange({ ...item, content });
+ };
const updateDialogueVariableId = (
- variable: Pick | undefined
+ variable: Pick | undefined,
) => {
- if (item.role !== 'Dialogue') return
- onItemChange({ ...item, dialogueVariableId: variable?.id })
- }
+ if (item.role !== "Dialogue") return;
+ onItemChange({ ...item, dialogueVariableId: variable?.id });
+ };
- const updateStartsBy = (startsBy: 'user' | 'assistant') => {
- if (item.role !== 'Dialogue') return
- onItemChange({ ...item, startsBy })
- }
+ const updateStartsBy = (startsBy: "user" | "assistant") => {
+ if (item.role !== "Dialogue") return;
+ onItemChange({ ...item, startsBy });
+ };
return (
@@ -52,7 +53,7 @@ export const ChatCompletionMessageItem = ({ item, onItemChange }: Props) => {
currentItem={item.role}
items={roles.filter(
(role) =>
- !deprecatedRoles.includes(role as (typeof deprecatedRoles)[number])
+ !deprecatedRoles.includes(role as (typeof deprecatedRoles)[number]),
)}
onItemSelect={changeRole}
placeholder="Select type"
@@ -64,8 +65,8 @@ export const ChatCompletionMessageItem = ({ item, onItemChange }: Props) => {
onStartsByChange={updateStartsBy}
/>
- )
-}
+ );
+};
const ChatCompletionMessageItemContent = ({
onChangeSingleMessageContent,
@@ -73,17 +74,17 @@ const ChatCompletionMessageItemContent = ({
onStartsByChange,
item,
}: {
- onChangeSingleMessageContent: (content: string) => void
+ onChangeSingleMessageContent: (content: string) => void;
onChangeDialogueVariableId: (
- variable: Pick | undefined
- ) => void
- onStartsByChange: (startsBy: 'user' | 'assistant') => void
- item: NonNullable[number]
+ variable: Pick | undefined,
+ ) => void;
+ onStartsByChange: (startsBy: "user" | "assistant") => void;
+ item: NonNullable[number];
}) => {
switch (item.role) {
- case 'assistant':
- case 'user':
- case 'system':
+ case "assistant":
+ case "user":
+ case "system":
return (
- )
- case 'Dialogue':
+ );
+ case "Dialogue":
return (
starts by |
- )
- case 'Messages sequence ✨':
- return null
+ );
+ case "Messages sequence ✨":
+ return null;
}
-}
+};
diff --git a/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/ChatCompletionResponseItem.tsx b/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/ChatCompletionResponseItem.tsx
index b02e13b575..9558178107 100644
--- a/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/ChatCompletionResponseItem.tsx
+++ b/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/ChatCompletionResponseItem.tsx
@@ -1,28 +1,28 @@
-import { DropdownList } from '@/components/DropdownList'
-import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
-import { TableListItemProps } from '@/components/TableList'
-import { Stack } from '@chakra-ui/react'
-import { Variable } from '@typebot.io/schemas'
-import { ChatCompletionOpenAIOptions } from '@typebot.io/schemas/features/blocks/integrations/openai'
+import { DropdownList } from "@/components/DropdownList";
+import type { TableListItemProps } from "@/components/TableList";
+import { VariableSearchInput } from "@/components/inputs/VariableSearchInput";
+import { Stack } from "@chakra-ui/react";
import {
chatCompletionResponseValues,
defaultOpenAIResponseMappingItem,
-} from '@typebot.io/schemas/features/blocks/integrations/openai/constants'
+} from "@typebot.io/blocks-integrations/openai/constants";
+import type { ChatCompletionOpenAIOptions } from "@typebot.io/blocks-integrations/openai/schema";
+import type { Variable } from "@typebot.io/variables/schemas";
type Props = TableListItemProps<
- NonNullable[number]
->
+ NonNullable[number]
+>;
export const ChatCompletionResponseItem = ({ item, onItemChange }: Props) => {
const changeValueToExtract = (
- valueToExtract: (typeof chatCompletionResponseValues)[number]
+ valueToExtract: (typeof chatCompletionResponseValues)[number],
) => {
- onItemChange({ ...item, valueToExtract })
- }
+ onItemChange({ ...item, valueToExtract });
+ };
- const changeVariableId = (variable: Pick | undefined) => {
- onItemChange({ ...item, variableId: variable ? variable.id : undefined })
- }
+ const changeVariableId = (variable: Pick | undefined) => {
+ onItemChange({ ...item, variableId: variable ? variable.id : undefined });
+ };
return (
@@ -38,5 +38,5 @@ export const ChatCompletionResponseItem = ({ item, onItemChange }: Props) => {
initialVariableId={item.variableId}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/OpenAIChatCompletionSettings.tsx b/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/OpenAIChatCompletionSettings.tsx
index 17197dbe68..a0bb984905 100644
--- a/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/OpenAIChatCompletionSettings.tsx
+++ b/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/OpenAIChatCompletionSettings.tsx
@@ -1,6 +1,6 @@
-import { TableList } from '@/components/TableList'
-import { ChatCompletionOpenAIOptions } from '@typebot.io/schemas/features/blocks/integrations/openai'
-import { ChatCompletionMessageItem } from './ChatCompletionMessageItem'
+import { TableList } from "@/components/TableList";
+import { TextLink } from "@/components/TextLink";
+import { NumberInput } from "@/components/inputs";
import {
Accordion,
AccordionButton,
@@ -9,41 +9,41 @@ import {
AccordionPanel,
Stack,
Text,
-} from '@chakra-ui/react'
-import { TextLink } from '@/components/TextLink'
-import { ChatCompletionResponseItem } from './ChatCompletionResponseItem'
-import { NumberInput } from '@/components/inputs'
-import { ModelsDropdown } from '../ModelsDropdown'
+} from "@chakra-ui/react";
+import type { ChatCompletionOpenAIOptions } from "@typebot.io/blocks-integrations/openai/schema";
+import { ModelsDropdown } from "../ModelsDropdown";
+import { ChatCompletionMessageItem } from "./ChatCompletionMessageItem";
+import { ChatCompletionResponseItem } from "./ChatCompletionResponseItem";
const apiReferenceUrl =
- 'https://platform.openai.com/docs/api-reference/chat/create'
+ "https://platform.openai.com/docs/api-reference/chat/create";
type Props = {
- options: ChatCompletionOpenAIOptions
- onOptionsChange: (options: ChatCompletionOpenAIOptions) => void
-}
+ options: ChatCompletionOpenAIOptions;
+ onOptionsChange: (options: ChatCompletionOpenAIOptions) => void;
+};
export const OpenAIChatCompletionSettings = ({
options,
onOptionsChange,
}: Props) => {
const updateModel = (model: string | undefined) => {
- if (!model) return
+ if (!model) return;
onOptionsChange({
...options,
model,
- })
- }
+ });
+ };
const updateMessages = (messages: typeof options.messages) => {
onOptionsChange({
...options,
messages,
- })
- }
+ });
+ };
const updateTemperature = (
- temperature: number | `{{${string}}}` | undefined
+ temperature: number | `{{${string}}}` | undefined,
) => {
onOptionsChange({
...options,
@@ -51,25 +51,25 @@ export const OpenAIChatCompletionSettings = ({
...options.advancedSettings,
temperature,
},
- })
- }
+ });
+ };
const updateResponseMapping = (
- responseMapping: typeof options.responseMapping
+ responseMapping: typeof options.responseMapping,
) => {
onOptionsChange({
...options,
responseMapping,
- })
- }
+ });
+ };
return (
- Read the{' '}
+ Read the{" "}
API reference
- {' '}
+ {" "}
to better understand the available options.
{options.credentialsId && (
@@ -133,7 +133,7 @@ export const OpenAIChatCompletionSettings = ({
{(props) =>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectContent.tsx b/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectContent.tsx
index 279905f556..037b5b07dc 100644
--- a/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectContent.tsx
+++ b/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectContent.tsx
@@ -1,16 +1,16 @@
-import { Text } from '@chakra-ui/react'
-import { PabblyConnectBlock } from '@typebot.io/schemas'
+import { Text } from "@chakra-ui/react";
+import type { PabblyConnectBlock } from "@typebot.io/blocks-integrations/pabblyConnect/schema";
type Props = {
- block: PabblyConnectBlock
-}
+ block: PabblyConnectBlock;
+};
export const PabblyConnectContent = ({ block }: Props) => {
if (!block.options?.webhook?.url)
- return Configure...
+ return Configure... ;
return (
Trigger scenario
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectLogo.tsx b/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectLogo.tsx
index 12228f5527..9f8189e8da 100644
--- a/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectLogo.tsx
+++ b/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectLogo.tsx
@@ -1,4 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const PabblyConnectLogo = (props: IconProps) => (
(
-)
+);
diff --git a/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectSettings.tsx b/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectSettings.tsx
index add349bad1..69f1e10726 100644
--- a/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectSettings.tsx
+++ b/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectSettings.tsx
@@ -1,14 +1,15 @@
-import { Alert, AlertIcon, Button, Link, Stack, Text } from '@chakra-ui/react'
-import { ExternalLinkIcon } from '@/components/icons'
-import { PabblyConnectBlock, HttpRequest } from '@typebot.io/schemas'
-import React from 'react'
-import { HttpRequestAdvancedConfigForm } from '../../webhook/components/HttpRequestAdvancedConfigForm'
-import { TextInput } from '@/components/inputs'
+import { ExternalLinkIcon } from "@/components/icons";
+import { TextInput } from "@/components/inputs";
+import { Alert, AlertIcon, Button, Link, Stack, Text } from "@chakra-ui/react";
+import type { PabblyConnectBlock } from "@typebot.io/blocks-integrations/pabblyConnect/schema";
+import type { HttpRequest } from "@typebot.io/blocks-integrations/webhook/schema";
+import React from "react";
+import { HttpRequestAdvancedConfigForm } from "../../webhook/components/HttpRequestAdvancedConfigForm";
type Props = {
- block: PabblyConnectBlock
- onOptionsChange: (options: PabblyConnectBlock['options']) => void
-}
+ block: PabblyConnectBlock;
+ onOptionsChange: (options: PabblyConnectBlock["options"]) => void;
+};
export const PabblyConnectSettings = ({
block: { id: blockId, options },
@@ -18,18 +19,18 @@ export const PabblyConnectSettings = ({
onOptionsChange({
...options,
webhook: newLocalWebhook,
- })
- }
+ });
+ };
const updateUrl = (url: string) => {
- onOptionsChange({ ...options, webhook: { ...options?.webhook, url } })
- }
+ onOptionsChange({ ...options, webhook: { ...options?.webhook, url } });
+ };
- const url = options?.webhook?.url
+ const url = options?.webhook?.url;
return (
-
+
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/pixel/components/PixelLogo.tsx b/apps/builder/src/features/blocks/integrations/pixel/components/PixelLogo.tsx
index f0a8883625..f37a6875d2 100644
--- a/apps/builder/src/features/blocks/integrations/pixel/components/PixelLogo.tsx
+++ b/apps/builder/src/features/blocks/integrations/pixel/components/PixelLogo.tsx
@@ -1,4 +1,4 @@
-import { IconProps, Icon } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const PixelLogo = (props: IconProps) => (
@@ -41,4 +41,4 @@ export const PixelLogo = (props: IconProps) => (
-)
+);
diff --git a/apps/builder/src/features/blocks/integrations/pixel/components/PixelNodeBody.tsx b/apps/builder/src/features/blocks/integrations/pixel/components/PixelNodeBody.tsx
index 8a1fc781b1..5e3ad49778 100644
--- a/apps/builder/src/features/blocks/integrations/pixel/components/PixelNodeBody.tsx
+++ b/apps/builder/src/features/blocks/integrations/pixel/components/PixelNodeBody.tsx
@@ -1,20 +1,20 @@
-import React from 'react'
-import { Text } from '@chakra-ui/react'
-import { PixelBlock } from '@typebot.io/schemas'
+import { Text } from "@chakra-ui/react";
+import type { PixelBlock } from "@typebot.io/blocks-integrations/pixel/schema";
+import React from "react";
type Props = {
- options: PixelBlock['options']
-}
+ options: PixelBlock["options"];
+};
export const PixelNodeBody = ({ options }: Props) => (
{options?.eventType
? `Track "${options.eventType}"`
: options?.pixelId
- ? 'Init Pixel'
- : 'Configure...'}
+ ? "Init Pixel"
+ : "Configure..."}
-)
+);
diff --git a/apps/builder/src/features/blocks/integrations/pixel/components/PixelSettings.tsx b/apps/builder/src/features/blocks/integrations/pixel/components/PixelSettings.tsx
index f311a18501..b517e10cfe 100644
--- a/apps/builder/src/features/blocks/integrations/pixel/components/PixelSettings.tsx
+++ b/apps/builder/src/features/blocks/integrations/pixel/components/PixelSettings.tsx
@@ -1,117 +1,117 @@
-import { DropdownList } from '@/components/DropdownList'
-import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
-import { TableList } from '@/components/TableList'
-import { TextLink } from '@/components/TextLink'
-import { TextInput } from '@/components/inputs'
-import { CodeEditor } from '@/components/inputs/CodeEditor'
-import { Select } from '@/components/inputs/Select'
-import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
-import { Stack, Text } from '@chakra-ui/react'
-import { isDefined, isEmpty } from '@typebot.io/lib'
-import { PixelBlock } from '@typebot.io/schemas'
+import { DropdownList } from "@/components/DropdownList";
+import { SwitchWithRelatedSettings } from "@/components/SwitchWithRelatedSettings";
+import { TableList } from "@/components/TableList";
+import { TextLink } from "@/components/TextLink";
+import { TextInput } from "@/components/inputs";
+import { CodeEditor } from "@/components/inputs/CodeEditor";
+import { Select } from "@/components/inputs/Select";
+import { SwitchWithLabel } from "@/components/inputs/SwitchWithLabel";
+import { Stack, Text } from "@chakra-ui/react";
import {
defaultPixelOptions,
pixelEventTypes,
pixelObjectProperties,
-} from '@typebot.io/schemas/features/blocks/integrations/pixel/constants'
-import React from 'react'
+} from "@typebot.io/blocks-integrations/pixel/constants";
+import type { PixelBlock } from "@typebot.io/blocks-integrations/pixel/schema";
+import { isDefined, isEmpty } from "@typebot.io/lib/utils";
+import React from "react";
const pixelReferenceUrl =
- 'https://developers.facebook.com/docs/meta-pixel/reference#standard-events'
+ "https://developers.facebook.com/docs/meta-pixel/reference#standard-events";
type Props = {
- options?: PixelBlock['options']
- onOptionsChange: (options: PixelBlock['options']) => void
-}
+ options?: PixelBlock["options"];
+ onOptionsChange: (options: PixelBlock["options"]) => void;
+};
-type Item = NonNullable['params']>[number]
+type Item = NonNullable["params"]>[number];
export const PixelSettings = ({ options, onOptionsChange }: Props) => {
const updateIsInitSkipped = (isChecked: boolean) =>
onOptionsChange({
...options,
isInitSkip: isChecked,
- })
+ });
const updatePixelId = (pixelId: string) =>
onOptionsChange({
...options,
pixelId: isEmpty(pixelId) ? undefined : pixelId,
- })
+ });
const updateIsTrackingEventEnabled = (isChecked: boolean) =>
onOptionsChange({
...options,
params: isChecked && !options?.params ? [] : undefined,
- })
+ });
const updateEventType = (
_: string | undefined,
- eventType?: (typeof pixelEventTypes)[number] | 'Custom'
+ eventType?: (typeof pixelEventTypes)[number] | "Custom",
) =>
onOptionsChange({
...options,
params: [],
eventType,
- })
+ });
- const updateParams = (params: NonNullable['params']) =>
+ const updateParams = (params: NonNullable["params"]) =>
onOptionsChange({
...options,
params,
- })
+ });
const updateEventName = (name: string) => {
- if (options?.eventType !== 'Custom') return
+ if (options?.eventType !== "Custom") return;
onOptionsChange({
...options,
name: isEmpty(name) ? undefined : name,
- })
- }
+ });
+ };
return (
- Read the{' '}
+ Read the{" "}
reference
- {' '}
+ {" "}
to better understand the available options.
{
)}
- )
-}
+ );
+};
type ParamItemProps = {
- item: Item
- eventType: 'Custom' | (typeof pixelEventTypes)[number] | undefined
- onItemChange: (item: Item) => void
-}
+ item: Item;
+ eventType: "Custom" | (typeof pixelEventTypes)[number] | undefined;
+ onItemChange: (item: Item) => void;
+};
const ParamItem = ({ item, eventType, onItemChange }: ParamItemProps) => {
const possibleObjectProps =
- eventType && eventType !== 'Custom'
+ eventType && eventType !== "Custom"
? pixelObjectProperties.filter((prop) =>
- prop.associatedEvents.includes(eventType)
+ prop.associatedEvents.includes(eventType),
)
- : []
+ : [];
const currentObject = possibleObjectProps.find(
- (prop) => prop.key === item.key
- )
+ (prop) => prop.key === item.key,
+ );
const updateKey = (key: string) =>
onItemChange({
...item,
key,
- })
+ });
const updateValue = (value: string) =>
onItemChange({
...item,
value,
- })
+ });
- if (!eventType) return null
+ if (!eventType) return null;
return (
- {eventType === 'Custom' ? (
+ {eventType === "Custom" ? (
{
placeholder="Select key"
/>
)}
- {currentObject?.type === 'code' ? (
+ {currentObject?.type === "code" ? (
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/pixel/pixel.spec.ts b/apps/builder/src/features/blocks/integrations/pixel/pixel.spec.ts
index 45ed6b0925..19a94a39a9 100644
--- a/apps/builder/src/features/blocks/integrations/pixel/pixel.spec.ts
+++ b/apps/builder/src/features/blocks/integrations/pixel/pixel.spec.ts
@@ -1,12 +1,12 @@
-import test, { expect } from '@playwright/test'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { createId } from '@paralleldrive/cuid2'
-import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integrations/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { IntegrationBlockType } from "@typebot.io/blocks-integrations/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-test.describe('Pixel block', () => {
- test('its configuration should work', async ({ page }) => {
- const typebotId = createId()
+test.describe("Pixel block", () => {
+ test("its configuration should work", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -14,23 +14,23 @@ test.describe('Pixel block', () => {
type: IntegrationBlockType.PIXEL,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Configure...')
- await page.getByPlaceholder('Pixel ID (e.g. "123456789")').fill('pixelid')
- await expect(page.getByText('Init Pixel')).toBeVisible()
- await page.getByText('Track event').click()
- await page.getByPlaceholder('Select event type').click()
- await page.getByRole('menuitem', { name: 'Lead' }).click()
- await expect(page.getByText('Track "Lead"')).toBeVisible()
- await page.getByRole('button', { name: 'Add parameter' }).click()
- await page.getByRole('button', { name: 'Select key' }).click()
- await page.getByRole('menuitem', { name: 'currency' }).click()
- await page.getByPlaceholder('Value').fill('USD')
- await page.getByRole('button', { name: 'Test' }).click()
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Configure...");
+ await page.getByPlaceholder('Pixel ID (e.g. "123456789")').fill("pixelid");
+ await expect(page.getByText("Init Pixel")).toBeVisible();
+ await page.getByText("Track event").click();
+ await page.getByPlaceholder("Select event type").click();
+ await page.getByRole("menuitem", { name: "Lead" }).click();
+ await expect(page.getByText('Track "Lead"')).toBeVisible();
+ await page.getByRole("button", { name: "Add parameter" }).click();
+ await page.getByRole("button", { name: "Select key" }).click();
+ await page.getByRole("menuitem", { name: "currency" }).click();
+ await page.getByPlaceholder("Value").fill("USD");
+ await page.getByRole("button", { name: "Test" }).click();
await expect(
- page.getByText('Pixel is not enabled in Preview mode').nth(1)
- ).toBeVisible()
- })
-})
+ page.getByText("Pixel is not enabled in Preview mode").nth(1),
+ ).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailContent.tsx b/apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailContent.tsx
index 2718934b70..f0c52fc4b4 100644
--- a/apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailContent.tsx
+++ b/apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailContent.tsx
@@ -1,13 +1,13 @@
-import { Tag, Text, Wrap, WrapItem } from '@chakra-ui/react'
-import { SendEmailBlock } from '@typebot.io/schemas'
+import { Tag, Text, Wrap, WrapItem } from "@chakra-ui/react";
+import type { SendEmailBlock } from "@typebot.io/blocks-integrations/sendEmail/schema";
type Props = {
- block: SendEmailBlock
-}
+ block: SendEmailBlock;
+};
export const SendEmailContent = ({ block }: Props) => {
if ((block.options?.recipients?.length ?? 0) === 0)
- return Configure...
+ return Configure... ;
return (
@@ -19,5 +19,5 @@ export const SendEmailContent = ({ block }: Props) => {
))}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailIcon.tsx b/apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailIcon.tsx
index 7874c91038..91b55afe42 100644
--- a/apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailIcon.tsx
+++ b/apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailIcon.tsx
@@ -1,5 +1,5 @@
-import { SendEmailIcon as SendEmailIco } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { SendEmailIcon as SendEmailIco } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
-export const SendEmailIcon = (props: IconProps) => | undefined
+ variable: Pick | undefined,
) =>
onOptionsChange({
...options,
attachmentsVariableId: variable?.id,
- })
+ });
return (
@@ -127,7 +128,7 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
onCredentialsSelect={handleCredentialsSelect}
onCreateNewClick={onOpen}
defaultCredentialLabel={env.NEXT_PUBLIC_SMTP_FROM?.match(
- /<(.*)>/
+ /<(.*)>/,
)?.pop()}
credentialsName="SMTP account"
/>
@@ -136,7 +137,7 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
@@ -152,18 +153,18 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
label="Reply to:"
onChange={handleReplyToChange}
defaultValue={options?.replyTo}
- placeholder={'email@gmail.com'}
+ placeholder={"email@gmail.com"}
/>
{
{options.isBodyCode ? (
@@ -238,5 +239,5 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
onNewCredentials={handleCredentialsSelect}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/sendEmail/components/SmtpConfigForm.tsx b/apps/builder/src/features/blocks/integrations/sendEmail/components/SmtpConfigForm.tsx
index a567f07f52..18cfbd3eb9 100644
--- a/apps/builder/src/features/blocks/integrations/sendEmail/components/SmtpConfigForm.tsx
+++ b/apps/builder/src/features/blocks/integrations/sendEmail/components/SmtpConfigForm.tsx
@@ -1,36 +1,36 @@
-import { TextInput, NumberInput } from '@/components/inputs'
-import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
-import { Stack } from '@chakra-ui/react'
-import { isDefined } from '@udecode/plate-common'
-import { SmtpCredentials } from '@typebot.io/schemas'
-import React from 'react'
+import { NumberInput, TextInput } from "@/components/inputs";
+import { SwitchWithLabel } from "@/components/inputs/SwitchWithLabel";
+import { Stack } from "@chakra-ui/react";
+import type { SmtpCredentials } from "@typebot.io/blocks-integrations/sendEmail/schema";
+import { isDefined } from "@udecode/plate-common";
+import React from "react";
type Props = {
- config: SmtpCredentials['data'] | undefined
- onConfigChange: (config: SmtpCredentials['data']) => void
-}
+ config: SmtpCredentials["data"] | undefined;
+ onConfigChange: (config: SmtpCredentials["data"]) => void;
+};
export const SmtpConfigForm = ({ config, onConfigChange }: Props) => {
const handleFromEmailChange = (email: string) =>
- config && onConfigChange({ ...config, from: { ...config.from, email } })
+ config && onConfigChange({ ...config, from: { ...config.from, email } });
const handleFromNameChange = (name: string) =>
- config && onConfigChange({ ...config, from: { ...config.from, name } })
+ config && onConfigChange({ ...config, from: { ...config.from, name } });
const handleHostChange = (host: string) =>
- config && onConfigChange({ ...config, host })
+ config && onConfigChange({ ...config, host });
const handleUsernameChange = (username: string) =>
- config && onConfigChange({ ...config, username })
+ config && onConfigChange({ ...config, username });
const handlePasswordChange = (password: string) =>
- config && onConfigChange({ ...config, password })
+ config && onConfigChange({ ...config, password });
const handleTlsCheck = (isTlsEnabled: boolean) =>
- config && onConfigChange({ ...config, isTlsEnabled })
+ config && onConfigChange({ ...config, isTlsEnabled });
const handlePortNumberChange = (port?: number) =>
- config && isDefined(port) && onConfigChange({ ...config, port })
+ config && isDefined(port) && onConfigChange({ ...config, port });
return (
@@ -94,5 +94,5 @@ export const SmtpConfigForm = ({ config, onConfigChange }: Props) => {
isDisabled={!config}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/sendEmail/components/SmtpConfigModal.tsx b/apps/builder/src/features/blocks/integrations/sendEmail/components/SmtpConfigModal.tsx
index e5c304e917..fcc1c36352 100644
--- a/apps/builder/src/features/blocks/integrations/sendEmail/components/SmtpConfigModal.tsx
+++ b/apps/builder/src/features/blocks/integrations/sendEmail/components/SmtpConfigModal.tsx
@@ -1,28 +1,29 @@
+import { useUser } from "@/features/account/hooks/useUser";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { useToast } from "@/hooks/useToast";
+import { trpc } from "@/lib/trpc";
import {
+ Button,
Modal,
- ModalOverlay,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
ModalBody,
+ ModalCloseButton,
+ ModalContent,
ModalFooter,
- Button,
-} from '@chakra-ui/react'
-import { useUser } from '@/features/account/hooks/useUser'
-import React, { useState } from 'react'
-import { isNotDefined } from '@typebot.io/lib'
-import { SmtpConfigForm } from './SmtpConfigForm'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { useToast } from '@/hooks/useToast'
-import { testSmtpConfig } from '../queries/testSmtpConfigQuery'
-import { SmtpCredentials } from '@typebot.io/schemas'
-import { trpc } from '@/lib/trpc'
+ ModalHeader,
+ ModalOverlay,
+} from "@chakra-ui/react";
+import type { SmtpCredentials } from "@typebot.io/blocks-integrations/sendEmail/schema";
+import { isNotDefined } from "@typebot.io/lib/utils";
+import type React from "react";
+import { useState } from "react";
+import { testSmtpConfig } from "../queries/testSmtpConfigQuery";
+import { SmtpConfigForm } from "./SmtpConfigForm";
type Props = {
- isOpen: boolean
- onClose: () => void
- onNewCredentials: (id: string) => void
-}
+ isOpen: boolean;
+ onClose: () => void;
+ onNewCredentials: (id: string) => void;
+};
export const SmtpConfigModal = ({
isOpen,
@@ -34,77 +35,77 @@ export const SmtpConfigModal = ({
{
- onNewCredentials(id)
- onClose()
+ onNewCredentials(id);
+ onClose();
}}
/>
- )
-}
+ );
+};
export const SmtpCreateModalContent = ({
onNewCredentials,
-}: Pick) => {
- const { user } = useUser()
- const { workspace } = useWorkspace()
- const [isCreating, setIsCreating] = useState(false)
- const { showToast } = useToast()
- const [smtpConfig, setSmtpConfig] = useState({
+}: Pick) => {
+ const { user } = useUser();
+ const { workspace } = useWorkspace();
+ const [isCreating, setIsCreating] = useState(false);
+ const { showToast } = useToast();
+ const [smtpConfig, setSmtpConfig] = useState({
from: {},
port: 25,
- })
+ });
const {
credentials: {
listCredentials: { refetch: refetchCredentials },
},
- } = trpc.useContext()
+ } = trpc.useContext();
const { mutate } = trpc.credentials.createCredentials.useMutation({
onSettled: () => setIsCreating(false),
onError: (err) => {
showToast({
description: err.message,
- status: 'error',
- })
+ status: "error",
+ });
},
onSuccess: (data) => {
- refetchCredentials()
- onNewCredentials(data.credentialsId)
+ refetchCredentials();
+ onNewCredentials(data.credentialsId);
},
- })
+ });
const handleCreateClick = async (e: React.FormEvent) => {
- e.preventDefault()
- if (!user?.email || !workspace?.id) return
- setIsCreating(true)
+ e.preventDefault();
+ if (!user?.email || !workspace?.id) return;
+ setIsCreating(true);
const { error: testSmtpError } = await testSmtpConfig(
smtpConfig,
- user.email
- )
+ user.email,
+ );
if (testSmtpError) {
- console.error(testSmtpError)
- setIsCreating(false)
+ console.error(testSmtpError);
+ setIsCreating(false);
showToast({
- title: 'Invalid configuration',
+ title: "Invalid configuration",
description: "We couldn't send the test email with your configuration",
details: {
content:
- 'response' in testSmtpError
+ "response" in testSmtpError
? (testSmtpError.response as string)
: testSmtpError.message,
- lang: 'json',
+ lang: "json",
},
- })
- return
+ });
+ return;
}
mutate({
credentials: {
data: smtpConfig,
name: smtpConfig.from.email as string,
- type: 'smtp',
+ type: "smtp",
workspaceId: workspace.id,
},
- })
- }
+ });
+ };
return (
Create SMTP config
@@ -132,5 +133,5 @@ export const SmtpCreateModalContent = ({
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/sendEmail/components/SmtpUpdateModalContent.tsx b/apps/builder/src/features/blocks/integrations/sendEmail/components/SmtpUpdateModalContent.tsx
index 00ba690b87..2a4641434e 100644
--- a/apps/builder/src/features/blocks/integrations/sendEmail/components/SmtpUpdateModalContent.tsx
+++ b/apps/builder/src/features/blocks/integrations/sendEmail/components/SmtpUpdateModalContent.tsx
@@ -1,32 +1,33 @@
+import { useUser } from "@/features/account/hooks/useUser";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { useToast } from "@/hooks/useToast";
+import { trpc } from "@/lib/trpc";
import {
- ModalContent,
- ModalHeader,
- ModalCloseButton,
+ Button,
ModalBody,
+ ModalCloseButton,
+ ModalContent,
ModalFooter,
- Button,
-} from '@chakra-ui/react'
-import { useUser } from '@/features/account/hooks/useUser'
-import React, { useEffect, useState } from 'react'
-import { isNotDefined } from '@typebot.io/lib'
-import { SmtpConfigForm } from './SmtpConfigForm'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { useToast } from '@/hooks/useToast'
-import { testSmtpConfig } from '../queries/testSmtpConfigQuery'
-import { trpc } from '@/lib/trpc'
-import { SmtpCredentials } from '@typebot.io/schemas/features/blocks/integrations/sendEmail/schema'
+ ModalHeader,
+} from "@chakra-ui/react";
+import type { SmtpCredentials } from "@typebot.io/blocks-integrations/sendEmail/schema";
+import { isNotDefined } from "@typebot.io/lib/utils";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { testSmtpConfig } from "../queries/testSmtpConfigQuery";
+import { SmtpConfigForm } from "./SmtpConfigForm";
type Props = {
- credentialsId: string
- onUpdate: () => void
-}
+ credentialsId: string;
+ onUpdate: () => void;
+};
export const SmtpUpdateModalContent = ({ credentialsId, onUpdate }: Props) => {
- const { user } = useUser()
- const { workspace } = useWorkspace()
- const [isCreating, setIsCreating] = useState(false)
- const { showToast } = useToast()
- const [smtpConfig, setSmtpConfig] = useState()
+ const { user } = useUser();
+ const { workspace } = useWorkspace();
+ const [isCreating, setIsCreating] = useState(false);
+ const { showToast } = useToast();
+ const [smtpConfig, setSmtpConfig] = useState();
const { data: existingCredentials } =
trpc.credentials.getCredentials.useQuery(
@@ -36,52 +37,52 @@ export const SmtpUpdateModalContent = ({ credentialsId, onUpdate }: Props) => {
},
{
enabled: !!workspace?.id,
- }
- )
+ },
+ );
useEffect(() => {
- if (!existingCredentials || smtpConfig) return
- setSmtpConfig(existingCredentials.data)
- }, [existingCredentials, smtpConfig])
+ if (!existingCredentials || smtpConfig) return;
+ setSmtpConfig(existingCredentials.data);
+ }, [existingCredentials, smtpConfig]);
const { mutate } = trpc.credentials.updateCredentials.useMutation({
onSettled: () => setIsCreating(false),
onError: (err) => {
showToast({
description: err.message,
- status: 'error',
- })
+ status: "error",
+ });
},
onSuccess: () => {
- onUpdate()
+ onUpdate();
},
- })
+ });
const handleUpdateClick = async (e: React.FormEvent) => {
- e.preventDefault()
- if (!user?.email || !workspace?.id || !smtpConfig) return
- setIsCreating(true)
+ e.preventDefault();
+ if (!user?.email || !workspace?.id || !smtpConfig) return;
+ setIsCreating(true);
const { error: testSmtpError } = await testSmtpConfig(
smtpConfig,
- user.email
- )
+ user.email,
+ );
if (testSmtpError) {
- setIsCreating(false)
+ setIsCreating(false);
return showToast({
- title: 'Invalid configuration',
+ title: "Invalid configuration",
description: "We couldn't send the test email with your configuration",
- })
+ });
}
mutate({
credentialsId,
credentials: {
data: smtpConfig,
name: smtpConfig.from.email as string,
- type: 'smtp',
+ type: "smtp",
workspaceId: workspace.id,
},
- })
- }
+ });
+ };
return (
Update SMTP config
@@ -109,5 +110,5 @@ export const SmtpUpdateModalContent = ({ credentialsId, onUpdate }: Props) => {
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/sendEmail/queries/testSmtpConfigQuery.ts b/apps/builder/src/features/blocks/integrations/sendEmail/queries/testSmtpConfigQuery.ts
index b1508e0851..62e59f4b99 100644
--- a/apps/builder/src/features/blocks/integrations/sendEmail/queries/testSmtpConfigQuery.ts
+++ b/apps/builder/src/features/blocks/integrations/sendEmail/queries/testSmtpConfigQuery.ts
@@ -1,12 +1,12 @@
-import { SmtpCredentials } from '@typebot.io/schemas'
-import { sendRequest } from '@typebot.io/lib'
+import type { SmtpCredentials } from "@typebot.io/blocks-integrations/sendEmail/schema";
+import { sendRequest } from "@typebot.io/lib/utils";
-export const testSmtpConfig = (smtpData: SmtpCredentials['data'], to: string) =>
+export const testSmtpConfig = (smtpData: SmtpCredentials["data"], to: string) =>
sendRequest({
- method: 'POST',
- url: '/api/integrations/email/test-config',
+ method: "POST",
+ url: "/api/integrations/email/test-config",
body: {
...smtpData,
to,
},
- })
+ });
diff --git a/apps/builder/src/features/blocks/integrations/sendEmail/sendEmail.spec.ts b/apps/builder/src/features/blocks/integrations/sendEmail/sendEmail.spec.ts
index ff6ded0789..ceca063287 100644
--- a/apps/builder/src/features/blocks/integrations/sendEmail/sendEmail.spec.ts
+++ b/apps/builder/src/features/blocks/integrations/sendEmail/sendEmail.spec.ts
@@ -1,68 +1,68 @@
-import test, { expect } from '@playwright/test'
-import { importTypebotInDatabase } from '@typebot.io/playwright/databaseActions'
-import { createId } from '@paralleldrive/cuid2'
-import { getTestAsset } from '@/test/utils/playwright'
-import { env } from '@typebot.io/env'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { env } from "@typebot.io/env";
+import { importTypebotInDatabase } from "@typebot.io/playwright/databaseActions";
-const typebotId = createId()
+const typebotId = createId();
-test.describe('Send email block', () => {
- test('its configuration should work', async ({ page }) => {
+test.describe("Send email block", () => {
+ test("its configuration should work", async ({ page }) => {
if (
!env.SMTP_USERNAME ||
!env.SMTP_HOST ||
!env.SMTP_PASSWORD ||
!env.NEXT_PUBLIC_SMTP_FROM
)
- throw new Error('SMTP_ env vars are missing')
+ throw new Error("SMTP_ env vars are missing");
await importTypebotInDatabase(
- getTestAsset('typebots/integrations/sendEmail.json'),
+ getTestAsset("typebots/integrations/sendEmail.json"),
{
id: typebotId,
- }
- )
+ },
+ );
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Configure...')
- await page.click(`text=notifications@typebot.io`)
- await page.click('text=Connect new')
- const createButton = page.locator('button >> text=Create')
- await expect(createButton).toBeDisabled()
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Configure...");
+ await page.click(`text=notifications@typebot.io`);
+ await page.click("text=Connect new");
+ const createButton = page.locator("button >> text=Create");
+ await expect(createButton).toBeDisabled();
await page.fill(
'[placeholder="notifications@provider.com"]',
- env.SMTP_USERNAME
- )
- await page.fill('[placeholder="John Smith"]', 'John Smith')
- await page.fill('[placeholder="mail.provider.com"]', env.SMTP_HOST)
- await page.getByLabel('Username').fill(env.SMTP_USERNAME)
- await page.fill('[type="password"]', env.SMTP_PASSWORD)
- await page.fill('input[role="spinbutton"]', env.SMTP_PORT.toString())
- await expect(createButton).toBeEnabled()
- await createButton.click()
+ env.SMTP_USERNAME,
+ );
+ await page.fill('[placeholder="John Smith"]', "John Smith");
+ await page.fill('[placeholder="mail.provider.com"]', env.SMTP_HOST);
+ await page.getByLabel("Username").fill(env.SMTP_USERNAME);
+ await page.fill('[type="password"]', env.SMTP_PASSWORD);
+ await page.fill('input[role="spinbutton"]', env.SMTP_PORT.toString());
+ await expect(createButton).toBeEnabled();
+ await createButton.click();
await expect(
- page.locator(`button >> text=${env.SMTP_USERNAME}`)
- ).toBeVisible()
+ page.locator(`button >> text=${env.SMTP_USERNAME}`),
+ ).toBeVisible();
await page.fill(
'[placeholder="email1@gmail.com, email2@gmail.com"]',
- 'email1@gmail.com, email2@gmail.com'
- )
- await expect(page.locator('span >> text=email1@gmail.com')).toBeVisible()
- await expect(page.locator('span >> text=email2@gmail.com')).toBeVisible()
+ "email1@gmail.com, email2@gmail.com",
+ );
+ await expect(page.locator("span >> text=email1@gmail.com")).toBeVisible();
+ await expect(page.locator("span >> text=email2@gmail.com")).toBeVisible();
await page.fill(
'[placeholder="email1@gmail.com, email2@gmail.com"]',
- 'email1@gmail.com, email2@gmail.com'
- )
- await page.getByLabel('Subject:').fill('Email subject')
- await page.click('text="Custom content?"')
- await page.locator('textarea').last().fill('Here is my email')
+ "email1@gmail.com, email2@gmail.com",
+ );
+ await page.getByLabel("Subject:").fill("Email subject");
+ await page.click('text="Custom content?"');
+ await page.locator("textarea").last().fill("Here is my email");
- await page.click('text=Test')
- await page.locator('typebot-standard').locator('text=Go').click()
+ await page.click("text=Test");
+ await page.locator("typebot-standard").locator("text=Go").click();
await expect(
- page.locator('text=Emails are not sent in preview mode >> nth=0')
- ).toBeVisible()
- })
-})
+ page.locator("text=Emails are not sent in preview mode >> nth=0"),
+ ).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/blocks/integrations/webhook/api/getResultExample.ts b/apps/builder/src/features/blocks/integrations/webhook/api/getResultExample.ts
index 5d7315ecf2..cc6fe1dd05 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/api/getResultExample.ts
+++ b/apps/builder/src/features/blocks/integrations/webhook/api/getResultExample.ts
@@ -1,35 +1,35 @@
-import prisma from '@typebot.io/lib/prisma'
-import { canReadTypebots } from '@/helpers/databaseRules'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { Typebot } from '@typebot.io/schemas'
-import { z } from 'zod'
-import { fetchLinkedTypebots } from '@/features/blocks/logic/typebotLink/helpers/fetchLinkedTypebots'
-import { parseSampleResult } from '@typebot.io/bot-engine/blocks/integrations/webhook/parseSampleResult'
-import { getBlockById } from '@typebot.io/schemas/helpers'
+import { fetchLinkedTypebots } from "@/features/blocks/logic/typebotLink/helpers/fetchLinkedTypebots";
+import { canReadTypebots } from "@/helpers/databaseRules";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import { parseSampleResult } from "@typebot.io/bot-engine/blocks/integrations/webhook/parseSampleResult";
+import { getBlockById } from "@typebot.io/groups/helpers";
+import prisma from "@typebot.io/prisma";
+import type { Typebot } from "@typebot.io/typebot/schemas/typebot";
+import { z } from "@typebot.io/zod";
export const getResultExample = authenticatedProcedure
.meta({
openapi: {
- method: 'GET',
- path: '/v1/typebots/{typebotId}/webhookBlocks/{blockId}/getResultExample',
+ method: "GET",
+ path: "/v1/typebots/{typebotId}/webhookBlocks/{blockId}/getResultExample",
protect: true,
- summary: 'Get result example',
+ summary: "Get result example",
description:
'Returns "fake" result for webhook block to help you anticipate how the webhook will behave.',
- tags: ['Webhook'],
+ tags: ["Webhook"],
},
})
.input(
z.object({
typebotId: z.string(),
blockId: z.string(),
- })
+ }),
)
.output(
z.object({
- resultExample: z.record(z.any()).describe('Can contain any fields.'),
- })
+ resultExample: z.record(z.any()).describe("Can contain any fields."),
+ }),
)
.query(async ({ input: { typebotId, blockId }, ctx: { user } }) => {
const typebot = (await prisma.typebot.findFirst({
@@ -40,23 +40,23 @@ export const getResultExample = authenticatedProcedure
variables: true,
events: true,
},
- })) as Pick | null
+ })) as Pick | null;
if (!typebot)
- throw new TRPCError({ code: 'NOT_FOUND', message: 'Typebot not found' })
+ throw new TRPCError({ code: "NOT_FOUND", message: "Typebot not found" });
- const { group } = getBlockById(blockId, typebot.groups)
+ const { group } = getBlockById(blockId, typebot.groups);
if (!group)
- throw new TRPCError({ code: 'NOT_FOUND', message: 'Block not found' })
+ throw new TRPCError({ code: "NOT_FOUND", message: "Block not found" });
- const linkedTypebots = await fetchLinkedTypebots(typebot, user)
+ const linkedTypebots = await fetchLinkedTypebots(typebot, user);
return {
resultExample: await parseSampleResult(
typebot,
linkedTypebots,
- user.email ?? undefined
+ user.email ?? undefined,
)(group.id, typebot.variables),
- }
- })
+ };
+ });
diff --git a/apps/builder/src/features/blocks/integrations/webhook/api/listWebhookBlocks.ts b/apps/builder/src/features/blocks/integrations/webhook/api/listWebhookBlocks.ts
index 7328751425..473cd6f3a1 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/api/listWebhookBlocks.ts
+++ b/apps/builder/src/features/blocks/integrations/webhook/api/listWebhookBlocks.ts
@@ -1,30 +1,30 @@
-import prisma from '@typebot.io/lib/prisma'
-import { canReadTypebots } from '@/helpers/databaseRules'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { z } from 'zod'
-import { parseGroups } from '@typebot.io/schemas/features/typebot/group'
-import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integrations/constants'
-import { Block } from '@typebot.io/schemas'
-import { isWebhookBlock } from '@typebot.io/schemas/helpers'
-import { byId } from '@typebot.io/lib'
+import { canReadTypebots } from "@/helpers/databaseRules";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import { isWebhookBlock } from "@typebot.io/blocks-core/helpers";
+import type { Block } from "@typebot.io/blocks-core/schemas/schema";
+import { IntegrationBlockType } from "@typebot.io/blocks-integrations/constants";
+import { parseGroups } from "@typebot.io/groups/schemas";
+import { byId } from "@typebot.io/lib/utils";
+import prisma from "@typebot.io/prisma";
+import { z } from "@typebot.io/zod";
export const listWebhookBlocks = authenticatedProcedure
.meta({
openapi: {
- method: 'GET',
- path: '/v1/typebots/{typebotId}/webhookBlocks',
+ method: "GET",
+ path: "/v1/typebots/{typebotId}/webhookBlocks",
protect: true,
- summary: 'List webhook blocks',
+ summary: "List webhook blocks",
description:
- 'Returns a list of all the webhook blocks that you can subscribe to.',
- tags: ['Webhook'],
+ "Returns a list of all the webhook blocks that you can subscribe to.",
+ tags: ["Webhook"],
},
})
.input(
z.object({
typebotId: z.string(),
- })
+ }),
)
.output(
z.object({
@@ -39,9 +39,9 @@ export const listWebhookBlocks = authenticatedProcedure
]),
label: z.string(),
url: z.string().optional(),
- })
+ }),
),
- })
+ }),
)
.query(async ({ input: { typebotId }, ctx: { user } }) => {
const typebot = await prisma.typebot.findFirst({
@@ -51,27 +51,27 @@ export const listWebhookBlocks = authenticatedProcedure
groups: true,
webhooks: true,
},
- })
+ });
if (!typebot)
- throw new TRPCError({ code: 'NOT_FOUND', message: 'Typebot not found' })
+ throw new TRPCError({ code: "NOT_FOUND", message: "Typebot not found" });
const groups = parseGroups(typebot.groups, {
typebotVersion: typebot.version,
- })
+ });
const webhookBlocks = groups.reduce<
{
- id: string
- label: string
- url: string | undefined
+ id: string;
+ label: string;
+ url: string | undefined;
type:
| IntegrationBlockType.WEBHOOK
| IntegrationBlockType.ZAPIER
| IntegrationBlockType.MAKE_COM
- | IntegrationBlockType.PABBLY_CONNECT
+ | IntegrationBlockType.PABBLY_CONNECT;
}[]
>((webhookBlocks, group) => {
- const blocks = (group.blocks as Block[]).filter(isWebhookBlock)
+ const blocks = (group.blocks as Block[]).filter(isWebhookBlock);
return [
...webhookBlocks,
...blocks.map((block) => ({
@@ -79,12 +79,13 @@ export const listWebhookBlocks = authenticatedProcedure
type: block.type,
label: `${group.title} > ${block.id}`,
url:
- 'webhookId' in block && !block.options?.webhook
- ? typebot?.webhooks.find(byId(block.webhookId))?.url ?? undefined
+ "webhookId" in block && !block.options?.webhook
+ ? (typebot?.webhooks.find(byId(block.webhookId))?.url ??
+ undefined)
: block.options?.webhook?.url,
})),
- ]
- }, [])
+ ];
+ }, []);
- return { webhookBlocks }
- })
+ return { webhookBlocks };
+ });
diff --git a/apps/builder/src/features/blocks/integrations/webhook/api/router.ts b/apps/builder/src/features/blocks/integrations/webhook/api/router.ts
index e5fc0204b3..bb9b077ee3 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/api/router.ts
+++ b/apps/builder/src/features/blocks/integrations/webhook/api/router.ts
@@ -1,12 +1,12 @@
-import { router } from '@/helpers/server/trpc'
-import { getResultExample } from './getResultExample'
-import { listWebhookBlocks } from './listWebhookBlocks'
-import { subscribeWebhook } from './subscribeWebhook'
-import { unsubscribeWebhook } from './unsubscribeWebhook'
+import { router } from "@/helpers/server/trpc";
+import { getResultExample } from "./getResultExample";
+import { listWebhookBlocks } from "./listWebhookBlocks";
+import { subscribeWebhook } from "./subscribeWebhook";
+import { unsubscribeWebhook } from "./unsubscribeWebhook";
export const webhookRouter = router({
listWebhookBlocks,
getResultExample,
subscribeWebhook,
unsubscribeWebhook,
-})
+});
diff --git a/apps/builder/src/features/blocks/integrations/webhook/api/subscribeWebhook.ts b/apps/builder/src/features/blocks/integrations/webhook/api/subscribeWebhook.ts
index 0cf76517a2..c746bdfd29 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/api/subscribeWebhook.ts
+++ b/apps/builder/src/features/blocks/integrations/webhook/api/subscribeWebhook.ts
@@ -1,20 +1,22 @@
-import prisma from '@typebot.io/lib/prisma'
-import { canWriteTypebots } from '@/helpers/databaseRules'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { Block, HttpRequestBlock, parseGroups } from '@typebot.io/schemas'
-import { byId } from '@typebot.io/lib'
-import { isWebhookBlock } from '@typebot.io/schemas/helpers'
-import { z } from 'zod'
+import { canWriteTypebots } from "@/helpers/databaseRules";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import { isWebhookBlock } from "@typebot.io/blocks-core/helpers";
+import type { Block } from "@typebot.io/blocks-core/schemas/schema";
+import type { HttpRequestBlock } from "@typebot.io/blocks-integrations/webhook/schema";
+import { parseGroups } from "@typebot.io/groups/schemas";
+import { byId } from "@typebot.io/lib/utils";
+import prisma from "@typebot.io/prisma";
+import { z } from "@typebot.io/zod";
export const subscribeWebhook = authenticatedProcedure
.meta({
openapi: {
- method: 'POST',
- path: '/v1/typebots/{typebotId}/webhookBlocks/{blockId}/subscribe',
+ method: "POST",
+ path: "/v1/typebots/{typebotId}/webhookBlocks/{blockId}/subscribe",
protect: true,
- summary: 'Subscribe to webhook block',
- tags: ['Webhook'],
+ summary: "Subscribe to webhook block",
+ tags: ["Webhook"],
},
})
.input(
@@ -22,13 +24,13 @@ export const subscribeWebhook = authenticatedProcedure
typebotId: z.string(),
blockId: z.string(),
url: z.string(),
- })
+ }),
)
.output(
z.object({
id: z.string(),
url: z.string().nullable(),
- })
+ }),
)
.query(async ({ input: { typebotId, blockId, url }, ctx: { user } }) => {
const typebot = await prisma.typebot.findFirst({
@@ -37,26 +39,26 @@ export const subscribeWebhook = authenticatedProcedure
version: true,
groups: true,
},
- })
+ });
if (!typebot)
- throw new TRPCError({ code: 'NOT_FOUND', message: 'Typebot not found' })
+ throw new TRPCError({ code: "NOT_FOUND", message: "Typebot not found" });
const groups = parseGroups(typebot.groups, {
typebotVersion: typebot.version,
- })
+ });
const webhookBlock = groups
.flatMap((g) => g.blocks)
- .find(byId(blockId)) as HttpRequestBlock | null
+ .find(byId(blockId)) as HttpRequestBlock | null;
if (!webhookBlock || !isWebhookBlock(webhookBlock))
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Webhook block not found',
- })
+ code: "NOT_FOUND",
+ message: "Webhook block not found",
+ });
- if (webhookBlock.options?.webhook || typebot.version === '6') {
+ if (webhookBlock.options?.webhook || typebot.version === "6") {
const updatedGroups = groups.map((group) =>
group.blocks.some((b) => b.id === webhookBlock.id)
? {
@@ -73,32 +75,32 @@ export const subscribeWebhook = authenticatedProcedure
url,
},
},
- }
+ },
),
}
- : group
- )
+ : group,
+ );
await prisma.typebot.updateMany({
where: { id: typebotId },
data: {
groups: updatedGroups,
},
- })
+ });
} else {
- if ('webhookId' in webhookBlock)
+ if ("webhookId" in webhookBlock)
await prisma.webhook.update({
where: { id: webhookBlock.webhookId },
data: { url },
- })
+ });
else
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Webhook block not found',
- })
+ code: "NOT_FOUND",
+ message: "Webhook block not found",
+ });
}
return {
id: blockId,
url,
- }
- })
+ };
+ });
diff --git a/apps/builder/src/features/blocks/integrations/webhook/api/unsubscribeWebhook.ts b/apps/builder/src/features/blocks/integrations/webhook/api/unsubscribeWebhook.ts
index 38d508e30f..bb70debc83 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/api/unsubscribeWebhook.ts
+++ b/apps/builder/src/features/blocks/integrations/webhook/api/unsubscribeWebhook.ts
@@ -1,33 +1,35 @@
-import prisma from '@typebot.io/lib/prisma'
-import { canWriteTypebots } from '@/helpers/databaseRules'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { Block, HttpRequestBlock, parseGroups } from '@typebot.io/schemas'
-import { byId } from '@typebot.io/lib'
-import { isWebhookBlock } from '@typebot.io/schemas/helpers'
-import { z } from 'zod'
+import { canWriteTypebots } from "@/helpers/databaseRules";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import { isWebhookBlock } from "@typebot.io/blocks-core/helpers";
+import type { Block } from "@typebot.io/blocks-core/schemas/schema";
+import type { HttpRequestBlock } from "@typebot.io/blocks-integrations/webhook/schema";
+import { parseGroups } from "@typebot.io/groups/schemas";
+import { byId } from "@typebot.io/lib/utils";
+import prisma from "@typebot.io/prisma";
+import { z } from "@typebot.io/zod";
export const unsubscribeWebhook = authenticatedProcedure
.meta({
openapi: {
- method: 'POST',
- path: '/v1/typebots/{typebotId}/webhookBlocks/{blockId}/unsubscribe',
+ method: "POST",
+ path: "/v1/typebots/{typebotId}/webhookBlocks/{blockId}/unsubscribe",
protect: true,
- summary: 'Unsubscribe from webhook block',
- tags: ['Webhook'],
+ summary: "Unsubscribe from webhook block",
+ tags: ["Webhook"],
},
})
.input(
z.object({
typebotId: z.string(),
blockId: z.string(),
- })
+ }),
)
.output(
z.object({
id: z.string(),
url: z.string().nullable(),
- })
+ }),
)
.query(async ({ input: { typebotId, blockId }, ctx: { user } }) => {
const typebot = await prisma.typebot.findFirst({
@@ -36,26 +38,26 @@ export const unsubscribeWebhook = authenticatedProcedure
version: true,
groups: true,
},
- })
+ });
if (!typebot)
- throw new TRPCError({ code: 'NOT_FOUND', message: 'Typebot not found' })
+ throw new TRPCError({ code: "NOT_FOUND", message: "Typebot not found" });
const groups = parseGroups(typebot.groups, {
typebotVersion: typebot.version,
- })
+ });
const webhookBlock = groups
.flatMap((g) => g.blocks)
- .find(byId(blockId)) as HttpRequestBlock | null
+ .find(byId(blockId)) as HttpRequestBlock | null;
if (!webhookBlock || !isWebhookBlock(webhookBlock))
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Webhook block not found',
- })
+ code: "NOT_FOUND",
+ message: "Webhook block not found",
+ });
- if (webhookBlock.options?.webhook || typebot.version === '6') {
+ if (webhookBlock.options?.webhook || typebot.version === "6") {
const updatedGroups = groups.map((group) =>
group.blocks.some((b) => b.id === webhookBlock.id)
? {
@@ -72,32 +74,32 @@ export const unsubscribeWebhook = authenticatedProcedure
url: undefined,
},
},
- }
+ },
),
}
- : group
- )
+ : group,
+ );
await prisma.typebot.updateMany({
where: { id: typebotId },
data: {
groups: updatedGroups,
},
- })
+ });
} else {
- if ('webhookId' in webhookBlock)
+ if ("webhookId" in webhookBlock)
await prisma.webhook.update({
where: { id: webhookBlock.webhookId },
data: { url: null },
- })
+ });
else
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Webhook block not found',
- })
+ code: "NOT_FOUND",
+ message: "Webhook block not found",
+ });
}
return {
id: blockId,
url: null,
- }
- })
+ };
+ });
diff --git a/apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestAdvancedConfigForm.tsx b/apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestAdvancedConfigForm.tsx
index ff51c178a5..18cc9c7929 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestAdvancedConfigForm.tsx
+++ b/apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestAdvancedConfigForm.tsx
@@ -1,51 +1,51 @@
-import { DropdownList } from '@/components/DropdownList'
-import { CodeEditor } from '@/components/inputs/CodeEditor'
-import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
-import { TableList, TableListItemProps } from '@/components/TableList'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { useToast } from '@/hooks/useToast'
+import { DropdownList } from "@/components/DropdownList";
+import { SwitchWithRelatedSettings } from "@/components/SwitchWithRelatedSettings";
+import { TableList, type TableListItemProps } from "@/components/TableList";
+import { NumberInput } from "@/components/inputs";
+import { CodeEditor } from "@/components/inputs/CodeEditor";
+import { SwitchWithLabel } from "@/components/inputs/SwitchWithLabel";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { useToast } from "@/hooks/useToast";
import {
- Stack,
- HStack,
Accordion,
- AccordionItem,
AccordionButton,
AccordionIcon,
+ AccordionItem,
AccordionPanel,
Button,
+ HStack,
+ Stack,
Text,
-} from '@chakra-ui/react'
-import {
- KeyValue,
- VariableForTest,
- ResponseVariableMapping,
- HttpRequest,
- HttpRequestBlock,
-} from '@typebot.io/schemas'
-import { useState, useMemo } from 'react'
-import { executeWebhook } from '../queries/executeWebhookQuery'
-import { convertVariablesForTestToVariables } from '../helpers/convertVariablesForTestToVariables'
-import { getDeepKeys } from '../helpers/getDeepKeys'
-import { QueryParamsInputs, HeadersInputs } from './KeyValueInputs'
-import { DataVariableInputs } from './ResponseMappingInputs'
-import { VariableForTestInputs } from './VariableForTestInputs'
-import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
+} from "@chakra-ui/react";
import {
HttpMethod,
defaultTimeout,
defaultWebhookAttributes,
defaultWebhookBlockOptions,
maxTimeout,
-} from '@typebot.io/schemas/features/blocks/integrations/webhook/constants'
-import { NumberInput } from '@/components/inputs'
+} from "@typebot.io/blocks-integrations/webhook/constants";
+import type {
+ HttpRequest,
+ HttpRequestBlock,
+ KeyValue,
+ ResponseVariableMapping,
+ VariableForTest,
+} from "@typebot.io/blocks-integrations/webhook/schema";
+import { useMemo, useState } from "react";
+import { convertVariablesForTestToVariables } from "../helpers/convertVariablesForTestToVariables";
+import { getDeepKeys } from "../helpers/getDeepKeys";
+import { executeWebhook } from "../queries/executeWebhookQuery";
+import { HeadersInputs, QueryParamsInputs } from "./KeyValueInputs";
+import { DataVariableInputs } from "./ResponseMappingInputs";
+import { VariableForTestInputs } from "./VariableForTestInputs";
type Props = {
- blockId: string
- webhook: HttpRequest | undefined
- options: HttpRequestBlock['options']
- onWebhookChange: (webhook: HttpRequest) => void
- onOptionsChange: (options: HttpRequestBlock['options']) => void
-}
+ blockId: string;
+ webhook: HttpRequest | undefined;
+ options: HttpRequestBlock["options"];
+ onWebhookChange: (webhook: HttpRequest) => void;
+ onOptionsChange: (options: HttpRequestBlock["options"]) => void;
+};
export const HttpRequestAdvancedConfigForm = ({
blockId,
@@ -54,72 +54,72 @@ export const HttpRequestAdvancedConfigForm = ({
onWebhookChange,
onOptionsChange,
}: Props) => {
- const { typebot, save } = useTypebot()
- const [isTestResponseLoading, setIsTestResponseLoading] = useState(false)
- const [testResponse, setTestResponse] = useState()
- const [responseKeys, setResponseKeys] = useState([])
- const { showToast } = useToast()
+ const { typebot, save } = useTypebot();
+ const [isTestResponseLoading, setIsTestResponseLoading] = useState(false);
+ const [testResponse, setTestResponse] = useState();
+ const [responseKeys, setResponseKeys] = useState([]);
+ const { showToast } = useToast();
const updateMethod = (method: HttpMethod) =>
- onWebhookChange({ ...webhook, method })
+ onWebhookChange({ ...webhook, method });
const updateQueryParams = (queryParams: KeyValue[]) =>
- onWebhookChange({ ...webhook, queryParams })
+ onWebhookChange({ ...webhook, queryParams });
const updateHeaders = (headers: KeyValue[]) =>
- onWebhookChange({ ...webhook, headers })
+ onWebhookChange({ ...webhook, headers });
- const updateBody = (body: string) => onWebhookChange({ ...webhook, body })
+ const updateBody = (body: string) => onWebhookChange({ ...webhook, body });
const updateVariablesForTest = (variablesForTest: VariableForTest[]) =>
- onOptionsChange({ ...options, variablesForTest })
+ onOptionsChange({ ...options, variablesForTest });
const updateResponseVariableMapping = (
- responseVariableMapping: ResponseVariableMapping[]
- ) => onOptionsChange({ ...options, responseVariableMapping })
+ responseVariableMapping: ResponseVariableMapping[],
+ ) => onOptionsChange({ ...options, responseVariableMapping });
const updateAdvancedConfig = (isAdvancedConfig: boolean) =>
- onOptionsChange({ ...options, isAdvancedConfig })
+ onOptionsChange({ ...options, isAdvancedConfig });
const updateIsCustomBody = (isCustomBody: boolean) =>
- onOptionsChange({ ...options, isCustomBody })
+ onOptionsChange({ ...options, isCustomBody });
const updateTimeout = (timeout: number | undefined) =>
- onOptionsChange({ ...options, timeout })
+ onOptionsChange({ ...options, timeout });
const executeTestRequest = async () => {
- if (!typebot) return
- setIsTestResponseLoading(true)
- if (!options?.webhook) await save()
- else await save()
+ if (!typebot) return;
+ setIsTestResponseLoading(true);
+ if (!options?.webhook) await save();
+ else await save();
const { data, error } = await executeWebhook(
typebot.id,
convertVariablesForTestToVariables(
options?.variablesForTest ?? [],
- typebot.variables
+ typebot.variables,
),
- { blockId }
- )
+ { blockId },
+ );
if (error)
- return showToast({ title: error.name, description: error.message })
- setTestResponse(JSON.stringify(data, undefined, 2))
- setResponseKeys(getDeepKeys(data))
- setIsTestResponseLoading(false)
- }
+ return showToast({ title: error.name, description: error.message });
+ setTestResponse(JSON.stringify(data, undefined, 2));
+ setResponseKeys(getDeepKeys(data));
+ setIsTestResponseLoading(false);
+ };
const updateIsExecutedOnClient = (isExecutedOnClient: boolean) =>
- onOptionsChange({ ...options, isExecutedOnClient })
+ onOptionsChange({ ...options, isExecutedOnClient });
const ResponseMappingInputs = useMemo(
() =>
function Component(props: TableListItemProps) {
- return
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestContent.tsx b/apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestContent.tsx
index 50b52d36c1..9fc6ed397d 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestContent.tsx
+++ b/apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestContent.tsx
@@ -1,17 +1,17 @@
-import { Stack, Text } from '@chakra-ui/react'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { HttpRequestBlock } from '@typebot.io/schemas'
-import { SetVariableLabel } from '@/components/SetVariableLabel'
+import { SetVariableLabel } from "@/components/SetVariableLabel";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { Stack, Text } from "@chakra-ui/react";
+import type { HttpRequestBlock } from "@typebot.io/blocks-integrations/webhook/schema";
type Props = {
- block: HttpRequestBlock
-}
+ block: HttpRequestBlock;
+};
export const WebhookContent = ({ block: { options } }: Props) => {
- const { typebot } = useTypebot()
- const webhook = options?.webhook
+ const { typebot } = useTypebot();
+ const webhook = options?.webhook;
- if (!webhook?.url) return Configure...
+ if (!webhook?.url) return Configure... ;
return (
@@ -27,5 +27,5 @@ export const WebhookContent = ({ block: { options } }: Props) => {
/>
))}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestIcon.tsx b/apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestIcon.tsx
index 831c841f68..a67a1e1775 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestIcon.tsx
+++ b/apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestIcon.tsx
@@ -1,5 +1,5 @@
-import { ThunderIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { ThunderIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
-export const HttpRequestIcon = (props: IconProps) =>
@@ -36,5 +39,5 @@ export const HttpRequestSettings = ({
onOptionsChange={onOptionsChange}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/webhook/components/KeyValueInputs.tsx b/apps/builder/src/features/blocks/integrations/webhook/components/KeyValueInputs.tsx
index 5cb48b223f..10311825c3 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/components/KeyValueInputs.tsx
+++ b/apps/builder/src/features/blocks/integrations/webhook/components/KeyValueInputs.tsx
@@ -1,7 +1,7 @@
-import { TextInput } from '@/components/inputs'
-import { TableListItemProps } from '@/components/TableList'
-import { Stack } from '@chakra-ui/react'
-import { KeyValue } from '@typebot.io/schemas'
+import type { TableListItemProps } from "@/components/TableList";
+import { TextInput } from "@/components/inputs";
+import { Stack } from "@chakra-ui/react";
+import type { KeyValue } from "@typebot.io/blocks-integrations/webhook/schema";
export const QueryParamsInputs = (props: TableListItemProps) => (
) => (
keyPlaceholder="e.g. email"
valuePlaceholder="e.g. {{Email}}"
/>
-)
+);
export const HeadersInputs = (props: TableListItemProps) => (
) => (
keyPlaceholder="e.g. Content-Type"
valuePlaceholder="e.g. application/json"
/>
-)
+);
export const KeyValueInputs = ({
item,
@@ -25,31 +25,31 @@ export const KeyValueInputs = ({
keyPlaceholder,
valuePlaceholder,
}: TableListItemProps & {
- keyPlaceholder?: string
- valuePlaceholder?: string
+ keyPlaceholder?: string;
+ valuePlaceholder?: string;
}) => {
const handleKeyChange = (key: string) => {
- if (key === item.key) return
- onItemChange({ ...item, key })
- }
+ if (key === item.key) return;
+ onItemChange({ ...item, key });
+ };
const handleValueChange = (value: string) => {
- if (value === item.value) return
- onItemChange({ ...item, value })
- }
+ if (value === item.value) return;
+ onItemChange({ ...item, value });
+ };
return (
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/webhook/components/ResponseMappingInputs.tsx b/apps/builder/src/features/blocks/integrations/webhook/components/ResponseMappingInputs.tsx
index 82bbf0feb9..44fdd9bad6 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/components/ResponseMappingInputs.tsx
+++ b/apps/builder/src/features/blocks/integrations/webhook/components/ResponseMappingInputs.tsx
@@ -1,8 +1,9 @@
-import { AutocompleteInput } from '@/components/inputs/AutocompleteInput'
-import { TableListItemProps } from '@/components/TableList'
-import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
-import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
-import { Variable, ResponseVariableMapping } from '@typebot.io/schemas'
+import type { TableListItemProps } from "@/components/TableList";
+import { AutocompleteInput } from "@/components/inputs/AutocompleteInput";
+import { VariableSearchInput } from "@/components/inputs/VariableSearchInput";
+import { FormControl, FormLabel, Stack } from "@chakra-ui/react";
+import type { ResponseVariableMapping } from "@typebot.io/blocks-integrations/webhook/schema";
+import type { Variable } from "@typebot.io/variables/schemas";
export const DataVariableInputs = ({
item,
@@ -10,9 +11,9 @@ export const DataVariableInputs = ({
dataItems,
}: TableListItemProps & { dataItems: string[] }) => {
const handleBodyPathChange = (bodyPath: string) =>
- onItemChange({ ...item, bodyPath })
+ onItemChange({ ...item, bodyPath });
const handleVariableChange = (variable?: Variable) =>
- onItemChange({ ...item, variableId: variable?.id })
+ onItemChange({ ...item, variableId: variable?.id });
return (
@@ -35,5 +36,5 @@ export const DataVariableInputs = ({
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/webhook/components/VariableForTestInputs.tsx b/apps/builder/src/features/blocks/integrations/webhook/components/VariableForTestInputs.tsx
index 8045059d75..e992141575 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/components/VariableForTestInputs.tsx
+++ b/apps/builder/src/features/blocks/integrations/webhook/components/VariableForTestInputs.tsx
@@ -1,34 +1,35 @@
-import { TextInput } from '@/components/inputs'
-import { TableListItemProps } from '@/components/TableList'
-import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
-import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
-import { VariableForTest, Variable } from '@typebot.io/schemas'
+import type { TableListItemProps } from "@/components/TableList";
+import { TextInput } from "@/components/inputs";
+import { VariableSearchInput } from "@/components/inputs/VariableSearchInput";
+import { FormControl, FormLabel, Stack } from "@chakra-ui/react";
+import type { VariableForTest } from "@typebot.io/blocks-integrations/webhook/schema";
+import type { Variable } from "@typebot.io/variables/schemas";
export const VariableForTestInputs = ({
item,
onItemChange,
}: TableListItemProps) => {
const handleVariableSelect = (variable?: Variable) =>
- onItemChange({ ...item, variableId: variable?.id })
+ onItemChange({ ...item, variableId: variable?.id });
const handleValueChange = (value: string) => {
- if (value === item.value) return
- onItemChange({ ...item, value })
- }
+ if (value === item.value) return;
+ onItemChange({ ...item, value });
+ };
return (
- Variable name:
+ Variable name:
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/webhook/helpers/convertVariablesForTestToVariables.ts b/apps/builder/src/features/blocks/integrations/webhook/helpers/convertVariablesForTestToVariables.ts
index 8126976596..0b956aabba 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/helpers/convertVariablesForTestToVariables.ts
+++ b/apps/builder/src/features/blocks/integrations/webhook/helpers/convertVariablesForTestToVariables.ts
@@ -1,33 +1,37 @@
-import { safeStringify } from '@typebot.io/lib/safeStringify'
-import { isDefined } from '@typebot.io/lib/utils'
-import { Variable, VariableForTest } from '@typebot.io/schemas'
+import type { VariableForTest } from "@typebot.io/blocks-integrations/webhook/schema";
+import { safeStringify } from "@typebot.io/lib/safeStringify";
+import { isDefined } from "@typebot.io/lib/utils";
+import type { Variable } from "@typebot.io/variables/schemas";
export const convertVariablesForTestToVariables = (
variablesForTest: VariableForTest[],
- variables: Variable[]
+ variables: Variable[],
): Variable[] => {
- if (!variablesForTest) return []
+ if (!variablesForTest) return [];
return [
...variables,
...variablesForTest
.filter((v) => v.variableId)
.map((variableForTest) => {
const variable = variables.find(
- (v) => v.id === variableForTest.variableId
- ) as Variable
- return { ...variable, value: parseVariableValue(variableForTest.value) }
+ (v) => v.id === variableForTest.variableId,
+ ) as Variable;
+ return {
+ ...variable,
+ value: parseVariableValue(variableForTest.value),
+ };
}, {}),
- ].filter((v) => v.value)
-}
+ ].filter((v) => v.value);
+};
const parseVariableValue = (value: string | undefined): string | string[] => {
- if (!value) return ''
+ if (!value) return "";
try {
- const parsedValue = JSON.parse(value)
+ const parsedValue = JSON.parse(value);
if (Array.isArray(parsedValue))
- return parsedValue.map(safeStringify).filter(isDefined)
- return safeStringify(parsedValue) ?? value
+ return parsedValue.map(safeStringify).filter(isDefined);
+ return safeStringify(parsedValue) ?? value;
} catch (error) {
- return value
+ return value;
}
-}
+};
diff --git a/apps/builder/src/features/blocks/integrations/webhook/helpers/getDeepKeys.ts b/apps/builder/src/features/blocks/integrations/webhook/helpers/getDeepKeys.ts
index d1610aa792..147bdf4521 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/helpers/getDeepKeys.ts
+++ b/apps/builder/src/features/blocks/integrations/webhook/helpers/getDeepKeys.ts
@@ -1,55 +1,49 @@
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const getDeepKeys = (obj: any): string[] => {
- let keys: string[] = []
+ let keys: string[] = [];
for (const key in obj) {
- if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
- const subkeys = getDeepKeys(obj[key])
- keys = keys.concat(
- subkeys.map(function (subkey) {
- return key + parseKey(subkey)
- })
- )
+ if (typeof obj[key] === "object" && !Array.isArray(obj[key])) {
+ const subkeys = getDeepKeys(obj[key]);
+ keys = keys.concat(subkeys.map((subkey) => key + parseKey(subkey)));
} else if (Array.isArray(obj[key])) {
- if (obj[key].length === 0) continue
+ if (obj[key].length === 0) continue;
- if (typeof obj[key][0] !== 'object') {
- keys.push(key)
+ if (typeof obj[key][0] !== "object") {
+ keys.push(key);
keys = keys.concat(
- obj[key].map((_: string, index: number) => `${key}[${index}]`)
- )
- continue
+ obj[key].map((_: string, index: number) => `${key}[${index}]`),
+ );
+ continue;
}
- const subkeys = getDeepKeys(obj[key][0])
+ const subkeys = getDeepKeys(obj[key][0]);
if (obj[key].length > 1) {
keys = keys.concat(
- subkeys.map(function (subkey) {
- return `${key}.flatMap(item => item${parseKey(subkey)})`
- })
- )
+ subkeys.map(
+ (subkey) => `${key}.flatMap(item => item${parseKey(subkey)})`,
+ ),
+ );
}
keys = keys.concat(
- subkeys.map(function (subkey) {
- return `${key}[0]${parseKey(subkey)}`
- })
- )
+ subkeys.map((subkey) => `${key}[0]${parseKey(subkey)}`),
+ );
} else {
- keys.push(key)
+ keys.push(key);
}
}
- return keys
-}
+ return keys;
+};
const parseKey = (key: string) => {
if (
- (key.includes(' ') ||
- key.includes('-') ||
+ (key.includes(" ") ||
+ key.includes("-") ||
!isNaN(key as unknown as number)) &&
- !key.includes('.flatMap(item => item') &&
+ !key.includes(".flatMap(item => item") &&
!key.includes("['") &&
!key.includes("']")
) {
- return `['${key}']`
+ return `['${key}']`;
}
- return `.${key}`
-}
+ return `.${key}`;
+};
diff --git a/apps/builder/src/features/blocks/integrations/webhook/queries/executeWebhookQuery.ts b/apps/builder/src/features/blocks/integrations/webhook/queries/executeWebhookQuery.ts
index fcc6856809..d8391f65ef 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/queries/executeWebhookQuery.ts
+++ b/apps/builder/src/features/blocks/integrations/webhook/queries/executeWebhookQuery.ts
@@ -1,15 +1,16 @@
-import { Variable, HttpResponse } from '@typebot.io/schemas'
-import { sendRequest } from '@typebot.io/lib'
+import type { HttpResponse } from "@typebot.io/blocks-integrations/webhook/schema";
+import { sendRequest } from "@typebot.io/lib/utils";
+import type { Variable } from "@typebot.io/variables/schemas";
export const executeWebhook = (
typebotId: string,
variables: Variable[],
- { blockId }: { blockId: string }
+ { blockId }: { blockId: string },
) =>
sendRequest({
url: `/api/typebots/${typebotId}/blocks/${blockId}/testWebhook`,
- method: 'POST',
+ method: "POST",
body: {
variables,
},
- })
+ });
diff --git a/apps/builder/src/features/blocks/integrations/webhook/webhook.spec.ts b/apps/builder/src/features/blocks/integrations/webhook/webhook.spec.ts
index ca28f83a46..f791808c03 100644
--- a/apps/builder/src/features/blocks/integrations/webhook/webhook.spec.ts
+++ b/apps/builder/src/features/blocks/integrations/webhook/webhook.spec.ts
@@ -1,109 +1,109 @@
-import test, { expect, Page } from '@playwright/test'
-import { importTypebotInDatabase } from '@typebot.io/playwright/databaseActions'
-import { createId } from '@paralleldrive/cuid2'
-import { getTestAsset } from '@/test/utils/playwright'
-import { apiToken } from '@typebot.io/playwright/databaseSetup'
-import { env } from '@typebot.io/env'
-import { omit } from '@typebot.io/lib/utils'
-
-test.describe.configure({ mode: 'parallel' })
-
-test('editor configuration should work', async ({ page }) => {
- const typebotId = createId()
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect, type Page } from "@playwright/test";
+import { env } from "@typebot.io/env";
+import { omit } from "@typebot.io/lib/utils";
+import { importTypebotInDatabase } from "@typebot.io/playwright/databaseActions";
+import { apiToken } from "@typebot.io/playwright/databaseSetup";
+
+test.describe.configure({ mode: "parallel" });
+
+test("editor configuration should work", async ({ page }) => {
+ const typebotId = createId();
await importTypebotInDatabase(
- getTestAsset('typebots/integrations/webhook.json'),
+ getTestAsset("typebots/integrations/webhook.json"),
{
id: typebotId,
- }
- )
+ },
+ );
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Configure...')
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Configure...");
await page.fill(
'input[placeholder="Paste URL..."]',
- `${env.NEXTAUTH_URL}/api/mock/webhook-easy-config`
- )
- await page.click('text=Test the request')
+ `${env.NEXTAUTH_URL}/api/mock/webhook-easy-config`,
+ );
+ await page.click("text=Test the request");
await expect(page.locator('div[role="textbox"] >> nth=-1')).toContainText(
`"Group #1": "Go", "secret 1": "content"`,
- { timeout: 10000 }
- )
+ { timeout: 10000 },
+ );
await page.fill(
'input[placeholder="Paste URL..."]',
- `${env.NEXTAUTH_URL}/api/mock/webhook`
- )
- await page.click('text=Advanced configuration')
+ `${env.NEXTAUTH_URL}/api/mock/webhook`,
+ );
+ await page.click("text=Advanced configuration");
- await page.click('text=Query params')
- await page.click('text=Add a param')
- await page.fill('input[placeholder="e.g. email"]', 'firstParam')
- await page.fill('input[placeholder="e.g. {{Email}}"]', '{{secret 1}}')
+ await page.click("text=Query params");
+ await page.click("text=Add a param");
+ await page.fill('input[placeholder="e.g. email"]', "firstParam");
+ await page.fill('input[placeholder="e.g. {{Email}}"]', "{{secret 1}}");
- await page.click('text=Add a param')
- await page.fill('input[placeholder="e.g. email"] >> nth=1', 'secondParam')
+ await page.click("text=Add a param");
+ await page.fill('input[placeholder="e.g. email"] >> nth=1', "secondParam");
await page.fill(
'input[placeholder="e.g. {{Email}}"] >> nth=1',
- '{{secret 2}}'
- )
-
- await page.click('text=Headers')
- await page.waitForTimeout(200)
- await page.getByRole('button', { name: 'Add a value' }).click()
- await page.fill('input[placeholder="e.g. Content-Type"]', 'Custom-Typebot')
- await page.fill('input[placeholder="e.g. application/json"]', '{{secret 3}}')
-
- await page.click('text=Body')
- await page.click('text=Custom body')
- await page.fill('div[role="textbox"]', '{ "customField": "{{secret 4}}" }')
-
- await page.click('text=Variable values for test')
- await addTestVariable(page, 'secret 1', 'secret1')
- await addTestVariable(page, 'secret 2', 'secret2')
- await addTestVariable(page, 'secret 3', 'secret3')
- await addTestVariable(page, 'secret 4', 'secret4')
-
- await page.click('text=Test the request')
+ "{{secret 2}}",
+ );
+
+ await page.click("text=Headers");
+ await page.waitForTimeout(200);
+ await page.getByRole("button", { name: "Add a value" }).click();
+ await page.fill('input[placeholder="e.g. Content-Type"]', "Custom-Typebot");
+ await page.fill('input[placeholder="e.g. application/json"]', "{{secret 3}}");
+
+ await page.click("text=Body");
+ await page.click("text=Custom body");
+ await page.fill('div[role="textbox"]', '{ "customField": "{{secret 4}}" }');
+
+ await page.click("text=Variable values for test");
+ await addTestVariable(page, "secret 1", "secret1");
+ await addTestVariable(page, "secret 2", "secret2");
+ await addTestVariable(page, "secret 3", "secret3");
+ await addTestVariable(page, "secret 4", "secret4");
+
+ await page.click("text=Test the request");
await expect(page.locator('div[role="textbox"] >> nth=-1')).toContainText(
- '"statusCode": 200'
- )
+ '"statusCode": 200',
+ );
- await page.click('text=Save in variables')
- await page.click('text=Add an entry >> nth=-1')
- await page.click('input[placeholder="Select the data"]')
- await page.click('text=data.flatMap(item => item.name)')
-})
+ await page.click("text=Save in variables");
+ await page.click("text=Add an entry >> nth=-1");
+ await page.click('input[placeholder="Select the data"]');
+ await page.click("text=data.flatMap(item => item.name)");
+});
const addTestVariable = async (page: Page, name: string, value: string) => {
- await page.click('text=Add an entry')
- await page.click('[data-testid="variables-input"] >> nth=-1')
- await page.click(`text="${name}"`)
- await page.fill('input >> nth=-1', value)
-}
-
-test('Webhook API endpoints should work', async ({ request }) => {
- const typebotId = createId()
- await importTypebotInDatabase(getTestAsset('typebots/api.json'), {
+ await page.click("text=Add an entry");
+ await page.click('[data-testid="variables-input"] >> nth=-1');
+ await page.click(`text="${name}"`);
+ await page.fill("input >> nth=-1", value);
+};
+
+test("Webhook API endpoints should work", async ({ request }) => {
+ const typebotId = createId();
+ await importTypebotInDatabase(getTestAsset("typebots/api.json"), {
id: typebotId,
- })
+ });
// GET webhook blocks
const getResponse = await request.get(
`/api/v1/typebots/${typebotId}/webhookBlocks`,
{
headers: { Authorization: `Bearer ${apiToken}` },
- }
- )
- const { webhookBlocks } = await getResponse.json()
- expect(webhookBlocks).toHaveLength(1)
+ },
+ );
+ const { webhookBlocks } = await getResponse.json();
+ expect(webhookBlocks).toHaveLength(1);
expect(webhookBlocks[0]).toEqual({
- id: 'webhookBlock',
- label: 'Webhook > webhookBlock',
- type: 'Webhook',
- })
+ id: "webhookBlock",
+ label: "Webhook > webhookBlock",
+ type: "Webhook",
+ });
// Subscribe webhook
- const url = 'https://test.com'
+ const url = "https://test.com";
const subscribeResponse = await request.post(
`/api/v1/typebots/${typebotId}/webhookBlocks/webhookBlock/subscribe`,
{
@@ -111,40 +111,40 @@ test('Webhook API endpoints should work', async ({ request }) => {
Authorization: `Bearer ${apiToken}`,
},
data: { url },
- }
- )
+ },
+ );
expect(await subscribeResponse.json()).toEqual({
- id: 'webhookBlock',
+ id: "webhookBlock",
url,
- })
+ });
// Unsubscribe webhook
const unsubResponse = await request.post(
`/api/v1/typebots/${typebotId}/webhookBlocks/webhookBlock/unsubscribe`,
{
headers: { Authorization: `Bearer ${apiToken}` },
- }
- )
+ },
+ );
expect(await unsubResponse.json()).toEqual({
- id: 'webhookBlock',
+ id: "webhookBlock",
url: null,
- })
+ });
// Get sample result
const sampleResponse = await request.get(
`/api/v1/typebots/${typebotId}/webhookBlocks/webhookBlock/getResultExample`,
{
headers: { Authorization: `Bearer ${apiToken}` },
- }
- )
- const sample = await sampleResponse.json()
-
- expect(omit(sample.resultExample, 'submittedAt')).toMatchObject({
- message: 'This is a sample result, it has been generated ⬇️',
- Welcome: 'Hi!',
- Email: 'user@email.com',
- Name: 'answer value',
- Services: 'Website dev, Content Marketing, Social Media, UI / UX Design',
- 'Additional information': 'answer value',
- })
-})
+ },
+ );
+ const sample = await sampleResponse.json();
+
+ expect(omit(sample.resultExample, "submittedAt")).toMatchObject({
+ message: "This is a sample result, it has been generated ⬇️",
+ Welcome: "Hi!",
+ Email: "user@email.com",
+ Name: "answer value",
+ Services: "Website dev, Content Marketing, Social Media, UI / UX Design",
+ "Additional information": "answer value",
+ });
+});
diff --git a/apps/builder/src/features/blocks/integrations/zapier/components/ZapierContent.tsx b/apps/builder/src/features/blocks/integrations/zapier/components/ZapierContent.tsx
index bc6dc821ee..5c6cc5618d 100644
--- a/apps/builder/src/features/blocks/integrations/zapier/components/ZapierContent.tsx
+++ b/apps/builder/src/features/blocks/integrations/zapier/components/ZapierContent.tsx
@@ -1,16 +1,16 @@
-import { Text } from '@chakra-ui/react'
-import { ZapierBlock } from '@typebot.io/schemas'
+import { Text } from "@chakra-ui/react";
+import type { ZapierBlock } from "@typebot.io/blocks-integrations/zapier/schema";
type Props = {
- block: ZapierBlock
-}
+ block: ZapierBlock;
+};
export const ZapierContent = ({ block }: Props) => {
if (!block.options?.webhook?.url)
- return Configure...
+ return Configure... ;
return (
Trigger zap
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/integrations/zapier/components/ZapierLogo.tsx b/apps/builder/src/features/blocks/integrations/zapier/components/ZapierLogo.tsx
index c7b32512fb..c671d576c1 100644
--- a/apps/builder/src/features/blocks/integrations/zapier/components/ZapierLogo.tsx
+++ b/apps/builder/src/features/blocks/integrations/zapier/components/ZapierLogo.tsx
@@ -1,4 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react'
+import { Icon, type IconProps } from "@chakra-ui/react";
export const ZapierLogo = (props: IconProps) => (
(
fill="#FF4A00"
/>
-)
+);
diff --git a/apps/builder/src/features/blocks/integrations/zapier/components/ZapierSettings.tsx b/apps/builder/src/features/blocks/integrations/zapier/components/ZapierSettings.tsx
index 91bbfffeab..38654129f0 100644
--- a/apps/builder/src/features/blocks/integrations/zapier/components/ZapierSettings.tsx
+++ b/apps/builder/src/features/blocks/integrations/zapier/components/ZapierSettings.tsx
@@ -1,13 +1,17 @@
-import { Alert, AlertIcon, Button, Link, Stack, Text } from '@chakra-ui/react'
-import { ExternalLinkIcon } from '@/components/icons'
-import { HttpRequest, HttpRequestBlock, ZapierBlock } from '@typebot.io/schemas'
-import React from 'react'
-import { HttpRequestAdvancedConfigForm } from '../../webhook/components/HttpRequestAdvancedConfigForm'
+import { ExternalLinkIcon } from "@/components/icons";
+import { Alert, AlertIcon, Button, Link, Stack, Text } from "@chakra-ui/react";
+import type {
+ HttpRequest,
+ HttpRequestBlock,
+} from "@typebot.io/blocks-integrations/webhook/schema";
+import type { ZapierBlock } from "@typebot.io/blocks-integrations/zapier/schema";
+import React from "react";
+import { HttpRequestAdvancedConfigForm } from "../../webhook/components/HttpRequestAdvancedConfigForm";
type Props = {
- block: ZapierBlock
- onOptionsChange: (options: HttpRequestBlock['options']) => void
-}
+ block: ZapierBlock;
+ onOptionsChange: (options: HttpRequestBlock["options"]) => void;
+};
export const ZapierSettings = ({
block: { id: blockId, options },
@@ -17,15 +21,15 @@ export const ZapierSettings = ({
onOptionsChange({
...options,
webhook: newLocalWebhook,
- })
- return
- }
+ });
+ return;
+ };
- const url = options?.webhook?.url
+ const url = options?.webhook?.url;
return (
-
+
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/logic/abTest/abTest.spec.ts b/apps/builder/src/features/blocks/logic/abTest/abTest.spec.ts
index 7067ffd739..c5674ea52c 100644
--- a/apps/builder/src/features/blocks/logic/abTest/abTest.spec.ts
+++ b/apps/builder/src/features/blocks/logic/abTest/abTest.spec.ts
@@ -1,24 +1,24 @@
-import test, { expect } from '@playwright/test'
-import { importTypebotInDatabase } from '@typebot.io/playwright/databaseActions'
-import { createId } from '@paralleldrive/cuid2'
-import { getTestAsset } from '@/test/utils/playwright'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { importTypebotInDatabase } from "@typebot.io/playwright/databaseActions";
-const typebotId = createId()
+const typebotId = createId();
-test.describe('AB Test block', () => {
- test('its configuration should work', async ({ page }) => {
- await importTypebotInDatabase(getTestAsset('typebots/logic/abTest.json'), {
+test.describe("AB Test block", () => {
+ test("its configuration should work", async ({ page }) => {
+ await importTypebotInDatabase(getTestAsset("typebots/logic/abTest.json"), {
id: typebotId,
- })
+ });
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.getByText('A 50%').click()
- await page.getByLabel('Percent of users to follow A:').fill('100')
- await expect(page.getByText('A 100%')).toBeVisible()
- await expect(page.getByText('B 0%')).toBeVisible()
- await page.getByRole('button', { name: 'Test' }).click()
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.getByText("A 50%").click();
+ await page.getByLabel("Percent of users to follow A:").fill("100");
+ await expect(page.getByText("A 100%")).toBeVisible();
+ await expect(page.getByText("B 0%")).toBeVisible();
+ await page.getByRole("button", { name: "Test" }).click();
await expect(
- page.locator('typebot-standard').getByText('How are you?')
- ).toBeVisible()
- })
-})
+ page.locator("typebot-standard").getByText("How are you?"),
+ ).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/blocks/logic/abTest/components/AbTestIcon.tsx b/apps/builder/src/features/blocks/logic/abTest/components/AbTestIcon.tsx
index b192065621..8fae52b52e 100644
--- a/apps/builder/src/features/blocks/logic/abTest/components/AbTestIcon.tsx
+++ b/apps/builder/src/features/blocks/logic/abTest/components/AbTestIcon.tsx
@@ -1,7 +1,7 @@
-import { ShuffleIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { ShuffleIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const AbTestIcon = (props: IconProps) => (
@@ -21,12 +21,12 @@ export const AbTestNodeBody = ({ block, groupId }: Props) => {
shadow="sm"
rounded="md"
bg={bg}
- borderWidth={'1px'}
+ borderWidth={"1px"}
borderColor={borderColor}
w="full"
>
- A{' '}
+ A{" "}
{block.options?.aPercent ?? defaultAbTestOptions.aPercent}%
{
shadow="sm"
rounded="md"
bg={bg}
- borderWidth={'1px'}
+ borderWidth={"1px"}
borderColor={borderColor}
w="full"
>
- B{' '}
+ B{" "}
{100 - (block.options?.aPercent ?? defaultAbTestOptions.aPercent)}%
@@ -68,5 +68,5 @@ export const AbTestNodeBody = ({ block, groupId }: Props) => {
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/logic/abTest/components/AbTestSettings.tsx b/apps/builder/src/features/blocks/logic/abTest/components/AbTestSettings.tsx
index 8dc00d26cf..9c0abc0937 100644
--- a/apps/builder/src/features/blocks/logic/abTest/components/AbTestSettings.tsx
+++ b/apps/builder/src/features/blocks/logic/abTest/components/AbTestSettings.tsx
@@ -1,18 +1,18 @@
-import { Stack } from '@chakra-ui/react'
-import React from 'react'
-import { isDefined } from '@typebot.io/lib'
-import { AbTestBlock } from '@typebot.io/schemas'
-import { NumberInput } from '@/components/inputs'
-import { defaultAbTestOptions } from '@typebot.io/schemas/features/blocks/logic/abTest/constants'
+import { NumberInput } from "@/components/inputs";
+import { Stack } from "@chakra-ui/react";
+import { defaultAbTestOptions } from "@typebot.io/blocks-logic/abTest/constants";
+import type { AbTestBlock } from "@typebot.io/blocks-logic/abTest/schema";
+import { isDefined } from "@typebot.io/lib/utils";
+import React from "react";
type Props = {
- options: AbTestBlock['options']
- onOptionsChange: (options: AbTestBlock['options']) => void
-}
+ options: AbTestBlock["options"];
+ onOptionsChange: (options: AbTestBlock["options"]) => void;
+};
export const AbTestSettings = ({ options, onOptionsChange }: Props) => {
const updateAPercent = (aPercent?: number) =>
- isDefined(aPercent) ? onOptionsChange({ ...options, aPercent }) : null
+ isDefined(aPercent) ? onOptionsChange({ ...options, aPercent }) : null;
return (
@@ -26,5 +26,5 @@ export const AbTestSettings = ({ options, onOptionsChange }: Props) => {
min={0}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/logic/condition/components/ComparisonItem.tsx b/apps/builder/src/features/blocks/logic/condition/components/ComparisonItem.tsx
index 33f88fd3f4..05949bc91f 100644
--- a/apps/builder/src/features/blocks/logic/condition/components/ComparisonItem.tsx
+++ b/apps/builder/src/features/blocks/logic/condition/components/ComparisonItem.tsx
@@ -1,63 +1,64 @@
-import { Stack } from '@chakra-ui/react'
-import { DropdownList } from '@/components/DropdownList'
-import { Comparison, Variable } from '@typebot.io/schemas'
-import { TableListItemProps } from '@/components/TableList'
-import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
-import { TextInput } from '@/components/inputs'
-import { ComparisonOperators } from '@typebot.io/schemas/features/blocks/logic/condition/constants'
-import { useTranslate } from '@tolgee/react'
+import { DropdownList } from "@/components/DropdownList";
+import type { TableListItemProps } from "@/components/TableList";
+import { TextInput } from "@/components/inputs";
+import { VariableSearchInput } from "@/components/inputs/VariableSearchInput";
+import { Stack } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { ComparisonOperators } from "@typebot.io/conditions/constants";
+import type { Comparison } from "@typebot.io/conditions/schemas";
+import type { Variable } from "@typebot.io/variables/schemas";
export const ComparisonItem = ({
item,
onItemChange,
}: TableListItemProps) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const handleSelectVariable = (variable?: Variable) => {
- if (variable?.id === item.variableId) return
- onItemChange({ ...item, variableId: variable?.id })
- }
+ if (variable?.id === item.variableId) return;
+ onItemChange({ ...item, variableId: variable?.id });
+ };
const handleSelectComparisonOperator = (
- comparisonOperator: ComparisonOperators
+ comparisonOperator: ComparisonOperators,
) => {
- if (comparisonOperator === item.comparisonOperator) return
- onItemChange({ ...item, comparisonOperator })
- }
+ if (comparisonOperator === item.comparisonOperator) return;
+ onItemChange({ ...item, comparisonOperator });
+ };
const handleChangeValue = (value: string) => {
- if (value === item.value) return
- onItemChange({ ...item, value })
- }
+ if (value === item.value) return;
+ onItemChange({ ...item, value });
+ };
return (
- )
-}
+ );
+};
const parseValuePlaceholder = (
- operator: ComparisonOperators | undefined
+ operator: ComparisonOperators | undefined,
): string => {
switch (operator) {
case ComparisonOperators.NOT_EQUAL:
@@ -67,15 +68,15 @@ const parseValuePlaceholder = (
case ComparisonOperators.ENDS_WITH:
case ComparisonOperators.NOT_CONTAINS:
case undefined:
- return 'Type a value...'
+ return "Type a value...";
case ComparisonOperators.LESS:
case ComparisonOperators.GREATER:
- return 'Type a number...'
+ return "Type a number...";
case ComparisonOperators.IS_SET:
case ComparisonOperators.IS_EMPTY:
- return ''
+ return "";
case ComparisonOperators.MATCHES_REGEX:
case ComparisonOperators.NOT_MATCH_REGEX:
- return '/^[0-9]+$/'
+ return "/^[0-9]+$/";
}
-}
+};
diff --git a/apps/builder/src/features/blocks/logic/condition/components/ConditionContent.tsx b/apps/builder/src/features/blocks/logic/condition/components/ConditionContent.tsx
index be543c5338..e5e7a2211f 100644
--- a/apps/builder/src/features/blocks/logic/condition/components/ConditionContent.tsx
+++ b/apps/builder/src/features/blocks/logic/condition/components/ConditionContent.tsx
@@ -1,35 +1,34 @@
-import { Stack, Wrap, Tag, Text, useColorModeValue } from '@chakra-ui/react'
-import { useTranslate } from '@tolgee/react'
-import { byId } from '@typebot.io/lib'
-import { Condition, Variable } from '@typebot.io/schemas'
-import {
- ComparisonOperators,
- defaultConditionItemContent,
-} from '@typebot.io/schemas/features/blocks/logic/condition/constants'
+import { Stack, Tag, Text, Wrap, useColorModeValue } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { defaultConditionItemContent } from "@typebot.io/blocks-logic/condition/constants";
+import { ComparisonOperators } from "@typebot.io/conditions/constants";
+import type { Condition } from "@typebot.io/conditions/schemas";
+import { byId } from "@typebot.io/lib/utils";
+import type { Variable } from "@typebot.io/variables/schemas";
type Props = {
- condition: Condition | undefined
- variables: Variable[]
- size?: 'xs' | 'sm'
- displaySemicolon?: boolean
-}
+ condition: Condition | undefined;
+ variables: Variable[];
+ size?: "xs" | "sm";
+ displaySemicolon?: boolean;
+};
export const ConditionContent = ({
condition,
variables,
- size = 'sm',
+ size = "sm",
displaySemicolon,
}: Props) => {
- const { t } = useTranslate()
- const comparisonValueBg = useColorModeValue('gray.200', 'gray.700')
+ const { t } = useTranslate();
+ const comparisonValueBg = useColorModeValue("gray.200", "gray.700");
return (
{condition?.comparisons?.map((comparison, idx) => {
- const variable = variables.find(byId(comparison.variableId))
+ const variable = variables.find(byId(comparison.variableId));
return (
{idx === 0 && (
- {t('blocks.inputs.button.conditionContent.if.label')}
+ {t("blocks.inputs.button.conditionContent.if.label")}
)}
{idx > 0 && (
@@ -59,39 +58,39 @@ export const ConditionContent = ({
{idx === (condition.comparisons?.length ?? 0) - 1 &&
displaySemicolon && : }
- )
+ );
})}
- )
-}
+ );
+};
const parseComparisonOperatorSymbol = (
- operator: ComparisonOperators
+ operator: ComparisonOperators,
): string => {
switch (operator) {
case ComparisonOperators.CONTAINS:
- return 'contains'
+ return "contains";
case ComparisonOperators.EQUAL:
- return '='
+ return "=";
case ComparisonOperators.GREATER:
- return '>'
+ return ">";
case ComparisonOperators.IS_SET:
- return 'is set'
+ return "is set";
case ComparisonOperators.LESS:
- return '<'
+ return "<";
case ComparisonOperators.NOT_EQUAL:
- return '!='
+ return "!=";
case ComparisonOperators.ENDS_WITH:
- return 'ends with'
+ return "ends with";
case ComparisonOperators.STARTS_WITH:
- return 'starts with'
+ return "starts with";
case ComparisonOperators.IS_EMPTY:
- return 'is empty'
+ return "is empty";
case ComparisonOperators.NOT_CONTAINS:
- return 'not contains'
+ return "not contains";
case ComparisonOperators.MATCHES_REGEX:
- return 'matches'
+ return "matches";
case ComparisonOperators.NOT_MATCH_REGEX:
- return 'not matches'
+ return "not matches";
}
-}
+};
diff --git a/apps/builder/src/features/blocks/logic/condition/components/ConditionForm.tsx b/apps/builder/src/features/blocks/logic/condition/components/ConditionForm.tsx
index a9a9893e48..a98de77306 100644
--- a/apps/builder/src/features/blocks/logic/condition/components/ConditionForm.tsx
+++ b/apps/builder/src/features/blocks/logic/condition/components/ConditionForm.tsx
@@ -1,26 +1,24 @@
-import { Flex } from '@chakra-ui/react'
-import { DropdownList } from '@/components/DropdownList'
-import { Comparison, Condition } from '@typebot.io/schemas'
-import React from 'react'
-import { ComparisonItem } from './ComparisonItem'
-import { TableList } from '@/components/TableList'
-import {
- LogicalOperator,
- defaultConditionItemContent,
-} from '@typebot.io/schemas/features/blocks/logic/condition/constants'
-import { useTranslate } from '@tolgee/react'
+import { DropdownList } from "@/components/DropdownList";
+import { TableList } from "@/components/TableList";
+import { Flex } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { defaultConditionItemContent } from "@typebot.io/blocks-logic/condition/constants";
+import { LogicalOperator } from "@typebot.io/conditions/constants";
+import type { Comparison, Condition } from "@typebot.io/conditions/schemas";
+import React from "react";
+import { ComparisonItem } from "./ComparisonItem";
type Props = {
- condition: Condition | undefined
- onConditionChange: (newCondition: Condition) => void
-}
+ condition: Condition | undefined;
+ onConditionChange: (newCondition: Condition) => void;
+};
export const ConditionForm = ({ condition, onConditionChange }: Props) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
const handleComparisonsChange = (comparisons: Comparison[]) =>
- onConditionChange({ ...condition, comparisons })
+ onConditionChange({ ...condition, comparisons });
const handleLogicalOperatorChange = (logicalOperator: LogicalOperator) =>
- onConditionChange({ ...condition, logicalOperator })
+ onConditionChange({ ...condition, logicalOperator });
return (
@@ -39,10 +37,10 @@ export const ConditionForm = ({ condition, onConditionChange }: Props) => {
)}
addLabel={t(
- 'blocks.inputs.button.buttonSettings.addComparisonButton.label'
+ "blocks.inputs.button.buttonSettings.addComparisonButton.label",
)}
>
{(props) => (null)
+ const { typebot, createItem, updateItem } = useTypebot();
+ const { openedItemId, setOpenedItemId } = useGraph();
+ const ref = useRef(null);
- const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
+ const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation();
const openPopover = () => {
- setOpenedItemId(item.id)
- }
+ setOpenedItemId(item.id);
+ };
const updateCondition = (condition: Condition) => {
- updateItem(indices, { ...item, content: condition } as ConditionItem)
- }
+ updateItem(indices, { ...item, content: condition } as ConditionItem);
+ };
const handlePlusClick = (event: React.MouseEvent) => {
- event.stopPropagation()
- const itemIndex = indices.itemIndex + 1
- const newItemId = createId()
+ event.stopPropagation();
+ const itemIndex = indices.itemIndex + 1;
+ const newItemId = createId();
createItem(
{
id: newItemId,
},
- { ...indices, itemIndex }
- )
- setOpenedItemId(newItemId)
- }
+ { ...indices, itemIndex },
+ );
+ setOpenedItemId(newItemId);
+ };
const handleMouseWheel = (e: WheelEvent) => {
- e.stopPropagation()
- }
- useEventListener('wheel', handleMouseWheel, ref.current)
+ e.stopPropagation();
+ };
+ useEventListener("wheel", handleMouseWheel, ref.current);
return (
{
{item.content?.comparisons?.length === 0 ||
comparisonIsEmpty(item.content?.comparisons?.at(0)) ? (
- Configure...
+ Configure...
) : (
{
@@ -122,10 +120,10 @@ export const ConditionItemNode = ({ item, isMouseOver, indices }: Props) => {
- )
-}
+ );
+};
const comparisonIsEmpty = (comparison?: Comparison) =>
isNotDefined(comparison?.comparisonOperator) &&
isNotDefined(comparison?.value) &&
- isNotDefined(comparison?.variableId)
+ isNotDefined(comparison?.variableId);
diff --git a/apps/builder/src/features/blocks/logic/condition/condition.spec.ts b/apps/builder/src/features/blocks/logic/condition/condition.spec.ts
index a5989ba04f..c29f2a8ea2 100644
--- a/apps/builder/src/features/blocks/logic/condition/condition.spec.ts
+++ b/apps/builder/src/features/blocks/logic/condition/condition.spec.ts
@@ -1,82 +1,82 @@
-import test, { expect } from '@playwright/test'
-import { importTypebotInDatabase } from '@typebot.io/playwright/databaseActions'
-import { createId } from '@paralleldrive/cuid2'
-import { getTestAsset } from '@/test/utils/playwright'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { importTypebotInDatabase } from "@typebot.io/playwright/databaseActions";
-const typebotId = createId()
+const typebotId = createId();
-test.describe('Condition block', () => {
- test('its configuration should work', async ({ page }) => {
+test.describe("Condition block", () => {
+ test("its configuration should work", async ({ page }) => {
await importTypebotInDatabase(
- getTestAsset('typebots/logic/condition.json'),
+ getTestAsset("typebots/logic/condition.json"),
{
id: typebotId,
- }
- )
+ },
+ );
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Configure... >> nth=0', { force: true })
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Configure... >> nth=0", { force: true });
await page.fill(
'input[placeholder="Search for a variable"] >> nth=-1',
- 'Age'
- )
- await page.getByRole('menuitem', { name: 'Age' }).click()
- await page.click('button:has-text("Select an operator")')
- await page.click('button:has-text("Greater than")', { force: true })
- await page.fill('input[placeholder="Type a number..."]', '80')
+ "Age",
+ );
+ await page.getByRole("menuitem", { name: "Age" }).click();
+ await page.click('button:has-text("Select an operator")');
+ await page.click('button:has-text("Greater than")', { force: true });
+ await page.fill('input[placeholder="Type a number..."]', "80");
- await page.click('button:has-text("Add comparison")')
+ await page.click('button:has-text("Add comparison")');
await page.fill(
':nth-match(input[placeholder="Search for a variable"], 2)',
- 'Age'
- )
- await page.getByRole('menuitem', { name: 'Age' }).click()
- await page.click('button:has-text("Select an operator")')
- await page.click('button:has-text("Less than")', { force: true })
+ "Age",
+ );
+ await page.getByRole("menuitem", { name: "Age" }).click();
+ await page.click('button:has-text("Select an operator")');
+ await page.click('button:has-text("Less than")', { force: true });
await page.fill(
':nth-match(input[placeholder="Type a number..."], 2)',
- '100'
- )
+ "100",
+ );
- await page.click('text=Configure...', { force: true })
+ await page.click("text=Configure...", { force: true });
await page.fill(
'input[placeholder="Search for a variable"] >> nth=-1',
- 'Age'
- )
- await page.getByRole('menuitem', { name: 'Age' }).click()
- await page.click('button:has-text("Select an operator")')
- await page.click('button:has-text("Greater than")', { force: true })
- await page.fill('input[placeholder="Type a number..."]', '20')
+ "Age",
+ );
+ await page.getByRole("menuitem", { name: "Age" }).click();
+ await page.click('button:has-text("Select an operator")');
+ await page.click('button:has-text("Greater than")', { force: true });
+ await page.fill('input[placeholder="Type a number..."]', "20");
- await page.click('text=Test')
+ await page.click("text=Test");
await page
- .locator('typebot-standard')
+ .locator("typebot-standard")
.locator('input[placeholder="Type a number..."]')
- .fill('15')
- await page.locator('typebot-standard').locator('text=Send').click()
+ .fill("15");
+ await page.locator("typebot-standard").locator("text=Send").click();
await expect(
- page.locator('typebot-standard').getByText('You are younger than 20')
- ).toBeVisible()
+ page.locator("typebot-standard").getByText("You are younger than 20"),
+ ).toBeVisible();
- await page.click('text=Restart')
+ await page.click("text=Restart");
await page
- .locator('typebot-standard')
+ .locator("typebot-standard")
.locator('input[placeholder="Type a number..."]')
- .fill('45')
- await page.locator('typebot-standard').locator('text=Send').click()
+ .fill("45");
+ await page.locator("typebot-standard").locator("text=Send").click();
await expect(
- page.locator('typebot-standard').getByText('You are older than 20')
- ).toBeVisible()
+ page.locator("typebot-standard").getByText("You are older than 20"),
+ ).toBeVisible();
- await page.click('text=Restart')
+ await page.click("text=Restart");
await page
- .locator('typebot-standard')
+ .locator("typebot-standard")
.locator('input[placeholder="Type a number..."]')
- .fill('90')
- await page.locator('typebot-standard').locator('text=Send').click()
+ .fill("90");
+ await page.locator("typebot-standard").locator("text=Send").click();
await expect(
- page.locator('typebot-standard').getByText('You are older than 80')
- ).toBeVisible()
- })
-})
+ page.locator("typebot-standard").getByText("You are older than 80"),
+ ).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/blocks/logic/jump/components/JumpIcon.tsx b/apps/builder/src/features/blocks/logic/jump/components/JumpIcon.tsx
index 01130ba0f0..6ac3f8774f 100644
--- a/apps/builder/src/features/blocks/logic/jump/components/JumpIcon.tsx
+++ b/apps/builder/src/features/blocks/logic/jump/components/JumpIcon.tsx
@@ -1,10 +1,10 @@
-import { featherIconsBaseProps } from '@/components/icons'
-import { Icon, IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { featherIconsBaseProps } from "@/components/icons";
+import { Icon, type IconProps } from "@chakra-ui/react";
+import React from "react";
export const JumpIcon = (props: IconProps) => (
-)
+);
diff --git a/apps/builder/src/features/blocks/logic/jump/components/JumpNodeBody.tsx b/apps/builder/src/features/blocks/logic/jump/components/JumpNodeBody.tsx
index 3dec8af0be..b74b3624c3 100644
--- a/apps/builder/src/features/blocks/logic/jump/components/JumpNodeBody.tsx
+++ b/apps/builder/src/features/blocks/logic/jump/components/JumpNodeBody.tsx
@@ -1,26 +1,26 @@
-import React from 'react'
-import { Tag, Text } from '@chakra-ui/react'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { byId, isDefined } from '@typebot.io/lib'
-import { JumpBlock } from '@typebot.io/schemas/features/blocks/logic/jump'
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { Tag, Text } from "@chakra-ui/react";
+import type { JumpBlock } from "@typebot.io/blocks-logic/jump/schema";
+import { byId, isDefined } from "@typebot.io/lib/utils";
+import React from "react";
type Props = {
- options: JumpBlock['options']
-}
+ options: JumpBlock["options"];
+};
export const JumpNodeBody = ({ options }: Props) => {
- const { typebot } = useTypebot()
- const selectedGroup = typebot?.groups.find(byId(options?.groupId))
- const blockIndex = selectedGroup?.blocks.findIndex(byId(options?.blockId))
- if (!selectedGroup) return Configure...
+ const { typebot } = useTypebot();
+ const selectedGroup = typebot?.groups.find(byId(options?.groupId));
+ const blockIndex = selectedGroup?.blocks.findIndex(byId(options?.blockId));
+ if (!selectedGroup) return Configure... ;
return (
- Jump to {selectedGroup.title} {' '}
+ Jump to {selectedGroup.title} {" "}
{isDefined(blockIndex) && blockIndex >= 0 ? (
<>
at block {blockIndex + 1}
) : null}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/logic/jump/components/JumpSettings.tsx b/apps/builder/src/features/blocks/logic/jump/components/JumpSettings.tsx
index 6a1ba7c67a..8726a92c71 100644
--- a/apps/builder/src/features/blocks/logic/jump/components/JumpSettings.tsx
+++ b/apps/builder/src/features/blocks/logic/jump/components/JumpSettings.tsx
@@ -1,38 +1,38 @@
-import { Select } from '@/components/inputs/Select'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { Stack } from '@chakra-ui/react'
-import { JumpBlock } from '@typebot.io/schemas/features/blocks/logic/jump'
-import React from 'react'
-import { byId, isNotEmpty } from '@typebot.io/lib'
-import { BlockIcon } from '@/features/editor/components/BlockIcon'
+import { Select } from "@/components/inputs/Select";
+import { BlockIcon } from "@/features/editor/components/BlockIcon";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { Stack } from "@chakra-ui/react";
+import type { JumpBlock } from "@typebot.io/blocks-logic/jump/schema";
+import { byId, isNotEmpty } from "@typebot.io/lib/utils";
+import React from "react";
type Props = {
- groupId: string
- options: JumpBlock['options']
- onOptionsChange: (options: JumpBlock['options']) => void
-}
+ groupId: string;
+ options: JumpBlock["options"];
+ onOptionsChange: (options: JumpBlock["options"]) => void;
+};
export const JumpSettings = ({ groupId, options, onOptionsChange }: Props) => {
- const { typebot } = useTypebot()
+ const { typebot } = useTypebot();
const handleGroupIdChange = (groupId?: string) =>
- onOptionsChange({ ...options, groupId })
+ onOptionsChange({ ...options, groupId });
const handleBlockIdChange = (blockId?: string) =>
- onOptionsChange({ ...options, blockId })
+ onOptionsChange({ ...options, blockId });
- const currentGroupId = typebot?.groups.find(byId(groupId))?.id
+ const currentGroupId = typebot?.groups.find(byId(groupId))?.id;
- const selectedGroup = typebot?.groups.find(byId(options?.groupId))
+ const selectedGroup = typebot?.groups.find(byId(options?.groupId));
- if (!typebot) return null
+ if (!typebot) return null;
return (
group.id !== currentGroupId && isNotEmpty(group.title)
+ (group) => group.id !== currentGroupId && isNotEmpty(group.title),
)
.map((group) => ({
label: group.title,
@@ -55,5 +55,5 @@ export const JumpSettings = ({ groupId, options, onOptionsChange }: Props) => {
/>
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/logic/jump/jump.spec.ts b/apps/builder/src/features/blocks/logic/jump/jump.spec.ts
index b640ea9d01..9d1d8f2ca9 100644
--- a/apps/builder/src/features/blocks/logic/jump/jump.spec.ts
+++ b/apps/builder/src/features/blocks/logic/jump/jump.spec.ts
@@ -1,28 +1,28 @@
-import test, { expect } from '@playwright/test'
-import { importTypebotInDatabase } from '@typebot.io/playwright/databaseActions'
-import { createId } from '@paralleldrive/cuid2'
-import { getTestAsset } from '@/test/utils/playwright'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { importTypebotInDatabase } from "@typebot.io/playwright/databaseActions";
-test('should work as expected', async ({ page }) => {
- const typebotId = createId()
- await importTypebotInDatabase(getTestAsset('typebots/logic/jump.json'), {
+test("should work as expected", async ({ page }) => {
+ const typebotId = createId();
+ await importTypebotInDatabase(getTestAsset("typebots/logic/jump.json"), {
id: typebotId,
- })
+ });
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.getByText('Configure...').click()
- await page.getByPlaceholder('Select a group').click()
- await expect(page.getByRole('menuitem', { name: 'Group #2' })).toBeHidden()
- await page.getByRole('menuitem', { name: 'Group #1' }).click()
- await page.getByPlaceholder('Select a block').click()
- await page.getByRole('menuitem', { name: 'Block #2' }).click()
- await page.getByRole('button', { name: 'Test' }).click()
- await page.getByPlaceholder('Type your answer...').fill('Hi there!')
- await page.getByRole('button', { name: 'Send' }).click()
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.getByText("Configure...").click();
+ await page.getByPlaceholder("Select a group").click();
+ await expect(page.getByRole("menuitem", { name: "Group #2" })).toBeHidden();
+ await page.getByRole("menuitem", { name: "Group #1" }).click();
+ await page.getByPlaceholder("Select a block").click();
+ await page.getByRole("menuitem", { name: "Block #2" }).click();
+ await page.getByRole("button", { name: "Test" }).click();
+ await page.getByPlaceholder("Type your answer...").fill("Hi there!");
+ await page.getByRole("button", { name: "Send" }).click();
await expect(
- page.locator('typebot-standard').getByText('How are you?').nth(1)
- ).toBeVisible()
+ page.locator("typebot-standard").getByText("How are you?").nth(1),
+ ).toBeVisible();
await expect(
- page.locator('typebot-standard').getByText('Hello this is a test!').nth(1)
- ).toBeHidden()
-})
+ page.locator("typebot-standard").getByText("Hello this is a test!").nth(1),
+ ).toBeHidden();
+});
diff --git a/apps/builder/src/features/blocks/logic/redirect/components/RedirectIcon.tsx b/apps/builder/src/features/blocks/logic/redirect/components/RedirectIcon.tsx
index ef019c3a8a..35b5c602a2 100644
--- a/apps/builder/src/features/blocks/logic/redirect/components/RedirectIcon.tsx
+++ b/apps/builder/src/features/blocks/logic/redirect/components/RedirectIcon.tsx
@@ -1,7 +1,7 @@
-import { ExternalLinkIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { ExternalLinkIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const RedirectIcon = (props: IconProps) => (
['url'] }
+type Props = { url: NonNullable["url"] };
export const RedirectNodeContent = ({ url }: Props) => (
-
- {url ? `Redirect to ${url}` : 'Configure...'}
+
+ {url ? `Redirect to ${url}` : "Configure..."}
-)
+);
diff --git a/apps/builder/src/features/blocks/logic/redirect/components/RedirectSettings.tsx b/apps/builder/src/features/blocks/logic/redirect/components/RedirectSettings.tsx
index 5e250b071f..72c82e4cb6 100644
--- a/apps/builder/src/features/blocks/logic/redirect/components/RedirectSettings.tsx
+++ b/apps/builder/src/features/blocks/logic/redirect/components/RedirectSettings.tsx
@@ -1,19 +1,20 @@
-import { TextInput } from '@/components/inputs'
-import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
-import { Stack } from '@chakra-ui/react'
-import { RedirectBlock } from '@typebot.io/schemas'
-import { defaultRedirectOptions } from '@typebot.io/schemas/features/blocks/logic/redirect/constants'
+import { TextInput } from "@/components/inputs";
+import { SwitchWithLabel } from "@/components/inputs/SwitchWithLabel";
+import { Stack } from "@chakra-ui/react";
+import { defaultRedirectOptions } from "@typebot.io/blocks-logic/redirect/constants";
+import type { RedirectBlock } from "@typebot.io/blocks-logic/redirect/schema";
type Props = {
- options: RedirectBlock['options']
- onOptionsChange: (options: RedirectBlock['options']) => void
-}
+ options: RedirectBlock["options"];
+ onOptionsChange: (options: RedirectBlock["options"]) => void;
+};
export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
- const handleUrlChange = (url?: string) => onOptionsChange({ ...options, url })
+ const handleUrlChange = (url?: string) =>
+ onOptionsChange({ ...options, url });
const handleIsNewTabChange = (isNewTab: boolean) =>
- onOptionsChange({ ...options, isNewTab })
+ onOptionsChange({ ...options, isNewTab });
return (
@@ -29,5 +30,5 @@ export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
onCheckChange={handleIsNewTabChange}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/logic/redirect/redirect.spec.ts b/apps/builder/src/features/blocks/logic/redirect/redirect.spec.ts
index 2ce5a503f3..1190026e7a 100644
--- a/apps/builder/src/features/blocks/logic/redirect/redirect.spec.ts
+++ b/apps/builder/src/features/blocks/logic/redirect/redirect.spec.ts
@@ -1,37 +1,37 @@
-import test, { expect } from '@playwright/test'
-import { importTypebotInDatabase } from '@typebot.io/playwright/databaseActions'
-import { createId } from '@paralleldrive/cuid2'
-import { getTestAsset } from '@/test/utils/playwright'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { importTypebotInDatabase } from "@typebot.io/playwright/databaseActions";
-const typebotId = createId()
+const typebotId = createId();
-test.describe('Redirect block', () => {
- test('its configuration should work', async ({ page, context }) => {
+test.describe("Redirect block", () => {
+ test("its configuration should work", async ({ page, context }) => {
await importTypebotInDatabase(
- getTestAsset('typebots/logic/redirect.json'),
+ getTestAsset("typebots/logic/redirect.json"),
{
id: typebotId,
- }
- )
+ },
+ );
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Configure...')
- await page.fill('input[placeholder="Type a URL..."]', 'google.com')
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Configure...");
+ await page.fill('input[placeholder="Type a URL..."]', "google.com");
- await page.click('text=Test')
- await page.locator('typebot-standard').locator('text=Go to URL').click()
- await expect(page).toHaveURL('https://www.google.com')
- await page.goBack()
+ await page.click("text=Test");
+ await page.locator("typebot-standard").locator("text=Go to URL").click();
+ await expect(page).toHaveURL("https://www.google.com");
+ await page.goBack();
- await page.click('text=Redirect to google.com')
- await page.click('text=Open in new tab')
+ await page.click("text=Redirect to google.com");
+ await page.click("text=Open in new tab");
- await page.click('text=Test')
+ await page.click("text=Test");
const [newPage] = await Promise.all([
- context.waitForEvent('page'),
- page.locator('typebot-standard').locator('text=Go to URL').click(),
- ])
- await newPage.waitForLoadState()
- await expect(newPage).toHaveURL('https://www.google.com')
- })
-})
+ context.waitForEvent("page"),
+ page.locator("typebot-standard").locator("text=Go to URL").click(),
+ ]);
+ await newPage.waitForLoadState();
+ await expect(newPage).toHaveURL("https://www.google.com");
+ });
+});
diff --git a/apps/builder/src/features/blocks/logic/script/components/ScriptIcon.tsx b/apps/builder/src/features/blocks/logic/script/components/ScriptIcon.tsx
index 6a489fa277..2d11c00b4c 100644
--- a/apps/builder/src/features/blocks/logic/script/components/ScriptIcon.tsx
+++ b/apps/builder/src/features/blocks/logic/script/components/ScriptIcon.tsx
@@ -1,15 +1,15 @@
-import { featherIconsBaseProps } from '@/components/icons'
-import { Icon, IconProps, useColorModeValue } from '@chakra-ui/react'
-import React from 'react'
+import { featherIconsBaseProps } from "@/components/icons";
+import { Icon, type IconProps, useColorModeValue } from "@chakra-ui/react";
+import React from "react";
export const ScriptIcon = (props: IconProps) => (
-)
+);
diff --git a/apps/builder/src/features/blocks/logic/script/components/ScriptNodeContent.tsx b/apps/builder/src/features/blocks/logic/script/components/ScriptNodeContent.tsx
index cbf9c4613c..c75ba4f64a 100644
--- a/apps/builder/src/features/blocks/logic/script/components/ScriptNodeContent.tsx
+++ b/apps/builder/src/features/blocks/logic/script/components/ScriptNodeContent.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
-import { Text } from '@chakra-ui/react'
-import { ScriptBlock } from '@typebot.io/schemas'
-import { defaultScriptOptions } from '@typebot.io/schemas/features/blocks/logic/script/constants'
+import { Text } from "@chakra-ui/react";
+import { defaultScriptOptions } from "@typebot.io/blocks-logic/script/constants";
+import type { ScriptBlock } from "@typebot.io/blocks-logic/script/schema";
+import React from "react";
type Props = {
- options: ScriptBlock['options']
-}
+ options: ScriptBlock["options"];
+};
export const ScriptNodeContent = ({
options: { name, content } = {},
}: Props) => (
-
- {content ? `Run ${name ?? defaultScriptOptions.name}` : 'Configure...'}
+
+ {content ? `Run ${name ?? defaultScriptOptions.name}` : "Configure..."}
-)
+);
diff --git a/apps/builder/src/features/blocks/logic/script/components/ScriptSettings.tsx b/apps/builder/src/features/blocks/logic/script/components/ScriptSettings.tsx
index a7ed2f1563..277159119b 100644
--- a/apps/builder/src/features/blocks/logic/script/components/ScriptSettings.tsx
+++ b/apps/builder/src/features/blocks/logic/script/components/ScriptSettings.tsx
@@ -1,25 +1,25 @@
-import { Stack, Text } from '@chakra-ui/react'
-import { CodeEditor } from '@/components/inputs/CodeEditor'
-import React from 'react'
-import { TextInput } from '@/components/inputs'
-import { ScriptBlock } from '@typebot.io/schemas'
-import { defaultScriptOptions } from '@typebot.io/schemas/features/blocks/logic/script/constants'
-import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
+import { TextInput } from "@/components/inputs";
+import { CodeEditor } from "@/components/inputs/CodeEditor";
+import { SwitchWithLabel } from "@/components/inputs/SwitchWithLabel";
+import { Stack, Text } from "@chakra-ui/react";
+import { defaultScriptOptions } from "@typebot.io/blocks-logic/script/constants";
+import type { ScriptBlock } from "@typebot.io/blocks-logic/script/schema";
+import React from "react";
type Props = {
- options: ScriptBlock['options']
- onOptionsChange: (options: ScriptBlock['options']) => void
-}
+ options: ScriptBlock["options"];
+ onOptionsChange: (options: ScriptBlock["options"]) => void;
+};
export const ScriptSettings = ({ options, onOptionsChange }: Props) => {
const handleNameChange = (name: string) =>
- onOptionsChange({ ...options, name })
+ onOptionsChange({ ...options, name });
const handleCodeChange = (content: string) =>
- onOptionsChange({ ...options, content })
+ onOptionsChange({ ...options, content });
const updateClientExecution = (isExecutedOnClient: boolean) =>
- onOptionsChange({ ...options, isExecutedOnClient })
+ onOptionsChange({ ...options, isExecutedOnClient });
return (
@@ -47,5 +47,5 @@ export const ScriptSettings = ({ options, onOptionsChange }: Props) => {
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/logic/script/script.spec.ts b/apps/builder/src/features/blocks/logic/script/script.spec.ts
index 50d19d4a6e..625bde01f4 100644
--- a/apps/builder/src/features/blocks/logic/script/script.spec.ts
+++ b/apps/builder/src/features/blocks/logic/script/script.spec.ts
@@ -1,25 +1,25 @@
-import test, { expect } from '@playwright/test'
-import { importTypebotInDatabase } from '@typebot.io/playwright/databaseActions'
-import { createId } from '@paralleldrive/cuid2'
-import { getTestAsset } from '@/test/utils/playwright'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { importTypebotInDatabase } from "@typebot.io/playwright/databaseActions";
-const typebotId = createId()
+const typebotId = createId();
-test.describe('Script block', () => {
- test('script should trigger', async ({ page }) => {
- await importTypebotInDatabase(getTestAsset('typebots/logic/script.json'), {
+test.describe("Script block", () => {
+ test("script should trigger", async ({ page }) => {
+ await importTypebotInDatabase(getTestAsset("typebots/logic/script.json"), {
id: typebotId,
- })
+ });
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Configure...')
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Configure...");
await page.fill(
'div[role="textbox"]',
- 'window.location.href = "https://www.google.com"'
- )
+ 'window.location.href = "https://www.google.com"',
+ );
- await page.click('text=Test')
- await page.getByRole('button', { name: 'Trigger code' }).click()
- await expect(page).toHaveURL('https://www.google.com')
- })
-})
+ await page.click("text=Test");
+ await page.getByRole("button", { name: "Trigger code" }).click();
+ await expect(page).toHaveURL("https://www.google.com");
+ });
+});
diff --git a/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableContent.tsx b/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableContent.tsx
index 01df5bb9cc..11da2968d0 100644
--- a/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableContent.tsx
+++ b/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableContent.tsx
@@ -1,16 +1,17 @@
-import { Tag, Text } from '@chakra-ui/react'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { SetVariableBlock, Variable } from '@typebot.io/schemas'
-import { byId } from '@typebot.io/lib'
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { Tag, Text } from "@chakra-ui/react";
+import type { SetVariableBlock } from "@typebot.io/blocks-logic/setVariable/schema";
+import { byId } from "@typebot.io/lib/utils";
+import type { Variable } from "@typebot.io/variables/schemas";
export const SetVariableContent = ({ block }: { block: SetVariableBlock }) => {
- const { typebot } = useTypebot()
+ const { typebot } = useTypebot();
const variableName =
- typebot?.variables.find(byId(block.options?.variableId))?.name ?? ''
+ typebot?.variables.find(byId(block.options?.variableId))?.name ?? "";
return (
-
- {variableName === '' ? (
- 'Click to edit...'
+
+ {variableName === "" ? (
+ "Click to edit..."
) : (
{
/>
)}
- )
-}
+ );
+};
const Expression = ({
options,
variables,
}: {
- options: SetVariableBlock['options']
- variables: Variable[]
+ options: SetVariableBlock["options"];
+ variables: Variable[];
}): JSX.Element | null => {
- const variableName = variables.find(byId(options?.variableId))?.name ?? ''
+ const variableName = variables.find(byId(options?.variableId))?.name ?? "";
switch (options?.type) {
- case 'Custom':
+ case "Custom":
case undefined:
return (
{variableName} = {options?.expressionToEvaluate}
- )
- case 'Map item with same index': {
+ );
+ case "Map item with same index": {
const baseItemVariable = variables.find(
- byId(options.mapListItemParams?.baseItemVariableId)
- )
+ byId(options.mapListItemParams?.baseItemVariableId),
+ );
const baseListVariable = variables.find(
- byId(options.mapListItemParams?.baseListVariableId)
- )
+ byId(options.mapListItemParams?.baseListVariableId),
+ );
const targetListVariable = variables.find(
- byId(options.mapListItemParams?.targetListVariableId)
- )
+ byId(options.mapListItemParams?.targetListVariableId),
+ );
return (
{variableName} = item in ${targetListVariable?.name} with same index
as ${baseItemVariable?.name} in ${baseListVariable?.name}
- )
+ );
}
- case 'Append value(s)': {
+ case "Append value(s)": {
return (
Append {options.item} in {variableName}
- )
+ );
}
- case 'Empty':
- return Reset {variableName}
- case 'Shift':
- case 'Pop': {
+ case "Empty":
+ return Reset {variableName} ;
+ case "Shift":
+ case "Pop": {
const itemVariableName = variables.find(
- byId(options.saveItemInVariableId)
- )?.name
+ byId(options.saveItemInVariableId),
+ )?.name;
return (
{options.type} {variableName}
- {itemVariableName ? ` into ${itemVariableName}` : ''}
+ {itemVariableName ? ` into ${itemVariableName}` : ""}
- )
+ );
}
- case 'Random ID':
- case 'Today':
- case 'Now':
- case 'Tomorrow':
- case 'User ID':
- case 'Result ID':
- case 'Moment of the day':
- case 'Environment name':
- case 'Transcript':
- case 'Yesterday': {
+ case "Random ID":
+ case "Today":
+ case "Now":
+ case "Tomorrow":
+ case "User ID":
+ case "Result ID":
+ case "Moment of the day":
+ case "Environment name":
+ case "Transcript":
+ case "Yesterday": {
return (
{variableName} = System.{options.type}
- )
+ );
}
- case 'Contact name':
- case 'Phone number':
+ case "Contact name":
+ case "Phone number":
return (
- {variableName} ={' '}
+ {variableName} ={" "}
WhatsApp.{options.type}
- )
+ );
}
-}
+};
diff --git a/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableIcon.tsx b/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableIcon.tsx
index 91d3a5261e..09eab95746 100644
--- a/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableIcon.tsx
+++ b/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableIcon.tsx
@@ -1,7 +1,7 @@
-import { EditIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { EditIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const SetVariableIcon = (props: IconProps) => (
) =>
+ const updateVariableId = (variable?: Pick) =>
onOptionsChange({
...options,
variableId: variable?.id,
- })
+ });
const updateValueType = (type?: string) =>
onOptionsChange({
...options,
- type: type as NonNullable['type'],
- })
+ type: type as NonNullable["type"],
+ });
const updateIsSessionVariable = (isSavingInResults: boolean) => {
- if (!selectedVariable?.id) return
+ if (!selectedVariable?.id) return;
updateVariable(selectedVariable.id, {
isSessionVariable: !isSavingInResults,
- })
- }
+ });
+ };
const isSessionOnly =
options?.type &&
sessionOnlySetVariableOptions.includes(
- options.type as (typeof sessionOnlySetVariableOptions)[number]
- )
+ options.type as (typeof sessionOnlySetVariableOptions)[number],
+ );
const isLinkedToAnswer =
options?.variableId &&
typebot?.groups.some((g) =>
g.blocks.some(
- (b) => isInputBlock(b) && b.options?.variableId === options.variableId
- )
- )
+ (b) => isInputBlock(b) && b.options?.variableId === options.variableId,
+ ),
+ );
return (
@@ -89,7 +97,7 @@ export const SetVariableSettings = ({ options, onOptionsChange }: Props) => {
label: type,
value: type,
icon:
- type === 'Contact name' || type === 'Phone number' ? (
+ type === "Contact name" || type === "Phone number" ? (
- )
-}
+ );
+};
const SetVariableValue = ({
options,
onOptionsChange,
}: {
- options: SetVariableBlock['options']
- onOptionsChange: (options: SetVariableBlock['options']) => void
+ options: SetVariableBlock["options"];
+ onOptionsChange: (options: SetVariableBlock["options"]) => void;
}): JSX.Element | null => {
const updateExpression = (expressionToEvaluate: string) =>
onOptionsChange({
...options,
- type: isDefined(options?.type) ? 'Custom' : undefined,
+ type: isDefined(options?.type) ? "Custom" : undefined,
expressionToEvaluate,
- })
+ });
const updateClientExecution = (isExecutedOnClient: boolean) =>
onOptionsChange({
...options,
isExecutedOnClient,
- })
+ });
- const updateListVariableId = (variable?: Pick) => {
- if (!options || (options.type !== 'Pop' && options.type !== 'Shift')) return
+ const updateListVariableId = (variable?: Pick) => {
+ if (!options || (options.type !== "Pop" && options.type !== "Shift"))
+ return;
onOptionsChange({
...options,
saveItemInVariableId: variable?.id,
- })
- }
+ });
+ };
- const updateItemVariableId = (variable?: Pick) => {
- if (!options || options.type !== 'Map item with same index') return
+ const updateItemVariableId = (variable?: Pick) => {
+ if (!options || options.type !== "Map item with same index") return;
onOptionsChange({
...options,
mapListItemParams: {
...options.mapListItemParams,
baseItemVariableId: variable?.id,
},
- })
- }
+ });
+ };
- const updateBaseListVariableId = (variable?: Pick) => {
- if (!options || options.type !== 'Map item with same index') return
+ const updateBaseListVariableId = (variable?: Pick) => {
+ if (!options || options.type !== "Map item with same index") return;
onOptionsChange({
...options,
mapListItemParams: {
...options.mapListItemParams,
baseListVariableId: variable?.id,
},
- })
- }
+ });
+ };
- const updateTargetListVariableId = (variable?: Pick) => {
- if (!options || options.type !== 'Map item with same index') return
+ const updateTargetListVariableId = (variable?: Pick) => {
+ if (!options || options.type !== "Map item with same index") return;
onOptionsChange({
...options,
mapListItemParams: {
...options.mapListItemParams,
targetListVariableId: variable?.id,
},
- })
- }
+ });
+ };
const updateItem = (item: string) => {
- if (!options || options.type !== 'Append value(s)') return
+ if (!options || options.type !== "Append value(s)") return;
onOptionsChange({
...options,
item,
- })
- }
+ });
+ };
- const updateIsCode = (radio: 'Text' | 'Code') => {
- if (options?.type && options.type !== 'Custom') return
+ const updateIsCode = (radio: "Text" | "Code") => {
+ if (options?.type && options.type !== "Custom") return;
onOptionsChange({
...options,
- isCode: radio === 'Code',
- })
- }
+ isCode: radio === "Code",
+ });
+ };
switch (options?.type) {
- case 'Custom':
+ case "Custom":
case undefined:
return (
<>
@@ -206,42 +215,42 @@ const SetVariableValue = ({
- )
- case 'Pop':
- case 'Shift':
+ );
+ case "Pop":
+ case "Shift":
return (
- )
+ );
}
- case 'Append value(s)': {
- return
+ case "Append value(s)": {
+ return ;
}
- case 'Moment of the day': {
+ case "Moment of the day": {
return (
- Will return either morning ,{' '}
- afternoon ,evening or{' '}
+ Will return either morning ,{" "}
+ afternoon ,evening or{" "}
night based on the current user time.
- )
+ );
}
- case 'Environment name': {
+ case "Environment name": {
return (
- Will return either web or{' '}
+ Will return either web or{" "}
whatsapp .
- )
+ );
}
- case 'Now':
- case 'Yesterday':
- case 'Tomorrow': {
+ case "Now":
+ case "Yesterday":
+ case "Tomorrow": {
return (
((typebotIds, block) => {
- if (block.type !== LogicBlockType.TYPEBOT_LINK) return typebotIds
- const typebotId = block.options?.typebotId
+ if (block.type !== LogicBlockType.TYPEBOT_LINK) return typebotIds;
+ const typebotId = block.options?.typebotId;
return isDefined(typebotId) &&
!typebotIds.includes(typebotId) &&
block.options?.mergeResults !== false
? [...typebotIds, typebotId]
- : typebotIds
- }, []) ?? []
+ : typebotIds;
+ }, []) ?? [];
- if (!linkedTypebotIds.length) return { typebots: [] }
+ if (!linkedTypebotIds.length) return { typebots: [] };
const typebots = (
await prisma.typebot.findMany({
@@ -130,7 +133,7 @@ export const getLinkedTypebots = authenticatedProcedure
.filter(async (typebot) => !(await isReadTypebotForbidden(typebot, user)))
// To avoid the out of sort memory error, we sort the typebots manually
.sort((a, b) => {
- return b.createdAt.getTime() - a.createdAt.getTime()
+ return b.createdAt.getTime() - a.createdAt.getTime();
})
.map((typebot) => ({
...typebot,
@@ -138,9 +141,9 @@ export const getLinkedTypebots = authenticatedProcedure
typebotVersion: typebot.version,
}),
variables: typebotV6Schema.shape.variables.parse(typebot.variables),
- }))
+ }));
return {
typebots,
- }
- })
+ };
+ });
diff --git a/apps/builder/src/features/blocks/logic/typebotLink/components/GroupsDropdown.tsx b/apps/builder/src/features/blocks/logic/typebotLink/components/GroupsDropdown.tsx
index 66470097bf..1927686c6e 100644
--- a/apps/builder/src/features/blocks/logic/typebotLink/components/GroupsDropdown.tsx
+++ b/apps/builder/src/features/blocks/logic/typebotLink/components/GroupsDropdown.tsx
@@ -1,13 +1,13 @@
-import { Select } from '@/components/inputs/Select'
-import { Input } from '@chakra-ui/react'
-import { Group } from '@typebot.io/schemas'
+import { Select } from "@/components/inputs/Select";
+import { Input } from "@chakra-ui/react";
+import type { Group } from "@typebot.io/groups/schemas";
type Props = {
- groups: Group[]
- groupId?: string
- onGroupIdSelected: (groupId: string | undefined) => void
- isLoading?: boolean
-}
+ groups: Group[];
+ groupId?: string;
+ onGroupIdSelected: (groupId: string | undefined) => void;
+ isLoading?: boolean;
+};
export const GroupsDropdown = ({
groups,
@@ -15,9 +15,9 @@ export const GroupsDropdown = ({
onGroupIdSelected,
isLoading,
}: Props) => {
- if (isLoading) return
@@ -56,13 +56,13 @@ export const TypebotLinkForm = ({ options, onOptionsChange }: Props) => {
groups={
typebot && isCurrentTypebotSelected
? typebot.groups
- : linkedTypebotData?.typebot?.groups ?? []
+ : (linkedTypebotData?.typebot?.groups ?? [])
}
groupId={options.groupId}
onGroupIdSelected={handleGroupIdChange}
isLoading={
linkedTypebotData?.typebot === undefined &&
- options.typebotId !== 'current' &&
+ options.typebotId !== "current" &&
typebot &&
typebot.id !== options.typebotId
}
@@ -79,5 +79,5 @@ export const TypebotLinkForm = ({ options, onOptionsChange }: Props) => {
/>
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkIcon.tsx b/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkIcon.tsx
index 9f1b905dcb..90d5c7e6d2 100644
--- a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkIcon.tsx
+++ b/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkIcon.tsx
@@ -1,7 +1,7 @@
-import { BoxIcon } from '@/components/icons'
-import { IconProps } from '@chakra-ui/react'
-import React from 'react'
+import { BoxIcon } from "@/components/icons";
+import type { IconProps } from "@chakra-ui/react";
+import React from "react";
export const TypebotLinkIcon = (props: IconProps) => (
Configure...
+ return Configure... ;
return (
- Jump{' '}
+ Jump{" "}
{blockTitle ? (
<>
to {blockTitle}
) : (
<>
- )}{' '}
+ )}{" "}
{!isCurrentTypebot ? (
<>
in {linkedTypebot?.name}
@@ -52,5 +52,5 @@ export const TypebotLinkNode = ({ block }: Props) => {
<>
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotsDropdown.tsx b/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotsDropdown.tsx
index dfa787fdc0..1c63f18d85 100644
--- a/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotsDropdown.tsx
+++ b/apps/builder/src/features/blocks/logic/typebotLink/components/TypebotsDropdown.tsx
@@ -1,18 +1,18 @@
-import { HStack, IconButton, Input } from '@chakra-ui/react'
-import { ExternalLinkIcon } from '@/components/icons'
-import { useToast } from '@/hooks/useToast'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { Select } from '@/components/inputs/Select'
-import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
-import { useTypebots } from '@/features/dashboard/hooks/useTypebots'
+import { EmojiOrImageIcon } from "@/components/EmojiOrImageIcon";
+import { ExternalLinkIcon } from "@/components/icons";
+import { Select } from "@/components/inputs/Select";
+import { useTypebots } from "@/features/dashboard/hooks/useTypebots";
+import { useToast } from "@/hooks/useToast";
+import { HStack, IconButton, Input } from "@chakra-ui/react";
+import Link from "next/link";
+import { useRouter } from "next/router";
type Props = {
- idsToExclude: string[]
- typebotId?: string | 'current'
- currentWorkspaceId: string
- onSelect: (typebotId: string | 'current' | undefined) => void
-}
+ idsToExclude: string[];
+ typebotId?: string | "current";
+ currentWorkspaceId: string;
+ onSelect: (typebotId: string | "current" | undefined) => void;
+};
export const TypebotsDropdown = ({
idsToExclude,
@@ -20,24 +20,24 @@ export const TypebotsDropdown = ({
onSelect,
currentWorkspaceId,
}: Props) => {
- const { query } = useRouter()
- const { showToast } = useToast()
+ const { query } = useRouter();
+ const { showToast } = useToast();
const { typebots, isLoading } = useTypebots({
workspaceId: currentWorkspaceId,
onError: (e) => showToast({ title: e.name, description: e.message }),
- })
+ });
- if (isLoading) return
!idsToExclude.includes(typebot.id))
@@ -54,26 +54,26 @@ export const TypebotsDropdown = ({
})),
]}
onSelect={onSelect}
- placeholder={'Select a typebot'}
+ placeholder={"Select a typebot"}
/>
- {typebotId && typebotId !== 'current' && (
+ {typebotId && typebotId !== "current" && (
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/logic/typebotLink/helpers/fetchLinkedTypebots.ts b/apps/builder/src/features/blocks/logic/typebotLink/helpers/fetchLinkedTypebots.ts
index 3b40fe688e..239e243d6e 100644
--- a/apps/builder/src/features/blocks/logic/typebotLink/helpers/fetchLinkedTypebots.ts
+++ b/apps/builder/src/features/blocks/logic/typebotLink/helpers/fetchLinkedTypebots.ts
@@ -1,25 +1,28 @@
-import prisma from '@typebot.io/lib/prisma'
-import { canReadTypebots } from '@/helpers/databaseRules'
-import { User } from '@typebot.io/prisma'
-import { Block, PublicTypebot, Typebot } from '@typebot.io/schemas'
-import { LogicBlockType } from '@typebot.io/schemas/features/blocks/logic/constants'
+import { canReadTypebots } from "@/helpers/databaseRules";
+import type { Block } from "@typebot.io/blocks-core/schemas/schema";
+import { LogicBlockType } from "@typebot.io/blocks-logic/constants";
+import prisma from "@typebot.io/prisma";
+import type { Prisma } from "@typebot.io/prisma/types";
+import type { User } from "@typebot.io/schemas/features/user/schema";
+import type { PublicTypebot } from "@typebot.io/typebot/schemas/publicTypebot";
+import type { Typebot } from "@typebot.io/typebot/schemas/typebot";
export const fetchLinkedTypebots = async (
- typebot: Pick,
- user?: User
+ typebot: Pick,
+ user?: Prisma.User,
): Promise<(Typebot | PublicTypebot)[]> => {
const linkedTypebotIds = typebot.groups
.flatMap((group) => group.blocks)
.reduce((typebotIds, block) => {
- if (block.type !== LogicBlockType.TYPEBOT_LINK) return typebotIds
- const typebotId = block.options?.typebotId
- if (!typebotId) return typebotIds
+ if (block.type !== LogicBlockType.TYPEBOT_LINK) return typebotIds;
+ const typebotId = block.options?.typebotId;
+ if (!typebotId) return typebotIds;
return typebotIds.includes(typebotId)
? typebotIds
- : [...typebotIds, typebotId]
- }, [])
- if (linkedTypebotIds.length === 0) return []
- const typebots = (await ('typebotId' in typebot
+ : [...typebotIds, typebotId];
+ }, []);
+ if (linkedTypebotIds.length === 0) return [];
+ const typebots = (await ("typebotId" in typebot
? prisma.publicTypebot.findMany({
where: { id: { in: linkedTypebotIds } },
})
@@ -32,6 +35,6 @@ export const fetchLinkedTypebots = async (
],
}
: { id: { in: linkedTypebotIds } },
- }))) as (Typebot | PublicTypebot)[]
- return typebots
-}
+ }))) as (Typebot | PublicTypebot)[];
+ return typebots;
+};
diff --git a/apps/builder/src/features/blocks/logic/typebotLink/typebotLink.spec.ts b/apps/builder/src/features/blocks/logic/typebotLink/typebotLink.spec.ts
index 6dcce8fbe2..5496e68333 100644
--- a/apps/builder/src/features/blocks/logic/typebotLink/typebotLink.spec.ts
+++ b/apps/builder/src/features/blocks/logic/typebotLink/typebotLink.spec.ts
@@ -1,67 +1,67 @@
-import test, { expect } from '@playwright/test'
-import { importTypebotInDatabase } from '@typebot.io/playwright/databaseActions'
-import { createId } from '@paralleldrive/cuid2'
-import { getTestAsset } from '@/test/utils/playwright'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { importTypebotInDatabase } from "@typebot.io/playwright/databaseActions";
-test('should be configurable', async ({ page }) => {
- const typebotId = createId()
- const linkedTypebotId = createId()
+test("should be configurable", async ({ page }) => {
+ const typebotId = createId();
+ const linkedTypebotId = createId();
await importTypebotInDatabase(
- getTestAsset('typebots/logic/linkTypebots/1.json'),
- { id: typebotId, name: 'My link typebot 1' }
- )
+ getTestAsset("typebots/logic/linkTypebots/1.json"),
+ { id: typebotId, name: "My link typebot 1" },
+ );
await importTypebotInDatabase(
- getTestAsset('typebots/logic/linkTypebots/2.json'),
- { id: linkedTypebotId, name: 'My link typebot 2' }
- )
+ getTestAsset("typebots/logic/linkTypebots/2.json"),
+ { id: linkedTypebotId, name: "My link typebot 2" },
+ );
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Configure...')
- await page.click('input[placeholder="Select a typebot"]')
- await page.click('text=My link typebot 2')
- await expect(page.locator('input[value="My link typebot 2"]')).toBeVisible()
- await expect(page.getByText('Jump in My link typebot 2')).toBeVisible()
- await page.click('[aria-label="Navigate to typebot"]')
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Configure...");
+ await page.click('input[placeholder="Select a typebot"]');
+ await page.click("text=My link typebot 2");
+ await expect(page.locator('input[value="My link typebot 2"]')).toBeVisible();
+ await expect(page.getByText("Jump in My link typebot 2")).toBeVisible();
+ await page.click('[aria-label="Navigate to typebot"]');
await expect(page).toHaveURL(
- `/typebots/${linkedTypebotId}/edit?parentId=${typebotId}`
- )
- await page.waitForTimeout(500)
- await page.click('[aria-label="Navigate back"]')
- await expect(page).toHaveURL(`/typebots/${typebotId}/edit`)
- await page.click('text=Jump in My link typebot 2')
- await expect(page.getByTestId('selected-item-label').first()).toHaveText(
- 'My link typebot 2'
- )
- await page.click('input[placeholder="Select a group"]')
- await page.click('text=Group #2')
+ `/typebots/${linkedTypebotId}/edit?parentId=${typebotId}`,
+ );
+ await page.waitForTimeout(500);
+ await page.click('[aria-label="Navigate back"]');
+ await expect(page).toHaveURL(`/typebots/${typebotId}/edit`);
+ await page.click("text=Jump in My link typebot 2");
+ await expect(page.getByTestId("selected-item-label").first()).toHaveText(
+ "My link typebot 2",
+ );
+ await page.click('input[placeholder="Select a group"]');
+ await page.click("text=Group #2");
- await page.click('text=Test')
+ await page.click("text=Test");
await expect(
- page.locator('typebot-standard').locator('text=Second block')
- ).toBeVisible()
+ page.locator("typebot-standard").locator("text=Second block"),
+ ).toBeVisible();
- await page.click('[aria-label="Close"]')
- await page.click('text=Jump to Group #2 in My link typebot 2')
- await page.getByTestId('selected-item-label').nth(1).click({ force: true })
- await page.getByLabel('Clear').click()
+ await page.click('[aria-label="Close"]');
+ await page.click("text=Jump to Group #2 in My link typebot 2");
+ await page.getByTestId("selected-item-label").nth(1).click({ force: true });
+ await page.getByLabel("Clear").click();
- await page.click('text=Test')
- await page.getByPlaceholder('Type your answer...').fill('Hello there!')
- await page.getByPlaceholder('Type your answer...').press('Enter')
+ await page.click("text=Test");
+ await page.getByPlaceholder("Type your answer...").fill("Hello there!");
+ await page.getByPlaceholder("Type your answer...").press("Enter");
await expect(
- page.locator('typebot-standard').locator('text=Hello there!')
- ).toBeVisible()
+ page.locator("typebot-standard").locator("text=Hello there!"),
+ ).toBeVisible();
- await page.click('[aria-label="Close"]')
- await page.click('text=Jump in My link typebot 2')
- await page.waitForTimeout(1000)
- await page.getByTestId('selected-item-label').first().click({ force: true })
- await page.click('button >> text=Current typebot')
- await page.getByRole('textbox').nth(2).click()
- await page.click('button >> text=Hello')
+ await page.click('[aria-label="Close"]');
+ await page.click("text=Jump in My link typebot 2");
+ await page.waitForTimeout(1000);
+ await page.getByTestId("selected-item-label").first().click({ force: true });
+ await page.click("button >> text=Current typebot");
+ await page.getByRole("textbox").nth(2).click();
+ await page.click("button >> text=Hello");
- await page.click('text=Test')
+ await page.click("text=Test");
await expect(
- page.locator('typebot-standard').locator('text=Hello world')
- ).toBeVisible()
-})
+ page.locator("typebot-standard").locator("text=Hello world"),
+ ).toBeVisible();
+});
diff --git a/apps/builder/src/features/blocks/logic/wait/components/WaitIcon.tsx b/apps/builder/src/features/blocks/logic/wait/components/WaitIcon.tsx
index 68bc3595e2..cf39474786 100644
--- a/apps/builder/src/features/blocks/logic/wait/components/WaitIcon.tsx
+++ b/apps/builder/src/features/blocks/logic/wait/components/WaitIcon.tsx
@@ -1,14 +1,14 @@
-import { featherIconsBaseProps } from '@/components/icons'
-import { Icon, IconProps, useColorModeValue } from '@chakra-ui/react'
+import { featherIconsBaseProps } from "@/components/icons";
+import { Icon, type IconProps, useColorModeValue } from "@chakra-ui/react";
export const WaitIcon = (props: IconProps) => (
-)
+);
diff --git a/apps/builder/src/features/blocks/logic/wait/components/WaitNodeContent.tsx b/apps/builder/src/features/blocks/logic/wait/components/WaitNodeContent.tsx
index 53efff013a..c6341b1b31 100644
--- a/apps/builder/src/features/blocks/logic/wait/components/WaitNodeContent.tsx
+++ b/apps/builder/src/features/blocks/logic/wait/components/WaitNodeContent.tsx
@@ -1,15 +1,15 @@
-import { Text } from '@chakra-ui/react'
-import { WaitBlock } from '@typebot.io/schemas'
-import React from 'react'
+import { Text } from "@chakra-ui/react";
+import type { WaitBlock } from "@typebot.io/blocks-logic/wait/schema";
+import React from "react";
type Props = {
- options: WaitBlock['options']
-}
+ options: WaitBlock["options"];
+};
export const WaitNodeContent = ({
options: { secondsToWaitFor } = {},
}: Props) => (
-
- {secondsToWaitFor ? `Wait for ${secondsToWaitFor}s` : 'Configure...'}
+
+ {secondsToWaitFor ? `Wait for ${secondsToWaitFor}s` : "Configure..."}
-)
+);
diff --git a/apps/builder/src/features/blocks/logic/wait/components/WaitSettings.tsx b/apps/builder/src/features/blocks/logic/wait/components/WaitSettings.tsx
index 0520cf5ac1..cb884f3f42 100644
--- a/apps/builder/src/features/blocks/logic/wait/components/WaitSettings.tsx
+++ b/apps/builder/src/features/blocks/logic/wait/components/WaitSettings.tsx
@@ -1,3 +1,5 @@
+import { TextInput } from "@/components/inputs";
+import { SwitchWithLabel } from "@/components/inputs/SwitchWithLabel";
import {
Accordion,
AccordionButton,
@@ -5,26 +7,24 @@ import {
AccordionItem,
AccordionPanel,
Stack,
-} from '@chakra-ui/react'
-import React from 'react'
-import { TextInput } from '@/components/inputs'
-import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
-import { WaitBlock } from '@typebot.io/schemas'
-import { defaultWaitOptions } from '@typebot.io/schemas/features/blocks/logic/wait/constants'
+} from "@chakra-ui/react";
+import { defaultWaitOptions } from "@typebot.io/blocks-logic/wait/constants";
+import type { WaitBlock } from "@typebot.io/blocks-logic/wait/schema";
+import React from "react";
type Props = {
- options: WaitBlock['options']
- onOptionsChange: (options: WaitBlock['options']) => void
-}
+ options: WaitBlock["options"];
+ onOptionsChange: (options: WaitBlock["options"]) => void;
+};
export const WaitSettings = ({ options, onOptionsChange }: Props) => {
const handleSecondsChange = (secondsToWaitFor: string | undefined) => {
- onOptionsChange({ ...options, secondsToWaitFor })
- }
+ onOptionsChange({ ...options, secondsToWaitFor });
+ };
const updateShouldPause = (shouldPause: boolean) => {
- onOptionsChange({ ...options, shouldPause })
- }
+ onOptionsChange({ ...options, shouldPause });
+ };
return (
@@ -52,5 +52,5 @@ export const WaitSettings = ({ options, onOptionsChange }: Props) => {
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/blocks/logic/wait/wait.spec.ts b/apps/builder/src/features/blocks/logic/wait/wait.spec.ts
index 0a32e4339b..33bde8fc09 100644
--- a/apps/builder/src/features/blocks/logic/wait/wait.spec.ts
+++ b/apps/builder/src/features/blocks/logic/wait/wait.spec.ts
@@ -1,29 +1,29 @@
-import test, { expect } from '@playwright/test'
-import { importTypebotInDatabase } from '@typebot.io/playwright/databaseActions'
-import { createId } from '@paralleldrive/cuid2'
-import { getTestAsset } from '@/test/utils/playwright'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { importTypebotInDatabase } from "@typebot.io/playwright/databaseActions";
-const typebotId = createId()
+const typebotId = createId();
-test.describe('Wait block', () => {
- test('wait should trigger', async ({ page }) => {
- await importTypebotInDatabase(getTestAsset('typebots/logic/wait.json'), {
+test.describe("Wait block", () => {
+ test("wait should trigger", async ({ page }) => {
+ await importTypebotInDatabase(getTestAsset("typebots/logic/wait.json"), {
id: typebotId,
- })
+ });
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('text=Configure...')
- await page.getByRole('textbox', { name: 'Seconds to wait for:' }).fill('3')
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click("text=Configure...");
+ await page.getByRole("textbox", { name: "Seconds to wait for:" }).fill("3");
- await page.click('text=Test')
- await page.getByRole('button', { name: 'Wait now' }).click()
- await page.waitForTimeout(1000)
+ await page.click("text=Test");
+ await page.getByRole("button", { name: "Wait now" }).click();
+ await page.waitForTimeout(1000);
await expect(
- page.locator('typebot-standard').locator('text="Hi there!"')
- ).toBeHidden()
- await page.waitForTimeout(3000)
+ page.locator("typebot-standard").locator('text="Hi there!"'),
+ ).toBeHidden();
+ await page.waitForTimeout(3000);
await expect(
- page.locator('typebot-standard').locator('text="Hi there!"')
- ).toBeVisible()
- })
-})
+ page.locator("typebot-standard").locator('text="Hi there!"'),
+ ).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/collaboration/api/getCollaborators.ts b/apps/builder/src/features/collaboration/api/getCollaborators.ts
index 4d1c708e59..cae07e8028 100644
--- a/apps/builder/src/features/collaboration/api/getCollaborators.ts
+++ b/apps/builder/src/features/collaboration/api/getCollaborators.ts
@@ -1,29 +1,29 @@
-import prisma from '@typebot.io/lib/prisma'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { z } from 'zod'
-import { collaboratorSchema } from '@typebot.io/schemas/features/collaborators'
-import { isReadTypebotForbidden } from '@/features/typebot/helpers/isReadTypebotForbidden'
+import { isReadTypebotForbidden } from "@/features/typebot/helpers/isReadTypebotForbidden";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import prisma from "@typebot.io/prisma";
+import { collaboratorSchema } from "@typebot.io/schemas/features/collaborators";
+import { z } from "@typebot.io/zod";
export const getCollaborators = authenticatedProcedure
.meta({
openapi: {
- method: 'GET',
- path: '/v1/typebots/{typebotId}/collaborators',
+ method: "GET",
+ path: "/v1/typebots/{typebotId}/collaborators",
protect: true,
- summary: 'Get collaborators',
- tags: ['Collaborators'],
+ summary: "Get collaborators",
+ tags: ["Collaborators"],
},
})
.input(
z.object({
typebotId: z.string(),
- })
+ }),
)
.output(
z.object({
collaborators: z.array(collaboratorSchema),
- })
+ }),
)
.query(async ({ input: { typebotId }, ctx: { user } }) => {
const existingTypebot = await prisma.typebot.findFirst({
@@ -44,14 +44,14 @@ export const getCollaborators = authenticatedProcedure
},
},
},
- })
+ });
if (
!existingTypebot?.id ||
(await isReadTypebotForbidden(existingTypebot, user))
)
- throw new TRPCError({ code: 'NOT_FOUND', message: 'Typebot not found' })
+ throw new TRPCError({ code: "NOT_FOUND", message: "Typebot not found" });
return {
collaborators: existingTypebot.collaborators,
- }
- })
+ };
+ });
diff --git a/apps/builder/src/features/collaboration/api/router.ts b/apps/builder/src/features/collaboration/api/router.ts
index 045af7848c..15a898b8e4 100644
--- a/apps/builder/src/features/collaboration/api/router.ts
+++ b/apps/builder/src/features/collaboration/api/router.ts
@@ -1,6 +1,6 @@
-import { router } from '@/helpers/server/trpc'
-import { getCollaborators } from './getCollaborators'
+import { router } from "@/helpers/server/trpc";
+import { getCollaborators } from "./getCollaborators";
export const collaboratorsRouter = router({
getCollaborators: getCollaborators,
-})
+});
diff --git a/apps/builder/src/features/collaboration/collaboration.spec.ts b/apps/builder/src/features/collaboration/collaboration.spec.ts
index c385acf132..30808a744b 100644
--- a/apps/builder/src/features/collaboration/collaboration.spec.ts
+++ b/apps/builder/src/features/collaboration/collaboration.spec.ts
@@ -1,24 +1,28 @@
-import test, { expect } from '@playwright/test'
-import { createId } from '@paralleldrive/cuid2'
-import { CollaborationType, Plan, WorkspaceRole } from '@typebot.io/prisma'
-import prisma from '@typebot.io/lib/prisma'
+import { createFolder } from "@/test/utils/databaseActions";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
import {
createTypebots,
injectFakeResults,
-} from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { userId } from '@typebot.io/playwright/databaseSetup'
-import { createFolder } from '@/test/utils/databaseActions'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
+} from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
+import { userId } from "@typebot.io/playwright/databaseSetup";
+import prisma from "@typebot.io/prisma";
+import {
+ CollaborationType,
+ Plan,
+ WorkspaceRole,
+} from "@typebot.io/prisma/enum";
-test.describe('Typebot owner', () => {
- test('Can invite collaborators', async ({ page }) => {
- const typebotId = createId()
- const guestWorkspaceId = createId()
+test.describe("Typebot owner", () => {
+ test("Can invite collaborators", async ({ page }) => {
+ const typebotId = createId();
+ const guestWorkspaceId = createId();
await prisma.workspace.create({
data: {
id: guestWorkspaceId,
- name: 'Guest Workspace',
+ name: "Guest Workspace",
plan: Plan.FREE,
members: {
createMany: {
@@ -26,51 +30,51 @@ test.describe('Typebot owner', () => {
},
},
},
- })
+ });
await createTypebots([
{
id: typebotId,
- name: 'Guest typebot',
+ name: "Guest typebot",
workspaceId: guestWorkspaceId,
...parseDefaultGroupWithBlock({
type: InputBlockType.TEXT,
}),
},
- ])
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('button[aria-label="Open share popover"]')
- await expect(page.locator('text=Free user')).toBeHidden()
+ ]);
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click('button[aria-label="Open share popover"]');
+ await expect(page.locator("text=Free user")).toBeHidden();
await page.fill(
'input[placeholder="colleague@company.com"]',
- 'guest@email.com'
- )
- await page.click('text=Can view')
- await page.click('text=Can edit')
- await page.click('text=Invite')
- await expect(page.locator('text=Pending')).toBeVisible()
- await expect(page.locator('text=Free user')).toBeHidden()
+ "guest@email.com",
+ );
+ await page.click("text=Can view");
+ await page.click("text=Can edit");
+ await page.click("text=Invite");
+ await expect(page.locator("text=Pending")).toBeVisible();
+ await expect(page.locator("text=Free user")).toBeHidden();
await page.fill(
'input[placeholder="colleague@company.com"]',
- 'other-user@email.com'
- )
- await page.click('text=Can edit')
- await page.click('text=Can view')
- await page.click('text=Invite')
- await expect(page.locator('text=James Doe')).toBeVisible()
- await page.click('text="guest@email.com"')
- await page.click('text="Remove"')
- await expect(page.locator('text="guest@email.com"')).toBeHidden()
- })
-})
+ "other-user@email.com",
+ );
+ await page.click("text=Can edit");
+ await page.click("text=Can view");
+ await page.click("text=Invite");
+ await expect(page.locator("text=James Doe")).toBeVisible();
+ await page.click('text="guest@email.com"');
+ await page.click('text="Remove"');
+ await expect(page.locator('text="guest@email.com"')).toBeHidden();
+ });
+});
-test.describe('Guest with read access', () => {
- test('should have shared typebots displayed', async ({ page }) => {
- const typebotId = createId()
- const guestWorkspaceId = createId()
+test.describe("Guest with read access", () => {
+ test("should have shared typebots displayed", async ({ page }) => {
+ const typebotId = createId();
+ const guestWorkspaceId = createId();
await prisma.workspace.create({
data: {
id: guestWorkspaceId,
- name: 'Guest Workspace #2',
+ name: "Guest Workspace #2",
plan: Plan.FREE,
members: {
createMany: {
@@ -78,56 +82,56 @@ test.describe('Guest with read access', () => {
},
},
},
- })
+ });
await createTypebots([
{
id: typebotId,
- name: 'Guest typebot',
+ name: "Guest typebot",
workspaceId: guestWorkspaceId,
...parseDefaultGroupWithBlock({
type: InputBlockType.TEXT,
}),
},
{
- name: 'Another typebot',
+ name: "Another typebot",
workspaceId: guestWorkspaceId,
},
- ])
+ ]);
await prisma.collaboratorsOnTypebots.create({
data: {
typebotId,
userId,
type: CollaborationType.READ,
},
- })
- await createFolder(guestWorkspaceId, 'Guest folder')
- await injectFakeResults({ typebotId, count: 10 })
- await page.goto(`/typebots`)
- await page.click('text=Pro workspace')
- await page.click('text=Guest workspace #2')
- await expect(page.locator('text=Guest typebot')).toBeVisible()
- await expect(page.locator('text=Another typebot')).toBeHidden()
- await expect(page.locator('text=Guest folder')).toBeHidden()
- await page.click('text=Guest typebot')
- await page.click('button[aria-label="Open share popover"]')
- await page.click('text=Everyone at Guest workspace')
- await expect(page.locator('text="Remove"')).toBeHidden()
- await expect(page.locator('text=John Doe')).toBeVisible()
- await page.click('text=Group #1', { force: true })
- await expect(page.locator('input[value="Group #1"]')).toBeHidden()
- await page.goto(`/typebots/${typebotId}/results`)
- await expect(page.locator('text="See logs" >> nth=9')).toBeVisible()
- })
-})
+ });
+ await createFolder(guestWorkspaceId, "Guest folder");
+ await injectFakeResults({ typebotId, count: 10 });
+ await page.goto(`/typebots`);
+ await page.click("text=Pro workspace");
+ await page.click("text=Guest workspace #2");
+ await expect(page.locator("text=Guest typebot")).toBeVisible();
+ await expect(page.locator("text=Another typebot")).toBeHidden();
+ await expect(page.locator("text=Guest folder")).toBeHidden();
+ await page.click("text=Guest typebot");
+ await page.click('button[aria-label="Open share popover"]');
+ await page.click("text=Everyone at Guest workspace");
+ await expect(page.locator('text="Remove"')).toBeHidden();
+ await expect(page.locator("text=John Doe")).toBeVisible();
+ await page.click("text=Group #1", { force: true });
+ await expect(page.locator('input[value="Group #1"]')).toBeHidden();
+ await page.goto(`/typebots/${typebotId}/results`);
+ await expect(page.locator('text="See logs" >> nth=9')).toBeVisible();
+ });
+});
-test.describe('Guest with write access', () => {
- test('should have shared typebots displayed', async ({ page }) => {
- const typebotId = createId()
- const guestWorkspaceId = createId()
+test.describe("Guest with write access", () => {
+ test("should have shared typebots displayed", async ({ page }) => {
+ const typebotId = createId();
+ const guestWorkspaceId = createId();
await prisma.workspace.create({
data: {
id: guestWorkspaceId,
- name: 'Guest Workspace #3',
+ name: "Guest Workspace #3",
plan: Plan.FREE,
members: {
createMany: {
@@ -135,60 +139,60 @@ test.describe('Guest with write access', () => {
},
},
},
- })
+ });
await createTypebots([
{
id: typebotId,
- name: 'Guest typebot',
+ name: "Guest typebot",
workspaceId: guestWorkspaceId,
...parseDefaultGroupWithBlock({
type: InputBlockType.TEXT,
}),
},
{
- name: 'Another typebot',
+ name: "Another typebot",
workspaceId: guestWorkspaceId,
},
- ])
+ ]);
await prisma.collaboratorsOnTypebots.create({
data: {
typebotId,
userId,
type: CollaborationType.WRITE,
},
- })
- await createFolder(guestWorkspaceId, 'Guest folder')
- await page.goto(`/typebots`)
- await page.click('text=Pro workspace')
- await page.click('text=Guest workspace #3')
- await expect(page.locator('text=Guest typebot')).toBeVisible()
- await expect(page.locator('text=Another typebot')).toBeHidden()
- await expect(page.locator('text=Guest folder')).toBeHidden()
- await page.click('text=Guest typebot')
- await page.click('button[aria-label="Open share popover"]')
- await page.click('text=Everyone at Guest workspace')
- await expect(page.locator('text="Remove"')).toBeHidden()
- await expect(page.locator('text=John Doe')).toBeVisible()
- await page.click('text=Group #1', { force: true })
- await expect(page.getByText('Group #1')).toBeVisible()
- })
-})
+ });
+ await createFolder(guestWorkspaceId, "Guest folder");
+ await page.goto(`/typebots`);
+ await page.click("text=Pro workspace");
+ await page.click("text=Guest workspace #3");
+ await expect(page.locator("text=Guest typebot")).toBeVisible();
+ await expect(page.locator("text=Another typebot")).toBeHidden();
+ await expect(page.locator("text=Guest folder")).toBeHidden();
+ await page.click("text=Guest typebot");
+ await page.click('button[aria-label="Open share popover"]');
+ await page.click("text=Everyone at Guest workspace");
+ await expect(page.locator('text="Remove"')).toBeHidden();
+ await expect(page.locator("text=John Doe")).toBeVisible();
+ await page.click("text=Group #1", { force: true });
+ await expect(page.getByText("Group #1")).toBeVisible();
+ });
+});
-test.describe('Guest on public typebot', () => {
- test('should have shared typebots displayed', async ({ page }) => {
- const typebotId = createId()
- const guestWorkspaceId = createId()
+test.describe("Guest on public typebot", () => {
+ test("should have shared typebots displayed", async ({ page }) => {
+ const typebotId = createId();
+ const guestWorkspaceId = createId();
await prisma.workspace.create({
data: {
id: guestWorkspaceId,
- name: 'Guest Workspace #4',
+ name: "Guest Workspace #4",
plan: Plan.FREE,
},
- })
+ });
await createTypebots([
{
id: typebotId,
- name: 'Guest typebot',
+ name: "Guest typebot",
workspaceId: guestWorkspaceId,
...parseDefaultGroupWithBlock({
type: InputBlockType.TEXT,
@@ -197,10 +201,10 @@ test.describe('Guest on public typebot', () => {
publicShare: { isEnabled: true },
},
},
- ])
- await page.goto(`/typebots/${typebotId}/edit`)
- await expect(page.getByText('Guest typebot')).toBeVisible()
- await expect(page.getByText('Duplicate')).toBeVisible()
- await expect(page.getByText('Group #1')).toBeVisible()
- })
-})
+ ]);
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await expect(page.getByText("Guest typebot")).toBeVisible();
+ await expect(page.getByText("Duplicate")).toBeVisible();
+ await expect(page.getByText("Group #1")).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/collaboration/components/CollaborationList.tsx b/apps/builder/src/features/collaboration/components/CollaborationList.tsx
index 40b9729bcd..7912e5761a 100644
--- a/apps/builder/src/features/collaboration/components/CollaborationList.tsx
+++ b/apps/builder/src/features/collaboration/components/CollaborationList.tsx
@@ -1,50 +1,51 @@
+import { EmojiOrImageIcon } from "@/components/EmojiOrImageIcon";
+import { ChevronLeftIcon } from "@/components/icons";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { useToast } from "@/hooks/useToast";
import {
- Stack,
+ Button,
+ Flex,
HStack,
Input,
- Button,
Menu,
MenuButton,
MenuItem,
MenuList,
+ Skeleton,
SkeletonCircle,
- Text,
+ Stack,
Tag,
- Flex,
- Skeleton,
-} from '@chakra-ui/react'
-import { ChevronLeftIcon } from '@/components/icons'
-import { useToast } from '@/hooks/useToast'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { CollaborationType, WorkspaceRole } from '@typebot.io/prisma'
-import React, { FormEvent, useState } from 'react'
-import { CollaboratorItem } from './CollaboratorButton'
-import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
-import { useCollaborators } from '../hooks/useCollaborators'
-import { useInvitations } from '../hooks/useInvitations'
-import { updateInvitationQuery } from '../queries/updateInvitationQuery'
-import { deleteInvitationQuery } from '../queries/deleteInvitationQuery'
-import { updateCollaboratorQuery } from '../queries/updateCollaboratorQuery'
-import { deleteCollaboratorQuery } from '../queries/deleteCollaboratorQuery'
-import { sendInvitationQuery } from '../queries/sendInvitationQuery'
-import { useTranslate } from '@tolgee/react'
-import { ReadableCollaborationType } from './ReadableCollaborationType'
+ Text,
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { CollaborationType, WorkspaceRole } from "@typebot.io/prisma/enum";
+import type { FormEvent } from "react";
+import React, { useState } from "react";
+import { useCollaborators } from "../hooks/useCollaborators";
+import { useInvitations } from "../hooks/useInvitations";
+import { deleteCollaboratorQuery } from "../queries/deleteCollaboratorQuery";
+import { deleteInvitationQuery } from "../queries/deleteInvitationQuery";
+import { sendInvitationQuery } from "../queries/sendInvitationQuery";
+import { updateCollaboratorQuery } from "../queries/updateCollaboratorQuery";
+import { updateInvitationQuery } from "../queries/updateInvitationQuery";
+import { CollaboratorItem } from "./CollaboratorButton";
+import { ReadableCollaborationType } from "./ReadableCollaborationType";
export const CollaborationList = () => {
- const { currentRole, workspace } = useWorkspace()
- const { t } = useTranslate()
- const { typebot } = useTypebot()
+ const { currentRole, workspace } = useWorkspace();
+ const { t } = useTranslate();
+ const { typebot } = useTypebot();
const [invitationType, setInvitationType] = useState(
- CollaborationType.READ
- )
- const [invitationEmail, setInvitationEmail] = useState('')
- const [isSendingInvitation, setIsSendingInvitation] = useState(false)
+ CollaborationType.READ,
+ );
+ const [invitationEmail, setInvitationEmail] = useState("");
+ const [isSendingInvitation, setIsSendingInvitation] = useState(false);
const hasFullAccess =
- (currentRole && currentRole !== WorkspaceRole.GUEST) || false
+ (currentRole && currentRole !== WorkspaceRole.GUEST) || false;
- const { showToast } = useToast()
+ const { showToast } = useToast();
const {
collaborators,
isLoading: isCollaboratorsLoading,
@@ -53,10 +54,10 @@ export const CollaborationList = () => {
typebotId: typebot?.id,
onError: (e) =>
showToast({
- title: t('share.button.popover.collaboratorsFetch.error.label'),
+ title: t("share.button.popover.collaboratorsFetch.error.label"),
description: e.message,
}),
- })
+ });
const {
invitations,
isLoading: isInvitationsLoading,
@@ -65,89 +66,89 @@ export const CollaborationList = () => {
typebotId: typebot?.id,
onError: (e) =>
showToast({
- title: t('share.button.popover.invitationsFetch.error.label'),
+ title: t("share.button.popover.invitationsFetch.error.label"),
description: e.message,
}),
- })
+ });
const handleChangeInvitationCollabType =
(email: string) => async (type: CollaborationType) => {
- if (!typebot || !hasFullAccess) return
+ if (!typebot || !hasFullAccess) return;
const { error } = await updateInvitationQuery(typebot?.id, email, {
email,
typebotId: typebot.id,
type,
- })
+ });
if (error)
- return showToast({ title: error.name, description: error.message })
+ return showToast({ title: error.name, description: error.message });
mutateInvitations({
invitations: (invitations ?? []).map((i) =>
- i.email === email ? { ...i, type } : i
+ i.email === email ? { ...i, type } : i,
),
- })
- }
+ });
+ };
const handleDeleteInvitation = (email: string) => async () => {
- if (!typebot || !hasFullAccess) return
- const { error } = await deleteInvitationQuery(typebot?.id, email)
+ if (!typebot || !hasFullAccess) return;
+ const { error } = await deleteInvitationQuery(typebot?.id, email);
if (error)
- return showToast({ title: error.name, description: error.message })
+ return showToast({ title: error.name, description: error.message });
mutateInvitations({
invitations: (invitations ?? []).filter((i) => i.email !== email),
- })
- }
+ });
+ };
const handleChangeCollaborationType =
(userId: string) => async (type: CollaborationType) => {
- if (!typebot || !hasFullAccess) return
+ if (!typebot || !hasFullAccess) return;
const { error } = await updateCollaboratorQuery(typebot?.id, userId, {
userId,
type,
typebotId: typebot.id,
- })
+ });
if (error)
- return showToast({ title: error.name, description: error.message })
+ return showToast({ title: error.name, description: error.message });
mutateCollaborators({
collaborators: (collaborators ?? []).map((c) =>
- c.userId === userId ? { ...c, type } : c
+ c.userId === userId ? { ...c, type } : c,
),
- })
- }
+ });
+ };
const handleDeleteCollaboration = (userId: string) => async () => {
- if (!typebot || !hasFullAccess) return
- const { error } = await deleteCollaboratorQuery(typebot?.id, userId)
+ if (!typebot || !hasFullAccess) return;
+ const { error } = await deleteCollaboratorQuery(typebot?.id, userId);
if (error)
- return showToast({ title: error.name, description: error.message })
+ return showToast({ title: error.name, description: error.message });
mutateCollaborators({
collaborators: (collaborators ?? []).filter((c) => c.userId !== userId),
- })
- }
+ });
+ };
const handleInvitationSubmit = async (e: FormEvent) => {
- e.preventDefault()
- if (!typebot || !hasFullAccess) return
- setIsSendingInvitation(true)
+ e.preventDefault();
+ if (!typebot || !hasFullAccess) return;
+ setIsSendingInvitation(true);
const { error } = await sendInvitationQuery(typebot.id, {
email: invitationEmail,
type: invitationType,
- })
- setIsSendingInvitation(false)
- mutateInvitations({ invitations: invitations ?? [] })
- mutateCollaborators({ collaborators: collaborators ?? [] })
+ });
+ setIsSendingInvitation(false);
+ mutateInvitations({ invitations: invitations ?? [] });
+ mutateCollaborators({ collaborators: collaborators ?? [] });
if (error)
- return showToast({ title: error.name, description: error.message })
+ return showToast({ title: error.name, description: error.message });
showToast({
- status: 'success',
- title: t('share.button.popover.invitationSent.successToast.label'),
- })
- setInvitationEmail('')
- }
+ status: "success",
+ title: t("share.button.popover.invitationSent.successToast.label"),
+ });
+ setInvitationEmail("");
+ };
return (
{workspace && (
@@ -199,12 +200,12 @@ export const CollaborationList = () => {
{collaborators?.map(({ user, type, userId }) => (
- )
-}
+ );
+};
const CollaborationTypeMenuButton = ({
type,
onChange,
}: {
- type: CollaborationType
- onChange: (type: CollaborationType) => void
+ type: CollaborationType;
+ onChange: (type: CollaborationType) => void;
}) => (
-
+
onChange(CollaborationType.READ)}>
@@ -251,4 +252,4 @@ const CollaborationTypeMenuButton = ({
-)
+);
diff --git a/apps/builder/src/features/collaboration/components/CollaboratorButton.tsx b/apps/builder/src/features/collaboration/components/CollaboratorButton.tsx
index c01fbbae0d..d6e9adcd83 100644
--- a/apps/builder/src/features/collaboration/components/CollaboratorButton.tsx
+++ b/apps/builder/src/features/collaboration/components/CollaboratorButton.tsx
@@ -9,22 +9,22 @@ import {
Tag,
Text,
useColorModeValue,
-} from '@chakra-ui/react'
-import { CollaborationType } from '@typebot.io/prisma'
-import React from 'react'
-import { useTranslate } from '@tolgee/react'
-import { ReadableCollaborationType } from './ReadableCollaborationType'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { CollaborationType } from "@typebot.io/prisma/enum";
+import React from "react";
+import { ReadableCollaborationType } from "./ReadableCollaborationType";
type Props = {
- image?: string
- name?: string
- email: string
- type: CollaborationType
- isGuest?: boolean
- isOwner: boolean
- onDeleteClick: () => void
- onChangeCollaborationType: (type: CollaborationType) => void
-}
+ image?: string;
+ name?: string;
+ email: string;
+ type: CollaborationType;
+ isGuest?: boolean;
+ isOwner: boolean;
+ onDeleteClick: () => void;
+ onChangeCollaborationType: (type: CollaborationType) => void;
+};
export const CollaboratorItem = ({
email,
@@ -36,12 +36,12 @@ export const CollaboratorItem = ({
onDeleteClick,
onChangeCollaborationType,
}: Props) => {
- const { t } = useTranslate()
- const hoverBgColor = useColorModeValue('gray.100', 'gray.700')
+ const { t } = useTranslate();
+ const hoverBgColor = useColorModeValue("gray.100", "gray.700");
const handleEditClick = () =>
- onChangeCollaborationType(CollaborationType.WRITE)
+ onChangeCollaborationType(CollaborationType.WRITE);
const handleViewClick = () =>
- onChangeCollaborationType(CollaborationType.READ)
+ onChangeCollaborationType(CollaborationType.READ);
return (
@@ -62,13 +62,13 @@ export const CollaboratorItem = ({
- {t('remove')}
+ {t("remove")}
)}
- )
-}
+ );
+};
export const CollaboratorIdentityContent = ({
name,
@@ -77,13 +77,13 @@ export const CollaboratorIdentityContent = ({
image,
email,
}: {
- name?: string
- type: CollaborationType
- image?: string
- isGuest?: boolean
- email: string
+ name?: string;
+ type: CollaborationType;
+ image?: string;
+ isGuest?: boolean;
+ email: string;
}) => {
- const { t } = useTranslate()
+ const { t } = useTranslate();
return (
@@ -97,7 +97,7 @@ export const CollaboratorIdentityContent = ({
)}
{email}
@@ -105,11 +105,11 @@ export const CollaboratorIdentityContent = ({
- {isGuest && {t('pending')} }
+ {isGuest && {t("pending")} }
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/collaboration/components/ReadableCollaborationType.tsx b/apps/builder/src/features/collaboration/components/ReadableCollaborationType.tsx
index 1f2f7dc125..41d6189439 100644
--- a/apps/builder/src/features/collaboration/components/ReadableCollaborationType.tsx
+++ b/apps/builder/src/features/collaboration/components/ReadableCollaborationType.tsx
@@ -1,14 +1,14 @@
-import { T } from '@tolgee/react'
-import { CollaborationType } from '@typebot.io/prisma'
+import { T } from "@tolgee/react";
+import { CollaborationType } from "@typebot.io/prisma/enum";
-type Props = { type: CollaborationType }
+type Props = { type: CollaborationType };
export const ReadableCollaborationType = ({ type }: Props) => {
switch (type) {
case CollaborationType.READ:
- return
+ collaborator: Omit,
) =>
sendRequest({
- method: 'PATCH',
+ method: "PATCH",
url: `/api/typebots/${typebotId}/collaborators/${userId}`,
body: collaborator,
- })
+ });
diff --git a/apps/builder/src/features/collaboration/queries/updateInvitationQuery.ts b/apps/builder/src/features/collaboration/queries/updateInvitationQuery.ts
index 4fb04bc2c9..31c5e699b6 100644
--- a/apps/builder/src/features/collaboration/queries/updateInvitationQuery.ts
+++ b/apps/builder/src/features/collaboration/queries/updateInvitationQuery.ts
@@ -1,13 +1,13 @@
-import { Invitation } from '@typebot.io/prisma'
-import { sendRequest } from '@typebot.io/lib'
+import { sendRequest } from "@typebot.io/lib/utils";
+import type { Prisma } from "@typebot.io/prisma/types";
export const updateInvitationQuery = (
typebotId: string,
email: string,
- invitation: Omit
+ invitation: Omit,
) =>
sendRequest({
- method: 'PATCH',
+ method: "PATCH",
url: `/api/typebots/${typebotId}/invitations/${email}`,
body: invitation,
- })
+ });
diff --git a/apps/builder/src/features/collaboration/types.ts b/apps/builder/src/features/collaboration/types.ts
index 6571580757..ebd49597e0 100644
--- a/apps/builder/src/features/collaboration/types.ts
+++ b/apps/builder/src/features/collaboration/types.ts
@@ -1,9 +1,9 @@
-import { CollaboratorsOnTypebots } from '@typebot.io/prisma'
+import type { Prisma } from "@typebot.io/prisma/types";
-export type Collaborator = CollaboratorsOnTypebots & {
+export type Collaborator = Prisma.CollaboratorsOnTypebots & {
user: {
- name: string | null
- image: string | null
- email: string | null
- }
-}
+ name: string | null;
+ image: string | null;
+ email: string | null;
+ };
+};
diff --git a/apps/builder/src/features/credentials/api/createCredentials.ts b/apps/builder/src/features/credentials/api/createCredentials.ts
index e755c93f5a..79b82fd017 100644
--- a/apps/builder/src/features/credentials/api/createCredentials.ts
+++ b/apps/builder/src/features/credentials/api/createCredentials.ts
@@ -1,78 +1,79 @@
-import prisma from '@typebot.io/lib/prisma'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { smtpCredentialsSchema } from '@typebot.io/schemas/features/blocks/integrations/sendEmail'
-import { encrypt } from '@typebot.io/lib/api/encryption/encrypt'
-import { z } from 'zod'
-import { whatsAppCredentialsSchema } from '@typebot.io/schemas/features/whatsapp'
-import {
- Credentials,
- googleSheetsCredentialsSchema,
- stripeCredentialsSchema,
-} from '@typebot.io/schemas'
-import { isDefined } from '@typebot.io/lib/utils'
-import { isWriteWorkspaceForbidden } from '@/features/workspace/helpers/isWriteWorkspaceForbidden'
-import { trackEvents } from '@typebot.io/telemetry/trackEvents'
-import { forgedCredentialsSchemas } from '@typebot.io/forge-repository/credentials'
+import { isWriteWorkspaceForbidden } from "@/features/workspace/helpers/isWriteWorkspaceForbidden";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import { stripeCredentialsSchema } from "@typebot.io/blocks-inputs/payment/schema";
+import { googleSheetsCredentialsSchema } from "@typebot.io/blocks-integrations/googleSheets/schema";
+import { smtpCredentialsSchema } from "@typebot.io/blocks-integrations/sendEmail/schema";
+import type { Credentials } from "@typebot.io/credentials/schemas";
+import { forgedCredentialsSchemas } from "@typebot.io/forge-repository/credentials";
+import { encrypt } from "@typebot.io/lib/api/encryption/encrypt";
+import { isDefined } from "@typebot.io/lib/utils";
+import prisma from "@typebot.io/prisma";
+import { trackEvents } from "@typebot.io/telemetry/trackEvents";
+import { whatsAppCredentialsSchema } from "@typebot.io/whatsapp/schemas";
+import { z } from "@typebot.io/zod";
const inputShape = {
data: true,
type: true,
workspaceId: true,
name: true,
-} as const
+} as const;
export const createCredentials = authenticatedProcedure
.meta({
openapi: {
- method: 'POST',
- path: '/v1/credentials',
+ method: "POST",
+ path: "/v1/credentials",
protect: true,
- summary: 'Create credentials',
- tags: ['Credentials'],
+ summary: "Create credentials",
+ tags: ["Credentials"],
},
})
.input(
z.object({
credentials: z
- .discriminatedUnion('type', [
+ .discriminatedUnion("type", [
stripeCredentialsSchema.pick(inputShape),
smtpCredentialsSchema.pick(inputShape),
googleSheetsCredentialsSchema.pick(inputShape),
whatsAppCredentialsSchema.pick(inputShape),
...Object.values(forgedCredentialsSchemas).map((i) =>
- i.pick(inputShape)
+ i.pick(inputShape),
),
])
.and(z.object({ id: z.string().cuid2().optional() })),
- })
+ }),
)
.output(
z.object({
credentialsId: z.string(),
- })
+ }),
)
.mutation(async ({ input: { credentials }, ctx: { user } }) => {
if (
await isNotAvailable(
credentials.name,
- credentials.type as Credentials['type']
+ credentials.type as Credentials["type"],
)
)
throw new TRPCError({
- code: 'CONFLICT',
- message: 'Credentials already exist.',
- })
+ code: "CONFLICT",
+ message: "Credentials already exist.",
+ });
const workspace = await prisma.workspace.findFirst({
where: {
id: credentials.workspaceId,
},
select: { id: true, members: { select: { userId: true, role: true } } },
- })
+ });
if (!workspace || isWriteWorkspaceForbidden(workspace, user))
- throw new TRPCError({ code: 'NOT_FOUND', message: 'Workspace not found' })
+ throw new TRPCError({
+ code: "NOT_FOUND",
+ message: "Workspace not found",
+ });
- const { encryptedData, iv } = await encrypt(credentials.data)
+ const { encryptedData, iv } = await encrypt(credentials.data);
const createdCredentials = await prisma.credentials.create({
data: {
...credentials,
@@ -82,25 +83,25 @@ export const createCredentials = authenticatedProcedure
select: {
id: true,
},
- })
- if (credentials.type === 'whatsApp')
+ });
+ if (credentials.type === "whatsApp")
await trackEvents([
{
workspaceId: workspace.id,
userId: user.id,
- name: 'WhatsApp credentials created',
+ name: "WhatsApp credentials created",
},
- ])
- return { credentialsId: createdCredentials.id }
- })
+ ]);
+ return { credentialsId: createdCredentials.id };
+ });
-const isNotAvailable = async (name: string, type: Credentials['type']) => {
- if (type !== 'whatsApp') return
+const isNotAvailable = async (name: string, type: Credentials["type"]) => {
+ if (type !== "whatsApp") return;
const existingCredentials = await prisma.credentials.findFirst({
where: {
type,
name,
},
- })
- return isDefined(existingCredentials)
-}
+ });
+ return isDefined(existingCredentials);
+};
diff --git a/apps/builder/src/features/credentials/api/deleteCredentials.ts b/apps/builder/src/features/credentials/api/deleteCredentials.ts
index 71e0808bb2..5c4c7273db 100644
--- a/apps/builder/src/features/credentials/api/deleteCredentials.ts
+++ b/apps/builder/src/features/credentials/api/deleteCredentials.ts
@@ -1,29 +1,29 @@
-import prisma from '@typebot.io/lib/prisma'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { z } from 'zod'
-import { isWriteWorkspaceForbidden } from '@/features/workspace/helpers/isWriteWorkspaceForbidden'
+import { isWriteWorkspaceForbidden } from "@/features/workspace/helpers/isWriteWorkspaceForbidden";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import prisma from "@typebot.io/prisma";
+import { z } from "@typebot.io/zod";
export const deleteCredentials = authenticatedProcedure
.meta({
openapi: {
- method: 'DELETE',
- path: '/v1/credentials/:credentialsId',
+ method: "DELETE",
+ path: "/v1/credentials/:credentialsId",
protect: true,
- summary: 'Delete credentials',
- tags: ['Credentials'],
+ summary: "Delete credentials",
+ tags: ["Credentials"],
},
})
.input(
z.object({
credentialsId: z.string(),
workspaceId: z.string(),
- })
+ }),
)
.output(
z.object({
credentialsId: z.string(),
- })
+ }),
)
.mutation(
async ({ input: { credentialsId, workspaceId }, ctx: { user } }) => {
@@ -32,18 +32,18 @@ export const deleteCredentials = authenticatedProcedure
id: workspaceId,
},
select: { id: true, members: { select: { userId: true, role: true } } },
- })
+ });
if (!workspace || isWriteWorkspaceForbidden(workspace, user))
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Workspace not found',
- })
+ code: "NOT_FOUND",
+ message: "Workspace not found",
+ });
await prisma.credentials.delete({
where: {
id: credentialsId,
},
- })
- return { credentialsId }
- }
- )
+ });
+ return { credentialsId };
+ },
+ );
diff --git a/apps/builder/src/features/credentials/api/getCredentials.ts b/apps/builder/src/features/credentials/api/getCredentials.ts
index c40a62cef6..533a103875 100644
--- a/apps/builder/src/features/credentials/api/getCredentials.ts
+++ b/apps/builder/src/features/credentials/api/getCredentials.ts
@@ -1,31 +1,31 @@
-import prisma from '@typebot.io/lib/prisma'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { z } from 'zod'
-import { isWriteWorkspaceForbidden } from '@/features/workspace/helpers/isWriteWorkspaceForbidden'
-import { decrypt } from '@typebot.io/lib/api/encryption/decrypt'
+import { isWriteWorkspaceForbidden } from "@/features/workspace/helpers/isWriteWorkspaceForbidden";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import { decrypt } from "@typebot.io/lib/api/encryption/decrypt";
+import prisma from "@typebot.io/prisma";
+import { z } from "@typebot.io/zod";
export const getCredentials = authenticatedProcedure
.meta({
openapi: {
- method: 'GET',
- path: '/v1/credentials/{credentialsId}',
+ method: "GET",
+ path: "/v1/credentials/{credentialsId}",
protect: true,
- summary: 'Get credentials data',
- tags: ['Credentials'],
+ summary: "Get credentials data",
+ tags: ["Credentials"],
},
})
.input(
z.object({
workspaceId: z.string(),
credentialsId: z.string(),
- })
+ }),
)
.output(
z.object({
name: z.string(),
data: z.any(),
- })
+ }),
)
.query(async ({ input: { workspaceId, credentialsId }, ctx: { user } }) => {
const workspace = await prisma.workspace.findFirst({
@@ -36,9 +36,12 @@ export const getCredentials = authenticatedProcedure
id: true,
members: true,
},
- })
+ });
if (!workspace || isWriteWorkspaceForbidden(workspace, user))
- throw new TRPCError({ code: 'NOT_FOUND', message: 'Workspace not found' })
+ throw new TRPCError({
+ code: "NOT_FOUND",
+ message: "Workspace not found",
+ });
const credentials = await prisma.credentials.findFirst({
where: {
@@ -49,18 +52,18 @@ export const getCredentials = authenticatedProcedure
iv: true,
name: true,
},
- })
+ });
if (!credentials)
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Credentials not found',
- })
+ code: "NOT_FOUND",
+ message: "Credentials not found",
+ });
- const credentialsData = await decrypt(credentials.data, credentials.iv)
+ const credentialsData = await decrypt(credentials.data, credentials.iv);
return {
name: credentials.name,
data: credentialsData,
- }
- })
+ };
+ });
diff --git a/apps/builder/src/features/credentials/api/listCredentials.ts b/apps/builder/src/features/credentials/api/listCredentials.ts
index d3e34876b2..98f7ba2d03 100644
--- a/apps/builder/src/features/credentials/api/listCredentials.ts
+++ b/apps/builder/src/features/credentials/api/listCredentials.ts
@@ -1,41 +1,41 @@
-import prisma from '@typebot.io/lib/prisma'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { z } from 'zod'
-import { isReadWorkspaceFobidden } from '@/features/workspace/helpers/isReadWorkspaceFobidden'
-import { credentialsTypeSchema } from '@typebot.io/schemas'
-import { isDefined } from '@udecode/plate-common'
+import { isReadWorkspaceFobidden } from "@/features/workspace/helpers/isReadWorkspaceFobidden";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import { credentialsTypeSchema } from "@typebot.io/credentials/schemas";
+import prisma from "@typebot.io/prisma";
+import { z } from "@typebot.io/zod";
+import { isDefined } from "@udecode/plate-common";
-const deletedCredentialsTypes = ['zemanticAi', 'zemantic-ai']
+const deletedCredentialsTypes = ["zemanticAi", "zemantic-ai"];
const outputCredentialsSchema = z.array(
z.object({
id: z.string(),
type: credentialsTypeSchema,
name: z.string(),
- })
-)
+ }),
+);
export const listCredentials = authenticatedProcedure
.meta({
openapi: {
- method: 'GET',
- path: '/v1/credentials',
+ method: "GET",
+ path: "/v1/credentials",
protect: true,
- summary: 'List workspace credentials',
- tags: ['Credentials'],
+ summary: "List workspace credentials",
+ tags: ["Credentials"],
},
})
.input(
z.object({
workspaceId: z.string(),
type: credentialsTypeSchema.optional(),
- })
+ }),
)
.output(
z.object({
credentials: outputCredentialsSchema,
- })
+ }),
)
.query(async ({ input: { workspaceId, type }, ctx: { user } }) => {
const workspace = await prisma.workspace.findFirst({
@@ -56,9 +56,12 @@ export const listCredentials = authenticatedProcedure
},
},
},
- })
+ });
if (!workspace || isReadWorkspaceFobidden(workspace, user))
- throw new TRPCError({ code: 'NOT_FOUND', message: 'Workspace not found' })
+ throw new TRPCError({
+ code: "NOT_FOUND",
+ message: "Workspace not found",
+ });
return {
credentials: outputCredentialsSchema.parse(
@@ -66,7 +69,7 @@ export const listCredentials = authenticatedProcedure
? workspace.credentials
: workspace.credentials
.filter((c) => !deletedCredentialsTypes.includes(c.type))
- .sort((a, b) => a.type.localeCompare(b.type))
+ .sort((a, b) => a.type.localeCompare(b.type)),
),
- }
- })
+ };
+ });
diff --git a/apps/builder/src/features/credentials/api/router.ts b/apps/builder/src/features/credentials/api/router.ts
index d1f90d09af..6fea35564e 100644
--- a/apps/builder/src/features/credentials/api/router.ts
+++ b/apps/builder/src/features/credentials/api/router.ts
@@ -1,9 +1,9 @@
-import { router } from '@/helpers/server/trpc'
-import { createCredentials } from './createCredentials'
-import { deleteCredentials } from './deleteCredentials'
-import { listCredentials } from './listCredentials'
-import { updateCredentials } from './updateCredentials'
-import { getCredentials } from './getCredentials'
+import { router } from "@/helpers/server/trpc";
+import { createCredentials } from "./createCredentials";
+import { deleteCredentials } from "./deleteCredentials";
+import { getCredentials } from "./getCredentials";
+import { listCredentials } from "./listCredentials";
+import { updateCredentials } from "./updateCredentials";
export const credentialsRouter = router({
createCredentials,
@@ -11,4 +11,4 @@ export const credentialsRouter = router({
getCredentials,
deleteCredentials,
updateCredentials,
-})
+});
diff --git a/apps/builder/src/features/credentials/api/updateCredentials.ts b/apps/builder/src/features/credentials/api/updateCredentials.ts
index 6ddf18fa56..209cb8702b 100644
--- a/apps/builder/src/features/credentials/api/updateCredentials.ts
+++ b/apps/builder/src/features/credentials/api/updateCredentials.ts
@@ -1,52 +1,50 @@
-import prisma from '@typebot.io/lib/prisma'
-import { authenticatedProcedure } from '@/helpers/server/trpc'
-import { TRPCError } from '@trpc/server'
-import { smtpCredentialsSchema } from '@typebot.io/schemas/features/blocks/integrations/sendEmail'
-import { encrypt } from '@typebot.io/lib/api/encryption/encrypt'
-import { z } from 'zod'
-import { whatsAppCredentialsSchema } from '@typebot.io/schemas/features/whatsapp'
-import {
- googleSheetsCredentialsSchema,
- stripeCredentialsSchema,
-} from '@typebot.io/schemas'
-import { isWriteWorkspaceForbidden } from '@/features/workspace/helpers/isWriteWorkspaceForbidden'
-import { forgedCredentialsSchemas } from '../../../../../../packages/forge/repository/credentials'
+import { isWriteWorkspaceForbidden } from "@/features/workspace/helpers/isWriteWorkspaceForbidden";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+import { TRPCError } from "@trpc/server";
+import { stripeCredentialsSchema } from "@typebot.io/blocks-inputs/payment/schema";
+import { googleSheetsCredentialsSchema } from "@typebot.io/blocks-integrations/googleSheets/schema";
+import { smtpCredentialsSchema } from "@typebot.io/blocks-integrations/sendEmail/schema";
+import { forgedCredentialsSchemas } from "@typebot.io/forge-repository/credentials";
+import { encrypt } from "@typebot.io/lib/api/encryption/encrypt";
+import prisma from "@typebot.io/prisma";
+import { whatsAppCredentialsSchema } from "@typebot.io/whatsapp/schemas";
+import { z } from "@typebot.io/zod";
const inputShape = {
name: true,
data: true,
type: true,
workspaceId: true,
-} as const
+} as const;
export const updateCredentials = authenticatedProcedure
.meta({
openapi: {
- method: 'PATCH',
- path: '/v1/credentials/{credentialsId}',
+ method: "PATCH",
+ path: "/v1/credentials/{credentialsId}",
protect: true,
- summary: 'Create credentials',
- tags: ['Credentials'],
+ summary: "Create credentials",
+ tags: ["Credentials"],
},
})
.input(
z.object({
credentialsId: z.string(),
- credentials: z.discriminatedUnion('type', [
+ credentials: z.discriminatedUnion("type", [
stripeCredentialsSchema.pick(inputShape),
smtpCredentialsSchema.pick(inputShape),
googleSheetsCredentialsSchema.pick(inputShape),
whatsAppCredentialsSchema.pick(inputShape),
...Object.values(forgedCredentialsSchemas).map((i) =>
- i.pick(inputShape)
+ i.pick(inputShape),
),
]),
- })
+ }),
)
.output(
z.object({
credentialsId: z.string(),
- })
+ }),
)
.mutation(
async ({ input: { credentialsId, credentials }, ctx: { user } }) => {
@@ -58,14 +56,14 @@ export const updateCredentials = authenticatedProcedure
id: true,
members: true,
},
- })
+ });
if (!workspace || isWriteWorkspaceForbidden(workspace, user))
throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Workspace not found',
- })
+ code: "NOT_FOUND",
+ message: "Workspace not found",
+ });
- const { encryptedData, iv } = await encrypt(credentials.data)
+ const { encryptedData, iv } = await encrypt(credentials.data);
const createdCredentials = await prisma.credentials.update({
where: {
id: credentialsId,
@@ -75,7 +73,7 @@ export const updateCredentials = authenticatedProcedure
data: encryptedData,
iv,
},
- })
- return { credentialsId: createdCredentials.id }
- }
- )
+ });
+ return { credentialsId: createdCredentials.id };
+ },
+ );
diff --git a/apps/builder/src/features/credentials/components/CredentialsCreateModal.tsx b/apps/builder/src/features/credentials/components/CredentialsCreateModal.tsx
index 41e19e0d4d..7196003124 100644
--- a/apps/builder/src/features/credentials/components/CredentialsCreateModal.tsx
+++ b/apps/builder/src/features/credentials/components/CredentialsCreateModal.tsx
@@ -1,20 +1,20 @@
-import { StripeCreateModalContent } from '@/features/blocks/inputs/payment/components/StripeConfigModal'
-import { GoogleSheetConnectModalContent } from '@/features/blocks/integrations/googleSheets/components/GoogleSheetsConnectModal'
-import { SmtpCreateModalContent } from '@/features/blocks/integrations/sendEmail/components/SmtpConfigModal'
-import { CreateForgedCredentialsModalContent } from '@/features/forge/components/credentials/CreateForgedCredentialsModal'
-import { WhatsAppCreateModalContent } from '@/features/publish/components/embeds/modals/WhatsAppModal/WhatsAppCredentialsModal'
-import { Modal, ModalOverlay } from '@chakra-ui/react'
-import { forgedBlocks } from '@typebot.io/forge-repository/definitions'
-import { Credentials } from '@typebot.io/schemas/features/credentials'
+import { StripeCreateModalContent } from "@/features/blocks/inputs/payment/components/StripeConfigModal";
+import { GoogleSheetConnectModalContent } from "@/features/blocks/integrations/googleSheets/components/GoogleSheetsConnectModal";
+import { SmtpCreateModalContent } from "@/features/blocks/integrations/sendEmail/components/SmtpConfigModal";
+import { CreateForgedCredentialsModalContent } from "@/features/forge/components/credentials/CreateForgedCredentialsModal";
+import { WhatsAppCreateModalContent } from "@/features/publish/components/embeds/modals/WhatsAppModal/WhatsAppCredentialsModal";
+import { Modal, ModalOverlay } from "@chakra-ui/react";
+import type { Credentials } from "@typebot.io/credentials/schemas";
+import { forgedBlocks } from "@typebot.io/forge-repository/definitions";
export const CredentialsCreateModal = ({
creatingType,
onSubmit,
onClose,
}: {
- creatingType?: Credentials['type']
- onClose: () => void
- onSubmit: () => void
+ creatingType?: Credentials["type"];
+ onClose: () => void;
+ onSubmit: () => void;
}) => {
return (
& {
- type: Credentials['type']
- workspaceId: string
- currentCredentialsId?: string
- onCredentialsSelect: (credentialId?: string) => void
- onCreateNewClick: () => void
- defaultCredentialLabel?: string
- credentialsName: string
-}
+type Props = Omit & {
+ type: Credentials["type"];
+ workspaceId: string;
+ currentCredentialsId?: string;
+ onCredentialsSelect: (credentialId?: string) => void;
+ onCreateNewClick: () => void;
+ defaultCredentialLabel?: string;
+ credentialsName: string;
+};
export const CredentialsDropdown = ({
type,
@@ -37,51 +38,52 @@ export const CredentialsDropdown = ({
credentialsName,
...props
}: Props) => {
- const { t } = useTranslate()
- const { showToast } = useToast()
- const { currentRole } = useWorkspace()
+ const { t } = useTranslate();
+ const { showToast } = useToast();
+ const { currentRole } = useWorkspace();
const { data, refetch } = trpc.credentials.listCredentials.useQuery({
workspaceId,
type,
- })
- const [isDeleting, setIsDeleting] = useState()
+ });
+ const [isDeleting, setIsDeleting] = useState();
const { mutate } = trpc.credentials.deleteCredentials.useMutation({
onMutate: ({ credentialsId }) => {
- setIsDeleting(credentialsId)
+ setIsDeleting(credentialsId);
},
onError: (error) => {
showToast({
description: error.message,
- })
+ });
},
onSuccess: ({ credentialsId }) => {
- if (credentialsId === currentCredentialsId) onCredentialsSelect(undefined)
- refetch()
+ if (credentialsId === currentCredentialsId)
+ onCredentialsSelect(undefined);
+ refetch();
},
onSettled: () => {
- setIsDeleting(undefined)
+ setIsDeleting(undefined);
},
- })
+ });
const defaultCredentialsLabel =
- defaultCredentialLabel ?? `${t('select')} ${credentialsName}`
+ defaultCredentialLabel ?? `${t("select")} ${credentialsName}`;
const currentCredential = data?.credentials.find(
- (c) => c.id === currentCredentialsId
- )
+ (c) => c.id === currentCredentialsId,
+ );
const handleMenuItemClick = useCallback(
(credentialsId: string) => () => {
- onCredentialsSelect(credentialsId)
+ onCredentialsSelect(credentialsId);
},
- [onCredentialsSelect]
- )
+ [onCredentialsSelect],
+ );
const deleteCredentials =
(credentialsId: string) => async (e: React.MouseEvent) => {
- e.stopPropagation()
- mutate({ workspaceId, credentialsId })
- }
+ e.stopPropagation();
+ mutate({ workspaceId, credentialsId });
+ };
if (data?.credentials.length === 0 && !defaultCredentialLabel) {
return (
@@ -90,18 +92,18 @@ export const CredentialsDropdown = ({
textAlign="left"
leftIcon={
{currentCredential ? currentCredential.name : defaultCredentialsLabel}
-
+
{defaultCredentialLabel && (
{defaultCredentialLabel}
@@ -143,7 +145,7 @@ export const CredentialsDropdown = ({
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/credentials/components/CredentialsSettingsForm.tsx b/apps/builder/src/features/credentials/components/CredentialsSettingsForm.tsx
index cc58040609..b8c68e6662 100644
--- a/apps/builder/src/features/credentials/components/CredentialsSettingsForm.tsx
+++ b/apps/builder/src/features/credentials/components/CredentialsSettingsForm.tsx
@@ -1,53 +1,56 @@
-import { trpc } from '@/lib/trpc'
+import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
+import { StripeLogo } from "@/components/logos/StripeLogo";
+import { WhatsAppLogo } from "@/components/logos/WhatsAppLogo";
+import { BlockIcon } from "@/features/editor/components/BlockIcon";
+import { BlockLabel } from "@/features/editor/components/BlockLabel";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { trpc } from "@/lib/trpc";
import {
- Heading,
+ Button,
+ Divider,
+ Flex,
HStack,
- Stack,
+ Heading,
IconButton,
- Divider,
- Button,
+ type IconProps,
Menu,
MenuButton,
- MenuList,
MenuItem,
- IconProps,
- TextProps,
+ MenuList,
Popover,
- PopoverTrigger,
- PopoverFooter,
PopoverArrow,
PopoverBody,
PopoverContent,
- Flex,
+ PopoverFooter,
+ PopoverTrigger,
Skeleton,
SkeletonCircle,
-} from '@chakra-ui/react'
-import React, { useMemo, useRef, useState } from 'react'
-import { Credentials, credentialsTypes } from '@typebot.io/schemas'
-import { BlockIcon } from '@/features/editor/components/BlockIcon'
-import { BlockLabel } from '@/features/editor/components/BlockLabel'
-import { Text } from '@chakra-ui/react'
-import { WhatsAppLogo } from '@/components/logos/WhatsAppLogo'
-import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integrations/constants'
-import { StripeLogo } from '@/components/logos/StripeLogo'
-import { EditIcon, PlusIcon, TrashIcon } from '@/components/icons'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { toast } from 'sonner'
-import { CredentialsCreateModal } from './CredentialsCreateModal'
-import { CredentialsUpdateModal } from './CredentialsUpdateModal'
+ Stack,
+ Text,
+ type TextProps,
+} from "@chakra-ui/react";
+import { IntegrationBlockType } from "@typebot.io/blocks-integrations/constants";
+import {
+ type Credentials,
+ credentialsTypes,
+} from "@typebot.io/credentials/schemas";
+import React, { useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { CredentialsCreateModal } from "./CredentialsCreateModal";
+import { CredentialsUpdateModal } from "./CredentialsUpdateModal";
-const nonEditableTypes = ['whatsApp', 'google sheets'] as const
+const nonEditableTypes = ["whatsApp", "google sheets"] as const;
-type CredentialsInfo = Pick
+type CredentialsInfo = Pick;
export const CredentialsSettingsForm = () => {
- const [creatingType, setCreatingType] = useState()
+ const [creatingType, setCreatingType] = useState();
const [editingCredentials, setEditingCredentials] = useState<{
- id: string
- type: Credentials['type']
- }>()
- const [deletingCredentialsId, setDeletingCredentialsId] = useState()
- const { workspace } = useWorkspace()
+ id: string;
+ type: Credentials["type"];
+ }>();
+ const [deletingCredentialsId, setDeletingCredentialsId] = useState();
+ const { workspace } = useWorkspace();
const { data, isLoading, refetch } =
trpc.credentials.listCredentials.useQuery(
{
@@ -55,45 +58,45 @@ export const CredentialsSettingsForm = () => {
},
{
enabled: !!workspace?.id,
- }
- )
+ },
+ );
const { mutate: deleteCredentials } =
trpc.credentials.deleteCredentials.useMutation({
onMutate: ({ credentialsId }) =>
setDeletingCredentialsId(credentialsId as string),
onSettled: () => {
- setDeletingCredentialsId(undefined)
+ setDeletingCredentialsId(undefined);
},
onError: (error) => {
- toast.error(error.message)
+ toast.error(error.message);
},
onSuccess: () => {
- refetch()
+ refetch();
},
- })
+ });
const credentials = useMemo(
() =>
data?.credentials ? groupCredentialsByType(data.credentials) : undefined,
- [data?.credentials]
- )
+ [data?.credentials],
+ );
return (
{
- refetch()
- setCreatingType(undefined)
+ refetch();
+ setCreatingType(undefined);
}}
onClose={() => setCreatingType(undefined)}
/>
{
- refetch()
- setEditingCredentials(undefined)
+ refetch();
+ setEditingCredentials(undefined);
}}
onClose={() => setEditingCredentials(undefined)}
/>
@@ -118,7 +121,7 @@ export const CredentialsSettingsForm = () => {
{credentials && !isLoading ? (
- (Object.keys(credentials) as Credentials['type'][]).map((type) => (
+ (Object.keys(credentials) as Credentials["type"][]).map((type) => (
{
isDeleting={deletingCredentialsId === cred.id}
onEditClick={
nonEditableTypes.includes(
- cred.type as (typeof nonEditableTypes)[number]
+ cred.type as (typeof nonEditableTypes)[number],
)
? undefined
: () =>
@@ -195,72 +198,72 @@ export const CredentialsSettingsForm = () => {
)}
- )
-}
+ );
+};
const CredentialsIcon = ({
type,
...props
-}: { type: Credentials['type'] } & IconProps) => {
+}: { type: Credentials["type"] } & IconProps) => {
switch (type) {
- case 'google sheets':
- return
Google Sheets
- )
- case 'smtp':
+ );
+ case "smtp":
return (
SMTP
- )
- case 'stripe':
+ );
+ case "stripe":
return (
Stripe
- )
- case 'whatsApp':
+ );
+ case "whatsApp":
return (
WhatsApp
- )
+ );
default:
- return & {
- isDeleting: boolean
- onEditClick?: () => void
- onDeleteClick: () => void
+}: Pick & {
+ isDeleting: boolean;
+ onEditClick?: () => void;
+ onDeleteClick: () => void;
}) => {
- const initialFocusRef = useRef(null)
+ const initialFocusRef = useRef(null);
return (
@@ -318,19 +321,19 @@ const CredentialsItem = ({
- )
-}
+ );
+};
const groupCredentialsByType = (
- credentials: CredentialsInfo[]
-): Record => {
+ credentials: CredentialsInfo[],
+): Record => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- const groupedCredentials: any = {}
+ const groupedCredentials: any = {};
credentials.forEach((cred) => {
if (!groupedCredentials[cred.type]) {
- groupedCredentials[cred.type] = []
+ groupedCredentials[cred.type] = [];
}
- groupedCredentials[cred.type].push(cred)
- })
- return groupedCredentials
-}
+ groupedCredentials[cred.type].push(cred);
+ });
+ return groupedCredentials;
+};
diff --git a/apps/builder/src/features/credentials/components/CredentialsUpdateModal.tsx b/apps/builder/src/features/credentials/components/CredentialsUpdateModal.tsx
index c2e2d5d836..cae208d3b6 100644
--- a/apps/builder/src/features/credentials/components/CredentialsUpdateModal.tsx
+++ b/apps/builder/src/features/credentials/components/CredentialsUpdateModal.tsx
@@ -1,9 +1,9 @@
-import { UpdateStripeCredentialsModalContent } from '@/features/blocks/inputs/payment/components/UpdateStripeCredentialsModalContent'
-import { SmtpUpdateModalContent } from '@/features/blocks/integrations/sendEmail/components/SmtpUpdateModalContent'
-import { UpdateForgedCredentialsModalContent } from '@/features/forge/components/credentials/UpdateForgedCredentialsModalContent'
-import { Modal, ModalOverlay } from '@chakra-ui/react'
-import { forgedBlocks } from '@typebot.io/forge-repository/definitions'
-import { Credentials } from '@typebot.io/schemas/features/credentials'
+import { UpdateStripeCredentialsModalContent } from "@/features/blocks/inputs/payment/components/UpdateStripeCredentialsModalContent";
+import { SmtpUpdateModalContent } from "@/features/blocks/integrations/sendEmail/components/SmtpUpdateModalContent";
+import { UpdateForgedCredentialsModalContent } from "@/features/forge/components/credentials/UpdateForgedCredentialsModalContent";
+import { Modal, ModalOverlay } from "@chakra-ui/react";
+import type { Credentials } from "@typebot.io/credentials/schemas";
+import { forgedBlocks } from "@typebot.io/forge-repository/definitions";
export const CredentialsUpdateModal = ({
editingCredentials,
@@ -11,11 +11,11 @@ export const CredentialsUpdateModal = ({
onClose,
}: {
editingCredentials?: {
- id: string
- type: Credentials['type']
- }
- onClose: () => void
- onSubmit: () => void
+ id: string;
+ type: Credentials["type"];
+ };
+ onClose: () => void;
+ onSubmit: () => void;
}) => {
return (
@@ -27,38 +27,38 @@ export const CredentialsUpdateModal = ({
/>
)}
- )
-}
+ );
+};
const CredentialsUpdateModalContent = ({
editingCredentials,
onSubmit,
}: {
editingCredentials: {
- id: string
- type: Credentials['type']
- }
- onSubmit: () => void
+ id: string;
+ type: Credentials["type"];
+ };
+ onSubmit: () => void;
}) => {
switch (editingCredentials.type) {
- case 'google sheets':
- return null
- case 'smtp':
+ case "google sheets":
+ return null;
+ case "smtp":
return (
=> {
return await fetch(
`https://api.vercel.com/v9/projects/${env.NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME}/domains/${domain}?teamId=${env.VERCEL_TEAM_ID}`,
{
- method: 'GET',
+ method: "GET",
headers: {
Authorization: `Bearer ${env.VERCEL_TOKEN}`,
- 'Content-Type': 'application/json',
+ "Content-Type": "application/json",
},
- }
+ },
).then((res) => {
- return res.json()
- })
-}
+ return res.json();
+ });
+};
const getConfigResponse = async (
- domain: string
+ domain: string,
): Promise => {
return await fetch(
`https://api.vercel.com/v6/domains/${domain}/config?teamId=${env.VERCEL_TEAM_ID}`,
{
- method: 'GET',
+ method: "GET",
headers: {
Authorization: `Bearer ${env.VERCEL_TOKEN}`,
- 'Content-Type': 'application/json',
+ "Content-Type": "application/json",
},
- }
- ).then((res) => res.json())
-}
+ },
+ ).then((res) => res.json());
+};
const verifyDomain = async (
- domain: string
+ domain: string,
): Promise => {
return await fetch(
`https://api.vercel.com/v9/projects/${env.NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME}/domains/${domain}/verify?teamId=${env.VERCEL_TEAM_ID}`,
{
- method: 'POST',
+ method: "POST",
headers: {
Authorization: `Bearer ${env.VERCEL_TOKEN}`,
- 'Content-Type': 'application/json',
+ "Content-Type": "application/json",
},
- }
- ).then((res) => res.json())
-}
+ },
+ ).then((res) => res.json());
+};
diff --git a/apps/builder/src/features/customDomains/components/CreateCustomDomainModal.tsx b/apps/builder/src/features/customDomains/components/CreateCustomDomainModal.tsx
index d43edf37fb..1a76b509e2 100644
--- a/apps/builder/src/features/customDomains/components/CreateCustomDomainModal.tsx
+++ b/apps/builder/src/features/customDomains/components/CreateCustomDomainModal.tsx
@@ -1,87 +1,87 @@
+import { useToast } from "@/hooks/useToast";
+import { trpc } from "@/lib/trpc";
import {
+ Alert,
+ Button,
+ HStack,
+ Heading,
+ Input,
Modal,
- ModalOverlay,
+ ModalBody,
+ ModalCloseButton,
ModalContent,
+ ModalFooter,
ModalHeader,
- Heading,
- ModalCloseButton,
- ModalBody,
+ ModalOverlay,
Stack,
- Input,
- HStack,
- Alert,
- ModalFooter,
- Button,
Text,
Tooltip,
-} from '@chakra-ui/react'
-import { useToast } from '@/hooks/useToast'
-import { useEffect, useRef, useState } from 'react'
-import { trpc } from '@/lib/trpc'
+} from "@chakra-ui/react";
+import { useEffect, useRef, useState } from "react";
const hostnameRegex =
- /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$/
+ /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$/;
type Props = {
- workspaceId: string
- isOpen: boolean
- onClose: () => void
- domain?: string
- onNewDomain: (customDomain: string) => void
-}
+ workspaceId: string;
+ isOpen: boolean;
+ onClose: () => void;
+ domain?: string;
+ onNewDomain: (customDomain: string) => void;
+};
export const CreateCustomDomainModal = ({
workspaceId,
isOpen,
onClose,
onNewDomain,
- domain = '',
+ domain = "",
}: Props) => {
- const inputRef = useRef(null)
- const [isLoading, setIsLoading] = useState(false)
- const [inputValue, setInputValue] = useState(domain)
+ const inputRef = useRef(null);
+ const [isLoading, setIsLoading] = useState(false);
+ const [inputValue, setInputValue] = useState(domain);
const [hostname, setHostname] = useState({
- domain: splitHostname(domain)?.domain ?? '',
- subdomain: splitHostname(domain)?.subdomain ?? '',
- })
+ domain: splitHostname(domain)?.domain ?? "",
+ subdomain: splitHostname(domain)?.subdomain ?? "",
+ });
- const { showToast } = useToast()
+ const { showToast } = useToast();
const { mutate } = trpc.customDomains.createCustomDomain.useMutation({
onMutate: () => {
- setIsLoading(true)
+ setIsLoading(true);
},
onError: (error) => {
showToast({
- title: 'Error while creating custom domain',
+ title: "Error while creating custom domain",
description: error.message,
- })
+ });
},
onSettled: () => {
- setIsLoading(false)
+ setIsLoading(false);
},
onSuccess: (data) => {
- onNewDomain(data.customDomain.name)
- onClose()
+ onNewDomain(data.customDomain.name);
+ onClose();
},
- })
+ });
useEffect(() => {
- if (inputValue === '' || !isOpen) return
+ if (inputValue === "" || !isOpen) return;
if (!hostnameRegex.test(inputValue))
- return setHostname({ domain: '', subdomain: '' })
- const hostnameDetails = splitHostname(inputValue)
- if (!hostnameDetails) return setHostname({ domain: '', subdomain: '' })
+ return setHostname({ domain: "", subdomain: "" });
+ const hostnameDetails = splitHostname(inputValue);
+ if (!hostnameDetails) return setHostname({ domain: "", subdomain: "" });
setHostname({
domain: hostnameDetails.domain,
subdomain: hostnameDetails.subdomain,
- })
+ });
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [inputValue])
+ }, [inputValue]);
const onAddDomainClick = async () => {
- if (!hostnameRegex.test(inputValue)) return
- mutate({ name: inputValue, workspaceId })
- }
+ if (!hostnameRegex.test(inputValue)) return;
+ mutate({ name: inputValue, workspaceId });
+ };
return (
setInputValue(e.target.value)}
placeholder="bot.my-domain.com"
/>
- {hostname.domain !== '' && (
+ {hostname.domain !== "" && (
<>
Add the following record in your DNS provider to continue:
@@ -162,12 +162,12 @@ export const CreateCustomDomainModal = ({
@@ -178,20 +178,20 @@ export const CreateCustomDomainModal = ({
- )
-}
+ );
+};
const splitHostname = (
- hostname: string
+ hostname: string,
): { domain: string; type: string; subdomain: string } | undefined => {
- if (!hostname.includes('.')) return
- const urlParts = /([a-z-0-9]{2,63}).([a-z.]{2,5})$/.exec(hostname)
- if (!urlParts) return
- const [, domain, type] = urlParts
- const subdomain = hostname.replace(`${domain}.${type}`, '').slice(0, -1)
+ if (!hostname.includes(".")) return;
+ const urlParts = /([a-z-0-9]{2,63}).([a-z.]{2,5})$/.exec(hostname);
+ if (!urlParts) return;
+ const [, domain, type] = urlParts;
+ const subdomain = hostname.replace(`${domain}.${type}`, "").slice(0, -1);
return {
domain,
type,
subdomain,
- }
-}
+ };
+};
diff --git a/apps/builder/src/features/customDomains/components/CustomDomainConfigModal.tsx b/apps/builder/src/features/customDomains/components/CustomDomainConfigModal.tsx
index c0d3514c06..7c481b0c98 100644
--- a/apps/builder/src/features/customDomains/components/CustomDomainConfigModal.tsx
+++ b/apps/builder/src/features/customDomains/components/CustomDomainConfigModal.tsx
@@ -1,29 +1,29 @@
+import { XCircleIcon } from "@/components/icons";
+import { trpc } from "@/lib/trpc";
import {
+ Alert,
+ AlertIcon,
+ Box,
+ Button,
+ Code,
+ HStack,
Modal,
- ModalOverlay,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
ModalBody,
- HStack,
+ ModalCloseButton,
+ ModalContent,
ModalFooter,
- Button,
- Text,
- Box,
- Code,
+ ModalHeader,
+ ModalOverlay,
Stack,
- Alert,
- AlertIcon,
-} from '@chakra-ui/react'
-import { XCircleIcon } from '@/components/icons'
-import { trpc } from '@/lib/trpc'
+ Text,
+} from "@chakra-ui/react";
type Props = {
- workspaceId: string
- isOpen: boolean
- domain: string
- onClose: () => void
-}
+ workspaceId: string;
+ isOpen: boolean;
+ domain: string;
+ onClose: () => void;
+};
export const CustomDomainConfigModal = ({
workspaceId,
@@ -34,22 +34,22 @@ export const CustomDomainConfigModal = ({
const { data, error } = trpc.customDomains.verifyCustomDomain.useQuery({
name: domain,
workspaceId,
- })
+ });
- const { domainJson, status } = data ?? {}
+ const { domainJson, status } = data ?? {};
- if (!status || status === 'Valid Configuration' || !domainJson) return null
+ if (!status || status === "Valid Configuration" || !domainJson) return null;
- if ('error' in domainJson) return null
+ if ("error" in domainJson) return null;
- const subdomain = getSubdomain(domainJson.name, domainJson.apexName)
+ const subdomain = getSubdomain(domainJson.name, domainJson.apexName);
- const recordType = subdomain ? 'CNAME' : 'A'
+ const recordType = subdomain ? "CNAME" : "A";
const txtVerification =
- (status === 'Pending Verification' &&
- domainJson.verification?.find((x) => x.type === 'TXT')) ||
- null
+ (status === "Pending Verification" &&
+ domainJson.verification?.find((x) => x.type === "TXT")) ||
+ null;
return (
@@ -68,11 +68,11 @@ export const CustomDomainConfigModal = ({
{txtVerification ? (
- Please set the following TXT record on{' '}
+ Please set the following TXT record on{" "}
{domainJson.apexName}
- {' '}
- to prove ownership of{' '}
+ {" "}
+ to prove ownership of{" "}
{domainJson.name}
@@ -96,7 +96,7 @@ export const CustomDomainConfigModal = ({
0,
txtVerification.domain.length -
domainJson.apexName.length -
- 1
+ 1,
)}
@@ -119,17 +119,17 @@ export const CustomDomainConfigModal = ({
- ) : status === 'Unknown Error' ? (
+ ) : status === "Unknown Error" ? (
{error?.message}
) : (
- To configure your{' '}
- {recordType === 'A' ? 'apex domain' : 'subdomain'} (
+ To configure your{" "}
+ {recordType === "A" ? "apex domain" : "subdomain"} (
- {recordType === 'A' ? domainJson.apexName : domainJson.name}
+ {recordType === "A" ? domainJson.apexName : domainJson.name}
), set the following {recordType} record on your DNS provider to
continue:
@@ -144,14 +144,14 @@ export const CustomDomainConfigModal = ({
Name
- {recordType === 'A' ? '@' : subdomain ?? 'www'}
+ {recordType === "A" ? "@" : (subdomain ?? "www")}
Value
- {recordType === 'A'
- ? '76.76.21.21'
+ {recordType === "A"
+ ? "76.76.21.21"
: `cname.vercel-dns.com`}
@@ -178,10 +178,10 @@ export const CustomDomainConfigModal = ({
- )
-}
+ );
+};
const getSubdomain = (name: string, apexName: string) => {
- if (name === apexName) return null
- return name.slice(0, name.length - apexName.length - 1)
-}
+ if (name === apexName) return null;
+ return name.slice(0, name.length - apexName.length - 1);
+};
diff --git a/apps/builder/src/features/customDomains/components/CustomDomainsDropdown.tsx b/apps/builder/src/features/customDomains/components/CustomDomainsDropdown.tsx
index be5e833cf0..3ba22ce788 100644
--- a/apps/builder/src/features/customDomains/components/CustomDomainsDropdown.tsx
+++ b/apps/builder/src/features/customDomains/components/CustomDomainsDropdown.tsx
@@ -1,36 +1,37 @@
+import { ChevronLeftIcon, PlusIcon, TrashIcon } from "@/components/icons";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { useToast } from "@/hooks/useToast";
+import { trpc } from "@/lib/trpc";
import {
Button,
IconButton,
Menu,
MenuButton,
- MenuButtonProps,
+ type MenuButtonProps,
MenuItem,
MenuList,
Stack,
Text,
useDisclosure,
-} from '@chakra-ui/react'
-import { ChevronLeftIcon, PlusIcon, TrashIcon } from '@/components/icons'
-import React, { useState } from 'react'
-import { CreateCustomDomainModal } from './CreateCustomDomainModal'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { useToast } from '@/hooks/useToast'
-import { trpc } from '@/lib/trpc'
+} from "@chakra-ui/react";
+import type React from "react";
+import { useState } from "react";
+import { CreateCustomDomainModal } from "./CreateCustomDomainModal";
-type Props = Omit & {
- currentCustomDomain?: string
- onCustomDomainSelect: (domain: string) => void
-}
+type Props = Omit & {
+ currentCustomDomain?: string;
+ onCustomDomainSelect: (domain: string) => void;
+};
export const CustomDomainsDropdown = ({
currentCustomDomain,
onCustomDomainSelect,
...props
}: Props) => {
- const [isDeleting, setIsDeleting] = useState('')
- const { isOpen, onOpen, onClose } = useDisclosure()
- const { workspace } = useWorkspace()
- const { showToast } = useToast()
+ const [isDeleting, setIsDeleting] = useState("");
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const { workspace } = useWorkspace();
+ const { showToast } = useToast();
const { data, refetch } = trpc.customDomains.listCustomDomains.useQuery(
{
workspaceId: workspace?.id as string,
@@ -39,46 +40,46 @@ export const CustomDomainsDropdown = ({
enabled: !!workspace?.id,
onError: (error) => {
showToast({
- title: 'Error while fetching custom domains',
+ title: "Error while fetching custom domains",
description: error.message,
- })
+ });
},
- }
- )
+ },
+ );
const { mutate } = trpc.customDomains.deleteCustomDomain.useMutation({
onMutate: ({ name }) => {
- setIsDeleting(name)
+ setIsDeleting(name);
},
onError: (error) => {
showToast({
- title: 'Error while deleting custom domain',
+ title: "Error while deleting custom domain",
description: error.message,
- })
+ });
},
onSettled: () => {
- setIsDeleting('')
+ setIsDeleting("");
},
onSuccess: () => {
- refetch()
+ refetch();
},
- })
+ });
const handleMenuItemClick = (customDomain: string) => () =>
- onCustomDomainSelect(customDomain)
+ onCustomDomainSelect(customDomain);
const handleDeleteDomainClick =
(domainName: string) => async (e: React.MouseEvent) => {
- if (!workspace) return
- e.stopPropagation()
+ if (!workspace) return;
+ e.stopPropagation();
mutate({
name: domainName,
workspaceId: workspace.id,
- })
- }
+ });
+ };
const handleNewDomain = (name: string) => {
- onCustomDomainSelect(name)
- }
+ onCustomDomainSelect(name);
+ };
return (
@@ -92,18 +93,18 @@ export const CustomDomainsDropdown = ({
)}
- {currentCustomDomain ?? 'Add my domain'}
+ {currentCustomDomain ?? "Add my domain"}
-
+
{(data?.customDomains ?? []).map((customDomain) => (
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/customDomains/components/DomainStatusIcon.tsx b/apps/builder/src/features/customDomains/components/DomainStatusIcon.tsx
index ea2e9e1986..f4e56775f6 100644
--- a/apps/builder/src/features/customDomains/components/DomainStatusIcon.tsx
+++ b/apps/builder/src/features/customDomains/components/DomainStatusIcon.tsx
@@ -1,16 +1,16 @@
-import { XCircleIcon } from '@/components/icons'
-import { trpc } from '@/lib/trpc'
-import { useToast } from '@/hooks/useToast'
-import { Flex, Tooltip, useDisclosure } from '@chakra-ui/react'
-import { CustomDomainConfigModal } from './CustomDomainConfigModal'
+import { XCircleIcon } from "@/components/icons";
+import { useToast } from "@/hooks/useToast";
+import { trpc } from "@/lib/trpc";
+import { Flex, Tooltip, useDisclosure } from "@chakra-ui/react";
+import { CustomDomainConfigModal } from "./CustomDomainConfigModal";
type Props = {
- domain: string
- workspaceId: string
-}
+ domain: string;
+ workspaceId: string;
+};
export default function DomainStatusIcon({ domain, workspaceId }: Props) {
- const { isOpen, onOpen, onClose } = useDisclosure()
- const { showToast } = useToast()
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const { showToast } = useToast();
const { data, isLoading } = trpc.customDomains.verifyCustomDomain.useQuery(
{
name: domain,
@@ -18,12 +18,12 @@ export default function DomainStatusIcon({ domain, workspaceId }: Props) {
},
{
onError: (err) => {
- showToast({ description: err.message })
+ showToast({ description: err.message });
},
- }
- )
+ },
+ );
- if (isLoading || data?.status === 'Valid Configuration') return null
+ if (isLoading || data?.status === "Valid Configuration") return null;
return (
<>
@@ -39,5 +39,5 @@ export default function DomainStatusIcon({ domain, workspaceId }: Props) {
onClose={onClose}
/>
- )
+ );
}
diff --git a/apps/builder/src/features/customDomains/customDomains.spec.ts b/apps/builder/src/features/customDomains/customDomains.spec.ts
index 0a08570ece..d11a977135 100644
--- a/apps/builder/src/features/customDomains/customDomains.spec.ts
+++ b/apps/builder/src/features/customDomains/customDomains.spec.ts
@@ -1,12 +1,12 @@
-import test, { expect } from '@playwright/test'
-import { createId } from '@paralleldrive/cuid2'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { starterWorkspaceId } from '@typebot.io/playwright/databaseSetup'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
+import { starterWorkspaceId } from "@typebot.io/playwright/databaseSetup";
-test('should be able to connect custom domain', async ({ page }) => {
- const typebotId = createId()
+test("should be able to connect custom domain", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -14,37 +14,43 @@ test('should be able to connect custom domain', async ({ page }) => {
type: InputBlockType.TEXT,
}),
},
- ])
- await page.goto(`/typebots/${typebotId}/share`)
- await page.click('text=Add my domain')
- await page.click('text=Connect new')
- await page.fill('input[placeholder="bot.my-domain.com"]', 'test')
- await expect(page.locator('text=Save')).toBeDisabled()
- await page.fill('input[placeholder="bot.my-domain.com"]', 'yolozeeer.com')
- await expect(page.locator('text="A"')).toBeVisible()
- await page.fill('input[placeholder="bot.my-domain.com"]', 'sub.yolozeeer.com')
- await expect(page.locator('text="CNAME"')).toBeVisible()
- await page.click('text=Save')
- await expect(page.locator('text="https://sub.yolozeeer.com/"')).toBeVisible()
- await page.click('text="Edit"')
- await page.fill('text=https://sub.yolozeeer.com/Copy >> input', 'custom-path')
+ ]);
+ await page.goto(`/typebots/${typebotId}/share`);
+ await page.click("text=Add my domain");
+ await page.click("text=Connect new");
+ await page.fill('input[placeholder="bot.my-domain.com"]', "test");
+ await expect(page.locator("text=Save")).toBeDisabled();
+ await page.fill('input[placeholder="bot.my-domain.com"]', "yolozeeer.com");
+ await expect(page.locator('text="A"')).toBeVisible();
+ await page.fill(
+ 'input[placeholder="bot.my-domain.com"]',
+ "sub.yolozeeer.com",
+ );
+ await expect(page.locator('text="CNAME"')).toBeVisible();
+ await page.click("text=Save");
+ await expect(page.locator('text="https://sub.yolozeeer.com/"')).toBeVisible();
+ await page.click('text="Edit"');
+ await page.fill(
+ "text=https://sub.yolozeeer.com/Copy >> input",
+ "custom-path",
+ );
await page.press(
- 'text=https://sub.yolozeeer.com/custom-path >> input',
- 'Enter'
- )
- await expect(page.locator('text="custom-path"')).toBeVisible()
- await page.click('[aria-label="Remove custom URL"]')
- await expect(page.locator('text=sub.yolozeeer.com')).toBeHidden()
- await page.click('button >> text=Add my domain')
- await page.click('[aria-label="Remove domain"]')
+ "text=https://sub.yolozeeer.com/custom-path >> input",
+ "Enter",
+ );
+ await expect(page.locator('text="custom-path"')).toBeVisible();
+ await page.click('[aria-label="Remove custom URL"]');
+ await expect(page.locator("text=sub.yolozeeer.com")).toBeHidden();
+ await page.click("button >> text=Add my domain");
+ await page.click('[aria-label="Remove domain"]');
await expect(page.locator('[aria-label="Remove domain"]')).toBeHidden({
timeout: 10000,
- })
-})
+ });
+});
-test.describe('Starter workspace', () => {
+test.describe("Starter workspace", () => {
test("Add my domain shouldn't be available", async ({ page }) => {
- const typebotId = createId()
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
@@ -53,16 +59,16 @@ test.describe('Starter workspace', () => {
type: InputBlockType.TEXT,
}),
},
- ])
- await page.goto(`/typebots/${typebotId}/share`)
+ ]);
+ await page.goto(`/typebots/${typebotId}/share`);
await expect(
- page.locator('[data-testid="pro-lock-tag"]').nth(0)
- ).toBeVisible()
- await page.click('text=Add my domain')
+ page.locator('[data-testid="pro-lock-tag"]').nth(0),
+ ).toBeVisible();
+ await page.click("text=Add my domain");
await expect(
page.locator(
- 'text="You need to upgrade your plan in order to add custom domains"'
- )
- ).toBeVisible()
- })
-})
+ 'text="You need to upgrade your plan in order to add custom domains"',
+ ),
+ ).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/customDomains/types.ts b/apps/builder/src/features/customDomains/types.ts
index f5a25cc0cb..ca05e2690c 100644
--- a/apps/builder/src/features/customDomains/types.ts
+++ b/apps/builder/src/features/customDomains/types.ts
@@ -2,26 +2,26 @@
// From https://vercel.com/docs/rest-api/endpoints#get-a-domain-s-configuration
export interface DomainConfigResponse {
- configuredBy?: ('CNAME' | 'A' | 'http') | null
- acceptedChallenges?: ('dns-01' | 'http-01')[]
- misconfigured: boolean
+ configuredBy?: ("CNAME" | "A" | "http") | null;
+ acceptedChallenges?: ("dns-01" | "http-01")[];
+ misconfigured: boolean;
}
// From https://vercel.com/docs/rest-api/endpoints#verify-project-domain
export interface DomainVerificationResponse {
- name: string
- apexName: string
- projectId: string
- redirect?: string | null
- redirectStatusCode?: (307 | 301 | 302 | 308) | null
- gitBranch?: string | null
- updatedAt?: number
- createdAt?: number
- verified: boolean
+ name: string;
+ apexName: string;
+ projectId: string;
+ redirect?: string | null;
+ redirectStatusCode?: (307 | 301 | 302 | 308) | null;
+ gitBranch?: string | null;
+ updatedAt?: number;
+ createdAt?: number;
+ verified: boolean;
verification?: {
- type: string
- domain: string
- value: string
- reason: string
- }[]
+ type: string;
+ domain: string;
+ value: string;
+ reason: string;
+ }[];
}
diff --git a/apps/builder/src/features/dashboard/api/getAppVersionProcedure.ts b/apps/builder/src/features/dashboard/api/getAppVersionProcedure.ts
index 2a8e9b1c6f..b41d619ac2 100644
--- a/apps/builder/src/features/dashboard/api/getAppVersionProcedure.ts
+++ b/apps/builder/src/features/dashboard/api/getAppVersionProcedure.ts
@@ -1,6 +1,6 @@
-import { publicProcedure } from '@/helpers/server/trpc'
-import { env } from '@typebot.io/env'
+import { publicProcedure } from "@/helpers/server/trpc";
+import { env } from "@typebot.io/env";
export const getAppVersionProcedure = publicProcedure.query(async () => {
- return { commitSha: env.VERCEL_GIT_COMMIT_SHA }
-})
+ return { commitSha: env.VERCEL_GIT_COMMIT_SHA };
+});
diff --git a/apps/builder/src/features/dashboard/components/DashboardHeader.tsx b/apps/builder/src/features/dashboard/components/DashboardHeader.tsx
index 21b62750d7..271444b5ff 100644
--- a/apps/builder/src/features/dashboard/components/DashboardHeader.tsx
+++ b/apps/builder/src/features/dashboard/components/DashboardHeader.tsx
@@ -1,31 +1,31 @@
-import React from 'react'
-import { HStack, Flex, Button, useDisclosure } from '@chakra-ui/react'
-import { HardDriveIcon, SettingsIcon } from '@/components/icons'
-import { useUser } from '@/features/account/hooks/useUser'
-import { isNotDefined } from '@typebot.io/lib'
-import Link from 'next/link'
-import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
-import { useTranslate } from '@tolgee/react'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { WorkspaceDropdown } from '@/features/workspace/components/WorkspaceDropdown'
-import { WorkspaceSettingsModal } from '@/features/workspace/components/WorkspaceSettingsModal'
-import { ParentModalProvider } from '@/features/graph/providers/ParentModalProvider'
-import { useRouter } from 'next/router'
+import { EmojiOrImageIcon } from "@/components/EmojiOrImageIcon";
+import { HardDriveIcon, SettingsIcon } from "@/components/icons";
+import { useUser } from "@/features/account/hooks/useUser";
+import { ParentModalProvider } from "@/features/graph/providers/ParentModalProvider";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { WorkspaceDropdown } from "@/features/workspace/components/WorkspaceDropdown";
+import { WorkspaceSettingsModal } from "@/features/workspace/components/WorkspaceSettingsModal";
+import { Button, Flex, HStack, useDisclosure } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { isNotDefined } from "@typebot.io/lib/utils";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React from "react";
export const DashboardHeader = () => {
- const { t } = useTranslate()
- const { user, logOut } = useUser()
- const { workspace, switchWorkspace, createWorkspace } = useWorkspace()
- const { asPath } = useRouter()
+ const { t } = useTranslate();
+ const { user, logOut } = useUser();
+ const { workspace, switchWorkspace, createWorkspace } = useWorkspace();
+ const { asPath } = useRouter();
- const isRedirectFromCredentialsCreation = asPath.includes('credentials')
+ const isRedirectFromCredentialsCreation = asPath.includes("credentials");
const { isOpen, onOpen, onClose } = useDisclosure({
defaultIsOpen: isRedirectFromCredentialsCreation,
- })
+ });
const handleCreateNewWorkspace = () =>
- createWorkspace(user?.name ?? undefined)
+ createWorkspace(user?.name ?? undefined);
return (
@@ -52,7 +52,7 @@ export const DashboardHeader = () => {
user={user}
workspace={workspace}
defaultTab={
- isRedirectFromCredentialsCreation ? 'credentials' : undefined
+ isRedirectFromCredentialsCreation ? "credentials" : undefined
}
/>
@@ -63,7 +63,7 @@ export const DashboardHeader = () => {
onClick={onOpen}
isLoading={isNotDefined(workspace)}
>
- {t('dashboard.header.settingsButton.label')}
+ {t("dashboard.header.settingsButton.label")}
)}
{
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/dashboard/components/DashboardPage.tsx b/apps/builder/src/features/dashboard/components/DashboardPage.tsx
index b0d5b7fede..7b8a293c36 100644
--- a/apps/builder/src/features/dashboard/components/DashboardPage.tsx
+++ b/apps/builder/src/features/dashboard/components/DashboardPage.tsx
@@ -1,64 +1,64 @@
-import { Seo } from '@/components/Seo'
-import { useUser } from '@/features/account/hooks/useUser'
+import { Seo } from "@/components/Seo";
+import { useUser } from "@/features/account/hooks/useUser";
import {
PreCheckoutModal,
- PreCheckoutModalProps,
-} from '@/features/billing/components/PreCheckoutModal'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { Stack, VStack, Spinner, Text } from '@chakra-ui/react'
-import { Plan } from '@typebot.io/prisma'
-import { useRouter } from 'next/router'
-import { useState, useEffect } from 'react'
-import { DashboardHeader } from './DashboardHeader'
-import { FolderContent } from '@/features/folders/components/FolderContent'
-import { TypebotDndProvider } from '@/features/folders/TypebotDndProvider'
-import { ParentModalProvider } from '@/features/graph/providers/ParentModalProvider'
-import { trpc } from '@/lib/trpc'
-import { guessIfUserIsEuropean } from '@typebot.io/billing/helpers/guessIfUserIsEuropean'
-import { useTranslate } from '@tolgee/react'
+ type PreCheckoutModalProps,
+} from "@/features/billing/components/PreCheckoutModal";
+import { TypebotDndProvider } from "@/features/folders/TypebotDndProvider";
+import { FolderContent } from "@/features/folders/components/FolderContent";
+import { ParentModalProvider } from "@/features/graph/providers/ParentModalProvider";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { trpc } from "@/lib/trpc";
+import { Spinner, Stack, Text, VStack } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { guessIfUserIsEuropean } from "@typebot.io/billing/helpers/guessIfUserIsEuropean";
+import type { Plan } from "@typebot.io/prisma/enum";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { DashboardHeader } from "./DashboardHeader";
export const DashboardPage = () => {
- const { t } = useTranslate()
- const [isLoading, setIsLoading] = useState(false)
- const router = useRouter()
- const { user } = useUser()
- const { workspace } = useWorkspace()
+ const { t } = useTranslate();
+ const [isLoading, setIsLoading] = useState(false);
+ const router = useRouter();
+ const { user } = useUser();
+ const { workspace } = useWorkspace();
const [preCheckoutPlan, setPreCheckoutPlan] =
- useState()
+ useState();
const { mutate: createCustomCheckoutSession } =
trpc.billing.createCustomCheckoutSession.useMutation({
onSuccess: (data) => {
- router.push(data.checkoutUrl)
+ router.push(data.checkoutUrl);
},
- })
+ });
useEffect(() => {
const { subscribePlan, claimCustomPlan } = router.query as {
- subscribePlan: Plan | undefined
- chats: string | undefined
- claimCustomPlan: string | undefined
- }
+ subscribePlan: Plan | undefined;
+ chats: string | undefined;
+ claimCustomPlan: string | undefined;
+ };
if (claimCustomPlan && user?.email && workspace) {
- setIsLoading(true)
+ setIsLoading(true);
createCustomCheckoutSession({
email: user.email,
workspaceId: workspace.id,
returnUrl: `${window.location.origin}/typebots`,
- })
+ });
}
- if (workspace && subscribePlan && user && workspace.plan === 'FREE') {
- setIsLoading(true)
+ if (workspace && subscribePlan && user && workspace.plan === "FREE") {
+ setIsLoading(true);
setPreCheckoutPlan({
- plan: subscribePlan as 'PRO' | 'STARTER',
+ plan: subscribePlan as "PRO" | "STARTER",
workspaceId: workspace.id,
- currency: guessIfUserIsEuropean() ? 'eur' : 'usd',
- })
+ currency: guessIfUserIsEuropean() ? "eur" : "usd",
+ });
}
- }, [createCustomCheckoutSession, router.query, user, workspace])
+ }, [createCustomCheckoutSession, router.query, user, workspace]);
return (
-
@@ -73,7 +73,7 @@ export const DashboardPage = () => {
{isLoading ? (
- {t('dashboard.redirectionMessage')}
+ {t("dashboard.redirectionMessage")}
) : (
@@ -81,5 +81,5 @@ export const DashboardPage = () => {
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/dashboard/dashboard.spec.ts b/apps/builder/src/features/dashboard/dashboard.spec.ts
index 163c8f4680..7151c8396d 100644
--- a/apps/builder/src/features/dashboard/dashboard.spec.ts
+++ b/apps/builder/src/features/dashboard/dashboard.spec.ts
@@ -1,85 +1,87 @@
-import { createFolders } from '@/test/utils/databaseActions'
-import { deleteButtonInConfirmDialog } from '@/test/utils/selectorUtils'
-import test, { expect } from '@playwright/test'
-import { createId } from '@paralleldrive/cuid2'
-import { createTypebots } from '@typebot.io/playwright/databaseActions'
+import { createFolders } from "@/test/utils/databaseActions";
+import { deleteButtonInConfirmDialog } from "@/test/utils/selectorUtils";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { createTypebots } from "@typebot.io/playwright/databaseActions";
-test('folders navigation should work', async ({ page }) => {
- await page.goto('/typebots')
- const createFolderButton = page.locator('button:has-text("Create a folder")')
- await expect(createFolderButton).not.toBeDisabled()
- await createFolderButton.click()
- await page.fill('input[value="New folder"]', 'My folder #1')
- await page.press('input[value="My folder #1"]', 'Enter')
- await page.click('li:has-text("My folder #1")')
- await expect(page.locator('h1:has-text("My folder #1")')).toBeVisible()
- await createFolderButton.click()
- await page.fill('input', 'My folder #2')
- await page.press('input', 'Enter')
+test("folders navigation should work", async ({ page }) => {
+ await page.goto("/typebots");
+ const createFolderButton = page.locator('button:has-text("Create a folder")');
+ await expect(createFolderButton).not.toBeDisabled();
+ await createFolderButton.click();
+ await page.fill('input[value="New folder"]', "My folder #1");
+ await page.press('input[value="My folder #1"]', "Enter");
+ await page.click('li:has-text("My folder #1")');
+ await expect(page.locator('h1:has-text("My folder #1")')).toBeVisible();
+ await createFolderButton.click();
+ await page.fill("input", "My folder #2");
+ await page.press("input", "Enter");
- await page.click('li:has-text("My folder #2")')
- await expect(page.locator('h1 >> text="My folder #2"')).toBeVisible()
+ await page.click('li:has-text("My folder #2")');
+ await expect(page.locator('h1 >> text="My folder #2"')).toBeVisible();
- await page.click('text="Back"')
- await expect(page.locator('span >> text="My folder #2"')).toBeVisible()
+ await page.click('text="Back"');
+ await expect(page.locator('span >> text="My folder #2"')).toBeVisible();
- await page.click('text="Back"')
- await expect(page.locator('span >> text=My folder #1')).toBeVisible()
-})
+ await page.click('text="Back"');
+ await expect(page.locator("span >> text=My folder #1")).toBeVisible();
+});
-test('folders and typebots should be deletable', async ({ page }) => {
- await createFolders([{ name: 'Folder #1' }, { name: 'Folder #2' }])
- const tomorrow = new Date()
- tomorrow.setDate(tomorrow.getDate() + 1)
+test("folders and typebots should be deletable", async ({ page }) => {
+ await createFolders([{ name: "Folder #1" }, { name: "Folder #2" }]);
+ const tomorrow = new Date();
+ tomorrow.setDate(tomorrow.getDate() + 1);
await createTypebots([
- { id: 'deletable-typebot', name: 'Typebot #1', createdAt: tomorrow },
- ])
- await page.goto('/typebots')
- await page.click('button[aria-label="Show Folder #1 menu"]')
- await page.click('li:has-text("Folder #1") >> button:has-text("Delete")')
- await deleteButtonInConfirmDialog(page).click()
- await expect(page.locator('span >> text="Folder #1"')).not.toBeVisible()
- await page.click('button[aria-label="Show more options"]')
- await page.click('li:has-text("Typebot #1") >> button:has-text("Delete")')
- await deleteButtonInConfirmDialog(page).click()
- await expect(page.locator('span >> text="Typebot #1"')).not.toBeVisible()
-})
+ { id: "deletable-typebot", name: "Typebot #1", createdAt: tomorrow },
+ ]);
+ await page.goto("/typebots");
+ await page.click('button[aria-label="Show Folder #1 menu"]');
+ await page.click('li:has-text("Folder #1") >> button:has-text("Delete")');
+ await deleteButtonInConfirmDialog(page).click();
+ await expect(page.locator('span >> text="Folder #1"')).not.toBeVisible();
+ await page.click('button[aria-label="Show more options"]');
+ await page.click('li:has-text("Typebot #1") >> button:has-text("Delete")');
+ await deleteButtonInConfirmDialog(page).click();
+ await expect(page.locator('span >> text="Typebot #1"')).not.toBeVisible();
+});
-test('folders and typebots should be movable', async ({ page }) => {
- const droppableFolderId = createId()
- await createFolders([{ id: droppableFolderId, name: 'Droppable folder' }])
- await createTypebots([{ name: 'Draggable typebot' }])
- await page.goto('/typebots')
- const typebotButton = page.locator('li:has-text("Draggable typebot")')
- const folderButton = page.locator('li:has-text("Droppable folder")')
+test("folders and typebots should be movable", async ({ page }) => {
+ const droppableFolderId = createId();
+ await createFolders([{ id: droppableFolderId, name: "Droppable folder" }]);
+ await createTypebots([{ name: "Draggable typebot" }]);
+ await page.goto("/typebots");
+ const typebotButton = page.locator('li:has-text("Draggable typebot")');
+ const folderButton = page.locator('li:has-text("Droppable folder")');
await page.dragAndDrop(
'li:has-text("Draggable typebot")',
- 'li:has-text("Droppable folder")'
- )
- await expect(typebotButton).toBeHidden()
- await folderButton.click()
- await expect(page).toHaveURL(new RegExp(`/folders/${droppableFolderId}`))
- await expect(typebotButton).toBeVisible()
+ 'li:has-text("Droppable folder")',
+ );
+ await expect(typebotButton).toBeHidden();
+ await folderButton.click();
+ await expect(page).toHaveURL(new RegExp(`/folders/${droppableFolderId}`));
+ await expect(typebotButton).toBeVisible();
await page.dragAndDrop(
'li:has-text("Draggable typebot")',
- 'a:has-text("Back")'
- )
- await expect(typebotButton).toBeHidden()
- await page.click('a:has-text("Back")')
- await expect(typebotButton).toBeVisible()
-})
+ 'a:has-text("Back")',
+ );
+ await expect(typebotButton).toBeHidden();
+ await page.click('a:has-text("Back")');
+ await expect(typebotButton).toBeVisible();
+});
-test.describe('Free user', () => {
+test.describe("Free user", () => {
test("create folder shouldn't be available", async ({ page }) => {
- await page.goto('/typebots')
- await page.click('text="Pro workspace"')
- await page.click('text="Free workspace"')
- await expect(page.locator('[data-testid="starter-lock-tag"]')).toBeVisible()
- await page.click('text=Create a folder')
+ await page.goto("/typebots");
+ await page.click('text="Pro workspace"');
+ await page.click('text="Free workspace"');
+ await expect(
+ page.locator('[data-testid="starter-lock-tag"]'),
+ ).toBeVisible();
+ await page.click("text=Create a folder");
await expect(
page.locator(
- 'text="You need to upgrade your plan in order to create folders"'
- )
- ).toBeVisible()
- })
-})
+ 'text="You need to upgrade your plan in order to create folders"',
+ ),
+ ).toBeVisible();
+ });
+});
diff --git a/apps/builder/src/features/dashboard/hooks/useTypebots.ts b/apps/builder/src/features/dashboard/hooks/useTypebots.ts
index 378285f201..50952b7831 100644
--- a/apps/builder/src/features/dashboard/hooks/useTypebots.ts
+++ b/apps/builder/src/features/dashboard/hooks/useTypebots.ts
@@ -1,13 +1,13 @@
-import { trpc } from '@/lib/trpc'
+import { trpc } from "@/lib/trpc";
export const useTypebots = ({
folderId,
workspaceId,
onError,
}: {
- workspaceId?: string
- folderId?: string | 'root'
- onError: (error: Error) => void
+ workspaceId?: string;
+ folderId?: string | "root";
+ onError: (error: Error) => void;
}) => {
const { data, isLoading, refetch } = trpc.typebot.listTypebots.useQuery(
{
@@ -17,13 +17,13 @@ export const useTypebots = ({
{
enabled: !!workspaceId,
onError: (error) => {
- onError(new Error(error.message))
+ onError(new Error(error.message));
},
- }
- )
+ },
+ );
return {
typebots: data?.typebots,
isLoading,
refetch,
- }
-}
+ };
+};
diff --git a/apps/builder/src/features/dashboard/types.ts b/apps/builder/src/features/dashboard/types.ts
index 5aab1cd964..36d625de71 100644
--- a/apps/builder/src/features/dashboard/types.ts
+++ b/apps/builder/src/features/dashboard/types.ts
@@ -1,5 +1,5 @@
-import { Typebot } from '@typebot.io/schemas'
+import type { Typebot } from "@typebot.io/typebot/schemas/typebot";
-export type TypebotInDashboard = Pick & {
- publishedTypebotId?: string
-}
+export type TypebotInDashboard = Pick & {
+ publishedTypebotId?: string;
+};
diff --git a/apps/builder/src/features/editor/components/BlockCard.tsx b/apps/builder/src/features/editor/components/BlockCard.tsx
index 4db3abb1c9..c8fba70d16 100644
--- a/apps/builder/src/features/editor/components/BlockCard.tsx
+++ b/apps/builder/src/features/editor/components/BlockCard.tsx
@@ -1,54 +1,56 @@
-import { HStack } from '@chakra-ui/react'
-import React from 'react'
-import { BlockIcon } from './BlockIcon'
-import { isFreePlan } from '@/features/billing/helpers/isFreePlan'
-import { Plan } from '@typebot.io/prisma'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { BlockLabel } from './BlockLabel'
-import { LockTag } from '@/features/billing/components/LockTag'
-import { useTranslate } from '@tolgee/react'
-import { BubbleBlockType } from '@typebot.io/schemas/features/blocks/bubbles/constants'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
-import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integrations/constants'
-import { LogicBlockType } from '@typebot.io/schemas/features/blocks/logic/constants'
-import { BlockV6 } from '@typebot.io/schemas'
-import { BlockCardLayout } from './BlockCardLayout'
-import { ForgedBlockCard } from '@/features/forge/ForgedBlockCard'
-import { isForgedBlockType } from '@typebot.io/schemas/features/blocks/forged/helpers'
+import { LockTag } from "@/features/billing/components/LockTag";
+import { isFreePlan } from "@/features/billing/helpers/isFreePlan";
+import { ForgedBlockCard } from "@/features/forge/ForgedBlockCard";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { HStack } from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { BubbleBlockType } from "@typebot.io/blocks-bubbles/constants";
+import { isForgedBlockType } from "@typebot.io/blocks-core/helpers";
+import type { BlockV6 } from "@typebot.io/blocks-core/schemas/schema";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { IntegrationBlockType } from "@typebot.io/blocks-integrations/constants";
+import { LogicBlockType } from "@typebot.io/blocks-logic/constants";
+import { Plan } from "@typebot.io/prisma/enum";
+import type React from "react";
+import { BlockCardLayout } from "./BlockCardLayout";
+import { BlockIcon } from "./BlockIcon";
+import { BlockLabel } from "./BlockLabel";
type Props = {
- type: BlockV6['type']
- tooltip?: string
- isDisabled?: boolean
- children: React.ReactNode
- onMouseDown: (e: React.MouseEvent, type: BlockV6['type']) => void
-}
+ type: BlockV6["type"];
+ tooltip?: string;
+ isDisabled?: boolean;
+ children: React.ReactNode;
+ onMouseDown: (e: React.MouseEvent, type: BlockV6["type"]) => void;
+};
export const BlockCard = (
- props: Pick
+ props: Pick,
): JSX.Element => {
- const { t } = useTranslate()
- const { workspace } = useWorkspace()
+ const { t } = useTranslate();
+ const { workspace } = useWorkspace();
if (isForgedBlockType(props.type)) {
- return
- )
+ );
case InputBlockType.FILE:
return (
@@ -56,63 +58,63 @@ export const BlockCard = (
{isFreePlan(workspace) &&
- )
+ );
case LogicBlockType.SCRIPT:
return (
- )
+ );
case LogicBlockType.TYPEBOT_LINK:
return (
- )
+ );
case LogicBlockType.JUMP:
return (
- )
+ );
case IntegrationBlockType.GOOGLE_SHEETS:
return (
- )
+ );
case IntegrationBlockType.GOOGLE_ANALYTICS:
return (
- )
+ );
default:
return (
- )
+ );
}
-}
+};
diff --git a/apps/builder/src/features/editor/components/BlockCardLayout.tsx b/apps/builder/src/features/editor/components/BlockCardLayout.tsx
index a013d01aa9..4bd0e36de1 100644
--- a/apps/builder/src/features/editor/components/BlockCardLayout.tsx
+++ b/apps/builder/src/features/editor/components/BlockCardLayout.tsx
@@ -1,15 +1,15 @@
-import { useBlockDnd } from '@/features/graph/providers/GraphDndProvider'
-import { Tooltip, Flex, HStack, useColorModeValue } from '@chakra-ui/react'
-import { BlockV6 } from '@typebot.io/schemas'
-import { useState, useEffect } from 'react'
+import { useBlockDnd } from "@/features/graph/providers/GraphDndProvider";
+import { Flex, HStack, Tooltip, useColorModeValue } from "@chakra-ui/react";
+import type { BlockV6 } from "@typebot.io/blocks-core/schemas/schema";
+import { useEffect, useState } from "react";
type Props = {
- type: BlockV6['type']
- tooltip?: string
- isDisabled?: boolean
- children: React.ReactNode
- onMouseDown: (e: React.MouseEvent, type: BlockV6['type']) => void
-}
+ type: BlockV6["type"];
+ tooltip?: string;
+ isDisabled?: boolean;
+ children: React.ReactNode;
+ onMouseDown: (e: React.MouseEvent, type: BlockV6["type"]) => void;
+};
export const BlockCardLayout = ({
type,
@@ -17,35 +17,35 @@ export const BlockCardLayout = ({
tooltip,
children,
}: Props) => {
- const { draggedBlockType } = useBlockDnd()
- const [isMouseDown, setIsMouseDown] = useState(false)
+ const { draggedBlockType } = useBlockDnd();
+ const [isMouseDown, setIsMouseDown] = useState(false);
useEffect(() => {
- setIsMouseDown(draggedBlockType === type)
- }, [draggedBlockType, type])
+ setIsMouseDown(draggedBlockType === type);
+ }, [draggedBlockType, type]);
- const handleMouseDown = (e: React.MouseEvent) => onMouseDown(e, type)
+ const handleMouseDown = (e: React.MouseEvent) => onMouseDown(e, type);
return (
{!isMouseDown ? children : null}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/editor/components/BlockCardOverlay.tsx b/apps/builder/src/features/editor/components/BlockCardOverlay.tsx
index 2c3138e935..8dddca9a7b 100644
--- a/apps/builder/src/features/editor/components/BlockCardOverlay.tsx
+++ b/apps/builder/src/features/editor/components/BlockCardOverlay.tsx
@@ -1,24 +1,24 @@
-import { StackProps, HStack, useColorModeValue } from '@chakra-ui/react'
-import { BlockIcon } from './BlockIcon'
-import { BlockLabel } from './BlockLabel'
-import { BlockV6 } from '@typebot.io/schemas'
+import { HStack, type StackProps, useColorModeValue } from "@chakra-ui/react";
+import type { BlockV6 } from "@typebot.io/blocks-core/schemas/schema";
+import { BlockIcon } from "./BlockIcon";
+import { BlockLabel } from "./BlockLabel";
export const BlockCardOverlay = ({
type,
...props
-}: StackProps & { type: BlockV6['type'] }) => {
+}: StackProps & { type: BlockV6["type"] }) => {
return (
{label}
- )
-}
+ );
+};
export const getBubbleBlockLabel = (
- t: TFnType
+ t: TFnType,
): Record => ({
- [BubbleBlockType.TEXT]: t('editor.sidebarBlock.text.label'),
- [BubbleBlockType.IMAGE]: t('editor.sidebarBlock.image.label'),
- [BubbleBlockType.VIDEO]: t('editor.sidebarBlock.video.label'),
- [BubbleBlockType.EMBED]: t('editor.sidebarBlock.embed.label'),
- [BubbleBlockType.AUDIO]: t('editor.sidebarBlock.audio.label'),
-})
+ [BubbleBlockType.TEXT]: t("editor.sidebarBlock.text.label"),
+ [BubbleBlockType.IMAGE]: t("editor.sidebarBlock.image.label"),
+ [BubbleBlockType.VIDEO]: t("editor.sidebarBlock.video.label"),
+ [BubbleBlockType.EMBED]: t("editor.sidebarBlock.embed.label"),
+ [BubbleBlockType.AUDIO]: t("editor.sidebarBlock.audio.label"),
+});
export const getInputBlockLabel = (
- t: TFnType
+ t: TFnType,
): Record => ({
- [InputBlockType.NUMBER]: t('editor.sidebarBlock.number.label'),
- [InputBlockType.EMAIL]: t('editor.sidebarBlock.email.label'),
- [InputBlockType.TEXT]: t('editor.sidebarBlock.text.label'),
- [InputBlockType.URL]: t('editor.sidebarBlock.website.label'),
- [InputBlockType.DATE]: t('editor.sidebarBlock.date.label'),
- [InputBlockType.PHONE]: t('editor.sidebarBlock.phone.label'),
- [InputBlockType.CHOICE]: t('editor.sidebarBlock.button.label'),
- [InputBlockType.PICTURE_CHOICE]: t('editor.sidebarBlock.picChoice.label'),
- [InputBlockType.PAYMENT]: t('editor.sidebarBlock.payment.label'),
- [InputBlockType.RATING]: t('editor.sidebarBlock.rating.label'),
- [InputBlockType.FILE]: t('editor.sidebarBlock.file.label'),
-})
+ [InputBlockType.NUMBER]: t("editor.sidebarBlock.number.label"),
+ [InputBlockType.EMAIL]: t("editor.sidebarBlock.email.label"),
+ [InputBlockType.TEXT]: t("editor.sidebarBlock.text.label"),
+ [InputBlockType.URL]: t("editor.sidebarBlock.website.label"),
+ [InputBlockType.DATE]: t("editor.sidebarBlock.date.label"),
+ [InputBlockType.PHONE]: t("editor.sidebarBlock.phone.label"),
+ [InputBlockType.CHOICE]: t("editor.sidebarBlock.button.label"),
+ [InputBlockType.PICTURE_CHOICE]: t("editor.sidebarBlock.picChoice.label"),
+ [InputBlockType.PAYMENT]: t("editor.sidebarBlock.payment.label"),
+ [InputBlockType.RATING]: t("editor.sidebarBlock.rating.label"),
+ [InputBlockType.FILE]: t("editor.sidebarBlock.file.label"),
+});
export const getLogicBlockLabel = (
- t: TFnType
+ t: TFnType,
): Record => ({
- [LogicBlockType.SET_VARIABLE]: t('editor.sidebarBlock.setVariable.label'),
- [LogicBlockType.CONDITION]: t('editor.sidebarBlock.condition.label'),
- [LogicBlockType.REDIRECT]: t('editor.sidebarBlock.redirect.label'),
- [LogicBlockType.SCRIPT]: t('editor.sidebarBlock.script.label'),
- [LogicBlockType.TYPEBOT_LINK]: t('editor.sidebarBlock.typebot.label'),
- [LogicBlockType.WAIT]: t('editor.sidebarBlock.wait.label'),
- [LogicBlockType.JUMP]: t('editor.sidebarBlock.jump.label'),
- [LogicBlockType.AB_TEST]: t('editor.sidebarBlock.abTest.label'),
-})
+ [LogicBlockType.SET_VARIABLE]: t("editor.sidebarBlock.setVariable.label"),
+ [LogicBlockType.CONDITION]: t("editor.sidebarBlock.condition.label"),
+ [LogicBlockType.REDIRECT]: t("editor.sidebarBlock.redirect.label"),
+ [LogicBlockType.SCRIPT]: t("editor.sidebarBlock.script.label"),
+ [LogicBlockType.TYPEBOT_LINK]: t("editor.sidebarBlock.typebot.label"),
+ [LogicBlockType.WAIT]: t("editor.sidebarBlock.wait.label"),
+ [LogicBlockType.JUMP]: t("editor.sidebarBlock.jump.label"),
+ [LogicBlockType.AB_TEST]: t("editor.sidebarBlock.abTest.label"),
+});
export const getIntegrationBlockLabel = (
- t: TFnType
+ t: TFnType,
): Record => ({
- [IntegrationBlockType.GOOGLE_SHEETS]: t('editor.sidebarBlock.sheets.label'),
+ [IntegrationBlockType.GOOGLE_SHEETS]: t("editor.sidebarBlock.sheets.label"),
[IntegrationBlockType.GOOGLE_ANALYTICS]: t(
- 'editor.sidebarBlock.analytics.label'
+ "editor.sidebarBlock.analytics.label",
),
- [IntegrationBlockType.WEBHOOK]: 'HTTP request',
- [IntegrationBlockType.ZAPIER]: t('editor.sidebarBlock.zapier.label'),
- [IntegrationBlockType.MAKE_COM]: t('editor.sidebarBlock.makecom.label'),
- [IntegrationBlockType.PABBLY_CONNECT]: t('editor.sidebarBlock.pabbly.label'),
- [IntegrationBlockType.EMAIL]: t('editor.sidebarBlock.email.label'),
- [IntegrationBlockType.CHATWOOT]: t('editor.sidebarBlock.chatwoot.label'),
- [IntegrationBlockType.OPEN_AI]: t('editor.sidebarBlock.openai.label'),
- [IntegrationBlockType.PIXEL]: t('editor.sidebarBlock.pixel.label'),
-})
+ [IntegrationBlockType.WEBHOOK]: "HTTP request",
+ [IntegrationBlockType.ZAPIER]: t("editor.sidebarBlock.zapier.label"),
+ [IntegrationBlockType.MAKE_COM]: t("editor.sidebarBlock.makecom.label"),
+ [IntegrationBlockType.PABBLY_CONNECT]: t("editor.sidebarBlock.pabbly.label"),
+ [IntegrationBlockType.EMAIL]: t("editor.sidebarBlock.email.label"),
+ [IntegrationBlockType.CHATWOOT]: t("editor.sidebarBlock.chatwoot.label"),
+ [IntegrationBlockType.OPEN_AI]: t("editor.sidebarBlock.openai.label"),
+ [IntegrationBlockType.PIXEL]: t("editor.sidebarBlock.pixel.label"),
+});
diff --git a/apps/builder/src/features/editor/components/BlocksSideBar.tsx b/apps/builder/src/features/editor/components/BlocksSideBar.tsx
index 263de29628..d9d0a53655 100644
--- a/apps/builder/src/features/editor/components/BlocksSideBar.tsx
+++ b/apps/builder/src/features/editor/components/BlocksSideBar.tsx
@@ -1,103 +1,107 @@
+import { LockedIcon, UnlockedIcon } from "@/components/icons";
+import { useBlockDnd } from "@/features/graph/providers/GraphDndProvider";
/* eslint-disable @typescript-eslint/no-explicit-any */
import {
- Stack,
- Text,
- SimpleGrid,
- useEventListener,
- Portal,
+ Fade,
Flex,
IconButton,
Input,
+ Portal,
+ SimpleGrid,
+ Stack,
+ Text,
Tooltip,
- Fade,
useColorModeValue,
-} from '@chakra-ui/react'
-import { useBlockDnd } from '@/features/graph/providers/GraphDndProvider'
-import React, { useState } from 'react'
-import { BlockCard } from './BlockCard'
-import { LockedIcon, UnlockedIcon } from '@/components/icons'
-import { BlockCardOverlay } from './BlockCardOverlay'
-import { headerHeight } from '../constants'
-import { useTranslate } from '@tolgee/react'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
-import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integrations/constants'
-import { LogicBlockType } from '@typebot.io/schemas/features/blocks/logic/constants'
-import { BlockV6 } from '@typebot.io/schemas'
-import { useDebouncedCallback } from 'use-debounce'
-import { forgedBlocks } from '@typebot.io/forge-repository/definitions'
+ useEventListener,
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { BubbleBlockType } from "@typebot.io/blocks-bubbles/constants";
+import type { BlockV6 } from "@typebot.io/blocks-core/schemas/schema";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { IntegrationBlockType } from "@typebot.io/blocks-integrations/constants";
+import { LogicBlockType } from "@typebot.io/blocks-logic/constants";
+import { forgedBlocks } from "@typebot.io/forge-repository/definitions";
+import type React from "react";
+import { useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { headerHeight } from "../constants";
+import { BlockCard } from "./BlockCard";
+import { BlockCardOverlay } from "./BlockCardOverlay";
import {
getBubbleBlockLabel,
getInputBlockLabel,
getIntegrationBlockLabel,
getLogicBlockLabel,
-} from './BlockLabel'
-import { BubbleBlockType } from '@typebot.io/schemas/features/blocks/bubbles/constants'
+} from "./BlockLabel";
// Integration blocks migrated to forged blocks
-const legacyIntegrationBlocks = [IntegrationBlockType.OPEN_AI]
+const legacyIntegrationBlocks = [IntegrationBlockType.OPEN_AI];
export const BlocksSideBar = () => {
- const { t } = useTranslate()
- const { setDraggedBlockType, draggedBlockType } = useBlockDnd()
+ const { t } = useTranslate();
+ const { setDraggedBlockType, draggedBlockType } = useBlockDnd();
const [position, setPosition] = useState({
x: 0,
y: 0,
- })
- const [relativeCoordinates, setRelativeCoordinates] = useState({ x: 0, y: 0 })
- const [isLocked, setIsLocked] = useState(true)
- const [isExtended, setIsExtended] = useState(true)
- const [searchInput, setSearchInput] = useState('')
+ });
+ const [relativeCoordinates, setRelativeCoordinates] = useState({
+ x: 0,
+ y: 0,
+ });
+ const [isLocked, setIsLocked] = useState(true);
+ const [isExtended, setIsExtended] = useState(true);
+ const [searchInput, setSearchInput] = useState("");
- const closeSideBar = useDebouncedCallback(() => setIsExtended(false), 200)
+ const closeSideBar = useDebouncedCallback(() => setIsExtended(false), 200);
const handleMouseMove = (event: MouseEvent) => {
- if (!draggedBlockType) return
- const { clientX, clientY } = event
+ if (!draggedBlockType) return;
+ const { clientX, clientY } = event;
setPosition({
...position,
x: clientX - relativeCoordinates.x,
y: clientY - relativeCoordinates.y,
- })
- }
- useEventListener('mousemove', handleMouseMove)
+ });
+ };
+ useEventListener("mousemove", handleMouseMove);
- const handleMouseDown = (e: React.MouseEvent, type: BlockV6['type']) => {
- const element = e.currentTarget as HTMLDivElement
- const rect = element.getBoundingClientRect()
- setPosition({ x: rect.left, y: rect.top })
- const x = e.clientX - rect.left
- const y = e.clientY - rect.top
- setRelativeCoordinates({ x, y })
- setDraggedBlockType(type)
- }
+ const handleMouseDown = (e: React.MouseEvent, type: BlockV6["type"]) => {
+ const element = e.currentTarget as HTMLDivElement;
+ const rect = element.getBoundingClientRect();
+ setPosition({ x: rect.left, y: rect.top });
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+ setRelativeCoordinates({ x, y });
+ setDraggedBlockType(type);
+ };
const handleMouseUp = () => {
- if (!draggedBlockType) return
- setDraggedBlockType(undefined)
+ if (!draggedBlockType) return;
+ setDraggedBlockType(undefined);
setPosition({
x: 0,
y: 0,
- })
- }
- useEventListener('mouseup', handleMouseUp)
+ });
+ };
+ useEventListener("mouseup", handleMouseUp);
- const handleLockClick = () => setIsLocked(!isLocked)
+ const handleLockClick = () => setIsLocked(!isLocked);
const handleDockBarEnter = () => {
- closeSideBar.flush()
- setIsExtended(true)
- }
+ closeSideBar.flush();
+ setIsExtended(true);
+ };
const handleMouseLeave = () => {
- if (isLocked) return
- closeSideBar()
- }
+ if (isLocked) return;
+ closeSideBar();
+ };
const handleSearchInputChange = (event: {
- target: { value: React.SetStateAction }
+ target: { value: React.SetStateAction };
}) => {
- setSearchInput(event.target.value)
- }
+ setSearchInput(event.target.value);
+ };
const filteredForgedBlockIds = Object.values(forgedBlocks)
.filter((block) => {
@@ -105,41 +109,41 @@ export const BlocksSideBar = () => {
block.id.toLowerCase().includes(searchInput.toLowerCase()) ||
(block.tags &&
block.tags.some((tag: string) =>
- tag.toLowerCase().includes(searchInput.toLowerCase())
+ tag.toLowerCase().includes(searchInput.toLowerCase()),
)) ||
block.name.toLowerCase().includes(searchInput.toLowerCase())
- )
+ );
})
- .map((block) => block.id)
+ .map((block) => block.id);
const filteredBubbleBlockTypes = Object.values(BubbleBlockType).filter(
(type) =>
getBubbleBlockLabel(t)
[type].toLowerCase()
- .includes(searchInput.toLowerCase())
- )
+ .includes(searchInput.toLowerCase()),
+ );
const filteredInputBlockTypes = Object.values(InputBlockType).filter((type) =>
getInputBlockLabel(t)
[type].toLowerCase()
- .includes(searchInput.toLowerCase())
- )
+ .includes(searchInput.toLowerCase()),
+ );
const filteredLogicBlockTypes = Object.values(LogicBlockType).filter((type) =>
getLogicBlockLabel(t)
[type].toLowerCase()
- .includes(searchInput.toLowerCase())
- )
+ .includes(searchInput.toLowerCase()),
+ );
const filteredIntegrationBlockTypes = Object.values(
- IntegrationBlockType
+ IntegrationBlockType,
).filter(
(type) =>
getIntegrationBlockLabel(t)
[type].toLowerCase()
.includes(searchInput.toLowerCase()) &&
- !legacyIntegrationBlocks.includes(type)
- )
+ !legacyIntegrationBlocks.includes(type),
+ );
return (
{
pl="4"
py="4"
onMouseLeave={handleMouseLeave}
- transform={isExtended ? 'translateX(0)' : 'translateX(-350px)'}
+ transform={isExtended ? "translateX(0)" : "translateX(-350px)"}
transition="transform 350ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s"
>
{
pt="4"
pb="10"
px="4"
- bgColor={useColorModeValue('white', 'gray.900')}
+ bgColor={useColorModeValue("white", "gray.900")}
spacing={6}
userSelect="none"
overflowY="auto"
@@ -181,16 +185,16 @@ export const BlocksSideBar = () => {
- {t('editor.sidebarBlocks.blockType.bubbles.heading')}
+ {t("editor.sidebarBlocks.blockType.bubbles.heading")}
{filteredBubbleBlockTypes.map((type) => (
@@ -211,7 +215,7 @@ export const BlocksSideBar = () => {
- {t('editor.sidebarBlocks.blockType.inputs.heading')}
+ {t("editor.sidebarBlocks.blockType.inputs.heading")}
{filteredInputBlockTypes.map((type) => (
@@ -222,7 +226,7 @@ export const BlocksSideBar = () => {
- {t('editor.sidebarBlocks.blockType.logic.heading')}
+ {t("editor.sidebarBlocks.blockType.logic.heading")}
{filteredLogicBlockTypes.map((type) => (
@@ -233,7 +237,7 @@ export const BlocksSideBar = () => {
- {t('editor.sidebarBlocks.blockType.integrations.heading')}
+ {t("editor.sidebarBlocks.blockType.integrations.heading")}
{filteredIntegrationBlockTypes
@@ -280,5 +284,5 @@ export const BlocksSideBar = () => {
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/editor/components/BoardMenuButton.tsx b/apps/builder/src/features/editor/components/BoardMenuButton.tsx
index b5e47c2666..5e1f77ecb8 100644
--- a/apps/builder/src/features/editor/components/BoardMenuButton.tsx
+++ b/apps/builder/src/features/editor/components/BoardMenuButton.tsx
@@ -1,3 +1,12 @@
+import assert from "assert";
+import {
+ BookIcon,
+ BracesIcon,
+ DownloadIcon,
+ MoreVerticalIcon,
+ SettingsIcon,
+} from "@/components/icons";
+import { parseDefaultPublicId } from "@/features/publish/helpers/parseDefaultPublicId";
import {
HStack,
IconButton,
@@ -5,51 +14,42 @@ import {
MenuButton,
MenuItem,
MenuList,
- StackProps,
+ type StackProps,
useColorModeValue,
useDisclosure,
-} from '@chakra-ui/react'
-import assert from 'assert'
-import {
- BookIcon,
- BracesIcon,
- DownloadIcon,
- MoreVerticalIcon,
- SettingsIcon,
-} from '@/components/icons'
-import { useTypebot } from '../providers/TypebotProvider'
-import React, { useState } from 'react'
-import { EditorSettingsModal } from './EditorSettingsModal'
-import { parseDefaultPublicId } from '@/features/publish/helpers/parseDefaultPublicId'
-import { useTranslate } from '@tolgee/react'
-import { RightPanel, useEditor } from '../providers/EditorProvider'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import React, { useState } from "react";
+import { RightPanel, useEditor } from "../providers/EditorProvider";
+import { useTypebot } from "../providers/TypebotProvider";
+import { EditorSettingsModal } from "./EditorSettingsModal";
export const BoardMenuButton = (props: StackProps) => {
- const { typebot, currentUserMode } = useTypebot()
- const [isDownloading, setIsDownloading] = useState(false)
- const { isOpen, onOpen, onClose } = useDisclosure()
- const { t } = useTranslate()
- const { setRightPanel } = useEditor()
+ const { typebot, currentUserMode } = useTypebot();
+ const [isDownloading, setIsDownloading] = useState(false);
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const { t } = useTranslate();
+ const { setRightPanel } = useEditor();
const downloadFlow = () => {
- assert(typebot)
- setIsDownloading(true)
+ assert(typebot);
+ setIsDownloading(true);
const data =
- 'data:application/json;charset=utf-8,' +
- encodeURIComponent(JSON.stringify(typebot))
+ "data:application/json;charset=utf-8," +
+ encodeURIComponent(JSON.stringify(typebot));
const fileName = `typebot-export-${parseDefaultPublicId(
typebot.name,
- typebot.id
- )}.json`
- const linkElement = document.createElement('a')
- linkElement.setAttribute('href', data)
- linkElement.setAttribute('download', fileName)
- linkElement.click()
- setIsDownloading(false)
- }
+ typebot.id,
+ )}.json`;
+ const linkElement = document.createElement("a");
+ linkElement.setAttribute("href", data);
+ linkElement.setAttribute("download", fileName);
+ linkElement.click();
+ setIsDownloading(false);
+ };
const redirectToDocumentation = () =>
- window.open('https://docs.typebot.io/editor/graph', '_blank')
+ window.open("https://docs.typebot.io/editor/graph", "_blank");
return (
@@ -58,33 +58,33 @@ export const BoardMenuButton = (props: StackProps) => {
aria-label="Open variables drawer"
size="sm"
shadow="lg"
- bgColor={useColorModeValue('white', undefined)}
+ bgColor={useColorModeValue("white", undefined)}
onClick={() => setRightPanel(RightPanel.VARIABLES)}
/>
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/editor/components/EditableTypebotName.tsx b/apps/builder/src/features/editor/components/EditableTypebotName.tsx
index e89a9423e7..784df4e027 100644
--- a/apps/builder/src/features/editor/components/EditableTypebotName.tsx
+++ b/apps/builder/src/features/editor/components/EditableTypebotName.tsx
@@ -1,33 +1,33 @@
import {
Editable,
- EditablePreview,
EditableInput,
+ EditablePreview,
Tooltip,
useColorModeValue,
-} from '@chakra-ui/react'
-import React, { useState } from 'react'
-import { useTranslate } from '@tolgee/react'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import React, { useState } from "react";
type EditableProps = {
- defaultName: string
- onNewName: (newName: string) => void
-}
+ defaultName: string;
+ onNewName: (newName: string) => void;
+};
export const EditableTypebotName = ({
defaultName,
onNewName,
}: EditableProps) => {
- const { t } = useTranslate()
- const emptyNameBg = useColorModeValue('gray.100', 'gray.700')
- const [currentName, setCurrentName] = useState(defaultName)
+ const { t } = useTranslate();
+ const emptyNameBg = useColorModeValue("gray.100", "gray.700");
+ const [currentName, setCurrentName] = useState(defaultName);
const submitNewName = (newName: string) => {
- if (newName === '') return setCurrentName(defaultName)
- if (newName === defaultName) return
- onNewName(newName)
- }
+ if (newName === "") return setCurrentName(defaultName);
+ if (newName === defaultName) return;
+ onNewName(newName);
+ };
return (
-
+
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/editor/components/EditorPage.tsx b/apps/builder/src/features/editor/components/EditorPage.tsx
index 80c03c63af..6c1fa5890b 100644
--- a/apps/builder/src/features/editor/components/EditorPage.tsx
+++ b/apps/builder/src/features/editor/components/EditorPage.tsx
@@ -1,41 +1,41 @@
-import { Seo } from '@/components/Seo'
-import { Flex, Spinner, useColorModeValue } from '@chakra-ui/react'
+import { Seo } from "@/components/Seo";
+import { Graph } from "@/features/graph/components/Graph";
+import { EventsCoordinatesProvider } from "@/features/graph/providers/EventsCoordinateProvider";
+import { GraphDndProvider } from "@/features/graph/providers/GraphDndProvider";
+import { GraphProvider } from "@/features/graph/providers/GraphProvider";
+import { VideoOnboardingFloatingWindow } from "@/features/onboarding/components/VideoOnboardingFloatingWindow";
+import { PreviewDrawer } from "@/features/preview/components/PreviewDrawer";
+import { VariablesDrawer } from "@/features/preview/components/VariablesDrawer";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { Flex, Spinner, useColorModeValue } from "@chakra-ui/react";
import {
EditorProvider,
- useEditor,
RightPanel as RightPanelEnum,
-} from '../providers/EditorProvider'
-import { useTypebot } from '../providers/TypebotProvider'
-import { BlocksSideBar } from './BlocksSideBar'
-import { BoardMenuButton } from './BoardMenuButton'
-import { PreviewDrawer } from '@/features/preview/components/PreviewDrawer'
-import { TypebotHeader } from './TypebotHeader'
-import { Graph } from '@/features/graph/components/Graph'
-import { GraphDndProvider } from '@/features/graph/providers/GraphDndProvider'
-import { GraphProvider } from '@/features/graph/providers/GraphProvider'
-import { EventsCoordinatesProvider } from '@/features/graph/providers/EventsCoordinateProvider'
-import { TypebotNotFoundPage } from './TypebotNotFoundPage'
-import { SuspectedTypebotBanner } from './SuspectedTypebotBanner'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { VariablesDrawer } from '@/features/preview/components/VariablesDrawer'
-import { VideoOnboardingFloatingWindow } from '@/features/onboarding/components/VideoOnboardingFloatingWindow'
+ useEditor,
+} from "../providers/EditorProvider";
+import { useTypebot } from "../providers/TypebotProvider";
+import { BlocksSideBar } from "./BlocksSideBar";
+import { BoardMenuButton } from "./BoardMenuButton";
+import { SuspectedTypebotBanner } from "./SuspectedTypebotBanner";
+import { TypebotHeader } from "./TypebotHeader";
+import { TypebotNotFoundPage } from "./TypebotNotFoundPage";
export const EditorPage = () => {
- const { typebot, currentUserMode, is404 } = useTypebot()
- const { workspace } = useWorkspace()
+ const { typebot, currentUserMode, is404 } = useTypebot();
+ const { workspace } = useWorkspace();
const backgroundImage = useColorModeValue(
- 'radial-gradient(#c6d0e1 1px, transparent 0)',
- 'radial-gradient(#2f2f39 1px, transparent 0)'
- )
- const bgColor = useColorModeValue('#f4f5f8', 'gray.850')
+ "radial-gradient(#c6d0e1 1px, transparent 0)",
+ "radial-gradient(#2f2f39 1px, transparent 0)",
+ );
+ const bgColor = useColorModeValue("#f4f5f8", "gray.850");
- const isSuspicious = typebot?.riskLevel === 100 && !workspace?.isVerified
+ const isSuspicious = typebot?.riskLevel === 100 && !workspace?.isVerified;
- if (is404) return
-
- {currentUserMode === 'write' &&
@@ -62,7 +62,7 @@ export const EditorPage = () => {
@@ -76,18 +76,18 @@ export const EditorPage = () => {
- )
-}
+ );
+};
const RightPanel = () => {
- const { rightPanel, setRightPanel } = useEditor()
+ const { rightPanel, setRightPanel } = useEditor();
switch (rightPanel) {
case RightPanelEnum.PREVIEW:
- return setRightPanel(undefined)} />
+ return setRightPanel(undefined)} />;
case undefined:
- return null
+ return null;
}
-}
+};
diff --git a/apps/builder/src/features/editor/components/EditorSettingsModal.tsx b/apps/builder/src/features/editor/components/EditorSettingsModal.tsx
index eb01652622..86bcb88f99 100644
--- a/apps/builder/src/features/editor/components/EditorSettingsModal.tsx
+++ b/apps/builder/src/features/editor/components/EditorSettingsModal.tsx
@@ -1,17 +1,17 @@
-import { UserPreferencesForm } from '@/features/account/components/UserPreferencesForm'
+import { UserPreferencesForm } from "@/features/account/components/UserPreferencesForm";
import {
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalOverlay,
-} from '@chakra-ui/react'
-import React from 'react'
+} from "@chakra-ui/react";
+import React from "react";
type Props = {
- isOpen: boolean
- onClose: () => void
-}
+ isOpen: boolean;
+ onClose: () => void;
+};
export const EditorSettingsModal = ({ isOpen, onClose }: Props) => (
@@ -23,4 +23,4 @@ export const EditorSettingsModal = ({ isOpen, onClose }: Props) => (
-)
+);
diff --git a/apps/builder/src/features/editor/components/SuspectedTypebotBanner.tsx b/apps/builder/src/features/editor/components/SuspectedTypebotBanner.tsx
index 5d994fd3c1..93bbc8cf32 100644
--- a/apps/builder/src/features/editor/components/SuspectedTypebotBanner.tsx
+++ b/apps/builder/src/features/editor/components/SuspectedTypebotBanner.tsx
@@ -1,17 +1,17 @@
-import { TextLink } from '@/components/TextLink'
-import { useUser } from '@/features/account/hooks/useUser'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { HStack, Text } from '@chakra-ui/react'
-import { Plan } from '@typebot.io/prisma'
+import { TextLink } from "@/components/TextLink";
+import { useUser } from "@/features/account/hooks/useUser";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { HStack, Text } from "@chakra-ui/react";
+import { Plan } from "@typebot.io/prisma/enum";
type Props = {
- typebotId: string
-}
+ typebotId: string;
+};
export const SuspectedTypebotBanner = ({ typebotId }: Props) => {
- const { user } = useUser()
- const { workspace } = useWorkspace()
+ const { user } = useUser();
+ const { workspace } = useWorkspace();
- if (!user?.email || !workspace) return null
+ if (!user?.email || !workspace) return null;
return (
{
{workspace?.plan !== Plan.FREE ? (
<>
contact us
@@ -43,5 +43,5 @@ export const SuspectedTypebotBanner = ({ typebotId }: Props) => {
) : null}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/editor/components/TypebotHeader.tsx b/apps/builder/src/features/editor/components/TypebotHeader.tsx
index fb6e216239..ede86aef23 100644
--- a/apps/builder/src/features/editor/components/TypebotHeader.tsx
+++ b/apps/builder/src/features/editor/components/TypebotHeader.tsx
@@ -1,58 +1,58 @@
+import { EditableEmojiOrImageIcon } from "@/components/EditableEmojiOrImageIcon";
+import { SupportBubble } from "@/components/SupportBubble";
import {
+ BuoyIcon,
+ ChevronLeftIcon,
+ CopyIcon,
+ PlayIcon,
+ RedoIcon,
+ UndoIcon,
+} from "@/components/icons";
+import { PublishButton } from "@/features/publish/components/PublishButton";
+import { ShareTypebotButton } from "@/features/share/components/ShareTypebotButton";
+import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
+import { isCloudProdInstance } from "@/helpers/isCloudProdInstance";
+import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
+import {
+ Button,
Flex,
HStack,
- Button,
IconButton,
- Tooltip,
Spinner,
+ type StackProps,
Text,
+ Tooltip,
+ chakra,
useColorModeValue,
useDisclosure,
- StackProps,
- chakra,
-} from '@chakra-ui/react'
-import {
- BuoyIcon,
- ChevronLeftIcon,
- CopyIcon,
- PlayIcon,
- RedoIcon,
- UndoIcon,
-} from '@/components/icons'
-import { useRouter } from 'next/router'
-import React, { useState } from 'react'
-import { isDefined, isNotDefined } from '@typebot.io/lib'
-import { EditableTypebotName } from './EditableTypebotName'
-import Link from 'next/link'
-import { EditableEmojiOrImageIcon } from '@/components/EditableEmojiOrImageIcon'
-import { useDebouncedCallback } from 'use-debounce'
-import { ShareTypebotButton } from '@/features/share/components/ShareTypebotButton'
-import { PublishButton } from '@/features/publish/components/PublishButton'
-import { headerHeight } from '../constants'
-import { RightPanel, useEditor } from '../providers/EditorProvider'
-import { useTypebot } from '../providers/TypebotProvider'
-import { SupportBubble } from '@/components/SupportBubble'
-import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
-import { useTranslate } from '@tolgee/react'
-import { GuestTypebotHeader } from './UnauthenticatedTypebotHeader'
-import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
-import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
-import { Plan } from '@typebot.io/prisma'
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { isDefined, isNotDefined } from "@typebot.io/lib/utils";
+import { Plan } from "@typebot.io/prisma/enum";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React, { useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { headerHeight } from "../constants";
+import { RightPanel, useEditor } from "../providers/EditorProvider";
+import { useTypebot } from "../providers/TypebotProvider";
+import { EditableTypebotName } from "./EditableTypebotName";
+import { GuestTypebotHeader } from "./UnauthenticatedTypebotHeader";
export const TypebotHeader = () => {
- const { typebot, publishedTypebot, currentUserMode } = useTypebot()
- const { workspace } = useWorkspace()
+ const { typebot, publishedTypebot, currentUserMode } = useTypebot();
+ const { workspace } = useWorkspace();
- const { isOpen, onOpen } = useDisclosure()
- const headerBgColor = useColorModeValue('white', 'gray.900')
+ const { isOpen, onOpen } = useDisclosure();
+ const headerBgColor = useColorModeValue("white", "gray.900");
const handleHelpClick = () => {
isCloudProdInstance() && workspace?.plan && workspace.plan !== Plan.FREE
? onOpen()
- : window.open('https://docs.typebot.io/guides/how-to-get-help', '_blank')
- }
+ : window.open("https://docs.typebot.io/guides/how-to-get-help", "_blank");
+ };
- if (currentUserMode === 'guest') return {
{isOpen &&
- )
-}
+ );
+};
const LeftElements = ({
onHelpClick,
...props
}: StackProps & { onHelpClick: () => void }) => {
- const { t } = useTranslate()
- const router = useRouter()
+ const { t } = useTranslate();
+ const router = useRouter();
const {
typebot,
updateTypebot,
@@ -98,44 +98,44 @@ const LeftElements = ({
redo,
currentUserMode,
isSavingLoading,
- } = useTypebot()
+ } = useTypebot();
const [isRedoShortcutTooltipOpen, setRedoShortcutTooltipOpen] =
- useState(false)
+ useState(false);
const [isUndoShortcutTooltipOpen, setUndoShortcutTooltipOpen] =
- useState(false)
+ useState(false);
const hideUndoShortcutTooltipLater = useDebouncedCallback(() => {
- setUndoShortcutTooltipOpen(false)
- }, 1000)
+ setUndoShortcutTooltipOpen(false);
+ }, 1000);
const hideRedoShortcutTooltipLater = useDebouncedCallback(() => {
- setRedoShortcutTooltipOpen(false)
- }, 1000)
+ setRedoShortcutTooltipOpen(false);
+ }, 1000);
const handleNameSubmit = (name: string) =>
- updateTypebot({ updates: { name } })
+ updateTypebot({ updates: { name } });
const handleChangeIcon = (icon: string) =>
- updateTypebot({ updates: { icon } })
+ updateTypebot({ updates: { icon } });
useKeyboardShortcuts({
undo: () => {
- if (!canUndo) return
- hideUndoShortcutTooltipLater.flush()
- setUndoShortcutTooltipOpen(true)
- hideUndoShortcutTooltipLater()
- undo()
+ if (!canUndo) return;
+ hideUndoShortcutTooltipLater.flush();
+ setUndoShortcutTooltipOpen(true);
+ hideUndoShortcutTooltipLater();
+ undo();
},
redo: () => {
- if (!canRedo) return
- hideUndoShortcutTooltipLater.flush()
- setRedoShortcutTooltipOpen(true)
- hideRedoShortcutTooltipLater()
- redo()
+ if (!canRedo) return;
+ hideUndoShortcutTooltipLater.flush();
+ setRedoShortcutTooltipOpen(true);
+ hideRedoShortcutTooltipLater();
+ redo();
},
- })
+ });
return (
@@ -146,10 +146,10 @@ const LeftElements = ({
icon={
- {currentUserMode === 'write' && (
+ {currentUserMode === "write" && (
- {t('editor.header.helpButton.label')}
+
+ {t("editor.header.helpButton.label")}
@@ -239,46 +239,46 @@ const LeftElements = ({
- {t('editor.header.savingSpinner.label')}
+ {t("editor.header.savingSpinner.label")}
)}
- )
-}
+ );
+};
const RightElements = ({
isResultsDisplayed,
...props
}: StackProps & { isResultsDisplayed: boolean }) => {
- const router = useRouter()
- const { t } = useTranslate()
- const { typebot, currentUserMode, save, isSavingLoading } = useTypebot()
+ const router = useRouter();
+ const { t } = useTranslate();
+ const { typebot, currentUserMode, save, isSavingLoading } = useTypebot();
const {
setRightPanel,
rightPanel,
setStartPreviewAtGroup,
setStartPreviewAtEvent,
- } = useEditor()
+ } = useEditor();
const handlePreviewClick = async () => {
- setStartPreviewAtGroup(undefined)
- setStartPreviewAtEvent(undefined)
- await save()
- setRightPanel(RightPanel.PREVIEW)
- }
+ setStartPreviewAtGroup(undefined);
+ setStartPreviewAtEvent(undefined);
+ await save();
+ setRightPanel(RightPanel.PREVIEW);
+ };
return (
- {router.pathname.includes('/edit') &&
+ {router.pathname.includes("/edit") &&
rightPanel !== RightPanel.PREVIEW && (
-
- {t('editor.header.previewButton.label')}
+
+ {t("editor.header.previewButton.label")}
)}
- {currentUserMode === 'guest' && (
+ {currentUserMode === "guest" && (
)}
- {currentUserMode === 'write' &&
- )
-}
+ );
+};
const TypebotNav = ({
typebotId,
isResultsDisplayed,
...stackProps
}: {
- typebotId?: string
- isResultsDisplayed: boolean
+ typebotId?: string;
+ isResultsDisplayed: boolean;
} & StackProps) => {
- const { t } = useTranslate()
- const router = useRouter()
+ const { t } = useTranslate();
+ const router = useRouter();
return (
- {t('editor.header.flowButton.label')}
+ {t("editor.header.flowButton.label")}
- {t('editor.header.themeButton.label')}
+ {t("editor.header.themeButton.label")}
- {t('editor.header.settingsButton.label')}
+ {t("editor.header.settingsButton.label")}
- {t('share.button.label')}
+ {t("share.button.label")}
{isResultsDisplayed && (
- {t('editor.header.resultsButton.label')}
+ {t("editor.header.resultsButton.label")}
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/editor/components/TypebotNotFoundPage.tsx b/apps/builder/src/features/editor/components/TypebotNotFoundPage.tsx
index 0500ae1e18..b56e8c505b 100644
--- a/apps/builder/src/features/editor/components/TypebotNotFoundPage.tsx
+++ b/apps/builder/src/features/editor/components/TypebotNotFoundPage.tsx
@@ -1,30 +1,30 @@
-import { ChevronLeftIcon } from '@/components/icons'
-import { useUser } from '@/features/account/hooks/useUser'
+import { ChevronLeftIcon } from "@/components/icons";
+import { useUser } from "@/features/account/hooks/useUser";
import {
Button,
Flex,
Heading,
Link,
- VStack,
- Text,
Spinner,
-} from '@chakra-ui/react'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+ Text,
+ VStack,
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
export const TypebotNotFoundPage = () => {
- const { replace, asPath } = useRouter()
- const { user, isLoading } = useUser()
+ const { replace, asPath } = useRouter();
+ const { user, isLoading } = useUser();
useEffect(() => {
- if (user || isLoading) return
+ if (user || isLoading) return;
replace({
- pathname: '/signin',
+ pathname: "/signin",
query: {
redirectPath: asPath,
},
- })
- }, [asPath, isLoading, replace, user])
+ });
+ }, [asPath, isLoading, replace, user]);
return (
@@ -47,5 +47,5 @@ export const TypebotNotFoundPage = () => {
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/editor/components/UnauthenticatedTypebotHeader.tsx b/apps/builder/src/features/editor/components/UnauthenticatedTypebotHeader.tsx
index decda9cd87..9a8f65e8ae 100644
--- a/apps/builder/src/features/editor/components/UnauthenticatedTypebotHeader.tsx
+++ b/apps/builder/src/features/editor/components/UnauthenticatedTypebotHeader.tsx
@@ -1,42 +1,42 @@
+import { EmojiOrImageIcon } from "@/components/EmojiOrImageIcon";
+import { TypebotLogo } from "@/components/TypebotLogo";
+import { CopyIcon, PlayIcon } from "@/components/icons";
+import { useUser } from "@/features/account/hooks/useUser";
import {
- Flex,
- HStack,
Button,
- useColorModeValue,
Divider,
+ Flex,
+ HStack,
Text,
-} from '@chakra-ui/react'
-import { CopyIcon, PlayIcon } from '@/components/icons'
-import { useRouter } from 'next/router'
-import React from 'react'
-import { isNotDefined } from '@typebot.io/lib'
-import Link from 'next/link'
-import { headerHeight } from '../constants'
-import { RightPanel, useEditor } from '../providers/EditorProvider'
-import { useTypebot } from '../providers/TypebotProvider'
-import { useTranslate } from '@tolgee/react'
-import { TypebotLogo } from '@/components/TypebotLogo'
-import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
-import { useUser } from '@/features/account/hooks/useUser'
+ useColorModeValue,
+} from "@chakra-ui/react";
+import { useTranslate } from "@tolgee/react";
+import { isNotDefined } from "@typebot.io/lib/utils";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React from "react";
+import { headerHeight } from "../constants";
+import { RightPanel, useEditor } from "../providers/EditorProvider";
+import { useTypebot } from "../providers/TypebotProvider";
export const GuestTypebotHeader = () => {
- const { t } = useTranslate()
- const router = useRouter()
- const { user } = useUser()
- const { typebot, save } = useTypebot()
+ const { t } = useTranslate();
+ const router = useRouter();
+ const { user } = useUser();
+ const { typebot, save } = useTypebot();
const {
setRightPanel,
rightPanel,
setStartPreviewAtGroup,
setStartPreviewAtEvent,
- } = useEditor()
+ } = useEditor();
const handlePreviewClick = async () => {
- setStartPreviewAtGroup(undefined)
- setStartPreviewAtEvent(undefined)
- save().then()
- setRightPanel(RightPanel.PREVIEW)
- }
+ setStartPreviewAtGroup(undefined);
+ setStartPreviewAtEvent(undefined);
+ save().then();
+ setRightPanel(RightPanel.PREVIEW);
+ };
return (
{
h={`${headerHeight}px`}
zIndex={100}
pos="relative"
- bgColor={useColorModeValue('white', 'gray.900')}
+ bgColor={useColorModeValue("white", "gray.900")}
flexShrink={0}
>
- {t('editor.header.flowButton.label')}
+ {t("editor.header.flowButton.label")}
- {t('editor.header.themeButton.label')}
+ {t("editor.header.themeButton.label")}
- {t('editor.header.settingsButton.label')}
+ {t("editor.header.settingsButton.label")}
{
@@ -134,7 +134,7 @@ export const GuestTypebotHeader = () => {
Duplicate
)}
- {router.pathname.includes('/edit') && isNotDefined(rightPanel) && (
+ {router.pathname.includes("/edit") && isNotDefined(rightPanel) && (
{
)}
- )
-}
+ );
+};
diff --git a/apps/builder/src/features/editor/constants.ts b/apps/builder/src/features/editor/constants.ts
index 90b770c16c..ded639d022 100644
--- a/apps/builder/src/features/editor/constants.ts
+++ b/apps/builder/src/features/editor/constants.ts
@@ -1 +1 @@
-export const headerHeight = 56
+export const headerHeight = 56;
diff --git a/apps/builder/src/features/editor/editor.spec.ts b/apps/builder/src/features/editor/editor.spec.ts
index 23cad0ea2f..d98abde45e 100644
--- a/apps/builder/src/features/editor/editor.spec.ts
+++ b/apps/builder/src/features/editor/editor.spec.ts
@@ -1,149 +1,149 @@
-import test, { expect } from '@playwright/test'
-import { createId } from '@paralleldrive/cuid2'
+import { getTestAsset } from "@/test/utils/playwright";
+import { createId } from "@paralleldrive/cuid2";
+import test, { expect } from "@playwright/test";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
import {
createTypebots,
importTypebotInDatabase,
-} from '@typebot.io/playwright/databaseActions'
-import { parseDefaultGroupWithBlock } from '@typebot.io/playwright/databaseHelpers'
-import { getTestAsset } from '@/test/utils/playwright'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
+} from "@typebot.io/playwright/databaseActions";
+import { parseDefaultGroupWithBlock } from "@typebot.io/playwright/databaseHelpers";
-test.describe.configure({ mode: 'parallel' })
+test.describe.configure({ mode: "parallel" });
-test('Edges connection should work', async ({ page }) => {
- const typebotId = createId()
+test("Edges connection should work", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
},
- ])
- await page.goto(`/typebots/${typebotId}/edit`)
- await expect(page.locator("text='Start'")).toBeVisible()
- await page.dragAndDrop('text=Button', '#editor-container', {
+ ]);
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await expect(page.locator("text='Start'")).toBeVisible();
+ await page.dragAndDrop("text=Button", "#editor-container", {
targetPosition: { x: 1000, y: 400 },
- })
+ });
await page.dragAndDrop(
- 'text=Text >> nth=0',
+ "text=Text >> nth=0",
'[data-testid="group"] >> nth=0',
{
targetPosition: { x: 100, y: 50 },
- }
- )
+ },
+ );
await page.dragAndDrop(
'[data-testid="endpoint"]',
'[data-testid="group"] >> nth=0',
- { targetPosition: { x: 100, y: 10 } }
- )
- await expect(page.locator('[data-testid="edge"]')).toBeVisible()
+ { targetPosition: { x: 100, y: 10 } },
+ );
+ await expect(page.locator('[data-testid="edge"]')).toBeVisible();
await page.dragAndDrop(
'[data-testid="endpoint"]',
- '[data-testid="group"] >> nth=0'
- )
- await expect(page.locator('[data-testid="edge"]')).toBeVisible()
- await page.dragAndDrop('text=Date', '#editor-container', {
+ '[data-testid="group"] >> nth=0',
+ );
+ await expect(page.locator('[data-testid="edge"]')).toBeVisible();
+ await page.dragAndDrop("text=Date", "#editor-container", {
targetPosition: { x: 1000, y: 800 },
- })
+ });
await page.dragAndDrop(
'[data-testid="endpoint"] >> nth=2',
'[data-testid="group"] >> nth=1',
{
targetPosition: { x: 100, y: 10 },
- }
- )
- await expect(page.locator('[data-testid="edge"] >> nth=0')).toBeVisible()
- await expect(page.locator('[data-testid="edge"] >> nth=1')).toBeVisible()
+ },
+ );
+ await expect(page.locator('[data-testid="edge"] >> nth=0')).toBeVisible();
+ await expect(page.locator('[data-testid="edge"] >> nth=1')).toBeVisible();
await page.click('[data-testid="clickable-edge"] >> nth=0', {
force: true,
- button: 'right',
- })
- await page.click('text=Delete')
- const total = await page.locator('[data-testid="edge"]').count()
- expect(total).toBe(1)
-})
+ button: "right",
+ });
+ await page.click("text=Delete");
+ const total = await page.locator('[data-testid="edge"]').count();
+ expect(total).toBe(1);
+});
-test('Rename and icon change should work', async ({ page }) => {
- const typebotId = createId()
+test("Rename and icon change should work", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
- name: 'My awesome typebot',
+ name: "My awesome typebot",
...parseDefaultGroupWithBlock({
type: InputBlockType.TEXT,
}),
},
- ])
+ ]);
- await page.goto(`/typebots/${typebotId}/edit`)
- await page.click('[data-testid="editable-icon"]')
- await page.getByRole('button', { name: 'Emoji' }).click()
- await expect(page.locator('text="My awesome typebot"')).toBeVisible()
- await page.fill('input[placeholder="Search..."]', 'love')
- await page.click('text="😍"')
- await page.click('text="My awesome typebot"')
- await page.fill('input[value="My awesome typebot"]', 'My superb typebot')
- await page.press('input[value="My superb typebot"]', 'Enter')
- await page.click('[aria-label="Navigate back"]')
- await expect(page.locator('text="😍"')).toBeVisible()
- await expect(page.locator('text="My superb typebot"')).toBeVisible()
-})
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await page.click('[data-testid="editable-icon"]');
+ await page.getByRole("button", { name: "Emoji" }).click();
+ await expect(page.locator('text="My awesome typebot"')).toBeVisible();
+ await page.fill('input[placeholder="Search..."]', "love");
+ await page.click('text="😍"');
+ await page.click('text="My awesome typebot"');
+ await page.fill('input[value="My awesome typebot"]', "My superb typebot");
+ await page.press('input[value="My superb typebot"]', "Enter");
+ await page.click('[aria-label="Navigate back"]');
+ await expect(page.locator('text="😍"')).toBeVisible();
+ await expect(page.locator('text="My superb typebot"')).toBeVisible();
+});
-test('Preview from group should work', async ({ page }) => {
- const typebotId = createId()
+test("Preview from group should work", async ({ page }) => {
+ const typebotId = createId();
await importTypebotInDatabase(
- getTestAsset('typebots/editor/previewFromGroup.json'),
+ getTestAsset("typebots/editor/previewFromGroup.json"),
{
id: typebotId,
- }
- )
+ },
+ );
- await page.goto(`/typebots/${typebotId}/edit`)
+ await page.goto(`/typebots/${typebotId}/edit`);
await page
- .getByTestId('group')
+ .getByTestId("group")
.nth(0)
- .click({ position: { x: 100, y: 10 } })
- await page.click('[aria-label="Preview bot from this group"]')
+ .click({ position: { x: 100, y: 10 } });
+ await page.click('[aria-label="Preview bot from this group"]');
await expect(
- page.locator('typebot-standard').locator('text="Hello this is group 1"')
- ).toBeVisible()
+ page.locator("typebot-standard").locator('text="Hello this is group 1"'),
+ ).toBeVisible();
await page
- .getByTestId('group')
+ .getByTestId("group")
.nth(1)
- .click({ position: { x: 100, y: 10 } })
- await page.click('[aria-label="Preview bot from this group"]')
+ .click({ position: { x: 100, y: 10 } });
+ await page.click('[aria-label="Preview bot from this group"]');
await expect(
- page.locator('typebot-standard').locator('text="Hello this is group 2"')
- ).toBeVisible()
- await page.click('[aria-label="Close"]')
- await page.click('text="Test"')
+ page.locator("typebot-standard").locator('text="Hello this is group 2"'),
+ ).toBeVisible();
+ await page.click('[aria-label="Close"]');
+ await page.click('text="Test"');
await expect(
- page.locator('typebot-standard').locator('text="Hello this is group 1"')
- ).toBeVisible()
-})
+ page.locator("typebot-standard").locator('text="Hello this is group 1"'),
+ ).toBeVisible();
+});
-test('Published typebot menu should work', async ({ page }) => {
- const typebotId = createId()
+test("Published typebot menu should work", async ({ page }) => {
+ const typebotId = createId();
await createTypebots([
{
id: typebotId,
- name: 'My awesome typebot',
+ name: "My awesome typebot",
...parseDefaultGroupWithBlock({
type: InputBlockType.TEXT,
}),
- version: '6',
+ version: "6",
},
- ])
- await page.goto(`/typebots/${typebotId}/edit`)
- await expect(page.locator("text='Start'")).toBeVisible()
- await expect(page.locator('button >> text="Published"')).toBeVisible()
- await page.click('[aria-label="Show published typebot menu"]')
- await page.click('text="Close typebot to new responses"')
- await expect(page.locator('button >> text="Closed"')).toBeDisabled()
- await page.click('[aria-label="Show published typebot menu"]')
- await page.click('text="Reopen typebot to new responses"')
- await expect(page.locator('button >> text="Published"')).toBeDisabled()
- await page.click('[aria-label="Show published typebot menu"]')
- await page.click('button >> text="Unpublish typebot"')
- await page.click('button >> text="Publish"')
- await expect(page.locator('button >> text="Published"')).toBeVisible()
-})
+ ]);
+ await page.goto(`/typebots/${typebotId}/edit`);
+ await expect(page.locator("text='Start'")).toBeVisible();
+ await expect(page.locator('button >> text="Published"')).toBeVisible();
+ await page.click('[aria-label="Show published typebot menu"]');
+ await page.click('text="Close typebot to new responses"');
+ await expect(page.locator('button >> text="Closed"')).toBeDisabled();
+ await page.click('[aria-label="Show published typebot menu"]');
+ await page.click('text="Reopen typebot to new responses"');
+ await expect(page.locator('button >> text="Published"')).toBeDisabled();
+ await page.click('[aria-label="Show published typebot menu"]');
+ await page.click('button >> text="Unpublish typebot"');
+ await page.click('button >> text="Publish"');
+ await expect(page.locator('button >> text="Published"')).toBeVisible();
+});
diff --git a/apps/builder/src/features/editor/hooks/useUndo.ts b/apps/builder/src/features/editor/hooks/useUndo.ts
index 7380bb03eb..7a4b8d6211 100644
--- a/apps/builder/src/features/editor/hooks/useUndo.ts
+++ b/apps/builder/src/features/editor/hooks/useUndo.ts
@@ -1,112 +1,112 @@
-import { dequal } from 'dequal'
-import { useCallback, useRef, useState } from 'react'
-import { isDefined } from '@typebot.io/lib'
+import { isDefined } from "@typebot.io/lib/utils";
+import { dequal } from "dequal";
+import { useCallback, useRef, useState } from "react";
export interface Actions {
- set: (newPresent: T | ((current: T) => T) | undefined) => void
- setUpdateDate: (updateDate: Date) => void
- undo: () => void
- redo: () => void
- flush: () => void
- canUndo: boolean
- canRedo: boolean
+ set: (newPresent: T | ((current: T) => T) | undefined) => void;
+ setUpdateDate: (updateDate: Date) => void;
+ undo: () => void;
+ redo: () => void;
+ flush: () => void;
+ canUndo: boolean;
+ canRedo: boolean;
}
export interface History {
- past: T[]
- present: T | undefined
- future: T[]
+ past: T[];
+ present: T | undefined;
+ future: T[];
}
const initialState = {
past: [],
present: undefined,
future: [],
-}
+};
type Params = {
- isReadOnly?: boolean
- onUndo?: (state: T) => void
- onRedo?: (state: T) => void
-}
+ isReadOnly?: boolean;
+ onUndo?: (state: T) => void;
+ onRedo?: (state: T) => void;
+};
export const useUndo = (
initialPresent?: T,
- params?: Params
+ params?: Params,
): [T | undefined, Actions] => {
- const [history, setHistory] = useState>(initialState)
- const presentRef = useRef(initialPresent ?? null)
+ const [history, setHistory] = useState>(initialState);
+ const presentRef = useRef(initialPresent ?? null);
- const canUndo = history.past.length !== 0
- const canRedo = history.future.length !== 0
+ const canUndo = history.past.length !== 0;
+ const canRedo = history.future.length !== 0;
const undo = useCallback(() => {
- if (params?.isReadOnly) return
- const { past, present, future } = history
- if (past.length === 0 || !present) return
+ if (params?.isReadOnly) return;
+ const { past, present, future } = history;
+ if (past.length === 0 || !present) return;
- const previous = past[past.length - 1]
- const newPast = past.slice(0, past.length - 1)
+ const previous = past[past.length - 1];
+ const newPast = past.slice(0, past.length - 1);
- const newPresent = { ...previous, updatedAt: present.updatedAt }
+ const newPresent = { ...previous, updatedAt: present.updatedAt };
setHistory({
past: newPast,
present: newPresent,
future: [present, ...future],
- })
- presentRef.current = newPresent
- if (params?.onUndo) params.onUndo(newPresent)
- }, [history, params])
+ });
+ presentRef.current = newPresent;
+ if (params?.onUndo) params.onUndo(newPresent);
+ }, [history, params]);
const redo = useCallback(() => {
- if (params?.isReadOnly) return
- const { past, present, future } = history
- if (future.length === 0) return
- const next = future[0]
- const newFuture = future.slice(1)
+ if (params?.isReadOnly) return;
+ const { past, present, future } = history;
+ if (future.length === 0) return;
+ const next = future[0];
+ const newFuture = future.slice(1);
setHistory({
past: present ? [...past, present] : past,
present: next,
future: newFuture,
- })
- presentRef.current = next
- if (params?.onRedo) params.onRedo(next)
- }, [history, params])
+ });
+ presentRef.current = next;
+ if (params?.onRedo) params.onRedo(next);
+ }, [history, params]);
const set = useCallback(
(newPresentArg: T | ((current: T) => T) | undefined) => {
- const { past, present } = history
- if (isDefined(present) && params?.isReadOnly) return
+ const { past, present } = history;
+ if (isDefined(present) && params?.isReadOnly) return;
const newPresent =
- typeof newPresentArg === 'function'
+ typeof newPresentArg === "function"
? newPresentArg(presentRef.current as T)
- : newPresentArg
+ : newPresentArg;
if (
newPresent &&
present &&
dequal(
JSON.parse(JSON.stringify(newPresent)),
- JSON.parse(JSON.stringify(present))
+ JSON.parse(JSON.stringify(present)),
)
) {
- return
+ return;
}
if (newPresent === undefined) {
- presentRef.current = null
- setHistory(initialState)
- return
+ presentRef.current = null;
+ setHistory(initialState);
+ return;
}
setHistory({
past: [...past, present].filter(isDefined),
present: newPresent,
future: [],
- })
- presentRef.current = newPresent
+ });
+ presentRef.current = newPresent;
},
- [history, params?.isReadOnly]
- )
+ [history, params?.isReadOnly],
+ );
const setUpdateDate = useCallback(
(updatedAt: Date) => {
@@ -116,23 +116,23 @@ export const useUndo = (
...current,
updatedAt,
}
- : current
- )
+ : current,
+ );
},
- [set]
- )
+ [set],
+ );
const flush = useCallback(() => {
- if (params?.isReadOnly) return
+ if (params?.isReadOnly) return;
setHistory({
present: presentRef.current ?? undefined,
past: [],
future: [],
- })
- }, [params?.isReadOnly])
+ });
+ }, [params?.isReadOnly]);
return [
history.present,
{ set, undo, redo, flush, setUpdateDate, canUndo, canRedo },
- ]
-}
+ ];
+};
diff --git a/apps/builder/src/features/editor/providers/EditorProvider.tsx b/apps/builder/src/features/editor/providers/EditorProvider.tsx
index db624a0fec..8f52d6f662 100644
--- a/apps/builder/src/features/editor/providers/EditorProvider.tsx
+++ b/apps/builder/src/features/editor/providers/EditorProvider.tsx
@@ -1,32 +1,32 @@
import {
+ type Dispatch,
+ type ReactNode,
+ type SetStateAction,
createContext,
- Dispatch,
- ReactNode,
- SetStateAction,
useContext,
useState,
-} from 'react'
+} from "react";
export enum RightPanel {
- PREVIEW,
- VARIABLES,
+ PREVIEW = 0,
+ VARIABLES = 1,
}
const editorContext = createContext<{
- rightPanel?: RightPanel
- setRightPanel: Dispatch>
- startPreviewAtGroup: string | undefined
- setStartPreviewAtGroup: Dispatch>
- startPreviewAtEvent: string | undefined
- setStartPreviewAtEvent: Dispatch>
+ rightPanel?: RightPanel;
+ setRightPanel: Dispatch>;
+ startPreviewAtGroup: string | undefined;
+ setStartPreviewAtGroup: Dispatch>;
+ startPreviewAtEvent: string | undefined;
+ setStartPreviewAtEvent: Dispatch>;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
-}>({})
+}>({});
export const EditorProvider = ({ children }: { children: ReactNode }) => {
- const [rightPanel, setRightPanel] = useState()
- const [startPreviewAtGroup, setStartPreviewAtGroup] = useState()
- const [startPreviewAtEvent, setStartPreviewAtEvent] = useState()
+ const [rightPanel, setRightPanel] = useState();
+ const [startPreviewAtGroup, setStartPreviewAtGroup] = useState();
+ const [startPreviewAtEvent, setStartPreviewAtEvent] = useState();
return (
{
>
{children}
- )
-}
+ );
+};
-export const useEditor = () => useContext(editorContext)
+export const useEditor = () => useContext(editorContext);
diff --git a/apps/builder/src/features/editor/providers/TypebotProvider.tsx b/apps/builder/src/features/editor/providers/TypebotProvider.tsx
index dd99bc1ab4..1946688d55 100644
--- a/apps/builder/src/features/editor/providers/TypebotProvider.tsx
+++ b/apps/builder/src/features/editor/providers/TypebotProvider.tsx
@@ -1,80 +1,85 @@
-import {
+import { useGroupsStore } from "@/features/graph/hooks/useGroupsStore";
+import { areTypebotsEqual } from "@/features/publish/helpers/areTypebotsEqual";
+import { convertPublicTypebotToTypebot } from "@/features/publish/helpers/convertPublicTypebotToTypebot";
+import { isPublished as isPublishedHelper } from "@/features/publish/helpers/isPublished";
+import { preventUserFromRefreshing } from "@/helpers/preventUserFromRefreshing";
+import { useAutoSave } from "@/hooks/useAutoSave";
+import { useToast } from "@/hooks/useToast";
+import { trpc } from "@/lib/trpc";
+import { isDefined, omit } from "@typebot.io/lib/utils";
+import type {
PublicTypebot,
PublicTypebotV6,
- TypebotV6,
+} from "@typebot.io/typebot/schemas/publicTypebot";
+import {
+ type TypebotV6,
typebotV6Schema,
-} from '@typebot.io/schemas'
-import { Router } from 'next/router'
+} from "@typebot.io/typebot/schemas/typebot";
+import { dequal } from "dequal";
+import { Router } from "next/router";
import {
+ type ReactNode,
createContext,
- ReactNode,
useCallback,
useContext,
useEffect,
useMemo,
useState,
-} from 'react'
-import { isDefined, omit } from '@typebot.io/lib'
-import { edgesAction, EdgesActions } from './typebotActions/edges'
-import { itemsAction, ItemsActions } from './typebotActions/items'
-import { GroupsActions, groupsActions } from './typebotActions/groups'
-import { blocksAction, BlocksActions } from './typebotActions/blocks'
-import { variablesAction, VariablesActions } from './typebotActions/variables'
-import { dequal } from 'dequal'
-import { useToast } from '@/hooks/useToast'
-import { useUndo } from '../hooks/useUndo'
-import { useAutoSave } from '@/hooks/useAutoSave'
-import { preventUserFromRefreshing } from '@/helpers/preventUserFromRefreshing'
-import { areTypebotsEqual } from '@/features/publish/helpers/areTypebotsEqual'
-import { isPublished as isPublishedHelper } from '@/features/publish/helpers/isPublished'
-import { convertPublicTypebotToTypebot } from '@/features/publish/helpers/convertPublicTypebotToTypebot'
-import { trpc } from '@/lib/trpc'
-import { EventsActions, eventsActions } from './typebotActions/events'
-import { useGroupsStore } from '@/features/graph/hooks/useGroupsStore'
+} from "react";
+import { useUndo } from "../hooks/useUndo";
+import { type BlocksActions, blocksAction } from "./typebotActions/blocks";
+import { type EdgesActions, edgesAction } from "./typebotActions/edges";
+import { type EventsActions, eventsActions } from "./typebotActions/events";
+import { type GroupsActions, groupsActions } from "./typebotActions/groups";
+import { type ItemsActions, itemsAction } from "./typebotActions/items";
+import {
+ type VariablesActions,
+ variablesAction,
+} from "./typebotActions/variables";
-const autoSaveTimeout = 15000
+const autoSaveTimeout = 15000;
type UpdateTypebotPayload = Partial<
Pick<
TypebotV6,
- | 'theme'
- | 'selectedThemeTemplateId'
- | 'settings'
- | 'publicId'
- | 'name'
- | 'icon'
- | 'customDomain'
- | 'resultsTablePreferences'
- | 'isClosed'
- | 'whatsAppCredentialsId'
- | 'riskLevel'
+ | "theme"
+ | "selectedThemeTemplateId"
+ | "settings"
+ | "publicId"
+ | "name"
+ | "icon"
+ | "customDomain"
+ | "resultsTablePreferences"
+ | "isClosed"
+ | "whatsAppCredentialsId"
+ | "riskLevel"
>
->
+>;
export type SetTypebot = (
- newPresent: TypebotV6 | ((current: TypebotV6) => TypebotV6)
-) => void
+ newPresent: TypebotV6 | ((current: TypebotV6) => TypebotV6),
+) => void;
const typebotContext = createContext<
{
- typebot?: TypebotV6
- publishedTypebot?: PublicTypebotV6
- publishedTypebotVersion?: PublicTypebot['version']
- currentUserMode: 'guest' | 'read' | 'write'
- is404: boolean
- isPublished: boolean
- isSavingLoading: boolean
- save: (updates?: Partial, overwrite?: boolean) => Promise
- undo: () => void
- redo: () => void
- canRedo: boolean
- canUndo: boolean
+ typebot?: TypebotV6;
+ publishedTypebot?: PublicTypebotV6;
+ publishedTypebotVersion?: PublicTypebot["version"];
+ currentUserMode: "guest" | "read" | "write";
+ is404: boolean;
+ isPublished: boolean;
+ isSavingLoading: boolean;
+ save: (updates?: Partial, overwrite?: boolean) => Promise;
+ undo: () => void;
+ redo: () => void;
+ canRedo: boolean;
+ canUndo: boolean;
updateTypebot: (props: {
- updates: UpdateTypebotPayload
- save?: boolean
- overwrite?: boolean
- }) => Promise
- restorePublishedTypebot: () => void
+ updates: UpdateTypebotPayload;
+ save?: boolean;
+ overwrite?: boolean;
+ }) => Promise;
+ restorePublishedTypebot: () => void;
} & GroupsActions &
BlocksActions &
ItemsActions &
@@ -83,20 +88,20 @@ const typebotContext = createContext<
EventsActions
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
->({})
+>({});
export const TypebotProvider = ({
children,
typebotId,
}: {
- children: ReactNode
- typebotId?: string
+ children: ReactNode;
+ typebotId?: string;
}) => {
- const { showToast } = useToast()
- const [is404, setIs404] = useState(false)
+ const { showToast } = useToast();
+ const [is404, setIs404] = useState(false);
const setGroupsCoordinates = useGroupsStore(
- (state) => state.setGroupsCoordinates
- )
+ (state) => state.setGroupsCoordinates,
+ );
const {
data: typebotData,
@@ -109,24 +114,24 @@ export const TypebotProvider = ({
retry: 0,
onError: (error) => {
if (error.data?.httpStatus === 404) {
- setIs404(true)
- return
+ setIs404(true);
+ return;
}
- setIs404(false)
+ setIs404(false);
showToast({
- title: 'Could not fetch typebot',
+ title: "Could not fetch typebot",
description: error.message,
details: {
content: JSON.stringify(error.data?.zodError?.fieldErrors, null, 2),
- lang: 'json',
+ lang: "json",
},
- })
+ });
},
onSuccess: () => {
- setIs404(false)
+ setIs404(false);
},
- }
- )
+ },
+ );
const { data: publishedTypebotData } =
trpc.typebot.getPublishedTypebot.useQuery(
@@ -134,44 +139,44 @@ export const TypebotProvider = ({
{
enabled:
isDefined(typebotId) &&
- (typebotData?.currentUserMode === 'read' ||
- typebotData?.currentUserMode === 'write'),
+ (typebotData?.currentUserMode === "read" ||
+ typebotData?.currentUserMode === "write"),
onError: (error) => {
showToast({
- title: 'Could not fetch published typebot',
+ title: "Could not fetch published typebot",
description: error.message,
details: {
content: JSON.stringify(
error.data?.zodError?.fieldErrors,
null,
- 2
+ 2,
),
- lang: 'json',
+ lang: "json",
},
- })
+ });
},
- }
- )
+ },
+ );
const { mutateAsync: updateTypebot, isLoading: isSaving } =
trpc.typebot.updateTypebot.useMutation({
onError: (error) =>
showToast({
- title: 'Error while updating typebot',
+ title: "Error while updating typebot",
description: error.message,
}),
onSuccess: () => {
- if (!typebotId) return
- refetchTypebot()
+ if (!typebotId) return;
+ refetchTypebot();
},
- })
+ });
- const typebot = typebotData?.typebot as TypebotV6
+ const typebot = typebotData?.typebot as TypebotV6;
const publishedTypebot = (publishedTypebotData?.publishedTypebot ??
- undefined) as PublicTypebotV6 | undefined
+ undefined) as PublicTypebotV6 | undefined;
const isReadOnly =
typebotData &&
- ['read', 'guest'].includes(typebotData?.currentUserMode ?? 'guest')
+ ["read", "guest"].includes(typebotData?.currentUserMode ?? "guest");
const [
localTypebot,
@@ -187,27 +192,27 @@ export const TypebotProvider = ({
] = useUndo(undefined, {
isReadOnly,
onUndo: (t) => {
- setGroupsCoordinates(t.groups)
+ setGroupsCoordinates(t.groups);
},
onRedo: (t) => {
- setGroupsCoordinates(t.groups)
+ setGroupsCoordinates(t.groups);
},
- })
+ });
useEffect(() => {
if (!typebot && isDefined(localTypebot)) {
- setLocalTypebot(undefined)
- setGroupsCoordinates(undefined)
+ setLocalTypebot(undefined);
+ setGroupsCoordinates(undefined);
}
- if (isFetchingTypebot || !typebot) return
+ if (isFetchingTypebot || !typebot) return;
if (
typebot.id !== localTypebot?.id ||
new Date(typebot.updatedAt).getTime() >
new Date(localTypebot.updatedAt).getTime()
) {
- setLocalTypebot({ ...typebot })
- setGroupsCoordinates(typebot.groups)
- flush()
+ setLocalTypebot({ ...typebot });
+ setGroupsCoordinates(typebot.groups);
+ flush();
}
}, [
flush,
@@ -217,37 +222,37 @@ export const TypebotProvider = ({
setLocalTypebot,
showToast,
typebot,
- ])
+ ]);
const saveTypebot = useCallback(
async (updates?: Partial, overwrite?: boolean) => {
- if (!localTypebot || !typebot || isReadOnly) return
+ if (!localTypebot || !typebot || isReadOnly) return;
const typebotToSave = {
...localTypebot,
...updates,
- }
+ };
if (
dequal(
- JSON.parse(JSON.stringify(omit(typebot, 'updatedAt'))),
- JSON.parse(JSON.stringify(omit(typebotToSave, 'updatedAt')))
+ JSON.parse(JSON.stringify(omit(typebot, "updatedAt"))),
+ JSON.parse(JSON.stringify(omit(typebotToSave, "updatedAt"))),
)
)
- return
- const newParsedTypebot = typebotV6Schema.parse({ ...typebotToSave })
- setLocalTypebot(newParsedTypebot)
+ return;
+ const newParsedTypebot = typebotV6Schema.parse({ ...typebotToSave });
+ setLocalTypebot(newParsedTypebot);
try {
const { typebot } = await updateTypebot({
typebotId: newParsedTypebot.id,
typebot: newParsedTypebot,
- })
- setUpdateDate(typebot.updatedAt)
+ });
+ setUpdateDate(typebot.updatedAt);
if (overwrite) {
- setLocalTypebot(typebot)
+ setLocalTypebot(typebot);
}
} catch {
setLocalTypebot({
...localTypebot,
- })
+ });
}
},
[
@@ -257,8 +262,8 @@ export const TypebotProvider = ({
setUpdateDate,
typebot,
updateTypebot,
- ]
- )
+ ],
+ );
useAutoSave(
{
@@ -266,18 +271,18 @@ export const TypebotProvider = ({
item: localTypebot,
debounceTimeout: autoSaveTimeout,
},
- [saveTypebot, localTypebot]
- )
+ [saveTypebot, localTypebot],
+ );
useEffect(() => {
const handleSaveTypebot = () => {
- saveTypebot()
- }
- Router.events.on('routeChangeStart', handleSaveTypebot)
+ saveTypebot();
+ };
+ Router.events.on("routeChangeStart", handleSaveTypebot);
return () => {
- Router.events.off('routeChangeStart', handleSaveTypebot)
- }
- }, [saveTypebot])
+ Router.events.off("routeChangeStart", handleSaveTypebot);
+ };
+ }, [saveTypebot]);
const isPublished = useMemo(
() =>
@@ -285,42 +290,42 @@ export const TypebotProvider = ({
isDefined(localTypebot.publicId) &&
isDefined(publishedTypebot) &&
isPublishedHelper(localTypebot, publishedTypebot),
- [localTypebot, publishedTypebot]
- )
+ [localTypebot, publishedTypebot],
+ );
useEffect(() => {
- if (!localTypebot || !typebot || isReadOnly) return
+ if (!localTypebot || !typebot || isReadOnly) return;
if (!areTypebotsEqual(localTypebot, typebot)) {
- window.addEventListener('beforeunload', preventUserFromRefreshing)
+ window.addEventListener("beforeunload", preventUserFromRefreshing);
}
return () => {
- window.removeEventListener('beforeunload', preventUserFromRefreshing)
- }
- }, [localTypebot, typebot, isReadOnly])
+ window.removeEventListener("beforeunload", preventUserFromRefreshing);
+ };
+ }, [localTypebot, typebot, isReadOnly]);
const updateLocalTypebot = async ({
updates,
save,
overwrite,
}: {
- updates: UpdateTypebotPayload
- save?: boolean
- overwrite?: boolean
+ updates: UpdateTypebotPayload;
+ save?: boolean;
+ overwrite?: boolean;
}) => {
- if (!localTypebot || isReadOnly) return
- const newTypebot = { ...localTypebot, ...updates }
- setLocalTypebot(newTypebot)
- if (save) await saveTypebot(newTypebot, overwrite)
- return newTypebot
- }
+ if (!localTypebot || isReadOnly) return;
+ const newTypebot = { ...localTypebot, ...updates };
+ setLocalTypebot(newTypebot);
+ if (save) await saveTypebot(newTypebot, overwrite);
+ return newTypebot;
+ };
const restorePublishedTypebot = () => {
- if (!publishedTypebot || !localTypebot) return
+ if (!publishedTypebot || !localTypebot) return;
setLocalTypebot(
- convertPublicTypebotToTypebot(publishedTypebot, localTypebot)
- )
- }
+ convertPublicTypebotToTypebot(publishedTypebot, localTypebot),
+ );
+ };
return (
{children}
- )
-}
+ );
+};
-export const useTypebot = () => useContext(typebotContext)
+export const useTypebot = () => useContext(typebotContext);
diff --git a/apps/builder/src/features/editor/providers/typebotActions/blocks.ts b/apps/builder/src/features/editor/providers/typebotActions/blocks.ts
index 3726933f7f..6080a5c595 100644
--- a/apps/builder/src/features/editor/providers/typebotActions/blocks.ts
+++ b/apps/builder/src/features/editor/providers/typebotActions/blocks.ts
@@ -1,99 +1,101 @@
-import {
+import { parseNewBlock } from "@/features/typebot/helpers/parseNewBlock";
+import { createId } from "@paralleldrive/cuid2";
+import { blockHasItems } from "@typebot.io/blocks-core/helpers";
+import type {
Block,
- Typebot,
BlockIndices,
- HttpRequest,
BlockV6,
- TypebotV6,
-} from '@typebot.io/schemas'
-import { SetTypebot } from '../TypebotProvider'
-import { produce, Draft } from 'immer'
-import { deleteConnectedEdgesDraft, deleteEdgeDraft } from './edges'
-import { createId } from '@paralleldrive/cuid2'
-import { byId } from '@typebot.io/lib'
-import { blockHasItems } from '@typebot.io/schemas/helpers'
-import { duplicateItemDraft } from './items'
-import { parseNewBlock } from '@/features/typebot/helpers/parseNewBlock'
+} from "@typebot.io/blocks-core/schemas/schema";
+import type { HttpRequest } from "@typebot.io/blocks-integrations/webhook/schema";
+import { byId } from "@typebot.io/lib/utils";
+import type { Typebot, TypebotV6 } from "@typebot.io/typebot/schemas/typebot";
+import { type Draft, produce } from "immer";
+import type { SetTypebot } from "../TypebotProvider";
+import { deleteConnectedEdgesDraft, deleteEdgeDraft } from "./edges";
+import { duplicateItemDraft } from "./items";
export type BlocksActions = {
createBlock: (
- block: BlockV6 | BlockV6['type'],
- indices: BlockIndices
- ) => string | undefined
+ block: BlockV6 | BlockV6["type"],
+ indices: BlockIndices,
+ ) => string | undefined;
updateBlock: (
indices: BlockIndices,
- updates: Partial>
- ) => void
- duplicateBlock: (indices: BlockIndices) => void
- detachBlockFromGroup: (indices: BlockIndices) => void
- deleteBlock: (indices: BlockIndices) => void
-}
+ updates: Partial>,
+ ) => void;
+ duplicateBlock: (indices: BlockIndices) => void;
+ detachBlockFromGroup: (indices: BlockIndices) => void;
+ deleteBlock: (indices: BlockIndices) => void;
+};
export type WebhookCallBacks = {
- onWebhookBlockCreated: (data: Partial) => void
+ onWebhookBlockCreated: (data: Partial) => void;
onWebhookBlockDuplicated: (
existingWebhookId: string,
- newWebhookId: string
- ) => void
-}
+ newWebhookId: string,
+ ) => void;
+};
export const blocksAction = (setTypebot: SetTypebot): BlocksActions => ({
- createBlock: (block: BlockV6 | BlockV6['type'], indices: BlockIndices) => {
- let blockId
+ createBlock: (block: BlockV6 | BlockV6["type"], indices: BlockIndices) => {
+ let blockId;
setTypebot((typebot) =>
produce(typebot, (typebot) => {
- blockId = createBlockDraft(typebot, block, indices)
- })
- )
- return blockId
+ blockId = createBlockDraft(typebot, block, indices);
+ }),
+ );
+ return blockId;
},
updateBlock: (
{ groupIndex, blockIndex }: BlockIndices,
- updates: Partial>
+ updates: Partial>,
) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
- if (!typebot.groups[groupIndex]?.blocks[blockIndex]) return
- const block = typebot.groups[groupIndex].blocks[blockIndex]
- typebot.groups[groupIndex].blocks[blockIndex] = { ...block, ...updates }
- })
+ if (!typebot.groups[groupIndex]?.blocks[blockIndex]) return;
+ const block = typebot.groups[groupIndex].blocks[blockIndex];
+ typebot.groups[groupIndex].blocks[blockIndex] = {
+ ...block,
+ ...updates,
+ };
+ }),
),
duplicateBlock: ({ groupIndex, blockIndex }: BlockIndices) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
- const block = { ...typebot.groups[groupIndex].blocks[blockIndex] }
- const blocks = typebot.groups[groupIndex].blocks
+ const block = { ...typebot.groups[groupIndex].blocks[blockIndex] };
+ const blocks = typebot.groups[groupIndex].blocks;
if (blockIndex === blocks.length - 1 && block.outgoingEdgeId)
- deleteEdgeDraft({ typebot, edgeId: block.outgoingEdgeId })
- const newBlock = duplicateBlockDraft(block)
- typebot.groups[groupIndex].blocks.splice(blockIndex + 1, 0, newBlock)
- })
+ deleteEdgeDraft({ typebot, edgeId: block.outgoingEdgeId });
+ const newBlock = duplicateBlockDraft(block);
+ typebot.groups[groupIndex].blocks.splice(blockIndex + 1, 0, newBlock);
+ }),
),
detachBlockFromGroup: (indices: BlockIndices) =>
setTypebot((typebot) => produce(typebot, removeBlockFromGroup(indices))),
deleteBlock: ({ groupIndex, blockIndex }: BlockIndices) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
- const removingBlock = typebot.groups[groupIndex].blocks[blockIndex]
- deleteConnectedEdgesDraft(typebot, removingBlock.id)
- removeBlockFromGroup({ groupIndex, blockIndex })(typebot)
- removeEmptyGroups(typebot)
- })
+ const removingBlock = typebot.groups[groupIndex].blocks[blockIndex];
+ deleteConnectedEdgesDraft(typebot, removingBlock.id);
+ removeBlockFromGroup({ groupIndex, blockIndex })(typebot);
+ removeEmptyGroups(typebot);
+ }),
),
-})
+});
const removeBlockFromGroup =
({ groupIndex, blockIndex }: BlockIndices) =>
(typebot: Draft) => {
- typebot.groups[groupIndex].blocks.splice(blockIndex, 1)
- }
+ typebot.groups[groupIndex].blocks.splice(blockIndex, 1);
+ };
export const createBlockDraft = (
typebot: Draft,
- block: BlockV6 | BlockV6['type'],
- { groupIndex, blockIndex }: BlockIndices
+ block: BlockV6 | BlockV6["type"],
+ { groupIndex, blockIndex }: BlockIndices,
) => {
- const blocks = typebot.groups[groupIndex].blocks
+ const blocks = typebot.groups[groupIndex].blocks;
if (
blockIndex === blocks.length &&
blockIndex > 0 &&
@@ -103,78 +105,78 @@ export const createBlockDraft = (
typebot,
edgeId: blocks[blockIndex - 1].outgoingEdgeId as string,
groupIndex,
- })
+ });
const blockId =
- typeof block === 'string'
+ typeof block === "string"
? createNewBlock(typebot, block, { groupIndex, blockIndex })
- : moveBlockToGroup(typebot, block, { groupIndex, blockIndex })
- removeEmptyGroups(typebot)
- return blockId
-}
+ : moveBlockToGroup(typebot, block, { groupIndex, blockIndex });
+ removeEmptyGroups(typebot);
+ return blockId;
+};
const createNewBlock = (
typebot: Draft,
- type: BlockV6['type'],
- { groupIndex, blockIndex }: BlockIndices
+ type: BlockV6["type"],
+ { groupIndex, blockIndex }: BlockIndices,
) => {
- const newBlock = parseNewBlock(type)
- typebot.groups[groupIndex].blocks.splice(blockIndex ?? 0, 0, newBlock)
- return newBlock.id
-}
+ const newBlock = parseNewBlock(type);
+ typebot.groups[groupIndex].blocks.splice(blockIndex ?? 0, 0, newBlock);
+ return newBlock.id;
+};
const moveBlockToGroup = (
typebot: Draft,
block: BlockV6,
- { groupIndex, blockIndex }: BlockIndices
+ { groupIndex, blockIndex }: BlockIndices,
) => {
- const newBlock = { ...block }
+ const newBlock = { ...block };
if (block.outgoingEdgeId) {
- if (typebot.groups[groupIndex].blocks.length > blockIndex ?? 0) {
- deleteEdgeDraft({ typebot, edgeId: block.outgoingEdgeId, groupIndex })
- newBlock.outgoingEdgeId = undefined
+ if (typebot.groups[groupIndex].blocks.length > blockIndex) {
+ deleteEdgeDraft({ typebot, edgeId: block.outgoingEdgeId, groupIndex });
+ newBlock.outgoingEdgeId = undefined;
} else {
- const edgeIndex = typebot.edges.findIndex(byId(block.outgoingEdgeId))
- if (edgeIndex === -1) newBlock.outgoingEdgeId = undefined
+ const edgeIndex = typebot.edges.findIndex(byId(block.outgoingEdgeId));
+ if (edgeIndex === -1) newBlock.outgoingEdgeId = undefined;
}
}
- const groupId = typebot.groups[groupIndex].id
+ const groupId = typebot.groups[groupIndex].id;
typebot.edges.forEach((edge) => {
if (edge.to.blockId === block.id) {
- edge.to.groupId = groupId
+ edge.to.groupId = groupId;
}
- })
- typebot.groups[groupIndex].blocks.splice(blockIndex ?? 0, 0, newBlock)
-}
+ });
+ typebot.groups[groupIndex].blocks.splice(blockIndex ?? 0, 0, newBlock);
+};
export const duplicateBlockDraft = (block: BlockV6): BlockV6 => {
- const blockId = createId()
+ const blockId = createId();
if (blockHasItems(block))
return {
...block,
id: blockId,
items: block.items?.map(duplicateItemDraft(blockId)),
outgoingEdgeId: undefined,
- } as BlockV6
+ } as BlockV6;
return {
...block,
id: blockId,
outgoingEdgeId: undefined,
- }
-}
+ };
+};
export const deleteGroupDraft =
(typebot: Draft) => (groupIndex: number) => {
- deleteConnectedEdgesDraft(typebot, typebot.groups[groupIndex].id)
- typebot.groups.splice(groupIndex, 1)
- }
+ deleteConnectedEdgesDraft(typebot, typebot.groups[groupIndex].id);
+ typebot.groups.splice(groupIndex, 1);
+ };
export const removeEmptyGroups = (typebot: Draft) => {
const emptyGroupsIndices = typebot.groups.reduce(
(arr, group, idx) => {
- group.blocks.length === 0 && arr.push(idx)
- return arr
+ group.blocks.length === 0 && arr.push(idx);
+ return arr;
},
- []
- )
- emptyGroupsIndices.forEach(deleteGroupDraft(typebot))
-}
+ [],
+ );
+ emptyGroupsIndices.forEach(deleteGroupDraft(typebot));
+};
diff --git a/apps/builder/src/features/editor/providers/typebotActions/edges.ts b/apps/builder/src/features/editor/providers/typebotActions/edges.ts
index b9829e2cc8..55c2b51886 100644
--- a/apps/builder/src/features/editor/providers/typebotActions/edges.ts
+++ b/apps/builder/src/features/editor/providers/typebotActions/edges.ts
@@ -1,56 +1,55 @@
-import {
- Typebot,
- Edge,
- BlockWithItems,
- BlockIndices,
- ItemIndices,
+import { createId } from "@paralleldrive/cuid2";
+import { blockHasItems } from "@typebot.io/blocks-core/helpers";
+import type { ItemIndices } from "@typebot.io/blocks-core/schemas/items/types";
+import type {
Block,
- TypebotV6,
-} from '@typebot.io/schemas'
-import { SetTypebot } from '../TypebotProvider'
-import { Draft, produce } from 'immer'
-import { byId, isDefined } from '@typebot.io/lib'
-import { blockHasItems } from '@typebot.io/schemas/helpers'
-import { createId } from '@paralleldrive/cuid2'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
+ BlockIndices,
+ BlockWithItems,
+} from "@typebot.io/blocks-core/schemas/schema";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import { byId, isDefined } from "@typebot.io/lib/utils";
+import type { Edge } from "@typebot.io/typebot/schemas/edge";
+import type { Typebot, TypebotV6 } from "@typebot.io/typebot/schemas/typebot";
+import { type Draft, produce } from "immer";
+import type { SetTypebot } from "../TypebotProvider";
export type EdgesActions = {
- createEdge: (edge: Omit) => void
- updateEdge: (edgeIndex: number, updates: Partial>) => void
- deleteEdge: (edgeId: string) => void
-}
+ createEdge: (edge: Omit) => void;
+ updateEdge: (edgeIndex: number, updates: Partial>) => void;
+ deleteEdge: (edgeId: string) => void;
+};
export const edgesAction = (setTypebot: SetTypebot): EdgesActions => ({
- createEdge: (edge: Omit) =>
+ createEdge: (edge: Omit) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
const newEdge = {
...edge,
id: createId(),
- }
- removeExistingEdge(typebot, edge)
- typebot.edges.push(newEdge)
- if ('eventId' in edge.from) {
- const eventIndex = typebot.events.findIndex(byId(edge.from.eventId))
+ };
+ removeExistingEdge(typebot, edge);
+ typebot.edges.push(newEdge);
+ if ("eventId" in edge.from) {
+ const eventIndex = typebot.events.findIndex(byId(edge.from.eventId));
addEdgeIdToEvent(typebot, newEdge.id, {
eventIndex,
- })
+ });
} else {
const groupIndex = typebot.groups.findIndex((g) =>
g.blocks.some(
- (b) => 'blockId' in edge.from && b.id === edge.from.blockId
- )
- )
+ (b) => "blockId" in edge.from && b.id === edge.from.blockId,
+ ),
+ );
const blockIndex = typebot.groups[groupIndex].blocks.findIndex(
- byId(edge.from.blockId)
- )
+ byId(edge.from.blockId),
+ );
const itemIndex = edge.from.itemId
? (
typebot.groups[groupIndex].blocks[blockIndex] as
| BlockWithItems
| undefined
)?.items.findIndex(byId(edge.from.itemId))
- : null
+ : null;
isDefined(itemIndex) && itemIndex !== -1
? addEdgeIdToItem(typebot, newEdge.id, {
@@ -61,13 +60,13 @@ export const edgesAction = (setTypebot: SetTypebot): EdgesActions => ({
: addEdgeIdToBlock(typebot, newEdge.id, {
groupIndex,
blockIndex,
- })
+ });
- const block = typebot.groups[groupIndex].blocks[blockIndex]
+ const block = typebot.groups[groupIndex].blocks[blockIndex];
if (isDefined(itemIndex) && isDefined(block.outgoingEdgeId)) {
const areAllItemsConnected = (block as BlockWithItems).items.every(
- (item) => isDefined(item.outgoingEdgeId)
- )
+ (item) => isDefined(item.outgoingEdgeId),
+ );
if (
areAllItemsConnected &&
(block.type === InputBlockType.CHOICE ||
@@ -77,84 +76,84 @@ export const edgesAction = (setTypebot: SetTypebot): EdgesActions => ({
typebot,
edgeId: block.outgoingEdgeId,
groupIndex,
- })
+ });
}
}
}
- })
+ }),
),
- updateEdge: (edgeIndex: number, updates: Partial>) =>
+ updateEdge: (edgeIndex: number, updates: Partial>) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
- const currentEdge = typebot.edges[edgeIndex]
+ const currentEdge = typebot.edges[edgeIndex];
typebot.edges[edgeIndex] = {
...currentEdge,
...updates,
- }
- })
+ };
+ }),
),
deleteEdge: (edgeId: string) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
- deleteEdgeDraft({ typebot, edgeId })
- })
+ deleteEdgeDraft({ typebot, edgeId });
+ }),
),
-})
+});
const addEdgeIdToEvent = (
typebot: Draft,
edgeId: string,
- { eventIndex }: { eventIndex: number }
-) => (typebot.events[eventIndex].outgoingEdgeId = edgeId)
+ { eventIndex }: { eventIndex: number },
+) => (typebot.events[eventIndex].outgoingEdgeId = edgeId);
const addEdgeIdToBlock = (
typebot: Draft,
edgeId: string,
- { groupIndex, blockIndex }: BlockIndices
+ { groupIndex, blockIndex }: BlockIndices,
) => {
- typebot.groups[groupIndex].blocks[blockIndex].outgoingEdgeId = edgeId
-}
+ typebot.groups[groupIndex].blocks[blockIndex].outgoingEdgeId = edgeId;
+};
const addEdgeIdToItem = (
typebot: Draft,
edgeId: string,
- { groupIndex, blockIndex, itemIndex }: ItemIndices
+ { groupIndex, blockIndex, itemIndex }: ItemIndices,
) =>
((typebot.groups[groupIndex].blocks[blockIndex] as BlockWithItems).items[
itemIndex
- ].outgoingEdgeId = edgeId)
+ ].outgoingEdgeId = edgeId);
export const deleteEdgeDraft = ({
typebot,
edgeId,
groupIndex,
}: {
- typebot: Draft
- edgeId: string
- groupIndex?: number
+ typebot: Draft;
+ edgeId: string;
+ groupIndex?: number;
}) => {
- const edgeIndex = typebot.edges.findIndex(byId(edgeId))
- if (edgeIndex === -1) return
- deleteOutgoingEdgeIdProps({ typebot, edgeId, groupIndex })
- typebot.edges.splice(edgeIndex, 1)
-}
+ const edgeIndex = typebot.edges.findIndex(byId(edgeId));
+ if (edgeIndex === -1) return;
+ deleteOutgoingEdgeIdProps({ typebot, edgeId, groupIndex });
+ typebot.edges.splice(edgeIndex, 1);
+};
const deleteOutgoingEdgeIdProps = ({
typebot,
edgeId,
groupIndex,
}: {
- typebot: Draft
- edgeId: string
- groupIndex?: number
+ typebot: Draft;
+ edgeId: string;
+ groupIndex?: number;
}) => {
- const edge = typebot.edges.find(byId(edgeId))
- if (!edge) return
- if ('eventId' in edge.from) {
- const eventIndex = typebot.events.findIndex(byId(edge.from.eventId))
- if (eventIndex === -1) return
- typebot.events[eventIndex].outgoingEdgeId = undefined
- return
+ const edge = typebot.edges.find(byId(edgeId));
+ if (!edge) return;
+ if ("eventId" in edge.from) {
+ const eventIndex = typebot.events.findIndex(byId(edge.from.eventId));
+ if (eventIndex === -1) return;
+ typebot.events[eventIndex].outgoingEdgeId = undefined;
+ return;
}
const fromGroupIndex =
groupIndex ??
@@ -163,65 +162,67 @@ const deleteOutgoingEdgeIdProps = ({
edge.to.groupId === g.id ||
g.blocks.some(
(b) =>
- 'blockId' in edge.from &&
- (b.id === edge.from.blockId || b.id === edge.to.blockId)
- )
- )
+ "blockId" in edge.from &&
+ (b.id === edge.from.blockId || b.id === edge.to.blockId),
+ ),
+ );
const fromBlockIndex = typebot.groups[fromGroupIndex].blocks.findIndex(
- byId(edge.from.blockId)
- )
+ byId(edge.from.blockId),
+ );
const block = typebot.groups[fromGroupIndex].blocks[fromBlockIndex] as
| Block
- | undefined
- if (!block) return
+ | undefined;
+ if (!block) return;
const fromItemIndex =
edge.from.itemId && blockHasItems(block)
? block.items?.findIndex(byId(edge.from.itemId))
- : -1
+ : -1;
if (fromItemIndex !== -1) {
- ;(
+ (
typebot.groups[fromGroupIndex].blocks[fromBlockIndex] as BlockWithItems
- ).items[fromItemIndex ?? 0].outgoingEdgeId = undefined
+ ).items[fromItemIndex ?? 0].outgoingEdgeId = undefined;
} else if (fromBlockIndex !== -1)
typebot.groups[fromGroupIndex].blocks[fromBlockIndex].outgoingEdgeId =
- undefined
-}
+ undefined;
+};
export const deleteConnectedEdgesDraft = (
typebot: Draft,
- deletedNodeId: string
+ deletedNodeId: string,
) => {
const edgesToDelete = typebot.edges.filter((edge) => {
- if ('eventId' in edge.from)
+ if ("eventId" in edge.from)
return [edge.from.eventId, edge.to.groupId, edge.to.blockId].includes(
- deletedNodeId
- )
+ deletedNodeId,
+ );
return [
edge.from.blockId,
edge.from.itemId,
edge.to.groupId,
edge.to.blockId,
- ].includes(deletedNodeId)
- })
+ ].includes(deletedNodeId);
+ });
- edgesToDelete.forEach((edge) => deleteEdgeDraft({ typebot, edgeId: edge.id }))
-}
+ edgesToDelete.forEach((edge) =>
+ deleteEdgeDraft({ typebot, edgeId: edge.id }),
+ );
+};
const removeExistingEdge = (
typebot: Draft,
- edge: Omit
+ edge: Omit,
) => {
typebot.edges = typebot.edges.filter((e) => {
- if ('eventId' in edge.from) {
- if ('eventId' in e.from) return e.from.eventId !== edge.from.eventId
- return true
+ if ("eventId" in edge.from) {
+ if ("eventId" in e.from) return e.from.eventId !== edge.from.eventId;
+ return true;
}
- if ('eventId' in e.from) return true
+ if ("eventId" in e.from) return true;
return edge.from.itemId
? e.from && e.from.itemId !== edge.from.itemId
- : isDefined(e.from.itemId) || e.from.blockId !== edge.from.blockId
- })
-}
+ : isDefined(e.from.itemId) || e.from.blockId !== edge.from.blockId;
+ });
+};
diff --git a/apps/builder/src/features/editor/providers/typebotActions/events.ts b/apps/builder/src/features/editor/providers/typebotActions/events.ts
index 1b271575e5..a0fce0c671 100644
--- a/apps/builder/src/features/editor/providers/typebotActions/events.ts
+++ b/apps/builder/src/features/editor/providers/typebotActions/events.ts
@@ -1,22 +1,22 @@
-import { produce } from 'immer'
-import { TEvent } from '@typebot.io/schemas'
-import { SetTypebot } from '../TypebotProvider'
+import type { TEvent } from "@typebot.io/typebot/schemas/types";
+import { produce } from "immer";
+import type { SetTypebot } from "../TypebotProvider";
export type EventsActions = {
updateEvent: (
eventIndex: number,
- updates: Partial>
- ) => void
-}
+ updates: Partial>,
+ ) => void;
+};
const eventsActions = (setTypebot: SetTypebot): EventsActions => ({
- updateEvent: (eventIndex: number, updates: Partial>) =>
+ updateEvent: (eventIndex: number, updates: Partial>) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
- const event = typebot.events[eventIndex]
- typebot.events[eventIndex] = { ...event, ...updates }
- })
+ const event = typebot.events[eventIndex];
+ typebot.events[eventIndex] = { ...event, ...updates };
+ }),
),
-})
+});
-export { eventsActions }
+export { eventsActions };
diff --git a/apps/builder/src/features/editor/providers/typebotActions/groups.ts b/apps/builder/src/features/editor/providers/typebotActions/groups.ts
index 40d38d0cba..0251dc3f34 100644
--- a/apps/builder/src/features/editor/providers/typebotActions/groups.ts
+++ b/apps/builder/src/features/editor/providers/typebotActions/groups.ts
@@ -1,49 +1,52 @@
-import { createId } from '@paralleldrive/cuid2'
-import { Draft, produce } from 'immer'
+import type { Coordinates, CoordinatesMap } from "@/features/graph/types";
+import { createId } from "@paralleldrive/cuid2";
import {
+ blockHasItems,
+ blockHasOptions,
+} from "@typebot.io/blocks-core/helpers";
+import type {
BlockIndices,
BlockV6,
BlockWithItems,
- Edge,
- GroupV6,
- TypebotV6,
- Variable,
-} from '@typebot.io/schemas'
-import { SetTypebot } from '../TypebotProvider'
+} from "@typebot.io/blocks-core/schemas/schema";
+import type { GroupV6 } from "@typebot.io/groups/schemas";
+import { parseUniqueKey } from "@typebot.io/lib/parseUniqueKey";
+import { byId, isEmpty } from "@typebot.io/lib/utils";
+import type { Edge } from "@typebot.io/typebot/schemas/edge";
+import type { TypebotV6 } from "@typebot.io/typebot/schemas/typebot";
+import { extractVariableIdsFromObject } from "@typebot.io/variables/extractVariablesFromObject";
+import type { Variable } from "@typebot.io/variables/schemas";
+import { type Draft, produce } from "immer";
+import type { SetTypebot } from "../TypebotProvider";
import {
- deleteGroupDraft,
createBlockDraft,
+ deleteGroupDraft,
duplicateBlockDraft,
-} from './blocks'
-import { byId, isEmpty } from '@typebot.io/lib'
-import { blockHasItems, blockHasOptions } from '@typebot.io/schemas/helpers'
-import { Coordinates, CoordinatesMap } from '@/features/graph/types'
-import { parseUniqueKey } from '@typebot.io/lib/parseUniqueKey'
-import { extractVariableIdsFromObject } from '@typebot.io/variables/extractVariablesFromObject'
+} from "./blocks";
export type GroupsActions = {
createGroup: (
props: Coordinates & {
- id: string
- block: BlockV6 | BlockV6['type']
- indices: BlockIndices
- }
- ) => string | void
+ id: string;
+ block: BlockV6 | BlockV6["type"];
+ indices: BlockIndices;
+ },
+ ) => string | void;
updateGroup: (
groupIndex: number,
- updates: Partial>
- ) => void
+ updates: Partial>,
+ ) => void;
pasteGroups: (
groups: GroupV6[],
edges: Edge[],
- variables: Pick[],
- oldToNewIdsMapping: Map
- ) => void
- updateGroupsCoordinates: (newCoord: CoordinatesMap) => void
- duplicateGroup: (groupIndex: number) => void
- deleteGroup: (groupIndex: number) => void
- deleteGroups: (groupIds: string[]) => void
-}
+ variables: Pick[],
+ oldToNewIdsMapping: Map,
+ ) => void;
+ updateGroupsCoordinates: (newCoord: CoordinatesMap) => void;
+ duplicateGroup: (groupIndex: number) => void;
+ deleteGroup: (groupIndex: number) => void;
+ deleteGroups: (groupIds: string[]) => void;
+};
const groupsActions = (setTypebot: SetTypebot): GroupsActions => ({
createGroup: ({
@@ -53,153 +56,153 @@ const groupsActions = (setTypebot: SetTypebot): GroupsActions => ({
groupLabel,
...graphCoordinates
}: Coordinates & {
- id: string
- groupLabel?: string
- block: BlockV6 | BlockV6['type']
- indices: BlockIndices
+ id: string;
+ groupLabel?: string;
+ block: BlockV6 | BlockV6["type"];
+ indices: BlockIndices;
}) => {
- let newBlockId
+ let newBlockId;
setTypebot((typebot) =>
produce(typebot, (typebot) => {
const newGroup: GroupV6 = {
id,
graphCoordinates,
- title: `${groupLabel ?? 'Group'} #${typebot.groups.length + 1}`,
+ title: `${groupLabel ?? "Group"} #${typebot.groups.length + 1}`,
blocks: [],
- }
- typebot.groups.push(newGroup)
- newBlockId = createBlockDraft(typebot, block, indices)
- })
- )
- return newBlockId
+ };
+ typebot.groups.push(newGroup);
+ newBlockId = createBlockDraft(typebot, block, indices);
+ }),
+ );
+ return newBlockId;
},
- updateGroup: (groupIndex: number, updates: Partial>) =>
+ updateGroup: (groupIndex: number, updates: Partial>) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
- const block = typebot.groups[groupIndex]
- typebot.groups[groupIndex] = { ...block, ...updates }
- })
+ const block = typebot.groups[groupIndex];
+ typebot.groups[groupIndex] = { ...block, ...updates };
+ }),
),
updateGroupsCoordinates: (newCoord: CoordinatesMap) => {
setTypebot((typebot) =>
produce(typebot, (typebot) => {
typebot.groups.forEach((group) => {
if (newCoord[group.id]) {
- group.graphCoordinates = newCoord[group.id]
+ group.graphCoordinates = newCoord[group.id];
}
- })
- })
- )
+ });
+ }),
+ );
},
duplicateGroup: (groupIndex: number) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
- const group = typebot.groups[groupIndex]
- const id = createId()
+ const group = typebot.groups[groupIndex];
+ const id = createId();
const groupTitle = isEmpty(group.title)
- ? ''
+ ? ""
: parseUniqueKey(
group.title,
- typebot.groups.map((g) => g.title)
- )
+ typebot.groups.map((g) => g.title),
+ );
const newGroup: GroupV6 = {
...group,
title: groupTitle,
id,
- blocks: group.blocks.map(duplicateBlockDraft),
+ blocks: (group.blocks as BlockV6[]).map(duplicateBlockDraft),
graphCoordinates: {
x: group.graphCoordinates.x + 200,
y: group.graphCoordinates.y + 100,
},
- }
- typebot.groups.splice(groupIndex + 1, 0, newGroup)
- })
+ };
+ typebot.groups.splice(groupIndex + 1, 0, newGroup);
+ }),
),
deleteGroup: (groupIndex: number) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
- deleteGroupDraft(typebot)(groupIndex)
- })
+ deleteGroupDraft(typebot)(groupIndex);
+ }),
),
deleteGroups: (groupIds: string[]) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
groupIds.forEach((groupId) => {
- deleteGroupByIdDraft(typebot)(groupId)
- })
- })
+ deleteGroupByIdDraft(typebot)(groupId);
+ });
+ }),
),
pasteGroups: (
groups: GroupV6[],
edges: Edge[],
- variables: Omit[],
- oldToNewIdsMapping: Map
+ variables: Omit[],
+ oldToNewIdsMapping: Map,
) => {
- const createdGroups: GroupV6[] = []
+ const createdGroups: GroupV6[] = [];
setTypebot((typebot) =>
produce(typebot, (typebot) => {
- const edgesToCreate: Edge[] = []
- const variablesToCreate: Omit[] = []
+ const edgesToCreate: Edge[] = [];
+ const variablesToCreate: Omit[] = [];
variables.forEach((variable) => {
const existingVariable = typebot.variables.find(
- (v) => v.name === variable.name
- )
+ (v) => v.name === variable.name,
+ );
if (existingVariable) {
- oldToNewIdsMapping.set(variable.id, existingVariable.id)
- return
+ oldToNewIdsMapping.set(variable.id, existingVariable.id);
+ return;
}
- const id = createId()
- oldToNewIdsMapping.set(variable.id, id)
+ const id = createId();
+ oldToNewIdsMapping.set(variable.id, id);
variablesToCreate.push({
...variable,
id,
- })
- })
+ });
+ });
groups.forEach((group) => {
const groupTitle = isEmpty(group.title)
- ? ''
+ ? ""
: parseUniqueKey(
group.title,
- typebot.groups.map((g) => g.title)
- )
+ typebot.groups.map((g) => g.title),
+ );
const newGroup: GroupV6 = {
...group,
title: groupTitle,
blocks: group.blocks.map((block) => {
- const newBlock = { ...block }
- const blockId = createId()
- oldToNewIdsMapping.set(newBlock.id, blockId)
+ const newBlock = { ...block };
+ const blockId = createId();
+ oldToNewIdsMapping.set(newBlock.id, blockId);
if (blockHasOptions(newBlock) && newBlock.options) {
const variableIdsToReplace = extractVariableIdsFromObject(
- newBlock.options
- ).filter((v) => oldToNewIdsMapping.has(v))
+ newBlock.options,
+ ).filter((v) => oldToNewIdsMapping.has(v));
if (variableIdsToReplace.length > 0) {
- let optionsStr = JSON.stringify(newBlock.options)
+ let optionsStr = JSON.stringify(newBlock.options);
variableIdsToReplace.forEach((variableId) => {
- const newId = oldToNewIdsMapping.get(variableId)
- if (!newId) return
- optionsStr = optionsStr.replace(variableId, newId)
- })
- newBlock.options = JSON.parse(optionsStr)
+ const newId = oldToNewIdsMapping.get(variableId);
+ if (!newId) return;
+ optionsStr = optionsStr.replace(variableId, newId);
+ });
+ newBlock.options = JSON.parse(optionsStr);
}
}
if (blockHasItems(newBlock)) {
newBlock.items = newBlock.items?.map((item) => {
- const id = createId()
- let outgoingEdgeId = item.outgoingEdgeId
+ const id = createId();
+ let outgoingEdgeId = item.outgoingEdgeId;
if (outgoingEdgeId) {
- const edge = edges.find(byId(outgoingEdgeId))
+ const edge = edges.find(byId(outgoingEdgeId));
if (edge) {
- outgoingEdgeId = createId()
+ outgoingEdgeId = createId();
edgesToCreate.push({
...edge,
id: outgoingEdgeId,
- })
- oldToNewIdsMapping.set(item.id, id)
+ });
+ oldToNewIdsMapping.set(item.id, id);
} else {
- outgoingEdgeId = undefined
+ outgoingEdgeId = undefined;
}
}
return {
@@ -207,38 +210,38 @@ const groupsActions = (setTypebot: SetTypebot): GroupsActions => ({
blockId,
id,
outgoingEdgeId,
- }
- }) as BlockWithItems['items']
+ };
+ }) as BlockWithItems["items"];
}
- let outgoingEdgeId = newBlock.outgoingEdgeId
+ let outgoingEdgeId = newBlock.outgoingEdgeId;
if (outgoingEdgeId) {
- const edge = edges.find(byId(outgoingEdgeId))
+ const edge = edges.find(byId(outgoingEdgeId));
if (edge) {
- outgoingEdgeId = createId()
+ outgoingEdgeId = createId();
edgesToCreate.push({
...edge,
id: outgoingEdgeId,
- })
+ });
} else {
- outgoingEdgeId = undefined
+ outgoingEdgeId = undefined;
}
}
return {
...newBlock,
id: blockId,
outgoingEdgeId,
- }
+ };
}),
- }
- typebot.groups.push(newGroup)
- createdGroups.push(newGroup)
- })
+ };
+ typebot.groups.push(newGroup);
+ createdGroups.push(newGroup);
+ });
edgesToCreate.forEach((edge) => {
- if (!('blockId' in edge.from)) return
- const fromBlockId = oldToNewIdsMapping.get(edge.from.blockId)
- const toGroupId = oldToNewIdsMapping.get(edge.to.groupId)
- if (!fromBlockId || !toGroupId) return
+ if (!("blockId" in edge.from)) return;
+ const fromBlockId = oldToNewIdsMapping.get(edge.from.blockId);
+ const toGroupId = oldToNewIdsMapping.get(edge.to.groupId);
+ if (!fromBlockId || !toGroupId) return;
const newEdge: Edge = {
...edge,
from: {
@@ -255,23 +258,23 @@ const groupsActions = (setTypebot: SetTypebot): GroupsActions => ({
? oldToNewIdsMapping.get(edge.to.blockId)
: undefined,
},
- }
- typebot.edges.push(newEdge)
- })
+ };
+ typebot.edges.push(newEdge);
+ });
variablesToCreate.forEach((variableToCreate) => {
- typebot.variables.unshift(variableToCreate)
- })
- })
- )
+ typebot.variables.unshift(variableToCreate);
+ });
+ }),
+ );
},
-})
+});
const deleteGroupByIdDraft =
(typebot: Draft) => (groupId: string) => {
- const groupIndex = typebot.groups.findIndex(byId(groupId))
- if (groupIndex === -1) return
- deleteGroupDraft(typebot)(groupIndex)
- }
+ const groupIndex = typebot.groups.findIndex(byId(groupId));
+ if (groupIndex === -1) return;
+ deleteGroupDraft(typebot)(groupIndex);
+ };
-export { groupsActions }
+export { groupsActions };
diff --git a/apps/builder/src/features/editor/providers/typebotActions/items.ts b/apps/builder/src/features/editor/providers/typebotActions/items.ts
index 282b14700d..4f878555e7 100644
--- a/apps/builder/src/features/editor/providers/typebotActions/items.ts
+++ b/apps/builder/src/features/editor/providers/typebotActions/items.ts
@@ -1,189 +1,190 @@
-import {
- ItemIndices,
- Item,
- BlockWithItems,
- ConditionItem,
- ButtonItem,
- PictureChoiceItem,
-} from '@typebot.io/schemas'
-import { SetTypebot } from '../TypebotProvider'
-import { Draft, produce } from 'immer'
-import { deleteConnectedEdgesDraft } from './edges'
-import { byId } from '@typebot.io/lib'
-import { blockHasItems } from '@typebot.io/schemas/helpers'
-import { createId } from '@paralleldrive/cuid2'
-import {
+import type {
BlockWithCreatableItems,
DraggableItem,
-} from '@/features/graph/providers/GraphDndProvider'
-import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
-import { LogicBlockType } from '@typebot.io/schemas/features/blocks/logic/constants'
+} from "@/features/graph/providers/GraphDndProvider";
+import { createId } from "@paralleldrive/cuid2";
+import { blockHasItems } from "@typebot.io/blocks-core/helpers";
+import type { Item } from "@typebot.io/blocks-core/schemas/items/schema";
+import type { ItemIndices } from "@typebot.io/blocks-core/schemas/items/types";
+import type { BlockWithItems } from "@typebot.io/blocks-core/schemas/schema";
+import type { ButtonItem } from "@typebot.io/blocks-inputs/choice/schema";
+import { InputBlockType } from "@typebot.io/blocks-inputs/constants";
+import type { PictureChoiceItem } from "@typebot.io/blocks-inputs/pictureChoice/schema";
+import type { ConditionItem } from "@typebot.io/blocks-logic/condition/schema";
+import { LogicBlockType } from "@typebot.io/blocks-logic/constants";
+import { byId } from "@typebot.io/lib/utils";
+import { type Draft, produce } from "immer";
+import type { SetTypebot } from "../TypebotProvider";
+import { deleteConnectedEdgesDraft } from "./edges";
-type NewItem = Pick & Partial
+type NewItem = Pick & Partial;
export type ItemsActions = {
- createItem: (item: NewItem, indices: ItemIndices) => void
- duplicateItem: (indices: ItemIndices) => void
- updateItem: (indices: ItemIndices, updates: Partial>) => void
- detachItemFromBlock: (indices: ItemIndices) => void
- deleteItem: (indices: ItemIndices) => void
-}
+ createItem: (item: NewItem, indices: ItemIndices) => void;
+ duplicateItem: (indices: ItemIndices) => void;
+ updateItem: (
+ indices: ItemIndices,
+ updates: Partial>,
+ ) => void;
+ detachItemFromBlock: (indices: ItemIndices) => void;
+ deleteItem: (indices: ItemIndices) => void;
+};
const createItem = (
block: Draft,
item: NewItem,
- itemIndex: number
+ itemIndex: number,
): Item => {
switch (block.type) {
case LogicBlockType.CONDITION: {
- const baseItem = item as ConditionItem
+ const baseItem = item as ConditionItem;
const newItem = {
...baseItem,
- id: 'id' in item && item.id ? item.id : createId(),
+ id: "id" in item && item.id ? item.id : createId(),
content: baseItem.content,
- }
- block.items.splice(itemIndex, 0, newItem)
- return newItem
+ };
+ block.items.splice(itemIndex, 0, newItem);
+ return newItem;
}
case InputBlockType.CHOICE: {
- const baseItem = item as ButtonItem
+ const baseItem = item as ButtonItem;
const newItem = {
...baseItem,
- id: 'id' in item && item.id ? item.id : createId(),
+ id: "id" in item && item.id ? item.id : createId(),
content: baseItem.content,
- }
- block.items.splice(itemIndex, 0, newItem)
- return newItem
+ };
+ block.items.splice(itemIndex, 0, newItem);
+ return newItem;
}
case InputBlockType.PICTURE_CHOICE: {
- const baseItem = item as PictureChoiceItem
+ const baseItem = item as PictureChoiceItem;
const newItem = {
...baseItem,
- id: 'id' in baseItem && item.id ? item.id : createId(),
- }
- block.items.splice(itemIndex, 0, newItem)
- return newItem
+ id: "id" in baseItem && item.id ? item.id : createId(),
+ };
+ block.items.splice(itemIndex, 0, newItem);
+ return newItem;
}
}
-}
+};
const duplicateItem = (
block: Draft,
- itemIndex: number
+ itemIndex: number,
): Item => {
- const item = block.items[itemIndex]
+ const item = block.items[itemIndex];
switch (block.type) {
case LogicBlockType.CONDITION: {
- const baseItem = item as ConditionItem
+ const baseItem = item as ConditionItem;
const newItem = {
...baseItem,
id: createId(),
content: baseItem.content,
- }
- block.items.splice(itemIndex + 1, 0, newItem)
- return newItem
+ };
+ block.items.splice(itemIndex + 1, 0, newItem);
+ return newItem;
}
case InputBlockType.CHOICE: {
- const baseItem = item as ButtonItem
+ const baseItem = item as ButtonItem;
const newItem = {
...baseItem,
id: createId(),
content: baseItem.content,
- }
- block.items.splice(itemIndex + 1, 0, newItem)
- return newItem
+ };
+ block.items.splice(itemIndex + 1, 0, newItem);
+ return newItem;
}
case InputBlockType.PICTURE_CHOICE: {
- const baseItem = item as PictureChoiceItem
+ const baseItem = item as PictureChoiceItem;
const newItem = {
...baseItem,
id: createId(),
- }
- block.items.splice(itemIndex + 1, 0, newItem)
- return newItem
+ };
+ block.items.splice(itemIndex + 1, 0, newItem);
+ return newItem;
}
}
-}
+};
const itemsAction = (setTypebot: SetTypebot): ItemsActions => ({
createItem: (
item: NewItem,
- { groupIndex, blockIndex, itemIndex }: ItemIndices
+ { groupIndex, blockIndex, itemIndex }: ItemIndices,
) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
const block = typebot.groups[groupIndex].blocks[
blockIndex
- ] as BlockWithCreatableItems
+ ] as BlockWithCreatableItems;
- const newItem = createItem(block, item, itemIndex)
+ const newItem = createItem(block, item, itemIndex);
- if (!newItem) return
+ if (!newItem) return;
if (item.outgoingEdgeId) {
- const edgeIndex = typebot.edges.findIndex(byId(item.outgoingEdgeId))
+ const edgeIndex = typebot.edges.findIndex(byId(item.outgoingEdgeId));
edgeIndex !== -1
? (typebot.edges[edgeIndex].from = {
blockId: block.id,
itemId: newItem.id,
})
- : (newItem.outgoingEdgeId = undefined)
+ : (newItem.outgoingEdgeId = undefined);
}
- })
+ }),
),
duplicateItem: ({ groupIndex, blockIndex, itemIndex }: ItemIndices) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
const block = typebot.groups[groupIndex].blocks[
blockIndex
- ] as BlockWithCreatableItems
- duplicateItem(block, itemIndex)
- })
+ ] as BlockWithCreatableItems;
+ duplicateItem(block, itemIndex);
+ }),
),
updateItem: (
{ groupIndex, blockIndex, itemIndex }: ItemIndices,
- updates: Partial>
+ updates: Partial>,
) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
- const block = typebot.groups[groupIndex].blocks[blockIndex]
- if (!blockHasItems(block)) return
- ;(
- typebot.groups[groupIndex].blocks[blockIndex] as BlockWithItems
- ).items[itemIndex] = {
+ const block = typebot.groups[groupIndex].blocks[blockIndex];
+ if (!blockHasItems(block)) return;
+ (typebot.groups[groupIndex].blocks[blockIndex] as BlockWithItems).items[
+ itemIndex
+ ] = {
...block.items[itemIndex],
...updates,
- } as Item
- })
+ } as Item;
+ }),
),
detachItemFromBlock: ({ groupIndex, blockIndex, itemIndex }: ItemIndices) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
const block = typebot.groups[groupIndex].blocks[
blockIndex
- ] as BlockWithItems
- block.items.splice(itemIndex, 1)
- })
+ ] as BlockWithItems;
+ block.items.splice(itemIndex, 1);
+ }),
),
deleteItem: ({ groupIndex, blockIndex, itemIndex }: ItemIndices) =>
setTypebot((typebot) =>
produce(typebot, (typebot) => {
const block = typebot.groups[groupIndex].blocks[
blockIndex
- ] as BlockWithItems
- if (block.items.length === 1) return
- const removingItem = block.items[itemIndex]
- block.items.splice(itemIndex, 1)
- deleteConnectedEdgesDraft(typebot, removingItem.id)
- })
+ ] as BlockWithItems;
+ if (block.items.length === 1) return;
+ const removingItem = block.items[itemIndex];
+ block.items.splice(itemIndex, 1);
+ deleteConnectedEdgesDraft(typebot, removingItem.id);
+ }),
),
-})
+});
const duplicateItemDraft = (blockId: string) => (item: Item) => ({
...item,
id: createId(),
blockId,
outgoingEdgeId: undefined,
-})
+});
-export { itemsAction, duplicateItemDraft }
+export { itemsAction, duplicateItemDraft };
diff --git a/apps/builder/src/features/editor/providers/typebotActions/variables.ts b/apps/builder/src/features/editor/providers/typebotActions/variables.ts
index c2718bd5a7..93c7349e69 100644
--- a/apps/builder/src/features/editor/providers/typebotActions/variables.ts
+++ b/apps/builder/src/features/editor/providers/typebotActions/variables.ts
@@ -1,46 +1,47 @@
-import { Typebot, Variable } from '@typebot.io/schemas'
-import { SetTypebot } from '../TypebotProvider'
-import { Draft, produce } from 'immer'
+import type { Typebot } from "@typebot.io/typebot/schemas/typebot";
+import type { Variable } from "@typebot.io/variables/schemas";
+import { type Draft, produce } from "immer";
+import type { SetTypebot } from "../TypebotProvider";
export type VariablesActions = {
- createVariable: (variable: Variable) => void
+ createVariable: (variable: Variable) => void;
updateVariable: (
variableId: string,
- updates: Partial>
- ) => void
- deleteVariable: (variableId: string) => void
-}
+ updates: Partial