@capillarytech/creatives-library 8.0.123 → 8.0.125-alpha.0

package/v2Components/CapVideoUpload/index.js

@@ -3,7 +3,9 @@
 * 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';
@@ -19,9 +21,12 @@ import {
 } from '@capillarytech/cap-ui-library';
 import messages from './messages';
 import {bytes2Size, getDecodedFileName} from '../../utils/common';
-import { SUPPORTED_FILE_FORMATS, WHATSAPP, DEFAULT, VIBER_MAX_DURATION } from './constants';
+import {
+  SUPPORTED_FILE_FORMATS, WHATSAPP, DEFAULT, MAX_DURATION, MOBILEPUSH,
+} from './constants';
 import './index.scss';
 import { VIBER } from '../../v2Containers/CreativesContainer/constants';
+import { GIF, VIDEO } from '../../v2Containers/MobilePushNew/constants';
 
 function CapVideoUpload(props) {
   const {
@@ -40,6 +45,7 @@ function CapVideoUpload(props) {
     showVideoNameAndDuration = true,
     formClassName = 'video-form',
     showReUploadButton = true,
+    mediaType = VIDEO.toLowerCase(),
   } = props;
   const [isVideoError, updateVideoErrorMessage] = useState(false);
   const [isVideo, updateVideoStatus] = useState(false);
@@ -68,6 +74,7 @@ function CapVideoUpload(props) {
     const _URL = window.URL || window.webkitURL;
     let incorrectFile = false;
     const file = files[0];
+
     if (!allowedExtensionsRegex.test(file.name)) {
       incorrectFile = true;
     }
@@ -79,7 +86,7 @@ function CapVideoUpload(props) {
       error: false,
       isGenerateVideoThumbnail: true,
     };
-    submitVideoAction({ file, type: 'video', fileParams }, incorrectFile);
+    submitVideoAction({ file, type: mediaType, fileParams }, incorrectFile);
     if (e) {
       const event = e;
       event.target.value = null;
@@ -87,10 +94,18 @@ function CapVideoUpload(props) {
   }, []);
 
   useEffect(() => {
-    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`, '');
+  }, [videoData, index]);
+
+  useEffect(() => {
+    if (!isEmpty(videoData[`uploadedAssetData${index}`])) {
+      const {
+        metaInfo: {
+          secure_file_path: metaVideoSrc = '',
+          file_name: metaVideoName = '',
+          preview_image_url: previewImgUrl = '',
+        } = {},
+      } = videoData[`uploadedAssetData${index}`] || {};
+
       const metaVideoId = get(videoData, `uploadedAssetData${index}.videoIdResponse.fbVideo.id`, '');
       const karixFileHandle = get(videoData, `uploadedAssetData${index}.metaInfo.karixFileHandle`, '');
 
@@ -102,14 +117,13 @@ function CapVideoUpload(props) {
           videoId: metaVideoId,
           fileHandle: karixFileHandle,
           videoDuration: null,
-        },
-        );
+        });
       }
     }
-  }, [videoData[`uploadedAssetData${index}`]]);
+  }, [videoData, index, videoSrc, onVideoUploadUpdateAssestList]);
 
   useEffect(() => {
-    if (videoData[`assetUploadingVideo_${index}`] && videoData[`assetUploading`] !== false) {
+    if (videoData[`assetUploadingVideo_${index}`] && videoData.assetUploading !== false) {
       const isSpinner = get(videoData, `assetUploadingVideo_${index}`, false);
       setSpinning(isSpinner);
     }
@@ -123,7 +137,12 @@ 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]);
 
@@ -136,6 +155,7 @@ function CapVideoUpload(props) {
       fileParams,
       type,
     } = data;
+
     if (incorrectFile || size > videoSize) {
       if (errorMessage) {
         updateVideoErrorMessage(errorMessage);
@@ -155,11 +175,7 @@ function CapVideoUpload(props) {
 
   const {
     formatMessage,
-    } = intl || {};
-
-  const capUploaderCustomVideoRequest = useCallback((uploadData) => {
-    uploadVideo(undefined, { files: [uploadData.file] });
-  }, []);
+  } = intl || {};
 
   const playVideo = useCallback((e) => {
     if (e.target.paused && !isPlaying) {
@@ -173,78 +189,86 @@ 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 && (
@@ -259,21 +283,35 @@ function CapVideoUpload(props) {
           </div>
         )}
         <div className={showVideoNameAndDuration ? 'video-panel' : 'video-panel-wp'}>
-          <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 &&
+          {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 && (
             <div className="video-info">
               <CapHeading type="h4">
                 {getDecodedFileName(videoName)}
@@ -282,7 +320,7 @@ function CapVideoUpload(props) {
                 {videoDurationValue}
               </CapHeading>
             </div>
-          }
+          )}
         </div>
       </Fragment>
     );
@@ -300,23 +338,24 @@ 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="fileName"
+            id="videoFileName"
             type="file"
             onChange={(e) => uploadVideo(e, { files: e.target.files })}
-            accept={supportedExtensions || "video/*"}
-        />
+            accept={mediaType === GIF.toLowerCase() ? '.gif' : (supportedExtensions || "video/*")}
+          />
           {getVideoSection()}
           <CapDrawer
             visible={isTemplateDrawerRequired}
             width={624}
             onClose={() => updateTemplateDrawerRequirement(false)}
-        />
+          />
         </form>
-        {![WHATSAPP, VIBER].includes(channel) &&
+        {![WHATSAPP, VIBER, MOBILEPUSH].includes(channel)
+        && (
         <>
           <CapHeading.CapHeadingSpan type="h6" className="video-description">
             <FormattedMessage {...messages.videoRatioDescription} />
@@ -328,15 +367,18 @@ 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">
@@ -345,7 +387,20 @@ 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>
   );
@@ -366,6 +421,8 @@ 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,8 +63,24 @@ 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, { Component } from "react";
-import { Carousel, Icon } from 'antd';
+import React from "react";
+import { Carousel } 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,10 +16,12 @@ 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}
@@ -35,8 +37,8 @@ const Arrow = props => {
         type={type}
       />
     </CapButton>
-  )
-}
+  );
+};
 
 const settings = {
   nextArrow: (
@@ -56,7 +58,7 @@ const settings = {
       type="chevron-left"
     />
   ),
-}
+};
 
 const CarouselComponent = ({
   imageCarousel,
@@ -81,11 +83,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
@@ -115,6 +117,6 @@ const CarouselComponent = ({
       </Carousel>
     </div>
   );
-}
+};
 
-export default CarouselComponent;
+export default CarouselComponent;

package/v2Components/ErrorInfoNote/style.scss

@@ -1,6 +1,7 @@
 @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,6 +15,7 @@ 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) {
@@ -64,14 +65,40 @@ 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 === "android" ? androidContent : iosContent;
-      const { title = '', message = '', expandableDetails: { ctas = [], image = '' } = {}} = data || {};
+      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 = '';
+        }
+      }
+
       content = {
         header: title,
         bodyText: message,
-        bodyImage: image,
+        bodyImage,
+        bodyVideo,
+        bodyGif,
         actions: [],
         appName: templateData?.appName,
+        carouselData,
       };
       if (ctas && ctas?.length) {
         if (device === "android" ) {
@@ -83,6 +110,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     }
     return content;
   }
+
   getPreview(device) {
     const deviceParam = device === ANDROID.toLowerCase() ? ANDROID : IOS;
     return (
@@ -95,17 +123,21 @@ 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;
@@ -121,8 +153,8 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     return (
       <div>
         <div className="devices">
-          {!isEmpty(templateData) &&
-            ( hasBothAndroidAndIos ? (
+          {!isEmpty(templateData)
+            && ( hasBothAndroidAndIos ? (
               <CapTab
                 panes={[
                   {