@capillarytech/creatives-library 6.10.0 → 6.10.2

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/CapTagList/index.js

@@ -156,50 +156,72 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   }
 
   render() {
-    const tg = this.props.tags;
+    const { hidePopover = false, tags = {}, intl = {}, moduleFilterEnabled, label, modalProps } = this.props;
+    const tg = tags;
+    const {formatMessage} = intl;
+    const { tagValue, expandedKeys, autoExpandParent, searchValue, visible } = this.state;
     const options = [
       {
         value: "All",
-        label: this.props.intl.formatMessage(messages.all),
+        label: formatMessage(messages.all),
         key: 'all',
       },
       {
         value: "Outbound",
-        label: this.props.intl.formatMessage(messages.outbound),
+        label: formatMessage(messages.outbound),
         key: 'outbound',
       },
       {
         value: "Loyalty",
-        label: this.props.intl.formatMessage(messages.loyalty),
+        label: formatMessage(messages.loyalty),
         key: 'loyalty',
       },
     ];
+    const contentSection = (<div>
+      <CapSpin tip={formatMessage(messages.gettingTags)} spinning={this.props.loading}>
+        <Search
+          style={{ marginBottom: 8, width: '250px'}}
+          placeholder={formatMessage(messages.search)}
+          onChange={this.onChange} />
+        {moduleFilterEnabled ?
+          <CapSelect
+            getPopupContainer={(triggerNode) => triggerNode.parentNode}
+            style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}}
+            onChange={this.props.onContextChange}
+            defaultValue={formatMessage(messages.all)}
+            options={options}>
+          </CapSelect> : ''}
+        <CapTree
+          styling={{height: '350px', overflow: 'auto'}}
+          onSelect={this.handleOnSelect}
+          selectedKeys={tagValue}
+          expandedKeys={expandedKeys}
+          autoExpandParent={autoExpandParent}
+          onExpand={this.onExpand}
+      >
+          {this.renderTags(tg, searchValue)}
+        </CapTree>
+      </CapSpin>
+    </div>);
     return (
-      <div>
+      <>
+        {hidePopover ? <CapModal
+          visible={this.props.visibleTaglist}
+          footer={[]}
+          {...modalProps}
+          >
+          {contentSection}
+        </CapModal> :
         <CapPopover
-          visible={this.state.visible}
+          visible={visible}
           onVisibleChange={this.togglePopoverVisibility}
-          content={<div>
-            <CapSpin tip={this.props.intl.formatMessage(messages.gettingTags)} spinning={this.props.loading}>
-              <Search style={{ marginBottom: 8, width: '250px'}} placeholder={this.props.intl.formatMessage(messages.search)} onChange={this.onChange} />
-              {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue={this.props.intl.formatMessage(messages.all)} options={options}>
-              </CapSelect> : ''}
-              <CapTree
-                styling={{height: '350px', overflow: 'auto'}}
-                onSelect={this.handleOnSelect}
-                selectedKeys={this.state.tagValue}
-                expandedKeys={this.state.expandedKeys}
-                autoExpandParent={this.state.autoExpandParent}
-                onExpand={this.onExpand}
-              >
-                {this.renderTags(tg, this.state.searchValue)}
-              </CapTree>
-            </CapSpin>
-          </div>}
+          content={contentSection}
           trigger="click"
-          placement="bottomRight">
-          <CapButton isAddBtn type="flat">{this.props.label !== '' ? this.props.label : ''}</CapButton>
+          placement="topLeft"
+          >
+          <CapButton isAddBtn type="flat">{label || ''}</CapButton>
         </CapPopover>
+        }
         <CapModal
           visible={this.state.showModal}
           title={this.props.intl.formatMessage(messages["Dynamic Days before Expiry"])}
@@ -215,7 +237,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           <p>{this.props.intl.formatMessage(messages.numberOfDaysBeforeExpiry)}</p>
           <CapInput onChange={this.handleDynamicDateChange} value={this.state.dynamicDateValue} size="default"></CapInput>
         </CapModal>
-      </div>
+      </>
     );
   }
 }
@@ -228,6 +250,13 @@ CapTagList.propTypes = {
   loading: PropTypes.bool,
   moduleFilterEnabled: PropTypes.bool,
   intl: intlShape.isRequired,
+  visibleTaglist: PropTypes.bool,
+  hidePopover: PropTypes.bool,
+  modalProps: PropTypes.any,
+};
+
+CapTagList.defaultValue = {
+  hidePopover: false,
 };
 
 export default injectIntl(CapTagList);

package/v2Components/CmsTemplatesComponent/index.js

@@ -7,23 +7,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 // import styled from 'styled-components';
-import {CapButton, CapCustomCard} from '@capillarytech/cap-ui-library';
+import {CapButton, CapCustomCard, CapSpin} from '@capillarytech/cap-ui-library';
 import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 const {CapCustomCardList} = CapCustomCard;
 function CmsTemplatesComponent(props) {
-  const cardDataList = props.cmsTemplates.map((template) => (
+  const cardDataList = (props.cmsTemplates || []).map((template) => (
     {
       key: template.name,
       title: template.name,
       url: template.versions.base.preview_http_url,
       hoverOption: <CapButton onClick={() => props.handleEdmDefaultTemplateSelection(template._id)}><FormattedMessage {...messages.select}/></CapButton>,
     }));
-  return (<div>
+  return (<CapSpin spinning={props.cmsTemplatesLoader}>
     <div className="pagination-container">
       <CapCustomCardList cardList={cardDataList} type="Email" />
     </div>
-  </div>);
+  </CapSpin>);
 }
 
 CmsTemplatesComponent.propTypes = {

package/v2Components/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/v2Components/EmailPreview/_emailPreview.scss

@@ -9,8 +9,8 @@
 
   #emailPreivew-container {
     position: relative;
-    left: 20vw;
-    width: 80vw;
+    left: 18vw;
+    width: 82vw;
     height: 100vh;
     background: rgba(255,255,255,1);
     // padding: 0 24px 0 24px;