@capillarytech/creatives-library 9.0.36-alpha.0 → 9.0.36

package/v2Containers/Rcs/utils.js

@@ -6,7 +6,6 @@ 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';
@@ -197,6 +196,50 @@ export function coalesceCardVarMappedToTemplate(
   templateVarTokens.forEach((token, slotIndexZeroBased) => {
     const semanticVarName = getVarNameFromToken(token);
     if (!semanticVarName) return;
+
+    if (RCS_NUMERIC_VAR_NAME_REGEX.test(semanticVarName)) {
+      // Carousel numeric placeholder ({{3}}, {{4}}, …): the slot key IS the token digit itself —
+      // numbers are allocated globally across the whole carousel (getNextCarouselVarToken), not
+      // re-numbered per card, so the position-based `slotIndexZeroBased + 1` key below would target
+      // the wrong slot for every card after the first (e.g. card 2's first token is digit "3", not "1").
+      const numericSlotKey = semanticVarName;
+      const trimmedSlotValue = String(lookupSourceMap[numericSlotKey] ?? '').trim();
+      coalescedMap[numericSlotKey] = trimmedSlotValue;
+      // The slot's value may itself be a mustache-wrapped tag reference (e.g. "3" -> "{{last_name}}")
+      // — mirror it onto the bare semantic key too so VarSegment editors keyed by tag name also
+      // prepopulate (same rule as syncCardVarMappedSemanticsFromSlots).
+      const mustacheInnerMatch = trimmedSlotValue.match(/^\{\{([^}]+)\}\}$/);
+      const innerSemanticName = mustacheInnerMatch?.[1]?.trim();
+      if (innerSemanticName && innerSemanticName !== numericSlotKey) {
+        const existingInnerValue = String(coalescedMap[innerSemanticName] ?? '').trim();
+        if (!existingInnerValue) {
+          coalescedMap[innerSemanticName] = trimmedSlotValue;
+        }
+      }
+      return;
+    }
+
+    // A numeric slot may already self-reference this exact tag (e.g. "4" -> "{{last_name}}") when
+    // the template's own numeric placeholder has since been resolved to this tag in the text (see
+    // mapRcsCardContentForConsumerWithResolvedTags). That numeric key is the source of truth — don't
+    // fall through to the position-based legacy lookup below, which targets an unrelated (or
+    // nonexistent) slot and would clobber the real value with an empty string.
+    const mustacheSelfReference = `{{${semanticVarName}}}`;
+    const existingNumericKeyForSemantic = Object.keys(lookupSourceMap).find((key) => (
+      RCS_NUMERIC_VAR_NAME_REGEX.test(key) && lookupSourceMap[key] === mustacheSelfReference
+    ));
+    if (existingNumericKeyForSemantic) {
+      const trimmedSlotValue = String(lookupSourceMap[existingNumericKeyForSemantic] ?? '').trim();
+      coalescedMap[existingNumericKeyForSemantic] = trimmedSlotValue;
+      if (!seenSemanticVarNames.has(semanticVarName)) {
+        seenSemanticVarNames.add(semanticVarName);
+        coalescedMap[semanticVarName] = trimmedSlotValue;
+      }
+      return;
+    }
+
+    // Legacy: template embeds the semantic token directly ({{user_name}}); older payloads stored
+    // the resolved value under a position-based numeric key ("1", "2", …) by order of appearance.
     const numericSlotKey = String(slotIndexZeroBased + 1);
     const isRepeatOfSemanticName = seenSemanticVarNames.has(semanticVarName);
     const skipSharedSemanticLookup =
@@ -207,12 +250,6 @@ export function coalesceCardVarMappedToTemplate(
         valueFromSource = lookupSourceMap[semanticVarName];
       }
     }
-    if (valueFromSource === undefined || valueFromSource === null) {
-      valueFromSource = lookupSourceMap[String(slotIndexZeroBased + 1)];
-    }
-    if (valueFromSource === undefined || valueFromSource === null) {
-      valueFromSource = lookupSourceMap[slotIndexZeroBased + 1];
-    }
     const trimmedSlotValue = valueFromSource == null ? '' : String(valueFromSource).trim();
     coalescedMap[numericSlotKey] = trimmedSlotValue;
     if (!seenSemanticVarNames.has(semanticVarName)) {
@@ -291,11 +328,6 @@ export function isRcsTextOnlyCardMediaType(mediaType) {
  *
  * @param {boolean} [preserveLiteralValueTokens=false] When true, a slot value that is NOT itself a
  * `{{...}}`-wrapped tag (e.g. a literal preview string like "SAVE20" typed for a voucher/offer tag)
- * is left as the raw token instead of being baked into the returned string. Personalization-style
- * values (themselves another mustache tag, e.g. `{{loyalty_points}}`) still resolve either way — those
- * are internal-alias renames, not literal content. Pass true for payloads that get persisted/replayed
- * (see `mapRcsCardContentForConsumerWithResolvedTags`) so a voucher's saved token survives for the
- * editor to re-render an editable slot from, and for the backend to resolve per-recipient at send time.
  *
  * @param {number} [cardSlotOffset=0] Starting global slot index for this card's title. Carousel cards
  * beyond index 0 must pass the running total of every prior card's var count — numeric `{{N}}` tokens
@@ -309,8 +341,6 @@ export function resolveRcsCardPreviewStrings(
   cardVarMapped,
   isLibraryMode = false,
   textOnlyCard = false,
-  preserveLiteralValueTokens = false,
-  cardSlotOffset = 0,
 ) {
   const splitTemplateVarStringRcs = (str) => splitTemplateVarString(str, rcsVarRegex);
   const getVarNameFromToken = (token = '') =>
@@ -339,7 +369,12 @@ export function resolveRcsCardPreviewStrings(
           );
           if (slotValue == null || String(slotValue).trim() === '') return elem;
           const trimmedSlotValue = String(slotValue).trim();
-          if (preserveLiteralValueTokens && !RCS_MUSTACHE_WRAPPED_REGEX.test(trimmedSlotValue)) {
+          const isPlainNumericSlot = RCS_NUMERIC_VAR_NAME_REGEX.test(key);
+          if (
+            preserveLiteralValueTokens
+            && !isPlainNumericSlot
+            && !RCS_MUSTACHE_WRAPPED_REGEX.test(trimmedSlotValue)
+          ) {
             return elem;
           }
           return String(slotValue);
@@ -354,8 +389,8 @@ export function resolveRcsCardPreviewStrings(
     ? 0
     : (effectiveTitle.match(rcsVarRegex) || []).length;
   return {
-    rcsTitle: textOnlyCard ? '' : resolveTemplateWithMap(effectiveTitle, cardSlotOffset),
-    rcsDesc: resolveTemplateWithMap(String(description || ''), cardSlotOffset + titleVarCount),
+    rcsTitle: textOnlyCard ? '' : resolveTemplateWithMap(effectiveTitle, 0),
+    rcsDesc: resolveTemplateWithMap(String(description || ''), titleVarCount),
   };
 }
 
@@ -376,7 +411,6 @@ 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 =
@@ -387,22 +421,15 @@ 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(
-      cardTitle,
-      cardDescription,
+      card.title ?? '',
+      card.description ?? '',
       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 {
       ...cardRest,
       title: rcsTitle,

package/v2Containers/SmsTrai/Edit/index.js

@@ -169,11 +169,12 @@ export const SmsTraiEdit = (props) => {
     return traiDltEnabled || hasTraiDltFeature() || isRcsEditFlow;
   }, [isRcsSmsFallback, traiDltEnabled, isRcsEditFlow]);
 
-
-  const [rcsFallbackVarSegmentModeActive, setRcsFallbackVarSegmentModeActive] = useState(false);
-  const useRcsFallbackVarSegmentForCurrentText = isRcsSmsFallback && rcsFallbackVarSegmentModeActive;
-
-
+  /**
+   * 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 renderDescriptionCharacterCount = (className = "rcs-character-count") => (
     <CapLabel type="label1" className={className}>
       {formatMessage(messages.charactersCountLabel, {
@@ -195,24 +196,18 @@ export const SmsTraiEdit = (props) => {
   };
 
   const renderRcsFallbackMessage = (str = '') => {
-    if (!useRcsFallbackVarSegmentForCurrentText) {
+    if (!useRcsFallbackVarSegment) {
       return (
         <CapRow className="rcs-create-template-message-input">
           <div className="rcs_text_area_wrapper">
-            <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>
+            <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"
+            />
             {renderDescriptionCharacterCount()}
           </div>
         </CapRow>
@@ -367,9 +362,7 @@ 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', '') || '';
-    const templateMsgHasVarToken = (templateMsg.match(COMBINED_SMS_TEMPLATE_VAR_REGEX) || []).length > 0;
-    setRcsFallbackVarSegmentModeActive(templateMsgHasVarToken);
-    if (!templateMsgHasVarToken) {
+    if (!useRcsFallbackVarSegment) {
       setFallbackText(templateMsg);
       setFallbackVarMappedData({});
       setUpdatedSmsEditor(String(templateMsg).split(''));
@@ -436,7 +429,7 @@ export const SmsTraiEdit = (props) => {
 
   useEffect(() => {
     if (!isRcsSmsFallback) return;
-    if (!useRcsFallbackVarSegmentForCurrentText) {
+    if (!useRcsFallbackVarSegment) {
       const plainFallbackSmsText = fallbackText || '';
       setUpdatedSmsEditor(plainFallbackSmsText.split(''));
       setTotalMessageLength(plainFallbackSmsText.length);
@@ -448,17 +441,15 @@ export const SmsTraiEdit = (props) => {
     );
     setUpdatedSmsEditor(resolvedFallbackDisplay.split(''));
     setTotalMessageLength(resolvedFallbackDisplay.length);
-  }, [isRcsSmsFallback, useRcsFallbackVarSegmentForCurrentText, fallbackText, fallbackVarMappedData]);
+  }, [isRcsSmsFallback, useRcsFallbackVarSegment, 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, loading, fallbackVarMappedData, onRcsFallbackEditorStateChange]);
+  }, [isRcsSmsFallback, fallbackVarMappedData, onRcsFallbackEditorStateChange]);
 
   useEffect(() => {
     if (!isRcsSmsFallback) return;
@@ -541,7 +532,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 (useRcsFallbackVarSegmentForCurrentText) {
+      if (useRcsFallbackVarSegment) {
         tagValidationResponseRef.current = {};
         updateIsTagValidationError(false);
         return;
@@ -582,7 +573,7 @@ export const SmsTraiEdit = (props) => {
     tags,
     isRcsSmsFallback,
     isFullMode,
-    useRcsFallbackVarSegmentForCurrentText,
+    useRcsFallbackVarSegment,
     fallbackText,
     fallbackVarMappedData,
     getDefaultTags,
@@ -721,8 +712,7 @@ export const SmsTraiEdit = (props) => {
           ...baseWithoutDerivedFields,
           'sms-editor': fallbackText || '',
           'unicode-validity': isUnicodeAllowed,
-          // Gate on useRcsFallbackVarSegmentForCurrentText (not the static DLT flag), or non-DLT var-token flows lose slot values on save.
-          ...(useRcsFallbackVarSegmentForCurrentText && {
+          ...(useRcsFallbackVarSegment && {
             'rcs-sms-fallback-var-mapped': fallbackVarMappedData || {},
           }),
         };
@@ -788,9 +778,8 @@ export const SmsTraiEdit = (props) => {
 
   const onTagSelect = (data) => {
     if (isRcsSmsFallback) {
-      if (!useRcsFallbackVarSegmentForCurrentText) {
+      if (!useRcsFallbackVarSegment) {
         setFallbackText((prev) => `${prev || ''}{{${data}}}`);
-        setRcsFallbackVarSegmentModeActive(true);
         return;
       }
       if (!fallbackFocusedId) return;
@@ -960,7 +949,7 @@ export const SmsTraiEdit = (props) => {
 
   const calculateTotalMessageLength = () => {
     if (isRcsSmsFallback) {
-      if (useRcsFallbackVarSegmentForCurrentText) {
+      if (useRcsFallbackVarSegment) {
         const resolved = getFallbackResolvedContent(fallbackText || '', fallbackVarMappedData || {});
         setTotalMessageLength(resolved.length);
       } else {

package/v2Containers/Templates/_templates.scss

@@ -1,7 +1,6 @@
 @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{
@@ -160,96 +159,6 @@
             line-clamp: 3;
             }
           }
-          .viber-carousel-static-content {
-            width: 100%;
-            overflow: hidden;
-            .viber-carousel-static-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;
-            }
-            .viber-carousel-static-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;
-            }
-            .viber-carousel-static-cards {
-              display: flex;
-              gap: $CAP_SPACE_08;
-              overflow: hidden;
-            }
-            .viber-carousel-static-card {
-              flex: 1;
-              min-width: 0;
-              background: $CAP_WHITE;
-              border-radius: $CAP_SPACE_04;
-              overflow: hidden;
-              display: flex;
-              flex-direction: column;
-            }
-            .viber-carousel-static-image {
-              width: 100%;
-              max-height: 11rem;
-              margin-bottom: $CAP_SPACE_04;
-              border-radius: $CAP_SPACE_04;
-              display: block;
-            }
-            .viber-carousel-static-image-placeholder {
-              width: 100%;
-              height: 7.143rem;
-              border-radius: $CAP_SPACE_04;
-            }
-            .viber-carousel-static-image-placeholder {
-              background: $CAP_G07;
-            }
-            .viber-carousel-static-text {
-              display: block;
-              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;
-              display: -webkit-box;
-            }
-            .viber-carousel-static-buttons {
-              display: flex;
-              flex-direction: column;
-              gap: $CAP_SPACE_04;
-              margin-top: auto;
-            }
-            .viber-carousel-static-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;
-            }
-            .viber-carousel-static-button-secondary {
-              color: $CAP_PURPLE01;
-              background: transparent;
-              border: none;
-              box-shadow: none;
-            }
-          }
         
         }
       
@@ -258,30 +167,6 @@
             word-wrap: break-word;
           }
         }
-
-        &.viber-carousel-static {
-          height: auto;
-          min-height: 21.125rem;
-
-          .ant-card-body {
-            padding-bottom: $CAP_SPACE_12;
-          }
-
-          .truncate-text-viber {
-            .ant-card-meta-description {
-              display: block;
-              overflow: visible;
-              -webkit-line-clamp: unset;
-              line-clamp: unset;
-            }
-          }
-
-          .viber-carousel-static-content,
-          .viber-carousel-static-cards,
-          .viber-carousel-static-card {
-            overflow: visible;
-          }
-        }
     
   
         &.carousel-img-section {
@@ -1542,6 +1427,7 @@
   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

@@ -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';
@@ -1397,11 +1396,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,
@@ -1419,39 +1413,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] : [],
         };
       }
 
@@ -2472,52 +2441,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) : [];
-            templateData.className = 'viber-carousel-static';
-            templateData.content = (
-              <CapRow className="viber-carousel-static-content">
-                <CapRow className="viber-carousel-static-message-box">
-                  <CapLabel type="label1" className="viber-carousel-static-message">
-                    {text}
-                  </CapLabel>
-                </CapRow>
-                <CapRow className="viber-carousel-static-cards">
-                  {previewCards.map((card, cardIdx) => (
-                    <CapRow className="viber-carousel-static-card" key={`viber-static-card-${cardIdx}`}>
-                      {card?.mediaUrl ? (
-                        <CapImage src={card.mediaUrl} className="viber-carousel-static-image" />
-                      ) : (
-                        <CapRow className="viber-carousel-static-image-placeholder" />
-                      )}
-                      <CapLabel type="label1" className="viber-carousel-static-text">
-                        {card?.text}
-                      </CapLabel>
-                      <CapRow className="viber-carousel-static-buttons">
-                        {(Array.isArray(card?.buttons) && card.buttons.length ? card.buttons : [{}, {}]).slice(0, 2).map((carouselButton, btnIdx) => (
-                          <CapLabel
-                            key={`viber-static-btn-${cardIdx}-${btnIdx}`}
-                            type="label1"
-                            className={`viber-carousel-static-button ${btnIdx === 1 ? 'viber-carousel-static-button-secondary' : ''}`}
-                          >
-                            {(carouselButton?.title || '').trim()}
-                          </CapLabel>
-                        ))}
-                      </CapRow>
-                    </CapRow>
-                  ))}
-                </CapRow>
-              </CapRow>
-            );
-            break;
-          }
           if (!isEmpty(image)) {
             const { url = '' } = image;
             templateData.url = url;
@@ -4676,7 +4603,6 @@ 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}
         >
@@ -5138,22 +5064,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

@@ -239,7 +239,6 @@ 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"
                     >
@@ -814,7 +813,6 @@ 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"
                     >
@@ -1225,7 +1223,6 @@ 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"
                     >
@@ -1699,7 +1696,6 @@ 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"
                     >
@@ -2173,7 +2169,6 @@ 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,9 +10,10 @@ export default css`
 
   .component-wrapper {
     ${(props) => props.isFullMode ? `
+      max-width: 71.25rem;
       margin: 0 auto;
       width: 100%;
-      padding: 0;
+      padding: 0.714rem 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 {
@@ -96,12 +97,6 @@ export default css`
 `;
 
 export const CapTabStyle = css`
-  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24};` : ``
-  }
-  .ant-tabs-nav-list {
-    gap: 2rem;
-  }
-  .ant-tabs-tab + .ant-tabs-tab {
-    margin: 0 !important;
+  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
   }
 `;