@capillarytech/creatives-library 9.0.47 → 9.0.48

package/constants/unified.js

@@ -179,6 +179,7 @@ export const DLT_HASH_TOKEN_INNER_NAME_REGEX = /^\{#\s*(.*?)\s*#\}$/;
 export const MUSTACHE_VAR_NAME_CAPTURE_REGEX = /\{\{([^}]+)\}\}/g;
 /** Global with capture group: inner body inside `{#body#}`. */
 export const DLT_VAR_BODY_CAPTURE_REGEX = /\{\#([^#]*)\#\}/g;
+export const DLT_HASH_TOKEN_SPLIT_REGEX = /(\{#[^#]*#\})/g;
 
 export const GET_TRANSLATION_MAPPED = {
   'en': 'en-US',

package/package.json

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

package/v2Components/CommonTestAndPreview/UnifiedPreview/SmsPreviewContent.js

@@ -24,11 +24,29 @@ import {
   TIME_FORMAT_PM,
 } from '../constants';
 import messages from '../messages';
+import { DLT_HASH_TOKEN_SPLIT_REGEX } from '../../../constants/unified';
 
 // Import device mockup images
 const smsMobileAndroid = require('../../../assets/Android.png');
 const smsMobileIos = require('../../../assets/iOS.png');
 
+// Split-with-capture keeps DLT tokens at odd indices so they can be styled distinctly.
+function renderSmsPreviewWithHighlightedTokens(text) {
+  if (typeof text !== 'string' || !text) return text;
+  return text.split(DLT_HASH_TOKEN_SPLIT_REGEX).map((part, i) => (
+    i % 2 === 1
+      ? (
+        <CapLabel.CapLabelInline
+          key={`dlt-tok-${i}`}
+          className="sms-preview-dlt-token"
+        >
+          {part}
+        </CapLabel.CapLabelInline>
+      )
+      : part
+  ));
+}
+
 const SmsPreviewContent = ({
   content,
   device,
@@ -125,7 +143,9 @@ const SmsPreviewContent = ({
         <CapRow className="sms-message-container">
           <CapRow useLegacy className="sms-message-bubble">
             <CapRow useLegacy className="sms-message-text">
-              {content || formatMessage(messages.noContent)}
+              {content
+                ? renderSmsPreviewWithHighlightedTokens(content)
+                : formatMessage(messages.noContent)}
             </CapRow>
           </CapRow>
           <CapRow useLegacy className="sms-timestamp">

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -2744,3 +2744,8 @@
       }
     }
   }
+
+.sms-preview-dlt-token {
+  color: $CAP_BLUE01;
+  font-size: 0.8125rem;
+}

package/v2Components/CommonTestAndPreview/index.js

@@ -1350,7 +1350,10 @@ const CommonTestAndPreview = (props) => {
         const language = formDataObj?.language || formDataObj?.templateLanguage || 'en';
         const mediaType = formDataObj?.mediaType || formDataObj?.templateMediaType || MEDIA_TYPE_TEXT;
         const buttonType = formDataObj?.buttonType || BUTTON_TYPE_NONE;
-        const varMapped = formDataObj?.varMapped || {};
+        const existingVarMapped = formDataObj?.varMapped || {};
+        const varMapped = Object.keys(existingVarMapped).length > 0
+          ? existingVarMapped
+          : (customValuesObj || {});
         const isPreviewUrl = formDataObj?.isPreviewUrl || false;
 
         // Extract buttons from ctaData or quickReplyData

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/SmsPreviewContent.test.js

@@ -601,6 +601,38 @@ describe('SmsPreviewContent', () => {
     });
   });
 
+  describe('DLT token highlighting', () => {
+    it('wraps `{#…#}` tokens in a highlighted span and leaves plain text as-is', () => {
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...defaultProps} content="Hi {#alp#}, code {#num#} thanks" />
+        </TestWrapper>
+      );
+      const tokens = container.querySelectorAll('.sms-preview-dlt-token');
+      expect(tokens.length).toBe(2);
+      expect(tokens[0].textContent).toBe('{#alp#}');
+      expect(tokens[1].textContent).toBe('{#num#}');
+    });
+
+    it('renders no token spans when content has no DLT tokens', () => {
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...defaultProps} content="Plain SMS body" />
+        </TestWrapper>
+      );
+      expect(container.querySelectorAll('.sms-preview-dlt-token').length).toBe(0);
+    });
+
+    it('falls back to noContent placeholder when content is empty', () => {
+      render(
+        <TestWrapper>
+          <ComponentToRender {...defaultProps} content="" />
+        </TestWrapper>
+      );
+      expect(screen.getByText('No content available')).toBeTruthy();
+    });
+  });
+
   describe('PropTypes Validation', () => {
     it('should accept all required props without warnings', () => {
       const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

package/v2Components/SmsFallback/constants.js

@@ -1,3 +1,6 @@
+import {
+  CAP_BLUE01, CAP_GREEN01, CAP_PURPLE01, CAP_PURPLE03, CAP_PALE_GREY, CAP_G04, CAP_G08,
+} from '@capillarytech/cap-ui-library/styled/variables';
 import {
   WHATSAPP,
   RCS,
@@ -45,6 +48,22 @@ export const SMS_CATEGORY_FILTERS = {
   SERVICE_IMPLICIT: 'implicit',
 };
 
+/** Backend `versions.base.type` display strings for DLT SMS categories. */
+export const SMS_CATEGORY_LABELS = {
+  PROMOTIONAL: 'promotional',
+  SERVICE_IMPLICIT: 'service implicit',
+  SERVICE_EXPLICIT: 'service explicit',
+  TRANSACTIONAL: 'transactional',
+};
+
+/** Colored-tag styling per DLT SMS category, keyed by lowercased `versions.base.type`. */
+export const SMS_CATEGORY_TAG_STYLES = {
+  [SMS_CATEGORY_LABELS.PROMOTIONAL]: { tagColor: CAP_PALE_GREY, tagTextColor: CAP_BLUE01 },
+  [SMS_CATEGORY_LABELS.SERVICE_IMPLICIT]: { tagColor: '#E7F6EC', tagTextColor: CAP_GREEN01 },
+  [SMS_CATEGORY_LABELS.SERVICE_EXPLICIT]: { tagColor: CAP_PURPLE03, tagTextColor: CAP_PURPLE01 },
+  [SMS_CATEGORY_LABELS.TRANSACTIONAL]: { tagColor: CAP_G08, tagTextColor: CAP_G04 },
+};
+
 /** `location` for embedded SMS creatives picker (CreativesContainer / TemplatesV2). */
 export const EMBEDDED_SMS_CREATIVES_LOCATION = {
   pathname: '/sms/create',

package/v2Components/SmsFallback/index.js

@@ -263,9 +263,6 @@ function SmsFallbackPortalContent({
       <CapRadio.Button value={SMS_CATEGORY_FILTERS.PROMOTIONAL}>
         <CapLabel type="label2"><FormattedMessage {...templatesListMessages.promotional} /></CapLabel>
       </CapRadio.Button>
-      <CapRadio.Button value={SMS_CATEGORY_FILTERS.SERVICE_EXPLICIT}>
-        <CapLabel type="label2"><FormattedMessage {...templatesListMessages.serviceExplicit} /></CapLabel>
-      </CapRadio.Button>
       <CapRadio.Button value={SMS_CATEGORY_FILTERS.SERVICE_IMPLICIT}>
         <CapLabel type="label2"><FormattedMessage {...templatesListMessages.serviceImplicit} /></CapLabel>
       </CapRadio.Button>

package/v2Containers/SmsTrai/Edit/constants.js

@@ -15,3 +15,5 @@ export const DEFAULT = 'default';
 export const FULL = 'full';
 export const ALL = 'all';
 export const LIBRARY = 'library';
+/** Matches horizontal whitespace only (spaces, tabs) — preserves \r\n so newline-only chunks are still non-empty. */
+export const HORIZONTAL_WHITESPACE_ONLY_REGEX = /[^\S\r\n]/gm;

package/v2Containers/SmsTrai/Edit/dltVarTypes.js

@@ -0,0 +1,88 @@
+export const DLT_VAR_TYPE_KEYS = [
+  'numeric',
+  'alphanumeric',
+  'url',
+  'urlott',
+  'cbn',
+  'email',
+];
+
+export const DLT_VAR_TYPE_META = {
+  numeric: {
+    short: '{#num#}',
+    long: '{#numeric#}',
+    charLimit: 40,
+    placeholderKey: 'dltVarPlaceholderNumeric',
+  },
+  alphanumeric: {
+    short: '{#alp#}',
+    long: '{#alphanumeric#}',
+    charLimit: 40,
+    placeholderKey: 'dltVarPlaceholderAlphanumeric',
+  },
+  url: {
+    short: '{#urg#}',
+    long: '{#url#}',
+    charLimit: 120,
+    placeholderKey: 'dltVarPlaceholderUrl',
+  },
+  urlott: {
+    short: '{#uro#}',
+    long: '{#urlott#}',
+    charLimit: 120,
+    placeholderKey: 'dltVarPlaceholderUrlott',
+  },
+  cbn: {
+    short: '{#cbn#}',
+    long: '{#cbn#}',
+    charLimit: 14,
+    placeholderKey: 'dltVarPlaceholderCbn',
+  },
+  email: {
+    short: '{#eml#}',
+    long: '{#email#}',
+    charLimit: 40,
+    placeholderKey: 'dltVarPlaceholderEmail',
+  },
+};
+
+export const DLT_LEGACY_VAR_TOKEN = '{#var#}';
+
+const TOKEN_TO_TYPE = (() => {
+  const map = {};
+  DLT_VAR_TYPE_KEYS.forEach((key) => {
+    const meta = DLT_VAR_TYPE_META[key];
+    map[meta.short.toLowerCase()] = key;
+    map[meta.long.toLowerCase()] = key;
+  });
+  map[DLT_LEGACY_VAR_TOKEN] = 'alphanumeric';
+  return map;
+})();
+
+export const ANY_DLT_HASH_TOKEN_REGEX = /^\{#\s*[^#]*\s*#\}$/;
+export const ANY_DLT_HASH_TOKEN_GLOBAL_REGEX = /\{#\s*[^#]*\s*#\}/g;
+export const ANY_DLT_HASH_TOKEN_PROBE_REGEX = /\{#[^#]*#\}/;
+export const DLT_LEGACY_VAR_REGEX = /\{#\s*var\s*#\}/i;
+export const DLT_HASH_TOKEN_SPLIT_REGEX = /(\{#[^#]*#\})/g;
+
+export function isAnyDltVarToken(candidate) {
+  return typeof candidate === 'string' && ANY_DLT_HASH_TOKEN_REGEX.test(candidate);
+}
+
+function normaliseToken(token) {
+  if (typeof token !== 'string') return '';
+  return token.replace(/\s+/g, '').toLowerCase();
+}
+
+export function getDltVarTypeKey(token) {
+  return TOKEN_TO_TYPE[normaliseToken(token)] || null;
+}
+
+export function getDltVarTypeMeta(token) {
+  const key = getDltVarTypeKey(token);
+  return key ? DLT_VAR_TYPE_META[key] : null;
+}
+
+export function getDltVarCharLimit(token, fallback = 40) {
+  return getDltVarTypeMeta(token)?.charLimit ?? fallback;
+}