@capillarytech/creatives-library 9.0.73-alpha.sprint-testpreview.22 → 9.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.73-alpha.sprint-testpreview.22",
+  "version": "9.1.1",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CapTagListWithInput/__tests__/CapTagListWithInput.test.js

@@ -5,6 +5,7 @@ import { IntlProvider } from 'react-intl';
 import CapTagListWithInput from '../index';
 
 const capturedTagListProps = { current: null };
+const capturedCapRowProps = { current: null };
 
 jest.mock('../../../v2Containers/TagList', () => {
   const React = require('react');
@@ -15,7 +16,14 @@ jest.mock('../../../v2Containers/TagList', () => {
   return Mock;
 });
 
-jest.mock('@capillarytech/cap-ui-library/CapRow', () => ({ children }) => <div>{children}</div>);
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => {
+  const React = require('react');
+  const Mock = ({ children, ...rest }) => {
+    capturedCapRowProps.current = rest;
+    return <div>{children}</div>;
+  };
+  return Mock;
+});
 jest.mock('@capillarytech/cap-ui-library/CapColumn', () => ({ children }) => <div>{children}</div>);
 jest.mock('@capillarytech/cap-ui-library/CapHeading', () => () => null);
 jest.mock('@capillarytech/cap-ui-library/CapInput', () => () => <input data-testid="cap-input" />);
@@ -27,6 +35,7 @@ const waitMap = {
 describe('CapTagListWithInput', () => {
   beforeEach(() => {
     capturedTagListProps.current = null;
+    capturedCapRowProps.current = null;
   });
 
   it('forwards waitEventContextTags to TagList', () => {
@@ -60,4 +69,52 @@ describe('CapTagListWithInput', () => {
 
     expect(capturedTagListProps.current.waitEventContextTags).toEqual({});
   });
+
+  it('forwards excludeTags to TagList', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CapTagListWithInput
+          inputId="template-preheader"
+          inputOnChange={jest.fn()}
+          excludeTags={['unsubscribe']}
+          onTagSelect={jest.fn()}
+          onContextChange={jest.fn()}
+        />
+      </IntlProvider>
+    );
+
+    expect(capturedTagListProps.current.excludeTags).toEqual(['unsubscribe']);
+  });
+
+  it('uses default empty array for excludeTags when omitted', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CapTagListWithInput
+          inputId="test-url"
+          inputOnChange={jest.fn()}
+          onTagSelect={jest.fn()}
+          onContextChange={jest.fn()}
+        />
+      </IntlProvider>
+    );
+
+    expect(capturedTagListProps.current.excludeTags).toEqual([]);
+  });
+
+  it('top-aligns the singleLineLayout row so an error message growing the input does not shift the Add Label button', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CapTagListWithInput
+          inputId="template-preheader"
+          inputOnChange={jest.fn()}
+          inputErrorMessage="Unsubscribe tag is not allowed in Pre-header."
+          singleLineLayout
+          onTagSelect={jest.fn()}
+          onContextChange={jest.fn()}
+        />
+      </IntlProvider>
+    );
+
+    expect(capturedCapRowProps.current.align).toBe('top');
+  });
 });

package/v2Components/CapTagListWithInput/index.js

@@ -7,6 +7,7 @@ import CapInput from '@capillarytech/cap-ui-library/CapInput';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
 import TagList from '../../v2Containers/TagList';
 import messages from './messages';
