@capillarytech/creatives-library 9.0.65 → 9.0.66

package/package.json

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

package/v2Components/FormBuilder/Functional/renderers/mpushRenderers.js

@@ -52,6 +52,17 @@ const formatSafe = (intl, descriptor) => (intl?.formatMessage ? intl.formatMessa
 // Classic gates every field-error display on checkValidation (pre-save silence).
 const shouldShowError = (renderContext, error) => Boolean(renderContext?.checkValidation && error);
 
+const isEmptyValue = (value) => !value || !/\S/.test(String(value));
+
+// Classic (Classic.js:2881-2885) only defers the "empty/required" error until
+// Save/Update/Done (checkValidation); brace/personalization/tag errors show live
+// as soon as they're detected. Title/Message fields need that same two-tier gate.
+const shouldShowFieldError = (renderContext, error, value) => {
+  if (!error) return false;
+  const isEmptyRequiredError = error === true && isEmptyValue(value);
+  return isEmptyRequiredError ? Boolean(renderContext?.checkValidation) : true;
+};
+
 /** Classic input-case error message: personalization > brace > schema errorMessage. */
 const resolveInputMessage = (field, value, error, renderContext) => {
   const { intl, restrictPersonalization } = renderContext || {};
@@ -67,7 +78,7 @@ const resolveInputMessage = (field, value, error, renderContext) => {
 export const MpushInputField = ({
   field, value, error, onChange, onBlur, renderContext,
 }) => {
-  const showError = shouldShowError(renderContext, error);
+  const showError = shouldShowFieldError(renderContext, error, value);
   const message = showError ? resolveInputMessage(field, value, error, renderContext) : '';
   return (
     <CapColumn key={field.id} span={field.width} offset={field.offset} style={field.style || {}}>
@@ -95,13 +106,9 @@ export const MpushTextAreaField = ({
 }) => {
   let aiDisabled = true;
   try { aiDisabled = isAiContentBotDisabled(); } catch (e) { console.error(e); aiDisabled = true; }
-  // Classic-observable behavior: errorData is only ever computed under
-  // startValidation (Classic.js:334-345), so NO editor error — empty or tag —
-  // is visible before a save attempt. checkValidation is true exactly in the
-  // states where Classic can hold a non-false errorType, so gating display on it
-  // reproduces Classic's typing silence and also keeps the initial-hydrate
-  // errorData (computed for the parent validity emission) from leaking into the UI.
-  const showError = shouldShowError(renderContext, error);
+  // Classic shows brace/tag/personalization errors live while typing and only
+  // defers the empty/required error until Save/Update/Done (Classic.js:2881-2885).
+  const showError = shouldShowFieldError(renderContext, error, value);
   // MPUSH keeps the inline message even though the channel is liquid-supported
   // (Classic.js:2908-2915). Personalization gets its own message (2877-2879).
   const inlineMessage = showError ? resolveInputMessage(field, value, error, renderContext) : '';

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

@@ -26,7 +26,7 @@ const kids = (el) => {
 describe('MpushInputField', () => {
   const field = { id: 'secondary-cta-0-label', width: 18, errorMessage: 'Label required' };
 
-  it('message resolution: personalization > brace > schema errorMessage; hidden without checkValidation', () => {
+  it('message resolution: personalization > brace > schema errorMessage; empty-required error hidden without checkValidation', () => {
     const base = { field, onChange: () => {}, renderContext: { checkValidation: true, intl } };
     expect(kids(MpushInputField({ ...base, value: '', error: true }))[0].props.errorMessage)
       .toBe('Label required');
@@ -42,12 +42,20 @@ describe('MpushInputField', () => {
       ...base, value: '', error: true, renderContext: { checkValidation: false, intl },
     }))[0].props.errorMessage).toBe('');
   });
+
+  it('shows brace/tag errors live, before checkValidation (Save/Update/Done) is set', () => {
+    const el = MpushInputField({
+      field, value: 'a {{b', error: ERROR_VALUE.BRACKET, onChange: () => {}, renderContext: { checkValidation: false, intl },
+    });
+    expect(kids(el)[0].props.errorMessage).toContain('curly braces');
+    expect(kids(el)[0].props.className).toContain('error');
+  });
 });
 
 describe('MpushTextAreaField', () => {
   const field = { id: 'message-editor', width: 18, errorMessage: 'Message required' };
 
-  it('inline message shows only under checkValidation; AskAira renders when AI enabled', () => {
+  it('empty-required inline message shows only under checkValidation; AskAira renders when AI enabled', () => {
     const base = { field, onChange: jest.fn(), renderContext: { checkValidation: true, intl } };
     expect(kids(MpushTextAreaField({ ...base, value: '', error: true }))[0].props.errorMessage)
       .toBe('Message required');
@@ -66,6 +74,18 @@ describe('MpushTextAreaField', () => {
     });
     expect(kids(el).length).toBe(1); // textarea only, no bot
   });
+
+  it('shows brace/tag errors live, before checkValidation (Save/Update/Done) is set', () => {
+    const el = MpushTextAreaField({
+      field,
+      value: 'hi {{name',
+      error: ERROR_VALUE.BRACKET,
+      onChange: () => {},
+      renderContext: { checkValidation: false, intl },
+    });
+    expect(kids(el)[0].props.errorMessage).toContain('curly braces');
+    expect(kids(el)[0].props.className).toContain('error-form-builder');
+  });
 });
 
 describe('MpushCheckboxField', () => {