@capillarytech/creatives-library 9.0.43 → 9.0.44

package/v2Containers/Templates/_templates.scss

@@ -1,7 +1,7 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .ant-tabs-content{
-   margin-top: $CAP_SPACE_08;
+   margin-top: 0.171rem;
   // .creatives-templates-list.full-mode{
     .v2-pagination-container, .v2-pagination-container-half {
       .ant-tabs-tabpane-active{
@@ -160,6 +160,7 @@
             line-clamp: 3;
             }
           }
+        
         }
       
         &.no-image .ant-card-meta {    
@@ -167,44 +168,6 @@
             word-wrap: break-word;
           }
         }
-
-        &.viber-carousel-static {
-          height: auto;
-          min-height: 21.125rem;
-          overflow: visible;
-
-          .ant-card-body {
-            height: auto;
-            overflow: visible;
-            padding-bottom: $CAP_SPACE_12;
-
-            .ant-card-meta,
-            .ant-card-meta-detail,
-            .ant-card-meta-description {
-              height: auto;
-              max-height: none;
-              overflow: visible;
-            }
-
-            .truncate-text-viber {
-              .ant-card-meta-description {
-                display: block;
-                overflow: visible;
-                max-height: none;
-                -webkit-box-orient: unset;
-                -webkit-line-clamp: unset;
-                line-clamp: unset;
-              }
-            }
-
-            .content,
-            .cards,
-            .card {
-              overflow: visible;
-              height: auto;
-            }
-          }
-        }
     
   
         &.carousel-img-section {
@@ -1259,147 +1222,6 @@
   max-height: 11rem;
   margin-bottom: $CAP_SPACE_04;
 }
-
-/* Listing carousel preview: always grow with content so title + buttons stay visible for any image */
-.cap-custom-card.ant-card.VIBER.viber-carousel-static {
-  height: auto;
-  min-height: 21.125rem;
-  overflow: visible;
-
-  > .ant-card-body {
-    height: auto;
-    max-height: none;
-    overflow: visible;
-    padding-bottom: $CAP_SPACE_12;
-  }
-
-  .ant-card-meta,
-  .ant-card-meta-detail,
-  .ant-card-meta-description,
-  .truncate-text-viber,
-  .truncate-text-viber .ant-card-meta-description {
-    height: auto;
-    max-height: none;
-    overflow: visible;
-    display: block;
-    -webkit-line-clamp: unset;
-    line-clamp: unset;
-    -webkit-box-orient: unset;
-  }
-}
-
-.viber-carousel-static {
-  .content {
-    width: 100%;
-    overflow: visible;
-    display: flex;
-    flex-direction: column;
-    height: auto;
-
-    .message-box {
-      width: 100%;
-      height: auto;
-      border-radius: $CAP_SPACE_04;
-      background: $CAP_WHITE;
-      margin-bottom: $CAP_SPACE_08;
-      display: flex;
-      align-items: flex-start;
-
-      .message {
-        display: -webkit-box;
-        width: 100%;
-        color: $CAP_G01;
-        line-height: 1.3;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
-        line-clamp: 2;
-        -webkit-box-orient: vertical;
-        white-space: normal;
-        word-break: break-word;
-      }
-    }
-
-    .cards {
-      display: flex;
-      gap: $CAP_SPACE_08;
-      overflow: visible;
-      width: 100%;
-      height: auto;
-
-      .card {
-        flex: 1;
-        min-width: 0;
-        width: 100%;
-        background: $CAP_WHITE;
-        border-radius: $CAP_SPACE_04;
-        overflow: visible;
-        display: flex;
-        flex-direction: column;
-        height: auto;
-
-        .image {
-          width: 100%;
-          max-height: 11rem;
-          margin-bottom: $CAP_SPACE_04;
-          border-radius: $CAP_SPACE_04;
-          display: block;
-          flex-shrink: 0;
-        }
-
-        .image-placeholder {
-          width: 100%;
-          height: 7.143rem;
-          border-radius: $CAP_SPACE_04;
-          background: $CAP_G07;
-        }
-
-        .text {
-          display: -webkit-box;
-          color: $CAP_G01;
-          margin: $CAP_SPACE_04 0;
-          line-height: 1.3;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: normal;
-          -webkit-line-clamp: 2;
-          line-clamp: 2;
-          -webkit-box-orient: vertical;
-          flex-shrink: 0;
-          width: 100%;
-          visibility: visible;
-        }
-
-        .buttons {
-          display: flex;
-          flex-direction: column;
-          gap: $CAP_SPACE_04;
-          flex-shrink: 0;
-          width: 100%;
-          visibility: visible;
-
-          .button {
-            display: block;
-            min-height: 1.5rem;
-            border-radius: $CAP_SPACE_12;
-            background: $CAP_PURPLE01;
-            color: $CAP_WHITE;
-            text-align: center;
-            padding: 0.179rem $CAP_SPACE_08;
-            white-space: normal;
-          }
-
-          .button-secondary {
-            color: $CAP_PURPLE01;
-            background: transparent;
-            border: none;
-            box-shadow: none;
-          }
-        }
-      }
-    }
-  }
-}
 .whatsapp-doc {
   width: 100%;
   max-height: 123px;
@@ -1657,3 +1479,13 @@
   opacity: 0.4;
   cursor: not-allowed;
 }
