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

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

@@ -0,0 +1,119 @@
+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 { MobilePushNew } from '..';
+import { render, screen, fireEvent } from '../../../utils/test-utils';
+
+jest.mock('../../TagList/index.js', () => ({
+  __esModule: true,
+  default: (props) => (
+    <div className="tag-mock" {...props}>
+      TagList
+    </div>
+  ),
+}));
+
+let store;
+beforeAll(() => {
+  store = configureStore({}, initialReducer, history);
+});
+
+const ComponentToRender = injectIntl(MobilePushNew);
+const renderComponent = (props) => render(
+  <Provider store={store}>
+    <ComponentToRender {...props} />
+  </Provider>,
+);
+
+// Only Android is marked supported so a single, unambiguous title/message
+// input pair is rendered (avoids ambiguity from a second, iOS, tab/pane).
+const accountData = {
+  configs: {
+    android: '1',
+    ios: '0',
+  },
+};
+
+const globalActions = {
+  fetchSchemaForEntity: jest.fn(),
+};
+
+describe('MobilePushNew', () => {
+  it('renders without crashing when onContentValidityChange is passed', async () => {
+    const onContentValidityChange = jest.fn();
+    renderComponent({
+      accountData,
+      templateData: {},
+      location: {},
+      injectedTags: {},
+      getDefaultTags: jest.fn(),
+      globalActions,
+      onContentValidityChange,
+    });
+
+    const titleInput = await screen.findByPlaceholderText('Enter title');
+    expect(titleInput).toBeInTheDocument();
+  });
+
+  it('reports content emptiness to the parent via onContentValidityChange', async () => {
+    const onContentValidityChange = jest.fn();
+    renderComponent({
+      accountData,
+      templateData: {},
+      location: {},
+      injectedTags: {},
+      getDefaultTags: jest.fn(),
+      globalActions,
+      onContentValidityChange,
+    });
+
+    const titleInput = await screen.findByPlaceholderText('Enter title');
+    const messageInput = await screen.findByPlaceholderText('Enter message');
+
+    // Both required Android fields start blank, so the first report should be "empty".
+    expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: true });
+    onContentValidityChange.mockClear();
+
+    fireEvent.change(titleInput, { target: { value: 'Hello title' } });
+    fireEvent.change(messageInput, { target: { value: 'Hello message' } });
+
+    expect(onContentValidityChange).toHaveBeenLastCalledWith({ isContentEmpty: false });
+  });
+
+  it('does not re-report validity when it has not changed (dedup guard)', async () => {
+    const onContentValidityChange = jest.fn();
+    renderComponent({
+      accountData,
+      templateData: {},
+      location: {},
+      injectedTags: {},
+      getDefaultTags: jest.fn(),
+      globalActions,
+      onContentValidityChange,
+    });
+
+    const titleInput = await screen.findByPlaceholderText('Enter title');
+    onContentValidityChange.mockClear();
+
+    // Still blank -> still empty -> should not report again.
+    fireEvent.change(titleInput, { target: { value: '' } });
+    expect(onContentValidityChange).not.toHaveBeenCalled();
+  });
+
+  it('does not call onContentValidityChange when the prop is not provided', async () => {
+    expect(() => renderComponent({
+      accountData,
+      templateData: {},
+      location: {},
+      injectedTags: {},
+      getDefaultTags: jest.fn(),
+      globalActions,
+    })).not.toThrow();
+
+    await screen.findByPlaceholderText('Enter title');
+  });
+});

package/v2Containers/MobilePushNew/tests/utils.test.js

@@ -3,6 +3,8 @@ import {
   validateExternalLink,
   validateDeepLink,
   isDeepLink,
+  isPlatformFieldsMissing,
+  computeIsContentEmpty,
 } from "../utils";
 import { isUrl } from "../../Line/Container/Wrapper/utils";
 
@@ -396,6 +398,86 @@ describe("utils.js", () => {
     });
   });
 
