@capillarytech/creatives-library 7.14.14 → 7.14.15

package/config/app.js

@@ -16,8 +16,8 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
-    //api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
+    //api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

package/package.json

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

package/v2Components/CapDocumentUpload/index.js

@@ -11,7 +11,7 @@ import { injectIntl, FormattedMessage, intlShape} from 'react-intl';
 import { isEmpty, get } from 'lodash';
 import './index.scss';
 import messages from './messages';
-const PDFJS = require("pdfjs-dist");
+import { convertPdfToImages } from '../WhatsappDocumentPreview/index';
 
 function CapDocumentUpload(props) {
   const {
@@ -32,10 +32,6 @@ function CapDocumentUpload(props) {
     supportedFormat,
     supportedMaxSize,
   } = props;
-  const {
-    formatMessage,
-    } = intl || {};
-
 
   useEffect(() => {
     const docDataObj = documentData[`uploadedAssetData${index}`];
@@ -54,6 +50,7 @@ function CapDocumentUpload(props) {
 
   const {CapHeadingSpan} = CapHeading;
 
+  //renders the preview for document
   const DocPreviewComponent = useCallback(
     () => (
       <div className={`upload uploaded-container ${props.ifError ? 'error' : ''}`}>
@@ -65,6 +62,7 @@ function CapDocumentUpload(props) {
 
   const WithLabel = LabelHOC(DocPreviewComponent);
 
+  //this function gets executed on the upload of a document
   const uploadDocuments = useCallback((e, {files}) => {
     if (e) {
       e.preventDefault();
@@ -80,47 +78,21 @@ function CapDocumentUpload(props) {
     const fileParams = {
       error: false, // checking error based on file size
     };
-    convertPdfToImages(file);
+    const result = convertPdfToImages(file);
+    result.then((data) =>
+    setWhatsappDocParams(
+      {
+        ...whatsappDocParams,
+        whatsappDocImg: data?.image,
+        whatsappDocPages: data?.numberOfPages,
+      })
+    );
     submitAction({file, type: 'document', fileParams}, incorrectFile);
     if (e) {
       const event = e;
       event.target.value = null;
     }
   }, []);
-  const readFileData = (file) => new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      resolve(e.target.result);
-    };
-    reader.onerror = (err) => {
-      reject(err);
-    };
-    reader.readAsDataURL(file);
-  });
-  const convertPdfToImages = async (file) => {
-    const data = await readFileData(file);
-    return PDFJS.getDocument(data)
-    .then(async function (pdf) {
-      const numberOfPages = pdf.numPages;
-      const canvas = document.createElement("canvas");
-      const page = await pdf.getPage(1);
-      const viewport = page.getViewport({ scale: 1 });
-      const context = canvas.getContext("2d");
-      canvas.height = viewport.height;
-      canvas.width = viewport.width;
-      await page.render({ canvasContext: context, viewport: viewport }).promise;
-      const image = (canvas.toDataURL('image/jpeg', 1.0));
-      canvas.remove();
-      setWhatsappDocParams({
-        ...whatsappDocParams,
-        whatsappDocImg: image,
-        whatsappDocPages: numberOfPages,
-      });
-      return image;
-    })
-    .catch((error) => Promise.reject(error));
-  };
-
   const submitAction = useCallback((data, incorrectFile) => {
     const {
       file,
@@ -129,13 +101,13 @@ function CapDocumentUpload(props) {
     const { size } = file || {};
     const { error } = fileParams || {};
     if (incorrectFile || size > documentSize || error) {
-      updateDocErrorMessage(formatMessage(messages.docErrorDesc));
+      updateDocErrorMessage(<FormattedMessage {...messages.docErrorDesc} />);
     } else {
       updateDocErrorMessage('');
       uploadAsset(
-        data.file,
+        file,
         data.type,
-        data.fileParams,
+        fileParams,
         index,
       );
     }
@@ -145,11 +117,13 @@ function CapDocumentUpload(props) {
     uploadDocuments(undefined, {files: [uploadData.file]});
   }, []);
 
+  //this function gets called when reUpload button is clicked
   const onReUpload = useCallback(() => {
     updateDocumentSrc('');
     updateOnReUpload();
   }, []);
 
+  //renders the dragger component to upload the document
   const getDocumentSection = useCallback(() => {
     if (documentSrc === "") {
       return (

package/v2Components/CapDocumentUpload/index.scss

@@ -12,7 +12,7 @@ $classPrefix: cap-custom-document-upload;
   .image-info-wrapper {
     display: flex;
     justify-content: space-between;
-    margin-top: 8px;
+    margin-top: $CAP_SPACE_08;
   }
   .whatsapp-background div {
     background: $CAP_G10;
@@ -38,18 +38,18 @@ $classPrefix: cap-custom-document-upload;
     background-color: $CAP_G09;
     display: flex;
     .cap-image-v2 {
-      margin: 6px 4px;
+      margin: $CAP_SPACE_06 $CAP_SPACE_04;
       width: 32px;
       height: 32px;
     }
     .pdf-info {
-      margin: 8px 4px;
+      margin: $CAP_SPACE_08 $CAP_SPACE_04;
       max-width: 114px;
       .pdf-info-sec {
-        color: #5f6d85;
-        font-size: 8px;
+        color: $CAP_G03;
+        font-size: $CAP_SPACE_08;
         font-weight: 400;
-        line-height: 12px;
+        line-height: $CAP_SPACE_12;
       }
       .pdf-name-div {
         display: flex;

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

@@ -7,6 +7,7 @@ import {
   screen,
 } from '../../../utils/test-utils';
 import CapDocumentUpload from '../index';
+import { mockData } from './mockData';
 
 const ComponentToRender = injectIntl(CapDocumentUpload);
 const renderComponent = (props) => render(
@@ -49,21 +50,7 @@ describe("test for document upload", () => {
   it("test for cap document upload 1", () => {
     const props1 = {
       ...props,
-      documentData: {
-        uploadedAssetData0: {
-          file_size: 134532,
-          name: 'sample.pdf',
-          secure_file_path: "https://www.africau.edu/images/default/sample.pdf",
-          karixFileHandle: 'abcd',
-        },
-      },
-      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',
-      },
+      ...mockData,
     };
     renderComponent(props1);
   });

package/v2Components/CapDocumentUpload/tests/mockData.js

@@ -0,0 +1,17 @@
+export const mockData = {
+  documentData: {
+    uploadedAssetData0: {
+      file_size: 134532,
+      name: 'sample.pdf',
+      secure_file_path: "https://www.africau.edu/images/default/sample.pdf",
+      karixFileHandle: 'abcd',
+    },
+  },
+  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',
+  },
+};

package/v2Components/CapVideoUpload/index.js

@@ -36,6 +36,8 @@ function CapVideoUpload(props) {
     videoData,
     channel,
     errorMessage,
+    showVideoNameAndDuration = true,
+    formClassName = 'video-form',
   } = props;
   const [isVideoError, updateVideoErrorMessage] = useState(false);
   const [isVideo, updateVideoStatus] = useState(false);
@@ -242,7 +244,7 @@ function CapVideoUpload(props) {
             <FormattedMessage {...messages.imageReUpload} />
           </CapButton>
         </div>
-        <div className="video-panel">
+        <div className={showVideoNameAndDuration ? 'video-panel' : 'video-panel-wp'}>
           <video
             width="230"
             poster={previewUrl}
@@ -257,14 +259,16 @@ function CapVideoUpload(props) {
           >
             <source src={videoSrc} type="video/mp4" />
           </video>
-          <div className="video-info">
-            <CapHeading type="h6">
-              {videoName}
-            </CapHeading>
-            <CapHeading type="h6">
-              {videoDuration}
-            </CapHeading>
-          </div>
+          {showVideoNameAndDuration &&
+            <div className="video-info">
+              <CapHeading type="h6">
+                {videoName}
+              </CapHeading>
+              <CapHeading type="h6">
+                {videoDuration}
+              </CapHeading>
+            </div>
+          }
         </div>
       </Fragment>
     );
@@ -272,7 +276,7 @@ function CapVideoUpload(props) {
   return (
     <CapSpin spinning={isSpinning}>
       <div style={style} className="cap-custom-video-upload">
-        <form encType="multipart/form-data" id={`form`} className={channel !== WHATSAPP ? "video-form" : ""}>
+        <form encType="multipart/form-data" id={`form`} className={formClassName}>
           <input
             key={`videoFile`}
             style={{ display: 'none' }}
@@ -320,6 +324,7 @@ CapVideoUpload.propTypes = {
   allowedExtensionsRegex: PropTypes.string,
   videoSize: PropTypes.string,
   intl: intlShape,
+  showVideoNameAndDuration: PropTypes.bool,
   uploadAsset: PropTypes.func,
   uploadedAssetList: PropTypes.object,
   style: PropTypes.any,
@@ -328,6 +333,7 @@ CapVideoUpload.propTypes = {
   videoData: PropTypes.object,
   channel: PropTypes.string,
   errorMessage: PropTypes.string,
+  formClassName: PropTypes.string,
 };
 
 export default injectIntl(CapVideoUpload);

package/v2Components/CapVideoUpload/index.scss

@@ -44,6 +44,11 @@ $classPrefix: cap-custom-video-upload;
     justify-content: center;
     margin: 4px;
 }
+.video-panel-wp {
+    display: flex;
+    justify-content: center;
+    margin: 4px;
+}
 .video-panel {
     display: flex;
 }  

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -291,6 +291,9 @@
     margin-bottom: 4px;
     .pdf-img-box {
       width: 153px;
+      img {
+        width: 100%;
+      }
     }
     .pdf-label{
       width: 153px;

package/v2Components/WhatsappDocumentPreview/index.js

@@ -0,0 +1,33 @@
+const PDFJS = require("pdfjs-dist");
+const readFileData = (file) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    resolve(e.target.result);
+  };
+  reader.onerror = (err) => {
+    reject(err);
+  };
+  reader.readAsDataURL(file);
+});
+//function to convert first page of pdf to image for the thumbnail preview
+export const convertPdfToImages = async (file) => {
+  const data = await readFileData(file);
+  const encoderQuality = 1.0;
+  return PDFJS.getDocument(data)
+  .then(async function (pdf) {
+    const numberOfPages = pdf.numPages;
+    const canvas = document.createElement("canvas");
+    //fetch first page from pdf
+    const page = await pdf.getPage(1);
+    const viewport = page.getViewport({ scale: 1 });
+    const context = canvas.getContext("2d");
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+    await page.render({ canvasContext: context, viewport: viewport }).promise;
+    //return the base64 format image that we use for preview
+    const image = (canvas.toDataURL('image/jpeg', encoderQuality));
+    canvas.remove();
+    return Promise.resolve({image, numberOfPages});
+  })
+  .catch((error) => Promise.reject(error));
+};

package/v2Containers/CreativesContainer/index.js

@@ -384,26 +384,21 @@ export class Creatives extends React.Component {
               whatsappMedia = {},
             } = {},
           } = templateData;
-          let mediaParams = {};
+          const mediaParams = {};
+          const { url = '', previewUrl = '', docParams = {}} = whatsappMedia;
           switch (mediaType) {
             case (WHATSAPP_MEDIA_TYPES.IMAGE):
-              mediaParams = {
-                imageUrl: whatsappMedia?.url,
-              };
+              mediaParams.imageUrl = url;
               break;
             case (WHATSAPP_MEDIA_TYPES.VIDEO):
-              mediaParams = {
-                videoUrl: whatsappMedia?.url,
-                videoPreviewImg: whatsappMedia?.previewUrl,
-              };
+              mediaParams.videoUrl = url;
+              mediaParams.videoPreviewImg = previewUrl;
               break;
             case (WHATSAPP_MEDIA_TYPES.DOCUMENT):
-              mediaParams = {
-                documentUrl: whatsappMedia?.url,
-                whatsappDocParams: {
-                  ...whatsappMedia?.docParams,
-                  whatsappDocImg: whatsappMedia?.previewUrl,
-                },
+              mediaParams.documentUrl = url;
+              mediaParams.whatsappDocParams = {
+                ...docParams,
+                whatsappDocImg: previewUrl,
               };
               break;
             default:
@@ -659,28 +654,25 @@ export class Creatives extends React.Component {
             varMapped[`{{${Object.keys(varMapped).length + 1}}}_unsubscribe`] =
               "{{unsubscribe}}";
           }
-          let whatsappMedia = {};
+          const whatsappMedia = {};
+          const {
+            whatsappDocName = '', whatsappDocSize, whatsappDocPages, whatsappDocImg = ''
+          } = whatsappDocParams;
           switch (mediaType) {
             case (WHATSAPP_MEDIA_TYPES.IMAGE):
-              whatsappMedia = {
-                url: imageUrl,
-              };
+              whatsappMedia.url = imageUrl;
               break;
             case (WHATSAPP_MEDIA_TYPES.VIDEO):
-              whatsappMedia = {
-                url: videoUrl,
-                previewUrl: videoPreviewImg,
-              };
+              whatsappMedia.url = videoUrl;
+              whatsappMedia.previewUrl = videoPreviewImg;
               break;
             case (WHATSAPP_MEDIA_TYPES.DOCUMENT):
-              whatsappMedia = {
-                url: documentUrl,
-                previewUrl: whatsappDocParams?.whatsappDocImg,
-                docParams: {
-                  whatsappDocName: whatsappDocParams?.whatsappDocName,
-                  whatsappDocSize: whatsappDocParams?.whatsappDocSize,
-                  whatsappDocPages: whatsappDocParams?.whatsappDocPages,
-                },
+              whatsappMedia.url = documentUrl;
+              whatsappMedia.previewUrl = whatsappDocImg;
+              whatsappMedia.docParams = {
+                whatsappDocName,
+                whatsappDocSize,
+                whatsappDocPages,
               };
               break;
             default:

package/v2Containers/Templates/index.js

@@ -1067,7 +1067,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         }
         case WHATSAPP: {
-          const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoSrc = ''} = getWhatsappContent(template);
+          const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoPreviewImg = ''} = getWhatsappContent(template);
           templateData.title = (
             <CapRow>
               <CapLabel className="whatsapp-rcs-template-name">{template?.name}</CapLabel>
@@ -1079,17 +1079,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               {whatsappImageSrc && (
                 <CapImage src={whatsappImageSrc} className="whatsapp-image" />
               )}
-              {whatsappVideoSrc && (
+              {whatsappVideoPreviewImg && (
                 <div className="video-preview">
                   <CapImage
-                    src={whatsappVideoSrc}
+                    src={whatsappVideoPreviewImg}
                     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

package/v2Containers/Whatsapp/constants.js

@@ -187,9 +187,8 @@ export const WHATSAPP_DOCUMENT_SIZE = 16000000; // 16MB
 export const HOST_TWILIO = 'twiliowhatsapptrans';
 export const HOST_KARIX = 'karixwhatsappbulk';
 export const SIZE_UNITS = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-export const PAGES = "pages";
-export const PAGE = "page";
-export const PDF = "PDF";
+export const DOCUMENT_FORMAT = 'PDF';
+export const DOCUMENT_SIZE = '16 MB';
 
 export const LANGUAGE_OPTIONS = [
   {

package/v2Containers/Whatsapp/index.js

@@ -64,6 +64,8 @@ import {
   ALLOWED_EXTENSIONS_DOCUMENT_REGEX,
   WHATSAPP_DOCUMENT_SIZE,
   WHATSAPP_VIDEO_SIZE,
+  DOCUMENT_FORMAT,
+  DOCUMENT_SIZE,
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
@@ -729,9 +731,10 @@ export const Whatsapp = (props) => {
 
   const setUpdateWhatsappVideoSrc = useCallback(
     (index, data) => {
+      const {videoSrc = '', previewUrl = ''} = data;
       setWhatsappVideoSrcAndPreview({
-        whatsappVideoSrc: data?.videoSrc,
-        whatsappVideoPreviewImg: data?.previewUrl,
+        whatsappVideoSrc: videoSrc,
+        whatsappVideoPreviewImg: previewUrl,
       });
       setKarixFileHandle(data?.fileHandle);
       updateAssetList(data);
@@ -783,8 +786,10 @@ export const Whatsapp = (props) => {
       onVideoUploadUpdateAssestList={setUpdateWhatsappVideoSrc}
       videoData={editData}
       className="cap-custom-video-upload"
+      formClassName={"whatsapp-video-upload"}
       channel={WHATSAPP}
       errorMessage={formatMessage(messages.videoErrorMessage)}
+      showVideoNameAndDuration={false}
     />
   );
   const docPreview = ( whatsappDocSource !== '' &&
@@ -807,8 +812,8 @@ export const Whatsapp = (props) => {
       setWhatsappDocParams={setWhatsappDocParams}
       channel={WHATSAPP}
       docPreview={docPreview}
-      supportedMaxSize={'16 MB'}
-      supportedFormat={'PDF'}
+      supportedMaxSize={DOCUMENT_SIZE}
+      supportedFormat={DOCUMENT_FORMAT}
     />
   );
 
@@ -950,6 +955,7 @@ export const Whatsapp = (props) => {
 
   const createPayload = () => {
     let mediaParams = {};
+    const { whatsappVideoSrc = '', whatsappVideoPreviewImg = '' } = whatsappVideoSrcAndPreview;
     switch (templateMediaType) {
       case WHATSAPP_MEDIA_TYPES.IMAGE:
         mediaParams = {
@@ -959,8 +965,8 @@ export const Whatsapp = (props) => {
         break;
       case WHATSAPP_MEDIA_TYPES.VIDEO:
         mediaParams = {
-          videoUrl: getCdnUrl({url: whatsappVideoSrcAndPreview?.whatsappVideoSrc, channelName: WHATSAPP }),
-          videoPreviewImg: getCdnUrl({url: whatsappVideoSrcAndPreview?.whatsappVideoPreviewImg, channelName: WHATSAPP}),
+          videoUrl: getCdnUrl({url: whatsappVideoSrc, channelName: WHATSAPP }),
+          videoPreviewImg: getCdnUrl({url: whatsappVideoPreviewImg, channelName: WHATSAPP}),
           karixFileHandle,
         };
         break;
@@ -1477,18 +1483,16 @@ export const Whatsapp = (props) => {
         )}
       </>
     );
-    let mediaPreview = {};
+    const mediaPreview = {};
     switch (templateMediaType) {
       case WHATSAPP_MEDIA_TYPES.IMAGE:
-        mediaPreview = {whatsappImageSrc};
+        mediaPreview.whatsappImageSrc = whatsappImageSrc;
         break;
       case WHATSAPP_MEDIA_TYPES.VIDEO:
-        mediaPreview = {
-          whatsappVideoPreviewImg: whatsappVideoSrcAndPreview?.whatsappVideoPreviewImg,
-        };
+        mediaPreview.whatsappVideoPreviewImg = whatsappVideoSrcAndPreview?.whatsappVideoPreviewImg;
         break;
       case WHATSAPP_MEDIA_TYPES.DOCUMENT:
-        mediaPreview = {docPreview};
+        mediaPreview.docPreview = docPreview;
         break;
       default:
         break;

package/v2Containers/Whatsapp/messages.js

@@ -300,6 +300,18 @@ export default defineMessages({
     id: `${prefix}.videoErrorMessage`,
     defaultMessage: 'Please upload the video with allowed file extension, size, dimension and aspect ratio',
   },
+  pdf: {
+    id: `${prefix}.pdf`,
+    defaultMessage: 'PDF',
+  },
+  pages: {
+    id: `${prefix}.pages`,
+    defaultMessage: 'pages',
+  },
+  page: {
+    id: `${prefix}.page`,
+    defaultMessage: 'page',
+  },
 
   afrikaans: {
     id: `${prefix}.afrikaans`,

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

@@ -61,7 +61,7 @@ Object {
     Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
 Click {{unsubscribe}} to unsubscribe
   </CapLabel>,
-  "whatsappVideoSrc": "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213/1040",
+  "whatsappVideoPreviewImg": "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213/1040",
 }
 `;
 
@@ -89,6 +89,7 @@ Object {
       <CapImage
         alt="upload-document-src"
         className="pdf-preview-img"
+        src=""
       />
     </div>
     <div
@@ -106,7 +107,9 @@ Object {
           <CapLabel
             className="pdf-name"
             type="label9"
-          />
+          >
+            
+          </CapLabel>
           <CapLabel
             type="label9"
           >
@@ -117,7 +120,19 @@ Object {
           className="pdf-info-sec"
           type="label1"
         >
-          undefined page · 0 bytes · PDF
+          0
+           
+          <FormattedMessage
+            defaultMessage="page"
+            id="creatives.containersV2.Whatsapp.page"
+            values={Object {}}
+          />
+           · 0 bytes · 
+          <FormattedMessage
+            defaultMessage="PDF"
+            id="creatives.containersV2.Whatsapp.pdf"
+            values={Object {}}
+          />
         </CapLabel>
       </div>
     </div>

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

@@ -63,14 +63,16 @@ describe('Test utils', () => {
       whatsappDocPages: 2,
       whatsappDocImg: "https://play-lh.googleusercontent.com/BkRfMfIRPR9hUnmIYGDgHHKjow-g18-ouP6B2ko__VnyUHSi1spcc78UtZ4sVUtBH4g",
     };
-    expect(getWhatsappDocPreview(whatsappDocParams)).toEqual(
-      getWhatsappDocPreviewOutput,
+    expect(JSON.stringify(getWhatsappDocPreview(whatsappDocParams))).toEqual(
+      JSON.stringify(getWhatsappDocPreviewOutput),
     );
-    expect(getWhatsappDocPreview({
+    //getWhatsappDocPreviewOutput is the output when page number is greater than 1
+    //getWhatsappDocPreviewOutput1 is the output when page number is equal than 1
+    expect(JSON.stringify(getWhatsappDocPreview({
       ...whatsappDocParams,
       whatsappDocPages: 1,
-    })).toEqual(
-      getWhatsappDocPreviewOutput1,
+    }))).toStrictEqual(
+      JSON.stringify(getWhatsappDocPreviewOutput1),
     );
   });
 });

package/v2Containers/Whatsapp/utils.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapImage from '@capillarytech/cap-ui-library/CapImage';
@@ -15,49 +16,46 @@ import {
   WHATSAPP_MEDIA_TYPES,
   HOST_KARIX,
   SIZE_UNITS,
-  PAGES,
-  PAGE,
-  PDF,
 } from '../Whatsapp/constants';
 import './styles.scss';
 import pdfIcon from "../../assets/pdfIcon.svg";
+import messages from './messages';
 
 export function bytesConversion(x) {
   // the function accepts bytes and convert in appropriate size following the,
   // l variable, this variable holds the size_unit index and displays the
   // respective size, eg : 5120 bytes gives 5 KB and 5242880 gives 5 MB
-  let l;
-  l = 0;
-  let n;
-  n = parseInt(x, 10) || 0;
+  let l = 0;
+  let n = parseInt(x, 10) || 0;
   // eslint-disable-next-line no-plusplus
   while (n >= 1024 && ++l) {
     n /= 1024;
   }
   return (`${n.toFixed(n < 10 && l > 0 ? 1 : 0)} ${SIZE_UNITS[l]}`);
 }
-export const getWhatsappDocPreview = (whatsappDocParams) =>
-  (
+export const getWhatsappDocPreview = (whatsappDocParams) => {
+  const { whatsappDocImg = '', whatsappDocName = '', whatsappDocPages = 0} = whatsappDocParams;
+  return (
     <>
       <div className="pdf-img-box">
-        <CapImage src={whatsappDocParams?.whatsappDocImg} alt="upload-document-src" className="pdf-preview-img" />
+        <CapImage src={whatsappDocImg} 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">{whatsappDocParams?.whatsappDocName?.slice(0, -13)}</CapLabel>
+            <CapLabel type="label9" className="pdf-name">{whatsappDocName?.slice(0, -13)}</CapLabel>
             <CapLabel type="label9">{".pdf"}</CapLabel>
           </div>
           <CapLabel className="pdf-info-sec">
-            {
-                `${whatsappDocParams?.whatsappDocPages} ${whatsappDocParams?.whatsappDocPages > 1 ? PAGES : PAGE} · ${bytesConversion(whatsappDocParams?.whatsappDocSize)} · ${PDF}`
-            }
+            {whatsappDocPages} {whatsappDocPages > 1 ? <FormattedMessage {...messages.pages} /> : <FormattedMessage {...messages.page} />}{` · ${bytesConversion(whatsappDocParams?.whatsappDocSize)} · `}
+            <FormattedMessage {...messages.pdf} />
           </CapLabel>
         </div>
       </div>
     </>
   );
+};
 
 export const getWhatsappContent = (template, isPreview) => {
   const {
@@ -96,7 +94,7 @@ export const getWhatsappContent = (template, isPreview) => {
       mediaParams = {whatsappImageSrc: imageUrl};
       break;
     case WHATSAPP_MEDIA_TYPES.VIDEO:
-      mediaParams = {whatsappVideoSrc: videoPreviewImg};
+      mediaParams = {whatsappVideoPreviewImg: videoPreviewImg};
       break;
     case WHATSAPP_MEDIA_TYPES.DOCUMENT:
       mediaParams = {docPreview: getWhatsappDocPreview(whatsappDocParams)};

package/v2Containers/mockdata.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { CapImage, CapLabel } from '@capillarytech/cap-ui-library';
 import pdfIcon from '../assets/pdfIcon.svg';
+import messages from './Whatsapp/messages';
 
 export default {
   whatsappTemplates: {
@@ -973,9 +974,8 @@ export default {
               <CapLabel type="label9">{".pdf"}</CapLabel>
             </div>
             <CapLabel className="pdf-info-sec">
-              {
-                  `2 pages · 1.0 MB · PDF`
-                }
+              {2} {<FormattedMessage {...messages.pages} />}{` · 1.0 MB · `}
+              <FormattedMessage {...messages.pdf} />
             </CapLabel>
           </div>
         </div>
@@ -995,9 +995,8 @@ export default {
               <CapLabel type="label9">{".pdf"}</CapLabel>
             </div>
             <CapLabel className="pdf-info-sec">
-              {
-                  `1 page · 1.0 MB · PDF`
-                }
+              {1} {<FormattedMessage {...messages.page} />}{` · 1.0 MB · `}
+              <FormattedMessage {...messages.pdf} />
             </CapLabel>
           </div>
         </div>