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

package/package.json

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

package/v2Components/CommonTestAndPreview/index.js

@@ -39,6 +39,8 @@ import {
   mapRcsSuggestionForTestMeta,
   getRcsPrimaryTagExtractionText,
   mergeSyntheticMustacheTags,
+  getWhatsappTagExtractionText,
+  mergeZaloUnfilledParamTags,
 } from './utils';
 import AddTestCustomerButton from './AddTestCustomer';
 import ExistingCustomerModal from './ExistingCustomerModal';
@@ -235,6 +237,8 @@ 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);
 
@@ -595,6 +599,12 @@ 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,
@@ -680,7 +690,8 @@ 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, '\\$&');
-      const tagRegex = new RegExp(`{{${escapedTagName}}}`, 'g');
+      // Braces escaped: unescaped `{{1}}` parses `{1}` as a quantifier and never matches numbered slots.
+      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 !== '';
@@ -1546,7 +1557,7 @@ const CommonTestAndPreview = (props) => {
 
         // Build whatsappMedia structure
         const whatsappMedia = {
-          header: formDataObj?.templateHeader || formDataObj?.header || '',
+          header: resolveTagsInText(formDataObj?.templateHeader || formDataObj?.header || '', customValuesObj),
           footer: formDataObj?.templateFooter || formDataObj?.footer || '',
           headerVarMapped: formDataObj?.headerVarMapped || formDataObj?.headerVarMappedData || {},
           headerTemplate: formDataObj?.headerTemplate || formDataObj?.templateHeader || '',
@@ -2414,7 +2425,10 @@ const CommonTestAndPreview = (props) => {
             const resolvedVarMapped = {};
             Object.keys(templateConfigs.varMapped).forEach((key) => {
               const value = templateConfigs.varMapped[key];
-              resolvedVarMapped[key] = resolveTagsInText(value, customValuesObj);
+              // Param left empty on Overview → use the value entered in Test & Preview.
+              resolvedVarMapped[key] = value
+                ? resolveTagsInText(value, customValuesObj)
+                : (customValuesObj[key] ?? '');
             });
             templateConfigs.varMapped = resolvedVarMapped;
           }
@@ -2445,7 +2459,9 @@ const CommonTestAndPreview = (props) => {
             const resolvedVarMapped = {};
             Object.keys(varMapped).forEach((key) => {
               const value = varMapped[key];
-              resolvedVarMapped[key] = resolveTagsInText(value, customValuesObj);
+              resolvedVarMapped[key] = value
+                ? resolveTagsInText(value, customValuesObj)
+                : (customValuesObj[key] ?? '');
             });
             varMapped = resolvedVarMapped;
           }
@@ -2535,10 +2551,27 @@ 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;
@@ -2546,7 +2579,7 @@ const CommonTestAndPreview = (props) => {
         try { resolvedContent = JSON.parse(resolvedContent); } catch (e) { resolvedContent = null; }
       }
     }
-    if (resolvedContent && typeof resolvedContent === 'object') return resolvedContent;
+    if (resolvedContent && typeof resolvedContent === 'object') return fillStandaloneCard(resolvedContent);
 
     let rawRcs = content;
     if (typeof rawRcs === 'string') {
@@ -2571,9 +2604,9 @@ const CommonTestAndPreview = (props) => {
         }),
       };
     }
