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

package/v2Containers/Whatsapp/constants.js

@@ -9,6 +9,8 @@ import {
   CAP_GREEN02,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import messages from './messages';
+import { createAsyncAssetUploadConstants } from '../../utils/asyncAssetUpload';
+
 export const UNSUBSCRIBE_TEXT_LENGTH = 36;
 export const TEMPLATE_MESSAGE_MAX_LENGTH = 1024;
 export const WHATSAPP = 'WHATSAPP';
@@ -31,6 +33,13 @@ export const UPLOAD_WHATSAPP_ASSET_SUCCESS = `${prefix}/UPLOAD_WHATSAPP_ASSET_SU
 export const UPLOAD_WHATSAPP_ASSET_FAILURE = `${prefix}/UPLOAD_WHATSAPP_ASSET_FAILURE`;
 export const CLEAR_WHATSAPP_ASSET = `${prefix}/CLEAR_WHATSAPP_ASSET`;
 
+// P4.2: Async upload processing actions - Using generic utility for reusability
+const asyncUploadConstants = createAsyncAssetUploadConstants('WHATSAPP', prefix);
+export const UPLOAD_WHATSAPP_ASSET_PROCESSING = asyncUploadConstants.UPLOAD_WHATSAPP_ASSET_PROCESSING;
+export const UPLOAD_WHATSAPP_ASSET_COMPLETED = asyncUploadConstants.UPLOAD_WHATSAPP_ASSET_COMPLETED;
+export const UPLOAD_WHATSAPP_ASSET_FAILED = asyncUploadConstants.UPLOAD_WHATSAPP_ASSET_FAILED;
+export const UPLOAD_WHATSAPP_ASSET_TIMEOUT = asyncUploadConstants.UPLOAD_WHATSAPP_ASSET_TIMEOUT;
+
 //For meta tags
 export const URL_META_TAGS_REQUEST = `${prefix}/URL_META_TAGS_REQUEST`;
 export const URL_META_TAGS_SUCCESS = `${prefix}/URL_META_TAGS_SUCCESS`;

package/v2Containers/Whatsapp/reducer.js

@@ -11,12 +11,25 @@ import {
   UPLOAD_WHATSAPP_ASSET_REQUEST,
   UPLOAD_WHATSAPP_ASSET_SUCCESS,
   UPLOAD_WHATSAPP_ASSET_FAILURE,
+  UPLOAD_WHATSAPP_ASSET_PROCESSING,
+  UPLOAD_WHATSAPP_ASSET_COMPLETED,
+  UPLOAD_WHATSAPP_ASSET_FAILED,
+  UPLOAD_WHATSAPP_ASSET_TIMEOUT,
   CLEAR_WHATSAPP_ASSET,
   URL_META_TAGS_REQUEST,
   URL_META_TAGS_SUCCESS,
   URL_META_TAGS_FAILURE,
   URL_META_TAGS_RESET,
 } from './constants';
+import { createAsyncAssetUploadReducerCases } from '../../utils/asyncAssetUpload';
+
+// Create generic reducer cases for async uploads
+const asyncUploadCases = createAsyncAssetUploadReducerCases({
+  PROCESSING: UPLOAD_WHATSAPP_ASSET_PROCESSING,
+  COMPLETED: UPLOAD_WHATSAPP_ASSET_COMPLETED,
+  FAILED: UPLOAD_WHATSAPP_ASSET_FAILED,
+  TIMEOUT: UPLOAD_WHATSAPP_ASSET_TIMEOUT,
+});
 
 const initialState = fromJS({
   uploadedAssetData: {},
@@ -24,6 +37,7 @@ const initialState = fromJS({
   getMetaTagsRequest: false,
   metaTagsDetails: {},
   getMetaTagsError: '',
+  assetProcessing: {},
 });
 
 function whatsappReducer(state = initialState, action) {
@@ -93,12 +107,27 @@ function whatsappReducer(state = initialState, action) {
       return state
         .set('uploadAssetSuccess', false)
         .set('assetUploading', false);
+    // P4.5: Async upload processing state management - Using generic reducer cases
+    case asyncUploadCases.PROCESSING:
+      return asyncUploadCases.handleProcessing(state, action);
+    
+    case asyncUploadCases.COMPLETED:
+      return asyncUploadCases.handleCompleted(state, action);
+    
+    case asyncUploadCases.FAILED:
+      return asyncUploadCases.handleFailed(state, action);
+    
+    case asyncUploadCases.TIMEOUT:
+      return asyncUploadCases.handleTimeout(state, action);
+    
     case CLEAR_WHATSAPP_ASSET:
-      return state.delete(
-        action.templateType !== undefined
-          ? `uploadedAssetData${action.templateType}`
-          : 'uploadedAssetData',
-      );
+      return state
+        .delete(
+          action.templateType !== undefined
+            ? `uploadedAssetData${action.templateType}`
+            : 'uploadedAssetData',
+        )
+        .set('assetProcessing', fromJS({})); // Clear processing state
     default:
       return state;
   }

package/v2Containers/Whatsapp/sagas.js

@@ -4,6 +4,9 @@ import {
 import isEmpty from 'lodash/isEmpty';
 import get from 'lodash/get';
 import * as Api from '../../services/api';
+import { pollAssetStatus } from '../../sagas/assetPolling';
+import { createPollingConfig } from '../../utils/asyncAssetUpload';
+import { ASSET_STATUS } from '../../utils/assetStatusConstants';
 import {
   TEMPLATE_CREATE_REQUEST,
   TEMPLATE_CREATE_SUCCESS,
@@ -15,6 +18,10 @@ import {
   UPLOAD_WHATSAPP_ASSET_REQUEST,
   UPLOAD_WHATSAPP_ASSET_SUCCESS,
   UPLOAD_WHATSAPP_ASSET_FAILURE,
+  UPLOAD_WHATSAPP_ASSET_PROCESSING,
+  UPLOAD_WHATSAPP_ASSET_COMPLETED,
+  UPLOAD_WHATSAPP_ASSET_FAILED,
+  UPLOAD_WHATSAPP_ASSET_TIMEOUT,
   URL_META_TAGS_REQUEST,
   URL_META_TAGS_SUCCESS,
   URL_META_TAGS_FAILURE,
@@ -23,14 +30,58 @@ import {
 export function* uploadWhatsappAsset(params) {
   try {
     const result = yield call(Api.uploadFile, params);
-    yield put({
-      type: UPLOAD_WHATSAPP_ASSET_SUCCESS,
-      data: result.response.asset,
-      statusCode: result?.status?.code || '',
-      templateType: params.templateType,
-    });
+    const responseData = result.response || {};
+    const statusCode = result?.status?.code || result?.statusCode || 200;
+    
+    if (statusCode === 202 || responseData?.processingStatus === ASSET_STATUS.PROCESSING) {
+      // Async flow - extract assetId first before dispatching any actions
+      const assetId = responseData.assetId || responseData.asset?._id;
+      const templateType = params.templateType; // Index for reducer state key (e.g., 0)
+      // Get asset type from params, fallback to asset response, then default to 'image'
+      const assetType = params.assetType || responseData.asset?.type?.toLowerCase() || 'image';
+      
+      if (assetId) {
+        // Only dispatch processing action and start polling when we have a valid assetId
+        yield put({
+          type: UPLOAD_WHATSAPP_ASSET_PROCESSING,
+          payload: {
+            assetId,
+            asset: responseData.asset,
+            processingStatus: ASSET_STATUS.PROCESSING
+          }
+        });
+        
+        // P4.4: Start polling using centralized saga with generic polling config
+        const actionTypes = {
+          COMPLETED: UPLOAD_WHATSAPP_ASSET_COMPLETED,
+          FAILED: UPLOAD_WHATSAPP_ASSET_FAILED,
+          TIMEOUT: UPLOAD_WHATSAPP_ASSET_TIMEOUT,
+        };
+        const pollingConfig = createPollingConfig(assetType, assetId, actionTypes, templateType);
+        yield call(pollAssetStatus, pollingConfig);
+      } else {
+        // No assetId returned - dispatch failure to prevent UI from being stuck in processing state
+        const errorMessage = 'Asset upload initiated but no asset ID was returned from the server. Unable to track processing status.';
+        yield put({
+          type: UPLOAD_WHATSAPP_ASSET_FAILED,
+          payload: {
+            assetId: undefined,
+            error: errorMessage,
+          },
+          templateType,
+        });
+      }
+    } else {
+      // Sync flow (201) - existing behavior unchanged
+      yield put({
+        type: UPLOAD_WHATSAPP_ASSET_SUCCESS,
+        data: responseData.asset,
+        statusCode,
+        templateType: params.templateType,
+      });
+    }
   } catch (error) {
-    yield put({ UPLOAD_WHATSAPP_ASSET_FAILURE, error });
+    yield put({ type: UPLOAD_WHATSAPP_ASSET_FAILURE, error });
   }
 }
 function* watchUploadWhatsappAsset() {
@@ -64,7 +115,7 @@ export function* sendForApprovalCreate({ payload, callback, gupshupMediaFile })
       type: TEMPLATE_CREATE_SUCCESS,
       data: result.response,
       statusCode: result.status ? result.status.code : '',
-      errorMsg,
+      errorMsg
     });
     if (callback) {
       callback(result.response);
@@ -73,7 +124,7 @@ export function* sendForApprovalCreate({ payload, callback, gupshupMediaFile })
     yield put({
       type: TEMPLATE_CREATE_FAILURE,
       error,
-      errorMsg,
+      errorMsg
     });
     if (callback) {
       callback(null, errorMsg);
@@ -113,7 +164,7 @@ export function* getMetaTagsDetails({ previewUrl, callBack }) {
     if (result?.success) {
       yield put({
         type: URL_META_TAGS_SUCCESS,
-        data: result?.response,
+        data: result?.response
       });
     } else {
       if (callBack) {