@capillarytech/creatives-library 8.0.236-alpha.4 → 8.0.236-beta.0

package/HOW_BEE_EDITOR_WORKS.md

@@ -0,0 +1,375 @@
+Tracing how the BEE editor is loaded in the Email create and edit flows. Searching the codebase for relevant code.
+
+
+[5 tools called]
+
+
+Reviewing key files to understand the flow:
+
+
+[4 tools called]
+
+
+Reviewing how BEE editor gets initialized with token and JSON data:
+
+
+[4 tools called]
+
+
+Reviewing the edit flow initialization:
+
+
+[1 tool called]
+
+
+## How BEE Editor is Loaded in Email Create and Edit Flows
+
+### Overview
+The BEE editor loads via a multi-step process that fetches CMS settings (token and JSON) and renders the editor component when conditions are met.
+
+---
+
+## CREATE FLOW
+
+### 1. Initial Setup (EmailWrapper)
+Location: `app/v2Containers/EmailWrapper/hooks/useEmailWrapper.js`
+
+- User selects "Use Editor" mode
+- When step is `TEMPLATE_SELECTION` and templates are needed:
+```223:230:app/v2Containers/EmailWrapper/hooks/useEmailWrapper.js
+      case STEPS.TEMPLATE_SELECTION:
+        const needsTemplates = emailCreateMode === EMAIL_CREATE_MODES.EDITOR
+          && !CmsTemplates
+          && !getCmsTemplatesInProgress;
+
+        if (needsTemplates) {
+          templatesActions.getDefaultBeeTemplates();
+        }
+```
+- User selects a template → `handleEdmDefaultTemplateSelection` is called
+- Sets `selectedCreateMode` to `EDITOR` and stores the selected template
+
+### 2. Email Component Initialization
+Location: `app/v2Containers/Email/index.js`
+
+In `componentWillMount`:
+```208:219:app/v2Containers/Email/index.js
+    const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
+    const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
+    if (!_.isEmpty(this.props.Templates.BEETemplate)) {
+      if (this.props.Templates.BEETemplate.versions.base.is_drag_drop && isBEEAppEnable ) {
+        this.setState({isDragDrop: true});
+      }
+      if (this.props.params.id) {
+        this.props.actions.getCmsSetting(BEE_PLUGIN, _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id', this.props.Templates.BEETemplate?._id), 'open', undefined, isBEESupport, isBEEAppEnable);
+      } else if (this.props.location.query.module !== "library" || (this.props.location.query.module === "library" && !this.props.templateData)) {
+        this.props.actions.getCmsSetting(BEE_PLUGIN, _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id', this.props.Templates.BEETemplate?._id), 'create', undefined, isBEESupport, isBEEAppEnable);
+      }
+    }
+```
+
+- For create flow: calls `getCmsSetting` with `cmsMode: 'create'`
+- This fetches the BEE token and settings from the API
+
+### 3. Receiving CMS Settings
+Location: `app/v2Containers/Email/index.js` - `componentWillReceiveProps`
+
+When `CmsSettings` are received:
+```379:419:app/v2Containers/Email/index.js
+      if (!_.isEmpty(nextProps.Email.CmsSettings) && !_.isEqual(this.props.Email.CmsSettings, nextProps.Email.CmsSettings) && !_.isEmpty(this.state.schema)) {
+        const apiLangId = nextProps.Email.CmsSettings.langId;
+        const langId = nextProps.Email.CmsSettings.langId !== "undefined" ? nextProps.Email.CmsSettings.langId : nextProps.currentOrgDetails.basic_details.base_language;
+
+        const formData = _.cloneDeep(this.state.formData);
+
+        const schema = _.cloneDeep(this.state.schema);
+        const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
+
+        const temp = (schema.containers || {})[this.state.currentTab - 1];
+
+        const { currentTab } = this.state;
+        if (nextProps.Email.CmsSettings.isDragDrop && this.checkBeeEditorAllowedForLibrary()) {
+          const beeJson = `BEEeditor${currentTab > 1 ? currentTab : ''}json`;
+          const beeToken = `BEEeditor${currentTab > 1 ? currentTab : ''}token`;
+          let beeJsonValue = _.get(nextProps, 'Templates.BEETemplate.versions.base.json-content', '');
+          const selectedId = _.get(this.props, 'Email.templateDetails._id', '') || _.get(this.props, 'Templates.BEETemplate.versions.base.drag_drop_id', '');
+          if (this.state.isEdit) {
+            if (this.props.location.query.module === "library") {
+              beeJsonValue = _.get(this.state, `formData[${currentTab - 1}][${langId}].json-content`, '');
+            } else {
+              beeJsonValue = _.get(nextProps, `Email.templateDetails.versions.base[${langId}].json-content`, '');
+            }
+          }
+          formData[`${currentTab - 1}`][langId] = {
+            ...formData[`${currentTab - 1}`][langId],
+            is_drag_drop: true,
+            [beeJson]: beeJsonValue,
+            [beeToken]: nextProps.Email.CmsSettings.tokenData,
+            id: selectedId,
+          };
+          _.forEach(temp.panes, (pane, index) => {
+            const tempPane = pane;
+            //
+            if (parseInt(index, 10) === parseInt(langIndex, 10)) {
+              //
+              tempPane.sections[0].inputFields[0].cols[1].colStyle = {display: ""};
+              tempPane.sections[0].inputFields[0].cols[0].colStyle = {display: "none"};
+            }
+          });
+          this.setState({schema, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1});
+```
+
+- Stores `tokenData` and `json-content` in formData
+- Updates schema to show BEE editor (hide CKEditor)
+- Sets `is_drag_drop: true`
+
+### 4. FormBuilder Renders BEE Editor
+Location: `app/v2Components/FormBuilder/index.js`
+
+When schema type is `"BEEeditor"`:
+```3976:4027:app/v2Components/FormBuilder/index.js
+          case "BEEeditor": {
+            let langTab = 1;
+            if (val.id.match(/BEEeditor/g)) {
+              if (val.id.length > 9 && val.id.charAt(9)) {
+                langTab = val.id.charAt(9);
+              }
+            }
+            const { currentTab, formData } = this.state;
+            const supportedLanguages = (formData[currentTab - 1] || {}).selectedLanguages || {};
+            const currentLang = supportedLanguages[langTab - 1];
+
+            let beeJson = '',
+              beeToken = '',
+              uuid = '';
+            const data = formData[`${currentTab - 1}`][currentLang];
+            if (data) {
+              beeJson = data[`BEEeditor${currentTab > 1 ? currentTab : ''}json`];
+              beeToken = data[`BEEeditor${currentTab > 1 ? currentTab : ''}token`];
+              uuid = this.props.uuid;
+            }
+            if (!beeJson || !beeToken) {
+              return false;
+            }
+            let isModuleFilterEnabled = _.get(this.props.location, 'query.type', '') !== 'embedded';
+            const schemaChannel = _.get(this.props.schema, 'channel', "");
+            if (schemaChannel === 'EMAIL') {
+              isModuleFilterEnabled = this.props.isFullMode;
+            }
+            columns.push(
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow() && "error-boundary"}`}>
+                <BeeEditor
+                  uid={uuid}
+                  tokenData={beeToken}
+                  id={val.id}
+                  beeJson={beeJson}
+                  showTagsPopover={this.showTagsPopover}
+                  location={this.props.location}
+                  label={val.label || ''}
+                  className={val.className || ''}
+                  userLocale={this.props.userLocale}
+                  selectedOfferDetails={this.props.selectedOfferDetails}
+                  tags={this.props.tags || []}
+                  injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
+                  saveBeeInstance={this.props.saveBeeInstance}
+                  saveBeeData={this.props.saveBeeData}
+                  onContextChange={this.props.onContextChange}
+                  moduleFilterEnabled={isModuleFilterEnabled}
+                  eventContextTags={this.props?.eventContextTags}
+                />
+              </CapColumn>
+            );
+          }
+```
+
+- Extracts `beeJson` and `beeToken` from formData
+- Renders `<BeeEditor>` with these props
+
+### 5. BeeEditor Component Initialization
+Location: `app/v2Containers/BeeEditor/index.js`
+
+In `useEffect`:
+```107:197:app/v2Containers/BeeEditor/index.js
+  useEffect(() => {
+    const beeConfig = {
+      uid,
+      container: 'bee-plugin-container',
+      translationsUrl: defaultFormattedUrl,
+      rowsConfiguration: {
+        emptyRows: true,
+        defaultRows: true,
+        externalContentURLs: getExternalContentURLs(),
+      },
+      contentDialog: {
+        specialLinks: {
+          label: UNSUBSCRIBE,
+          handler(resolve) {
+            resolve({
+              type: 'custom',
+              label: UNSUBSCRIBE,
+              link: `{{${UNSUBSCRIBE}}}`,
+            });
+          },
+        },
+        mergeTags: {
+          label: formatMessage(messages.addLabel),
+          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);
+          },
+        },
+        saveRow: {
+          handler: async (resolve, reject) => {
+            await setRowMetaModal(true);
+            const promise = new Promise((resolveP) => {
+              intervalTimer = setInterval(() => {
+                if ((savedCallback.current || {}).close === true) {
+                  reject();
+                  clearInterval(intervalTimer);
+                  setRowMetaInfo({});
+                  setRowName('');
+                  setRowCategory('');
+                  return;
+                }
+                if (Object.keys(savedCallback.current || {}).length > 0) {
+                  resolveP(savedCallback.current);
+                }
+              }, 2000);
+            });
+            const result = await promise;
+            resolve(result); // "done!"
+            setRowMetaInfo({});
+            setRowName('');
+            setRowCategory('');
+            clearInterval(intervalTimer);
+          },
+        },
+      },
+      onSave: (jsonFile, htmlFile) => {
+        saveBeeData(jsonFile, htmlFile);
+      },
+      onSaveRow: (rowJSON) => {
+        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);
+  }, []);
+```
+
+- Creates BEE plugin instance with `tokenData`
+- Starts editor with parsed `beeJson`
+- Saves instance reference
+
+---
+
+## EDIT FLOW
+
+### 1. Component Initialization
+Location: `app/v2Containers/Email/index.js`
+
+In `componentWillMount`:
+```193:199:app/v2Containers/Email/index.js
+    if (this.props.params.id || (this.props.location.query.module === "library" && this.props.templateData && !_.isEmpty(this.props.templateData))) {
+      this.setState({isEdit: true}, () => {
+        if (this.props.params.id) {
+          this.props.actions.getTemplateDetails(this.props.params.id, 'email');
+        }
+      });
+    }
+```
+
+- Sets `isEdit: true`
+- Fetches template details if `params.id` exists
+
+### 2. Setting Edit Data
+Location: `app/v2Containers/Email/index.js` - `setEditData`
+
+After template details load:
+```992:1003:app/v2Containers/Email/index.js
+      const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
+      _.forEach((editData.versions.base.selectedLanguages), (language) => {
+        // if (formData[this.state.currentTab - 1].tabKey === formData[this.state.currentTab - 1][language].tabKey) {
+        //   formData[this.state.currentTab - 1].activeTab = language;
+        // }
+        // if (formData.base.tabKey === formData.base[language].tabKey) {
+        //   formData.base.activeTab = language;
+        // }
+        if (language && editData.versions.base[language].is_drag_drop && isBEEAppEnable) {
+          this.props.actions.getCmsSetting(BEE_PLUGIN, editData._id, 'open', language, isBEESupport, isBEEAppEnable);
+        }
+      });
+```
+
+- For each language with `is_drag_drop: true`, calls `getCmsSetting` with `cmsMode: 'open'` and the template `_id`
+
+### 3. Receiving CMS Settings (Same as Create)
+When `CmsSettings` are received, the same logic applies:
+- Stores token and JSON in formData
+- Updates schema to show BEE editor
+- For edit, uses existing `json-content` from template data:
+```396:401:app/v2Containers/Email/index.js
+          if (this.state.isEdit) {
+            if (this.props.location.query.module === "library") {
+              beeJsonValue = _.get(this.state, `formData[${currentTab - 1}][${langId}].json-content`, '');
+            } else {
+              beeJsonValue = _.get(nextProps, `Email.templateDetails.versions.base[${langId}].json-content`, '');
+            }
+          }
+```
+
+### 4. FormBuilder Renders BEE Editor (Same as Create)
+Same rendering logic as create flow.
+
+### 5. BeeEditor Component Initialization (Same as Create)
+Same initialization logic as create flow.
+
+---
+
+## Key Differences: Create vs Edit
+
+| Aspect | Create Flow | Edit Flow |
+|--------|-------------|-----------|
+| CMS Mode | `'create'` | `'open'` |
+| Template ID | From `BEETemplate.versions.base.drag_drop_id` | From `editData._id` |
+| JSON Content | From `BEETemplate.versions.base.json-content` (template default) | From `templateDetails.versions.base[langId].json-content` (saved template) |
+| Trigger | User selects template in EmailWrapper | Template details loaded in `setEditData` |
+
+---
+
+## API Flow
+
+1. `getCmsSetting` action → calls `getCmsTemplateSettingsV2` API
+2. API returns: `tokenData`, `isDragDrop`, `uuid`, `langId`
+3. Redux stores result in `Email.CmsSettings`
+4. Component receives props → updates formData and schema
+5. FormBuilder renders BeeEditor with token and JSON
+6. BeeEditor initializes BEE plugin instance
+
+This flow ensures the BEE editor loads with the correct authentication token and template content for both create and edit scenarios.

package/constants/unified.js

@@ -45,6 +45,7 @@ export const GIFT_CARDS = 'GIFT_CARDS';
 export const PROMO_ENGINE = 'PROMO_ENGINE';
 export const LIQUID_SUPPORT = 'ENABLE_LIQUID_SUPPORT';
 export const ENABLE_NEW_MPUSH = 'ENABLE_NEW_MPUSH';
+export const SUPPORT_CK_EDITOR = 'SUPPORT_CK_EDITOR';
 export const CUSTOM_TAG = 'CustomTagMessage';
 export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';
 export const EXTENDED_TAG = 'ExtendedTagMessage';
@@ -168,7 +169,7 @@ export const JAPANESE_HIDE_DATE_TAGS = [
   "dd.mm.yy",
   "dd Mon",
   "dd/m/yyyy",
-];
+]; 
 
 export const LIQUID_SUPPORTED_CHANNELS = [EMAIL, SMS, MOBILE_PUSH, INAPP];
 

package/initialReducer.js

@@ -15,7 +15,6 @@ import galleryReducer from './v2Containers/Assets/Gallery/reducer';
 import CapCollapsibleLeftNavigationReducer from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer';
 import { AIRA_REDUCER_DOMAIN, askAiraReducer } from '@capillarytech/cap-ui-library/CapAskAira';
 import previewAndTestReducer from './v2Components/TestAndPreviewSlidebox/reducer';
-import inAppReducer from './v2Containers/InApp/reducer';
 
 export const initialReducer = {
   language: languageProviderReducer,
@@ -34,5 +33,4 @@ export const initialReducer = {
   gallery: galleryReducer,
   navigationConfig: CapCollapsibleLeftNavigationReducer,
   previewAndTest: previewAndTestReducer,
-  inApp: inAppReducer,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.236-alpha.4",
+  "version": "8.0.236-beta.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -465,6 +465,11 @@ export const getCmsTemplateSettingsV2 = (cmsType, projectId, cmsMode, langId, is
   return API.get(url);
 };
 
+export const getCmsAccounts = (cmsType) => {
+  const url = `${API_ENDPOINT}/cms/accounts?type=${cmsType}`;
+  return API.get(url);
+};
+
 export const getCmsTemplateData = (cmsType, projectId, langId) => {
   const url = `${API_ENDPOINT}/cms/getContent?type=${cmsType}&projectId=${projectId}&langId=${langId}`;
   return API.get(url);
@@ -709,9 +714,4 @@ export const updateTestMessageMeta = (payload) => {
   return request(url, getAPICallObject('POST', payload?.data, false, true));
 };
 
-export const getBeePopupBuilderToken = () => {
-  const url = `${API_ENDPOINT}/common/getInappTokenData`;
-  return request(url, getAPICallObject('GET'));
-};
-
 export {request, getAPICallObject};

package/services/tests/api.test.js

@@ -25,7 +25,6 @@ import {
   updateTestMessageMeta,
   updateMetaConfig,
   getMediaDetails,
-  getBeePopupBuilderToken,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -850,20 +849,3 @@ describe('getMediaDetails', () => {
     });
   });
 });
-
-describe('getBeePopupBuilderToken', () => {
-  it('should return correct response', async () => {
-    global.fetch.mockReturnValue(Promise.resolve({
-      status: 200,
-      json: () => Promise.resolve({
-        status: 200,
-        response: 'test',
-      }),
-    }));
-    const result = await getBeePopupBuilderToken();
-    expect(result).toEqual({
-      status: 200,
-      response: 'test',
-    });
-  });
-});

package/utils/common.js

@@ -22,7 +22,9 @@ import {
   BADGES_ISSUE,
   ENABLE_WECHAT,
   LIQUID_SUPPORT,
-  ENABLE_NEW_MPUSH} from '../constants/unified';
+  ENABLE_NEW_MPUSH,
+  SUPPORT_CK_EDITOR
+} from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
 
 export function getUserNameById(userId, allUserList) {
@@ -94,6 +96,10 @@ export const hasLiquidSupportFeature = Auth.hasFeatureAccess.bind(
   LIQUID_SUPPORT,
 );
 
+export const hasSupportCKEditor = Auth.hasFeatureAccess.bind(
+  null,
+  SUPPORT_CK_EDITOR,
+);
 
 export const hasGiftVoucherFeature = Auth.hasFeatureAccess.bind(
   null,

package/utils/commonUtils.js

@@ -398,20 +398,7 @@ export const validateMobilePushContent = async (formData, options) => {
 // Helper function to extract content for a platform
 export const extractContent = (platformData) => {
   if (!platformData) return '';
-  const { title, message, ctas, isBEEeditor, beeHtml } = platformData;
-  
-  // For BEE editor, extract content from beeHtml
-  if (isBEEeditor && beeHtml) {
-    // beeHtml can be an object with value property or a string
-    const beeHtmlContent = typeof beeHtml === 'string' ? beeHtml : (beeHtml?.value || '');
-    return [
-      title,
-      beeHtmlContent,
-      ...((ctas?.map((cta) => cta?.text || cta?.actionLink)) || []),
-    ].filter(Boolean).join(' ');
-  }
-  
-  // For regular content
+  const { title, message, ctas } = platformData;
   return [
     title,
     message,