@capillarytech/creatives-library 7.5.3 → 7.5.5

package/v2Components/CapVideoUpload/index.js

@@ -0,0 +1,299 @@
+/**
+*
+* CapVideoUpload
+*
+*/
+import React, { useCallback, useState, Fragment, useRef, useEffect } from 'react';
+import PropTypes from "prop-types";
+import get from 'lodash/get';
+import CapDrawer from '@capillarytech/cap-ui-library/CapDrawer';
+import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
+import moment from 'moment';
+import isEmpty from 'lodash/isEmpty';
+import messages from './messages';
+import {
+  CapHeading,
+  CapButton,
+  CapError,
+  CapUploader,
+  CapSpin,
+} from '@capillarytech/cap-ui-library';
+import {bytes2Size} from '../../utils/common';
+import './index.scss';
+
+function CapVideoUpload(props) {
+  const {
+    supportedExtensions,
+    allowedExtensionsRegex,
+    videoSize,
+    intl,
+    uploadAsset,
+    uploadedAssetList = {},
+    style,
+    onVideoUploadUpdateAssestList,
+    index,
+    videoData,
+  } = props;
+  const [isVideoError, updateVideoErrorMessage] = useState(false);
+  const [isVideo, updateVideoStatus] = useState(false);
+  const [videoDuration, updateVideoDuration] = useState('');
+  const [isPlaying, updateIsPlaying] = useState(false);
+  const [isSpinning, setSpinning] = useState(false);
+
+
+  const videoEl = useRef(null);
+  const {
+    videoSrc = '',
+    videoName,
+    previewUrl,
+    videoHeight,
+    videoWidth,
+  } = uploadedAssetList;
+
+  const [isTemplateDrawerRequired, updateTemplateDrawerRequirement] = useState(false);
+
+  const uploadVideo = useCallback((e, { files }) => {
+    if (e) {
+      e.preventDefault();
+    }
+    const _URL = window.URL || window.webkitURL;
+    let incorrectFile = false;
+    const file = files[0];
+    if (!allowedExtensionsRegex.test(file.name)) {
+      incorrectFile = true;
+    }
+    const video = new FileReader();
+    video.src = _URL.createObjectURL(file);
+    const fileParams = {
+      width: video.width,
+      height: video.height,
+      error: false,
+      isGenerateVideoThumbnail: true,
+    };
+    submitVideoAction({ file, type: 'video', fileParams }, incorrectFile);
+    if (e) {
+      const event = e;
+      event.target.value = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (videoData[`uploadedAssetDataVideo_${index}`] && Object.keys(videoData[`uploadedAssetDataVideo_${index}`]).length) {
+      const metaVideoSrc = get(videoData, `uploadedAssetDataVideo_${index}.metaInfo.secure_file_path`, '');
+      const previewImgUrl = get(videoData, `uploadedAssetDataVideo_${index}.metaInfo.video_file_path_preview`, '');
+      const metaVideoName = get(videoData, `uploadedAssetDataVideo_${index}.metaInfo.name`, '');
+      if (metaVideoSrc && videoSrc === "") {
+        onVideoUploadUpdateAssestList(index, {
+          previewUrl: previewImgUrl,
+          videoSrc: metaVideoSrc,
+          videoName: metaVideoName,
+        },
+        );
+      }
+    }
+  }, [videoData[`uploadedAssetDataVideo_${index}`]]);
+
+  useEffect(() => {
+    if (videoData[`assetUploadingVideo_${index}`] && videoData[`assetUploading`] !== false) {
+      const isSpinner = get(videoData, `assetUploadingVideo_${index}`, false);
+      setSpinning(isSpinner);
+    }
+  }, [videoData[`assetUploadingVideo_${index}`]]);
+
+  useEffect(() => {
+    if (!isEmpty(uploadedAssetList)) {
+      const {
+        videoSrc: metaVideoSrc = '',
+      } = uploadedAssetList || {};
+      if (metaVideoSrc) {
+        updateVideoStatus(true);
+      }
+    }
+  }, [uploadedAssetList]);
+
+  const submitVideoAction = useCallback((data, incorrectFile) => {
+    const {
+      file: {
+        size,
+      },
+      file,
+      fileParams,
+      type,
+    } = data;
+    if (incorrectFile || size > videoSize) {
+      updateVideoErrorMessage(formatMessage(messages.videoIncorrectSize));
+    } else {
+      updateVideoErrorMessage('');
+      uploadAsset(
+        file,
+        type,
+        fileParams,
+        `Video_${index}`,
+      );
+    }
+  }, [isVideoError]);
+
+  const {
+    formatMessage,
+    } = intl || {};
+
+  const capUploaderCustomVideoRequest = useCallback((uploadData) => {
+    uploadVideo(undefined, { files: [uploadData.file] });
+  }, []);
+
+  const playVideo = useCallback((e) => {
+    if (e.target.paused && !isPlaying) {
+      e.target.play();
+    }
+  }, [isPlaying]);
+
+  const pauseVideo = useCallback((e) => {
+    if (!e.target.paused && isPlaying) {
+      e.target.pause();
+    }
+  }, []);
+
+  const getVideoSection = () => {
+    if (!isVideo) {
+      return (
+        (
+          <>
+            <CapUploader.CapDragger
+              customRequest={(data) => capUploaderCustomVideoRequest(data)}
+              className="form-builder-dragger"
+            >
+              <CapHeading className="dragger-title" type="h7">
+                <FormattedMessage {...messages.dragAndDrop} />
+              </CapHeading>
+              <CapHeading className="dragger-or" type="label6">
+                <FormattedMessage {...messages.or} />
+              </CapHeading>
+              <CapButton className="dragger-button upload-video" type="secondary">
+                <FormattedMessage {...messages.uploadComputer} />
+              </CapButton>
+            </CapUploader.CapDragger>
+            <CapError type="error" className="upload-video-error">
+              {isVideoError}
+            </CapError>
+          </>
+        )
+      );
+    }
+    const onReUpload = () => {
+      updateVideoStatus(false);
+      onVideoUploadUpdateAssestList(
+        index,
+        {
+          previewUrl,
+          videoName,
+          videoHeight,
+          videoWidth,
+          videoSrc,
+          videoDuration,
+        }
+      );
+    };
+
+    const updateMetadataLoaded = () => {
+      const { current: { duration, videoHeight: metaVideoHeight, videoWidth: metaVideoWidth } = {} } = videoEl;
+      if (duration) {
+        const value = moment('1900-01-01 00:00:00').add(duration, 'seconds').format("HH.mm.ss"); // to get the duration of video
+        updateVideoDuration(value);
+        if (videoWidth === undefined && videoHeight === undefined) {
+          onVideoUploadUpdateAssestList(
+            index,
+            {
+              videoSrc,
+              videoName,
+              videoHeight: metaVideoHeight,
+              videoWidth: metaVideoWidth,
+              previewUrl,
+            }
+          );
+        }
+      }
+    };
+
+    return (
+      <Fragment key={videoSrc}>
+        <div style={{ overflow: 'hidden' }}>
+          <CapButton
+            className="dragger-button video-reupload"
+            type="flat"
+            onClick={onReUpload}
+          >
+            <FormattedMessage {...messages.imageReUpload} />
+          </CapButton>
+        </div>
+        <div style={{ display: 'flex' }}>
+          <video
+            width="230"
+            poster={previewUrl}
+            className="line-image-src"
+            key={`${index}-video`}
+            onLoadedMetadata={() => updateMetadataLoaded()}
+            onPlaying={() => updateIsPlaying(true)}
+            onPause={() => updateIsPlaying(false)}
+            onMouseOver={playVideo}
+            onMouseOut={pauseVideo}
+            ref={videoEl}
+          >
+            <source src={videoSrc} type="video/mp4" />
+          </video>
+          <div className="video-info">
+            <CapHeading type="h6">
+              {videoName}
+            </CapHeading>
+            <CapHeading type="h6">
+              {videoDuration}
+            </CapHeading>
+          </div>
+        </div>
+      </Fragment>
+    );
+  };
+  return (
+    <CapSpin spinning={isSpinning}>
+      <div style={style} className="cap-custom-video-upload">
+        <form encType="multipart/form-data" id={`form`} className="video-form">
+          <input
+            key={`videoFile`}
+            style={{ display: 'none' }}
+            id="fileName"
+            type="file"
+            onChange={(e) => uploadVideo(e, { files: e.target.files })}
+            accept={supportedExtensions || "video/*"}
+        />
+          {getVideoSection()}
+          <CapDrawer
+            visible={isTemplateDrawerRequired}
+            width={624}
+            onClose={() => updateTemplateDrawerRequirement(false)}
+        />
+        </form>
+        <CapHeading.CapHeadingSpan type="h6" className="video-description">
+          <FormattedMessage {...messages.videoRatioDescription} />
+
+        </CapHeading.CapHeadingSpan>
+        <CapHeading.CapHeadingSpan type="h6" className="video-description video-details">
+          <FormattedMessage {...messages.videoSizeDescription} values={{size: bytes2Size(videoSize)}} />
+        </CapHeading.CapHeadingSpan>
+      </div>
+    </CapSpin>
+  );
+}
+
+CapVideoUpload.propTypes = {
+  supportedExtensions: PropTypes.any,
+  allowedExtensionsRegex: PropTypes.string,
+  videoSize: PropTypes.string,
+  intl: intlShape,
+  uploadAsset: PropTypes.func,
+  uploadedAssetList: PropTypes.object,
+  style: PropTypes.any,
+  onVideoUploadUpdateAssestList: PropTypes.func,
+  index: PropTypes.number,
+  videoData: PropTypes.object,
+};
+
+export default injectIntl(CapVideoUpload);

package/v2Components/CapVideoUpload/index.scss

@@ -0,0 +1,29 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+$classPrefix: cap-custom-video-upload;
+
+.#{$classPrefix} {
+    .upload-video{
+        margin-right: $CAP_SPACE_08;
+    }
+    .upload-video-error{
+        margin-top: $CAP_SPACE_04;
+    }
+    .video-reupload{  
+        float: right;
+        color: $FONT_COLOR_05;
+        padding: 0px;
+        right: 40px;
+    }
+    .video-info{
+        margin-left: $CAP_SPACE_24;
+    }
+    .video-form{
+        width: 500px;
+    }
+    .video-details{
+        float: right;
+        position: absolute;
+        right: 40px;
+    }
+}

