@capillarytech/creatives-library 8.0.339 → 8.0.340-0

package/v2Containers/TagList/tests/mockdata.js

@@ -149,3 +149,20 @@ export const eventContextTags = [
         "isDynamicFact": false
     }
 ];
+
+export const waitEventContextTags = {
+  block1: {
+    eventName: 'Order Placed',
+    blockName: 'Wait Block',
+    tags: [
+      {
+        tagName: 'waitEvent.orderId',
+        label: 'Order ID',
+        profileId: 'ORDER_PROFILE',
+        profileName: 'Order Profile',
+        blockName: 'Wait Block',
+        eventName: 'Order Placed',
+      },
+    ],
+  },
+};

package/v2Containers/Viber/constants.js

@@ -3,6 +3,7 @@ import React from 'react';
 import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
 import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
 import messages from "./messages";
+import { createAsyncAssetUploadConstants } from '../../utils/asyncAssetUpload';
 
 export const DEFAULT_ACTION = 'app/v2Containers/Viber/DEFAULT_ACTION';
 export const ALLOWED_EXTENSIONS_REGEX = (/\.(jpe?g|png)$/i);
@@ -16,6 +17,13 @@ export const UPLOAD_VIBER_ASSET_REQUEST = 'app/v2Containers/Viber/UPLOAD_ASSET_R
 export const UPLOAD_VIBER_ASSET_SUCCESS = 'app/v2Containers/Viber/UPLOAD_ASSET_SUCCESS';
 export const UPLOAD_VIBER_ASSET_FAILURE = 'app/v2Containers/Viber/UPLOAD_ASSET_FAILURE';
 
+const viberAsyncPrefix = 'app/v2Containers/Viber';
+const asyncUploadConstants = createAsyncAssetUploadConstants('VIBER', viberAsyncPrefix);
+export const UPLOAD_VIBER_ASSET_PROCESSING = asyncUploadConstants.UPLOAD_VIBER_ASSET_PROCESSING;
+export const UPLOAD_VIBER_ASSET_COMPLETED = asyncUploadConstants.UPLOAD_VIBER_ASSET_COMPLETED;
+export const UPLOAD_VIBER_ASSET_FAILED = asyncUploadConstants.UPLOAD_VIBER_ASSET_FAILED;
+export const UPLOAD_VIBER_ASSET_TIMEOUT = asyncUploadConstants.UPLOAD_VIBER_ASSET_TIMEOUT;
+
 
 export const CREATE_VIBER_TEMPLATE_REQUEST = 'app/v2Containers/Viber/CREATE_VIBER_TEMPLATE_REQUEST';
 export const CREATE_VIBER_TEMPLATE_SUCCESS = 'app/v2Containers/Viber/CREATE_VIBER_TEMPLATE_SUCCESS';

package/v2Containers/Viber/index.js

