@capillarytech/creatives-library 6.11.5 → 6.11.7

package/v2Containers/Line/Container/Video/messages.js

@@ -0,0 +1,142 @@
+/*
+ * LineVideo Messages
+ *
+ * This contains all the text for the LineVideo component.
+ */
+import { defineMessages } from 'react-intl';
+const scope = `creatives.containersV2.LineVideo`;
+
+export default defineMessages({
+  "textMessageAddLabel": {
+    id: `${scope}.textMessageAddLabel`,
+    defaultMessage: 'How do you want to upload the image?',
+  },
+  "textMessageCreateNew": {
+    id: `${scope}.textMessageCreateNew`,
+    defaultMessage: 'Create new',
+  },
+  "textMessageSelectTemplate": {
+    id: `${scope}.textMessageSelectTemplate`,
+    defaultMessage: 'Select template',
+  },
+  "textMessageORLabel": {
+    id: `${scope}.textMessageORLabel`,
+    defaultMessage: 'OR',
+  },
+  "textMessageTitlePlaceholder": {
+    id: `${scope}.textMessageTitlePlaceholder`,
+    defaultMessage: 'Enter template name',
+  },
+  "textMessageTitleLabel": {
+    id: `${scope}.textMessageTitleLabel`,
+    defaultMessage: 'Template name',
+  },
+  "emptyTitleErrorMessage": {
+    id: `${scope}.emptyTitleErrorMessage`,
+    defaultMessage: 'Template title can not be empty',
+  },
+  "videoFormatDescription": {
+    id: `${scope}.videoFormatDescription`,
+    defaultMessage: 'File formats: MP4',
+  },
+  videoSizeDescription: {
+    id: `${scope}.videoSizeDescription`,
+    defaultMessage: 'File size: Up to 200 MB',
+  },
+  "imageReUpload": {
+    id: `${scope}.imageReUpload`,
+    defaultMessage: 'Re upload',
+  },
+  "uploadGallery": {
+    id: `${scope}.uploadGallery`,
+    defaultMessage: 'Gallery',
+  },
+  "uploadComputer": {
+    id: `${scope}.uploadComputer`,
+    defaultMessage: 'Your computer',
+  },
+  "or": {
+    id: `${scope}.or`,
+    defaultMessage: 'OR',
+  },
+  "dragAndDrop": {
+    id: `${scope}.dragAndDrop`,
+    defaultMessage: 'Drag and drop video here',
+  },
+  "lineVideoIncorrectSize": {
+    id: `${scope}.lineVideoIncorrectSize`,
+    defaultMessage: 'This file format/size is not supported.',
+  },
+  "imageGallery": {
+    id: `${scope}.imageGallery`,
+    defaultMessage: 'Gallery',
+  },
+  "uploadVideoLabel": {
+    id: `${scope}.uploadVideoLabel`,
+    defaultMessage: 'Upload Video',
+  },
+  "select": {
+    id: `${scope}.select`,
+    defaultMessage: 'Select',
+  },
+  "lineTemplateImage": {
+    id: `${scope}.lineTemplateImage`,
+    defaultMessage: 'Line templates - Image',
+  },
+  "searchImages": {
+    id: `${scope}.searchImages`,
+    defaultMessage: 'Search Images',
+  },
+  "emptyAltTextErrorMessage": {
+    id: `${scope}.emptyAltTextErrorMessage`,
+    defaultMessage: 'Title can not be empty',
+  },
+  "titleLabel": {
+    id: `${scope}.titleLabel`,
+    defaultMessage: 'Title',
+  },
+  "titleDescription": {
+    id: `${scope}.titleDescription`,
+    defaultMessage: 'The title is shown in push notifications and in the user\'s chat list.',
+  },
+  actionLabelPlaceholder: {
+    id: `${scope}.actionLabelPlaceholder`,
+    defaultMessage: 'Enter Label',
+  },
+  actionLabelTitle: {
+    id: `${scope}.actionLabelTitle`,
+    defaultMessage: 'Action button label',
+  },
+  actionLabelInductiveTitle: {
+    id: `${scope}.actionLabelInductiveTitle`,
+    defaultMessage: 'Make your own action button label',
+  },
+  "maxActionLabelErrorMessage": {
+    id: `${scope}.maxActionLabelErrorMessage`,
+    defaultMessage: 'Action label can not be more than 20 character',
+  },
+  "emptyLabelErrorMessage": {
+    id: `${scope}.emptyLabelErrorMessage`,
+    defaultMessage: 'Action label can not be more empty',
+  },
+  actionUrlPlaceholder: {
+    id: `${scope}.actionUrlPlaceholder`,
+    defaultMessage: 'Enter URL',
+  },
+  actionUrlTitle: {
+    id: `${scope}.actionUrlTitle`,
+    defaultMessage: 'Link Url',
+  },
+  emptyUrlErrorMessage: {
+    id: `${scope}.emptyUrlErrorMessage`,
+    defaultMessage: 'Action URL can not be more empty',
+  },
+  actionButtonLabel: {
+    id: `${scope}.actionButtonLabel`,
+    defaultMessage: 'Action button',
+  },
+  inValidUrlErrorMessage: {
+    id: `${scope}.inValidUrlErrorMessage`,
+    defaultMessage: 'Action url is not valid',
+  },
+});

