🦴 Add share page backbone

apps/builder/components/dashboard/FolderContent.tsx

@@ -22,7 +22,7 @@ import {
 import { FolderPlusIcon } from 'assets/icons'
 import React, { useState } from 'react'
 import { createFolder, useFolders } from 'services/folders'
-import { updateTypebot, useTypebots } from 'services/typebots'
+import { patchTypebot, useTypebots } from 'services/typebots'
 import { BackButton } from './FolderContent/BackButton'
 import { CreateBotButton } from './FolderContent/CreateBotButton'
 import { ButtonSkeleton, FolderButton } from './FolderContent/FolderButton'
@@ -83,7 +83,7 @@ export const FolderContent = ({ folder }: Props) => {
 
   const moveTypebotToFolder = async (typebotId: string, folderId: string) => {
     if (!typebots) return
-    const { error } = await updateTypebot(typebotId, {
+    const { error } = await patchTypebot(typebotId, {
       folderId: folderId === 'root' ? null : folderId,
     })
     if (error) toast({ description: error.message })

apps/builder/components/share/EditableUrl.tsx

@@ -0,0 +1,70 @@
+import {
+  HStack,
+  Tooltip,
+  EditablePreview,
+  EditableInput,
+  Text,
+  Editable,
+  Button,
+  ButtonProps,
+  useEditableControls,
+} from '@chakra-ui/react'
+import { EditIcon } from 'assets/icons'
+import { CopyButton } from 'components/shared/buttons/CopyButton'
+import React from 'react'
+
+type EditableUrlProps = {
+  publicId?: string
+  onPublicIdChange: (publicId: string) => void
+}
+
+export const EditableUrl = ({
+  publicId,
+  onPublicIdChange,
+}: EditableUrlProps) => {
+  return (
+    <Editable
+      as={HStack}
+      spacing={3}
+      defaultValue={publicId}
+      onSubmit={onPublicIdChange}
+    >
+      <HStack spacing={1}>
+        <Text>https://</Text>
+        <Tooltip label="Edit">
+          <EditablePreview
+            mx={1}
+            bgColor="blue.500"
+            color="white"
+            px={3}
+            rounded="md"
+            cursor="pointer"
+            display="flex"
+            fontWeight="semibold"
+          />
+        </Tooltip>
+
+        <EditableInput px={2} />
+
+        <Text>.typebot.io/</Text>
+      </HStack>
+
+      <HStack>
+        <EditButton size="xs" />
+        <CopyButton size="xs" textToCopy={`https://${publicId}.typebot.io/`} />
+      </HStack>
+    </Editable>
+  )
+}
+
+const EditButton = (props: ButtonProps) => {
+  const { isEditing, getEditButtonProps } = useEditableControls()
+
+  return isEditing ? (
+    <></>
+  ) : (
+    <Button leftIcon={<EditIcon />} {...props} {...getEditButtonProps()}>
+      Edit
+    </Button>
+  )
+}

apps/builder/components/share/ShareContent.tsx

@@ -0,0 +1,35 @@
+import { Flex, Heading, Stack } from '@chakra-ui/react'
+import { useTypebot } from 'contexts/TypebotContext'
+import React from 'react'
+import { parseDefaultPublicId } from 'services/typebots'
+import { EditableUrl } from './EditableUrl'
+
+export const ShareContent = () => {
+  const { typebot, updatePublicId } = useTypebot()
+
+  const handlePublicIdChange = (publicId: string) => {
+    if (publicId === typebot?.publicId) return
+    updatePublicId(publicId)
+  }
+  return (
+    <Flex h="full" w="full" justifyContent="center" align="flex-start">
+      <Stack maxW="1000px" w="full" pt="10" spacing={6}>
+        <Heading fontSize="2xl" as="h1">
+          Your typebot link
+        </Heading>
+        {typebot && (
+          <EditableUrl
+            publicId={
+              typebot?.publicId ??
+              parseDefaultPublicId(typebot.name, typebot.id)
+            }
+            onPublicIdChange={handlePublicIdChange}
+          />
+        )}
+        <Heading fontSize="2xl" as="h1">
+          Embed your typebot
+        </Heading>
+      </Stack>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import { ButtonProps, Button, useClipboard } from '@chakra-ui/react'
+
+interface CopyButtonProps extends ButtonProps {
+  textToCopy: string
+  onCopied?: () => void
+}
+
+export const CopyButton = (props: CopyButtonProps) => {
+  const { textToCopy, onCopied, ...buttonProps } = props
+  const { hasCopied, onCopy } = useClipboard(textToCopy)
+
+  return (
+    <Button
+      isDisabled={hasCopied}
+      onClick={() => {
+        onCopy()
+        if (onCopied) onCopied()
+      }}
+      {...buttonProps}
+    >
+      {!hasCopied ? 'Copy' : 'Copied'}
+    </Button>
+  )
+}