@capillarytech/creatives-library 8.0.126 → 8.0.127-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/CustomerSearchSection/index.js

@@ -51,6 +51,7 @@ const CustomerSearchSection = ({
 }) => {
   const [showDropdown, setShowDropdown] = useState(false);
   const [customerSearchValue, setCustomerSearchValue] = useState('');
+  const [processedSearchData, setProcessedSearchData] = useState([]);
 
   const searchContainerRef = useRef(null);
 
@@ -114,6 +115,12 @@ const CustomerSearchSection = ({
     }
   }, [customerSearchValue, isSearchingCustomer, hasSearched]);
 
+  // Compute search data when dependencies change
+  useEffect(() => {
+    const computedData = searchData();
+    setProcessedSearchData(computedData);
+  }, [isSearchingCustomer, customers, customerSearchValue]);
+
   const getCompleteName = (data) => {
     const { firstName = '', lastName = '' } = data?.[0] || {};
     return `${firstName} ${lastName}`.trim() || NA;
@@ -140,8 +147,6 @@ const CustomerSearchSection = ({
     return finalSearchData || [];
   };
 
-  const getSearchData = searchData();
-
   const showIdentifiers = (data) => {
     if (!Array.isArray(data) || data.length === 0) return null;
 
@@ -197,7 +202,7 @@ const CustomerSearchSection = ({
         {showDropdown && !selectedCustomer && (
           <CapRow className="search-dropdown-container">
             <CapRow type="flex" justify="center" align="middle">
-              {(getSearchData?.length === 0 && customerSearchValue != null && !isSearchingCustomer) && (
+              {(processedSearchData?.length === 0 && customerSearchValue != null && !isSearchingCustomer) && (
                 <CapCard className="validation-card">
                   <CapHeading type="h6">
                     {formatMessage(messages.noCustomersFound)}
@@ -213,11 +218,11 @@ const CustomerSearchSection = ({
               )}
             </CapRow>
             <CapRow type="flex" justify="center" align="middle">
-              {getSearchData?.length > 0 && (
+              {processedSearchData?.length > 0 && (
                 <CapCard className="search-result-card scroll-bar">
                   {
                     <CapRow className="identifier-row">
-                      {getSearchData?.map((d) => (
+                      {processedSearchData?.map((d) => (
                         <>
                           <CapLink
                             key={d?.customerId}
@@ -294,7 +299,7 @@ const SearchInput = ({
 );
 
 const SelectedCustomerView = ({ customer, onClear, showIdentifiers }) => (
-  <CapRow className="selected-customer-view">
+  <div className="selected-customer-view">
     <CapRow type="flex" align="middle" gutter={8}>
       <CapColumn>
         <CapRow className="customer-common-profile">{getNamingIcon(customer?.name)}</CapRow>
@@ -311,7 +316,7 @@ const SelectedCustomerView = ({ customer, onClear, showIdentifiers }) => (
       </CapColumn>
     </CapRow>
     <CapIcon size="s" type="close" className="clear-icon" onClick={onClear} />
-  </CapRow>
+  </div>
 );
 
 SelectedCustomerView.propTypes = {

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;