@capillarytech/creatives-library 9.1.3 → 9.1.4

package/v2Components/CommonTestAndPreview/utils.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { extractTemplateVariables } from '../../utils/templateVarUtils';
-import { SMS_MUSTACHE_TAG_PATTERN } from './constants';
+import { SMS_MUSTACHE_TAG_PATTERN, WHATSAPP_SLOT_KEY_PATTERN } from './constants';
 
 /** Show token path from extract-tags (fullPath preferred, falls back to name). */
 export const getPersonalizationTagColumnLabel = (tagNode) =>
@@ -61,6 +61,64 @@ export const mergeSyntheticMustacheTags = (apiTags = [], rawText = '') => {
   return [...(apiTags ?? []), ...synthetic];
 };
 
+/**
+ * A WhatsApp carousel card's body as the user sees it: the slot-resolved text when Overview
+ * mapping produced one, else the raw body. Mirrors the templateHeader/headerTemplate pair.
+ */
+export const getWhatsappCarouselCardBodyText = (card) => {
+  const resolvedBody = Array.isArray(card?.updatedBodyText) ? card.updatedBodyText.join('') : '';
+  return resolvedBody || (card?.bodyText ?? '');
+};
+
+/** Carousel card bodies joined — they live outside templateMsg, so a tag scan misses them. */
+export const getWhatsappCarouselTagExtractionText = (formDataObj) => (
+  Array.isArray(formDataObj?.carouselData) ? formDataObj.carouselData : [])
+  .map(getWhatsappCarouselCardBodyText)
+  .filter((bodyText) => hasTrimmedText(bodyText))
+  .join(' ');
+
+/** WhatsApp header + body + carousel card bodies, scanned for unmapped `{{N}}` slots. */
+export const getWhatsappTagExtractionText = (formDataObj) => (
+  `${formDataObj?.templateHeader || ''} ${formDataObj?.templateMsg || ''} ${getWhatsappCarouselTagExtractionText(formDataObj)}`.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];
+};
+
+/**
+ * Slot key -> the variable name it holds. WhatsApp keys a slot by token and occurrence index
+ * (`<token>_<index>`); RCS keys it by the variable's own name, per card.
+ */
+const getSlotKeyVarName = (slotKey) => String(slotKey).replace(WHATSAPP_SLOT_KEY_PATTERN, '$1');
+
+/**
+ * A slot map holds what the user mapped on Overview, per variable of the template.
+ * Slots left blank there take the value entered in Test & Preview for the same variable, so
+ * createMessageMeta gets a complete map instead of empty slots. Mapped slots are left untouched.
+ */
+export const fillSlotMapFromCustomValues = (slotMap, customValues = {}) => {
+  if (!slotMap || typeof slotMap !== 'object') return slotMap;
+  const customValueByVarName = {};
+  Object.keys(customValues || {}).forEach((tagPath) => {
+    customValueByVarName[tagPath.split('.').pop()] = customValues?.[tagPath];
+  });
+  if (Object.keys(customValueByVarName).length === 0) return slotMap;
+  const hasValue = (value) => value != null && String(value).trim() !== '';
+  const filledSlotMap = { ...slotMap };
+  Object.keys(filledSlotMap).forEach((slotKey) => {
+    if (hasValue(filledSlotMap[slotKey])) return;
+    const customValue = customValueByVarName?.[getSlotKeyVarName(slotKey)];
+    if (hasValue(customValue)) filledSlotMap[slotKey] = String(customValue);
+  });
+  return filledSlotMap;
+};
+
 /** 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

@@ -3176,13 +3176,11 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       templateMsgText += `\n${formatMessage(messages.templateMessageUnsubscribeText)}`;
     }
 
-    // Get templateEditor from editData or construct from templateMessage
-    const templateEditorValue = isEditFlow && editData?.templateEditor
-      ? editData.templateEditor
-      : templateMsgText;
+    // Raw body, slots intact — pairs with varMapped below; templateMsg carries the resolved text.
+    const templateEditorValue = tempMsgArray.length > 0 ? tempMsgArray.join("") : templateMsgText;
 
-    // Get varMapped from editData or empty object
-    const varMappedValue = editData?.varMapped || {};
+    // Live slot map (`{{1}}_1` -> mapped tag/value); `editData` has no varMapped, so it was always {}.
+    const varMappedValue = { ...varMap };
 
     return {
       // Preview structure (for WhatsAppPreviewContent component)
@@ -3220,7 +3218,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       mediaType: templateMediaType,
       isPreviewUrl: false,
       headerVarMapped: headerVarMappedData,
-      headerTemplate: isEditFlow ? updatedHeaderData.join("") : templateHeader,
+      // Raw header, slots intact — pairs with headerVarMapped; templateHeader carries the resolved text.
+      headerTemplate: tempHeaderData.length > 0 ? tempHeaderData.join("") : templateHeader,
       whatsappVideoSrcAndPreview,
       whatsappDocSource,
       whatsappDocParams,
@@ -3239,6 +3238,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     docPreview,
     isEditFlow,
     updatedSmsEditor,
+    tempMsgArray,
+    tempHeaderData,
     templateMessage,
     unsubscribeRequired,
     isAuthenticationTemplate,
@@ -3268,6 +3269,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 +3289,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: 57295127 bytes
+sha256: 3ca4752bd0410b9d7f0e57070855228ef817cc04531f23794bf27e2647b4f7a2

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();
+  });
+});