+
+.template-action-dropdown {
+  min-width: 14.286rem !important;
+  .template-action-menu {
+    padding: 4px 0px;
+    .template-action-menu-item {
+      padding: 12px 24px;
+    }
+  }
+}

package/v2Containers/Templates/index.js

@@ -73,7 +73,6 @@ import * as ebillActions from '../Ebill/actions';
 import * as emailActions from '../Email/actions';
 import * as lineActions from '../Line/Container/actions';
 import * as viberActions from '../Viber/actions';
-import { VIBER_MEDIA_TYPES } from '../Viber/constants';
 import * as facebookActions from '../Facebook/actions';
 import * as whatsappActions from '../Whatsapp/actions';
 import * as rcsActions from '../Rcs/actions';
@@ -1400,11 +1399,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         const image = viberContent.image || {};
         const video = viberContent.video || {};
         const button = viberContent.button || {};
-        const messageType = viberContent.type || '';
-        const cardsRaw = viberContent.cards;
-        const cards = Array.isArray(cardsRaw) ? cardsRaw : [];
-        const isCarousel =
-          messageType === VIBER_MEDIA_TYPES.CAROUSEL || cards.length > 0;
 
         const viberPreview = {
           messageContent: text,
@@ -1422,39 +1416,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           };
         }
 
-        if (isCarousel) {
-          viberPreview.type = VIBER_MEDIA_TYPES.CAROUSEL;
-          viberPreview.cards = cards.map((card) => ({
-            text: card?.text || '',
-            mediaUrl: card?.mediaUrl || '',
-            buttons: (card?.buttons || []).map((btn) => ({
-              title: btn?.title || '',
-              action: btn?.action || '',
-            })),
-          }));
-          viberPreview.showCarouselEditorPreview = true;
-        }
-
         // Extract account name
         const accountName = get(template, 'definition.accountName', '');
 
         // Return Viber content object (same as Viber/index.js getTemplateContent)
         return {
           viberPreviewContent: viberPreview,
-          accountName: accountName || '',
-          brandName: accountName || '',
-          messageContent: text,
-          ...(isCarousel && {
-            type: VIBER_MEDIA_TYPES.CAROUSEL,
-            cards: viberPreview.cards,
-          }),
-          ...(!isCarousel && !isEmpty(button) && button.text && (button.url || viberContent.buttonURL) && {
-            button: {
-              text: button.text,
-              url: button.url || viberContent.buttonURL || '',
-            },
-          }),
-          buttonURL: button.url || viberContent.buttonURL || '',
+          accountName: accountName ? [accountName] : [],
+          brandName: accountName ? [accountName] : [],
         };
       }
 
