@capillarytech/creatives-library 9.0.56-alpha.6 → 9.0.56-alpha.8

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

@@ -469,4 +469,107 @@ describe('Test Viber container', () => {
 
     expect(await screen.findByText("URL can't be empty")).toBeInTheDocument();
   });
+
+  describe('onContentValidityChange reporting (Done/Preview button gating in the slidebox)', () => {
+    it('reports isContentEmpty: true on mount for an empty create flow, then false once a message is typed', async () => {
+      const onContentValidityChange = jest.fn();
+      renderComponent({
+        actions: mockActions,
+        globalActions: mockGlobalActions,
+        templateData: { mode: 'create' },
+        viber: {
+          uploadedAssetData: {},
+          createTemplateInProgress: false,
+        },
+        location: {
+          pathname: '/sms/edit',
+          query: { type: false, module: 'default' },
+          search: '',
+        },
+        isFullMode: true,
+        handleClose: jest.fn(),
+        onContentValidityChange,
+      });
+
+      await waitFor(() => {
+        expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: true });
+      });
+
+      const msgBox = screen.getAllByPlaceholderText(/Enter message/i)[0];
+      fireEvent.change(msgBox, { target: { value: 'hello there' } });
+
+      await waitFor(() => {
+        expect(onContentValidityChange).toHaveBeenLastCalledWith({ isContentEmpty: false });
+      });
+    });
+
+    it('does not re-report the same validity value (dedup guard)', async () => {
+      const onContentValidityChange = jest.fn();
+      renderComponent({
+        actions: mockActions,
+        globalActions: mockGlobalActions,
+        templateData: { mode: 'create' },
+        viber: {
+          uploadedAssetData: {},
+          createTemplateInProgress: false,
+        },
+        location: {
+          pathname: '/sms/edit',
+          query: { type: false, module: 'default' },
+          search: '',
+        },
+        isFullMode: true,
+        handleClose: jest.fn(),
+        onContentValidityChange,
+      });
+
+      await waitFor(() => {
+        expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: true });
+      });
+      const callsAfterMount = onContentValidityChange.mock.calls.length;
+
+      // Whitespace-only change: still empty, should not trigger another call.
+      const msgBox = screen.getAllByPlaceholderText(/Enter message/i)[0];
+      fireEvent.change(msgBox, { target: { value: '   ' } });
+
+      expect(onContentValidityChange).toHaveBeenCalledTimes(callsAfterMount);
+    });
+
+    it('reports isContentEmpty: false for an edit flow pre-filled with message content, then true once cleared', async () => {
+      const onContentValidityChange = jest.fn();
+      renderComponent({
+        actions: mockActions,
+        globalActions: mockGlobalActions,
+        templateData: { mode: 'create' },
+        viber: {
+          uploadedAssetData: {},
+          createTemplateInProgress: false,
+          templateDetails: templateDetailsText,
+        },
+        location: {
+          pathname: '/sms/edit',
+          query: { type: false, module: 'default' },
+          search: '',
+        },
+        isFullMode: true,
+        params: { id: 'test' },
+        handleClose: jest.fn(),
+        metaEntities,
+        getDefaultTags,
+        injectedTags,
+        onContentValidityChange,
+      });
+
+      await waitFor(() => {
+        expect(onContentValidityChange).toHaveBeenLastCalledWith({ isContentEmpty: false });
+      });
+
+      const msgBox = screen.getAllByPlaceholderText(/Enter message/i)[0];
+      fireEvent.change(msgBox, { target: { value: '' } });
+
+      await waitFor(() => {
+        expect(onContentValidityChange).toHaveBeenLastCalledWith({ isContentEmpty: true });
+      });
+    });
+  });
 });

package/v2Containers/WebPush/Create/index.js

