@capillarytech/creatives-library 7.12.51 → 7.12.53

package/v2Components/WhatsappStatusContainer/index.js

@@ -1,58 +1,48 @@
 import React from 'react';
-import { CapRow, CapStatus, CapColoredTag } from '@capillarytech/cap-ui-library';
-import { WHATSAPP } from '../../v2Containers/CreativesContainer/constants';
+import { get } from 'lodash';
 import {
-    CATEGORY as WHATSAPP_CATEGORY,
-    STATUS as WHATSAPP_STATUS,
-} from '../../v2Containers/Whatsapp/constants';
-import { getWhatsappCategory, getWhatsappStatus } from '../../v2Containers/Whatsapp/utils';
+  CapRow,
+  CapStatus,
+  CapColoredTag,
+} from '@capillarytech/cap-ui-library';
+import {
+  getWhatsappCategory,
+  getWhatsappStatus,
+} from '../../v2Containers/Whatsapp/utils';
 import './_whatsappStatusContainer.scss';
 
 export const WhatsappStatusContainer = (props) => {
+  const {
+    status = '',
+    category = '',
+    hostName = '',
+  } = get(props, 'template.versions.base.content.whatsapp', {});
+  const categoryObj = getWhatsappCategory(category, hostName) || {};
+  const {
+    label: categoryLabel,
+    tagColor: categoryTagColor,
+    tagTextColor: categoryTextColor,
+  } = categoryObj;
+  return (
+    <CapRow type="flex" align="middle" className="whatsapp-status-container">
+      <CapStatus
+        type={status}
+        text={getWhatsappStatus(status)?.label}
+        labelType="label3"
+      />
+      {categoryLabel ? (
+        <CapColoredTag
+          tagColor={categoryTagColor}
+          tagTextColor={categoryTextColor}
+          tagHeight="20px"
+          tagFontSize="12px"
+          className="whatsapp-category-tag"
+        >
+          {categoryLabel}
+        </CapColoredTag>
+      ) : null}
+    </CapRow>
+  );
+};
 
-    const { template } = props;
-
-    const {
-        versions: {
-          base: {
-            content: {
-                [WHATSAPP.toLowerCase()]: {
-                [WHATSAPP_STATUS]: status,
-                [WHATSAPP_CATEGORY]: category,
-              } = {},
-            } = {},
-          } = {},
-        } = {},
-    } = template;
-
-    const categoryObj = getWhatsappCategory(category) || {};
-    const {
-        label: categoryLabel,
-        tagColor: categoryTagColor,
-        tagTextColor: categoryTextColor,
-    } = categoryObj;
-    return (
-        <CapRow type="flex" align="middle" className="whatsapp-status-container">
-            <CapStatus
-                type={status}
-                text={getWhatsappStatus(status)?.label}
-                labelType="label3"
-            />
-            {
-            categoryLabel ? (
-                <CapColoredTag
-                    tagColor={categoryTagColor}
-                    tagTextColor={categoryTextColor}
-                    tagHeight="20px"
-                    tagFontSize="12px"
-                    className="whatsapp-category-tag"
-                >
-                    {categoryLabel}
-                </CapColoredTag>
-            ) : null
-            }
-        </CapRow>
-    )
-}
-
-export default WhatsappStatusContainer;
+export default WhatsappStatusContainer;

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -414,7 +414,6 @@ export function SlideBoxContent(props) {
         content={getChannelPreviewContent(templateData)}
         viberBrandName={selectedAccount || ""}
         viberAccountName={(selectedAccount || "")[0]}
-        whatsappAccountName={selectedAccount}
         unicodeEnabled={get(templateData, `versions.base['unicode-validity']`)}
         channel={(templateData.type || '').toLowerCase()}
         charCounterEnabled={channel === constants.SMS}

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap

@@ -725,14 +725,12 @@ exports[`Test SlideBoxContent container Should render correct component for what
             "url": "https://fast.com/",
           },
         ],
-        "templateMsg": <React.Fragment>
-          <CapLabel
-            type="label5"
-          >
-            1234567890
+        "templateMsg": <CapLabel
+          type="label5"
+        >
+          1234567890
 Click {{unsubscribe}} to unsubscribe
-          </CapLabel>
-        </React.Fragment>,
+        </CapLabel>,
       }
     }
     showCount={true}

package/v2Containers/Line/Container/ImageCarousel/index.js

@@ -72,21 +72,20 @@ export const LineImageCarousel = (props) => {
 	const [errorTitle, updateErrorTitle] = useState(false);
 
 	useEffect(() => {
-		const { messageTitle = '', type, template, altText } = content;
+		const { messageTitle = '', type, template, altText, contents } = content;
 		if ([TEMPLATE, FLEX].includes(type)) {
-			updateCreateNew(!isFullMode ? !!template : true);
+			updateCreateNew(!isFullMode ? !!(template || contents) : true);
 			if (messageTitle) {
 				updateTextMessageTitle(messageTitle);
 			}
 			if (altText) {
 				updateTitle(altText);
 			}
-			if (template) {
+			if (template || contents) {
 			  	const validCarouselImages = [];
-				if (template?.type === CAROUSEL) { 
-					const { contents = [] } = template;
-						contents.forEach((content = {}, index) => {
-							const {
+				if (template?.type === CAROUSEL || contents?.type === CAROUSEL ) {
+                    const { contents: innerContents = [] } = contents || template || [];
+                    	    innerContents.forEach((content = {}, index) => {							const {
 								footer: {
 									contents: [{
 										action: {

package/v2Containers/Line/Container/index.js

@@ -172,6 +172,7 @@ export const LineContainer = ({
                 assetType,
                 selectedTemplate,
                 template,
+                contents,
                 altText,
                 video,
                 videoName,
@@ -189,6 +190,7 @@ export const LineContainer = ({
                     assetType,
                     selectedTemplate,
                     template,
+                    contents,
                     altText,
                     video,
                     videoName,
@@ -573,7 +575,7 @@ export const LineContainer = ({
                 });
                 contentsLocal.contents = imageContents;
                 contentsLocal.type = "carousel";
-                messageData.template = contentsLocal;
+                messageData.contents = contentsLocal;
                 messageData.altText = altText;
             }
             if (videoSrc) {