@capillarytech/creatives-library 8.0.241 → 8.0.242-alpha.0

package/utils/tests/asyncAssetUpload.test.js

@@ -0,0 +1,292 @@
+import { fromJS } from 'immutable';
+import {
+  createAsyncAssetUploadConstants,
+  createAsyncAssetUploadReducerCases,
+  createPollingConfig,
+} from '../asyncAssetUpload';
+
+describe('asyncAssetUpload utilities', () => {
+  describe('createAsyncAssetUploadConstants', () => {
+    it('should create constants for a given channel prefix', () => {
+      const constants = createAsyncAssetUploadConstants('WHATSAPP', 'app/v2Containers/Whatsapp');
+      
+      expect(constants).toEqual({
+        UPLOAD_WHATSAPP_ASSET_PROCESSING: 'app/v2Containers/Whatsapp/UPLOAD_WHATSAPP_ASSET_PROCESSING',
+        UPLOAD_WHATSAPP_ASSET_COMPLETED: 'app/v2Containers/Whatsapp/UPLOAD_WHATSAPP_ASSET_COMPLETED',
+        UPLOAD_WHATSAPP_ASSET_FAILED: 'app/v2Containers/Whatsapp/UPLOAD_WHATSAPP_ASSET_FAILED',
+        UPLOAD_WHATSAPP_ASSET_TIMEOUT: 'app/v2Containers/Whatsapp/UPLOAD_WHATSAPP_ASSET_TIMEOUT',
+      });
+    });
+
+    it('should use default container path when not provided', () => {
+      const constants = createAsyncAssetUploadConstants('MOBILEPUSH');
+      
+      expect(constants.UPLOAD_MOBILEPUSH_ASSET_PROCESSING).toBe(
+        'app/v2Containers/MOBILEPUSH/UPLOAD_MOBILEPUSH_ASSET_PROCESSING'
+      );
+    });
+
+    it('should handle lowercase channel prefix', () => {
+      const constants = createAsyncAssetUploadConstants('email', 'app/v2Containers/Email');
+      
+      expect(constants.UPLOAD_EMAIL_ASSET_PROCESSING).toBe(
+        'app/v2Containers/Email/UPLOAD_EMAIL_ASSET_PROCESSING'
+      );
+    });
+
+    it('should create constants for different channels', () => {
+      const smsConstants = createAsyncAssetUploadConstants('SMS', 'app/v2Containers/Sms');
+      
+      expect(smsConstants.UPLOAD_SMS_ASSET_PROCESSING).toContain('SMS');
+      expect(smsConstants.UPLOAD_SMS_ASSET_COMPLETED).toContain('SMS');
+      expect(smsConstants.UPLOAD_SMS_ASSET_FAILED).toContain('SMS');
+      expect(smsConstants.UPLOAD_SMS_ASSET_TIMEOUT).toContain('SMS');
+    });
+  });
+
+  describe('createAsyncAssetUploadReducerCases', () => {
+    const mockActionTypes = {
+      PROCESSING: 'TEST_PROCESSING',
+      COMPLETED: 'TEST_COMPLETED',
+      FAILED: 'TEST_FAILED',
+      TIMEOUT: 'TEST_TIMEOUT',
+    };
+
+    const createInitialState = () => fromJS({
+      uploadedAssetData: {},
+      assetUploading: false,
+      uploadAssetSuccess: false,
+      assetProcessing: {},
+    });
+
+    it('should create reducer cases with default options', () => {
+      const reducerCases = createAsyncAssetUploadReducerCases(mockActionTypes);
+      
+      expect(reducerCases.PROCESSING).toBe('TEST_PROCESSING');
+      expect(reducerCases.COMPLETED).toBe('TEST_COMPLETED');
+      expect(reducerCases.FAILED).toBe('TEST_FAILED');
+      expect(reducerCases.TIMEOUT).toBe('TEST_TIMEOUT');
+      expect(typeof reducerCases.handleProcessing).toBe('function');
+      expect(typeof reducerCases.handleCompleted).toBe('function');
+      expect(typeof reducerCases.handleFailed).toBe('function');
+      expect(typeof reducerCases.handleTimeout).toBe('function');
+    });
+
+    describe('handleProcessing', () => {
+      it('should set processing state correctly', () => {
+        const reducerCases = createAsyncAssetUploadReducerCases(mockActionTypes);
+        const state = createInitialState();
+        const action = {
+          payload: {
+            assetId: 'asset-123',
+            asset: { _id: 'asset-123', url: 'https://example.com/image.jpg' },
+          },
+        };
+        
+        const newState = reducerCases.handleProcessing(state, action);
+        
+        expect(newState.get('uploadAssetSuccess')).toBe(false);
+        expect(newState.get('assetUploading')).toBe(true);
+        expect(newState.getIn(['assetProcessing', 'asset-123', 'status'])).toBe('processing');
+        expect(newState.getIn(['assetProcessing', 'asset-123', 'asset'])).toBeDefined();
+        expect(newState.getIn(['assetProcessing', 'asset-123', 'startTime'])).toBeDefined();
+      });
+    });
+
+    describe('handleCompleted', () => {
+      it('should set completed state correctly without templateType', () => {
+        const reducerCases = createAsyncAssetUploadReducerCases(mockActionTypes);
+        const state = createInitialState();
+        const action = {
+          payload: {
+            assetId: 'asset-123',
+            asset: { _id: 'asset-123', url: 'https://example.com/image.jpg' },
+          },
+        };
+        
+        const newState = reducerCases.handleCompleted(state, action);
+        
+        expect(newState.get('uploadAssetSuccess')).toBe(true);
+        expect(newState.get('assetUploading')).toBe(false);
+        expect(newState.getIn(['assetProcessing', 'asset-123', 'status'])).toBe('completed');
+        expect(newState.get('uploadedAssetData')).toEqual(fromJS(action.payload.asset));
+      });
+
+      it('should set completed state correctly with templateType', () => {
+        const reducerCases = createAsyncAssetUploadReducerCases(mockActionTypes);
+        const state = createInitialState();
+        const action = {
+          templateType: 0,
+          payload: {
+            assetId: 'asset-123',
+            asset: { _id: 'asset-123', url: 'https://example.com/image.jpg' },
+          },
+        };
+        
+        const newState = reducerCases.handleCompleted(state, action);
+        
+        expect(newState.get('uploadAssetSuccess')).toBe(true);
+        expect(newState.get('assetUploading')).toBe(false);
+        expect(newState.getIn(['assetProcessing', 'asset-123', 'status'])).toBe('completed');
+        expect(newState.get('uploadedAssetData0')).toEqual(fromJS(action.payload.asset));
+      });
+    });
+
+    describe('handleFailed', () => {
+      it('should set failed state correctly', () => {
+        const reducerCases = createAsyncAssetUploadReducerCases(mockActionTypes);
+        const state = createInitialState();
+        const action = {
+          payload: {
+            assetId: 'asset-123',
+            error: 'Processing failed',
+          },
+        };
+        
+        const newState = reducerCases.handleFailed(state, action);
+        
+        expect(newState.get('uploadAssetSuccess')).toBe(false);
+        expect(newState.get('assetUploading')).toBe(false);
+        expect(newState.getIn(['assetProcessing', 'asset-123', 'status'])).toBe('failed');
+        expect(newState.getIn(['assetProcessing', 'asset-123', 'error'])).toBe('Processing failed');
+      });
+    });
+
+    describe('handleTimeout', () => {
+      it('should set timeout state correctly', () => {
+        const reducerCases = createAsyncAssetUploadReducerCases(mockActionTypes);
+        const state = createInitialState();
+        const action = {
+          payload: {
+            assetId: 'asset-123',
+            message: 'Processing timeout',
+          },
+        };
+        
+        const newState = reducerCases.handleTimeout(state, action);
+        
+        expect(newState.get('uploadAssetSuccess')).toBe(false);
+        expect(newState.get('assetUploading')).toBe(false);
+        expect(newState.getIn(['assetProcessing', 'asset-123', 'status'])).toBe('timeout');
+        expect(newState.getIn(['assetProcessing', 'asset-123', 'error'])).toBe('Processing timeout');
+      });
+    });
+
+    it('should use custom state keys when provided', () => {
+      const reducerCases = createAsyncAssetUploadReducerCases(mockActionTypes, {
+        uploadedAssetDataKey: 'customAssetData',
+        assetUploadingKey: 'customUploading',
+        uploadAssetSuccessKey: 'customSuccess',
+        assetProcessingKey: 'customProcessing',
+      });
+      
+      const state = fromJS({
+        customAssetData: {},
+        customUploading: false,
+        customSuccess: false,
+        customProcessing: {},
+      });
+      
+      const action = {
+        payload: {
+          assetId: 'asset-123',
+          asset: { _id: 'asset-123' },
+        },
+      };
+      
+      const newState = reducerCases.handleProcessing(state, action);
+      
+      expect(newState.get('customSuccess')).toBe(false);
+      expect(newState.get('customUploading')).toBe(true);
+      expect(newState.getIn(['customProcessing', 'asset-123'])).toBeDefined();
+    });
+  });
+
+  describe('createPollingConfig', () => {
+    const mockActionTypes = {
+      COMPLETED: 'TEST_COMPLETED',
+      FAILED: 'TEST_FAILED',
+      TIMEOUT: 'TEST_TIMEOUT',
+    };
+
+    it('should create polling config correctly', () => {
+      const config = createPollingConfig('image', 'asset-123', mockActionTypes, 0);
+      
+      expect(config).toEqual({
+        type: 'image',
+        assetId: 'asset-123',
+        onCompleted: expect.any(Function),
+        onFailed: expect.any(Function),
+        onTimeout: expect.any(Function),
+      });
+    });
+
+    it('should create onCompleted action creator', () => {
+      const config = createPollingConfig('image', 'asset-123', mockActionTypes, 0);
+      const data = {
+        assetId: 'asset-123',
+        asset: { _id: 'asset-123' },
+        duration: 1000,
+      };
+      
+      const action = config.onCompleted(data);
+      
+      expect(action).toEqual({
+        type: 'TEST_COMPLETED',
+        payload: data,
+        templateType: 0,
+      });
+    });
+
+    it('should create onFailed action creator', () => {
+      const config = createPollingConfig('image', 'asset-123', mockActionTypes, 0);
+      const data = {
+        assetId: 'asset-123',
+        error: 'Processing failed',
+        duration: 1000,
+      };
+      
+      const action = config.onFailed(data);
+      
+      expect(action).toEqual({
+        type: 'TEST_FAILED',
+        payload: data,
+        templateType: 0,
+      });
+    });
+
+    it('should create onTimeout action creator', () => {
+      const config = createPollingConfig('image', 'asset-123', mockActionTypes, 0);
+      const data = {
+        assetId: 'asset-123',
+        message: 'Timeout',
+        duration: 90000,
+      };
+      
+      const action = config.onTimeout(data);
+      
+      expect(action).toEqual({
+        type: 'TEST_TIMEOUT',
+        payload: data,
+        templateType: 0,
+      });
+    });
+
+    it('should handle undefined templateType', () => {
+      const config = createPollingConfig('image', 'asset-123', mockActionTypes);
+      const data = { assetId: 'asset-123', asset: {} };
+      
+      const action = config.onCompleted(data);
+      
+      expect(action.templateType).toBeUndefined();
+    });
+
+    it('should work with different asset types', () => {
+      const videoConfig = createPollingConfig('video', 'asset-456', mockActionTypes, 1);
+      
+      expect(videoConfig.type).toBe('video');
+      expect(videoConfig.assetId).toBe('asset-456');
+      expect(videoConfig.onCompleted({}).templateType).toBe(1);
+    });
+  });
+});

