@capillarytech/creatives-library 8.0.290-alpha.2 → 8.0.290-alpha.4

package/v2Containers/Sms/Create/index.js

@@ -141,16 +141,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentWillReceiveProps(nextProps) {
-    if (!nextProps.isFullMode && nextProps.isGetFormData) {
-      // Trigger validation first; response will be sent in setFormValidity callback so pasted content is validated
+    // Only trigger on actual Done click (isGetFormData false -> true). Prevents auto-submit after user fixes brace error.
+    if (!nextProps.isFullMode && nextProps.isGetFormData && !this.props.isGetFormData) {
       this.setState({ startValidation: true, pendingGetFormData: true });
-      // Fallback: if FormBuilder never calls onFormValidityChange (e.g. early return), still respond to parent
-      this.pendingGetFormDataTimeout = setTimeout(() => {
-        if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
-          this.props.getFormSubscriptionData(this.getFormData());
-          this.setState({ pendingGetFormData: false, startValidation: false });
-        }
-      }, 300);
     } else if (nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
       this.startValidation();
     }
@@ -211,6 +204,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (currentTab) {
       this.setState({currentTab});
     }
+    // Clear footer validation errors on input change so they refresh on next validation
+    if (this.props.showLiquidErrorInFooter) {
+      this.props.showLiquidErrorInFooter({ STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] });
+    }
   }
 
   onTagSelect(data, currentTab) {
@@ -362,17 +359,22 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
   setFormValidity(isFormValid, errorData) {
     this.setState({ isFormValid, errorData }, () => {
-      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+      if (this.state.pendingGetFormData && !isFormValid) {
+        this.setState({ pendingGetFormData: false, startValidation: false });
+        // Reset parent's Done state so next Done click is a fresh attempt
+        if (this.props.onValidationFail) {
+          this.props.onValidationFail();
+        }
+        return;
+      }
+      // In library mode with SMS, submit only when FormBuilder calls onSubmit (after liquid validation).
+      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData && this.props.isFullMode) {
         if (this.pendingGetFormDataTimeout) {
           clearTimeout(this.pendingGetFormDataTimeout);
           this.pendingGetFormDataTimeout = null;
         }
         this.props.getFormSubscriptionData(this.getFormData());
         this.setState({ pendingGetFormData: false, startValidation: false });
-      } else if (this.state.pendingGetFormData && !isFormValid) {
-        // When the user clicked "Done" and validation failed, discard the save intent so that
-        // fixing the error later doesn't auto-submit. The user must click "Done" again.
-        this.setState({ pendingGetFormData: false, startValidation: false });
       }
     });
   }
@@ -995,11 +997,13 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   saveFormData() {
-    // In library mode the template is submitted via getFormSubscriptionData (triggered by startValidation →
-    // onFormValidityChange → setFormValidity). Calling createTemplate API here would set
-    // createTemplateInProgress: true in redux and, because the slidebox closes before the API responds,
-    // that flag would never be reset – causing the spinner to be stuck on the next open.
+    // In library mode: FormBuilder calls onSubmit only after liquid validation succeeds.
+    // Submit to parent here so the slidebox can close with valid data.
     if (!this.props.isFullMode) {
+      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+        this.props.getFormSubscriptionData(this.getFormData());
+        this.setState({ pendingGetFormData: false, startValidation: false });
+      }
       return;
     }
     //Logic to save in db etc

package/v2Containers/Sms/Edit/index.js

