@capillarytech/creatives-library 8.0.288 → 8.0.290-alpha.0

package/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";
@@ -817,11 +815,9 @@ 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 (isLiquidFlow && hasTags) {
+    if (hasTags) {
       validateInAppContent(payload, {
         currentTab: panes === ANDROID ? 1 : 2, // Convert ANDROID/IOS to tab numbers
         onError,
@@ -829,10 +825,6 @@ 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 = [
@@ -847,92 +839,7 @@ 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();
     }
   };
@@ -1038,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/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/v2Containers/MobilePush/Create/index.js

@@ -678,31 +678,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);
       }
     }

package/v2Containers/MobilePush/Edit/index.js

@@ -705,32 +705,22 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   // eslint-disable-next-line react/sort-comp
   showError = () => {
     const {intl} = this.props;
-    const {errorData} = this.state;
+    const {errorData, schema} = 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);
-      const isIosInvalid = Object.values(errorData[1]).includes(true);
+      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);
       }
     }

package/v2Containers/MobilePushNew/index.js

@@ -77,7 +77,6 @@ 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";
@@ -803,10 +802,9 @@ const MobilePushNew = ({
     (value) => {
       let errorTemplateDescMessage = "";
 
-      const { unsupportedTags, isBraceError } = validateTags({
+      const { isBraceError } = validateTags({
         content: value,
         tagsParam: tags,
-        injectedTagsParams: injectedTags,
         location,
         tagModule: getDefaultTags,
         isFullMode,
@@ -816,14 +814,6 @@ const MobilePushNew = ({
           messages.emptyTemplateDescErrorMessage
         );
       }
-      if (unsupportedTags?.length > 0) {
-        errorTemplateDescMessage = formatMessage(
-          globalMessages.unsupportedTagsValidationError,
-          {
-            unsupportedTags,
-          }
-        );
-      }
       if (isBraceError) {
         errorTemplateDescMessage = formatMessage(
           globalMessages.unbalanacedCurlyBraces
@@ -2659,20 +2649,6 @@ 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),
     });
   }, [
@@ -2681,12 +2657,9 @@ const MobilePushNew = ({
     activeTab,
     globalActionsProps,
     formatMessage,
-    metaEntities,
     accountData,
   ]);
 
-  const isLiquidFlow = hasLiquidSupportFeature();
-
   useEffect(() => {
     // Always map to { label } for both platforms
     const newButtons = Array.isArray(ctaData)
@@ -3083,11 +3056,7 @@ const MobilePushNew = ({
                     <CapButton
                       type="primary"
                       onClick={() => {
-                        if (isLiquidFlow) {
-                          liquidMiddleWare();
-                        } else {
-                          handleSave();
-                        }
+                        liquidMiddleWare();
                       }}
                       className="save-button"
                       disabled={isSaveDisabled}

package/v2Containers/Rcs/index.js

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

package/v2Containers/Sms/Create/index.js

@@ -51,6 +51,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       modalContent: {title: "Alert", body: "Do you really want to delete this version?", type: 'confirm', id: 'sms-version-modal'},
       showTestAndPreviewSlidebox: false,
       isTestAndPreviewMode: false,
+      pendingGetFormData: false,
     };
     this.saveFormData = this.saveFormData.bind(this);
     this.onFormDataChange = this.onFormDataChange.bind(this);
@@ -140,8 +141,16 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
-      nextProps.getFormSubscriptionData(this.getFormData());
+    if (!nextProps.isFullMode && nextProps.isGetFormData) {
+      // Trigger validation first; response will be sent in setFormValidity callback so pasted content is validated
+      this.setState({ startValidation: true, pendingGetFormData: true });
+      // Fallback: if FormBuilder never calls onFormValidityChange (e.g. early return), still respond to parent
+      this.pendingGetFormDataTimeout = setTimeout(() => {
+        if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+          this.props.getFormSubscriptionData(this.getFormData());
+          this.setState({ pendingGetFormData: false, startValidation: false });
+        }
+      }, 300);
     } else if (nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
       this.startValidation();
     }
@@ -171,6 +180,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentWillUnmount() {
+    if (this.pendingGetFormDataTimeout) {
+      clearTimeout(this.pendingGetFormDataTimeout);
+    }
     if (this.props.setIsLoadingContent) {
       this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
     }
@@ -349,7 +361,16 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   setFormValidity(isFormValid, errorData) {
-    this.setState({isFormValid, errorData});
+    this.setState({ isFormValid, errorData }, () => {
+      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+        if (this.pendingGetFormDataTimeout) {
+          clearTimeout(this.pendingGetFormDataTimeout);
+          this.pendingGetFormDataTimeout = null;
+        }
+        this.props.getFormSubscriptionData(this.getFormData());
+        this.setState({ pendingGetFormData: false, startValidation: false });
+      }
+    });
   }
 
   injectMessages(elem) {
@@ -970,6 +991,13 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   saveFormData() {
+    // In library mode the template is submitted via getFormSubscriptionData (triggered by startValidation →
+    // onFormValidityChange → setFormValidity). Calling createTemplate API here would set
+    // createTemplateInProgress: true in redux and, because the slidebox closes before the API responds,
+    // that flag would never be reset – causing the spinner to be stuck on the next open.
+    if (!this.props.isFullMode) {
+      return;
+    }
     //Logic to save in db etc
     const formData = _.cloneDeep(this.state.formData);
     const obj = {};

package/v2Containers/Sms/Create/messages.js

@@ -90,6 +90,10 @@ export default defineMessages({
     id: 'creatives.containersV2.Create.validationError',
     defaultMessage: 'Validation error',
   },
+  "unbalancedCurlyBraces": {
+    id: 'creatives.containersV2.Create.unbalancedCurlyBraces',
+    defaultMessage: 'Please close all curly braces in the message.',
+  },
   "smsTemplateCreatedSuccess": {
     id: 'creatives.containersV2.Create.smsTemplateCreatedSuccess',
     defaultMessage: 'SMS Template Created Successfully',

package/v2Containers/Sms/Edit/index.js

@@ -52,6 +52,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       modalContent: {title: "Alert", body: "Do you really want to delete this version?", type: 'confirm', id: 'sms-version-modal'},
       showTestAndPreviewSlidebox: false,
       isTestAndPreviewMode: false,
+      pendingGetFormData: false,
     };
     this.saveFormData = this.saveFormData.bind(this);
     this.onFormDataChange = this.onFormDataChange.bind(this);
@@ -134,8 +135,14 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
-      nextProps.getFormSubscriptionData(this.getFormData());
+    if (!nextProps.isFullMode && nextProps.isGetFormData) {
+      this.setState({ startValidation: true, pendingGetFormData: true });
+      this.pendingGetFormDataTimeout = setTimeout(() => {
+        if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+          this.props.getFormSubscriptionData(this.getFormData());
+          this.setState({ pendingGetFormData: false, startValidation: false });
+        }
+      }, 300);
     }
     if ( nextProps.location.query.module === 'library' && nextProps.subscriptionTemplateDetails && nextProps.subscriptionTemplateDetails.name && _.isEmpty(this.state.editData) && !_.isEmpty(this.state.schema)) {
       this.setEditState(nextProps.subscriptionTemplateDetails);
@@ -189,6 +196,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillUnmount() {
+    if (this.pendingGetFormDataTimeout) {
+      clearTimeout(this.pendingGetFormDataTimeout);
+    }
     if (this.props.setIsLoadingContent) {
       this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
     }
@@ -317,7 +327,16 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   setFormValidity(isFormValid, errorData) {
-    this.setState({isFormValid, errorData});
+    this.setState({ isFormValid, errorData }, () => {
+      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+        if (this.pendingGetFormDataTimeout) {
+          clearTimeout(this.pendingGetFormDataTimeout);
+          this.pendingGetFormDataTimeout = null;
+        }
+        this.props.getFormSubscriptionData(this.getFormData());
+        this.setState({ pendingGetFormData: false, startValidation: false });
+      }
+    });
   }
 
   getFormData(e, value) {
@@ -923,6 +942,13 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({startValidation: false});
   }
   saveFormData() {
+    // In library mode the template is submitted via getFormSubscriptionData, not editTemplate API.
+    // Calling editTemplate here would set editTemplateInProgress: true in redux and, because the
+    // slidebox closes before the API responds, that flag would never be reset – causing the spinner
+    // to be stuck on the next open.
+    if (!this.props.isFullMode) {
+      return;
+    }
     //Logic to save in db etc
     //saveFormData gets called only when validation result is true
 

package/v2Containers/Sms/commonMethods.js

@@ -1,18 +1,18 @@
 import isEmpty from 'lodash/isEmpty';
-import { CapNotification } from '@capillarytech/cap-ui-library';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import messages from './Create/messages';
 export function showError() {
   const {intl} = this.props;
   const {errorData} = this.state;
   const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
   if (!isEmpty(this.state.formData) && !this.state.isFormValid) {
-    const isSmsInvalid = Object.values(errorData[0]).includes(true);
+    const err0 = errorData[0] || {};
+    const isSmsInvalid = Object.values(err0).includes(true);
+    const isBraceError = Boolean(err0['bracket-error']);
     if (isSmsInvalid) {
-      const invalidTags = errorData[0]['invalid-tags'];
-      if (!isEmpty(invalidTags)) {
-        errorMessage.description = `${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
-      }
       CapNotification.error(errorMessage);
+    } else if (isBraceError) {
+      // Do not trigger toast for this path; footer error is the reliable UX in SMS library flow.
     }
   }
 }