@@ -2177,15 +2146,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.props.isFullMode && !this.props.isDltFromRcs && !(this.state.hostName === HOST_GUPSHUP)) {
         templateData.extra.push(
           <CapDropdown
+            rootClassName="template-action-dropdown"
             overlay={
-              <CapMenu>
+              <CapMenu className="template-action-menu">
                 {/* Phase 16: Test and Preview menu item - Show for supported channels, hide in archived mode */}
                 {!isArchivedMode && (this.isTestAndPreviewSupported() ||
                   (this.state.channel.toUpperCase() === WHATSAPP &&
                     status === WHATSAPP_STATUSES.approved) || (this.state.channel.toUpperCase() === RCS &&
                     rcsStatus === RCS_STATUSES.approved)) && (
                   <CapMenu.Item
-                    className={`test-and-preview-${channelLowerCase}`}
+                    className={`test-and-preview-${channelLowerCase} template-action-menu-item`}
                     onClick={() => {
                       if ([ZALO, WHATSAPP, RCS].includes(this.state.channel.toUpperCase()) || (isTraiDltFeature && this.state.channel.toUpperCase() === SMS)) {
                         handlers.handleEditClick(undefined, template, undefined, undefined, {
@@ -2205,7 +2175,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 ) &&
                   !isTraiDltFeature && !template.isArchived && this.gatedMenuItem({
                     allowed: this.canPerform(PERMISSIONS.CREATIVE_CREATE),
-                    className: `duplicate-${channelLowerCase}`,
+                    className: `duplicate-${channelLowerCase} template-action-menu-item`,
                     onClick: () => this.duplicateTemplate(template),
                     label: <FormattedMessage {...messages.duplicateButton} />,
                   })}
@@ -2217,13 +2187,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   return !template?.isArchived
                     ? this.gatedMenuItem({
                         allowed: canArchive,
-                        className: `archive-${channelLowerCase}`,
+                        className: `archive-${channelLowerCase} template-action-menu-item`,
                         onClick: () => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name }),
                         label: <FormattedMessage {...messages.archiveButton} />,
                       })
                     : this.gatedMenuItem({
                         allowed: canArchive,
-                        className: `unarchive-${channelLowerCase}`,
+                        className: `unarchive-${channelLowerCase} template-action-menu-item`,
                         onClick: () => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name, isUnarchive: true }),
                         label: <FormattedMessage {...messages.unarchiveButton} />,
                       });
@@ -2236,8 +2206,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   allowed: this.canPerform(PERMISSIONS.CREATIVE_DELETE),
                   className:
                     this.state.channel.toUpperCase() === WECHAT && !template.definition
-                      ? `unmap-${channelLowerCase}`
-                      : `delete-${channelLowerCase}`,
+                      ? `unmap-${channelLowerCase} template-action-menu-item`
+                      : `delete-${channelLowerCase} template-action-menu-item`,
                   onClick: () => this.toggleDeleteTemplateModal(template),
                   label:
                     this.state.channel.toUpperCase() === WECHAT && !template.definition
@@ -2466,59 +2436,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 image = {},
                 button = {},
                 video = {},
-                type = '',
-                cards = [],
               } = {},
             } = {},
           } = template.versions.base;
-          const isViberCarousel = type === VIBER_MEDIA_TYPES.CAROUSEL;
           templateData.content = text;
-          if (isViberCarousel) {
-            const previewCards = Array.isArray(cards) ? cards.slice(0, 1) : [];
-            // Bypass CapCustomCard Viber Meta + line-clamp (clips title/buttons for tall images).
-            // Parent class `viber-carousel-static` scopes listing styles in _templates.scss.
-            // cardType hits the default content path; keep VIBER for channel card styles.
-            templateData.cardType = 'VIBER_CAROUSEL_PREVIEW';
-            templateData.className = 'viber-carousel-static VIBER';
-            templateData.content = (
-              <CapRow vertical className="content">
-                <CapRow className="message-box">
-                  <CapLabel type="label1" className="message">
-                    {text}
-                  </CapLabel>
-                </CapRow>
-                <CapRow className="cards">
-                  {previewCards?.map((card, cardIdx) => (
-                    <CapRow vertical className="card" key={`viber-carousel-static-card-${cardIdx}`}>
-                      {card?.mediaUrl ? (
-                        <CapImage src={card.mediaUrl} className="image" />
-                      ) : (
-                        <CapRow className="image-placeholder" />
-                      )}
-                      <CapLabel type="label1" className="text">
-                        {card?.text}
-                      </CapLabel>
-                      <CapRow vertical className="buttons">
-                        {(Array.isArray(card?.buttons) && card.buttons.length
-                          ? card.buttons
-                          : [{}, {}]
-                        ).slice(0, 2).map((carouselButton, btnIdx) => (
-                          <CapLabel
-                            key={`viber-carousel-static-btn-${cardIdx}-${btnIdx}`}
-                            type="label1"
-                            className={`button${btnIdx === 1 ? ' button-secondary' : ''}`}
-                          >
-                            {(carouselButton?.title || '').trim()}
-                          </CapLabel>
-                        ))}
-                      </CapRow>
-                    </CapRow>
-                  ))}
-                </CapRow>
-              </CapRow>
-            );
-            break;
-          }
           if (!isEmpty(image)) {
             const { url = '' } = image;
             templateData.url = url;
@@ -5186,22 +5107,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   ? this.props.Templates.selectedWhatsappAccount.name
                   : null
               }
-              // Pass formData for tag extraction (EMAIL/SMS use nested formData; VIBER uses content object)
+              // Pass formData for EMAIL and SMS channels for tag extraction
               formData={
-                (() => {
-                  const previewContent = this.state.testAndPreviewContent;
-                  const channelUpper = this.state.channel?.toUpperCase();
-                  if (!previewContent || typeof previewContent !== 'object') {
-                    return null;
-                  }
-                  if ([EMAIL, SMS].includes(channelUpper)) {
-                    return previewContent.formData || null;
-                  }
-                  if (channelUpper === VIBER) {
-                    return previewContent;
-                  }
-                  return null;
-                })()
+                this.state.testAndPreviewContent &&
+                (this.state.channel?.toUpperCase() === EMAIL || 
+                 this.state.channel?.toUpperCase() === SMS) &&
+                typeof this.state.testAndPreviewContent === 'object' &&
+                this.state.testAndPreviewContent?.formData
+                  ? this.state.testAndPreviewContent.formData
+                  : null
               }
             />
           )}

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -1339,9 +1339,11 @@ Click {{unsubscribe}} to unsubscribe
                         null,
                         <CapDropdownComponent
                           overlay={
-                            <CapMenuComponent>
+                            <CapMenuComponent
+                              className="template-action-menu"
+                            >
                               <withItemHOC
-                                className="delete-whatsapp rbac-disabled"
+                                className="delete-whatsapp template-action-menu-item rbac-disabled"
                                 onClick={[Function]}
                               >
                                 <CapTooltip
@@ -1364,6 +1366,7 @@ Click {{unsubscribe}} to unsubscribe
                               </withItemHOC>
                             </CapMenuComponent>
                           }