package/v2Containers/Line/Container/Video/style.js

@@ -0,0 +1,61 @@
+import { css } from 'styled-components';
+import {
+  CAP_SPACE_20,
+  CAP_G10,
+  CAP_G06,
+  CAP_SPACE_16,
+  CAP_SPACE_24,
+  FONT_COLOR_02,
+  FONT_SIZE_M,
+} from '@capillarytech/cap-ui-library/styled/variables';
+
+export default css`
+  padding: 0 ${CAP_SPACE_16} ${CAP_SPACE_16};
+  position: relative;
+
+  .image-container {
+    background-color: ${CAP_G06};
+    margin-top: ${CAP_SPACE_20};
+  }
+
+  .choice-title {
+    margin-bottom: ${CAP_SPACE_24};
+    color: ${FONT_COLOR_02};
+  }
+  
+  .ant-radio-group {
+    margin-bottom: ${CAP_SPACE_24};
+  }
+
+  .video-description {
+    span:nth-child(2) {
+      float: right;
+    }
+    margin-bottom: ${CAP_SPACE_24};
+  }
+
+  .form-builder-dragger {
+    .ant-upload-drag {
+      background-color: ${CAP_G10};
+    }
+  }
+
+  .action-label-section {
+    .component-with-label-label {
+      font-size: ${FONT_SIZE_M};
+    }
+  }
+
+  .action-url-section {
+    margin-bottom: ${CAP_SPACE_20};
+  }
+  .action-url-section,
+  .action-label-section {
+    padding-left: ${CAP_SPACE_24};
+  }
+
+  .line-image-src {
+    width: 230px;
+  }
+`;
+

package/v2Containers/Line/Container/Wrapper/index.js

