cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/WebPush/Create/utils/validation.test.js

@@ -44,6 +44,9 @@ describe('validation', () => {
     messageRequired: {
       defaultMessage: 'Message is required',
     },
+    personalizationTokensErrorMessage: {
+      defaultMessage: 'Personalization tags are not supported for anonymous customers',
+    },
   };
 
   beforeEach(() => {
@@ -113,6 +116,51 @@ describe('validation', () => {
       const result = validateTitle('  Valid Title  ', mockFormatMessage, mockMessages);
       expect(result).toBe('');
     });
+
+    it('should return personalization error when restrictPersonalization is true and title has personalization tags', () => {
+      const result = validateTitle(
+        'Hello {{name}}',
+        mockFormatMessage,
+        mockMessages,
+        true
+      );
+      expect(result).toBe('Personalization tags are not supported for anonymous customers');
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.personalizationTokensErrorMessage);
+    });
+
+    it('should return brace error when validationConfig is provided and validateTags returns isBraceError', () => {
+      const validationConfig = { tagsParam: [], location: {}, tagModule: '' };
+      validateTags.mockReturnValue({ isBraceError: true });
+      const result = validateTitle(
+        'Valid Title',
+        mockFormatMessage,
+        mockMessages,
+        false,
+        validationConfig,
+        false
+      );
+      expect(result).toBe('Unbalanced curly braces');
+      expect(mockFormatMessage).toHaveBeenCalledWith(globalMessages.unbalanacedCurlyBraces);
+      expect(validateTags).toHaveBeenCalledWith({
+        content: 'Valid Title',
+        ...validationConfig,
+        isFullMode: false,
+      });
+    });
+
+    it('should not run tag validation when validationConfig is null', () => {
+      validateTags.mockClear();
+      const result = validateTitle('Valid Title', mockFormatMessage, mockMessages, false, null);
+      expect(result).toBe('');
+      expect(validateTags).not.toHaveBeenCalled();
+    });
+
+    it('should not run tag validation when validationConfig is undefined', () => {
+      validateTags.mockClear();
+      const result = validateTitle('Valid Title', mockFormatMessage, mockMessages, false, undefined);
+      expect(result).toBe('');
+      expect(validateTags).not.toHaveBeenCalled();
+    });
   });
 
   describe('validateUrl', () => {
@@ -169,10 +217,8 @@ describe('validation', () => {
   describe('validateMessageContent', () => {
     const mockValidationConfig = {
       tagsParam: [],
-      injectedTagsParams: [],
       location: {},
       tagModule: '',
-      eventContextTags: [],
     };
 
     beforeEach(() => {
@@ -211,17 +257,6 @@ describe('validation', () => {
       });
     });
 
-    it('should return error message for unsupported tags', () => {
-      validateTags.mockReturnValue({
-        unsupportedTags: ['tag1', 'tag2'],
-      });
-      const result = validateMessageContent('Message with {tag1} and {tag2}', mockFormatMessage, mockMessages, mockValidationConfig);
-      expect(result).toBe('Unsupported tags: tag1, tag2');
-      expect(mockFormatMessage).toHaveBeenCalledWith(globalMessages.unsupportedTagsValidationError, {
-        unsupportedTags: 'tag1, tag2',
-      });
-    });
-
     it('should return error message for unbalanced curly braces', () => {
       validateTags.mockReturnValue({
         isBraceError: true,
@@ -231,22 +266,11 @@ describe('validation', () => {
       expect(mockFormatMessage).toHaveBeenCalledWith(globalMessages.unbalanacedCurlyBraces);
     });
 
-    it('should return error message for both unsupported tags and brace error (unsupported tags takes precedence)', () => {
-      validateTags.mockReturnValue({
-        unsupportedTags: ['tag1'],
-        isBraceError: true,
-      });
-      const result = validateMessageContent('Message with {tag1}', mockFormatMessage, mockMessages, mockValidationConfig);
-      expect(result).toBe('Unsupported tags: tag1');
-    });
-
     it('should pass validation config to validateTags', () => {
       const customConfig = {
         tagsParam: [{ id: 1, name: 'Tag1' }],
-        injectedTagsParams: [{ id: 2, name: 'Tag2' }],
         location: { query: { type: 'test' } },
         tagModule: 'custom',
-        eventContextTags: [{ id: 3, name: 'Tag3' }],
       };
       validateTags.mockReturnValue({});
       validateMessageContent('Valid message', mockFormatMessage, mockMessages, customConfig);
@@ -278,6 +302,30 @@ describe('validation', () => {
         ...mockValidationConfig,
       });
     });
+
+    it('should return personalization error when restrictPersonalization is true and message has personalization tags', () => {
+      validateTags.mockReturnValue({});
+      const result = validateMessageContent(
+        'Hello {{name}}',
+        mockFormatMessage,
+        mockMessages,
+        mockValidationConfig,
+        true,
+        true
+      );
+      expect(result).toBe('Personalization tags are not supported for anonymous customers');
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.personalizationTokensErrorMessage);
+    });
+
+    it('should pass isFullMode to validateTags when provided', () => {
+      validateTags.mockReturnValue({});
+      validateMessageContent('Valid message', mockFormatMessage, mockMessages, mockValidationConfig, true);
+      expect(validateTags).toHaveBeenCalledWith({
+        content: 'Valid message',
+        ...mockValidationConfig,
+        isFullMode: true,
+      });
+    });
   });
 });
 

package/app/v2Containers/Whatsapp/index.js

@@ -43,12 +43,12 @@ import { makeSelectTemplates } from '../Templates/selectors';
 import {
   isLoadingMetaEntities,
   makeSelectMetaEntities,
-  selectCurrentOrgDetails,
   setInjectedTags,
   selectMetaDataStatus,
 } from "../Cap/selectors";
 import * as WhatsappActions from './actions';
 import TestAndPreviewSlidebox from '../../v2Components/TestAndPreviewSlidebox';
+import { isAiContentBotDisabled } from '../../utils/common';
 import './index.scss';
 import {
   UNSUBSCRIBE_TEXT_LENGTH,
@@ -88,7 +88,6 @@ import {
   BUTTON_TEXT,
   OTP_CONFIG_URI,
   WHATSAPP_CATEGORIES,
-  AI_CONTENT_BOT_DISABLED,
   mediaTypeOptions,
   carouselMediaOptions,
   CAROUSEL_INITIAL_DATA,
@@ -119,6 +118,7 @@ import { ANDROID } from '../../v2Components/CommonTestAndPreview/constants';
 import CapImageUpload from '../../v2Components/CapImageUpload';
 import TagList from '../TagList';
 import { validateTags } from '../../utils/tagValidations';
+import { splitContentByOrderedVarTokens } from '../../utils/templateVarUtils';
 import { capitalizeString } from '../../utils/Formatter';
 import CapWhatsappCTA from '../../v2Components/CapWhatsappCTA';
 import {
@@ -180,8 +180,8 @@ export const Whatsapp = (props) => {
     loadingTags,
     getFormData,
     selectedOfferDetails,
-    currentOrgDetails,
     eventContextTags,
+    waitEventContextTags = {},
     metaDataStatus = "",
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
     handleTestAndPreview: propsHandleTestAndPreview,
@@ -268,10 +268,7 @@ export const Whatsapp = (props) => {
   const carouselBodyVarRegex = /{{[1-5]}}/g;
   const previewUrlMatchingRegex = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])/g;
 
-  const { accessibleFeatures = [] } = currentOrgDetails || {};
-  const isAiContentBotDisabled = accessibleFeatures?.includes(
-    AI_CONTENT_BOT_DISABLED
-  );
+  const aiContentBotDisabled = isAiContentBotDisabled();
   const isBtnTypeCta = buttonType === WHATSAPP_BUTTON_TYPES.CTA;
   const isBtnTypeQuickReply = buttonType === WHATSAPP_BUTTON_TYPES.QUICK_REPLY;
   const isMediaTypeText = templateMediaType === WHATSAPP_MEDIA_TYPES.TEXT;
@@ -487,28 +484,10 @@ export const Whatsapp = (props) => {
     );
   };
 
-  const converStringToVarArr = (validVarArr, content) => {
-    const templateVarArray = [];
-    while (content?.length !== 0) {
-      //converting content string to an array split at var
-      const index = content.indexOf(validVarArr?.[0]);
-      if (index !== -1) {
-        templateVarArray.push(content.substring(0, index)); //push string before var
-        templateVarArray.push(validVarArr?.[0]); //push var
-        content = content.substring(index + validVarArr?.[0]?.length, content?.length); //remaining str
-        validVarArr?.shift(); //remove considered var
-      } else {
-        templateVarArray.push(content); //remaining str
-        break;
-      }
-    }
-    return templateVarArray;
-  }
-
   const computeTextMessage = (msg, varMap, regex) => {
     const validVarArr = msg?.match(regex) || [];
     //conerting msg string to variable arr
-    const templateHeaderArray = converStringToVarArr(validVarArr, msg);
+    const templateHeaderArray = splitContentByOrderedVarTokens(validVarArr, msg);
     if (templateHeaderArray?.length !== 0) {
       let clonedVarMap = {};
       if (!isEmpty(varMap)) {
@@ -562,7 +541,7 @@ export const Whatsapp = (props) => {
       setUnsubscribeRequired(true);
     }
     //converting msg string to variable arr
-    const templateMessageArray = converStringToVarArr(validVarArr, msg);
+    const templateMessageArray = splitContentByOrderedVarTokens(validVarArr, msg);
     updateTempMsgArray(templateMessageArray.filter((i) => i === 0 || i));
   };
 
@@ -637,22 +616,21 @@ export const Whatsapp = (props) => {
         validateTags({
           content: contentData.join(""),
           tagsParam: tags,
-          injectedTagsParams: injectedTags,
           location,
           tagModule: getDefaultTags,
-          eventContextTags,
           isFullMode,
         }) || {};
-      const unsupportedTagsLengthCheck =
-        validationResponse?.unsupportedTags?.length > 0;
       if (type === HEADER_TEXT) {
         headerTagValidationResponse = validationResponse;
-        updateIsHeaderTagValidationError(unsupportedTagsLengthCheck);
+        updateIsHeaderTagValidationError(validationResponse.isBraceError);
       } else if (type === CAROUSEL_TEXT) {
-        return [{fieldName: "carouselTagValidationErrMessage", value: validationResponse}, {fieldName: "carouselTagValidationErr", value: unsupportedTagsLengthCheck}];
+        return [
+          { fieldName: "carouselTagValidationErrMessage", value: validationResponse.isBraceError ? validationResponse : {} },
+          { fieldName: "carouselTagValidationErr", value: validationResponse.isBraceError },
+        ];
       } else {
         tagValidationResponse = validationResponse;
-        updateIsTagValidationError(unsupportedTagsLengthCheck);
+        updateIsTagValidationError(validationResponse.isBraceError);
       }
     }
   };
@@ -956,6 +934,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
               injectedTags={injectedTags || {}}
               selectedOfferDetails={selectedOfferDetails}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
             />
           )}
         </>
@@ -1957,6 +1936,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
                             injectedTags={injectedTags || {}}
                             selectedOfferDetails={selectedOfferDetails}
                             eventContextTags={eventContextTags}
+                            waitEventContextTags={waitEventContextTags}
                           />
                         )
                       : !isAuthenticationTemplate && (
@@ -2055,11 +2035,11 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     const buttonArray = firstCarouselButtonData.map((button) => {
       switch (button?.buttonType) {
         case PHONE_NUMBER:
-          return INITIAL_CAROUSEL_PHONE_NUMBER_DATA;
+          return cloneDeep(INITIAL_CAROUSEL_PHONE_NUMBER_DATA);
         case QUICK_REPLY:
-          return INITIAL_CAROUSEL_QUICK_REPLY_DATA;
+          return cloneDeep(INITIAL_CAROUSEL_QUICK_REPLY_DATA);
         default:
-          return INITIAL_CAROUSEL_URL_DATA;
+          return cloneDeep(INITIAL_CAROUSEL_URL_DATA);
       }
     });
     const newCard = cloneDeep(CAROUSEL_INITIAL_DATA[0]);
@@ -2258,7 +2238,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
           value={templateMessage || ""}
           disabled={isAuthenticationTemplate}
         />
-        {!isAiContentBotDisabled && (
+        {!aiContentBotDisabled && (
           <CapAskAira.ContentGenerationBot
             text={templateMessage || ""}
             setText={(text) => onTemplateValueChange({ target: { value: text } }, MESSAGE_TEXT)}
@@ -2682,18 +2662,11 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     } else {
       validationResponse = tagValidationResponse;
     }
-    const { unsupportedTags = [], isBraceError } = validationResponse;
-
-    let tagError = "";
-    if (unsupportedTags.length > 0) {
-      tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
-        unsupportedTags,
-      });
-    }
+    const { isBraceError } = validationResponse || {};
     if (isBraceError) {
-      tagError = formatMessage(globalMessages.unbalanacedCurlyBraces);
+      return <CapError>{formatMessage(globalMessages.unbalanacedCurlyBraces)}</CapError>;
     }
-    return <CapError>{tagError}</CapError>;
+    return null;
   };
 
   const editModeContent = () => (
@@ -2770,6 +2743,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
                 injectedTags={injectedTags || {}}
                 selectedOfferDetails={selectedOfferDetails}
                 eventContextTags={eventContextTags}
+                waitEventContextTags={waitEventContextTags}
               />
             )
           }
@@ -2888,6 +2862,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
               injectedTags={injectedTags || {}}
               selectedOfferDetails={selectedOfferDetails}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
             />
           )}
           {isBtnTypeQuickReply && (
@@ -2970,12 +2945,13 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   };
 
   const isEditDoneDisabled = () => {
+    const isBlankInput = (inputValue) => !String(inputValue ?? '').trim();
     let carouselDisableCheck = false;
     if (isMediaTypeCarousel) {
       carouselDisableCheck = carouselData.some((data) => {
 				return (
 					data.carouselTagValidationErr ||
-					Object.values(data.varMap).some((inputValue) => inputValue === "") ||
+					Object.values(data.varMap).some((inputValue) => isBlankInput(inputValue)) ||
           computeTextLength(CAROUSEL_TEXT, data) > TEMPLATE_MESSAGE_MAX_LENGTH ||
           (carouselMediaType === IMAGE.toLowerCase() && !data.imageSrc) ||
 					(carouselMediaType === VIDEO.toLowerCase() && !data.videoSrc) ||
@@ -2985,8 +2961,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     }
     return (isTagValidationError ||
     isHeaderTagValidationError ||
-    Object.values(varMap).some((inputValue) => inputValue === "") ||
-    Object.values(headerVarMappedData).some((inputValue) => inputValue === "") ||
+    Object.values(varMap).some((inputValue) => isBlankInput(inputValue)) ||
+    Object.values(headerVarMappedData).some((inputValue) => isBlankInput(inputValue)) ||
     computeTextLength(MESSAGE_TEXT) > TEMPLATE_MESSAGE_MAX_LENGTH ||
     computeTextLength(HEADER_TEXT) > TEMPLATE_HEADER_MAX_LENGTH ||
     (isBtnTypeCta && ctaData.some((btn) => btn?.url?.includes("{{1}}"))) || isMediatypeValid()) || carouselDisableCheck;
@@ -3212,7 +3188,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       <TestAndPreviewSlidebox
         show={propsShowTestAndPreviewSlidebox || showTestAndPreviewSlidebox}
         onClose={handleCloseTestAndPreview}
-        formData={null} // WhatsApp doesn't use formData structure like SMS
+        formData={getTemplateContent()}
         content={getTemplateContent()}
         currentChannel={WHATSAPP}
       />
@@ -3227,7 +3203,6 @@ const mapStateToProps = createStructuredSelector({
   metaEntities: makeSelectMetaEntities(),
   loadingTags: isLoadingMetaEntities(),
   injectedTags: setInjectedTags(),
-  currentOrgDetails: selectCurrentOrgDetails(),
   metaDataStatus: selectMetaDataStatus(),
 });