@capillarytech/creatives-library 8.0.262 → 8.0.264

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) {

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -10,7 +10,6 @@ import SmsWrapper from '../SmsWrapper';
 import Email from '../Email';
 import EmailWrapper from '../EmailWrapper';
 import MobilepushWrapper from '../MobilepushWrapper';
-import InAppWrapper from '../InAppWrapper';
 import EmailPreviewV2 from '../../v2Components/EmailPreviewV2';
 import MobilePushPreview from '../../v2Components/MobilePushPreviewV2';
 import WechatWrapper from '../WeChat/Wrapper';
@@ -120,11 +119,7 @@ export function SlideBoxContent(props) {
       emailCreateMode,
       onMobilepushModeChange,
       mobilePushCreateMode,
-      onInAppEditorTypeChange,
-      inAppEditorType,
       templateStep,
-      inAppCreateMode,
-      onInAppModeChange,
       onEnterTemplateName,
       onRemoveTemplateName,
       onCreateNextStep,
@@ -174,7 +169,6 @@ export function SlideBoxContent(props) {
       handleTestAndPreview,
       handleCloseTestAndPreview,
       isTestAndPreviewMode,
-      onHtmlEditorValidationStateChange,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -674,95 +668,44 @@ export function SlideBoxContent(props) {
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
-        location={location}
-        onHtmlEditorValidationStateChange={onHtmlEditorValidationStateChange}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
-        (() => {
-          const supportCKEditor = commonUtil.hasSupportCKEditor();
-          // When supportCKEditor is true: Always use Email component (legacy flow)
-          if (supportCKEditor || templateData?.is_drag_drop) {
-            return (
-              <Email
-                key="cretives-container-email-edit"
-                setIsLoadingContent={setIsLoadingContent}
-                location={{
-                  pathname: `/email/edit`,
-                  query: { type: 'embedded', module: 'library'},
-                }}
-                route={{ name: 'email' }}
-                isGetFormData={isGetFormData}
-                getFormdata={getFormData}
-                params={{ id: templateData._id }}
-                templateData={templateData}
-                getFormSubscriptionData={getFormData}
-                getDefaultTags={type}
-                isFullMode={isFullMode}
-                editor={editor}
-                cap={cap}
-                showTemplateName={showTemplateName}
-                onValidationFail={onValidationFail}
-                forwardedTags={forwardedTags}
-                selectedOfferDetails={selectedOfferDetails}
-                onPreviewContentClicked={onPreviewContentClicked}
-                onTestContentClicked={onTestContentClicked}
-                moduleType={moduleType}
-                showLiquidErrorInFooter={showLiquidErrorInFooter}
-                eventContextTags={eventContextTags}
-              isLoyaltyModule={isLoyaltyModule}
-              showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
-              handleTestAndPreview={handleTestAndPreview}
-              handleCloseTestAndPreview={handleCloseTestAndPreview}
-              isTestAndPreviewMode={isTestAndPreviewMode}
-              onHtmlEditorValidationStateChange={onHtmlEditorValidationStateChange}
-            />
-            );
-          }     
-          // HTML template: Use EmailWrapper component (which uses EmailWithoutSaga)
-          return (
-            <EmailWrapper
-              key="cretives-container-email-edit-wrapper"
-              setIsLoadingContent={setIsLoadingContent}
-              onEmailModeChange={onEmailModeChange}
-              emailCreateMode="editor"
-              isGetFormData={isGetFormData}
-              getFormdata={getFormData}
-              templateData={templateData}
-              type={type}
-              step="createTemplateContent"
-              showNextStep={onCreateNextStep}
-              isFullMode={isFullMode}
-              editor={editor}
-              cap={cap}
-              onResetStep={onResetStep}
-              showTemplateName={showTemplateName}
-              onEnterTemplateName={onEnterTemplateName}
-              onRemoveTemplateName={onRemoveTemplateName}
-              onValidationFail={onValidationFail}
-              forwardedTags={forwardedTags}
-              selectedOfferDetails={selectedOfferDetails}
-              onPreviewContentClicked={onPreviewContentClicked}
-              onTestContentClicked={onTestContentClicked}
-              getCmsTemplatesInProgress={getCmsTemplatesInProgress}
-              moduleType={moduleType}
-              showLiquidErrorInFooter={showLiquidErrorInFooter}
-              eventContextTags={eventContextTags}
-              isLoyaltyModule={isLoyaltyModule}
-              showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
-              handleTestAndPreview={handleTestAndPreview}
-              handleCloseTestAndPreview={handleCloseTestAndPreview}
-              isTestAndPreviewMode={isTestAndPreviewMode}
-              onHtmlEditorValidationStateChange={onHtmlEditorValidationStateChange}
-              location={{
-                pathname: `/email/edit/${templateData._id}`,
-                query: { type: 'embedded', module: 'library', id: templateData._id },
-              }}
-              params={{ id: templateData._id }}
-            />
-          );
-        })()
-      )}
+      <Email
+        key="cretives-container-email-edit"
+        setIsLoadingContent={setIsLoadingContent}
+        location={{
+          pathname: `/email/edit`,
+          query: { type: 'embedded', module: 'library'},
+        }}
+        route={{ name: 'email' }}
+        isGetFormData={isGetFormData}
+        getFormdata={getFormData}
+        params={{ id: templateData._id }}
+        templateData={templateData}
+        getFormSubscriptionData={getFormData}
+        getDefaultTags={type}
+        isFullMode={isFullMode}
+        editor={editor}
+        cap={cap}
+        showTemplateName={showTemplateName}
+        onValidationFail={onValidationFail}
+        forwardedTags={forwardedTags}
+        selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}
+        moduleType={moduleType}
+        showLiquidErrorInFooter={showLiquidErrorInFooter}
+        eventContextTags={eventContextTags}
+        isLoyaltyModule={isLoyaltyModule}
+        showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+        handleTestAndPreview={handleTestAndPreview}
+        handleCloseTestAndPreview={handleCloseTestAndPreview}
+        isTestAndPreviewMode={(() => {
+          return isTestAndPreviewMode;
+        })()}
+      />
+        )}
       {isEditMPush && (
         (isFullMode && !commonUtil.hasNewMobilePushFeatureEnabled()) || 
         (!isFullMode && isLoyaltyModule) || 
@@ -1056,39 +999,22 @@ export function SlideBoxContent(props) {
         />
       )}
 
-      {isCreateInApp && (
-        <InAppWrapper
-          key="creatives-inapp-wrapper"
-          date={new Date().getMilliseconds()}
-          setIsLoadingContent={setIsLoadingContent}
-          onInAppEditorTypeChange={onInAppEditorTypeChange}
-          inAppEditorType={inAppEditorType}
-          isGetFormData={isGetFormData}
-          getFormdata={getFormData}
-          templateData={templateData}
-          type={type}
-          step={templateStep}
-          showNextStep={onCreateNextStep}
-          isFullMode={isFullMode}
-          cap={cap}
-          onResetStep={onResetStep}
-          showTemplateName={showTemplateName}
-          onEnterTemplateName={onEnterTemplateName}
-          onRemoveTemplateName={onRemoveTemplateName}
-          onValidationFail={onValidationFail}
-          forwardedTags={forwardedTags}
-          selectedOfferDetails={selectedOfferDetails}
-          onPreviewContentClicked={onPreviewContentClicked}
-          onTestContentClicked={onTestContentClicked}
-          moduleType={moduleType}
-          showLiquidErrorInFooter={showLiquidErrorInFooter}
-          eventContextTags={eventContextTags}
-          onCreateComplete={onCreateComplete}
-          handleClose={handleClose}
-          getDefaultTags={type}
-          onInAppModeChange={onInAppModeChange}
-          inAppCreateMode={inAppCreateMode}
-          showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+      {isCreateInApp && (<InApp
+        isFullMode={isFullMode}
+        onCreateComplete={onCreateComplete}
+        handleClose={handleClose}
+        location={{
+          pathname: `/inapp/create`,
+          query,
+          search: '',
+        }}
+        getFormData={getFormData}
+        isGetFormData={isGetFormData}
+        templateData={templateData}
+        getDefaultTags={type}
+        eventContextTags={eventContextTags}
+        showLiquidErrorInFooter={showLiquidErrorInFooter}
+        showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
@@ -1179,8 +1105,6 @@ SlideBoxContent.propTypes = {
   onSelectTemplate: PropTypes.func,
   onPreviewTemplate: PropTypes.func,
   templateData: PropTypes.object,
-  onInAppEditorTypeChange: PropTypes.func,
-  inAppEditorType: PropTypes.object,
   location: PropTypes.object,
   isGetFormData: PropTypes.bool,
   getFormData: PropTypes.func,