@capillarytech/creatives-library 7.14.9 → 7.14.10

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.10",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CapDocumentUpload/index.js

@@ -20,7 +20,6 @@ function CapDocumentUpload(props) {
     documentSize,
     uploadAsset,
     supportedExtensions,
-    style,
     documentSrc,
     updateDocumentSrc,
     updateOnReUpload,
@@ -28,7 +27,6 @@ function CapDocumentUpload(props) {
     className,
     documentData,
     channel,
-    channelSpecificStyle,
     whatsappDocParams,
     setWhatsappDocParams,
     docPreview,
@@ -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 })}
@@ -191,7 +188,6 @@ CapDocumentUpload.propTypes = {
   documentSize: PropTypes.number,
   uploadAsset: PropTypes.func,
   supportedExtensions: PropTypes.any,
-  style: PropTypes.any,
   documentSrc: PropTypes.string,
   updateDocumentSrc: PropTypes.func,
   intl: intlShape,
@@ -202,7 +198,6 @@ CapDocumentUpload.propTypes = {
   channel: PropTypes.string,
   whatsappDocParams: PropTypes.string,
   setWhatsappDocParams: PropTypes.func,
-  channelSpecificStyle: PropTypes.bool,
   docPreview: PropTypes.any,
 };
 

package/v2Components/CapDocumentUpload/index.scss

@@ -6,6 +6,9 @@ $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;
@@ -61,3 +64,6 @@ $classPrefix: cap-custom-document-upload;
   } 
   
 }
+.document-div {
+  padding-top: '20px';
+}

package/v2Components/CapDocumentUpload/messages.js

@@ -33,6 +33,6 @@ export default defineMessages({
   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: 16mb/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/format: pdf/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 = {

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';

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/Whatsapp/index.js

@@ -784,7 +784,6 @@ export const Whatsapp = (props) => {
   );
   const renderDocumentComponent = () => (
     <CapDocumentUpload
-      style={{ paddingTop: '20px' }}
       allowedExtensionsRegex={ALLOWED_EXTENSIONS_DOCUMENT_REGEX}
       documentSize={WHATSAPP_DOCUMENT_SIZE}
       uploadAsset={uploadWhatsappImage}

package/v2Containers/Whatsapp/tests/utils.test.js

@@ -4,6 +4,7 @@ import {
   getWhatsappCategory,
   getWhatsappCta,
   bytesConversion,
+  getWhatsappDocPreview,
 } from '../utils';
 import mockdata from '../../mockdata';
 
@@ -13,6 +14,8 @@ const {
   getWhatsappStatusOutput1,
   getWhatsappCategoryOutput1,
   getWhatsappCategoryOutput2,
+  getWhatsappDocPreviewOutput,
+  getWhatsappDocPreviewOutput1,
 } = mockdata;
 
 describe('Test utils', () => {
@@ -21,6 +24,7 @@ describe('Test utils', () => {
     expect(getWhatsappContent(whatsappPreviewTemplateData2)).toMatchSnapshot();
     expect(getWhatsappContent({})).toMatchSnapshot();
     expect(bytesConversion(1024)).toEqual('1.0 KB');
+    expect(bytesConversion('abcd')).toEqual('0 bytes');
   });
 
   it('test getWhatsappContent for preview', () => {
@@ -47,4 +51,22 @@ describe('Test utils', () => {
       getWhatsappCategoryOutput2,
     );
   });
+
+  it('test getWhatsappDocPreview', () => {
+    const whatsappDocParams = {
+      whatsappDocName: "java_tutorial__QtdfGkr.pdf",
+      whatsappDocSize: 1089150,
+      whatsappDocPages: 2,
+      whatsappDocImg: "https://play-lh.googleusercontent.com/BkRfMfIRPR9hUnmIYGDgHHKjow-g18-ouP6B2ko__VnyUHSi1spcc78UtZ4sVUtBH4g",
+    };
+    expect(getWhatsappDocPreview(whatsappDocParams)).toEqual(
+      getWhatsappDocPreviewOutput,
+    );
+    expect(getWhatsappDocPreview({
+      ...whatsappDocParams,
+      whatsappDocPages: 1,
+    })).toEqual(
+      getWhatsappDocPreviewOutput1,
+    );
+  });
 });

package/v2Containers/mockdata.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { CapImage, CapLabel } from '@capillarytech/cap-ui-library';
+import pdfIcon from '../assets/pdfIcon.svg';
 
 export default {
   whatsappTemplates: {
@@ -957,6 +959,50 @@ export default {
     type: 'WHATSAPP',
     channel: 'WHATSAPP',
   },
+  getWhatsappDocPreviewOutput:
+    (
+      <>
+        <div className="pdf-img-box">
+          <CapImage src={"https://play-lh.googleusercontent.com/BkRfMfIRPR9hUnmIYGDgHHKjow-g18-ouP6B2ko__VnyUHSi1spcc78UtZ4sVUtBH4g"} alt="upload-document-src" className="pdf-preview-img" />
+        </div>
+        <div className="pdf-label">
+          <CapImage src={pdfIcon} />
+          <div className="pdf-info">
+            <div className="pdf-name-div">
+              <CapLabel type="label9" className="pdf-name">java_tutorial</CapLabel>
+              <CapLabel type="label9">{".pdf"}</CapLabel>
+            </div>
+            <CapLabel className="pdf-info-sec">
+              {
+                  `2 pages · 1.0 MB · PDF`
+                }
+            </CapLabel>
+          </div>
+        </div>
+      </>
+    ),
+  getWhatsappDocPreviewOutput1:
+    (
+      <>
+        <div className="pdf-img-box">
+          <CapImage src={"https://play-lh.googleusercontent.com/BkRfMfIRPR9hUnmIYGDgHHKjow-g18-ouP6B2ko__VnyUHSi1spcc78UtZ4sVUtBH4g"} alt="upload-document-src" className="pdf-preview-img" />
+        </div>
+        <div className="pdf-label">
+          <CapImage src={pdfIcon} />
+          <div className="pdf-info">
+            <div className="pdf-name-div">
+              <CapLabel type="label9" className="pdf-name">java_tutorial</CapLabel>
+              <CapLabel type="label9">{".pdf"}</CapLabel>
+            </div>
+            <CapLabel className="pdf-info-sec">
+              {
+                  `1 page · 1.0 MB · PDF`
+                }
+            </CapLabel>
+          </div>
+        </div>
+      </>
+    ),
   rcsEditTemplateData: {
     mode: 'edit',
     _id: '620e213d39bd394c58aeaaca',