-    return rawRcs || {};
+    return fillStandaloneCard(rawRcs) || {};
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channel, content, hasPreviewCallBeenMade, previewDataHtml, formData]);
+  }, [channel, content, hasPreviewCallBeenMade, previewDataHtml, formData, previewTagValues]);
 
   const prepareUnifiedPreviewProps = () => {
     // Prepare content based on channel
@@ -2635,6 +2668,14 @@ 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
@@ -3088,6 +3129,7 @@ const CommonTestAndPreview = (props) => {
       previousBeeContentRef.current = '';
       setBeeContent('');
       setPreviewDataHtml('');
+      setPreviewTagValues(null);
       setSelectedCustomer(null);
       setRequiredTags([]);
       setOptionalTags([]);
@@ -3177,6 +3219,7 @@ const CommonTestAndPreview = (props) => {
         updatedValues,
         selectedCustomer
       );
+      setPreviewTagValues(updatedValues);
       actions.updatePreviewRequested(payload);
       setHasPreviewCallBeenMade(true); // Mark that preview call was made
       void syncSmsFallbackPreview(updatedValues, selectedCustomer);
@@ -3246,6 +3289,7 @@ const CommonTestAndPreview = (props) => {
     setTagsExtracted(false);
     setPreviewDevice(DESKTOP);
     setPreviewDataHtml('');
+    setPreviewTagValues(null);
     setHasPreviewCallBeenMade(false); // Reset preview call flag
     setViberPreviewTagValues(null);
     setSelectedTestEntities([]);
@@ -3284,6 +3328,7 @@ const CommonTestAndPreview = (props) => {
    */
   const handleClearSelection = () => {
     setSelectedCustomer(null);
+    setPreviewTagValues(null);
     setHasPreviewCallBeenMade(false); // Reset flag when customer is cleared
     setViberPreviewTagValues(null);
 
@@ -3347,6 +3392,8 @@ 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
   };
@@ -3360,6 +3407,7 @@ 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.
@@ -3459,6 +3507,13 @@ 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);

package/v2Components/CommonTestAndPreview/tests/index.test.js

@@ -7,7 +7,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { render, screen, waitFor } from '@testing-library/react';
+import {
+  render, screen, waitFor, act,
+} from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import CommonTestAndPreview from '../index';
 import { CHANNELS, MEDIA_TYPE_CAROUSEL } from '../constants';
@@ -70,12 +72,14 @@ jest.mock('../SendTestMessage', () => {
   };
 });
 
+let lastPreviewSectionProps = null;
 jest.mock('../PreviewSection', () => {
   // eslint-disable-next-line global-require, import/no-extraneous-dependencies
   const ReactLib = require('react');
   return {
     __esModule: true,
-    default: function MockPreviewSection() {
+    default: function MockPreviewSection(props) {
+      lastPreviewSectionProps = props;
       return ReactLib.createElement('div', { 'data-testid': 'preview-section' }, 'Preview Section');
     },
   };
@@ -199,6 +203,7 @@ describe('CommonTestAndPreview', () => {
     lastSendTestMessageProps = null;
     lastLeftPanelContentProps = null;
     lastCustomValuesEditorProps = null;
+    lastPreviewSectionProps = null;
     // Reset all mock function implementations
     Object.values(mockActions).forEach((mockFn) => {
       if (jest.isMockFunction(mockFn)) {
@@ -3782,5 +3787,100 @@ describe('CommonTestAndPreview', () => {
       expect(mockActions.updatePreviewRequested).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('client-side preview fill-in when the preview API reply is not an object', () => {
+    const getPreviewContent = () => lastPreviewSectionProps.unifiedPreviewProps.content;
+
+    const enterValuesAndUpdatePreview = async (values) => {
+      await waitFor(() => expect(lastCustomValuesEditorProps).not.toBeNull());
+      act(() => {
+        Object.entries(values).forEach(([tag, value]) => lastCustomValuesEditorProps.handleCustomValueChange(tag, value));
+      });
+      await act(async () => {
+        await lastCustomValuesEditorProps.handleUpdatePreview();
+      });
+    };
+
+    const whatsappContent = {
+      templateHeader: 'Order for {{1}}',
+      templateMsg: 'Hi {{1}}, delivered by {{2}}',
+    };
+
+    it('fills entered values into the WhatsApp header and message', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.WHATSAPP}
+            content={whatsappContent}
+            formData={whatsappContent}
+          />
+        </TestWrapper>
+      );
+
+      await enterValuesAndUpdatePreview({ 1: 'Sh', 2: 'Monday' });
+
+      expect(getPreviewContent().templateHeader).toBe('Order for Sh');
+      expect(getPreviewContent().templateMsg).toBe('Hi Sh, delivered by Monday');
+    });
+
+    it('fills entered values when the preview API returns an object with unresolved {{N}}', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.WHATSAPP}
+            content={whatsappContent}
+            formData={whatsappContent}
+            previewData={{ resolvedBody: JSON.stringify(whatsappContent) }}
+          />
+        </TestWrapper>
+      );
+
+      await enterValuesAndUpdatePreview({ 1: 'Shash', 2: 'Name' });
+
+      expect(getPreviewContent().templateHeader).toBe('Order for Shash');
+      expect(getPreviewContent().templateMsg).toBe('Hi Shash, delivered by Name');
+    });
+
+    it('restores WhatsApp placeholders after Discard custom values', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.WHATSAPP}
+            content={whatsappContent}
+            formData={whatsappContent}
+          />
+        </TestWrapper>
+      );
+
+      await enterValuesAndUpdatePreview({ 1: 'Sh', 2: 'Monday' });
+      act(() => {
+        lastCustomValuesEditorProps.handleDiscardCustomValues();
+      });
+
+      expect(getPreviewContent().templateMsg).toBe('Hi {{1}}, delivered by {{2}}');
+    });
+
+    it('fills entered values into an RCS standalone card', async () => {
+      const rcsContent = { templateHeader: 'Store {{1}}', templateMessage: 'Visit store for {{1}} offer' };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.RCS}
+            content={rcsContent}
+            formData={{ rcsTitle: 'Store {{1}}', rcsDesc: 'Visit store for {{1}} offer' }}
+          />
+        </TestWrapper>
+      );
+
+      await enterValuesAndUpdatePreview({ 1: 'Goog' });
+
+      expect(getPreviewContent().templateHeader).toBe('Store Goog');
+      expect(getPreviewContent().templateMessage).toBe('Visit store for Goog offer');
+    });
+  });
 });
 

package/v2Components/CommonTestAndPreview/tests/utils.test.js

@@ -10,6 +10,9 @@ import {
   hasTrimmedText,
   getCarouselButtonsWithTitles,
   getCarouselButtonSlotCount,
+  mergeSyntheticMustacheTags,
+  getWhatsappTagExtractionText,
+  mergeZaloUnfilledParamTags,
 } from '../utils';
 
 describe('CommonTestAndPreview/utils', () => {
@@ -197,4 +200,67 @@ describe('CommonTestAndPreview/utils', () => {
       expect(getCarouselButtonSlotCount([{ buttons: [{ title: '  ' }] }])).toBe(0);
     });
   });
