@capillarytech/creatives-library 8.0.334-alpha.0 → 8.0.334-alpha.1

package/package.json

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

package/services/api.js

@@ -361,26 +361,6 @@ export const deleteTemplate = ({channel, id}) => {
   //return API.deleteResource(url);
 };
 
-export const archiveTemplate = ({ channel, id }) => {
-  const url = `${API_ENDPOINT}/templates/archive/${id}/${channel}`;
-  return request(url, getAPICallObject('PUT'));
-};
-
-export const unarchiveTemplate = ({ channel, id }) => {
-  const url = `${API_ENDPOINT}/templates/unarchive/${id}/${channel}`;
-  return request(url, getAPICallObject('PUT'));
-};
-
-export const bulkArchiveTemplates = ({ channel, ids }) => {
-  const url = `${API_ENDPOINT}/templates/archive/bulk/${channel}`;
-  return request(url, getAPICallObject('PUT', { ids }));
-};
-
-export const bulkUnarchiveTemplates = ({ channel, ids }) => {
-  const url = `${API_ENDPOINT}/templates/unarchive/bulk/${channel}`;
-  return request(url, getAPICallObject('PUT', { ids }));
-};
-
 export const deleteRcsTemplate = ({ templateName }) => {
   const url = `${API_ENDPOINT}/templates/${templateName}/RCS`;
   return request(url, getAPICallObject('DELETE'))

package/services/tests/api.test.js

@@ -1086,62 +1086,3 @@ describe('createTestCustomer', () => {
     expect(lastCall[1].body).toBe(JSON.stringify(payload));
   });
 });
-
-import {
-  archiveTemplate,
-  unarchiveTemplate,
-  bulkArchiveTemplates,
-  bulkUnarchiveTemplates,
-} from '../api';
-
-describe('archiveTemplate', () => {
-  beforeEach(() => {
-    global.fetch = jest.fn().mockReturnValue(Promise.resolve({ json: () => Promise.resolve({}) }));
-  });
-
-  it('should call PUT on archive endpoint', () => {
-    archiveTemplate({ channel: 'EMAIL', id: 'id123' });
-    expect(global.fetch).toHaveBeenCalled();
-    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
-    expect(lastCall[1].method).toBe('PUT');
-  });
-});
-
-describe('unarchiveTemplate', () => {
-  beforeEach(() => {
-    global.fetch = jest.fn().mockReturnValue(Promise.resolve({ json: () => Promise.resolve({}) }));
-  });
-
-  it('should call PUT on unarchive endpoint', () => {
-    unarchiveTemplate({ channel: 'EMAIL', id: 'id123' });
-    expect(global.fetch).toHaveBeenCalled();
-    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
-    expect(lastCall[1].method).toBe('PUT');
-  });
-});
-
-describe('bulkArchiveTemplates', () => {
-  beforeEach(() => {
-    global.fetch = jest.fn().mockReturnValue(Promise.resolve({ json: () => Promise.resolve({}) }));
-  });
-
-  it('should call PUT on bulk archive endpoint with ids', () => {
-    bulkArchiveTemplates({ channel: 'EMAIL', ids: ['id1', 'id2'] });
-    expect(global.fetch).toHaveBeenCalled();
-    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
-    expect(lastCall[1].method).toBe('PUT');
-  });
-});
-
-describe('bulkUnarchiveTemplates', () => {
-  beforeEach(() => {
-    global.fetch = jest.fn().mockReturnValue(Promise.resolve({ json: () => Promise.resolve({}) }));
-  });
-
-  it('should call PUT on bulk unarchive endpoint with ids', () => {
-    bulkUnarchiveTemplates({ channel: 'EMAIL', ids: ['id1', 'id2'] });
-    expect(global.fetch).toHaveBeenCalled();
-    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
-    expect(lastCall[1].method).toBe('PUT');
-  });
-});

package/v2Components/CapCustomSkeleton/index.js

