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

package/package.json

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

package/v2Components/CommonTestAndPreview/index.js

@@ -1575,8 +1575,18 @@ const CommonTestAndPreview = (props) => {
             if (formDataObj?.whatsappDocSource) {
               whatsappMedia.url = formDataObj.whatsappDocSource;
             }
-            if (formDataObj?.docPreview || formDataObj?.whatsappDocParams) {
-              const docParams = formDataObj.docPreview || formDataObj.whatsappDocParams;
+            // Prefer whatsappDocParams for document data; docPreview may be a React preview element.
+            // Fall back to docPreview only when it contains plain document data.
+            const isPlainDocParamsObject = (value) =>
+              !!value && typeof value === 'object' && !React.isValidElement(value);
+            const getDocParams = (formDataObj) => {
+              const { whatsappDocParams, docPreview } = formDataObj || {};
+              if (isPlainDocParamsObject(whatsappDocParams)) return whatsappDocParams;
+              if (isPlainDocParamsObject(docPreview)) return docPreview;
+              return null;
+            };
+            const docParams = getDocParams(formDataObj);
+            if (docParams) {
               whatsappMedia.previewUrl = docParams?.whatsappDocImg || '';
               whatsappMedia.docParams = {
                 whatsappDocName: docParams?.whatsappDocName || '',

package/v2Components/FormBuilder/Functional/FormBuilderShell.js

@@ -208,10 +208,8 @@ const FormBuilderShell = (props) => {
   );
   useEffect(() => () => debouncedEmit.cancel(), [debouncedEmit]);
 
-  // Classic pushes formData up (props.onChange) on init AND on every schema change
-  // (initialiseForm -> resetTabKeys when isSchemaChanged, Classic.js:1906-1911,
-  // 740-748) — the MPUSH containers read that copy (copy-content handlers) before
-  // any user input. MPUSH-only; SMS keeps its shipped behavior.
+  // Classic pushes formData up on init and on every schema re-init (Classic.js:1906-1911 ->
+  // 740-748); the MPUSH copy-content handlers read that copy. MPUSH-only, SMS unchanged.
   const emitFormDataOnSchemaSync = Boolean(adapter.config?.features?.emitFormDataOnSchemaSync);
 
   // ---- initialize once the (possibly async) schema is ready, then validate+emit ----
@@ -275,8 +273,11 @@ 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 data sync only in EDIT mode (Classic.js:446-447);
+      // adopting the create flow's hardcoded 2 makes the emptiness check scan the empty iOS tab.
+      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,11 +440,8 @@ 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;
-    // 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.
+    // MPUSH: Classic re-validates every change via the container round-trip (Classic.js:516-537)
+    // — keeps the container's isFormValid current for the library Done gate; display stays gated.
     if (validationActive || validateLive || validateOnExternalChange) {
       emitValidity(runValidate(legacy), legacy);
     }
@@ -626,6 +624,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/renderers/mpushRenderers.js

@@ -271,17 +271,21 @@ export const UploadField = ({
       // Classic fires the wrong-file event and CONTINUES (no early return) — preserved.
       onEvent(field.submitAction, { file, type: 'wrong file' });
     }
-    const objectUrl = (window.URL || window.webkitURL).createObjectURL(file);
+    const urlApi = window.URL || window.webkitURL;
+    const objectUrl = urlApi.createObjectURL(file);
     const img = new Image();
     img.src = objectUrl;
     img.onload = () => {
       const fileParams = {
-        width: img.width,
-        height: img.height,
+        width: img?.width,
+        height: img?.height,
         error: Boolean(file && (file.size / 1e6 > 5)), // > 5 MB (Classic.js:2753)
       };
+      urlApi.revokeObjectURL(objectUrl); // dimension read done — free the blob URL
       onEvent(field.submitAction, { file, type: 'image', fileParams });
     };
+    // Classic dispatches nothing on a failed image load — only release the URL.
+    img.onerror = () => urlApi.revokeObjectURL(objectUrl);
     e.target.value = null;
   };
 
@@ -312,9 +316,8 @@ export const UploadField = ({
         />
       )}
       <form encType="multipart/form-data" id={field.id}>
-        {/* Native file input on purpose — openFileDialog clicks it via #fileName;
-            CapInput wraps antd's text Input (affix wrapper + suffix), which cannot
-            host type="file". Hidden: the visible control is the CapButton below. */}
+        {/* Native input on purpose: openFileDialog clicks it via #fileName, and CapInput
+            (antd text Input + affix wrapper) can't host type="file". */}
         <input
           key={field.id}
           className="fb-upload-file-input"

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

@@ -1,15 +1,8 @@
 /**
- * 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).
+ * Library/embedded-mode validity parity — the campaigns-host Done/Preview gates.
+ * Pins that the container's isFormValid tracks typing (Classic re-validates each change
+ * via the container round-trip, Classic.js:516-537; the Done click early-returns on
+ * !isFormValid) and the onContentValidityChange({isContentEmpty}) footer signal.
  */
 import React from 'react';
 import '@testing-library/jest-dom';
@@ -122,6 +115,26 @@ describe.each([
     const contentCalls = props.onContentValidityChange.mock.calls.map((c) => c[0]);
     expect(contentCalls[contentCalls.length - 1]).toEqual({ isContentEmpty: false });
 
+    // user repro: image write-back (genuine parent push) then CTA check/uncheck — the create
+    // flow must not adopt the hardcoded tabCount={2} or the check scans the empty iOS tab.
+    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,40 @@ 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 data push only in EDIT mode (Classic.js:446-447);
+  // adopting the create flow's hardcoded 2 made the emptiness check scan the empty iOS tab.
+  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();
+  });
 });

package/v2Components/FormBuilder/Functional/tests/mpushRenderers.test.js

@@ -187,6 +187,7 @@ describe('UploadField', () => {
   it('file change: no file => no event; wrong extension fires the wrong-file event and CONTINUES (Classic parity)', () => {
     const createObjectURL = jest.fn(() => 'blob:x');
     window.URL.createObjectURL = createObjectURL;
+    window.URL.revokeObjectURL = jest.fn();
     const onEvent = jest.fn();
     const { input } = parts(UploadField({
       field, value: '', error: false, onEvent, renderContext: {},
@@ -201,8 +202,10 @@ describe('UploadField', () => {
     expect(createObjectURL).toHaveBeenCalledWith(file); // no early return
   });
 
-  it('image load reports dimensions and the >5MB error flag', () => {
+  it('image load reports dimensions and the >5MB error flag, then releases the blob URL', () => {
     window.URL.createObjectURL = jest.fn(() => 'blob:x');
+    const revokeObjectURL = jest.fn();
+    window.URL.revokeObjectURL = revokeObjectURL;
     const images = [];
     const RealImage = global.Image;
     global.Image = class { constructor() { images.push(this); } };
@@ -220,6 +223,11 @@ describe('UploadField', () => {
       expect(onEvent).toHaveBeenCalledWith('onUpload', {
         file, type: 'image', fileParams: { width: 300, height: 200, error: true },
       });
+      expect(revokeObjectURL).toHaveBeenCalledWith('blob:x');
+      // failed image load: URL released, no event (Classic dispatches nothing)
+      input.props.onChange({ target: { files: [file], value: null } });
+      images[images.length - 1].onerror();
+      expect(revokeObjectURL).toHaveBeenCalledTimes(2);
     } finally {
       global.Image = RealImage;
     }

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -336,6 +336,7 @@ const HTMLEditor = forwardRef(({
   const validationTotalErrors = validation?.summary?.totalErrors || 0;
   const validationTotalWarnings = validation?.summary?.totalWarnings || 0;
   const validationLastValidated = validation?.lastValidated?.getTime?.() || null;
+  const validationValidatedContent = validation?.validatedContent;
   // Only Rule Group #1 (Input & Sanitization) blocks; use for UI gating (Done/Update/Preview/Test)
   const validationHasBlockingErrors = validation?.hasBlockingErrors || false;
 
@@ -350,6 +351,11 @@ const HTMLEditor = forwardRef(({
       return;
     }
 
+    // isValidating is false during the debounce, so results can still be for older content.
+    if (validationValidatedContent !== undefined && validationValidatedContent !== currentContent) {
+      return;
+    }
+
     // Calculate issue counts: Errors (blocking) and Warnings (non-blocking)
     const calculateIssueCounts = () => {
       const currentValidation = validationRef.current;
@@ -384,7 +390,7 @@ const HTMLEditor = forwardRef(({
       lastSentValidationStateRef.current = newState;
       onValidationChangeRef.current(newState);
     }
-  }, [isValidating, validationTotalErrors, validationTotalWarnings, validationLastValidated, validationHasBlockingErrors, currentContent, apiValidationErrors]);
+  }, [isValidating, validationTotalErrors, validationTotalWarnings, validationLastValidated, validationHasBlockingErrors, validationValidatedContent, currentContent, apiValidationErrors]);
 
   // Send initial state on mount to ensure parent has correct initial button state
   const hasInitializedRef = useRef(false);
@@ -416,6 +422,11 @@ const HTMLEditor = forwardRef(({
       return;
     }
 
+    // Same staleness guard as the effect above.
+    if (validation?.validatedContent !== undefined && validation?.validatedContent !== currentContent) {
+      return;
+    }
+
     // Recalculate issue counts (Errors + Warnings) including API errors
     const issueCounts = !validation || typeof validation.getAllIssues !== 'function'
       ? { errors: 0, warnings: 0, total: 0 }

package/v2Components/HtmlEditor/__tests__/HTMLEditor.test.js

@@ -4462,5 +4462,98 @@ describe('HTMLEditor', () => {
       const lastCall = onValidationChange.mock.calls[onValidationChange.mock.calls.length - 1][0];
       expect(lastCall.isContentEmpty).toBe(false);
     });
+
+    const mockContentHook = (content) => {
+      require('../hooks/useEditorContent').useEditorContent = () => ({
+        content,
+        updateContent: jest.fn(),
+        saveContent: jest.fn(),
+        markAsSaved: jest.fn(),
+        isLoading: false,
+        isDirty: false,
+        hasContent: !!content,
+        getContentSize: jest.fn(() => content.length),
+      });
+    };
+
+    const mockValidationFor = (validatedContent) => {
+      mockUseValidationImpl.mockImplementation(() => ({
+        isValidating: false,
+        validatedContent,
+        getAllIssues: () => [],
+        isClean: () => true,
+        summary: { totalErrors: 0, totalWarnings: 0 },
+      }));
+    };
+
+    it('does not report validation as complete while results are for older content', () => {
+      const onValidationChange = jest.fn();
+      mockContentHook('<p>uploaded zip content</p>');
+      mockValidationFor('<p>previous content</p>');
+
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      const completed = onValidationChange.mock.calls.filter((call) => call[0].validationComplete);
+      expect(completed).toHaveLength(0);
+    });
+
+    it('reports validation as complete once results match the current content', () => {
+      const onValidationChange = jest.fn();
+      const content = '<p>uploaded zip content</p>';
+      mockContentHook(content);
+      mockValidationFor(content);
+
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      const completed = onValidationChange.mock.calls.filter((call) => call[0].validationComplete);
+      expect(completed.length).toBeGreaterThan(0);
+    });
+
+    it('does not re-notify parent when the validation state is unchanged', () => {
+      const onValidationChange = jest.fn();
+      const content = '<p>uploaded zip content</p>';
+      mockContentHook(content);
+      mockValidationFor(content);
+
+      const { rerender } = render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      onValidationChange.mockClear();
+
+      rerender(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(onValidationChange).not.toHaveBeenCalled();
+    });
   });
 });

package/v2Components/HtmlEditor/hooks/useValidation.js

@@ -84,6 +84,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
   const [validationState, setValidationState] = useState({
     isValidating: false,
     lastValidated: null,
+    validatedContent: null, // content these results came from
     htmlErrors: [],
     htmlWarnings: [],
     htmlInfo: [],
@@ -114,6 +115,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
       setValidationState((prev) => ({
         ...prev,
         isValidating: false,
+        validatedContent: htmlContent,
         htmlErrors: [],
         htmlWarnings: [],
         htmlInfo: [],
@@ -169,6 +171,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
       setValidationState({
         isValidating: false,
         lastValidated: new Date(),
+        validatedContent: htmlContent,
         htmlErrors: htmlValidation.errors,
         htmlWarnings: htmlValidation.warnings,
         htmlInfo: htmlValidation.info,
@@ -191,6 +194,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
       setValidationState((prev) => ({
         ...prev,
         isValidating: false,
+        validatedContent: htmlContent,
         htmlErrors: [{
           type: 'error',
           message: `Validation failed: ${error.message}`,
@@ -255,6 +259,7 @@ export const useValidation = (content, variant = 'email', options = {}, formatSa
     setValidationState({
       isValidating: false,
       lastValidated: null,
+      validatedContent: null,
       htmlErrors: [],
       htmlWarnings: [],
       htmlInfo: [],