✨ Allow user to share a flow publicly and make it duplicatable

Closes baptisteArno#360

apps/builder/package.json

@@ -117,7 +117,7 @@
     "eslint-config-custom": "workspace:*",
     "next-runtime-env": "1.6.2",
     "superjson": "1.12.4",
-    "typescript": "5.2.2",
+    "typescript": "5.3.2",
     "zod": "3.22.4"
   }
 }

apps/builder/public/locales/en.json

@@ -143,7 +143,7 @@
   "editor.blocks.start.text": "Start",
   "editor.editableTypebotName.tooltip.rename.label": "Rename",
   "editor.gettingStartedModal.editorBasics.heading": "Editor Basics",
-  "editor.gettingStartedModal.editorBasics.list.four.label": "Preview your bot by clicking the preview button on the top right",
+  "editor.gettingStartedModal.editorBasics.list.four.label": "Preview your bot by clicking the test button on the top right",
   "editor.gettingStartedModal.editorBasics.list.label": "Feel free to use the bottom-right bubble to reach out if you have any question. I usually answer within the next 24 hours. \uD83D\uDE03",
   "editor.gettingStartedModal.editorBasics.list.one.label": "The left side bar contains blocks that you can drag and drop to the board.",
   "editor.gettingStartedModal.editorBasics.list.three.label": "Connect the groups together",
@@ -153,7 +153,7 @@
   "editor.gettingStartedModal.seeAction.time": "5 minutes",
   "editor.headers.flowButton.label": "Flow",
   "editor.headers.helpButton.label": "Help",
-  "editor.headers.previewButton.label": "Preview",
+  "editor.headers.previewButton.label": "Test",
   "editor.headers.resultsButton.label": "Results",
   "editor.headers.savingSpinner.label": "Saving...",
   "editor.headers.settingsButton.label": "Settings",

apps/builder/src/components/CopyButton.tsx

@@ -4,6 +4,10 @@ import { ButtonProps, Button, useClipboard } from '@chakra-ui/react'
 interface CopyButtonProps extends ButtonProps {
   textToCopy: string
   onCopied?: () => void
+  text?: {
+    copy: string
+    copied: string
+  }
 }
 
 export const CopyButton = (props: CopyButtonProps) => {
@@ -23,7 +27,7 @@ export const CopyButton = (props: CopyButtonProps) => {
       }}
       {...buttonProps}
     >
-      {!hasCopied ? 'Copy' : 'Copied'}
+      {!hasCopied ? props.text?.copy ?? 'Copy' : props.text?.copied ?? 'Copied'}
     </Button>
   )
 }

apps/builder/src/features/account/UserProvider.tsx

