@capillarytech/creatives-library 8.0.255-alpha.4 → 8.0.255

package/v2Containers/BeeEditor/index.js

@@ -3,16 +3,14 @@
 * Beeeditor
 *
 */
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import React, {
+  useEffect, useState, useRef, useCallback,
+} from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
-import TagList from '../TagList';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, compose } from 'redux';
 import { createStructuredSelector } from 'reselect';
-import makeSelectBEE from './selectors';
-import { UserIsAuthenticated } from '../../utils/authWrapper';
-import config from '../../config/app';
 import { loadItem } from 'services/localStorageApi';
 import './index.scss';
 import CapModal from "@capillarytech/cap-ui-library/CapModal";
@@ -21,18 +19,18 @@ 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  CapAskAira  from '@capillarytech/cap-ui-library/CapAskAira';
-import { request,getAPICallObject } from '../../services/api';
+import config from '../../config/app';
+import makeSelectBEE from './selectors';
 import messages from './messages';
 import * as beeActions from './actions';
-import injectSaga from '../../utils/injectSaga';
 import injectReducer from '../../utils/injectReducer';
 import { v2BeeEditionSagas } from './sagas';
 import v2BeeEditionReducer from './reducer';
-import { compose } from 'redux';
+
+import TagList from '../TagList';
+import injectSaga from '../../utils/injectSaga';
 
 import { selectCurrentOrgDetails } from '../Cap/selectors';
