@capillarytech/creatives-library 8.0.141 → 8.0.142

package/initialReducer.js

@@ -15,6 +15,7 @@ import galleryReducer from './v2Containers/Assets/Gallery/reducer';
 import CapCollapsibleLeftNavigationReducer from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer';
 import { AIRA_REDUCER_DOMAIN, askAiraReducer } from '@capillarytech/cap-ui-library/CapAskAira';
 import previewAndTestReducer from './v2Components/TestAndPreviewSlidebox/reducer';
+import inAppReducer from './v2Containers/InApp/reducer';
 
 export const initialReducer = {
   language: languageProviderReducer,
@@ -33,4 +34,5 @@ export const initialReducer = {
   gallery: galleryReducer,
   navigationConfig: CapCollapsibleLeftNavigationReducer,
   previewAndTest: previewAndTestReducer,
+  inapp: inAppReducer,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.141",
+  "version": "8.0.142",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -55,4 +55,4 @@
     "webpack-bugsnag-plugins": "^1.4.3",
     "whatwg-fetch": "3.0.0"
   }
-}
+}

package/services/api.js

@@ -684,4 +684,9 @@ export const updateTestMessageMeta = (payload) => {
   return request(url, getAPICallObject('POST', payload?.data, false, true));
 };
 
+export const getBeePopupBuilderToken = () => {
+  const url = `${API_ENDPOINT}/common/getInappTokenData`;
+  return request(url, getAPICallObject('GET'));
+};
+
 export {request, getAPICallObject};

package/services/tests/api.test.js

@@ -23,6 +23,7 @@ import {
   getBulkCustomerDetails,
   createTestMessageMeta,
   updateTestMessageMeta,
+  getBeePopupBuilderToken,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -804,3 +805,19 @@ describe('updateTestMessageMeta', () => {
     });
   });
 });
+describe('getBeePopupBuilderToken', () => {
+  it('should return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: 'test',
+      }),
+    }));
+    const result = await getBeePopupBuilderToken();
+    expect(result).toEqual({
+      status: 200,
+      response: 'test',
+    });
+  });
+});

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

@@ -236,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,
@@ -1326,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"
@@ -1402,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)));