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

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",

package/v2Components/FormBuilder/Functional/channels/mobilepush/buildSubmitPayload.js

@@ -1,10 +0,0 @@
-/**
- * MOBILEPUSH submit payload — identity, exactly like Classic: the container
- * receives the full legacy formData object and builds the API payload itself
- * (getTransformedData). Note that getChannelData has NO MOBILEPUSH branch —
- * Classic short-circuits before reaching it (Classic.js:1402-1405) — so this
- * adapter must never call it.
- */
-const buildSubmitPayload = (legacyFormData) => legacyFormData;
-
-export default buildSubmitPayload;

package/v2Components/FormBuilder/Functional/channels/mobilepush/config.js

@@ -1,82 +0,0 @@
-/**
- * MOBILEPUSH channel config — declarative capabilities + field ids for the MPUSH
- * adapter. MOBILEPUSH is a two-tab channel (Android=tab 0, iOS=tab 1); iOS field
- * ids carry the legacy `2` suffix (message-editor2). The containers mutate the
- * schema at runtime (CTA row splices), so the engine's reconcile path is active.
- */
-import { MOBILE_PUSH } from '../../../../../v2Containers/CreativesContainer/constants';
-import { TEMPLATE_NAME_FIELD } from '../../constants';
-
-// The exact legacy error VALUE written for brace mismatches — containers pattern
-// on it (string ≠ boolean true matters: Classic's cross-tab toast reacts only to
-// boolean true). Mirrors errorMessageForTags.TAG_BRACKET_COUNT_MISMATCH_ERROR.
-export const ERROR_VALUE = {
-  BRACKET: 'tagBracketCountMismatchError',
-};
-
-// Legacy tab semantics: 1-based currentTab, 1=Android, 2=iOS (Classic.js:483-486).
-export const TABS = {
-  ANDROID: 0,
-  IOS: 1,
-  /** iOS field ids get suffix '2'; Android none (Classic.js:967). */
-  suffixFor: (tabIndex) => (tabIndex > 0 ? `${Number(tabIndex) + 1}` : ''),
-};
-
-export const fieldIds = {
-  name: TEMPLATE_NAME_FIELD, // root field
-  editor: 'message-editor', // per-tab, suffixed on iOS
-  title: 'message-title', // per-tab, suffixed on iOS
-  image: 'image', // per-tab (imageSchema only), same id on both panes
-  bracketError: 'bracket-error',
-};
-
-// The 13 fixed CTA/deeplink rules of Classic's validateForm MPUSH block
-// (Classic.js:1037-1135), in source order. kind: 'empty' => `=== ""` fails
-// (absent key passes); kind: 'url' => isValidExternalLink semantics.
-export const CTA_RULES = [
-  { key: 'cta-deeplink-select', kind: 'empty' },
-  { key: 'cta-deeplink2-select', kind: 'empty' },
-  { key: 'cta-deeplink-text', kind: 'url' },
-  { key: 'cta-deeplink2-text', kind: 'url' },
-  { key: 'secondary-cta-0-link', kind: 'empty' },
-  { key: 'secondary-cta-0-label', kind: 'empty' },
-  { key: 'cta-deeplink-secondary-cta-0-text', kind: 'url' },
-  { key: 'cta-deeplink-secondary-cta-0-select', kind: 'empty' },
-  { key: 'secondary-cta-1-label', kind: 'empty' },
-  { key: 'cta-deeplink-secondary-cta-1-text', kind: 'url' },
-  { key: 'cta-deeplink-secondary-cta-1-select', kind: 'empty' },
-  { key: 'cta-deeplink-secondary-cta-1-text2', kind: 'url' },
-  { key: 'cta-deeplink-secondary-cta-1-select2', kind: 'empty' },
-];
-
-export default {
-  channel: MOBILE_PUSH,
-  fieldIds,
-  // Classic passes the live 1-based currentTab as showLiquidErrorInFooter's second
-  // argument for MPUSH (Classic.js:1352, 1487); SMS is the only null channel.
-  footerTabArg: 'currentTab',
-  features: {
-    tabs: true,
-    versions: false,
-    languages: false,
-    unicode: false,
-    liquid: true, // LIQUID_SUPPORTED_CHANNELS member; pipeline runs only outside isFullMode
-    askAira: true, // textarea only (Classic.js:2927)
-    preview: true,
-    imageUpload: true,
-    cta: true,
-    // Bridge checkbox/radio/select commit events to the container-injected handlers
-    // with the performFormDataUpdate signature (true, formData, field). MPUSH-only.
-    bridgeFieldEvents: true,
-    // MPUSH keeps the inline textarea error even though liquid is supported
-    // (Classic.js:2908-2915) — encoded in the MPUSH renderers.
-    inlineErrorWithLiquid: true,
-    // Classic re-validates typing only under startValidation (Classic.js:334-345):
-    // no pre-save errorData, so no tag/footer message before a save attempt.
-    liveValidation: false,
-    // Validity is still maintained in the background (Classic validates + emits on
-    // parent pushes / schema changes / tags changes, Classic.js:516-578, 1361) —
-    // the containers gate their save flows on it (Create/index.js:101).
-    validateOnExternalChange: true,
-  },
-};