package/v2Components/CapVideoUpload/messages.js

@@ -0,0 +1,54 @@
+/*
+ * CapVideoUpload Messages
+ *
+ * This contains all the text for the CapVideoUpload component.
+ */
+import { defineMessages } from 'react-intl';
+const scope = 'app.components.CapVideoUpload';
+
+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',
+  },
+  uploadComputer: {
+    id: `${scope}.uploadComputer`,
+    defaultMessage: 'Your computer',
+  },
+  or: {
+    id: `${scope}.or`,
+    defaultMessage: 'OR',
+  },
+  dragAndDrop: {
+    id: `${scope}.dragAndDrop`,
+    defaultMessage: 'Drag and drop video here',
+  },
+  videoIncorrectSize: {
+    id: `${scope}.videoIncorrectSize`,
+    defaultMessage: 'This file format/size is not supported.',
+  },
+  videoRatioDescription: {
+    id: `${scope}.videoRatioDescription`,
+    defaultMessage: 'Video ratio: 9:16 to 16:9',
+  },
+  videoSizeDescription: {
+    id: `${scope}.videoSizeDescription`,
+    defaultMessage: 'File size: Up to {size}',
+  },
+  imageReUpload: {
+    id: `${scope}.imageReUpload`,
+    defaultMessage: 'Re upload',
+  },
+});

