@capillarytech/creatives-library 7.12.41 → 7.12.43

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

@@ -10,6 +10,7 @@ import CapDrawer from '@capillarytech/cap-ui-library/CapDrawer';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
+import isEmpty from 'lodash/isEmpty';
 import LineDrawer from '../Drawer';
 import style from './style';
 import { CAP_G06, FONT_COLOR_01, FONT_COLOR_02, CAP_SPACE_08, CAP_WHITE, CAP_SPACE_24, CAP_SPACE_04 } from '@capillarytech/cap-ui-library/styled/variables';
@@ -52,8 +53,9 @@ export const LineImageCarousel = (props) => {
 	const defaultCarouselContent = {
 		messageTitle: '',
 		originalContentUrl: '',
+		aspectRatio: '',
 		previewImageUrl: '',
-		type: 'image_carousel',
+		type: 'carousel',
 	};
 
 	const [carouselImages, updateCarouselImage] = useState([defaultCarouselContent]);
@@ -77,31 +79,66 @@ export const LineImageCarousel = (props) => {
 				updateTitle(altText);
 			}
 			if (template) {
-				const { columns } = template;
-				if (columns && columns.length) {
-					const validCarouselImages = [];
-					columns.forEach((column = {}, index) => {
-						const {
-							action: {
-								label,
-								text,
-								type,
-								uri,
-							} = {},
-							imageUrl,
-						} = column;
-
-						validCarouselImages.push({
-							activeIndex: index,
-							originalContentUrl: imageUrl,
-							selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
-							actionContent: text || uri,
-							actionLabel: label,
-							type: 'image_carousel',
-						});
-					})
-					updateCarouselImage(validCarouselImages);
+			  	const validCarouselImages = [];
+				if (template.type != undefined && template.type === "carousel") { 
+					const { contents = [] } = template;
+					if(contents && contents.length) {					 
+						contents.forEach((content = {}, index1) => {
+							const {
+								footer: {
+									contents: [{
+										action: {
+											text = '',
+											label = '',
+											type: buttonType = '',
+											uri,
+										} = {},
+									}] = [],
+								} = {},
+								hero: {
+									url = '',
+									aspectRatio = '',
+								} = {},
+							} = content || {};
+							validCarouselImages.push({
+								activeIndex: index1,
+								originalContentUrl: url,
+								aspectRatio,
+								selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
+								actionContent: text || uri,
+								actionLabel: label,
+								type: 'carousel',
+							});
+						})					
+					}
+				} else {
+					const { columns } = template;
+					if (columns && columns.length) {
+						columns.forEach((column = {}, index) => {
+							const {
+								action: {
+									label,
+									text,
+									type,
+									uri,
+								} = {},
+								imageUrl,
+								aspectRatio,
+							} = column;
+
+							validCarouselImages.push({
+								activeIndex: index,
+								originalContentUrl: imageUrl,
+								selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
+								actionContent: text || uri,
+								actionLabel: label,
+								aspectRatio,
+								type: 'carousel',
+							});
+						})
+					}
 				}
+				updateCarouselImage(validCarouselImages);
 			}
 		}
 	}, [content]);
