@capillarytech/creatives-library 8.0.201 → 8.0.204

package/constants/unified.js

@@ -44,6 +44,7 @@ export const REGISTRATION_CUSTOM_FIELD = 'Registration custom fields';
 export const GIFT_CARDS = 'GIFT_CARDS';
 export const PROMO_ENGINE = 'PROMO_ENGINE';
 export const LIQUID_SUPPORT = 'ENABLE_LIQUID_SUPPORT';
+export const ENABLE_NEW_MPUSH = 'ENABLE_NEW_MPUSH';
 export const CUSTOM_TAG = 'CustomTagMessage';
 export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';
 export const EXTENDED_TAG = 'ExtendedTagMessage';

package/package.json

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

package/utils/common.js

@@ -21,7 +21,8 @@ import {
   EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
   BADGES_ISSUE,
   ENABLE_WECHAT,
-  LIQUID_SUPPORT
+  LIQUID_SUPPORT,
+  ENABLE_NEW_MPUSH
 } from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -125,6 +126,11 @@ export const isEmailUnsubscribeTagMandatory = Auth.hasFeatureAccess.bind(
   EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
 );
 
+export const hasNewMobilePushFeatureEnabled = Auth.hasFeatureAccess.bind(
+  null,
+  ENABLE_NEW_MPUSH,
+);
+
 //filtering tags based on scope
 export const filterTags = (tagsToFilter, tagsList) => tagsList?.filter(
     (tag) => !tagsToFilter?.includes(tag?.definition?.value)

package/utils/createMobilePushPayload.js

@@ -62,33 +62,12 @@ const createMobilePushPayload = ({
     throw new Error(intl.formatMessage(messages.templateNameEmptyError));
   }
 
-  // Validate content - allow single platform if explicitly allowed
-  const allowSinglePlatform = options?.allowSinglePlatform || false;
-  
-  if (!allowSinglePlatform) {
-    // Normal validation: require all supported platforms to have content
-    if (isAndroidSupported && (!androidContent?.title || !androidContent?.message)) {
-      throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'Android' }));
-    }
-    if (isIosSupported && (!iosContent?.title || !iosContent?.message)) {
-      throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'iOS' }));
-    }
-  } else {
-    // Single platform mode: require at least one platform to have content
-    const hasAndroidContent = isAndroidSupported && androidContent?.title?.trim() && androidContent?.message?.trim();
-    const hasIosContent = isIosSupported && iosContent?.title?.trim() && iosContent?.message?.trim();
-    
-    if (!hasAndroidContent && !hasIosContent) {
-      throw new Error(intl.formatMessage(messages.singlePlatformContentMissing));
-    }
-    
-    // Validate individual platforms that are supported but have incomplete content
-    if (isAndroidSupported && !hasAndroidContent && androidContent && (androidContent.title || androidContent.message)) {
-      throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'Android' }));
-    }
-    if (isIosSupported && !hasIosContent && iosContent && (iosContent.title || iosContent.message)) {
-      throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'iOS' }));
-    }
+  // Validate content
+  if (isAndroidSupported && (!androidContent?.title || !androidContent?.message)) {
+    throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'Android' }));
+  }
+  if (isIosSupported && (!iosContent?.title || !iosContent?.message)) {
+    throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'iOS' }));
   }
 
   // Ensure imageSrc has the required properties
