@capillarytech/creatives-library 8.0.313 → 8.0.315

package/package.json

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

package/v2Containers/InApp/index.js

@@ -68,6 +68,7 @@ import { HTML_EDITOR_VARIANTS } from "../../v2Components/HtmlEditor/constants";
 import { INAPP_EDITOR_TYPES } from "../InAppWrapper/constants";
 import InappAdvanced from "../InappAdvance/index";
 import CapDeviceContent from "../../v2Components/CapDeviceContent";
+import capDeviceContentMessages from "../../v2Components/CapDeviceContent/messages";
 import { ErrorInfoNote } from "../../v2Components/ErrorInfoNote";
 
 let editContent = {};
@@ -1218,6 +1219,47 @@ export const InApp = (props) => {
   // ── Old-flow helpers (used by CapDeviceContent when flag is disabled) ──────
   const isAiContentBotDisabled = currentOrgDetails?.accessibleFeatures?.includes(AI_CONTENT_BOT_DISABLED);
 
+  /**
+   * Clears stored API/liquid errors for a specific device (and GENERIC) so
+   * hasAnyErrors() goes false and Done can be re-clicked after editing.
+   * Does NOT clear errors that belong only to the *other* device.
+   */
+  const clearDeviceErrors = useCallback((platform) => {
+    const key = platform === IOS ? IOS_CAPITAL : ANDROID;
+    setErrorMessage((prev) => ({
+      STANDARD_ERROR_MSG: {
+        ...prev.STANDARD_ERROR_MSG,
+        [key]: [],
+        GENERIC: [],
+      },
+      LIQUID_ERROR_MSG: {
+        ...prev.LIQUID_ERROR_MSG,
+        [key]: [],
+        GENERIC: [],
+      },
+    }));
+  }, [IOS_CAPITAL, ANDROID]);
+
+  const setTitleAndroidWithClear = useCallback((value) => {
+    clearDeviceErrors(ANDROID);
+    setTitleAndroid(value);
+  }, [clearDeviceErrors]);
+
+  const setTitleIosWithClear = useCallback((value) => {
+    clearDeviceErrors(IOS);
+    setTitleIos(value);
+  }, [clearDeviceErrors]);
+
+  const setTemplateMessageAndroidWithClear = useCallback((value) => {
+    clearDeviceErrors(ANDROID);
+    setTemplateMessageAndroid(value);
+  }, [clearDeviceErrors]);
+
+  const setTemplateMessageIosWithClear = useCallback((value) => {
+    clearDeviceErrors(IOS);
+    setTemplateMessageIos(value);
+  }, [clearDeviceErrors]);
+
   const templateDescErrorHandler = (value) => {
     const { unsupportedTags, isBraceError } = validateTags({
       content: value,
@@ -1231,19 +1273,34 @@ export const InApp = (props) => {
       return formatMessage(globalMessages.unsupportedTagsValidationError, { unsupportedTags });
     }
     if (isBraceError) {
-      return formatMessage(globalMessages.braceValidationError);
+      return formatMessage(globalMessages.unbalanacedCurlyBraces);
     }
     return '';
   };
 
+  /** Same rules as CapDeviceContent onTitleChange / onTemplateMessageChange */
+  const computeInAppTemplateFieldError = (value) => {
+    let error = templateDescErrorHandler(value);
+    if (value === '') {
+      error = formatMessage(capDeviceContentMessages.emptyTemplateMessageErrorMessage);
+    }
+    return error;
+  };
+
   const onCopyTitleAndContent = () => {
     if (panes === ANDROID) {
+      clearDeviceErrors(ANDROID);
       setTitleAndroid(titleIos);
       setTemplateMessageAndroid(templateMessageIos);
+      setTemplateTitleErrorAndroid(computeInAppTemplateFieldError(titleIos));
+      setTemplateMessageErrorAndroid(computeInAppTemplateFieldError(templateMessageIos));
       setInAppImageSrcAndroid(inAppImageSrcIos);
     } else {
+      clearDeviceErrors(IOS);
       setTitleIos(titleAndroid);
       setTemplateMessageIos(templateMessageAndroid);
+      setTemplateTitleErrorIos(computeInAppTemplateFieldError(titleAndroid));
+      setTemplateMessageErrorIos(computeInAppTemplateFieldError(templateMessageAndroid));
       setInAppImageSrcIos(inAppImageSrcAndroid);
     }
   };
@@ -1251,12 +1308,21 @@ export const InApp = (props) => {
   const onTagSelect = (value, index) => {
     const tag = `{{${value}}}`;
     if (panes === ANDROID) {
-      if (index === 0) setTitleAndroid((prev) => prev + tag);
-      else setTemplateMessageAndroid((prev) => prev + tag);
-    } else if (index === 0) {
-      setTitleIos((prev) => prev + tag);
+      clearDeviceErrors(ANDROID);
+      const nextTitle = index === 0 ? titleAndroid + tag : titleAndroid;
+      const nextMessage = index === 0 ? templateMessageAndroid : templateMessageAndroid + tag;
+      if (index === 0) setTitleAndroid(nextTitle);
+      else setTemplateMessageAndroid(nextMessage);
+      setTemplateTitleErrorAndroid(computeInAppTemplateFieldError(nextTitle));
+      setTemplateMessageErrorAndroid(computeInAppTemplateFieldError(nextMessage));
     } else {
-      setTemplateMessageIos((prev) => prev + tag);
+      clearDeviceErrors(IOS);
+      const nextTitle = index === 0 ? titleIos + tag : titleIos;
+      const nextMessage = index === 0 ? templateMessageIos : templateMessageIos + tag;
+      if (index === 0) setTitleIos(nextTitle);
+      else setTemplateMessageIos(nextMessage);
+      setTemplateTitleErrorIos(computeInAppTemplateFieldError(nextTitle));
+      setTemplateMessageErrorIos(computeInAppTemplateFieldError(nextMessage));
     }
   };
 
@@ -1283,10 +1349,10 @@ export const InApp = (props) => {
           templateMediaType={templateMediaType}
           setTemplateMediaType={setTemplateMediaType}
           title={titleAndroid}
-          setTitle={setTitleAndroid}
+          setTitle={setTitleAndroidWithClear}
           templateMessageError={templateMessageErrorAndroid}
           templateMessage={templateMessageAndroid}
-          setTemplateMessage={setTemplateMessageAndroid}
+          setTemplateMessage={setTemplateMessageAndroidWithClear}
           setTemplateMessageError={setTemplateMessageErrorAndroid}
           addActionLink={addActionLinkAndroid}
           setAddActionLink={setAddActionLinkAndroid}
@@ -1328,10 +1394,10 @@ export const InApp = (props) => {
           templateMediaType={templateMediaType}
           setTemplateMediaType={setTemplateMediaType}
           title={titleIos}
-          setTitle={setTitleIos}
+          setTitle={setTitleIosWithClear}
           templateMessageError={templateMessageErrorIos}
           templateMessage={templateMessageIos}
-          setTemplateMessage={setTemplateMessageIos}
+          setTemplateMessage={setTemplateMessageIosWithClear}
           setTemplateMessageError={setTemplateMessageErrorIos}
           addActionLink={addActionLinkIos}
           setAddActionLink={setAddActionLinkIos}