+
+  describe('getWhatsappTagExtractionText', () => {
+    it('joins header and message', () => {
+      expect(getWhatsappTagExtractionText({ templateHeader: 'Order {{1}}', templateMsg: 'Hi {{2}}' }))
+        .toBe('Order {{1}} Hi {{2}}');
+    });
+
+    it('handles missing fields', () => {
+      expect(getWhatsappTagExtractionText({ templateMsg: 'Hi {{1}}' })).toBe('Hi {{1}}');
+      expect(getWhatsappTagExtractionText(undefined)).toBe('');
+    });
+
+    it('surfaces unmapped WhatsApp slots as tags alongside API tags', () => {
+      const apiTags = [{ name: 'adv', metaData: { userDriven: false }, children: [] }];
+      const text = getWhatsappTagExtractionText({
+        templateHeader: 'Order {{1}}',
+        templateMsg: 'Hi {{adv}}, by {{2}}',
+      });
+      expect(mergeSyntheticMustacheTags(apiTags, text).map((tag) => tag.name)).toEqual(['adv', '1', '2']);
+    });
+  });
+
+  describe('mergeZaloUnfilledParamTags', () => {
+    const formData = {
+      templateListParams: [
+        { name: 'danh_xung', value: '' },
+        { name: 'name', value: '{{first_name}}' },
+        { name: 'ma_so', value: '   ' },
+      ],
+    };
+
+    it('adds a tag for each empty param', () => {
+      expect(mergeZaloUnfilledParamTags([], formData)).toEqual([
+        { name: 'danh_xung', metaData: { userDriven: false }, children: [] },
+        { name: 'ma_so', metaData: { userDriven: false }, children: [] },
+      ]);
+    });
+
+    it('keeps API tags and does not duplicate names', () => {
+      const apiTags = [{ name: 'danh_xung', metaData: { userDriven: true }, children: [] }];
+      const result = mergeZaloUnfilledParamTags(apiTags, formData);
+      expect(result.map((tag) => tag.name)).toEqual(['danh_xung', 'ma_so']);
+      expect(result[0]).toBe(apiTags[0]);
+    });
+
+    it('returns API tags when there are no params', () => {
+      expect(mergeZaloUnfilledParamTags(undefined, {})).toEqual([]);
+    });
+
+    it('handles missing args, unnamed params and null values', () => {
+      expect(mergeZaloUnfilledParamTags()).toEqual([]);
+      expect(mergeZaloUnfilledParamTags(null, {
+        templateListParams: [{ value: '' }, { name: 'a', value: null }, { name: 'b' }],
+      }).map((tag) => tag.name)).toEqual(['a', 'b']);
+    });
+  });
+
+  describe('mergeSyntheticMustacheTags', () => {
+    it('handles null API tags', () => {
+      expect(mergeSyntheticMustacheTags(null, 'Hi {{1}}').map((tag) => tag.name)).toEqual(['1']);
+      expect(mergeSyntheticMustacheTags(null, 'no tags')).toEqual([]);
+    });
+  });
 });

package/v2Components/CommonTestAndPreview/utils.js

@@ -61,6 +61,20 @@ export const mergeSyntheticMustacheTags = (apiTags = [], rawText = '') => {
   return [...(apiTags ?? []), ...synthetic];
 };
 
