@capillarytech/creatives-library 9.0.57-alpha.0 → 9.0.57-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.57-alpha.0",
+  "version": "9.0.57-alpha.1",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/FormBuilder/Functional/FormBuilderShell.js

@@ -439,7 +439,12 @@ const FormBuilderShell = (props) => {
     // MPUSH opts out of live validation via features.liveValidation:false, SMS keeps it.
     const validateLive = liquidEnabled && !isFullMode
       && adapter.config?.features?.liveValidation !== false;
-    if (validationActive || validateLive) {
+    // MPUSH: Classic still re-validates EVERY change via the container round-trip
+    // (onChange -> container setState -> CWRP deep-unequal formData push -> validateForm,
+    // Classic.js:516-537) — the container's isFormValid must track typing or the
+    // library-mode Done gate (Create/index.js:117) stays stuck. Display remains
+    // gated on checkValidation, so this emission is invisible pre-save.
+    if (validationActive || validateLive || validateOnExternalChange) {
       emitValidity(runValidate(legacy), legacy);
     }
   };

package/v2Components/FormBuilder/Functional/tests/mpush.libraryValidity.parity.test.js

@@ -0,0 +1,127 @@
+/**
+ * Library/embedded-mode validity parity — the campaigns-host Done/Preview gate.
+ *
+ * The container's isFormValid must track typing: Classic re-validates every change
+ * via the container round-trip (onChange -> container setState -> CWRP deep-unequal
+ * formData push -> validateForm -> onFormValidityChange, Classic.js:516-537), and the
+ * library-mode Done click early-returns on !state.isFormValid (Create/index.js:117).
+ * The shell mirrors this with a background validity emission on every field change
+ * under features.validateOnExternalChange (display stays gated on checkValidation).
+ *
+ * Also pins onContentValidityChange ({isContentEmpty}) — the footer's live
+ * Done/Preview-and-Test disable signal (CreativesContainer handleContentValidityChange).
+ */
+import React from 'react';
+import '@testing-library/jest-dom';
+import _ from 'lodash';
+import { Router } from 'react-router-dom';
+import { render, act, fireEvent } from '../../../../utils/test-utils';
+import history from '../../../../utils/history';
+import { response as mpushSchemaResponse } from '../../../../v2Containers/MobilePush/initialSchema';
+import { Create } from '../../../../v2Containers/MobilePush/Create';
+
+jest.mock('redux-auth-wrapper/history4/redirect', () => ({
+  connectedRouterRedirect: jest.fn(() => (Component) => Component),
+}));
+jest.mock('../../../../services/api', () => ({
+  ...jest.requireActual('../../../../services/api'),
+  getUnsubscribeUrl: () => Promise.resolve({ response: { response: '' } }),
+}));
+
+const fullDefinition = () => _.cloneDeep(mpushSchemaResponse.metaEntities[0].definition);
+
+const intl = {
+  formatMessage: (d) => (d && (d.defaultMessage || d.id)) || '',
+  locale: 'en',
+};
+
+const selectedAccount = {
+  id: 'acc-1',
+  name: 'Acc',
+  sourceTypeName: 'SOME_SDK',
+  sourceAccountIdentifier: 'lic-1',
+  configs: { android: '1', ios: '1', deeplink: '[]' },
+};
+
+const buildProps = () => ({
+  intl,
+  params: { mode: 'text' },
+  route: { name: 'create' },
+  location: { pathname: '/mobilepush/create/text', query: { module: 'default', type: 'embedded' } },
+  router: { push: jest.fn() },
+  isFullMode: false,
+  isGetFormData: false,
+  isLoadingMetaEntities: false,
+  metaEntities: {},
+  Create: { createTemplateInProgress: false },
+  Edit: {},
+  Templates: { selectedWeChatAccount: selectedAccount },
+  actions: new Proxy({}, { get: (t, n) => { if (!t[n]) t[n] = jest.fn(); return t[n]; } }), // eslint-disable-line no-param-reassign
+  globalActions: {
+    fetchSchemaForEntity: jest.fn(),
+    addMessageToQueue: jest.fn(),
+    setInjectedTags: jest.fn(),
+  },
+  getFormLibraryData: jest.fn(),
+  onValidationFail: jest.fn(),
+  showLiquidErrorInFooter: jest.fn(),
+  onPersonalizationTokensChange: jest.fn(),
+  onContentValidityChange: jest.fn(),
+  getLiquidTags: jest.fn(),
+  injectedTags: {},
+});
+
+const setNativeValue = (el, value) => {
+  const proto = Object.getPrototypeOf(el);
+  Object.getOwnPropertyDescriptor(proto, 'value').set.call(el, value);
+};
+const typeInto = (id, value) => {
+  const el = document.getElementById(id);
+  if (!el) throw new Error(`no #${id} in DOM`);
+  setNativeValue(el, value);
+  fireEvent.change(el, { target: { value } });
+  fireEvent.blur(el);
+};
+
+describe.each([
+  ['Classic', 'false'],
+  ['Functional', 'true'],
+])('library-mode validity parity — %s', (flow, flagValue) => {
+  beforeEach(() => {
+    window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', flagValue);
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+    window.localStorage.removeItem('ENABLE_NEW_FORMBUILDER_MPUSH');
+  });
+
+  it('isFormValid flips true after typing valid content (Done gate) and content-emptiness reports live', () => {
+    let containerRef = null;
+    const props = buildProps();
+    const ui = (p) => (
+      <Router history={history}>
+        <Create ref={(r) => { if (r) containerRef = r; }} {...p} />
+      </Router>
+    );
+    const utils = render(ui(props));
+    const meta = { layouts: [{ definition: fullDefinition() }], tags: { standard: [] } };
+    act(() => { utils.rerender(ui({ ...props, metaEntities: meta })); });
+    act(() => { jest.runOnlyPendingTimers(); });
+
+    // mount: empty form — invalid, content empty
+    expect(containerRef.state.isFormValid).toBe(false);
+    expect(props.onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: true });
+
+    act(() => { typeInto('message-title', 'Hello title'); });
+    act(() => { typeInto('message-editor', 'Hello body'); });
+    act(() => { jest.advanceTimersByTime(1000); }); // flush debounced emissions
+
+    // the Done gate must see the typed content: valid + non-empty
+    expect(containerRef.state.isFormValid).toBe(true);
+    const contentCalls = props.onContentValidityChange.mock.calls.map((c) => c[0]);
+    expect(contentCalls[contentCalls.length - 1]).toEqual({ isContentEmpty: false });
+
+    utils.unmount();
+  });
+});