@capillarytech/creatives-library 7.12.43 → 7.12.45

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,6 +28,7 @@ import {
   URL_ACTION_TYPE,
   TEXT_ACTION_TYPE,
   MAX_ACTION_LABEL_LENGTH,
+  CAROUSEL,
 } from './constants';
 
 export const LineImageCarouselContent = ({
@@ -64,7 +65,7 @@ export const LineImageCarouselContent = ({
       actionLabel = '',
       actionContent = '',
     } = content;
-    if (type === 'carousel') {
+    if (type === CAROUSEL) {
       updateImageStatus(!!originalContentUrl);
       updateImageSrc(originalContentUrl);
       updateActionType(selectedActionType);
@@ -86,7 +87,7 @@ export const LineImageCarouselContent = ({
         actionContentErrorMessage,
         actionLabelErrorMessage,
         index,
-        type: 'carousel',
+        type: CAROUSEL,
         messageType: 'originalContentUrl',
       });
     }
@@ -128,7 +129,7 @@ export const LineImageCarouselContent = ({
         actionContentErrorMessage,
         actionLabelErrorMessage,
         index,
-        type: 'carousel',
+        type: CAROUSEL,
         messageType: 'originalContentUrl',
       });
     }
@@ -149,8 +150,7 @@ export const LineImageCarouselContent = ({
       updateImageErrorMessage(formatMessage(messages.lineImageIncorrectSize));
     } else {
       updateImageErrorMessage('');
-      const aspectRatio1 = calculateAspectRatio(width, height);
-      updateAspectRatio(aspectRatio1);
+      updateAspectRatio(calculateAspectRatio(width, height));
       actions.uploadAsset(
         data.file,
         data.type,
@@ -158,20 +158,7 @@ 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) {
@@ -262,7 +249,7 @@ export const LineImageCarouselContent = ({
       actionContentErrorMessage,
       actionLabelErrorMessage,
       index,
-      type: 'carousel',
+      type: CAROUSEL,
       messageType: 'originalContentUrl',
     });
   }
@@ -294,7 +281,7 @@ export const LineImageCarouselContent = ({
             </CapButton>
           </CapUploader.CapDragger>
           <CapHeading type="h6" style={{ marginTop: CAP_SPACE_12 }}>
-            <FormattedMessage {...messages.imageDimenstionDescription} />
+            <FormattedMessage {...messages.imageDimenstionDesc} />
           </CapHeading>
         </>);
     }
@@ -322,11 +309,10 @@ export const LineImageCarouselContent = ({
     const imageHeight = get(imageTemplate, 'metaInfo.height');
     const imageWidth = get(imageTemplate, 'metaInfo.width');
     const imageSize = get(imageTemplate, 'metaInfo.file_size');
-    const aspectRatio1 = calculateAspectRatio(imageWidth, imageHeight);
+    const calculatedAspectRatio = 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
@@ -336,19 +322,19 @@ export const LineImageCarouselContent = ({
       updateImageErrorMessage('');
       updateImageStatus(true);
       updateImageSrc(image);
-      updateAspectRatio(aspectRatio1);
+      updateAspectRatio(calculatedAspectRatio);
       updateCarouselMessageState({
         activeIndex,
         isError: !image || isImageError,
         originalContentUrl: image,
-        aspectRatio: aspectRatio1,
+        aspectRatio: calculatedAspectRatio,
         selectedActionType,
         actionContent,
         actionLabel,
         actionContentErrorMessage,
         actionLabelErrorMessage,
         index,
-        type: 'carousel',
+        type: CAROUSEL,
         messageType: 'originalContentUrl',
       });
     }
@@ -409,7 +395,7 @@ export const LineImageCarouselContent = ({
       actionContentErrorMessage,
       actionLabelErrorMessage,
       index,
-      type: 'carousel',
+      type: CAROUSEL,
       messageType: 'originalContentUrl',
     });
   }
@@ -427,7 +413,7 @@ export const LineImageCarouselContent = ({
       actionContentErrorMessage,
       actionLabelErrorMessage,
       index,
-      type: 'carousel',
+      type: CAROUSEL,
       messageType: 'originalContentUrl',
     });
   }
@@ -458,7 +444,7 @@ export const LineImageCarouselContent = ({
       actionContentErrorMessage,
       actionLabelErrorMessage,
       index,
-      type: 'carousel',
+      type: CAROUSEL,
       messageType: 'originalContentUrl',
     });
   }

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

@@ -8,3 +8,6 @@ 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,6 +25,9 @@ import {
 	MESSAGE_ACTION_TYPE,
 	URL_ACTION_TYPE,
 	MAX_ALLOWED_TITLE_LENGTH,
+	FLEX,
+	CAROUSEL,
+	TEMPLATE,
 } from './constants';
 
 export const LineImageCarousel = (props) => {
@@ -44,7 +47,7 @@ export const LineImageCarousel = (props) => {
 		getAllTemplates,
 	} = props;
 
-	if (activeKey !== 'template') {
+	if (activeKey !== FLEX) {
 		return null;
 	}
 
@@ -55,7 +58,7 @@ export const LineImageCarousel = (props) => {
 		originalContentUrl: '',
 		aspectRatio: '',
 		previewImageUrl: '',
-		type: 'carousel',
+		type: CAROUSEL,
 	};
 
 	const [carouselImages, updateCarouselImage] = useState([defaultCarouselContent]);
@@ -70,7 +73,7 @@ export const LineImageCarousel = (props) => {
 
 	useEffect(() => {
 		const { messageTitle = '', type, template, altText } = content;
-		if (type === 'template') {
+		if ([TEMPLATE, FLEX].includes(type)) {
 			updateCreateNew(!isFullMode ? !!template : true);
 			if (messageTitle) {
 				updateTextMessageTitle(messageTitle);
@@ -80,10 +83,9 @@ export const LineImageCarousel = (props) => {
 			}
 			if (template) {
 			  	const validCarouselImages = [];
-				if (template.type != undefined && template.type === "carousel") { 
+				if (template?.type === CAROUSEL) { 
 					const { contents = [] } = template;
-					if(contents && contents.length) {					 
-						contents.forEach((content = {}, index1) => {
+						contents.forEach((content = {}, index) => {
 							const {
 								footer: {
 									contents: [{
@@ -101,19 +103,17 @@ export const LineImageCarousel = (props) => {
 								} = {},
 							} = content || {};
 							validCarouselImages.push({
-								activeIndex: index1,
+								activeIndex: index,
 								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;
-					if (columns && columns.length) {
+					const { columns = [] } = template;
 						columns.forEach((column = {}, index) => {
 							const {
 								action: {
@@ -133,10 +133,9 @@ export const LineImageCarousel = (props) => {
 								actionContent: text || uri,
 								actionLabel: label,
 								aspectRatio,
-								type: 'carousel',
+								type: CAROUSEL,
 							});
 						})
-					}
 				}
 				updateCarouselImage(validCarouselImages);
 			}
@@ -176,7 +175,7 @@ export const LineImageCarousel = (props) => {
 			isError: isErrorIndex !== undefined && isErrorIndex !== false,
 			messageTitle: existingMessageTitle,
 			altText: existingTitle,
-			type: 'template',
+			type: FLEX,
 			index,
 		}
 
@@ -392,17 +391,9 @@ export const LineImageCarousel = (props) => {
 			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.url = get(imageCarouselContents, 'contents.0.hero.url', '') || get(imageCarouselTemplate, 'columns.0.imageUrl', '');
+			templateData.title = template.name;
+			templateData.key = template.name;
 			templateData.hoverOption = (
 				<CapButton onClick={() => onTemplateSelection(template)}>
 					<FormattedMessage {...messages.select} />
@@ -435,19 +426,18 @@ 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 contents = 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(contents1) && isEmpty(template)) {
+		if (!isEmpty(contents) && isEmpty(template)) {
 			isNewLineFormat = true;
 		}
 		if (isNewLineFormat) {
-			const { contents = [] } = contents1;
-		
-			if(contents && contents.length) {	
-				contents.forEach((content = {}, index1) => {
+			const { contents : flexContents = [] } = contents;
+			
+				flexContents.forEach((content = {}, index) => {
 					const {
 						footer: {
 							contents: [{
@@ -465,16 +455,15 @@ export const LineImageCarousel = (props) => {
 						} = {},
 					} = content || {};
 					validCarouselImages.push({
-						activeIndex: index1,
+						activeIndex: index,
 						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;
@@ -496,7 +485,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

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