@capillarytech/creatives-library 6.8.8 → 6.9.1

package/components/CapTagList/index.js

@@ -187,7 +187,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
               {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue="All" options={options}>
               </CapSelect> : ''}
               <Tree
-                styling={{'height': '350px', 'overflow': 'auto'}}
+                styling={{height: '350px', overflow: 'auto'}}
                 onSelect={this.handleOnSelect}
                 selectedKeys={this.state.tagValue}
                 expandedKeys={this.state.expandedKeys}

package/components/Edmeditor/index.js

@@ -44,7 +44,7 @@ class Edmeditor extends React.Component { // eslint-disable-line react/prefer-st
     console.log('current language edm editor loading', this.props.id, this.props.edmSrc);
     return (
       this.props.edmSrc ?
-        (<iframe id={this.props.id} className={this.props.activeClass} src={this.props.edmSrc} height="460" width="100%" style={{"height": "calc(100vh - 180px)"}}></iframe>)
+        (<iframe id={this.props.id} className={this.props.activeClass} src={this.props.edmSrc} height="460" width="100%" style={{height: "calc(100vh - 180px)"}}></iframe>)
       : 'aaasass'
     );
   }

package/components/FormBuilder/index.js

@@ -912,7 +912,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
   };
   saveForm(saveForm) {
-    
     if (this.props.isNewVersionFlow && !saveForm) {
       this.props.getValidationData();
       return;

package/components/TemplatePreview/_templatePreview.scss

@@ -616,10 +616,4 @@
   display: inline-block;
   background-color: #333333;
   margin-right: 4px;
-}
-
-.template-carousel.single-img {
-  .slick-track {
-    margin-left: 0;
-  }
 }

package/components/TemplatePreview/index.js

@@ -11,7 +11,6 @@ import _ from 'lodash';
 import { injectIntl, intlShape, FormattedMessage} from 'react-intl';
 import {CapColumn, CapTab, CapIcon, CapLabel, CapImage, CapTooltip} from '@capillarytech/cap-ui-library';
 import './_templatePreview.scss';
-import Carousel from '../../v2Components/Carousel';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 const smsIcon = require('./assets/images/user-icon.svg');
@@ -28,7 +27,6 @@ const smsBody = require('./assets/images/mobile.svg');
 const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
 const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
 import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08 } from '@capillarytech/cap-ui-library/styled/variables';
-import { TEMPLATE, IMAGE_CAROUSEL, IMAGE_MAP_CAMEL_CASE, IMAGE, STICKER, TEXT } from '../../v2Containers/Line/Container/constants';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   getWechatAndroidPreview = (content) => (
@@ -351,36 +349,35 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                             selectedSticker = {
                               stickerUrl: lineStickerPlaceholder,
                             },
-                            imageCarousel = [lineImgPlaceholder],
                           } = item || {};
