@capillarytech/creatives-library 8.0.127-alpha.1 → 8.0.128

package/v2Components/CapVideoUpload/index.js

@@ -3,9 +3,7 @@
 * CapVideoUpload
 *
 */
-import React, {
-  useCallback, useState, Fragment, useRef, useEffect,
-} from 'react';
+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';
@@ -21,12 +19,9 @@ import {
 } from '@capillarytech/cap-ui-library';
 import messages from './messages';
 import {bytes2Size, getDecodedFileName} from '../../utils/common';
-import {
-  SUPPORTED_FILE_FORMATS, WHATSAPP, DEFAULT, MAX_DURATION, MOBILEPUSH,
-} from './constants';
+import { SUPPORTED_FILE_FORMATS, WHATSAPP, DEFAULT, VIBER_MAX_DURATION } from './constants';
 import './index.scss';
 import { VIBER } from '../../v2Containers/CreativesContainer/constants';
-import { GIF, VIDEO } from '../../v2Containers/MobilePushNew/constants';
 
 function CapVideoUpload(props) {
   const {
@@ -45,7 +40,6 @@ function CapVideoUpload(props) {
     showVideoNameAndDuration = true,
     formClassName = 'video-form',
     showReUploadButton = true,
-    mediaType = VIDEO.toLowerCase(),
   } = props;
   const [isVideoError, updateVideoErrorMessage] = useState(false);
   const [isVideo, updateVideoStatus] = useState(false);
@@ -74,7 +68,6 @@ function CapVideoUpload(props) {
     const _URL = window.URL || window.webkitURL;
     let incorrectFile = false;
     const file = files[0];
-
     if (!allowedExtensionsRegex.test(file.name)) {
       incorrectFile = true;
     }
@@ -86,7 +79,7 @@ function CapVideoUpload(props) {
       error: false,
       isGenerateVideoThumbnail: true,
     };
-    submitVideoAction({ file, type: mediaType, fileParams }, incorrectFile);
+    submitVideoAction({ file, type: 'video', fileParams }, incorrectFile);
     if (e) {
       const event = e;
       event.target.value = null;
@@ -94,18 +87,10 @@ function CapVideoUpload(props) {
   }, []);
 
   useEffect(() => {
-  }, [videoData, index]);
-
-  useEffect(() => {
-    if (!isEmpty(videoData[`uploadedAssetData${index}`])) {
-      const {
-        metaInfo: {
-          secure_file_path: metaVideoSrc = '',
-          file_name: metaVideoName = '',
-          preview_image_url: previewImgUrl = '',
-        } = {},
-      } = videoData[`uploadedAssetData${index}`] || {};
-
+    if (videoData[`uploadedAssetData${index}`] && Object.keys(videoData[`uploadedAssetData${index}`]).length) {
+      const metaVideoSrc = get(videoData, `uploadedAssetData${index}.metaInfo.secure_file_path`, '');
+      const previewImgUrl = get(videoData, `uploadedAssetData${index}.metaInfo.video_file_path_preview`, '');
+      const metaVideoName = get(videoData, `uploadedAssetData${index}.metaInfo.name`, '');
       const metaVideoId = get(videoData, `uploadedAssetData${index}.videoIdResponse.fbVideo.id`, '');
       const karixFileHandle = get(videoData, `uploadedAssetData${index}.metaInfo.karixFileHandle`, '');
 
@@ -117,13 +102,14 @@ function CapVideoUpload(props) {
           videoId: metaVideoId,
           fileHandle: karixFileHandle,
           videoDuration: null,
-        });
+        },
+        );
       }
     }
-  }, [videoData, index, videoSrc, onVideoUploadUpdateAssestList]);
+  }, [videoData[`uploadedAssetData${index}`]]);
 
   useEffect(() => {
-    if (videoData[`assetUploadingVideo_${index}`] && videoData.assetUploading !== false) {
+    if (videoData[`assetUploadingVideo_${index}`] && videoData[`assetUploading`] !== false) {
       const isSpinner = get(videoData, `assetUploadingVideo_${index}`, false);
       setSpinning(isSpinner);
     }
@@ -137,12 +123,7 @@ function CapVideoUpload(props) {
       } = uploadedAssetList || {};
       if (metaVideoSrc) {
         updateVideoStatus(true);
-      } else {
-        updateVideoStatus(false);
       }
-    } else {
-      // When uploadedAssetList is empty, reset video status to show upload interface
-      updateVideoStatus(false);
     }
   }, [uploadedAssetList]);
 