+/** WhatsApp header + body text, scanned for unmapped `{{N}}` slots. */
+export const getWhatsappTagExtractionText = (formDataObj) => (
+  `${formDataObj?.templateHeader || ''} ${formDataObj?.templateMsg || ''}`.trim()
+);
+
+/** Zalo params left empty on Overview, surfaced as fillable test values (keyed by param name). */
+export const mergeZaloUnfilledParamTags = (apiTags = [], formDataObj = {}) => {
+  const existingNames = new Set((apiTags ?? []).map((tag) => tag?.name));
+  const unfilledParamTags = (formDataObj?.templateListParams || [])
+    .filter((param) => param?.name && !String(param?.value ?? '').trim() && !existingNames.has(param.name))
+    .map((param) => ({ name: param.name, metaData: { userDriven: false }, children: [] }));
+  return [...(apiTags ?? []), ...unfilledParamTags];
+};
+
 /** RCS createMessageMeta: normalize media shape (mediaUrl, thumbnailUrl, height string). */
 export const normalizeRcsTestCardMedia = (media) => {
   if (!media || typeof media !== 'object') return undefined;

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -653,6 +653,7 @@ export function SlideBoxContent(props) {
           showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
           handleTestAndPreview={handleTestAndPreview}
           handleCloseTestAndPreview={handleCloseTestAndPreview}
+          handleClose={handleClose}
           onContentValidityChange={onContentValidityChange}
         />
       }
@@ -1157,6 +1158,7 @@ export function SlideBoxContent(props) {
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
+        handleClose={handleClose}
         params={{
           id: templateData._id,
         }}

package/v2Containers/Rcs/index.js

@@ -312,6 +312,8 @@ export const Rcs = (props) => {
 
   // TestAndPreviewSlidebox state
   const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
+  // Set when opened from listing "Preview and test"; closing then returns to the listing.
+  const isTestAndPreviewFromListingRef = useRef(false);
 
   // Handle Test and Preview button click
   const handleTestAndPreview = useCallback(() => {
@@ -328,7 +330,11 @@ export const Rcs = (props) => {
     if (propsHandleCloseTestAndPreview) {
       propsHandleCloseTestAndPreview();
     }
-  }, [propsHandleCloseTestAndPreview]);
+    if (isTestAndPreviewFromListingRef.current && handleClose) {
+      isTestAndPreviewFromListingRef.current = false;
+      handleClose();
+    }
+  }, [propsHandleCloseTestAndPreview, handleClose]);
 
   // Helper to get RCS orientation from selectedDimension
   const getRcsOrientation = () => {
@@ -1437,6 +1443,26 @@ export const Rcs = (props) => {
     }
   }, [rcsHydrationDetails, isFullMode, isHostInfoBip]);
 
+  // Listing "Preview and test": open Test & Preview once the template is hydrated.
+  const hasAutoOpenedTestAndPreviewRef = useRef(false);
+  useEffect(() => {
+    if (!isFullMode || !templateData?.openTestAndPreview || hasAutoOpenedTestAndPreviewRef.current) return;
+    if (spin || !isEditFlow || smsFallbackData === undefined) return;
+    if (!(isHostInfoBip || templateStatus === RCS_STATUSES.approved)) return;
+    hasAutoOpenedTestAndPreviewRef.current = true;
+    isTestAndPreviewFromListingRef.current = true;
+    handleTestAndPreview();
+  }, [
+    isFullMode,
+    templateData?.openTestAndPreview,
+    spin,
+    isEditFlow,
+    smsFallbackData,
+    isHostInfoBip,
+    templateStatus,
+    handleTestAndPreview,
+  ]);
+
   useEffect(() => {
     if (templateType === contentType.text_message) {
       setTemplateMediaType(RCS_MEDIA_TYPES.NONE);

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

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
+import { initialReducer } from '../../../initialReducer';
+import { mountWithIntl } from '../../../../app/helpers/intl-enzym-test-helpers';
+import { Rcs } from '../index';
+import history from '../../../utils/history';
+
+jest.mock('react-redux', () => {
+  const actual = jest.requireActual('react-redux');
+  return { ...actual, useDispatch: jest.fn(() => jest.fn()) };
+});
+jest.mock('../../../v2Containers/TagList/index.js', () => ({
+  __esModule: true,
+  default: () => <div className="tag-mock">TagList</div>,
+}));
+jest.mock('../../../v2Components/CapImageUpload', () => ({
+  __esModule: true,
+  default: () => <div className="cap-image-upload-mock" />,
+}));
+jest.mock('../../../v2Components/CapVideoUpload', () => ({
+  __esModule: true,
+  default: () => <div className="cap-video-upload-mock" />,
+}));
+jest.mock('../../../v2Components/CapActionButton', () => ({
+  __esModule: true,
+  default: () => <div className="cap-action-button-mock" />,
+}));
+jest.mock('@capillarytech/cap-ui-library/CapIcon', () => ({
+  __esModule: true,
+  default: () => <span className="cap-icon-mock" />,
+}));
+jest.mock('../../CreativesContainer', () => ({
+  __esModule: true,
+  default: () => <div className="creatives-container-mock" />,
+}));
+// Stub exposes only open state + close action.
+jest.mock('../../../v2Components/TestAndPreviewSlidebox', () => ({
+  __esModule: true,
+  default: ({ show, onClose }) => (show ? <button type="button" className="mock-test-preview-close" onClick={onClose} /> : null),
+}));
+
+let store;
+beforeAll(() => {
+  store = configureStore({}, initialReducer, history);
+});
+
+const buildTemplateDetails = (status) => ({
+  _id: 'rcs_1',
+  name: 'RcsTemplate',
+  type: 'RCS',
+  versions: {
+    base: {
+      content: {
+        RCS: {
+          rcsContent: {
+            cardType: 'STANDALONE',
+            cardSettings: { cardOrientation: 'VERTICAL' },
+            contentType: 'text_message',
+            cardContent: [{ title: '', description: 'Hello there', mediaType: 'NONE', Status: status }],
+          },
+        },
+      },
+    },
+  },
+});
+
+describe('Rcs - Preview and test from listing', () => {
+  const handleClose = jest.fn();
+
+  const renderEdit = (templateData, status = 'approved') => {
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            uploadRcsAsset: jest.fn(),
+            clearRcsMediaAsset: jest.fn(),
+            createTemplate: jest.fn(),
+            clearCreateResponse: jest.fn(),
+            // Details come in via rcsData; just release the spinner.
+            getTemplateDetails: jest.fn((id, setSpin) => setSpin && setSpin(false)),
+            editTemplate: jest.fn(),
+            clearEditResponse: jest.fn(),
+          }}
+          globalActions={{ fetchSchemaForEntity: jest.fn() }}
+          onCreateComplete={jest.fn()}
+          handleClose={handleClose}
+          intl={{ formatMessage: jest.fn() }}
+          location={{ pathname: '/rcs/edit', query: { type: false, module: 'default' }, search: '' }}
+          params={{ id: 'rcs_1' }}
+          rcsData={{ templateDetails: buildTemplateDetails(status) }}
+          templateData={templateData}
+          isFullMode
+          loadingTags={false}
+          metaEntities={[]}
+          getDefaultTags
+          smsRegister="DLT"
+        />
+      </Provider>,
+    );
+    wrapper.update();
+    return wrapper;
+  };
+
+  it('auto-opens Test & Preview for an approved template and returns to the listing on close', () => {
+    const wrapper = renderEdit({ openTestAndPreview: true });
+    const closeButton = wrapper.find('button.mock-test-preview-close');
+    expect(closeButton.exists()).toBe(true);
+
+    closeButton.simulate('click');
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not auto-open without the listing flag', () => {
+    const wrapper = renderEdit({});
+    expect(wrapper.find('button.mock-test-preview-close').exists()).toBe(false);
+  });
+
+  it('does not auto-open for a template that is not approved', () => {
+    const wrapper = renderEdit({ openTestAndPreview: true }, 'pending');
+    expect(wrapper.find('button.mock-test-preview-close').exists()).toBe(false);
+  });
+
+  it('keeps the editor open when Test & Preview was opened from the footer', () => {
+    const wrapper = renderEdit({});
+    wrapper.find('button.rcs-test-preview-btn').last().simulate('click');
+    wrapper.update();
+
+    wrapper.find('button.mock-test-preview-close').simulate('click');
+    expect(handleClose).not.toHaveBeenCalled();
+  });
+});

package/v2Containers/Templates/index.js

@@ -253,7 +253,6 @@ const duplicateEnum = {
   line: "lineActions",
   [VIBER_CHANNEL]: "viberActions",
   [FACEBOOK_CHANNEL]: "facebookActions",
-  [RCS_LOWERCASE]: "rcsActions",
 };
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -1789,6 +1788,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             }
           }
           creativesParams.type = this.state.channel.toUpperCase();
