@capillarytech/creatives-library 8.0.142-alpha.0 → 8.0.142

package/utils/tests/checkStore.test.js

@@ -1,4 +1,4 @@
-import checkStore from '../../legacy/checkStore'; 
+import checkStore from '../checkStore'; 
 
 describe('checkStore', () => {
   it('should not throw if the store is valid', () => {

package/utils/tests/customAuth.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import UserAuthWrapper from '../../legacy/customAuthWrapper';
+import UserAuthWrapper from '../customAuthWrapper';
 
 const MockComponent = React.forwardRef((props, ref) => <div ref={ref} {...props}>Mock Component</div>);
 

package/utils/transformerUtils.js

@@ -13,7 +13,7 @@ import {
   IOS,
   ANDROID,
   EXTERNAL_URL,
-  BIG_TEXT,
+  BIG_TEXT
 } from "../v2Containers/CreativesContainer/constants";
 
 // Creates a base payload structure common to all channels

package/v2Components/CapTagList/index.js

@@ -30,8 +30,15 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import messages from './messages';
 import { makeSelectLoyaltyPromotionDisplay } from '../../v2Containers/Cap/selectors';
-import { CARD_RELATED_TAGS, HOSPITALITY_RELATED_TAGS, CUSTOMER_BARCODE_TAG, GET_TRANSLATION_MAPPED ,JAPANESE_HELP_TEXT, TAG_TRANSLATION_DOC} from '../../constants/unified';
+import { CARD_RELATED_TAGS, HOSPITALITY_RELATED_TAGS, CUSTOMER_BARCODE_TAG } from '../../containers/App/constants';
 import { hasCardBasedScope, hasCustomerBarcodeFeatureEnabled, hasHospitalityBasedScope } from '../../utils/common';
+
+import {
+  GET_TRANSLATION_MAPPED,
+  JAPANESE_HELP_TEXT,
+  TAG_TRANSLATION_DOC,
+  STRING,
+} from "../../containers/TagList/constants";
 import { EMAIL, JP_LOCALE_HIDE_FEATURE, LOYALTY } from '../../v2Containers/App/constants';
 import { hidingDateTagsForJpLocale } from '../../v2Containers/TagList/utils';
 
@@ -125,10 +132,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   getSearchedExpandedKeys(tags, value = '') {
     let list = [];
     _.forEach(tags, (val = {}, key) => {
-      const tagName =
-        typeof val?.name === 'string'
-          ? _.toLower(_.get(val, "name", ""))
-          : _.toLower(_.get(val, "name.props.defaultMessage", ""));
+      const tagName = typeof val?.name === STRING
+        ? _.toLower(_.get(val, "name", ""))
+        : _.toLower(_.get(val, "name.props.defaultMessage", ""));
       const tagNameWithoutUnderscore = tagName.replace(/_/g, " ");
       const searchStringLower = _.toLower(value);
       if (_.has(val, "subtags")) {
@@ -261,10 +267,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         supportedTagsString += `${supportedTag} ,`;
       });
       supportedTagsString = supportedTagsString.replace(/,\s*$/, "");
-      const tagName =
-        typeof val?.name === 'string'
-          ? _.toLower(_.get(val, "name", ""))
-          : _.toLower(_.get(val, "name.props.defaultMessage", ""));
+      const tagName = typeof val?.name === STRING
+        ? _.toLower(_.get(val, "name", ""))
+        : _.toLower(_.get(val, "name.props.defaultMessage", ""));
       const tagNameWithoutUnderscore = tagName.replace(/_/g, " ");
       const searchStringLower = _.toLower(searchString);
       const tagContainsSearchedString = searchStringLower

package/v2Components/Carousel/style.scss

@@ -26,7 +26,7 @@
     text-align: center;
     width: 120px !important;
     border-radius: 12px;
-    background-color: $CAP_G09;
+    background-color: $CAP_G09,
   }
   
   .ant-carousel .slick-slide {

package/v2Components/EmailMobilePreview/index.js

@@ -19,8 +19,8 @@ import messages from '../EmailPreviewV2/messages';
 import './index.scss';
 import mobileBody from '../../assets/DeviceForEmail.png';
 import { iframePreviewAdjustWidth, removeLinksFromHtmlContent } from './../../utils/common';
-import {selectTemplateContent} from '../../v2Containers/Templates/selectors';
-import * as templateActions from '../../v2Containers/Templates/actions';
+import {selectTemplateContent} from '../../containers/Templates/selectors';
+import * as templateActions from '../../containers/Templates/actions';
 
 const deviceAspectRatio = {
   mobile: {

package/v2Components/FormBuilder/index.js

@@ -54,9 +54,9 @@ import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED,
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
 import { OUTBOUND } from './constants';
-import { GET_TRANSLATION_MAPPED } from '../../constants/unified';
+import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
-import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../constants/unified';
+import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../containers/App/constants';
 import { REQUEST } from '../../v2Containers/Cap/constants'
 import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';

package/v2Components/MobilePushPreviewV2/index.js

@@ -45,6 +45,14 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     if (channel === INAPP.toUpperCase()) {
       const androidContent = get(templateData, 'versions.base.content.ANDROID') || get(templateData, 'androidContent');
       const iosContent = get(templateData, 'versions.base.content.IOS') || get(templateData, 'iosContent');
+      const isBeeFreeTemplate = get(androidContent, 'isBEEeditor') || get(iosContent, 'isBEEeditor');
+      if (isBeeFreeTemplate) {
+        content = {
+          inAppPreviewContent: device === ANDROID.toLowerCase() ? androidContent?.beeHtml : iosContent?.beeHtml,
+          isBeeFreeTemplate: true,
+        };
+        return content;
+      }
       const androidPreviewContent = {
         templateTitle: androidContent?.title,
         templateMsg: androidContent?.message,

package/v2Components/NavigationBar/saga.js

@@ -12,7 +12,7 @@ export default [
   {
     key: 'analyticsBotSaga',
     saga: function* analyticsBotSagaFn() {
-      yield all(analyticsBotSaga.map(saga => saga.call()));
+      yield all(analyticsBotSaga?.map(saga => saga.call()));
     },
   },
 ];

package/v2Components/NavigationBar/tests/saga.test.js

@@ -11,8 +11,8 @@ describe("analyticsBotSagaFn", () => {
     );
     return expectSaga(analyticsBotSagaFn)
       .provide([
-        [matchers.call.fn(analyticsBotSaga[0]), undefined],
-        [matchers.call.fn(analyticsBotSaga[1]), undefined]
+        [matchers.call.fn(analyticsBotSaga?.[0]), undefined],
+        [matchers.call.fn(analyticsBotSaga?.[1]), undefined]
       ])
       .run();
   });

package/v2Components/TemplatePreview/assets/images/empty_android.svg

@@ -0,0 +1,8 @@
+<svg width="220" height="472" viewBox="0 0 220 472" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="220" height="472" rx="26" fill="#101211"/>
+<rect x="9" y="36" width="202" height="404" rx="9" fill="#343434"/>
+<rect x="84" y="14" width="52" height="5" rx="2.5" fill="#2E2E2E"/>
+<rect x="84" y="455" width="52" height="5" rx="2.5" fill="#2E2E2E"/>
+<circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
+<circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
+</svg>

package/v2Components/TemplatePreview/assets/images/empty_ios.svg

@@ -0,0 +1,5 @@
+<svg width="228" height="472" viewBox="0 0 228 472" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="228" height="472" rx="32" fill="#101211"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58 11H33C20.2975 11 10 21.2975 10 34V439C10 451.703 20.2975 462 33 462H195C207.703 462 218 451.703 218 439V34C218 21.2975 207.703 11 195 11H170V14C170 21.1797 164.18 27 157 27H71C63.8203 27 58 21.1797 58 14V11Z" fill="#343434"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58 11H33C20.2975 11 10 21.2975 10 34V439C10 451.703 20.2975 462 33 462H195C207.703 462 218 451.703 218 439V34C218 21.2975 207.703 11 195 11H170V14C170 21.1797 164.18 27 157 27H71C63.8203 27 58 21.1797 58 14V11Z" fill="#343434"/>
+</svg>

package/v2Components/TemplatePreview/index.js

@@ -32,11 +32,10 @@ import {
   RCS,
   ZALO,
   INAPP,
-  VIBER, 
-  FACEBOOK,
   MOBILE_PUSH
 } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
+import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
 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';
@@ -237,7 +236,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, rcsTitle, rcsDesc, buttonText: rcsButtonText } = rcsPreviewContent || {};
     const {
       videoParams,
@@ -1327,6 +1326,31 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
               </div>
             )}
             {channel?.toUpperCase() === INAPP && (
+              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 ? inAppMobileAndroidFull : inAppMobileIOSFull}
+                      alt={formatMessage(messages.previewGenerated)}
+                    />
+                    <iframe 
+                      srcDoc={inAppPreviewContent?.value} 
+                      title="Inapp Preview" 
+                      style={{
+                        position: 'absolute',
+                        top: '3rem',
+                        left: '5rem',
+                        width: '60%',
+                        height: '100%',
+                        zIndex: 1,
+                        pointerEvents: 'none'
+                      }}
+                      frameBorder="0" 
+                    />
+                  </div>
+                </div>
+              ) : (
               <div className="shell-v2 align-center">
                 <CapImage
                   className="preview-image"
@@ -1403,8 +1427,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                       )}
                     </div>
                   </div>
+                  </div>
                 </div>
-              </div>
+              )
             )}
           </CapRow>
         </CapColumn>

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,169 @@
+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 '../../v2Components/TemplatePreview/assets/images/empty_android.svg';
+import emptyIosSvg from '../../v2Components/TemplatePreview/assets/images/empty_ios.svg';
+function BeePopupEditor(props) {
+  const {
+    uid,
+    id,
+    tokenData,
+    saveBeeInstance,
+    saveBeeData,
+    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);
+      },
+    };
+    window.BeePlugin.create(tokenData, beeConfig, (instance) => {
+      beePluginInstance = instance;
+      const parseJson = JSON.parse(beeJson);
+      beePluginInstance.start(parseJson);
+      saveBeeInstance(beePluginInstance);
+    });
+    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: "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}
+      />
+    </>
+  );
+}
+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)));