@capillarytech/creatives-library 8.0.90 → 8.0.91

package/v2Containers/Whatsapp/index.js

@@ -26,6 +26,10 @@ import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
 import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
 import CapLink from '@capillarytech/cap-ui-library/CapLink';
 import  CapAskAira  from '@capillarytech/cap-ui-library/CapAskAira';
+import CapCard from '@capillarytech/cap-ui-library/CapCard';
+import CapTab from '@capillarytech/cap-ui-library/CapTab';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import CapInfoNote from '@capillarytech/cap-ui-library/CapInfoNote';
 import moment from 'moment';
 
 import {
@@ -80,9 +84,19 @@ import {
   OTP_CONFIG_URI,
   WHATSAPP_CATEGORIES,
   AI_CONTENT_BOT_DISABLED,
+  mediaTypeOptions,
+  carouselMediaOptions,
+  CAROUSEL_INITIAL_DATA,
+  MAX_CAROUSEL_ALLOWED,
+	BODY_TEXT,
+  QUICK_REPLY,
+  CAROUSEL_TEXT,
   ICS_CATEGORY_OPTIONS,
   CORRECT_TEMPLATE_FORMAT_URL,
   CATEGORY_OPTIONS_MAP,
+  IMAGE,
+  VIDEO,
+  URL,
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
@@ -105,6 +119,8 @@ import { getWhatsappDocPreview } from './utils';
 import CapWhatsappQuickReply from '../../v2Components/CapWhatsappQuickReply';
 import injectSaga from '../../utils/injectSaga';
 import injectReducer from '../../utils/injectReducer';
+import CapWhatsappCarouselButton from '../../v2Components/CapWhatsappCarouselButton';
+import { INITIAL_CAROUSEL_PHONE_NUMBER_DATA, INITIAL_CAROUSEL_URL_DATA, INITIAL_CAROUSEL_QUICK_REPLY_DATA } from '../../v2Components/CapWhatsappCarouselButton/constant';
 
 import { v2WhatsappSagas } from './sagas';
 import v2WhatsappReducer from './reducer';
@@ -139,6 +155,7 @@ export const Whatsapp = (props) => {
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
+  const defaultActiveIndex = "0";
   const [templateName, setTemplateName] = useState('');
   const [templateNameError, setTemplateNameError] = useState(false);
   const [templateCategory, setTemplateCategory] = useState(
@@ -200,9 +217,14 @@ export const Whatsapp = (props) => {
     useState(false);
   const [showUrlPreview, setShowUrlPreview] = useState(false);
   const [previewUrl, setPreviewUrl] = useState('');
+  const [carouselMediaType, setCarouselMediaType] = useState('image');
+  const [carouselData, setCarouselData] = useState(CAROUSEL_INITIAL_DATA);
+  const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
+  const [carouselValidateTag, setCarouselValidateTag] = useState(false);
 
   const validVarRegex = /{{([1-9]|1[0-9])}}/g;
   const headerValidVarRegex = /{{(1)}}/g;
+  const carouselBodyVarRegex = /{{[1-5]}}/g;
   const previewUrlMatchingRegex = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])/g;
 
   const { accessibleFeatures = [] } = currentOrgDetails || {};
@@ -215,6 +237,7 @@ export const Whatsapp = (props) => {
   const isMediaTypeImage = templateMediaType === WHATSAPP_MEDIA_TYPES.IMAGE;
   const isMediaTypeVideo = templateMediaType === WHATSAPP_MEDIA_TYPES.VIDEO;
   const isMediaTypeDoc = templateMediaType === WHATSAPP_MEDIA_TYPES.DOCUMENT;
+  const isMediaTypeCarousel = templateMediaType === WHATSAPP_MEDIA_TYPES.CAROUSEL;
   const isHostIsNotTwilio = host !== HOST_TWILIO;
   const WhatsappFooter = styled.div`
     background-color: ${CAP_WHITE};
@@ -291,8 +314,9 @@ export const Whatsapp = (props) => {
         buttons = [],
         videoPreviewImg = '',
         whatsappDocParams = {},
-        whatsappMedia: { header = '', footer = '' } = {},
+        whatsappMedia: { header = '', footer = '', headerVarMapped = [] } = {},
         isPreviewUrl = false,
+        carouselData : editCarouselData = [],
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
@@ -317,6 +341,12 @@ export const Whatsapp = (props) => {
       setTemplateFooter(footer);
       setTemplateHeader(header);
       setShowUrlPreview(isPreviewUrl);
+      if (mediaType === WHATSAPP_MEDIA_TYPES.CAROUSEL) {
+        const updatedCarouselData = handleCarouselData(editCarouselData);
+        setCarouselData(updatedCarouselData);
+        setCarouselMediaType(updatedCarouselData?.[0]?.mediaType)
+        setCarouselValidateTag(!carouselValidateTag);
+      }
       if (btnType === WHATSAPP_BUTTON_TYPES.CTA && buttons.length > 0) {
         setCtadata(
           buttons.map((cta) => {
@@ -348,11 +378,42 @@ export const Whatsapp = (props) => {
       }
       computeTempMsgArray();
       if (header && (mediaType === WHATSAPP_MEDIA_TYPES.TEXT && isHostIsNotTwilio)) {
-        computeHeaderMsgArray();
+        const { clonedVarMap, updatedText, tempData } = computeTextMessage(header, headerVarMapped, headerValidVarRegex);
+        setTempHeaderData(tempData);
+        setHeaderVarMappedData(clonedVarMap);
+        setUpdatedHeaderData(updatedText);
       }
     }
   }, [editData.templateDetails || templateData]);
 
+  const handleCarouselData = (carouselData = []) => {
+    return (
+      carouselData.map((carousel) => {
+        const { clonedVarMap, updatedText, tempData } = computeTextMessage(carousel?.bodyText, carousel?.varMap, carouselBodyVarRegex) || {};
+        return {
+          ...carousel,
+          updatedBodyText: updatedText,
+          textAreaId: '',
+          varMap: clonedVarMap,
+          tempBodyData: tempData,
+          carouselTagValidationErr: false,
+          carouselTagValidationErrMessage: {},
+          ...(carousel.mediaType === IMAGE.toLowerCase() && {
+            imageSrc: carousel?.imageUrl,
+          }),
+          ...(carousel.mediaType === VIDEO.toLowerCase() && {
+            videoSrc: carousel?.videoUrl,
+            videoPreviewImg: carousel?.videoPreviewImg,
+          }),
+          buttons: carousel?.buttons?.map((button) => ({
+            ...button,
+            buttonType: button?.type,
+          })),
+        };
+      })
+    );
+  };
+
   const converStringToVarArr = (validVarArr, content) => {
     const templateVarArray = [];
     while (content?.length !== 0) {
@@ -371,34 +432,32 @@ export const Whatsapp = (props) => {
     return templateVarArray;
   }
 
-  const computeHeaderMsgArray = () => {
-    let msg = get(editContent, `whatsappMedia.header`, '');
-    const validVarArr = msg?.match(headerValidVarRegex) || [];
+  const computeTextMessage = (msg, varMap, regex) => {
+    const validVarArr = msg?.match(regex) || [];
     //conerting msg string to variable arr
     const templateHeaderArray = converStringToVarArr(validVarArr, msg);
-    setTempHeaderData(templateHeaderArray);
     if (templateHeaderArray?.length !== 0) {
-      let headerVarMap = {};
-      const {
-        whatsappMedia: { headerVarMapped = {} },
-      } = editContent;
-      if (!isEmpty(headerVarMapped)) {
-        headerVarMap = cloneDeep(headerVarMapped);
+      let clonedVarMap = {};
+      if (!isEmpty(varMap)) {
+        clonedVarMap = cloneDeep(varMap);
       } else {
         templateHeaderArray?.forEach((headerValue, i) => {
-          if (headerValue?.match(headerValidVarRegex)?.length > 0) {
-            headerVarMap[`${headerValue}_${i}`] = '';
+          if (headerValue?.match(regex)?.length > 0) {
+            clonedVarMap[`${headerValue}_${i}`] = '';
           }
         })
       }
       const arr = [...templateHeaderArray];
-      for (const key in headerVarMap) {
-        if (headerVarMap[key] !== '') {
-          arr[key.slice(key.indexOf('_') + 1)] = headerVarMap[key];
+      for (const key in clonedVarMap) {
+        if (clonedVarMap[key] !== '') {
+          arr[key.slice(key.indexOf('_') + 1)] = clonedVarMap[key];
         }
       }
-      setHeaderVarMappedData(headerVarMap);
-      setUpdatedHeaderData(arr);
+      return {
+        clonedVarMap,
+        updatedText: arr,
+        tempData: templateHeaderArray,
+      }
     }
   };
 
@@ -515,6 +574,8 @@ export const Whatsapp = (props) => {
       if (type === HEADER_TEXT) {
         headerTagValidationResponse = validationResponse;
         updateIsHeaderTagValidationError(unsupportedTagsLengthCheck);
+      } else if (type === CAROUSEL_TEXT) {
+        return [{fieldName: "carouselTagValidationErrMessage", value: validationResponse}, {fieldName: "carouselTagValidationErr", value: unsupportedTagsLengthCheck}];
       } else {
         tagValidationResponse = validationResponse;
         updateIsTagValidationError(unsupportedTagsLengthCheck);
@@ -566,6 +627,15 @@ export const Whatsapp = (props) => {
       tagValidation(updatedHeaderData, headerValidVarRegex, HEADER_TEXT);
   }, [updatedHeaderData, tags]);
 
+  useEffect(() => {
+    if (!isFullMode && tags?.length && carouselData?.length) {
+      carouselData?.forEach((carousel, carouselIndex) => {
+        const tagFields = tagValidation(carousel?.updatedBodyText, carouselBodyVarRegex, CAROUSEL_TEXT) || [];
+        handleCarouselValueChange(carouselIndex, tagFields);
+      })
+    }
+  }, [carouselValidateTag, tags])
+
   const handleOnTagsContextChange = (data) => {
     const { type } = location.query || {};
     const isEmbedded = type === EMBEDDED;
@@ -589,6 +659,7 @@ export const Whatsapp = (props) => {
       updatedData = [],
       areaId = "",
       regex,
+      carouselIndex,
     } = tagSelectData;
     if (mapData && updatedData) {
       const numId = Number(areaId?.slice(areaId?.indexOf("_") + 1));
@@ -600,15 +671,26 @@ export const Whatsapp = (props) => {
         }
         const messageData = `${arr[numId]}{{${data}}}`;
         arr[numId] = messageData;
-        if (type === HEADER_TEXT) {
-          setHeaderVarMappedData((prevState) => ({
-            ...prevState,
-            [areaId]: messageData,
-          }));
-          setUpdatedHeaderData(arr);
-        } else {
-          varMap[areaId] = messageData;
-          setUpdatedSmsEditor(arr);
+        switch (type) {
+          case HEADER_TEXT:
+            setHeaderVarMappedData((prevState) => ({
+              ...prevState,
+              [areaId]: messageData,
+            }));
+            setUpdatedHeaderData(arr);
+            break;
+          case CAROUSEL_TEXT:
+            const carouselVarMap = carouselData?.[carouselIndex]?.varMap || {};
+            carouselVarMap[areaId] = messageData;
+            let tagFields = []
+            if (!isFullMode) {
+              tagFields = tagValidation(arr, carouselBodyVarRegex, CAROUSEL_TEXT) || [];
+            }
+            handleCarouselValueChange(carouselIndex, [...tagFields, {fieldName: "varMap", value: carouselVarMap}, {fieldName: "updatedBodyText", value: arr}])
+            break;
+          default: 
+            varMap[areaId] = messageData;
+            setUpdatedSmsEditor(arr);
         }
       }
     }
@@ -636,10 +718,25 @@ export const Whatsapp = (props) => {
     });
   };
 
+  const onCarouselBodyTagSelect = (data, carouselData, carouselIndex) => {
+    const { updatedBodyText, varMap: headerVarMap, textAreaId } = carouselData;
+    onTagSelect({
+      data,
+      type: CAROUSEL_TEXT,
+      mapData: headerVarMap,
+      updatedData: updatedBodyText,
+      areaId: textAreaId,
+      regex: carouselBodyVarRegex,
+      carouselIndex
+    });
+  }
+
   //setting the id of currently selected text area, is used onTagSelect
-  const setTextAreaId = ({ target: { id } }, type) => {
+  const setTextAreaId = ({ target: { id } }, type, carouselIndex) => {
     if (type === HEADER_TEXT) {
       setHeaderTextAreaId(id);
+    } else if (type === CAROUSEL_TEXT) {
+      handleCarouselValueChange(carouselIndex, [{fieldName: "textAreaId", value: id}])
     } else {
       updateTextAreaId(id);
     }
@@ -678,55 +775,6 @@ export const Whatsapp = (props) => {
     label: renderTemplateCategoryLabel(option.tooltipLabel, option.label),
   }));
 
-  const mediaRadioOptions = [
-    {
-      value: WHATSAPP_MEDIA_TYPES.TEXT,
-      label: formatMessage(messages.mediaText),
-    },
-    {
-      value: WHATSAPP_MEDIA_TYPES.IMAGE,
-      label: (
-        <CapTooltip
-          title={
-            host === HOST_TWILIO
-              ? formatMessage(messages.disabledFeatureTooltip)
-              : ''
-          }
-        >
-          {formatMessage(messages.mediaImage)}
-        </CapTooltip>
-      ),
-      disabled: host === HOST_TWILIO,
-    },
-    {
-      value: WHATSAPP_MEDIA_TYPES.VIDEO,
-      label: (
-        <CapTooltip
-          title={
-          host === HOST_TWILIO
-            ? formatMessage(messages.disabledFeatureTooltip)
-            : ''
-        }>
-          {formatMessage(messages.mediaVideo)}
-        </CapTooltip>
-      ),
-      disabled: host === HOST_TWILIO,
-    },
-    {
-      value: WHATSAPP_MEDIA_TYPES.DOCUMENT,
-      label: (
-        <CapTooltip
-          title={
-          host === HOST_TWILIO
-            ? formatMessage(messages.disabledFeatureTooltip)
-            : ''
-        }>
-          {formatMessage(messages.mediaDocument)}
-        </CapTooltip>
-      ),
-      disabled: host === HOST_TWILIO,
-    },
-  ];
 const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.authentication);
   const onChangeButtonType = ({ target: { value } }) => {
     setButtonType(value);
@@ -757,7 +805,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     });
   };
 
-  const computeTextLength = (type) => {
+  const computeTextLength = (type, carousel) => {
     switch (type) {
       case MESSAGE_TEXT:
         let whatsappContentLen = 0;
@@ -774,6 +822,12 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         return headerContentLen || 0;
       case FOOTER_TEXT:
         return templateFooter?.length || 0;
+      case CAROUSEL_TEXT:
+        let carouselContentLen = 0;
+        carouselContentLen = isEditFlow
+          ? carousel?.updatedBodyText?.join("")?.length
+          : carousel?.bodyText?.length;
+        return carouselContentLen;
       default:
         let overallLength =
           computeTextLength(MESSAGE_TEXT) +
@@ -784,10 +838,10 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   };
   
   //used by create and edit
-  const renderMessageLength = (type, currentLength) => (
+  const renderMessageLength = (type, currentLength, carousel) => (
     <CapHeading type="label1" className="whatsapp-render-message-length">
       {formatMessage(messages.templateMessageLength, {
-        currentLength: currentLength ? currentLength : computeTextLength(type),
+        currentLength: currentLength ? currentLength : computeTextLength(type, carousel),
         maxLength: maxLengthByType(type),
       })}
     </CapHeading>
@@ -934,6 +988,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   const maxLengthByType = (type) => {
     switch (type) {
       case MESSAGE_TEXT:
+      case CAROUSEL_TEXT:
         return TEMPLATE_MESSAGE_MAX_LENGTH;
       case HEADER_TEXT:
       case FOOTER_TEXT:
@@ -982,37 +1037,57 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       hostName: host,
     };
     if (isFullMode && !isEditFlow && host === HOST_GUPSHUP) {
-      setGupshupMediaFile(file);
+			if (isMediaTypeCarousel) {
+        setGupshupMediaFile((prevState) => {
+          const newArray = [...prevState];
+          newArray[activeIndex] = file;
+          return newArray;
+        });
+			} else {
+        setGupshupMediaFile(file);
+      }
     }
     actions.uploadWhatsappAsset(file, type, fileParams, 0, whatsappParams);
   };
 
   const setUpdateWhatsappImageSrc = useCallback(
     (filePath, fileHandle) => {
-      setWhatsappImageSrc(filePath);
-      setKarixFileHandle(fileHandle);
+			if (isMediaTypeCarousel) {
+				handleCarouselValueChange(parseInt(activeIndex, 10), [{fieldName: "imageSrc", value: filePath}, {fieldName: "karixFileHandle", value: fileHandle}]);
+			} else {
+				setWhatsappImageSrc(filePath);
+      	setKarixFileHandle(fileHandle);
+			}
       actions.clearWhatsappAsset(0);
     },
-    [whatsappImageSrc],
+    [whatsappImageSrc, isMediaTypeCarousel, activeIndex, carouselData],
   );
 
   const updateOnWhatsappImageReUpload = useCallback(() => {
-    setWhatsappImageSrc('');
-    setKarixFileHandle('');
-  }, [whatsappImageSrc]);
+		if (isMediaTypeCarousel) {
+			handleCarouselValueChange(parseInt(activeIndex, 10), [{fieldName: "imageSrc", value: ''}, {fieldName: "karixFileHandle", value: ''}]);
+		} else {
+			setWhatsappImageSrc('');
+    	setKarixFileHandle('');
+		}
+  }, [whatsappImageSrc, isMediaTypeCarousel, activeIndex, carouselData]);
 
   const setUpdateWhatsappVideoSrc = useCallback(
     (index, data) => {
       const { videoSrc = '', previewUrl = '', fileHandle = '' } = data;
-      setWhatsappVideoSrcAndPreview({
-        whatsappVideoSrc: videoSrc,
-        whatsappVideoPreviewImg: previewUrl,
-      });
-      setKarixFileHandle(fileHandle);
-      updateAssetList(data);
+			if (isMediaTypeCarousel) {
+				handleCarouselValueChange(parseInt(activeIndex, 10), [{fieldName: "videoSrc", value: videoSrc}, {fieldName: "videoPreviewImg", value: previewUrl}, {fieldName: "assetList", value: data}, {fieldName: "karixFileHandle", value: fileHandle}]);
+			} else {
+				setWhatsappVideoSrcAndPreview({
+					whatsappVideoSrc: videoSrc,
+					whatsappVideoPreviewImg: previewUrl,
+				});
+				setKarixFileHandle(fileHandle);
+				updateAssetList(data);
+			}
       actions.clearWhatsappAsset(0);
     },
-    [whatsappVideoSrcAndPreview?.whatsappVideoSrc],
+    [whatsappVideoSrcAndPreview?.whatsappVideoSrc, isMediaTypeCarousel, activeIndex],
   );
 
   const setUpdateWhatsappDocSrc = useCallback(
@@ -1029,14 +1104,14 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     setKarixFileHandle('');
   }, [whatsappDocSource]);
 
-  const renderImageComponent = () => (
+  const renderImageComponent = (carouselIndex) => (
     <CapImageUpload
       style={{ paddingTop: '20px' }}
       allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
       imgSize={WHATSAPP_IMG_SIZE}
       uploadAsset={uploadWhatsappAsset}
       isFullMode={isFullMode}
-      imageSrc={whatsappImageSrc}
+      imageSrc={isMediaTypeCarousel ? (carouselData?.[carouselIndex]?.imageSrc || '') : whatsappImageSrc}
       updateImageSrc={setUpdateWhatsappImageSrc}
       updateOnReUpload={updateOnWhatsappImageReUpload}
       index={0}
@@ -1044,6 +1119,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       key="whatsapp-uploaded-image"
       imageData={editData}
       channel={WHATSAPP}
+      showReUploadButton={!(isEditFlow && isMediaTypeCarousel)}
     />
   );
 
@@ -1054,7 +1130,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       videoSize={WHATSAPP_VIDEO_SIZE}
       isFullMode={isFullMode}
       uploadAsset={uploadWhatsappAsset}
-      uploadedAssetList={assetList}
+      uploadedAssetList={carouselData?.[activeIndex]?.assetList || []}
       onVideoUploadUpdateAssestList={setUpdateWhatsappVideoSrc}
       videoData={editData}
       className="cap-custom-video-upload"
@@ -1062,6 +1138,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       channel={WHATSAPP}
       errorMessage={formatMessage(messages.videoErrorMessage)}
       showVideoNameAndDuration={false}
+      showReUploadButton={!(isEditFlow && isMediaTypeCarousel)}
     />
   );
   const docPreview = ( whatsappDocSource !== '' &&
@@ -1128,6 +1205,13 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       setTemplateMessage(formatMessage(messages.authenticationMsg));
     } else {
       setTemplateMessage('');
+    }
+		if (templateCategory === WHATSAPP_CATEGORIES.marketing && templateMediaType === WHATSAPP_MEDIA_TYPES.CAROUSEL) {
+			setTemplateMediaType(WHATSAPP_MEDIA_TYPES.TEXT);
+			setCarouselData(CAROUSEL_INITIAL_DATA);
+		}
+    if (value === WHATSAPP_CATEGORIES.marketing) {
+      setGupshupMediaFile([]);
     }
     setTemplateCategory(value);
   };
@@ -1140,7 +1224,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     setTemplateLanguage(value);
   };
 
-  const onTemplateMediaTypeChange = ({ target: { value } }) => {
+  const onTemplateMediaTypeChange = (value) => {
+		setCarouselData(CAROUSEL_INITIAL_DATA);
     setTemplateMediaType(value);
   };
 
@@ -1215,7 +1300,27 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     return errorMessage;
   };
 
-  const variableErrorHandling = (value, type) => {
+	const handleCarouselValueChange = (carouselIndex, fields) => {
+		const updateCarouselData = cloneDeep(carouselData);
+		fields.forEach((field) => {
+			updateCarouselData[carouselIndex][field.fieldName] = field.value;
+    });
+		setCarouselData(updateCarouselData);
+	}
+
+	const carouselBodyTextErrorHandler = (value, carouselIndex) => {
+		let errorMessage = false;
+		if (value === "") {
+			errorMessage = formatMessage(messages.emptyCardBodyeErrorMessage);
+		} else if(value?.length > TEMPLATE_MESSAGE_MAX_LENGTH) {
+      errorMessage = formatMessage(messages.templateMessageLengthError);
+    } else {
+			errorMessage = variableErrorHandling(value, BODY_TEXT, carouselIndex);
+		}
+		return errorMessage;
+	}
+
+  const variableErrorHandling = (value, type, carouselIndex) => {
     let errorMessage = false;
     const validVarArr = value.match(type === HEADER_TEXT ? headerValidVarRegex : validVarRegex) || [];
     const validVarSet = [...new Set(validVarArr)];
@@ -1258,6 +1363,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
           errorMessage = formatMessage(messages.sequenceVars, { one: "{{1}}" });
         } else {
           if (type === MESSAGE_TEXT) setAddedVarCount(validVarSet?.length || 0);
+					if (type === BODY_TEXT) handleCarouselValueChange(carouselIndex, [{ fieldName: 'addedVarCount', value: validVarSet?.length || 0 }]);
         }
       }
     }
@@ -1317,6 +1423,43 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       };
     });
 
+	const getCarouselPayload = () => {
+		return carouselData.map((carousel) => {
+			const { bodyText = '', imageSrc = '', videoSrc = '', videoPreviewImg = '', karixFileHandle = '', buttons = [], varMap: carouselVarMap = {}, updatedBodyText = [], tempBodyData = [] } = carousel || {};
+			const carouselButtons = buttons.map((button) => {
+				const { text = '', buttonType: type = '', url = '', phone_number = '', urlType = '' } = button;
+				return {
+					text,
+					type,
+					...(type === PHONE_NUMBER && {
+						phone_number: `+${phone_number}`,
+					}),
+					...(type === URL && {
+						urlType,
+						url
+					})
+				};
+			});
+			return {
+				bodyText: isEditFlow && !isFullMode ? updatedBodyText.join("") : bodyText,
+				...(carouselMediaType === IMAGE.toLowerCase() && {
+					imageUrl: getCdnUrl({ url: imageSrc, channelName: WHATSAPP }),
+				}),
+				...(carouselMediaType === VIDEO.toLowerCase() && {
+					videoUrl: videoSrc,
+					videoPreviewImg,
+				}),
+				karixFileHandle,
+				buttons: carouselButtons,
+        mediaType: carouselMediaType,
+        ...(!isFullMode && {
+          cardVarMapped: carouselVarMap,
+          bodyTemplate: tempBodyData.join(""),
+        })
+			};
+		});
+	}
+
   const createPayload = () => {
     let mediaParams = {};
     const { whatsappVideoSrc = '', whatsappVideoPreviewImg = '' } = whatsappVideoSrcAndPreview;
@@ -1387,6 +1530,9 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
               }),
               securityRecommendation: unsubscribeRequired,
               codeExpiryMinutes: expiryMinutes,
+							...(isMediaTypeCarousel && {
+								carouselData: getCarouselPayload()
+							})
             },
           },
         },
@@ -1486,23 +1632,22 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     if (isBtnTypeQuickReply) {
       return !quickReplyData.every((quickReply) => quickReply?.isSaved === true);    
     }
+		if (isMediaTypeCarousel) {
+			const carouselDisableCheck = carouselData.some((data) => {
+				return (
+					data?.bodyError || 
+					data?.bodyText === "" || 
+					(carouselMediaType === IMAGE.toLowerCase() && !data?.imageSrc) || 
+					(carouselMediaType === VIDEO.toLowerCase() && !data?.videoSrc) || 
+					!data?.buttons.every((button) => button?.isSaved === true)
+				);
+			});
+			return carouselDisableCheck;
+		}
+
     return false;
   };
 
-  const renderMediaSection = () => (
-    <>
-      {!isAuthenticationTemplate && <>{renderLabel('mediaLabel')}
-        <CapRadioGroup
-          id="whatsapp-media-radio"
-          options={mediaRadioOptions}
-          value={templateMediaType}
-          onChange={onTemplateMediaTypeChange}
-          className="whatsapp-media-radio"
-        />
-      </>}
-    </>
-  );
-
   const renderMediaComponent = () => (
     <>
       {isMediaTypeImage && renderImageComponent()}
@@ -1511,7 +1656,245 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     </>
   );
 
-  const createModeContent = (
+  const handleCarouselMediaOptions = ({ target: { value = ''} = {} }) => {
+		setCarouselData(CAROUSEL_INITIAL_DATA);
+    setCarouselMediaType(value); 
+  }
+
+  const onTabChange = (index) => {
+    setActiveIndex(index);
+  }
+
+	const handleCarouselBodyText = ({ target: { value } }, carouselIndex) => {
+		const error = carouselBodyTextErrorHandler(value, carouselIndex);
+		handleCarouselValueChange(carouselIndex, [{ fieldName: 'bodyText', value }, {fieldName: 'bodyError', value: error}]);
+	};
+
+	const onCarouselBodyAddVar = (carouselIndex) => {
+		const updateCarouselData = cloneDeep(carouselData);
+		const { bodyText } = updateCarouselData[carouselIndex];
+		const validVarArr = bodyText.match(validVarRegex) || [];
+    const tempMsg = `${bodyText}{{${validVarArr.length + 1}}}`;
+    const error = carouselBodyTextErrorHandler(tempMsg, carouselIndex);
+		handleCarouselValueChange(carouselIndex, [{ fieldName: 'bodyText', value: tempMsg }, {fieldName: 'bodyError', value: error}]);
+	}
+
+	const deleteCarouselCard = (index) => {
+		const updateCarouselData = cloneDeep(carouselData);
+		updateCarouselData.splice(index, 1);
+		setCarouselData(updateCarouselData);
+	}
+
+  const getTabPanes = (isEditMode) => {
+    return carouselData.map((data, index) => {
+      return {
+        key: index,
+        tab: index + 1,
+        content: (
+          <CapCard
+            title={`${formatMessage(messages.card)} ${index + 1}`}
+            extra={
+              !isEditMode && (
+                <CapButton
+                  type="flat"
+                  onClick={() => {
+                    deleteCarouselCard(index);
+                  }}
+                  disabled={carouselData.length === 1}
+                >
+                  <CapIcon type="delete"></CapIcon>
+                </CapButton>
+              )
+            }
+            className="whatsapp-carousel-card"
+          >
+            <CapRow>
+              {carouselMediaType === IMAGE.toLowerCase() ? (
+                <CapRow>
+                  <CapHeading type="h4">
+                    {formatMessage(messages.mediaImage)}
+                  </CapHeading>
+                  {renderImageComponent(index)}
+                </CapRow>
+              ) : (
+                <CapRow>
+                  <CapHeading type="h4">
+                    {formatMessage(messages.mediaVideo)}
+                  </CapHeading>
+                  {renderVideoComonent()}
+                </CapRow>
+              )}
+            </CapRow>
+            <CapRow>
+              <CapHeader
+                className={`${
+                  isMediaTypeImage ? "whatsapp-heading-spacing" : ""
+                }`}
+                title={
+                  <CapHeading
+                    type="h4"
+                    className="whatsapp-carousel-message-heading"
+                  >
+                    {formatMessage(messages.carouselCardBodyMessageLabel)}
+                    <CapTooltipWithInfo
+                      placement="right"
+                      className="whatsapp-text-field_spacing"
+                      autoAdjustOverflow
+                      title={
+                        <FormattedMessage
+                          {...messages.templateMessageTooltip}
+                          values={{
+                            br: <br />,
+                            var: "{{1}}"
+                          }}
+                        />
+                      }
+                    />
+                  </CapHeading>
+                }
+                suffix={
+                  <>
+                    {isEditMode
+                      ? templateStatus === WHATSAPP_STATUSES.approved &&
+                        !isAuthenticationTemplate && (
+                          <TagList
+                            label={formatMessage(globalMessages.addLabels)}
+                            onTagSelect={(tag) => onCarouselBodyTagSelect(tag, data, index)}
+                            location={location}
+                            tags={tags || []}
+                            onContextChange={handleOnTagsContextChange}
+                            injectedTags={injectedTags || {}}
+                            selectedOfferDetails={selectedOfferDetails}
+                            eventContextTags={eventContextTags}
+                          />
+                        )
+                      : !isAuthenticationTemplate && (
+                          <CapButton
+                            data-testid="suffix-button"
+                            type="flat"
+                            isAddBtn
+                            onClick={() => onCarouselBodyAddVar(index)}
+                            disabled={
+                              (data?.addedVarCount >= 5 || data?.bodyError) &&
+                              data?.bodyText
+                            }
+                          >
+                            {formatMessage(messages.addVar)}
+                          </CapButton>
+                        )}
+                  </>
+                }
+              />
+              {isEditMode ?
+                <>
+                  <CapTooltip placement="bottom" title={disabledEditTooltipRender()}>
+                    <CapRow
+                      className={`whatsapp-edit-template-message-input ${
+                        templateStatus !== WHATSAPP_STATUSES.approved &&
+                        "whatsapp-edit-disabled"
+                      }`}
+                    >
+                      {renderedEditMessage(data?.tempBodyData, CAROUSEL_TEXT, {carouselIndex: index, data: data})}
+                    </CapRow>
+                  </CapTooltip>
+                  {renderMessageLength(CAROUSEL_TEXT, 0, data)}
+                  {data?.carouselTagValidationErr && tagValidationErrorMessage(CAROUSEL_TEXT, data)}
+                  {computeTextLength(CAROUSEL_TEXT, data) > TEMPLATE_MESSAGE_MAX_LENGTH && (
+                    <CapError>
+                      {formatMessage(messages.templateMessageLengthError)}
+                    </CapError>
+                  )}
+                </>
+              :
+                <CapRow>
+                  <div className="whatsapp-create-template-message-input-wrapper">
+                    <TextArea
+                      autosize={{ minRows: 3, maxRows: 5 }}
+                      placeholder={formatMessage(
+                        messages.carouselCardBodyMessagePlaceholder
+                      )}
+                      onChange={e => handleCarouselBodyText(e, index)}
+                      errorMessage={
+                        data?.bodyError && <CapError>{data?.bodyError}</CapError>
+                      }
+                      value={data?.bodyText || ""}
+                      disabled={isAuthenticationTemplate}
+                    />
+                  </div>
+                  {renderMessageLength(CAROUSEL_TEXT, 0, data)}
+                </CapRow>
+              }
+            </CapRow>
+            <CapRow>
+              <CapHeading
+                className="whatsapp-carousel-message-heading"
+                type="h4"
+              >
+                {formatMessage(messages.btnLabel)}
+              </CapHeading>
+              {index === 0 && (
+                <CapRow>
+                  <CapInfoNote
+                    message={formatMessage(messages.carouselButtonInfo)}
+                  />
+                </CapRow>
+              )}
+              <CapRow>
+                <CapWhatsappCarouselButton
+                  carouselData={carouselData}
+                  setCarouselData={setCarouselData}
+                  carouselIndex={index}
+                  isEditFlow={isEditMode}
+                  tags={tags || []}
+                  injectedTags={injectedTags || {}}
+                  selectedOfferDetails={selectedOfferDetails}
+                />
+              </CapRow>
+            </CapRow>
+          </CapCard>
+        )
+      };
+    })
+  }
+
+  const addContent = () => {
+    const updatedCarouselData = cloneDeep(carouselData);  // Shallow copy, assuming carouselData isn't deeply nested
+    const firstCarouselButtonData = updatedCarouselData[0]?.buttons;
+  
+    const buttonArray = firstCarouselButtonData.map((button) => {
+      switch (button?.buttonType) {
+        case PHONE_NUMBER:
+          return INITIAL_CAROUSEL_PHONE_NUMBER_DATA;
+        case QUICK_REPLY:
+          return INITIAL_CAROUSEL_QUICK_REPLY_DATA;
+        default:
+          return INITIAL_CAROUSEL_URL_DATA;
+      }
+    });
+    const newCard = cloneDeep(CAROUSEL_INITIAL_DATA[0]);
+    newCard.buttons = buttonArray;
+    setCarouselData([...updatedCarouselData, newCard]);
+  };
+  
+  const checkDisableAddCarouselButton = () => {
+    return carouselData?.[0]?.buttons.some((button) => button?.isSaved === true);
+  }
+
+  const operations = (
+    <>
+			<CapDivider type="vertical" />
+			<CapButton
+				onClick={addContent}
+				type="flat"
+				className="add-carousel-content-button"
+				disabled={MAX_CAROUSEL_ALLOWED === carouselData.length || !checkDisableAddCarouselButton()}
+			>
+				<CapIcon type="plus" />
+			</CapButton>
+    </>
+  )
+
+  const createModeContent = () => (
     <>
       {/* template name */}
       <CapHeader
@@ -1540,14 +1923,6 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         value={templateName || ""}
         size="default"
       />
-      {/* template category */}
-      {renderLabel("templateCategoryLabel")}
-      <CapSelect
-        id="select-whatsapp-category"
-        options={getCategoryOptions(host)}
-        onChange={onTemplateCategoryChange}
-        value={templateCategory}
-      />
       {/* template language */}
       {renderLabel("messageLanguageLabel")}
       <CapSelect
@@ -1556,8 +1931,28 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         onChange={onTemplateLanguageChange}
         value={templateLanguage}
       />
-      {/* template media type */}
-      {renderMediaSection()}
+      <CapRow>
+        {/* template category */}
+        <CapColumn span={12}>
+          {renderLabel("templateCategoryLabel")}
+          <CapSelect
+            id="select-whatsapp-category"
+            options={getCategoryOptions(host)}
+            onChange={onTemplateCategoryChange}
+            value={templateCategory}
+          />    
+        </CapColumn>
+        {/* template media type */}
+        <CapColumn span={12}>
+          {renderLabel("mediaLabel")}
+          <CapSelect
+            id="select-whatsapp-media"
+            options={mediaTypeOptions({host, templateCategory})}
+            onChange={onTemplateMediaTypeChange}
+            value={templateMediaType}
+          />
+        </CapColumn>
+      </CapRow>
       {renderMediaComponent()}
       {/* this section is for header section in create mode */}
       {isMediaTypeText && isHostIsNotTwilio && !isAuthenticationTemplate && (
@@ -1689,8 +2084,39 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         {renderUnsubscribeText()}
       </CapRow>
       {renderMessageLength(MESSAGE_TEXT)}
+      {
+        isMediaTypeCarousel && (
+          <CapRow>
+            <CapRow className="carousel-media-selection">
+              <CapColumn className="carousel-media-selection-heading">
+                <CapHeading type="h4">
+                  {formatMessage(messages.carouselMediaType)}
+                </CapHeading>
+              </CapColumn>
+              <CapColumn>
+                <CapRadioGroup
+                  id="carousel-media-radio"
+                  options={carouselMediaOptions}
+                  value={carouselMediaType}
+                  onChange={handleCarouselMediaOptions}
+                  className="whatsapp-media-radio"
+                />
+              </CapColumn>
+            </CapRow>
+            <CapRow className="whatsapp-carousel-tab">
+              <CapTab
+                defaultActiveKey={`${defaultActiveIndex}`}
+                activeKey={activeIndex}
+                tabBarExtraContent={operations}
+                onChange={onTabChange}
+                panes={getTabPanes(false)}
+              />
+            </CapRow>
+          </CapRow>
+        )
+      }
       {/* this section if for footer in create mode */}
-      {isHostIsNotTwilio && (
+      {isHostIsNotTwilio && !isMediaTypeCarousel &&  (
         <>
           <CapHeader
             className={`${isMediaTypeImage ? "whatsapp-heading-spacing" : ""}`}
@@ -1796,7 +2222,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
           {renderMessageLength(FOOTER_TEXT)}
         </>
       )}
-      {renderButtonsSection()}
+      {!isMediaTypeCarousel && renderButtonsSection()}
     </>
   );
   //create methods end
@@ -1910,7 +2336,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   };
 
   // on change event of Text Area
-  const textAreaValueChange = ({ target: { value, id } }, type) => {
+  const textAreaValueChange = ({ target: { value, id } }, type, carousel) => {
     const numId = Number(id.slice(id.indexOf("_") + 1));
     //assign entered value to varMap
     if (type === HEADER_TEXT) {
@@ -1925,6 +2351,21 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         arr[numId] = value;
       }
       setUpdatedHeaderData(arr);
+    } else if (type === CAROUSEL_TEXT) {
+      const carouselUpdatedBodyTextData = carousel?.data?.updatedBodyText || [];
+      const arr = [...carouselUpdatedBodyTextData];
+      if (value === "") {
+        arr[numId] = id.slice(0, id.indexOf("_"));
+      } else {
+        arr[numId] = value;
+      }
+      const clonedCarouselBodyvarMap = carousel?.data?.varMap || {};
+      const bodyVarMapData = {...clonedCarouselBodyvarMap, [id]: value};
+      let tagFields = [];
+      if (!isFullMode) {
+        tagFields = tagValidation(arr, carouselBodyVarRegex, CAROUSEL_TEXT) || [];
+      }
+      handleCarouselValueChange(carousel?.carouselIndex, [...tagFields, {fieldName: "varMap", value: bodyVarMapData}, {fieldName: 'updatedBodyText', value: arr}])
     } else {
       const arr = [...updatedSmsEditor];
       varMap[id] = value;
@@ -1938,27 +2379,51 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     }
   };
 
-  const textAreaValue = (idValue, type) => {
+  const textAreaValue = (idValue, type, carousel) => {
     if (idValue >= 0) {
-      const value =
-        type === HEADER_TEXT
-          ? updatedHeaderData[idValue]
-          : updatedSmsEditor[idValue];
+      let value = [];
+      let regex = '';
+      switch (type) {
+        case HEADER_TEXT:
+          value = updatedHeaderData[idValue];
+          regex = headerValidVarRegex;
+          break;
+        case CAROUSEL_TEXT:
+          value = carousel?.data?.updatedBodyText?.[idValue];
+          regex = carouselBodyVarRegex;
+          break;
+        default:
+          value = updatedSmsEditor[idValue];
+          regex = validVarRegex;
+          break;
+      }
       //if value is there and it is not a variable return it
-      if (value && (value.match(type === HEADER_TEXT ? headerValidVarRegex : validVarRegex) || []).length === 0) {
+      if (value && (value.match(regex) || []).length === 0) {
         return value;
       }
     }
     return "";
   };
 
-  const renderedEditMessage = (messageData, type) => {
+  const renderedEditMessage = (messageData, type, carousel) => {
     const renderArray = [];
-    if (messageData?.length !== 0) {
+    if (messageData && messageData?.length !== 0) {
       let varCount = 0;
       messageData.forEach((elem, index) => {
         // if var return textarea else return text
-        if (elem.match(type === HEADER_TEXT ? headerValidVarRegex : validVarRegex)?.length > 0) {
+        let validRegex = '';
+        switch (type) {
+          case HEADER_TEXT:
+            validRegex = headerValidVarRegex;
+            break;
+          case CAROUSEL_TEXT:
+            validRegex = carouselBodyVarRegex;
+            break;
+          default:
+            validRegex = validVarRegex;
+            break;
+        }
+        if (elem.match(validRegex)?.length > 0) {
           varCount += 1;
           renderArray.push(
             <TextArea
@@ -1968,9 +2433,9 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
                 value: `{{${varCount}}}`,
               })}
               autosize={{ minRows: 1, maxRows: 3 }}
-              onChange={(e) => textAreaValueChange(e, type)}
-              value={textAreaValue(index, type)}
-              onFocus={(e) => setTextAreaId(e, type)}
+              onChange={(e) => textAreaValueChange(e, type, carousel)}
+              value={textAreaValue(index, type, carousel)}
+              onFocus={(e) => setTextAreaId(e, type, carousel?.carouselIndex)}
               disabled={templateStatus !== WHATSAPP_STATUSES.approved}
             />
           );
@@ -1987,7 +2452,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         }
       });
     }
-    if (type !== HEADER_TEXT) {
+    if (type !== HEADER_TEXT && type !== CAROUSEL_TEXT) {
       renderArray.push(renderUnsubscribeText());
     }
     return renderArray;
@@ -2008,9 +2473,17 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     }
   };
 
-  const tagValidationErrorMessage = (type) => {
-    const { unsupportedTags = [], isBraceError } =
-      type === HEADER_TEXT ? headerTagValidationResponse : tagValidationResponse;
+  const tagValidationErrorMessage = (type, carousel) => {
+    let validationResponse = {};
+    if (type === HEADER_TEXT) {
+      validationResponse = headerTagValidationResponse;
+    } else if (type === CAROUSEL_TEXT) {
+      validationResponse = carousel?.carouselTagValidationErrMessage;
+    } else {
+      validationResponse = tagValidationResponse;
+    }
+    const { unsupportedTags = [], isBraceError } = validationResponse;
+
     let tagError = "";
     if (unsupportedTags.length > 0) {
       tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
@@ -2023,7 +2496,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     return <CapError>{tagError}</CapError>;
   };
 
-  const editModeContent = (
+  const editModeContent = () => (
     <>
       {templateStatus && (
         <CapAlert
@@ -2155,51 +2628,77 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         </>
       )}
       {/* button section view in edit mode*/}
-      <CapRow>
-        {isBtnTypeQuickReply ? (
-          <CapHeading type="h4" className="whatsapp-render-heading">
-            {formatMessage(messages.quickReplyButtons)}
-          </CapHeading>
-        ) : (
-          <>
+      {isMediaTypeCarousel &&
+        (
+          <CapRow>
+            <CapRow className="carousel-media-selection">
+              <CapColumn className="carousel-media-selection-heading">
+                <CapHeading type="h4">
+                  {formatMessage(messages.carouselMediaType)}
+                </CapHeading>
+              </CapColumn>
+              <CapColumn>
+                <CapLabel type="label15">{carouselData?.[0]?.mediaType}</CapLabel>
+              </CapColumn>
+            </CapRow>
+            <CapRow className="whatsapp-carousel-tab">
+              <CapTab
+                defaultActiveKey={`${defaultActiveIndex}`}
+                activeKey={activeIndex}
+                onChange={onTabChange}
+                panes={getTabPanes(true)}
+              />
+            </CapRow>
+          </CapRow>
+        )
+      }
+      {!isMediaTypeCarousel &&
+        <CapRow>
+          {isBtnTypeQuickReply ? (
             <CapHeading type="h4" className="whatsapp-render-heading">
-              {formatMessage(messages.btnLabel)}
+              {formatMessage(messages.quickReplyButtons)}
             </CapHeading>
+          ) : (
+            <>
+              <CapHeading type="h4" className="whatsapp-render-heading">
+                {formatMessage(messages.btnLabel)}
+              </CapHeading>
+              <CapLabel type="label15">
+                {isBtnTypeCta
+                  ? formatMessage(messages.btnTypeCTA)
+                  : !isAuthenticationTemplate && formatMessage(messages.btnTypeNone)}
+              </CapLabel>
+            </>
+          )}
+          {isAuthenticationTemplate && (
             <CapLabel type="label15">
-              {isBtnTypeCta
-                ? formatMessage(messages.btnTypeCTA)
-                : !isAuthenticationTemplate && formatMessage(messages.btnTypeNone)}
+              <CapWhatsappQuickReply
+                authenticationFlow={true}
+              />
             </CapLabel>
-          </>
-        )}
-        {isAuthenticationTemplate && (
-          <CapLabel type="label15">
+          )}
+          {isBtnTypeCta && (
+            <CapWhatsappCTA
+              ctaData={ctaData}
+              updateHandler={updateHandler}
+              deleteHandler={deleteHandler}
+              isEditFlow={isEditFlow}
+              hostName={host}
+              tags={tags || []}
+              injectedTags={injectedTags || {}}
+              selectedOfferDetails={selectedOfferDetails}
+            />
+          )}
+          {isBtnTypeQuickReply && (
             <CapWhatsappQuickReply
-              authenticationFlow={true}
+              quickReplyData={quickReplyData}
+              isEditFlow={isEditFlow}
+              renderMessageLength={renderMessageLength}
+              setQuickReplyData={setQuickReplyData}
             />
-          </CapLabel>
-        )}
-        {isBtnTypeCta && (
-          <CapWhatsappCTA
-            ctaData={ctaData}
-            updateHandler={updateHandler}
-            deleteHandler={deleteHandler}
-            isEditFlow={isEditFlow}
-            hostName={host}
-            tags={tags || []}
-            injectedTags={injectedTags || {}}
-            selectedOfferDetails={selectedOfferDetails}
-          />
-        )}
-        {isBtnTypeQuickReply && (
-          <CapWhatsappQuickReply
-            quickReplyData={quickReplyData}
-            isEditFlow={isEditFlow}
-            renderMessageLength={renderMessageLength}
-            setQuickReplyData={setQuickReplyData}
-          />
-        )}
-      </CapRow>
+          )}
+        </CapRow>
+      }
     </>
   );
   //edit methods end
@@ -2265,6 +2764,11 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
             showUrlPreview,
             metaTagsDetails,
           }),
+					...(isMediaTypeCarousel && {
+						carouselData,
+						carouselMediaType,
+            isEditFlow,
+					}),
         }}
         whatsappContentLen={computeTextLength()}
         whatsappAccountName={accountName}
@@ -2272,20 +2776,34 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     );
   };
 
-  const isEditDoneDisabled = () =>
-    isTagValidationError ||
+  const isEditDoneDisabled = () => {
+    let carouselDisableCheck = false;
+    if (isMediaTypeCarousel) {
+      carouselDisableCheck = carouselData.some((data) => {
+				return (
+					data.carouselTagValidationErr || 
+					Object.values(data.varMap).some((inputValue) => inputValue === "") || 
+          computeTextLength(CAROUSEL_TEXT, data) > TEMPLATE_MESSAGE_MAX_LENGTH ||
+          (carouselMediaType === "image" && !data.imageSrc) || 
+					(carouselMediaType === "video" && !data.videoSrc) ||
+					data?.buttons.some((btn) => btn?.url?.includes("{{1}}"))
+				);
+			});
+    }
+    return (isTagValidationError ||
     isHeaderTagValidationError ||
     Object.values(varMap).some((inputValue) => inputValue === "") ||
     Object.values(headerVarMappedData).some((inputValue) => inputValue === "") ||
     computeTextLength(MESSAGE_TEXT) > TEMPLATE_MESSAGE_MAX_LENGTH ||
     computeTextLength(HEADER_TEXT) > TEMPLATE_HEADER_MAX_LENGTH ||
-    (isBtnTypeCta && ctaData.some((btn) => btn?.url?.includes("{{1}}"))) || isMediatypeValid();
+    (isBtnTypeCta && ctaData.some((btn) => btn?.url?.includes("{{1}}"))) || isMediatypeValid()) || carouselDisableCheck;
+  }
 
   return (
     <CapSpin spinning={spin}>
       <CapRow className="cap-whatsapp-creatives">
         <CapColumn span={14}>
-          {isEditFlow ? editModeContent : createModeContent}
+          {isEditFlow ? editModeContent() : createModeContent()}
           <div className="whatsapp-scroll-div" />
         </CapColumn>
         <CapColumn span={10} className="whatsapp-preview-container">
@@ -2322,7 +2840,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
             </CapButton>
           </>
         )}
-        {!isFullMode && isEditFlow && (
+        {isEditFlow && isEditFlow && (
           <CapTooltip
             title={
               isEditDoneDisabled()