feat(logic): ✨ Add Redirect step

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

@@ -6,10 +6,6 @@ import React from 'react'
 export const SaveButton = () => {
   const { save, isSavingLoading, hasUnsavedChanges } = useTypebot()
 
-  const onSaveClick = () => {
-    save()
-  }
-
   return (
     <>
       {hasUnsavedChanges && (
@@ -20,7 +16,7 @@ export const SaveButton = () => {
       <Tooltip label="Save changes">
         <IconButton
           isDisabled={!hasUnsavedChanges}
-          onClick={onSaveClick}
+          onClick={save}
           isLoading={isSavingLoading}
           icon={
             hasUnsavedChanges ? <SaveIcon /> : <CheckIcon color="green.400" />

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

@@ -13,7 +13,7 @@ export const headerHeight = 56
 
 export const TypebotHeader = () => {
   const router = useRouter()
-  const { typebot, updateTypebot } = useTypebot()
+  const { typebot, updateTypebot, save } = useTypebot()
   const { setRightPanel } = useEditor()
 
   const handleBackClick = () => {
@@ -24,6 +24,12 @@ export const TypebotHeader = () => {
   }
 
   const handleNameSubmit = (name: string) => updateTypebot({ name })
+
+  const handlePreviewClick = async () => {
+    await save()
+    setRightPanel(RightPanel.PREVIEW)
+  }
+
   return (
     <Flex
       w="full"
@@ -95,14 +101,7 @@ export const TypebotHeader = () => {
 
       <HStack right="40px" pos="absolute">
         <SaveButton />
-        <Button
-          onClick={() => {
-            setRightPanel(RightPanel.PREVIEW)
-          }}
-        >
-          Preview
-        </Button>
-
+        <Button onClick={handlePreviewClick}>Preview</Button>
         <PublishButton />
       </HStack>
     </Flex>