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

package/sagas/assetPolling.js

@@ -0,0 +1,156 @@
+/**
+ * Centralized Asset Status Polling Saga
+ * Reusable across all channels (WhatsApp, MobilePush, Email, SMS, etc.)
+ * 
+ * Usage:
+ * import { pollAssetStatus } from '../../sagas/assetPolling';
+ * 
+ * yield call(pollAssetStatus, {
+ *   type: 'video',
+ *   assetId: 'asset-123',
+ *   onProcessing: (data) => ({ type: 'ASSET_PROCESSING', payload: data }),
+ *   onCompleted: (asset) => ({ type: 'ASSET_COMPLETED', payload: asset }),
+ *   onFailed: (error) => ({ type: 'ASSET_FAILED', payload: error }),
+ *   onTimeout: () => ({ type: 'ASSET_TIMEOUT' })
+ * });
+ */
+
+import { call, put } from 'redux-saga/effects';
+import { getAssetStatus } from '../services/api';
+import { ASSET_STATUS } from '../utils/assetStatusConstants';
+
+/**
+ * Delay utility function compatible with redux-saga 0.16.2
+ * Returns a promise that resolves after the specified milliseconds
+ * @param {number} ms - Milliseconds to delay
+ * @returns {Promise} Promise that resolves after delay
+ */
+export function delay(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+/**
+ * Generic asset status polling saga
+ * @param {Object} config - Polling configuration
+ * @param {string} config.type - Asset type (image, video, document, gif)
+ * @param {string} config.assetId - Asset ID to poll
+ * @param {Function} config.onCompleted - Action creator for completed state
+ * @param {Function} config.onFailed - Action creator for failed state
+ * @param {Function} config.onTimeout - Action creator for timeout state
+ * @param {number} config.maxDuration - Max polling duration in ms (default: 90000)
+ * @param {number} config.initialDelay - Initial delay before first poll in ms (default: 1000)
+ * @param {number} config.pollInterval - Interval between polls in ms (default: 2000)
+ */
+export function* pollAssetStatus(config) {
+  const {
+    type,
+    assetId,
+    onCompleted,
+    onFailed,
+    onTimeout,
+    maxDuration = 90000, // 90 seconds default
+    initialDelay: configInitialDelay = 1000, // 1 second default
+    pollInterval = 2000, // 2 seconds default
+  } = config;
+
+  const startTime = Date.now();
+  let isFirstPoll = true;
+
+  try {
+    while (true) {
+      // Initial delay, then regular interval
+      // Using call() for compatibility with redux-saga 0.16.2
+      yield call(delay, isFirstPoll ? configInitialDelay : pollInterval);
+      isFirstPoll = false;
+
+      // Check timeout
+      if (Date.now() - startTime > maxDuration) {
+        if (onTimeout) {
+          const timeoutAction = onTimeout({
+            assetId,
+            message: 'Asset processing is taking longer than expected. Please check back later.',
+            duration: Date.now() - startTime,
+          });
+          yield put(timeoutAction);
+        }
+        break;
+      }
+
+      // Poll status endpoint
+      const statusResponse = yield call(getAssetStatus, type, assetId);
+      
+      // Validate API response structure
+      // Check for error indicators: success: false, error property, or missing response
+      if (!statusResponse || statusResponse.success === false || statusResponse.error) {
+        const errorMessage = statusResponse?.error || 
+                            statusResponse?.message || 
+                            'Failed to fetch asset status: Invalid API response';
+        
+        if (onFailed) {
+          const failedAction = onFailed({
+            assetId,
+            error: errorMessage,
+            duration: Date.now() - startTime,
+          });
+          yield put(failedAction);
+        }
+        break;
+      }
+      
+      // Extract status data from response
+      const statusData = statusResponse?.response || {};
+      
+      // Validate that statusData has a meaningful status property
+      if (!statusData || typeof statusData.status !== 'string') {
+        const errorMessage = 'Invalid asset status response: Missing or invalid status field';
+        
+        if (onFailed) {
+          const failedAction = onFailed({
+            assetId,
+            error: errorMessage,
+            duration: Date.now() - startTime,
+          });
+          yield put(failedAction);
+        }
+        break;
+      }
+
+      if (statusData.status === ASSET_STATUS.COMPLETED) {
+        // Asset completed successfully
+        if (onCompleted) {
+          const completedAction = onCompleted({
+            assetId,
+            asset: statusData.asset,
+            duration: Date.now() - startTime,
+          });
+          yield put(completedAction);
+        }
+        break;
+      } else if (statusData.status === ASSET_STATUS.FAILED) {
+        // Asset processing failed
+        if (onFailed) {
+          const failedAction = onFailed({
+            assetId,
+            error: statusData.error || 'Processing failed',
+            duration: Date.now() - startTime,
+          });
+          yield put(failedAction);
+        }
+        break;
+      }
+
+      // Continue polling if still processing
+    }
+  } catch (error) {
+    // Handle polling errors (network issues, etc.)
+    if (onFailed) {
+      const errorAction = onFailed({
+        assetId,
+        error: `Failed to check asset status: ${error.message}`,
+      });
+      yield put(errorAction);
+    }
+  }
+}

package/services/api.js

@@ -287,6 +287,11 @@ export const createMobilePushTemplateV2 = (template) => {
   return request(url, getAPICallObject('POST', template));
 };
 
+export const createWebPushTemplate = (template) => {
+  const url = `${API_ENDPOINT}/templates/WEBPUSH`;
+  return request(url, getAPICallObject('POST', template));
+};
+
 export const duplicateTemplate = ({id, channel}) => {
   const url = `${API_ENDPOINT}/templates/duplicate/${id}/${channel}`;
   return request(url, getAPICallObject('GET'));
@@ -709,4 +714,15 @@ export const updateTestMessageMeta = (payload) => {
   return request(url, getAPICallObject('POST', payload?.data, false, true));
 };
 
+/**
+ * P4.1: Get asset processing status for async uploads
+ * @param {string} type - Asset type (image, video, document)
+ * @param {string} assetId - Asset ID to check status
+ * @returns {Promise} Promise resolving to asset status
+ */
+export const getAssetStatus = (type, assetId) => {
+  const url = `${API_ENDPOINT}/assets/${type}/${assetId}/status`;
+  return request(url, getAPICallObject('GET'));
+};
+
 export {request, getAPICallObject};

package/services/tests/api.test.js

@@ -25,6 +25,7 @@ import {
   updateTestMessageMeta,
   updateMetaConfig,
   getMediaDetails,
+  getAssetStatus,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -849,3 +850,126 @@ describe('getMediaDetails', () => {
     });
   });
 });