package/utils/transformerUtils.js

@@ -10,6 +10,7 @@ import {
   RCS,
   LINE,
   VIBER,
+  WEBPUSH,
   EMF,
   VENENO,
   TEXT,
@@ -63,6 +64,8 @@ export const transformChannelPayload = (data, options = {}) => {
       return transformLinePayload(data, options);
     case VIBER:
       return transformViberPayload(data, options);
+    case WEBPUSH:
+      return transformWebpushPayload(data, options);
     default:
       return data; // Return unchanged for unsupported channels
   }
@@ -317,6 +320,45 @@ const transformViberPayload = (viberData, options = {}) => {
   return payload;
 };
 
+/**
+ * Transforms WebPush data to the required payload format
+ * @param {Object} webpushData - Current WebPush data
+ * @param {Object} options - Additional options (ouId, sourceEntityId, etc.)
+ * @returns {Object} - Transformed WebPush payload
+ */
+const transformWebpushPayload = (webpushData, options = {}) => {
+  const { loyaltyMetaData = {} } = options;
+  const { transformedMessageDetails = {} } = loyaltyMetaData;
+  const { webpushDeliverySettings = {} } = transformedMessageDetails || {};
+  
+  // Get base payload structure
+  const payload = createBasePayload(WEBPUSH, loyaltyMetaData);
+  
+  // Extract webpush content from messageContent.content.content structure
+  const webpushContent = webpushData?.messageContent?.content?.content || {};
+  const accountId = webpushData?.messageContent?.content?.accountId || 0;
+  
+  // Add WebPush-specific properties
+  payload.centralCommsPayload.webpushMessageContent = {
+    channel: WEBPUSH,
+    accountId,
+    isDefault: webpushData?.messageContent?.content?.isDefault || false,
+    storeType: webpushData?.messageContent?.content?.storeType || 'REGISTERED_STORE',
+    content: {
+      title: webpushContent?.title || '',
+      message: webpushContent?.message || '',
+      ...(webpushContent?.iconImageUrl && { iconImageUrl: webpushContent.iconImageUrl }),
+      ...(webpushContent?.cta && { cta: webpushContent.cta }),
+      ...(webpushContent?.expandableDetails && { expandableDetails: webpushContent.expandableDetails }),
+    },
+    messageSubject: webpushData?.messageSubject || "",
+    offers: webpushData?.messageContent?.content?.offers || [],
+  };
+  payload.centralCommsPayload.webpushDeliverySettings = webpushDeliverySettings;
+  
+  return payload;
+};
+
 // Checks if the template has changed
 export const getTemplateDiffState = (channel, oldData, newData) => {
   switch (channel.toUpperCase()) {

package/v2Components/CapImageUpload/constants.js

@@ -4,4 +4,6 @@ export const MAX_SUPPORTED_IMAGE_SIZE = {
   INAPP: 5,
   WHATSAPP: 5,
   MOBILEPUSH: 2,
+  WEBPUSH: 5,
+  WEBPUSH_BRAND_ICON: 1
 };

package/v2Components/CapImageUpload/index.js

@@ -17,17 +17,18 @@ import {
   CapImage,
   CapError,
 } from '@capillarytech/cap-ui-library';
-import { injectIntl, FormattedMessage, intlShape} from 'react-intl';
+import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 import { isEmpty, get } from 'lodash';
 import './index.scss';
 import Gallery from '../../v2Containers/Assets/Gallery';
 import { MAX_SUPPORTED_IMAGE_SIZE } from './constants';
 import {
-  FACEBOOK, INAPP, RCS, WHATSAPP, VIBER,
+  FACEBOOK, INAPP, RCS, WHATSAPP, VIBER, WEBPUSH, WEBPUSH_BRAND_ICON
 } from "../../v2Containers/CreativesContainer/constants";
 
 import messages from './messages';
 import { MOBILEPUSH } from '../CapVideoUpload/constants';
+import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 function CapImageUpload(props) {
   const {
     intl,
@@ -50,6 +51,7 @@ function CapImageUpload(props) {
     channelSpecificStyle,
     showReUploadButton = true,
     disableAutoRestore = false, // New prop to disable automatic restoration
+    recommendedDimensions, // Array of {width, height} objects for recommended dimensions
   } = props;
   const {
     formatMessage,
@@ -72,7 +74,7 @@ function CapImageUpload(props) {
   const [isImageError, updateImageErrorMessage] = useState(false);
   const [isDrawerRequired, updateDrawerRequirement] = useState(false);
 
-  const {CapHeadingSpan} = CapHeading;
+  const { CapHeadingSpan } = CapHeading;
   const ImageComponent = useCallback(
     () => (
       <>
@@ -91,7 +93,7 @@ function CapImageUpload(props) {
 
   const WithLabel = LabelHOC(ImageComponent);
 
-  const uploadImages = useCallback((e, {files}) => {
+  const uploadImages = useCallback((e, { files }) => {
     if (e) {
       e.preventDefault();
     }
@@ -109,13 +111,13 @@ function CapImageUpload(props) {
         height: img.height,
         error: file && (file.size / (1e+6) > 5), // Checking if file exists and its size is greater than 5MB (5 * 10^6 bytes)
       };
-      submitAction({file, type: 'image', fileParams}, incorrectFile);
+      submitAction({ file, type: 'image', fileParams }, incorrectFile);
     };
     img.onerror = () => {
       const fileParams = {
         error: true,
       };
-      submitAction({fileParams}, incorrectFile);
+      submitAction({ fileParams }, incorrectFile);
     };
     if (e) {
       const event = e;
@@ -123,7 +125,7 @@ function CapImageUpload(props) {
     }
   }, []);
 
-  const rcsValidation = useCallback((incorrectFile, data, size, height, width, error) => { 
+  const rcsValidation = useCallback((incorrectFile, data, size, height, width, error) => {
     if (incorrectFile || size < minImgSize || size > imgSize || height !== imgHeight || width !== imgWidth || error) {
       updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
     } else {
@@ -146,6 +148,19 @@ function CapImageUpload(props) {
     const { height, width, error } = fileParams || {};
     if (channel === RCS) {
       rcsValidation(incorrectFile, data, size, height, width, error);
+    } else if ([WEBPUSH, WEBPUSH_BRAND_ICON].includes(channel)) {
+      // For WEBPUSH, only validate file extension, size, and format - no dimension validation
+      if (incorrectFile || size > imgSize || error) {
+        updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
+      } else {
+        updateImageErrorMessage('');
+        uploadAsset(
+          data.file,
+          data.type,
+          data.fileParams,
+          index,
+        );
+      }
     } else if (incorrectFile || size > imgSize || height > imgHeight || width > imgWidth || error) {
       updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
     } else {
@@ -160,7 +175,7 @@ function CapImageUpload(props) {
   }, [isImageError]);
 
   const capUploaderCustomRequest = useCallback((uploadData) => {
-    uploadImages(undefined, {files: [uploadData.file]});
+    uploadImages(undefined, { files: [uploadData.file] });
   }, [uploadImages]);
 
   const setDrawerVisibility = useCallback((drawervisibleFlag) => updateDrawerRequirement(drawervisibleFlag), [isDrawerRequired]);
@@ -181,19 +196,27 @@ function CapImageUpload(props) {
       secure_file_path: image, width, height, file_size: size,
     } = get(imageTemplate, 'metaInfo', {});
     updateDrawerRequirement(false);
-    if (!allowedExtensionsRegex.test(image) || height > imgHeight || width > imgWidth || size > imgSize ) {
+    // For WEBPUSH, skip dimension validation - only check extension, size
+    if ([WEBPUSH, WEBPUSH_BRAND_ICON].includes(channel)) {
+      if (!allowedExtensionsRegex.test(image) || size > imgSize) {
+        updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
+      } else {
+        updateImageErrorMessage('');
+        updateImageSrc(image);
+      }
+    } else if (!allowedExtensionsRegex.test(image) || height > imgHeight || width > imgWidth || size > imgSize) {
       updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
     } else {
       updateImageErrorMessage('');
       updateImageSrc(image);
     }
-  }, [isImageError, isDrawerRequired]);
+  }, [isImageError, isDrawerRequired, channel, allowedExtensionsRegex, imgSize, formatMessage]);
 
   const getGalleryDrawerContent = useCallback(() => {
     const locationGallery = {
       pathname: `/assets`,
       search: '',
-      query: !isFullMode ? {type: 'embedded', module: 'library'} : {},
+      query: !isFullMode ? { type: 'embedded', module: 'library' } : {},
     };
     return (
       <>
@@ -262,7 +285,7 @@ function CapImageUpload(props) {
           className="dragger-button re-upload"
           type="flat"
           onClick={onReUpload}
-          style={channelSpecificStyle ? { marginTop: '-16px'} : {}}
+          style={channelSpecificStyle ? { marginTop: `-${CAP_SPACE_16}` } : {}}
         >
           <FormattedMessage {...messages.imageReUpload} />
         </CapButton>
@@ -305,7 +328,18 @@ function CapImageUpload(props) {
         )}
         {![WHATSAPP, INAPP].includes(channel) && (
           <CapHeadingSpan type="label2" className="image-dimension">
-            <FormattedMessage {...messages.imageDimenstionDescription} values={{ width: imgWidth, height: imgHeight }} />
+            {[WEBPUSH, WEBPUSH_BRAND_ICON].includes(channel) && recommendedDimensions?.length ? (
+              <FormattedMessage
+                {...messages.recommendedDimensions}
+                values={{
+                  dimensions: recommendedDimensions
+                    .map((dim) => `${dim.width} x ${dim.height}px`)
+                    .join(', '),
+                }}
+              />
+            ) : (
+              <FormattedMessage {...messages.imageDimenstionDescription} values={{ width: imgWidth, height: imgHeight }} />
+            )}
           </CapHeadingSpan>
         )}
         {channel === FACEBOOK && (
@@ -328,7 +362,7 @@ function CapImageUpload(props) {
             getImageSizeLabel()
           )
         )}
-        {[VIBER, INAPP, MOBILEPUSH].includes(channel) && getImageSizeLabel()}
+        {[VIBER, INAPP, MOBILEPUSH, WEBPUSH, WEBPUSH_BRAND_ICON].includes(channel) && getImageSizeLabel()}
         <CapHeadingSpan type="label2" className="image-format">
           {channel === INAPP ? <FormattedMessage {...messages.format2} /> : <FormattedMessage {...messages.format} />}
         </CapHeadingSpan>
@@ -357,6 +391,12 @@ CapImageUpload.propTypes = {
   channel: PropTypes.string,
   channelSpecificStyle: PropTypes.bool,
   disableAutoRestore: PropTypes.bool,
+  recommendedDimensions: PropTypes.arrayOf(
+    PropTypes.shape({
+      width: PropTypes.number.isRequired,
+      height: PropTypes.number.isRequired,
+    })
+  ),
 };
 
 export default injectIntl(CapImageUpload);

package/v2Components/CapImageUpload/index.scss

@@ -19,5 +19,8 @@ $classPrefix: cap-custom-image-upload;
   }
   .upload-image-error{
     margin-top: $CAP_SPACE_04;
-}
+  }
+  .ant-upload-list-item{
+    height: 1.65rem;
+  }
 }

package/v2Components/CapImageUpload/messages.js

@@ -34,6 +34,10 @@ export default defineMessages({
     id: `${scope}.imageDimenstionDescription`,
     defaultMessage: 'Dimensions upto: {width}px x {height}px',
   },
+  recommendedDimensions: {
+    id: `${scope}.recommendedDimensions`,
+    defaultMessage: 'Recommended dimensions: {dimensions}',
+  },
   format: {
     id: `${scope}.format`,
     defaultMessage: 'Format: JPEG, JPG, PNG',

package/v2Components/CapImageUrlUpload/constants.js

@@ -0,0 +1,19 @@
+// Default allowed content types for image URL validation
+export const DEFAULT_ALLOWED_CONTENT_TYPES = ['image/jpeg', 'image/jpg', 'image/png'];
+
+// Default maximum file size (5MB)
+export const DEFAULT_MAX_SIZE = 5000000;
+
+// Default allowed extensions regex
+export const DEFAULT_ALLOWED_EXTENSIONS_REGEX = /\.(jpe?g|png)$/i;
+
+// MIME type to file extension mapping
+export const MIME_TYPE_TO_EXTENSION = {
+  'image/jpeg': 'jpg',
+  'image/jpg': 'jpg',
+  'image/png': 'png',
+};
+
+// Default image extension fallback
+export const DEFAULT_IMAGE_EXTENSION = 'png';
+