@capillarytech/creatives-library 8.0.353-alpha.1 → 8.0.353-alpha.2

package/v2Containers/Viber/index.js

@@ -16,9 +16,6 @@ import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
-import CapTab from '@capillarytech/cap-ui-library/CapTab';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
 import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
 import { GA } from '@capillarytech/cap-ui-utils';
 import * as globalActions from '../Cap/actions';
@@ -47,18 +44,6 @@ import {
   NONE,
   mediaRadioOptions,
   buttonRadioOptions,
-  AI_CONTENT_BOT_DISABLED,
-  VIBER_CAROUSEL_MAX_BUTTONS,
-  VIBER_CAROUSEL_MAX_CARDS,
-  VIBER_CAROUSEL_MIN_CARDS,
-  VIBER_CAROUSEL_CARD_TITLE_MIN_LENGTH,
-  VIBER_CAROUSEL_CARD_TITLE_MAX_LENGTH,
-  VIBER_CAROUSEL_FIRST_BUTTON_TITLE_MAX_LENGTH,
-  VIBER_CAROUSEL_SECOND_BUTTON_TITLE_MAX_LENGTH,
-  VIBER_CAROUSEL_BUTTON_URL_MAX_LENGTH,
-  VIBER_CAROUSEL_IMG_HEIGHT,
-  VIBER_CAROUSEL_IMG_WIDTH,
-  VIBER_CAROUSEL_IMG_SIZE,
 } from './constants';
 import withCreatives from '../../hoc/withCreatives';
 import {
@@ -78,35 +63,6 @@ import v2ViberReducer from './reducer';
 
 
 const { TextArea } = CapInput;
-const STATIC_URL = 'STATIC_URL';
-const DYNAMIC_URL = 'DYNAMIC_URL';
-const CAROUSEL_URL_TYPE_OPTIONS = (formatMessage) => ([
-  { value: STATIC_URL, label: formatMessage(messages.carouselUrlTypeStatic) },
-  { value: DYNAMIC_URL, label: formatMessage(messages.carouselUrlTypeDynamic) },
-]);
-let carouselCardIdSeed = 0;
-const getNextCarouselCardId = () => {
-  const nextId = `viber-carousel-card-${carouselCardIdSeed}`;
-  carouselCardIdSeed += 1;
-  return nextId;
-};
-const createEmptyCarouselButton = () => ({
-  title: '',
-  action: '',
-  urlType: STATIC_URL,
-  isSaved: false,
-  hasAttemptedSave: false,
-});
-const createEmptyCarouselCard = () => ({
-  id: getNextCarouselCardId(),
-  text: '',
-  mediaUrl: '',
-  buttons: [createEmptyCarouselButton()],
-});
-const createDefaultCarouselCards = () => [
-  createEmptyCarouselCard(),
-  createEmptyCarouselCard(),
-];
 
 export const Viber = (props) => {
   const {
@@ -155,9 +111,6 @@ export const Viber = (props) => {
     viberVideoPreviewImg: '',
     duration: 0,
   });
-  const [carouselCards, setCarouselCards] = useState(() => createDefaultCarouselCards());
-  const [activeCarouselCardIndex, setActiveCarouselCardIndex] = useState(0);
-  const [showCarouselValidationErrors, setShowCarouselValidationErrors] = useState(false);
   // cta button
   const [buttonType, setButtonType] = useState(NONE);
   const [ctaData, setCtadata] = useState({});
@@ -195,37 +148,18 @@ export const Viber = (props) => {
         button = {},
         image = {},
         video = {},
-        cards = [],
-        type = "",
       } = editViberContent || {};
       const { text: ctaBtnText = "", url = "" } = button || {};
       updateTextMessageTitle(editMessageTitle);
       updateTextMessageContent(text || "");
       updateButtonText(ctaBtnText);
       updateButtonUrl(url);
-      setIsCtaSaved(!isEmpty(button));
+      setIsCtaSaved(true);
       setButtonType(button?.text ? VIBER_BUTTON_TYPES.CTA : NONE);
-      setCtadata(!isEmpty(button) ? { buttonText: button?.text, buttonURL: button?.url } : {});
-      if (type === VIBER_MEDIA_TYPES.CAROUSEL) {
-        const normalizedCards = (cards || []).map((card) => ({
-          id: card?.id || getNextCarouselCardId(),
-          text: card?.text || '',
-          mediaUrl: card?.mediaUrl || '',
-          buttons: ((card?.buttons || []).length ? card.buttons : [createEmptyCarouselButton()]).map((carouselButton) => ({
-            title: carouselButton?.title || '',
-            action: carouselButton?.action || '',
-            urlType: carouselButton?.urlType || STATIC_URL,
-            isSaved: Boolean(carouselButton?.title && carouselButton?.action),
-            hasAttemptedSave: Boolean(carouselButton?.hasAttemptedSave),
-          })),
-        }));
-        const cardsToSet = normalizedCards.length
-          ? normalizedCards
-          : createDefaultCarouselCards();
-        setTemplateMediaType(VIBER_MEDIA_TYPES.CAROUSEL);
-        setCarouselCards(cardsToSet.slice(0, VIBER_CAROUSEL_MAX_CARDS));
-        setActiveCarouselCardIndex(0);
-      } else if (!isEmpty(image)) {
+      if (!isEmpty(button)) {
+        setCtadata({ buttonText: button?.text, buttonURL: button?.url });
+      }
+      if (!isEmpty(image)) {
         setTemplateMediaType(VIBER_MEDIA_TYPES.IMAGE);
         updateImageSrc(image?.url);
       } else if (!isEmpty(video)) {
@@ -273,17 +207,6 @@ export const Viber = (props) => {
     updateButtonUrl(newUrl);
     onChangeButtonUrl({ target: { value: newUrl } });
   };
-  const onCarouselCardTagSelect = (cardIndex, data) => {
-    setCarouselCards((prevCards) => prevCards.map((card, index) => {
-      if (index !== cardIndex) {
-        return card;
-      }
-      return {
-        ...card,
-        text: `${card?.text || ''}{{${data}}}`,
-      };
-    }));
-  };
 
   const handleOnTagsContextChange = (data) => {
     const query = {
@@ -412,126 +335,15 @@ export const Viber = (props) => {
   // template media code start here
   const isMediaTypeImage = templateMediaType === VIBER_MEDIA_TYPES.IMAGE;
   const isMediaTypeVideo = templateMediaType === VIBER_MEDIA_TYPES.VIDEO;
-  const isMediaTypeCarousel = templateMediaType === VIBER_MEDIA_TYPES.CAROUSEL;
-  const getCarouselButtonTitleMaxLength = (buttonIndex) => (
-    buttonIndex === 0
-      ? VIBER_CAROUSEL_FIRST_BUTTON_TITLE_MAX_LENGTH
-      : VIBER_CAROUSEL_SECOND_BUTTON_TITLE_MAX_LENGTH
-  );
-  const renderLength = (len, max) => (
-    <CapHeading type="label1" className="viber-carousel-field-length-top">
-      {len || 0}
-/
-      {max}
-      {' '}
-      <FormattedMessage {...messages.characters} />
-    </CapHeading>
-  );
-  const getCarouselCardTextError = (cardText = '', showEmptyError = true) => {
-    const trimmedCardText = (cardText || '').trim();
-    if (!trimmedCardText && showEmptyError) {
-      return formatMessage(messages.textCannotBeEmptyError);
-    }
-    if (!trimmedCardText) {
-      return false;
-    }
-    if (trimmedCardText.length < VIBER_CAROUSEL_CARD_TITLE_MIN_LENGTH) {
-      return formatMessage(messages.carouselCardTitleMinLengthError);
-    }
-    if (cardText.length > VIBER_CAROUSEL_CARD_TITLE_MAX_LENGTH) {
-      return formatMessage(messages.carouselCardTitleMaxLengthError);
-    }
-    return false;
-  };
-  const getCarouselButtonTitleError = (button = {}, buttonIndex = 0, showEmptyError = true) => {
-    const title = button?.title || '';
-    const maxLength = getCarouselButtonTitleMaxLength(buttonIndex);
-    if (!title.trim() && showEmptyError) {
-      return formatMessage(messages.textCannotBeEmptyError);
-    }
-    if (!title.trim()) {
-      return false;
-    }
-    if (title.length > maxLength) {
-      return buttonIndex === 0
-        ? formatMessage(messages.carouselFirstButtonTitleMaxLengthError)
-        : formatMessage(messages.carouselSecondButtonTitleMaxLengthError);
-    }
-    return false;
-  };
-  const getCarouselButtonActionError = (button = {}) => {
-    const action = button?.action || '';
-    if (!action.trim()) {
-      return formatMessage(messages.urlCannotBeEmptyError);
-    }
-    if (action.length > VIBER_CAROUSEL_BUTTON_URL_MAX_LENGTH) {
-      return formatMessage(messages.carouselButtonUrlMaxLengthError);
-    }
-    if (!isUrl(action)) {
-      return formatMessage(messages.inValidUrliErrorMessage);
-    }
-    return false;
-  };
-  const hasInvalidCarouselCard = carouselCards.some(
-    (card) => Boolean(getCarouselCardTextError(card?.text)) || !isUrl(card?.mediaUrl || '')
-  );
-  const hasInvalidCarouselButton = carouselCards.some((card) => (card?.buttons || []).some(
-    (button, buttonIndex) => {
-      const hasAnyValue = Boolean(button?.title || button?.action);
-      if (buttonIndex !== 0 && !hasAnyValue) {
-        return false;
-      }
-      return Boolean(getCarouselButtonTitleError(button, buttonIndex))
-        || Boolean(getCarouselButtonActionError(button))
-        || !button?.isSaved;
-    }
-  ));
-  const isCarouselCardCountInvalid = carouselCards.length < VIBER_CAROUSEL_MIN_CARDS
-    || carouselCards.length > VIBER_CAROUSEL_MAX_CARDS;
-  const isCarouselButtonComplete = (button, buttonIndex) => {
-    const hasAnyValue = Boolean(button?.title || button?.action);
-    if (buttonIndex !== 0 && !hasAnyValue) {
-      return true;
-    }
-    return !getCarouselButtonTitleError(button, buttonIndex)
-      && !getCarouselButtonActionError(button)
-      && Boolean(button?.isSaved);
-  };
-  const isCarouselCardComplete = (card = {}) => (
-    !getCarouselCardTextError(card?.text)
-    && isUrl(card?.mediaUrl || '')
-    && (card?.buttons || []).every((button, buttonIndex) => isCarouselButtonComplete(button, buttonIndex))
-  );
-  const canAccessCarouselCardAtIndex = (targetIndex) => (
-    carouselCards.slice(0, targetIndex).every((card) => isCarouselCardComplete(card))
-  );
-  const isCarouselTabDisabled = (cardIndex) => (
-    cardIndex > 0 && !canAccessCarouselCardAtIndex(cardIndex)
-  );
 
   const onTemplateMediaTypeChange = ({ target: { value } }) => {
     setTemplateMediaType(value);
-    if (value === VIBER_MEDIA_TYPES.CAROUSEL && carouselCards.length === 0) {
-      setCarouselCards(createDefaultCarouselCards());
-      setActiveCarouselCardIndex(0);
-    }
-    if ([VIBER_MEDIA_TYPES.VIDEO, VIBER_MEDIA_TYPES.CAROUSEL].includes(value)) {
-      setButtonType(NONE);
-      setCtadata({});
-      updateButtonText('');
-      updateButtonUrl('');
-      setIsCtaSaved(false);
-    }
   };
 
   const uploadViberAsset = (file, type, fileParams) => {
     actions.uploadViberAsset(file, type, fileParams, 0);
   };
 
-  const uploadViberAssetByIndex = (file, type, fileParams, templateType = 0) => {
-    actions.uploadViberAsset(file, type, fileParams, templateType);
-  };
-
   const updateOnViberImageReUpload = useCallback(() => {
     setImageSrc("");
   }, [imageSrc]);
@@ -619,383 +431,6 @@ export const Viber = (props) => {
   );
   // template media code end here
 
-  const onCarouselCardChange = (cardIndex, key, value) => {
-    setCarouselCards((prevCards) => prevCards.map((card, index) => (
-      index === cardIndex ? { ...card, [key]: value } : card
-    )));
-  };
-
-  const addCarouselCard = () => {
-    if (carouselCards.length >= VIBER_CAROUSEL_MAX_CARDS) {
-      return;
-    }
-    if (!isCarouselCardComplete(carouselCards[carouselCards.length - 1])) {
-      return;
-    }
-    setCarouselCards((prevCards) => {
-      const updatedCards = [...prevCards, createEmptyCarouselCard()];
-      setActiveCarouselCardIndex(updatedCards.length - 1);
-      return updatedCards;
-    });
-  };
-
-  const removeCarouselCard = (cardIndex) => {
-    if (carouselCards.length <= VIBER_CAROUSEL_MIN_CARDS) {
-      return;
-    }
-    setCarouselCards((prevCards) => {
-      const updatedCards = prevCards.filter((_, index) => index !== cardIndex);
-      if (activeCarouselCardIndex >= updatedCards.length) {
-        setActiveCarouselCardIndex(updatedCards.length - 1);
-      } else if (activeCarouselCardIndex > cardIndex) {
-        setActiveCarouselCardIndex(activeCarouselCardIndex - 1);
-      }
-      return updatedCards;
-    });
-  };
-
-  const onCarouselTabChange = (cardIndex) => {
-    const targetIndex = Number(cardIndex);
-    if (Number.isNaN(targetIndex) || targetIndex < 0 || targetIndex >= carouselCards.length) {
-      return;
-    }
-    if (isCarouselTabDisabled(targetIndex)) {
-      return;
-    }
-    setActiveCarouselCardIndex(targetIndex);
-  };
-
-  const onCarouselButtonChange = (cardIndex, buttonIndex, key, value) => {
-    setCarouselCards((prevCards) => prevCards.map((card, index) => {
-      if (index !== cardIndex) {
-        return card;
-      }
-      return {
-        ...card,
-        buttons: (card?.buttons || []).map((button, idx) => (
-          idx === buttonIndex ? { ...button, [key]: value, isSaved: false } : button
-        )),
-      };
-    }));
-  };
-
-  const addCarouselButton = (cardIndex) => {
-    setCarouselCards((prevCards) => prevCards.map((card, index) => {
-      if (index !== cardIndex || (card?.buttons || []).length >= VIBER_CAROUSEL_MAX_BUTTONS) {
-        return card;
-      }
-      return {
-        ...card,
-        buttons: [...(card?.buttons || []), createEmptyCarouselButton()],
-      };
-    }));
-  };
-
-  const removeCarouselButton = (cardIndex, buttonIndex) => {
-    if (buttonIndex === 0) {
-      return;
-    }
-    setCarouselCards((prevCards) => prevCards.map((card, index) => {
-      if (index !== cardIndex) {
-        return card;
-      }
-      return {
-        ...card,
-        buttons: (card?.buttons || []).filter((_, idx) => idx !== buttonIndex),
-      };
-    }));
-  };
-
-  const saveCarouselButton = (cardIndex, buttonIndex) => {
-    setCarouselCards((prevCards) => prevCards.map((card, index) => {
-      if (index !== cardIndex) {
-        return card;
-      }
-      return {
-        ...card,
-        buttons: (card?.buttons || []).map((button, idx) => {
-          if (idx !== buttonIndex) {
-            return button;
-          }
-          const nextButtonState = {
-            ...button,
-            hasAttemptedSave: true,
-          };
-          if (getCarouselButtonTitleError(nextButtonState, buttonIndex, true) || getCarouselButtonActionError(nextButtonState)) {
-            return nextButtonState;
-          }
-          return {
-            ...nextButtonState,
-            isSaved: true,
-          };
-        }),
-      };
-    }));
-  };
-
-  const editCarouselButton = (cardIndex, buttonIndex) => {
-    setCarouselCards((prevCards) => prevCards.map((card, index) => {
-      if (index !== cardIndex) {
-        return card;
-      }
-      return {
-        ...card,
-        buttons: (card?.buttons || []).map((button, idx) => (
-          idx === buttonIndex ? { ...button, isSaved: false } : button
-        )),
-      };
-    }));
-  };
-
-  const updateCarouselImageSrc = useCallback((cardIndex, url) => {
-    const transformedUrl = getCdnUrl({ url, channelName: 'VIBER' });
-    setCarouselCards((prevCards) => prevCards.map((card, index) => (
-      index === cardIndex ? { ...card, mediaUrl: transformedUrl } : card
-    )));
-    actions.clearViberAsset(cardIndex);
-  }, []);
-
-  const updateOnCarouselImageReUpload = useCallback((cardIndex) => {
-    setCarouselCards((prevCards) => prevCards.map((card, index) => (
-      index === cardIndex ? { ...card, mediaUrl: '' } : card
-    )));
-    actions.clearViberAsset(cardIndex);
-  }, []);
-
-  const getCarouselTabPanes = () => (
-    carouselCards.map((card, cardIndex) => {
-      const isTabDisabled = isCarouselTabDisabled(cardIndex);
-      return ({
-      key: `${cardIndex}`,
-      tab: (
-        <span className={isTabDisabled ? 'viber-carousel-tab-label-disabled' : ''}>
-          {cardIndex + 1}
-        </span>
-      ),
-      disabled: isTabDisabled,
-      content: (
-        <div className="viber-carousel-card">
-          <CapRow type="flex" justify="space-between" align="middle">
-            <CapHeading type="h5">
-              {formatMessage(messages.carouselCardHeading, { index: cardIndex + 1 })}
-            </CapHeading>
-            <CapButton
-              type="flat"
-              className="viber-carousel-delete-icon-btn"
-              disabled={carouselCards.length <= VIBER_CAROUSEL_MIN_CARDS}
-              onClick={() => removeCarouselCard(cardIndex)}
-            >
-              <CapIcon type="delete" size="s" />
-            </CapButton>
-          </CapRow>
-          <CapImageUpload
-            allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX_VIBER}
-            imgSize={VIBER_CAROUSEL_IMG_SIZE}
-            imgWidth={VIBER_CAROUSEL_IMG_WIDTH}
-            imgHeight={VIBER_CAROUSEL_IMG_HEIGHT}
-            uploadAsset={uploadViberAssetByIndex}
-            isFullMode={isFullMode}
-            imageSrc={card?.mediaUrl || ''}
-            updateImageSrc={(url) => updateCarouselImageSrc(cardIndex, url)}
-            updateOnReUpload={() => updateOnCarouselImageReUpload(cardIndex)}
-            index={cardIndex}
-            className="cap-custom-image-upload"
-            key={`viber-carousel-image-upload-${card.id}`}
-            imageData={viber}
-            channel={VIBER}
-          />
-          <CapLabel type="label3" className="viber-carousel-image-recommendation">
-            Supported image types are .jpg, .jpeg, .png. Max size: 10 MB. Recommended resolution: 696 px x 600 px.
-          </CapLabel>
-          <CapRow className="viber-carousel-card-title-header" type="flex" justify="space-between">
-            <CapHeading type="h5">
-              {formatMessage(messages.carouselCardTextLabel)}
-            </CapHeading>
-            <TagList
-              key={`viber_carousel_card_tags_${cardIndex}`}
-              className="tag-list-viber"
-              moduleFilterEnabled={location?.query?.type !== "embedded"}
-              label={formatMessage(messages.addLabels)}
-              onTagSelect={(data) => onCarouselCardTagSelect(cardIndex, data)}
-              onContextChange={handleOnTagsContextChange}
-              location={location}
-              tags={tags}
-              injectedTags={injectedTags || {}}
-              id={`viber_carousel_card_tags_${cardIndex}`}
-              userLocale={localStorage.getItem("jlocale") || "en"}
-              selectedOfferDetails={selectedOfferDetails}
-              eventContextTags={eventContextTags}
-            />
-          </CapRow>
-          <CapInput
-            value={card?.text || ''}
-            onChange={({ target: { value } }) => onCarouselCardChange(cardIndex, 'text', value)}
-            placeholder={formatMessage(messages.carouselCardTextPlaceholder)}
-            errorMessage={getCarouselCardTextError(card?.text, showCarouselValidationErrors)}
-          />
-          {renderLength((card?.text || '').length, VIBER_CAROUSEL_CARD_TITLE_MAX_LENGTH)}
-          <CapHeading type="h5" className="viber-carousel-button-label">
-            {formatMessage(messages.btnLabel)}
-          </CapHeading>
-          {(card?.buttons || []).map((button, buttonIndex) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <div className="viber-carousel-button" key={`carousel-button-${card.id}-${buttonIndex}`}>
-              {button.isSaved ? (
-                <CapRow className="viber-carousel-saved-button" align="middle" type="flex">
-                  <CapIcon size="s" type="six-dots" className="viber-carousel-saved-button-icon" />
-                  <CapIcon size="s" type="reply" className="viber-carousel-saved-button-icon" />
-                  <CapLabel type="label4" className="viber-carousel-saved-button-text">
-                    {button.title}
-                  </CapLabel>
-                  <CapColumn className="button-edit-icon" onClick={() => editCarouselButton(cardIndex, buttonIndex)}>
-                    <CapIcon type="edit" size="s" />
-                  </CapColumn>
-                  {buttonIndex > 0 && (
-                    <CapButton
-                      type="flat"
-                      className="viber-carousel-delete-icon-btn"
-                      onClick={() => removeCarouselButton(cardIndex, buttonIndex)}
-                    >
-                      <CapIcon type="delete" size="s" />
-                    </CapButton>
-                  )}
-                </CapRow>
-              ) : (
-                <div className="cta-section">
-                  <CapRow
-                    type="flex"
-                    justify="space-between"
-                    align="middle"
-                    className="viber-carousel-button-title-header"
-                  >
-                    <CapHeading type="h5">
-                      {formatMessage(messages.carouselButtonTitleLabel)}
-                    </CapHeading>
-                  </CapRow>
-                  <CapInput
-                    value={button.title}
-                    onChange={({ target: { value } }) => onCarouselButtonChange(cardIndex, buttonIndex, 'title', value)}
-                    placeholder={formatMessage(messages.carouselButtonTitlePlaceholder)}
-                    errorMessage={getCarouselButtonTitleError(
-                      button,
-                      buttonIndex,
-                      showCarouselValidationErrors || Boolean(button?.hasAttemptedSave),
-                    )}
-                  />
-                  {renderLength((button?.title || '').length, getCarouselButtonTitleMaxLength(buttonIndex))}
-                  <CapRow gutter={12}>
-                    <CapColumn span={6}>
-                      <CapHeading type="h4" className="cta-label">
-                        {formatMessage(messages.carouselButtonUrlTypeLabel)}
-                      </CapHeading>
-                      <CapSelect
-                        className="viber-carousel-url-type-select"
-                        dropdownClassName="viber-carousel-url-type-dropdown"
-                        dropdownMatchSelectWidth={false}
-                        options={CAROUSEL_URL_TYPE_OPTIONS(formatMessage)}
-                        value={button?.urlType || STATIC_URL}
-                        onChange={(value) => onCarouselButtonChange(cardIndex, buttonIndex, 'urlType', value)}
-                      />
-                    </CapColumn>
-                    <CapColumn span={18}>
-                      <CapInput
-                        label={formatMessage(messages.carouselButtonActionLabel)}
-                        value={button.action}
-                        onChange={({ target: { value } }) => onCarouselButtonChange(cardIndex, buttonIndex, 'action', value)}
-                        placeholder={formatMessage(messages.carouselButtonActionPlaceholder)}
-                        errorMessage={getCarouselButtonActionError(button)}
-                      />
-                    </CapColumn>
-                  </CapRow>
-                  <div className="cta-actions">
-                    <CapButton
-                      className="cta-btn-action"
-                      onClick={() => saveCarouselButton(cardIndex, buttonIndex)}
-                    >
-                      {formatMessage(messages.save)}
-                    </CapButton>
-                    {buttonIndex > 0 && (
-                      <CapButton
-                        type="secondary"
-                        onClick={() => removeCarouselButton(cardIndex, buttonIndex)}
-                      >
-                        {formatMessage(globalMessages.delete)}
-                      </CapButton>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-          ))}
-          {(card?.buttons || []).length < VIBER_CAROUSEL_MAX_BUTTONS && (
-            <CapButton
-              type="flat"
-              className="viber-add-row-btn"
-              onClick={() => addCarouselButton(cardIndex)}
-            >
-              + Add Button
-            </CapButton>
-          )}
-        </div>
-      ),
-      });
-    })
-  );
-
-  const carouselTabOperations = (
-    <>
-      <CapDivider type="vertical" />
-      <CapButton
-        type="flat"
-        className="viber-carousel-tab-add-btn"
-        onClick={addCarouselCard}
-        disabled={
-          carouselCards.length >= VIBER_CAROUSEL_MAX_CARDS
-          || !isCarouselCardComplete(carouselCards[carouselCards.length - 1])
-        }
-      >
-        <CapIcon type="plus" />
-      </CapButton>
-    </>
-  );
-
-  const renderCarouselSection = () => (
-    <div className="viber-carousel-section">
-      <CapHeading type="h4" className="viber-render-heading">
-        {formatMessage(messages.carouselCardsLabel)}
-      </CapHeading>
-      <CapRow className="viber-carousel-tab">
-        <CapTab
-          activeKey={`${activeCarouselCardIndex}`}
-          tabBarExtraContent={carouselTabOperations}
-          onChange={onCarouselTabChange}
-          panes={getCarouselTabPanes()}
-        />
-      </CapRow>
-      {isCarouselCardCountInvalid && (
-        <CapLabel type="label3" className="viber-form-error">
-          {formatMessage(messages.carouselCardsLimitError)}
-        </CapLabel>
-      )}
-      {hasInvalidCarouselCard && (
-        <CapLabel type="label3" className="viber-form-error">
-          {formatMessage(messages.carouselCardError)}
-        </CapLabel>
-      )}
-      {hasInvalidCarouselButton && (
-        <CapLabel type="label3" className="viber-form-error">
-          {formatMessage(messages.carouselButtonError)}
-        </CapLabel>
-      )}
-    </div>
-  );
-
-  const renderInteractiveSection = () => (
-    <>
-      {isMediaTypeCarousel && renderCarouselSection()}
-    </>
-  );
-
   // Button Code start here
 
   const isBtnTypeCta = buttonType === VIBER_BUTTON_TYPES.CTA;
@@ -1019,11 +454,6 @@ export const Viber = (props) => {
         viberPreviewContent: {
           ...(isMediaTypeImage && { imageURL: imageSrc }),
           ...(isMediaTypeVideo && { videoParams: viberVideoSrcAndPreview }),
-          ...(isMediaTypeCarousel && {
-            cards: carouselCards,
-            type: VIBER_MEDIA_TYPES.CAROUSEL,
-            showCarouselEditorPreview: true,
-          }),
           buttonText,
           messageContent,
         },
@@ -1047,11 +477,6 @@ export const Viber = (props) => {
       viberPreviewContent: {
         ...(isMediaTypeImage && { imageURL: imageSrc }),
         ...(isMediaTypeVideo && { videoParams: viberVideoSrcAndPreview }),
-        ...(isMediaTypeCarousel && {
-          cards: carouselCards,
-          type: VIBER_MEDIA_TYPES.CAROUSEL,
-          showCarouselEditorPreview: true,
-        }),
         buttonText: ctaData?.buttonText || buttonText,
         messageContent,
       },
@@ -1074,19 +499,8 @@ export const Viber = (props) => {
           duration: viberVideoSrcAndPreview.duration,
         },
       }),
-      ...(isMediaTypeCarousel && {
-        type: VIBER_MEDIA_TYPES.CAROUSEL,
-        cards: carouselCards.map((card) => ({
-          text: card.text,
-          mediaUrl: card.mediaUrl,
-          buttons: (card.buttons || []).map((button) => ({
-            title: button.title,
-            action: button.action,
-          })),
-        })),
-      }),
       // Add button if present (for payload)
-      ...(!isMediaTypeCarousel && (ctaData?.buttonText || buttonText) && (ctaData?.buttonURL || buttonURL) && {
+      ...((ctaData?.buttonText || buttonText) && (ctaData?.buttonURL || buttonURL) && {
         button: {
           text: ctaData?.buttonText || buttonText,
           url: ctaData?.buttonURL || buttonURL,
@@ -1104,20 +518,7 @@ export const Viber = (props) => {
       sender: viberData?.selectedViberAccount?.sender || 'test1',
     };
     return templateContent;
-  }, [
-    isMediaTypeImage,
-    isMediaTypeVideo,
-    isMediaTypeCarousel,
-    imageSrc,
-    viberVideoSrcAndPreview,
-    carouselCards,
-    ctaData,
-    buttonText,
-    buttonURL,
-    messageContent,
-    accountName,
-    viberData,
-  ]);
+  }, [isMediaTypeImage, isMediaTypeVideo, imageSrc, viberVideoSrcAndPreview, ctaData, buttonText, buttonURL, messageContent, accountName, viberData]);
 
   // Handle Test and Preview button click
   const handleTestAndPreview = useCallback(() => {
@@ -1231,44 +632,39 @@ export const Viber = (props) => {
     setIsCtaSaved(false);
   };
 
-  const renderButtonsSection = () => {
-    if (isMediaTypeCarousel) {
-      return null;
-    }
-    return (
-      <div className="button-section">
-        <CapHeader
-          className="viber-render-heading"
-          title={(
-            <CapRow type="flex">
-              <CapHeading type="h4">
-                {formatMessage(messages.btnLabel)}
-              </CapHeading>
-              <CapHeading className="viber-optional-label">
-                {formatMessage(messages.optional)}
-              </CapHeading>
-            </CapRow>
-          )}
-          description={
-            <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
-          }
-        />
-        {templateMediaType === VIBER_MEDIA_TYPES.VIDEO && (
-          <CapLabel type="label3">
-            {formatMessage(messages.videoButtonDisabled)}
-          </CapLabel>
+  const renderButtonsSection = () => (
+    <div className="button-section">
+      <CapHeader
+        className="viber-render-heading"
+        title={(
+          <CapRow type="flex">
+            <CapHeading type="h4">
+              {formatMessage(messages.btnLabel)}
+            </CapHeading>
+            <CapHeading className="viber-optional-label">
+              {formatMessage(messages.optional)}
+            </CapHeading>
+          </CapRow>
         )}
-        <CapRadioGroup
-          options={buttonRadioOptions}
-          value={buttonType}
-          onChange={onChangeButtonType}
-          disabled={templateMediaType === VIBER_MEDIA_TYPES.VIDEO}
-          className="viber-btn-radio-group"
-        />
-        {isBtnTypeCta && ButtonViber}
-      </div>
-    );
-  };
+        description={
+          <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
+        }
+      />
+      {templateMediaType === VIBER_MEDIA_TYPES.VIDEO && (
+        <CapLabel type="label3">
+          {formatMessage(messages.videoButtonDisabled)}
+        </CapLabel>
+      )}
+      <CapRadioGroup
+        options={buttonRadioOptions}
+        value={buttonType}
+        onChange={onChangeButtonType}
+        disabled={templateMediaType === VIBER_MEDIA_TYPES.VIDEO}
+        className="viber-btn-radio-group"
+      />
+      {isBtnTypeCta && ButtonViber}
+    </div>
+  );
   // Button Code End here
 
   // to generate payload for create and edit
@@ -1287,19 +683,8 @@ export const Viber = (props) => {
       messageData.video.thumbnailUrl = viberVideoPreviewImg;
       messageData.video.duration = duration; // integer value in seconds
     }
-    if (isMediaTypeCarousel) {
-      messageData.type = VIBER_MEDIA_TYPES.CAROUSEL;
-      messageData.cards = carouselCards.map((card) => ({
-        text: card.text,
-        mediaUrl: card.mediaUrl,
-        buttons: (card.buttons || []).map((button) => ({
-          title: button.title,
-          action: button.action,
-        })),
-      }));
-    }
 
-    if (!isMediaTypeCarousel && !isEmpty(ctaData)) {
+    if (!isEmpty(ctaData)) {
       messageData.button = {};
       messageData.button.text = ctaData?.buttonText;
       messageData.button.url = ctaData?.buttonURL;
@@ -1308,15 +693,13 @@ export const Viber = (props) => {
       versions: {
         base: {
           content: {
-            ...(isMediaTypeCarousel && {
-              destinations: [
-                {
-                  to: {
-                    phoneNumber: "{{viber_user_id}}",
-                  },
+            destinations: [
+              {
+                to: {
+                  phoneNumber: "{{viber_user_id}}",
                 },
-              ],
-            }),
+              },
+            ],
             content: {...messageData},
           },
         },
@@ -1446,7 +829,6 @@ export const Viber = (props) => {
             {renderMediaSection()}
             {renderMediaComponent()}
             {renderTextAreaViber()}
-            {renderInteractiveSection()}
             {renderButtonsSection()}
             <div style={{marginBottom: '100px'}} />
           </CapColumn>