@@ -82,6 +82,7 @@ export const Viber = (props) => {
     viberData = {},
     selectedOfferDetails = [],
     eventContextTags,
+    waitEventContextTags,
     // TestAndPreviewSlidebox props
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
     handleTestAndPreview: propsHandleTestAndPreview,
@@ -287,6 +288,7 @@ export const Viber = (props) => {
           userLocale={localStorage.getItem("jlocale") || "en"}
           selectedOfferDetails={selectedOfferDetails}
           eventContextTags={eventContextTags}
+          waitEventContextTags={waitEventContextTags}
         />
       </CapColumn>
       <div className="viber-textarea-wrapper">
@@ -417,6 +419,7 @@ export const Viber = (props) => {
       channel={VIBER}
       errorMessage={formatMessage(messages.videoErrorMessage)}
       showVideoNameAndDuration
+      assetUploading={viber?.assetUploading}
     />
   );
 
@@ -592,6 +595,7 @@ export const Viber = (props) => {
         userLocale={localStorage.getItem("jlocale") || "en"}
         selectedOfferDetails={selectedOfferDetails}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
       />
       <CapColumn className="cta-actions">
         <CapButton
@@ -792,6 +796,10 @@ export const Viber = (props) => {
     ) {
       return true;
     }
+    // block submit while a media asset upload is still in progress
+    if ((isMediaTypeImage || isMediaTypeVideo) && viber?.assetUploading) {
+      return true;
+    }
     if (isBtnTypeCta && !isCtaSaved) {
       return true;
     }

package/v2Containers/Viber/reducer.js

@@ -6,51 +6,71 @@
 
 import { fromJS } from 'immutable';
 import * as types from './constants';
+import { createAsyncAssetUploadReducerCases } from '../../utils/asyncAssetUpload';
+
+const asyncUploadCases = createAsyncAssetUploadReducerCases({
+  PROCESSING: types.UPLOAD_VIBER_ASSET_PROCESSING,
+  COMPLETED: types.UPLOAD_VIBER_ASSET_COMPLETED,
+  FAILED: types.UPLOAD_VIBER_ASSET_FAILED,
+  TIMEOUT: types.UPLOAD_VIBER_ASSET_TIMEOUT,
+});
 
 const initialState = fromJS({
   uploadedAssetData: {},
   createTemplateInProgress: false,
+  assetProcessing: {},
 });
 
 function viberReducer(state = initialState, action) {
   switch (action.type) {
     case types.CREATE_VIBER_TEMPLATE_REQUEST:
       return state
-      .set('createTemplateInProgress', true)
-      .set('createTemplateError', false)
-      .set('createTemplateErrorMessage', fromJS(""));
+        .set('createTemplateInProgress', true)
+        .set('createTemplateError', false)
+        .set('createTemplateErrorMessage', fromJS(""));
     case types.CREATE_VIBER_TEMPLATE_SUCCESS:
       return state.set('createTemplateInProgress', false)
-      .set('response', action.data)
-      .set('createTemplateError', (action.statusCode !== undefined && action.statusCode > 300))
-      .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+        .set('response', action.data)
+        .set('createTemplateError', (action.statusCode !== undefined && action.statusCode > 300))
+        .set('createTemplateErrorMessage', fromJS(action.errorMsg));
     case types.CREATE_VIBER_TEMPLATE_FAILURE:
       return state
-      .set('createTemplateInProgress', false)
-      .set('createTemplateError', true)
-      .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+        .set('createTemplateInProgress', false)
+        .set('createTemplateError', true)
+        .set('createTemplateErrorMessage', fromJS(action.errorMsg));
     case types.UPLOAD_VIBER_ASSET_REQUEST:
       return state
-      .set('uploadAssetSuccess', false)
-      .set('assetUploading', true);
+        .set('uploadAssetSuccess', false)
+        .set('assetUploading', true);
     case types.UPLOAD_VIBER_ASSET_SUCCESS:
       return state
-      .set('uploadAssetSuccess', (action.statusCode !== undefined && action.statusCode !== '' && action.statusCode < 300))
-      .set('assetUploading', false)
-      .set(action.templateType !== undefined ? `uploadedAssetData${action.templateType}` : 'uploadedAssetData', action.data);
+        .set('uploadAssetSuccess', (action.statusCode !== undefined && action.statusCode !== '' && action.statusCode < 300))
+        .set('assetUploading', false)
+        .set(action.templateType !== undefined ? `uploadedAssetData${action.templateType}` : 'uploadedAssetData', fromJS(action.data));
     case types.UPLOAD_VIBER_ASSET_FAILURE:
       return state
-      .set('uploadAssetSuccess', false)
-      .set('assetUploading', false);
+        .set('uploadAssetSuccess', false)
+        .set('assetUploading', false);
+    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 types.CLEAR_VIBER_ASSET:
       return state
-        .delete(action.templateType !== undefined ? `uploadedAssetData${action.templateType}` : 'uploadedAssetData');
+        .delete(action.templateType !== undefined ? `uploadedAssetData${action.templateType}` : 'uploadedAssetData')
+        .set('assetProcessing', fromJS({}))
+        .set('assetUploading', false)
+        .set('uploadAssetSuccess', false);
     // FOR EDIT
     case types.EDIT_VIBER_TEMPLATE_REQUEST:
       return state
-      .set('editTemplateInProgress', true)
-      .set('editTemplateError', false)
-      .set('editTemplateErrorMessage', fromJS(""));
+        .set('editTemplateInProgress', true)
+        .set('editTemplateError', false)
+        .set('editTemplateErrorMessage', fromJS(""));
     case types.EDIT_VIBER_TEMPLATE_SUCCESS:
       return state.set('editTemplateInProgress', false)
         .set('editResponse', action.data)
@@ -75,7 +95,10 @@ function viberReducer(state = initialState, action) {
       return state
         .delete('uploadedAssetData')
         .delete('metaEntities')
-        .delete('templateDetails');
+        .delete('templateDetails')
+        .set('assetProcessing', fromJS({}))
+        .set('assetUploading', false)
+        .set('uploadAssetSuccess', false);
     default:
       return state;
   }

package/v2Containers/Viber/sagas.js

@@ -2,17 +2,58 @@ import {
   call, put, takeLatest, all,
 } from 'redux-saga/effects';
 import * as Api from '../../services/api';
+import { pollAssetStatus } from '../../sagas/assetPolling';
+import { createPollingConfig } from '../../utils/asyncAssetUpload';
+import { ASSET_STATUS } from '../../utils/assetStatusConstants';
 import * as types from './constants';
 
-export function* uploadViberAsset(file, assetType, fileParams ) {
+export function* uploadViberAsset(params) {
   try {
-    const result = yield call(Api.uploadFile, file, assetType, fileParams);
-    yield put({
-      type: types.UPLOAD_VIBER_ASSET_SUCCESS,
-      data: result.response.asset,
-      statusCode: result.status ? result.status.code : '',
-      templateType: file.templateType,
-    });
+    const result = yield call(Api.uploadFile, params);
+    const responseData = result.response || {};
+    const statusCode = result?.status?.code || result?.statusCode || 200;
+
+    if (statusCode === 202 || responseData?.processingStatus === ASSET_STATUS.PROCESSING) {
+      const assetId = responseData.assetId || responseData.asset?._id;
+      const { templateType } = params;
+      const assetType = params.assetType || responseData.asset?.type?.toLowerCase() || 'image';
+
+      if (assetId) {
+        yield put({
+          type: types.UPLOAD_VIBER_ASSET_PROCESSING,
+          payload: {
+            assetId,
+            asset: responseData.asset,
+            processingStatus: ASSET_STATUS.PROCESSING,
+          },
+        });
+
+        const actionTypes = {
+          COMPLETED: types.UPLOAD_VIBER_ASSET_COMPLETED,
+          FAILED: types.UPLOAD_VIBER_ASSET_FAILED,
+          TIMEOUT: types.UPLOAD_VIBER_ASSET_TIMEOUT,
+        };
+        const pollingConfig = createPollingConfig(assetType, assetId, actionTypes, templateType);
+        yield call(pollAssetStatus, pollingConfig);
+      } else {
+        const errorMessage = 'Asset upload initiated but no asset ID was returned from the server. Unable to track processing status.';
+        yield put({
+          type: types.UPLOAD_VIBER_ASSET_FAILED,
+          payload: {
+            assetId: undefined,
+            error: errorMessage,
+          },
+          templateType,
+        });
+      }
+    } else {
+      yield put({
+        type: types.UPLOAD_VIBER_ASSET_SUCCESS,
+        data: responseData.asset,
+        statusCode,
+        templateType: params.templateType,
+      });
+    }
   } catch (error) {
     yield put({ type: types.UPLOAD_VIBER_ASSET_FAILURE, error });
   }
@@ -26,7 +67,12 @@ export function* createViberTemplate({ template, callback }) {
       errorMsg = result.message;
       throw errorMsg;
     }
-    yield put({ type: types.CREATE_VIBER_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+    yield put({
+      type: types.CREATE_VIBER_TEMPLATE_SUCCESS,
+      data: result.response,
+      statusCode: result.status ? result.status.code : '',
+      errorMsg,
+    });
     if (callback) {
       callback(result.response);
     }
@@ -50,7 +96,12 @@ export function* editTemplate({ template, callback }) {
     if (callback) {
       callback(result.response);
     }
-    yield put({ type: types.EDIT_VIBER_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+    yield put({
+      type: types.EDIT_VIBER_TEMPLATE_SUCCESS,
+      data: result.response,
+      statusCode: result.status ? result.status.code : '',
+      errorMsg,
+    });
   } catch (error) {
     yield put({ type: types.EDIT_VIBER_TEMPLATE_FAILURE, error, errorMsg });
     if (callback) {
@@ -61,7 +112,6 @@ export function* editTemplate({ template, callback }) {
 
 export function* getTemplateDetails({id, callback}) {
   try {
-    
     const result = yield call(Api.getTemplateDetails, {id, channel: 'VIBER'});
     yield put({ type: types.GET_VIBER_TEMPLATE_DETAILS_SUCCESS, data: result.response });
     if (callback) {
@@ -75,28 +125,19 @@ export function* getTemplateDetails({id, callback}) {
 
 function* watchUploadViberAsset() {
   yield takeLatest(types.UPLOAD_VIBER_ASSET_REQUEST, uploadViberAsset);
-  
-  
 }
 
 
 function* watchCreateTemplate() {
-  
   yield takeLatest(types.CREATE_VIBER_TEMPLATE_REQUEST, createViberTemplate);
-  
-  
 }
 
 function* watchGetTemplateDetails() {
   yield takeLatest(types.GET_VIBER_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
-  
-  
 }
 
 function* watchEditTemplate() {
   yield takeLatest(types.EDIT_VIBER_TEMPLATE_REQUEST, editTemplate);
-  
-  
 }
 
 export default [
@@ -113,4 +154,4 @@ export function* v2ViberSagas() {
     watchGetTemplateDetails(),
     watchEditTemplate(),
   ]);
-}
+}

package/v2Containers/Viber/tests/index.test.js

@@ -303,4 +303,84 @@ describe('Test Viber container', () => {
     });
     expect(doneBtn).toBeDisabled();
   });
+
+  it('disables Done while a replacement video asset is uploading (finding 1)', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      templateData: { mode: 'create' },
+      viber: {
+        uploadedAssetData: {},
+        createTemplateInProgress: false,
+        templateDetails: templateDetailsVideo,
+        // a new upload has started after the template was loaded
+        assetUploading: true,
+      },
+      location: {
+        pathname: '/sms/edit',
+        query: { type: false, module: 'default' },
+        search: '',
+      },
+      isFullMode: true,
+      params: { id: 'test' },
+      handleClose: jest.fn(),
+      metaEntities,
+      getDefaultTags,
+      injectedTags,
+    });
+    const doneBtn = screen.getByRole('button', { name: /done/i });
+    expect(doneBtn).toBeDisabled();
+  });
+
+  it('disables Done while an image asset is uploading (finding 1)', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      templateData: { mode: 'create' },
+      viber: {
+        uploadedAssetData: {},
+        createTemplateInProgress: false,
+        templateDetails: templateDetailsImage,
+        assetUploading: true,
+      },
+      location: {
+        pathname: '/sms/edit',
+        query: { type: false, module: 'default' },
+        search: '',
+      },
+      isFullMode: true,
+      params: { id: 'test' },
+      handleClose: jest.fn(),
+    });
+    const doneBtn = screen.getByRole('button', { name: /done/i });
+    expect(doneBtn).toBeDisabled();
+  });
+
+  it('keeps Done enabled when assetUploading is true but media type is text', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      templateData: { mode: 'create' },
+      viber: {
+        uploadedAssetData: {},
+        createTemplateInProgress: false,
+        templateDetails: templateDetailsText,
+        // stale upload flag, but the form has no media so submission is safe
+        assetUploading: true,
+      },
+      location: {
+        pathname: '/sms/edit',
+        query: { type: false, module: 'default' },
+        search: '',
+      },
+      isFullMode: true,
+      params: { id: 'test' },
+      handleClose: jest.fn(),
+      metaEntities,
+      getDefaultTags,
+      injectedTags,
+    });
+    const doneBtn = screen.getByRole('button', { name: /done/i });
+    expect(doneBtn).toBeEnabled();
+  });
 });