@@ -135,14 +135,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillReceiveProps(nextProps) {
-    if (!nextProps.isFullMode && nextProps.isGetFormData) {
+    if (!nextProps.isFullMode && nextProps.isGetFormData && !this.props.isGetFormData) {
       this.setState({ startValidation: true, pendingGetFormData: true });
-      this.pendingGetFormDataTimeout = setTimeout(() => {
-        if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
-          this.props.getFormSubscriptionData(this.getFormData());
-          this.setState({ pendingGetFormData: false, startValidation: false });
-        }
-      }, 300);
     }
     if ( nextProps.location.query.module === 'library' && nextProps.subscriptionTemplateDetails && nextProps.subscriptionTemplateDetails.name && _.isEmpty(this.state.editData) && !_.isEmpty(this.state.schema)) {
       this.setEditState(nextProps.subscriptionTemplateDetails);
@@ -224,6 +218,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (currentTab) {
       this.setState({currentTab});
     }
+    // Clear footer validation errors on input change so they refresh on next validation
+    if (this.props.showLiquidErrorInFooter) {
+      this.props.showLiquidErrorInFooter({ STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] });
+    }
   }
 
   onVersionNameChange() {
@@ -328,17 +326,20 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
 
   setFormValidity(isFormValid, errorData) {
     this.setState({ isFormValid, errorData }, () => {
-      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+      if (this.state.pendingGetFormData && !isFormValid) {
+        this.setState({ pendingGetFormData: false, startValidation: false });
+        if (this.props.onValidationFail) {
+          this.props.onValidationFail();
+        }
+        return;
+      }
+      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData && this.props.isFullMode) {
         if (this.pendingGetFormDataTimeout) {
           clearTimeout(this.pendingGetFormDataTimeout);
           this.pendingGetFormDataTimeout = null;
         }
         this.props.getFormSubscriptionData(this.getFormData());
         this.setState({ pendingGetFormData: false, startValidation: false });
-      } else if (this.state.pendingGetFormData && !isFormValid) {
-        // When the user clicked "Done" and validation failed, discard the save intent so that
-        // fixing the error later doesn't auto-submit. The user must click "Done" again.
-        this.setState({ pendingGetFormData: false, startValidation: false });
       }
     });
   }
@@ -946,11 +947,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({startValidation: false});
   }
   saveFormData() {
-    // In library mode the template is submitted via getFormSubscriptionData, not editTemplate API.
-    // Calling editTemplate here would set editTemplateInProgress: true in redux and, because the
-    // slidebox closes before the API responds, that flag would never be reset – causing the spinner
-    // to be stuck on the next open.
+    // In library mode: FormBuilder calls onSubmit only after liquid validation succeeds.
     if (!this.props.isFullMode) {
+      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+        this.props.getFormSubscriptionData(this.getFormData());
+        this.setState({ pendingGetFormData: false, startValidation: false });
+      }
       return;
     }
     //Logic to save in db etc

package/v2Containers/Sms/commonMethods.js

@@ -8,11 +8,8 @@ export function showError() {
   if (!isEmpty(this.state.formData) && !this.state.isFormValid) {
     const err0 = errorData[0] || {};
     const isSmsInvalid = Object.values(err0).includes(true);
-    const isBraceError = Boolean(err0['bracket-error']);
     if (isSmsInvalid) {
       CapNotification.error(errorMessage);
-    } else if (isBraceError) {
-      // Do not trigger toast for this path; footer error is the reliable UX in SMS library flow.
     }
   }
 }

package/v2Containers/Sms/tests/commonMethods.test.js

