@capillarytech/creatives-library 8.0.287 → 8.0.289

package/package.json

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

package/utils/commonUtils.js

@@ -562,3 +562,28 @@ export const validateCarouselCards = (
 
 export const hasPersonalizationTags = (text = '') =>
   (text && ((text.includes('{{') && text.includes('}}')) || (text.includes('[') && text.includes(']'))));
+
+export const getMessageForDevice = (templateData, device) => templateData?.versions?.[device]?.base?.expandableDetails?.message;
+
+export const getTitleForDevice = (templateData, device) => templateData?.versions?.[device]?.base?.title || '';
+
+export const checkForPersonalizationTokens = (formData) => {
+  // Check for {{ }} (liquid tags) and [ ] (event context tags) in mobile push content
+  const tokenRegex = /\{\{[\s\S]*?\}\}|\[[\s\S]*?\]/;
+
+  // Check all tabs/versions for personalization tokens
+  if (formData && typeof formData === 'object') {
+    for (const key in formData) {
+      const tabData = formData[key];
+      if (tabData && typeof tabData === 'object') {
+        for (const fieldKey in tabData) {
+          const fieldValue = tabData[fieldKey];
+          if (typeof fieldValue === 'string' && tokenRegex.test(fieldValue)) {
+            return true;
+          }
+        }
+      }
+    }
+  }
+  return false;
+};

package/v2Components/CapTagList/index.js

@@ -456,6 +456,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         </CapSpin>
       </CapRow>
     );
