@capillarytech/creatives-library 8.0.87-alpha.2 → 8.0.87-alpha.20

package/v2Containers/Whatsapp/index.js

@@ -5,7 +5,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import { get, isEmpty, cloneDeep, isEqual, set } from 'lodash';
+import { get, isEmpty, cloneDeep, isEqual } from 'lodash';
 import styled from 'styled-components';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
@@ -26,10 +26,6 @@ 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 {
@@ -37,8 +33,6 @@ import {
   CAP_SPACE_24,
   CAP_SPACE_32,
   CAP_WHITE,
-  FONT_COLOR_02,
-  FONT_COLOR_01,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { makeSelectWhatsapp, makeSelectAccount } from './selectors';
 import {
@@ -86,13 +80,6 @@ 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,
@@ -118,8 +105,6 @@ 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';
@@ -154,7 +139,6 @@ 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(
@@ -216,14 +200,9 @@ 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 || {};
@@ -236,7 +215,6 @@ 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};
@@ -313,9 +291,8 @@ export const Whatsapp = (props) => {
         buttons = [],
         videoPreviewImg = '',
         whatsappDocParams = {},
-        whatsappMedia: { header = '', footer = '', headerVarMapped = [] } = {},
+        whatsappMedia: { header = '', footer = '' } = {},
         isPreviewUrl = false,
-        carouselData : editCarouselData = [],
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
@@ -340,12 +317,6 @@ 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) => {
@@ -377,42 +348,11 @@ export const Whatsapp = (props) => {
       }
       computeTempMsgArray();
       if (header && (mediaType === WHATSAPP_MEDIA_TYPES.TEXT && isHostIsNotTwilio)) {
-        const { clonedVarMap, updatedText, tempData } = computeTextMessage(header, headerVarMapped, headerValidVarRegex);
-        setTempHeaderData(tempData);
-        setHeaderVarMappedData(clonedVarMap);
-        setUpdatedHeaderData(updatedText);
+        computeHeaderMsgArray();
       }
     }
   }, [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' && {
-            imageSrc: carousel?.imageUrl,
-          }),
-          ...(carousel.mediaType === 'video' && {
-            videoSrc: carousel?.videoUrl,
-            videoPreviewImg,
-          }),
-          buttons: carousel?.buttons?.map((button) => ({
-            ...button,
-            buttonType: button?.type,
-          })),
-        };
-      })
-    );
-  };
-
   const converStringToVarArr = (validVarArr, content) => {
     const templateVarArray = [];
     while (content?.length !== 0) {
@@ -431,32 +371,34 @@ export const Whatsapp = (props) => {
     return templateVarArray;
   }
 
-  const computeTextMessage = (msg, varMap, regex) => {
-    const validVarArr = msg?.match(regex) || [];
+  const computeHeaderMsgArray = () => {
+    let msg = get(editContent, `whatsappMedia.header`, '');
+    const validVarArr = msg?.match(headerValidVarRegex) || [];
     //conerting msg string to variable arr
     const templateHeaderArray = converStringToVarArr(validVarArr, msg);
+    setTempHeaderData(templateHeaderArray);
     if (templateHeaderArray?.length !== 0) {
-      let clonedVarMap = {};
-      if (!isEmpty(varMap)) {
-        clonedVarMap = cloneDeep(varMap);
+      let headerVarMap = {};
+      const {
+        whatsappMedia: { headerVarMapped = {} },
+      } = editContent;
+      if (!isEmpty(headerVarMapped)) {
+        headerVarMap = cloneDeep(headerVarMapped);
       } else {
         templateHeaderArray?.forEach((headerValue, i) => {
-          if (headerValue?.match(regex)?.length > 0) {
-            clonedVarMap[`${headerValue}_${i}`] = '';
+          if (headerValue?.match(headerValidVarRegex)?.length > 0) {
+            headerVarMap[`${headerValue}_${i}`] = '';
           }
         })
       }
       const arr = [...templateHeaderArray];
-      for (const key in clonedVarMap) {
-        if (clonedVarMap[key] !== '') {
-          arr[key.slice(key.indexOf('_') + 1)] = clonedVarMap[key];
+      for (const key in headerVarMap) {
+        if (headerVarMap[key] !== '') {
+          arr[key.slice(key.indexOf('_') + 1)] = headerVarMap[key];
         }
       }
-      return {
-        clonedVarMap,
-        updatedText: arr,
-        tempData: templateHeaderArray,
-      }
+      setHeaderVarMappedData(headerVarMap);
+      setUpdatedHeaderData(arr);
     }
   };
 
@@ -573,8 +515,6 @@ 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);
@@ -626,15 +566,6 @@ 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;
@@ -658,7 +589,6 @@ export const Whatsapp = (props) => {
       updatedData = [],
       areaId = "",
       regex,
-      carouselIndex,
     } = tagSelectData;
     if (mapData && updatedData) {
       const numId = Number(areaId?.slice(areaId?.indexOf("_") + 1));
@@ -670,26 +600,15 @@ export const Whatsapp = (props) => {
         }
         const messageData = `${arr[numId]}{{${data}}}`;
         arr[numId] = messageData;
-        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);
+        if (type === HEADER_TEXT) {
+          setHeaderVarMappedData((prevState) => ({
+            ...prevState,
+            [areaId]: messageData,
+          }));
+          setUpdatedHeaderData(arr);
+        } else {
+          varMap[areaId] = messageData;
+          setUpdatedSmsEditor(arr);
         }
       }
     }
@@ -717,25 +636,10 @@ 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, carouselIndex) => {
+  const setTextAreaId = ({ target: { id } }, type) => {
     if (type === HEADER_TEXT) {
       setHeaderTextAreaId(id);
-    } else if (type === CAROUSEL_TEXT) {
-      handleCarouselValueChange(carouselIndex, [{fieldName: "textAreaId", value: id}])
     } else {
       updateTextAreaId(id);
     }
@@ -774,6 +678,55 @@ 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);
@@ -804,7 +757,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     });
   };
 
-  const computeTextLength = (type, carousel) => {
+  const computeTextLength = (type) => {
     switch (type) {
       case MESSAGE_TEXT:
         let whatsappContentLen = 0;
@@ -821,12 +774,6 @@ 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) +
@@ -837,10 +784,10 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   };
   
   //used by create and edit
-  const renderMessageLength = (type, currentLength, carousel) => (
+  const renderMessageLength = (type, currentLength) => (
     <CapHeading type="label1" className="whatsapp-render-message-length">
       {formatMessage(messages.templateMessageLength, {
-        currentLength: currentLength ? currentLength : computeTextLength(type, carousel),
+        currentLength: currentLength ? currentLength : computeTextLength(type),
         maxLength: maxLengthByType(type),
       })}
     </CapHeading>
@@ -987,7 +934,6 @@ 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:
@@ -1036,57 +982,37 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       hostName: host,
     };
     if (isFullMode && !isEditFlow && host === HOST_GUPSHUP) {
-			if (isMediaTypeCarousel) {
-        setGupshupMediaFile((prevState) => {
-          const newArray = [...prevState];
-          newArray[activeIndex] = file;
-          return newArray;
-        });
-			} else {
-        setGupshupMediaFile(file);
-      }
+      setGupshupMediaFile(file);
     }
     actions.uploadWhatsappAsset(file, type, fileParams, 0, whatsappParams);
   };
 
   const setUpdateWhatsappImageSrc = useCallback(
     (filePath, fileHandle) => {
-			if (isMediaTypeCarousel) {
-				handleCarouselValueChange(parseInt(activeIndex), [{fieldName: "imageSrc", value: filePath}, {fieldName: "karixFileHandle", value: fileHandle}]);
-			} else {
-				setWhatsappImageSrc(filePath);
-      	setKarixFileHandle(fileHandle);
-			}
+      setWhatsappImageSrc(filePath);
+      setKarixFileHandle(fileHandle);
       actions.clearWhatsappAsset(0);
     },
-    [whatsappImageSrc, isMediaTypeCarousel, activeIndex, carouselData],
+    [whatsappImageSrc],
   );
 
   const updateOnWhatsappImageReUpload = useCallback(() => {
-		if (isMediaTypeCarousel) {
-			handleCarouselValueChange(parseInt(activeIndex), [{fieldName: "imageSrc", value: ''}, {fieldName: "karixFileHandle", value: ''}]);
-		} else {
-			setWhatsappImageSrc('');
-    	setKarixFileHandle('');
-		}
-  }, [whatsappImageSrc, isMediaTypeCarousel, activeIndex, carouselData]);
+    setWhatsappImageSrc('');
+    setKarixFileHandle('');
+  }, [whatsappImageSrc]);
 
   const setUpdateWhatsappVideoSrc = useCallback(
     (index, data) => {
       const { videoSrc = '', previewUrl = '', fileHandle = '' } = data;
-			if (isMediaTypeCarousel) {
-				handleCarouselValueChange(parseInt(activeIndex), [{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);
-			}
+      setWhatsappVideoSrcAndPreview({
+        whatsappVideoSrc: videoSrc,
+        whatsappVideoPreviewImg: previewUrl,
+      });
+      setKarixFileHandle(fileHandle);
+      updateAssetList(data);
       actions.clearWhatsappAsset(0);
     },
-    [whatsappVideoSrcAndPreview?.whatsappVideoSrc, isMediaTypeCarousel, activeIndex],
+    [whatsappVideoSrcAndPreview?.whatsappVideoSrc],
   );
 
   const setUpdateWhatsappDocSrc = useCallback(
@@ -1103,14 +1029,14 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     setKarixFileHandle('');
   }, [whatsappDocSource]);
 
-  const renderImageComponent = (carouselIndex) => (
+  const renderImageComponent = () => (
     <CapImageUpload
       style={{ paddingTop: '20px' }}
       allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
       imgSize={WHATSAPP_IMG_SIZE}
       uploadAsset={uploadWhatsappAsset}
       isFullMode={isFullMode}
-      imageSrc={isMediaTypeCarousel ? (carouselData?.[carouselIndex]?.imageSrc || '') : whatsappImageSrc}
+      imageSrc={whatsappImageSrc}
       updateImageSrc={setUpdateWhatsappImageSrc}
       updateOnReUpload={updateOnWhatsappImageReUpload}
       index={0}
@@ -1128,7 +1054,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       videoSize={WHATSAPP_VIDEO_SIZE}
       isFullMode={isFullMode}
       uploadAsset={uploadWhatsappAsset}
-      uploadedAssetList={carouselData?.[activeIndex]?.assetList || []}
+      uploadedAssetList={assetList}
       onVideoUploadUpdateAssestList={setUpdateWhatsappVideoSrc}
       videoData={editData}
       className="cap-custom-video-upload"
@@ -1202,13 +1128,6 @@ 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);
   };
@@ -1221,8 +1140,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     setTemplateLanguage(value);
   };
 