+
+describe('getAssetStatus', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should return correct response on success', async () => {
+    const mockResponse = {
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: {
+          assetId: 'asset-123',
+          status: 'completed',
+          asset: {
+            _id: 'asset-123',
+            type: 'IMAGE',
+            url: 'https://example.com/image.jpg',
+          },
+        },
+      }),
+    };
+    global.fetch.mockReturnValue(Promise.resolve(mockResponse));
+    
+    const result = await getAssetStatus('image', 'asset-123');
+    
+    expect(result).toEqual({
+      status: 200,
+      response: {
+        assetId: 'asset-123',
+        status: 'completed',
+        asset: {
+          _id: 'asset-123',
+          type: 'IMAGE',
+          url: 'https://example.com/image.jpg',
+        },
+      },
+    });
+  });
+
+  it('should handle processing status', async () => {
+    const mockResponse = {
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: {
+          assetId: 'asset-123',
+          status: 'processing',
+          message: 'Asset is being processed',
+        },
+      }),
+    };
+    global.fetch.mockReturnValue(Promise.resolve(mockResponse));
+    
+    const result = await getAssetStatus('video', 'asset-123');
+    
+    expect(result).toEqual({
+      status: 200,
+      response: {
+        assetId: 'asset-123',
+        status: 'processing',
+        message: 'Asset is being processed',
+      },
+    });
+  });
+
+  it('should handle failed status', async () => {
+    const mockResponse = {
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: {
+          assetId: 'asset-123',
+          status: 'failed',
+          error: 'Processing failed',
+        },
+      }),
+    };
+    global.fetch.mockReturnValue(Promise.resolve(mockResponse));
+    
+    const result = await getAssetStatus('document', 'asset-123');
+    
+    expect(result).toEqual({
+      status: 200,
+      response: {
+        assetId: 'asset-123',
+        status: 'failed',
+        error: 'Processing failed',
+      },
+    });
+  });
+
+  it('should handle fetch failure', async () => {
+    global.fetch.mockRejectedValue({ error: 'Network error' });
+    
+    const result = await getAssetStatus('image', 'asset-123');
+    
+    expect(result).toEqual({
+      error: 'Network error',
+    });
+  });
+
+  it('should construct correct URL with type and assetId', async () => {
+    const mockResponse = {
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: { assetId: 'asset-123', status: 'processing' },
+      }),
+    };
+    global.fetch.mockReturnValue(Promise.resolve(mockResponse));
+    
+    await getAssetStatus('video', 'asset-456');
+    
+    expect(global.fetch).toHaveBeenCalled();
+    const callArgs = global.fetch.mock.calls[0];
+    expect(callArgs[0]).toContain('/assets/video/asset-456/status');
+  });
+});

