@capillarytech/creatives-library 8.0.285-alpha.1 → 8.0.286

package/v2Containers/InappAdvance/index.js

@@ -50,7 +50,9 @@ import injectReducer from '../../utils/injectReducer';
 import v2InAppReducer from '../InApp/reducer';
 import { v2InAppSagas } from '../InApp/sagas';
 import injectSaga from '../../utils/injectSaga';
+import { validateTags } from "../../utils/tagValidations";
 import { validateInAppContent } from "../../utils/commonUtils";
+import { hasLiquidSupportFeature } from "../../utils/common";
 import formBuilderMessages from "../../v2Components/FormBuilder/messages";
 import { getSingleTab, hasAnyErrors } from "../InApp/utils";
 import ErrorInfoNote from "../../v2Components/ErrorInfoNote";
@@ -815,9 +817,11 @@ export const InappAdvanced = (props) => {
     const latestHtmlValues = await saveAllBeeInstances();
     const payload = createPayload(latestHtmlValues);
 
+    // Validate the INAPP content
+    const isLiquidFlow = hasLiquidSupportFeature();
     // Skip validation if no tags are available (e.g., in tests or when tags haven't loaded)
     const hasTags = tags && tags.length > 0;
-    if (hasTags) {
+    if (isLiquidFlow && hasTags) {
       validateInAppContent(payload, {
         currentTab: panes === ANDROID ? 1 : 2, // Convert ANDROID/IOS to tab numbers
         onError,
@@ -825,6 +829,10 @@ export const InappAdvanced = (props) => {
         getLiquidTags: (content, callback) => globalActions.getLiquidTags(content, callback),
         formatMessage,
         messages: formBuilderMessages,
+        tagLookupMap: metaEntities?.tagLookupMap || {},
+        eventContextTags: metaEntities?.eventContextTags || [],
+        isLiquidFlow,
+        forwardedTags: {},
         skipTags: (tag) => {
           // Skip certain tags if needed
           const skipRegexes = [
@@ -839,7 +847,92 @@ export const InappAdvanced = (props) => {
         },
         singleTab: getSingleTab(accountData),
       });
+    } else if (hasTags) {
+      // For non-liquid flow, validate tags using validateTags (only if tags are available)
+      const androidContent = latestHtmlValues?.android || (androidBeeHtml?.value || (typeof androidBeeHtml === 'string' ? androidBeeHtml : ''));
+      const iosContent = latestHtmlValues?.ios || (iosBeeHtml?.value || (typeof iosBeeHtml === 'string' ? iosBeeHtml : ''));
+
+      const androidSupported = get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED || get(editContent, 'ANDROID.deviceType') === ANDROID;
+      const iosSupported = get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED || get(editContent, 'IOS.deviceType') === IOS_CAPITAL;
+
+      let hasErrors = false;
+      const newErrors = {
+        STANDARD_ERROR_MSG: {
+          ANDROID: [],
+          IOS: [],
+          GENERIC: [],
+        },
+        LIQUID_ERROR_MSG: {
+          ANDROID: [],
+          IOS: [],
+          GENERIC: [],
+        },
+      };
+
+      // Validate Android content
+      if (androidSupported && androidContent && androidContent?.trim() !== '') {
+        const validationResponse = validateTags({
+          content: androidContent,
+          tagsParam: tags,
+          injectedTagsParams: injectedTags || {},
+          location,
+          tagModule: getDefaultTags,
+          eventContextTags: metaEntities?.eventContextTags || [],
+          isFullMode,
+        }) || {};
+
+        if (validationResponse?.unsupportedTags?.length > 0) {
+          hasErrors = true;
+          newErrors.LIQUID_ERROR_MSG.ANDROID.push(
+            formatMessage(globalMessages.unsupportedTagsValidationError, {
+              unsupportedTags: validationResponse.unsupportedTags.join(", "),
+            })
+          );
+        }
+        if (validationResponse?.isBraceError) {
+          hasErrors = true;
+          newErrors.LIQUID_ERROR_MSG.ANDROID.push(
+            formatMessage(globalMessages.unbalanacedCurlyBraces)
+          );
+        }
+      }
+
+      // Validate iOS content
+      if (iosSupported && iosContent && iosContent?.trim() !== '') {
+        const validationResponse = validateTags({
+          content: iosContent,
+          tagsParam: tags,
+          injectedTagsParams: injectedTags || {},
+          location,
+          tagModule: getDefaultTags,
+          eventContextTags: metaEntities?.eventContextTags || [],
+          isFullMode,
+        }) || {};
+
+        if (validationResponse?.unsupportedTags?.length > 0) {
+          hasErrors = true;
+          newErrors.LIQUID_ERROR_MSG.IOS.push(
+            formatMessage(globalMessages.unsupportedTagsValidationError, {
+              unsupportedTags: validationResponse.unsupportedTags.join(", "),
+            })
+          );
+        }
+        if (validationResponse?.isBraceError) {
+          hasErrors = true;
+          newErrors.LIQUID_ERROR_MSG.IOS.push(
+            formatMessage(globalMessages.unbalanacedCurlyBraces)
+          );
+        }
+      }
+
+      if (hasErrors) {
+        setErrorMessage(newErrors);
+      } else {
+        // No errors, proceed with submission
+        onSuccess();
+      }
     } else {
+      // No tags available, skip validation and proceed directly
       onSuccess();
     }
   };
@@ -945,7 +1038,15 @@ export const InappAdvanced = (props) => {
             )}
             <CapButton
               onClick={async () => {
-                await liquidMiddleWare();
+                const isLiquidFlow = hasLiquidSupportFeature();
+                const hasTags = tags && tags?.length > 0;
+                if (isLiquidFlow || hasTags) {
+                  // Use validation middleware for tag validation
+                  await liquidMiddleWare();
+                } else {
+                  // No validation needed, proceed directly
+                  await onDoneCallback();
+                }
               }}
               disabled={isDisableDone()}
               className="inapp-create-btn"

package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/content.test.js.snap

@@ -3117,6 +3117,7 @@ new message content.",
                                     },
                                   ]
                                 }