package/v2Components/TemplatePreview/index.js

@@ -16,7 +16,7 @@ import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 import { WECHAT } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
-import { VIBER } from '../../v2Containers/App/constants';
+import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
 const lineMobileAndroid = require('../../assets/line.png');
@@ -30,6 +30,7 @@ const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
 
 import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06, CAP_G15, CAP_PURPLE01, CAP_G16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
+import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
@@ -260,7 +261,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
 
     return (
       <CapRow>
-        {this.props.showCount && <CapColumn span={16}>
+        {this.props.showCount && (channel && channel.toLowerCase() !== FACEBOOK) && <CapColumn span={16}>
           {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
             <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
             {smsDetails.unicode &&
@@ -637,6 +638,18 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             </div>
           ) : ''
         }
+            {channel && channel.toLowerCase() === FACEBOOK && (
+              <div style={{position: 'absolute', left: '80%'}} id="facebook-preview">
+                <CapFacebookPreview
+                  disablePreviewButton={false}
+                  selectedAd={content.selectedAd}
+                  previewData={content.previewData}
+                  primaryText={content.primaryText}
+                  callToAction={content.callToAction}
+                  displayLink={content.displayLink}
+              />
+              </div>
+        )}
           </div>
 
         </CapColumn>
@@ -660,6 +673,10 @@ TemplatePreview.propTypes = {
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
   showTestAndPreviewIcon: PropTypes.bool,
+  fbContent: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.any,
+  ]),
 };
 
 export default (injectIntl(TemplatePreview));

package/v2Containers/App/constants.js

@@ -25,6 +25,8 @@ export const EDIT = 'edit';
 export const PREVIEW = 'preview';
 
 export const VIBER = 'viber';
+export const FACEBOOK = 'facebook';
+
 export const TRACK_EDIT_SMS = 'editSms';
 export const TRACK_EDIT_EMAIL = 'editEmail';
 export const TRACK_EDIT_MPUSH = 'editMpush';
@@ -54,3 +56,22 @@ export const BEE_PLUGIN = 'BEE_PLUGIN';
 export const NO_COMMUNICATION = 'NO_COMMUNICATION';
 export const FTP = 'FTP';
 export const CREATIVES_UI_VIEW = 'CREATIVES_UI_VIEW';
+
+export const APPLY_NOW = <FormattedMessage {...globalMessages.applyNow} />;
+export const NO_CALL_TO_ACTION = <FormattedMessage {...globalMessages.noCallToAction} />;
+export const LEARN_MORE = <FormattedMessage {...globalMessages.learnMore} />;
+export const SHOP_NOW = <FormattedMessage {...globalMessages.shopNow} />;
+export const SIGN_UP = <FormattedMessage {...globalMessages.signUp} />;
+export const SUBSCRIBE = <FormattedMessage {...globalMessages.subscribe} />;
+export const WATCH_MORE = <FormattedMessage {...globalMessages.watchMore} />;
+
+
+export const FB_AD_CALL_TO_ACTION = {
+  NO_CALL_TO_ACTION,
+  APPLY_NOW,
+  LEARN_MORE,
+  SHOP_NOW,
+  SIGN_UP,
+  SUBSCRIBE,
+  WATCH_MORE,
+};

package/v2Containers/Cap/messages.js

@@ -113,4 +113,34 @@ export default defineMessages({
     id: `creatives.containersV2.newOrgName`,
     defaultMessage: '{newOrgName}',
   },
+  "applyNow": {
+    id: `creatives.containersV2.applyNow`,
+    defaultMessage: 'Apply now',
+  },
+  "noCallToAction": {
+    id: `creatives.containersV2.noCallToAction`,
+    defaultMessage: 'No call to action',
+  },
+  "learnMore": {
+    id: `creatives.containersV2.learnMore`,
+    defaultMessage: 'Learn More',
+  },
+  "shopNow": {
+    id: `creatives.containersV2.shopNow`,
+    defaultMessage: 'Shop Now',
+  },
+  "signUp": {
+    id: `creatives.containersV2.signUp`,
+    defaultMessage: 'Sign Up',
+  },
+  "subscribe": {
+    id: `creatives.containersV2.subscribe`,
+    defaultMessage: 'Subscribe',
+  },
+  "watchMore": {
+    id: `creatives.containersV2.watchMore`,
+    defaultMessage: 'Watch More',
+  },
+
 });
