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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.353-alpha.1",
+  "version": "8.0.353-alpha.3",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js

@@ -29,6 +29,9 @@ import videoPlay from '../../../assets/videoPlay.svg';
 const smsMobileAndroid = require('../../../assets/Android.png');
 const smsMobileIos = require('../../../assets/iOS.png');
 
+const getTrimmedText = (value = '') => (value ?? '').trim();
+const hasTrimmedText = (value = '') => Boolean(getTrimmedText(value));
+
 const ViberPreviewContent = ({
   content,
   device,
@@ -58,10 +61,10 @@ const ViberPreviewContent = ({
 
   const cardHasMeaningfulContent = (card) => {
     if (!card || typeof card !== 'object') return false;
-    if ((card.text || '').trim()) return true;
-    if ((card.mediaUrl || '').trim()) return true;
-    const buttons = card.buttons || [];
-    return buttons.some((button) => (button?.title || '').trim());
+    if (hasTrimmedText(card?.text)) return true;
+    if (hasTrimmedText(card?.mediaUrl)) return true;
+    const buttons = card?.buttons ?? [];
+    return buttons.some((button) => hasTrimmedText(button?.title));
   };
 
   const hasMeaningfulCarousel =
@@ -76,8 +79,8 @@ const ViberPreviewContent = ({
   const previewCarouselCards =
     hasCarouselContent && Array.isArray(cards) && cards.length ? cards : hasCarouselContent ? [{}] : [];
 
-  const trimmedMessageContent = (messageContent || '').trim();
-  const trimmedButtonText = (buttonText || '').trim();
+  const trimmedMessageContent = getTrimmedText(messageContent);
+  const trimmedButtonText = getTrimmedText(buttonText);
 
   // Get account name (first letter for icon)
   const accountIcon = (accountName || brandName || 'V')[0]?.toUpperCase();
@@ -136,7 +139,7 @@ const ViberPreviewContent = ({
   // Check if there's any content to display (whitespace-only strings do not count)
   const hasContent = Boolean(
     trimmedMessageContent
-    || (imageURL || '').trim()
+    || hasTrimmedText(imageURL)
     || videoParams?.viberVideoSrc
     || trimmedButtonText
     || hasMeaningfulCarousel
@@ -168,7 +171,7 @@ const ViberPreviewContent = ({
         {hasContent && (
           <CapRow className={`viber-message-container ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
             {/* Brand Name Display (from TemplatePreview line 1136) */}
-            <CapRow className="msg-container viber-preview">
+            <CapRow className={`msg-container viber-preview ${showCarouselInPreview ? 'viber-preview-carousel' : ''}`}>
               {/* Account Icon (from TemplatePreview line 1146-1160) */}
               {!hasCarouselContent && (
                 <CapRow className="viber-account-icon">
@@ -177,14 +180,14 @@ const ViberPreviewContent = ({
               )}
 
               {/* Message Bubble (from TemplatePreview line 1161-1223) */}
-              <CapRow className="message-pop align-left viber-message-pop">
+              <CapRow className={`message-pop align-left viber-message-pop ${showCarouselInPreview ? 'viber-message-pop-carousel' : ''}`}>
                 {/* Text Viber preview */}
                 {trimmedMessageContent && !hasCarouselContent && (
                   <CapLabel type="label15" className="viber-message-text">{messageContent}</CapLabel>
                 )}
 
                 {/* Image Viber preview */}
-                {(imageURL || '').trim() && (
+                {hasTrimmedText(imageURL) && (
                   <CapImage
                     src={imageURL}
                     className="viber-image-preview"
@@ -224,52 +227,68 @@ const ViberPreviewContent = ({
                 {/* Carousel Viber preview */}
                 {showCarouselInPreview && (
                   <>
-                    <CapRow className="viber-carousel-message-box">
+                    <CapRow className="viber-carousel-message-pop">
                       {trimmedMessageContent ? (
-                        <CapLabel type="label15" className="viber-carousel-message-box-text">
+                        <CapLabel
+                          type="label15"
+                          className="message-pop-item align-left viber-message-text viber-carousel-message-box-text"
+                        >
                           {messageContent}
                         </CapLabel>
                       ) : (
                         <CapRow className="viber-carousel-message-box-placeholder" />
                       )}
+                      <CapLabel type="label1" className="viber-carousel-message-timestamp">
+                        {timestamp}
+                      </CapLabel>
                     </CapRow>
-                    <CapRow className="viber-carousel-preview-scroll">
-                      {previewCarouselCards?.map((card, index) => (
-                        <CapRow className="viber-carousel-preview-card" key={`viber-carousel-preview-card-${index}`}>
-                          {(card?.mediaUrl || '').trim() ? (
-                            <CapImage
-                              src={card?.mediaUrl}
-                              className="viber-carousel-preview-image"
-                              alt="Viber carousel card"
-                            />
-                          ) : (
-                            <CapRow className="viber-carousel-preview-image-placeholder" />
-                          )}
-                          {(card?.text || '').trim() ? (
-                            <CapLabel type="label15" className="viber-carousel-preview-text">
-                              {card?.text}
-                            </CapLabel>
-                          ) : (
-                            <CapLabel type="label15" className="viber-carousel-preview-text-placeholder" />
-                          )}
-                          {(card?.buttons?.filter((cardButton) => (cardButton?.title || '').trim()) ?? [])
-                            .slice(0, 2)
-                            .map((cardButton, btnIndex) => (
-                              <CapLabel
-                                className={`viber-carousel-preview-button ${btnIndex === 1 ? 'viber-carousel-preview-button-secondary' : ''}`}
-                                key={`viber-carousel-preview-btn-${index}-${btnIndex}-${(cardButton?.title || '').trim()}`}
-                              >
-                                {(cardButton?.title || '').trim()}
-                              </CapLabel>
-                            ))}
-                        </CapRow>
-                      ))}
+
+                    <CapRow className="viber-carousel-cards-pop">
+                      <CapRow className="viber-carousel-preview-scroll">
+                        {previewCarouselCards?.map((card, index) => (
+                          <CapRow className="viber-carousel-preview-card" key={`viber-carousel-preview-card-${index}`}>
+                            {hasTrimmedText(card?.mediaUrl) ? (
+                              <CapImage
+                                src={card?.mediaUrl}
+                                className="viber-carousel-preview-image"
+                                alt="Viber carousel card"
+                              />
+                            ) : (
+                              <CapRow className="viber-carousel-preview-image-placeholder" />
+                            )}
+                            <CapRow className="viber-carousel-preview-card-body">
+                              {hasTrimmedText(card?.text) ? (
+                                <CapLabel type="label15" className="viber-carousel-preview-text">
+                                  {card?.text}
+                                </CapLabel>
+                              ) : (
+                                <CapLabel type="label15" className="viber-carousel-preview-text-placeholder" />
+                              )}
+                              {(card?.buttons?.filter((cardButton) => hasTrimmedText(cardButton?.title)) ?? [])
+                                .slice(0, 2)
+                                .map((cardButton, btnIndex) => {
+                                  const trimmedCardButtonTitle = getTrimmedText(cardButton?.title);
+                                  return (
+                                    <CapLabel
+                                      className={`viber-carousel-preview-button ${btnIndex === 1 ? 'viber-carousel-preview-button-secondary' : ''}`}
+                                      key={`viber-carousel-preview-btn-${index}-${btnIndex}-${trimmedCardButtonTitle}`}
+                                    >
+                                      {trimmedCardButtonTitle}
+                                    </CapLabel>
+                                  );
+                                })}
+                            </CapRow>
+                          </CapRow>
+                        ))}
+                      </CapRow>
                     </CapRow>
                   </>
                 )}
-                <CapLabel type="label1" className="viber-timestamp">
-                  {timestamp}
-                </CapLabel>
+                {!showCarouselInPreview && (
+                  <CapLabel type="label1" className="viber-timestamp">
+                    {timestamp}
+                  </CapLabel>
+                )}
                 <CapRow className="empty-placeholder" />
               </CapRow>
 

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -2116,6 +2116,8 @@
         flex: 1;
         display: flex;
         flex-direction: column;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
         padding: 0 $CAP_SPACE_16;
         background-color: #ffffff;
         margin-left: $CAP_SPACE_06;
@@ -2141,6 +2143,12 @@
           margin-top: $CAP_SPACE_16;
           width: 68%;
 
+          &.viber-preview-carousel {
+            width: 100%;
+            margin-left: $CAP_SPACE_12;
+            max-height: none;
+          }
+
           // Account icon (from TemplatePreview line 1146-1160)
           .viber-account-icon {
             width: $CAP_SPACE_20;
@@ -2169,6 +2177,18 @@
             border-radius: $CAP_SPACE_04;
             padding: $CAP_SPACE_04;
 
+            &.viber-message-pop-carousel {
+              width: 100%;
+              left: 0;
+              margin-top: 0;
+              padding: 0;
+              background: transparent;
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+              gap: $CAP_SPACE_06;
+            }
+
             // Text Viber preview (from TemplatePreview line 1166-1174)
             .viber-message-text {
               margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
@@ -2240,38 +2260,110 @@
               }
             }
 
+            .viber-carousel-message-pop,
+            .viber-carousel-cards-pop {
+              width: 100%;
+              background: $CAP_G08;
+              border-radius: $CAP_SPACE_06;
+              padding: $CAP_SPACE_08;
+            }
+
+            .viber-carousel-message-pop {
+              margin-top: 0;
+              width: 68%;
+              border-radius: 0 $CAP_SPACE_06 $CAP_SPACE_06 $CAP_SPACE_06;
+            }
+
+            .viber-carousel-cards-pop {
+              margin-top: 0;
+              width: 100%;
+              background: transparent;
+              border: none;
+              border-radius: 0;
+              padding: 0;
+            }
+
+            .viber-carousel-message-box {
+              width: 100%;
+              min-height: 2.25rem;
+              height: auto;
+              border-radius: $CAP_SPACE_04;
+              background: transparent;
+              padding: 0 $CAP_SPACE_08;
+              display: flex;
+              align-items: center;
+            }
+
+            .viber-carousel-message-box-text {
+              color: $CAP_G01;
+              margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
+              white-space: normal;
+              word-break: break-word;
+              overflow: visible;
+              width: 100%;
+            }
+
+            .viber-carousel-message-box-placeholder {
+              width: 100%;
+              height: 0.875rem;
+              border-radius: $CAP_SPACE_04;
+              background: $CAP_G07;
+            }
+
+            .viber-carousel-message-timestamp,
+            .viber-carousel-cards-timestamp {
+              display: block;
+              text-align: right;
+              margin-top: $CAP_SPACE_06;
+              color: $CAP_G04;
+            }
+
             .viber-carousel-preview-scroll {
-              margin-top: $CAP_SPACE_08;
               display: flex;
+              width: 100%;
               overflow-x: auto;
-              gap: $CAP_SPACE_08;
-              white-space: nowrap;
+              overflow-y: visible;
+              
               scrollbar-width: none;
+              -webkit-overflow-scrolling: touch;
 
               &::-webkit-scrollbar {
                 display: none;
               }
 
               .viber-carousel-preview-card {
-                min-width: 8.75rem;
-                background: $CAP_WHITE;
-                border-radius: $CAP_SPACE_04;
-                padding: $CAP_SPACE_06;
+                flex: 0 0 68%;
+                min-width: 68%;
+                margin-right: $CAP_SPACE_08;
+                background: $CAP_G09;
+                border: 1px solid $CAP_G07;
+                border-radius: $CAP_SPACE_12;
+                overflow: hidden;
                 display: flex;
                 flex-direction: column;
-                gap: $CAP_SPACE_04;
+
+                &:last-child {
+                  margin-right: 0;
+                }
+
+                .viber-carousel-preview-card-body {
+                  padding: $CAP_SPACE_08;
+                  display: flex;
+                  flex-direction: column;
+                  gap: $CAP_SPACE_06;
+                }
 
                 .viber-carousel-preview-image {
                   width: 100%;
-                  height: 5.357rem;
+                  height: 10rem;
                   object-fit: cover;
-                  border-radius: $CAP_SPACE_04;
+                  border-radius: 0;
                 }
 
                 .viber-carousel-preview-image-placeholder {
                   width: 100%;
-                  height: 5.357rem;
-                  border-radius: $CAP_SPACE_04;
+                  height: 10rem;
+                  border-radius: 0;
                   background: $CAP_G07;
                 }
 
@@ -2294,45 +2386,23 @@
                   background: $CAP_PURPLE01;
                   border-radius: $CAP_SPACE_12;
                   text-align: center;
-                  padding: 0.179rem $CAP_SPACE_08;
+                  width: 100%;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  min-height: 1.5rem;
+                  padding: $CAP_SPACE_06 $CAP_SPACE_08;
                   white-space: normal;
-                  min-height: 1rem;
                 }
 
                 .viber-carousel-preview-button-secondary {
                   color: $CAP_PURPLE01;
-                  background: $CAP_WHITE;
-                  border: 1px solid $CAP_PURPLE01;
+                  background: transparent;
+                  border: none;
                 }
               }
             }
 
-            .viber-carousel-message-box {
-              width: 100%;
-              height: 2.25rem;
-              border-radius: $CAP_SPACE_04;
-              background: $CAP_WHITE;
-              margin-top: $CAP_SPACE_08;
-              padding: 0 $CAP_SPACE_08;
-              display: flex;
-              align-items: center;
-            }
-
-            .viber-carousel-message-box-text {
-              color: $CAP_G01;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              width: 100%;
-            }
-
-            .viber-carousel-message-box-placeholder {
-              width: 100%;
-              height: 0.875rem;
-              border-radius: $CAP_SPACE_04;
-              background: $CAP_G07;
-            }
-
             .empty-placeholder {
               height: $CAP_SPACE_08;
             }

package/v2Containers/Templates/_templates.scss

@@ -215,7 +215,7 @@
             }
             .viber-carousel-static-button {
               display: block;
-              min-height: 1rem;
+              min-height: 1.5rem;
               border-radius: $CAP_SPACE_12;
               background: $CAP_PURPLE01;
               color: $CAP_WHITE;
@@ -225,8 +225,9 @@
             }
             .viber-carousel-static-button-secondary {
               color: $CAP_PURPLE01;
-              background: $CAP_WHITE;
-              border: 1px solid $CAP_PURPLE01;
+              background: transparent;
+              border: none;
+              box-shadow: none;
             }
           }
         

package/v2Containers/Templates/index.js

@@ -1413,8 +1413,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         // Return Viber content object (same as Viber/index.js getTemplateContent)
         return {
           viberPreviewContent: viberPreview,
-          accountName: accountName ? [accountName] : [],
-          brandName: accountName ? [accountName] : [],
+          accountName: accountName || '',
+          brandName: accountName || '',
           messageContent: text,
           ...(isCarousel && {
             type: VIBER_MEDIA_TYPES.CAROUSEL,

package/v2Containers/Viber/index.js

@@ -96,6 +96,7 @@ const createEmptyCarouselButton = () => ({
   urlType: STATIC_URL,
   isSaved: false,
   hasAttemptedSave: false,
+  hasTouchedAction: false,
 });
 const createEmptyCarouselCard = () => ({
   id: getNextCarouselCardId(),
@@ -217,6 +218,7 @@ export const Viber = (props) => {
             urlType: carouselButton?.urlType || STATIC_URL,
             isSaved: Boolean(carouselButton?.title && carouselButton?.action),
             hasAttemptedSave: Boolean(carouselButton?.hasAttemptedSave),
+            hasTouchedAction: Boolean(carouselButton?.hasTouchedAction),
           })),
         }));
         const cardsToSet = normalizedCards.length
@@ -435,7 +437,7 @@ export const Viber = (props) => {
     if (!trimmedCardText) {
       return false;
     }
-    if (trimmedCardText.length < VIBER_CAROUSEL_CARD_TITLE_MIN_LENGTH) {
+    if (trimmedCardText?.length < VIBER_CAROUSEL_CARD_TITLE_MIN_LENGTH) {
       return formatMessage(messages.carouselCardTitleMinLengthError);
     }
     if (cardText.length > VIBER_CAROUSEL_CARD_TITLE_MAX_LENGTH) {
@@ -445,11 +447,12 @@ export const Viber = (props) => {
   };
   const getCarouselButtonTitleError = (button = {}, buttonIndex = 0, showEmptyError = true) => {
     const title = button?.title || '';
+    const trimmedTitle = title.trim();
     const maxLength = getCarouselButtonTitleMaxLength(buttonIndex);
-    if (!title.trim() && showEmptyError) {
+    if (!trimmedTitle && showEmptyError) {
       return formatMessage(messages.textCannotBeEmptyError);
     }
-    if (!title.trim()) {
+    if (!trimmedTitle) {
       return false;
     }
     if (title.length > maxLength) {
@@ -459,11 +462,14 @@ export const Viber = (props) => {
     }
     return false;
   };
-  const getCarouselButtonActionError = (button = {}) => {
+  const getCarouselButtonActionError = (button = {}, showEmptyError = true) => {
     const action = button?.action || '';
-    if (!action.trim()) {
+    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);
     }
@@ -673,7 +679,28 @@ export const Viber = (props) => {
       return {
         ...card,
         buttons: (card?.buttons || []).map((button, idx) => (
-          idx === buttonIndex ? { ...button, [key]: value, isSaved: false } : button
+          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
         )),
       };
     }));
@@ -800,13 +827,15 @@ export const Viber = (props) => {
             updateOnReUpload={() => updateOnCarouselImageReUpload(cardIndex)}
             index={cardIndex}
             className="cap-custom-image-upload"
-            key={`viber-carousel-image-upload-${card.id}`}
+            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>
+          {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)}
@@ -839,13 +868,13 @@ export const Viber = (props) => {
           </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 ? (
+            <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}
+                    {button?.title}
                   </CapLabel>
                   <CapColumn className="button-edit-icon" onClick={() => editCarouselButton(cardIndex, buttonIndex)}>
                     <CapIcon type="edit" size="s" />
@@ -873,7 +902,7 @@ export const Viber = (props) => {
                     </CapHeading>
                   </CapRow>
                   <CapInput
-                    value={button.title}
+                    value={button?.title ?? ''}
                     onChange={({ target: { value } }) => onCarouselButtonChange(cardIndex, buttonIndex, 'title', value)}
                     placeholder={formatMessage(messages.carouselButtonTitlePlaceholder)}
                     errorMessage={getCarouselButtonTitleError(
@@ -900,10 +929,16 @@ export const Viber = (props) => {
                     <CapColumn span={18}>
                       <CapInput
                         label={formatMessage(messages.carouselButtonActionLabel)}
-                        value={button.action}
+                        value={button?.action ?? ''}
                         onChange={({ target: { value } }) => onCarouselButtonChange(cardIndex, buttonIndex, 'action', value)}
+                        onBlur={() => markCarouselButtonActionTouched(cardIndex, buttonIndex)}
                         placeholder={formatMessage(messages.carouselButtonActionPlaceholder)}
-                        errorMessage={getCarouselButtonActionError(button)}
+                        errorMessage={getCarouselButtonActionError(
+                          button,
+                          showCarouselValidationErrors
+                            || Boolean(button?.hasAttemptedSave)
+                            || Boolean(button?.hasTouchedAction),
+                        )}
                       />
                     </CapColumn>
                   </CapRow>
@@ -1077,11 +1112,11 @@ export const Viber = (props) => {
       ...(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,
+          text: card?.text ?? '',
+          mediaUrl: card?.mediaUrl ?? '',
+          buttons: (card?.buttons ?? []).map((button) => ({
+            title: button?.title ?? '',
+            action: button?.action ?? '',
           })),
         })),
       }),
@@ -1290,11 +1325,11 @@ export const Viber = (props) => {
     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,
+        text: card?.text ?? '',
+        mediaUrl: card?.mediaUrl ?? '',
+        buttons: (card?.buttons ?? []).map((button) => ({
+          title: button?.title ?? '',
+          action: button?.action ?? '',
         })),
       }));
     }
@@ -1397,6 +1432,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) {
@@ -1476,7 +1525,7 @@ export const Viber = (props) => {
         </CapRow>
         <ViberFooter>
           <CapButton
-            onClick={onDoneCallback()}
+            onClick={getDoneHandler()}
             disabled={isDisableDone()}
             className="create-msg viber-create-msg"
           >

package/v2Containers/Viber/index.scss

@@ -220,7 +220,7 @@
 }
 
 .viber-carousel-url-type-dropdown.ant-select-dropdown {
-  min-width: 12rem !important;
+  min-width: 12rem;
 }
 
 .viber-carousel-url-type-dropdown .ant-select-dropdown-menu-item {

package/v2Containers/Viber/tests/index.test.js

@@ -383,4 +383,84 @@ describe('Test Viber container', () => {
     const doneBtn = screen.getByRole('button', { name: /done/i });
     expect(doneBtn).toBeEnabled();
   });
+
+  it('does not show empty URL error on focus or while typing in carousel button action', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      templateData: { mode: 'create' },
+      viber: {
+        uploadedAssetData: {},
+        createTemplateInProgress: false,
+      },
+      location: {
+        pathname: '/sms/edit',
+        query: { type: false, module: 'default' },
+        search: '',
+      },
+      isFullMode: true,
+      handleClose: jest.fn(),
+    });
+
+    fireEvent.click(screen.getByRole('radio', { name: /carousel/i }));
+    const actionInput = await screen.findByPlaceholderText('https://example.com/action');
+
+    fireEvent.focus(actionInput);
+    expect(screen.queryByText("URL can't be empty")).not.toBeInTheDocument();
+
+    fireEvent.change(actionInput, { target: { value: 'https://' } });
+    expect(screen.queryByText("URL can't be empty")).not.toBeInTheDocument();
+  });
+
+  it('shows empty URL error on blur when carousel button action is left empty', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      templateData: { mode: 'create' },
+      viber: {
+        uploadedAssetData: {},
+        createTemplateInProgress: false,
+      },
+      location: {
+        pathname: '/sms/edit',
+        query: { type: false, module: 'default' },
+        search: '',
+      },
+      isFullMode: true,
+      handleClose: jest.fn(),
+    });
+
+    fireEvent.click(screen.getByRole('radio', { name: /carousel/i }));
+    const actionInput = await screen.findByPlaceholderText('https://example.com/action');
+
+    fireEvent.focus(actionInput);
+    fireEvent.blur(actionInput);
+
+    expect(await screen.findByText("URL can't be empty")).toBeInTheDocument();
+  });
+
+  it('shows empty URL error on save when carousel button action is empty', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      templateData: { mode: 'create' },
+      viber: {
+        uploadedAssetData: {},
+        createTemplateInProgress: false,
+      },
+      location: {
+        pathname: '/sms/edit',
+        query: { type: false, module: 'default' },
+        search: '',
+      },
+      isFullMode: true,
+      handleClose: jest.fn(),
+    });
+
+    fireEvent.click(screen.getByRole('radio', { name: /carousel/i }));
+    await screen.findByPlaceholderText('https://example.com/action');
+    fireEvent.click(screen.getByRole('button', { name: /save/i }));
+
+    expect(await screen.findByText("URL can't be empty")).toBeInTheDocument();
+  });
 });