+                                showTruncatedTooltip={false}
                                 size="large"
                                 style={
                                   Object {
@@ -3135,6 +3136,7 @@ new message content.",
                                     />
                                   }
                                   onChange={[Function]}
+                                  onDropdownVisibleChange={[Function]}
                                   removeIcon={
                                     <CapIcon
                                       size="s"
@@ -3199,6 +3201,7 @@ new message content.",
                                     onBlur={[Function]}
                                     onChange={[Function]}
                                     onDeselect={[Function]}
+                                    onDropdownVisibleChange={[Function]}
                                     onFocus={[Function]}
                                     onInputKeyDown={[Function]}
                                     onSearch={[Function]}
@@ -3437,7 +3440,11 @@ new message content.",
                                                   }
                                                 }
                                                 title=""
-                                              />
+                                              >
+                                                <div
+                                                  className="cap-select-option-tooltip"
+                                                />
+                                              </div>
                                             </div>
                                             <span
                                               className="ant-select-arrow"
@@ -6940,6 +6947,7 @@ new message content.",
                                     },
                                   ]
                                 }
+                                showTruncatedTooltip={false}
                                 size="large"
                                 style={
                                   Object {
@@ -6958,6 +6966,7 @@ new message content.",
                                     />
                                   }
                                   onChange={[Function]}
+                                  onDropdownVisibleChange={[Function]}
                                   removeIcon={
                                     <CapIcon
                                       size="s"
@@ -7022,6 +7031,7 @@ new message content.",
                                     onBlur={[Function]}
                                     onChange={[Function]}
                                     onDeselect={[Function]}
+                                    onDropdownVisibleChange={[Function]}
                                     onFocus={[Function]}
                                     onInputKeyDown={[Function]}
                                     onSearch={[Function]}
@@ -7260,7 +7270,11 @@ new message content.",
                                                   }
                                                 }
                                                 title=""