@@ -155,7 +136,6 @@ function CapVideoUpload(props) {
       fileParams,
       type,
     } = data;
-
     if (incorrectFile || size > videoSize) {
       if (errorMessage) {
         updateVideoErrorMessage(errorMessage);
@@ -175,7 +155,11 @@ function CapVideoUpload(props) {
 
   const {
     formatMessage,
-  } = intl || {};
+    } = intl || {};
+
+  const capUploaderCustomVideoRequest = useCallback((uploadData) => {
+    uploadVideo(undefined, { files: [uploadData.file] });
+  }, []);
 
   const playVideo = useCallback((e) => {
     if (e.target.paused && !isPlaying) {
@@ -189,86 +173,78 @@ function CapVideoUpload(props) {
     }
   }, [isPlaying]);
 
-  const onReUpload = useCallback(() => {
-    updateVideoStatus(false);
-    updateVideoDuration(null);
-    onVideoUploadUpdateAssestList(
-      index,
-      {
-        previewUrl: "",
-        videoName: "",
-        videoHeight: "",
-        videoWidth: "",
-        videoSrc: "",
-        videoDuration: null,
-        videoId: "",
-        fileHandle: "",
-      }
-    );
-    setTimeout(() => {
-      const fileInput = document.getElementById("videoFileName");
-      if (fileInput) {
-        fileInput.click();
-      }
-    }, 100);
-  }, [index, onVideoUploadUpdateAssestList]);
-
-  const updateMetadataLoaded = useCallback(() => {
-    const { current: { duration, videoHeight: metaVideoHeight, videoWidth: metaVideoWidth } = {} } = videoEl;
-    if (duration) {
-      updateVideoDuration(duration);
-      if (videoWidth === undefined && videoHeight === undefined) {
-        if (duration <= MAX_DURATION) {
-          onVideoUploadUpdateAssestList(index, {
-            videoSrc,
-            videoId,
-            videoName,
-            videoHeight: metaVideoHeight,
-            videoWidth: metaVideoWidth,
-            previewUrl,
-            fileHandle,
-            videoDuration: duration,
-          });
-        } else {
-          onReUpload();
-          updateVideoErrorMessage(formatMessage(messages.videoDurationError));
-        }
-      }
-    }
-  }, [videoSrc, videoId, videoName, previewUrl, fileHandle, videoWidth, videoHeight, index, onVideoUploadUpdateAssestList, formatMessage, onReUpload]);
-
-  const videoDurationValue = videoDuration ? moment('1900-01-01 00:00:00').add(videoDuration, 'seconds').format("HH.mm.ss") : '';
-
-  const capUploaderCustomVideoRequest = useCallback((uploadData) => {
-    uploadVideo(undefined, { files: [uploadData.file] });
-  }, [uploadVideo]);
-
   const getVideoSection = () => {
     if (!isVideo) {
       return (
-        <>
-          <CapUploader.CapDragger
-            customRequest={(data) => capUploaderCustomVideoRequest(data)}
-            className="form-builder-dragger whatsapp-background"
-            showUploadList={!isVideoError}
-          >
-            <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.selectFromComputer} />
-            </CapButton>
-          </CapUploader.CapDragger>
-          <CapError type="error" className="upload-video-error">
-            {isVideoError}
-          </CapError>
-        </>
+        (
+          <>
+            <CapUploader.CapDragger
+              customRequest={(data) => capUploaderCustomVideoRequest(data)}
+              className="form-builder-dragger whatsapp-background"
+              showUploadList={!isVideoError}
+            >
+              <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.selectFromComputer} />
+              </CapButton>
+            </CapUploader.CapDragger>
+            <CapError type="error" className="upload-video-error">
+              {isVideoError}
+            </CapError>
+          </>
+        )
       );
     }
+    const onReUpload = () => {
+      updateVideoStatus(false);
+      updateVideoDuration(null);
+      onVideoUploadUpdateAssestList(
+        index,
+        {
+          previewUrl: "",
+          videoName: "",
+          videoHeight: "",
+          videoWidth: "",
+          videoSrc: "",
+          videoDuration: null,
+          videoId: "",
+          fileHandle: "",
+        }
+      );
+    };
 
+    const updateMetadataLoaded = () => {
+      const { current: { duration, videoHeight: metaVideoHeight, videoWidth: metaVideoWidth } = {} } = videoEl;
+      if (duration) {
+        updateVideoDuration(duration);
+        if (videoWidth === undefined && videoHeight === undefined) {
+          if (
+            channel !== VIBER ||
+            (channel === VIBER && duration <= VIBER_MAX_DURATION)
+          ) {
+            onVideoUploadUpdateAssestList(index, {
+              videoSrc,
+              videoId,
+              videoName,
+              videoHeight: metaVideoHeight,
+              videoWidth: metaVideoWidth,
+              previewUrl,
+              fileHandle,
+              videoDuration: duration,
+            });
+          } else {
+            onReUpload();
+            updateVideoErrorMessage(formatMessage(messages.videoDurationError));
+          }
+        }
+      }
+    };
+    const videoDurationValue = moment('1900-01-01 00:00:00').add(videoDuration, 'seconds').format("HH.mm.ss"); // to get the duration of video
     return (
       <Fragment key={videoSrc}>
         {showReUploadButton && (
@@ -283,35 +259,21 @@ function CapVideoUpload(props) {
           </div>
         )}
         <div className={showVideoNameAndDuration ? 'video-panel' : 'video-panel-wp'}>
-          {mediaType === GIF.toLowerCase() ? (
-            <img
-              width="230"
-              src={videoSrc}
-              alt="GIF preview"
-              className="line-image-src"
-              key={`${index}-gif`}
-              style={{ maxWidth: '230px', maxHeight: '200px', objectFit: 'contain' }}
-            />
-          ) : (
-            <video
-              width="230"
-              poster={previewUrl}
-              className="line-image-src"
-              key={`${index}-video`}
-              onLoadedMetadata={updateMetadataLoaded}
-              onPlaying={() => updateIsPlaying(true)}
-              onPause={() => updateIsPlaying(false)}
-              onMouseOver={playVideo}
-              onMouseOut={pauseVideo}
-              onFocus={playVideo}
-              onBlur={pauseVideo}
-              ref={videoEl}
-            >
-              <source src={videoSrc} type="video/mp4" />
-              <track kind="captions" />
-            </video>
-          )}
-          {showVideoNameAndDuration && (
+          <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>
+          {showVideoNameAndDuration &&
             <div className="video-info">
               <CapHeading type="h4">
                 {getDecodedFileName(videoName)}
@@ -320,7 +282,7 @@ function CapVideoUpload(props) {
                 {videoDurationValue}
               </CapHeading>
             </div>
-          )}
+          }
         </div>
       </Fragment>
     );
@@ -338,24 +300,23 @@ function CapVideoUpload(props) {
   return (
     <CapSpin spinning={isSpinning}>
       <div style={style} className="cap-custom-video-upload">
-        <form encType="multipart/form-data" id="form" className={formClassName}>
+        <form encType="multipart/form-data" id={`form`} className={formClassName}>
           <input
-            key="videoFile"
+            key={`videoFile`}
             style={{ display: 'none' }}
-            id="videoFileName"
+            id="fileName"
             type="file"
             onChange={(e) => uploadVideo(e, { files: e.target.files })}
-            accept={mediaType === GIF.toLowerCase() ? '.gif' : (supportedExtensions || "video/*")}
-          />
+            accept={supportedExtensions || "video/*"}
+        />
           {getVideoSection()}
           <CapDrawer
             visible={isTemplateDrawerRequired}
             width={624}
             onClose={() => updateTemplateDrawerRequirement(false)}
-          />
+        />
         </form>
-        {![WHATSAPP, VIBER, MOBILEPUSH].includes(channel)
-        && (
+        {![WHATSAPP, VIBER].includes(channel) &&
         <>
           <CapHeading.CapHeadingSpan type="h6" className="video-description">
             <FormattedMessage {...messages.videoRatioDescription} />
@@ -367,18 +328,15 @@ function CapVideoUpload(props) {
           <CapHeading.CapHeadingSpan type="h6" className="video-description video-details">
             <FormattedMessage {...messages.videoSizeDescription} values={{size: bytes2Size(videoSize)}} />
           </CapHeading.CapHeadingSpan>
-        </>
-        )}
-        {channel === WHATSAPP
-        && (
+        </>}
+        {channel === WHATSAPP &&
         <>
           {getVideoSizeDescription()}
           <CapHeading.CapHeadingSpan type="label2" className="whatsapp-format">
             <FormattedMessage {...messages.channelFileFormat} values={{ format: SUPPORTED_FILE_FORMATS[DEFAULT] }} />
           </CapHeading.CapHeadingSpan>
-        </>
-        )}
-        {channel === VIBER && (
+        </>}
+        {channel === VIBER &&
         <>
           {getVideoSizeDescription()}
           <CapHeading.CapHeadingSpan type="label2" className="whatsapp-format">
@@ -387,20 +345,7 @@ function CapVideoUpload(props) {
           <CapHeading.CapHeadingSpan type="label2" className="video-duration">
             <FormattedMessage {...messages.viberMaxDuration} />
           </CapHeading.CapHeadingSpan>
-        </>
-        )}
-        {channel === MOBILEPUSH
-        && (
-        <>
-          {getVideoSizeDescription()}
-          <CapHeading.CapHeadingSpan type="label2" className="whatsapp-format">
-            <FormattedMessage {...messages.channelFileFormat} values={{ format: SUPPORTED_FILE_FORMATS.MOBILEPUSH }} />
-          </CapHeading.CapHeadingSpan>
-          <CapHeading.CapHeadingSpan type="label2" className="video-duration">
-            <FormattedMessage {...messages.maxDuration} />
-          </CapHeading.CapHeadingSpan>
-        </>
-        )}
+        </>}
       </div>
     </CapSpin>
   );
@@ -421,8 +366,6 @@ CapVideoUpload.propTypes = {
   channel: PropTypes.string,
   errorMessage: PropTypes.string,
   formClassName: PropTypes.string,
-  showReUploadButton: PropTypes.bool,
-  mediaType: PropTypes.string,
 };
 
 export default injectIntl(CapVideoUpload);

package/v2Components/CapVideoUpload/messages.js

@@ -63,24 +63,8 @@ export default defineMessages({
     id: `${scope}.viberMaxDuration`,
     defaultMessage: 'Max Duration: 600 seconds',
   },
-  maxDuration: {
-    id: `${scope}.maxDuration`,
-    defaultMessage: 'Max duration: 600 seconds',
-  },
   videoDurationError: {
     id: `${scope}.videoDurationError`,
     defaultMessage: 'Video duration should not exceed 600 seconds',
   },
-  uploadVideo: {
-    id: `${scope}.uploadVideo`,
-    defaultMessage: 'Upload Video',
-  },
-  reUpload: {
-    id: `${scope}.reUpload`,
-    defaultMessage: 'Re-upload',
-  },
-  videoDuration: {
-    id: `${scope}.videoDuration`,
-    defaultMessage: 'Duration: {duration}',
-  },
 });

package/v2Components/Carousel/index.js

@@ -1,11 +1,11 @@
-import React from "react";
-import { Carousel } from 'antd';
+import React, { Component } from "react";
+import { Carousel, Icon } from 'antd';
 import './style.scss';
 import CapImage from '@capillarytech/cap-ui-library/CapImage';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import { CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
 const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
+import { CAP_WHITE, CAP_G08 } from '@capillarytech/cap-ui-library/styled/variables';
 
 const arrowStyle = {
   background: 'rgba(0, 0, 0, 0.1)',
@@ -16,12 +16,10 @@ const arrowStyle = {
   height: 24,
   width: 24,
   borderRadius: '50%',
-};
+}
 
-const Arrow = (props) => {
-  const {
-    className, style, onClick, extraStyle, type,
-  } = props;
+const Arrow = props => {
+  const { className, style, onClick, extraStyle, type } = props
   return (
     <CapButton
       className={className}
@@ -37,8 +35,8 @@ const Arrow = (props) => {
         type={type}
       />
     </CapButton>
-  );
-};
+  )
+}
 
 const settings = {
   nextArrow: (
@@ -58,7 +56,7 @@ const settings = {
       type="chevron-left"
     />
   ),
-};
+}
 
 const CarouselComponent = ({
   imageCarousel,
@@ -83,11 +81,11 @@ const CarouselComponent = ({
 
   return (
     <div style={{ position: 'relative' }} className={`template-carousel ${imageCarouselLength ? 'single-img' : ''}`}>
-      <Carousel ref={(node) => (carousel = node)} {...prop} {...settings}>
+      <Carousel ref={node => (carousel = node)} {...prop} {...settings}>
         {
           imageCarousel.map(({
             actionLabel,
-            imageUrl = lineImgPlaceholder,
+            imageUrl = lineImgPlaceholder
           }) => (
             <div className="carousel-section">
               <CapImage
@@ -117,6 +115,6 @@ const CarouselComponent = ({
       </Carousel>
     </div>
   );
-};
+}
 
-export default CarouselComponent;
+export default CarouselComponent;

package/v2Components/ErrorInfoNote/style.scss

@@ -1,7 +1,6 @@
 @import "~@capillarytech/cap-ui-library/styles/_variables.scss";
 
 .error-container {
-  width: max-content;
   margin-bottom: $CAP_SPACE_08;
   margin-top: $CAP_SPACE_12;
   background-color: $CAP_COLOR_05;

package/v2Components/MobilePushPreviewV2/index.js

@@ -15,7 +15,6 @@ import { MOBILE_PUSH } from '../../v2Containers/CreativesContainer/constants';
 import { INAPP } from '../../v2Containers/App/constants';
 import { ANDROID, IOS } from '../../v2Containers/InApp/constants';
 import { getCtaObject } from '../../v2Containers/InApp/utils';
-import { VIDEO } from '../../v2Containers/MobilePushNew/constants';
 
 class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -65,40 +64,14 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
       const androidContent = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
       const iosContent = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
 
-      const data = device?.toLowerCase() === "android" ? androidContent : iosContent;
-      const { title = '', message = '', expandableDetails: { ctas = [], image = '', media = [], carouselData = [] } = {}} = data || {};
-
-      // Handle video/GIF content from expandableDetails.media array (new format)
-      let bodyVideo = {};
-      let bodyGif = '';
-      let bodyImage = image;
-
-      if (media && Array.isArray(media) && media.length > 0) {
-        const mediaItem = media[0];
-        if (mediaItem.type === VIDEO) {
-          // Distinguish between actual video and GIF based on URL extension
-          if (mediaItem.url && mediaItem.url.toLowerCase().includes('.gif')) {
-            bodyGif = mediaItem.url;
-          } else {
-            bodyVideo = {
-              videoSrc: mediaItem.url,
-              videoPreview: mediaItem.url,
-            };
-          }
-          // Clear bodyImage when we have video/GIF content
-          bodyImage = '';
-        }
-      }
-
+      const data = device === "android" ? androidContent : iosContent;
+      const { title = '', message = '', expandableDetails: { ctas = [], image = '' } = {}} = data || {};
       content = {
         header: title,
         bodyText: message,
-        bodyImage,
-        bodyVideo,
-        bodyGif,
+        bodyImage: image,
         actions: [],
         appName: templateData?.appName,
-        carouselData,
       };
       if (ctas && ctas?.length) {
         if (device === "android" ) {
@@ -110,7 +83,6 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     }
     return content;
   }
-
   getPreview(device) {
     const deviceParam = device === ANDROID.toLowerCase() ? ANDROID : IOS;
     return (
@@ -123,21 +95,17 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
       />
     );
   }
-
   goToDuplicate() {
     this.props.onDuplicateClick(this.props.templateData);
     this.props.handleClose();
   }
-
   changeDevice(device) {
     const content = this.setContent(this.props.templateData, device, this.props.channel);
     this.setState({device, content });
   }
-
   goToEdit(e, path) {
     this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType, path);
   }
-
   render() {
     const {templateData} = this.props;
     let hasAndroid;
@@ -153,8 +121,8 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     return (
       <div>
         <div className="devices">
-          {!isEmpty(templateData)
-            && ( hasBothAndroidAndIos ? (
+          {!isEmpty(templateData) &&
+            ( hasBothAndroidAndIos ? (
               <CapTab
                 panes={[
                   {