@capillarytech/creatives-library 7.14.7 → 7.14.8

package/assets/pdfIcon.svg

@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="32" height="32" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_21_60903" transform="scale(0.0078125)"/>
+</pattern>
+<image id="image0_21_60903" width="128" height="128" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

package/config/app.js

@@ -17,6 +17,7 @@ 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.7",
+  "version": "7.14.8",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CapDocumentUpload/index.js

@@ -0,0 +1,211 @@
+/* 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,
+  CapHeading,
+  CapButton,
+} from '@capillarytech/cap-ui-library';
+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';
+
+function CapDocumentUpload(props) {
+  const {
+    intl,
+    allowedExtensionsRegex,
+    documentSize,
+    uploadAsset,
+    supportedExtensions,
+    style,
+    documentSrc,
+    updateDocumentSrc,
+    updateOnReUpload,
+    index,
+    className,
+    documentData,
+    channel,
+    channelSpecificStyle,
+    whatsappDocParams,
+    setWhatsappDocParams,
+    docPreview,
+  } = props;
+  const {
+    formatMessage,
+    } = intl || {};
+
+
+  useEffect(() => {
+    const docDataObj = documentData[`uploadedAssetData${index}`];
+    if (!isEmpty(docDataObj)) {
+      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);
+    }
+  }, [documentData[`uploadedAssetData${index}`]]);
+
+  const [isDocError, updateDocErrorMessage] = useState(false);
+
+  const {CapHeadingSpan} = CapHeading;
+
+  const DocComponent = useCallback(
+    () => (
+      <div className={`upload uploaded-container ${props.ifError ? 'error' : ''}`}>
+        {docPreview}
+      </div>
+    ),
+    [documentSrc],
+  );
+
+  const WithLabel = LabelHOC(DocComponent);
+
+  const uploadDocuments = useCallback((e, {files}) => {
+    if (e) {
+      e.preventDefault();
+    }
+    const _URL = window.URL || window.webkitURL;
+    let incorrectFile = false;
+    const file = files[0];
+    if (!allowedExtensionsRegex.test(file.name)) {
+      incorrectFile = true;
+    }
+    const doc = new FileReader();
+    doc.src = _URL.createObjectURL(file);
+    const fileParams = {
+      error: false, // checking error based on file size
+    };
+    submitAction({file, type: 'document', fileParams}, incorrectFile);
+    if (e) {
+      const event = e;
+      event.target.value = null;
+    }
+  }, []);
+
+  const submitAction = useCallback((data, incorrectFile) => {
+    const {
+      file,
+      fileParams,
+    } = data || {};
+    const { size } = file || {};
+    const { error } = fileParams || {};
+    if (incorrectFile || size > documentSize || error) {
+      updateDocErrorMessage(formatMessage(messages.docErrorDesc));
+    } else {
+      updateDocErrorMessage('');
+      uploadAsset(
+        data.file,
+        data.type,
+        data.fileParams,
+        index,
+      );
+    }
+  }, [isDocError]);
+
+  const capUploaderCustomRequest = useCallback((uploadData) => {
+    uploadDocuments(undefined, {files: [uploadData.file]});
+  }, []);
+
+  const onReUpload = useCallback(() => {
+    updateDocumentSrc('');
+    updateOnReUpload();
+  }, []);
+
+  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 (
+      <CapButton
+        className="dragger-button re-upload"
+        type="flat"
+        onClick={onReUpload}
+        style={channelSpecificStyle ? { marginTop: '-16px'} : {}}
+      >
+        <FormattedMessage {...messages.docReUpload} />
+      </CapButton>
+    );
+  }, [isDocError, documentSrc]);
+
+  return (
+    <div style={style} className="cap-custom-document-upload">
+      <WithLabel
+        key={`with-label`}
+        errorMessage={isDocError} ifError={!!isDocError}
+
+    />
+      <form encType="multipart/form-data" id={`form`} className={className}>
+        <input
+          key={`docFile`}
+          style={{ display: 'none' }}
+          id="fileName"
+          type="file"
+          onChange={(e) => uploadDocuments(e, { files: e.target.files })}
+          accept={supportedExtensions || ".pdf"}
+      />
+        {getDocumentSection()}
+      </form>
+      <div className="image-info-wrapper">
+        {channel === WHATSAPP && (
+          <>
+            <CapHeadingSpan type="label2">
+              <FormattedMessage {...messages.whatsappDocSize} />
+            </CapHeadingSpan>
+          </>
+        )}
+        <CapHeadingSpan type="label2" className="image-format">
+          <FormattedMessage {...messages.format} />
+        </CapHeadingSpan>
+      </div>
+    </div>
+  );
+}
+
+CapDocumentUpload.propTypes = {
+  allowedExtensionsRegex: PropTypes.any,
+  documentSize: PropTypes.number,
+  uploadAsset: PropTypes.func,
+  supportedExtensions: PropTypes.any,
+  style: PropTypes.any,
+  documentSrc: PropTypes.string,
+  updateDocumentSrc: PropTypes.func,
+  intl: intlShape,
+  className: PropTypes.string,
+  updateOnReUpload: PropTypes.func,
+  documentData: PropTypes.object,
+  index: PropTypes.number,
+  channel: PropTypes.string,
+  whatsappDocParams: PropTypes.string,
+  setWhatsappDocParams: PropTypes.func,
+  channelSpecificStyle: PropTypes.bool,
+  docPreview: PropTypes.any,
+};
+
+export default injectIntl(CapDocumentUpload);

package/v2Components/CapDocumentUpload/index.scss

@@ -0,0 +1,63 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+$classPrefix: cap-custom-document-upload;
+
+.#{$classPrefix} {
+  .upload-doc {
+    margin-right: $CAP_SPACE_08;
+  }
+  .image-info-wrapper {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 8px;
+  }
+  .whatsapp-background div {
+    background: #FAFBFC;
+    .ant-upload-list-item .ant-upload-list-item-progress {
+      display: none;
+    } 
+  }
+  .uploaded-container {
+    width: 162px;
+    margin: auto;
+  }
+  .pdf-img-box {
+    width: 162px;
+    height: 80px;
+    overflow: hidden;
+  }
+  .pdf-preview-img {
+      width: 162px;
+  }
+  .pdf-label {
+    width: 162px;
+    height: 44px;
+    background-color: #F4F5F7;
+    display: flex;
+    .cap-image-v2 {
+      margin: 6px 4px;
+      width: 32px;
+      height: 32px;
+    }
+    .pdf-info {
+      margin: 8px 4px;
+      max-width: 114px;
+      .pdf-info-sec {
+        color: #5f6d85;
+        font-size: 8px;
+        font-weight: 400;
+        line-height: 12px;
+      }
+      .pdf-name-div {
+        display: flex;
+        .pdf-name{
+          max-width: 112px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+    }
+  } 
+  
+}

package/v2Components/CapDocumentUpload/messages.js

@@ -0,0 +1,38 @@
+import { defineMessages } from 'react-intl';
+const scope = `creatives.componentsV2.CapDocumentUpload`;
+
+export default defineMessages({
+  whatsappDocSize: {
+    id: `${scope}.whatsappDocSize`,
+    defaultMessage: 'Size upto: 16MB',
+  },
+  uploadComputer: {
+    id: `${scope}.uploadComputer`,
+    defaultMessage: 'Select from computer',
+  },
+  or: {
+    id: `${scope}.or`,
+    defaultMessage: 'OR',
+  },
+  dragAndDrop: {
+    id: `${scope}.dragAndDrop`,
+    defaultMessage: 'Drag and drop document here',
+  },
+  docReUpload: {
+    id: `${scope}.docReUpload`,
+    defaultMessage: 'Reupload',
+  },
+  imageDimenstionDescription: {
+    id: `${scope}.imageDimenstionDescription`,
+    defaultMessage: 'Dimensions upto: {width}px x {height}px',
+  },
+  format: {
+    id: `${scope}.format`,
+    defaultMessage: 'Format: PDF',
+  },
+  docErrorDesc: {
+    id: `${scope}.docErrorDesc`,
+    defaultMessage:
+      'Please upload the document with allowed file extension, size, dimension and aspect ratio',
+  },
+});

package/v2Components/CapVideoUpload/constants.js

@@ -0,0 +1 @@
+export const WHATSAPP = 'WHATSAPP';

package/v2Components/CapVideoUpload/index.js

@@ -20,6 +20,7 @@ import {
   CapNotification,
 } from '@capillarytech/cap-ui-library';
 import {bytes2Size} from '../../utils/common';
+import { WHATSAPP } from './constants';
 import './index.scss';
 
 function CapVideoUpload(props) {
@@ -34,6 +35,8 @@ function CapVideoUpload(props) {
     onVideoUploadUpdateAssestList,
     index,
     videoData,
+    className,
+    channel,
   } = props;
   const [isVideoError, updateVideoErrorMessage] = useState(false);
   const [isVideo, updateVideoStatus] = useState(false);
@@ -53,7 +56,6 @@ function CapVideoUpload(props) {
   } = uploadedAssetList;
 
   const [isTemplateDrawerRequired, updateTemplateDrawerRequirement] = useState(false);
-
   const uploadVideo = useCallback((e, { files }) => {
     if (e) {
       e.preventDefault();
@@ -80,11 +82,12 @@ function CapVideoUpload(props) {
   }, []);
 
   useEffect(() => {
-    if (videoData[`uploadedAssetDataVideo_${index}`] && Object.keys(videoData[`uploadedAssetDataVideo_${index}`]).length) {
-      const metaVideoSrc = get(videoData, `uploadedAssetDataVideo_${index}.metaInfo.secure_file_path`, '');
-      const previewImgUrl = get(videoData, `uploadedAssetDataVideo_${index}.metaInfo.video_file_path_preview`, '');
-      const metaVideoName = get(videoData, `uploadedAssetDataVideo_${index}.metaInfo.name`, '');
-      const metaVideoId = get(videoData, `uploadedAssetDataVideo_${index}.videoIdResponse.fbVideo.id`, '');
+    if (videoData[`uploadedAssetData${index}`] && Object.keys(videoData[`uploadedAssetData${index}`]).length) {
+      const metaVideoSrc = get(videoData, `uploadedAssetData${index}.metaInfo.secure_file_path`, '');
+      const previewImgUrl = get(videoData, `uploadedAssetData${index}.metaInfo.video_file_path_preview`, '');
+      const metaVideoName = get(videoData, `uploadedAssetData${index}.metaInfo.name`, '');
+      const metaVideoId = get(videoData, `uploadedAssetData${index}.videoIdResponse.fbVideo.id`, '');
+      const karixFileHandle = get(videoData, `uploadedAssetData${index}.metaInfo.karixFileHandle`, '');
 
       if (metaVideoSrc && videoSrc === "") {
         onVideoUploadUpdateAssestList(index, {
@@ -92,11 +95,12 @@ function CapVideoUpload(props) {
           videoSrc: metaVideoSrc,
           videoName: metaVideoName,
           videoId: metaVideoId,
+          fileHandle: karixFileHandle,
         },
         );
       }
     }
-  }, [videoData[`uploadedAssetDataVideo_${index}`]]);
+  }, [videoData[`uploadedAssetData${index}`]]);
 
   useEffect(() => {
     if (videoData[`assetUploadingVideo_${index}`] && videoData[`assetUploading`] !== false) {
@@ -127,14 +131,18 @@ function CapVideoUpload(props) {
       type,
     } = data;
     if (incorrectFile || size > videoSize) {
-      updateVideoErrorMessage(formatMessage(messages.videoIncorrectSize));
+      if (channel === WHATSAPP) {
+        updateVideoErrorMessage(formatMessage(messages.whatsappErrorMessage));
+      } else {
+        updateVideoErrorMessage(formatMessage(messages.videoIncorrectSize));
+      }
     } else {
       updateVideoErrorMessage('');
       uploadAsset(
         file,
         type,
         fileParams,
-        `Video_${index}`,
+        index,
       );
     }
   }, [isVideoError]);
@@ -157,16 +165,21 @@ function CapVideoUpload(props) {
     if (!e.target.paused && isPlaying) {
       e.target.pause();
     }
-  }, []);
+  }, [isPlaying]);
 
   const getVideoSection = () => {
     if (!isVideo) {
       return (
         (
           <>
+            {channel === WHATSAPP &&
+              <CapError type="error" className="upload-video-error">
+                {isVideoError}
+              </CapError>
+            }
             <CapUploader.CapDragger
               customRequest={(data) => capUploaderCustomVideoRequest(data)}
-              className="form-builder-dragger"
+              className="form-builder-dragger whatsapp-background"
             >
               <CapHeading className="dragger-title" type="h7">
                 <FormattedMessage {...messages.dragAndDrop} />
@@ -175,12 +188,14 @@ function CapVideoUpload(props) {
                 <FormattedMessage {...messages.or} />
               </CapHeading>
               <CapButton className="dragger-button upload-video" type="secondary">
-                <FormattedMessage {...messages.uploadComputer} />
+                <FormattedMessage {...messages.selectFromComputer} />
               </CapButton>
             </CapUploader.CapDragger>
-            <CapError type="error" className="upload-video-error">
-              {isVideoError}
-            </CapError>
+            {channel !== WHATSAPP &&
+              <CapError type="error" className="upload-video-error">
+                {isVideoError}
+              </CapError>
+            }
           </>
         )
       );
@@ -197,6 +212,7 @@ function CapVideoUpload(props) {
           videoSrc: "",
           videoDuration: "",
           videoId: "",
+          fileHandle: "",
         }
       );
     };
@@ -233,9 +249,9 @@ function CapVideoUpload(props) {
             <FormattedMessage {...messages.imageReUpload} />
           </CapButton>
         </div>
-        <div style={{ display: 'flex' }}>
+        <div style={{ display: 'flex', justifyContent: 'center', margin: '4px' }}>
           <video
-            width="230"
+            width={channel === WHATSAPP ? "300" : "230"}
             poster={previewUrl}
             className="line-image-src"
             key={`${index}-video`}
@@ -248,22 +264,24 @@ 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>
+          { channel !== WHATSAPP &&
+            <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="cap-custom-video-upload">
-        <form encType="multipart/form-data" id={`form`} className="video-form">
+      <div style={style} className={className}>
+        <form encType="multipart/form-data" id={`form`} className={channel !== WHATSAPP && "video-form"}>
           <input
             key={`videoFile`}
             style={{ display: 'none' }}
@@ -279,18 +297,28 @@ function CapVideoUpload(props) {
             onClose={() => updateTemplateDrawerRequirement(false)}
         />
         </form>
-        <CapHeading.CapHeadingSpan type="h6" className="video-description">
-          <FormattedMessage {...messages.videoRatioDescription} />
-
-        </CapHeading.CapHeadingSpan>
-        {' '}
-        <CapHeading.CapHeadingSpan type="h6" className="video-description file-format">
-          <FormattedMessage {...messages.fileFormat} />
+        {channel !== WHATSAPP ?
+        <>
+          <CapHeading.CapHeadingSpan type="h6" className="video-description">
+            <FormattedMessage {...messages.videoRatioDescription} />
+          </CapHeading.CapHeadingSpan>
+          {' '}
+          <CapHeading.CapHeadingSpan type="h6" className="video-description file-format">
+            <FormattedMessage {...messages.fileFormat} />
 
-        </CapHeading.CapHeadingSpan>
-        <CapHeading.CapHeadingSpan type="h6" className="video-description video-details">
-          <FormattedMessage {...messages.videoSizeDescription} values={{size: bytes2Size(videoSize)}} />
-        </CapHeading.CapHeadingSpan>
+          </CapHeading.CapHeadingSpan>
+          <CapHeading.CapHeadingSpan type="h6" className="video-description video-details">
+            <FormattedMessage {...messages.videoSizeDescription} values={{size: bytes2Size(videoSize)}} />
+          </CapHeading.CapHeadingSpan>
+        </> :
+        <>
+          <CapHeading.CapHeadingSpan type="label2" className="">
+            <FormattedMessage {...messages.videoSizeDescription} values={{size: bytes2Size(videoSize)}} />
+          </CapHeading.CapHeadingSpan>
+          <CapHeading.CapHeadingSpan type="label2" className="whatsapp-format">
+            <FormattedMessage {...messages.whatsappFileFormat} />
+          </CapHeading.CapHeadingSpan>
+        </>}
       </div>
     </CapSpin>
   );
@@ -307,6 +335,8 @@ CapVideoUpload.propTypes = {
   onVideoUploadUpdateAssestList: PropTypes.func,
   index: PropTypes.number,
   videoData: PropTypes.object,
+  channel: PropTypes.string,
+  className: PropTypes.string,
 };
 
 export default injectIntl(CapVideoUpload);

package/v2Components/CapVideoUpload/index.scss

@@ -29,4 +29,14 @@ $classPrefix: cap-custom-video-upload;
     .file-format{
         padding-left:9%;
     }
+    .whatsapp-background div {
+        background: #FAFBFC;
+        .ant-upload-list-item .ant-upload-list-item-progress {
+            display: none;
+        }
+    } 
+}
+
+.whatsapp-format {
+    float: right;
 }

package/v2Components/CapVideoUpload/messages.js

@@ -23,9 +23,9 @@ export default defineMessages({
     id: `${scope}.textMessageORLabel`,
     defaultMessage: 'OR',
   },
-  uploadComputer: {
-    id: `${scope}.uploadComputer`,
-    defaultMessage: 'Your computer',
+  selectFromComputer: {
+    id: `${scope}.selectFromComputer`,
+    defaultMessage: 'Select from computer',
   },
   or: {
     id: `${scope}.or`,
@@ -39,6 +39,10 @@ export default defineMessages({
     id: `${scope}.videoIncorrectSize`,
     defaultMessage: 'This file format/size is not supported.',
   },
+  whatsappErrorMessage: {
+    id: `${scope}.whatsappErrorMessage`,
+    defaultMessage: 'Please upload the document with allowed file extension and size',
+  },
   videoRatioDescription: {
     id: `${scope}.videoRatioDescription`,
     defaultMessage: 'Video ratio: 9:16 to 16:9',
@@ -55,4 +59,8 @@ export default defineMessages({
     id: `${scope}.fileFormat`,
     defaultMessage: 'Format: MP4',
   },
+  whatsappFileFormat: {
+    id: `${scope}.whatsappFileFormat`,
+    defaultMessage: 'Format: MP4 and 3gpp (H.264 video codec and AAC audio codec)',
+  },
 });

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -289,6 +289,12 @@
     width: 100%;
     max-height: 123px;
     margin-bottom: 4px;
+    .pdf-img-box {
+      width: 153px;
+    }
+    .pdf-label{
+      width: 153px;
+    }
   }
 }
 

package/v2Components/TemplatePreview/index.js

@@ -740,6 +740,18 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                               alt={formatMessage(messages.previewGenerated)}
                             />
                           )}
+                          {content?.whatsappVideoPreviewImg && (
+                            <CapImage
+                              src={content.whatsappVideoPreviewImg}
+                              className="whatsapp-image"
+                              alt={formatMessage(messages.previewGenerated)}
+                            />
+                          )}
+                          {content?.docPreview && (
+                            <div className="whatsapp-image">
+                              {content?.docPreview}
+                            </div>
+                          )}
                           {content?.templateMsg || ''}
                           {renderWhatsappCtaPreview()}
                         </div>

package/v2Containers/Facebook/Advertisement/index.js

@@ -308,7 +308,7 @@ export const Advertisement = (props) => {
     newCarouselData[activeIndex].subType = value;
     newCarouselData[activeIndex].imageData = {};
     updateCarouselData(newCarouselData);
-    actions.clearFbAdAsset(`Video_${activeIndex}`);
+    actions.clearFbAdAsset(activeIndex);
   }, [carouselData, activeIndex]);