@@ -69,8 +69,12 @@ export const UserProvider = ({ children }: { children: ReactNode }) => {
   useEffect(() => {
     if (!router.isReady) return
     if (status === 'loading') return
-    const isSigningIn = () => ['/signin', '/register'].includes(router.pathname)
-    if (!user && status === 'unauthenticated' && !isSigningIn())
+    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.replace({
         pathname: '/signin',
         query: {

apps/builder/src/features/analytics/api/getTotalAnswers.ts

@@ -11,7 +11,7 @@ export const getTotalAnswers = authenticatedProcedure
   .meta({
     openapi: {
       method: 'GET',
-      path: '/typebots/{typebotId}/analytics/totalAnswersInBlocks',
+      path: '/v1/typebots/{typebotId}/analytics/totalAnswersInBlocks',
       protect: true,
       summary: 'List total answers in blocks',
       tags: ['Analytics'],

apps/builder/src/features/analytics/api/getTotalVisitedEdges.ts

@@ -9,7 +9,7 @@ export const getTotalVisitedEdges = authenticatedProcedure
   .meta({
     openapi: {
       method: 'GET',
-      path: '/typebots/{typebotId}/analytics/totalVisitedEdges',
+      path: '/v1/typebots/{typebotId}/analytics/totalVisitedEdges',
       protect: true,
       summary: 'List total edges used in results',
       tags: ['Analytics'],

apps/builder/src/features/auth/components/OnboardingPage.tsx

@@ -20,7 +20,7 @@ const totalSteps = 5
 
 export const OnboardingPage = () => {
   const { t } = useTranslate()
-  const { push, replace } = useRouter()
+  const { replace, query } = useRouter()
   const confettiCanvaContainer = useRef<HTMLCanvasElement | null>(null)
   const confettiCanon = useRef<confetti.CreateTypes>()
   const { user, updateUser } = useUser()
@@ -38,8 +38,8 @@ export const OnboardingPage = () => {
   useEffect(() => {
     if (!user?.createdAt) return
     if (isNewUser === false || !env.NEXT_PUBLIC_ONBOARDING_TYPEBOT_ID)
-      replace('/typebots')
-  }, [isNewUser, replace, user?.createdAt])
+      replace({ pathname: '/typebots', query })
+  }, [isNewUser, query, replace, user?.createdAt])
 
   const initConfettis = () => {
     if (!confettiCanvaContainer.current || confettiCanon.current) return
@@ -83,7 +83,7 @@ export const OnboardingPage = () => {
         right="5"
         variant="ghost"
         size="sm"
-        onClick={() => push('/typebots')}
+        onClick={() => replace({ pathname: '/typebots', query })}
       >
         {t('skip')}
       </Button>
@@ -95,7 +95,10 @@ export const OnboardingPage = () => {
           prefilledVariables={{ Name: user?.name, Email: user?.email }}
           onEnd={() => {
             setTimeout(() => {
-              push('/typebots/create', { query: { isFirstBot: true } })
+              replace({
+                pathname: '/typebots',
+                query: { ...query, isFirstBot: true },
+              })
             }, 2000)
           }}
           onAnswer={updateUserInfo}

apps/builder/src/features/billing/api/createCheckoutSession.ts

@@ -11,7 +11,7 @@ export const createCheckoutSession = authenticatedProcedure
   .meta({
     openapi: {
       method: 'POST',
-      path: '/billing/subscription/checkout',
+      path: '/v1/billing/subscription/checkout',
       protect: true,
       summary: 'Create checkout session to create a new subscription',
       tags: ['Billing'],

apps/builder/src/features/billing/api/createCustomCheckoutSession.ts

@@ -11,7 +11,7 @@ export const createCustomCheckoutSession = authenticatedProcedure
   .meta({
     openapi: {
       method: 'POST',
-      path: '/billing/subscription/custom-checkout',
+      path: '/v1/billing/subscription/custom-checkout',
       protect: true,
       summary:
         'Create custom checkout session to make a workspace pay for a custom plan',

apps/builder/src/features/billing/api/getBillingPortalUrl.ts

@@ -10,7 +10,7 @@ export const getBillingPortalUrl = authenticatedProcedure
   .meta({
     openapi: {
       method: 'GET',
-      path: '/billing/subscription/portal',
+      path: '/v1/billing/subscription/portal',
       protect: true,
       summary: 'Get Stripe billing portal URL',
       tags: ['Billing'],

apps/builder/src/features/billing/api/getSubscription.ts

@@ -11,7 +11,7 @@ export const getSubscription = authenticatedProcedure
   .meta({
     openapi: {
       method: 'GET',
-      path: '/billing/subscription',
+      path: '/v1/billing/subscription',
       protect: true,
       summary: 'List invoices',
       tags: ['Billing'],

apps/builder/src/features/billing/api/getUsage.ts

@@ -10,7 +10,7 @@ export const getUsage = authenticatedProcedure
   .meta({
     openapi: {
       method: 'GET',
-      path: '/billing/usage',
+      path: '/v1/billing/usage',
       protect: true,
       summary: 'Get current plan usage',
       tags: ['Billing'],

apps/builder/src/features/billing/api/listInvoices.ts

@@ -12,7 +12,7 @@ export const listInvoices = authenticatedProcedure
   .meta({
     openapi: {
       method: 'GET',
-      path: '/billing/invoices',
+      path: '/v1/billing/invoices',
       protect: true,
       summary: 'List invoices',
       tags: ['Billing'],

apps/builder/src/features/billing/api/updateSubscription.ts

@@ -14,7 +14,7 @@ export const updateSubscription = authenticatedProcedure
   .meta({
     openapi: {
       method: 'PATCH',
-      path: '/billing/subscription',
+      path: '/v1/billing/subscription',
       protect: true,
       summary: 'Update subscription',
       tags: ['Billing'],

apps/builder/src/features/blocks/bubbles/audio/audio.spec.ts

@@ -35,7 +35,7 @@ test('should work as expected', async ({ page }) => {
       'gm'
     )
   )
-  await page.getByRole('button', { name: 'Preview', exact: true }).click()
+  await page.getByRole('button', { name: 'Test', exact: true }).click()
   await expect(page.locator('audio')).toHaveAttribute(
     'src',
     RegExp(

apps/builder/src/features/blocks/bubbles/embed/embed.spec.ts

@@ -44,7 +44,7 @@ test.describe.parallel('Embed bubble block', () => {
       ])
 
       await page.goto(`/typebots/${typebotId}/edit`)
-      await page.click('text=Preview')
+      await page.click('text=Test')
       await expect(page.locator('iframe#embed-bubble-content')).toHaveAttribute(
         'src',
         siteSrc

apps/builder/src/features/blocks/bubbles/image/image.spec.ts

@@ -116,7 +116,7 @@ test.describe.parallel('Image bubble block', () => {
       ])
 
       await page.goto(`/typebots/${typebotId}/edit`)
-      await page.click('text=Preview')
+      await page.click('text=Test')
       await expect(page.locator('img')).toHaveAttribute('src', unsplashImageSrc)
     })
   })

apps/builder/src/features/blocks/bubbles/textBubble/textBubble.spec.ts

@@ -49,7 +49,7 @@ test.describe('Text bubble block', () => {
     await page.fill('[data-testid="variables-input"]', 'test')
     await page.getByRole('menuitem', { name: 'Create test' }).click()
 
-    await page.click('text=Preview')
+    await page.click('text=Test')
     await expect(page.locator('span.slate-bold >> nth=0')).toHaveText(
       'Bold text'
     )

apps/builder/src/features/blocks/bubbles/video/video.spec.ts

@@ -51,7 +51,7 @@ test.describe.parallel('Video bubble block', () => {
       ])
 
       await page.goto(`/typebots/${typebotId}/edit`)
-      await page.click('text=Preview')
+      await page.click('text=Test')
       await expect(page.locator('video').nth(1)).toHaveAttribute(
         'src',
         videoSrc
@@ -75,7 +75,7 @@ test.describe.parallel('Video bubble block', () => {
       ])
 
       await page.goto(`/typebots/${typebotId}/edit`)
-      await page.click('text=Preview')
+      await page.click('text=Test')
       await expect(page.locator('iframe').nth(1)).toHaveAttribute(
         'src',
         'https://www.youtube.com/embed/dQw4w9WgXcQ'
@@ -99,7 +99,7 @@ test.describe.parallel('Video bubble block', () => {
       ])
 
       await page.goto(`/typebots/${typebotId}/edit`)
-      await page.click('text=Preview')
+      await page.click('text=Test')
       await expect(page.locator('iframe').nth(1)).toHaveAttribute(
         'src',
         'https://player.vimeo.com/video/649301125'

apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts

@@ -37,7 +37,7 @@ test.describe.parallel('Buttons input block', () => {
     await page.click('text=Delete')
     await expect(page.locator('text=Item 2')).toBeHidden()
 
-    await page.click('text=Preview')
+    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')
@@ -57,7 +57,7 @@ test.describe.parallel('Buttons input block', () => {
     await page.fill('input[value="Click to edit"]', 'Item 2')
     await page.press('input[value="Item 2"]', 'Enter')
 
-    await page.click('text=Preview')
+    await page.click('text=Test')
 
     await page.getByRole('checkbox', { name: 'Item 3' }).click()
     await page.getByRole('checkbox', { name: 'Item 1' }).click()
@@ -77,7 +77,7 @@ test('Variable buttons should work', async ({ page }) => {
   )
 
   await page.goto(`/typebots/${typebotId}/edit`)
-  await page.click('text=Preview')
+  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()

apps/builder/src/features/blocks/inputs/date/date.spec.ts

@@ -18,7 +18,7 @@ test.describe('Date input block', () => {
 
     await page.goto(`/typebots/${typebotId}/edit`)
 
-    await page.click('text=Preview')
+    await page.click('text=Test')
     await expect(page.locator('[data-testid="from-date"]')).toHaveAttribute(
       'type',
       'date'

apps/builder/src/features/blocks/inputs/emailInput/emailInput.spec.ts

@@ -19,7 +19,7 @@ test.describe('Email input block', () => {
 
     await page.goto(`/typebots/${typebotId}/edit`)
 
-    await page.click('text=Preview')
+    await page.click('text=Test')
     await expect(
       page.locator(
         `input[placeholder="${defaultEmailInputOptions.labels.placeholder}"]`

apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts

@@ -21,7 +21,7 @@ test('options should work', async ({ page }) => {
 
   await page.goto(`/typebots/${typebotId}/edit`)
 
-  await page.click('text=Preview')
+  await page.click('text=Test')
   await expect(page.locator(`text=Click to upload`)).toBeVisible()
   await expect(page.locator(`text="Skip"`)).toBeHidden()
   await page

apps/builder/src/features/blocks/inputs/number/number.spec.ts

@@ -19,7 +19,7 @@ test.describe('Number input block', () => {
 
     await page.goto(`/typebots/${typebotId}/edit`)
 
-    await page.click('text=Preview')
+    await page.click('text=Test')
     await expect(
       page.locator(
         `input[placeholder="${defaultNumberInputOptions.labels.placeholder}"]`

apps/builder/src/features/blocks/inputs/payment/payment.spec.ts

@@ -43,7 +43,7 @@ test.describe('Payment input block', () => {
     await page.fill('[placeholder="john@gmail.com"]', 'test@typebot.io')
     await expect(page.locator('text="Phone number:"')).toBeVisible()
 
-    await page.click('text=Preview')
+    await page.click('text=Test')
     await stripePaymentForm(page)
       .locator(`[placeholder="1234 1234 1234 1234"]`)
       .fill('4000000000000002')

apps/builder/src/features/blocks/inputs/phone/phone.spec.ts

@@ -19,7 +19,7 @@ test.describe('Phone input block', () => {
 
     await page.goto(`/typebots/${typebotId}/edit`)
 
-    await page.click('text=Preview')
+    await page.click('text=Test')
     await expect(
       page.locator(
         `input[placeholder="${defaultPhoneInputOptions.labels.placeholder}"]`

apps/builder/src/features/blocks/inputs/pictureChoice/pictureChoice.spec.ts

@@ -54,7 +54,7 @@ test.describe.parallel('Picture choice input block', () => {
     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: 'Preview' }).click()
+    await page.getByRole('button', { name: 'Test' }).click()
     await expect(
       page.getByRole('button', {
         name: 'First image First image First description',

apps/builder/src/features/blocks/inputs/rating/rating.spec.ts

@@ -30,7 +30,7 @@ test('options should work', async ({ page }) => {
 
   await page.goto(`/typebots/${typebotId}/edit`)
 
-  await page.click('text=Preview')
+  await page.click('text=Test')
   await expect(page.locator(`text=Send`)).toBeHidden()
   await page.getByRole('button', { name: '8' }).click()
   await page.locator(`text=Send`).click()

apps/builder/src/features/blocks/inputs/textInput/textInput.spec.ts

@@ -19,7 +19,7 @@ test.describe.parallel('Text input block', () => {
 
     await page.goto(`/typebots/${typebotId}/edit`)
 
-    await page.click('text=Preview')
+    await page.click('text=Test')
     await expect(
       page.locator(
         `input[placeholder="${defaultTextInputOptions.labels.placeholder}"]`

apps/builder/src/features/blocks/inputs/url/url.spec.ts

@@ -19,7 +19,7 @@ test.describe('Url input block', () => {
 
     await page.goto(`/typebots/${typebotId}/edit`)
 
-    await page.click('text=Preview')
+    await page.click('text=Test')
     await expect(
       page.locator(
         `input[placeholder="${defaultUrlInputOptions.labels.placeholder}"]`

apps/builder/src/features/blocks/integrations/chatwoot/chatwoot.spec.ts

@@ -34,7 +34,7 @@ test.describe('Chatwoot block', () => {
     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: 'Preview', exact: true }).click()
+    await page.getByRole('button', { name: 'Test', exact: true }).click()
     await expect(
       page.getByText('Chatwoot block is not supported in preview').nth(0)
     ).toBeVisible()

apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts

@@ -31,7 +31,7 @@ test.describe.parallel('Google sheets integration', () => {
       'Georges'
     )
 
-    await page.click('text=Preview')
+    await page.click('text=Test')
     await page
       .locator('typebot-standard')
       .locator('input[placeholder="Type your email..."]')
@@ -76,7 +76,7 @@ test.describe.parallel('Google sheets integration', () => {
       'Last name'
     )
 
-    await page.click('text=Preview')
+    await page.click('text=Test')
     await page
       .locator('typebot-standard')
       .locator('input[placeholder="Type your email..."]')
@@ -132,7 +132,7 @@ test.describe.parallel('Google sheets integration', () => {
     await page.getByRole('menuitem', { name: 'Last name' }).click()
     await createNewVar(page, 'Last name')
 
-    await page.click('text=Preview')
+    await page.click('text=Test')
     await page
       .locator('typebot-standard')
       .locator('input[placeholder="Type your email..."]')