@@ -164,6 +164,7 @@ const WebPushCreate = ({
   templateActions: templateActionsProps,
   Templates,
   restrictPersonalization = false,
+  onContentValidityChange,
 }) => {
   const { formatMessage } = intl;
   const aiContentBotDisabled = isAiContentBotDisabled();
@@ -194,6 +195,10 @@ const WebPushCreate = ({
   const messageCountRef = useRef(null);
   const saveInitiatedRef = useRef(false);
   const messageTextAreaRef = useRef(null);
+  // Tracks the last isContentEmpty value reported to the parent (CreativesContainer) so the
+  // effect below does not dispatch on every render. Intentionally undefined (not a boolean)
+  // so the first render always reports the real validity rather than assuming a starting value.
+  const lastReportedContentEmptyRef = useRef(undefined);
 
   // Custom hooks
   const { updateCharacterCount } = useCharacterCount(formatMessage, messages);
@@ -566,6 +571,24 @@ const WebPushCreate = ({
     });
   }, [isFullMode, templateName]);
 
+  // Reports live content validity to the parent (CreativesContainer) so it can disable the
+  // Done/Preview-and-test buttons as soon as the notification title or message is cleared.
+  // Both title and message are required fields for WebPush (see isSaveDisabled below), so the
+  // content is considered empty if either is blank/whitespace-only. Mirrors the Sms Create/Edit
+  // componentDidUpdate pattern — the ref-based dedup guard prevents an infinite render loop
+  // (parent setState -> re-render -> effect re-fires -> parent setState -> ...).
+  useEffect(() => {
+    if (typeof onContentValidityChange !== 'function') {
+      return;
+    }
+    const isContentEmpty = !notificationTitle.trim() || !message.trim();
+    if (lastReportedContentEmptyRef.current === isContentEmpty) {
+      return;
+    }
+    lastReportedContentEmptyRef.current = isContentEmpty;
+    onContentValidityChange({ isContentEmpty });
+  }, [notificationTitle, message, onContentValidityChange]);
+
   // Pure validator that returns boolean without setting error state
   const validateFormSilent = () => {
     const templateNameInvalid = isFullMode && validateTemplateName(templateName);
@@ -1175,6 +1198,7 @@ WebPushCreate.propTypes = {
   waitEventContextTags: PropTypes.object,
   templateActions: PropTypes.object,
   restrictPersonalization: PropTypes.bool,
+  onContentValidityChange: PropTypes.func,
 };
 
 WebPushCreate.defaultProps = {

package/v2Containers/WebPush/Create/tests/contentValidity.test.js

@@ -0,0 +1,294 @@
+/**
+ * Tests for the onContentValidityChange reporting wired into WebPushCreate.
+ *
+ * WebPushCreate is a functional component (not a class like Sms/Create and Sms/Edit), so the
+ * dedup pattern is implemented as a useEffect + useRef instead of componentDidUpdate + an
+ * instance field, but the contract with the parent (CreativesContainer) is identical:
+ * onContentValidityChange({ isContentEmpty }) is called only when isContentEmpty actually
+ * changes since the last report, with title AND message both required for WebPush.
+ *
+ * Note: all relative mock paths are resolved from THIS test file's location
+ * (app/v2Containers/WebPush/Create/tests/), not from the component — mirrors
+ * testAndPreviewIntegration.test.js in this same directory.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+
+// ── Infrastructure / HOC mocks ──────────────────────────────────────────────
+jest.mock('../../../../hoc/withCreatives', () => ({
+  __esModule: true,
+  default: ({ WrappedComponent }) => WrappedComponent,
+}));
+
+jest.mock('@capillarytech/vulcan-react-sdk/utils', () => ({
+  injectReducer: () => (Component) => Component,
+  injectSaga: () => (Component) => Component,
+}));
+jest.mock('@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes', () => ({
+  DAEMON: 'DAEMON',
+}));
+
+// ── Redux slices (paths relative to this test file) ─────────────────────────
+jest.mock('../../../Templates/selectors', () => ({
+  makeSelectTemplates: () => () => {},
+}));
+jest.mock('../../../Templates/actions', () => ({}));
+jest.mock('../../selectors', () => ({
+  makeSelectWebPush: () => () => ({}),
+  makeSelectCreateError: () => () => null,
+  makeSelectCreateTemplateInProgress: () => () => false,
+  makeSelectEditTemplateInProgress: () => () => false,
+  makeSelectEditError: () => () => null,
+}));
+jest.mock('../../actions', () => ({}));
+jest.mock('../../reducer', () => () => ({}));
+jest.mock('../../sagas', () => ({}));
+jest.mock('../../../Templates/sagas', () => ({ v2TemplateSaga: {} }));
+jest.mock('../../../Cap/selectors', () => ({
+  makeSelectMetaEntities: () => () => [],
+  setInjectedTags: () => () => [],
+}));
+jest.mock('../../../CreativesContainer/constants', () => ({
+  WEBPUSH: 'WEBPUSH',
+}));
+jest.mock('../../../CreativesContainer/messages', () => ({
+  testAndPreview: { id: 'testAndPreview', defaultMessage: 'Test & Preview' },
+}));
+jest.mock('../../../../utils/common', () => ({
+  isAiContentBotDisabled: () => false,
+}));
+
+// ── Form section components ──────────────────────────────────────────────────
+// TemplateNameSection stays a stub — it is only relevant in isFullMode, which these tests
+// keep off (mirrors baseProps below) to focus purely on title/message emptiness.
+jest.mock('../components/TemplateNameSection', () => ({
+  __esModule: true,
+  default: () => <div data-testid="template-name-section" />,
+}));
+// NotificationTitleSection and MessageSection are given lightweight controlled-input stand-ins
+// so tests can drive real onChange handlers (handleNotificationTitleChange / handleMessageChange)
+// inside WebPushCreate, exercising the actual state that feeds the isContentEmpty computation.
+jest.mock('../components/NotificationTitleSection', () => ({
+  __esModule: true,
+  default: ({ value, onChange }) => (
+    <input data-testid="notification-title-input" value={value} onChange={onChange} />
+  ),
+}));
+jest.mock('../components/MessageSection', () => ({
+  __esModule: true,
+  default: ({ value, onChange }) => (
+    <textarea data-testid="message-input" value={value} onChange={onChange} />
+  ),
+}));
+jest.mock('../components/MediaSection', () => ({
+  __esModule: true,
+  default: () => <div data-testid="media-section" />,
+}));
+jest.mock('../components/BrandIconSection', () => ({
+  __esModule: true,
+  default: () => <div data-testid="brand-icon-section" />,
+}));
+jest.mock('../components/ButtonsLinksSection', () => ({
+  __esModule: true,
+  default: () => <div data-testid="buttons-links-section" />,
+}));
+jest.mock('../components/FormActions', () => ({
+  __esModule: true,
+  default: () => <div data-testid="form-actions" />,
+}));
+jest.mock('../preview/WebPushPreview', () => ({
+  __esModule: true,
+  default: () => <div data-testid="webpush-preview" />,
+}));
+jest.mock('../../../TagList', () => ({
+  __esModule: true,
+  default: () => <div data-testid="tag-list" />,
+}));
+
+// ── Hooks ────────────────────────────────────────────────────────────────────
+jest.mock('../hooks/useCharacterCount', () => ({
+  useCharacterCount: () => ({ updateCharacterCount: jest.fn() }),
+}));
+jest.mock('../hooks/useButtonManagement', () => ({
+  useButtonManagement: () => ({ buttons: [], setButtons: jest.fn(), isAddingButton: false }),
+}));
+jest.mock('../hooks/useImageUpload', () => ({
+  useImageUpload: () => ({
+    imageSrc: '',
+    imageUrl: '',
+    isValidating: false,
+    isUploading: false,
+    setImageSrc: jest.fn(),
+    setImageUrl: jest.fn(),
+    uploadMethod: 'UPLOAD_IMAGE',
+  }),
+}));
+jest.mock('../hooks/useTagManagement', () => ({
+  useTagManagement: () => ({ tags: [], extractTags: jest.fn(), handleOnTagsContextChange: jest.fn(), validationConfig: {} }),
+}));
+
+jest.mock('../../../../v2Components/TestAndPreviewSlidebox', () => ({
+  __esModule: true,
+  default: () => <div data-testid="test-and-preview-slidebox" />,
+}));
+
+// ── CapUI library ─────────────────────────────────────────────────────────────
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => ({
+  __esModule: true,
+  default: ({ children, className }) => <div className={className}>{children}</div>,
+}));
+jest.mock('@capillarytech/cap-ui-library/CapColumn', () => ({
+  __esModule: true,
+  default: ({ children, className }) => <div className={className}>{children}</div>,
+}));
+jest.mock('@capillarytech/cap-ui-library/CapButton', () => ({
+  __esModule: true,
+  default: ({ children, onClick, className, type }) => (
+    <button className={className} onClick={onClick} data-type={type}>
+      {children}
+    </button>
+  ),
+}));
+
+// ── Import component AFTER mocks ─────────────────────────────────────────────
+// eslint-disable-next-line import/first
+import WebPushCreateDefault from '../index';
+
+const baseProps = () => ({
+  isFullMode: false,
+  handleClose: jest.fn(),
+  webPushActions: {
+    createTemplate: jest.fn(),
+    editTemplate: jest.fn(),
+    uploadImage: jest.fn(),
+    clearCreateError: jest.fn(),
+    clearEditError: jest.fn(),
+    clearCreateResponse: jest.fn(),
+    clearEditResponse: jest.fn(),
+    setSelectedAccount: jest.fn(),
+    clearState: jest.fn(),
+  },
+  createTemplateInProgress: false,
+  createTemplateError: null,
+  editTemplateInProgress: false,
+  editTemplateError: null,
+  accountData: null,
+  webPush: {},
+  onCreateComplete: jest.fn(),
+  getFormData: jest.fn(),
+  isGetFormData: false,
+  templateData: null,
+  creativesMode: 'create',
+  params: {},
+  globalActions: { getMetaEntities: jest.fn() },
+  location: { pathname: '/webpush', query: {}, search: '', state: {} },
+  metaEntities: [],
+  injectedTags: [],
+  getDefaultTags: jest.fn(),
+  supportedTags: [],
+  forwardedTags: [],
+  selectedOfferDetails: [],
+  eventContextTags: [],
+  waitEventContextTags: {},
+  templateActions: {},
+  Templates: { templates: [] },
+  restrictPersonalization: false,
+});
+
+const TestWrapper = ({ children }) => (
+  <IntlProvider locale="en" messages={{ testAndPreview: 'Test & Preview' }}>
+    {children}
+  </IntlProvider>
+);
+
+describe('WebPushCreate — onContentValidityChange reporting', () => {
+  it('reports isContentEmpty: true on mount when title and message are both empty', () => {
+    const onContentValidityChange = jest.fn();
+    render(
+      <TestWrapper>
+        <WebPushCreateDefault {...baseProps()} onContentValidityChange={onContentValidityChange} />
+      </TestWrapper>,
+    );
+
+    expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: true });
+  });
+
+  it('reports isContentEmpty: false once both title and message have content', () => {
+    const onContentValidityChange = jest.fn();
+    render(
+      <TestWrapper>
+        <WebPushCreateDefault {...baseProps()} onContentValidityChange={onContentValidityChange} />
+      </TestWrapper>,
+    );
+    onContentValidityChange.mockClear();
+
+    fireEvent.change(screen.getByTestId('notification-title-input'), { target: { value: 'Hello' } });
+    fireEvent.change(screen.getByTestId('message-input'), { target: { value: 'World' } });
+
+    expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: false });
+  });
+
+  it('does not re-report (still empty) if only the title is filled in while message stays empty', () => {
+    const onContentValidityChange = jest.fn();
+    render(
+      <TestWrapper>
+        <WebPushCreateDefault {...baseProps()} onContentValidityChange={onContentValidityChange} />
+      </TestWrapper>,
+    );
+    // Mount already reported isContentEmpty: true (both fields blank).
+    onContentValidityChange.mockClear();
+
+    fireEvent.change(screen.getByTestId('notification-title-input'), { target: { value: 'Hello' } });
+
+    // isContentEmpty is still true (message is required too and remains blank), so the dedup
+    // guard must suppress a duplicate report.
+    expect(onContentValidityChange).not.toHaveBeenCalled();
+  });
+
+  it('re-reports isContentEmpty: true when a previously-filled message is cleared out', () => {
+    const onContentValidityChange = jest.fn();
+    render(
+      <TestWrapper>
+        <WebPushCreateDefault {...baseProps()} onContentValidityChange={onContentValidityChange} />
+      </TestWrapper>,
+    );
+    fireEvent.change(screen.getByTestId('notification-title-input'), { target: { value: 'Hello' } });
+    fireEvent.change(screen.getByTestId('message-input'), { target: { value: 'World' } });
+    onContentValidityChange.mockClear();
+
+    fireEvent.change(screen.getByTestId('message-input'), { target: { value: '' } });
+
+    expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: true });
+  });
+
+  it('does not throw and does not report when onContentValidityChange is not provided', () => {
+    expect(() => {
+      render(
+        <TestWrapper>
+          <WebPushCreateDefault {...baseProps()} />
+        </TestWrapper>,
+      );
+      fireEvent.change(screen.getByTestId('notification-title-input'), { target: { value: 'Hello' } });
+    }).not.toThrow();
+  });
+
+  it('does not dispatch again on a re-render that does not change isContentEmpty (dedup guard)', () => {
+    const onContentValidityChange = jest.fn();
+    render(
+      <TestWrapper>
+        <WebPushCreateDefault {...baseProps()} onContentValidityChange={onContentValidityChange} />
+      </TestWrapper>,
+    );
+    fireEvent.change(screen.getByTestId('notification-title-input'), { target: { value: 'Hello' } });
+    fireEvent.change(screen.getByTestId('message-input'), { target: { value: 'World' } });
+    onContentValidityChange.mockClear();
+
+    // Further edits that keep both fields non-empty must not re-trigger the callback.
+    fireEvent.change(screen.getByTestId('message-input'), { target: { value: 'World!' } });
+
+    expect(onContentValidityChange).not.toHaveBeenCalled();
+  });
+});

package/v2Containers/Whatsapp/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-boolean-value */
 /* eslint-disable camelcase */
 /* eslint-disable no-undef */
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
@@ -188,6 +188,7 @@ export const Whatsapp = (props) => {
     handleTestAndPreview: propsHandleTestAndPreview,
     handleCloseTestAndPreview: propsHandleCloseTestAndPreview,
     isTestAndPreviewMode: propsIsTestAndPreviewMode,
+    onContentValidityChange,
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -504,9 +505,7 @@ export const Whatsapp = (props) => {
     if (templateHeaderArray?.length !== 0) {
       let clonedVarMap = {};
       if (!isEmpty(varMap)) {
-        // CCS's varMapped can use plain sequential occurrence indices ("0","1",...)
-        // rather than this UI's own `${token}_${index}` slot keys — reconcile so
-        // values land on the right segment instead of silently missing.
+        // Reconcile CCS sequential varMapped indices to the UI’s `${token}_${index}` slot keys so values map to the correct segments.
         clonedVarMap = reconcileVarMapToSlotFormat(varMap, templateHeaderArray, regex);
       } else {
         templateHeaderArray?.forEach((headerValue, i) => {
@@ -706,6 +705,23 @@ export const Whatsapp = (props) => {
     }
   }, [carouselValidateTag, tags])
 
+  // Reports live "is content empty" validity to the parent slidebox so it can
+  // disable the Done/Preview-and-test buttons whenever the template message
+  // (the one field that is always required, regardless of template type) is
+  // cleared out. Mirrors the Sms Create/Edit componentDidUpdate pattern; the
+  // ref-based dedup avoids redundant parent setState calls / render loops.
+  const lastReportedTemplateMessageEmptyRef = useRef(undefined);
+  useEffect(() => {
+    if (typeof onContentValidityChange !== 'function') {
+      return;
+    }
+    const isContentEmpty = !templateMessage?.trim();
+    if (lastReportedTemplateMessageEmptyRef.current !== isContentEmpty) {
+      lastReportedTemplateMessageEmptyRef.current = isContentEmpty;
+      onContentValidityChange({ isContentEmpty });
+    }
+  }, [templateMessage, onContentValidityChange]);
+
   const handleOnTagsContextChange = (data) => {
     const { type } = location.query || {};
     const isEmbedded = type === EMBEDDED;

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

@@ -1538,3 +1538,118 @@ describe('WhatsApp edit Done button whitespace validation', () => {
     expect(getDoneButton().props().disabled).toBe(true);
   });
 });
+
+describe('Whatsapp onContentValidityChange reporting', () => {
+  let renderedComponent;
+
+  const createWhatsappTemplate = jest.fn();
+  const getFormData = jest.fn();
+  const clearCreateResponse = jest.fn();
+  const getTemplateDetails = jest.fn();
+  const resetEditTemplate = jest.fn();
+  const fetchSchemaForEntity = jest.fn();
+  const handleClose = jest.fn();
+  const onCreateComplete = jest.fn();
+  const formatMessage = jest.fn();
+  const getMetaTags = jest.fn();
+  const resetMetaTags = jest.fn();
+
+  const mountCreateFlow = (onContentValidityChange) => {
+    renderedComponent = mountWithIntl(
+      <Provider store={store}>
+        <Whatsapp
+          actions={{
+            createWhatsappTemplate,
+            clearCreateResponse,
+            getTemplateDetails,
+            resetEditTemplate,
+            getMetaTags,
+            resetMetaTags,
+          }}
+          globalActions={{ fetchSchemaForEntity }}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          getFormData={getFormData}
+          params={{}}
+          editData={{}}
+          templateData={{}}
+          accountData={mockData.accountData1}
+          location={mockData.location}
+          intl={{ formatMessage }}
+          isFullMode={true}
+          loadingTags={false}
+          metaEntities={[]}
+          getDefaultTags={true}
+          onContentValidityChange={onContentValidityChange}
+          Templates={{
+            senderDetails: {
+              status: 'SUCCESS',
+              domainProperties: [
+                {
+                  domainProperties: {
+                    connectionProperties: {
+                      sourceAccountIdentifier: '2000222347',
+                      baseUrl: 'https://api.gupshup.io/whatsapp/v1',
+                    },
+                  },
+                },
+              ],
+            },
+          }}
+        />
+      </Provider>,
+    );
+  };
+
+  const changeTemplateMessage = (val) => {
+    renderedComponent
+      .find('textarea#whatsapp-create-template-message-input')
+      .at(0)
+      .simulate('change', { target: { value: val } });
+    renderedComponent.update();
+  };
+
+  it('reports isContentEmpty: true on mount when the message body is empty', () => {
+    const onContentValidityChange = jest.fn();
+    mountCreateFlow(onContentValidityChange);
+
+    expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: true });
+  });
+
+  it('reports isContentEmpty: false once the message body has content', () => {
+    const onContentValidityChange = jest.fn();
+    mountCreateFlow(onContentValidityChange);
+    onContentValidityChange.mockClear();
+
+    changeTemplateMessage('Hi there');
+
+    expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: false });
+  });
+
+  it('re-reports empty when the message body is cleared out', () => {
+    const onContentValidityChange = jest.fn();
+    mountCreateFlow(onContentValidityChange);
+    changeTemplateMessage('Hi there');
+    onContentValidityChange.mockClear();
+
+    changeTemplateMessage('');
+
+    expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: true });
+  });
+
+  it('does not throw and does not report when onContentValidityChange is not provided', () => {
+    expect(() => mountCreateFlow(undefined)).not.toThrow();
+  });
+
+  it('does not report again on a re-render that does not change validity (dedup guard)', () => {
+    const onContentValidityChange = jest.fn();
+    mountCreateFlow(onContentValidityChange);
+    changeTemplateMessage('Hi there');
+    onContentValidityChange.mockClear();
+
+    // Same non-empty value re-set — validity boolean is unchanged.
+    changeTemplateMessage('Hi there again');
+
+    expect(onContentValidityChange).not.toHaveBeenCalled();
+  });
+});