+

package/v2Containers/CapFacebookPreview/actions.js

@@ -0,0 +1,31 @@
+/*
+ *
+ * CapFacebookPreview actions
+ *
+ */
+
+import {
+  GENERATE_IMAGE_PREVIEW_REQUEST,
+  GENERATE_VIDEO_PREVIEW_REQUEST,
+  GENERATE_CAROUSEL_PREVIEW_REQUEST,
+  CLEAR_PREVIEW,
+} from './constants';
+
+export const getImagePreview = (previewData) => ({
+  type: GENERATE_IMAGE_PREVIEW_REQUEST,
+  previewData,
+});
+
+export const getVideoPreview = (previewData) => ({
+  type: GENERATE_VIDEO_PREVIEW_REQUEST,
+  previewData,
+});
+
+export const getCarouselPreview = (previewData) => ({
+  type: GENERATE_CAROUSEL_PREVIEW_REQUEST,
+  previewData,
+});
+
+export const clearPreview = () => ({
+  type: CLEAR_PREVIEW,
+});

package/v2Containers/CapFacebookPreview/constants.js

@@ -0,0 +1,21 @@
+/*
+ *
+ * CapFacebookPreview constants
+ *
+ */
+
+
+export const GENERATE_IMAGE_PREVIEW_REQUEST = 'app/CapFacebookPreview/GET_IMAGE_PREVIEW_REQUEST';
+export const GENERATE_IMAGE_PREVIEW_SUCCESS = 'app/CapFacebookPreview/GET_IMAGE_PREVIEW_SUCCESS';
+export const GENERATE_IMAGE_PREVIEW_FAILURE = 'app/CapFacebookPreview/GET_IMAGE_PREVIEW_FAILURE';
+
+export const GENERATE_VIDEO_PREVIEW_REQUEST = 'app/CapFacebookPreview/GET_VIDEO_PREVIEW_REQUEST';
+export const GENERATE_VIDEO_PREVIEW_SUCCESS = 'app/CapFacebookPreview/GET_VIDEO_PREVIEW_SUCCESS';
+export const GENERATE_VIDEO_PREVIEW_FAILURE = 'app/CapFacebookPreview/GET_VIDEO_PREVIEW_FAILURE';
+
+export const GENERATE_CAROUSEL_PREVIEW_REQUEST = 'app/CapFacebookPreview/GET_CAROUSEL_PREVIEW_REQUEST';
+export const GENERATE_CAROUSEL_PREVIEW_SUCCESS = 'app/CapFacebookPreview/GET_CAROUSEL_PREVIEW_SUCCESS';
+export const GENERATE_CAROUSEL_PREVIEW_FAILURE = 'app/CapFacebookPreview/GET_CAROUSEL_PREVIEW_FAILURE';
+
+export const CLEAR_PREVIEW = 'app/CapFacebookPreview/CLEAR_PREVIEW';
+