@capillarytech/creatives-library 7.12.48 → 7.12.50

package/v2Containers/CreativesContainer/tests/index.test.js

@@ -11,6 +11,8 @@ const {
   whatsappGetTemplateData,
   rcsEditTemplateData,
   whatsappGetCreativeData2,
+  lineCreateTemplateData,
+  lineEditTemplateData,
 } = mockdata;
 
 jest.mock('../../../v2Components/FormBuilder', () => ({
@@ -100,4 +102,5 @@ describe('Test SlideBoxContent container', () => {
     expect(getCreativesData).toHaveBeenCalledTimes(1);
     expect(getCreativesData).toHaveBeenCalledWith({ channel: 'RCS' });
   });
+
 });

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

@@ -18,7 +18,7 @@ import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, CAP_WHITE, FONT_COLOR_01, CA
 import Gallery from '../../../Assets/Gallery';
 import style from './style';
 import withStyles from '../../../../hoc/withStyles';
-import { calculateAspectRatio } from './utils';
+
 import messages from './messages';
 import {
   LINE_IMG_HEIGHT,
@@ -28,7 +28,6 @@ import {
   URL_ACTION_TYPE,
   TEXT_ACTION_TYPE,
   MAX_ACTION_LABEL_LENGTH,
-  CAROUSEL,
 } from './constants';
 
 export const LineImageCarouselContent = ({
@@ -65,7 +64,7 @@ export const LineImageCarouselContent = ({
       actionLabel = '',
       actionContent = '',
     } = content;
-    if (type === CAROUSEL) {
+    if (type === 'carousel') {
       updateImageStatus(!!originalContentUrl);
       updateImageSrc(originalContentUrl);
       updateActionType(selectedActionType);
@@ -87,7 +86,7 @@ export const LineImageCarouselContent = ({
         actionContentErrorMessage,
         actionLabelErrorMessage,
         index,
-        type: CAROUSEL,
+        type: 'carousel',
         messageType: 'originalContentUrl',
       });
     }
@@ -129,7 +128,7 @@ export const LineImageCarouselContent = ({
         actionContentErrorMessage,
         actionLabelErrorMessage,
         index,
-        type: CAROUSEL,
+        type: 'carousel',
         messageType: 'originalContentUrl',
       });
     }
@@ -150,7 +149,8 @@ export const LineImageCarouselContent = ({
       updateImageErrorMessage(formatMessage(messages.lineImageIncorrectSize));
     } else {
       updateImageErrorMessage('');
-      updateAspectRatio(calculateAspectRatio(width, height));
+      const aspectRatio1 = calculateAspectRatio(width, height);
+      updateAspectRatio(aspectRatio1);
       actions.uploadAsset(
         data.file,
         data.type,
@@ -158,7 +158,20 @@ export const LineImageCarouselContent = ({
         `ImageCarousel${index}`,
       );
     }
+  }
+
+  const calculateGCD = (width, height) => {
+    while (height !== 0 ) {
+      let reminder = width % height;
+        width = height;
+        height = reminder;
+    }
+    return Math.abs(width);
   };
+  const calculateAspectRatio = (width, height) => {
+    const absValue = calculateGCD(width, height);
+    return `${width / absValue}:${height / absValue}`;
+  }
 
   const uploadImages = (e, { files }) => {
     if (e) {
@@ -249,7 +262,7 @@ export const LineImageCarouselContent = ({
       actionContentErrorMessage,
       actionLabelErrorMessage,
       index,
-      type: CAROUSEL,
+      type: 'carousel',
       messageType: 'originalContentUrl',
     });
   }
@@ -281,7 +294,7 @@ export const LineImageCarouselContent = ({
             </CapButton>
           </CapUploader.CapDragger>
           <CapHeading type="h6" style={{ marginTop: CAP_SPACE_12 }}>
-            <FormattedMessage {...messages.imageDimenstionDesc} />
+            <FormattedMessage {...messages.imageDimenstionDescription1} />
           </CapHeading>
         </>);
     }
@@ -309,10 +322,11 @@ export const LineImageCarouselContent = ({
     const imageHeight = get(imageTemplate, 'metaInfo.height');
     const imageWidth = get(imageTemplate, 'metaInfo.width');
     const imageSize = get(imageTemplate, 'metaInfo.file_size');
-    const calculatedAspectRatio = calculateAspectRatio(imageWidth, imageHeight);
+    const aspectRatio1 = calculateAspectRatio(imageWidth, imageHeight);
     updateDrawerRequirement(false);
     if (
       !ALLOWED_EXTENSIONS_REGEX.test(image)
+      // || imageHeight / imageWidth !== 1
       || imageHeight > LINE_IMG_HEIGHT
       || imageWidth > LINE_IMG_WIDTH
       || imageSize > LINE_IMG_SIZE
@@ -322,19 +336,19 @@ export const LineImageCarouselContent = ({
       updateImageErrorMessage('');
       updateImageStatus(true);
       updateImageSrc(image);
-      updateAspectRatio(calculatedAspectRatio);
+      updateAspectRatio(aspectRatio1);
       updateCarouselMessageState({
         activeIndex,
         isError: !image || isImageError,
         originalContentUrl: image,
-        aspectRatio: calculatedAspectRatio,
+        aspectRatio: aspectRatio1,
         selectedActionType,
         actionContent,
         actionLabel,
         actionContentErrorMessage,
         actionLabelErrorMessage,
         index,
-        type: CAROUSEL,
+        type: 'carousel',
         messageType: 'originalContentUrl',
       });
     }
@@ -395,7 +409,7 @@ export const LineImageCarouselContent = ({
       actionContentErrorMessage,
       actionLabelErrorMessage,
       index,
-      type: CAROUSEL,
+      type: 'carousel',
       messageType: 'originalContentUrl',
     });
   }
@@ -413,7 +427,7 @@ export const LineImageCarouselContent = ({
       actionContentErrorMessage,
       actionLabelErrorMessage,
       index,
-      type: CAROUSEL,
+      type: 'carousel',
       messageType: 'originalContentUrl',
     });
   }
@@ -444,7 +458,7 @@ export const LineImageCarouselContent = ({
       actionContentErrorMessage,
       actionLabelErrorMessage,
       index,
-      type: CAROUSEL,
+      type: 'carousel',
       messageType: 'originalContentUrl',
     });
   }

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

@@ -8,6 +8,3 @@ export const MESSAGE_ACTION_TYPE = 'message';
 export const URL_ACTION_TYPE = 'uri';
 export const MAX_ACTION_LABEL_LENGTH = 12;
 export const MAX_ALLOWED_TITLE_LENGTH = 100;
-export const CAROUSEL = 'carousel';
-export const FLEX = 'flex';
-export const TEMPLATE = 'template';

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

@@ -25,9 +25,6 @@ import {
 	MESSAGE_ACTION_TYPE,
 	URL_ACTION_TYPE,
 	MAX_ALLOWED_TITLE_LENGTH,
-	FLEX,
-	CAROUSEL,
-	TEMPLATE,
 } from './constants';
 
 export const LineImageCarousel = (props) => {
@@ -47,7 +44,7 @@ export const LineImageCarousel = (props) => {
 		getAllTemplates,
 	} = props;
 
-	if (activeKey !== FLEX) {
+	if (activeKey !== 'flex') {
 		return null;
 	}
 
@@ -58,7 +55,7 @@ export const LineImageCarousel = (props) => {
 		originalContentUrl: '',
 		aspectRatio: '',
 		previewImageUrl: '',
-		type: CAROUSEL,
+		type: 'carousel',
 	};
 
 	const [carouselImages, updateCarouselImage] = useState([defaultCarouselContent]);
@@ -72,20 +69,22 @@ export const LineImageCarousel = (props) => {
 	const [errorTitle, updateErrorTitle] = useState(false);
 
 	useEffect(() => {
-		const { messageTitle = '', type, template, altText, contents } = content;
-		if ([TEMPLATE, FLEX].includes(type)) {
-			updateCreateNew(!isFullMode ? !!(template || contents) : true);
+		const { messageTitle = '', type, template, altText } = content;
+		if (type === 'template' || type === 'flex') {
+			updateCreateNew(!isFullMode ? !!template : true);
 			if (messageTitle) {
 				updateTextMessageTitle(messageTitle);
 			}
 			if (altText) {
 				updateTitle(altText);
 			}
-			if (template || contents) {
+			if (template) {
 			  	const validCarouselImages = [];
-				if (template?.type === CAROUSEL || contents?.type === CAROUSEL ) {
-                    const { contents: innerContents = [] } = contents || template || [];
-                    	    innerContents.forEach((content = {}, index) => {							const {
+				if (template.type != undefined && template.type === "carousel") { 
+					const { contents = [] } = template;
+					if(contents && contents.length) {					 
+						contents.forEach((content = {}, index1) => {
+							const {
 								footer: {
 									contents: [{
 										action: {
@@ -102,17 +101,19 @@ export const LineImageCarousel = (props) => {
 								} = {},
 							} = content || {};
 							validCarouselImages.push({
-								activeIndex: index,
+								activeIndex: index1,
 								originalContentUrl: url,
 								aspectRatio,
 								selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 								actionContent: text || uri,
 								actionLabel: label,
-								type: CAROUSEL,
+								type: 'carousel',
 							});
 						})					
+					}
 				} else {
-					const { columns = [] } = template;
+					const { columns } = template;
+					if (columns && columns.length) {
 						columns.forEach((column = {}, index) => {
 							const {
 								action: {
@@ -132,9 +133,10 @@ export const LineImageCarousel = (props) => {
 								actionContent: text || uri,
 								actionLabel: label,
 								aspectRatio,
-								type: CAROUSEL,
+								type: 'carousel',
 							});
 						})
+					}
 				}
 				updateCarouselImage(validCarouselImages);
 			}
@@ -174,7 +176,7 @@ export const LineImageCarousel = (props) => {
 			isError: isErrorIndex !== undefined && isErrorIndex !== false,
 			messageTitle: existingMessageTitle,
 			altText: existingTitle,
-			type: FLEX,
+			type: 'flex',
 			index,
 		}
 
@@ -390,9 +392,17 @@ export const LineImageCarousel = (props) => {
 			if(!imageCarouselTemplate  && imageCarouselContents) {
 				isNewLineFormat = true;
 			}
-			templateData.url = get(imageCarouselContents, 'contents.0.hero.url', '') || get(imageCarouselTemplate, 'columns.0.imageUrl', '');
-			templateData.title = template.name;
-			templateData.key = template.name;
+			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} />
@@ -425,18 +435,19 @@ export const LineImageCarousel = (props) => {
 
 	const onTemplateSelection = (templateData) => {
 		const template = get(templateData, 'versions.base.content.messages[0].template', {});
-		const contents = get(templateData, 'versions.base.content.messages[0].contents', {});
+		const contents1 = get(templateData, 'versions.base.content.messages[0].contents', {});
 		const altText = get(templateData, 'versions.base.content.messages[0].altText', '');
 		let isNewLineFormat = false;
 		const validCarouselImages = [];
 		
-		if (!isEmpty(contents) && isEmpty(template)) {
+		if (!isEmpty(contents1) && isEmpty(template)) {
 			isNewLineFormat = true;
 		}
 		if (isNewLineFormat) {
-			const { contents : flexContents = [] } = contents;
-			
-				flexContents.forEach((content = {}, index) => {
+			const { contents = [] } = contents1;
+		
+			if(contents && contents.length) {	
+				contents.forEach((content = {}, index1) => {
 					const {
 						footer: {
 							contents: [{
@@ -454,15 +465,16 @@ export const LineImageCarousel = (props) => {
 						} = {},
 					} = content || {};
 					validCarouselImages.push({
-						activeIndex: index,
+						activeIndex: index1,
 						originalContentUrl: url,
 						aspectRatio,
 						selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 						actionContent: text || uri,
 						actionLabel: label,
-						type: CAROUSEL,
+						type: 'carousel',
 					});
 				})					
+			}		
 		
 		} else {
 			const { columns } = template;
@@ -484,7 +496,7 @@ export const LineImageCarousel = (props) => {
 						selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 						actionContent: text || uri,
 						actionLabel: label,
-						type: CAROUSEL,
+						type: 'carousel',
 					});
 				})
 

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

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

package/v2Containers/Line/Container/index.js

@@ -172,7 +172,6 @@ export const LineContainer = ({
                 assetType,
                 selectedTemplate,
                 template,
-                contents,
                 altText,
                 video,
                 videoName,
@@ -190,7 +189,6 @@ export const LineContainer = ({
                     assetType,
                     selectedTemplate,
                     template,
-                    contents,
                     altText,
                     video,
                     videoName,
@@ -395,7 +393,6 @@ export const LineContainer = ({
             videoWidth,
         } = {}] = lineWrapperContents;
         let messageData = { type };
-        //for type template and not flow
         if (messageType && messageContent) messageData[messageType] = messageContent;
         if (previewImageUrl) {
             messageData.previewImageUrl = previewImageUrl;
@@ -575,7 +572,7 @@ export const LineContainer = ({
                 });
                 contentsLocal.contents = imageContents;
                 contentsLocal.type = "carousel";
-                messageData.contents = contentsLocal;
+                messageData.template = contentsLocal;
                 messageData.altText = altText;
             }
             if (videoSrc) {
@@ -658,7 +655,6 @@ export const LineContainer = ({
     const getPreviewSection = () => {
         const accountName = get(lineData, 'selectedLineAccount.name', '');
         const templateContent = lineWrapperContents.map(({ messageContent, type, previewImageUrl, selectedSticker, baseUrl, template, videoSrc, actionUrl }) => {
-        //template.type is image_carousel, for flex only contents will be there
         const isNewLineFormat = template && isEmpty(template.columns) && !isEmpty(template.contents);
         let imageCarousel = [];
         if (isNewLineFormat) {

package/v2Containers/Templates/constants.js

@@ -59,4 +59,4 @@ export const GET_ORG_LEVEL_CAMPAIGN_SETTINGS_SUCCESS =
 export const GET_ORG_LEVEL_CAMPAIGN_SETTINGS_FAILURE =
   'app/v2Containers/Templates/GET_ORG_LEVEL_CAMPAIGN_SETTINGS_FAILURE';
 
-export const MAX_WHATSAPP_TEMPLATES = 1500;
+export const MAX_WHATSAPP_TEMPLATES = 250;