@capillarytech/creatives-library 8.0.311 → 8.0.312-alpha.0

package/package.json

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

package/v2Containers/MobilePushNew/index.js

@@ -2643,7 +2643,7 @@ const MobilePushNew = ({
     const onSuccess = () => handleSave();
 
     // When liquid is enabled and isFullMode is true, skip liquid validation and proceed directly
-    if (hasLiquidSupportFeature() && isFullMode) {
+    if (isFullMode) {
       onSuccess();
       return;
     }

package/v2Containers/SmsTrai/Edit/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable no-undef */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import { FormattedMessage } from 'react-intl';
@@ -82,6 +82,7 @@ export const SmsTraiEdit = (props) => {
     eventContextTags,
     fetchingLiquidTags,
     getLiquidTags,
+    showLiquidErrorInFooter,
   } = props || {};
 
   const { formatMessage } = intl;
@@ -96,7 +97,15 @@ export const SmsTraiEdit = (props) => {
   const [showMsgLengthNote, updateshowMsgLengthNote] = useState(false);
   const [liquidErrorMessages, setLiquidErrorMessages] = useState({});
   const [isLiquidValidationError, setIsLiquidValidationError] = useState(false);
+  /** After user closes the validation panel, keep it hidden until Save is clicked again (even if ErrorInfoNote remounts). */
+  const [liquidErrorPanelDismissed, setLiquidErrorPanelDismissed] = useState(false);
   const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
+  const routeTemplateId = (params && params.id) || '';
+  const traitSource = isFullMode ? templateDetails : templateData;
+  const smsEditorSource = get(traitSource, 'versions.base.sms-editor', '') || '';
+  const baseTemplateId = get(traitSource, 'versions.base.template_id', '') || '';
+  /** Avoid reparsing props into tempMsgArray when only object identity changes (fixes cleared text snapping back). */
+  const lastHydratedSignatureRef = useRef(null);
   const SMSTraiFooter = styled.div`
     background-color: ${CAP_WHITE};
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
@@ -144,29 +153,43 @@ export const SmsTraiEdit = (props) => {
   //computing placeholder array for mapping values and rendering dynamic form
   useEffect(() => {
     traiData = isFullMode ? templateDetails : templateData;
-    if (traiData && !isEmpty(traiData)) {
-      let msg = get(traiData, `versions.base.sms-editor`, '');
-      const templateMessageArray = [];
-      //converting sms-editor string to an array split at '{#var#}'
-      //split and push string before '{#var#}[0 to index]', push '{#var#}',
-      //split and repeat for remaining string[index+7  to length]
-      while (msg.length !== 0) {
-        const index = msg.search(SMS_TRAI_VAR);
-        if (index !== -1) {
-          templateMessageArray.push(msg.substring(0, index));
-          templateMessageArray.push(SMS_TRAI_VAR);
-          msg = msg.substring(index + 7, msg.length);
-        } else {
-          templateMessageArray.push(msg);
-          break;
-        }
+    if (!traiData || isEmpty(traiData)) {
+      return;
+    }
+    const hydrateSignature = `${String(isFullMode)}|${routeTemplateId}|${baseTemplateId}|${smsEditorSource}`;
+    if (lastHydratedSignatureRef.current === hydrateSignature) {
+      return;
+    }
+    lastHydratedSignatureRef.current = hydrateSignature;
+
+    let msg = smsEditorSource;
+    const templateMessageArray = [];
+    //converting sms-editor string to an array split at '{#var#}'
+    //split and push string before '{#var#}[0 to index]', push '{#var#}',
+    //split and repeat for remaining string[index+7  to length]
+    while (msg.length !== 0) {
+      const index = msg.search(SMS_TRAI_VAR);
+      if (index !== -1) {
+        templateMessageArray.push(msg.substring(0, index));
+        templateMessageArray.push(SMS_TRAI_VAR);
+        msg = msg.substring(index + 7, msg.length);
+      } else {
+        templateMessageArray.push(msg);
+        break;
       }
-      const filteredTemplateMessageArray = templateMessageArray.filter((i) => i === 0 || i);
-      updateTempMsgArray(filteredTemplateMessageArray);
-      //stop spinner
-      updateLoading(false);
     }
-  }, [templateDetails || templateData]);
+    const filteredTemplateMessageArray = templateMessageArray.filter((i) => i === 0 || i);
+    updateTempMsgArray(filteredTemplateMessageArray);
+    //stop spinner
+    updateLoading(false);
+  }, [
+    isFullMode,
+    routeTemplateId,
+    baseTemplateId,
+    smsEditorSource,
+    templateDetails,
+    templateData,
+  ]);
 
   //compute/get varMapped and updated-sms-editor
   useEffect(() => {
@@ -263,6 +286,7 @@ export const SmsTraiEdit = (props) => {
   const onSubmitWrapper = () => {
     setIsLiquidValidationError(false);
     setLiquidErrorMessages({});
+    setLiquidErrorPanelDismissed(false);
     // Liquid validation (extractTags) only in library mode
     if (isFullMode) {
       onDoneCallback();
@@ -658,8 +682,20 @@ export const SmsTraiEdit = (props) => {
           </CapColumn>
         </CapRow>
         <SMSTraiFooter>
-          {isLiquidValidationError && (
-            <ErrorInfoNote errorMessages={liquidErrorMessages} />
+          {isLiquidValidationError && !liquidErrorPanelDismissed && (
+            <ErrorInfoNote
+              errorMessages={liquidErrorMessages}
+              intl={intl}
+              onClose={() => {
+                setLiquidErrorPanelDismissed(true);
+                if (typeof showLiquidErrorInFooter === 'function') {
+                  showLiquidErrorInFooter({
+                    STANDARD_ERROR_MSG: [],
+                    LIQUID_ERROR_MSG: [],
+                  });
+                }
+              }}
+            />
           )}
           <CapButton
             onClick={handleTestAndPreview}