@@ -49,6 +49,7 @@ export const LineWrapper = ({
             selectedTemplate,
             template,
             altText,
+            videoSrc,
         } = content;
 
         const isTouched  = (
@@ -65,6 +66,7 @@ export const LineWrapper = ({
             || selectedTemplate
             || template
             || altText
+            || videoSrc
         );
         if (!isTouched) {
             updateActiveKey(type);

package/v2Containers/Line/Container/Wrapper/messages.js

@@ -47,4 +47,8 @@ export default defineMessages({
     id: `${scope}.templateLabel`,
     defaultMessage: 'Card message',
   },
+  "videoLabel": {
+    id: `${scope}.videoLabel`,
+    defaultMessage: 'Rich video message',
+  },
 });

package/v2Containers/Line/Container/Wrapper/utils.js

@@ -2,12 +2,13 @@ import React from 'react';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 
-import { TEXT, IMAGE, IMAGE_MAP, STICKER, IMAGE_CAROUSEL, TEMPLATE } from '../constants';
+import { TEXT, IMAGE, IMAGE_MAP, STICKER, IMAGE_CAROUSEL, TEMPLATE, VIDEO } from '../constants';
 import LineText from '../Text';
 import LineImage from '../Image';
 import LineSticker from '../Sticker';
 import LineImageMap from '../ImageMap';
 import LineImageCarousel from '../ImageCarousel';
+import LineVideo from '../Video';
 import messages from './messages';
 
 export const getTabContent = ({ item, props }) => {
@@ -27,6 +28,9 @@ export const getTabContent = ({ item, props }) => {
     case TEMPLATE: {
       return <LineImageCarousel {...props} />;
     }
+    case VIDEO: {
+      return <LineVideo {...props} />;
+    }
   }
 };
 
@@ -36,12 +40,13 @@ export const itemIcons = {
   [STICKER]: 'smiley-message',
   [IMAGE_MAP]: 'rich-message',
   [TEMPLATE]: 'carousel-message',
+  [VIDEO]: 'rich-video-message',
 };
 
 
 export const getTabPanes = (props) => {
-  const tableKeys = [TEXT, IMAGE, STICKER, IMAGE_MAP, TEMPLATE];
-  const tableKeysCreatives = [TEXT, IMAGE, IMAGE_MAP, TEMPLATE];
+  const tableKeys = [TEXT, IMAGE, STICKER, IMAGE_MAP, TEMPLATE, VIDEO];
+  const tableKeysCreatives = [TEXT, IMAGE, IMAGE_MAP, TEMPLATE, VIDEO];
   return (props.isFullMode ? tableKeysCreatives : tableKeys).map((item) => {
     const isSelected = props.activeKey === item;
     return {

package/v2Containers/Line/Container/constants.js

@@ -4,9 +4,11 @@ export const IMAGE = 'image';
 export const IMAGE_MAP = 'imagemap';
 export const IMAGE_CAROUSEL = 'image_carousel';
 export const TEMPLATE = 'template';
+export const VIDEO = 'video';
 export const MAX_LINE_WRAPPER_LIMIT = 5;
 export const MAX_LINE_WRAPPER_LIMIT_FULL_MODE = 1;
 export const IMAGE_MAP_CAMEL_CASE = 'imageMap';
+export const DEFAULT_VIDEO_URI = window.location.href;
 
 /*
  *

package/v2Containers/Line/Container/index.js

@@ -22,7 +22,7 @@ import { TRACK_CREATE_LINE, TRACK_EDIT_LINE } from '../../App/constants';
 
 import LineWrapper from './Wrapper';
 import messages from './messages';
-import { TEXT, IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, MAX_LINE_WRAPPER_LIMIT, MAX_LINE_WRAPPER_LIMIT_FULL_MODE  } from './constants';
+import { TEXT, IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, MAX_LINE_WRAPPER_LIMIT, MAX_LINE_WRAPPER_LIMIT_FULL_MODE, DEFAULT_VIDEO_URI  } from './constants';
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 
 import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
@@ -114,6 +114,9 @@ export const LineContainer = ({
             const assetType = get(Line, 'templateDetails.assetType');
             const actionLinks = get(Line, 'templateDetails.actionLinks');
             const template = get(Line, `templateDetails.versions.base.content.messages.0.template`);
+            const video = get(Line, `templateDetails.versions.base.content.messages.0.video`);
+            const videoName = get(Line, `templateDetails.versions.base.content.messages.0.videoName`);
+            const videoDuration = get(Line, `templateDetails.versions.base.content.messages.0.videoDuration`);
             const lineContent = {
                 type,
                 messageContent,
@@ -133,6 +136,9 @@ export const LineContainer = ({
                 baseSize,
                 template,
                 altText,
+                video,
+                videoName,
+                videoDuration,
             };
             updateLineWrapperContent([lineContent]);
         }
@@ -159,6 +165,9 @@ export const LineContainer = ({
                 selectedTemplate,
                 template,
                 altText,
+                video,
+                videoName,
+                videoDuration,
             }) => {
                 const obj = {
                     type,
@@ -173,6 +182,9 @@ export const LineContainer = ({
                     selectedTemplate,
                     template,
                     altText,
+                    video,
+                    videoName,
+                    videoDuration,
                 };
                 if (stickerUrl) {
                     obj.selectedSticker = {
@@ -182,6 +194,9 @@ export const LineContainer = ({
                         packageId: `${packageId}`,
                     };
                 }
+                if (video) {
+                    obj.type = 'video';
+                }
                 lineContent.push(obj);
             });
             updateLineWrapperContent(lineContent);
@@ -337,6 +352,12 @@ export const LineContainer = ({
             actionLinks,
             template,
             altText,
+            videoSrc,
+            videoName,
+            actionLabel,
+            actionUrl,
+            videoHeight,
+            videoWidth,
         } = {}] = lineWrapperContents;
         let messageData = { type };
         messageData[messageType] = messageContent;
@@ -363,6 +384,43 @@ export const LineContainer = ({
             messageData.template = template;
             messageData.altText = altText;
         }
+        if (videoSrc) {
+            delete messageData.previewImageUrl;
+            messageData.type = 'imagemap';
+            messageData.altText = altText;
+            messageData.baseSize = {
+                height: videoHeight,
+                width: videoWidth,
+            };
+            messageData.actions = [{
+                type: 'uri',
+                linkUri: actionUrl || DEFAULT_VIDEO_URI,
+                area: {
+                    height: 1,
+                    width: 1,
+                    x: 0,
+                    y: 0,
+                },
+            }];
+            messageData.baseUrl = previewImageUrl.replace('/1040', '');
+            messageData.video = {
+                area: {
+                    x: 0,
+                    y: 0,
+                    height: videoHeight,
+                    width: videoWidth,
+                },
+                originalContentUrl: videoSrc,
+                previewImageUrl,
+            };
+            if (actionLabel) {
+                messageData.video.externalLink = {
+                    label: actionLabel,
+                    linkUri: actionUrl,
+                };
+            }
+            messageData.videoName = videoName;
+        }
         return {
             versions: {
                     base: {
@@ -398,6 +456,12 @@ export const LineContainer = ({
             actionLinks,
             template,
             altText,
+            videoSrc,
+            videoName,
+            actionLabel,
+            actionUrl,
+            videoHeight,
+            videoWidth,
         }) => {
             let messageData = { type };
             messageData[messageType] = messageContent;
@@ -425,6 +489,43 @@ export const LineContainer = ({
                 messageData.template = template;
                 messageData.altText = altText;
             }
+            if (videoSrc) {
+                delete messageData.previewImageUrl;
+                messageData.type = 'imagemap';
+                messageData.altText = altText;
+                messageData.baseSize = {
+                    height: videoHeight,
+                    width: videoWidth,
+                };
+                messageData.actions = [{
+                    type: 'uri',
+                    linkUri: actionUrl || DEFAULT_VIDEO_URI,
+                    area: {
+                        height: 1,
+                        width: 1,
+                        x: 0,
+                        y: 0,
+                    },
+                }];
+                messageData.baseUrl = previewImageUrl.replace('/1040', '');
+                messageData.video = {
+                    area: {
+                        x: 0,
+                        y: 0,
+                        height: videoHeight,
+                        width: videoWidth,
+                    },
+                    originalContentUrl: videoSrc,
+                    previewImageUrl,
+                };
+                if (actionLabel) {
+                    messageData.video.externalLink = {
+                        label: actionLabel,
+                        linkUri: actionUrl,
+                    };
+                }
+                messageData.videoName = videoName;
+            }
             return messageData;
         });
         return ({
@@ -459,12 +560,14 @@ export const LineContainer = ({
 
     const getPreviewSection = () => {
         const accountName = get(lineData, 'selectedLineAccount.name', '');
-        const templateContent = lineWrapperContents.map(({ messageContent, type, previewImageUrl, selectedSticker, baseUrl, template }) => ({
+        const templateContent = lineWrapperContents.map(({ messageContent, type, previewImageUrl, selectedSticker, baseUrl, template, videoSrc, actionUrl }) => ({
             messageContent,
             previewImageUrl,
             selectedSticker,
             type,
             baseUrl,
+            video: videoSrc,
+            actionUrl,
             imageCarousel: get(template, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) ),
         }));
 
@@ -576,6 +679,10 @@ export const LineContainer = ({
             <CapSpin spinning={isLoading}>
                 <CapRow>
                     <CapColumn span={14} style={{ zIndex: 1 }}>
+                        <CapHeader
+                            title={formatMessage(messages.lineAccountLabel)}
+                            size="regular"
+                        />
                         {getAccountSection()}
                         <CapHeader
                             title={formatMessage(messages.lineCreativeTitle)}

package/v2Containers/Line/Container/messages.js

@@ -63,4 +63,8 @@ export default defineMessages({
     id: `${scope}.cancelButtonLabel`,
     defaultMessage: 'Cancel',
   },
+  "lineAccountLabel": {
+    id: `${scope}.lineAccountLabel`,
+    defaultMessage: 'Line account',
+  },
 });

package/v2Containers/Templates/index.js

@@ -83,6 +83,7 @@ const LINE_FILTERS = {
   IMAGE_VIDEO: 'image',
   IMAGE_MAP: 'imagemap',
   IMAGE_CAROUSEL: 'template',
+  IMAGE_MAP_VIDEO: 'video',
 };
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -637,11 +638,21 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 animatedStickerUrl = '',
                 baseUrl = '',
                 template: carouselTemplate,
+                video: {
+                  originalContentUrl: originalVideoContentUrl,
+                } = {},
               }] = [{}],
             } = {},
           } = template.versions.base;
           templateData.content = text;
           templateData.url = originalContentUrl || animatedStickerUrl || stickerUrl || (baseUrl ? `${baseUrl}/1040` : '');
+          if (originalVideoContentUrl) {
+            templateData.content = (
+              <video height="279">
+                <source src={originalVideoContentUrl} type="video/mp4" />
+              </video>
+            )
+          }
           if (carouselTemplate) {
             const carouselContent = get(carouselTemplate, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) );
             templateData.content = (
@@ -1813,7 +1824,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <CapRadio.CapRadioGroup className="line-filters" defaultValue={lineFilter} onChange={this.setLineFilter}>
               {
                 (() => {
-                  const { ALL, TEXT, IMAGE_VIDEO, IMAGE_CAROUSEL, IMAGE_MAP } = LINE_FILTERS;
+                  const { ALL, TEXT, IMAGE_VIDEO, IMAGE_CAROUSEL, IMAGE_MAP, IMAGE_MAP_VIDEO } = LINE_FILTERS;
                   return (
                     <>
                       <CapRadio.Button value={ALL}><CapLabel type="label2">
@@ -1831,6 +1842,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                       <CapRadio.Button value={IMAGE_CAROUSEL}><CapLabel type="label2">
                         <FormattedMessage {...messages.imageCarouselTemplate} />
                       </CapLabel></CapRadio.Button>
+                      <CapRadio.Button value={IMAGE_MAP_VIDEO}><CapLabel type="label2">
+                        <FormattedMessage {...messages.imageMapVideoTemplate} />
+                      </CapLabel></CapRadio.Button>
                     </>
                   );
                 })()

package/v2Containers/Templates/messages.js

@@ -242,6 +242,10 @@ export default defineMessages({
     id: `${scope}.imageMapTemplate`,
     defaultMessage: `Rich message`,
   },
+  "imageMapVideoTemplate": {
+    id: `${scope}.imageMapVideoTemplate`,
+    defaultMessage: `Rich video message`,
+  },
   "imageCarouselTemplate": {
     id: `${scope}.imageCarouselTemplate`,
     defaultMessage: `Card message`,

package/v2Containers/Templates/tests/actions.test.js

@@ -1,18 +1,18 @@
-
-import {
-  defaultAction,
-} from '../actions';
-import {
-  DEFAULT_ACTION,
-} from '../constants';
-
-describe('Templates actions', () => {
-  describe('Default Action', () => {
-    it('has a type of DEFAULT_ACTION', () => {
-      const expected = {
-        type: DEFAULT_ACTION,
-      };
-      expect(defaultAction()).toEqual(expected);
-    });
-  });
-});
+
+import {
+  defaultAction,
+} from '../actions';
+import {
+  DEFAULT_ACTION,
+} from '../constants';
+
+describe('Templates actions', () => {
+  describe('Default Action', () => {
+    it('has a type of DEFAULT_ACTION', () => {
+      const expected = {
+        type: DEFAULT_ACTION,
+      };
+      expect(defaultAction()).toEqual(expected);
+    });
+  });
+});

package/v2Containers/Templates/tests/index.test.js

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

package/v2Containers/Templates/tests/reducer.test.js

@@ -1,9 +1,9 @@
-
-import { fromJS } from 'immutable';
-import templatesReducer from '../reducer';
-
-describe('templatesReducer', () => {
-  it('returns the initial state', () => {
-    expect(templatesReducer(undefined, {})).toEqual(fromJS({}));
-  });
-});
+
+import { fromJS } from 'immutable';
+import templatesReducer from '../reducer';
+
+describe('templatesReducer', () => {
+  it('returns the initial state', () => {
+    expect(templatesReducer(undefined, {})).toEqual(fromJS({}));
+  });
+});

package/v2Containers/Templates/tests/sagas.test.js

@@ -1,15 +1,15 @@
-/**
- * Test  sagas
- */
-
-/* eslint-disable redux-saga/yield-effects */
-// import { take, call, put, select } from 'redux-saga/effects';
-// import { defaultSaga } from '../sagas';
-
-// const generator = defaultSaga();
-
-describe('defaultSaga Saga', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
-  });
-});
+/**
+ * Test  sagas
+ */
+
+/* eslint-disable redux-saga/yield-effects */
+// import { take, call, put, select } from 'redux-saga/effects';
+// import { defaultSaga } from '../sagas';
+
+// const generator = defaultSaga();
+
+describe('defaultSaga Saga', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/v2Containers/Templates/tests/selectors.test.js

@@ -1,10 +1,10 @@
-// import { fromJS } from 'immutable';
-// import { makeSelectTemplatesDomain } from '../selectors';
-
-// const selector = makeSelectTemplatesDomain();
-
-describe('makeSelectTemplatesDomain', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
-  });
-});
+// import { fromJS } from 'immutable';
+// import { makeSelectTemplatesDomain } from '../selectors';
+
+// const selector = makeSelectTemplatesDomain();
+
+describe('makeSelectTemplatesDomain', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});