@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.2

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);
@@ -94,8 +92,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]);
@@ -246,70 +244,74 @@ 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>
   );
 }
 
@@ -336,7 +338,7 @@ BeeEditor.propTypes = {
 
 const mapStateToProps = () => createStructuredSelector({
   BEESelect: makeSelectBEE(),
-  currentOrgDetails: selectCurrentOrgDetails()
+  currentOrgDetails: selectCurrentOrgDetails(),
 });
 
 function mapDispatchToProps(dispatch) {

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,193 @@
+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 { 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';
+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 (
+    <>
+      <div id="bee-plugin-container" style={{ height: "46.5rem" }}></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}
+      />
+    </>
+  );
+}
+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)));