@capillarytech/creatives-library 9.1.6 → 9.1.7-alpha.sprint-bee-free-load-fix.32

package/AppRoot.js

@@ -14,6 +14,7 @@ import { translationMessages } from './i18n';
 import initialState from './initialState';
 import pathConfig from './config/path';
 import { isMFEMode } from './utils/mfeDetect';
+import { loadBeePlugin } from './utils/beePluginLoader';
 import { emitFirstPaintReadyIfNotDataLanding } from './utils/mfeFirstPaintReady';
 import rebaseHistory from './utils/mfeHistory';
 import { MFEEventBus } from '@capillarytech/cap-ui-utils';
@@ -86,14 +87,10 @@ const AppRoot = ({ basename: _basename = '/creatives/ui', history: hostHistory }
     }
   }, []);
 
-  // In MFE mode the HOST's index.html is served, not creatives' — so BeePlugin.js
-  // (declared in creatives/index.html) is never loaded. Inject it here so BeeEditor works.
+  // Preload BeePlugin.js in MFE mode (host index.html lacks it); the editors also load it on demand
   useEffect(() => {
-    if (isMFEMode() && !window.BeePlugin && !document.querySelector('script[src*="BeePlugin.js"]')) {
-      const script = document.createElement('script');
-      script.src = 'https://app-rsrc.getbee.io/plugin/BeePlugin.js';
-      script.type = 'text/javascript';
-      document.head.appendChild(script);
+    if (isMFEMode()) {
+      loadBeePlugin().catch(() => {});
     }
   }, []);
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.1.6",
+  "version": "9.1.7-alpha.sprint-bee-free-load-fix.32",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/beePluginLoader.js

@@ -0,0 +1,48 @@
+export const BEE_PLUGIN_SCRIPT_URL = 'https://app-rsrc.getbee.io/plugin/BeePlugin.js';
+export const BEE_PLUGIN_LOAD_TIMEOUT_MS = 30000;
+
+let beePluginPromise = null;
+
+// Hosts consuming creatives as a library or MFE may not ship BeePlugin.js, so load it on demand
+export const loadBeePlugin = () => {
+  if (window.BeePlugin) {
+    return Promise.resolve(window.BeePlugin);
+  }
+  if (beePluginPromise) {
+    return beePluginPromise;
+  }
+  beePluginPromise = new Promise((resolve, reject) => {
+    const existingScript = document.querySelector('script[src*="BeePlugin.js"]');
+    const script = existingScript || document.createElement('script');
+    let timeoutId = null;
+    const fail = (error) => {
+      clearTimeout(timeoutId);
+      beePluginPromise = null;
+      // Drop the tag so a retry injects a fresh one instead of waiting on a dead script
+      script.remove();
+      reject(error);
+    };
+    const onLoad = () => {
+      if (window.BeePlugin) {
+        clearTimeout(timeoutId);
+        resolve(window.BeePlugin);
+        return;
+      }
+      fail(new Error('BeePlugin.js loaded but window.BeePlugin is undefined'));
+    };
+    const onError = () => fail(new Error(`Failed to load ${BEE_PLUGIN_SCRIPT_URL}`));
+    timeoutId = setTimeout(
+      () => fail(new Error(`Timed out loading ${BEE_PLUGIN_SCRIPT_URL}`)),
+      BEE_PLUGIN_LOAD_TIMEOUT_MS,
+    );
+    script.addEventListener('load', onLoad, { once: true });
+    script.addEventListener('error', onError, { once: true });
+    if (!existingScript) {
+      script.src = BEE_PLUGIN_SCRIPT_URL;
+      script.type = 'text/javascript';
+      script.async = true;
+      document.head.appendChild(script);
+    }
+  });
+  return beePluginPromise;
+};

package/utils/tests/beePluginLoader.test.js

@@ -0,0 +1,85 @@
+const SCRIPT_SELECTOR = 'script[src*="BeePlugin.js"]';
+
+const getLoader = () => {
+  let loader;
+  jest.isolateModules(() => {
+    loader = require('../beePluginLoader');
+  });
+  return loader;
+};
+
+describe('loadBeePlugin', () => {
+  const mockBeePlugin = { create: jest.fn() };
+
+  beforeEach(() => {
+    delete window.BeePlugin;
+    document.head.innerHTML = '';
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    delete window.BeePlugin;
+  });
+
+  it('resolves immediately without injecting a script when BeePlugin is already loaded', async () => {
+    window.BeePlugin = mockBeePlugin;
+    const { loadBeePlugin } = getLoader();
+    await expect(loadBeePlugin()).resolves.toBe(mockBeePlugin);
+    expect(document.querySelector(SCRIPT_SELECTOR)).toBeNull();
+  });
+
+  it('injects the script once and resolves when it loads', async () => {
+    const { loadBeePlugin, BEE_PLUGIN_SCRIPT_URL } = getLoader();
+    const firstLoad = loadBeePlugin();
+    const secondLoad = loadBeePlugin();
+    const scripts = document.querySelectorAll(SCRIPT_SELECTOR);
+    expect(scripts).toHaveLength(1);
+    expect(scripts[0].src).toBe(BEE_PLUGIN_SCRIPT_URL);
+    expect(secondLoad).toBe(firstLoad);
+    window.BeePlugin = mockBeePlugin;
+    scripts[0].dispatchEvent(new Event('load'));
+    await expect(firstLoad).resolves.toBe(mockBeePlugin);
+  });
+
+  it('waits on a host-provided script instead of injecting another', async () => {
+    const hostScript = document.createElement('script');
+    hostScript.src = 'https://app-rsrc.getbee.io/plugin/BeePlugin.js';
+    document.head.appendChild(hostScript);
+    const { loadBeePlugin } = getLoader();
+    const load = loadBeePlugin();
+    expect(document.querySelectorAll(SCRIPT_SELECTOR)).toHaveLength(1);
+    window.BeePlugin = mockBeePlugin;
+    hostScript.dispatchEvent(new Event('load'));
+    await expect(load).resolves.toBe(mockBeePlugin);
+  });
+
+  it('rejects on script error, removes the tag and allows a retry', async () => {
+    const { loadBeePlugin } = getLoader();
+    const failedLoad = loadBeePlugin();
+    document.querySelector(SCRIPT_SELECTOR).dispatchEvent(new Event('error'));
+    await expect(failedLoad).rejects.toThrow('Failed to load');
+    expect(document.querySelector(SCRIPT_SELECTOR)).toBeNull();
+
+    const retryLoad = loadBeePlugin();
+    expect(retryLoad).not.toBe(failedLoad);
+    window.BeePlugin = mockBeePlugin;
+    document.querySelector(SCRIPT_SELECTOR).dispatchEvent(new Event('load'));
+    await expect(retryLoad).resolves.toBe(mockBeePlugin);
+  });
+
+  it('rejects when the script loads but does not define BeePlugin', async () => {
+    const { loadBeePlugin } = getLoader();
+    const load = loadBeePlugin();
+    document.querySelector(SCRIPT_SELECTOR).dispatchEvent(new Event('load'));
+    await expect(load).rejects.toThrow('window.BeePlugin is undefined');
+  });
+
+  it('rejects after the timeout when the script never settles', async () => {
+    jest.useFakeTimers();
+    const { loadBeePlugin, BEE_PLUGIN_LOAD_TIMEOUT_MS } = getLoader();
+    const load = loadBeePlugin();
+    jest.advanceTimersByTime(BEE_PLUGIN_LOAD_TIMEOUT_MS);
+    await expect(load).rejects.toThrow('Timed out');
+    expect(document.querySelector(SCRIPT_SELECTOR)).toBeNull();
+  });
+});

package/v2Containers/BeeEditor/index.js

@@ -19,7 +19,9 @@ import CapInput from "@capillarytech/cap-ui-library/CapInput";
 import CapSelect from "@capillarytech/cap-ui-library/CapSelect";
 import CapSpin from "@capillarytech/cap-ui-library/CapSpin";
 import CapNotification from "@capillarytech/cap-ui-library/CapNotification";
+import CapError from "@capillarytech/cap-ui-library/CapError";
 import config from '../../config/app';
+import { loadBeePlugin } from '../../utils/beePluginLoader';
 import makeSelectBEE from './selectors';
 import messages from './messages';
 import * as beeActions from './actions';
@@ -75,6 +77,9 @@ function BeeEditor(props) {
   const [rowMetaInfo, setRowMetaInfo] = useState({});
   const [rowName, setRowName] = useState('');
   const [rowCategory, setRowCategory] = useState('');
+  const [isBeePluginLoading, setIsBeePluginLoading] = useState(false);
+  const [hasBeePluginLoadError, setHasBeePluginLoadError] = useState(false);
+  const [beePluginLoadAttempt, setBeePluginLoadAttempt] = useState(0);
   const beePluginInstanceRef = useRef(null);
   const initializedBeeJsonRef = useRef(null); // Track which beeJson we've initialized for
   const isInitializingRef = useRef(false); // Track if initialization is in progress
@@ -258,23 +263,37 @@ function BeeEditor(props) {
       beePluginInstanceRef.current = null;
     }
 
-    try {
-      window.BeePlugin.create(currentTokenData, beeConfig, (instance) => {
-        beePluginInstance = instance;
-        beePluginInstanceRef.current = instance;
-        const parseJson = typeof beeJson === 'string' ? JSON.parse(beeJson) : beeJson;
-        beePluginInstance.start(parseJson);
-        saveBeeInstance(beePluginInstance);
-        // Mark this beeJson as initialized and clear initialization flag
-        initializedBeeJsonRef.current = initializationKey;
+    let isEffectCancelled = false;
+    setHasBeePluginLoadError(false);
+    setIsBeePluginLoading(!window.BeePlugin);
+    loadBeePlugin()
+      .then((BeePlugin) => {
+        if (isEffectCancelled) {
+          return;
+        }
+        setIsBeePluginLoading(false);
+        BeePlugin.create(currentTokenData, beeConfig, (instance) => {
+          beePluginInstance = instance;
+          beePluginInstanceRef.current = instance;
+          const parseJson = typeof beeJson === 'string' ? JSON.parse(beeJson) : beeJson;
+          beePluginInstance.start(parseJson);
+          saveBeeInstance(beePluginInstance);
+          // Mark this beeJson as initialized and clear initialization flag
+          initializedBeeJsonRef.current = initializationKey;
+          isInitializingRef.current = false;
+        });
+      })
+      .catch((error) => {
+        if (isEffectCancelled) {
+          return;
+        }
+        console.error('[BeeEditor] Error creating BEE plugin:', error);
+        setIsBeePluginLoading(false);
+        setHasBeePluginLoadError(true);
         isInitializingRef.current = false;
       });
-    } catch (error) {
-      // Reset flag on error
-      console.error('[BeeEditor] Error creating BEE plugin:', error);
-      isInitializingRef.current = false;
-    }
     return () => {
+      isEffectCancelled = true;
       clearInterval(intervalTimer);
       // Reset initialization flag on cleanup
       isInitializingRef.current = false;
@@ -293,7 +312,12 @@ function BeeEditor(props) {
     };
     // Only depend on beeJson, uid, and id - not tokenData
     // tokenData is accessed via ref to prevent re-initialization when it changes
-  }, [beeJson, uid, id]);
+  }, [beeJson, uid, id, beePluginLoadAttempt]);
+
+  const onRetryBeePluginLoad = () => {
+    setBeePluginLoadAttempt((attempt) => attempt + 1);
+  };
+
   const callbackSaveRow = (status, errorMsg) => {
     if (status === 'success') {
       CapNotification.success({message: formatMessage(messages.rowCreationSuccessMgs), key: 'create-custom-row-success'});
@@ -367,8 +391,17 @@ function BeeEditor(props) {
     </>
   );
   return (
-    <CapSpin spinning={saveRowRequest || false}>
-      <div id="bee-plugin-container" style={{ height: "650px" }}></div>
+    <CapSpin spinning={saveRowRequest || isBeePluginLoading}>
+      {hasBeePluginLoadError ? (
+        <div className="bee-plugin-load-error">
+          <CapError type="error">{formatMessage(messages.beePluginLoadError)}</CapError>
+          <CapButton type="secondary" onClick={onRetryBeePluginLoad}>
+            {formatMessage(messages.retry)}
+          </CapButton>
+        </div>
+      ) : (
+        <div id="bee-plugin-container" style={{ height: "650px" }}></div>
+      )}
       <TagList
         moduleFilterEnabled={moduleFilterEnabled}
         label={label}

package/v2Containers/BeeEditor/index.scss

@@ -1,3 +1,11 @@
+.bee-plugin-load-error {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1.5rem 0;
+}
+
 .custom-row-modal {
     .ant-modal-footer {
         text-align: left;

package/v2Containers/BeeEditor/messages.js

@@ -64,4 +64,12 @@ export default defineMessages({
     id: `${prefix}.rowCreationFailureMgs`,
     defaultMessage: 'Error in row creation',
   },
+  beePluginLoadError: {
+    id: `${prefix}.beePluginLoadError`,
+    defaultMessage: 'Unable to load the drag & drop editor. Check your network connection and try again.',
+  },
+  retry: {
+    id: `${prefix}.retry`,
+    defaultMessage: 'Retry',
+  },
 });

package/v2Containers/BeeEditor/test/index.test.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent, waitFor } from '../../../utils/test-utils';
+import { loadBeePlugin } from '../../../utils/beePluginLoader';
+import BeeEditor from '../index';
+
+jest.mock('../../../utils/beePluginLoader', () => ({
+  loadBeePlugin: jest.fn(),
+}));
+
+jest.mock('../../TagList', () => () => null);
+
+const mockBeePluginInstance = { start: jest.fn(), destroy: jest.fn() };
+const mockBeePlugin = { create: jest.fn() };
+
+const defaultProps = {
+  uid: 'test-uid',
+  id: 'bee-editor',
+  beeJson: '{"page":{}}',
+  tokenData: { access_token: 'token' },
+  saveBeeInstance: jest.fn(),
+  saveBeeData: jest.fn(),
+  tags: [],
+};
+
+describe('BeeEditor BeePlugin loading', () => {
+  beforeEach(() => {
+    mockBeePlugin.create.mockImplementation((tokenData, beeConfig, onCreated) => onCreated(mockBeePluginInstance));
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    console.error.mockRestore();
+  });
+
+  it('creates the BEE editor once the plugin script has loaded', async () => {
+    loadBeePlugin.mockResolvedValue(mockBeePlugin);
+    const { container } = render(<BeeEditor {...defaultProps} />);
+    await waitFor(() => expect(mockBeePlugin.create).toHaveBeenCalledTimes(1));
+    expect(mockBeePluginInstance.start).toHaveBeenCalledWith({ page: {} });
+    expect(defaultProps.saveBeeInstance).toHaveBeenCalledWith(mockBeePluginInstance);
+    expect(container.querySelector('#bee-plugin-container')).toBeInTheDocument();
+  });
+
+  it('shows an error with retry when the plugin script fails, and recovers on retry', async () => {
+    loadBeePlugin
+      .mockRejectedValueOnce(new Error('Failed to load'))
+      .mockResolvedValueOnce(mockBeePlugin);
+    const { container } = render(<BeeEditor {...defaultProps} />);
+
+    expect(await screen.findByText(/Unable to load the drag & drop editor/)).toBeInTheDocument();
+    expect(container.querySelector('#bee-plugin-container')).not.toBeInTheDocument();
+    expect(mockBeePlugin.create).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }));
+
+    await waitFor(() => expect(mockBeePlugin.create).toHaveBeenCalledTimes(1));
+    expect(screen.queryByText(/Unable to load the drag & drop editor/)).not.toBeInTheDocument();
+    expect(container.querySelector('#bee-plugin-container')).toBeInTheDocument();
+  });
+
+  it('does not create the editor if it unmounts before the plugin loads', async () => {
+    let resolveLoad;
+    loadBeePlugin.mockReturnValue(new Promise((resolve) => { resolveLoad = resolve; }));
+    const { unmount } = render(<BeeEditor {...defaultProps} />);
+    unmount();
+    resolveLoad(mockBeePlugin);
+    await Promise.resolve();
+    expect(mockBeePlugin.create).not.toHaveBeenCalled();
+  });
+});

package/v2Containers/BeePopupEditor/index.js

@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
+import { loadBeePlugin } from '../../utils/beePluginLoader';
 import TagList from '../TagList';
 import {
   ANDROID, BEE_LAYOUT_OPTIONS, MOBILE, UNSUBSCRIBE,
@@ -113,18 +114,29 @@ function BeePopupEditor(props) {
         saveBeeData(jsonFile, htmlFile, device);
       },
     };
-    window.BeePlugin.create(tokenData, beeConfig, (instance) => {
-      beePluginInstance = instance;
-      beeInstanceRef.current = instance;
-      // Use ref to get the latest beeJson — the closure captures the value at effect time,
-      // but beeJsonRef.current is always up-to-date (e.g. when template data loads async)
-      const latestBeeJson = beeJsonRef.current;
-      const parseJson = typeof latestBeeJson === 'string' ? JSON.parse(latestBeeJson) : latestBeeJson;
-      beePluginInstance.start(parseJson);
-      saveBeeInstance(beePluginInstance, device);
-      isInitializedRef.current = true;
-    });
+    let isEffectCancelled = false;
+    loadBeePlugin()
+      .then((BeePlugin) => {
+        if (isEffectCancelled) {
+          return;
+        }
+        BeePlugin.create(tokenData, beeConfig, (instance) => {
+          beePluginInstance = instance;
+          beeInstanceRef.current = instance;
+          // Use ref to get the latest beeJson — the closure captures the value at effect time,
+          // but beeJsonRef.current is always up-to-date (e.g. when template data loads async)
+          const latestBeeJson = beeJsonRef.current;
+          const parseJson = typeof latestBeeJson === 'string' ? JSON.parse(latestBeeJson) : latestBeeJson;
+          beePluginInstance.start(parseJson);
+          saveBeeInstance(beePluginInstance, device);
+          isInitializedRef.current = true;
+        });
+      })
+      .catch((error) => {
+        console.error('[BeePopupEditor] Error creating BEE plugin:', error);
+      });
     return () => {
+      isEffectCancelled = true;
       clearInterval(intervalTimer);
       // Reset initialization flag when component unmounts or layout changes
       isInitializedRef.current = false;