-                          const sectionStyle = {
-                            background: CAP_WHITE,
-                            color: FONT_COLOR_01,
-                            borderRadius: 8,
-                            position: 'static',
-                            margin: '6px 0 20px 28px',
-                            height: 'auto',
-                            minHeight: 'auto',
-                            overflow: 'initial',
-                            maxHeight: 'initial',
-                          };
-                          if (type === TEXT) {
+                          if (type === 'text') {
                             return (
                               <div
                                 className="message-pop align-left"
-                                style={sectionStyle}
+                                style={{
+                                  background: CAP_WHITE,
+                                  color: FONT_COLOR_01,
+                                  borderRadius: 8,
+                                  position: 'static',
+                                  margin: '6px 0 20px 28px',
+                                  height: 'auto'
+                                }}
                               >
                                 <p style={{ marginBottom: 5 }}>{messageContent || ''}</p>
                               </div>
                             );
                           }
-                        if ((type === IMAGE && previewImageUrl)) {
+                        if ((type === 'image' && previewImageUrl)) {
                             return (
                               <div
                                 className="message-pop align-left"
                                 style={{
-                                  ...sectionStyle,
-                                  minHeight: 184,
+                                  background: CAP_G08,
+                                  color: FONT_COLOR_01,
+                                  borderRadius: 8,
+                                  position: 'static',
+                                  margin: '6px 0 20px 28px',
+                                  height: 184,
                                   display: 'flex',
                                   justifyContent: 'center',
                                   alignItems: 'center',
@@ -399,13 +396,17 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                               </div>  
                             );
                           }
-                          if ((type === IMAGE_MAP_CAMEL_CASE && baseUrl)) {
+                          if ((type === 'imageMap' && baseUrl)) {
                             return (
                               <div
                                 className="message-pop align-left"
                                 style={{
-                                  ...sectionStyle,
-                                  minHeight: 184,
+                                  background: CAP_G08,
+                                  color: FONT_COLOR_01,
+                                  borderRadius: 8,
+                                  position: 'static',
+                                  margin: '6px 0 20px 28px',
+                                  height: 184,
                                   display: 'flex',
                                   justifyContent: 'center',
                                   alignItems: 'center',
@@ -424,13 +425,16 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                               </div>  
                             );
                           }
-                          if (type === STICKER && selectedSticker) {
+                          if (type === 'sticker' && selectedSticker) {
                             return (
                               <div
                                 className="message-pop align-left"
                                 style={{
-                                  ...sectionStyle,
                                   background: 'transparent',
+                                  color: FONT_COLOR_01,
+                                  color: FONT_COLOR_01,
+                                  position: 'static',
+                                  margin: '6px 0 20px 28px',
                                   display: 'flex',
                                   justifyContent: 'center',
                                   alignItems: 'center',
@@ -452,17 +456,6 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                               </div>  
                             );
                           }
-                          if ((type === IMAGE_CAROUSEL || type === TEMPLATE) && imageCarousel) {
-                            return (
-                              <div
-                                style={{
-                                  margin: '40px 0 8px',
-                                }}
-                              >
-                                <Carousel imageCarousel={imageCarousel}/>
-                              </div>
-                            )
-                          }
                           return null;
                         })
                       }

package/config/app.js

@@ -14,7 +14,7 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',
     arya_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1',

package/containers/TagList/index.js

@@ -82,9 +82,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
         console.log('Inside ', tag.label);
         mainTags[tag.value] = {
           'tag-header': true,
-          name: tag.label[this.props.userLocale] ? tag.label[this.props.userLocale] : tag.label.en,
-          desc: tag.desc ? tag.desc : tag.label.en,
-          subtags: tag.subtags,
+          "name": tag.label[this.props.userLocale] ? tag.label[this.props.userLocale] : tag.label.en,
+          "desc": tag.desc ? tag.desc : tag.label.en,
+          "subtags": tag.subtags,
         };
       }
     });

package/index.html

@@ -11,6 +11,11 @@
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
     <script src="https://use.typekit.net/ifw1ntv.js"></script>
+
+    <script src="https://app-rsrc.getbee.io/plugin/BeePlugin.js" type="text/javascript"></script>
+    <!-- Roboto Font -->
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
+
     <!-- Google Tag Manager -->
     <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "6.8.8",
+  "version": "6.9.1",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -16,6 +16,7 @@
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "^7.2.1",
     "@capillarytech/cap-ui-utils": "1.2.6",
+    "@mailupinc/bee-plugin": "^1.2.0",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",
     "jquery": "^3.3.1",

package/services/api.js

@@ -319,23 +319,38 @@ export const getCmsTemplateSettings = (cmsType, projectId, cmsMode, langId, isEd
   return API.get(url);
 };
 
+export const getCmsTemplateSettingsV2 = (cmsType, projectId, cmsMode, langId, isEdmSupport) => {
+  const url = `${API_ENDPOINT}/cms/v2/getDetails/?type=${cmsType}&projectId=${projectId}&cmsMode=${cmsMode}&langId=${langId}&isEdmSupport=${isEdmSupport ? 1 : 0}`;
+  return API.get(url);
+};
+
+
 export const getCmsTemplateData = (cmsType, projectId, langId) => {
   const url = `${API_ENDPOINT}/cms/getContent?type=${cmsType}&projectId=${projectId}&langId=${langId}`;
   return API.get(url);
 };
 
+export const getCmsTemplateDataV2 = (cmsType, projectId, langId) => {
+  const url = `${API_ENDPOINT}/cms/v2/getContent?type=${cmsType}&projectId=${projectId}&langId=${langId}`;
+  return API.get(url);
+};
+
 export const getCmsData = (cmsType, projectId, langId) => {
   const url = `${API_ENDPOINT}/cms/getCmsData?type=${cmsType}&projectId=${projectId}&langId=${langId}`;
   return API.get(url);
 };
 
-
 export const getEdmTemplates = () => {
   console.log('in api.js');
   const url = `${API_ENDPOINT}/templates/email/default`;
   return request(url, getAPICallObject('GET'));
 };
 
+export const getDefaultBeeTemplates = () => {
+  const url = `${API_ENDPOINT}/templates/v2/email/default`;
+  return request(url, getAPICallObject('GET'));
+}
+
 // All about line
 
 export const createLineTemplate = ({template}) => {

package/v2Components/BeeEditor/index.js

@@ -0,0 +1,278 @@
+/**
+*
+* Beeeditor
+*
+*/
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import TagList from '../../v2Containers/TagList';
+import
+{
+  CapModal,
+  CapButton,
+  CapInput,
+  CapSelect,
+}
+from '@capillarytech/cap-ui-library';
+import messages from './messages';
+import './index.scss';
+
+function BeeEditor(props) {
+  const {
+    uid,
+    beeJson,
+    tokenData,
+    id,
+    location = {},
+    moduleFilterEnabled,
+    label,
+    className,
+    userLocale,
+    selectedOfferDetails,
+    tags,
+    injectedTags,
+    saveBeeInstance,
+    saveBeeData,
+    intl,
+    onContextChange,
+  } = props;
+  const {formatMessage} = intl;
+  const UNSUBSCRIBE = 'unsubscribe';
+  let beePluginInstance = null;
+  const categoryOptions = [];
+  const [visibleTaglist, setVisibleTaglist] = useState(false);
+  const [showRowMetaModal, setRowMetaModal] = useState(false);
+  const [selectedTag, setSelectedTag] = useState({});
+  const [rowMetaInfo, setRowMetaInfo] = useState({});
+  const [rowName, setRowName] = useState('');
+  const [rowTags, setRowTags] = useState('');
+  const [rowCategory, setRowCategory] = useState('');
+
+  const savedCallback = useRef();
+  const filteredTags = (tags || []).filter((obj) => obj.definition.value !== UNSUBSCRIBE);
+  let intervalTimer;
+
+  useEffect(() => {
+    savedCallback.current = Object.keys(selectedTag).length > 0 ? selectedTag : rowMetaInfo;
+  }, [selectedTag, rowMetaInfo]);
+
+  useEffect(() => {
+    const beeConfig = {
+      uid,
+      container: 'bee-plugin-container',
+      rowsConfiguration: {
+        emptyRows: true,
+        defaultRows: true,
+      },
+      contentDialog: {
+        specialLinks: {
+          label: UNSUBSCRIBE,
+          handler(resolve) {
+            resolve({
+              type: 'custom',
+              label: UNSUBSCRIBE,
+              link: `{{${UNSUBSCRIBE}}}`,
+            });
+          },
+        },
+        mergeTags: {
+          label: 'search',
+          handler: async (resolve, reject) => {
+            await setVisibleTaglist(true);
+            const promise = new Promise((resolveP) => {
+              intervalTimer = setInterval(() => {
+                if ((savedCallback.current || {}).close === true) {
+                  reject();
+                  clearInterval(intervalTimer);
+                  return;
+                }
+                if (Object.keys(savedCallback.current || {}).length > 0) {
+                  resolveP(savedCallback.current);
+                  setSelectedTag({});
+                  clearInterval(intervalTimer);
+                }
+              }, 2000);
+            });
+            const result = await promise;
+            resolve(result); // "done!"
+          },
+        },
+        saveRow: {
+          handler: async (resolve, reject, args) => {
+            await setRowMetaModal(true);
+            const promise = new Promise((resolveP) => {
+              intervalTimer = setInterval(() => {
+                if ((savedCallback.current || {}).close === true) {
+                  reject();
+                  clearInterval(intervalTimer);
+                  setRowMetaInfo({});
+                  setRowName('');
+                  setRowTags('');
+                  setRowCategory('');
+                  return;
+                }
+                if (Object.keys(savedCallback.current || {}).length > 0) {
+                  const data = {...args, ...savedCallback.current};
+                  resolveP(data);
+                }
+              }, 2000);
+            });
+            const result = await promise;
+            resolve(result); // "done!"
+            setRowMetaInfo({});
+            setRowName('');
+            setRowTags('');
+            setRowCategory('');
+            clearInterval(intervalTimer);
+          },
+        },
+      },
+      onSave: (jsonFile, htmlFile) => {
+        saveBeeData(jsonFile, htmlFile);
+      },
+      onSaveRows: (jsonFile, htmlFile) => {
+        console.log('bee-plugin-container onSaveRows', jsonFile, htmlFile);
+      },
+    };
+    window.BeePlugin.create(tokenData, beeConfig, (instance) => {
+      beePluginInstance = instance;
+      console.log('bee instance', beePluginInstance);
+      const parseJson = JSON.parse(beeJson);
+      beePluginInstance.start(parseJson);
+      saveBeeInstance(beePluginInstance);
+    });
+    return () => clearInterval(intervalTimer);
+  }, []);
+
+  const onTagSelect = (result) => {
+    const msg = {
+      name: result,
+      value: `{{${result}}}`,
+    };
+
+    setSelectedTag(msg);
+    setVisibleTaglist(false);
+  };
+
+  const onCancelTagList = () => {
+    setVisibleTaglist(false);
+    setSelectedTag({close: true});
+  };
+
+  const handleCancel = () => {
+    setRowMetaModal(false);
+    setRowMetaInfo({close: true});
+  };
+
+  const handleOk = () => {
+    console.log('handleOk');
+    const rowInfo = {};
+    if (rowTags !== '') {
+      rowInfo.tags = rowTags;
+    }
+    if (rowCategory !== '') {
+      rowInfo.category = rowCategory;
+    }
+    setRowMetaInfo({
+      name: rowName,
+      ...rowInfo,
+    });
+    setRowMetaModal(false);
+    // set rowMetaInfo
+  };
+  const isDisableSave = () => rowName === '';
+
+  const onRowChange = useCallback((e) => {
+    setRowName(e.target.value);
+  });
+
+  const onChangeCategoy = (e) => {
+    console.log('onChangeCategoy', e);
+  };
+
+  const onTagChange = (e) => {
+    setRowTags(e.target.value);
+  };
+
+  const contentSection = <>
+    <CapInput
+      label={<FormattedMessage {...messages.rowName} />}
+      placeholder={formatMessage(messages.rowPlaceHolder)}
+      onChange={onRowChange}
+      value={rowName}
+      maxLength={50}
+      style={{ width: '324px', paddingBottom: '16px' }}
+    />
+    <CapSelect
+      label="Category"
+      style={{ width: 250, paddingBottom: '16px'}}
+      options={categoryOptions}
+      selectPlaceholder={formatMessage(messages.select)}
+      placeholder={
+        <FormattedMessage {...messages.selectCategoyPlaceholder} />
+              }
+      onChange={onChangeCategoy}
+    />
+    <CapInput
+      label={<FormattedMessage {...messages.tags} />}
+      placeholder={formatMessage(messages.tagPlaceHolder)}
+      onChange={onTagChange}
+      value={rowTags}
+      maxLength={50}
+      style={{ width: '324px', paddingBottom: '16px'}}
+    />
+  </>;
+  return (
+    <>
+      <div id="bee-plugin-container" style={{ height: '500px'}}>
+
+      </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: 200, top: 250 },
+            className: "bee-editor-tag-list"
+          }
+        }
+        onContextChange={onContextChange}
+      />
+      <CapModal
+        visible={showRowMetaModal}
+        onCancel={handleCancel}
+        title={formatMessage(messages.customRows)}
+        footer={[
+          <CapButton key="back" onClick={handleCancel}>{formatMessage(messages.cancel)}</CapButton>,
+          <CapButton key="submit" type="primary" id="delete-version" onClick={handleOk} disabled={isDisableSave()}>
+            {formatMessage(messages.save)}
+          </CapButton>,
+        ]}
+          >
+        {contentSection}
+      </CapModal>
+      </>
+  );
+}
+
+BeeEditor.propTypes = {
+  beeJson: PropTypes.object.isRequired,
+  tokenData: PropTypes.object.isRequired,
+  uid: PropTypes.string.isRequired,
+  showTagsPopover: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(BeeEditor);

package/v2Components/BeeEditor/index.scss

@@ -0,0 +1,11 @@
+.cap-modal-v2.bee-editor-tag-list {
+  .ant-modal-content {
+    .ant-modal-body {
+      padding-top: 20px;
+      padding-bottom: 10px;
+    }
+    .ant-modal-footer {
+      display: none;
+    }
+  }
+}

package/v2Components/BeeEditor/messages.js

@@ -0,0 +1,47 @@
+/*
+ * BeeEditor Messages
+ *
+ * This contains all the text for the BeeEditor component.
+ */
+import { defineMessages } from 'react-intl';
+
+const prefix = 'creatives.componentsV2.BeeEditor';
+
+export default defineMessages({
+  cancel: {
+    id: `${prefix}.cancel`,
+    defaultMessage: 'Cancel',
+  },
+  save: {
+    id: `${prefix}.save`,
+    defaultMessage: 'Save',
+  },
+  rowPlaceHolder: {
+    id: `${prefix}.rowPlaceHolder`,
+    defaultMessage: 'Enter Row name',
+  },
+  rowName: {
+    id: `${prefix}.rowName`,
+    defaultMessage: 'Row name',
+  },
+  select: {
+    id: `${prefix}.select`,
+    defaultMessage: 'Select',
+  },
+  customRows: {
+    id: `${prefix}.customRows`,
+    defaultMessage: 'Custom rows',
+  },
+  selectCategoyPlaceholder: {
+    id: `${prefix}.selectCategoyPlaceholder`,
+    defaultMessage: 'Select category',
+  },
+  tags: {
+    id: `${prefix}.tags`,
+    defaultMessage: 'Tags (optional)',
+  },
+  tagPlaceHolder: {
+    id: `${prefix}.tagPlaceHolder`,
+    defaultMessage: 'Enter tags',
+  },
+});

package/v2Components/BeeEditor/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import Beeeditor from '../index';
+
+describe('<Beeeditor />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});