package/v2Components/FormBuilder/Functional/channels/mobilepush/getEditorErrorDescriptor.js

@@ -1,74 +0,0 @@
-/**
- * MOBILEPUSH editor-error descriptor — the library-mode footer echo of the ACTIVE
- * tab's editor error (Classic's render-phase footer push, Classic.js:2885-2895).
- * Mirrored rules: full mode returns null (MPUSH errors show inline); the whole echo
- * is gated on checkValidation (Classic computes no errorData pre-save, 334-345);
- * personalization restriction has its own message (2877-2879); otherwise the schema
- * field's errorMessage (already localized by the containers) is echoed as-is.
- */
-
-import { hasPersonalizationTags } from '../../../../../utils/commonUtils';
-import formMessages from '../../../messages';
-import { EDITOR_ERROR_KIND, SECTION_TYPE, CONTAINER_TYPE } from '../../constants';
-import { ERROR_VALUE, TABS } from './config';
-
-/** Find a leaf field by id inside one pane of the tabs container. */
-const findPaneField = (schema, tabIndex, fieldId) => {
-  const container = (schema?.containers || []).find(
-    (candidate) => candidate?.type === CONTAINER_TYPE.TABS
-      && (candidate.isActive === undefined || candidate.isActive),
-  );
-  const pane = container?.panes?.[tabIndex];
-  let found = null;
-  const visitSection = (section) => {
-    if (!section || found) return;
-    if (section.type === SECTION_TYPE.PARENT) {
-      (section.childSections || []).forEach(visitSection);
-    } else if (section.type === SECTION_TYPE.MULTICOLS) {
-      (section.inputFields || []).concat(section.actionFields || []).forEach((row) => {
-        (row?.cols || []).forEach((col) => { if (col?.id === fieldId) found = col; });
-      });
-    } else if (section.type === SECTION_TYPE.COL_LABEL) {
-      (section.inputFields || []).concat(section.actionFields || []).forEach((col) => {
-        if (col?.id === fieldId) found = col;
-      });
-    }
-  };
-  (pane?.sections || []).forEach(visitSection);
-  return found;
-};
-
-/**
- * @param {object} legacyFormData  the legacy dialect ({0: {...}, 1: {...}, ...})
- * @param {object} ctx  { isFullMode, currentTab (1-based), errorData, schema,
- *                        checkValidation, restrictPersonalization }
- * @returns null | { text, kind } | { message: intlDescriptor, kind }
- */
-export default function getEditorErrorDescriptor(legacyFormData = {}, ctx = {}) {
-  if (ctx.isFullMode) return null;
-  // Classic parity: no footer echo before a save attempt (see header).
-  if (!ctx.checkValidation) return null;
-
-  const tabIndex = Math.max(((ctx.currentTab || 1) - 1), 0);
-  const suffix = TABS.suffixFor(tabIndex);
-  const editorId = `message-editor${suffix}`;
-  const editorError = ctx.errorData?.[tabIndex]?.[editorId];
-  if (!editorError) return null;
-
-  const tab = legacyFormData?.[tabIndex] || {};
-  const content = tab[editorId];
-
-  if (ctx.restrictPersonalization && content && hasPersonalizationTags(String(content))) {
-    return {
-      message: formMessages.personalizationTagsErrorMessage,
-      kind: EDITOR_ERROR_KIND.MISSING,
-    };
-  }
-
-  const field = findPaneField(ctx.schema, tabIndex, editorId);
-  if (!field?.errorMessage) return null;
-  return {
-    text: field.errorMessage,
-    kind: editorError === ERROR_VALUE.BRACKET ? EDITOR_ERROR_KIND.BRACE : EDITOR_ERROR_KIND.MISSING,
-  };
-}

