@capillarytech/creatives-library 7.14.10 → 7.14.12

package/config/app.js

@@ -16,7 +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: '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.10",
+  "version": "7.14.12",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -28,6 +28,7 @@
     "node-html-parser": "^5.4.2-0",
     "normalizr": "^3.2.3",
     "papaparse": "^5.3.1",
+    "pdfjs-dist": "^2.3.200",
     "pre-push": "^0.1.2",
     "react-datepicker": "^0.46.0",
     "react-dropzone": "^11.3.4",

package/v2Components/CapDocumentUpload/index.js

@@ -10,8 +10,8 @@ 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';
+const PDFJS = require("pdfjs-dist");
 
 function CapDocumentUpload(props) {
   const {
@@ -26,10 +26,11 @@ function CapDocumentUpload(props) {
     index,
     className,
     documentData,
-    channel,
     whatsappDocParams,
     setWhatsappDocParams,
     docPreview,
+    supportedFormat,
+    supportedMaxSize,
   } = props;
   const {
     formatMessage,
@@ -39,13 +40,11 @@ function CapDocumentUpload(props) {
   useEffect(() => {
     const docDataObj = documentData[`uploadedAssetData${index}`];
     if (!isEmpty(docDataObj)) {
-      const { secure_file_path = '', karixFileHandle = '', name = '', file_size = '' } = get(docDataObj, 'metaInfo', {});
+      const { secure_file_path = '', karixFileHandle = '', name = '', file_size = ''} = get(docDataObj, 'metaInfo', {});
       setWhatsappDocParams({
         ...whatsappDocParams,
         whatsappDocName: name,
         whatsappDocSize: file_size,
-        whatsappDocPages: 2,
-        whatsappDocImg: 'https://play-lh.googleusercontent.com/BkRfMfIRPR9hUnmIYGDgHHKjow-g18-ouP6B2ko__VnyUHSi1spcc78UtZ4sVUtBH4g',
       });
       updateDocumentSrc(secure_file_path, karixFileHandle);
     }
@@ -55,7 +54,7 @@ function CapDocumentUpload(props) {
 
   const {CapHeadingSpan} = CapHeading;
 
-  const DocComponent = useCallback(
+  const DocPreviewComponent = useCallback(
     () => (
       <div className={`upload uploaded-container ${props.ifError ? 'error' : ''}`}>
         {docPreview}
@@ -64,7 +63,7 @@ function CapDocumentUpload(props) {
     [documentSrc],
   );
 
-  const WithLabel = LabelHOC(DocComponent);
+  const WithLabel = LabelHOC(DocPreviewComponent);
 
   const uploadDocuments = useCallback((e, {files}) => {
     if (e) {
@@ -81,12 +80,46 @@ function CapDocumentUpload(props) {
     const fileParams = {
       error: false, // checking error based on file size
     };
+    convertPdfToImages(file);
     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 {
@@ -168,15 +201,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>
@@ -195,7 +234,8 @@ 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,
   docPreview: PropTypes.any,

package/v2Components/CapDocumentUpload/index.scss

@@ -15,7 +15,7 @@ $classPrefix: cap-custom-document-upload;
     margin-top: 8px;
   }
   .whatsapp-background div {
-    background: #FAFBFC;
+    background: $CAP_G10;
     .ant-upload-list-item .ant-upload-list-item-progress {
       display: none;
     } 
@@ -35,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;
@@ -65,5 +65,5 @@ $classPrefix: cap-custom-document-upload;
   
 }
 .document-div {
-  padding-top: '20px';
+  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,7 +28,7 @@ export default defineMessages({
   },
   format: {
     id: `${scope}.format`,
-    defaultMessage: 'Format: PDF',
+    defaultMessage: 'Format: {format}',
   },
   docErrorDesc: {
     id: `${scope}.docErrorDesc`,

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

@@ -33,10 +33,10 @@ describe("test for document upload", () => {
   it("test for cap document upload", () => {
     renderComponent(props);
     expect(
-      screen.getByText(/size upto: 16mb/i)
+      screen.getByText(/size upto:/i)
     ).toBeInTheDocument();
     expect(
-      screen.getByText(/format: pdf/i)
+      screen.getByText(/format:/i)
     ).toBeInTheDocument();
     expect(
       screen.getByText(/drag and drop document here/i)
@@ -66,6 +66,5 @@ describe("test for document upload", () => {
       },
     };
     renderComponent(props1);
-    expect(true).toBe(true);
   });
 });

package/v2Components/CapVideoUpload/index.js

@@ -34,8 +34,8 @@ function CapVideoUpload(props) {
     onVideoUploadUpdateAssestList,
     index,
     videoData,
-    className,
     channel,
+    errorMessage,
   } = props;
   const [isVideoError, updateVideoErrorMessage] = useState(false);
   const [isVideo, updateVideoStatus] = useState(false);
@@ -131,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));
       }
@@ -172,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"
@@ -191,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>
           </>
         )
       );
@@ -249,9 +242,9 @@ function CapVideoUpload(props) {
             <FormattedMessage {...messages.imageReUpload} />
           </CapButton>
         </div>
-        <div style={{ display: 'flex', justifyContent: 'center', margin: '4px' }}>
+        <div className="video-panel">
           <video
-            width={channel === WHATSAPP ? "300" : "230"}
+            width="230"
             poster={previewUrl}
             className="line-image-src"
             key={`${index}-video`}
@@ -264,24 +257,22 @@ function CapVideoUpload(props) {
           >
             <source src={videoSrc} type="video/mp4" />
           </video>
-          { channel !== WHATSAPP &&
-            <div className="video-info">
-              <CapHeading type="h6">
-                {videoName}
-              </CapHeading>
-              <CapHeading type="h6">
-                {videoDuration}
-              </CapHeading>
-            </div>
-          }
+          <div className="video-info">
+            <CapHeading type="h6">
+              {videoName}
+            </CapHeading>
+            <CapHeading type="h6">
+              {videoDuration}
+            </CapHeading>
+          </div>
         </div>
       </Fragment>
     );
   };
   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' }}
@@ -336,7 +327,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/TemplatePreview/index.js

@@ -22,7 +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'
+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');

package/v2Containers/CreativesContainer/index.js

@@ -385,20 +385,29 @@ 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,
+                  whatsappDocImg: whatsappMedia?.previewUrl,
+                },
+              };
+              break;
+            default:
+              break;
           }
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
             if (btn.type === 'PHONE_NUMBER') {
@@ -650,21 +659,32 @@ 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,
+                previewUrl: whatsappDocParams?.whatsappDocImg,
+                docParams: {
+                  whatsappDocName: whatsappDocParams?.whatsappDocName,
+                  whatsappDocSize: whatsappDocParams?.whatsappDocSize,
+                  whatsappDocPages: whatsappDocParams?.whatsappDocPages,
+                },
+              };
+              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={`${

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -786,6 +786,7 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                             className="whatsapp-image"
                             src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
                           />
+                          
                           <div
                             className="whatsapp-doc"
                           />
@@ -1223,6 +1224,7 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                             className="whatsapp-image"
                             src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
                           />
+                          
                           <div
                             className="whatsapp-doc"
                           />
@@ -1660,6 +1662,7 @@ exports[`Test Templates container Test max templates warning 1`] = `
                             className="whatsapp-image"
                             src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
                           />
+                          
                           <div
                             className="whatsapp-doc"
                           />

package/v2Containers/Whatsapp/constants.js

@@ -187,6 +187,9 @@ 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 LANGUAGE_OPTIONS = [
   {