+import './index.scss';
 
 /**
  * CapTagListWithInput - A reusable component that combines TagList and CapInput
@@ -18,6 +19,7 @@ export const CapTagListWithInput = (props) => {
     // TagList props
     tags = [],
     injectedTags = {},
+    excludeTags = [],
     location = {},
     selectedOfferDetails = [],
     onTagSelect,
@@ -51,10 +53,65 @@ export const CapTagListWithInput = (props) => {
     showInput = true,
     inputProps = {},
     popoverPlacement,
+    // Tag-insert trigger inline with the input (not in a row above)
+    singleLineLayout = false,
+    // Content between input and tag trigger (singleLineLayout only)
+    extraContent = null,
   } = props;
 
   const { formatMessage } = intl;
 
+  const tagListElement = showTagList && (
+    <TagList
+      key={`${inputId}_tags`}
+      className={className}
+      moduleFilterEnabled={moduleFilterEnabled}
+      label={formatMessage(messages.addLabels)}
+      onTagSelect={onTagSelect}
+      onContextChange={onContextChange}
+      location={location}
+      tags={tags}
+      injectedTags={injectedTags}
+      excludeTags={excludeTags}
+      userLocale={userLocale}
+      selectedOfferDetails={selectedOfferDetails}
+      eventContextTags={eventContextTags}
+      waitEventContextTags={waitEventContextTags}
+      style={tagListStyle}
+      popoverPlacement={popoverPlacement}
+      restrictPersonalization={restrictPersonalization}
+    />
+  );
+
+  const inputElement = showInput && (
+    <CapInput
+      id={inputId}
+      onChange={inputOnChange}
+      placeholder={inputPlaceholder}
+      value={inputValue}
+      size={inputSize}
+      maxLength={inputMaxLength}
+      errorMessage={inputErrorMessage}
+      isRequired={inputRequired}
+      disabled={inputDisabled}
+      style={inputStyle}
+      {...inputProps}
+    />
+  );
+
+  if (singleLineLayout) {
+    return (
+      <CapColumn style={containerStyle}>
+        {/* "top", not "middle": keeps the buttons in place when an error grows the input */}
+        <CapRow align="top" type="flex" noWrap gap={8} className="cap-tag-list-with-input__single-line-row">
+          <CapColumn className="cap-tag-list-with-input__input-column">{inputElement}</CapColumn>
+          {extraContent}
+          {tagListElement}
+        </CapRow>
+      </CapColumn>
+    );
+  }
+
   return (
     <CapColumn style={containerStyle}>
       <CapRow align="middle" type="flex" noWrap>
@@ -64,42 +121,9 @@ export const CapTagListWithInput = (props) => {
           </CapHeading>
         )}
 
-        {showTagList && (
-          <TagList
-            key={`${inputId}_tags`}
-            className={className}
-            moduleFilterEnabled={moduleFilterEnabled}
-            label={formatMessage(messages.addLabels)}
-            onTagSelect={onTagSelect}
-            onContextChange={onContextChange}
-            location={location}
-            tags={tags}
-            injectedTags={injectedTags}
-            userLocale={userLocale}
-            selectedOfferDetails={selectedOfferDetails}
-            eventContextTags={eventContextTags}
-            waitEventContextTags={waitEventContextTags}
-            style={tagListStyle}
-            popoverPlacement={popoverPlacement}
-            restrictPersonalization={restrictPersonalization}
-          />
-        )}
+        {tagListElement}
       </CapRow>
-      {showInput && (
-        <CapInput
-          id={inputId}
-          onChange={inputOnChange}
-          placeholder={inputPlaceholder}
-          value={inputValue}
-          size={inputSize}
-          maxLength={inputMaxLength}
-          errorMessage={inputErrorMessage}
-          isRequired={inputRequired}
-          disabled={inputDisabled}
-          style={inputStyle}
-          {...inputProps}
-        />
-      )}
+      {inputElement}
     </CapColumn>
   );
 };