-  const onTemplateMediaTypeChange = (value) => {
-		setCarouselData(CAROUSEL_INITIAL_DATA);
+  const onTemplateMediaTypeChange = ({ target: { value } }) => {
     setTemplateMediaType(value);
   };
 
@@ -1297,27 +1215,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     return errorMessage;
   };
 
-	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) => {
+  const variableErrorHandling = (value, type) => {
     let errorMessage = false;
     const validVarArr = value.match(type === HEADER_TEXT ? headerValidVarRegex : validVarRegex) || [];
     const validVarSet = [...new Set(validVarArr)];
@@ -1360,7 +1258,6 @@ 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 }]);
         }
       }
     }
@@ -1420,43 +1317,6 @@ 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" && {
-					imageUrl: getCdnUrl({ url: imageSrc, channelName: WHATSAPP }),
-				}),
-				...(carouselMediaType === "video" && {
-					videoUrl: videoSrc,
-					videoPreviewImg,
-				}),
-				karixFileHandle,
-				buttons: carouselButtons,
-        mediaType: carouselMediaType,
-        ...(!isFullMode && {
-          cardVarMapped: carouselVarMap,
-          cardTemplate: tempBodyData.join(""),
-        })
-			};
-		});
-	}
-
   const createPayload = () => {
     let mediaParams = {};
     const { whatsappVideoSrc = '', whatsappVideoPreviewImg = '' } = whatsappVideoSrcAndPreview;
@@ -1527,9 +1387,6 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
               }),
               securityRecommendation: unsubscribeRequired,
               codeExpiryMinutes: expiryMinutes,
