@capillarytech/creatives-library 8.0.286 → 8.0.287

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.286",
+  "version": "8.0.287",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/commonUtils.js

@@ -559,3 +559,6 @@ export const validateCarouselCards = (
     reasons,
   };
 };
+
+export const hasPersonalizationTags = (text = '') =>
+  (text && ((text.includes('{{') && text.includes('}}')) || (text.includes('[') && text.includes(']'))));

package/v2Components/CapTagList/index.js

@@ -476,7 +476,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           >
             <CapTooltip
               title={
-                fetchingSchemaError && (
+                this?.props?.disableTooltipMsg && this?.props?.disabled ? (
+                  this?.props?.disableTooltipMsg
+                ) : fetchingSchemaError ? (
                   <CapRow className="tooltip-text-container">
                     <CapLabel className="tooltip-text1">
                       {formatMessage(messages.somethingWentWrong)}
@@ -485,7 +487,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
                       {formatMessage(messages.labelFetchErrorMsg)}
                     </CapLabel>
                   </CapRow>
-                )
+                ) : null
               }
               placement="right"
             >
@@ -538,6 +540,8 @@ CapTagList.propTypes = {
   currentOrgDetails: PropTypes.object,
   channel: PropTypes.string,
   disabled: PropTypes.bool,
+  // Optional custom tooltip message when disabled (used for personalization restriction)
+  disableTooltipMsg: PropTypes.string,
   fetchingSchemaError: PropTypes.bool,
   popoverPlacement: PropTypes.string,
 };

package/v2Components/CapTagListWithInput/index.js

@@ -26,6 +26,7 @@ export const CapTagListWithInput = (props) => {
     className = '',
     userLocale = 'en',
     eventContextTags = [],
+    restrictPersonalization = false,
     // CapInput props
     inputId,
     inputValue = '',
@@ -78,6 +79,7 @@ export const CapTagListWithInput = (props) => {
             eventContextTags={eventContextTags}
             style={tagListStyle}
             popoverPlacement={popoverPlacement}
+            restrictPersonalization={restrictPersonalization}
           />
         )}
       </CapRow>