package/v2Containers/Zalo/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 /* eslint-disable react/jsx-indent */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { FormattedMessage } from 'react-intl';
@@ -82,6 +82,7 @@ export const Zalo = (props) => {
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
     handleTestAndPreview: propsHandleTestAndPreview,
     handleCloseTestAndPreview: propsHandleCloseTestAndPreview,
+    onContentValidityChange,
   } = props || {};
   // Since zalo supports now multiple accounts, we need to get the hostname from the selected account or passed props.
   const hostName = selectedZaloAccount?.hostName || zaloHostName;
@@ -368,6 +369,32 @@ export const Zalo = (props) => {
     });
     return disableCheck;
   };
+
+  // Content is considered empty when every variable field's value is blank
+  // (i.e. the Zalo message body carries no text and no injected tags).
+  const isZaloContentEmpty = (listParams) => {
+    if (!Array.isArray(listParams) || listParams.length === 0) {
+      return true;
+    }
+    return listParams.every((listParam) => !(listParam?.value || '').trim());
+  };
+
+  // Tracks the last validity value reported to the parent so this effect does not
+  // dispatch on every render. Intentionally undefined (not true) so the first render
+  // always reports the real validity rather than assuming the form starts invalid.
+  const lastReportedZaloContentEmptyRef = useRef(undefined);
+  useEffect(() => {
+    if (typeof onContentValidityChange !== 'function') {
+      return;
+    }
+    const isContentEmpty = isZaloContentEmpty(templateListParams);
+    if (lastReportedZaloContentEmptyRef.current === isContentEmpty) {
+      return;
+    }
+    lastReportedZaloContentEmptyRef.current = isContentEmpty;
+    onContentValidityChange({ isContentEmpty });
+  }, [templateListParams, onContentValidityChange]);
+
   const createPayload = () => {
     const varMap = {};
     templateListParams?.forEach((listParam) => {