@capillarytech/creatives-library 8.0.201 → 8.0.202

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.202",
   "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

@@ -457,7 +457,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       }
       this.setState({formData: nextProps.formData, currentLangTab}, () => {
         if (nextProps?.isNewVersionFlow && !this.state?.formData[this.state?.currentTab - 1][this.state?.formData[this.state?.currentTab - 1]?.activeTab]?.tabKey) {
-          this.resetTabKeys(nextProps.formData, nextProps.tabCount, false, true);
+            this.resetTabKeys(nextProps.formData, nextProps.tabCount, false, true);
         }
         if (type === 'embedded' || ( this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'EMAIL')) {
           // Don't run validation if we're in Test & Preview mode
@@ -1104,7 +1104,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         }
         if(_.isEmpty(androidData) && this.state.currentTab == 2){
-          this.setState({androidValid, iosValid}, () => {
+          this.setState({androidValid, iosValid, errorData}, () => {
             this.props.setModalContent('ios');
           });
           // modal.body = "Android template is not configured. Save without Android template";
@@ -1119,7 +1119,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         }
         if(_.isEmpty(iosData) && this.state.currentTab == 1){
-          this.setState({androidValid, iosValid}, () => {
+          this.setState({androidValid, iosValid, errorData}, () => {
             this.props.setModalContent('android');
           });
           // modal.body = "IOS template is not configured, Save without IOS template";
@@ -2219,9 +2219,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     // 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'
+      val.id === 'template-subject'
     );
     
     if (isHighFrequencyField && !event) {
@@ -2436,7 +2434,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   // 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')) {
+    if (val && (val.id === 'template-name' || val.id === 'template-subject')) {
       this.debouncedValidation();
     }
   }

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/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()}

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

@@ -5,7 +5,6 @@ import { SlideBoxContent } from '../SlideBoxContent';
 import mockdata from '../../mockdata';
 import { templateDetailsImage, templateDetailsVideo, templateDetailsText, templateDetails_ } from '../../Viber/tests/mockData';
 import { CREATE, RICH_MEDIA } from '../../WeChat/Wrapper/constants';
-import * as commonUtils from '../../../utils/common';
 
 const {
   whatsappEditTemplateData,
@@ -51,11 +50,6 @@ describe('Test SlideBoxContent container', () => {
     global.Date = originalDate;
   });
 
-  afterEach(() => {
-    // Clean up all mocks after each test
-    jest.restoreAllMocks();
-  });
-
   const renderFunction = (channel, mode, templateData, additionalProps = {}) => {
     renderedComponent = shallowWithIntl(
       <SlideBoxContent
@@ -706,315 +700,4 @@ describe('Test SlideBoxContent container', () => {
       expect(renderedComponent).toMatchSnapshot();
     });
   });
-
-  // Mobile Push Loyalty Module Tests
-  describe('Mobile Push with Loyalty Module', () => {
-    it('Should render MobliPushEdit for loyalty module in library mode (edit)', () => {
-      renderFunction('MOBILEPUSH', 'editTemplate', { 
-        _id: 'test-id', 
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: false, 
-        isLoyaltyModule: true 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilePushNew for loyalty module in full mode (edit)', () => {
-      renderFunction('MOBILEPUSH', 'editTemplate', { 
-        _id: 'test-id', 
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: true, 
-        isLoyaltyModule: true 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilepushWrapper for loyalty module in library mode (create)', () => {
-      renderFunction('MOBILEPUSH', 'createTemplate', { 
-        mode: 'create',
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: false, 
-        isLoyaltyModule: true 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilePushNew for loyalty module in full mode (create)', () => {
-      renderFunction('MOBILEPUSH', 'createTemplate', { 
-        mode: 'create',
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: true, 
-        isLoyaltyModule: true 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilePushNew for non-loyalty module in library mode (edit)', () => {
-      renderFunction('MOBILEPUSH', 'editTemplate', { 
-        _id: 'test-id', 
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: false, 
-        isLoyaltyModule: false 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilePushNew for non-loyalty module in library mode (create)', () => {
-      renderFunction('MOBILEPUSH', 'createTemplate', { 
-        mode: 'create',
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: false, 
-        isLoyaltyModule: false 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilePushNew for non-loyalty module in full mode (edit)', () => {
-      renderFunction('MOBILEPUSH', 'editTemplate', { 
-        _id: 'test-id', 
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: true, 
-        isLoyaltyModule: false 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render MobilePushNew for non-loyalty module in full mode (create)', () => {
-      renderFunction('MOBILEPUSH', 'createTemplate', { 
-        mode: 'create',
-        type: 'MOBILEPUSH' // Use uppercase to match constants.MOBILE_PUSH
-      }, { 
-        isFullMode: true, 
-        isLoyaltyModule: false 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-  });
-
-  // Additional edge case tests to cover uncovered lines
-  describe('Edge Cases for Uncovered Lines', () => {
-    it('Should handle getLineType with LINE channel and empty templateData', () => {
-      // This should cover lines 72-74 in getLineType function
-      // LINE channel, not full mode, templateData exists but has no _id, no messageBody, and not isDefault
-      const emptyLineTemplateData = {
-        type: 'LINE',
-        isDefault: false,
-        // No _id and no versions.base.content.messages[0]
-      };
-      renderFunction('LINE', 'editTemplate', emptyLineTemplateData, { 
-        isFullMode: false 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle SMS channel with DLT content processing', () => {
-      // This should cover line 251 in SMS content processing
-      // Need isDltEnabled = true and updatedSmsEditor as array
-      // Mock hasTraiDltFeature to return true
-      jest.spyOn(commonUtils, 'hasTraiDltFeature').mockReturnValue(true);
-      
-      const smsTemplateData = {
-        type: 'SMS',
-        versions: {
-          base: {
-            'updated-sms-editor': ['Line 1', 'Line 2', 'Line 3'], // Array to trigger join()
-            'sms-editor': 'Fallback SMS content'
-          }
-        }
-      };
-      renderFunction('SMS', 'preview', smsTemplateData, { 
-        smsRegister: 'DLT', // Enable DLT for library mode
-        isFullMode: false
-      });
-      
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle LINE channel with video content', () => {
-      // This should cover lines 314-315 for video detection
-      // Need a LINE message with video property but no text, previewImageUrl, selectedSticker, baseUrl, template, or contents
-      const lineTemplateDataWithVideo = {
-        type: 'LINE',
-        versions: {
-          base: {
-            content: {
-              messages: [{
-                video: {
-                  originalContentUrl: 'https://example.com/video.mp4',
-                  externalLink: {
-                    linkUri: 'https://example.com/link'
-                  }
-                }
-                // No text, previewImageUrl, selectedSticker, baseUrl, template, or contents
-              }]
-            }
-          }
-        }
-      };
-      renderFunction('LINE', 'preview', lineTemplateDataWithVideo);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle default case in getChannelPreviewContent', () => {
-      // This should cover line 395 - default case return
-      const unknownChannelData = {
-        versions: {
-          base: {
-            content: {
-              customField: 'custom content'
-            }
-          }
-        }
-      };
-      renderFunction('UNKNOWN_CHANNEL', 'preview', unknownChannelData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle WeChat channel in different modes', () => {
-      const wechatTemplateData = {
-        type: 'WECHAT',
-        versions: {
-          base: {
-            content: {
-              msgcontent: 'RICH_MEDIA_WECHAT'
-            }
-          }
-        }
-      };
-      renderFunction('WECHAT', 'editTemplate', wechatTemplateData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle InApp channel preview', () => {
-      const inappTemplateData = {
-        type: 'INAPP',
-        versions: {
-          base: {
-            content: {
-              message: 'Test InApp message'
-            }
-          }
-        }
-      };
-      renderFunction('INAPP', 'preview', inappTemplateData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle Email channel with different modes', () => {
-      const emailTemplateData = {
-        type: 'EMAIL',
-        _id: 'email-123',
-        versions: {
-          base: {
-            content: {
-              subject: 'Test Email',
-              html_content: '<p>Test content</p>'
-            }
-          }
-        }
-      };
-      renderFunction('EMAIL', 'editTemplate', emailTemplateData, { 
-        isFullMode: true 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle Call Task channel', () => {
-      const callTaskData = {
-        type: 'CALL_TASK',
-        versions: {
-          base: {
-            content: {
-              message: 'Call task message'
-            }
-          }
-        }
-      };
-      renderFunction('CALL_TASK', 'editTemplate', callTaskData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle FTP channel', () => {
-      const ftpData = {
-        type: 'FTP',
-        versions: {
-          base: {
-            content: {
-              message: 'FTP message'
-            }
-          }
-        }
-      };
-      renderFunction('FTP', 'editTemplate', ftpData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-  });
-
-  // Additional comprehensive test cases
-  describe('Additional Channel Coverage', () => {
-    it('Should handle Zalo channel', () => {
-      const zaloData = {
-        type: 'ZALO',
-        versions: {
-          base: {
-            content: {
-              message: 'Zalo message'
-            }
-          }
-        }
-      };
-      renderFunction('ZALO', 'editTemplate', zaloData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle templates mode for various channels', () => {
-      renderFunction('EMAIL', 'templates', {});
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle createTemplate mode with different options', () => {
-      renderFunction('SMS', 'createTemplate', { mode: 'create' }, {
-        isFullMode: true,
-        smsRegister: 'DLT'
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle complex LINE template with multiple message types', () => {
-      const complexLineData = {
-        type: 'LINE',
-        versions: {
-          base: {
-            content: {
-              messages: [
-                {
-                  text: 'Hello',
-                  previewImageUrl: 'https://example.com/image.jpg'
-                },
-                {
-                  selectedSticker: {
-                    stickerUrl: 'https://example.com/sticker.png',
-                    stickerId: '123',
-                    packageId: '456'
-                  }
-                },
-                {
-                  baseUrl: 'https://example.com/map'
-                }
-              ]
-            }
-          }
-        }
-      };
-      renderFunction('LINE', 'preview', complexLineData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-  });
 });