@capillarytech/creatives-library 6.11.6 → 6.11.7

package/assets/rich-video-placeholder.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="184" viewBox="0 0 140 184">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g transform="translate(-1199 -210) translate(1199 210)">
+                    <rect width="140" height="184" fill="#EBECF0" rx="12"/>
+                    <g>
+                        <path d="M0 0L40 0 40 40 0 40z" transform="translate(50 64)"/>
+                        <path fill="#B3BAC5" fill-rule="nonzero" d="M16.333 27.167l10-7.5-10-7.5v15zM19.667 3C10.467 3 3 10.467 3 19.667c0 9.2 7.467 16.666 16.667 16.666 9.2 0 16.666-7.466 16.666-16.666S28.867 3 19.667 3zm0 30c-7.35 0-13.334-5.983-13.334-13.333 0-7.35 5.984-13.334 13.334-13.334S33 12.317 33 19.667 27.017 33 19.667 33z" transform="translate(50 64)"/>
+                    </g>
+                    <g transform="matrix(-1 0 0 1 82 112)">
+                        <circle cx="12" cy="12" r="12" stroke="#B3BAC5" stroke-width="3"/>
+                        <path d="M1.714 1.714L22.286 1.714 22.286 22.286 1.714 22.286z"/>
+                        <path fill="#B3BAC5" fill-rule="nonzero" d="M9.936 8.223V6.861c0-.763-.925-1.149-1.465-.609l-3.935 3.934c-.334.335-.334.875 0 1.209l3.935 3.934c.54.54 1.465.163 1.465-.6v-1.448c4.286 0 7.286 1.371 9.429 4.371-.857-4.286-3.429-8.571-9.429-9.429z"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/components/TemplatePreview/_templatePreview.scss

@@ -622,4 +622,18 @@
   .slick-track {
     margin-left: 0;
   }
+}
+
+.ant-btn.cap-button-v2.flat-btn.preview-video-btn {
+  padding: 0;
+  background-color: transparent;
+  height: auto;
+
+  i {
+    vertical-align: middle;
+  }
+
+  span {
+    font-size: $FONT_SIZE_VS;
+  }
 }

package/components/TemplatePreview/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
 import { injectIntl, intlShape, FormattedMessage} from 'react-intl';
-import {CapColumn, CapTab, CapIcon, CapLabel, CapImage, CapTooltip} from '@capillarytech/cap-ui-library';
+import {CapColumn, CapTab, CapIcon, CapLabel, CapImage, CapTooltip, CapButton } from '@capillarytech/cap-ui-library';
 import './_templatePreview.scss';
 import Carousel from '../../v2Components/Carousel';
 import {updateCharCount} from '../../utils/smsCharCountV2';
@@ -27,8 +27,8 @@ const wechatBody = require('./assets/images/WECHAT_5x.png');
 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';
+import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06 } from '@capillarytech/cap-ui-library/styled/variables';
+import { TEMPLATE, IMAGE_CAROUSEL, IMAGE_MAP_CAMEL_CASE, IMAGE, STICKER, TEXT, VIDEO } from '../../v2Containers/Line/Container/constants';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   getWechatAndroidPreview = (content) => (
@@ -201,6 +201,78 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         return undefined;
       });
     }
