@capillarytech/creatives-library 8.0.246-alpha.0 → 8.0.246

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -92,12 +92,9 @@ const TestAndPreviewSlidebox = (props) => {
     const activeTab = currentTabData?.activeTab;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
 
-    // Use templateContent or fall back to content prop
-    const initialContent = templateContent || content;
-
-    if (initialContent) {
+    if (templateContent) {
       return {
-        resolvedBody: initialContent,
+        resolvedBody: templateContent,
         resolvedTitle: formData['template-subject'] || ''
       };
     }
@@ -115,14 +112,14 @@ const TestAndPreviewSlidebox = (props) => {
   const resolveTagsInText = (text, tagValues) => {
     if (!text) return text;
     let resolvedText = text;
-
+    
     // Replace each tag with its custom value
     Object.keys(tagValues).forEach((tagPath) => {
       const tagName = tagPath.split('.').pop(); // Get the actual tag name from the path
       const tagRegex = new RegExp(`{{${tagName}}}`, 'g');
       resolvedText = resolvedText.replace(tagRegex, tagValues[tagPath] || `{{${tagName}}}`);
     });
-
+    
     return resolvedText;
   };
 
@@ -131,7 +128,7 @@ const TestAndPreviewSlidebox = (props) => {
     const currentTabData = formData[currentTab - 1];
     const activeTab = currentTabData?.activeTab;
     const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
-
+    
     if (isDragDrop && beeContent) {
       return beeContent; // Use BEE content if available
     }
@@ -233,7 +230,7 @@ const TestAndPreviewSlidebox = (props) => {
           actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
         }
       }
-
+      
       actions.fetchTestCustomersRequested();
       actions.fetchTestGroupsRequested();
     }
@@ -245,20 +242,17 @@ const TestAndPreviewSlidebox = (props) => {
     const activeTab = currentTabData?.activeTab;
     const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
-
-    // Fallback to content prop if templateContent is missing (for HTML editor)
-    const contentToUse = templateContent || content;
-
-    if (contentToUse && (typeof contentToUse === 'string' && contentToUse.trim() !== '')) {
+    
+    if (templateContent && templateContent.trim() !== '') {
       // Common function to handle content update
-      const handleContentUpdate = (newContent) => {
+      const handleContentUpdate = (content) => {
         setPreviewDataHtml({
-          resolvedBody: newContent,
+          resolvedBody: content,
           resolvedTitle: formData['template-subject'] || ''
         });
 
         // Extract tags from content
-        const payloadContent = convert(newContent, GLOBAL_CONVERT_OPTIONS);
+        const payloadContent = convert(content, GLOBAL_CONVERT_OPTIONS);
         actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
       };
 
@@ -270,13 +264,13 @@ const TestAndPreviewSlidebox = (props) => {
           handleContentUpdate(templateContent);
         }
       } else {
-        // For CKEditor/HTML, only update if content changed
-        if (contentToUse !== previewDataHtml?.resolvedBody) {
-          handleContentUpdate(contentToUse);
+        // For CKEditor, only update if content changed
+        if (templateContent !== previewDataHtml?.resolvedBody) {
+          handleContentUpdate(templateContent);
         }
       }
     }
-  }, [formData, currentTab, content]);
+  }, [formData, currentTab]);
 
   // Cleanup effect to reset ref when slidebox closes
   useEffect(() => {
@@ -372,10 +366,10 @@ const TestAndPreviewSlidebox = (props) => {
   useEffect(() => {
     if (selectedCustomer) {
       setTagsExtracted(true); // Auto-open custom values editor
-
+      
       // Get all available tags
       const allTags = [...requiredTags, ...optionalTags];
-
+      
       if (allTags.length > 0) {
         const payload = {
           channel: EMAIL,
@@ -397,7 +391,7 @@ const TestAndPreviewSlidebox = (props) => {
         updatedValues[tag?.fullPath] = prefilledValues[tag?.fullPath] || '';
       });
 
-
+      
       setCustomValues(updatedValues);
 
       // Update preview with prefilled values
@@ -445,10 +439,10 @@ const TestAndPreviewSlidebox = (props) => {
     setSelectedTestEntities([]);
     setBeeContent('');
     previousBeeContentRef.current = '';
-
+    
     // Clear any pending actions
     actions.clearPrefilledValues();
-
+    
     // Call parent's onClose if provided
     if (onClose) {
       onClose();
@@ -463,7 +457,7 @@ const TestAndPreviewSlidebox = (props) => {
   const handleCustomerSelect = (customer) => {
     setSelectedCustomer(customer);
     setTagsExtracted(true); // Auto-open custom values editor
-
+    
     // Clear any existing values while waiting for prefilled values
     const emptyValues = {};
     [...requiredTags, ...optionalTags].forEach((tag) => {
@@ -474,7 +468,7 @@ const TestAndPreviewSlidebox = (props) => {
 
   const handleClearSelection = () => {
     setSelectedCustomer(null);
-
+    
     // Initialize empty values for all tags
     const emptyValues = {};
     [...requiredTags, ...optionalTags].forEach((tag) => {
@@ -565,12 +559,12 @@ const TestAndPreviewSlidebox = (props) => {
     const currentTabData = formData[currentTab - 1];
     const activeTab = currentTabData?.activeTab;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
-
+    
     // Check for personalization tags (excluding unsubscribe)
     const content = templateContent || getCurrentContent;
     const tags = content.match(/{{[^}]+}}/g) || [];
     const hasPersonalizationTags = tags.some(tag => !tag.includes('unsubscribe'));
-
+    
     if (!hasPersonalizationTags && tags.length === 1 && tags[0].includes('unsubscribe')) {
       // If only unsubscribe tag is present, show noTagsExtracted message
       setTagsExtracted(false);
@@ -579,7 +573,7 @@ const TestAndPreviewSlidebox = (props) => {
       setCustomValues({});
       return;
     }
-
+    
     // Extract tags
     setTagsExtracted(true);
     if (templateContent) {

package/v2Containers/BeeEditor/index.js

@@ -3,14 +3,16 @@
 * 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 { bindActionCreators, compose } from 'redux';
+import TagList from '../TagList';
+import { bindActionCreators } 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";
@@ -19,18 +21,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 config from '../../config/app';
-import makeSelectBEE from './selectors';
+import  CapAskAira  from '@capillarytech/cap-ui-library/CapAskAira';
+import { request,getAPICallObject } from '../../services/api';
 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 TagList from '../TagList';
-import injectSaga from '../../utils/injectSaga';
+import { compose } from 'redux';
 
 import { selectCurrentOrgDetails } from '../Cap/selectors';
+import { ENABLE_AI_SUGGESTIONS } from './constants';
 function BeeEditor(props) {
   const {
     uid,
@@ -59,10 +61,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);
@@ -70,10 +72,6 @@ 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}`;
@@ -96,8 +94,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]);
@@ -106,44 +104,7 @@ 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',
@@ -226,53 +187,14 @@ function BeeEditor(props) {
         actions.createCustomRow(JSON.parse(rowJSON), callbackSaveRow);
       },
     };
-
-    // 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]);
+    window.BeePlugin.create(tokenData, beeConfig, (instance) => {
+      beePluginInstance = instance;
+      const parseJson = JSON.parse(beeJson);
+      beePluginInstance.start(parseJson);
+      saveBeeInstance(beePluginInstance);
+    });
+    return () => clearInterval(intervalTimer);
+  }, []);
   const callbackSaveRow = (status, errorMsg) => {
     if (status === 'success') {
       CapNotification.success({message: formatMessage(messages.rowCreationSuccessMgs), key: 'create-custom-row-success'});
@@ -324,80 +246,76 @@ 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.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
-  tokenData: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+  beeJson: PropTypes.object.isRequired,
+  tokenData: PropTypes.object.isRequired,
   uid: PropTypes.string.isRequired,
   intl: intlShape.isRequired,
   actions: PropTypes.object.isRequired,
@@ -418,7 +336,7 @@ BeeEditor.propTypes = {
 
 const mapStateToProps = () => createStructuredSelector({
   BEESelect: makeSelectBEE(),
-  currentOrgDetails: selectCurrentOrgDetails(),
+  currentOrgDetails: selectCurrentOrgDetails()
 });
 
 function mapDispatchToProps(dispatch) {