@@ -28,7 +28,7 @@ export default function CapCustomSkeleton(props) {
                   xs={24}
                   sm={12}
                   md={8}
-                  lg={8}
+                  lg={6}
                 >
                   <CapSkeleton
                     active

package/v2Components/CapCustomSkeleton/tests/__snapshots__/index.test.js.snap

@@ -20,7 +20,7 @@ exports[`CapCustomSkeleton test renders correct CapCustomSkeleton component 1`]
     >
       <CapColumn
         key="0"
-        lg={8}
+        lg={6}
         md={8}
         sm={12}
         xs={24}
@@ -40,7 +40,7 @@ exports[`CapCustomSkeleton test renders correct CapCustomSkeleton component 1`]
       </CapColumn>
       <CapColumn
         key="1"
-        lg={8}
+        lg={6}
         md={8}
         sm={12}
         xs={24}
@@ -60,7 +60,7 @@ exports[`CapCustomSkeleton test renders correct CapCustomSkeleton component 1`]
       </CapColumn>
       <CapColumn
         key="2"
-        lg={8}
+        lg={6}
         md={8}
         sm={12}
         xs={24}
@@ -80,7 +80,7 @@ exports[`CapCustomSkeleton test renders correct CapCustomSkeleton component 1`]
       </CapColumn>
       <CapColumn
         key="3"
-        lg={8}
+        lg={6}
         md={8}
         sm={12}
         xs={24}
@@ -100,7 +100,7 @@ exports[`CapCustomSkeleton test renders correct CapCustomSkeleton component 1`]
       </CapColumn>
       <CapColumn
         key="4"
-        lg={8}
+        lg={6}
         md={8}
         sm={12}
         xs={24}
@@ -120,7 +120,7 @@ exports[`CapCustomSkeleton test renders correct CapCustomSkeleton component 1`]
       </CapColumn>
       <CapColumn
         key="5"
-        lg={8}
+        lg={6}
         md={8}
         sm={12}
         xs={24}
@@ -140,7 +140,7 @@ exports[`CapCustomSkeleton test renders correct CapCustomSkeleton component 1`]
       </CapColumn>
       <CapColumn
         key="6"
-        lg={8}
+        lg={6}
         md={8}
         sm={12}
         xs={24}
@@ -160,7 +160,7 @@ exports[`CapCustomSkeleton test renders correct CapCustomSkeleton component 1`]
       </CapColumn>
       <CapColumn
         key="7"
-        lg={8}
+        lg={6}
         md={8}
         sm={12}
         xs={24}
@@ -180,7 +180,7 @@ exports[`CapCustomSkeleton test renders correct CapCustomSkeleton component 1`]
       </CapColumn>
       <CapColumn
         key="8"
-        lg={8}
+        lg={6}
         md={8}
         sm={12}
         xs={24}
@@ -200,7 +200,7 @@ exports[`CapCustomSkeleton test renders correct CapCustomSkeleton component 1`]
       </CapColumn>
       <CapColumn
         key="9"
-        lg={8}
+        lg={6}
         md={8}
         sm={12}
         xs={24}
@@ -220,7 +220,7 @@ exports[`CapCustomSkeleton test renders correct CapCustomSkeleton component 1`]
       </CapColumn>
       <CapColumn
         key="10"
-        lg={8}
+        lg={6}
         md={8}
         sm={12}
         xs={24}
@@ -240,7 +240,7 @@ exports[`CapCustomSkeleton test renders correct CapCustomSkeleton component 1`]
       </CapColumn>
       <CapColumn
         key="11"
-        lg={8}
+        lg={6}
         md={8}
         sm={12}
         xs={24}

package/v2Components/FormBuilder/index.js

@@ -3998,6 +3998,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   onContextChange={this.props.onContextChange}
                   moduleFilterEnabled={isModuleFilterEnabled}
                   eventContextTags={this.props?.eventContextTags}
+                  isGetBeeData={this.props?.isGetBeeData}
+                  getBEEData={this.props?.getBEEData}
                 />
               </CapColumn>
             );

package/v2Containers/BeeEditor/index.js

@@ -53,11 +53,14 @@ function BeeEditor(props) {
     BEESelect,
     currentOrgDetails,
     eventContextTags,
+    isGetBeeData,
+    getBEEData,
   } = props;
   const { saveRowRequest } = BEESelect;
   const {formatMessage} = intl;
   const UNSUBSCRIBE = 'unsubscribe';
   let beePluginInstance = null;
+  const isGetBeeDataRef = useRef(isGetBeeData);
   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)},