@@ -109,6 +133,7 @@ CapTagListWithInput.propTypes = {
   // TagList props
   tags: PropTypes.array,
   injectedTags: PropTypes.object,
+  excludeTags: PropTypes.array,
   location: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   onTagSelect: PropTypes.func.isRequired,
@@ -145,6 +170,8 @@ CapTagListWithInput.propTypes = {
   showTagList: PropTypes.bool,
   showInput: PropTypes.bool,
   popoverPlacement: PropTypes.string,
+  singleLineLayout: PropTypes.bool,
+  extraContent: PropTypes.node,
 };
 
 CapTagListWithInput.defaultProps = {
@@ -176,6 +203,8 @@ CapTagListWithInput.defaultProps = {
   showInput: true,
   inputProps: {},
   popoverPlacement: undefined,
+  singleLineLayout: false,
+  extraContent: null,
 };
 
 export default injectIntl(CapTagListWithInput);

package/v2Components/CapTagListWithInput/index.scss

@@ -0,0 +1,9 @@
+.cap-tag-list-with-input__single-line-row {
+  width: 100%;
+}
+
+// Input takes the remaining width and can shrink below its content size
+.cap-tag-list-with-input__input-column {
+  flex: 1;
+  min-width: 0;
+}

package/v2Components/CommonTestAndPreview/UnifiedPreview/EmailPreviewContent.js

@@ -22,6 +22,7 @@ import {
 const EmailPreviewContent = ({
   content,
   subject,
+  preheader,
   device,
   isUpdating,
   error,
@@ -75,6 +76,11 @@ const EmailPreviewContent = ({
         </CapRow>
       </CapRow>
 
+      {/* Email Pre-header */}
+      {preheader && (
+        <CapRow useLegacy className="email-preheader">{preheader}</CapRow>
+      )}
+
       {/* Email Content - Varies based on state */}
       <CapRow useLegacy className="email-content">
         {contentSection}
@@ -131,6 +137,7 @@ const EmailPreviewContent = ({
 EmailPreviewContent.propTypes = {
   content: PropTypes.string,
   subject: PropTypes.string,
+  preheader: PropTypes.string,
   device: PropTypes.oneOf([DESKTOP, MOBILE, TABLET]),
   isUpdating: PropTypes.bool,
   error: PropTypes.string,
@@ -140,6 +147,7 @@ EmailPreviewContent.propTypes = {
 EmailPreviewContent.defaultProps = {
   content: '',
   subject: '',
+  preheader: '',
   device: DESKTOP,
   isUpdating: false,
   error: null,

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -520,6 +520,13 @@
       }
     }
 
+    // Email Pre-header
+    .email-preheader {
+      padding: $CAP_SPACE_12 $CAP_SPACE_16;
+      font-size: $FONT_SIZE_M;
+      color: #8c8c8c;
+    }
+
     // Email Content
     .email-content {
       border-top: $CAP_SPACE_01 solid $CAP_G12;

package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -87,6 +87,7 @@ const UnifiedPreview = ({
           <EmailPreviewContent
             content={content?.resolvedBody || ''}
             subject={content?.resolvedTitle || ''}
+            preheader={content?.resolvedPreheader || ''}
             device={device}
             isUpdating={isUpdating}
             error={error}

package/v2Components/CommonTestAndPreview/actions.js

@@ -43,7 +43,7 @@ export const searchCustomersRequested = (query) => ({
  */
 export const extractTagsRequested = (payload) => ({
   type: EXTRACT_TAGS_REQUESTED,
-  payload, // { templateSubject, templateContent }
+  payload, // { templateSubject, templatePreheader, templateContent }
 });
 
 /**

package/v2Components/CommonTestAndPreview/index.js

@@ -39,8 +39,6 @@ import {
   mapRcsSuggestionForTestMeta,
   getRcsPrimaryTagExtractionText,
   mergeSyntheticMustacheTags,
-  getWhatsappTagExtractionText,
-  mergeZaloUnfilledParamTags,
 } from './utils';
 import AddTestCustomerButton from './AddTestCustomer';
 import ExistingCustomerModal from './ExistingCustomerModal';
@@ -237,8 +235,6 @@ const CommonTestAndPreview = (props) => {
   const [isExtractingSmsFallbackTags, setIsExtractingSmsFallbackTags] = useState(false);
   const [customValues, setCustomValues] = useState({});
   const previewCustomValuesRef = useRef({});
-  // Values last applied to the preview (Update / Discard / customer prefill); drives client-side fill-in.
-  const [previewTagValues, setPreviewTagValues] = useState(null);
   const [showJSON, setShowJSON] = useState(false);
   const [tagsExtracted, setTagsExtracted] = useState(false);
 
@@ -599,12 +595,6 @@ const CommonTestAndPreview = (props) => {
     if (channel === CHANNELS.RCS) {
       return mergeSyntheticMustacheTags(extractedTags, getRcsPrimaryTagExtractionText(formData));
     }
-    if (channel === CHANNELS.WHATSAPP) {
-      return mergeSyntheticMustacheTags(extractedTags, getWhatsappTagExtractionText(formData));
-    }
-    if (channel === CHANNELS.ZALO) {
-      return mergeZaloUnfilledParamTags(extractedTags, formData);
-    }
     return extractedTags ?? [];
   }, [
     channel,
@@ -690,8 +680,7 @@ const CommonTestAndPreview = (props) => {
       const tagName = tagPath.split('.').pop(); // Get the actual tag name from the path
       // Escape regex metacharacters in tagName (arbitrary JSON key) so it can't break the pattern.
       const escapedTagName = tagName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-      // Braces escaped: unescaped `{{1}}` parses `{1}` as a quantifier and never matches numbered slots.
-      const tagRegex = new RegExp(`\\{\\{${escapedTagName}\\}\\}`, 'g');
+      const tagRegex = new RegExp(`{{${escapedTagName}}}`, 'g');
       const rawValue = tagValues[tagPath];
       // Preserve legitimate falsy values (0, false); only an unset/blank slot keeps the placeholder.
       const hasValue = rawValue !== null && rawValue !== undefined && rawValue !== '';
@@ -958,6 +947,7 @@ const CommonTestAndPreview = (props) => {
         return {
           ...basePayload,
           messageTitle: resolveTagsInText(formDataObj['template-subject'], customValuesObj),
+          messageSubtitle: resolveTagsInText(formDataObj['template-preheader'], customValuesObj),
           messageBody: contentStr,
         };
 
@@ -1080,6 +1070,7 @@ const CommonTestAndPreview = (props) => {
       case CHANNELS.EMAIL:
         return {
           templateSubject: formDataObj['template-subject'] || '',
+          templatePreheader: formDataObj['template-preheader'] || '',
           templateContent: contentStr,
         };
 
@@ -1421,13 +1412,22 @@ const CommonTestAndPreview = (props) => {
           || formDataObj?.base?.['template-subject']
           || '';
 
+        // Extract pre-header from formData (same shapes as subject)
+        const preheader = formDataObj?.['template-preheader']
+          || formDataObj?.[0]?.['template-preheader']
+          || formDataObj?.base?.['template-preheader']
+          || '';
+
         // Extract body from previewData (resolved) or content
         const messageBody = previewDataObj?.resolvedBody || contentStr || '';
 
-        // Resolve tags in subject if custom values are provided
+        // Resolve tags in subject/pre-header if custom values are provided
         const resolvedSubject = customValuesObj && Object.keys(customValuesObj).length > 0
           ? resolveTagsInText(subject, customValuesObj)
           : subject;
+        const resolvedPreheader = customValuesObj && Object.keys(customValuesObj).length > 0
+          ? resolveTagsInText(preheader, customValuesObj)
+          : preheader;
 
         const emailChannelSettings = {
           channel: CHANNELS.EMAIL,
@@ -1453,6 +1453,7 @@ const CommonTestAndPreview = (props) => {
             channel: CHANNELS.EMAIL,
             messageBody,
             messageSubject: resolvedSubject,
+            messagePreHeader: resolvedPreheader,
           },
         };
       }
@@ -1557,7 +1558,7 @@ const CommonTestAndPreview = (props) => {
 
         // Build whatsappMedia structure
         const whatsappMedia = {
-          header: resolveTagsInText(formDataObj?.templateHeader || formDataObj?.header || '', customValuesObj),
+          header: formDataObj?.templateHeader || formDataObj?.header || '',
           footer: formDataObj?.templateFooter || formDataObj?.footer || '',
           headerVarMapped: formDataObj?.headerVarMapped || formDataObj?.headerVarMappedData || {},
           headerTemplate: formDataObj?.headerTemplate || formDataObj?.templateHeader || '',
@@ -2425,10 +2426,7 @@ const CommonTestAndPreview = (props) => {
             const resolvedVarMapped = {};
             Object.keys(templateConfigs.varMapped).forEach((key) => {
               const value = templateConfigs.varMapped[key];
-              // Param left empty on Overview → use the value entered in Test & Preview.
-              resolvedVarMapped[key] = value
-                ? resolveTagsInText(value, customValuesObj)
-                : (customValuesObj[key] ?? '');
+              resolvedVarMapped[key] = resolveTagsInText(value, customValuesObj);
             });
             templateConfigs.varMapped = resolvedVarMapped;
           }
@@ -2459,9 +2457,7 @@ const CommonTestAndPreview = (props) => {
             const resolvedVarMapped = {};
             Object.keys(varMapped).forEach((key) => {
               const value = varMapped[key];
-              resolvedVarMapped[key] = value
-                ? resolveTagsInText(value, customValuesObj)
-                : (customValuesObj[key] ?? '');
+              resolvedVarMapped[key] = resolveTagsInText(value, customValuesObj);
             });
             varMapped = resolvedVarMapped;
           }
@@ -2551,27 +2547,10 @@ const CommonTestAndPreview = (props) => {
    *
    * IMPORTANT: Use raw content/formData initially, only use previewDataHtml if preview call was made
    */
-  // Fills last-applied test values into raw template text when the preview API reply isn't usable.
-  const resolvePreviewText = (text) => (
-    typeof text === 'string' && previewTagValues ? resolveTagsInText(text, previewTagValues) : text
-  );
-
   // Memoized RCS carousel content: only recomputes when the API response or raw template changes,
   // NOT on every customValues keystroke. Uses previewCustomValuesRef captured at Update Preview time.
   const rcsCarouselContentObj = useMemo(() => {
     if (channel !== CHANNELS.RCS) return null;
-    // Standalone card: fill entered values client-side; the preview API leaves numbered {{N}} unresolved.
-    const fillStandaloneCard = (card) => (
-      hasPreviewCallBeenMade && previewTagValues && card && typeof card === 'object' && !Array.isArray(card.carouselData)
-        ? {
-          ...card,
-          templateHeader: resolvePreviewText(card.templateHeader),
-          templateMessage: resolvePreviewText(card.templateMessage),
-          rcsTitle: resolvePreviewText(card.rcsTitle),
-          rcsDesc: resolvePreviewText(card.rcsDesc),
-        }
-        : card
-    );
     let resolvedContent = null;
     if (hasPreviewCallBeenMade && previewDataHtml?.resolvedBody) {
       resolvedContent = previewDataHtml.resolvedBody;
@@ -2579,7 +2558,7 @@ const CommonTestAndPreview = (props) => {
         try { resolvedContent = JSON.parse(resolvedContent); } catch (e) { resolvedContent = null; }
       }
     }
-    if (resolvedContent && typeof resolvedContent === 'object') return fillStandaloneCard(resolvedContent);
+    if (resolvedContent && typeof resolvedContent === 'object') return resolvedContent;
 
     let rawRcs = content;
     if (typeof rawRcs === 'string') {
@@ -2604,9 +2583,9 @@ const CommonTestAndPreview = (props) => {
         }),
       };
     }
-    return fillStandaloneCard(rawRcs) || {};
+    return rawRcs || {};
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channel, content, hasPreviewCallBeenMade, previewDataHtml, formData, previewTagValues]);
+  }, [channel, content, hasPreviewCallBeenMade, previewDataHtml, formData]);
 
   const prepareUnifiedPreviewProps = () => {
     // Prepare content based on channel
@@ -2620,6 +2599,10 @@ const CommonTestAndPreview = (props) => {
         resolvedTitle: hasPreviewCallBeenMade && previewDataHtml?.resolvedTitle
           ? previewDataHtml.resolvedTitle
           : formData?.['template-subject'] || '',
+        // The liquid preview API returns the resolved pre-header as `resolvedSubtitle`.
+        resolvedPreheader: hasPreviewCallBeenMade && previewDataHtml?.resolvedSubtitle
+          ? previewDataHtml.resolvedSubtitle
+          : formData?.['template-preheader'] || '',
       };
     } else if (channel === CHANNELS.SMS) {
       // For SMS, content is the text message (string)
@@ -2668,14 +2651,6 @@ const CommonTestAndPreview = (props) => {
         // Use raw content if no preview call was made or resolvedContent is not available
         contentObj = parsedContent || {};
       }
-      // WhatsApp: fill entered values client-side; the preview API leaves numbered {{N}} unresolved.
-      if (channel === CHANNELS.WHATSAPP && hasPreviewCallBeenMade) {
-        contentObj = {
-          ...contentObj,
-          templateHeader: resolvePreviewText(contentObj.templateHeader),
-          templateMsg: resolvePreviewText(contentObj.templateMsg),
-        };
-      }
     } else if (channel === CHANNELS.RCS) {
       // rcsCarouselContentObj is a useMemo that handles both the API-response path and the
       // client-side fallback. It is stable across keystrokes (only recomputes when
@@ -2972,12 +2947,12 @@ const CommonTestAndPreview = (props) => {
               });
 
               // Always extract tags when content changes
-              const { templateSubject, templateContent } = prepareTagExtractionPayload(
+              const { templateSubject, templatePreheader, templateContent } = prepareTagExtractionPayload(
                 channel,
                 formData,
                 htmlFile,
               );
-              actions.extractTagsRequested({ templateSubject, templateContent });
+              actions.extractTagsRequested({ templateSubject, templatePreheader, templateContent });
             }
 
             // Restore original handler
@@ -2992,32 +2967,32 @@ const CommonTestAndPreview = (props) => {
           const templateContent = currentTabData?.[activeTab]?.['template-content'];
           if (templateContent) {
             // Extract tags when showing (but don't set previewDataHtml - use raw content initially)
-            const { templateSubject, templateContent: extractContent } = prepareTagExtractionPayload(
+            const { templateSubject, templatePreheader, templateContent: extractContent } = prepareTagExtractionPayload(
               channel,
               formData,
               templateContent
             );
-            actions.extractTagsRequested({ templateSubject, templateContent: extractContent });
+            actions.extractTagsRequested({ templateSubject, templatePreheader, templateContent: extractContent });
           } else {
             // Fallback to content prop if no template content
-            const { templateSubject, templateContent: extractContent } = prepareTagExtractionPayload(
+            const { templateSubject, templatePreheader, templateContent: extractContent } = prepareTagExtractionPayload(
               channel,
               formData,
               getCurrentContent
             );
-            actions.extractTagsRequested({ templateSubject, templateContent: extractContent });
+            actions.extractTagsRequested({ templateSubject, templatePreheader, templateContent: extractContent });
           }
         }
       } else {
       // For non-email channels, extract tags from content
         // Use getCurrentContent for SMS (extracts from formData) or content prop for others
         const contentToConvert = getCurrentContent;
-        const { templateSubject, templateContent } = prepareTagExtractionPayload(
+        const { templateSubject, templatePreheader, templateContent } = prepareTagExtractionPayload(
           channel,
           formData || {},
           contentToConvert
         );
-        actions.extractTagsRequested({ templateSubject, templateContent });
+        actions.extractTagsRequested({ templateSubject, templatePreheader, templateContent });
       }
 
       // Fetch test customers and groups if enabled
@@ -3098,12 +3073,12 @@ const CommonTestAndPreview = (props) => {
       const handleContentUpdate = (contentToUpdate) => {
         // Extract tags from content (but don't set previewDataHtml - use raw content initially)
         // previewDataHtml will only be set when preview API call is made
-        const { templateSubject, templateContent: extractContent } = prepareTagExtractionPayload(
+        const { templateSubject, templatePreheader, templateContent: extractContent } = prepareTagExtractionPayload(
           channel,
           formData,
           contentToUpdate
         );
-        actions.extractTagsRequested({ templateSubject, templateContent: extractContent });
+        actions.extractTagsRequested({ templateSubject, templatePreheader, templateContent: extractContent });
       };
 
       if (isDragDrop) {
@@ -3129,7 +3104,6 @@ const CommonTestAndPreview = (props) => {
       previousBeeContentRef.current = '';
       setBeeContent('');
       setPreviewDataHtml('');
-      setPreviewTagValues(null);
       setSelectedCustomer(null);
       setRequiredTags([]);
       setOptionalTags([]);
@@ -3219,7 +3193,6 @@ const CommonTestAndPreview = (props) => {
         updatedValues,
         selectedCustomer
       );
-      setPreviewTagValues(updatedValues);
       actions.updatePreviewRequested(payload);
       setHasPreviewCallBeenMade(true); // Mark that preview call was made
       void syncSmsFallbackPreview(updatedValues, selectedCustomer);
@@ -3289,7 +3262,6 @@ const CommonTestAndPreview = (props) => {
     setTagsExtracted(false);
     setPreviewDevice(DESKTOP);
     setPreviewDataHtml('');
-    setPreviewTagValues(null);
     setHasPreviewCallBeenMade(false); // Reset preview call flag
     setViberPreviewTagValues(null);
     setSelectedTestEntities([]);
@@ -3328,7 +3300,6 @@ const CommonTestAndPreview = (props) => {
    */
   const handleClearSelection = () => {
     setSelectedCustomer(null);
-    setPreviewTagValues(null);
     setHasPreviewCallBeenMade(false); // Reset flag when customer is cleared
     setViberPreviewTagValues(null);
 
@@ -3392,8 +3363,6 @@ const CommonTestAndPreview = (props) => {
     if (channel === CHANNELS.VIBER) {
       setViberPreviewTagValues({ ...emptyValues });
     }
-    previewCustomValuesRef.current = emptyValues;
-    setPreviewTagValues(emptyValues);
     actions.updatePreviewRequested(payload);
     setHasPreviewCallBeenMade(true); // Mark that preview call was made
   };
@@ -3407,7 +3376,6 @@ const CommonTestAndPreview = (props) => {
       // Capture customValues at click time so the carousel preview only updates here,
       // not on every subsequent keystroke.
       previewCustomValuesRef.current = customValues;
-      setPreviewTagValues(customValues);
       // For RCS: always dispatch with RCS channel/content so previewDataHtml stays RCS-shaped,
       // even when the user triggers update from the SMS fallback tab.
       // SMS fallback preview is kept in sync by syncSmsFallbackPreview via smsFallbackPreviewText.
@@ -3507,13 +3475,6 @@ const CommonTestAndPreview = (props) => {
     if (channel === CHANNELS.SMS && !smsTemplateHasMustacheTags(smsEditorBody)) {
       smsTagSource = [];
     }
-    // Unmapped variables become fillable test values, like RCS.
-    if (channel === CHANNELS.WHATSAPP) {
-      smsTagSource = mergeSyntheticMustacheTags(smsTagSource, getWhatsappTagExtractionText(formData));
-    }
-    if (channel === CHANNELS.ZALO) {
-      smsTagSource = mergeZaloUnfilledParamTags(smsTagSource, formData);
-    }
     const { required, optional, hasPersonalizationTags } = categorizeTags(smsTagSource);
     setRequiredTags(required);
     setOptionalTags(optional);
@@ -3559,12 +3520,12 @@ const CommonTestAndPreview = (props) => {
     }
 
     setTagsExtracted(true);
-    const { templateSubject, templateContent } = prepareTagExtractionPayload(
+    const { templateSubject, templatePreheader, templateContent } = prepareTagExtractionPayload(
       activeChannelForActions,
       formData || {},
       contentToExtract
     );
-    actions.extractTagsRequested({ templateSubject, templateContent });
+    actions.extractTagsRequested({ templateSubject, templatePreheader, templateContent });
   };
 
   /**

package/v2Components/CommonTestAndPreview/sagas.js

@@ -70,10 +70,11 @@ export function* searchCustomersSaga(action) {
 // Extract Tags Saga
 export function* extractTagsSaga(action) {
   try {
-    const { templateSubject, templateContent } = action.payload;
+    const { templateSubject, templatePreheader, templateContent } = action.payload;
 
     const payload = {
       messageTitle: templateSubject || '',
+      messageSubtitle: templatePreheader || '',
       messageBody: templateContent || '',
     };