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

package/package.json

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

package/v2Components/FormBuilder/index.js

@@ -2801,6 +2801,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (this.props.restrictPersonalization && hasPersonalizationTags(messageContent)) {
       errorMessageText = formatMessage(messages.personalizationTagsErrorMessage);
     }
+    // Empty/required error: only show after user has triggered validation (ifError / "Done").
+    // All other errors (brace, personalization, missing tags, generic): show in real time while typing.
+    const isContentEmpty = !messageContent || !/\S/.test(String(messageContent).trim());
+    const isEmptyError = errorType && isContentEmpty;
+    const showError = errorType && (isEmptyError ? ifError : true);
     const prevErrorMessage = this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.[0];
     if (prevErrorMessage !== errorMessageText && errorMessageText && this.isLiquidFlowSupportedByChannel()) {
       this.setState((prevState) => ({
@@ -2823,9 +2828,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           <TextArea
             id={val.id}
             placeholder={val.placeholder ? val.placeholder : ''}
-            className={`${ifError ? 'error-form-builder' : ''}`}
+            className={`${showError ? 'error-form-builder' : ''}`}
             errorMessage={
-              ifError && errorMessageText && (
+              showError && errorMessageText && (
                 !this.isLiquidFlowSupportedByChannel() ||
                 [MOBILE_PUSH, INAPP].includes(this.props.schema?.channel?.toUpperCase())
               )