-                                              />
+                                              >
+                                                <div
+                                                  className="cap-select-option-tooltip"
+                                                />
+                                              </div>
                                             </div>
                                             <span
                                               className="ant-select-arrow"
@@ -10707,6 +10721,7 @@ new message content.",
                                     },
                                   ]
                                 }
+                                showTruncatedTooltip={false}
                                 size="large"
                                 style={
                                   Object {
@@ -10725,6 +10740,7 @@ new message content.",
                                     />
                                   }
                                   onChange={[Function]}
+                                  onDropdownVisibleChange={[Function]}
                                   removeIcon={
                                     <CapIcon
                                       size="s"
@@ -10789,6 +10805,7 @@ new message content.",
                                     onBlur={[Function]}
                                     onChange={[Function]}
                                     onDeselect={[Function]}
+                                    onDropdownVisibleChange={[Function]}
                                     onFocus={[Function]}
                                     onInputKeyDown={[Function]}
                                     onSearch={[Function]}
@@ -11027,7 +11044,11 @@ new message content.",
                                                   }
                                                 }
                                                 title=""
-                                              />
+                                              >
+                                                <div
+                                                  className="cap-select-option-tooltip"
+                                                />
+                                              </div>
                                             </div>
                                             <span
                                               className="ant-select-arrow"

package/v2Containers/Line/Container/Text/index.js

