@capillarytech/creatives-library 8.0.285-alpha.0 → 8.0.285

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";
@@ -93,7 +94,7 @@ import createMobilePushPayloadWithIntl from "../../utils/createMobilePushPayload
 import { MOBILEPUSH } from "../../v2Components/CapVideoUpload/constants";
 import { StyledCapTab } from "./style";
 import TestAndPreviewSlidebox from "../../v2Components/TestAndPreviewSlidebox";
-import { LIQUID_SUPPORTED_CHANNELS, MOBILE_PUSH } from "../CreativesContainer/constants";
+import { MOBILE_PUSH } from "../CreativesContainer/constants";
 import creativesMessages from "../CreativesContainer/messages";
 
 // Helper function to extract deep link keys from URL where value equals key
@@ -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
@@ -2598,8 +2608,18 @@ const MobilePushNew = ({
       messages: formBuilderMessages,
       tagLookupMap: metaEntities?.tagLookupMap || {},
       eventContextTags: metaEntities?.eventContextTags || [],
-      isLiquidFlow: LIQUID_SUPPORTED_CHANNELS.includes(MOBILE_PUSH),
+      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),
     });
   }, [
@@ -2612,7 +2632,7 @@ const MobilePushNew = ({
     accountData,
   ]);
 
-  const isLiquidFlow = LIQUID_SUPPORTED_CHANNELS.includes(MOBILE_PUSH);
+  const isLiquidFlow = hasLiquidSupportFeature();
 
   useEffect(() => {
     // Always map to { label } for both platforms

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

@@ -51,11 +51,11 @@ import {
   ALL,
   LIBRARY,
 } from './constants';
-import { LIQUID_SUPPORTED_CHANNELS } 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 = {};
@@ -240,11 +240,15 @@ export const SmsTraiEdit = (props) => {
         validateTags({
           content: updatedSmsEditor.join(''),
           tagsParam: tags,
+          injectedTagsParams: injectedTags,
           location,
           tagModule: getDefaultTags,
+          eventContextTags,
           isFullMode,
         }) || {};
-      updateIsTagValidationError(false);
+      updateIsTagValidationError(
+        tagValidationResponse.unsupportedTags.length > 0,
+      );
     }
   }, [updatedSmsEditor, tags]);
 
@@ -544,7 +548,16 @@ export const SmsTraiEdit = (props) => {
     return countVarChar;
   };
 
-  const tagValidationErrorMessage = () => null;
+  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)) {
@@ -591,7 +604,7 @@ export const SmsTraiEdit = (props) => {
     setShowTestAndPreviewSlidebox(false);
   };
 
-  const isLiquidSupportFeatureEnabled = LIQUID_SUPPORTED_CHANNELS.includes(SMS);
+  const isLiquidSupportFeatureEnabled = hasLiquidSupportFeature();
   return (
     <>
       <CapSpin spinning={loading || fetchingLiquidTags} tip={fetchingLiquidTags && formatMessage(formBuilderMessages.liquidSpinText)}>

package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap

@@ -5817,7 +5817,6 @@ FREE GIFTS-
                 </CapButton>
                 <CapButton
                   className="create-msg"
-                  disabled={true}
                   isAddBtn={false}
                   onClick={[Function]}
                   type="primary"
@@ -5825,7 +5824,6 @@ FREE GIFTS-
                   <Button
                     block={false}
                     className="cap-button-v2 create-msg"
-                    disabled={true}
                     ghost={false}
                     htmlType="button"
                     loading={false}
@@ -5835,7 +5833,6 @@ FREE GIFTS-
                     <Wave>
                       <button
                         className="ant-btn cap-button-v2 create-msg ant-btn-primary"
-                        disabled={true}
                         onClick={[Function]}
                         type="button"
                       >
@@ -16731,7 +16728,6 @@ FREE GIFTS-
                 </CapButton>
                 <CapButton
                   className="create-msg"
-                  disabled={true}
                   isAddBtn={false}
                   onClick={[Function]}
                   type="primary"
@@ -16739,7 +16735,6 @@ FREE GIFTS-
                   <Button
                     block={false}
                     className="cap-button-v2 create-msg"
-                    disabled={true}
                     ghost={false}
                     htmlType="button"
                     loading={false}
@@ -16749,7 +16744,6 @@ FREE GIFTS-
                     <Wave>
                       <button
                         className="ant-btn cap-button-v2 create-msg ant-btn-primary"
-                        disabled={true}
                         onClick={[Function]}
                         type="button"
                       >
@@ -27735,7 +27729,6 @@ FREE GIFTS-
                 </CapButton>
                 <CapButton
                   className="create-msg"
-                  disabled={true}
                   isAddBtn={false}
                   onClick={[Function]}
                   type="primary"
@@ -27743,7 +27736,6 @@ FREE GIFTS-
                   <Button
                     block={false}
                     className="cap-button-v2 create-msg"
-                    disabled={true}
                     ghost={false}
                     htmlType="button"
                     loading={false}
@@ -27753,7 +27745,6 @@ FREE GIFTS-
                     <Wave>
                       <button
                         className="ant-btn cap-button-v2 create-msg ant-btn-primary"
-                        disabled={true}
                         onClick={[Function]}
                         type="button"
                       >

package/v2Containers/Viber/index.js

@@ -234,6 +234,7 @@ export const Viber = (props) => {
     const { valid, isBraceError } = validateTags({
       content: value,
       tagsParam: tags,
+      injectedTagsParams: injectedTags,
       location,
       tagModule: 'outbound',
       isFullMode,

package/v2Containers/Viber/index.scss

@@ -121,5 +121,5 @@
   margin-top: $CAP_SPACE_08;
 }
 .test-and-preview-button {
-  margin-left: 120px;
+  margin-left: 100px;
 }

package/v2Containers/WebPush/Create/hooks/useTagManagement.js

@@ -105,10 +105,12 @@ export const useTagManagement = ({
   const validationConfig = useMemo(
     () => ({
       tagsParam: tags,
+      injectedTagsParams: injectedTags,
       location,
       tagModule: getDefaultTags,
+      eventContextTags,
     }),
-    [tags, location, getDefaultTags],
+    [tags, injectedTags, location, getDefaultTags, eventContextTags],
   );
 
   return {

package/v2Containers/WebPush/Create/hooks/useTagManagement.test.js

@@ -528,19 +528,26 @@ describe('useTagManagement', () => {
 
   describe('validationConfig', () => {
     it('should return validation config with tags', () => {
+      const injectedTags = [{ id: 5, name: 'Injected Tag' }];
+      const eventContextTags = [{ id: 6, name: 'Event Tag' }];
+
       const { result } = renderHook(() =>
         useTagManagement({
           location: defaultLocation,
           globalActions: mockGlobalActions,
           metaEntities: defaultMetaEntities,
+          injectedTags,
+          eventContextTags,
           getDefaultTags: 'custom',
         })
       );
 
       expect(result.current.validationConfig).toEqual({
         tagsParam: defaultMetaEntities.tags.standard,
+        injectedTagsParams: injectedTags,
         location: defaultLocation,
         tagModule: 'custom',
+        eventContextTags,
       });
     });
 

package/v2Containers/WebPush/Create/index.js

@@ -285,8 +285,8 @@ const WebPushCreate = ({
   const validateTemplateName = useCallback((value) => validateTemplateNameUtil(value), []);
 
   const validateTitle = useCallback(
-    (value) => validateTitleUtil(value, formatMessage, messages, validationConfig, isFullMode),
-    [formatMessage, validationConfig, isFullMode],
+    (value) => validateTitleUtil(value, formatMessage, messages),
+    [formatMessage],
   );
 
   const validateUrl = useCallback(

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

@@ -10,31 +10,16 @@ import globalMessages from '../../../Cap/messages';
 export const validateTemplateName = (value) => !value || value.trim() === '';
 
 /**
- * Validates notification title (required and optional tag validation)
+ * Validates notification title
  * @param {string} value - The title value
  * @param {Function} formatMessage - i18n format message function
  * @param {Object} messages - Message definitions
- * @param {Object} [validationConfig] - Optional config for tag validation
- * @param {boolean} [isFullMode] - Optional; when set with validationConfig, runs tag validation
  * @returns {string} Error message if invalid, empty string if valid
  */
-export const validateTitle = (value, formatMessage, messages, validationConfig, isFullMode) => {
+export const validateTitle = (value, formatMessage, messages) => {
   if (!value || value.trim() === '') {
     return formatMessage(messages.titleRequired);
   }
-
-  if (validationConfig != null) {
-    const validationResponse = validateTags({
-      content: value,
-      ...validationConfig,
-      isFullMode,
-    }) || {};
-
-    if (validationResponse?.isBraceError) {
-      return formatMessage(globalMessages.unbalanacedCurlyBraces);
-    }
-  }
-
   return '';
 };
 
@@ -75,7 +60,13 @@ export const validateMessageContent = (value, formatMessage, messages, validatio
     ...validationConfig,
     isFullMode,
   }) || {};
-
+  
+  if (validationResponse?.unsupportedTags?.length) {
+    return formatMessage(globalMessages.unsupportedTagsValidationError, {
+      unsupportedTags: validationResponse.unsupportedTags.join(', '),
+    });
+  }
+  
   if (validationResponse?.isBraceError) {
     return formatMessage(globalMessages.unbalanacedCurlyBraces);
   }

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

@@ -169,8 +169,10 @@ describe('validation', () => {
   describe('validateMessageContent', () => {
     const mockValidationConfig = {
       tagsParam: [],
+      injectedTagsParams: [],
       location: {},
       tagModule: '',
+      eventContextTags: [],
     };
 
     beforeEach(() => {
@@ -209,6 +211,17 @@ describe('validation', () => {
       });
     });
 
+    it('should return error message for unsupported tags', () => {
+      validateTags.mockReturnValue({
+        unsupportedTags: ['tag1', 'tag2'],
+      });
+      const result = validateMessageContent('Message with {tag1} and {tag2}', mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('Unsupported tags: tag1, tag2');
+      expect(mockFormatMessage).toHaveBeenCalledWith(globalMessages.unsupportedTagsValidationError, {
+        unsupportedTags: 'tag1, tag2',
+      });
+    });
+
     it('should return error message for unbalanced curly braces', () => {
       validateTags.mockReturnValue({
         isBraceError: true,
@@ -218,11 +231,22 @@ describe('validation', () => {
       expect(mockFormatMessage).toHaveBeenCalledWith(globalMessages.unbalanacedCurlyBraces);
     });
 
+    it('should return error message for both unsupported tags and brace error (unsupported tags takes precedence)', () => {
+      validateTags.mockReturnValue({
+        unsupportedTags: ['tag1'],
+        isBraceError: true,
+      });
+      const result = validateMessageContent('Message with {tag1}', mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('Unsupported tags: tag1');
+    });
+
     it('should pass validation config to validateTags', () => {
       const customConfig = {
         tagsParam: [{ id: 1, name: 'Tag1' }],
+        injectedTagsParams: [{ id: 2, name: 'Tag2' }],
         location: { query: { type: 'test' } },
         tagModule: 'custom',
+        eventContextTags: [{ id: 3, name: 'Tag3' }],
       };
       validateTags.mockReturnValue({});
       validateMessageContent('Valid message', mockFormatMessage, mockMessages, customConfig);

package/v2Containers/Whatsapp/index.js

@@ -637,18 +637,22 @@ export const Whatsapp = (props) => {
         validateTags({
           content: contentData.join(""),
           tagsParam: tags,
+          injectedTagsParams: injectedTags,
           location,
           tagModule: getDefaultTags,
+          eventContextTags,
           isFullMode,
         }) || {};
+      const unsupportedTagsLengthCheck =
+        validationResponse?.unsupportedTags?.length > 0;
       if (type === HEADER_TEXT) {
         headerTagValidationResponse = validationResponse;
-        updateIsHeaderTagValidationError(false);
+        updateIsHeaderTagValidationError(unsupportedTagsLengthCheck);
       } else if (type === CAROUSEL_TEXT) {
-        return [{fieldName: "carouselTagValidationErrMessage", value: validationResponse}, {fieldName: "carouselTagValidationErr", value: false}];
+        return [{fieldName: "carouselTagValidationErrMessage", value: validationResponse}, {fieldName: "carouselTagValidationErr", value: unsupportedTagsLengthCheck}];
       } else {
         tagValidationResponse = validationResponse;
-        updateIsTagValidationError(false);
+        updateIsTagValidationError(unsupportedTagsLengthCheck);
       }
     }
   };
@@ -2678,11 +2682,18 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     } else {
       validationResponse = tagValidationResponse;
     }
-    const { isBraceError } = validationResponse || {};
+    const { unsupportedTags = [], isBraceError } = validationResponse;
+
+    let tagError = "";
+    if (unsupportedTags.length > 0) {
+      tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
+        unsupportedTags,
+      });
+    }
     if (isBraceError) {
-      return <CapError>{formatMessage(globalMessages.unbalanacedCurlyBraces)}</CapError>;
+      tagError = formatMessage(globalMessages.unbalanacedCurlyBraces);
     }
-    return null;
+    return <CapError>{tagError}</CapError>;
   };
 
   const editModeContent = () => (