+  describe("isPlatformFieldsMissing", () => {
+    it("returns false when the platform is not supported, regardless of content", () => {
+      expect(isPlatformFieldsMissing(false, { title: "", message: "" })).toBe(false);
+      expect(isPlatformFieldsMissing(undefined, undefined)).toBe(false);
+    });
+
+    it("returns true when supported and title is missing", () => {
+      expect(isPlatformFieldsMissing(true, { title: "", message: "hello" })).toBe(true);
+      expect(isPlatformFieldsMissing(true, { title: "   ", message: "hello" })).toBe(true);
+    });
+
+    it("returns true when supported and message is missing", () => {
+      expect(isPlatformFieldsMissing(true, { title: "hello", message: "" })).toBe(true);
+    });
+
+    it("returns true when content is undefined and platform is supported", () => {
+      expect(isPlatformFieldsMissing(true, undefined)).toBe(true);
+    });
+
+    it("returns false when supported and both title and message are present", () => {
+      expect(isPlatformFieldsMissing(true, { title: "hello", message: "world" })).toBe(false);
+    });
+  });
+
+  describe("computeIsContentEmpty", () => {
+    it("returns false when neither platform is supported", () => {
+      expect(computeIsContentEmpty({
+        isAndroidSupported: false,
+        isIosSupported: false,
+        androidContent: {},
+        iosContent: {},
+      })).toBe(false);
+    });
+
+    it("returns true when the only supported platform (android) is missing fields", () => {
+      expect(computeIsContentEmpty({
+        isAndroidSupported: true,
+        isIosSupported: false,
+        androidContent: { title: "", message: "" },
+        iosContent: { title: "", message: "" },
+      })).toBe(true);
+    });
+
+    it("returns false when the only supported platform (android) has valid fields, even if iOS content is empty", () => {
+      expect(computeIsContentEmpty({
+        isAndroidSupported: true,
+        isIosSupported: false,
+        androidContent: { title: "t", message: "m" },
+        iosContent: { title: "", message: "" },
+      })).toBe(false);
+    });
+
+    it("returns true when the only supported platform (ios) is missing fields", () => {
+      expect(computeIsContentEmpty({
+        isAndroidSupported: false,
+        isIosSupported: true,
+        androidContent: { title: "", message: "" },
+        iosContent: { title: "", message: "" },
+      })).toBe(true);
+    });
+
+    it("returns true when both platforms are supported and one is missing fields", () => {
+      expect(computeIsContentEmpty({
+        isAndroidSupported: true,
+        isIosSupported: true,
+        androidContent: { title: "t", message: "m" },
+        iosContent: { title: "", message: "" },
+      })).toBe(true);
+    });
+
+    it("returns false when both platforms are supported and both have valid fields", () => {
+      expect(computeIsContentEmpty({
+        isAndroidSupported: true,
+        isIosSupported: true,
+        androidContent: { title: "t", message: "m" },
+        iosContent: { title: "t", message: "m" },
+      })).toBe(false);
+    });
+  });
+
   describe("Error handling", () => {
     it("should handle isUrl throwing an error", () => {
       isUrl.mockImplementation(() => {

package/v2Containers/MobilePushNew/utils.js

@@ -81,4 +81,37 @@ export const validateDeepLink = (linkValue, formatMessage, messages) => {
     return null; // Empty deep link is valid (optional field)
   }
   return isDeepLink(linkValue.trim()) ? null : formatMessage(messages.invalidUrl);
-}; 
+};
+
+/**
+ * Determine whether the required title/message fields are missing for a
+ * supported platform (Android/iOS). Mirrors the Save-button gating logic so
+ * platforms that are not supported are never treated as "missing".
+ * @param {boolean} isSupported - Whether the platform is enabled/supported
+ * @param {Object} content - The platform content object ({ title, message })
+ * @returns {boolean} - True if the platform is supported and a required field is empty
+ */
+export const isPlatformFieldsMissing = (isSupported, content) => (
+  !!isSupported && (!content?.title?.trim() || !content?.message?.trim())
+);
+
+/**
+ * Compute whether the Mobile Push content is empty/invalid for reporting to
+ * a parent component (e.g. via onContentValidityChange). Content is
+ * considered empty when any supported platform is missing required fields.
+ * @param {Object} params
+ * @param {boolean} params.isAndroidSupported
+ * @param {boolean} params.isIosSupported
+ * @param {Object} params.androidContent
+ * @param {Object} params.iosContent
+ * @returns {boolean}
+ */
+export const computeIsContentEmpty = ({
+  isAndroidSupported,
+  isIosSupported,
+  androidContent,
+  iosContent,
+}) => (
+  isPlatformFieldsMissing(isAndroidSupported, androidContent)
+  || isPlatformFieldsMissing(isIosSupported, iosContent)
+);

package/v2Containers/MobilepushWrapper/index.js

@@ -72,7 +72,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
   }
 
   render() {
-    const {mobilePushCreateMode, step, getFormData, getLiquidTags, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData, eventContextTags = [], waitEventContextTags = {},showTestAndPreviewSlidebox, handleTestAndPreview, handleCloseTestAndPreview, restrictPersonalization, isAnonymousType, onPersonalizationTokensChange} = this.props;
+    const {mobilePushCreateMode, step, getFormData, getLiquidTags, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, onContentValidityChange, templateData, eventContextTags = [], waitEventContextTags = {},showTestAndPreviewSlidebox, handleTestAndPreview, handleCloseTestAndPreview, restrictPersonalization, isAnonymousType, onPersonalizationTokensChange} = this.props;
     const {templateName} = this.state;
     const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
     return (
@@ -118,6 +118,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
               onValidationFail={onValidationFail}
               onPreviewContentClicked={onPreviewContentClicked}
               onTestContentClicked={onTestContentClicked}
+              onContentValidityChange={onContentValidityChange}
               templateData={templateData}
               hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
               eventContextTags={eventContextTags}
@@ -155,6 +156,7 @@ MobilepushWrapper.propTypes = {
   showTemplateName: PropTypes.func,
   type: PropTypes.string,
   onValidationFail: PropTypes.func,
+  onContentValidityChange: PropTypes.func,
   eventContextTags: PropTypes.array,
   waitEventContextTags: PropTypes.object,
   showLiquidErrorInFooter: PropTypes.func,

package/v2Containers/Rcs/index.js

@@ -211,6 +211,7 @@ export const Rcs = (props) => {
     handleTestAndPreview: propsHandleTestAndPreview,
     handleCloseTestAndPreview: propsHandleCloseTestAndPreview,
     handleClose,
+    onContentValidityChange,
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -399,6 +400,39 @@ export const Rcs = (props) => {
   const isMediaTypeVideo = templateMediaType === RCS_MEDIA_TYPES.VIDEO;
   const isCarouselType = templateType === contentType.carousel;
 
+  /**
+   * Mirrors the "is card content missing" checks already used by isDisableDone()/isEditDisableDone()
+   * (title/description emptiness per media type; "any carousel card missing title or description" for
+   * carousel — same convention as isCarouselLibraryIncomplete()'s hasEmptyField check), but limited to
+   * just the message-content fields (not template name / buttons / CTA validation) so it reports pure
+   * content emptiness to the generic parent handler, the same way Sms's isMessageEmpty does not fold in
+   * template-name emptiness.
+   */
+  const isRcsCardContentEmpty = () => {
+    if (isCarouselType) {
+      return (carouselData || []).some((card) =>
+        ['title', 'description'].some((field) => !(card?.[field] || '').trim())
+      );
+    }
+    if (isMediaTypeText) {
+      return templateDesc.trim() === '';
+    }
+    return templateTitle.trim() === '' || templateDesc.trim() === '';
+  };
+
+  // Tracks the last validity value reported to the parent so this effect does not dispatch on every
+  // render. Intentionally undefined (not a boolean) so the first render always reports the real
+  // validity rather than assuming the form starts invalid — mirrors Sms/Edit's dedup guard.
+  const lastReportedRcsContentEmptyRef = useRef(undefined);
+  useEffect(() => {
+    if (typeof onContentValidityChange !== 'function') return;
+    const isContentEmpty = isRcsCardContentEmpty();
+    if (lastReportedRcsContentEmptyRef.current !== isContentEmpty) {
+      lastReportedRcsContentEmptyRef.current = isContentEmpty;
+      onContentValidityChange({ isContentEmpty });
+    }
+  }, [isCarouselType, isMediaTypeText, templateTitle, templateDesc, carouselData]);
+
   const clearCarouselCardMedia = (cardIndex, { clearImage = true, clearVideo = true, clearThumb = true } = {}) => {
     setCarouselData((prev = []) => {
       const updated = cloneDeep(prev);

package/v2Containers/Rcs/index.scss

@@ -287,9 +287,24 @@
     width: 100%;
   }
 
+  // These CapRows are flex containers, so without a definite width their
+  // children size to max-content and a long URL in a card widens the whole
+  // chain instead of truncating.
+  .rcs-carousel-section > .rcs-carousel-tab {
+    width: 100%;
+    min-width: 0;
+  }
+
   .rcs-carousel-tab {
     margin-top: 0.75rem;
 
+    // CapTab's outer wrapper has a hashed css-module class, so it can only be
+    // reached structurally; this row has just the one child.
+    > * {
+      width: 100%;
+      min-width: 0;
+    }
+
     // Tab list (.ant-tabs-nav-wrap) defaults to flex:auto and stretches to fill the row,
     // pushing tabBarExtraContent (the "+" add-card button) to the far right edge. Size it
     // to its own content instead so "+" sits right next to the last tab (Figma reference).

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

@@ -158,6 +158,7 @@ const renderHelper = (args) => {
         {...(args.omitGetDefaultTags ? {} : { getDefaultTags: true })}
         isDltEnabled={args.isDltEnabled || false}
         smsRegister={'DLT'}
+        onContentValidityChange={args.onContentValidityChange}
       />
     </Provider>,
   );
@@ -1923,6 +1924,72 @@ describe('Character Counting Functions', () => {
   });
 });
 
+describe('Rcs — onContentValidityChange reporting', () => {
+  // Full-mode create with a fresh (non-hydrating) rcsData: templateDesc starts out empty,
+  // same as the pre-existing "template title change" test's initial-state assumption.
+  it('reports isContentEmpty: true on mount when the (default text_message) description is empty', () => {
+    const onContentValidityChange = jest.fn();
+    renderHelper({ onContentValidityChange });
+
+    expect(onContentValidityChange).toHaveBeenCalledWith(
+      expect.objectContaining({ isContentEmpty: true }),
+    );
+  });
+
+  it('reports isContentEmpty: false once the description has content, then true again once cleared', () => {
+    const onContentValidityChange = jest.fn();
+    renderHelper({ onContentValidityChange });
+    onContentValidityChange.mockClear();
+
+    const descTextArea = renderedComponent.find('CapInputTextArea#rcs_template_message_textarea').at(0);
+    act(() => {
+      descTextArea.props().onChange({ target: { value: 'Hello there' } });
+    });
+    renderedComponent.update();
+
+    expect(onContentValidityChange).toHaveBeenCalledWith(
+      expect.objectContaining({ isContentEmpty: false }),
+    );
+    onContentValidityChange.mockClear();
+
+    const descTextAreaAfter = renderedComponent.find('CapInputTextArea#rcs_template_message_textarea').at(0);
+    act(() => {
+      descTextAreaAfter.props().onChange({ target: { value: '   ' } });
+    });
+    renderedComponent.update();
+
+    expect(onContentValidityChange).toHaveBeenCalledWith(
+      expect.objectContaining({ isContentEmpty: true }),
+    );
+  });
+
+  it('does not throw and does not report when onContentValidityChange is not provided', () => {
+    expect(() => {
+      renderHelper({});
+      const descTextArea = renderedComponent.find('CapInputTextArea#rcs_template_message_textarea').at(0);
+      act(() => {
+        descTextArea.props().onChange({ target: { value: 'abc' } });
+      });
+      renderedComponent.update();
+    }).not.toThrow();
+  });
+
+  it('does not dispatch again on a re-render that does not change validity (dedup guard)', () => {
+    const onContentValidityChange = jest.fn();
+    renderHelper({ onContentValidityChange });
+    onContentValidityChange.mockClear();
+
+    const descTextArea = renderedComponent.find('CapInputTextArea#rcs_template_message_textarea').at(0);
+    act(() => {
+      // Still empty (still whitespace-only) — validity does not actually change.
+      descTextArea.props().onChange({ target: { value: '  ' } });
+    });
+    renderedComponent.update();
+
+    expect(onContentValidityChange).not.toHaveBeenCalled();
+  });
+});
+
 describe('CapActionButton (mocked within RCS tests)', () => {
   it('should render the mocked CapActionButton placeholder', () => {
     const wrapper = mountWithIntl(

package/v2Containers/Sms/Create/index.js

@@ -185,7 +185,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentDidUpdate() {
-    if (!this.props.embeddedSmsFallback || typeof this.props.onEmbeddedSmsFooterValidity !== 'function') {
+    // Reporting itself is opt-in via the callback prop — not tied to embeddedSmsFallback,
+    // which is a separate, unrelated flag (tag-popover styling for the SMS-fallback surface).
+    if (typeof this.props.onEmbeddedSmsFooterValidity !== 'function') {
       return;
     }
     const validity = getSmsEmbeddedFooterValidity(this.state.formData, this.state.tabCount);

package/v2Containers/Sms/Edit/index.js

@@ -34,6 +34,7 @@ import v2EditSmsReducer from './reducer';
 import { v2SmsEditSagas } from './sagas';
 import * as globalActions from '../../Cap/actions';
 import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
+import { getSmsEmbeddedFooterValidity } from '../smsFormDataHelpers';
 
 export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -54,6 +55,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       isTestAndPreviewMode: false,
       pendingGetFormData: false,
     };
+    // Tracks the last validity value reported to the parent so componentDidUpdate 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.
+    this._lastReportedSmsFooterTemplateNameEmpty = undefined;
+    this._lastReportedSmsFooterMessageEmpty = undefined;
     this.saveFormData = this.saveFormData.bind(this);
     this.onFormDataChange = this.onFormDataChange.bind(this);
     this.onTemplateNameChange = this.onTemplateNameChange.bind(this);
@@ -189,6 +195,24 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
   }
 
+  componentDidUpdate() {
+    // Reports live form validity so the host (CreativesContainer) can disable Done/Preview
+    // and Test as soon as the message body is cleared — mirrors Sms/Create's own reporting.
+    if (typeof this.props.onEmbeddedSmsFooterValidity !== 'function') {
+      return;
+    }
+    const validity = getSmsEmbeddedFooterValidity(this.state.formData, this.state.tabCount);
+    const isTemplateNameEmpty = !!validity.isTemplateNameEmpty;
+    const isMessageEmpty = !!validity.isMessageEmpty;
+    if (
+      this._lastReportedSmsFooterTemplateNameEmpty === isTemplateNameEmpty &&
+      this._lastReportedSmsFooterMessageEmpty === isMessageEmpty
+    ) return;
+    this._lastReportedSmsFooterTemplateNameEmpty = isTemplateNameEmpty;
+    this._lastReportedSmsFooterMessageEmpty = isMessageEmpty;
+    this.props.onEmbeddedSmsFooterValidity(validity);
+  }
+
   componentWillUnmount() {
     if (this.pendingGetFormDataTimeout) {
       clearTimeout(this.pendingGetFormDataTimeout);
@@ -1138,6 +1162,7 @@ Edit.propTypes = {
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
   isTestAndPreviewMode: PropTypes.bool,
+  onEmbeddedSmsFooterValidity: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Sms/Edit/tests/index.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Edit } from '../index';
+
+// Shallow-render the plain class (bypassing the withCreatives/Redux/saga HOC) so this test
+// only exercises the componentDidUpdate → onEmbeddedSmsFooterValidity wiring in isolation.
+
+const baseProps = () => ({
+  actions: {
+    getTemplateDetails: jest.fn(),
+    setTemplateDetails: jest.fn(),
+    clearEditResponse: jest.fn(),
+    resetEditTemplate: jest.fn(),
+    editTemplate: jest.fn(),
+  },
+  globalActions: {
+    fetchSchemaForEntity: jest.fn(),
+    setInjectedTags: jest.fn(),
+    addMessageToQueue: jest.fn(),
+  },
+  Edit: {},
+  params: { id: 'tpl-1' },
+  location: { query: { type: 'embedded', module: 'library' } },
+  metaEntities: {},
+  intl: { formatMessage: (m) => m.defaultMessage || m.id },
+  isFullMode: false,
+  getFormSubscriptionData: jest.fn(),
+});
+
+describe('Sms/Edit — onEmbeddedSmsFooterValidity reporting', () => {
+  it('reports isMessageEmpty: true on mount when the message body is empty', () => {
+    const onEmbeddedSmsFooterValidity = jest.fn();
+    const wrapper = shallow(<Edit {...baseProps()} onEmbeddedSmsFooterValidity={onEmbeddedSmsFooterValidity} />);
+    wrapper.setState({ formData: { 0: { 'sms-editor': '' }, base: { 'sms-editor': '' } }, tabCount: 1 });
+
+    expect(onEmbeddedSmsFooterValidity).toHaveBeenCalledWith(
+      expect.objectContaining({ isMessageEmpty: true }),
+    );
+  });
+
+  it('reports isMessageEmpty: false once the message body has content', () => {
+    const onEmbeddedSmsFooterValidity = jest.fn();
+    const wrapper = shallow(<Edit {...baseProps()} onEmbeddedSmsFooterValidity={onEmbeddedSmsFooterValidity} />);
+    wrapper.setState({ formData: { 0: { 'sms-editor': '' }, base: { 'sms-editor': '' } }, tabCount: 1 });
+    onEmbeddedSmsFooterValidity.mockClear();
+
+    wrapper.setState({ formData: { 0: { 'sms-editor': 'Hello there' }, base: { 'sms-editor': 'Hello there' } }, tabCount: 1 });
+
+    expect(onEmbeddedSmsFooterValidity).toHaveBeenCalledWith(
+      expect.objectContaining({ isMessageEmpty: false }),
+    );
+  });
+
+  it('re-reports empty when an existing (edit-loaded) message is cleared out', () => {
+    const onEmbeddedSmsFooterValidity = jest.fn();
+    const wrapper = shallow(<Edit {...baseProps()} onEmbeddedSmsFooterValidity={onEmbeddedSmsFooterValidity} />);
+    wrapper.setState({ formData: { 0: { 'sms-editor': 'Existing content' }, base: { 'sms-editor': 'Existing content' } }, tabCount: 1 });
+    onEmbeddedSmsFooterValidity.mockClear();
+
+    wrapper.setState({ formData: { 0: { 'sms-editor': '' }, base: { 'sms-editor': '' } }, tabCount: 1 });
+
+    expect(onEmbeddedSmsFooterValidity).toHaveBeenCalledWith(
+      expect.objectContaining({ isMessageEmpty: true }),
+    );
+  });
+
+  it('does not throw and does not report when onEmbeddedSmsFooterValidity is not provided', () => {
+    const wrapper = shallow(<Edit {...baseProps()} />);
+    expect(() => {
+      wrapper.setState({ formData: { 0: { 'sms-editor': '' } }, tabCount: 1 });
+    }).not.toThrow();
+  });
+
+  it('does not dispatch again on a re-render that does not change validity (dedup guard)', () => {
+    const onEmbeddedSmsFooterValidity = jest.fn();
+    const wrapper = shallow(<Edit {...baseProps()} onEmbeddedSmsFooterValidity={onEmbeddedSmsFooterValidity} />);
+    wrapper.setState({ formData: { 0: { 'sms-editor': '' } }, tabCount: 1 });
+    onEmbeddedSmsFooterValidity.mockClear();
+
+    // Unrelated state change — validity tuple (isTemplateNameEmpty/isMessageEmpty) is unchanged.
+    wrapper.setState({ currentTab: 1 });
+
+    expect(onEmbeddedSmsFooterValidity).not.toHaveBeenCalled();
+  });
+});

package/v2Containers/Viber/index.js

@@ -1,4 +1,6 @@
-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';
@@ -139,6 +141,7 @@ export const Viber = (props) => {
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
     handleTestAndPreview: propsHandleTestAndPreview,
     handleCloseTestAndPreview: propsHandleCloseTestAndPreview,
+    onContentValidityChange,
   } = props || {};
 
   const { formatMessage } = intl;
@@ -257,6 +260,26 @@ export const Viber = (props) => {
     }
   }, [viber.templateDetails || templateData]);
 
+  // Reports live message-content validity to a parent (e.g. CreativesContainer's
+  // slidebox) so it can disable its own Done/Preview-and-test buttons whenever the
+  // Viber message body is empty/whitespace-only. Mirrors the Sms Create/Edit
+  // componentDidUpdate pattern, using a ref (instead of an instance field) as the
+  // dedup guard so the callback only fires when the reported value actually changes -
+  // calling it unconditionally on every render risks an infinite update loop when the
+  // parent's setState triggers a re-render of this component.
+  const lastReportedContentEmptyRef = useRef(undefined);
+  useEffect(() => {
+    if (typeof onContentValidityChange !== 'function') {
+      return;
+    }
+    const isContentEmpty = (messageContent || '').trim() === '';
+    if (lastReportedContentEmptyRef.current === isContentEmpty) {
+      return;
+    }
+    lastReportedContentEmptyRef.current = isContentEmpty;
+    onContentValidityChange({ isContentEmpty });
+  }, [messageContent, onContentValidityChange]);
+
   // Text area Code start here
 
   // Tags Code start from here