+          if (routeParams.openTestAndPreview) {
+            creativesParams.openTestAndPreview = true;
+          }
         }
       }
     }
@@ -2277,7 +2279,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                     onClick={() => {
                       if ([ZALO, WHATSAPP, RCS].includes(this.state.channel.toUpperCase()) || (isTraiDltFeature && this.state.channel.toUpperCase() === SMS)) {
                         handlers.handleEditClick(undefined, template, undefined, undefined, {
-                          account: this.state.selectedAccount
+                          account: this.state.selectedAccount,
+                          // Test panel fills unmapped variables for these; SMS DLT still needs Overview.
+                          openTestAndPreview: [RCS, WHATSAPP, ZALO].includes(this.state.channel.toUpperCase()),
                         })
                       } else {
                         this.handleTestAndPreviewFromListing(template)
@@ -2288,7 +2292,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   </CapMenu.Item>
                 )}
                 {/* Duplicate menu item */}
-                {![WECHAT, WHATSAPP, ZALO].includes(
+                {![WECHAT, WHATSAPP, ZALO, RCS].includes(
                   this.state.channel.toUpperCase()
                 ) &&
                   !isTraiDltFeature && !template.isArchived && this.gatedMenuItem({
@@ -3699,7 +3703,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         };
         this.getAllTemplates({params, resetPage: true});
       });
-    } else if (["sms", "line", VIBER_CHANNEL, FACEBOOK_CHANNEL, RCS_LOWERCASE].includes(this.state.channel.toLowerCase())) {
+    } else if ([SMS_LOWERCASE, LINE_LOWERCASE, VIBER_CHANNEL, FACEBOOK_CHANNEL].includes(this.state.channel.toLowerCase())) {
       this.commonDuplicate(duplicateEnum[this.state.channel.toLowerCase()], duplicateObj);
     }
   }
@@ -3858,6 +3862,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.setState({routeParams: {
         pathname: pathName,
         query: getQuery,
+        ...(options?.openTestAndPreview && { openTestAndPreview: true }),
       }});
     }
   }

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

@@ -5,6 +5,7 @@ import { Templates } from '../index';
 import mockdata from '../../mockdata';
 import { rcsTemplates, senderDetailsRcs } from './mockData';
 import { exportEmailTemplateHtml } from '../../../utils/downloadFile';
+import { PERMISSIONS } from '../../../utils/permissions';
 
 const { whatsappTemplates: TemplatesProp, getCreativesParamsOutput, zaloTemplates: ZaloTemplateProp } = mockdata;
 
@@ -27,6 +28,41 @@ jest.mock('../../CreativesContainer', () => ({
   ),
 }));
 
