@capillarytech/creatives-library 9.0.56-betaa.0 → 9.0.57-alpha.0

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();
+  });
 });

package/v2Containers/mockdata.js

@@ -1111,6 +1111,31 @@ export default {
     },
     accountName: "WhatsappAccount",
   },
+  // CCS sends an explicit `cards: null` (not omitted) for a non-carousel WhatsApp
+  // template — regression fixture for a crash reading `.map` off null.
+  whatsappGetTemplateDataNullCards: {
+    channel: "WHATSAPP",
+    storeType: "REGISTERED_STORE",
+    accountId: 12721,
+    messagePartsCount: 1,
+    messageBody: "Hey test, this is a plain WhatsApp template with no carousel.",
+    templateConfigs: {
+      name: "creatives_whatsapp6",
+      language: "en",
+      varMapped: {
+        "{{1}}_1": "test",
+      },
+      template: "Hey {{1}}, this is a plain WhatsApp template with no carousel.",
+      id: "creatives_whatsapp6",
+      category: "MARKETING",
+      buttonType: "NONE",
+      buttons: null,
+      mediaType: "TEXT",
+      whatsappMedia: null,
+      cards: null,
+    },
+    accountName: "WhatsappAccount",
+  },
   whatsappGetCreativeData1: {
     value: {
       name: "creatives_whatsapp6",