@capillarytech/creatives-library 8.0.359 → 8.0.360-alpha.0

package/v2Containers/Viber/index.js

@@ -16,6 +16,9 @@ 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';
@@ -44,6 +47,17 @@ import {
   NONE,
   mediaRadioOptions,
   buttonRadioOptions,
+  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 {
@@ -63,6 +77,36 @@ 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,
+  hasTouchedAction: false,
+});
+const createEmptyCarouselCard = () => ({
+  id: getNextCarouselCardId(),
+  text: '',
+  mediaUrl: '',
+  buttons: [createEmptyCarouselButton()],
+});
+const createDefaultCarouselCards = () => [
+  createEmptyCarouselCard(),
+  createEmptyCarouselCard(),
+];
 
 export const Viber = (props) => {
   const {
@@ -111,6 +155,9 @@ 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({});
@@ -148,18 +195,38 @@ export const Viber = (props) => {
         button = {},
         image = {},
         video = {},
+        cards = [],
+        type = "",
       } = editViberContent || {};
       const { text: ctaBtnText = "", url = "" } = button || {};
       updateTextMessageTitle(editMessageTitle);
       updateTextMessageContent(text || "");
       updateButtonText(ctaBtnText);
       updateButtonUrl(url);
-      setIsCtaSaved(true);
+      setIsCtaSaved(!isEmpty(button));
       setButtonType(button?.text ? VIBER_BUTTON_TYPES.CTA : NONE);
-      if (!isEmpty(button)) {
-        setCtadata({ buttonText: button?.text, buttonURL: button?.url });
-      }
-      if (!isEmpty(image)) {
+      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),
+            hasTouchedAction: Boolean(carouselButton?.hasTouchedAction),
+          })),
+        }));
+        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)) {
         setTemplateMediaType(VIBER_MEDIA_TYPES.IMAGE);
         updateImageSrc(image?.url);
       } else if (!isEmpty(video)) {
@@ -207,6 +274,17 @@ 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 = {
@@ -335,15 +413,130 @@ 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 trimmedTitle = title.trim();
+    const maxLength = getCarouselButtonTitleMaxLength(buttonIndex);
+    if (!trimmedTitle && showEmptyError) {
+      return formatMessage(messages.textCannotBeEmptyError);
+    }
+    if (!trimmedTitle) {
+      return false;
+    }
+    if (title.length > maxLength) {
+      return buttonIndex === 0
+        ? formatMessage(messages.carouselFirstButtonTitleMaxLengthError)
+        : formatMessage(messages.carouselSecondButtonTitleMaxLengthError);
+    }
+    return false;
+  };
+  const getCarouselButtonActionError = (button = {}, showEmptyError = true) => {
+    const action = button?.action || '';
+    if (!action?.trim() && showEmptyError) {
+      return formatMessage(messages.urlCannotBeEmptyError);
+    }
+    if (!action?.trim()) {
+      return false;
+    }
+    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]);
@@ -431,6 +624,416 @@ 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,
+              ...(key === 'action' && value?.trim() ? { hasTouchedAction: true } : {}),
+            }
+            : button
+        )),
+      };
+    }));
+  };
+
+  const markCarouselButtonActionTouched = (cardIndex, buttonIndex) => {
+    setCarouselCards((prevCards) => prevCards.map((card, index) => {
+      if (index !== cardIndex) {
+        return card;
+      }
+      return {
+        ...card,
+        buttons: (card?.buttons || []).map((button, idx) => (
+          idx === buttonIndex ? { ...button, hasTouchedAction: true } : 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) => {
+    setCarouselCards((prevCards) => prevCards.map((card, index) => {
+      if (index !== cardIndex) {
+        return card;
+      }
+      const buttons = card?.buttons || [];
+      if (buttons.length <= 1) {
+        return card;
+      }
+      return {
+        ...card,
+        buttons: buttons.filter((_, idx) => idx !== buttonIndex),
+      };
+    }));
+  };
+
+  const canRemoveCarouselButton = (card) => (card?.buttons || []).length > 1;
+
+  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}
+          />
+          {showCarouselValidationErrors && !isUrl(card?.mediaUrl || '') && (
+            <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>
+                  <CapRow className="viber-carousel-saved-button-actions" align="middle" type="flex">
+                    <CapColumn className="button-edit-icon" onClick={() => editCarouselButton(cardIndex, buttonIndex)}>
+                      <CapIcon type="edit" size="s" />
+                    </CapColumn>
+                    {canRemoveCarouselButton(card) && (
+                      <CapColumn
+                        className="button-edit-icon viber-carousel-delete-icon"
+                        onClick={() => removeCarouselButton(cardIndex, buttonIndex)}
+                      >
+                        <CapIcon type="delete" size="s" />
+                      </CapColumn>
+                    )}
+                  </CapRow>
+                </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)}
+                        onBlur={() => markCarouselButtonActionTouched(cardIndex, buttonIndex)}
+                        placeholder={formatMessage(messages.carouselButtonActionPlaceholder)}
+                        errorMessage={getCarouselButtonActionError(
+                          button,
+                          showCarouselValidationErrors
+                            || Boolean(button?.hasAttemptedSave)
+                            || Boolean(button?.hasTouchedAction),
+                        )}
+                      />
+                    </CapColumn>
+                  </CapRow>
+                  <div className="cta-actions">
+                    <CapButton
+                      className="cta-btn-action"
+                      onClick={() => saveCarouselButton(cardIndex, buttonIndex)}
+                    >
+                      {formatMessage(messages.save)}
+                    </CapButton>
+                    {canRemoveCarouselButton(card) && (
+                      <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;
@@ -454,6 +1057,11 @@ export const Viber = (props) => {
         viberPreviewContent: {
           ...(isMediaTypeImage && { imageURL: imageSrc }),
           ...(isMediaTypeVideo && { videoParams: viberVideoSrcAndPreview }),
+          ...(isMediaTypeCarousel && {
+            cards: carouselCards,
+            type: VIBER_MEDIA_TYPES.CAROUSEL,
+            showCarouselEditorPreview: true,
+          }),
           buttonText,
           messageContent,
         },
@@ -477,6 +1085,11 @@ 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,
       },
@@ -499,8 +1112,19 @@ 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)
-      ...((ctaData?.buttonText || buttonText) && (ctaData?.buttonURL || buttonURL) && {
+      ...(!isMediaTypeCarousel && (ctaData?.buttonText || buttonText) && (ctaData?.buttonURL || buttonURL) && {
         button: {
           text: ctaData?.buttonText || buttonText,
           url: ctaData?.buttonURL || buttonURL,
@@ -518,7 +1142,20 @@ export const Viber = (props) => {
       sender: viberData?.selectedViberAccount?.sender || 'test1',
     };
     return templateContent;
-  }, [isMediaTypeImage, isMediaTypeVideo, imageSrc, viberVideoSrcAndPreview, ctaData, buttonText, buttonURL, messageContent, accountName, viberData]);
+  }, [
+    isMediaTypeImage,
+    isMediaTypeVideo,
+    isMediaTypeCarousel,
+    imageSrc,
+    viberVideoSrcAndPreview,
+    carouselCards,
+    ctaData,
+    buttonText,
+    buttonURL,
+    messageContent,
+    accountName,
+    viberData,
+  ]);
 
   // Handle Test and Preview button click
   const handleTestAndPreview = useCallback(() => {
@@ -632,39 +1269,44 @@ export const Viber = (props) => {
     setIsCtaSaved(false);
   };
 
-  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>
+  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>
         )}
-        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>
-  );
+        <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
@@ -683,8 +1325,19 @@ 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 (!isEmpty(ctaData)) {
+    if (!isMediaTypeCarousel && !isEmpty(ctaData)) {
       messageData.button = {};
       messageData.button.text = ctaData?.buttonText;
       messageData.button.url = ctaData?.buttonURL;
@@ -693,13 +1346,15 @@ export const Viber = (props) => {
       versions: {
         base: {
           content: {
-            destinations: [
-              {
-                to: {
-                  phoneNumber: "{{viber_user_id}}",
+            ...(isMediaTypeCarousel && {
+              destinations: [
+                {
+                  to: {
+                    phoneNumber: "{{viber_user_id}}",
+                  },
                 },
-              },
-            ],
+              ],
+            }),
             content: {...messageData},
           },
         },
@@ -780,6 +1435,20 @@ export const Viber = (props) => {
     });
   };
 
+  const hasCarouselValidationError = isCarouselCardCountInvalid || hasInvalidCarouselCard || hasInvalidCarouselButton;
+  const getDoneHandler = () => {
+    const doneCallback = onDoneCallback();
+    return () => {
+      if (isMediaTypeCarousel) {
+        setShowCarouselValidationErrors(true);
+        if (hasCarouselValidationError) {
+          return;
+        }
+      }
+      doneCallback();
+    };
+  };
+
   const isDisableDone = () => {
     // textbox area should not empty and should have max 1000 charactor
     if (messageContent?.trim() === '' || errorMessageTextarea) {
@@ -800,6 +1469,9 @@ export const Viber = (props) => {
     if ((isMediaTypeImage || isMediaTypeVideo) && viber?.assetUploading) {
       return true;
     }
+    if (isMediaTypeCarousel && (isCarouselCardCountInvalid || hasInvalidCarouselCard || hasInvalidCarouselButton)) {
+      return true;
+    }
     if (isBtnTypeCta && !isCtaSaved) {
       return true;
     }
@@ -829,6 +1501,7 @@ export const Viber = (props) => {
             {renderMediaSection()}
             {renderMediaComponent()}
             {renderTextAreaViber()}
+            {renderInteractiveSection()}
             {renderButtonsSection()}
             <div style={{marginBottom: '100px'}} />
           </CapColumn>
@@ -858,7 +1531,7 @@ export const Viber = (props) => {
         </CapRow>
         <ViberFooter>
           <CapButton
-            onClick={onDoneCallback()}
+            onClick={getDoneHandler()}
             disabled={isDisableDone()}
             className="create-msg viber-create-msg"
           >