@capillarytech/creatives-library 7.14.10 → 7.14.11

package/v2Containers/Whatsapp/index.js

@@ -58,6 +58,7 @@ import {
   INITIAL_CTA_DATA,
   ALLOWED_IMAGE_EXTENSIONS_REGEX,
   WHATSAPP_IMG_SIZE,
+  HOST_TWILIO,
   HOST_KARIX,
   ALLOWED_EXTENSIONS_VIDEO_REGEX,
   ALLOWED_EXTENSIONS_DOCUMENT_REGEX,
@@ -131,8 +132,10 @@ 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 [whatsappVideoSrcAndPreview, setWhatsappVideoSrcAndPreview] = useState({
+    whatsappVideoSrc: '',
+    whatsappVideoPreviewImg: '',
+  });
   const [whatsappDocSource, setWhatsappDocSource] = useState('');
   const [whatsappDocParams, setWhatsappDocParams] = useState({});
   const [karixFileHandle, setKarixFileHandle] = useState('');
@@ -239,7 +242,10 @@ export const Whatsapp = (props) => {
       setTemplateLanguage(languages[0]?.language);
       setTemplateMediaType(mediaType);
       setWhatsappImageSrc(imageUrl);
-      setWhatsappVideoSrc(videoUrl);
+      setWhatsappVideoSrcAndPreview({
+        whatsappVideoSrc: videoUrl,
+        whatsappVideoPreviewImg: videoPreviewImg,
+      });
       setWhatsappDocSource(documentUrl);
       setWhatsappDocParams(whatsappDocParams);
       updateAssetList({
@@ -248,7 +254,6 @@ export const Whatsapp = (props) => {
         videoSrc: videoUrl,
         fileHandle: karixFileHandle,
       });
-      setWhatsappVideoPreviewImg(videoPreviewImg);
       setKarixFileHandle(karixFileHandle);
       setButtonType(btnType);
       if (btnType === WHATSAPP_BUTTON_TYPES.CTA && buttons.length > 0) {
@@ -478,7 +483,7 @@ export const Whatsapp = (props) => {
       label: (
         <CapTooltip
           title={
-            host !== HOST_KARIX
+            host === HOST_TWILIO
               ? formatMessage(messages.disabledFeatureTooltip)
               : ''
           }
@@ -486,35 +491,35 @@ export const Whatsapp = (props) => {
           {formatMessage(messages.mediaImage)}
         </CapTooltip>
       ),
-      disabled: host !== HOST_KARIX,
+      disabled: host === HOST_TWILIO,
     },
     {
       value: WHATSAPP_MEDIA_TYPES.VIDEO,
       label: (
         <CapTooltip
           title={
-          host !== HOST_KARIX
+          host === HOST_TWILIO
             ? formatMessage(messages.disabledFeatureTooltip)
             : ''
         }>
           {formatMessage(messages.mediaVideo)}
         </CapTooltip>
       ),
-      disabled: host !== HOST_KARIX,
+      disabled: host === HOST_TWILIO,
     },
     {
       value: WHATSAPP_MEDIA_TYPES.DOCUMENT,
       label: (
         <CapTooltip
           title={
-          host !== HOST_KARIX
+          host === HOST_TWILIO
             ? formatMessage(messages.disabledFeatureTooltip)
             : ''
         }>
           {formatMessage(messages.mediaDocument)}
         </CapTooltip>
       ),
-      disabled: host !== HOST_KARIX,
+      disabled: host === HOST_TWILIO,
     },
   ];
 
@@ -724,13 +729,15 @@ export const Whatsapp = (props) => {
 
   const setUpdateWhatsappVideoSrc = useCallback(
     (index, data) => {
-      setWhatsappVideoSrc(data?.videoSrc);
+      setWhatsappVideoSrcAndPreview({
+        whatsappVideoSrc: data?.videoSrc,
+        whatsappVideoPreviewImg: data?.previewUrl,
+      });
       setKarixFileHandle(data?.fileHandle);
-      setWhatsappVideoPreviewImg(data?.previewUrl);
       updateAssetList(data);
       actions.clearWhatsappAsset(0);
     },
-    [whatsappVideoSrc],
+    [whatsappVideoSrcAndPreview?.whatsappVideoSrc],
   );
 
   const setUpdateWhatsappDocSrc = useCallback(
@@ -777,6 +784,7 @@ export const Whatsapp = (props) => {
       videoData={editData}
       className="cap-custom-video-upload"
       channel={WHATSAPP}
+      errorMessage={formatMessage(messages.videoErrorMessage)}
     />
   );
   const docPreview = ( whatsappDocSource !== '' &&
@@ -799,6 +807,8 @@ export const Whatsapp = (props) => {
       setWhatsappDocParams={setWhatsappDocParams}
       channel={WHATSAPP}
       docPreview={docPreview}
+      supportedMaxSize={'16 MB'}
+      supportedFormat={'PDF'}
     />
   );
 
@@ -938,49 +948,63 @@ export const Whatsapp = (props) => {
       };
     });
 
-  const createPayload = () => ({
-    name: templateName,
-    versions: {
-      base: {
-        content: {
-          whatsapp: {
-            category: templateCategory,
-            languages: [
-              {
-                language: templateLanguage,
-                content: getPayloadContent(),
-              },
-            ],
-            ...(isBtnTypeCta && {
-              buttonType,
-              buttons: getCtaPayload(),
-            }),
-            mediaType: templateMediaType,
-            ...(isMediaTypeImage && {
-              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 : {},
-            templateEditor: !isFullMode && tempMsgArray.join(''),
-            accountId,
-            accessToken,
-            hostName: host,
+  const createPayload = () => {
+    let mediaParams = {};
+    switch (templateMediaType) {
+      case WHATSAPP_MEDIA_TYPES.IMAGE:
+        mediaParams = {
+          imageUrl: getCdnUrl({url: whatsappImageSrc, channelName: WHATSAPP }),
+          karixFileHandle,
+        };
+        break;
+      case WHATSAPP_MEDIA_TYPES.VIDEO:
+        mediaParams = {
+          videoUrl: getCdnUrl({url: whatsappVideoSrcAndPreview?.whatsappVideoSrc, channelName: WHATSAPP }),
+          videoPreviewImg: getCdnUrl({url: whatsappVideoSrcAndPreview?.whatsappVideoPreviewImg, channelName: WHATSAPP}),
+          karixFileHandle,
+        };
+        break;
+      case WHATSAPP_MEDIA_TYPES.DOCUMENT:
+        mediaParams = {
+          documentUrl: getCdnUrl({url: whatsappDocSource, channelName: WHATSAPP}),
+          whatsappDocParams,
+          karixFileHandle,
+        };
+        break;
+      default:
+        break;
+    }
+    return ({
+      name: templateName,
+      versions: {
+        base: {
+          content: {
+            whatsapp: {
+              category: templateCategory,
+              languages: [
+                {
+                  language: templateLanguage,
+                  content: getPayloadContent(),
+                },
+              ],
+              ...(isBtnTypeCta && {
+                buttonType,
+                buttons: getCtaPayload(),
+              }),
+              mediaType: templateMediaType,
+              ...mediaParams,
+              varMapped: !isFullMode ? varMap : {},
+              templateEditor: !isFullMode && tempMsgArray.join(''),
+              accountId,
+              accessToken,
+              hostName: host,
+            },
           },
         },
       },
-    },
-    type: WHATSAPP,
-  });
+      type: WHATSAPP,
+    });
+  };
 
   const actionCallback = ({ errorMessage }) => {
     if (!errorMessage) {
@@ -1077,6 +1101,14 @@ export const Whatsapp = (props) => {
     </>
   );
 
+  const renderMediaComponent = () => (
+    <>
+      {isMediaTypeImage && renderImageComponent()}
+      {isMediaTypeVideo && renderVideoComonent()}
+      {isMediaTypeDoc && renderDocumentComponent()}
+    </>
+  );
+
   const createModeContent = (
     <>
       {/* template name */}
@@ -1128,9 +1160,7 @@ export const Whatsapp = (props) => {
       />
       {/* template media type */}
       {renderMediaSection()}
-      {isMediaTypeImage && renderImageComponent()}
-      {isMediaTypeVideo && renderVideoComonent()}
-      {isMediaTypeDoc && renderDocumentComponent()}
+      {renderMediaComponent()}
       {/* template message create flow */}
       <CapHeader
         className={`${isMediaTypeImage ? 'whatsapp-heading-spacing' : ''}`}
@@ -1363,10 +1393,7 @@ export const Whatsapp = (props) => {
       {/* template media type */}
       {renderLabel('mediaLabel')}
       <CapLabel type="label15">{capitalizeString(templateMediaType)}</CapLabel>
-      {isMediaTypeImage && renderImageComponent()}
-      {isMediaTypeVideo && renderVideoComonent()}
-      {isMediaTypeDoc && renderDocumentComponent()}
-
+      {renderMediaComponent()}
       <CapRow className="whatsapp-render-heading">
         <CapHeader
           title={
@@ -1450,19 +1477,27 @@ export const Whatsapp = (props) => {
         )}
       </>
     );
+    let mediaPreview = {};
+    switch (templateMediaType) {
+      case WHATSAPP_MEDIA_TYPES.IMAGE:
+        mediaPreview = {whatsappImageSrc};
+        break;
+      case WHATSAPP_MEDIA_TYPES.VIDEO:
+        mediaPreview = {
+          whatsappVideoPreviewImg: whatsappVideoSrcAndPreview?.whatsappVideoPreviewImg,
+        };
+        break;
+      case WHATSAPP_MEDIA_TYPES.DOCUMENT:
+        mediaPreview = {docPreview};
+        break;
+      default:
+        break;
+    }
     return (
       <TemplatePreview
         channel={WHATSAPP}
         content={{
-          ...(isMediaTypeImage && {
-            whatsappImageSrc,
-          }),
-          ...(isMediaTypeVideo && {
-            whatsappVideoPreviewImg,
-          }),
-          ...(isMediaTypeDoc && {
-            docPreview,
-          }),
+          ...mediaPreview,
           templateMsg,
           ...(isBtnTypeCta && {
             ctaData,

package/v2Containers/Whatsapp/messages.js

@@ -296,6 +296,10 @@ export default defineMessages({
     id: `${prefix}.optional`,
     defaultMessage: '(Optional)',
   },
+  videoErrorMessage: {
+    id: `${prefix}.videoErrorMessage`,
+    defaultMessage: 'Please upload the video with allowed file extension, size, dimension and aspect ratio',
+  },
 
   afrikaans: {
     id: `${prefix}.afrikaans`,

package/v2Containers/Whatsapp/styles.scss

@@ -1,3 +1,4 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 .pdf-img-box {
   width: 162px;
   height: 80px;
@@ -9,7 +10,7 @@
 .pdf-label {
   width: 162px;
   height: 44px;
-  background-color: #F4F5F7;
+  background-color: $CAP_G09;
   display: flex;
   .cap-image-v2 {
     margin: 6px 4px;
@@ -20,7 +21,7 @@
     margin: 8px 4px;
     max-width: 114px;
     .pdf-info-sec {
-      color: #5f6d85;
+      color: $CAP_G04;
       font-size: 8px;
       font-weight: 400;
       line-height: 12px;