+                          rootClassName="template-action-dropdown"
                         >
                           <CapIcon
                             type="more"
@@ -1823,9 +1826,11 @@ Click {{unsubscribe}} to unsubscribe
                         null,
                         <CapDropdownComponent
                           overlay={
-                            <CapMenuComponent>
+                            <CapMenuComponent
+                              className="template-action-menu"
+                            >
                               <withItemHOC
-                                className="delete-whatsapp rbac-disabled"
+                                className="delete-whatsapp template-action-menu-item rbac-disabled"
                                 onClick={[Function]}
                               >
                                 <CapTooltip
@@ -1848,6 +1853,7 @@ Click {{unsubscribe}} to unsubscribe
                               </withItemHOC>
                             </CapMenuComponent>
                           }
+                          rootClassName="template-action-dropdown"
                         >
                           <CapIcon
                             type="more"
@@ -2307,9 +2313,11 @@ Click {{unsubscribe}} to unsubscribe
                         null,
                         <CapDropdownComponent
                           overlay={
-                            <CapMenuComponent>
+                            <CapMenuComponent
+                              className="template-action-menu"
+                            >
                               <withItemHOC
-                                className="delete-whatsapp rbac-disabled"
+                                className="delete-whatsapp template-action-menu-item rbac-disabled"
                                 onClick={[Function]}
                               >
                                 <CapTooltip
@@ -2332,6 +2340,7 @@ Click {{unsubscribe}} to unsubscribe
                               </withItemHOC>
                             </CapMenuComponent>
                           }
+                          rootClassName="template-action-dropdown"
                         >
                           <CapIcon
                             type="more"

package/v2Containers/Viber/constants.js

@@ -47,24 +47,7 @@ export const VIBER_MEDIA_TYPES = {
   TEXT: 'TEXT',
   IMAGE: 'IMAGE',
   VIDEO: 'VIDEO',
-  CAROUSEL: 'CAROUSEL',
 };
-export const VIBER_CAROUSEL_MIN_CARDS = 2;
-export const VIBER_CAROUSEL_MAX_CARDS = 5;
-export const VIBER_CAROUSEL_MAX_BUTTONS = 2;
-export const VIBER_CAROUSEL_CARD_TITLE_MIN_LENGTH = 2;
-export const VIBER_CAROUSEL_CARD_TITLE_MAX_LENGTH = 38;
-export const VIBER_CAROUSEL_FIRST_BUTTON_TITLE_MAX_LENGTH = 10;
-export const VIBER_CAROUSEL_SECOND_BUTTON_TITLE_MAX_LENGTH = 12;
-export const VIBER_CAROUSEL_BUTTON_URL_MAX_LENGTH = 1000;
-export const STATIC_URL = 'STATIC_URL';
-export const DYNAMIC_URL = 'DYNAMIC_URL';
-/** Recommended / validated carousel image height in pixels (passed to image upload). */
-export const VIBER_CAROUSEL_IMG_HEIGHT = 600;
-/** Recommended / validated carousel image width in pixels (passed to image upload). */
-export const VIBER_CAROUSEL_IMG_WIDTH = 696;
-/** Maximum carousel image file size (bytes). 10_000_000 ≈ 10 MB (decimal). */
-export const VIBER_CAROUSEL_IMG_SIZE = 10000000;
 export const ALLOWED_IMAGE_EXTENSIONS_REGEX_VIBER = /\.(jpe?g|png)$/i;
 export const ALLOWED_EXTENSIONS_VIDEO_REGEX_VIBER = /\.(mp4|3gp|m4v|mov)$/i;
 export const NONE = 'NONE';
@@ -86,10 +69,6 @@ export const mediaRadioOptions = [
     value: VIBER_MEDIA_TYPES.VIDEO,
     label: <FormattedMessage {...messages.mediaVideo} />,
   },
-  {
-    value: VIBER_MEDIA_TYPES.CAROUSEL,
-    label: <FormattedMessage {...messages.mediaCarousel} />,
-  },
 ];
 
 export const buttonRadioOptions = [