@capillarytech/creatives-library 6.14.1 → 6.15.2

package/app.js

@@ -25,6 +25,7 @@ import initialState from './initialState';
 import './styles/vendor/semantic/dist/semantic.min.css';
 import './styles/main.scss';
 import pathConfig from './config/path';
+import ignoredErrorMessages from './utils/ignoredErrorMessages';
 // addLocaleData([...en, ...es, ...fr, ...it, ...zh]);
 
 const browserHistory = useRouterHistory(createHistory)({
@@ -38,10 +39,12 @@ const history = syncHistoryWithStore(browserHistory, store, {
 });
 
 const bugSnagErrorCallback = (event) => {
-  const { app: { releaseStage } = {} } = event || {};
+  const { app: { releaseStage } = {}, originalError } = event || {};
+  const errorMessage = originalError && originalError.message;
   if (
     (releaseStage || '').includes('nightly') ||
-    process.env.NODE_ENV !== 'production'
+    process.env.NODE_ENV !== 'production' ||
+    ignoredErrorMessages.include[errorMessage]
   ) {
     return false;
   }

package/config/app.js

@@ -11,7 +11,6 @@ const config = {
     dashboard_url: '/sms',
     dashboard_url_v2: '/v2',
     subscription_api_endpoint: '/arya/api/v1/org-settings/subscription',
-    exports_api_endpoint: '/arya/api/v1/export/data',
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
@@ -20,7 +19,6 @@ const config = {
     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',
     subscription_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/org-settings/subscription',
-    exports_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/export/data',
     login_url: '/auth/login',
     dashboard_url: '/sms',
     dashboard_url_v2: '/v2',

package/containers/Templates/index.js

@@ -721,9 +721,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     switch (type) {
-      case "getFormData":
-        this.getFormData(e);
-        break;
       case "startTemplateCreation":
         console.log('Starting to create template');
         //this.getFormData(e);

package/index.js

@@ -56,10 +56,6 @@ import MobilepushCreate from './v2Containers/MobilePush/Create';
 import mobilepushCreateReducer from './v2Containers/MobilePush/Create/reducer';
 import mobilepushCreateSaga from './v2Containers/MobilePush/Create/sagas';
 
-import FTP from './v2Containers/FTP';
-import FTPReducer from './v2Containers/FTP/reducer';
-import FTPSagas from './v2Containers/FTP/sagas';
-
 import MobilepushEdit from './v2Containers/MobilePush/Edit';
 import mobilepushEditReducer from './v2Containers/MobilePush/Edit/reducer';
 import mobilepushEditSaga from './v2Containers/MobilePush/Edit/sagas';
@@ -97,7 +93,6 @@ const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
 const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
 const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
-const FTPContainer = {FTP, FTPReducer, FTPSagas};
 
 export {default as TagList} from './v2Containers/TagList/index';
 export {default as TagListSaga} from './v2Containers/TagList/sagas';
@@ -109,7 +104,6 @@ export {default as CallTaskPreview} from './v2Components/CallTaskPreview';
 export {default as EmailMobilePreview} from './v2Components/EmailMobilePreview';
 export {default as MobilePushPreview} from './v2Components/MobilePushPreviewV2';
 export {default as WechatRichmediaTemplatePreview} from './v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
-export {default as FTP} from './v2Containers/FTP';
 
 CreativesContainer.CreativesContainerReducer = CreativesContainerReducer;
 
@@ -137,5 +131,4 @@ export { CapContainer,
   updateCharCount,
   FacebookContainer,
   GalleryContainer,
-  FTPContainer,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "6.14.1",
+  "version": "6.15.2",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -15,7 +15,7 @@
     "@babel/polyfill": "7.4.3",
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "^7.2.1",
-    "@capillarytech/cap-ui-utils": "1.3.3",
+    "@capillarytech/cap-ui-utils": "1.3.4",
     "@mailupinc/bee-plugin": "^1.2.0",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",

package/reducers.js

@@ -17,7 +17,7 @@ import templateReducer from 'containers/Templates/reducer';
 import tagsReducer from 'containers/TagList/reducer';
 import emailReducer from 'containers/Email/reducer';
 import ebillReducer from 'containers/Ebill/reducer';
-import ftpReducer from 'v2Containers/FTP/reducer';
+
 /*
  * routeReducer
  *
@@ -62,7 +62,6 @@ export default function createReducer(asyncReducers) {
     email: emailReducer,
     ebill: ebillReducer,
     beeEditor: beeEditorReducer,
-    FTP: ftpReducer,
     ...asyncReducers,
   });
 }

package/services/api.js

@@ -9,7 +9,6 @@ import getSchema from './getSchema';
 import * as API from '../utils/ApiCaller';
 import { GA } from '@capillarytech/cap-ui-utils';
 let API_ENDPOINT = config.development.api_endpoint;
-let EXPORT_API_ENDPOINT = config.development.exports_api_endpoint;
 let CAMPAIGNS_API_ENDPOINT = config.development.campaigns_api_endpoint;
 let API_AUTH_ENDPOINT = config.development.auth_endpoint;
 let ARYA_ENDPOINT = config.development.arya_endpoint;
@@ -214,12 +213,6 @@ export const duplicateTemplate = ({id, channel}) => {
   return request(url, getAPICallObject('GET'));
 };
 
-export const getFTPServers = () => {
-  console.log('in api.js getFTPServers');
-  const url = `${EXPORT_API_ENDPOINT}/ftplist`;
-  return request(url, getAPICallObject('GET'));
-};
-
 export const editWeChatTemplate = ({template}) => {
   console.log('in api.js', template);
   const url = `${API_ENDPOINT}/templates/WECHAT`;

package/utils/common.js

@@ -37,121 +37,3 @@ export const hasStore2DoorFeature = Auth.hasFeatureAccess.bind(
   null,
   STORE2DOOR_PLUS_ENABLED,
 );
-
-export function getTreeStructuredTags(tagsList, userLocale = 'en') {
-  console.log('populating tags', (tagsList || []).length);
-  const mainTags = {};
-
-  //Form tags object with tag headers
-  _.forEach(tagsList, (temp) => {
-    const tag = temp.definition;
-    if (!tag['tag-header']) {
-      mainTags[tag.value] = {
-        name: tag.label[userLocale] ? tag.label[userLocale] : tag.label.en,
-        value: tag.value,
-      };
-    } else if (tag['tag-header'] && mainTags[tag.value]) {
-      mainTags[tag.value].subtags = _.concat(mainTags[tag.value].subtags, tag.subtags);
-    } else if (!mainTags[tag.value]) {
-      // console.log('Inside ', tag.label);
-      mainTags[tag.value] = {
-        'tag-header': true,
-        "name": tag.label[userLocale] ? tag.label[userLocale] : tag.label.en,
-        "subtags": tag.subtags,
-        "value": tag.value,
-      };
-    }
-  });
-
-  const mainTagsCloned = _.cloneDeep(mainTags);
-  //Insert subtags in tag headers and reomve them from top level
-  const result = {};
-  _.forEach(mainTagsCloned, (tag, key) => {
-    if (tag['tag-header']) {
-      const tagWithChildren = populateTagForChildren(tag, mainTagsCloned, key);
-      tagWithChildren.resolved = true;
-      result[key] = tagWithChildren;
-    } else {
-      result[key] = tag;
-    }
-  });
-
-  //Delete extra tag headers
-  _.forEach(result, (tag) => {
-    if (tag['tag-header']) {
-      _.forEach(tag.subtags, (subtag, key) => {
-        if (result[key]) {
-          result[key].deleted = true;
-        }
-      });
-    }
-  });
-  //Actually delete them
-  _.forEach(result, (tag, key) => {
-    if (tag.deleted) {
-      delete result[key];
-    }
-  });
-  return getTreeStructureData(result);
-}
-
-function populateTagForChildren(targetTag, tagsObject, tagValue) {
-  const tag = targetTag;
-  if (tag && tag['tag-header'] && !tag.resolved) {
-    const tempSubTags = {};
-    _.forEach(tag.subtags, (subtag) => {
-      if (tagsObject[subtag]) {
-        const children = populateTagForChildren(tagsObject[subtag], tagsObject, subtag);
-        children.resolved = true;
-        tempSubTags[subtag] = children;
-      }
-    });
-    tag.subtags = tempSubTags;
-    return tag;
-  }
-  return tagsObject[tagValue];
-}
-
-function getTreeStructureData(data) {
-  const result = [];
-  _.forOwn(data, (mainTag) => {
-    const { name, value, subtags = [] } = mainTag;
-    if (!mainTag['tag-header']) {
-      result.push({
-        title: name,
-        value: `{{${value}}}`,
-      });
-    } else {
-      const obj = {
-        title: name,
-        value: `{{${value}}}`,
-        selectable: false,
-      };
-      obj.children = getSubTags(subtags);
-      result.push(obj);
-    }
-  });
-  return result;
-}
-
-function getSubTags(subtagsParam) {
-  const result = [];
-  _.forOwn(subtagsParam, (subTag) => {
-    const { name, value, subtags = [] } = subTag;
-    if (_.isEmpty(subtags)) {
-      result.push({
-        title: name,
-        value: `{{${value}}}`,
-      });
-    } else {
-      const obj = {
-        title: name,
-        value: `{{${value}}}`,
-        selectable: false,
-      };
-      obj.children = getSubTags(subtags);
-      result.push(obj);
-    }
-  });
-  return result;
-}

package/utils/ignoredErrorMessages.js

@@ -0,0 +1,4 @@
+export default [
+  // ref: https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded
+  'ResizeObserver loop limit exceeded'
+];

package/v2Components/BeeEditor/index.js

@@ -0,0 +1,263 @@
+/**
+*
+* 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 = [{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)},
+  ];
+  const [visibleTaglist, setVisibleTaglist] = useState(false);
+  const [showRowMetaModal, setRowMetaModal] = useState(false);
+  const [selectedTag, setSelectedTag] = useState({});
+  const [rowMetaInfo, setRowMetaInfo] = useState({});
+  const [rowName, setRowName] = 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: formatMessage(messages.addLabel),
+          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);
+          },
+        },
+        saveRow: {
+          handler: async (resolve, reject) => {
+            await setRowMetaModal(true);
+            const promise = new Promise((resolveP) => {
+              intervalTimer = setInterval(() => {
+                if ((savedCallback.current || {}).close === true) {
+                  reject();
+                  clearInterval(intervalTimer);
+                  setRowMetaInfo({});
+                  setRowName('');
+                  setRowCategory('');
+                  return;
+                }
+                if (Object.keys(savedCallback.current || {}).length > 0) {
+                  resolveP(savedCallback.current);
+                }
+              }, 2000);
+            });
+            const result = await promise;
+            resolve(result); // "done!"
+            setRowMetaInfo({});
+            setRowName('');
+            setRowCategory('');
+            clearInterval(intervalTimer);
+          },
+        },
+      },
+      onSave: (jsonFile, htmlFile) => {
+        saveBeeData(jsonFile, htmlFile);
+      },
+        // will use this function on save row feature
+      onSaveRow: (rowJSON) => {
+        console.log('bee-plugin-container onSaveRows', rowJSON);
+      },
+    };
+    window.BeePlugin.create(tokenData, beeConfig, (instance) => {
+      beePluginInstance = instance;
+      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 = () => {
+    const rowInfo = {};
+    if (rowCategory !== '') {
+      rowInfo.category = rowCategory;
+    }
+    setRowMetaInfo({
+      name: rowName,
+      ...rowInfo,
+    });
+    setRowMetaModal(false);
+  };
+  const isDisableSave = () => rowName === '';
+
+  const onRowChange = useCallback((e) => {
+    setRowName(e.target.value);
+  });
+  const onChangeCategoy = (e) => {
+    setRowCategory(e);
+  };
+  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}
+    />
+
+  </>;
+  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: 135, 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,71 @@
+/*
+ * 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',
+  },
+  addLabel: {
+    id: `${prefix}.addLabel`,
+    defaultMessage: 'Add label',
+  },
+  cta: {
+    id: `${prefix}.cta`,
+    defaultMessage: 'CTA',
+  },
+  header: {
+    id: `${prefix}.header`,
+    defaultMessage: 'Header',
+  },
+  footer: {
+    id: `${prefix}.footer`,
+    defaultMessage: 'Footer',
+  },
+  others: {
+    id: `${prefix}.others`,
+    defaultMessage: 'Others',
+  },
+  socialPlatform: {
+    id: `${prefix}.socialPlatform`,
+    defaultMessage: 'Social platform',
+  },
+});

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);
+  });
+});

package/v2Components/FormBuilder/index.js

@@ -2362,7 +2362,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           this.renderTextAreaContent(styling, columns, val, isVersionEnable, rows, cols, val.offset);
           break;
         case "contentPreview":
-          content = isVersionEnable ? this.state.formData[this.state.currentTab - 1]['sms-editor'] : this.state.formData['sms-editor'];
+          const { formData , currentTab } = this.state || {};
+          const tab = formData && formData[currentTab - 1];
+          content = isVersionEnable ? tab && tab['sms-editor'] : formData && formData['sms-editor'];
           charList = updateCharCount(content).char_list;
           columns.push(<CapColumn id={val.id} className={"preview-chars"} span={val.width}>
             {charList.map((char) => char)}
@@ -3198,7 +3200,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               }
             }
             const { currentTab, formData } = this.state;
-            const supportedLanguages = (formData[currentTab - 1] || {}).selectedLanguages;
+            const supportedLanguages = (formData[currentTab - 1] || {}).selectedLanguages || {};
             const currentLang = supportedLanguages[langTab - 1];
 
             let beeJson = '',