@@ -113,6 +115,7 @@ CapTagListWithInput.propTypes = {
   className: PropTypes.string,
   userLocale: PropTypes.string,
   eventContextTags: PropTypes.array,
+  restrictPersonalization: PropTypes.bool,
 
   // CapInput props
   inputId: PropTypes.string.isRequired,
@@ -150,6 +153,7 @@ CapTagListWithInput.defaultProps = {
   className: '',
   userLocale: 'en',
   eventContextTags: [],
+  restrictPersonalization: false,
   inputValue: '',
   inputSize: 'default',
   inputRequired: false,

package/v2Components/FormBuilder/index.js

@@ -63,7 +63,7 @@ import { REQUEST } from '../../v2Containers/Cap/constants'
 import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
 import { bindActionCreators } from 'redux';
-import { getChannelData, validateLiquidTemplateContent, validateMobilePushContent } from '../../utils/commonUtils';
+import { getChannelData, hasPersonalizationTags, validateLiquidTemplateContent, validateMobilePushContent } from '../../utils/commonUtils';
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
@@ -903,11 +903,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           if (errorData[parseInt(index)]) {
             if (message) {
               message = message.trim();
-
               if (message === "") {
                 errorData[parseInt(index)][`message-editor${selector}`] = true;
                 isValid = false;
                 isCurrentTabValid = false;
+              } else if (this.props.restrictPersonalization && hasPersonalizationTags(message)) {
+                errorData[parseInt(index)][`message-editor${selector}`] = true;
+                isValid = false;
+                isCurrentTabValid = false;
               } else {
                 errorData[parseInt(index)][`message-editor${selector}`] = false;
                 const tagValidationResponse = this.validateTags(message, tags, injectedTags, false, this.props?.isFullMode);
@@ -937,6 +940,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 errorData[parseInt(index)][`message-title${selector}`] = true;
                 isValid = false;
                 isCurrentTabValid = false;
+              } else if (this.props.restrictPersonalization && hasPersonalizationTags(title)) {
+                errorData[parseInt(index)][`message-title${selector}`] = true;
+                isValid = false;
+                isCurrentTabValid = false;
               } else {
                 errorData[parseInt(index)][`message-title${selector}`] = false;
                 const tagValidationResponse = this.validateTags(title, tags, injectedTags, false, this.props?.isFullMode);
@@ -2882,6 +2889,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       default:
         break;
     }
+
+    if (this.props.restrictPersonalization && hasPersonalizationTags(messageContent)) {
+      errorMessageText = formatMessage(messages.personalizationTagsErrorMessage);
+    }
     const prevErrorMessage = this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.[0];
     if (prevErrorMessage !== errorMessageText && errorMessageText && this.liquidFlow()) {
       this.setState((prevState) => ({
@@ -3047,6 +3058,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 userLocale={this.props.userLocale}
                 selectedOfferDetails={this.props.selectedOfferDetails}
                 eventContextTags={this.props?.eventContextTags}
+                restrictPersonalization={this.props.restrictPersonalization}
               />
             </CapColumn>
           );
@@ -3081,6 +3093,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 inputProps={val.inputProps || {}}
                 showInput={val.showInput !== false}
                 showTagList={val.showTagList !== false}
+                restrictPersonalization={this.props.restrictPersonalization}
               />
             </CapColumn>
           );
@@ -3457,8 +3470,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             const { TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
             const { formatMessage } = this.props.intl;
-            let errorMessageText = errorType === TAG_BRACKET_COUNT_MISMATCH_ERROR ?  formatMessage(globalMessages.unbalanacedCurlyBraces) :(val.errorMessage && ifError ? val.errorMessage : '');
             const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
+            // Show personalization error for title field inline (same as message textarea) when restrictPersonalization is true
+            const hasPersonalizationError = this.props.restrictPersonalization && hasPersonalizationTags(value);
+            if (hasPersonalizationError) {
+              ifError = true;
+            }
+            let errorMessageText = hasPersonalizationError
+              ? formatMessage(messages.personalizationTagsErrorMessage)
+              : (errorType === TAG_BRACKET_COUNT_MISMATCH_ERROR ? formatMessage(globalMessages.unbalanacedCurlyBraces) : (val.errorMessage && ifError ? val.errorMessage : ''));
             if (styling === 'semantic') {
               columns.push(
               <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
@@ -3709,6 +3729,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     selectedOfferDetails={this.props.selectedOfferDetails}
                     channel={channel}
                     eventContextTags={this.props?.eventContextTags}
+                    restrictPersonalization={this.props.restrictPersonalization}
                   />
                 </CapColumn>
               );
@@ -3760,6 +3781,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     inputProps={val.inputProps || {}}
                     showInput={val.showInput !== false}
                     showTagList={val.showTagList !== false}
+                    restrictPersonalization={this.props.restrictPersonalization}
                   />
                 </CapColumn>
               );
@@ -4403,6 +4425,7 @@ FormBuilder.propTypes = {
   forwardedTags: PropTypes.object.isRequired,
   isLoyaltyModule: PropTypes.bool.isRequired,
   isTestAndPreviewMode: PropTypes.bool, // Add new prop type
+  restrictPersonalization: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Components/FormBuilder/messages.js

@@ -102,4 +102,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.FormBuilder.base64ImageError',
     defaultMessage: 'Base64 images are not allowed. Please upload your image to a gallery and use it, or add the image URL instead.',
   },
+  personalizationTagsErrorMessage: {
+    id: `creatives.componentsV2.FormBuilder.personalizationTagsErrorMessage`,
+    defaultMessage: 'Personalization tags are not supported for anonymous customers, please remove the tags.',
+  },
 });

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -173,6 +173,9 @@ export function SlideBoxContent(props) {
       showTestAndPreviewSlidebox,
       handleTestAndPreview,
       handleCloseTestAndPreview,
+      restrictPersonalization = false,
+      isAnonymousType = false,
+      onPersonalizationTokensChange,
       isTestAndPreviewMode,
       onHtmlEditorValidationStateChange,
     } = props;
@@ -637,6 +640,8 @@ export function SlideBoxContent(props) {
         smsRegister={smsRegister}
         onShowTemplates={onShowTemplates}
         eventContextTags={eventContextTags}
+        restrictPersonalization={restrictPersonalization}
+        isAnonymousType={isAnonymousType}
       />
         )}
 
@@ -677,6 +682,8 @@ export function SlideBoxContent(props) {
         isTestAndPreviewMode={isTestAndPreviewMode}
         location={location}
         onHtmlEditorValidationStateChange={onHtmlEditorValidationStateChange}
+        restrictPersonalization={restrictPersonalization}
+        isAnonymousType={isAnonymousType}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -797,6 +804,9 @@ export function SlideBoxContent(props) {
             showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
             handleTestAndPreview={handleTestAndPreview}
             handleCloseTestAndPreview={handleCloseTestAndPreview}
+            restrictPersonalization={restrictPersonalization}
+            isAnonymousType={isAnonymousType}
+            onPersonalizationTokensChange={onPersonalizationTokensChange}
           />
         ) : (
           <MobilePushNew
@@ -824,6 +834,9 @@ export function SlideBoxContent(props) {
             eventContextTags={eventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             handleClose={handleClose}
+            restrictPersonalization={restrictPersonalization}
+            isAnonymousType={isAnonymousType}
+            onPersonalizationTokensChange={onPersonalizationTokensChange}
           />
         )
       )}
@@ -861,6 +874,9 @@ export function SlideBoxContent(props) {
             showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
             handleTestAndPreview={handleTestAndPreview}
             handleCloseTestAndPreview={handleCloseTestAndPreview}
+            restrictPersonalization={restrictPersonalization}
+            isAnonymousType={isAnonymousType}
+            onPersonalizationTokensChange={onPersonalizationTokensChange}
           />
         ) : (
           <MobilePushNew
@@ -895,6 +911,8 @@ export function SlideBoxContent(props) {
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             onCreateComplete={onCreateComplete}
             creativesMode={creativesMode}
+            restrictPersonalization={restrictPersonalization}
+            isAnonymousType={isAnonymousType}
           />
         )
       )}
@@ -1143,6 +1161,8 @@ export function SlideBoxContent(props) {
           supportedTags={supportedTags}
           selectedOfferDetails={selectedOfferDetails}
           eventContextTags={eventContextTags}
+          restrictPersonalization={restrictPersonalization}
+          isAnonymousType={isAnonymousType}
         />
       )}
       {isCreateRcs && (<Rcs

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -43,8 +43,11 @@ function SlideBoxFooter(props) {
     currentChannel,
     emailCreateMode,
     selectedEmailCreateMode,
+    restrictPersonalization = false,
+    isAnonymousType = false,
+    templateData = {},
+    hasPersonalizationTokenError: hasPersonalizationTokenErrorProp = false,
   } = props;
-
   // Calculate if buttons should be disabled
   // Only apply validation state checks for EMAIL channel in HTML Editor mode (not BEE/DragDrop)
   // For other channels, BEE editor, or when htmlEditorValidationState is not provided, don't disable based on validation
@@ -127,6 +130,32 @@ function SlideBoxFooter(props) {
   const hasBEEEditorErrors = isEmailChannel && isBEEEditorMode && (hasStandardErrors || hasLiquidErrors) && (!htmlEditorValidationState || !htmlEditorHasErrors);
 
   const shouldShowErrorInfoNote = hasBEEEditorErrors || isSupportCKEditor;
+
+  // Check for personalization tokens in title/message when anonymous user tries to save
+  const hasPersonalizationTokens = () => {
+    if (!isAnonymousType || !templateData) return false;
+
+    const androidTitle = templateData?.versions?.ANDROID?.base?.title || '';
+    const iosTitle = templateData?.versions?.IOS?.base?.title || '';
+    const androidMessageBody = templateData?.versions?.ANDROID?.base?.expandibleDetails?.message
+      || templateData?.versions?.ANDROID?.base?.expandableDetails?.message || '';
+    const iosMessageBody = templateData?.versions?.IOS?.base?.expandibleDetails?.message
+      || templateData?.versions?.IOS?.base?.expandableDetails?.message || '';
+    const contentToCheck = `${androidTitle} ${iosTitle} ${androidMessageBody} ${iosMessageBody}`;
+    // Check for liquid tags {{ }}
+    if (contentToCheck.includes('{{') && contentToCheck.includes('}}')) {
+      return true;
+    }
+    // Check for event context tags [
+    if (contentToCheck.includes('[') && contentToCheck.includes(']')) {
+      return true;
+    }
+    return false;
+  };
+
+  // Use prop from parent (FormBuilder flow) when available; else fall back to templateData check
+  const hasPersonalizationTokenError = hasPersonalizationTokenErrorProp === true || (restrictPersonalization && hasPersonalizationTokens());
+
   return (
     <div className="template-footer-width">
       {shouldShowErrorInfoNote && (
@@ -147,7 +176,7 @@ function SlideBoxFooter(props) {
             <CapRow>
               <CapButton
                 onClick={onSave}
-                disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons}
+                disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons || hasPersonalizationTokenError}
               >
                 {isFullMode ? (
                   getFullModeSaveBtn(slidBoxContent, isCreatingTemplate)
@@ -159,7 +188,7 @@ function SlideBoxFooter(props) {
                 <CapButton
                   type="secondary"
                   onClick={onTestAndPreview}
-                  disabled={shouldDisableButtons}
+                  disabled={shouldDisableButtons || hasPersonalizationTokenError}
                   style={{ marginLeft: '8px' }}
                 >
                   <FormattedMessage {...messages.testAndPreview} />
@@ -220,6 +249,11 @@ SlideBoxFooter.propTypes = {
   currentChannel: PropTypes.string,
   emailCreateMode: PropTypes.string,
   selectedEmailCreateMode: PropTypes.string,
+  restrictPersonalization: PropTypes.bool,
+  isAnonymousType: PropTypes.bool,
+  templateData: PropTypes.object,
+  formData: PropTypes.array,
+  hasPersonalizationTokenError: PropTypes.bool,
 };
 
 SlideBoxFooter.defaultProps = {
@@ -245,5 +279,7 @@ SlideBoxFooter.defaultProps = {
   currentChannel: '',
   emailCreateMode: '',
   selectedEmailCreateMode: '',
+  formData: [],
+  hasPersonalizationTokenError: false,
 };
 export default SlideBoxFooter;

package/v2Containers/CreativesContainer/constants.js

@@ -52,3 +52,9 @@ export const GENERIC = "GENERIC";
 export const LIQUID_ERROR_MSG = "LIQUID_ERROR_MSG";
 export const STANDARD_ERROR_MSG = "STANDARD_ERROR_MSG";
 export const COMMON_CHANNELS = ['sms', 'email', 'wechat', 'mobilepush', 'webpush', 'line', 'viber', 'facebook', 'call_task', 'ftp', 'assets'];
+export const MIXED = "MIXED";
+export const VISITOR = "VISITOR";
+export const ALLOWED_CHANNELS_FOR_ANONYMOUS = ['mobilepush', 'webpush'];
+export const ALL_CHANNELS_NEW = [
+  'sms', 'email', 'whatsapp', 'facebook', 'line', 'viber', 'rcs', 'zalo', 'inapp', 'call_task', 'ftp',
+];

package/v2Containers/CreativesContainer/index.js

@@ -130,6 +130,7 @@ export class Creatives extends React.Component {
         validationComplete: false, // Flag to track if validation has completed
         errorsAcknowledged: false, // Flag to track if user has acknowledged errors by clicking redirection icon
       },
+      hasPersonalizationTokenError: false, // Track personalization token errors in form
     };
     this.liquidFlow = Boolean(commonUtil.hasLiquidSupportFeature());
     this.creativesTemplateSteps = {
@@ -1777,6 +1778,12 @@ export class Creatives extends React.Component {
     });
   }
 
+  handlePersonalizationTokensChange = (hasTokens) => {
+    this.setState({
+      hasPersonalizationTokenError: hasTokens,
+    });
+  }
+
   shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel
     const {
       slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppEditorType, weChatTemplateType,
@@ -1944,6 +1951,21 @@ export class Creatives extends React.Component {
           ? CAP_SPACE_32
           : 0;
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
+
+    // Compute anonymous user type and channel restrictions
+    const { customerType = '' } = this.props;
+    const isAnonymousType = customerType === constants.VISITOR || customerType === constants.MIXED;
+    const restrictPersonalization = isAnonymousType;
+
+    // For anonymous users, only MOBILEPUSH and WEBPUSH channels are allowed
+    let updatedChannelsToHide = [...(channelsToHide || [])];
+    if (isAnonymousType) {
+      const allowedChannels = constants.ALLOWED_CHANNELS_FOR_ANONYMOUS;
+      const allChannels = constants.ALL_CHANNELS_NEW;
+      const channelsToRemove = allChannels.filter((channel) => !allowedChannels.includes(channel));
+      updatedChannelsToHide = [...new Set([...updatedChannelsToHide, ...channelsToRemove])];
+    }
+
     return (
       <SlideBoxWrapper
         slideBoxWrapperMargin={slideBoxWrapperMargin}
@@ -2014,10 +2036,13 @@ export class Creatives extends React.Component {
               mobilePushCreateMode={mobilePushCreateMode}
               showTemplateName={this.showTemplateName}
               onValidationFail={this.onValidationFail}
-              channelsToHide={channelsToHide}
+              channelsToHide={updatedChannelsToHide}
               forwardedTags={forwardedTags}
               selectedOfferDetails={selectedOfferDetails}
               channelsToDisable={channelsToDisable}
+              restrictPersonalization={restrictPersonalization}
+              isAnonymousType={isAnonymousType}
+              customerType={customerType}
               weChatTemplateType={weChatTemplateType}
               onWechatTemplateChange={this.onWechatTemplateChange}
               weChatMaptemplateStep={weChatMaptemplateStep}
@@ -2050,6 +2075,7 @@ export class Creatives extends React.Component {
               handleCloseTestAndPreview={this.handleCloseTestAndPreview}
               isTestAndPreviewMode={(() => this.state.isTestAndPreviewMode)()}
               onHtmlEditorValidationStateChange={this.updateHtmlEditorValidationState}
+              onPersonalizationTokensChange={this.handlePersonalizationTokensChange}
             />
           )}
           footer={this.shouldShowFooter() ? (
@@ -2082,6 +2108,10 @@ export class Creatives extends React.Component {
               })()}
               htmlEditorValidationState={htmlEditorValidationState}
               isCreatingTemplate={slidBoxContent === 'createTemplate' && currentChannel.toUpperCase() === constants.EMAIL}
+              restrictPersonalization={restrictPersonalization}
+              isAnonymousType={isAnonymousType}
+              templateData={templateData}
+              hasPersonalizationTokenError={this.state.hasPersonalizationTokenError}
             />
           ) : isLiquidValidationError && (
             <CapRow className="template-footer-width">
@@ -2131,6 +2161,7 @@ Creatives.propTypes = {
   hostName: PropTypes.string,
   eventContextTags: PropTypes.array,
   loyaltyTagFetchingDependencies: PropTypes.object,
+  customerType: PropTypes.string,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func,
   }),

package/v2Containers/CreativesContainer/messages.js

@@ -378,4 +378,16 @@ export default defineMessages({
     id: `${scope}.next`,
     defaultMessage: `Next`,
   },
+  "channelNotSupportedAnonymous": {
+    id: `${scope}.channelNotSupportedAnonymous`,
+    defaultMessage: `This channel is not supported for anonymous customers`,
+  },
+  "personalizationNotSupportedAnonymous": {
+    id: `${scope}.personalizationNotSupportedAnonymous`,
+    defaultMessage: `Personalization tags are not supported for anonymous customers`,
+  },
+  "personalizationTokensErrorMessage": {
+    id: `${scope}.personalizationTokensErrorMessage`,
+    defaultMessage: `Personalization tags are not supported for anonymous customers. Please remove the tags.`,
+  },
 });