@@ -0,0 +1,122 @@
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import { showError } from '../commonMethods';
+
+jest.mock('@capillarytech/cap-ui-library/CapNotification', () => ({
+  error: jest.fn(),
+}));
+
+jest.mock('../Create/messages', () => ({
+  __esModule: true,
+  default: {
+    validationError: { defaultMessage: 'Validation error' },
+  },
+}));
+
+describe('Sms commonMethods', () => {
+  describe('showError', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should call CapNotification.error when formData is not empty, isFormValid is false, and errorData has at least one true value', () => {
+      const context = {
+        props: {
+          intl: { formatMessage: jest.fn((msg) => msg.defaultMessage || 'Validation error') },
+        },
+        state: {
+          formData: { message: 'test' },
+          isFormValid: false,
+          errorData: [{ message: true }],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).toHaveBeenCalledWith({
+        key: 'validation-error',
+        message: 'Validation error',
+      });
+    });
+
+    it('should not call CapNotification.error when formData is empty', () => {
+      const context = {
+        props: { intl: { formatMessage: jest.fn() } },
+        state: {
+          formData: {},
+          isFormValid: false,
+          errorData: [{ message: true }],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).not.toHaveBeenCalled();
+    });
+
+    it('should not call CapNotification.error when isFormValid is true', () => {
+      const context = {
+        props: { intl: { formatMessage: jest.fn() } },
+        state: {
+          formData: { message: 'test' },
+          isFormValid: true,
+          errorData: [{ message: true }],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).not.toHaveBeenCalled();
+    });
+
+    it('should not call CapNotification.error when no errorData entry has a true value', () => {
+      const context = {
+        props: { intl: { formatMessage: jest.fn() } },
+        state: {
+          formData: { message: 'test' },
+          isFormValid: false,
+          errorData: [{ message: false, title: false }],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).not.toHaveBeenCalled();
+    });
+
+    it('should not call CapNotification.error when errorData is empty', () => {
+      const context = {
+        props: { intl: { formatMessage: jest.fn() } },
+        state: {
+          formData: { message: 'test' },
+          isFormValid: false,
+          errorData: [],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).not.toHaveBeenCalled();
+    });
+
+    it('should not call CapNotification.error when errorData[0] is undefined', () => {
+      const context = {
+        props: { intl: { formatMessage: jest.fn() } },
+        state: {
+          formData: { message: 'test' },
+          isFormValid: false,
+          errorData: [],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).not.toHaveBeenCalled();
+    });
+
+    it('should call CapNotification.error when errorData[0] has multiple keys and one is true', () => {
+      const context = {
+        props: {
+          intl: { formatMessage: jest.fn((msg) => msg.defaultMessage || 'Validation error') },
+        },
+        state: {
+          formData: { message: 'hello' },
+          isFormValid: false,
+          errorData: [{ message: false, title: true }],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).toHaveBeenCalledWith({
+        key: 'validation-error',
+        message: 'Validation error',
+      });
+    });
+  });
+});

package/v2Containers/SmsTrai/Edit/index.js

@@ -263,6 +263,11 @@ export const SmsTraiEdit = (props) => {
   const onSubmitWrapper = () => {
     setIsLiquidValidationError(false);
     setLiquidErrorMessages({});
+    // Liquid validation (extractTags) only in library mode
+    if (isFullMode) {
+      onDoneCallback();
+      return;
+    }
     const content = updatedSmsEditor.join('');
     const onError = ({ standardErrors, liquidErrors }) => {
       setLiquidErrorMessages({

package/v2Containers/SmsWrapper/index.js

@@ -36,6 +36,7 @@ const SmsWrapper = (props) => {
     handleTestAndPreview,
     handleCloseTestAndPreview,
     isTestAndPreviewMode,
+    onValidationFail,
     } = props;
 
   const smsProps = {
@@ -58,6 +59,7 @@ const SmsWrapper = (props) => {
     handleTestAndPreview,
     handleCloseTestAndPreview,
     isTestAndPreviewMode,
+    onValidationFail,
   };
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   return <>

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

@@ -127,6 +127,40 @@ describe('validation', () => {
       expect(result).toBe('Personalization tags are not supported for anonymous customers');
       expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.personalizationTokensErrorMessage);
     });
+
+    it('should return brace error when validationConfig is provided and validateTags returns isBraceError', () => {
+      const validationConfig = { tagsParam: [], location: {}, tagModule: '' };
+      validateTags.mockReturnValue({ isBraceError: true });
+      const result = validateTitle(
+        'Valid Title',
+        mockFormatMessage,
+        mockMessages,
+        false,
+        validationConfig,
+        false
+      );
+      expect(result).toBe('Unbalanced curly braces');
+      expect(mockFormatMessage).toHaveBeenCalledWith(globalMessages.unbalanacedCurlyBraces);
+      expect(validateTags).toHaveBeenCalledWith({
+        content: 'Valid Title',
+        ...validationConfig,
+        isFullMode: false,
+      });
+    });
+
+    it('should not run tag validation when validationConfig is null', () => {
+      validateTags.mockClear();
+      const result = validateTitle('Valid Title', mockFormatMessage, mockMessages, false, null);
+      expect(result).toBe('');
+      expect(validateTags).not.toHaveBeenCalled();
+    });
+
+    it('should not run tag validation when validationConfig is undefined', () => {
+      validateTags.mockClear();
+      const result = validateTitle('Valid Title', mockFormatMessage, mockMessages, false, undefined);
+      expect(result).toBe('');
+      expect(validateTags).not.toHaveBeenCalled();
+    });
   });
 
   describe('validateUrl', () => {
@@ -282,6 +316,31 @@ describe('validation', () => {
       expect(result).toBe('Personalization tags are not supported for anonymous customers');
       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);
+      expect(validateTags).toHaveBeenCalledWith({
+        content: 'Valid message',
+        ...mockValidationConfig,
+        isFullMode: true,
+      });
+    });
   });
 });