@capillarytech/creatives-library 7.14.8 → 7.14.9

package/config/app.js

@@ -17,7 +17,6 @@ const config = {
   },
   development: {
     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.8",
+  "version": "7.14.9",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CapDocumentUpload/index.js

@@ -1,8 +1,6 @@
 /* eslint-disable camelcase */
 import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from "prop-types";
-import "@react-pdf-viewer/core/lib/styles/index.css";
-import "@react-pdf-viewer/default-layout/lib/styles/index.css";
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
 import {
   CapUploader,
@@ -123,22 +121,23 @@ function CapDocumentUpload(props) {
 
   const getDocumentSection = useCallback(() => {
     if (documentSrc === "") {
-      return (<>
-        <CapUploader.CapDragger
-          customRequest={capUploaderCustomRequest}
-          className="form-builder-dragger whatsapp-background"
-          showUploadList={!isDocError}
-        >
-          <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-doc" type="secondary">
-            <FormattedMessage {...messages.uploadComputer} />
-          </CapButton>
-        </CapUploader.CapDragger>
+      return (
+        <>
+          <CapUploader.CapDragger
+            customRequest={capUploaderCustomRequest}
+            className="form-builder-dragger whatsapp-background"
+            showUploadList={!isDocError}
+          >
+            <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-doc" type="secondary">
+              <FormattedMessage {...messages.uploadComputer} />
+            </CapButton>
+          </CapUploader.CapDragger>
         </>
       );
     }
@@ -159,8 +158,7 @@ function CapDocumentUpload(props) {
       <WithLabel
         key={`with-label`}
         errorMessage={isDocError} ifError={!!isDocError}
-
-    />
+      />
       <form encType="multipart/form-data" id={`form`} className={className}>
         <input
           key={`docFile`}

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from '../../../utils/test-utils';
+import CapDocumentUpload from '../index';
+
+const ComponentToRender = injectIntl(CapDocumentUpload);
+const renderComponent = (props) => render(
+  <ComponentToRender {...props} />
+);
+
+describe("test for document upload", () => {
+  const props = {
+    allowedExtensionsRegex: (/\.(pdf)$/i),
+    documentSize: 16000000,
+    uploadAsset: jest.fn(),
+    documentSrc: '',
+    updateDocumentSrc: jest.fn(),
+    updateOnReUpload: jest.fn(),
+    index: 0,
+    className: 'cap-custom-document-upload',
+    documentData: {},
+    channel: 'WHATSAPP',
+    channelSpecificStyle: null,
+    whatsappDocParams: {},
+    setWhatsappDocParams: jest.fn(),
+    docPreview: <></>,
+  };
+  it("test for cap document upload", () => {
+    renderComponent(props);
+    expect(true).toBe(true);
+  });
+  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',
+      },
+    };
+    renderComponent(props1);
+    expect(true).toBe(true);
+  });
+});

package/v2Components/CapVideoUpload/index.js

@@ -56,6 +56,7 @@ function CapVideoUpload(props) {
   } = uploadedAssetList;
 
   const [isTemplateDrawerRequired, updateTemplateDrawerRequirement] = useState(false);
+
   const uploadVideo = useCallback((e, { files }) => {
     if (e) {
       e.preventDefault();

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from '../../../utils/test-utils';
+import CapVideoUpload from '../index';
+
+const ComponentToRender = injectIntl(CapVideoUpload);
+const renderComponent = (props) => render(
+  <ComponentToRender {...props} />
+);
+
+describe("test for document upload", () => {
+  const props = {
+    allowedExtensionsRegex: (/\.(mp4|3gpp)$/i),
+    videoSize: 16000000,
+    uploadAsset: jest.fn(),
+    supportedExtensions: '',
+    videoSrc: '',
+    uploadedAssetList: {},
+    updateDocumentSrc: jest.fn(),
+    updateOnReUpload: jest.fn(),
+    index: 0,
+    className: 'cap-custom-video-upload',
+    videoData: {},
+    channel: 'WHATSAPP',
+    onVideoUploadUpdateAssestList: jest.fn(),
+  };
+  it("test for cap document upload", () => {
+    renderComponent(props);
+    expect(true).toBe(true);
+  });
+  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',
+      },
+    };
+    renderComponent(props1);
+    expect(true).toBe(true);
+  });
+});

package/v2Containers/CreativesContainer/index.js

@@ -31,7 +31,7 @@ import { IMAGE as LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO as LINE_VIDEO, TE
 import {IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
-import { WHATSAPP_STATUSES } from '../Whatsapp/constants';
+import { WHATSAPP_STATUSES, WHATSAPP_MEDIA_TYPES } from '../Whatsapp/constants';
 
 import { updateImagesInHtml } from '../../utils/cdnTransformation';
 
@@ -381,9 +381,25 @@ export class Creatives extends React.Component {
               buttonType = 'NONE',
               buttons = [],
               mediaType = 'TEXT',
-              whatsappMedia: { url: imageUrl = '' } = {},
+              whatsappMedia = {},
             } = {},
           } = 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,
+            };
+          }
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
             if (btn.type === 'PHONE_NUMBER') {
               btn.phone_number = btn.phoneNumber;
@@ -410,7 +426,7 @@ export class Creatives extends React.Component {
                     category,
                     varMapped,
                     mediaType,
-                    imageUrl,
+                    ...mediaParams,
                     buttonType,
                     buttons: modifiedButtons,
                     languages: [
@@ -606,6 +622,10 @@ export class Creatives extends React.Component {
             buttonType = 'NONE',
             buttons = [],
             imageUrl = '',
+            videoUrl = '',
+            documentUrl = '',
+            videoPreviewImg = '',
+            whatsappDocParams = {},
           } = cloneDeep(versions.base.content.whatsapp);
 
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
@@ -630,7 +650,22 @@ 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,
+            };
+          }
           templateData = {
             channel,
             accountId,
@@ -646,9 +681,7 @@ export class Creatives extends React.Component {
               buttonType,
               buttons: modifiedButtons,
               mediaType,
-              whatsappMedia: {
-                url: imageUrl,
-              },
+              whatsappMedia,
             },
           };
         }

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

@@ -3,6 +3,7 @@ import {
   getWhatsappStatus,
   getWhatsappCategory,
   getWhatsappCta,
+  bytesConversion,
 } from '../utils';
 import mockdata from '../../mockdata';
 
@@ -19,6 +20,7 @@ describe('Test utils', () => {
     expect(getWhatsappContent(whatsappPreviewTemplateData)).toMatchSnapshot();
     expect(getWhatsappContent(whatsappPreviewTemplateData2)).toMatchSnapshot();
     expect(getWhatsappContent({})).toMatchSnapshot();
+    expect(bytesConversion(1024)).toEqual('1.0 KB');
   });
 
   it('test getWhatsappContent for preview', () => {

package/v2Containers/Whatsapp/utils.js

@@ -19,7 +19,7 @@ import {
 import './styles.scss';
 import pdfIcon from "../../assets/pdfIcon.svg";
 
-function bytesConversion(x) {
+export function bytesConversion(x) {
   let l;
   l = 0;
   let n;