-import { ENABLE_AI_SUGGESTIONS } from './constants';
 function BeeEditor(props) {
   const {
     uid,
@@ -61,10 +59,10 @@ function BeeEditor(props) {
   const UNSUBSCRIBE = 'unsubscribe';
   let beePluginInstance = null;
   const categoryOptions = [{key: 'cta', value: 'cta', label: formatMessage(messages.cta)},
-  {key: 'footer', value: 'footer', label: formatMessage(messages.footer)},
-  {key: 'header', value: 'header', label: formatMessage(messages.header)},
-  {key: 'sp', value: 'sp', label: formatMessage(messages.socialPlatform)},
-  {key: 'others', value: 'others', label: formatMessage(messages.others)},
+    {key: 'footer', value: 'footer', label: formatMessage(messages.footer)},
+    {key: 'header', value: 'header', label: formatMessage(messages.header)},
+    {key: 'sp', value: 'sp', label: formatMessage(messages.socialPlatform)},
+    {key: 'others', value: 'others', label: formatMessage(messages.others)},
   ];
   const [visibleTaglist, setVisibleTaglist] = useState(false);
   const [showRowMetaModal, setRowMetaModal] = useState(false);
@@ -72,6 +70,10 @@ function BeeEditor(props) {
   const [rowMetaInfo, setRowMetaInfo] = useState({});
   const [rowName, setRowName] = useState('');
   const [rowCategory, setRowCategory] = useState('');
+  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
+  const tokenDataRef = useRef(tokenData); // Store latest tokenData in ref
   let API_ENDPOINT = config.development.api_endpoint;
   if (process.env.NODE_ENV === 'production') {
     API_ENDPOINT = `${window.location.origin}${config.production.api_endpoint}`;
@@ -94,8 +96,8 @@ function BeeEditor(props) {
     locale = JSON.parse(user).lang;
   }
   const defaultFormattedUrl = locale !== DEFAULT_LOCALE && ['zh-cn', 'zh', 'jp', 'ja-JP'].includes(locale)
-      ? `${API_ENDPOINT}/common/getBEECustomLangunage?langid=${MAPPED_LOCALE[locale]}`
-      : "";
+    ? `${API_ENDPOINT}/common/getBEECustomLangunage?langid=${MAPPED_LOCALE[locale]}`
+    : "";
   useEffect(() => {
     savedCallback.current = Object.keys(selectedTag).length > 0 ? selectedTag : rowMetaInfo;
   }, [selectedTag, rowMetaInfo]);
@@ -104,7 +106,44 @@ function BeeEditor(props) {
     const externalContentURLs = categoryOptions.map((obj) => ({name: obj.label, value: `${API_ENDPOINT}/common/getCustomRows?category=${obj.value}&orgid=${loadItem('orgID')}`}));
     return externalContentURLs;
   };
+  // Keep tokenDataRef updated with latest tokenData
+  useEffect(() => {
+    tokenDataRef.current = tokenData;
+  }, [tokenData]);
+
   useEffect(() => {
+    // Only initialize if we have both tokenData and beeJson
+    const currentTokenData = tokenDataRef.current;
+    if (!currentTokenData || !beeJson) {
+      return;
+    }
+
+    // Normalize beeJson for comparison (handle both string and object)
+    // Use a stable key that includes uid to uniquely identify this instance
+    let normalizedBeeJson;
+    try {
+      normalizedBeeJson = typeof beeJson === 'string' ? beeJson : JSON.stringify(beeJson);
+    } catch (e) {
+      console.warn('[BeeEditor] Error stringifying beeJson:', e);
+      normalizedBeeJson = String(beeJson);
+    }
+    const initializationKey = `${uid}-${normalizedBeeJson}`;
+
+    // Only initialize if:
+    // 1. We haven't initialized yet, OR
+    // 2. The beeJson has changed (different template)
+    // This prevents re-initialization when only tokenData changes
+    // Also check if initialization is already in progress to prevent concurrent calls
+    if (
+      (initializedBeeJsonRef.current === initializationKey && beePluginInstanceRef.current) ||
+      isInitializingRef.current
+    ) {
+      return; // Already initialized for this beeJson or initialization in progress, skip
+    }
+
+    // Mark that we're starting initialization
+    isInitializingRef.current = true;
+
     const beeConfig = {
       uid,
       container: 'bee-plugin-container',
@@ -187,14 +226,53 @@ function BeeEditor(props) {
         actions.createCustomRow(JSON.parse(rowJSON), callbackSaveRow);
       },
     };
-    window.BeePlugin.create(tokenData, beeConfig, (instance) => {
-      beePluginInstance = instance;
-      const parseJson = JSON.parse(beeJson);
-      beePluginInstance.start(parseJson);
-      saveBeeInstance(beePluginInstance);
-    });
-    return () => clearInterval(intervalTimer);
-  }, []);
+
+    // Clean up previous instance if it exists
+    if (beePluginInstanceRef.current) {
+      try {
+        beePluginInstanceRef.current.destroy();
+      } catch (e) {
+        console.warn('[BeeEditor] useEffect - Error destroying previous BEE plugin:', e);
+      }
+      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;
+        isInitializingRef.current = false;
+      });
+    } catch (error) {
+      // Reset flag on error
+      console.error('[BeeEditor] Error creating BEE plugin:', error);
+      isInitializingRef.current = false;
+    }
+    return () => {
+      clearInterval(intervalTimer);
+      // Reset initialization flag on cleanup
+      isInitializingRef.current = false;
+      // Clean up BEE plugin instance if it exists
+      if (beePluginInstanceRef.current) {
+        try {
+          beePluginInstanceRef.current.destroy();
+        } catch (e) {
+          console.warn('[BeeEditor] useEffect cleanup - Error destroying BEE plugin:', e);
+        }
+        beePluginInstanceRef.current = null;
+      }
+      // Note: We don't reset initializedBeeJsonRef here because:
+      // 1. If beeJson changes, the effect will run again and the check will allow re-initialization
+      // 2. If component unmounts, the ref will be garbage collected anyway
+    };
+    // Only depend on beeJson, uid, and id - not tokenData
+    // tokenData is accessed via ref to prevent re-initialization when it changes
+  }, [beeJson, uid, id]);
   const callbackSaveRow = (status, errorMsg) => {
     if (status === 'success') {
       CapNotification.success({message: formatMessage(messages.rowCreationSuccessMgs), key: 'create-custom-row-success'});
@@ -246,76 +324,80 @@ function BeeEditor(props) {
   const onChangeCategoy = (e) => {
     setRowCategory(e);
   };
-  const contentSection = <>
-    <CapInput
-      label={<FormattedMessage {...messages.rowName} />}
-      placeholder={formatMessage(messages.rowPlaceHolder)}
-      onChange={onRowChange}
-      value={rowName}
-      maxLength={50}
-      style={{ width: 324, paddingBottom: 21 }}
-    />
-    <CapSelect
-      label="Category"
-      style={{ width: 324, paddingBottom: 24}}
-      options={categoryOptions}
-      value={rowCategory || undefined}
-      placeholder={<FormattedMessage {...messages.selectCategoyPlaceholder} />}
-      onChange={onChangeCategoy}
-    />
+  const contentSection = (
+    <>
+      <CapInput
+        label={<FormattedMessage {...messages.rowName} />}
+        placeholder={formatMessage(messages.rowPlaceHolder)}
+        onChange={onRowChange}
+        value={rowName}
+        maxLength={50}
+        style={{ width: 324, paddingBottom: 21 }}
+      />
+      <CapSelect
+        label="Category"
+        style={{ width: 324, paddingBottom: 24}}
+        options={categoryOptions}
+        value={rowCategory || undefined}
+        placeholder={<FormattedMessage {...messages.selectCategoyPlaceholder} />}
+        onChange={onChangeCategoy}
+      />
 
-  </>;
+    </>
+  );
   return (
-      <CapSpin spinning={saveRowRequest || false}>
-        <div id="bee-plugin-container" style={{ height: "650px" }}></div>
-        <TagList
-          moduleFilterEnabled={moduleFilterEnabled}
-          label={label}
-          onTagSelect={onTagSelect}
-          location={location}
-          tags={filteredTags}
-          injectedTags={injectedTags}
-          className={className}
-          id={id}
-          userLocale={userLocale}
-          selectedOfferDetails={selectedOfferDetails}
-          visibleTaglist={visibleTaglist}
-          hidePopover
-          modalProps={{
-            onCancel: onCancelTagList,
-            style: { left: 135, top: 250 },
-            className: "bee-editor-tag-list",
-          }}
-          onContextChange={onContextChange}
-          eventContextTags={eventContextTags}
-        />
-        <CapModal
-          className="custom-row-modal"
-          visible={showRowMetaModal}
-          onCancel={onCustomRowCancel}
-          title={formatMessage(messages.customRows)}
-          style={{ width: 372, height: 296, left: 135, top: 300 }}
-          footer={[
-            <CapButton
-              key="submit"
-              type="primary"
-              id="delete-version"
-              onClick={onCustomRowSave}
-              disabled={isDisableSave()}
-            >
-              {formatMessage(messages.done)}
-            </CapButton>,
-          ]}
-        >
-          {contentSection}
-        </CapModal>
-      </CapSpin>
+    <CapSpin spinning={saveRowRequest || false}>
+      <div id="bee-plugin-container" style={{ height: "650px" }}></div>
+      <TagList
+        moduleFilterEnabled={moduleFilterEnabled}
+        label={label}
+        onTagSelect={onTagSelect}
+        location={location}
+        tags={filteredTags}
+        injectedTags={injectedTags}
+        className={className}
+        id={id}
+        userLocale={userLocale}
+        selectedOfferDetails={selectedOfferDetails}
+        visibleTaglist={visibleTaglist}
+        hidePopover
+        modalProps={{
+          onCancel: onCancelTagList,
+          style: { left: 135, top: 250 },
+          className: "bee-editor-tag-list",
+        }}
+        onContextChange={onContextChange}
+        eventContextTags={eventContextTags}
+      />
+      <CapModal
+        className="custom-row-modal"
+        visible={showRowMetaModal}
+        onCancel={onCustomRowCancel}
+        title={formatMessage(messages.customRows)}
+        style={{
+          width: 372, height: 296, left: 135, top: 300,
+        }}
+        footer={[
+          <CapButton
+            key="submit"
+            type="primary"
+            id="delete-version"
+            onClick={onCustomRowSave}
+            disabled={isDisableSave()}
+          >
+            {formatMessage(messages.done)}
+          </CapButton>,
+        ]}
+      >
+        {contentSection}
+      </CapModal>
+    </CapSpin>
   );
 }
 
 BeeEditor.propTypes = {
-  beeJson: PropTypes.object.isRequired,
-  tokenData: PropTypes.object.isRequired,
+  beeJson: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+  tokenData: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
   uid: PropTypes.string.isRequired,
   intl: intlShape.isRequired,
   actions: PropTypes.object.isRequired,
@@ -336,7 +418,7 @@ BeeEditor.propTypes = {
 
 const mapStateToProps = () => createStructuredSelector({
   BEESelect: makeSelectBEE(),
-  currentOrgDetails: selectCurrentOrgDetails()
+  currentOrgDetails: selectCurrentOrgDetails(),
 });
 
 function mapDispatchToProps(dispatch) {

package/v2Containers/BeePopupEditor/_beePopupEditor.scss

@@ -0,0 +1,14 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.bee-popup-editor {
+  &__container {
+    height: 46.5rem;
+  }
+}
+
+.bee-editor-tag-list {
+  &--positioned {
+    left: 9.643rem;
+    top: 17.857rem;
+  }
+}

package/v2Containers/BeePopupEditor/constants.js

@@ -0,0 +1,10 @@
+export const BEE_LAYOUT_OPTIONS = {
+  POPUP: "classic-center",
+  HEADER: "bar-top",
+  FOOTER: "bar-bottom",
+  FULLSCREEN: "classic-center",
+};
+export const MOBILE = "mobile";
+export const UNSUBSCRIBE = 'unsubscribe';
+export const ANDROID = 'ANDROID';
+export const IOS = 'IOS';

package/v2Containers/BeePopupEditor/index.js

@@ -0,0 +1,194 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
+// import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import { UserIsAuthenticated } from '../../utils/authWrapper';
+import TagList from '../TagList';
+import {
+  ANDROID, BEE_LAYOUT_OPTIONS, MOBILE, UNSUBSCRIBE,
+} from './constants';
+import emptyAndroidSvg from '../../assets/Android.png';
+import emptyIosSvg from '../../assets/iOS.png';
+import './_beePopupEditor.scss';
+function BeePopupEditor(props) {
+  const {
+    uid,
+    id,
+    tokenData,
+    saveBeeInstance,
+    saveBeeData,
+    saveBeeHtmlValue,
+    beeJson,
+    templateLayoutType,
+    moduleFilterEnabled,
+    label,
+    location,
+    injectedTags,
+    className,
+    userLocale,
+    selectedOfferDetails,
+    tags,
+    onContextChange,
+    device,
+  } = props;
+
+  let beePluginInstance = null;
+  let intervalTimer;
+  const savedCallback = useRef();
+  const beeInstanceRef = useRef(null);
+  const isInitializedRef = useRef(false);
+
+  const [visibleTaglist, setVisibleTaglist] = useState(false);
+  const [selectedTag, setSelectedTag] = useState({});
+  const filteredTags = (tags || []).filter((obj) => obj.definition.value !== UNSUBSCRIBE);
+
+  useEffect(() => {
+    // Only recreate BEE editor when layout type changes, not when content (beeJson) changes
+    // If beeJson is in dependencies, editor reloads on every keystroke!
+    const beeConfig = {
+      uid,
+      trackChanges: true,
+      container: 'bee-plugin-container',
+      workspace: {
+        popup: {
+          backgroundImageMobile: device === ANDROID ? emptyAndroidSvg : emptyIosSvg,
+          layout: BEE_LAYOUT_OPTIONS[templateLayoutType],
+          customStyles: {
+            container: {
+              width: "90%",
+              margin: "1.5rem",
+            },
+          },
+        },
+        stage: MOBILE,
+        hideStageToggle: true,
+      },
+      contentDialog: {
+        mergeTags: {
+          label: 'Add Label',
+          handler: async (resolve, reject) => {
+            // this will open tag modal
+            await setVisibleTaglist(true);
+            // until tag modal will not open promise will not execute
+            // once tag modal is opened it will start 2 sec interval to wait use has selected any tag or cancel the tag selection
+            const promise = new Promise((resolveP) => {
+              intervalTimer = setInterval(() => {
+                // this will execute, if user cancel the tag selection
+                if ((savedCallback.current || {}).close === true) {
+                  reject();
+                  clearInterval(intervalTimer);
+                  return;
+                }
+                // this block is checking use has selected any tag or not
+                if (Object.keys(savedCallback.current || {}).length > 0) {
+                  resolveP(savedCallback.current);
+                  setSelectedTag({});
+                  clearInterval(intervalTimer);
+                }
+              }, 2000);
+            });
+            // once prmise will resolve , pass the resolve data to handler to show tags in bee edior
+            const result = await promise;
+            resolve(result);
+          },
+        },
+      },
+      onChange: (jsonFile, htmlFile) => {
+        saveBeeData(jsonFile, htmlFile, device);
+      },
+      onSave: (jsonFile, htmlFile) => {
+        // onSave provides the actual HTML value, use it to update beeHtml.value
+        if (saveBeeHtmlValue && htmlFile) {
+          saveBeeHtmlValue(htmlFile, device);
+        }
+        // Also call saveBeeData to update JSON
+        saveBeeData(jsonFile, htmlFile, device);
+      },
+    };
+    window.BeePlugin.create(tokenData, beeConfig, (instance) => {
+      beePluginInstance = instance;
+      beeInstanceRef.current = instance;
+      // Check if beeJson is already an object (happens when layout type changes)
+      const parseJson = typeof beeJson === 'string' ? JSON.parse(beeJson) : beeJson;
+      beePluginInstance.start(parseJson);
+      saveBeeInstance(beePluginInstance, device);
+      isInitializedRef.current = true;
+    });
+    return () => {
+      clearInterval(intervalTimer);
+      // Reset initialization flag when component unmounts or layout changes
+      isInitializedRef.current = false;
+    };
+    // IMPORTANT: Only include templateLayoutType, NOT beeJson
+    // beeJson changes on every keystroke and would cause editor to reload constantly
+  }, [templateLayoutType]);
+
+  useEffect(() => {
+    savedCallback.current = Object?.keys(selectedTag)?.length > 0 && selectedTag;
+  }, [selectedTag]);
+
+  const onTagSelect = (result) => {
+    const msg = {
+      name: result,
+      value: `{{${result}}}`,
+    };
+    setSelectedTag(msg);
+    setVisibleTaglist(false);
+  };
+
+  const onCancelTagList = () => {
+    setVisibleTaglist(false);
+    setSelectedTag({ close: true });
+  };
+
+  return (
+    <CapRow>
+      <div id="bee-plugin-container" className="bee-popup-editor__container"></div>
+      <TagList
+        moduleFilterEnabled={moduleFilterEnabled}
+        label={label}
+        onTagSelect={onTagSelect}
+        location={location}
+        tags={filteredTags}
+        injectedTags={injectedTags}
+        className={className}
+        id={id}
+        userLocale={userLocale}
+        selectedOfferDetails={selectedOfferDetails}
+        visibleTaglist={visibleTaglist}
+        hidePopover
+        modalProps={{
+          onCancel: onCancelTagList,
+          className: "bee-editor-tag-list bee-editor-tag-list--positioned",
+        }}
+        onContextChange={onContextChange}
+      />
+    </CapRow>
+  );
+}
+BeePopupEditor.propTypes = {
+  saveBeeData: PropTypes.func.isRequired,
+  saveBeeInstance: PropTypes.func.isRequired,
+  beeJson: PropTypes.object.isRequired,
+  tokenData: PropTypes.object.isRequired,
+  uid: PropTypes.string.isRequired,
+  templateLayoutType: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  moduleFilterEnabled: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  location: PropTypes.object.isRequired,
+  injectedTags: PropTypes.array.isRequired,
+  className: PropTypes.string.isRequired,
+  userLocale: PropTypes.string.isRequired,
+  selectedOfferDetails: PropTypes.object.isRequired,
+  tags: PropTypes.array.isRequired,
+  onContextChange: PropTypes.func.isRequired,
+  device: PropTypes.string.isRequired,
+};
+const mapStateToProps = () => createStructuredSelector({});
+
+function mapDispatchToProps() { }
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(BeePopupEditor)));