🐛 (wordpress) Fix admin critical bug and better lib import

apps/builder/src/features/publish/components/embeds/EmbedButton.tsx

@@ -1,4 +1,11 @@
-import { Button, useDisclosure, VStack, WrapItem, Text } from '@chakra-ui/react'
+import {
+  Button,
+  useDisclosure,
+  VStack,
+  WrapItem,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react'
 import {
   WordpressLogo,
   ShopifyLogo,
@@ -116,7 +123,13 @@ export const integrationsList = [
   ),
   (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
     <EmbedButton
-      logo={<ScriptIcon height={100} width="70px" color="gray.300" />}
+      logo={
+        <ScriptIcon
+          height={100}
+          width="70px"
+          color={useColorModeValue('gray.800', 'gray.300')}
+        />
+      }
       label="Script"
       Modal={ScriptModal}
       {...props}

apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx

@@ -1,6 +1,6 @@
 import prettier from 'prettier/standalone'
 import parserHtml from 'prettier/parser-html'
-import { parseInitBubbleCode } from '../../snippetParsers'
+import { parseInitBubbleCode, typebotImportCode } from '../../snippetParsers'
 import { useTypebot } from '@/features/editor'
 import { CodeEditor } from '@/components/CodeEditor'
 import { BubbleProps } from '@typebot.io/js'
@@ -13,19 +13,21 @@ export const JavascriptBubbleSnippet = ({ theme, previewMessage }: Props) => {
   const { typebot } = useTypebot()
 
   const snippet = prettier.format(
-    `<script type="module">${parseInitBubbleCode({
-      typebot: typebot?.publicId ?? '',
-      apiHost: isCloudProdInstance
-        ? undefined
-        : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
-      theme: {
-        ...theme,
-        chatWindow: {
-          backgroundColor: typebot?.theme.general.background.content ?? '#fff',
-        },
-      },
-      previewMessage,
-    })}</script>`,
+    `<script type="module">${typebotImportCode}
+    
+${parseInitBubbleCode({
+  typebot: typebot?.publicId ?? '',
+  apiHost: isCloudProdInstance
+    ? undefined
+    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+  theme: {
+    ...theme,
+    chatWindow: {
+      backgroundColor: typebot?.theme.general.background.content ?? '#fff',
+    },
+  },
+  previewMessage,
+})}</script>`,
     {
       parser: 'html',
       plugins: [parserHtml],

apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptPopupSnippet.tsx

@@ -1,7 +1,7 @@
 import { useTypebot } from '@/features/editor'
 import parserHtml from 'prettier/parser-html'
 import prettier from 'prettier/standalone'
-import { parseInitPopupCode } from '../../snippetParsers'
+import { parseInitPopupCode, typebotImportCode } from '../../snippetParsers'
 import { CodeEditor } from '@/components/CodeEditor'
 import { PopupProps } from '@typebot.io/js'
 import { isCloudProdInstance } from '@/utils/helpers'
@@ -29,5 +29,7 @@ export const JavascriptPopupSnippet = ({ autoShowDelay }: Props) => {
 
 const createSnippet = (params: PopupProps): string => {
   const jsCode = parseInitPopupCode(params)
-  return `<script type="module">${jsCode}</script>`
+  return `<script type="module">${typebotImportCode}
+
+${jsCode}</script>`
 }

apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptStandardSnippet.tsx

@@ -1,6 +1,6 @@
 import parserHtml from 'prettier/parser-html'
 import prettier from 'prettier/standalone'
-import { parseInitStandardCode } from '../../snippetParsers'
+import { parseInitStandardCode, typebotImportCode } from '../../snippetParsers'
 import { useTypebot } from '@/features/editor'
 import { CodeEditor } from '@/components/CodeEditor'
 import { isCloudProdInstance } from '@/utils/helpers'
@@ -31,12 +31,14 @@ export const JavascriptStandardSnippet = ({
 
 export const parseStandardHeadCode = (publicId?: string | null) =>
   prettier.format(
-    `<script type="module">${parseInitStandardCode({
-      typebot: publicId ?? '',
-      apiHost: isCloudProdInstance
-        ? undefined
-        : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
-    })}</script>`,
+    `<script type="module">${typebotImportCode};
+
+${parseInitStandardCode({
+  typebot: publicId ?? '',
+  apiHost: isCloudProdInstance
+    ? undefined
+    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+})}</script>`,
     { parser: 'html', plugins: [parserHtml] }
   )
 

apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx

@@ -7,7 +7,11 @@ import { Typebot } from 'models'
 import { useState } from 'react'
 import { env, getViewerUrl } from 'utils'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
-import { parseInlineScript, parseInitBubbleCode } from '../../../snippetParsers'
+import {
+  parseInlineScript,
+  parseInitBubbleCode,
+  typebotImportCode,
+} from '../../../snippetParsers'
 
 export const parseDefaultBubbleTheme = (typebot?: Typebot) => ({
   button: {
@@ -29,14 +33,16 @@ export const ScriptBubbleInstructions = () => {
     useState<BubbleProps['previewMessage']>()
 
   const scriptSnippet = parseInlineScript(
-    parseInitBubbleCode({
-      typebot: typebot?.publicId ?? '',
-      apiHost: isCloudProdInstance
-        ? undefined
-        : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
-      theme,
-      previewMessage,
-    })
+    `${typebotImportCode}
+
+${parseInitBubbleCode({
+  typebot: typebot?.publicId ?? '',
+  apiHost: isCloudProdInstance
+    ? undefined
+    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+  theme,
+  previewMessage,
+})}`
   )
 
   return (

apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptPopupInstructions.tsx

@@ -6,20 +6,25 @@ import { useState } from 'react'
 import { env, getViewerUrl } from 'utils'
 import { PopupSettings } from '../../../settings/PopupSettings'
 import { parseInitPopupCode } from '../../../snippetParsers'
-import { parseInlineScript } from '../../../snippetParsers/shared'
+import {
+  parseInlineScript,
+  typebotImportCode,
+} from '../../../snippetParsers/shared'
 
 export const ScriptPopupInstructions = () => {
   const { typebot } = useTypebot()
   const [inputValue, setInputValue] = useState<number>()
 
   const scriptSnippet = parseInlineScript(
-    parseInitPopupCode({
-      typebot: typebot?.publicId ?? '',
-      apiHost: isCloudProdInstance
-        ? undefined
-        : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
-      autoShowDelay: inputValue,
-    })
+    `${typebotImportCode}
+
+${parseInitPopupCode({
+  typebot: typebot?.publicId ?? '',
+  apiHost: isCloudProdInstance
+    ? undefined
+    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+  autoShowDelay: inputValue,
+})}`
   )
 
   return (

apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptStandardInstructions.tsx

@@ -7,7 +7,10 @@ import { env, getViewerUrl } from 'utils'
 import { StandardSettings } from '../../../settings/StandardSettings'
 import { parseInitStandardCode } from '../../../snippetParsers/standard'
 import { parseStandardElementCode } from '../../Javascript/JavascriptStandardSnippet'
-import { parseInlineScript } from '../../../snippetParsers/shared'
+import {
+  parseInlineScript,
+  typebotImportCode,
+} from '../../../snippetParsers/shared'
 
 export const ScriptStandardInstructions = () => {
   const { typebot } = useTypebot()
@@ -24,14 +27,14 @@ export const ScriptStandardInstructions = () => {
     inputValues.heightLabel
   )
 
-  const scriptSnippet = parseInlineScript(
-    parseInitStandardCode({
-      typebot: typebot?.publicId ?? '',
-      apiHost: isCloudProdInstance
-        ? undefined
-        : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
-    })
-  )
+  const scriptSnippet = parseInlineScript(`${typebotImportCode}
+  
+${parseInitStandardCode({
+  typebot: typebot?.publicId ?? '',
+  apiHost: isCloudProdInstance
+    ? undefined
+    : env('VIEWER_INTERNAL_URL') ?? getViewerUrl(),
+})}`)
 
   return (
     <Stack spacing={4}>

apps/builder/src/features/publish/components/embeds/snippetParsers/bubble.ts

@@ -6,7 +6,6 @@ import {
   parseBotProps,
   parseNumberOrBoolParam,
   parseReactBotProps,
-  typebotImportUrl,
 } from './shared'
 
 const parseButtonTheme = (
@@ -111,15 +110,10 @@ export const parseInitBubbleCode = ({
   const botProps = parseBotProps({ typebot, apiHost })
   const bubbleProps = parseBubbleProps({ previewMessage, theme })
 
-  return prettier.format(
-    `import Typebot from '${typebotImportUrl}'
-    
-  Typebot.initBubble({${botProps}${bubbleProps}});`,
-    {
-      parser: 'babel',
-      plugins: [parserBabel],
-    }
-  )
+  return prettier.format(`Typebot.initBubble({${botProps}${bubbleProps}});`, {
+    parser: 'babel',
+    plugins: [parserBabel],
+  })
 }
 
 const parseReactBubbleTheme = (theme: BubbleProps['theme']): string => {

apps/builder/src/features/publish/components/embeds/snippetParsers/popup.ts

@@ -8,7 +8,6 @@ import {
   parseReactNumberOrBoolParam,
   parseReactStringParam,
   parseStringParam,
-  typebotImportUrl,
 } from './shared'
 
 const parsePopupTheme = (theme: PopupProps['theme']): string => {
@@ -41,15 +40,10 @@ export const parseInitPopupCode = ({
   const botProps = parseBotProps({ typebot, apiHost })
   const bubbleProps = parsePopupProps({ theme, autoShowDelay })
 
-  return prettier.format(
-    `import Typebot from '${typebotImportUrl}'
-    
-  Typebot.initPopup({${botProps}${bubbleProps}});`,
-    {
-      parser: 'babel',
-      plugins: [parserBabel],
-    }
-  )
+  return prettier.format(`Typebot.initPopup({${botProps}${bubbleProps}});`, {
+    parser: 'babel',
+    plugins: [parserBabel],
+  })
 }
 
 const parseReactThemeProp = (theme: PopupProps['theme']): string => {

apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts

@@ -31,7 +31,7 @@ export const parseReactBotProps = ({ typebot, apiHost }: BotProps) => {
   return `${typebotLine} ${apiHostLine}`
 }
 
-export const typebotImportUrl = `https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.14/dist/web.js`
+export const typebotImportCode = `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'`
 
 export const parseInlineScript = (script: string) =>
   prettier.format(

apps/builder/src/features/publish/components/embeds/snippetParsers/standard.ts

@@ -1,21 +1,16 @@
 import { BotProps } from '@typebot.io/js'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
-import { parseBotProps, typebotImportUrl } from './shared'
+import { parseBotProps } from './shared'
 
 export const parseInitStandardCode = ({
   typebot,
   apiHost,
 }: Pick<BotProps, 'typebot' | 'apiHost'>) => {
   const botProps = parseBotProps({ typebot, apiHost })
 
-  return prettier.format(
-    `import Typebot from '${typebotImportUrl}'
-  
-  Typebot.initStandard({${botProps}});`,
-    {
-      parser: 'babel',
-      plugins: [parserBabel],
-    }
-  )
+  return prettier.format(`Typebot.initStandard({${botProps}});`, {
+    parser: 'babel',
+    plugins: [parserBabel],
+  })
 }

packages/wordpress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wordpress",
-  "version": "2.1.11",
+  "version": "3.1.0",
   "main": "index.js",
   "repository": "https://github.com/baptisteArno/typebot.io",
   "author": "baptisteArno",
@@ -11,7 +11,7 @@
   },
   "scripts": {
     "deploy": "pnpm copy && pnpm commit",
-    "copy": "svn copy ./trunk ./tags/3.0.1",
-    "commit": "svn ci -m 'Fix standard flow not proceeding'"
+    "copy": "svn copy ./trunk ./tags/3.1.0",
+    "commit": "svn ci -m 'Fix admin critical bug and introduce excluded pages'"
   }
 }

packages/wordpress/trunk/README.txt

@@ -5,7 +5,7 @@ Requires at least: 5.0
 Tested up to: 6.0
 License: GPL 2.0
 License URI: http://www.gnu.org/licenses/gpl-2.0.txt
-Stable Tag: 3.0.1
+Stable Tag: 3.1.0
 
 Build beautiful conversational forms
 
@@ -26,6 +26,11 @@ This plugin relies on Typebot which is a tool that allows you to create conversa
 3. Activate your Typebot with the "Typebot" admin button located in the sidebar
 
 == Changelog ==
+= 3.1.0 =
+* Breaking change! You will need to import the new code snippet again.
+* Fix wp admin crash
+* Introduce excluded pages input
+
 = 3.0.1 =
 * Fix flow not proceeding on unknown domains
 

packages/wordpress/trunk/admin/class-typebot-admin.php

@@ -26,5 +26,6 @@ public function typebot_settings_callback()
   public function register_typebot_settings()
   {
     register_setting('typebot', 'init_snippet');
+    register_setting('typebot', 'excluded_pages');
   }
 }

packages/wordpress/trunk/admin/partials/typebot-admin-display.php

@@ -11,7 +11,13 @@
         ?>
         <div style="display: flex; flex-direction: column">
           <label>If embedding as <strong>Popup</strong> or <strong>Bubble</strong>, paste the initialization snippet here:</label>
-          <textarea name="init_snippet" placeholder='Typebot.initPopup({ typebot: "https://typebot.io/my-typebot" });' style="min-height: 150px; padding: 0.5rem; margin-top: 1rem"><?php echo esc_attr(get_option('init_snippet')); ?></textarea>
+          <textarea name="init_snippet" style="min-height: 150px; padding: 0.5rem; margin-top: 1rem"><?php echo esc_attr(get_option('init_snippet')); ?></textarea>
+        </div>
+
+        <div style="display: flex; flex-direction: column; margin-top: 1rem">
+          <label>Excluded pages (optionnal):</label>
+          <p style="color: gray">Example: /app/*, /user/*, /admin/settings</p>
+          <input name="excluded_pages" value="<?php echo esc_attr(get_option('excluded_pages')); ?>" style="padding: .5rem" />
         </div>
 
         <div style="margin-top: 1rem">

packages/wordpress/trunk/includes/class-typebot.php

@@ -42,7 +42,6 @@ private function set_locale()
 	private function define_admin_hooks()
 	{
 		$plugin_admin = new Typebot_Admin($this->get_version());
-		$this->loader->add_action('admin_enqueue_scripts', $plugin_admin, 'enqueue_styles');
 		$this->loader->add_action('admin_menu', $plugin_admin, 'my_admin_menu');
 		$this->loader->add_action('admin_init', $plugin_admin, 'register_typebot_settings');
 	}