+
+    const getVideoContent = ({
+      video,
+      actionUrl,
+      sectionStyle,
+    }) => (
+      <div
+        className="message-pop align-left"
+        style={{
+          ...sectionStyle,
+          minHeight: 184,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: !video ? 'transparent' : CAP_G06,
+          marginTop: 0,
+        }}
+        key={video}
+      >
+        {
+          video
+          ? (
+            <>
+              <video width="150" style={{ opacity: 0.5 }}>
+                <source src={video} type="video/mp4" />
+              </video>
+              <div
+                style={{
+                  position: 'absolute',
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
+              >
+                <CapButton
+                  className="preview-video-btn"
+                  type="flat"
+                >
+                  <CapIcon type="play"/>
+                  <FormattedMessage {...messages.playVideo} />
+                </CapButton>
+                {
+                  actionUrl
+                  ? (
+                    <CapButton
+                      className="preview-video-btn"
+                      type="flat"
+                    >
+                      <CapIcon type="reply" style={{ fontSize: 18 }}/>
+                      <FormattedMessage {...messages.showDetails} />
+                    </CapButton>
+                  )
+                  : null
+                }
+              </div>
+            </>
+          )
+          : (
+            <CapImage
+              src={lineVideoPlaceholder}
+              alt="brand-name"
+              rest={{
+                style: {
+                  width: 126,
+                  marginBottom: 5,
+                },
+              }}
+            />
+          )
+        }
+      </div>  
+    );
+
     return (
       <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
         { (channel || '').toLowerCase() === 'sms' &&
@@ -352,6 +424,8 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                               stickerUrl: lineStickerPlaceholder,
                             },
                             imageCarousel = [lineImgPlaceholder],
+                            video,
+                            actionUrl,
                           } = item || {};
                           const sectionStyle = {
                             background: CAP_WHITE,
@@ -399,7 +473,13 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                               </div>  
                             );
                           }
+                          if (type === VIDEO) {
+                            return getVideoContent({ video, actionUrl, sectionStyle });
+                          }
                           if ((type === IMAGE_MAP_CAMEL_CASE && baseUrl)) {
+                            if (video) {
+                              return getVideoContent({ video, actionUrl, sectionStyle });
+                            }
                             return (
                               <div
                                 className="message-pop align-left"

package/components/TemplatePreview/messages.js

@@ -67,4 +67,12 @@ export default defineMessages({
     defaultMessage:
       'This message has unicode characters. This may affect the cost per message.',
   },
+  playVideo: {
+    id: 'creatives.componentsV2.TemplatePreview.playVideo',
+    defaultMessage: 'Play',
+  },
+  showDetails: {
+    id: 'creatives.componentsV2.TemplatePreview.showDetails',
+    defaultMessage: 'Show details',
+  },
 });

package/index.js

@@ -65,9 +65,6 @@ import LineCreate from './v2Containers/Line/Container';
 import lineCreateReducer from './v2Containers/Line/Container/reducer';
 import lineCreateSaga from './v2Containers/Line/Container/sagas';
 
-import LineEdit from './v2Containers/Line/Edit';
-import lineEditReducer from './v2Containers/Line/Edit/reducer';
-import lineEditSaga from './v2Containers/Line/Edit/sagas';
 import TemplatesV2 from './v2Containers/TemplatesV2/index';
 
 import CreativesContainer from './v2Containers/CreativesContainer';
@@ -93,7 +90,6 @@ const WeChatRichMediaEditContainer = {WeChatRichMediaEdit, weChatRichMediaEditRe
 const MobilePushCreateContainer = {MobilepushCreate, mobilepushCreateReducer, mobilepushCreateSaga};
 const MobilePushEditContainer = {MobilepushEdit, mobilepushEditReducer, mobilepushEditSaga};
 const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
-const LineEditContainer = {LineEdit, lineEditReducer, lineEditSaga};
 const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
 const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
@@ -128,7 +124,6 @@ export { CapContainer,
   SmsEdit,
   Email,
   LineCreateContainer,
-  LineEditContainer,
   MobilePushCreateContainer,
   MobilePushEditContainer,
   TemplatesV2Container,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "6.11.6",
+  "version": "6.11.7",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -31,7 +31,7 @@
     "redux-immutable": "3.0.8",
     "reselect": "2.5.4",
     "styled-components": "^3.2.1",
-    "whatwg-fetch": "2.0.1",
-    "webpack-bugsnag-plugins": "^1.4.3"
+    "webpack-bugsnag-plugins": "^1.4.3",
+    "whatwg-fetch": "2.0.1"
   }
-}
+}

package/services/getSchema.js

@@ -14,9 +14,6 @@ export default function getSchema(channel) {
     case WECHAT:
       schemaPath = import(`../v2Containers/WeChat/MapTemplates/initialSchema`);
       break;
-    case LINE:
-      schemaPath = import(`../v2Containers/Line/Create/initialSchema`);
-      break;
     default:
       schemaPath = import(`../v2Containers/Sms/initialSchema`);
   }

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