feat: ✨ Add new onboarding flow

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx

@@ -80,7 +80,6 @@ export const WebhookSettings = ({
 
     return () => {
       setLocalWebhook((localWebhook) => {
-        console.log(localWebhook)
         if (!localWebhook) return
         updateWebhook(webhookId, localWebhook).then()
         return localWebhook

apps/builder/components/shared/SupportBubble.tsx

@@ -17,7 +17,12 @@ export const SupportBubble = () => {
           process.env.NEXT_PUBLIC_VIEWER_URL
         }/typebot-support`,
         backgroundColor: '#ffffff',
-        button: { color: '#0042DA' },
+        button: {
+          color: '#0042DA',
+          iconUrl:
+            'https://user-images.githubusercontent.com/16015833/159536717-35bb78f8-f659-49f2-ad7f-00172be69cfb.svg',
+          iconStyle: 'border-radius: 0; width: 50%',
+        },
         hiddenVariables: {
           'User ID': user?.id,
           Name: user?.name ?? undefined,

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

@@ -13,6 +13,7 @@ import { RightPanel, useEditor } from 'contexts/EditorContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { useRouter } from 'next/router'
 import React from 'react'
+import { isNotDefined } from 'utils'
 import { PublishButton } from '../buttons/PublishButton'
 import { CollaborationMenuButton } from './CollaborationMenuButton'
 import { EditableTypebotName } from './EditableTypebotName'
@@ -21,6 +22,7 @@ export const headerHeight = 56
 
 export const TypebotHeader = () => {
   const router = useRouter()
+  const { rightPanel } = useEditor()
   const {
     typebot,
     updateOnBothTypebots,
@@ -154,7 +156,7 @@ export const TypebotHeader = () => {
 
       <HStack right="40px" pos="absolute">
         <CollaborationMenuButton />
-        {router.pathname.includes('/edit') && (
+        {router.pathname.includes('/edit') && isNotDefined(rightPanel) && (
           <Button onClick={handlePreviewClick}>Preview</Button>
         )}
         <PublishButton />

apps/builder/components/shared/buttons/PublishButton.tsx

@@ -12,10 +12,12 @@ import {
 } from '@chakra-ui/react'
 import { ChevronLeftIcon } from 'assets/icons'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import { useRouter } from 'next/router'
 import { timeSince } from 'services/utils'
 import { isNotDefined } from 'utils'
 
 export const PublishButton = () => {
+  const { push, query } = useRouter()
   const {
     isPublishing,
     isPublished,
@@ -24,6 +26,11 @@ export const PublishButton = () => {
     restorePublishedTypebot,
   } = useTypebot()
 
+  const handlePublishClick = () => {
+    publishTypebot()
+    if (!publishedTypebot) push(`/typebots/${query.typebotId}/share`)
+  }
+
   return (
     <HStack spacing="1px">
       <Tooltip
@@ -47,7 +54,7 @@ export const PublishButton = () => {
           colorScheme="blue"
           isLoading={isPublishing}
           isDisabled={isPublished}
-          onClick={publishTypebot}
+          onClick={handlePublishClick}
           borderRightRadius={publishedTypebot && !isPublished ? 0 : undefined}
         >
           {isPublished ? 'Published' : 'Publish'}