@@ -120,7 +99,7 @@ const createMobilePushPayload = ({
   };
 
   // Build Android content
-  if (isAndroidSupported && androidContent) {
+  if (isAndroidSupported) {
     payload.versions.base.ANDROID = buildPlatformContent(
       androidContent,
       safeImageSrc.androidImageSrc,
@@ -130,7 +109,7 @@ const createMobilePushPayload = ({
   }
 
   // Build iOS content
-  if (isIosSupported && iosContent) {
+  if (isIosSupported) {
     payload.versions.base.IOS = buildPlatformContent(
       iosContent,
       safeImageSrc.iosImageSrc,

package/utils/tests/createMobilePushPayload.test.js

@@ -261,59 +261,6 @@ describe('createMobilePushPayload', () => {
         accountData: unsupportedAccountData,
       })).not.toThrow();
     });
-
-    // Single Platform Mode Tests
-    it('should allow single platform when allowSinglePlatform is true - Android only', () => {
-      expect(() => callWithIntl({
-        templateName: 'Test',
-        androidContent: { title: 'Title', message: 'Message' },
-        iosContent: null,
-        accountData: mockAccountData,
-        options: { allowSinglePlatform: true },
-      })).not.toThrow();
-    });
-
-    it('should allow single platform when allowSinglePlatform is true - iOS only', () => {
-      expect(() => callWithIntl({
-        templateName: 'Test',
-        androidContent: null,
-        iosContent: { title: 'Title', message: 'Message' },
-        accountData: mockAccountData,
-        options: { allowSinglePlatform: true },
-      })).not.toThrow();
-    });
-
-    it('should throw error when no platforms have content even with allowSinglePlatform', () => {
-      expect(() => callWithIntl({
-        templateName: 'Test',
-        androidContent: null,
-        iosContent: null,
-        accountData: mockAccountData,
-        options: { allowSinglePlatform: true },
-      })).toThrow(intl.formatMessage(messages.singlePlatformContentMissing));
-    });
-
-    it('should validate individual platforms in single platform mode - Android incomplete', () => {
-      // Test case where iOS has valid content but Android has incomplete content
-      expect(() => callWithIntl({
-        templateName: 'Test',
-        androidContent: { title: 'Valid Title' }, // Missing message property
-        iosContent: { title: 'Valid Title', message: 'Valid Message' }, // Complete content
-        accountData: mockAccountData,
-        options: { allowSinglePlatform: true },
-      })).toThrow(intl.formatMessage(messages.contentValidationError, { platform: 'Android' }));
-    });
-
-    it('should validate individual platforms in single platform mode - iOS incomplete', () => {
-      // Test case where Android has valid content but iOS has incomplete content
-      expect(() => callWithIntl({
-        templateName: 'Test',
-        androidContent: { title: 'Valid Title', message: 'Valid Message' }, // Complete content
-        iosContent: { title: 'Valid Title' }, // Missing message property
-        accountData: mockAccountData,
-        options: { allowSinglePlatform: true },
-      })).toThrow(intl.formatMessage(messages.contentValidationError, { platform: 'iOS' }));
-    });
   });
 
   // Account Data Validation Tests

package/v2Components/FormBuilder/index.js

@@ -139,196 +139,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     // Check if the liquid flow feature is supported and the channel is in the supported list.
     this.liquidFlow = this.isLiquidFlowSupported.bind(this);
     this.onSubmitWrapper = this.onSubmitWrapper.bind(this);
-    
-    // Performance optimization: Debounced functions for high-frequency updates
-    this.debouncedUpdateFormData = _.debounce((data, val, event, skipStateUpdate) => {
-      this.performFormDataUpdate(data, val, event, skipStateUpdate);
-    }, 300);
-    this.debouncedValidation = _.debounce(this.validateForm.bind(this), 500);
-  
-  // Memoized validation cache
-  this.validationCache = new Map();
-
-  }
-  
-  // Helper function to generate unique tab ID
-  generateUniqueTabId(formData, tabIndex) {
-    let id = _.uniqueId();
-    let validId = false;
-    
-    while (!validId) {
-      validId = true;
-      for (let idx = 0; idx < formData[tabIndex].selectedLanguages.length; idx += 1) {
-        if (!formData[tabIndex]) {
-          continue;
-        }
-        if (id === formData[tabIndex][formData[tabIndex].selectedLanguages[idx]].tabKey) {
-          validId = false;
-          break;
-        }
-      }
-      if (!validId) {
-        id = _.uniqueId();
-      }
-    }
-    
-    return id;
-  }
-
-  // Performance optimized form data update function
-  performFormDataUpdate(data, val, event, skipStateUpdate = false) {
-    
-    // Use optimized state update instead of deep cloning
-    const formData = this.optimizedFormDataUpdate(data, val, event);
-    
-    const tabIndex = this.state.currentTab - 1;
-    let currentTab = this.state.currentTab;
-
-    if (this.state.usingTabContainer && !val.standalone) {
-      const data1 = data;
-      if (event === "addLanguage") {
-        const addLanguageType = this.props.addLanguageType;
-        if (addLanguageType === '') {
-          return;
-        }
-        const currentLang = formData[tabIndex].activeTab;
-        let baseTab;
-        
-        switch (addLanguageType) {
-          case "upload":
-            baseTab = _.cloneDeep(formData[tabIndex][currentLang]);
-
-            baseTab.iso_code = data.iso_code;
-            baseTab.lang_id = data.lang_id;
-            baseTab.language = data.language;
-            baseTab.tabKey = this.generateUniqueTabId(formData, tabIndex);
-            
-            formData[tabIndex][data.iso_code] = baseTab;
-            formData[tabIndex].activeTab = data.iso_code;
-            formData[tabIndex].tabKey = baseTab.tabKey;
-            break;
-          case "copyPrimaryLanguage":
-          case "useEditor":
-            baseTab = _.cloneDeep(formData[tabIndex][this.props.baseLanguage]);
-
-            baseTab.iso_code = data.iso_code;
-            baseTab.lang_id = data.lang_id;
-            baseTab.language = data.language;
-            baseTab.tabKey = this.generateUniqueTabId(formData, tabIndex);
-            
-            formData[tabIndex].selectedLanguages.push(data.iso_code);
-            formData[tabIndex][data.iso_code] = baseTab;
-            formData[tabIndex].activeTab = data.iso_code;
-            formData[tabIndex].tabKey = baseTab.tabKey;
-            break;
-          case '':
-            return;
-          default:
-            break;
-        }
-        const that = this;
-        setTimeout(() => {
-          that.setState({tabKey: baseTab.tabKey});
-        }, 0);
-      }
-
-      if (!this.props.isNewVersionFlow) {
-        formData[tabIndex][val.id] = data1;
-      } else if (this.props.isNewVersionFlow && event !== "addLanguage" && event !== "onContentChange") {
-        formData[tabIndex][this.props.baseLanguage][val.id] = data1;
-      }
-
-      if (formData[tabIndex].base) {
-        if (!this.props.isNewVersionFlow) {
-          formData.base[val.id] = data1;
-        } else {
-          formData.base[data1.iso_code] = formData[tabIndex][data1.iso_code];
-          formData.base.tabKey = formData[tabIndex].tabKey;
-          formData.base.activeTab = formData[tabIndex].activeTab;
-          formData.base.selectedLanguages = formData[tabIndex].selectedLanguages;
-        }
-      }
-    } else {
-      formData[val.id] = data;
-    }
-
-    if (this.props.isNewVersionFlow) {
-      if (event === 'onSelect' && data === 'New Version') {
-        this.callChildEvent(data, val, 'addVersion', event);
-      } else if (event === 'onSelect' && data !== 'New Version') {
-        currentTab = _.findIndex(this.state.formData['template-version-options'], { key: data}) + 1;
-        this.setState({currentTab, tabKey: formData[`${currentTab - 1}`].tabKey}, () => {
-          val.injectedEvents[event].call(this, this.state.formData['template-version-options'][currentTab - 1].key, formData, val);
-        });
-      }
-
-      if (event === 'onContentChange') {
-        // Content change handling
-      }
-    }
 
-    // Only update state if not already updated (for immediate UI feedback)
-    if (!skipStateUpdate) {
-      this.setState({formData}, () => {
-        if (this.props.startValidation) {
-          this.debouncedValidation();
-        }
-      });
-    } else {
-      // Just trigger validation if state was already updated
-      if (this.props.startValidation) {
-        this.debouncedValidation();
-      }
-    }
-    
-    if (event && val.injectedEvents[event]) {
-      if (event === "onRowClick") {
-        val.injectedEvents[event].call(this, data);
-      } else if (this.props.isNewVersionFlow && event !== 'onSelect') {
-        if (event === 'addLanguage') {
-          val.injectedEvents[event].call(this, data, formData, val);
-          this.setState({currentEventVal: {}, currentEvent: {}, currentEventData: {}});
-        } else {
-          val.injectedEvents[event].call(this, true, formData, val);
-        }
-      } else if (!this.props.isNewVersionFlow) {
-        val.injectedEvents[event].call(this, true, formData, val);
-      }
-    } else if (val.injectedEvents && val.injectedEvents.onChange) {
-      val.injectedEvents.onChange.call(this, true, formData, val);
-    }
-
-    if (!((event === 'onSelect' && data === 'New Version') || event === 'onContentChange')) {
-      this.props.onChange(formData, this.state.tabCount, currentTab, val);
-    }
-  }
-
-  // Optimized form data update - only clone what's necessary
-  optimizedFormDataUpdate(data, val, event) {
-    const currentFormData = this.state.formData;
-    
-    // For simple field updates, use spread operator instead of deep clone
-    if (!this.state.usingTabContainer || val.standalone) {
-      return {
-        ...currentFormData,
-        [val.id]: data
-      };
-    }
-    
-    // For tab container updates, only clone the affected tab
-    const tabIndex = this.state.currentTab - 1;
-    const updatedFormData = { ...currentFormData };
-    
-    if (updatedFormData[tabIndex]) {
-      updatedFormData[tabIndex] = {
-        ...updatedFormData[tabIndex],
-        [val.id]: data
-      };
-    }
-    
-    return updatedFormData;
   }
-
   isLiquidFlowSupported = () => {
     return Boolean(LIQUID_SUPPORTED_CHANNELS.includes(this.props?.schema?.channel?.toUpperCase()) && hasLiquidSupportFeature());
   }
@@ -2215,64 +2027,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   updateFormData(data, val, event) {
-    
-    // Check if this is a high-frequency input field that should be optimized
-    const isHighFrequencyField = val && (
-      val.id === 'template-name' || 
-      val.id === 'template-subject' || 
-      val.type === 'input' || 
-      val.type === 'textarea'
-    );
-    
-    if (isHighFrequencyField && !event) {
-      // For high-frequency fields: immediate UI update + debounced expensive operations
-      this.updateFormDataOptimized(data, val, event);
-      return;
-    }
-    
-    // For non-high-frequency fields or special events, use immediate update
-    this.performFormDataUpdate(data, val, event);
-  }
-
-  // Optimized update for high-frequency fields
-  updateFormDataOptimized(data, val, event) {
-    // 1. Immediate UI update - update the field value instantly
-    this.updateFieldValueImmediately(data, val);
-    
-    // 2. Debounce expensive operations (validation, parent updates) - skip state update since we already did it
-    this.debouncedUpdateFormData(data, val, event, true);
-  }
-
-  // Update field value immediately for UI feedback
-  updateFieldValueImmediately(data, val) {
-    const currentFormData = this.state.formData;
-    let updatedFormData;
-    
-    if (!this.state.usingTabContainer || val.standalone) {
-      // Simple field update
-      updatedFormData = {
-        ...currentFormData,
-        [val.id]: data
-      };
-    } else {
-      // Tab container update
-      const tabIndex = this.state.currentTab - 1;
-      updatedFormData = { ...currentFormData };
-      
-      if (updatedFormData[tabIndex]) {
-        updatedFormData[tabIndex] = {
-          ...updatedFormData[tabIndex],
-          [val.id]: data
-        };
-      }
-    }
-    
-    // Update state immediately for UI feedback
-    this.setState({ formData: updatedFormData });
-  }
-
-  // Legacy updateFormData function - kept for backward compatibility
-  updateFormDataLegacy(data, val, event) {
     const formData = _.cloneDeep(this.state.formData);
 
     const tabIndex = this.state.currentTab - 1;
@@ -2432,57 +2186,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   hasClass(element, className) {
     return (` ${element.className} `).indexOf(` ${className} `) > -1;
   }
-
-  // Handle field blur for validation
-  handleFieldBlur = (e, val) => {
-    // Trigger validation on blur for high-frequency fields
-    if (val && (val.id === 'template-name' || val.id === 'template-subject' || val.type === 'input' || val.type === 'textarea')) {
-      this.debouncedValidation();
-    }
-  }
-
-  // Memoized validation for specific fields
-  getMemoizedValidation = (fieldId, fieldValue) => {
-    const cacheKey = `${fieldId}_${fieldValue}`;
-    
-    if (this.validationCache.has(cacheKey)) {
-      return this.validationCache.get(cacheKey);
-    }
-    
-    // Perform validation logic here
-    const isValid = this.performFieldValidation(fieldId, fieldValue);
-    this.validationCache.set(cacheKey, isValid);
-    
-    // Clear cache if it gets too large
-    if (this.validationCache.size > 100) {
-      this.validationCache.clear();
-    }
-    
-    return isValid;
-  }
-
-  // Perform validation for a specific field
-  performFieldValidation = (fieldId, fieldValue) => {
-    // Basic validation logic for template-name and template-subject
-    if (fieldId === 'template-name' || fieldId === 'template-subject') {
-      return fieldValue && fieldValue.trim().length > 0;
-    }
-    return true;
-  }
-
-  // Cleanup debounced functions on component unmount
-  componentWillUnmount() {
-    if (this.debouncedUpdateFormData) {
-      this.debouncedUpdateFormData.cancel();
-    }
-    if (this.debouncedValidation) {
-      this.debouncedValidation.cancel();
-    }
-    // Clear validation cache
-    if (this.validationCache) {
-      this.validationCache.clear();
-    }
-  }
   allowAddSecondaryCta = (val) => {
     if (val.fieldsCount > 0) {
       const errorData = _.cloneDeep(this.state.errorData);
@@ -2898,7 +2601,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             label={val.label}
             autosize={val.autosize ? val.autosizeParams : false}
             onChange={(e) => this.updateFormData(e.target.value, val)}
-            onBlur={(e) => this.handleFieldBlur(e, val)}
             style={val.style ? val.style : {}}
             defaultValue={messageContent || ''}
             value={messageContent || ""}
@@ -2980,7 +2682,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   style={val.style ? val.style : {}}
                   placeholder={val.placeholder}
                   onChange={(e) => this.updateFormData(e.target.value, val)}
-                  onBlur={(e) => this.handleFieldBlur(e, val)}
                   defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                   value={value || ""}
                   disabled={val.disabled}
@@ -3465,7 +3166,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     style={val.style ? val.style : {}}
                     placeholder={val.placeholder}
                     onChange={(e) => this.updateFormData(e.target.value, val)}
-                    onBlur={(e) => this.handleFieldBlur(e, val)}
                     value={value || ""}
                     defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                     disabled={val.disabled}

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -599,8 +599,9 @@
       font-size: 10px;
       .body-image{
         img{
-          max-width: 16.75rem;
+          max-width: 18.75rem;
           max-height: 13.75rem;
+          margin-left: 1.571rem;
           display: block;
         }
       }
@@ -619,7 +620,7 @@
         box-shadow: 0 0 0.625rem 0 rgba(0,0,0,0.08); // 10px
     
         .carousel-image {
-          width: 95%;
+          width: 100%;
           height: 11.25rem; // 180px
           object-fit: contain;
           border-radius: 0.5rem 0.5rem 0 0; // 8px
@@ -695,7 +696,7 @@
       padding: 0 $CAP_SPACE_08 0 $CAP_SPACE_08;
     }
     .body-image{
-      padding: $CAP_SPACE_08 $CAP_SPACE_08 $CAP_SPACE_08 $CAP_SPACE_08;
+      padding: 0 $CAP_SPACE_08 $CAP_SPACE_08 $CAP_SPACE_08;
       img{
         border-radius: 3%;
       }

package/v2Components/TemplatePreview/index.js

@@ -816,7 +816,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                                   <video 
                                     key={`android-video-${content.bodyVideo.videoSrc}`}
                                     controls 
-                                    style={{ maxWidth: '100%', maxHeight: '150px' }}
+                                    style={{ maxWidth: '100%', maxHeight: '120px', marginLeft: '24px' }}
                                     poster={content?.bodyVideo?.videoPreview || undefined}
                                   >
                                     <source src={content.bodyVideo.videoSrc} type="video/mp4" />
@@ -880,7 +880,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                                   <video 
                                     key={`ios-video-${content?.bodyVideo?.videoSrc}`}
                                     controls 
-                                    style={{ maxWidth: '100%', maxHeight: '150px' }}
+                                    style={{ maxWidth: '100%', maxHeight: '120px', marginLeft: '24px' }}
                                     poster={content?.bodyVideo?.videoPreview || undefined}
                                   >
                                     <source src={content?.bodyVideo?.videoSrc} type="video/mp4" />

package/v2Containers/BeeEditor/index.js

@@ -349,4 +349,4 @@ const withConnect = connect(mapStateToProps, mapDispatchToProps);
 const withSaga = injectSaga({ key: 'beeEditor', saga: v2BeeEditionSagas });
 const withReducer = injectReducer({ key: 'beeEditor', reducer: v2BeeEditionReducer });
 
-export default compose(withReducer, withSaga, withConnect)(injectIntl(React.memo(BeeEditor)));
+export default compose(withReducer, withSaga, withConnect)(injectIntl(BeeEditor));

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -668,7 +668,9 @@ export function SlideBoxContent(props) {
       />
         )}
       {isEditMPush && (
-        (!isFullMode && isLoyaltyModule) ? (
+        (isFullMode && !commonUtil.hasNewMobilePushFeatureEnabled()) || 
+        (!isFullMode && isLoyaltyModule) || 
+        (!isFullMode && !isLoyaltyModule && !commonUtil.hasNewMobilePushFeatureEnabled()) ? (
           <MobliPushEdit
             getFormLibraryData={getFormData}
             setIsLoadingContent={setIsLoadingContent}
@@ -724,7 +726,9 @@ export function SlideBoxContent(props) {
         )
       )}
       {isCreateMPush && (
-        (!isFullMode && isLoyaltyModule) ? (
+        (isFullMode && !commonUtil.hasNewMobilePushFeatureEnabled()) || 
+        (!isFullMode && isLoyaltyModule) || 
+        (!isFullMode && !isLoyaltyModule && !commonUtil.hasNewMobilePushFeatureEnabled()) ? (
           <MobilepushWrapper
             key="creatives-mobilepush-wrapper"
             date={new Date().getMilliseconds()}