package/v2Components/FormBuilder/Functional/channels/mobilepush/index.js

@@ -1,28 +0,0 @@
-/**
- * MOBILEPUSH channel adapter — the isolation unit for MPUSH. Bundles config + the
- * pure validate + the identity payload builder + the platform-specific submit
- * pipeline + the single-platform modal semantics + the channel's renderer
- * registry. The shell looks this up via channels/registry by `schema.channel`;
- * it imports nothing from other channels.
- */
-import { MOBILE_PUSH } from '../../../../../v2Containers/CreativesContainer/constants';
-import config from './config';
-import validate from './validate';
-import buildSubmitPayload from './buildSubmitPayload';
-import runSubmitPipeline from './runSubmitPipeline';
-import modals from './modals';
-import getEditorErrorDescriptor from './getEditorErrorDescriptor';
-import { createMpushRegistry } from '../../renderers/mpushRenderers';
-
-const mpushAdapter = {
-  channel: MOBILE_PUSH,
-  config,
-  validate,
-  buildSubmitPayload,
-  runSubmitPipeline,
-  modals,
-  getEditorErrorDescriptor,
-  createRegistry: createMpushRegistry,
-};
-
-export default mpushAdapter;

package/v2Components/FormBuilder/Functional/channels/mobilepush/modals.js

@@ -1,19 +0,0 @@
-/**
- * Single-platform save confirmation (Classic handleOk, Classic.js:2674-2709).
- * The OK button's id ('android'|'ios') is the dispatch key: confirming saves that
- * platform alone, but only if its validity flag is true — a falsy flag silently
- * closes the modal (Classic parity). Modal CONTENT stays container-owned.
- */
-
-const mpushModals = {
-  handleOk: (id, { platform, submitSingleTab } = {}) => {
-    if (!platform || typeof submitSingleTab !== 'function') return;
-    if (id === 'android' && platform.androidValid) {
-      submitSingleTab('android');
-    } else if (id === 'ios' && platform.iosValid) {
-      submitSingleTab('ios');
-    }
-  },
-};
-
-export default mpushModals;

package/v2Components/FormBuilder/Functional/channels/mobilepush/runSubmitPipeline.js

@@ -1,45 +0,0 @@
-/**
- * MOBILEPUSH submit pipeline (Classic.js:1397-1405, 1473-1522). Full mode submits
- * the raw legacy formData (no liquid, no getChannelData); library mode runs
- * validateMobilePushContent over [androidTab, iosTab]. Classic quirks preserved:
- * the util's nested per-platform error objects go to the footer AS-IS, its initial
- * empty "clear" call still triggers stopValidation + onFormValidityChange(false),
- * its onSuccess contentToSubmit is IGNORED (the full formData is submitted), and
- * singleTab from the single-platform modal skips the other platform (1519).
- */
-
-import { validateMobilePushContent } from '../../../../../utils/commonUtils';
-
-export default function runSubmitPipeline(legacyFormData, ctx = {}, callbacks = {}) {
-  const {
-    isFullMode, singleTab, currentTab, getLiquidTags, formatMessage, messages,
-  } = ctx;
-  const {
-    onSubmit, pushFooter, stopValidation, onFormValidityChange,
-  } = callbacks;
-
-  const runLiquid = !isFullMode && typeof getLiquidTags === 'function';
-  if (!runLiquid) {
-    if (onSubmit) onSubmit(legacyFormData);
-    return;
-  }
-
-  validateMobilePushContent(legacyFormData, {
-    currentTab,
-    onError: ({ standardErrors, liquidErrors }) => {
-      if (pushFooter) pushFooter({ STANDARD_ERROR_MSG: standardErrors, LIQUID_ERROR_MSG: liquidErrors });
-      if (stopValidation) stopValidation();
-      // Block save: tell the parent the form is invalid (Classic passes the last
-      // sync errorData — the shell's callback supplies it).
-      if (onFormValidityChange) onFormValidityChange(false);
-    },
-    onSuccess: () => {
-      if (pushFooter) pushFooter({ STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] });
-      if (onSubmit) onSubmit(legacyFormData);
-    },
-    getLiquidTags,
-    formatMessage,
-    messages,
-    singleTab: singleTab ? `${singleTab}`.toUpperCase() : undefined,
-  });
-}