@capillarytech/creatives-library 7.14.9 → 7.14.11

package/assets/videoPlay.svg

@@ -0,0 +1,3 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.0026 0.333496C7.8026 0.333496 0.335938 7.80016 0.335938 17.0002C0.335938 26.2002 7.8026 33.6668 17.0026 33.6668C26.2026 33.6668 33.6693 26.2002 33.6693 17.0002C33.6693 7.80016 26.2026 0.333496 17.0026 0.333496ZM12.8359 21.4502V12.5502C12.8359 11.2335 14.3026 10.4335 15.4026 11.1502L22.3193 15.6002C23.3359 16.2502 23.3359 17.7502 22.3193 18.4002L15.4026 22.8502C14.3026 23.5668 12.8359 22.7668 12.8359 21.4502Z" fill="#091E42"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.14.9",
+  "version": "7.14.11",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CapDocumentUpload/index.js

@@ -10,7 +10,6 @@ import {
 import { injectIntl, FormattedMessage, intlShape} from 'react-intl';
 import { isEmpty, get } from 'lodash';
 import './index.scss';
-import { WHATSAPP } from "../../v2Containers/CreativesContainer/constants";
 import messages from './messages';
 
 function CapDocumentUpload(props) {
@@ -20,18 +19,17 @@ function CapDocumentUpload(props) {
     documentSize,
     uploadAsset,
     supportedExtensions,
-    style,
     documentSrc,
     updateDocumentSrc,
     updateOnReUpload,
     index,
     className,
     documentData,
-    channel,
-    channelSpecificStyle,
     whatsappDocParams,
     setWhatsappDocParams,
     docPreview,
+    supportedFormat,
+    supportedMaxSize,
   } = props;
   const {
     formatMessage,
@@ -57,7 +55,7 @@ function CapDocumentUpload(props) {
 
   const {CapHeadingSpan} = CapHeading;
 
-  const DocComponent = useCallback(
+  const DocPreviewComponent = useCallback(
     () => (
       <div className={`upload uploaded-container ${props.ifError ? 'error' : ''}`}>
         {docPreview}
@@ -66,7 +64,7 @@ function CapDocumentUpload(props) {
     [documentSrc],
   );
 
-  const WithLabel = LabelHOC(DocComponent);
+  const WithLabel = LabelHOC(DocPreviewComponent);
 
   const uploadDocuments = useCallback((e, {files}) => {
     if (e) {
@@ -146,7 +144,6 @@ function CapDocumentUpload(props) {
         className="dragger-button re-upload"
         type="flat"
         onClick={onReUpload}
-        style={channelSpecificStyle ? { marginTop: '-16px'} : {}}
       >
         <FormattedMessage {...messages.docReUpload} />
       </CapButton>
@@ -154,7 +151,7 @@ function CapDocumentUpload(props) {
   }, [isDocError, documentSrc]);
 
   return (
-    <div style={style} className="cap-custom-document-upload">
+    <div className="cap-custom-document-upload document-div">
       <WithLabel
         key={`with-label`}
         errorMessage={isDocError} ifError={!!isDocError}
@@ -162,7 +159,7 @@ function CapDocumentUpload(props) {
       <form encType="multipart/form-data" id={`form`} className={className}>
         <input
           key={`docFile`}
-          style={{ display: 'none' }}
+          className="input-div"
           id="fileName"
           type="file"
           onChange={(e) => uploadDocuments(e, { files: e.target.files })}
@@ -171,15 +168,21 @@ function CapDocumentUpload(props) {
         {getDocumentSection()}
       </form>
       <div className="image-info-wrapper">
-        {channel === WHATSAPP && (
-          <>
-            <CapHeadingSpan type="label2">
-              <FormattedMessage {...messages.whatsappDocSize} />
-            </CapHeadingSpan>
-          </>
-        )}
+        <CapHeadingSpan type="label2">
+          <FormattedMessage
+            {...messages.whatsappDocSize}
+            values={{
+              size: supportedMaxSize,
+            }}
+          />
+        </CapHeadingSpan>
         <CapHeadingSpan type="label2" className="image-format">
-          <FormattedMessage {...messages.format} />
+          <FormattedMessage
+            {...messages.format}
+            values={{
+              format: supportedFormat,
+            }}
+          />
         </CapHeadingSpan>
       </div>
     </div>
@@ -191,7 +194,6 @@ CapDocumentUpload.propTypes = {
   documentSize: PropTypes.number,
   uploadAsset: PropTypes.func,
   supportedExtensions: PropTypes.any,
-  style: PropTypes.any,
   documentSrc: PropTypes.string,
   updateDocumentSrc: PropTypes.func,
   intl: intlShape,
@@ -199,10 +201,10 @@ CapDocumentUpload.propTypes = {
   updateOnReUpload: PropTypes.func,
   documentData: PropTypes.object,
   index: PropTypes.number,
-  channel: PropTypes.string,
+  supportedFormat: PropTypes.string,
+  supportedMaxSize: PropTypes.string,
   whatsappDocParams: PropTypes.string,
   setWhatsappDocParams: PropTypes.func,
-  channelSpecificStyle: PropTypes.bool,
   docPreview: PropTypes.any,
 };
 

package/v2Components/CapDocumentUpload/index.scss

@@ -6,13 +6,16 @@ $classPrefix: cap-custom-document-upload;
   .upload-doc {
     margin-right: $CAP_SPACE_08;
   }
+  .input-div {
+    display: none;
+  }
   .image-info-wrapper {
     display: flex;
     justify-content: space-between;
     margin-top: 8px;
   }
   .whatsapp-background div {
-    background: #FAFBFC;
+    background: $CAP_G10;
     .ant-upload-list-item .ant-upload-list-item-progress {
       display: none;
     } 
@@ -32,7 +35,7 @@ $classPrefix: cap-custom-document-upload;
   .pdf-label {
     width: 162px;
     height: 44px;
-    background-color: #F4F5F7;
+    background-color: $CAP_G09;
     display: flex;
     .cap-image-v2 {
       margin: 6px 4px;
@@ -61,3 +64,6 @@ $classPrefix: cap-custom-document-upload;
   } 
   
 }
+.document-div {
+  padding-top: '20px';
+}

package/v2Components/CapDocumentUpload/messages.js

@@ -4,7 +4,7 @@ const scope = `creatives.componentsV2.CapDocumentUpload`;
 export default defineMessages({
   whatsappDocSize: {
     id: `${scope}.whatsappDocSize`,
-    defaultMessage: 'Size upto: 16MB',
+    defaultMessage: 'Size upto: {size}',
   },
   uploadComputer: {
     id: `${scope}.uploadComputer`,
@@ -28,11 +28,11 @@ export default defineMessages({
   },
   format: {
     id: `${scope}.format`,
-    defaultMessage: 'Format: PDF',
+    defaultMessage: 'Format: {format}',
   },
   docErrorDesc: {
     id: `${scope}.docErrorDesc`,
     defaultMessage:
-      'Please upload the document with allowed file extension, size, dimension and aspect ratio',
+      'Please upload the document with allowed file extension and size',
   },
 });

package/v2Components/CapDocumentUpload/tests/index.test.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { injectIntl } from 'react-intl';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 import {
   render,
   screen,
-  fireEvent,
-  waitFor,
 } from '../../../utils/test-utils';
 import CapDocumentUpload from '../index';
 
@@ -33,7 +32,19 @@ describe("test for document upload", () => {
   };
   it("test for cap document upload", () => {
     renderComponent(props);
-    expect(true).toBe(true);
+    expect(
+      screen.getByText(/size upto:/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/format:/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/drag and drop document here/i)
+    ).toBeInTheDocument();
+    const button = screen.getByRole('button', {
+      name: /drag and drop document here or select from computer/i,
+    });
+    userEvent.click(button);
   });
   it("test for cap document upload 1", () => {
     const props1 = {
@@ -55,6 +66,5 @@ describe("test for document upload", () => {
       },
     };
     renderComponent(props1);
-    expect(true).toBe(true);
   });
 });

package/v2Components/CapVideoUpload/index.js

@@ -10,15 +10,14 @@ 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,
-  CapNotification,
 } from '@capillarytech/cap-ui-library';
+import messages from './messages';
 import {bytes2Size} from '../../utils/common';
 import { WHATSAPP } from './constants';
 import './index.scss';
@@ -35,8 +34,8 @@ function CapVideoUpload(props) {
     onVideoUploadUpdateAssestList,
     index,
     videoData,
-    className,
     channel,
+    errorMessage,
   } = props;
   const [isVideoError, updateVideoErrorMessage] = useState(false);
   const [isVideo, updateVideoStatus] = useState(false);
@@ -132,8 +131,8 @@ function CapVideoUpload(props) {
       type,
     } = data;
     if (incorrectFile || size > videoSize) {
-      if (channel === WHATSAPP) {
-        updateVideoErrorMessage(formatMessage(messages.whatsappErrorMessage));
+      if (errorMessage) {
+        updateVideoErrorMessage(errorMessage);
       } else {
         updateVideoErrorMessage(formatMessage(messages.videoIncorrectSize));
       }
@@ -173,11 +172,6 @@ function CapVideoUpload(props) {
       return (
         (
           <>
-            {channel === WHATSAPP &&
-              <CapError type="error" className="upload-video-error">
-                {isVideoError}
-              </CapError>
-            }
             <CapUploader.CapDragger
               customRequest={(data) => capUploaderCustomVideoRequest(data)}
               className="form-builder-dragger whatsapp-background"
@@ -192,11 +186,9 @@ function CapVideoUpload(props) {
                 <FormattedMessage {...messages.selectFromComputer} />
               </CapButton>
             </CapUploader.CapDragger>
-            {channel !== WHATSAPP &&
-              <CapError type="error" className="upload-video-error">
-                {isVideoError}
-              </CapError>
-            }
+            <CapError type="error" className="upload-video-error">
+              {isVideoError}
+            </CapError>
           </>
         )
       );
@@ -250,9 +242,9 @@ function CapVideoUpload(props) {
             <FormattedMessage {...messages.imageReUpload} />
           </CapButton>
         </div>
-        <div style={{ display: 'flex', justifyContent: 'center', margin: '4px' }}>
+        <div className={channel === WHATSAPP ? 'video-panel-wp' : 'video-panel'}>
           <video
-            width={channel === WHATSAPP ? "300" : "230"}
+            width="230"
             poster={previewUrl}
             className="line-image-src"
             key={`${index}-video`}
@@ -281,8 +273,8 @@ function CapVideoUpload(props) {
   };
   return (
     <CapSpin spinning={isSpinning}>
-      <div style={style} className={className}>
-        <form encType="multipart/form-data" id={`form`} className={channel !== WHATSAPP && "video-form"}>
+      <div style={style} className="cap-custom-video-upload">
+        <form encType="multipart/form-data" id={`form`} className={channel !== WHATSAPP ? "video-form" : ""}>
           <input
             key={`videoFile`}
             style={{ display: 'none' }}
@@ -337,7 +329,7 @@ CapVideoUpload.propTypes = {
   index: PropTypes.number,
   videoData: PropTypes.object,
   channel: PropTypes.string,
-  className: PropTypes.string,
+  errorMessage: PropTypes.string,
 };
 
 export default injectIntl(CapVideoUpload);

package/v2Components/CapVideoUpload/index.scss

@@ -30,13 +30,20 @@ $classPrefix: cap-custom-video-upload;
         padding-left:9%;
     }
     .whatsapp-background div {
-        background: #FAFBFC;
+        background: $CAP_G10;
         .ant-upload-list-item .ant-upload-list-item-progress {
             display: none;
         }
-    } 
+    }
 }
-
 .whatsapp-format {
     float: right;
-}
+}
+.video-panel-wp {
+    display: flex;
+    justify-content: center;
+    margin: 4px;
+}
+.video-panel {
+    display: flex;
+}  

package/v2Components/CapVideoUpload/messages.js

@@ -41,7 +41,7 @@ export default defineMessages({
   },
   whatsappErrorMessage: {
     id: `${scope}.whatsappErrorMessage`,
-    defaultMessage: 'Please upload the document with allowed file extension and size',
+    defaultMessage: 'Please upload the video with allowed file extension, size, dimension and aspect ratio',
   },
   videoRatioDescription: {
     id: `${scope}.videoRatioDescription`,

package/v2Components/CapVideoUpload/tests/index.test.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { injectIntl } from 'react-intl';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import {
   render,
   screen,
-  fireEvent,
-  waitFor,
 } from '../../../utils/test-utils';
 import CapVideoUpload from '../index';
 
@@ -20,7 +19,6 @@ describe("test for document upload", () => {
     videoSize: 16000000,
     uploadAsset: jest.fn(),
     supportedExtensions: '',
-    videoSrc: '',
     uploadedAssetList: {},
     updateDocumentSrc: jest.fn(),
     updateOnReUpload: jest.fn(),
@@ -32,28 +30,61 @@ describe("test for document upload", () => {
   };
   it("test for cap document upload", () => {
     renderComponent(props);
-    expect(true).toBe(true);
+    expect(
+      screen.getByText(/file size: up to 16 mb/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        /format: mp4 and 3gpp \(h\.264 video codec and aac audio codec\)/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/drag and drop video here/i)
+    ).toBeInTheDocument();
+    const button = screen.getByRole('button', {
+      name: /drag and drop video here or select from computer/i,
+    });
+    userEvent.click(button);
   });
   it("test for cap document upload 1", () => {
     const props1 = {
       ...props,
-      documentData: {
+      videoData: {
         uploadedAssetData0: {
-          file_size: 134532,
-          name: 'sample.pdf',
-          secure_file_path: "https://www.africau.edu/images/default/sample.pdf",
-          karixFileHandle: 'abcd',
+          _id: "63f3126a8f9d2d85450a99d3",
+          type: "VIDEO",
+          isActive: true,
+          name: "sample_960x540_Xs2E4anK.mp4",
+          createdBy: "15000449",
+          updatedBy: "15000449",
+          orgId: 50074,
+          metaInfo: {
+            file_handle: null,
+            name: "sample_960x540_Xs2E4anK.mp4",
+            content_type: null,
+            file_size: 1320775,
+            added_on: 1676874342000,
+            last_modified_on: 1676874342000,
+            acl: null,
+            secure_file_path: "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/69d66812-291f-4658-9da8-c6d30eef.mp4",
+            public_url: "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/69d66812-291f-4658-9da8-c6d30eef.mp4",
+            video_file_path_preview: "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/video_screenshot_assets__1676874342082.png/1040"
+          },
+          createdAt: "2023-02-20T06:25:46.637Z",
+          updatedAt: "2023-02-20T06:25:46.637Z",
+          __v: 0,
         },
       },
-      documentSrc: "https://www.africau.edu/images/default/sample.pdf",
-      whatsappDocParams: {
-        whatsappDocName: 'sample.pdf',
-        whatsappDocSize: 134532,
-        whatsappDocPages: 2,
-        whatsappDocImg: 'https://play-lh.googleusercontent.com/BkRfMfIRPR9hUnmIYGDgHHKjow-g18-ouP6B2ko__VnyUHSi1spcc78UtZ4sVUtBH4g',
+      uploadedAssetList: {
+        videoSrc: "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/69d66812-291f-4658-9da8-c6d30eef.mp4",
+        videoId: "",
+        videoName: "sample_960x540_Xs2E4anK.mp4",
+        videoHeight: 540,
+        videoWidth: 960,
+        previewUrl: "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/video_screenshot_assets__1676874342082.png/1040"
       },
     };
     renderComponent(props1);
-    expect(true).toBe(true);
+    const reUploadBtn = screen.getByRole('button', {name: /re upload/i});
+    userEvent.click(reUploadBtn);
   });
 });

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -457,4 +457,20 @@
   span {
     font-size: $FONT_SIZE_VS;
   }
+}
+
+.video-preview {
+  position: relative; 
+}
+.icon-position {
+  width: 50%;
+  height: 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.video-icon {
+  position: absolute;
+  right: -17px;
+  bottom: -17px;
 }

package/v2Components/TemplatePreview/index.js

@@ -22,6 +22,7 @@ import {
 import Carousel from '../Carousel';
 import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
 import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg';
+import videoPlay from '../../assets/videoPlay.svg';
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
 const smsMobileIos = require('./assets/images/sms_mobile_ios.svg');
@@ -741,11 +742,16 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                             />
                           )}
                           {content?.whatsappVideoPreviewImg && (
-                            <CapImage
-                              src={content.whatsappVideoPreviewImg}
-                              className="whatsapp-image"
-                              alt={formatMessage(messages.previewGenerated)}
-                            />
+                            <div className="video-preview">
+                              <CapImage
+                                src={content.whatsappVideoPreviewImg}
+                                className="whatsapp-image"
+                                alt={formatMessage(messages.previewGenerated)}
+                              />
+                              <div className="icon-position">
+                                <CapImage className="video-icon" src={videoPlay} />
+                              </div>
+                            </div>
                           )}
                           {content?.docPreview && (
                             <div className="whatsapp-image">

package/v2Containers/CreativesContainer/index.js

@@ -385,20 +385,26 @@ export class Creatives extends React.Component {
             } = {},
           } = templateData;
           let mediaParams = {};
-          if (mediaType === WHATSAPP_MEDIA_TYPES.IMAGE) {
-            mediaParams = {
-              imageUrl: whatsappMedia?.url,
-            };
-          } else if (mediaType === WHATSAPP_MEDIA_TYPES.VIDEO) {
-            mediaParams = {
-              videoUrl: whatsappMedia?.url,
-              videoPreviewImg: whatsappMedia?.previewUrl,
-            };
-          } else if (mediaType === WHATSAPP_MEDIA_TYPES.DOCUMENT) {
-            mediaParams = {
-              documentUrl: whatsappMedia?.url,
-              whatsappDocParams: whatsappMedia?.docParams,
-            };
+          switch (mediaType) {
+            case (WHATSAPP_MEDIA_TYPES.IMAGE):
+              mediaParams = {
+                imageUrl: whatsappMedia?.url,
+              };
+              break;
+            case (WHATSAPP_MEDIA_TYPES.VIDEO):
+              mediaParams = {
+                videoUrl: whatsappMedia?.url,
+                videoPreviewImg: whatsappMedia?.previewUrl,
+              };
+              break;
+            case (WHATSAPP_MEDIA_TYPES.DOCUMENT):
+              mediaParams = {
+                documentUrl: whatsappMedia?.url,
+                whatsappDocParams: whatsappMedia?.docParams,
+              };
+              break;
+            default:
+              break;
           }
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
             if (btn.type === 'PHONE_NUMBER') {
@@ -650,21 +656,27 @@ export class Creatives extends React.Component {
             varMapped[`{{${Object.keys(varMapped).length + 1}}}_unsubscribe`] =
               "{{unsubscribe}}";
           }
-          let whatsappMedia;
-          if (mediaType === WHATSAPP_MEDIA_TYPES.IMAGE) {
-            whatsappMedia = {
-              url: imageUrl,
-            };
-          } else if (mediaType === WHATSAPP_MEDIA_TYPES.VIDEO) {
-            whatsappMedia = {
-              url: videoUrl,
-              previewUrl: videoPreviewImg,
-            };
-          } else if (mediaType === WHATSAPP_MEDIA_TYPES.DOCUMENT) {
-            whatsappMedia = {
-              url: documentUrl,
-              docParams: whatsappDocParams,
-            };
+          let whatsappMedia = {};
+          switch (mediaType) {
+            case (WHATSAPP_MEDIA_TYPES.IMAGE):
+              whatsappMedia = {
+                url: imageUrl,
+              };
+              break;
+            case (WHATSAPP_MEDIA_TYPES.VIDEO):
+              whatsappMedia = {
+                url: videoUrl,
+                previewUrl: videoPreviewImg,
+              };
+              break;
+            case (WHATSAPP_MEDIA_TYPES.DOCUMENT):
+              whatsappMedia = {
+                url: documentUrl,
+                docParams: whatsappDocParams,
+              };
+              break;
+            default:
+              break;
           }
           templateData = {
             channel,

package/v2Containers/Templates/_templates.scss

@@ -628,4 +628,20 @@
   -webkit-line-clamp: 10;
   -webkit-box-orient: vertical;
   overflow: hidden;
+}
+
+.video-preview {
+  position: relative; 
+}
+.icon-position {
+  width: 50%;
+  height: 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.video-icon {
+  position: absolute;
+  right: -17px;
+  bottom: -17px;
 }

package/v2Containers/Templates/index.js

@@ -106,7 +106,7 @@ import { getRCSContent } from '../Rcs/utils';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS } from '../CreativesContainer/constants';
 
 import {CREATIVE} from '../Facebook/constants';
-
+import videoPlay from '../../assets/videoPlay.svg';
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
@@ -1067,7 +1067,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         }
         case WHATSAPP: {
-          const { whatsappImageSrc = '', templateMsg, docPreview} = getWhatsappContent(template);
+          const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoSrc = ''} = getWhatsappContent(template);
           templateData.title = (
             <CapRow>
               <CapLabel className="whatsapp-rcs-template-name">{template?.name}</CapLabel>
@@ -1079,6 +1079,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               {whatsappImageSrc && (
                 <CapImage src={whatsappImageSrc} className="whatsapp-image" />
               )}
+              {whatsappVideoSrc && (
+                <div className="video-preview">
+                  <CapImage
+                    src={whatsappVideoSrc}
+                    className="whatsapp-image"
+                  />
+                  <div className="icon-position">
+                    <CapImage className="video-icon" src={videoPlay} />
+                  </div>
+                </div>
+                // <CapImage src={whatsappVideoSrc} className="whatsapp-image" />
+              )}
               <div className="whatsapp-doc">{docPreview}</div>
               <span
                 className={`${