🚸 (share) Use custom domain host when possible in embed instruction

Closes #464
baptisteArno · Apr 17, 2023 · cd0916d · cd0916d
1 parent 918dffb
commit cd0916d
Show file tree

Hide file tree

Showing 15 changed files with 280 additions and 188 deletions.
diff --git a/apps/builder/src/features/preview/components/ApiPreviewInstructions.tsx b/apps/builder/src/features/preview/components/ApiPreviewInstructions.tsx
@@ -2,6 +2,7 @@ import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { TextLink } from '@/components/TextLink'
 import { useEditor } from '@/features/editor/providers/EditorProvider'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { parseApiHost } from '@/features/publish/components/embeds/snippetParsers'
 import {
   Code,
   ListItem,
@@ -10,7 +11,6 @@ import {
   StackProps,
   Text,
 } from '@chakra-ui/react'
-import { env, getViewerUrl } from '@typebot.io/lib'
 
 export const ApiPreviewInstructions = (props: StackProps) => {
   const { typebot } = useTypebot()
@@ -60,9 +60,9 @@ export const ApiPreviewInstructions = (props: StackProps) => {
             <CodeEditor
               isReadOnly
               lang={'shell'}
-              value={`${
-                env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
-              }/api/v1/sendMessage`}
+              value={`${parseApiHost(
+                typebot?.customDomain
+              )}/api/v1/sendMessage`}
             />
             <Text>with the following JSON body:</Text>
             <CodeEditor isReadOnly lang={'json'} value={startParamsBody} />
@@ -80,9 +80,9 @@ export const ApiPreviewInstructions = (props: StackProps) => {
             <CodeEditor
               isReadOnly
               lang={'shell'}
-              value={`${
-                env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
-              }/api/v1/sendMessage`}
+              value={`${parseApiHost(
+                typebot?.customDomain
+              )}/api/v1/sendMessage`}
             />
             <Text>With the following JSON body:</Text>
             <CodeEditor isReadOnly lang={'json'} value={replyBody} />

diff --git a/apps/builder/src/features/publish/components/embeds/modals/ApiModal.tsx b/apps/builder/src/features/publish/components/embeds/modals/ApiModal.tsx
@@ -16,15 +16,17 @@ import {
   Text,
   Stack,
 } from '@chakra-ui/react'
-import { env, getViewerUrl } from '@typebot.io/lib'
 import { ModalProps } from '../EmbedButton'
+import { parseApiHost } from '../snippetParsers/shared'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 
 export const ApiModal = ({
   isPublished,
   publicId,
   isOpen,
   onClose,
 }: ModalProps): JSX.Element => {
+  const { typebot } = useTypebot()
   const startParamsBody = `{
   "startParams": {
     "typebot": "${publicId}",
@@ -57,9 +59,9 @@ export const ApiModal = ({
                 <CodeEditor
                   isReadOnly
                   lang={'shell'}
-                  value={`${
-                    env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
-                  }/api/v1/sendMessage`}
+                  value={`${parseApiHost(
+                    typebot?.customDomain
+                  )}/api/v1/sendMessage`}
                 />
                 <Text>with the following JSON body:</Text>
                 <CodeEditor isReadOnly lang={'json'} value={startParamsBody} />
@@ -77,9 +79,9 @@ export const ApiModal = ({
                 <CodeEditor
                   isReadOnly
                   lang={'shell'}
-                  value={`${
-                    env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
-                  }/api/v1/sendMessage`}
+                  value={`${parseApiHost(
+                    typebot?.customDomain
+                  )}/api/v1/sendMessage`}
                 />
                 <Text>With the following JSON body:</Text>
                 <CodeEditor isReadOnly lang={'json'} value={replyBody} />

diff --git a/...lder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx b/...lder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx
@@ -1,11 +1,13 @@
 import prettier from 'prettier/standalone'
 import parserHtml from 'prettier/parser-html'
-import { parseInitBubbleCode, typebotImportCode } from '../../snippetParsers'
+import {
+  parseApiHost,
+  parseInitBubbleCode,
+  typebotImportCode,
+} from '../../snippetParsers'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { BubbleProps } from '@typebot.io/js'
-import { env, getViewerUrl } from '@typebot.io/lib'
-import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 
 type Props = Pick<BubbleProps, 'theme' | 'previewMessage'>
 
@@ -17,9 +19,7 @@ export const JavascriptBubbleSnippet = ({ theme, previewMessage }: Props) => {
     
 ${parseInitBubbleCode({
   typebot: typebot?.publicId ?? '',
-  apiHost: isCloudProdInstance
-    ? undefined
-    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+  apiHost: parseApiHost(typebot?.customDomain),
   theme: {
     ...theme,
     chatWindow: {

diff --git a/...ilder/src/features/publish/components/embeds/modals/Javascript/JavascriptPopupSnippet.tsx b/...ilder/src/features/publish/components/embeds/modals/Javascript/JavascriptPopupSnippet.tsx
@@ -1,11 +1,13 @@
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import parserHtml from 'prettier/parser-html'
 import prettier from 'prettier/standalone'
-import { parseInitPopupCode, typebotImportCode } from '../../snippetParsers'
+import {
+  parseApiHost,
+  parseInitPopupCode,
+  typebotImportCode,
+} from '../../snippetParsers'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { PopupProps } from '@typebot.io/js'
-import { env, getViewerUrl } from '@typebot.io/lib'
-import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 
 type Props = Pick<PopupProps, 'autoShowDelay'>
 
@@ -14,9 +16,7 @@ export const JavascriptPopupSnippet = ({ autoShowDelay }: Props) => {
   const snippet = prettier.format(
     createSnippet({
       typebot: typebot?.publicId ?? '',
-      apiHost: isCloudProdInstance
-        ? undefined
-        : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+      apiHost: parseApiHost(typebot?.customDomain),
       autoShowDelay,
     }),
     {

diff --git a/...er/src/features/publish/components/embeds/modals/Javascript/JavascriptStandardSnippet.tsx b/...er/src/features/publish/components/embeds/modals/Javascript/JavascriptStandardSnippet.tsx
@@ -1,10 +1,12 @@
 import parserHtml from 'prettier/parser-html'
 import prettier from 'prettier/standalone'
-import { parseInitStandardCode, typebotImportCode } from '../../snippetParsers'
+import {
+  parseApiHost,
+  parseInitStandardCode,
+  typebotImportCode,
+} from '../../snippetParsers'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
-import { env, getViewerUrl } from '@typebot.io/lib'
-import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 
 type Props = {
   widthLabel?: string
@@ -18,7 +20,7 @@ export const JavascriptStandardSnippet = ({
   const { typebot } = useTypebot()
 
   const snippet = prettier.format(
-    `${parseStandardHeadCode(typebot?.publicId)}
+    `${parseStandardHeadCode(typebot?.publicId, typebot?.customDomain)}
       ${parseStandardElementCode(widthLabel, heightLabel)}`,
     {
       parser: 'html',
@@ -29,15 +31,16 @@ export const JavascriptStandardSnippet = ({
   return <CodeEditor value={snippet} lang="html" isReadOnly />
 }
 
-export const parseStandardHeadCode = (publicId?: string | null) =>
+export const parseStandardHeadCode = (
+  publicId?: string | null,
+  customDomain?: string | null
+) =>
   prettier.format(
     `<script type="module">${typebotImportCode};
 
 ${parseInitStandardCode({
   typebot: publicId ?? '',
-  apiHost: isCloudProdInstance
-    ? undefined
-    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+  apiHost: parseApiHost(customDomain),
 })}</script>`,
     { parser: 'html', plugins: [parserHtml] }
   )

diff --git a/...eatures/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx b/...eatures/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx
@@ -4,14 +4,13 @@ import { Stack, Text } from '@chakra-ui/react'
 import { BubbleProps } from '@typebot.io/js'
 import { Typebot } from '@typebot.io/schemas'
 import { useState } from 'react'
-import { env, getViewerUrl } from '@typebot.io/lib'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import {
   parseInlineScript,
   parseInitBubbleCode,
   typebotImportCode,
+  parseApiHost,
 } from '../../../snippetParsers'
-import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 
 export const parseDefaultBubbleTheme = (typebot?: Typebot) => ({
   button: {
@@ -37,9 +36,7 @@ export const ScriptBubbleInstructions = () => {
 
 ${parseInitBubbleCode({
   typebot: typebot?.publicId ?? '',
-  apiHost: isCloudProdInstance
-    ? undefined
-    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+  apiHost: parseApiHost(typebot?.customDomain),
   theme,
   previewMessage,
 })}`

diff --git a/...features/publish/components/embeds/modals/Script/instructions/ScriptPopupInstructions.tsx b/...features/publish/components/embeds/modals/Script/instructions/ScriptPopupInstructions.tsx
@@ -1,12 +1,11 @@
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 import { Stack, Text } from '@chakra-ui/react'
 import { useState } from 'react'
-import { env, getViewerUrl } from '@typebot.io/lib'
 import { PopupSettings } from '../../../settings/PopupSettings'
 import { parseInitPopupCode } from '../../../snippetParsers'
 import {
+  parseApiHost,
   parseInlineScript,
   typebotImportCode,
 } from '../../../snippetParsers/shared'
@@ -20,9 +19,7 @@ export const ScriptPopupInstructions = () => {
 
 ${parseInitPopupCode({
   typebot: typebot?.publicId ?? '',
-  apiHost: isCloudProdInstance
-    ? undefined
-    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+  apiHost: parseApiHost(typebot?.customDomain),
   autoShowDelay: inputValue,
 })}`
   )

diff --git a/...tures/publish/components/embeds/modals/Script/instructions/ScriptStandardInstructions.tsx b/...tures/publish/components/embeds/modals/Script/instructions/ScriptStandardInstructions.tsx
@@ -1,13 +1,12 @@
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 import { Stack, Code, Text } from '@chakra-ui/react'
 import { useState } from 'react'
-import { env, getViewerUrl } from '@typebot.io/lib'
 import { StandardSettings } from '../../../settings/StandardSettings'
 import { parseInitStandardCode } from '../../../snippetParsers/standard'
 import { parseStandardElementCode } from '../../Javascript/JavascriptStandardSnippet'
 import {
+  parseApiHost,
   parseInlineScript,
   typebotImportCode,
 } from '../../../snippetParsers/shared'
@@ -31,9 +30,7 @@ export const ScriptStandardInstructions = () => {
   
 ${parseInitStandardCode({
   typebot: typebot?.publicId ?? '',
-  apiHost: isCloudProdInstance
-    ? undefined
-    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+  apiHost: parseApiHost(typebot?.customDomain),
 })}`)
 
   return (

diff --git a/...lish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx b/...lish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx
@@ -12,10 +12,8 @@ import {
 import { BubbleProps } from '@typebot.io/js'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
-import { parseInitBubbleCode } from '../../../snippetParsers'
+import { parseApiHost, parseInitBubbleCode } from '../../../snippetParsers'
 import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'
-import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
-import { env, getViewerUrl } from '@typebot.io/lib'
 
 type Props = {
   publicId: string
@@ -31,9 +29,7 @@ export const WordpressBubbleInstructions = ({ publicId }: Props) => {
 
   const initCode = parseInitBubbleCode({
     typebot: publicId,
-    apiHost: isCloudProdInstance
-      ? undefined
-      : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+    apiHost: parseApiHost(typebot?.customDomain),
     theme: {
       ...theme,
       chatWindow: {

diff --git a/...blish/components/embeds/modals/WordpressModal/instructions/WordpressPopupInstructions.tsx b/...blish/components/embeds/modals/WordpressModal/instructions/WordpressPopupInstructions.tsx
@@ -11,20 +11,21 @@ import {
 import { useState } from 'react'
 import { PopupSettings } from '../../../settings/PopupSettings'
 import { parseInitPopupCode } from '../../../snippetParsers/popup'
-import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
-import { env, getViewerUrl } from '@typebot.io/lib'
+import { parseApiHost } from '../../../snippetParsers'
 
 type Props = {
   publicId: string
+  customDomain?: string
 }
-export const WordpressPopupInstructions = ({ publicId }: Props) => {
+export const WordpressPopupInstructions = ({
+  publicId,
+  customDomain,
+}: Props) => {
   const [autoShowDelay, setAutoShowDelay] = useState<number>()
 
   const initCode = parseInitPopupCode({
     typebot: publicId,
-    apiHost: isCloudProdInstance
-      ? undefined
-      : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+    apiHost: parseApiHost(customDomain),
     autoShowDelay,
   })
 

diff --git a/apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts b/apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts
@@ -1,7 +1,10 @@
 import { BotProps } from '@typebot.io/js'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
-import { isDefined } from '@typebot.io/lib'
+import { env, getViewerUrl, isDefined } from '@typebot.io/lib'
+import { Typebot } from '@typebot.io/schemas'
+import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
+import packageJson from '../../../../../../../../packages/embeds/js/package.json'
 
 export const parseStringParam = (fieldName: string, fieldValue?: string) =>
   fieldValue ? `${fieldName}: "${fieldValue}",` : ``
@@ -31,7 +34,9 @@ export const parseReactBotProps = ({ typebot, apiHost }: BotProps) => {
   return `${typebotLine} ${apiHostLine}`
 }
 
-export const typebotImportCode = `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'`
+export const typebotImportCode = isCloudProdInstance
+  ? `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'`
+  : `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@${packageJson.version}/dist/web.js'`
 
 export const parseInlineScript = (script: string) =>
   prettier.format(
@@ -41,3 +46,12 @@ export const parseInlineScript = (script: string) =>
   document.body.append(typebotInitScript);`,
     { parser: 'babel', plugins: [parserBabel] }
   )
+
+export const parseApiHost = (
+  customDomain: Typebot['customDomain'] | undefined
+) => {
+  if (customDomain) return new URL(`https://${customDomain}`).origin
+  return isCloudProdInstance
+    ? undefined
+    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
+}
diff --git a/apps/docs/openapi/builder/_spec_.json b/apps/docs/openapi/builder/_spec_.json
@@ -1614,6 +1614,9 @@
                                                   },
                                                   "isCode": {
                                                     "type": "boolean"
+                                                  },
+                                                  "isExecutedOnClient": {
+                                                    "type": "boolean"
                                                   }
                                                 },
                                                 "additionalProperties": false