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

package/package.json

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

package/v2Containers/CreativesContainer/index.js

@@ -69,6 +69,23 @@ import {
 import { MANUAL_CAROUSEL } from '../MobilePushNew/constants';
 import { BIG_HTML } from '../InApp/constants';
 
+/**
+ * Returns true if value is "deep empty": no errors present.
+ * - null/undefined: empty
+ * - string: empty if length === 0
+ * - array: empty if length === 0
+ * - plain object (e.g. { android: [], ios: [], generic: [] }): empty only if every value is deep-empty
+ */
+function isDeepEmpty(value) {
+  if (value == null) return true;
+  if (typeof value === 'string') return value.length === 0;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === 'object') {
+    return Object.values(value).every(isDeepEmpty);
+  }
+  return false;
+}
+
 const classPrefix = 'add-creatives-section';
 const CREATIVES_CONTAINER = 'creativesContainer';
 
@@ -1779,8 +1796,8 @@ export class Creatives extends React.Component {
   showLiquidErrorInFooter = (errorMessagesFromFormBuilder, currentFormBuilderTab) => {
     const liquidMsgs = get(errorMessagesFromFormBuilder, constants.LIQUID_ERROR_MSG, []);
     const standardMsgs = get(errorMessagesFromFormBuilder, constants.STANDARD_ERROR_MSG, []);
-    const hasLiquid = Array.isArray(liquidMsgs) ? liquidMsgs.length > 0 : !isEmpty(liquidMsgs);
-    const hasStandard = Array.isArray(standardMsgs) ? standardMsgs.length > 0 : !isEmpty(standardMsgs);
+    const hasLiquid = !isDeepEmpty(liquidMsgs);
+    const hasStandard = !isDeepEmpty(standardMsgs);
     const isLiquidValidationError = hasLiquid || hasStandard;
     // Don't overwrite existing liquid error with empty only for Mobile Push OLD (FormBuilder/clear calls empty there); SMS/others clear on input change
     const isMobilePush = this.state.currentChannel?.toUpperCase() === constants.MOBILE_PUSH;

package/v2Containers/InApp/index.js

@@ -50,7 +50,7 @@ import {
   LAYOUT_RADIO_OPTIONS,
   IOS_CAPITAL,
 } from "./constants";
-import { INAPP, SMS } from "../CreativesContainer/constants";
+import { GENERIC, INAPP, SMS } from "../CreativesContainer/constants";
 import {
   ALL, TAG, EMBEDDED, DEFAULT, FULL, LIBRARY,
 } from "../Whatsapp/constants";
@@ -1079,10 +1079,36 @@ export const InApp = (props) => {
   // Validation middleware for tag validation (both liquid and non-liquid flow)
   // Liquid validation (extractTags) runs only in library mode
   const validationMiddleWare = async () => {
+    // Normalize validator bucket keys to component state keys (ANDROID, IOS_CAPITAL, GENERIC)
+    // so we don't merge e.g. 'android'/'ios'/'generic' with ANDROID/IOS/GENERIC and get duplicate/stale keys
+    const normalizeErrorBuckets = (errors) => {
+      const normalized = {
+        [ANDROID]: [],
+        [IOS_CAPITAL]: [],
+        [GENERIC]: [],
+      };
+      if (!errors || typeof errors !== 'object') return normalized;
+      const keyMap = {
+        ANDROID,
+        android: ANDROID,
+        [IOS_CAPITAL]: IOS_CAPITAL,
+        [IOS]: IOS_CAPITAL,
+        ios: IOS_CAPITAL,
+        GENERIC,
+        generic: GENERIC,
+      };
+      for (const [key, value] of Object.entries(errors)) {
+        const targetKey = keyMap[key];
+        if (targetKey != null && Array.isArray(value)) {
+          normalized[targetKey] = value;
+        }
+      }
+      return normalized;
+    };
     const onError = ({ standardErrors, liquidErrors }) => {
       setErrorMessage((prev) => ({
-        STANDARD_ERROR_MSG: { ...prev.STANDARD_ERROR_MSG, ...standardErrors },
-        LIQUID_ERROR_MSG: { ...prev.LIQUID_ERROR_MSG, ...liquidErrors },
+        STANDARD_ERROR_MSG: { ...prev.STANDARD_ERROR_MSG, ...normalizeErrorBuckets(standardErrors) },
+        LIQUID_ERROR_MSG: { ...prev.LIQUID_ERROR_MSG, ...normalizeErrorBuckets(liquidErrors) },
       }));
     };
     const onSuccess = () => {

package/v2Containers/InappAdvance/index.js

@@ -817,7 +817,7 @@ export const InappAdvanced = (props) => {
 
     // Liquid validation (extractTags) only in library mode
     if (!isFullMode) {
-      validateInAppContent(payload, {
+      await validateInAppContent(payload, {
         currentTab: panes === ANDROID ? 1 : 2,
         onError,
         onSuccess,
@@ -837,7 +837,7 @@ export const InappAdvanced = (props) => {
         singleTab: getSingleTab(accountData),
       });
     } else {
-      onSuccess();
+      await onSuccess();
     }
   };
 

package/v2Containers/MobilePush/Create/index.js

@@ -98,11 +98,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     // Library mode: on Done click (transition to isGetFormData), run extractTags only when no existing validation errors (braces, personalization, etc.)
     if (nextProps.isGetFormData && !this.props.isGetFormData && !nextProps.isFullMode) {
       // If form already has validation errors (braces, personalization tags, etc.), do not call extractTags; just fail
-      if (!this.state.isFormValid && nextProps.onValidationFail) {
+      if (!this.state.isFormValid && typeof nextProps.onValidationFail === 'function') {
         nextProps.onValidationFail();
         return;
       }
-      if (nextProps.getLiquidTags && nextProps.showLiquidErrorInFooter && nextProps.onValidationFail) {
+      if (typeof nextProps.getLiquidTags === 'function' && typeof nextProps.showLiquidErrorInFooter === 'function' && typeof nextProps.onValidationFail === 'function') {
         const formDataArr = [this.state.formData?.[0], this.state.formData?.[1]];
         validateMobilePushContent(formDataArr, {
           currentTab: this.state.currentTab,
@@ -115,18 +115,27 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
             const toArray = (v) => (Array.isArray(v) ? v : (v && typeof v === 'object' ? [].concat(...Object.values(v)) : []));
             const STANDARD_ERROR_MSG = toArray(standardErrors);
             const LIQUID_ERROR_MSG = toArray(liquidErrors);
-            nextProps.showLiquidErrorInFooter(
-              { STANDARD_ERROR_MSG, LIQUID_ERROR_MSG },
-              this.state.currentTab
-            );
-            nextProps.onValidationFail();
+            if (typeof nextProps.showLiquidErrorInFooter === 'function') {
+              nextProps.showLiquidErrorInFooter(
+                { STANDARD_ERROR_MSG, LIQUID_ERROR_MSG },
+                this.state.currentTab
+              );
+            }
+            // Only trigger onValidationFail when there are actual errors; skip when helper called onError with empty arrays (reset case)
+            if ((STANDARD_ERROR_MSG.length > 0 || LIQUID_ERROR_MSG.length > 0) && typeof nextProps.onValidationFail === 'function') {
+              nextProps.onValidationFail();
+            }
           },
           onSuccess: () => {
-            nextProps.getFormLibraryData(this.getFormData());
+            if (typeof nextProps.getFormLibraryData === 'function') {
+              nextProps.getFormLibraryData(this.getFormData());
+            }
           },
         });
-      } else {
+      } else if (typeof nextProps.getFormLibraryData === 'function') {
         nextProps.getFormLibraryData(this.getFormData());
+      } else if (typeof nextProps.onValidationFail === 'function') {
+        nextProps.onValidationFail();
       }
     } else if (nextProps.isGetFormData && this.props.isGetFormData !== nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
       this.startValidation();

package/v2Containers/MobilePush/Edit/index.js

@@ -69,6 +69,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       schema: {},
       currentTab: 1,
       editData: {},
+      errorData: [],
       loading: false,
       isFormValid: true,
       injectedTags: {},
@@ -133,11 +134,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     // Library mode: on Done click (transition to isGetFormData), run extractTags only when no existing validation errors (braces, personalization, etc.)
     if (nextProps.isGetFormData && !this.props.isGetFormData && !nextProps.isFullMode) {
       // If form already has validation errors (braces, personalization tags, etc.), do not call extractTags; just fail
-      if (!this.state.isFormValid && nextProps.onValidationFail) {
-        nextProps.onValidationFail();
+      if (!this.state.isFormValid) {
+        nextProps.onValidationFail?.();
         return;
       }
-      if (nextProps.getLiquidTags && nextProps.showLiquidErrorInFooter && nextProps.onValidationFail) {
+      if (nextProps.getLiquidTags && nextProps.showLiquidErrorInFooter) {
         const formDataArr = [this.state.formData?.[0], this.state.formData?.[1]];
         validateMobilePushContent(formDataArr, {
           currentTab: this.state.currentTab,
@@ -154,7 +155,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
               { STANDARD_ERROR_MSG, LIQUID_ERROR_MSG },
               this.state.currentTab
             );
-            nextProps.onValidationFail();
+            // Only treat as validation failure when there are actual errors; skip when helper called onError with empty reset payload
+            const hasErrors = STANDARD_ERROR_MSG.length > 0 || LIQUID_ERROR_MSG.length > 0;
+            if (hasErrors) {
+              nextProps.onValidationFail?.();
+            }
           },
           onSuccess: () => {
             nextProps.getFormLibraryData(this.getFormData());
@@ -741,8 +746,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
     if (!_.isEmpty(this.state.formData) && !this.state.isFormValid) {
       let tab = this.state.currentTab;
-      const isAndroidInvalid = Object.values(errorData[0] || {}).includes(true);
-      const isIosInvalid = Object.values(errorData[1] || {}).includes(true);
+      const isAndroidInvalid = Object.values(errorData?.[0] || {}).includes(true);
+      const isIosInvalid = Object.values(errorData?.[1] || {}).includes(true);
       const isIosTabVisible = get(schema, 'containers[0].panes[1].isSupported', true) !== false;
       if (isAndroidInvalid) {
         tab = 1;
@@ -2329,7 +2334,7 @@ Edit.propTypes = {
   getFormLibraryData: PropTypes.func,
   isGetFormData: PropTypes.bool,
   Create: PropTypes.object,
-  onValidationFail: PropTypes.bool,
+  onValidationFail: PropTypes.func,
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
   creativesMode: PropTypes.string,

package/v2Containers/WebPush/Create/utils/validation.js

@@ -80,12 +80,6 @@ export const validateMessageContent = (value, formatMessage, messages, validatio
     isFullMode,
   }) || {};
 
-  if (validationResponse?.unsupportedTags?.length) {
-    return formatMessage(globalMessages.unsupportedTagsValidationError, {
-      unsupportedTags: validationResponse.unsupportedTags.join(', '),
-    });
-  }
-
   if (validationResponse?.isBraceError) {
     return formatMessage(globalMessages.unbalanacedCurlyBraces);
   }

package/v2Containers/WebPush/Create/utils/validation.test.js

@@ -317,21 +317,6 @@ describe('validation', () => {
       expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.personalizationTokensErrorMessage);
     });
 
-    it('should return unsupported tags error when validateTags returns unsupportedTags', () => {
-      validateTags.mockReturnValue({ unsupportedTags: ['invalidTag', 'otherTag'] });
-      const result = validateMessageContent(
-        'Hello {{invalidTag}}',
-        mockFormatMessage,
-        mockMessages,
-        mockValidationConfig
-      );
-      expect(result).toBe('Unsupported tags: invalidTag, otherTag');
-      expect(mockFormatMessage).toHaveBeenCalledWith(
-        globalMessages.unsupportedTagsValidationError,
-        { unsupportedTags: 'invalidTag, otherTag' }
-      );
-    });
-
     it('should pass isFullMode to validateTags when provided', () => {
       validateTags.mockReturnValue({});
       validateMessageContent('Valid message', mockFormatMessage, mockMessages, mockValidationConfig, true);