@@ -111,6 +114,10 @@ function BeeEditor(props) {
     tokenDataRef.current = tokenData;
   }, [tokenData]);
 
+  useEffect(() => {
+    isGetBeeDataRef.current = isGetBeeData;
+  }, [isGetBeeData]);
+
   useEffect(() => {
     // Only initialize if we have both tokenData and beeJson
     const currentTokenData = tokenDataRef.current;
@@ -220,7 +227,11 @@ function BeeEditor(props) {
         },
       },
       onSave: (jsonFile, htmlFile) => {
-        saveBeeData(jsonFile, htmlFile);
+        if (isGetBeeDataRef.current) {
+          getBEEData(jsonFile, htmlFile);
+        } else {
+          saveBeeData(jsonFile, htmlFile);
+        }
       },
       onSaveRow: (rowJSON) => {
         actions.createCustomRow(JSON.parse(rowJSON), callbackSaveRow);
@@ -414,6 +425,7 @@ BeeEditor.propTypes = {
   onContextChange: PropTypes.func,
   userLocale: PropTypes.string,
   eventContextTags: PropTypes.array,
+  isGetBeeData: PropTypes.bool,
 };
 
 const mapStateToProps = () => createStructuredSelector({

package/v2Containers/Email/index.js

@@ -91,6 +91,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       saveForm: false,
       showTestAndPreviewSlidebox: false,
       isTestAndPreviewMode: false, // Add flag to prevent validation during Test & Preview
+      isGetBeeData: false,
     };
 
     this.isTagLoaded = false;
@@ -509,6 +510,39 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         const formData = _.cloneDeep(this.state.formData);
 
         const schema = _.cloneDeep(this.state.schema);
+
+        // Apply BEE/CK visibility synchronously into the schema before setState so that
+        // the committed state already has the correct display values — this prevents the
+        // race condition where hideEdmOptions (setTimeout) could be overwritten by a
+        // concurrent prop-triggered setState that clones the schema before it commits.
+        const isDragDropForHide = nextProps.Email.CmsSettings.isDragDrop && this.checkBeeEditorAllowedForLibrary();
+        _.forEach(schema.containers, (container) => {
+          if (container.isActive) {
+            _.forEach(container.tabBarExtraContent.sections[0].inputFields[0].cols, (col) => {
+              if (col.id === 'insert-image') {
+                col.style.display = isDragDropForHide ? 'none' : '';
+              }
+              if (col.id === 'tab-options-popover') {
+                col.colStyle.display = isDragDropForHide ? 'flex' : 'none';
+                _.forEach(col.content.sections[0].inputFields, (tabPopoverSection) => {
+                  if (tabPopoverSection.cols[0].id === 'switch-editor-label') {
+                    tabPopoverSection.cols[0].style.display = isDragDropForHide ? '' : 'none';
+                  }
+                });
+                if (col.value && col.value.sections) {
+                  _.forEach(col.value.sections[0].inputFields, (valueInputField) => {
+                    _.forEach(valueInputField.cols, (valueCol) => {
+                      if (valueCol.id === 'tab-option-icon') {
+                        valueCol.colStyle = { ...valueCol.colStyle, display: hasSupportCKEditor() ? 'flex' : 'none' };
+                      }
+                    });
+                  });
+                }
+              }
+            });
+          }
+        });
+
         const langIndex = formData[this.state.currentTab - 1]?.selectedLanguages?.indexOf(langId);
 
         const temp = (schema.containers || {})[this.state.currentTab - 1];
@@ -1957,7 +1991,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   switchEditor = () => {
-    this.setState({showConfirmationModal: true});
+    this.setState({showConfirmationModal: true, isGetBeeData: true});
   }
 
   renameVersion = () => {
@@ -2791,43 +2825,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // }
   }
   handleOk = () => {
-    const formData = _.cloneDeep(this.state.formData);
-    const activeLangTab = formData[`${this.state.currentTab - 1}`].activeTab;
-    const langIndex = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
-    
-    // Store current content before switching
-    const currentContent = formData[`${this.state.currentTab - 1}`][activeLangTab]['template-content'];
-    
-    // Update formData to mark as not drag-drop
-    formData[`${this.state.currentTab - 1}`][activeLangTab].is_drag_drop = false;
-    if (formData[`${this.state.currentTab - 1}`].base) {
-      formData.base[activeLangTab].is_drag_drop = false;
+    if (this.beeInstance) {
+      this.beeInstance.save()
     }
-    
-    this.setState({
-      mode: "switchEditor",
-      formData
-    }, () => {
-      // No need to call handleEdmSave as we're switching to CKEditor
-      let schema = _.cloneDeep(this.state.schema);
-      _.forEach(schema.containers, (container, index) => {
-        if (parseInt(index, 10) === (this.state.currentTab - 1)) {
-          const temp = container;
-          const langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
-
-          temp.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
-          temp.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
-          temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].colStyle.display = "none";
-        }
-      });
-      schema = this.showInsertImageButton(schema);
-
-      this.setState({ 
-        schema, 
-        showConfirmationModal: false, 
-        isSchemaChanged: true 
-      });
-    });
   }
 
   handleCancel = () => {
@@ -3034,6 +3034,42 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   saveBeeInstance = (instance) => {
     this.beeInstance = instance;
   }
+
+  getBEEData = (json, html) => {
+    this.setState((prevState) => {
+      const formData = _.cloneDeep(prevState.formData);
+      const activeLangTab = formData[`${prevState.currentTab - 1}`].activeTab;
+
+      // Mark as not drag-drop and capture BEE content in one pass
+      formData[`${prevState.currentTab - 1}`][activeLangTab].is_drag_drop = false;
+      formData[`${prevState.currentTab - 1}`][activeLangTab]['template-content'] = html;
+      formData[`${prevState.currentTab - 1}`][activeLangTab]['json-content'] = json;
+      formData.base[activeLangTab].is_drag_drop = false;
+      formData.base[activeLangTab]['template-content'] = html;
+      formData.base[activeLangTab]['json-content'] = json;
+
+      return { mode: "switchEditor", formData };
+    }, () => {
+      const { formData, currentTab } = this.state;
+      const activeLangTab = formData[`${currentTab - 1}`].activeTab;
+      let schema = _.cloneDeep(this.state.schema);
+
+      _.forEach(schema.containers, (container, index) => {
+        if (parseInt(index, 10) === (currentTab - 1)) {
+          const langTab = formData[`${currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
+          container.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = { display: "" };
+          container.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = { display: "none" };
+          container.tabBarExtraContent.sections[0].inputFields[0].cols[4].colStyle.display = "none";
+        }
+      });
+
+      schema = this.showInsertImageButton(schema);
+      this.setState({ schema, showConfirmationModal: false, isSchemaChanged: true }, () => {
+        this.injectEvents(schema);
+      });
+    });
+  }
+
   saveBeeData = (json, html) => {
     // Update state with new content
     this.setState((prevState) => {
@@ -3045,7 +3081,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       formData[currentTab - 1][activeTab]['json-content'] = json;
       formData.base[activeTab]['template-content'] = html;
       formData.base[activeTab]['json-content'] = json;
-
       return {
         ...prevState,
         formData,
@@ -3136,6 +3171,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   eventContextTags={this.props?.eventContextTags}
                   forwardedTags={this.props?.forwardedTags}
                   isLoyaltyModule={this.props?.isLoyaltyModule}
+                  isGetBeeData={this.state.isGetBeeData}
+                  getBEEData={this.getBEEData}
                   isTestAndPreviewMode={this.state.isTestAndPreviewMode} // Add flag to prevent validation
               /> : ''}
             </Col>

package/v2Containers/Email/reducer.js

@@ -11,7 +11,7 @@ import * as types from './constants';
 const initialState = fromJS({
   createTemplateInProgress: false,
   createResponse: {},
-  isBeeEnabled: false,
+  isBeeEnabled: null,
 });
 
 function emailReducer(state = initialState, action) {
@@ -150,7 +150,7 @@ function emailReducer(state = initialState, action) {
         .set('fetchingCmsData', false)
         .set('duplicateResponse', fromJS({}))
         .set('cmsData', '')
-        .set('isBeeEnabled', false);
+        .set('isBeeEnabled', null);
     case types.TRANSFORM_EMAIL_TEMPLATE_REQUEST:
       return state.set("createTemplateInProgress", true);
     default:

package/v2Containers/Email/sagas.js

@@ -107,7 +107,10 @@ export function* getCmsSetting({
 }) {
   try {
     const result = yield call(Api.getCmsTemplateSettingsV2, cmsType, projectId, cmsMode, langId, isEdmSupport, isBEEAppEnable);
-
+    const cmsAccountDetail = result.data?.response.cmsDetails || {};
+    const isBeeEnabled = cmsAccountDetail?.type === cmsType;
+        console.log(isBeeEnabled, "isBeeEnabled");
+    yield put({ type: types.GET_CMS_ACCOUNTS_SUCCESS, isBeeEnabled });
     yield put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: result.data.response.cmsDetails });
   } catch (error) {
     yield put({ type: types.GET_CMS_EDITOR_DETAILS_FAILURE, error });

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -231,6 +231,7 @@ const useEmailWrapper = ({
     const hasTemplateDetails = Email?.templateDetails && !isEmpty(Email.templateDetails);
     // Note: We check Email?.BEETemplate as a proxy, but the actual BEETemplate is in Templates reducer
     // The Email component will detect it via this.props.Templates.BEETemplate
+    console.log(Email, "fkjhsgfgdkl");
     const hasBEETemplate = Email?.BEETemplate && !isEmpty(Email.BEETemplate);
 
     if (hasTemplateDetails && !hasBEETemplate && templatesActions?.setBEETemplate && !beeTemplateSetRef.current) {
@@ -251,7 +252,7 @@ const useEmailWrapper = ({
       };
 
       const isDragDrop = getIsDragDrop(editTemplateData);
-
+      console.log(isDragDrop, "isDragDrop");
       // If it's a BEE template, set it in Templates.BEETemplate
       if (isDragDrop) {
         beeTemplateSetRef.current = true;

package/v2Containers/Templates/ChannelTypeIllustration.js

@@ -1,9 +1,5 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
-import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
-import { FormattedMessage } from 'react-intl';
-import { CapIllustration } from "@capillarytech/cap-ui-library";
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
@@ -12,12 +8,13 @@ import lineIllustration from '../Assets/images/lineIllustration.svg';
 import facebookIllustration from '../Assets/images/facebookIllustration.svg';
 import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
 import whatsappOrZaloAccountIllustration from '../Assets/images/whatsappOrZaloAccountIllustration.svg';
-import archiveEmptyStateIllustration from '../Assets/images/archive_Empty_Illustration.svg';
 import rcsIllustration from '../Assets/images/rcsIllustration.png';
+import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
+import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
 import messages from './messages';
-import {
-  MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP, WEBPUSH,
-} from '../CreativesContainer/constants';
+import { FormattedMessage } from 'react-intl';
+import { CapIllustration } from "@capillarytech/cap-ui-library";
+import { MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP, WEBPUSH } from '../CreativesContainer/constants';
 
 
 // Configuration object for channel types
@@ -83,8 +80,7 @@ function ChannelTypeIllustration(props) {
     isFullMode,
     createTemplate,
     currentChannel,
-    hostName,
-    isArchivedMode,
+    hostName
   } = props;
 
   const templateText = useMemo(() => {
@@ -92,18 +88,6 @@ function ChannelTypeIllustration(props) {
     return isFullMode ? templateIntlMsg : '';
   }, [isFullMode]);
 
-  if (isArchivedMode) {
-    return (
-      <CapIllustration
-        illustrationImage={archiveEmptyStateIllustration}
-        title={<FormattedMessage {...messages.noArchivedCreatives} />}
-        description={<FormattedMessage {...messages.noArchivedCreativesDesc} />}
-        descriptionPosition="bottom"
-        descriptionClassName="illustration-desc archive-illustration"
-      />
-    );
-  }
-
   const getChannelTypeIllustrationInfo = (type, hostName) => {
     // Handle special cases with hostName dependency
     if (type === WHATSAPP) {
@@ -212,6 +196,5 @@ ChannelTypeIllustration.propTypes = {
   createTemplate: PropTypes.func.isRequired,
   currentChannel: PropTypes.string,
   hostName: PropTypes.string,
-  isArchivedMode: PropTypes.bool,
 };
 export default ChannelTypeIllustration;