@@ -111,8 +148,9 @@ export const LineImageCarousel = (props) => {
 		const existingTitle = inheritedTitle !== undefined ? inheritedTitle : altText;
 		let isErrorIndex;
 		const columns = [];
-		(newCarouselImages || carouselImages).forEach(({
+		(newCarouselImages || []).forEach(({
 			originalContentUrl,
+			aspectRatio = '1:1',
 			selectedActionType,
 			actionLabel,
 			actionContent,
@@ -125,6 +163,7 @@ export const LineImageCarousel = (props) => {
 				: ((!originalContentUrl || !selectedActionType || actionContentErrorMessage || actionLabelErrorMessage || !actionContent) && activeIndex);
 			columns.push({
 				imageUrl: originalContentUrl,
+				aspectRatio,
 				action: {
 					type: selectedActionType ? (selectedActionType === TEXT_ACTION_TYPE ? MESSAGE_ACTION_TYPE : URL_ACTION_TYPE) : '',
 					label: actionLabel,
@@ -344,19 +383,32 @@ export const LineImageCarousel = (props) => {
 			const {
 				content: {
 					messages: [{
+						contents: imageCarouselContents,
 						template: imageCarouselTemplate,
 					}] = [{}],
 				} = {},
 			} = template.versions.base;
-			templateData.url = (imageCarouselTemplate ? get(imageCarouselTemplate, 'columns.0.imageUrl', '') : '');
-			templateData.title = template.name;
-			templateData.key = template.name;
+			let isNewLineFormat = false;
+			if(!imageCarouselTemplate  && imageCarouselContents) {
+				isNewLineFormat = true;
+			}
+			if(isNewLineFormat) {
+				templateData.url = (imageCarouselContents ? get(imageCarouselContents, 'contents.0.hero.url', '') : '');
+				templateData.title = template.name;
+				templateData.key = template.name;
+			
+			} else {
+				templateData.url = (imageCarouselTemplate ? get(imageCarouselTemplate, 'columns.0.imageUrl', '') : '');
+				templateData.title = template.name;
+				templateData.key = template.name;
+			}
+			
 			templateData.hoverOption = (
 				<CapButton onClick={() => onTemplateSelection(template)}>
 					<FormattedMessage {...messages.select} />
 				</CapButton>
 			);
-			if (imageCarouselTemplate) {
+			if (imageCarouselTemplate || imageCarouselContents) {
 				cardDataList.push(templateData);
 			}
 		});
@@ -383,32 +435,75 @@ export const LineImageCarousel = (props) => {
 
 	const onTemplateSelection = (templateData) => {
 		const template = get(templateData, 'versions.base.content.messages[0].template', {});
+		const contents1 = get(templateData, 'versions.base.content.messages[0].contents', {});
 		const altText = get(templateData, 'versions.base.content.messages[0].altText', '');
-		const { columns } = template;
-		if (columns && columns.length) {
-			const validCarouselImages = [];
-			columns.forEach((column = {}, index) => {
-				const {
-					action: {
-						label,
-						text,
-						type,
-						uri,
-					} = {},
-					imageUrl,
-				} = column;
-
-				validCarouselImages.push({
-					activeIndex: index,
-					originalContentUrl: imageUrl,
-					selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
-					actionContent: text || uri,
-					actionLabel: label,
-					type: 'image_carousel',
-				});
-			})
-			updateCarouselImage(validCarouselImages);
+		let isNewLineFormat = false;
+		const validCarouselImages = [];
+		
+		if (!isEmpty(contents1) && isEmpty(template)) {
+			isNewLineFormat = true;
 		}
+		if (isNewLineFormat) {
+			const { contents = [] } = contents1;
+		
+			if(contents && contents.length) {	
+				contents.forEach((content = {}, index1) => {
+					const {
+						footer: {
+							contents: [{
+								action: {
+									text = '',
+									label = '',
+									type: buttonType = '',
+									uri,
+								} = {},
+							}] = [],
+						} = {},
+						hero: {
+							url = '',
+							aspectRatio = '',
+						} = {},
+					} = content || {};
+					validCarouselImages.push({
+						activeIndex: index1,
+						originalContentUrl: url,
+						aspectRatio,
+						selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
+						actionContent: text || uri,
+						actionLabel: label,
+						type: 'carousel',
+					});
+				})					
+			}		
+		
+		} else {
+			const { columns } = template;
+			if (columns && columns.length) {
+				columns.forEach((column = {}, index) => {
+					const {
+						action: {
+							label,
+							text,
+							type,
+							uri,
+						} = {},
+						imageUrl,
+					} = column;
+
+					validCarouselImages.push({
+						activeIndex: index,
+						originalContentUrl: imageUrl,
+						selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
+						actionContent: text || uri,
+						actionLabel: label,
+						type: 'carousel',
+					});
+				})
+
+			}		
+		}
+		updateCarouselImage(validCarouselImages);
+
 		updateSelectedTemplate(template);
 		updateTitle(altText);
 		updateTemplateDrawerRequirement(false);

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

@@ -37,7 +37,7 @@ export default defineMessages({
   },
   "imageDimenstionDescription": {
     id: `${scope}.imageDimenstionDescription`,
-    defaultMessage: 'Format: JPEG, PNG  Aspect Ratio: 1:1 Dimensions: 1024px x 1024px  Size: 1 MB',
+    defaultMessage: 'Format: JPEG, PNG Dimensions: 1024px x 1024px  Size: 1 MB',
   },
   "imageReUpload": {
     id: `${scope}.imageReUpload`,

package/v2Containers/Line/Container/index.js

@@ -115,7 +115,13 @@ export const LineContainer = ({
             const selectedTemplate = get(Line, 'templateDetails.selectedTemplate');
             const assetType = get(Line, 'templateDetails.assetType');
             const actionLinks = get(Line, 'templateDetails.actionLinks');
-            const template = get(Line, `templateDetails.versions.base.content.messages.0.template`);
+            const templateType = get(Line, `templateDetails.versions.base.content.messages.0.type`);
+            let template = "";
+            if (templateType === "flex") {
+                template = get(Line, `templateDetails.versions.base.content.messages.0.contents`);         
+            } else {
+                template = get(Line, `templateDetails.versions.base.content.messages.0.template`);
+              }
             const video = get(Line, `templateDetails.versions.base.content.messages.0.video`);
             const videoName = get(Line, `templateDetails.versions.base.content.messages.0.videoName`);
             const videoDuration = get(Line, `templateDetails.versions.base.content.messages.0.videoDuration`);
@@ -202,6 +208,7 @@ export const LineContainer = ({
                 lineContent.push(obj);
             });
             updateLineWrapperContent(lineContent);
+
         }
     }, [templateData]);
 
@@ -294,7 +301,6 @@ export const LineContainer = ({
             if (supportedTags) {
                 tags = supportedTags;
             }
-
             return (
                 <LineWrapper
                     id={`${lineWrapperContent.type}__${index}`}
@@ -387,7 +393,7 @@ export const LineContainer = ({
             videoWidth,
         } = {}] = lineWrapperContents;
         let messageData = { type };
-        messageData[messageType] = messageContent;
+        if (messageType && messageContent) messageData[messageType] = messageContent;
         if (previewImageUrl) {
             messageData.previewImageUrl = previewImageUrl;
         }
@@ -407,9 +413,36 @@ export const LineContainer = ({
         if (baseSize) {
             messageData.baseSize = baseSize;
         }
+
         if (template) {
-            messageData.template = template;
+            messageData.type = "flex";
             messageData.altText = altText;
+            messageData.contents = {};
+            const imageContents = (template?.columns || []).map((item) => {
+                return {
+                type: 'bubble',
+                hero: {
+                    type: 'image',
+                    url: item.imageUrl,
+                    size: 'full',
+                    aspectRatio: item.aspectRatio,
+                    aspectMode: 'cover',
+                },
+                footer: {
+                    type: 'box',
+                    layout: 'vertical',
+                    spacing: 'xs',
+                    contents: [{
+                        type: 'button',
+                        style: 'link',
+                        height: 'sm',
+                        action: item.action,
+                    }],
+                },
+            };
+        });
+        messageData.contents.contents = imageContents;
+        messageData.contents.type = "carousel";
         }
         if (videoSrc) {
             delete messageData.previewImageUrl;
@@ -513,7 +546,33 @@ export const LineContainer = ({
                 messageData.actionLinks = actionLinks;
             }
             if (template) {
-                messageData.template = template;
+                let contentsLocal = {};
+                    const imageContents = (template?.columns || []).map((item) => {
+                        return {
+                        type: 'bubble',
+                        hero: {
+                            type: 'image',
+                            url: item.imageUrl,
+                            size: 'full',
+                            aspectRatio: item.aspectRatio,
+                            aspectMode: 'cover',
+                        },
+                        footer: {
+                            type: 'box',
+                            layout: 'vertical',
+                            spacing: 'xs',
+                            contents: [{
+                                type: 'button',
+                                style: 'link',
+                                height: 'sm',
+                                action: item.action,
+                            }],
+                        },
+                    };
+                });
+                contentsLocal.contents = imageContents;
+                contentsLocal.type = "carousel";
+                messageData.template = contentsLocal;
                 messageData.altText = altText;
             }
             if (videoSrc) {
@@ -595,7 +654,21 @@ export const LineContainer = ({
 
     const getPreviewSection = () => {
         const accountName = get(lineData, 'selectedLineAccount.name', '');
-        const templateContent = lineWrapperContents.map(({ messageContent, type, previewImageUrl, selectedSticker, baseUrl, template, videoSrc, actionUrl }) => ({
+        const templateContent = lineWrapperContents.map(({ messageContent, type, previewImageUrl, selectedSticker, baseUrl, template, videoSrc, actionUrl }) => {
+        const isNewLineFormat = template && isEmpty(template.columns) && !isEmpty(template.contents);
+        let imageCarousel = [];
+        if (isNewLineFormat) {
+            imageCarousel = get(template, 'contents', [{}]).map(({
+                hero: { url = ''} = {},
+                footer: { contents: [{ action: { label = '' } = {} }] = [{}] } = {},
+            }) => ({
+                imageUrl: url,
+                actionLabel: label,
+            }));
+        } else {
+            imageCarousel = get(template, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) );
+        }
+        return {
             messageContent,
             previewImageUrl,
             selectedSticker,
@@ -603,9 +676,9 @@ export const LineContainer = ({
             baseUrl,
             video: videoSrc,
             actionUrl,
-            imageCarousel: get(template, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) ),
-        }));
-
+            imageCarousel,
+        };
+        });
         return (
             <TemplatePreview
                 channel="LINE"

package/v2Containers/Templates/index.js

@@ -846,7 +846,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     );
 
   getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
-    const currentChannel = channel.toUpperCase();
+  const currentChannel = channel.toUpperCase();
     const {channel: stateChannel} = this.state;
     const channelLowerCase = stateChannel.toLowerCase();
     let filteredTemplates = templates;
@@ -868,7 +868,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       default:
         break;
     }
-
     const hoverButtonText =
       this.props.intl.formatMessage(
         this.props.isFullMode
@@ -979,48 +978,62 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           const {
             content: {
               messages: [{
-                text = '',
-                originalContentUrl = '',
-                stickerUrl = '',
-                animatedStickerUrl = '',
-                baseUrl = '',
-                template: carouselTemplate,
-                video: {
-                  originalContentUrl: originalVideoContentUrl,
+                type = '',
+                contents: {
+                  contents = [],
                 } = {},
-              }] = [{}],
+              } = {}] = [],
             } = {},
           } = template.versions.base;
-          templateData.content = text;
-          templateData.url = originalContentUrl || animatedStickerUrl || stickerUrl || (baseUrl ? `${baseUrl}/1040` : '');
-          if (originalVideoContentUrl) {
-            templateData.content = (
-              <video height="279">
-                <source src={originalVideoContentUrl} type="video/mp4" />
-              </video>
-            );
-          }
-          if (carouselTemplate) {
-            const carouselContent = get(carouselTemplate, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) );
-            templateData.content = (
-              <div style={{ display: 'flex'}}>
-                {
-                  carouselContent.map(({
-                    imageUrl,
-                    actionLabel,
-                  }) => (
-                    <img
-                      width={208}
-                      height={279}
-                      src={imageUrl}
-                      alt={actionLabel}
-                      key={`${imageUrl}_${actionLabel}`}
-                    />
-                  ))
-                }
-              </div>
-            );
-            templateData.className = 'carousel-img-section';
+          if (type === 'flex') {
+            templateData.url = contents[0]?.hero?.url;
+          } else {
+            const {
+              content: {
+                messages: [{
+                  text = '',
+                  originalContentUrl = '',
+                  stickerUrl = '',
+                  animatedStickerUrl = '',
+                  baseUrl = '',
+                  template: carouselTemplate,
+                  video: {
+                    originalContentUrl: originalVideoContentUrl,
+                  } = {},
+                }] = [{}],
+              } = {},
+            } = template.versions.base;
+            templateData.content = text;
+            templateData.url = originalContentUrl || animatedStickerUrl || stickerUrl || (baseUrl ? `${baseUrl}/1040` : '');
+            if (originalVideoContentUrl) {
+              templateData.content = (
+                <video height="279">
+                  <source src={originalVideoContentUrl} type="video/mp4" />
+                </video>
+              );
+            }
+            if (carouselTemplate) {
+              const carouselContent = get(carouselTemplate, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) );
+              templateData.content = (
+                <div style={{ display: 'flex'}}>
+                  {
+                    carouselContent.map(({
+                      imageUrl,
+                      actionLabel,
+                    }) => (
+                      <img
+                        width={208}
+                        height={279}
+                        src={imageUrl}
+                        alt={actionLabel}
+                        key={`${imageUrl}_${actionLabel}`}
+                      />
+                    ))
+                  }
+                </div>
+              );
+              templateData.className = 'carousel-img-section';
+            }
           }
           break;
         }
@@ -1069,6 +1082,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
       return templateData;
     }) : [];
+
     const accountId = get(this.props, 'Templates.selectedWeChatAccount.uuid');
     const accounts = get(this.props, 'Templates.weCrmAccounts');
     const noWhatsappTemplates = this.isFullMode() && isEmpty(templates);

package/v2Containers/Whatsapp/index.js

@@ -609,6 +609,7 @@ export const Whatsapp = (props) => {
         }
       />
       <CapRadioGroup
+        disabled={isEditFlow}
         options={buttonRadioOptions || []}
         value={buttonType}
         onChange={onChangeButtonType}
@@ -841,11 +842,24 @@ export const Whatsapp = (props) => {
     if (templateMessage.trim() === '' || templateMessageError) {
       return true;
     }
-    if (buttonType === WHATSAPP_BUTTON_TYPES.CTA) {
-      return !ctaData.every((i) => i.isSaved === true);
+   //cta
+   if (buttonType === WHATSAPP_BUTTON_TYPES.CTA) {
+    if (ctaData.length === 1 && ctaData[0].isSaved) {
+      //if button type is cta and 1st button is saved
+      return false;
+    } else if (
+      ctaData.length === 2 &&
+      ctaData[0].isSaved &&
+      ctaData[1].isSaved
+    ) {
+      //if button type is cta and 2nd button is saved
+      return false;
     }
-    return false;
-  };
+    //if button type is cta and there are no buttons saved
+    return true;
+  }
+  return false;
+};
 
   const createModeContent = (
     <>
@@ -1160,6 +1174,13 @@ export const Whatsapp = (props) => {
 
       {renderMessageLength()}
       {isTagValidationError && tagValidationErrorMessage()}
+      {computeTextLength() > TEMPLATE_MESSAGE_MAX_LENGTH ? (
+        <CapError>
+          {formatMessage(messages.templateMessageLengthError)}
+        </CapError>
+      ) : (
+        ''
+      )}
 
       <CapTooltip
         placement="bottom"
@@ -1202,7 +1223,8 @@ export const Whatsapp = (props) => {
 
   const isEditDoneDisabled = () =>
     isTagValidationError ||
-    Object.values(varMap).some((inputValue) => inputValue === '');
+    Object.values(varMap).some((inputValue) => inputValue === '') ||
+    computeTextLength() > TEMPLATE_MESSAGE_MAX_LENGTH;
   return (
     <CapSpin spinning={spin}>
       <CapRow className="cap-whatsapp-creatives">