-							...(isMediaTypeCarousel && {
-								carouselData: getCarouselPayload()
-							})
             },
           },
         },
@@ -1629,22 +1486,23 @@ 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" && !data.imageSrc) || 
-					(carouselMediaType === "video" && !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()}
@@ -1653,245 +1511,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     </>
   );
 
-  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" ? (
-                <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;
-      }
-    });
-  
-    CAROUSEL_INITIAL_DATA[0].buttons = buttonArray;
-    setCarouselData([...updatedCarouselData, CAROUSEL_INITIAL_DATA[0]]);
-  };
-  
-  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 = () => (
+  const createModeContent = (
     <>
       {/* template name */}
       <CapHeader
@@ -1936,32 +1556,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         onChange={onTemplateLanguageChange}
         value={templateLanguage}
       />
-      <CapRow>
-        {/* template category */}
-        <CapColumn span={12}>
-          {renderLabel("templateCategoryLabel")}
-          <CapSelect
-            id="select-whatsapp-category"
-            options={
-              host === HOST_TWILIO
-                ? twilioCategoryOptions
-                : karixGupshupCategoryOptions
-            }
-            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>
+      {/* template media type */}
+      {renderMediaSection()}
       {renderMediaComponent()}
       {/* this section is for header section in create mode */}
       {isMediaTypeText && isHostIsNotTwilio && !isAuthenticationTemplate && (
@@ -2093,39 +1689,8 @@ 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 && !isMediaTypeCarousel &&  (
+      {isHostIsNotTwilio && (
         <>
           <CapHeader
             className={`${isMediaTypeImage ? "whatsapp-heading-spacing" : ""}`}
@@ -2231,7 +1796,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
           {renderMessageLength(FOOTER_TEXT)}
         </>
       )}
-      {!isMediaTypeCarousel && renderButtonsSection()}
+      {renderButtonsSection()}
     </>
   );
   //create methods end
@@ -2345,7 +1910,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   };
 
   // on change event of Text Area
-  const textAreaValueChange = ({ target: { value, id } }, type, carousel) => {
+  const textAreaValueChange = ({ target: { value, id } }, type) => {
     const numId = Number(id.slice(id.indexOf("_") + 1));
     //assign entered value to varMap
     if (type === HEADER_TEXT) {
@@ -2360,21 +1925,6 @@ 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;
@@ -2388,51 +1938,27 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     }
   };
 
-  const textAreaValue = (idValue, type, carousel) => {
+  const textAreaValue = (idValue, type) => {
     if (idValue >= 0) {
-      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;
-      }
+      const value =
+        type === HEADER_TEXT
+          ? updatedHeaderData[idValue]
+          : updatedSmsEditor[idValue];
       //if value is there and it is not a variable return it
-      if (value && (value.match(regex) || []).length === 0) {
+      if (value && (value.match(type === HEADER_TEXT ? headerValidVarRegex : validVarRegex) || []).length === 0) {
         return value;
       }
     }
     return "";
   };
 
-  const renderedEditMessage = (messageData, type, carousel) => {
+  const renderedEditMessage = (messageData, type) => {
     const renderArray = [];
-    if (messageData && messageData?.length !== 0) {
+    if (messageData?.length !== 0) {
       let varCount = 0;
       messageData.forEach((elem, index) => {
         // if var return textarea else return text
-        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) {
+        if (elem.match(type === HEADER_TEXT ? headerValidVarRegex : validVarRegex)?.length > 0) {
           varCount += 1;
           renderArray.push(
             <TextArea
@@ -2442,9 +1968,9 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
                 value: `{{${varCount}}}`,
               })}
               autosize={{ minRows: 1, maxRows: 3 }}
-              onChange={(e) => textAreaValueChange(e, type, carousel)}
-              value={textAreaValue(index, type, carousel)}
-              onFocus={(e) => setTextAreaId(e, type, carousel?.carouselIndex)}
+              onChange={(e) => textAreaValueChange(e, type)}
+              value={textAreaValue(index, type)}
+              onFocus={(e) => setTextAreaId(e, type)}
               disabled={templateStatus !== WHATSAPP_STATUSES.approved}
             />
           );
@@ -2461,7 +1987,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         }
       });
     }
-    if (type !== HEADER_TEXT && type !== CAROUSEL_TEXT) {
+    if (type !== HEADER_TEXT) {
       renderArray.push(renderUnsubscribeText());
     }
     return renderArray;
@@ -2482,17 +2008,9 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     }
   };
 
-  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;
-
+  const tagValidationErrorMessage = (type) => {
+    const { unsupportedTags = [], isBraceError } =
+      type === HEADER_TEXT ? headerTagValidationResponse : tagValidationResponse;
     let tagError = "";
     if (unsupportedTags.length > 0) {
       tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
@@ -2505,7 +2023,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     return <CapError>{tagError}</CapError>;
   };
 
-  const editModeContent = () => (
+  const editModeContent = (
     <>
       {templateStatus && (
         <CapAlert
@@ -2637,77 +2155,51 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         </>
       )}
       {/* button section view in edit mode*/}
-      {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 ? (
+      <CapRow>
+        {isBtnTypeQuickReply ? (
+          <CapHeading type="h4" className="whatsapp-render-heading">
+            {formatMessage(messages.quickReplyButtons)}
+          </CapHeading>
+        ) : (
+          <>
             <CapHeading type="h4" className="whatsapp-render-heading">
-              {formatMessage(messages.quickReplyButtons)}
+              {formatMessage(messages.btnLabel)}
             </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">
-              <CapWhatsappQuickReply
-                authenticationFlow={true}
-              />
+              {isBtnTypeCta
+                ? formatMessage(messages.btnTypeCTA)
+                : !isAuthenticationTemplate && formatMessage(messages.btnTypeNone)}
             </CapLabel>
-          )}
-          {isBtnTypeCta && (
-            <CapWhatsappCTA
-              ctaData={ctaData}
-              updateHandler={updateHandler}
-              deleteHandler={deleteHandler}
-              isEditFlow={isEditFlow}
-              hostName={host}
-              tags={tags || []}
-              injectedTags={injectedTags || {}}
-              selectedOfferDetails={selectedOfferDetails}
-            />
-          )}
-          {isBtnTypeQuickReply && (
+          </>
+        )}
+        {isAuthenticationTemplate && (
+          <CapLabel type="label15">
             <CapWhatsappQuickReply
-              quickReplyData={quickReplyData}
-              isEditFlow={isEditFlow}
-              renderMessageLength={renderMessageLength}
-              setQuickReplyData={setQuickReplyData}
+              authenticationFlow={true}
             />
-          )}
-        </CapRow>
-      }
+          </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>
     </>
   );
   //edit methods end
@@ -2773,11 +2265,6 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
             showUrlPreview,
             metaTagsDetails,
           }),
-					...(isMediaTypeCarousel && {
-						carouselData,
-						carouselMediaType,
-            isEditFlow,
-					}),
         }}
         whatsappContentLen={computeTextLength()}
         whatsappAccountName={accountName}
@@ -2785,34 +2272,20 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     );
   };
 
-  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 ||
+  const isEditDoneDisabled = () =>
+    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()) || carouselDisableCheck;
-  }
+    (isBtnTypeCta && ctaData.some((btn) => btn?.url?.includes("{{1}}"))) || isMediatypeValid();
 
   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">
@@ -2849,7 +2322,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
             </CapButton>
           </>
         )}
-        {isEditFlow && (
+        {!isFullMode && isEditFlow && (
           <CapTooltip
             title={
               isEditDoneDisabled()