cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/InappAdvance/index.js

@@ -50,9 +50,7 @@ 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";
@@ -818,23 +816,18 @@ export const InappAdvanced = (props) => {
     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 (isLiquidFlow && hasTags) {
-      validateInAppContent(payload, {
+
+    if (!isFullMode || hasTags) {
+      await validateInAppContent(payload, {
         currentTab: panes === ANDROID ? 1 : 2, // Convert ANDROID/IOS to tab numbers
         onError,
         onSuccess,
         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 = [
             /dynamic_expiry_date_after_\d+_days\.FORMAT_\d/,
             /unsubscribe\(#[a-zA-Z\d]{6}\)/,
@@ -842,96 +835,12 @@ export const InappAdvanced = (props) => {
             /SURVEY.*\.TOKEN/,
             /^[A-Za-z].*\([a-zA-Z\d]*\)/,
           ];
-
           return skipRegexes.some((regex) => regex.test(tag));
         },
         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 || [],
-        }) || {};
-
-        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 || [],
-        }) || {};
-
-        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();
+      await onSuccess();
     }
   };
 
@@ -1036,15 +945,7 @@ export const InappAdvanced = (props) => {
             )}
             <CapButton
               onClick={async () => {
-                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();
-                }
+                await liquidMiddleWare();
               }}
               disabled={isDisableDone()}
               className="inapp-create-btn"

package/app/v2Containers/InappAdvance/tests/index.test.js