+// Recursively walks a plain-object/array/React-element tree (as returned by
+// getTemplateDataForGrid, which is never mounted here) looking for a node whose
+// className includes the given substring - robust against the exact nesting of
+// CapDropdown > CapMenu > CapMenu.Item without hardcoding array indices.
+function findByClassName(node, className, seen = new Set()) {
+  if (!node || typeof node !== 'object') return null;
+  if (seen.has(node)) return null;
+  seen.add(node);
+  if (Array.isArray(node)) {
+    for (let i = 0; i < node.length; i += 1) {
+      const found = findByClassName(node[i], className, seen);
+      if (found) return found;
+    }
+    return null;
+  }
+  // React element (has .props) - check its className, then search its own prop values.
+  if (node.props) {
+    if (typeof node.props.className === 'string' && node.props.className.includes(className)) {
+      return node;
+    }
+    return findByClassName(node.props, className, seen);
+  }
+  // Plain object (e.g. a getTemplateDataForGrid card-data entry: {key, title, extra, hoverOption, ...})
+  // or a React element's .props object - search every own value.
+  const values = Object.values(node);
+  for (let i = 0; i < values.length; i += 1) {
+    const value = values[i];
+    if (value && typeof value === 'object') {
+      const found = findByClassName(value, className, seen);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
 describe('Test Templates container', () => {
   const getWeCrmAccounts = jest.fn();
   const setChannelAccount = jest.fn();
@@ -271,41 +307,6 @@ describe('Test Templates container', () => {
   describe('Export HTML (EMAIL channel)', () => {
     const emailTemplate = { _id: 'email_1', name: 'My Email Template', versions: { base: {} } };
 
-    // Recursively walks a plain-object/array/React-element tree (as returned by
-    // getTemplateDataForGrid, which is never mounted here) looking for a node whose
-    // className includes the given substring - robust against the exact nesting of
-    // CapDropdown > CapMenu > CapMenu.Item without hardcoding array indices.
-    function findByClassName(node, className, seen = new Set()) {
-      if (!node || typeof node !== 'object') return null;
-      if (seen.has(node)) return null;
-      seen.add(node);
-      if (Array.isArray(node)) {
-        for (let i = 0; i < node.length; i += 1) {
-          const found = findByClassName(node[i], className, seen);
-          if (found) return found;
-        }
-        return null;
-      }
-      // React element (has .props) - check its className, then search its own prop values.
-      if (node.props) {
-        if (typeof node.props.className === 'string' && node.props.className.includes(className)) {
-          return node;
-        }
-        return findByClassName(node.props, className, seen);
-      }
-      // Plain object (e.g. a getTemplateDataForGrid card-data entry: {key, title, extra, hoverOption, ...})
-      // or a React element's .props object - search every own value.
-      const values = Object.values(node);
-      for (let i = 0; i < values.length; i += 1) {
-        const value = values[i];
-        if (value && typeof value === 'object') {
-          const found = findByClassName(value, className, seen);
-          if (found) return found;
-        }
-      }
-      return null;
-    }
-
     beforeEach(() => {
       jest.clearAllMocks();
       // jest config sets resetMocks: true, wiping the default implementation baked into
@@ -426,4 +427,75 @@ describe('Test Templates container', () => {
       expect(findByClassName(cardDataList, 'export-html-email')).toBeNull();
     });
   });
+
+  describe('RCS listing menu', () => {
+    const approvedRcsTemplate = {
+      _id: 'rcs_1',
+      name: 'RCS Template',
+      versions: { base: { content: { RCS: { rcsContent: { cardContent: [{ Status: 'approved' }] } } } } },
+    };
+    const handlers = { handlePreviewClick: jest.fn(), handleEditClick: jest.fn() };
+    const getCardData = () => renderedComponent.instance().getTemplateDataForGrid({
+      templates: [approvedRcsTemplate],
+      handlers,
+      filterContent: null,
+      channel: 'rcs',
+      isLoading: false,
+      isInitialLoading: false,
+      loadingTip: '',
+      previewTemplateId: null,
+    });
+
+    beforeEach(() => {
+      RenderFunctionFor('rcs', true);
+      renderedComponent.setProps({
+        isFullMode: true,
+        isDltFromRcs: false,
+        Global: { user: { accessiblePermissions: [PERMISSIONS.CREATIVE_EDIT] } },
+        actions: { ...renderedComponent.props().actions, resetTemplateData: jest.fn() },
+      });
+    });
+
+    it('does not render the Duplicate menu item for RCS', () => {
+      expect(findByClassName(getCardData(), 'duplicate-rcs')).toBeNull();
+    });
+
+    it('"Preview and test" opens the editor with openTestAndPreview', () => {
+      const menuItem = findByClassName(getCardData(), 'test-and-preview-rcs');
+      expect(menuItem).not.toBeNull();
+
+      menuItem.props.onClick();
+      expect(handlers.handleEditClick).toHaveBeenCalledWith(
+        undefined,
+        approvedRcsTemplate,
+        undefined,
+        undefined,
+        expect.objectContaining({ openTestAndPreview: true }),
+      );
+    });
+
+    it('handleEditClick keeps openTestAndPreview in routeParams', () => {
+      renderedComponent.instance().handleEditClick(undefined, approvedRcsTemplate, undefined, undefined, {
+        openTestAndPreview: true,
+      });
+      expect(renderedComponent.state('routeParams')).toEqual(
+        expect.objectContaining({ pathname: '/rcs/edit/rcs_1/', openTestAndPreview: true }),
+      );
+    });
+
+    it('handleEditClick omits openTestAndPreview for Overview', () => {
+      renderedComponent.instance().handleEditClick(undefined, approvedRcsTemplate);
+      expect(renderedComponent.state('routeParams')).not.toHaveProperty('openTestAndPreview');
+    });
+
+    it('getCreativesParams forwards openTestAndPreview to the editor', () => {
+      renderedComponent.setState({ routeParams: { pathname: '/rcs/edit/rcs_1/', openTestAndPreview: true } });
+      expect(renderedComponent.instance().getCreativesParams()).toEqual(
+        expect.objectContaining({ mode: 'edit', _id: 'rcs_1', type: 'RCS', openTestAndPreview: true }),
+      );
+
+      renderedComponent.setState({ routeParams: { pathname: '/rcs/edit/rcs_1/' } });
+      expect(renderedComponent.instance().getCreativesParams()).not.toHaveProperty('openTestAndPreview');
+    });
+  });
 });

package/v2Containers/Whatsapp/index.js

@@ -3268,6 +3268,10 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     accountData,
   ]);
 
+  // Set when opened from listing "Preview and test"; closing then returns to the listing.
+  const isTestAndPreviewFromListingRef = useRef(false);
+  const hasAutoOpenedTestAndPreviewRef = useRef(false);
+
   // Handle Test and Preview button click
   const handleTestAndPreview = useCallback(() => {
     setShowTestAndPreviewSlidebox(true);
@@ -3284,7 +3288,20 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     if (propsHandleCloseTestAndPreview) {
       propsHandleCloseTestAndPreview();
     }
-  }, [propsHandleCloseTestAndPreview]);
+    if (isTestAndPreviewFromListingRef.current && handleClose) {
+      isTestAndPreviewFromListingRef.current = false;
+      handleClose();
+    }
+  }, [propsHandleCloseTestAndPreview, handleClose]);
+
+  // Listing "Preview and test": open Test & Preview once the template is hydrated.
+  useEffect(() => {
+    if (!isFullMode || !templateData?.openTestAndPreview || hasAutoOpenedTestAndPreviewRef.current) return;
+    if (spin || !isEditFlow || templateStatus !== WHATSAPP_STATUSES.approved) return;
+    hasAutoOpenedTestAndPreviewRef.current = true;
+    isTestAndPreviewFromListingRef.current = true;
+    handleTestAndPreview();
+  }, [isFullMode, templateData?.openTestAndPreview, spin, isEditFlow, templateStatus, handleTestAndPreview]);
 
   return (
     <CapSpin spinning={spin || metaDataStatus === REQUEST}>

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

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap
-size: 57265074 bytes
-sha256: 0c93028e0289bec64b42e30d37d66d0dddeaff992fb34ccc59499c9c2015f430
+size: 57271855 bytes
+sha256: d1e9c0cd51e8b68c9acd1ddeee01866302a054ed135d594d34509d92a3e39124

package/v2Containers/Whatsapp/tests/testAndPreviewFromListing.test.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { cloneDeep } from 'lodash';
+import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
+import { Provider } from 'react-redux';
+import history from '../../../utils/history';
+import { initialReducer } from '../../../initialReducer';
+import { mountWithIntl } from '../../../../app/helpers/intl-enzym-test-helpers';
+import { Whatsapp } from '../index';
+import { mockData } from './mockData';
+
+jest.mock('../../../v2Containers/TagList/index.js', () => ({
+  __esModule: true,
+  default: () => <div className="tag-mock">TagList</div>,
+}));
+// Stub exposes only open state + close action.
+jest.mock('../../../v2Components/TestAndPreviewSlidebox', () => ({
+  __esModule: true,
+  default: ({ show, onClose }) => (show ? <button type="button" className="mock-test-preview-close" onClick={onClose} /> : null),
+}));
+
+let store;
+beforeAll(() => {
+  store = configureStore({}, initialReducer, history);
+});
+
+describe('Whatsapp - Preview and test from listing', () => {
+  const handleClose = jest.fn();
+
+  // Fresh fixture per render: the editor mutates nested template data.
+  const renderEdit = (templateData, editData = cloneDeep(mockData.editData1)) => {
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Whatsapp
+          actions={{
+            createWhatsappTemplate: jest.fn(),
+            clearCreateResponse: jest.fn(),
+            getTemplateDetails: jest.fn(),
+            resetEditTemplate: jest.fn(),
+            getMetaTags: jest.fn(),
+            resetMetaTags: jest.fn(),
+          }}
+          globalActions={{ fetchSchemaForEntity: jest.fn() }}
+          onCreateComplete={jest.fn()}
+          handleClose={handleClose}
+          getFormData={jest.fn()}
+          params={{ id: editData.templateDetails._id }}
+          editData={editData}
+          templateData={templateData}
+          accountData={mockData.accountData1}
+          location={mockData.location}
+          intl={{ formatMessage: jest.fn() }}
+          isFullMode
+          loadingTags={false}
+          metaEntities={[]}
+          getDefaultTags
+          Templates={{}}
+        />
+      </Provider>,
+    );
+    wrapper.update();
+    return wrapper;
+  };
+
+  it('auto-opens Test & Preview for an approved template and returns to the listing on close', () => {
+    const wrapper = renderEdit({ openTestAndPreview: true });
+    const closeButton = wrapper.find('button.mock-test-preview-close');
+    expect(closeButton.exists()).toBe(true);
+
+    closeButton.simulate('click');
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not auto-open without the listing flag', () => {
+    const wrapper = renderEdit({});
+    expect(wrapper.find('button.mock-test-preview-close').exists()).toBe(false);
+  });
+
+  it('does not auto-open for a template that is not approved', () => {
+    const wrapper = renderEdit({ openTestAndPreview: true }, cloneDeep(mockData.editData2));
+    expect(wrapper.find('button.mock-test-preview-close').exists()).toBe(false);
+  });
+
+  it('keeps the editor open when Test & Preview was opened from the footer', () => {
+    const wrapper = renderEdit({});
+    wrapper.find('button.whatsapp-test-preview-btn').simulate('click');
+    wrapper.update();
+
+    wrapper.find('button.mock-test-preview-close').simulate('click');
+    expect(handleClose).not.toHaveBeenCalled();
+  });
+});

package/v2Containers/Zalo/index.js

@@ -30,6 +30,7 @@ import './index.scss';
 import {
   SUCCESS_ALERT,
   REQUEST,
+  SUCCESS,
   EMBEDDED,
   DEFAULT,
   TAG,
@@ -82,6 +83,7 @@ export const Zalo = (props) => {
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
     handleTestAndPreview: propsHandleTestAndPreview,
     handleCloseTestAndPreview: propsHandleCloseTestAndPreview,
+    handleClose,
     onContentValidityChange,
   } = props || {};
   // Since zalo supports now multiple accounts, we need to get the hostname from the selected account or passed props.
@@ -95,6 +97,9 @@ export const Zalo = (props) => {
   const [templateListParams, setTemplateListParams] = useState([]);
   const [templatePreviewUrl, setTemplatePreviewUrl] = useState('');
   const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
+  // Set when opened from listing "Preview and test"; closing then returns to the listing.
+  const isTestAndPreviewFromListingRef = useRef(false);
+  const hasAutoOpenedTestAndPreviewRef = useRef(false);
   const [templateStatus, setZaloTemplateStatus] = useState(
     ZALO_STATUSES.ENABLE,
   );
@@ -510,8 +515,21 @@ export const Zalo = (props) => {
     if (propsHandleCloseTestAndPreview) {
       propsHandleCloseTestAndPreview();
     }
+    if (isTestAndPreviewFromListingRef.current && handleClose) {
+      isTestAndPreviewFromListingRef.current = false;
+      handleClose();
+    }
   };
 
+  // Listing "Preview and test": open Test & Preview once the template is loaded.
+  useEffect(() => {
+    if (!isFullMode || !templateData?.openTestAndPreview || hasAutoOpenedTestAndPreviewRef.current) return;
+    if (zaloTemplateInfoStatus !== SUCCESS || !templateId) return;
+    hasAutoOpenedTestAndPreviewRef.current = true;
+    isTestAndPreviewFromListingRef.current = true;
+    handleTestAndPreview();
+  }, [isFullMode, templateData?.openTestAndPreview, zaloTemplateInfoStatus, templateId]);
+
   return (
     <CapSpin spinning={[zaloTemplateInfoStatus, metaDataStatus].includes(REQUEST)}>
       <CapRow type="flex" className="cap-zalo-creatives">

package/v2Containers/Zalo/tests/testAndPreviewFromListing.test.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
+import history from '../../../utils/history';
+import { initialReducer } from '../../../initialReducer';
+import { Zalo } from '..';
+import { SUCCESS } from '../constants';
+import { metaEntities, location, getDefaultTags, injectedTags, accountData } from './mockData';
+import { render, screen, fireEvent } from '../../../utils/test-utils';
+
+jest.mock('../../../v2Containers/TagList/index.js', () => ({
+  __esModule: true,
+  default: () => <div className="tag-mock">TagList</div>,
+}));
+// Stub exposes only open state + close action.
+jest.mock('../../../v2Components/TestAndPreviewSlidebox', () => ({
+  __esModule: true,
+  default: ({ show, onClose }) => (show ? <button type="button" data-testid="mock-test-preview-close" onClick={onClose} /> : null),
+}));
+
+let store;
+beforeAll(() => {
+  store = configureStore({}, initialReducer, history);
+});
+
+const buildEditData = () => ({
+  zaloTemplateInfoStatus: SUCCESS,
+  zaloTemplateInfoValue: {
+    _id: 'zalo_1',
+    name: 'Zalo Template',
+    versions: {
+      base: {
+        content: {
+          zalo: {
+            templateId: '1',
+            listParams: [
+              { name: 'danh_xung', require: true, type: 'STRING', maxLength: 30, minLength: 0, error: '', value: '' },
+            ],
+            previewUrl: 'https://account.zalo.cloud/preview',
+            status: 'ENABLE',
+          },
+        },
+      },
+    },
+  },
+  zaloTemplateInfoError: null,
+});
+
+const ComponentToRender = injectIntl(Zalo);
+
+describe('Zalo - Preview and test from listing', () => {
+  const handleClose = jest.fn();
+  const handleTestAndPreview = jest.fn();
+
+  const renderZalo = (templateData) => render(
+    <Provider store={store}>
+      <ComponentToRender
+        actions={{ getTemplateInfoById: jest.fn(), resetTemplateInfoData: jest.fn() }}
+        globalActions={{ fetchSchemaForEntity: jest.fn() }}
+        editData={buildEditData()}
+        metaEntities={metaEntities}
+        location={location}
+        getDefaultTags={getDefaultTags}
+        injectedTags={injectedTags}
+        accountData={accountData}
+        templateData={templateData}
+        isFullMode
+        handleClose={handleClose}
+        handleTestAndPreview={handleTestAndPreview}
+      />
+    </Provider>,
+  );
+
+  it('auto-opens Test & Preview and returns to the listing on close', async () => {
+    renderZalo({ _id: 'zalo_1', templateConfigs: { id: '', varMapped: {} }, openTestAndPreview: true });
+    const closeButton = await screen.findByTestId('mock-test-preview-close');
+    expect(handleTestAndPreview).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(closeButton);
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not auto-open without the listing flag', () => {
+    renderZalo({ _id: 'zalo_1', templateConfigs: { id: '', varMapped: {} } });
+    expect(screen.queryByTestId('mock-test-preview-close')).not.toBeInTheDocument();
+    expect(handleTestAndPreview).not.toHaveBeenCalled();
+  });
+
+  it('keeps the editor open when Test & Preview was opened from the footer', async () => {
+    const { container } = renderZalo({ _id: 'zalo_1', templateConfigs: { id: '', varMapped: {} } });
+    fireEvent.click(container.querySelector('.test-and-preview-button-zalo'));
+
+    fireEvent.click(await screen.findByTestId('mock-test-preview-close'));
+    expect(handleClose).not.toHaveBeenCalled();
+  });
+});