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

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

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 = {