@@ -61,6 +61,7 @@ describe('InappAdvanced Component', () => {
 
     const mockGlobalActions = {
       fetchSchemaForEntity: jest.fn(),
+      getLiquidTags: jest.fn((content, callback) => callback({ askAiraResponse: { data: [] }, isError: false })),
     };
 
     defaultProps = {
@@ -409,6 +410,7 @@ describe('InappAdvanced Component', () => {
           actions: mockActions,
           globalActions: {
             fetchSchemaForEntity: jest.fn(),
+            getLiquidTags: jest.fn((content, callback) => callback({ askAiraResponse: { data: [] }, isError: false })),
           },
           location: {
             pathname: '/inapp/create',

package/app/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/app/v2Containers/Line/Container/Text/index.js

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

package/app/v2Containers/MobilePush/Create/index.js

@@ -38,6 +38,8 @@ import v2MobilePushCreateReducer from './reducer';
 import { v2MobilePushWatchDuplicateTemplateSaga } from './sagas';
 import { EXTERNAL_LINK_LOWERCASE } from './constants';
 import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
+import { checkForPersonalizationTokens, validateMobilePushContent } from '../../../utils/commonUtils';
+import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -63,6 +65,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         injectedTags: {},
       };
     }
+    this.hasFetchedInitialTagsRef = false;
+    this.lastFetchedTagContextRef = null;
   }
   componentWillMount = () => {
     if (this.props.route.name === 'view') {
@@ -91,8 +95,56 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.props.globalActions.fetchSchemaForEntity(query);
   };
   componentWillReceiveProps = (nextProps) => {
-    if (nextProps.isGetFormData && !this.props.isFullMode) {
-      nextProps.getFormLibraryData(this.getFormData());
+    // Library mode: on Done click (transition to isGetFormData), run extractTags only when no existing validation errors (braces, personalization, etc.)
+    if (nextProps.isGetFormData && !this.props.isGetFormData && !nextProps.isFullMode) {
+      // If form already has validation errors (braces, personalization tags, etc.), do not call extractTags or return payload; always return early
+      if (!this.state.isFormValid) {
+        if (typeof nextProps.onValidationFail === 'function') {
+          nextProps.onValidationFail();
+        }
+        return;
+      }
+      const hasAllValidationCallbacks =
+        typeof nextProps.getLiquidTags === 'function' &&
+        typeof nextProps.showLiquidErrorInFooter === 'function' &&
+        typeof nextProps.onValidationFail === 'function';
+
+      if (hasAllValidationCallbacks) {
+        const formDataArr = [this.state.formData?.[0], this.state.formData?.[1]];
+        validateMobilePushContent(formDataArr, {
+          currentTab: this.state.currentTab,
+          getLiquidTags: nextProps.getLiquidTags,
+          formatMessage: this.props.intl.formatMessage,
+          messages: formBuilderMessages,
+          onError: (err) => {
+            const { standardErrors = [], liquidErrors = [] } = err;
+            // _validatePlatformSpecificContent passes { standardErrors: { ANDROID, IOS, generic }, liquidErrors: { ... } }; footer expects arrays
+            const toArray = (v) => (Array.isArray(v) ? v : (v && typeof v === 'object' ? [].concat(...Object.values(v)) : []));
+            const STANDARD_ERROR_MSG = toArray(standardErrors);
+            const LIQUID_ERROR_MSG = toArray(liquidErrors);
+            if (typeof nextProps.showLiquidErrorInFooter === 'function') {
+              nextProps.showLiquidErrorInFooter(
+                { STANDARD_ERROR_MSG, LIQUID_ERROR_MSG },
+                this.state.currentTab
+              );
+            }
+            // Only trigger onValidationFail when there are actual errors; skip when helper called onError with empty arrays (reset case)
+            if ((STANDARD_ERROR_MSG.length > 0 || LIQUID_ERROR_MSG.length > 0) && typeof nextProps.onValidationFail === 'function') {
+              nextProps.onValidationFail();
+            }
+          },
+          onSuccess: () => {
+            if (this.state.isFormValid && typeof nextProps.getFormLibraryData === 'function') {
+              nextProps.getFormLibraryData(this.getFormData());
+            }
+          },
+        });
+      } else {
+        // Fail closed: require full validation callback set; treat any missing callback as validation failure
+        if (typeof nextProps.onValidationFail === 'function') {
+          nextProps.onValidationFail();
+        }
+      }
     } else if (nextProps.isGetFormData && this.props.isGetFormData !== nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
       this.startValidation();
     }
@@ -132,16 +184,19 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       }
       schema.standalone.sections.splice(1, 1);
       this.injectEvents(schema);
-      const query = {
-        layout: 'mobilepush',
-        type: 'TAG',
-        context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
-        embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
-      };
-      if (this.props.getDefaultTags) {
-        query.context = this.props.getDefaultTags;
+      if (!this.hasFetchedInitialTagsRef) {
+        this.hasFetchedInitialTagsRef = true;
+        const context = this.props.getDefaultTags
+          || (this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default');
+        this.lastFetchedTagContextRef = typeof context === 'string' ? context.toLowerCase() : context;
+        const query = {
+          layout: 'mobilepush',
+          type: 'TAG',
+          context: this.lastFetchedTagContextRef,
+          embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
+        };
+        this.props.globalActions.fetchSchemaForEntity(query);
       }
-      this.props.globalActions.fetchSchemaForEntity(query);
     }
   };
   componentWillUnmount = () => {
@@ -156,6 +211,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');
@@ -663,31 +727,21 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
   showError = () => {
     const {intl} = this.props;
-    const {errorData} = this.state;
+    const {errorData, schema} = this.state;
     const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
     if (!isEmpty(this.state.formData) && !this.state.isFormValid) {
       let tab = this.state.currentTab;
-      const isAndroidInvalid = Object.values(errorData[0]).includes(true);
-      const isIosInvalid = Object.values(errorData[1]).includes(true);
-      let isTagErrorExist = false;
+      const isAndroidInvalid = Object.values(errorData[0] || {}).includes(true);
+      const isIosInvalid = Object.values(errorData[1] || {}).includes(true);
+      const isIosTabVisible = get(schema, 'containers[0].panes[1].isSupported', true) !== 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) {
+      } else if (isIosInvalid && isIosTabVisible) {
         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 || isTagErrorExist) {
+      if (tab !== this.state.currentTab) {
         CapNotification.error(errorMessage);
       }
     }
@@ -1499,6 +1553,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 {
@@ -1771,10 +1836,15 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.injectEvents(schema);
   };
   handleOnTagsContextChange = (data) => {
+    const context = (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase();
+    if (this.lastFetchedTagContextRef === context) {
+      return;
+    }
+    this.lastFetchedTagContextRef = context;
     const query = {
       layout: 'mobilepush',
       type: 'TAG',
-      context: (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase(),
+      context,
       embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
     };
     this.props.globalActions.fetchSchemaForEntity(query);
@@ -1896,7 +1966,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
+                waitEventContextTags={this.props?.waitEventContextTags}
                 messageDetails={this.props?.messageDetails}
+                restrictPersonalization={this.props.restrictPersonalization}
               />
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
@@ -1997,10 +2069,15 @@ Create.propTypes = {
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
+  getLiquidTags: PropTypes.func,
   showLiquidErrorInFooter: PropTypes.func,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
+  restrictPersonalization: PropTypes.bool,
+  isAnonymousType: PropTypes.bool,
+  onPersonalizationTokensChange: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/app/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.',
+  },
 });