@capillarytech/creatives-library 8.0.235 → 8.0.236-alpha.1

package/v2Components/TemplatePreview/index.js

@@ -37,14 +37,8 @@ import {
 import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
 import Carousel from '../Carousel';
 import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg';
-import inAppMobileAndroidModal from './assets/images/inapp_mobile_android_modal.svg';
-import inAppMobileAndroidTop from './assets/images/inapp_mobile_android_top.svg';
-import inAppMobileAndroidBottom from './assets/images/inapp_mobile_android_bottom.svg';
-import inAppMobileAndroidFull from './assets/images/inapp_mobile_android_full.svg';
-import inAppMobileIOSModal from './assets/images/inapp_mobile_ios_modal.svg';
-import inAppMobileIOSTop from './assets/images/inapp_mobile_ios_top.svg';
-import inAppMobileIOSBottom from './assets/images/inapp_mobile_ios_bottom.svg';
-import inAppMobileIOSFull from './assets/images/inapp_mobile_ios_full.svg';
+import inAppMobileDeviceAndroid from '../../assets/Android.png';
+import inAppMobileDeviceIos from '../../assets/iOS.png';
 import whatsappImageEmptyPreview from './assets/images/empty_image_preview.svg';
 import whatsappVideoEmptyPreview from './assets/images/empty_video_preview.svg';
 import videoPlay from '../../assets/videoPlay.svg';
@@ -239,7 +233,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     } = this.props;
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
     const { formatMessage } = intl;
-    const { rcsPreviewContent, inAppPreviewContent, viberPreviewContent } = content || {};
+    const { rcsPreviewContent, inAppPreviewContent, viberPreviewContent, isBeeFreeTemplate } = content || {};
     const { rcsImageSrc, rcsVideoSrc, rcsTitle, rcsDesc, rcsSuggestions } = rcsPreviewContent || {};
     const {
       videoParams,
@@ -247,7 +241,11 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       buttonText: viberButtonText,
       messageContent: viberMessageContent,
     } = viberPreviewContent || {};
+    let isHTMLContent = true;
     const {mediaPreview = {}, templateTitle = "", templateMsg = "", ctaData} = inAppPreviewContent || {};
+    if(templateTitle !== undefined && ctaData !== undefined && templateMsg !== undefined) {
+      isHTMLContent = false;
+    }
     let smsDetails = {};
     // let smsText = '';
     if (this.props.content && this.props.charCounterEnabled) {
@@ -464,27 +462,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
 
     const   getPreviewImage = () => {
     if (this.props.device === ANDROID) {
-      switch (templateLayoutType) {
-        case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
-          return inAppMobileAndroidModal;
-        case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
-          return inAppMobileAndroidTop;
-        case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
-          return inAppMobileAndroidBottom;
-        default:
-          return inAppMobileAndroidFull;
-      }
+      return inAppMobileDeviceAndroid;
     } else {
-      switch (templateLayoutType) {
-        case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
-          return inAppMobileIOSModal;
-        case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
-          return inAppMobileIOSTop;
-        case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
-          return inAppMobileIOSBottom;
-        default:
-          return inAppMobileIOSFull;
-      }
+      return inAppMobileDeviceIos;
     }
   };
 
@@ -1406,7 +1386,34 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
               </div>
             )}
             {channel?.toUpperCase() === INAPP && (
-              <div className="shell-v2 align-center">
+              isBeeFreeTemplate ? (
+                  <div className="shell-v2 align-center">
+                    <div style={{ position: 'relative', display: 'inline-block', width: '100%', height: '100%' }}>
+                      <CapImage
+                        className="preview-image"
+                        src={this.props.device === ANDROID ? inAppMobileDeviceAndroid : inAppMobileDeviceIos}
+                        alt={formatMessage(messages.previewGenerated)}
+                      />
+                      <iframe 
+                        srcDoc={inAppPreviewContent?.value} 
+                        title={formatMessage(messages.inappPreview)}
+                        style={{
+                          position: 'absolute',
+                          top: '3rem',
+                          left: '5rem',
+                          width: '60%',
+                          height: '89%',
+                          zIndex: 1,
+                          pointerEvents: 'none',
+                          backgroundColor: 'white',
+                          borderRadius: `${CAP_SPACE_08}`,
+                        }}
+                        frameBorder="0" 
+                      />
+                    </div>
+                  </div>
+              ): (
+                <div className="shell-v2 align-center">
                 <CapImage
                   className="preview-image"
                   src={getPreviewImage()}
@@ -1414,9 +1421,15 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 />
                 <div className="preview-image">
                   <div
-                    className={`inapp-message-container-${templateLayoutType}-${device} sms`}
+                    className={`inapp-message-container-${templateLayoutType}-${device} inapp`}
                   >
-                    <div className="preview-inapp-screen">
+                    {isHTMLContent ? (
+                      <div
+                        className="inapp-html-content"
+                        dangerouslySetInnerHTML={{ __html: templateMsg }}
+                      />
+                    ) : (
+                      <div className="preview-inapp-screen">
                       {
                         <CapLabel
                           type="label15"
@@ -1481,9 +1494,11 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         </CapButton>
                       )}
                     </div>
+                    )}
                   </div>
                 </div>
               </div>
+              )
             )}
           </CapRow>
         </CapColumn>

package/v2Components/TemplatePreview/messages.js

@@ -94,4 +94,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.TemplatePreview.videoNotSupported',
     defaultMessage: 'Your browser does not support the video tag.',
   },
+  inappPreview: {
+    id: 'creatives.componentsV2.TemplatePreview.inappPreview',
+    defaultMessage: 'Inapp Preview',
+  },
 });

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,180 @@
+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 [visibleTaglist, setVisibleTaglist] = useState(false);
+  const [selectedTag, setSelectedTag] = useState({});
+  const filteredTags = (tags || []).filter((obj) => obj.definition.value !== UNSUBSCRIBE);
+
+  useEffect(() => {
+    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;
+      const parseJson = JSON.parse(beeJson);
+      beePluginInstance.start(parseJson);
+      saveBeeInstance(beePluginInstance, device);
+    });
+    return () => clearInterval(intervalTimer);
+  }, [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)));