package/translations/en.json

@@ -2022,6 +2022,7 @@
   "creatives.containersV2.Whatsapp.vietnamese": "Vietnamese",
   "creatives.containersV2.Whatsapp.whatsappCreateNotification": "{name} has been sent for approval",
   "creatives.containersV2.Whatsapp.zulu": "Zulu",
+  "creatives.containersV2.WebPush.addLabels": "Add labels",
   "creatives.containersV2.addLabels": "Add labels",
   "creatives.containersV2.appName": "App Name",
   "creatives.containersV2.applyNow": "Apply now",

package/utils/assetStatusConstants.js

@@ -0,0 +1,12 @@
+/**
+ * Asset Processing Status Constants
+ * Matches backend ASSET_STATUS constants from cap-creatives-api/src/constants/globals.js
+ * Used across sagas, reducers, and utilities for consistent status handling
+ */
+export const ASSET_STATUS = {
+  PROCESSING: 'processing',
+  COMPLETED: 'completed',
+  FAILED: 'failed',
+  TIMEOUT: 'timeout', // UI-specific status for polling timeout
+};
+

package/utils/asyncAssetUpload.js

@@ -0,0 +1,161 @@
+/**
+ * Generic Async Asset Upload Utilities
+ * 
+ * Provides reusable constants, reducer cases, and action creators for async asset uploads
+ * across all channels (WhatsApp, MobilePush, Email, SMS, etc.)
+ * 
+ * Usage:
+ *   import { createAsyncAssetUploadConstants, createAsyncAssetUploadReducerCases } from '../../utils/asyncAssetUpload';
+ * 
+ *   // In constants.js
+ *   export const {
+ *     UPLOAD_ASSET_PROCESSING,
+ *     UPLOAD_ASSET_COMPLETED,
+ *     UPLOAD_ASSET_FAILED,
+ *     UPLOAD_ASSET_TIMEOUT,
+ *   } = createAsyncAssetUploadConstants('WHATSAPP'); // or 'MOBILEPUSH', 'EMAIL', etc.
+ * 
+ *   // In reducer.js
+ *   import { createAsyncAssetUploadReducerCases } from '../../utils/asyncAssetUpload';
+ *   const asyncUploadCases = createAsyncAssetUploadReducerCases({
+ *     PROCESSING: UPLOAD_ASSET_PROCESSING,
+ *     COMPLETED: UPLOAD_ASSET_COMPLETED,
+ *     FAILED: UPLOAD_ASSET_FAILED,
+ *     TIMEOUT: UPLOAD_ASSET_TIMEOUT,
+ *   });
+ *   
+ *   // In reducer switch statement
+ *   case asyncUploadCases.PROCESSING:
+ *     return asyncUploadCases.handleProcessing(state, action);
+ *   case asyncUploadCases.COMPLETED:
+ *     return asyncUploadCases.handleCompleted(state, action);
+ *   // etc.
+ */
+
+import { fromJS } from 'immutable';
+import { ASSET_STATUS } from './assetStatusConstants';
+
+/**
+ * Creates async asset upload constants for a given channel
+ * @param {string} channelPrefix - Channel prefix (e.g., 'WHATSAPP', 'MOBILEPUSH', 'EMAIL')
+ * @param {string} containerPath - Container path (e.g., 'app/v2Containers/Whatsapp')
+ * @returns {Object} Object containing all async upload constants
+ */
+export function createAsyncAssetUploadConstants(channelPrefix, containerPath) {
+  const prefix = containerPath || `app/v2Containers/${channelPrefix}`;
+  const channelName = channelPrefix.toUpperCase();
+  
+  return {
+    [`UPLOAD_${channelName}_ASSET_PROCESSING`]: `${prefix}/UPLOAD_${channelName}_ASSET_PROCESSING`,
+    [`UPLOAD_${channelName}_ASSET_COMPLETED`]: `${prefix}/UPLOAD_${channelName}_ASSET_COMPLETED`,
+    [`UPLOAD_${channelName}_ASSET_FAILED`]: `${prefix}/UPLOAD_${channelName}_ASSET_FAILED`,
+    [`UPLOAD_${channelName}_ASSET_TIMEOUT`]: `${prefix}/UPLOAD_${channelName}_ASSET_TIMEOUT`,
+  };
+}
+
+/**
+ * Creates reducer case handlers for async asset uploads
+ * @param {Object} actionTypes - Action type constants
+ * @param {Object} options - Configuration options
+ * @param {string} options.uploadedAssetDataKey - Key for uploaded asset data (default: 'uploadedAssetData')
+ * @param {string} options.assetUploadingKey - Key for asset uploading flag (default: 'assetUploading')
+ * @param {string} options.uploadAssetSuccessKey - Key for upload success flag (default: 'uploadAssetSuccess')
+ * @param {string} options.assetProcessingKey - Key for asset processing state (default: 'assetProcessing')
+ * @returns {Object} Object containing reducer case handlers
+ */
+export function createAsyncAssetUploadReducerCases(actionTypes, options = {}) {
+  const {
+    uploadedAssetDataKey = 'uploadedAssetData',
+    assetUploadingKey = 'assetUploading',
+    uploadAssetSuccessKey = 'uploadAssetSuccess',
+    assetProcessingKey = 'assetProcessing',
+  } = options;
+
+  return {
+    // Action type constants for use in switch statements
+    PROCESSING: actionTypes.PROCESSING,
+    COMPLETED: actionTypes.COMPLETED,
+    FAILED: actionTypes.FAILED,
+    TIMEOUT: actionTypes.TIMEOUT,
+
+    // Reducer handlers
+    handleProcessing: (state, action) => {
+      const startTime = new Date().getTime();
+      return state
+        .set(uploadAssetSuccessKey, false)
+        .set(assetUploadingKey, true)
+        .setIn([assetProcessingKey, action.payload.assetId], fromJS({
+          status: ASSET_STATUS.PROCESSING,
+          startTime,
+          asset: action.payload.asset,
+          error: null
+        }));
+    },
+
+    handleCompleted: (state, action) => {
+      const templateType = action.templateType;
+      const assetDataKey = templateType !== undefined
+        ? `${uploadedAssetDataKey}${templateType}`
+        : uploadedAssetDataKey;
+
+      return state
+        .set(uploadAssetSuccessKey, true)
+        .set(assetUploadingKey, false)
+        .setIn([assetProcessingKey, action.payload.assetId], fromJS({
+          status: ASSET_STATUS.COMPLETED,
+          asset: action.payload.asset,
+          error: null
+        }))
+        .set(assetDataKey, fromJS(action.payload.asset));
+    },
+
+    handleFailed: (state, action) => {
+      return state
+        .set(uploadAssetSuccessKey, false)
+        .set(assetUploadingKey, false)
+        .setIn([assetProcessingKey, action.payload.assetId], fromJS({
+          status: ASSET_STATUS.FAILED,
+          error: action.payload.error
+        }));
+    },
+
+    handleTimeout: (state, action) => {
+      return state
+        .set(uploadAssetSuccessKey, false)
+        .set(assetUploadingKey, false)
+        .setIn([assetProcessingKey, action.payload.assetId], fromJS({
+          status: ASSET_STATUS.TIMEOUT,
+          error: action.payload.message
+        }));
+    },
+  };
+}
+
+/**
+ * Creates polling configuration for use with centralized pollAssetStatus saga
+ * @param {string} assetType - Asset type ('image', 'video', 'document', etc.)
+ * @param {string} assetId - Asset ID
+ * @param {Object} actionTypes - Action type constants
+ * @returns {Object} Polling configuration object
+ */
+export function createPollingConfig(assetType, assetId, actionTypes, templateType) {
+  return {
+    type: assetType,
+    assetId,
+    onCompleted: (data) => ({
+      type: actionTypes.COMPLETED,
+      payload: data,
+      templateType,
+    }),
+    onFailed: (data) => ({
+      type: actionTypes.FAILED,
+      payload: data,
+      templateType,
+    }),
+    onTimeout: (data) => ({
+      type: actionTypes.TIMEOUT,
+      payload: data,
+      templateType,
+    }),
+  };
+}