@capillarytech/creatives-library 9.0.44 → 9.0.46

package/v2Containers/SmsTrai/Edit/tests/dltVarTypes.test.js

@@ -0,0 +1,100 @@
+import {
+  DLT_VAR_TYPE_KEYS,
+  DLT_VAR_TYPE_META,
+  DLT_LEGACY_VAR_TOKEN,
+  DLT_LEGACY_VAR_REGEX,
+  ANY_DLT_HASH_TOKEN_PROBE_REGEX,
+  isAnyDltVarToken,
+  getDltVarTypeKey,
+  getDltVarTypeMeta,
+  getDltVarCharLimit,
+} from '../dltVarTypes';
+
+describe('dltVarTypes', () => {
+  it('exposes the six DLT types with short + long syntax + char limit', () => {
+    expect(DLT_VAR_TYPE_KEYS).toEqual([
+      'numeric', 'alphanumeric', 'url', 'urlott', 'cbn', 'email',
+    ]);
+    DLT_VAR_TYPE_KEYS.forEach((key) => {
+      const meta = DLT_VAR_TYPE_META[key];
+      expect(meta.short).toMatch(/^\{#[^#]+#\}$/);
+      expect(meta.long).toMatch(/^\{#[^#]+#\}$/);
+      expect(typeof meta.charLimit).toBe('number');
+    });
+  });
+
+  describe('isAnyDltVarToken', () => {
+    it('accepts short and long DLT token forms', () => {
+      expect(isAnyDltVarToken('{#num#}')).toBe(true);
+      expect(isAnyDltVarToken('{#numeric#}')).toBe(true);
+      expect(isAnyDltVarToken('{#var#}')).toBe(true);
+      expect(isAnyDltVarToken('{# alp #}')).toBe(true);
+    });
+
+    it('rejects non-DLT strings and non-strings', () => {
+      expect(isAnyDltVarToken('{{mustache}}')).toBe(false);
+      expect(isAnyDltVarToken('plain text')).toBe(false);
+      expect(isAnyDltVarToken('')).toBe(false);
+      expect(isAnyDltVarToken(null)).toBe(false);
+      expect(isAnyDltVarToken(undefined)).toBe(false);
+      expect(isAnyDltVarToken(42)).toBe(false);
+    });
+  });
+
+  describe('getDltVarTypeKey', () => {
+    it('resolves short and long spellings + legacy {#var#} to a type key', () => {
+      expect(getDltVarTypeKey('{#num#}')).toBe('numeric');
+      expect(getDltVarTypeKey('{#numeric#}')).toBe('numeric');
+      expect(getDltVarTypeKey('{#ALP#}')).toBe('alphanumeric');
+      expect(getDltVarTypeKey('{# url #}')).toBe('url');
+      expect(getDltVarTypeKey(DLT_LEGACY_VAR_TOKEN)).toBe('alphanumeric');
+    });
+
+    it('returns null for unknown / non-string tokens', () => {
+      expect(getDltVarTypeKey('{#foobar#}')).toBe(null);
+      expect(getDltVarTypeKey('')).toBe(null);
+      expect(getDltVarTypeKey(null)).toBe(null);
+      expect(getDltVarTypeKey(undefined)).toBe(null);
+    });
+  });
+
+  describe('getDltVarTypeMeta', () => {
+    it('returns the full meta object for a valid token', () => {
+      const meta = getDltVarTypeMeta('{#url#}');
+      expect(meta.charLimit).toBe(120);
+      expect(meta.placeholderKey).toBe('dltVarPlaceholderUrl');
+    });
+
+    it('returns null for an unknown token', () => {
+      expect(getDltVarTypeMeta('{#nope#}')).toBe(null);
+    });
+  });
+
+  describe('getDltVarCharLimit', () => {
+    it('returns the type-specific char limit for known tokens', () => {
+      expect(getDltVarCharLimit('{#num#}')).toBe(40);
+      expect(getDltVarCharLimit('{#url#}')).toBe(120);
+      expect(getDltVarCharLimit('{#cbn#}')).toBe(14);
+    });
+
+    it('falls back to the supplied default when the token is unknown', () => {
+      expect(getDltVarCharLimit('{#nope#}', 40)).toBe(40);
+      expect(getDltVarCharLimit('{#nope#}', 99)).toBe(99);
+      expect(getDltVarCharLimit(null)).toBe(40);
+    });
+  });
+
+  describe('exported regexes', () => {
+    it('DLT_LEGACY_VAR_REGEX matches only the legacy generic token', () => {
+      expect(DLT_LEGACY_VAR_REGEX.test('body {#var#} tail')).toBe(true);
+      expect(DLT_LEGACY_VAR_REGEX.test('body {#VAR#} tail')).toBe(true);
+      expect(DLT_LEGACY_VAR_REGEX.test('body {#num#} tail')).toBe(false);
+    });
+
+    it('ANY_DLT_HASH_TOKEN_PROBE_REGEX detects any hash token safely across calls', () => {
+      expect(ANY_DLT_HASH_TOKEN_PROBE_REGEX.test('hi {#alp#} there')).toBe(true);
+      expect(ANY_DLT_HASH_TOKEN_PROBE_REGEX.test('hi {#url#} again')).toBe(true);
+      expect(ANY_DLT_HASH_TOKEN_PROBE_REGEX.test('plain')).toBe(false);
+    });
+  });
+});

package/v2Containers/Templates/_templates.scss

@@ -160,7 +160,6 @@
             line-clamp: 3;
             }
           }
-        
         }
       
         &.no-image .ant-card-meta {    
@@ -168,6 +167,44 @@
             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 {
@@ -1222,6 +1259,147 @@
   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;
@@ -1480,12 +1658,35 @@
   cursor: not-allowed;
 }
 
+.sms-service-explicit-retired-banner.ant-alert {
+  margin: 0 $CAP_SPACE_16 $CAP_SPACE_16 $CAP_SPACE_16;
+  padding: $CAP_SPACE_08 $CAP_SPACE_12;
+  align-items: center;
+}
+
+.sms-template-category-tag {
+  margin-bottom: $CAP_SPACE_12;
+  padding: 0 $CAP_SPACE_12;
+  border-radius: 62.5rem;
+}
+
+
+.sms-template-legacy-warning.ant-alert {
+  margin-top: $CAP_SPACE_12;
+
+  .ant-alert-title,
+  .ant-alert-title span {
+    font-weight: 400;
+    white-space: normal;
+  }
+}
+
 .template-action-dropdown {
   min-width: 14.286rem !important;
   .template-action-menu {
     padding: 4px 0px;
     .template-action-menu-item {
-      padding: 12px 24px;
+      padding: $CAP_SPACE_12 $CAP_SPACE_24;
     }
   }
 }

package/v2Containers/Templates/index.js

@@ -73,6 +73,7 @@ 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';
@@ -142,7 +143,10 @@ import {CREATIVE} from '../Facebook/constants';
 import videoPlay from '../../assets/videoPlay.svg';
 import whatsappImageEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_image_preview.svg';
 import whatsappVideoEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_video_preview.svg';
-import { CAP_SPACE_16, CAP_G08, CAP_G05, CAP_SPACE_08, CAP_SPACE_12 } from '@capillarytech/cap-ui-library/styled/variables';
+import {
+  CAP_SPACE_16, CAP_G08, CAP_G05, CAP_SPACE_08, CAP_SPACE_12, CAP_YELLOW01,
+} from '@capillarytech/cap-ui-library/styled/variables';
+import { SMS_CATEGORY_TAG_STYLES, SMS_CATEGORY_LABELS } from '../../v2Components/SmsFallback/constants';
 import { GA } from '@capillarytech/cap-ui-utils';
 import { MAPP_SDK } from '../InApp/constants';
 import injectReducer from '../../utils/injectReducer';
@@ -158,6 +162,7 @@ import { v2MobilePushSagas } from '../MobilePushNew/sagas';
 import { AUTO_CAROUSEL, BIG_PICTURE, FILMSTRIP_CAROUSEL, MANUAL_CAROUSEL } from '../MobilePushNew/constants';
 import CapPageSpinner from '../../v2Components/CapPageSpinner';
 import webPushSagas from '../WebPush/sagas';
+import { DLT_LEGACY_VAR_REGEX } from '../SmsTrai/Edit/dltVarTypes';
 const withMobilePushNewSaga = injectSaga({ key: 'mobilePushNew', saga: v2MobilePushSagas, mode: DAEMON });
 const withWebPushSaga = injectSaga({ key: 'webPush', saga: webPushSagas, mode: DAEMON });
 
@@ -454,9 +459,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   checkDLTfeatureEnable() {
-    const {smsRegister, isFullMode} = this.props;
-    const isTraiDlt = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
-    return isTraiDlt;
+    const { smsRegister, isFullMode, localTemplatesConfig } = this.props;
+    if (commonUtil.isTraiDLTEnable(isFullMode, smsRegister)) return true;
+    // Local-templates picker (RCS SMS fallback, campaigns): apply DLT UI whenever the org has
+    // the feature, even if the parent context wasn't marked `smsRegister === 'DLT'`.
+    return !!localTemplatesConfig?.useLocalTemplates && commonUtil.hasTraiDltFeature();
   }
 
   componentDidMount() {
@@ -1399,6 +1406,11 @@ 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,
@@ -1416,14 +1428,39 @@ 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 ? [accountName] : [],
-          brandName: accountName ? [accountName] : [],
+          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 || '',
         };
       }
 
@@ -2045,11 +2082,20 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       const isCardArchiveEligible = isArchivalEnabled && this.isChannelArchiveEligible(currentChannel, cardWhatsappStatus, cardRcsStatus);
       const isArchivedMode = isArchivalEnabled && get(this.props, 'Templates.isArchivedMode', false);
       const isAnyArchiveInProgress = isArchivalEnabled && !!(get(this.props, 'Templates.archiveInProgress') || get(this.props, 'Templates.unarchiveInProgress') || get(this.props, 'Templates.bulkArchiveInProgress') || get(this.props, 'Templates.bulkUnarchiveInProgress'));
+      const smsBaseForLegacyCheck = template?.versions?.base || {};
+      const updatedSmsEditorForLegacy = smsBaseForLegacyCheck['updated-sms-editor'];
+      const smsBodyForLegacyCheck = Array.isArray(updatedSmsEditorForLegacy)
+        ? updatedSmsEditorForLegacy.join('')
+        : updatedSmsEditorForLegacy ?? smsBaseForLegacyCheck['sms-editor'] ?? '';
+      const isDltLegacyTemplate = currentChannel === SMS
+        && isTraiDltFeature
+        && !this.props.isFullMode
+        && DLT_LEGACY_VAR_REGEX.test(smsBodyForLegacyCheck);
       const templateData = {
         key: `${currentChannel}-card-${template?.name}`,
         title: (
           <span className="template-card-title" title={template?.name}>
-            {isCardArchiveEligible && this.renderCardSelectionCheckbox({ templateId: template._id, selectedIds: selectedIdsArrayForCard, isDisabled: isAnyArchiveInProgress })}
+            {isCardArchiveEligible && this.renderCardSelectionCheckbox({ templateId: template._id, selectedIds: selectedIdsArrayForCard, isDisabled: isAnyArchiveInProgress || isDltLegacyTemplate })}
             <CapLabel.CapLabelInline type="label1" title={template?.name} className="template-card-name">
               {template?.name}
               {currentChannel === INAPP && (
@@ -2109,20 +2155,39 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           })()
         ],
         hoverOption: isArchivedMode || !this.canPerform(PERMISSIONS.CREATIVE_EDIT) ? null : (
-          <CapButton
-            className={
-              this.props.isFullMode
-                ? `edit-${channelLowerCase}`
-                : `select-${channelLowerCase}`
-            }
-            onClick={e =>
-              handlers.handleEditClick(e, template, undefined, undefined, {
-                account: this.state.selectedAccount
-              })
-            }
-          >
-            {hoverButtonText}
-          </CapButton>
+          isDltLegacyTemplate ? (
+            <CapTooltip
+              title={this.props.intl.formatMessage(messages.smsLegacyBlockedTooltip)}
+            >
+              <CapLabel.CapLabelInline>
+                <CapButton
+                  className={
+                    this.props.isFullMode
+                      ? `edit-${channelLowerCase}`
+                      : `select-${channelLowerCase}`
+                  }
+                  disabled
+                >
+                  {hoverButtonText}
+                </CapButton>
+              </CapLabel.CapLabelInline>
+            </CapTooltip>
+          ) : (
+            <CapButton
+              className={
+                this.props.isFullMode
+                  ? `edit-${channelLowerCase}`
+                  : `select-${channelLowerCase}`
+              }
+              onClick={e =>
+                handlers.handleEditClick(e, template, undefined, undefined, {
+                  account: this.state.selectedAccount
+                })
+              }
+            >
+              {hoverButtonText}
+            </CapButton>
+          )
         )
       };
       const {
@@ -2222,22 +2287,49 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         );
       }
       switch (currentChannel) {
-        case SMS:
+        case SMS: {
+          const smsBaseForCard = template.versions.base || {};
+          const updatedSmsEditor = smsBaseForCard['updated-sms-editor'];
+          const normalizedUpdatedSmsEditor = Array.isArray(updatedSmsEditor)
+            ? updatedSmsEditor.join('')
+            : updatedSmsEditor;
+          const smsBodyForCard = normalizedUpdatedSmsEditor || smsBaseForCard['sms-editor'] || '';
+          const hasLegacyVarToken = DLT_LEGACY_VAR_REGEX.test(smsBodyForCard);
+          const rawCategoryLabel = smsBaseForCard.type || '';
+          const categoryLabel = rawCategoryLabel.toLowerCase() === SMS_CATEGORY_LABELS.SERVICE_EXPLICIT
+            ? this.props.intl.formatMessage(messages.promotional)
+            : rawCategoryLabel;
+          const categoryTagStyle = SMS_CATEGORY_TAG_STYLES[categoryLabel.toLowerCase()] || {};
           templateData.content = isTraiDltFeature ? (
             <>
-              <CapLabel type="label3" style={{ marginBottom: CAP_SPACE_16 }}>
-                {template.versions.base.type}
-              </CapLabel>
-              <CapLabel type="label1">
-                {template.versions.base['updated-sms-editor'] === ''
-                  ? template.versions.base['sms-editor']
-                  : template.versions.base['updated-sms-editor']?.join('')}
-              </CapLabel>
+              {hasLegacyVarToken ? (
+                <CapColoredTag
+                  tagColor="rgba(254, 197, 46, 0.15)"
+                  tagTextColor={CAP_YELLOW01}
+                  tagHeight="1.25rem"
+                  tagFontSize="0.75rem"
+                  className="sms-template-category-tag"
+                >
+                  {this.props.intl.formatMessage(messages.smsLegacyFormatBadge)}
+                </CapColoredTag>
+              ) : categoryLabel ? (
+                <CapColoredTag
+                  tagColor={categoryTagStyle.tagColor}
+                  tagTextColor={categoryTagStyle.tagTextColor}
+                  tagHeight="1.25rem"
+                  tagFontSize="0.75rem"
+                  className="sms-template-category-tag"
+                >
+                  {categoryLabel}
+                </CapColoredTag>
+              ) : null}
+              <CapLabel type="label1">{smsBodyForCard}</CapLabel>
             </>
           ) : (
             template.versions.base['sms-editor']
           );
           break;
+        }
         case EMAIL: {
           const url = template.versions.base.preview_http_url;
           if (url) {
@@ -2436,10 +2528,59 @@ 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;
@@ -2761,6 +2902,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         )}
       </CapRow>
       {[WHATSAPP, ZALO, INAPP,RCS].includes(currentChannel) && this.selectedFilters()}
+        {currentChannel === SMS && this.checkDLTfeatureEnable() && (
+          <CapInfoNote
+            className="sms-service-explicit-retired-banner"
+            message={this.props.intl.formatMessage(messages.smsServiceExplicitRetiredBanner)}
+          />
+        )}
         {<div>
           {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
             <div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : this.isFullMode() ? "v2-pagination-container" : "v2-pagination-container-half"}>
@@ -4788,7 +4935,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <CapRadio.CapRadioGroup className="line-filters" defaultValue={smsFilter} onChange={this.setSMSFilter}>
               {
                 (() => {
-                  const { ALL, SERVICE_IMPLICIT, SERVICE_EXPLICIT, PROMOTIONAL } = SMS_FILTERS;
+                  const { ALL, SERVICE_IMPLICIT, PROMOTIONAL } = SMS_FILTERS;
                   return (
                     <>
                       <CapRadio.Button value={ALL}><CapLabel type="label2">
@@ -4797,9 +4944,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                       <CapRadio.Button value={PROMOTIONAL}><CapLabel type="label2">
                         <FormattedMessage {...messages.promotional} />
                       </CapLabel></CapRadio.Button>
-                      <CapRadio.Button value={SERVICE_EXPLICIT}><CapLabel type="label2">
-                        <FormattedMessage {...messages.serviceExplicit} />
-                      </CapLabel></CapRadio.Button>
                       <CapRadio.Button value={SERVICE_IMPLICIT}><CapLabel type="label2">
                         <FormattedMessage {...messages.serviceImplicit} />
                       </CapLabel></CapRadio.Button>
@@ -5107,15 +5251,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   ? this.props.Templates.selectedWhatsappAccount.name
                   : null
               }
-              // Pass formData for EMAIL and SMS channels for tag extraction
+              // Pass formData for tag extraction (EMAIL/SMS use nested formData; VIBER uses content object)
               formData={
-                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
+                (() => {
+                  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;
+                })()
               }
             />
           )}