@capillarytech/creatives-library 9.0.36 → 9.0.37-alpha.1

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

@@ -570,8 +570,8 @@ describe('RCS carousel label resolution in non-full mode', () => {
     expect(card0NameAreas.length).toBe(2);
 
     act(() => {
-      const slotId = nameVarAreas.at(0).prop('id') || nameVarAreas.at(0).key();
-      nameVarAreas.at(0).props().onChange({ target: { id: slotId, value: 'madhavi' } });
+      const slotId = card0NameAreas.at(0).prop('id') || card0NameAreas.at(0).key();
+      card0NameAreas.at(0).props().onChange({ target: { id: slotId, value: 'madhavi' } });
     });
     wrapper.update();
 
@@ -1189,6 +1189,130 @@ describe('RCS createPayload', () => {
     expect(Object.prototype.hasOwnProperty.call(card, 'cardVarMapped')).toBe(true);
   });
 
+  it('disables Done in non-full mode when a CTA button URL still holds the unresolved {{1}} placeholder', () => {
+    const templateData = {
+      name: 'PromoCard',
+      type: 'RCS',
+      versions: {
+        base: {
+          content: {
+            RCS: {
+              rcsContent: {
+                cardType: 'STANDALONE',
+                cardSettings: { cardOrientation: 'VERTICAL' },
+                cardContent: [
+                  {
+                    title: 'Title',
+                    description: 'Desc',
+                    mediaType: 'VIDEO',
+                    media: {
+                      mediaUrl: 'https://cdn.example.com/video.mp4',
+                      thumbnailUrl: 'https://cdn.example.com/video-thumb.jpg',
+                    },
+                    suggestions: [
+                      { type: 'CTA', text: 'Visit here', url: 'https://example.com{{1}}' },
+                    ],
+                  },
+                ],
+                contentType: 'RICHCARD',
+              },
+            },
+          },
+        },
+      },
+    };
+
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            clearCreateResponse: jest.fn(),
+            getTemplateDetails: jest.fn(),
+            uploadRcsAsset: jest.fn(),
+            clearRcsMediaAsset: jest.fn(),
+            editTemplate: jest.fn(),
+            clearEditResponse: jest.fn(),
+          }}
+          globalActions={{ fetchSchemaForEntity }}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          intl={{ formatMessage }}
+          location={{ pathname: '/rcs/create', query: { type: false, module: 'default' }, search: '' }}
+          params={params}
+          templateData={templateData}
+          rcsData={{}}
+          isFullMode={false}
+          isEditFlow={false}
+          loadingTags={false}
+          metaEntities={[]}
+          isDltEnabled={false}
+          smsRegister={'DLT'}
+          getFormData={jest.fn()}
+        />
+      </Provider>,
+    );
+
+    const doneBtn = wrapper.find('CapButton.rcs-done-btn').at(0);
+    expect(doneBtn.exists()).toBe(true);
+    expect(doneBtn.prop('disabled')).toBe(true);
+  });
+
+  it('disables Send for Approval in full-mode creation when a CTA button URL still holds the unresolved {{1}} placeholder', () => {
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            clearCreateResponse: jest.fn(),
+            getTemplateDetails: jest.fn(),
+            uploadRcsAsset: jest.fn(),
+            clearRcsMediaAsset: jest.fn(),
+            editTemplate: jest.fn(),
+            clearEditResponse: jest.fn(),
+          }}
+          globalActions={{ fetchSchemaForEntity }}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          intl={{ formatMessage }}
+          location={{ pathname: '/rcs/create', query: { type: false, module: 'default' }, search: '' }}
+          params={params}
+          templateData={{}}
+          rcsData={{}}
+          isFullMode
+          isEditFlow={false}
+          loadingTags={false}
+          metaEntities={[]}
+          isDltEnabled={false}
+          smsRegister={'DLT'}
+          getFormData={jest.fn()}
+        />
+      </Provider>,
+    );
+
+    act(() => {
+      wrapper.find('#rcs_template_name_input').at(0).simulate('change', { target: { value: 'PromoCard' } });
+    });
+    wrapper.update();
+
+    act(() => {
+      wrapper.find('#rcs_template_message_textarea').at(0).simulate('change', { target: { value: 'Hello there' } });
+    });
+    wrapper.update();
+
+    const actionButton = wrapper.find('.cap-action-button-mock').at(0);
+    expect(actionButton.exists()).toBe(true);
+    act(() => {
+      actionButton.prop('updateButtonChange')(
+        { type: 'CTA', text: 'Visit here', url: 'https://example.com{{1}}' },
+        0,
+      );
+    });
+    wrapper.update();
+
+    const doneBtn = wrapper.find('CapButton.rcs-done-btn').at(0);
+    expect(doneBtn.exists()).toBe(true);
+    expect(doneBtn.prop('disabled')).toBe(true);
+  });
+
   it('should sync duplicate placeholders via cardVarMapped in non-full mode (typing once updates all occurrences)', () => {
     const templateData = {
       name: 'DupVarsTemplate',
@@ -1286,7 +1410,12 @@ describe('RCS createPayload', () => {
                 cardContent: [
                   {
                     title: 'Hello {{user_name}} and {{user_name}}',
-                    description: 'Hi {{user_name}}',
+                    // Distinct from the title's var name: VarSegmentMessageEditor ids are
+                    // `${token}_${localSegmentIndex}`, not scoped per-field, so reusing
+                    // {{user_name}} here would collide with the title's own id and get
+                    // picked up by the `{{user_name}}_` filter below once the tag-select
+                    // renames the title's first occurrence.
+                    description: 'Hi {{other_var}}',
                     mediaType: 'IMAGE',
                     media: { mediaUrl: '', thumbnailUrl: '' },
                     cardVarMapped: {},
@@ -1352,12 +1481,18 @@ describe('RCS createPayload', () => {
     });
     wrapper.update();
 
-    const updatedTitleVarAreas = wrapper.find('CapInputTextArea').filterWhere((n) => {
+    // The focused occurrence's own token is replaced with the picked tag, while the untouched
+    // duplicate keeps its original {{user_name}} token but syncs to the same resolved value.
+    const renamedVarArea = wrapper.find('CapInputTextArea').filterWhere((n) => {
+      const id = n.prop('id') || '';
+      return id.includes('{{first_name}}_');
+    });
+    const duplicateVarArea = wrapper.find('CapInputTextArea').filterWhere((n) => {
       const id = n.prop('id') || '';
       return id.includes('{{user_name}}_');
     });
-    expect(updatedTitleVarAreas.at(0).prop('value')).toBe('{{first_name}}');
-    expect(updatedTitleVarAreas.at(1).prop('value')).toBe('{{first_name}}');
+    expect(renamedVarArea.at(0).prop('value')).toBe('{{first_name}}');
+    expect(duplicateVarArea.at(0).prop('value')).toBe('{{first_name}}');
   });
 
   it('should keep two tags + freetext inside the variable textarea in non-full mode edit (not merged into static text)', () => {

package/v2Containers/Rcs/tests/rcsLibraryHydrationUtils.test.js

@@ -364,6 +364,14 @@ describe('rcsLibraryHydrationUtils', () => {
       expect(out).toEqual({ 1: 'x', user_name: 'y' });
     });
 
+    it('keeps function-style tag keys with parentheses (voucher/offer/badge tags)', () => {
+      const input = {
+        'voucher(1190738)': 'SAVE20',
+        'badges_enroll_no_expiry(123)': 'Gold',
+      };
+      expect(pickRcsCardVarMappedEntries(input)).toEqual(input);
+    });
+
     it('returns {} for an empty object', () => {
       expect(pickRcsCardVarMappedEntries({})).toEqual({});
     });
@@ -439,6 +447,7 @@ describe('rcsLibraryHydrationUtils', () => {
             template: 'Hello',
             templateName: 'T1',
             registeredSenderIds: ['S1'],
+            templateVariableMapping: { '{#a#}_0': { data: 'x', count: 1 } },
           },
         },
       });
@@ -497,6 +506,7 @@ describe('rcsLibraryHydrationUtils', () => {
       expect(out.smsFallBackContent.templateConfigs).toEqual({
         templateName: 'ConfigName',
         registeredSenderIds: ['H1'],
+        templateVariableMapping: { a: { data: '1', count: 1 } },
       });
       expect(out.smsFallBackContent.rcsSmsFallbackVarMapped).toEqual({ a: '1' });
     });
@@ -537,6 +547,25 @@ describe('rcsLibraryHydrationUtils', () => {
       });
     });
 
+    it('non-full mode: DLT campaign with registeredSenderIds carries the var map into templateConfigs.templateVariableMapping (so it survives normalizeRcsMessageContentForApi stripping rcsSmsFallbackVarMapped)', () => {
+      enableTraiDlt();
+      const out = buildSmsFallBackContentForPayload({
+        smsFallbackData: {
+          message: 'Hi {#var#} your OTP is {#var#}.Capillary Tech.',
+          templateName: 'TEST_FALLBACK',
+          registeredSenderIds: ['CPLRYT'],
+          rcsSmsFallbackVarMapped: { '{#var#}_1': 'test1', '{#var#}_3': 'test2' },
+        },
+        templateData: {},
+        isFullMode: false,
+        smsRegister: 'DLT',
+      });
+      expect(out.smsFallBackContent.templateConfigs.templateVariableMapping).toEqual({
+        '{#var#}_1': { data: 'test1', count: 1 },
+        '{#var#}_3': { data: 'test2', count: 2 },
+      });
+    });
+
     it('non-full mode: DLT campaign but no derivable templateConfigs omits templateConfigs', () => {
       enableTraiDlt();
       const out = buildSmsFallBackContentForPayload({
@@ -656,6 +685,45 @@ describe('rcsLibraryHydrationUtils', () => {
       expect(warnSpy).toHaveBeenCalled();
     });
 
+    it('falls back to templateConfigs.templateName when root-level name fields are absent', () => {
+      const out = resolveSmsFallbackHydrationFromDetails({
+        smsFallBackContent: {
+          templateConfigs: { templateName: 'ConfigTemplateName' },
+        },
+      });
+      expect(out.nextSmsState.templateName).toBe('ConfigTemplateName');
+    });
+
+    it('falls back to templateConfigs.name when no other name field is present anywhere', () => {
+      const out = resolveSmsFallbackHydrationFromDetails({
+        smsFallBackContent: {
+          templateConfigs: { name: 'ConfigName' },
+        },
+      });
+      expect(out.nextSmsState.templateName).toBe('ConfigName');
+    });
+
+    it('falls back to the root-level templateName when templateConfigs has no name field', () => {
+      const out = resolveSmsFallbackHydrationFromDetails({
+        smsFallBackContent: {
+          templateName: 'RootName',
+          templateConfigs: { registeredSenderIds: ['123'] },
+        },
+      });
+      expect(out.nextSmsState.templateName).toBe('RootName');
+    });
+
+    it('prefers the root templateName over a conflicting nested templateConfigs.name', () => {
+      const out = resolveSmsFallbackHydrationFromDetails({
+        smsFallBackContent: {
+          templateName: 'RootName',
+          smsTemplateName: '',
+          templateConfigs: { name: 'NestedName', header: ['H1'] },
+        },
+      });
+      expect(out.nextSmsState.templateName).toBe('RootName');
+    });
+
     it('is meaningful from var map alone, with no template name or message text', () => {
       const out = resolveSmsFallbackHydrationFromDetails({
         smsFallBackContent: { rcsSmsFallbackVarMapped: { '{#a#}_0': 'v' } },
@@ -705,6 +773,48 @@ describe('rcsLibraryHydrationUtils', () => {
       ).toBe('Direct Template');
     });
 
+    it('prefers templateConfigs.template (raw, {#var#} intact) over smsContent/message for DLT', () => {
+      const out = resolveSmsFallbackHydrationFromDetails({
+        smsFallBackContent: {
+          smsContent: 'hey user this is a test',
+          message: 'hey user this is a test',
+          templateConfigs: {
+            templateName: 'RCSDLT2',
+            template: 'hey{#var#}test',
+            templateVariableMapping: {
+              '{#var#}_1': { data: ' user this is a ', count: 1 },
+            },
+          },
+        },
+      });
+      expect(out.nextSmsState.content).toBe('hey{#var#}test');
+      expect(out.nextSmsState.templateContent).toBe('hey{#var#}test');
+      expect(out.nextSmsState.rcsSmsFallbackVarMapped).toEqual({ '{#var#}_1': ' user this is a ' });
+    });
+
+    it('merges templateVariableMapping-derived slots with an explicit rcsSmsFallbackVarMapped (explicit wins)', () => {
+      const out = resolveSmsFallbackHydrationFromDetails({
+        smsFallBackContent: {
+          smsContent: 'hey user this is a test',
+          rcsSmsFallbackVarMapped: { '{#var#}_1': 'explicit override' },
+          templateConfigs: {
+            template: 'hey{#var#}test',
+            templateVariableMapping: {
+              '{#var#}_1': { data: ' user this is a ', count: 1 },
+            },
+          },
+        },
+      });
+      expect(out.nextSmsState.rcsSmsFallbackVarMapped).toEqual({ '{#var#}_1': 'explicit override' });
+    });
+
+    it('falls back to smsContent when templateConfigs.template is absent (non-DLT)', () => {
+      const out = resolveSmsFallbackHydrationFromDetails({
+        smsFallBackContent: { smsContent: 'Hi {{first_name}}, your OTP is 1234' },
+      });
+      expect(out.nextSmsState.content).toBe('Hi {{first_name}}, your OTP is 1234');
+    });
+
     it('joins an updated-sms-editor array into the fallback message', () => {
       const out = resolveSmsFallbackHydrationFromDetails({
         smsFallBackContent: {

package/v2Containers/Rcs/tests/utils.test.js

@@ -781,6 +781,42 @@ describe('RCS utils', () => {
       expect(rcsTitle).toBe('');
       expect(rcsDesc).toBe('Visit Store for {{loyalty_points}} discount');
     });
+
+    it('carousel card 1+: cardSlotOffset param resolves against its own global slots, not card 0\'s', () => {
+      // Full, correctly-populated carousel-wide map: slot 1 = card 0 title (user_id_b64), slot 2 =
+      // card 0 desc (voucher(1190738)), slot 3 = card 1 title (user_id_b64), slot 4 = card 1 desc
+      // (first_name).
+      const fullCarouselWideMap = {
+        1: '{{user_id_b64}}',
+        2: '{{voucher(1190738)}}',
+        3: '{{user_id_b64}}',
+        4: '{{first_name}}',
+      };
+      // Card 1's own title/description, called with cardSlotOffset=2 (card 0 contributed 2 slots) —
+      // the same way mapRcsCardContentForConsumerWithResolvedTags now calls it per card.
+      const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
+        'This is a park {{3}}',
+        'This park has a cat and a bird {{4}}',
+        fullCarouselWideMap,
+        true,
+        false,
+        false,
+        2,
+      );
+      expect(rcsTitle).toBe('This is a park {{user_id_b64}}');
+      expect(rcsDesc).toBe('This park has a cat and a bird {{first_name}}');
+    });
+
+    it('omitting cardSlotOffset defaults to 0 (single-card / standalone callers unaffected)', () => {
+      const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
+        'Hi {{1}}',
+        'Pts {{2}}',
+        { 1: '{{first_name}}', 2: '{{loyalty_points}}' },
+        true,
+      );
+      expect(rcsTitle).toBe('Hi {{first_name}}');
+      expect(rcsDesc).toBe('Pts {{loyalty_points}}');
+    });
   });
 
   describe('sanitizeCardVarMappedValue', () => {

package/v2Containers/Rcs/utils.js

@@ -6,6 +6,7 @@ import {
   RCS_NUMERIC_VAR_NAME_REGEX,
   REGEX_SPECIAL_CHARS_ESCAPE_PATTERN,
   RCS_STRIP_MUSTACHE_DELIMITERS_REGEX,
+  RCS_MUSTACHE_WRAPPED_REGEX,
 } from './constants';
 import './index.scss';
 // import { formatMessage } from '../../../utils/intl';
@@ -341,6 +342,8 @@ export function resolveRcsCardPreviewStrings(
   cardVarMapped,
   isLibraryMode = false,
   textOnlyCard = false,
+  preserveLiteralValueTokens = false,
+  cardSlotOffset = 0,
 ) {
   const splitTemplateVarStringRcs = (str) => splitTemplateVarString(str, rcsVarRegex);
   const getVarNameFromToken = (token = '') =>
@@ -389,8 +392,8 @@ export function resolveRcsCardPreviewStrings(
     ? 0
     : (effectiveTitle.match(rcsVarRegex) || []).length;
   return {
-    rcsTitle: textOnlyCard ? '' : resolveTemplateWithMap(effectiveTitle, 0),
-    rcsDesc: resolveTemplateWithMap(String(description || ''), titleVarCount),
+    rcsTitle: textOnlyCard ? '' : resolveTemplateWithMap(effectiveTitle, cardSlotOffset),
+    rcsDesc: resolveTemplateWithMap(String(description || ''), cardSlotOffset + titleVarCount),
   };
 }
 
@@ -411,6 +414,7 @@ export function mapRcsCardContentForConsumerWithResolvedTags(
       : {};
   const list = Array.isArray(cardContentArray) ? cardContentArray : [];
   const isLibraryMode = isFullMode !== true;
+  let carouselSlotOffset = 0;
   return list.map((card) => {
     if (!card || typeof card !== 'object') return card;
     const nested =
@@ -421,13 +425,21 @@ export function mapRcsCardContentForConsumerWithResolvedTags(
     const nestedClean = pickRcsCardVarMappedEntries(nested);
     const merged = { ...rootClean, ...nestedClean };
     const textOnly = isRcsTextOnlyCardMediaType(card.mediaType);
+    const cardTitle = card.title ?? '';
+    const cardDescription = card.description ?? '';
     const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
-      card.title ?? '',
-      card.description ?? '',
+      cardTitle,
+      cardDescription,
       merged,
       isLibraryMode,
       textOnly,
+      true,
+      carouselSlotOffset,
     );
+    const effectiveTitleForCount = textOnly ? '' : String(cardTitle);
+    const titleVarCount = (effectiveTitleForCount.match(rcsVarRegex) || []).length;
+    const descVarCount = (String(cardDescription).match(rcsVarRegex) || []).length;
+    carouselSlotOffset += titleVarCount + descVarCount;
     const { cardVarMapped: _drop, ...cardRest } = card;
 
     return {

package/v2Containers/SmsTrai/Edit/index.js

@@ -169,12 +169,11 @@ export const SmsTraiEdit = (props) => {
     return traiDltEnabled || hasTraiDltFeature() || isRcsEditFlow;
   }, [isRcsSmsFallback, traiDltEnabled, isRcsEditFlow]);
 
-  /**
-   * RCS SMS fallback: always show character count vs TRAI max (`SMS_TRAI_CONTENT_MAX_LENGTH`).
-   * Do not use `totalCharacters` ({smsCount} SMS via length/160) here: resolved template + variable
-   * values can exceed one GSM segment while DLT still shows a single registered template — length/160
-   * is only a rough segment hint and reads as “wrong SMS count” in campaigns.
-   */
+
+  const [rcsFallbackVarSegmentModeActive, setRcsFallbackVarSegmentModeActive] = useState(false);
+  const useRcsFallbackVarSegmentForCurrentText = isRcsSmsFallback && rcsFallbackVarSegmentModeActive;
+
+
   const renderDescriptionCharacterCount = (className = "rcs-character-count") => (
     <CapLabel type="label1" className={className}>
       {formatMessage(messages.charactersCountLabel, {
@@ -196,18 +195,24 @@ export const SmsTraiEdit = (props) => {
   };
 
   const renderRcsFallbackMessage = (str = '') => {
-    if (!useRcsFallbackVarSegment) {
+    if (!useRcsFallbackVarSegmentForCurrentText) {
       return (
         <CapRow className="rcs-create-template-message-input">
           <div className="rcs_text_area_wrapper">
-            <TextArea
-              id="rcs_fallback_message_textarea"
-              autosize={{ minRows: 4, maxRows: 12 }}
-              value={fallbackText}
-              onChange={(e) => setFallbackText(e.target.value)}
-              placeholder={formatMessage(rcsMessages.fallbackMsgPlaceholder)}
-              data-testid="rcs_fallback_plain_text_area"
-            />
+            <div className="var-segment-message-editor__var-slot">
+              <TextArea
+                id="rcs_fallback_message_textarea"
+                autosize={{ minRows: 1, maxRows: 3 }}
+                value={fallbackText}
+                onChange={(e) => setFallbackText(e.target.value)}
+                onBlur={() => {
+                  const hasVarToken = (fallbackText.match(COMBINED_SMS_TEMPLATE_VAR_REGEX) || []).length > 0;
+                  if (hasVarToken) setRcsFallbackVarSegmentModeActive(true);
+                }}
+                placeholder={formatMessage(rcsMessages.fallbackMsgPlaceholder)}
+                data-testid="rcs_fallback_plain_text_area"
+              />
+            </div>
             {renderDescriptionCharacterCount()}
           </div>
         </CapRow>
@@ -362,7 +367,9 @@ export const SmsTraiEdit = (props) => {
     const templateBase = get(activeTemplateSourceForInit, 'versions.base', {});
     const unicodeValidity = get(templateBase, 'unicode-validity', true);
     const templateMsg = get(activeTemplateSourceForInit, 'versions.base.sms-editor', '') || '';
-    if (!useRcsFallbackVarSegment) {
+    const templateMsgHasVarToken = (templateMsg.match(COMBINED_SMS_TEMPLATE_VAR_REGEX) || []).length > 0;
+    setRcsFallbackVarSegmentModeActive(templateMsgHasVarToken);
+    if (!templateMsgHasVarToken) {
       setFallbackText(templateMsg);
       setFallbackVarMappedData({});
       setUpdatedSmsEditor(String(templateMsg).split(''));
@@ -429,7 +436,7 @@ export const SmsTraiEdit = (props) => {
 
   useEffect(() => {
     if (!isRcsSmsFallback) return;
-    if (!useRcsFallbackVarSegment) {
+    if (!useRcsFallbackVarSegmentForCurrentText) {
       const plainFallbackSmsText = fallbackText || '';
       setUpdatedSmsEditor(plainFallbackSmsText.split(''));
       setTotalMessageLength(plainFallbackSmsText.length);
@@ -441,15 +448,17 @@ export const SmsTraiEdit = (props) => {
     );
     setUpdatedSmsEditor(resolvedFallbackDisplay.split(''));
     setTotalMessageLength(resolvedFallbackDisplay.length);
-  }, [isRcsSmsFallback, useRcsFallbackVarSegment, fallbackText, fallbackVarMappedData]);
+  }, [isRcsSmsFallback, useRcsFallbackVarSegmentForCurrentText, fallbackText, fallbackVarMappedData]);
 
   useEffect(() => {
     if (!isRcsSmsFallback) return;
+    // Skip until hydration populates fallbackVarMappedData, or this wipes the parent's rcsSmsFallbackVarMapped before init restores it.
+    if (loading) return;
     if (typeof onRcsFallbackEditorStateChange !== 'function') return;
     onRcsFallbackEditorStateChange({
       rcsSmsFallbackVarMapped: fallbackVarMappedData || {},
     });
-  }, [isRcsSmsFallback, fallbackVarMappedData, onRcsFallbackEditorStateChange]);
+  }, [isRcsSmsFallback, loading, fallbackVarMappedData, onRcsFallbackEditorStateChange]);
 
   useEffect(() => {
     if (!isRcsSmsFallback) return;
@@ -532,7 +541,7 @@ export const SmsTraiEdit = (props) => {
       // TRAI/DLT VarSegment: `validateIfTagClosed` only understands paired `{{…}}` and breaks on
       // legitimate `{#…#}` / mixed TRAI shapes (extra `{`/`}` counts). Do not tie Done to it;
       // slot completeness is enforced by `areAllRcsSmsFallbackVarSlotsFilled` on the RCS screen.
-      if (useRcsFallbackVarSegment) {
+      if (useRcsFallbackVarSegmentForCurrentText) {
         tagValidationResponseRef.current = {};
         updateIsTagValidationError(false);
         return;
@@ -573,7 +582,7 @@ export const SmsTraiEdit = (props) => {
     tags,
     isRcsSmsFallback,
     isFullMode,
-    useRcsFallbackVarSegment,
+    useRcsFallbackVarSegmentForCurrentText,
     fallbackText,
     fallbackVarMappedData,
     getDefaultTags,
@@ -712,7 +721,8 @@ export const SmsTraiEdit = (props) => {
           ...baseWithoutDerivedFields,
           'sms-editor': fallbackText || '',
           'unicode-validity': isUnicodeAllowed,
-          ...(useRcsFallbackVarSegment && {
+          // Gate on useRcsFallbackVarSegmentForCurrentText (not the static DLT flag), or non-DLT var-token flows lose slot values on save.
+          ...(useRcsFallbackVarSegmentForCurrentText && {
             'rcs-sms-fallback-var-mapped': fallbackVarMappedData || {},
           }),
         };
@@ -778,8 +788,9 @@ export const SmsTraiEdit = (props) => {
 
   const onTagSelect = (data) => {
     if (isRcsSmsFallback) {
-      if (!useRcsFallbackVarSegment) {
+      if (!useRcsFallbackVarSegmentForCurrentText) {
         setFallbackText((prev) => `${prev || ''}{{${data}}}`);
+        setRcsFallbackVarSegmentModeActive(true);
         return;
       }
       if (!fallbackFocusedId) return;
@@ -949,7 +960,7 @@ export const SmsTraiEdit = (props) => {
 
   const calculateTotalMessageLength = () => {
     if (isRcsSmsFallback) {
-      if (useRcsFallbackVarSegment) {
+      if (useRcsFallbackVarSegmentForCurrentText) {
         const resolved = getFallbackResolvedContent(fallbackText || '', fallbackVarMappedData || {});
         setTotalMessageLength(resolved.length);
       } else {

package/v2Containers/Templates/_templates.scss

@@ -1,6 +1,7 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .ant-tabs-content{
+   margin-top: $CAP_SPACE_08;
   // .creatives-templates-list.full-mode{
     .v2-pagination-container, .v2-pagination-container-half {
       .ant-tabs-tabpane-active{
@@ -1427,7 +1428,6 @@
   justify-content: space-between;
   align-items: center;
   gap: $CAP_SPACE_08;
-  margin-right: $CAP_SPACE_32;
 }
 
 .template-listing-more-btn {

package/v2Containers/Templates/index.js

@@ -4603,6 +4603,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         <CapButton
           className={`create-new-${channelLowerCase} margin-l-8 margin-b-12`}
           type={"primary"}
+          isAddBtn
           disabled={this.isCreateDisabled()}
           onClick={this.createTemplate}
         >

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

@@ -239,6 +239,7 @@ exports[`Test Templates container Should render sms illustration when no templat
                     <CapButton
                       className="create-new-sms margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -813,6 +814,7 @@ exports[`Test Templates container Should render temlates when whatsapp templates
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -1223,6 +1225,7 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -1696,6 +1699,7 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -2169,6 +2173,7 @@ exports[`Test Templates container Test max templates warning 1`] = `
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -10,10 +10,9 @@ export default css`
 
   .component-wrapper {
     ${(props) => props.isFullMode ? `
-      max-width: 71.25rem;
       margin: 0 auto;
       width: 100%;
-      padding: 0.714rem 0;
+      padding: 0;
       /* Only main channel tabs content, not HTML Editor validation panel tabs */
       > .cap-tab-v2 > .ant-tabs-content-holder > .ant-tabs-content,
       > .cap-tab-v2 > .ant-tabs-content {
@@ -97,6 +96,12 @@ export default css`
 `;
 
 export const CapTabStyle = css`
-  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
+  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24};` : ``
+  }
+  .ant-tabs-nav-list {
+    gap: 2rem;
+  }
+  .ant-tabs-tab + .ant-tabs-tab {
+    margin: 0 !important;
   }
 `;