@capillarytech/creatives-library 8.0.287-alpha.3 → 8.0.288

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/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/MobilePush/Create/index.js

@@ -38,6 +38,7 @@ import v2MobilePushCreateReducer from './reducer';
 import { v2MobilePushWatchDuplicateTemplateSaga } from './sagas';
 import { EXTERNAL_LINK_LOWERCASE } from './constants';
 import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
+import { checkForPersonalizationTokens } from '../../../utils/commonUtils';
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -161,6 +162,15 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const newFormData = cloneDeep(formData);
     const {templateCta} = this.state;
     const { defaultData = {}, isFullMode, showTemplateName} = this.props;
+    
+    // Check for personalization tokens if restriction is enabled and notify parent
+    if (this.props.restrictPersonalization) {
+      const hasTokens = checkForPersonalizationTokens(newFormData);
+      if (this.props.onPersonalizationTokensChange) {
+        this.props.onPersonalizationTokensChange(hasTokens);
+      }
+    }
+    
     if (!isEmpty(templateCta)) {
       newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = get(templateCta, 'name');
       newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = get(templateCta, 'ctaTemplateDetails[0].buttonText');
@@ -674,14 +684,25 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       let tab = this.state.currentTab;
       const isAndroidInvalid = Object.values(errorData[0]).includes(true);
       const isIosInvalid = Object.values(errorData[1]).includes(true);
+      let isTagErrorExist = false;
       if (isAndroidInvalid) {
         tab = 1;
         errorMessage.description = intl.formatMessage(messages.invalidAndroidMessage);
+        const invalidTags = errorData[0]['invalid-tags'];
+        if (!isEmpty(invalidTags)) {
+          isTagErrorExist = true;
+          errorMessage.description = `${intl.formatMessage(messages.invalidAndroidMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
+        }
       } else if (isIosInvalid) {
         tab = 2;
         errorMessage.description = intl.formatMessage(messages.invalidIosMessage);
+        const invalidTags = errorData[1]['invalid-tags'];
+        if (!isEmpty(invalidTags)) {
+          isTagErrorExist = true;
+          errorMessage.description = `${intl.formatMessage(messages.invalidIosMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
+        }
       }
-      if (tab !== this.state.currentTab) {
+      if (tab !== this.state.currentTab || isTagErrorExist) {
         CapNotification.error(errorMessage);
       }
     }
@@ -1493,6 +1514,17 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
   saveFormData = (formData) => {
     //this function gets called from form bulder only when the form data is valid
+    
+    // Check for personalization tokens if restriction is enabled
+    if (this.props.restrictPersonalization) {
+      const hasTokens = checkForPersonalizationTokens(formData);
+      if (hasTokens) {
+        const message = this.props.intl.formatMessage(messages.personalizationTokensErrorMessage);
+        CapNotification.error({message, key: 'personalizationTokensError'});
+        return;
+      }
+    }
+    
     const obj = this.getTransformedData(formData);
     const content = getContent(obj);
     const {
@@ -1896,6 +1928,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
                 messageDetails={this.props?.messageDetails}
+                restrictPersonalization={this.props.restrictPersonalization}
               />
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
@@ -2000,6 +2033,9 @@ Create.propTypes = {
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
+  restrictPersonalization: PropTypes.bool,
+  isAnonymousType: PropTypes.bool,
+  onPersonalizationTokensChange: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/MobilePush/Create/messages.js

@@ -342,4 +342,8 @@ export default defineMessages({
     id: 'creatives.containersV2.MobilePush.Create.thisSectionDisabledHoverText',
     defaultMessage: 'This section is being revamped. Till then it will remain disabled.',
   },
+  "personalizationTokensErrorMessage": {
+    id: 'creatives.containersV2.MobilePush.Create.personalizationTokensErrorMessage',
+    defaultMessage: 'Personalization tags are not supported for anonymous customers, please remove the tags.',
+  },
 });

package/v2Containers/MobilePush/Edit/index.js

@@ -39,7 +39,7 @@ import { v2MobilePushEditSagas } from './sagas';
 import v2MobilePushEditReducer from './reducer';
 import * as globalActions from '../../Cap/actions';
 import { MAPP_SDK } from './constants';
-import { isEmbeddedEditOrPreview } from '../../../utils/commonUtils';
+import { checkForPersonalizationTokens, isEmbeddedEditOrPreview } from '../../../utils/commonUtils';
 import { EMBEDDED } from '../../Whatsapp/constants';
 import { OUTBOUND } from '../../../v2Components/FormBuilder/constants';
 import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
@@ -246,6 +246,15 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   onFormDataChange = (formData, tabCount, currentTab, inputField) => {
     const newFormData = _.cloneDeep(formData);
     const {templateCta} = this.state;
+    
+    // Check for personalization tokens if restriction is enabled and notify parent
+    if (this.props.restrictPersonalization) {
+      const hasTokens = checkForPersonalizationTokens(newFormData);
+      if (this.props.onPersonalizationTokensChange) {
+        this.props.onPersonalizationTokensChange(hasTokens);
+      }
+    }
+    
     if (!_.isEmpty(templateCta) && this.state.currentTab === 2) {
       newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = get(templateCta, 'name');
       newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = get(templateCta, 'ctaTemplateDetails[0].buttonText');
@@ -698,6 +707,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const {intl} = this.props;
     const {errorData} = this.state;
     const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
+    let isTagErrorExist = false;
     if (!_.isEmpty(this.state.formData) && !this.state.isFormValid) {
       let tab = this.state.currentTab;
       const isAndroidInvalid = Object.values(errorData[0]).includes(true);
@@ -705,12 +715,22 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       if (isAndroidInvalid) {
         tab = 1;
         errorMessage.description = intl.formatMessage(messages.invalidAndroidMessage);
+        const invalidTags = errorData[0]['invalid-tags'];
+        if (!_.isEmpty(invalidTags)) {
+          isTagErrorExist = true;
+          errorMessage.description = `${intl.formatMessage(messages.invalidAndroidMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
+        }
       } else if (isIosInvalid) {
         tab = 2;
         errorMessage.description = intl.formatMessage(messages.invalidIosMessage);
+        const invalidTags = errorData[1]['invalid-tags'];
+        if (!_.isEmpty(invalidTags)) {
+          isTagErrorExist = true;
+          errorMessage.description = `${intl.formatMessage(messages.invalidIosMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
+        }
       }
 
-      if (tab !== this.state.currentTab) {
+      if (tab !== this.state.currentTab || isTagErrorExist) {
         CapNotification.error(errorMessage);
       }
     }
@@ -1676,10 +1696,21 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
 
   saveFormData = (formData) => {
+    // Check for personalization tokens if restriction is enabled
+    if (this.props.restrictPersonalization) {
+      const hasTokens = checkForPersonalizationTokens(formData);
+      if (hasTokens) {
+        const message = this.props.intl.formatMessage(messages.personalizationTokensErrorMessage);
+        CapNotification.error({message, key: 'personalizationTokensError'});
+        return;
+      }
+    }
+    
     const obj = this.getTransformedData(formData);
 
     this.props.actions.editTemplate(obj, this.onUpdateTemplateComplete);
   };
+  
   handleFrameTasks = (e) => {
     //
     const type = e.data;
@@ -2175,6 +2206,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
+                restrictPersonalization={this.props.restrictPersonalization}
               />;
               })()}
             </CapColumn>
@@ -2284,6 +2316,9 @@ Edit.propTypes = {
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
+  restrictPersonalization: PropTypes.bool,
+  isAnonymousType: PropTypes.bool,
+  onPersonalizationTokensChange: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/MobilePush/Edit/messages.js

@@ -334,4 +334,8 @@ export default defineMessages({
     id: 'creatives.containersV2.MobilePush.Edit.thisSectionDisabledHoverText',
     defaultMessage: 'This section is being revamped. Till then it will remain disabled.',
   },
+  "personalizationTokensErrorMessage": {
+    id: 'creatives.containersV2.MobilePush.Edit.personalizationTokensErrorMessage',
+    defaultMessage: 'Personalization tags are not supported for anonymous customers, please remove the tags.',
+  },
 });

package/v2Containers/MobilePushNew/components/PlatformContentFields.js

@@ -24,6 +24,7 @@ import {
 import messages from "../messages";
 import MediaUploaders from "./MediaUploaders";
 import CtaButtons from "./CtaButtons";
+import { hasPersonalizationTags } from "../../../utils/commonUtils";
 
 const PlatformContentFields = ({
   deviceType,
@@ -40,8 +41,17 @@ const PlatformContentFields = ({
   tags,
   injectedTags,
   selectedOfferDetails,
+  // new prop to disable personalization features for anonymous users
+  restrictPersonalization = false,
 }) => {
   const { title: titleError, message: messageError } = errors;
+
+  const titleErrorToShow = titleError || (restrictPersonalization && hasPersonalizationTags(content.title)
+    ? formatMessage(messages.personalizationTagsErrorMessage)
+    : "");
+  const messageErrorToShow = messageError || (restrictPersonalization && hasPersonalizationTags(content.message)
+    ? formatMessage(messages.personalizationTagsErrorMessage)
+    : "");
   const {
     handleTitleChange,
     handleMessageChange,
@@ -139,14 +149,19 @@ const PlatformContentFields = ({
   );
 
   const getTagList = useCallback(
-    (index) => (
-      <TagList
-        {...tagListProps}
-        onTagSelect={(value) => onTagSelect(value, index)}
-        onContextChange={handleOnTagsContextChange}
-      />
-    ),
-    [tagListProps, onTagSelect, handleOnTagsContextChange]
+    (index) => {
+      const disableMsg = restrictPersonalization ? formatMessage(messages.personalizationNotSupportedAnonymous) : undefined;
+      return (
+        <TagList
+          {...tagListProps}
+          disabled={restrictPersonalization}
+          disableTooltipMsg={disableMsg}
+          onTagSelect={(value) => onTagSelect(value, index)}
+          onContextChange={handleOnTagsContextChange}
+        />
+      );
+    },
+    [tagListProps, onTagSelect, handleOnTagsContextChange, restrictPersonalization, formatMessage]
   );
 
   const onButtonTagSelect = useCallback(
@@ -178,9 +193,9 @@ const PlatformContentFields = ({
             size="default"
             isRequired
             errorMessage={
-              titleError && (
+              titleErrorToShow && (
                 <CapError className="mobile-push-template-title-error">
-                  {titleError}
+                  {titleErrorToShow}
                 </CapError>
               )
             }
@@ -202,9 +217,9 @@ const PlatformContentFields = ({
             size="default"
             isRequired
             errorMessage={
-              messageError && (
+              messageErrorToShow && (
                 <CapError className="mobile-push-template-message-error">
-                  {messageError}
+                  {messageErrorToShow}
                 </CapError>
               )
             }
@@ -314,6 +329,10 @@ const PlatformContentFields = ({
                           tags={tags}
                           injectedTags={injectedTags}
                           selectedOfferDetails={selectedOfferDetails}
+                          disabled={restrictPersonalization}
+                          disableTooltipMsg={
+                            restrictPersonalization ? formatMessage(messages.personalizationNotSupportedAnonymous) : undefined
+                          }
                         />
                       </CapRow>
                       <CapInput
@@ -389,6 +408,11 @@ PlatformContentFields.propTypes = {
   linkProps: PropTypes.object.isRequired,
   sameContent: PropTypes.bool.isRequired,
   formatMessage: PropTypes.func.isRequired,
+  restrictPersonalization: PropTypes.bool,
+};
+
+PlatformContentFields.defaultProps = {
+  restrictPersonalization: false,
 };
 
 export default PlatformContentFields;