feat(viewer): ✨ Add variables in URL support

apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx

@@ -13,8 +13,16 @@ export const headerHeight = 56
 
 export const TypebotHeader = () => {
   const router = useRouter()
-  const { typebot, updateOnBothTypebots, save, undo, redo, canUndo, canRedo } =
-    useTypebot()
+  const {
+    typebot,
+    updateOnBothTypebots,
+    save,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    publishedTypebot,
+  } = useTypebot()
   const { setRightPanel } = useEditor()
 
   const handleBackClick = async () => {
@@ -77,14 +85,16 @@ export const TypebotHeader = () => {
         >
           Share
         </Button>
-        <Button
-          as={NextChakraLink}
-          href={`/typebots/${typebot?.id}/results`}
-          colorScheme={router.pathname.includes('results') ? 'blue' : 'gray'}
-          variant={router.pathname.includes('results') ? 'outline' : 'ghost'}
-        >
-          Results
-        </Button>
+        {typebot?.publishedTypebotId && (
+          <Button
+            as={NextChakraLink}
+            href={`/typebots/${typebot?.id}/results`}
+            colorScheme={router.pathname.includes('results') ? 'blue' : 'gray'}
+            variant={router.pathname.includes('results') ? 'outline' : 'ghost'}
+          >
+            Results
+          </Button>
+        )}
       </HStack>
       <Flex pos="absolute" left="1rem" justify="center" align="center">
         <HStack alignItems="center">

apps/builder/contexts/TypebotContext/TypebotContext.tsx

@@ -22,7 +22,7 @@ import {
 } from 'services/typebots'
 import { fetcher, preventUserFromRefreshing } from 'services/utils'
 import useSWR from 'swr'
-import { isDefined } from 'utils'
+import { isDefined, isNotDefined } from 'utils'
 import { BlocksActions, blocksActions } from './actions/blocks'
 import { stepsAction, StepsActions } from './actions/steps'
 import { variablesAction, VariablesActions } from './actions/variables'
@@ -217,15 +217,22 @@ export const TypebotContext = ({
     if (!localTypebot) return
     const publishedTypebotId = generate()
     const newLocalTypebot = { ...localTypebot }
+    if (
+      localPublishedTypebot &&
+      isNotDefined(localTypebot.publishedTypebotId)
+    ) {
+      updateLocalTypebot({ publishedTypebotId: localPublishedTypebot.id })
+      await saveTypebot()
+    }
     if (!localPublishedTypebot) {
       const newPublicId = parseDefaultPublicId(
         localTypebot.name,
         localTypebot.id
       )
       updateLocalTypebot({ publicId: newPublicId, publishedTypebotId })
       newLocalTypebot.publicId = newPublicId
+      await saveTypebot()
     }
-    if (hasUnsavedChanges || !localPublishedTypebot) await saveTypebot()
     if (localPublishedTypebot) {
       await savePublishedTypebot({
         ...parseTypebotToPublicTypebot(newLocalTypebot),

apps/builder/layouts/results/ResultsContent.tsx

@@ -6,13 +6,14 @@ import { useRouter } from 'next/router'
 import React, { useMemo } from 'react'
 import { useStats } from 'services/analytics'
 import { isFreePlan } from 'services/user'
+import { isDefined } from 'utils'
 import { AnalyticsContent } from './AnalyticsContent'
 import { SubmissionsContent } from './SubmissionContent'
 
 export const ResultsContent = () => {
   const router = useRouter()
   const { user } = useUser()
-  const { typebot } = useTypebot()
+  const { typebot, publishedTypebot } = useTypebot()
   const isAnalytics = useMemo(
     () => router.pathname.endsWith('analytics'),
     [router.pathname]
@@ -23,7 +24,7 @@ export const ResultsContent = () => {
   })
 
   const { stats, mutate } = useStats({
-    typebotId: typebot?.id,
+    typebotId: publishedTypebot?.typebotId,
     onError: (err) => toast({ title: err.name, description: err.message }),
   })
 
@@ -71,12 +72,12 @@ export const ResultsContent = () => {
         </HStack>
       </Flex>
       <Flex pt="60px" w="full" justify="center">
-        {typebot &&
+        {publishedTypebot &&
           (isAnalytics ? (
             <AnalyticsContent stats={stats} />
           ) : (
             <SubmissionsContent
-              typebotId={typebot.id}
+              typebotId={publishedTypebot.typebotId}
               onDeleteResults={handleDeletedResults}
               totalResults={stats?.totalStarts ?? 0}
               totalHiddenResults={

apps/builder/layouts/results/SubmissionContent.tsx

@@ -10,7 +10,7 @@ import {
   useResults,
 } from 'services/results'
 import { unparse } from 'papaparse'
-import { PublishFirstInfo, UnlockProPlanInfo } from 'components/shared/Info'
+import { UnlockProPlanInfo } from 'components/shared/Info'
 
 type Props = {
   typebotId: string
@@ -111,7 +111,6 @@ export const SubmissionsContent = ({
 
   return (
     <Stack maxW="1200px" w="full" pb="28">
-      <PublishFirstInfo />
       {totalHiddenResults && (
         <UnlockProPlanInfo
           buttonLabel={`Unlock ${totalHiddenResults} results`}