@capillarytech/creatives-library 7.14.7 → 7.14.8

package/v2Containers/Templates/_templates.scss

@@ -593,6 +593,22 @@
   max-height: 123px;
   margin-bottom: 4px;
 }
+.whatsapp-doc {
+  width: 100%;
+  max-height: 123px;
+  margin-bottom: 4px;
+  .pdf-img-box {
+    width: 100%;
+    margin: auto;
+    .pdf-preview-img {
+      width: 100%;
+    }
+  }
+  .pdf-label{
+    width: 100%;
+    margin: auto;
+  }
+}
 .whatsapp-rcs-template-name {
   max-width: 170px;
   overflow: hidden;

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} = getWhatsappContent(template);
+          const { whatsappImageSrc = '', templateMsg, docPreview} = getWhatsappContent(template);
           templateData.title = (
             <CapRow>
               <CapLabel className="whatsapp-rcs-template-name">{template?.name}</CapLabel>
@@ -1079,6 +1079,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               {whatsappImageSrc && (
                 <CapImage src={whatsappImageSrc} className="whatsapp-image" />
               )}
+              <div className="whatsapp-doc">{docPreview}</div>
               <span
                 className={`${
                   whatsappImageSrc

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

@@ -786,6 +786,9 @@ 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"
+                          />
                           <span
                             className="whatsapp-message-with-image"
                           >
@@ -1220,6 +1223,9 @@ 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"
+                          />
                           <span
                             className="whatsapp-message-with-image"
                           >
@@ -1654,6 +1660,9 @@ 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"
+                          />
                           <span
                             className="whatsapp-message-with-image"
                           >

package/v2Containers/Whatsapp/constants.js

@@ -179,9 +179,14 @@ export const INITIAL_CTA_DATA = [
 ];
 
 export const ALLOWED_IMAGE_EXTENSIONS_REGEX = /\.(jpe?g|png)$/i;
+export const ALLOWED_EXTENSIONS_VIDEO_REGEX = (/\.(mp4|3gpp)$/i);
+export const ALLOWED_EXTENSIONS_DOCUMENT_REGEX = (/\.(pdf)$/i);
 export const WHATSAPP_IMG_SIZE = 5000000; // 5MB
+export const WHATSAPP_VIDEO_SIZE = 16000000; // 16MB
+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 LANGUAGE_OPTIONS = [
   {

package/v2Containers/Whatsapp/index.js

@@ -59,6 +59,10 @@ import {
   ALLOWED_IMAGE_EXTENSIONS_REGEX,
   WHATSAPP_IMG_SIZE,
   HOST_KARIX,
+  ALLOWED_EXTENSIONS_VIDEO_REGEX,
+  ALLOWED_EXTENSIONS_DOCUMENT_REGEX,
+  WHATSAPP_DOCUMENT_SIZE,
+  WHATSAPP_VIDEO_SIZE,
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
@@ -75,6 +79,9 @@ import {
   WEBSITE,
 } from '../../v2Components/CapWhatsappCTA/constants';
 import { getCdnUrl } from '../../utils/cdnTransformation';
+import CapVideoUpload from '../../v2Components/CapVideoUpload';
+import CapDocumentUpload from '../../v2Components/CapDocumentUpload';
+import { getWhatsappDocPreview } from './utils';
 
 let varMap = {};
 let editContent = {};
@@ -124,7 +131,12 @@ export const Whatsapp = (props) => {
   const [spin, setSpin] = useState(false);
   const [unsubscribeRequired, setUnsubscribeRequired] = useState(false);
   const [whatsappImageSrc, setWhatsappImageSrc] = useState('');
+  const [whatsappVideoSrc, setWhatsappVideoSrc] = useState('');
+  const [whatsappVideoPreviewImg, setWhatsappVideoPreviewImg] = useState('');
+  const [whatsappDocSource, setWhatsappDocSource] = useState('');
+  const [whatsappDocParams, setWhatsappDocParams] = useState({});
   const [karixFileHandle, setKarixFileHandle] = useState('');
+  const [assetList, updateAssetList] = useState([]);
   //for edit only
   const [isEditFlow, setEditFlow] = useState(false);
   const [templateDate, setTemplateDate] = useState('');
@@ -144,6 +156,8 @@ export const Whatsapp = (props) => {
 
   const isBtnTypeCta = buttonType === WHATSAPP_BUTTON_TYPES.CTA;
   const isMediaTypeImage = templateMediaType === WHATSAPP_MEDIA_TYPES.IMAGE;
+  const isMediaTypeVideo = templateMediaType === WHATSAPP_MEDIA_TYPES.VIDEO;
+  const isMediaTypeDoc = templateMediaType === WHATSAPP_MEDIA_TYPES.DOCUMENT;
   const WhatsappFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
@@ -211,9 +225,13 @@ export const Whatsapp = (props) => {
         languages = [],
         mediaType = WHATSAPP_MEDIA_TYPES.TEXT,
         imageUrl = '',
+        videoUrl = '',
+        documentUrl = '',
         karixFileHandle = '',
         buttonType: btnType = WHATSAPP_BUTTON_TYPES.NONE,
         buttons = [],
+        videoPreviewImg = '',
+        whatsappDocParams = {},
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
@@ -221,6 +239,16 @@ export const Whatsapp = (props) => {
       setTemplateLanguage(languages[0]?.language);
       setTemplateMediaType(mediaType);
       setWhatsappImageSrc(imageUrl);
+      setWhatsappVideoSrc(videoUrl);
+      setWhatsappDocSource(documentUrl);
+      setWhatsappDocParams(whatsappDocParams);
+      updateAssetList({
+        ...assetList,
+        previewUrl: videoPreviewImg,
+        videoSrc: videoUrl,
+        fileHandle: karixFileHandle,
+      });
+      setWhatsappVideoPreviewImg(videoPreviewImg);
       setKarixFileHandle(karixFileHandle);
       setButtonType(btnType);
       if (btnType === WHATSAPP_BUTTON_TYPES.CTA && buttons.length > 0) {
@@ -463,20 +491,30 @@ export const Whatsapp = (props) => {
     {
       value: WHATSAPP_MEDIA_TYPES.VIDEO,
       label: (
-        <CapTooltip title={formatMessage(messages.disabledFeatureTooltip)}>
+        <CapTooltip
+          title={
+          host !== HOST_KARIX
+            ? formatMessage(messages.disabledFeatureTooltip)
+            : ''
+        }>
           {formatMessage(messages.mediaVideo)}
         </CapTooltip>
       ),
-      disabled: true,
+      disabled: host !== HOST_KARIX,
     },
     {
       value: WHATSAPP_MEDIA_TYPES.DOCUMENT,
       label: (
-        <CapTooltip title={formatMessage(messages.disabledFeatureTooltip)}>
+        <CapTooltip
+          title={
+          host !== HOST_KARIX
+            ? formatMessage(messages.disabledFeatureTooltip)
+            : ''
+        }>
           {formatMessage(messages.mediaDocument)}
         </CapTooltip>
       ),
-      disabled: true,
+      disabled: host !== HOST_KARIX,
     },
   ];
 
@@ -684,6 +722,31 @@ export const Whatsapp = (props) => {
     setKarixFileHandle('');
   }, [whatsappImageSrc]);
 
+  const setUpdateWhatsappVideoSrc = useCallback(
+    (index, data) => {
+      setWhatsappVideoSrc(data?.videoSrc);
+      setKarixFileHandle(data?.fileHandle);
+      setWhatsappVideoPreviewImg(data?.previewUrl);
+      updateAssetList(data);
+      actions.clearWhatsappAsset(0);
+    },
+    [whatsappVideoSrc],
+  );
+
+  const setUpdateWhatsappDocSrc = useCallback(
+    (filePath, fileHandle) => {
+      setWhatsappDocSource(filePath);
+      setKarixFileHandle(fileHandle);
+      actions.clearWhatsappAsset(0);
+    },
+    [whatsappDocSource],
+  );
+
+  const updateOnWhatsappDocReUpload = useCallback(() => {
+    setWhatsappDocSource('');
+    setKarixFileHandle('');
+  }, [whatsappDocSource]);
+
   const renderImageComponent = () => (
     <CapImageUpload
       style={{ paddingTop: '20px' }}
@@ -702,6 +765,44 @@ export const Whatsapp = (props) => {
     />
   );
 
+  const renderVideoComonent = () => (
+    <CapVideoUpload
+      index={0}
+      allowedExtensionsRegex={ALLOWED_EXTENSIONS_VIDEO_REGEX}
+      videoSize={WHATSAPP_VIDEO_SIZE}
+      isFullMode={isFullMode}
+      uploadAsset={uploadWhatsappImage}
+      uploadedAssetList={assetList}
+      onVideoUploadUpdateAssestList={setUpdateWhatsappVideoSrc}
+      videoData={editData}
+      className="cap-custom-video-upload"
+      channel={WHATSAPP}
+    />
+  );
+  const docPreview = ( whatsappDocSource !== '' &&
+    getWhatsappDocPreview(whatsappDocParams)
+  );
+  const renderDocumentComponent = () => (
+    <CapDocumentUpload
+      style={{ paddingTop: '20px' }}
+      allowedExtensionsRegex={ALLOWED_EXTENSIONS_DOCUMENT_REGEX}
+      documentSize={WHATSAPP_DOCUMENT_SIZE}
+      uploadAsset={uploadWhatsappImage}
+      isFullMode={isFullMode}
+      documentSrc={whatsappDocSource}
+      updateDocumentSrc={setUpdateWhatsappDocSrc}
+      updateOnReUpload={updateOnWhatsappDocReUpload}
+      index={0}
+      className="cap-custom-document-upload"
+      key="whatsapp-uploaded-document"
+      documentData={editData}
+      whatsappDocParams={whatsappDocParams}
+      setWhatsappDocParams={setWhatsappDocParams}
+      channel={WHATSAPP}
+      docPreview={docPreview}
+    />
+  );
+
   const onTemplateNameChange = ({ target: { value } }) => {
     setTemplateName(value);
     templateNameErrorHandler(value);
@@ -857,7 +958,17 @@ export const Whatsapp = (props) => {
             }),
             mediaType: templateMediaType,
             ...(isMediaTypeImage && {
-              imageUrl: getCdnUrl({url: whatsappImageSrc, channelName: 'WHATSAPP',}),
+              imageUrl: getCdnUrl({url: whatsappImageSrc, channelName: 'WHATSAPP' }),
+              karixFileHandle,
+            }),
+            ...(isMediaTypeVideo && {
+              videoUrl: getCdnUrl({url: whatsappVideoSrc, channelName: 'WHATSAPP'}),
+              karixFileHandle,
+              videoPreviewImg: getCdnUrl({url: whatsappVideoPreviewImg, channelName: 'WHATSAPP'}),
+            }),
+            ...(isMediaTypeDoc && {
+              documentUrl: getCdnUrl({url: whatsappDocSource, channelName: 'WHATSAPP'}),
+              whatsappDocParams,
               karixFileHandle,
             }),
             varMapped: !isFullMode ? varMap : {},
@@ -1019,6 +1130,8 @@ export const Whatsapp = (props) => {
       {/* template media type */}
       {renderMediaSection()}
       {isMediaTypeImage && renderImageComponent()}
+      {isMediaTypeVideo && renderVideoComonent()}
+      {isMediaTypeDoc && renderDocumentComponent()}
       {/* template message create flow */}
       <CapHeader
         className={`${isMediaTypeImage ? 'whatsapp-heading-spacing' : ''}`}
@@ -1252,6 +1365,8 @@ export const Whatsapp = (props) => {
       {renderLabel('mediaLabel')}
       <CapLabel type="label15">{capitalizeString(templateMediaType)}</CapLabel>
       {isMediaTypeImage && renderImageComponent()}
+      {isMediaTypeVideo && renderVideoComonent()}
+      {isMediaTypeDoc && renderDocumentComponent()}
 
       <CapRow className="whatsapp-render-heading">
         <CapHeader
@@ -1343,6 +1458,12 @@ export const Whatsapp = (props) => {
           ...(isMediaTypeImage && {
             whatsappImageSrc,
           }),
+          ...(isMediaTypeVideo && {
+            whatsappVideoPreviewImg,
+          }),
+          ...(isMediaTypeDoc && {
+            docPreview,
+          }),
           templateMsg,
           ...(isBtnTypeCta && {
             ctaData,
@@ -1444,4 +1565,4 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: true,
-});
+});

package/v2Containers/Whatsapp/index.scss

@@ -132,4 +132,21 @@
       color: $FONT_COLOR_05;
     }
   }
+  .cap-custom-video-upload {
+    padding-top: 20px;
+    .dragger-button.re-upload {
+      top: -175px;
+      position: relative;
+      left: 525px;
+      color: $FONT_COLOR_05;
+    }
+  }
+  .cap-custom-document-upload {
+    .dragger-button.re-upload {
+      top: -150px;
+      position: relative;
+      left: 525px;
+      color: $FONT_COLOR_05;
+    }
+  }  
 }

package/v2Containers/Whatsapp/styles.scss

@@ -0,0 +1,38 @@
+.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;
+      }
+    }
+  }
+}