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

package/package.json

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

package/v2Components/FormBuilder/Functional/FormBuilderShell.js

@@ -275,8 +275,14 @@ const FormBuilderShell = (props) => {
     const isEcho = isEqual(parentFormData, lastEmittedRef.current) || isEqual(parentFormData, current);
     if (!isEcho) {
       dispatch(hydrate(fromLegacy(parentFormData, { channel })));
-      // Classic mirrors the tabCount prop only alongside a parent formData sync.
-      emittedTabCountRef.current = propsRef.current.tabCount || emittedTabCountRef.current;
+      // Classic mirrors the tabCount prop on a formData sync only in EDIT mode
+      // (Classic.js:446-447); its generic mirror (415) needs the prop VALUE to
+      // change, which never happens with the containers' hardcoded tabCount={2}.
+      // Adopting 2 in the create flow makes the containers' content-emptiness
+      // check (CAP-189913) scan the untouched iOS tab -> Done/Preview stuck disabled.
+      if (propsRef.current.isEdit) {
+        emittedTabCountRef.current = propsRef.current.tabCount || emittedTabCountRef.current;
+      }
       // Classic validates on every deep-unequal parent push (Classic.js:516-537) —
       // this is what turns the container's isFormValid true before Create/Done.
       if (validateOnExternalChange) {
@@ -439,7 +445,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);
     }
   };
@@ -621,6 +632,7 @@ FormBuilderShell.propTypes = {
   tagModule: PropTypes.string,
   tags: PropTypes.array,
   checkValidation: PropTypes.bool,
+  isEdit: PropTypes.bool,
   injectedTags: PropTypes.object,
   onContextChange: PropTypes.func,
   // Shapes match TagList's own contract (array of offer objects / keyed-by-blockId map).

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

@@ -0,0 +1,149 @@
+/**
+ * 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 });
+
+    // user repro: image-upload write-back (a genuine parent push) then CTA check/uncheck.
+    // The shell must NOT adopt the hardcoded tabCount={2} prop in the create flow
+    // (Classic.js:415/446-447), or the content check scans the empty iOS tab and
+    // Done/Preview stick disabled.
+    act(() => {
+      containerRef.setState((prev) => ({
+        formData: { ...prev.formData, 0: { ...prev.formData[0], image: 'blob:uploaded' } },
+      }));
+    });
+    act(() => { jest.advanceTimersByTime(1000); });
+    const pane = document.querySelectorAll('.ant-tabs-tabpane')[0] || document;
+    const label = Array.from(pane.querySelectorAll('label')).find((l) => /action link/i.test(l.textContent || ''));
+    const cta = (label && label.querySelector('input[type="checkbox"]')) || pane.querySelector('input[type="checkbox"]');
+    act(() => { fireEvent.click(cta); });
+    act(() => { jest.advanceTimersByTime(1000); });
+    act(() => { fireEvent.click(cta); });
+    act(() => { jest.advanceTimersByTime(1000); });
+
+    expect(containerRef.state.tabCount).toBe(1); // create flow never adopts the prop
+    const finalCalls = props.onContentValidityChange.mock.calls.map((c) => c[0]);
+    expect(finalCalls[finalCalls.length - 1]).toEqual({ isContentEmpty: false }); // buttons stay enabled
+
+    utils.unmount();
+  });
+});

package/v2Components/FormBuilder/Functional/tests/mpush.shellEvents.test.js

@@ -161,4 +161,43 @@ describe('MPUSH shell event bridge', () => {
     expect(legacy[0]).toEqual(expect.objectContaining({ 'message-title': '' }));
     expect(legacy[1]).toEqual(expect.objectContaining({ 'message-title2': '' }));
   });
+
+  // Classic mirrors the tabCount prop on a formData push only in EDIT mode
+  // (Classic.js:446-447; the generic mirror at 415 needs the prop VALUE to change,
+  // never true with the containers' hardcoded tabCount={2}). Adopting 2 in the
+  // create flow made getMobilePushEmbeddedContentValidity (CAP-189913) scan the
+  // untouched iOS tab after an image-upload write-back push -> Done/Preview stuck.
+  it('create flow keeps emitting tabCount 1 after a genuine parent push (image write-back); edit adopts the prop', () => {
+    const writeBack = (base) => ({
+      ...base,
+      0: { ...base[0], image: 'blob:uploaded' }, // container's in-place upload write-back
+    });
+
+    const typeTitle = (value) => {
+      const el = document.getElementById('message-title');
+      fireEvent.change(el, { target: { value } });
+    };
+
+    // CREATE (no isEdit): tabCount must stay 1
+    const createProps = buildProps(buildSchema(), { formData: {} });
+    const createMount = mount(createProps);
+    act(() => {
+      createMount.rerender(createMount.ui({ ...createProps, formData: writeBack(buildFormData()) }));
+    });
+    act(() => { typeTitle('after push'); }); // next emission carries the tabCount
+    const createEmit = createProps.onChange.mock.calls[createProps.onChange.mock.calls.length - 1];
+    expect(createEmit[1]).toBe(1);
+    createMount.unmount();
+
+    // EDIT: Classic adopts the prop on the data sync (Classic.js:447)
+    const editProps = buildProps(buildSchema(), { formData: {}, isEdit: true });
+    const editMount = mount(editProps);
+    act(() => {
+      editMount.rerender(editMount.ui({ ...editProps, formData: writeBack(buildFormData()) }));
+    });
+    act(() => { typeTitle('after push'); });
+    const editEmit = editProps.onChange.mock.calls[editProps.onChange.mock.calls.length - 1];
+    expect(editEmit[1]).toBe(2);
+    editMount.unmount();
+  });
 });