@capillarytech/creatives-library 8.0.292-alpha.0 → 8.0.293

package/v2Containers/Sms/Create/index.js

@@ -51,7 +51,6 @@ 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);
@@ -141,9 +140,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentWillReceiveProps(nextProps) {
-    // Only trigger on actual Done click (isGetFormData false -> true). Prevents auto-submit after user fixes brace error.
-    if (!nextProps.isFullMode && nextProps.isGetFormData && !this.props.isGetFormData) {
-      this.setState({ startValidation: true, pendingGetFormData: true });
+    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
+      nextProps.getFormSubscriptionData(this.getFormData());
     } else if (nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
       this.startValidation();
     }
@@ -173,9 +171,6 @@ 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
     }
@@ -204,10 +199,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (currentTab) {
       this.setState({currentTab});
     }
-    // Clear footer validation errors on input change so they refresh on next validation
-    if (this.props.showLiquidErrorInFooter) {
-      this.props.showLiquidErrorInFooter({ STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] });
-    }
   }
 
   onTagSelect(data, currentTab) {
@@ -358,25 +349,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   setFormValidity(isFormValid, errorData) {
-    this.setState({ isFormValid, errorData }, () => {
-      if (this.state.pendingGetFormData && !isFormValid) {
-        this.setState({ pendingGetFormData: false, startValidation: false });
-        // Reset parent's Done state so next Done click is a fresh attempt
-        if (this.props.onValidationFail) {
-          this.props.onValidationFail();
-        }
-        return;
-      }
-      // In library mode with SMS, submit only when FormBuilder calls onSubmit (after liquid validation).
-      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData && this.props.isFullMode) {
-        if (this.pendingGetFormDataTimeout) {
-          clearTimeout(this.pendingGetFormDataTimeout);
-          this.pendingGetFormDataTimeout = null;
-        }
-        this.props.getFormSubscriptionData(this.getFormData());
-        this.setState({ pendingGetFormData: false, startValidation: false });
-      }
-    });
+    this.setState({isFormValid, errorData});
   }
 
   injectMessages(elem) {
@@ -997,15 +970,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   saveFormData() {
-    // In library mode: FormBuilder calls onSubmit only after liquid validation succeeds.
-    // Submit to parent here so the slidebox can close with valid data.
-    if (!this.props.isFullMode) {
-      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
-        this.props.getFormSubscriptionData(this.getFormData());
-        this.setState({ pendingGetFormData: false, startValidation: false });
-      }
-      return;
-    }
     //Logic to save in db etc
     const formData = _.cloneDeep(this.state.formData);
     const obj = {};

package/v2Containers/Sms/Create/messages.js

@@ -90,10 +90,6 @@ 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,7 +52,6 @@ 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);
@@ -135,8 +134,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillReceiveProps(nextProps) {
-    if (!nextProps.isFullMode && nextProps.isGetFormData && !this.props.isGetFormData) {
-      this.setState({ startValidation: true, pendingGetFormData: true });
+    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
+      nextProps.getFormSubscriptionData(this.getFormData());
     }
     if ( nextProps.location.query.module === 'library' && nextProps.subscriptionTemplateDetails && nextProps.subscriptionTemplateDetails.name && _.isEmpty(this.state.editData) && !_.isEmpty(this.state.schema)) {
       this.setEditState(nextProps.subscriptionTemplateDetails);
@@ -190,9 +189,6 @@ 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
     }
@@ -218,10 +214,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (currentTab) {
       this.setState({currentTab});
     }
-    // Clear footer validation errors on input change so they refresh on next validation
-    if (this.props.showLiquidErrorInFooter) {
-      this.props.showLiquidErrorInFooter({ STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] });
-    }
   }
 
   onVersionNameChange() {
@@ -325,23 +317,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   setFormValidity(isFormValid, errorData) {
-    this.setState({ isFormValid, errorData }, () => {
-      if (this.state.pendingGetFormData && !isFormValid) {
-        this.setState({ pendingGetFormData: false, startValidation: false });
-        if (this.props.onValidationFail) {
-          this.props.onValidationFail();
-        }
-        return;
-      }
-      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData && this.props.isFullMode) {
-        if (this.pendingGetFormDataTimeout) {
-          clearTimeout(this.pendingGetFormDataTimeout);
-          this.pendingGetFormDataTimeout = null;
-        }
-        this.props.getFormSubscriptionData(this.getFormData());
-        this.setState({ pendingGetFormData: false, startValidation: false });
-      }
-    });
+    this.setState({isFormValid, errorData});
   }
 
   getFormData(e, value) {
@@ -947,14 +923,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({startValidation: false});
   }
   saveFormData() {
-    // In library mode: FormBuilder calls onSubmit only after liquid validation succeeds.
-    if (!this.props.isFullMode) {
-      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
-        this.props.getFormSubscriptionData(this.getFormData());
-        this.setState({ pendingGetFormData: false, startValidation: false });
-      }
-      return;
-    }
     //Logic to save in db etc
     //saveFormData gets called only when validation result is true
 

package/v2Containers/Sms/commonMethods.js

@@ -1,14 +1,17 @@
 import isEmpty from 'lodash/isEmpty';
-import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import { CapNotification } from '@capillarytech/cap-ui-library';
 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 err0 = errorData[0] || {};
-    const isSmsInvalid = Object.values(err0).includes(true);
+    const isSmsInvalid = Object.values(errorData[0]).includes(true);
     if (isSmsInvalid) {
+      const invalidTags = errorData[0]['invalid-tags'];
+      if (!isEmpty(invalidTags)) {
+        errorMessage.description = `${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
+      }
       CapNotification.error(errorMessage);
     }
   }

package/v2Containers/SmsTrai/Edit/index.js

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