@@ -137,6 +137,7 @@ export const LineText = ({
         const { valid, isBraceError } = validateTags({
             content: value,
             tagsParam: tags,
+            injectedTagsParams: injectedTags,
             location,
             tagModule: 'outbound',
             isFullMode,

package/v2Containers/MobilePushNew/index.js

@@ -77,6 +77,7 @@ import { getContent } from "../MobilePush/commonMethods";
 import { getMessageObject } from "../../utils/messageUtils";
 import { gtmPush } from "../../utils/gtmTrackers";
 import mobilePushReducer from "./reducer";
+import { hasLiquidSupportFeature } from "../../utils/common";
 import formBuilderMessages from "../../v2Components/FormBuilder/messages";
 import { validateMobilePushContent } from "../../utils/commonUtils";
 import { getSingleTab } from "../InApp/utils";
@@ -798,9 +799,10 @@ const MobilePushNew = ({
     (value) => {
       let errorTemplateDescMessage = "";
 
-      const { isBraceError } = validateTags({
+      const { unsupportedTags, isBraceError } = validateTags({
         content: value,
         tagsParam: tags,
+        injectedTagsParams: injectedTags,
         location,
         tagModule: getDefaultTags,
         isFullMode,
@@ -810,6 +812,14 @@ const MobilePushNew = ({
           messages.emptyTemplateDescErrorMessage
         );
       }
+      if (unsupportedTags?.length > 0) {
+        errorTemplateDescMessage = formatMessage(
+          globalMessages.unsupportedTagsValidationError,
+          {
+            unsupportedTags,
+          }
+        );
+      }
       if (isBraceError) {
         errorTemplateDescMessage = formatMessage(
           globalMessages.unbalanacedCurlyBraces
@@ -2596,6 +2606,20 @@ const MobilePushNew = ({
       getLiquidTags: globalActionsProps.getLiquidTags,
       formatMessage,
       messages: formBuilderMessages,
+      tagLookupMap: metaEntities?.tagLookupMap || {},
+      eventContextTags: metaEntities?.eventContextTags || [],
+      isLiquidFlow: hasLiquidSupportFeature(),
+      forwardedTags: {},
+      skipTags: (tag) => {
+        const skipRegexes = [
+          /dynamic_expiry_date_after_\d+_days\.FORMAT_\d/,
+          /unsubscribe\(#[a-zA-Z\d]{6}\)/,
+          /Link_to_[a-zA-z]/,
+          /SURVEY.*\.TOKEN/,
+          /^[A-Za-z].*\([a-zA-Z\d]*\)/,
+        ];
+        return skipRegexes.some((regex) => regex.test(tag));
+      },
       singleTab: getSingleTab(accountData),
     });
   }, [
@@ -2604,9 +2628,12 @@ const MobilePushNew = ({
     activeTab,
     globalActionsProps,
     formatMessage,
+    metaEntities,
     accountData,
   ]);
 
+  const isLiquidFlow = hasLiquidSupportFeature();
+
   useEffect(() => {
     // Always map to { label } for both platforms
     const newButtons = Array.isArray(ctaData)
@@ -3003,7 +3030,11 @@ const MobilePushNew = ({
                     <CapButton
                       type="primary"
                       onClick={() => {
-                        liquidMiddleWare();
+                        if (isLiquidFlow) {
+                          liquidMiddleWare();
+                        } else {
+                          handleSave();
+                        }
                       }}
                       className="save-button"
                       disabled={isSaveDisabled}

package/v2Containers/Rcs/index.js

@@ -394,15 +394,23 @@ export const Rcs = (props) => {
     const validationResponse =
       validateTags({
         content: contentForValidation,
-        tagsParam: tags,
-        location,
-        tagModule: getDefaultTags,
-        isFullMode,
-      }) || {};
-    const errorMsg =
-      (validationResponse?.isBraceError &&
-        formatMessage(globalMessages.unbalanacedCurlyBraces)) ||
-      false;
+      tagsParam: tags,
+      injectedTagsParams: injectedTags,
+      location,
+      tagModule: getDefaultTags,
+      eventContextTags,
+      isFullMode,
+    }) || {};
+    const unsupportedTagsLengthCheck =
+      validationResponse?.unsupportedTags?.length > 0;
+      const errorMsg =
+        (unsupportedTagsLengthCheck &&
+          formatMessage(globalMessages.unsupportedTagsValidationError, {
+            unsupportedTags: validationResponse.unsupportedTags,
+          })) ||
+        (validationResponse.isBraceError &&
+          formatMessage(globalMessages.unbalanacedCurlyBraces)) ||
+        false;
     if (type === TITLE_TEXT) setTemplateTitleError(errorMsg);
     if (type === MESSAGE_TEXT) setTemplateDescError(errorMsg);
   };
@@ -827,9 +835,10 @@ export const Rcs = (props) => {
 
   const templateDescErrorHandler = (value) => {
     let errorMessage = false;
-    const { isBraceError } = validateTags({
+    const { unsupportedTags, isBraceError } = validateTags({
       content: value,
       tagsParam: tags,
+      injectedTagsParams: injectedTags,
       location,
       tagModule: getDefaultTags,
       isFullMode,
@@ -859,10 +868,26 @@ export const Rcs = (props) => {
   };
 
   const fallbackMessageErrorHandler = (value) => {
+    let errorMessage = false;
+    const { unsupportedTags } = validateTags({
+      content: value,
+      tagsParam: tags,
+      injectedTagsParams: injectedTags,
+      location,
+      tagModule: getDefaultTags,
+      isFullMode,
+    }) || {};
     if (value?.length > FALLBACK_MESSAGE_MAX_LENGTH) {
-      return formatMessage(messages.fallbackMsgLenError);
+      errorMessage = formatMessage(messages.fallbackMsgLenError);
+    } else if (unsupportedTags?.length > 0) {
+      errorMessage = formatMessage(
+        globalMessages.unsupportedTagsValidationError,
+        {
+          unsupportedTags,
+        },
+      );
     }
-    return false;
+    return errorMessage;
   };
 
   // Check for forbidden characters: square brackets [] and single curly braces {}

package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap

@@ -86505,6 +86505,7 @@ new message content.",
                                           },
                                         ]
                                       }
+                                      showTruncatedTooltip={false}
                                       size="large"
                                       style={
                                         Object {
@@ -86524,6 +86525,7 @@ new message content.",
                                           />
                                         }
                                         onChange={[Function]}
+                                        onDropdownVisibleChange={[Function]}
                                         removeIcon={
                                           <_default
                                             size="s"
@@ -86589,6 +86591,7 @@ new message content.",
                                           onBlur={[Function]}
                                           onChange={[Function]}
                                           onDeselect={[Function]}
+                                          onDropdownVisibleChange={[Function]}
                                           onFocus={[Function]}
                                           onInputKeyDown={[Function]}
                                           onSearch={[Function]}
@@ -86827,9 +86830,13 @@ new message content.",
                                                           "opacity": 1,
                                                         }
                                                       }
-                                                      title="Vertical Medium"
+                                                      title=""
                                                     >
-                                                      Vertical Medium
+                                                      <div
+                                                        className="cap-select-option-tooltip"
+                                                      >
+                                                        Vertical Medium
+                                                      </div>
                                                     </div>
                                                   </div>
                                                   <span
@@ -105847,6 +105854,7 @@ new message content.",
                                           },
                                         ]
                                       }
+                                      showTruncatedTooltip={false}
                                       size="large"
                                       style={
                                         Object {
@@ -105866,6 +105874,7 @@ new message content.",
                                           />
                                         }
                                         onChange={[Function]}
+                                        onDropdownVisibleChange={[Function]}
                                         removeIcon={
                                           <_default
                                             size="s"
@@ -105931,6 +105940,7 @@ new message content.",
                                           onBlur={[Function]}
                                           onChange={[Function]}
                                           onDeselect={[Function]}
+                                          onDropdownVisibleChange={[Function]}
                                           onFocus={[Function]}
                                           onInputKeyDown={[Function]}
                                           onSearch={[Function]}
@@ -106169,9 +106179,13 @@ new message content.",
                                                           "opacity": 1,
                                                         }
                                                       }
-                                                      title="Vertical Medium"
+                                                      title=""
                                                     >
-                                                      Vertical Medium
+                                                      <div
+                                                        className="cap-select-option-tooltip"
+                                                      >
+                                                        Vertical Medium
+                                                      </div>
                                                     </div>
                                                   </div>
                                                   <span

package/v2Containers/SmsTrai/Create/index.scss

@@ -98,5 +98,5 @@
 }
 
 .create-dlt-msg {
-  margin-left: 120px;
+  margin-left: 100px;
 }

package/v2Containers/SmsTrai/Edit/index.js

@@ -39,8 +39,10 @@ import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
 import UnifiedPreview from '../../../v2Components/CommonTestAndPreview/UnifiedPreview';
 import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
 import withCreatives from '../../../hoc/withCreatives';
+import { validateTags } from '../../../utils/tagValidations';
 import {
   CHARLIMIT,
+  SMS,
   SMS_TRAI_VAR,
   TAG,
   EMBEDDED,
@@ -49,15 +51,16 @@ import {
   ALL,
   LIBRARY,
 } from './constants';
-import { SMS } from '../../CreativesContainer/constants';
 import v2EditSmsReducer from '../../Sms/Edit/reducer';
 import { v2SmsEditSagas } from '../../Sms/Edit/sagas';
 import ErrorInfoNote from '../../../v2Components/ErrorInfoNote';
 import { validateLiquidTemplateContent } from '../../../utils/commonUtils';
+import { hasLiquidSupportFeature } from '../../../utils/common';
 import { ANDROID } from '../../../v2Components/CommonTestAndPreview/constants';
 
 let varMap = {};
 let traiData = {};
+let tagValidationResponse = {};
 const { TextArea } = CapInput;
 const { CapLabelInline } = CapLabel;
 
@@ -91,6 +94,7 @@ export const SmsTraiEdit = (props) => {
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState();
   const [isValidationError, updateIsValidationError] = useState(false);
+  const [isTagValidationError, updateIsTagValidationError] = useState(false);
   const [totalMessageLength, setTotalMessageLength] = useState(0);
   const [isUnicodeAllowed, updateIsUnicodeAllowed] = useState(true);
   const [showMsgLengthNote, updateshowMsgLengthNote] = useState(false);
@@ -225,6 +229,29 @@ export const SmsTraiEdit = (props) => {
     }
   }, []);
 
+  //performs tag validation
+  useEffect(() => {
+    if (
+      !isFullMode &&
+      updatedSmsEditor?.length > 0 &&
+      !updatedSmsEditor.includes(SMS_TRAI_VAR)
+    ) {
+      tagValidationResponse =
+        validateTags({
+          content: updatedSmsEditor.join(''),
+          tagsParam: tags,
+          injectedTagsParams: injectedTags,
+          location,
+          tagModule: getDefaultTags,
+          eventContextTags,
+          isFullMode,
+        }) || {};
+      updateIsTagValidationError(
+        tagValidationResponse.unsupportedTags.length > 0,
+      );
+    }
+  }, [updatedSmsEditor, tags]);
+
   const computeUpdatedSmsEditor = () => {
     const arr = [...tempMsgArray];
     const varMapKeys = Object.keys(varMap)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
@@ -261,8 +288,6 @@ export const SmsTraiEdit = (props) => {
   };
 
   const onSubmitWrapper = () => {
-    setIsLiquidValidationError(false);
-    setLiquidErrorMessages({});
     const content = updatedSmsEditor.join('');
     const onError = ({ standardErrors, liquidErrors }) => {
       setLiquidErrorMessages({
@@ -273,8 +298,6 @@ export const SmsTraiEdit = (props) => {
     };
 
     const onSuccess = () => {
-      setIsLiquidValidationError(false);
-      setLiquidErrorMessages({});
       onDoneCallback();
     };
     validateLiquidTemplateContent(content, {
@@ -283,6 +306,10 @@ export const SmsTraiEdit = (props) => {
       messages: formBuilderMessages,
       onError,
       onSuccess,
+      tagLookupMap: metaEntities?.tagLookupMap,
+      eventContextTags,
+      isLiquidFlow: true,
+      forwardedTags: {},
     });
   };
 
@@ -521,6 +548,17 @@ export const SmsTraiEdit = (props) => {
     return countVarChar;
   };
 
+  const tagValidationErrorMessage = () => {
+    const { unsupportedTags = [] } = tagValidationResponse;
+    let tagError = '';
+    if (unsupportedTags.length > 0) {
+      tagError = formatMessage(messages.unsupportedTagsValidationError, {
+        unsupportedTags,
+      });
+    }
+    return <CapError>{tagError}</CapError>;
+  };
+
   const disablehandler = () => {
     if (traiData && !isEmpty(traiData)) {
       const msg = get(traiData, `versions.base.sms-editor`, '');
@@ -566,6 +604,7 @@ export const SmsTraiEdit = (props) => {
     setShowTestAndPreviewSlidebox(false);
   };
 
+  const isLiquidSupportFeatureEnabled = hasLiquidSupportFeature();
   return (
     <>
       <CapSpin spinning={loading || fetchingLiquidTags} tip={fetchingLiquidTags && formatMessage(formBuilderMessages.liquidSpinText)}>
@@ -623,6 +662,7 @@ export const SmsTraiEdit = (props) => {
             <CapRow>
               {smsLengthForVar()}
             </CapRow>
+            {isTagValidationError && tagValidationErrorMessage()}
             <CapCheckbox onChange={unicodeHandler} checked={isUnicodeAllowed} disabled={disablehandler()}>
               {formatMessage(messages.unicodeLabel)}
             </CapCheckbox>
@@ -653,8 +693,9 @@ export const SmsTraiEdit = (props) => {
             <FormattedMessage {...messages.testAndPreviewButtonLabel} />
           </CapButton>
           <CapButton
-            onClick={onSubmitWrapper}
+            onClick={isLiquidSupportFeatureEnabled ? onSubmitWrapper : onDoneCallback}
             className="create-msg"
+            disabled={isTagValidationError || (isLiquidSupportFeatureEnabled && !isObject(metaEntities?.tagLookupMap))}
           >
             <FormattedMessage {...messages.saveButtonLabel} />
           </CapButton>