@capillarytech/creatives-library 7.14.8 → 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/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.10",
   "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,
@@ -22,7 +20,6 @@ function CapDocumentUpload(props) {
     documentSize,
     uploadAsset,
     supportedExtensions,
-    style,
     documentSrc,
     updateDocumentSrc,
     updateOnReUpload,
@@ -30,7 +27,6 @@ function CapDocumentUpload(props) {
     className,
     documentData,
     channel,
-    channelSpecificStyle,
     whatsappDocParams,
     setWhatsappDocParams,
     docPreview,
@@ -123,22 +119,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>
         </>
       );
     }
@@ -147,7 +144,6 @@ function CapDocumentUpload(props) {
         className="dragger-button re-upload"
         type="flat"
         onClick={onReUpload}
-        style={channelSpecificStyle ? { marginTop: '-16px'} : {}}
       >
         <FormattedMessage {...messages.docReUpload} />
       </CapButton>
@@ -155,16 +151,15 @@ 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}
-
-    />
+      />
       <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 })}
@@ -193,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,
@@ -204,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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import {
+  render,
+  screen,
+} 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(
+      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 = {
+      ...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

@@ -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';
@@ -56,6 +55,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,90 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import {
+  render,
+  screen,
+} 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: '',
+    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(
+      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,
+      videoData: {
+        uploadedAssetData0: {
+          _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,
+        },
+      },
+      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);
+    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

@@ -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/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

@@ -3,6 +3,8 @@ import {
   getWhatsappStatus,
   getWhatsappCategory,
   getWhatsappCta,
+  bytesConversion,
+  getWhatsappDocPreview,
 } from '../utils';
 import mockdata from '../../mockdata';
 
@@ -12,6 +14,8 @@ const {
   getWhatsappStatusOutput1,
   getWhatsappCategoryOutput1,
   getWhatsappCategoryOutput2,
+  getWhatsappDocPreviewOutput,
+  getWhatsappDocPreviewOutput1,
 } = mockdata;
 
 describe('Test utils', () => {
@@ -19,6 +23,8 @@ describe('Test utils', () => {
     expect(getWhatsappContent(whatsappPreviewTemplateData)).toMatchSnapshot();
     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', () => {
@@ -45,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/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;

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