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

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;
@@ -704,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) => {

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

@@ -150,4 +150,103 @@ describe('Test activity zalo container', () => {
       ),
     ).toBeInTheDocument();
   });
+
+  // Fully self-contained fixtures for the tests below: the "set template data" test above
+  // mutates the shared `editData`/`templateData` fixtures in place (handleSetValues mutates
+  // listParam objects directly, and that test also reassigns templateData.templateConfigs),
+  // so building independent literals here — rather than reusing or cloning the shared
+  // fixtures at test time (which would just clone the already-mutated state) — keeps these
+  // tests correct regardless of suite execution order.
+  const buildFreshEditData = () => ({
+    zaloTemplateInfoStatus: 'success',
+    zaloTemplateInfoValue: {
+      name: 'Fresh Template',
+      versions: {
+        base: {
+          content: {
+            zalo: {
+              templateId: '1',
+              templateName: 'Fresh Template',
+              listParams: [
+                {
+                  name: 'danh_xung',
+                  require: true,
+                  type: 'STRING',
+                  maxLength: 30,
+                  minLength: 0,
+                  acceptNull: false,
+                  error: '',
+                  value: '',
+                },
+              ],
+              previewUrl: 'https://account.zalo.cloud/preview',
+              status: 'ENABLE',
+            },
+          },
+        },
+      },
+      type: 'ZALO',
+    },
+    zaloTemplateInfoError: null,
+  });
+  const buildFreshTemplateData = () => ({
+    _id: 999001,
+    templateConfigs: { id: '', varMapped: {} },
+  });
+
+  it('reports content emptiness to the parent via onContentValidityChange', async () => {
+    const onContentValidityChange = jest.fn();
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      editData: buildFreshEditData(),
+      metaEntities,
+      location,
+      getDefaultTags,
+      injectedTags,
+      accountData,
+      templateData: buildFreshTemplateData(),
+      isFullMode: true,
+      onContentValidityChange,
+    });
+    const inputBox = await screen.findAllByPlaceholderText(
+      'Add labels or text or combination of both',
+    );
+    // Initial values in the mock data are blank, so the first report should be "empty".
+    expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: true });
+    onContentValidityChange.mockClear();
+
+    fireEvent.change(inputBox[0], { target: { value: 'Hello, welcome' } });
+    expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: false });
+  });
+
+  it('does not re-report validity when it has not changed (dedup guard)', async () => {
+    const onContentValidityChange = jest.fn();
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      editData: buildFreshEditData(),
+      metaEntities,
+      location,
+      getDefaultTags,
+      injectedTags,
+      accountData,
+      templateData: buildFreshTemplateData(),
+      isFullMode: true,
+      onContentValidityChange,
+    });
+    const inputBox = await screen.findAllByPlaceholderText(
+      'Add labels or text or combination of both',
+    );
+    onContentValidityChange.mockClear();
+
+    fireEvent.change(inputBox[0], { target: { value: 'Hello' } });
+    expect(onContentValidityChange).toHaveBeenCalledTimes(1);
+    expect(onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: false });
+    onContentValidityChange.mockClear();
+
+    // Changing to another non-empty value keeps isContentEmpty === false, so no new report.
+    fireEvent.change(inputBox[0], { target: { value: 'Hello again' } });
+    expect(onContentValidityChange).not.toHaveBeenCalled();
+  });
 });