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

package/v2Containers/MobilePush/Edit/index.js

@@ -28,7 +28,7 @@ import withCreatives from '../../../hoc/withCreatives';
 import { gtmPush } from '../../../utils/gtmTrackers';
 
 import getEventsMap from '../eventsMap';
-import {getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields, getContent} from '../commonMethods';
+import {getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields, getContent, getMobilePushEmbeddedContentValidity} from '../commonMethods';
 import { GA } from '@capillarytech/cap-ui-utils';
 import { EDIT, TRACK_EDIT_MPUSH } from '../../App/constants';
 import { MOBILE_PUSH } from '../../CreativesContainer/constants';
@@ -85,6 +85,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.hasFetchedInitialTagsRef = false;
     // Guard: avoid duplicate fetch when multiple TagList instances trigger same context
     this.lastFetchedTagContextRef = null;
+    // Tracks the last content-emptiness 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._lastReportedMobilePushContentEmpty = undefined;
   }
   componentWillMount() {
     this.props.actions.getWeCrmAccounts("mobilepush");
@@ -126,6 +130,18 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       parent.postMessage(JSON.stringify(response), '*');
     }
   }
+  componentDidUpdate() {
+    // Reports live form validity so the host (CreativesContainer) can disable Done/Preview
+    // and Test as soon as the message content is cleared — mirrors Sms/Edit's own reporting.
+    if (typeof this.props.onContentValidityChange !== 'function') {
+      return;
+    }
+    const validity = getMobilePushEmbeddedContentValidity(this.state.formData, this.state.tabCount);
+    const isContentEmpty = !!validity.isContentEmpty;
+    if (this._lastReportedMobilePushContentEmpty === isContentEmpty) return;
+    this._lastReportedMobilePushContentEmpty = isContentEmpty;
+    this.props.onContentValidityChange({ isContentEmpty });
+  }
   componentWillReceiveProps(nextProps) {
     if (nextProps.params?.id !== this.props.params?.id) {
       this.hasFetchedInitialTagsRef = false;
@@ -2337,6 +2353,7 @@ Edit.propTypes = {
   onValidationFail: PropTypes.func,
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
+  onContentValidityChange: PropTypes.func,
   creativesMode: PropTypes.string,
   eventContextTags: PropTypes.array,
   waitEventContextTags: PropTypes.object,

package/v2Containers/MobilePush/Edit/test/contentValidity.test.js

@@ -0,0 +1,116 @@
+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 → onContentValidityChange wiring in isolation.
+// Mirrors app/v2Containers/Sms/Edit/tests/index.test.js.
+
+const baseProps = () => ({
+  actions: {
+    getWeCrmAccounts: jest.fn(),
+    getTemplateDetails: jest.fn(),
+    setTemplateDetails: jest.fn(),
+  },
+  globalActions: {
+    fetchSchemaForEntity: jest.fn(),
+  },
+  Templates: { selectedWeChatAccount: { id: 'acc-1' } },
+  Edit: {},
+  Create: {},
+  params: {},
+  location: { query: { type: 'library', module: 'default' } },
+  router: { push: jest.fn() },
+  metaEntities: {},
+  templateData: {},
+  intl: { formatMessage: (m) => (m && (m.defaultMessage || m.id)) || '' },
+  isFullMode: false,
+});
+
+describe('MobilePush/Edit — onContentValidityChange reporting', () => {
+  it('reports isContentEmpty: true on mount when both Android title and message are empty', () => {
+    const onContentValidityChange = jest.fn();
+    const wrapper = shallow(<Edit {...baseProps()} onContentValidityChange={onContentValidityChange} />);
+    wrapper.setState({
+      formData: { 0: { 'message-title': '', 'message-editor': '' } },
+      tabCount: 1,
+    });
+
+    expect(onContentValidityChange).toHaveBeenCalledWith(
+      expect.objectContaining({ isContentEmpty: true }),
+    );
+  });
+
+  it('reports isContentEmpty: false once the Android message has content', () => {
+    const onContentValidityChange = jest.fn();
+    const wrapper = shallow(<Edit {...baseProps()} onContentValidityChange={onContentValidityChange} />);
+    wrapper.setState({
+      formData: { 0: { 'message-title': '', 'message-editor': '' } },
+      tabCount: 1,
+    });
+    onContentValidityChange.mockClear();
+
+    wrapper.setState({
+      formData: { 0: { 'message-title': 'Hello', 'message-editor': 'World' } },
+      tabCount: 1,
+    });
+
+    expect(onContentValidityChange).toHaveBeenCalledWith(
+      expect.objectContaining({ isContentEmpty: false }),
+    );
+  });
+
+  it('re-reports empty when an existing (edit-loaded) message is cleared out', () => {
+    const onContentValidityChange = jest.fn();
+    const wrapper = shallow(<Edit {...baseProps()} onContentValidityChange={onContentValidityChange} />);
+    wrapper.setState({
+      formData: { 0: { 'message-title': 'Existing', 'message-editor': 'content' } },
+      tabCount: 1,
+    });
+    onContentValidityChange.mockClear();
+
+    wrapper.setState({
+      formData: { 0: { 'message-title': '', 'message-editor': '' } },
+      tabCount: 1,
+    });
+
+    expect(onContentValidityChange).toHaveBeenCalledWith(
+      expect.objectContaining({ isContentEmpty: true }),
+    );
+  });
+
+  it('treats content as empty when the iOS tab (tabCount 2) is cleared even if Android has content', () => {
+    const onContentValidityChange = jest.fn();
+    const wrapper = shallow(<Edit {...baseProps()} onContentValidityChange={onContentValidityChange} />);
+    wrapper.setState({
+      formData: {
+        0: { 'message-title': 'Android title', 'message-editor': 'Android body' },
+        1: { 'message-title2': '', 'message-editor2': '' },
+      },
+      tabCount: 2,
+    });
+
+    expect(onContentValidityChange).toHaveBeenCalledWith(
+      expect.objectContaining({ isContentEmpty: true }),
+    );
+  });
+
+  it('does not throw and does not report when onContentValidityChange is not provided', () => {
+    const wrapper = shallow(<Edit {...baseProps()} />);
+    expect(() => {
+      wrapper.setState({ formData: { 0: { 'message-title': '', 'message-editor': '' } }, tabCount: 1 });
+    }).not.toThrow();
+  });
+
+  it('does not dispatch again on a re-render that does not change validity (dedup guard)', () => {
+    const onContentValidityChange = jest.fn();
+    const wrapper = shallow(<Edit {...baseProps()} onContentValidityChange={onContentValidityChange} />);
+    wrapper.setState({ formData: { 0: { 'message-title': '', 'message-editor': '' } }, tabCount: 1 });
+    onContentValidityChange.mockClear();
+
+    // Unrelated state change — content emptiness is unchanged.
+    wrapper.setState({ currentTab: 1 });
+
+    expect(onContentValidityChange).not.toHaveBeenCalled();
+  });
+});

package/v2Containers/MobilePush/commonMethods.js

@@ -2,6 +2,7 @@ import {get, filter, cloneDeep} from 'lodash';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import messages from './Create/messages';
+import { extractContent } from '../../utils/commonUtils';
 function getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions, tab}) {
   const currentTab = tab || this.state.currentTab;
   const newInputFields = cloneDeep(inputFields);
@@ -282,6 +283,53 @@ function getContent(obj) {
   const iosMessage = ios.message || '';
   return `${androidTitle} ${androidMessage} ${iosTitle} ${iosMessage}`;
 }
+
+/**
+ * Extracts the plain-text content of a single Mobile Push tab (Android or iOS),
+ * mirroring the shape-detection logic in `validateMobilePushContent`
+ * (app/utils/commonUtils.js) so "empty" is defined consistently in both places.
+ * @param {number} tabIndex 0 = Android, 1 = iOS
+ * @param {object} tabData formData[tabIndex]
+ * @returns {string}
+ */
+function getMobilePushTabContent(tabIndex, tabData) {
+  if (!tabData || typeof tabData !== 'object') {
+    return '';
+  }
+  const titleKey = tabIndex === 1 ? 'message-title2' : 'message-title';
+  const messageKey = tabIndex === 1 ? 'message-editor2' : 'message-editor';
+  const isOldUiShape = titleKey in tabData || messageKey in tabData;
+  if (isOldUiShape) {
+    return [tabData[titleKey], tabData[messageKey]].filter(Boolean).join(' ');
+  }
+  return extractContent(tabData);
+}
+
+/**
+ * Live "is content empty" check for the legacy Mobile Push Edit/Create forms — the
+ * Mobile Push analogue of Sms's `getSmsEmbeddedFooterValidity` (see
+ * app/v2Containers/Sms/smsFormDataHelpers.js). Checks every active tab (Android, and
+ * iOS when tabCount > 1); if any active tab's title+message are both empty, the
+ * overall content is considered empty so Done/Preview-and-test can be disabled.
+ * @param {object} formData FormBuilder state (same shape as this.state.formData)
+ * @param {number} [tabCount] Total number of active tabs (1 = Android only, 2 = Android + iOS)
+ * @returns {{ isContentEmpty: boolean }}
+ */
+function getMobilePushEmbeddedContentValidity(formData, tabCount) {
+  const count = tabCount != null && tabCount > 1 ? tabCount : 1;
+  let isContentEmpty = false;
+  for (let i = 0; i < count; i++) {
+    const content = getMobilePushTabContent(i, formData?.[i]);
+    const trimmed = content != null && content !== '' ? String(content).trim() : '';
+    if (!trimmed) {
+      isContentEmpty = true;
+      break;
+    }
+  }
+  return { isContentEmpty };
+}
+
 export {
-  getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields, getContent
+  getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields, getContent,
+  getMobilePushEmbeddedContentValidity
 };

package/v2Containers/MobilePushNew/index.js

@@ -86,7 +86,7 @@ import useUpload from "./hooks/useUpload";
 import { validateTags } from "../../utils/tagValidations";
 import { PlatformContentFields } from "./components";
 import { CREATE, EDIT, TRACK_CREATE_MPUSH } from "../App/constants";
-import { validateExternalLink, validateDeepLink } from "./utils";
+import { validateExternalLink, validateDeepLink, isPlatformFieldsMissing } from "./utils";
 import messages from "./messages";
 import { EXTERNAL_URL, MOBILE_PUSH } from "../CreativesContainer/constants";
 import createMobilePushPayloadWithIntl from "../../utils/createMobilePushPayload";
@@ -477,7 +477,7 @@ const processPlatformContent = (contentType, expandableDetails, deepLink, proces
   };
 };
 
-const MobilePushNew = ({
+export const MobilePushNew = ({
   isFullMode,
   intl,
   onEnterTemplateName,
@@ -509,6 +509,7 @@ const MobilePushNew = ({
   // new flag from parent - when true personalization via tags should be disabled
   restrictPersonalization = false,
   onPersonalizationTokensChange,
+  onContentValidityChange,
 }) => {
   const { formatMessage } = intl;
 
@@ -1758,8 +1759,30 @@ const MobilePushNew = ({
   ]);
 
   // Validation logic for template creation/update
-  const isAndroidFieldsMissing = isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim());
-  const isIosFieldsMissing = isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim());
+  const isAndroidFieldsMissing = isPlatformFieldsMissing(isAndroidSupported, androidContent);
+  const isIosFieldsMissing = isPlatformFieldsMissing(isIosSupported, iosContent);
+
+  // Ref to dedupe reporting of content emptiness to the parent, so we only
+  // call onContentValidityChange when the computed value actually changes.
+  const lastReportedIsContentEmptyRef = useRef(undefined);
+
+  // Notify parent whenever content emptiness (based on required fields for
+  // supported platforms) changes, mirroring the Save-button gating logic.
+  useEffect(() => {
+    if (typeof onContentValidityChange !== 'function') return;
+    const isContentEmpty = isAndroidFieldsMissing || isIosFieldsMissing;
+    if (lastReportedIsContentEmptyRef.current === isContentEmpty) return;
+    lastReportedIsContentEmptyRef.current = isContentEmpty;
+    onContentValidityChange({ isContentEmpty });
+  }, [
+    androidContent,
+    iosContent,
+    isAndroidSupported,
+    isIosSupported,
+    isAndroidFieldsMissing,
+    isIosFieldsMissing,
+    onContentValidityChange,
+  ]);
 
   // Add changeSourceRef for debounced sync
   const changeSourceRef = useRef(null);
@@ -3148,6 +3171,7 @@ MobilePushNew.propTypes = {
   getTemplateDetailsInProgress: PropTypes.bool,
   onCreateComplete: PropTypes.func,
   onPersonalizationTokensChange: PropTypes.func,
+  onContentValidityChange: PropTypes.func,
 };
 
 MobilePushNew.defaultProps = {
@@ -3179,6 +3203,7 @@ MobilePushNew.defaultProps = {
   getTemplateDetailsInProgress: false,
   onCreateComplete: () => {},
   onPersonalizationTokensChange: undefined,
+  onContentValidityChange: undefined,
 };
 
 const mapStateToProps = createStructuredSelector({

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).