+    const {disableTooltipMsg, disabled} = this.props || {};
     return (
       <>
         {hidePopover ? (
@@ -476,8 +477,8 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           >
             <CapTooltip
               title={
-                this?.props?.disableTooltipMsg && this?.props?.disabled ? (
-                  this?.props?.disableTooltipMsg
+                disableTooltipMsg && disabled ? (
+                  disableTooltipMsg
                 ) : fetchingSchemaError ? (
                   <CapRow className="tooltip-text-container">
                     <CapLabel className="tooltip-text1">

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -9,6 +9,7 @@ import ErrorInfoNote from '../../v2Components/ErrorInfoNote';
 import { PREVIEW } from './constants';
 import { EMAIL_CREATE_MODES } from '../EmailWrapper/constants';
 import { hasSupportCKEditor } from '../../utils/common';
+import { getMessageForDevice, getTitleForDevice } from '../../utils/commonUtils';
 
 function getFullModeSaveBtn(slidBoxContent, isCreatingTemplate) {
   if (isCreatingTemplate) {
@@ -135,12 +136,11 @@ function SlideBoxFooter(props) {
   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 androidTitle = getTitleForDevice(templateData, 'ANDROID') || '';
+    const iosTitle = getTitleForDevice(templateData, 'IOS') || '';
+    const androidMessageBody = getMessageForDevice(templateData, 'ANDROID') || '';
+    const iosMessageBody = getMessageForDevice(templateData, 'IOS') || '';
+    // Check for personalization tags {{ }} in title or message body
     const contentToCheck = `${androidTitle} ${iosTitle} ${androidMessageBody} ${iosMessageBody}`;
     // Check for liquid tags {{ }}
     if (contentToCheck.includes('{{') && contentToCheck.includes('}}')) {

package/v2Containers/CreativesContainer/index.js

@@ -1954,7 +1954,7 @@ export class Creatives extends React.Component {
 
     // Compute anonymous user type and channel restrictions
     const { customerType = '' } = this.props;
-    const isAnonymousType = customerType === constants.VISITOR || customerType === constants.MIXED;
+    const isAnonymousType = [constants.VISITOR, constants.MIXED].includes(customerType);
     const restrictPersonalization = isAnonymousType;
 
     // For anonymous users, only MOBILEPUSH and WEBPUSH channels are allowed

package/v2Containers/CreativesContainer/messages.js

@@ -388,6 +388,6 @@ export default defineMessages({
   },
   "personalizationTokensErrorMessage": {
     id: `${scope}.personalizationTokensErrorMessage`,
-    defaultMessage: `Personalization tags are not supported for anonymous customers. Please remove the tags.`,
+    defaultMessage: `Personalization tags are not supported for anonymous customers, please remove the tags.`,
   },
 });

package/v2Containers/CreativesContainer/tests/SlideBoxFooter.test.js

@@ -350,7 +350,7 @@ describe('shouldCheckValidation (line 79)', () => {
             IOS: {
               base: {
                 title: 'Static',
-                expandibleDetails: {
+                expandableDetails: {
                   message: 'Message with {{variable}}',
                 },
               },

package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/content.test.js.snap

@@ -3117,7 +3117,6 @@ new message content.",
                                     },
                                   ]
                                 }
-                                showTruncatedTooltip={false}
                                 size="large"
                                 style={
                                   Object {
@@ -3136,7 +3135,6 @@ new message content.",
                                     />
                                   }
                                   onChange={[Function]}
-                                  onDropdownVisibleChange={[Function]}
                                   removeIcon={
                                     <CapIcon
                                       size="s"
@@ -3201,7 +3199,6 @@ new message content.",
                                     onBlur={[Function]}
                                     onChange={[Function]}
                                     onDeselect={[Function]}
-                                    onDropdownVisibleChange={[Function]}
                                     onFocus={[Function]}
                                     onInputKeyDown={[Function]}
                                     onSearch={[Function]}
@@ -3440,11 +3437,7 @@ new message content.",
                                                   }
                                                 }
                                                 title=""
-                                              >
-                                                <div
-                                                  className="cap-select-option-tooltip"
-                                                />
-                                              </div>
+                                              />
                                             </div>
                                             <span
                                               className="ant-select-arrow"
@@ -6947,7 +6940,6 @@ new message content.",
                                     },
                                   ]
                                 }
-                                showTruncatedTooltip={false}
                                 size="large"
                                 style={
                                   Object {
@@ -6966,7 +6958,6 @@ new message content.",
                                     />
                                   }
                                   onChange={[Function]}
-                                  onDropdownVisibleChange={[Function]}
                                   removeIcon={
                                     <CapIcon
                                       size="s"
@@ -7031,7 +7022,6 @@ new message content.",
                                     onBlur={[Function]}
                                     onChange={[Function]}
                                     onDeselect={[Function]}
-                                    onDropdownVisibleChange={[Function]}
                                     onFocus={[Function]}
                                     onInputKeyDown={[Function]}
                                     onSearch={[Function]}
@@ -7270,11 +7260,7 @@ new message content.",
                                                   }
                                                 }
                                                 title=""
-                                              >
-                                                <div
-                                                  className="cap-select-option-tooltip"
-                                                />
-                                              </div>
+                                              />
                                             </div>
                                             <span
                                               className="ant-select-arrow"
@@ -10721,7 +10707,6 @@ new message content.",
                                     },
                                   ]
                                 }
-                                showTruncatedTooltip={false}
                                 size="large"
                                 style={
                                   Object {
@@ -10740,7 +10725,6 @@ new message content.",
                                     />
                                   }
                                   onChange={[Function]}
-                                  onDropdownVisibleChange={[Function]}
                                   removeIcon={
                                     <CapIcon
                                       size="s"
@@ -10805,7 +10789,6 @@ new message content.",
                                     onBlur={[Function]}
                                     onChange={[Function]}
                                     onDeselect={[Function]}
-                                    onDropdownVisibleChange={[Function]}
                                     onFocus={[Function]}
                                     onInputKeyDown={[Function]}
                                     onSearch={[Function]}
@@ -11044,11 +11027,7 @@ new message content.",
                                                   }
                                                 }
                                                 title=""
-                                              >
-                                                <div
-                                                  className="cap-select-option-tooltip"
-                                                />
-                                              </div>
+                                              />
                                             </div>
                                             <span
                                               className="ant-select-arrow"

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;
@@ -164,7 +165,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     
     // Check for personalization tokens if restriction is enabled and notify parent
     if (this.props.restrictPersonalization) {
-      const hasTokens = this.checkForPersonalizationTokens(newFormData);
+      const hasTokens = checkForPersonalizationTokens(newFormData);
       if (this.props.onPersonalizationTokensChange) {
         this.props.onPersonalizationTokensChange(hasTokens);
       }
@@ -1511,33 +1512,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.injectEvents(schema);
   };
 
-  checkForPersonalizationTokens = (formData) => {
-    // Check for {{ }} (liquid tags) and [ ] (event context tags) in mobile push content
-    const tokenRegex = /\{\{[\s\S]*?\}\}|\[[\s\S]*?\]/;
-    
-    // Check all tabs/versions for personalization tokens
-    if (formData && typeof formData === 'object') {
-      for (const key in formData) {
-        const tabData = formData[key];
-        if (tabData && typeof tabData === 'object') {
-          for (const fieldKey in tabData) {
-            const fieldValue = tabData[fieldKey];
-            if (typeof fieldValue === 'string' && tokenRegex.test(fieldValue)) {
-              return true;
-            }
-          }
-        }
-      }
-    }
-    return false;
-  };
-
   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 = this.checkForPersonalizationTokens(formData);
+      const hasTokens = checkForPersonalizationTokens(formData);
       if (hasTokens) {
         const message = this.props.intl.formatMessage(messages.personalizationTokensErrorMessage);
         CapNotification.error({message, key: 'personalizationTokensError'});

package/v2Containers/MobilePush/Create/messages.js

@@ -344,6 +344,6 @@ export default defineMessages({
   },
   "personalizationTokensErrorMessage": {
     id: 'creatives.containersV2.MobilePush.Create.personalizationTokensErrorMessage',
-    defaultMessage: 'Personalization tags are not supported for anonymous customers. Please remove the tags.',
+    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';
@@ -249,7 +249,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     
     // Check for personalization tokens if restriction is enabled and notify parent
     if (this.props.restrictPersonalization) {
-      const hasTokens = this.checkForPersonalizationTokens(newFormData);
+      const hasTokens = checkForPersonalizationTokens(newFormData);
       if (this.props.onPersonalizationTokensChange) {
         this.props.onPersonalizationTokensChange(hasTokens);
       }
@@ -1698,7 +1698,7 @@ 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 = this.checkForPersonalizationTokens(formData);
+      const hasTokens = checkForPersonalizationTokens(formData);
       if (hasTokens) {
         const message = this.props.intl.formatMessage(messages.personalizationTokensErrorMessage);
         CapNotification.error({message, key: 'personalizationTokensError'});
@@ -1711,27 +1711,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.props.actions.editTemplate(obj, this.onUpdateTemplateComplete);
   };
   
-  checkForPersonalizationTokens = (formData) => {
-    // Check for {{ }} (liquid tags) and [ ] (event context tags) in mobile push content
-    const tokenRegex = /\{\{[\s\S]*?\}\}|\[[\s\S]*?\]/;
-    
-    // Check all tabs/versions for personalization tokens
-    if (formData && typeof formData === 'object') {
-      for (const key in formData) {
-        const tabData = formData[key];
-        if (tabData && typeof tabData === 'object') {
-          for (const fieldKey in tabData) {
-            const fieldValue = tabData[fieldKey];
-            if (typeof fieldValue === 'string' && tokenRegex.test(fieldValue)) {
-              return true;
-            }
-          }
-        }
-      }
-    }
-    return false;
-  };
-  
   handleFrameTasks = (e) => {
     //
     const type = e.data;

package/v2Containers/MobilePush/Edit/messages.js

@@ -336,6 +336,6 @@ export default defineMessages({
   },
   "personalizationTokensErrorMessage": {
     id: 'creatives.containersV2.MobilePush.Edit.personalizationTokensErrorMessage',
-    defaultMessage: 'Personalization tags are not supported for anonymous customers. Please remove the tags.',
+    defaultMessage: 'Personalization tags are not supported for anonymous customers, please remove the tags.',
   },
 });

package/v2Containers/MobilePushNew/index.js

@@ -509,6 +509,7 @@ const MobilePushNew = ({
   onCreateComplete,
   // new flag from parent - when true personalization via tags should be disabled
   restrictPersonalization = false,
+  onPersonalizationTokensChange,
 }) => {
   const { formatMessage } = intl;
 
@@ -1743,6 +1744,29 @@ const MobilePushNew = ({
   const isAndroidSupported = accountData?.configs?.android === '1';
   const isIosSupported = accountData?.configs?.ios === '1';
 
+  // Notify parent when personalization tokens are added/removed (for anonymous user flow)
+  useEffect(() => {
+    if (!restrictPersonalization || typeof onPersonalizationTokensChange !== 'function') return;
+    const hasToken = (value) => value && (
+      (value.includes('{{') && value.includes('}}'))
+      || (value.includes('[') && value.includes(']'))
+    );
+    const hasTokens = (
+      (isAndroidSupported && (hasToken(androidContent?.title) || hasToken(androidContent?.message)))
+      || (isIosSupported && (hasToken(iosContent?.title) || hasToken(iosContent?.message)))
+    );
+    onPersonalizationTokensChange(hasTokens);
+  }, [
+    restrictPersonalization,
+    androidContent?.title,
+    androidContent?.message,
+    iosContent?.title,
+    iosContent?.message,
+    isAndroidSupported,
+    isIosSupported,
+    onPersonalizationTokensChange,
+  ]);
+
   // Validation logic for template creation/update
   const isAndroidFieldsMissing = isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim());
   const isIosFieldsMissing = isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim());
@@ -3075,6 +3099,7 @@ const MobilePushNew = ({
                       className="mobilepush-test-preview-btn"
                       type="secondary"
                       style={{ marginLeft: '8px' }}
+                      disabled={isSaveDisabled}
                     >
                       <FormattedMessage {...creativesMessages.testAndPreview} />
                     </CapButton>
@@ -3135,6 +3160,7 @@ MobilePushNew.propTypes = {
   isGetFormData: PropTypes.bool,
   getTemplateDetailsInProgress: PropTypes.bool,
   onCreateComplete: PropTypes.func,
+  onPersonalizationTokensChange: PropTypes.func,
 };
 
 MobilePushNew.defaultProps = {
@@ -3165,6 +3191,7 @@ MobilePushNew.defaultProps = {
   isGetFormData: false,
   getTemplateDetailsInProgress: false,
   onCreateComplete: () => {},
+  onPersonalizationTokensChange: undefined,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap

@@ -86505,7 +86505,6 @@ new message content.",
                                           },
                                         ]
                                       }
-                                      showTruncatedTooltip={false}
                                       size="large"
                                       style={
                                         Object {
@@ -86525,7 +86524,6 @@ new message content.",
                                           />
                                         }
                                         onChange={[Function]}
-                                        onDropdownVisibleChange={[Function]}
                                         removeIcon={
                                           <_default
                                             size="s"
@@ -86591,7 +86589,6 @@ new message content.",
                                           onBlur={[Function]}
                                           onChange={[Function]}
                                           onDeselect={[Function]}
-                                          onDropdownVisibleChange={[Function]}
                                           onFocus={[Function]}
                                           onInputKeyDown={[Function]}
                                           onSearch={[Function]}
@@ -86830,13 +86827,9 @@ new message content.",
                                                           "opacity": 1,
                                                         }
                                                       }
-                                                      title=""
+                                                      title="Vertical Medium"
                                                     >
-                                                      <div
-                                                        className="cap-select-option-tooltip"
-                                                      >
-                                                        Vertical Medium
-                                                      </div>
+                                                      Vertical Medium
                                                     </div>
                                                   </div>
                                                   <span
@@ -105854,7 +105847,6 @@ new message content.",
                                           },
                                         ]
                                       }
-                                      showTruncatedTooltip={false}
                                       size="large"
                                       style={
                                         Object {
@@ -105874,7 +105866,6 @@ new message content.",
                                           />
                                         }
                                         onChange={[Function]}
-                                        onDropdownVisibleChange={[Function]}
                                         removeIcon={
                                           <_default
                                             size="s"
@@ -105940,7 +105931,6 @@ new message content.",
                                           onBlur={[Function]}
                                           onChange={[Function]}
                                           onDeselect={[Function]}
-                                          onDropdownVisibleChange={[Function]}
                                           onFocus={[Function]}
                                           onInputKeyDown={[Function]}
                                           onSearch={[Function]}
@@ -106179,13 +106169,9 @@ new message content.",
                                                           "opacity": 1,
                                                         }
                                                       }
-                                                      title=""
+                                                      title="Vertical Medium"
                                                     >
-                                                      <div
-                                                        className="cap-select-option-tooltip"
-                                                      >
-                                                        Vertical Medium
-                                                      </div>
+                                                      Vertical Medium
                                                     </div>
                                                   </div>
                                                   <span

package/v2Containers/WebPush/Create/messages.js

@@ -209,7 +209,7 @@ export default defineMessages({
   },
   personalizationTokensErrorMessage: {
     id: `${scope}.personalizationTokensErrorMessage`,
-    defaultMessage: 'Personalization tags are not supported for anonymous customers. Please remove the tags.',
+    defaultMessage: 'Personalization tags are not supported for anonymous customers, please remove the tags.',
   },
   personalizationNotSupportedAnonymous: {
     id: `${scope}.personalizationNotSupportedAnonymous`,