docs(share): 📝 Add embed instructions

apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx

@@ -0,0 +1,130 @@
+import { OrderedList, ListItem, Tag } from '@chakra-ui/react'
+
+type ShopifyInstructionsProps = {
+  type: 'standard' | 'popup' | 'bubble'
+}
+
+export const ShopifyInstructions = ({ type }: ShopifyInstructionsProps) => {
+  switch (type) {
+    case 'standard': {
+      return <StandardInstructions />
+    }
+    case 'popup': {
+      return <PopupInstructions />
+    }
+    case 'bubble': {
+      return <BubbleInstructions />
+    }
+  }
+}
+
+const StandardInstructions = () => {
+  // const backgroundColor = chatbot?.themeColors.siteBackground.value
+  // const [windowSizes, setWindowSizes] = useState({
+  //   height: '100%',
+  //   width: '100%',
+  // })
+
+  // const jsCode = parseInitContainerCode({
+  //   publishId: chatbot?.publishId ?? '',
+  //   customDomain: chatbot?.customDomains[0],
+  //   backgroundColor: chatbot?.themeColors.chatbotBackground.value,
+  // })
+  // const headCode = `${typebotJsHtml}
+  // <script>
+  //   ${jsCode}
+  // </script>`
+
+  // const elementCode = `<div id="typebot-container" style="background-color: ${backgroundColor}; height: ${windowSizes.height}; width: ${windowSizes.width}"></div>`
+
+  return (
+    <OrderedList spacing={2} mb={4}>
+      <ListItem>
+        On your shop dashboard in the <Tag>Themes</Tag> page, click on{' '}
+        <Tag>Actions {'>'} Edit code</Tag>
+      </ListItem>
+      <ListItem>
+        In <Tag>Layout {'>'} theme.liquid</Tag> file, paste this code just
+        before the closing <Tag>head</Tag> tag:
+        {/* <CodeBlock
+          code={headCode}
+          mt={2}
+          onCopied={() => sendShopifyCopyEvent('standard')}
+        /> */}
+      </ListItem>
+      <ListItem>
+        Then, you can place an element on which the typebot will go in any file
+        in the <Tag>body</Tag> tags. It needs to have the id{' '}
+        <Tag>typebot-container</Tag>:
+        {/* <StandardEmbedWindowSettings
+          my={4}
+          onUpdateWindowSettings={(sizes) =>
+            setWindowSizes({
+              height: sizes.heightLabel,
+              width: sizes.widthLabel,
+            })
+          }
+        />
+        <CodeBlock code={elementCode} mt={2} /> */}
+      </ListItem>
+    </OrderedList>
+  )
+}
+
+const PopupInstructions = () => {
+  // const [inputValue, setInputValue] = useState(0)
+
+  return (
+    <OrderedList spacing={2} mb={4}>
+      <ListItem>
+        On your shop dashboard in the <Tag>Themes</Tag> page, click on{' '}
+        <Tag>Actions {'>'} Edit code</Tag>
+      </ListItem>
+      <ListItem>
+        In <Tag>Layout {'>'} theme.liquid</Tag> file, paste this code just
+        before the closing <Tag>head</Tag> tag:
+        {/* <PopupEmbedSettings
+            mb={4}
+            onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
+          />
+          <PopupEmbedCode
+            delay={inputValue}
+            onCopied={() => sendShopifyCopyEvent('popup')}
+          /> */}
+      </ListItem>
+    </OrderedList>
+  )
+}
+
+const BubbleInstructions = () => {
+  // const [inputValues, setInputValues] = useState<
+  //   Pick<BubbleParams, 'proactiveMessage' | 'button'>
+  // >({
+  //   proactiveMessage: undefined,
+  //   button: {
+  //     color: '',
+  //     iconUrl: '',
+  //   },
+  // })
+
+  return (
+    <OrderedList spacing={2} mb={4}>
+      <ListItem>
+        On your shop dashboard in the <Tag>Themes</Tag> page, click on{' '}
+        <Tag>Actions {'>'} Edit code</Tag>
+      </ListItem>
+      <ListItem>
+        In <Tag>Layout {'>'} theme.liquid</Tag> file, paste this code just
+        before the closing <Tag>head</Tag> tag:
+        {/* <ChatEmbedSettings
+        onUpdateSettings={(settings) => setInputValues({ ...settings })}
+      />
+      <ChatEmbedCode
+        mt={4}
+        {...inputValues}
+        onCopied={() => sendShopifyCopyEvent('bubble')}
+      /> */}
+      </ListItem>
+    </OrderedList>
+  )
+}

apps/builder/components/share/integrations/modals/ShopifyModal/index.tsx

@@ -0,0 +1,63 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  IconButton,
+  Heading,
+  HStack,
+} from '@chakra-ui/react'
+import { ChevronLeftIcon } from 'assets/icons'
+import React, { useState } from 'react'
+import { ModalProps } from '../../EmbedButton'
+import { ChooseEmbedTypeList } from '../ChooseEmbedTypeList'
+import { capitalize } from 'utils'
+import { PublishFirstInfo } from 'components/shared/Info'
+import { ShopifyInstructions } from './ShopifyInstructions'
+
+export const ShopifyModal = ({ isOpen, onClose, isPublished }: ModalProps) => {
+  const [chosenEmbedType, setChosenEmbedType] = useState<
+    'standard' | 'popup' | 'bubble' | undefined
+  >()
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size={!chosenEmbedType ? '2xl' : 'xl'}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          <HStack>
+            {chosenEmbedType && (
+              <IconButton
+                icon={<ChevronLeftIcon />}
+                aria-label="back"
+                variant="ghost"
+                colorScheme="gray"
+                mr={2}
+                onClick={() => setChosenEmbedType(undefined)}
+              />
+            )}
+            <Heading size="md">
+              Shopify {chosenEmbedType && `- ${capitalize(chosenEmbedType)}`}
+            </Heading>
+          </HStack>
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          {!isPublished && <PublishFirstInfo mb="2" />}
+          {!chosenEmbedType ? (
+            <ChooseEmbedTypeList onSelectEmbedType={setChosenEmbedType} />
+          ) : (
+            <ShopifyInstructions type={chosenEmbedType} />
+          )}
+        </ModalBody>
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  )
+}