@capillarytech/creatives-library 8.0.160 → 8.0.162

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.160",
+  "version": "8.0.162",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -438,64 +438,56 @@ const TestAndPreviewSlidebox = (props) => {
 
   // Handle update preview
   const handleUpdatePreview = async () => {
-    const currentTabData = formData[currentTab - 1];
-    const activeTab = currentTabData?.activeTab;
-    const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
-
-    // For BEE editor, ensure content is saved first
-    if (isDragDrop && beeInstance) {
-      // Trigger save to ensure latest content
-      beeInstance.save();
+    try {
+      // Store current values to prevent loss during update
+      const currentCustomValues = { ...customValues };
+      
+      const currentTabData = formData[currentTab - 1];
+      const activeTab = currentTabData?.activeTab;
+      const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
 
-      // Wait a bit for save to complete and formData to update
-      await new Promise((resolve) => setTimeout(resolve, 500));
+      // For BEE editor, ensure content is saved first
+      if (isDragDrop && beeInstance) {
+        // Trigger save to ensure latest content
+        beeInstance.save();
 
-      // Get latest content from formData
-      const updatedContent = formData[currentTab - 1]?.[activeTab]?.['template-content'];
-      const payload = {
-        channel: EMAIL,
-        messageTitle: formData['template-subject'],
-        messageBody: updatedContent || getCurrentContent,
-        resolvedTags: customValues,
-        userId: selectedCustomer?.customerId,
-      };
+        // Wait a bit for save to complete and formData to update
+        await new Promise((resolve) => setTimeout(resolve, 500));
 
-      actions.updatePreviewRequested(payload);
-      return;
-    }
+        // Get latest content from formData
+        const updatedContent = formData[currentTab - 1]?.[activeTab]?.['template-content'];
+        const payload = {
+          channel: EMAIL,
+          messageTitle: formData['template-subject'],
+          messageBody: updatedContent || getCurrentContent,
+          resolvedTags: currentCustomValues, // Use stored values
+          userId: selectedCustomer?.customerId,
+        };
 
-    // For CKEditor, get latest content directly from formData
-    const templateContent = currentTabData?.[activeTab]?.['template-content'];
-    if (templateContent) {
-      // Update preview with latest content
-      setPreviewDataHtml({
-        resolvedBody: templateContent,
-        resolvedTitle: formData['template-subject'] || ''
-      });
+        await actions.updatePreviewRequested(payload);
+        return;
+      }
 
-      // Extract tags with latest content
-      const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
-      actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+      // For CKEditor, get latest content directly from formData
+      const templateContent = currentTabData?.[activeTab]?.['template-content'];
+      if (templateContent) {
+        // Create payload for CKEditor preview update
+        const payload = {
+          channel: EMAIL,
+          messageTitle: formData['template-subject'],
+          messageBody: templateContent,
+          resolvedTags: currentCustomValues,
+          userId: selectedCustomer?.customerId,
+        };
 
-      // Update preview with latest content
-      const payload = {
-        channel: EMAIL,
-        messageTitle: formData['template-subject'],
-        messageBody: templateContent,
-        resolvedTags: customValues,
-        userId: selectedCustomer?.customerId,
-      };
-      actions.updatePreviewRequested(payload);
-    } else {
-      // Fallback to getCurrentContent if no template content
-      const payload = {
-        channel: EMAIL,
-        messageTitle: formData['template-subject'],
-        messageBody: getCurrentContent,
-        resolvedTags: customValues,
-        userId: selectedCustomer?.customerId,
-      };
-      actions.updatePreviewRequested(payload);
+        // Use the same update preview action for both editors
+        await actions.updatePreviewRequested(payload);
+      }
+    } catch (error) {
+      console.error('Error updating preview:', error);
+      CapNotification.error({
+        message: formatMessage(messages.previewUpdateError),
+      });
     }
   };
 

package/v2Components/TestAndPreviewSlidebox/reducer.js

@@ -132,18 +132,27 @@ const previewAndTestReducer = (state = initialState, action) => {
 
     // Update Preview
     case UPDATE_PREVIEW_REQUEST:
-      return state.set('isUpdatingPreview', true)
-        .set('updatePreviewError', null);
+      return state
+        .set('isUpdatingPreview', true)
+        .set('updatePreviewError', null)
+        // Preserve custom values during update
+        .set('lastCustomValues', state.get('customValues'));
 
     case UPDATE_PREVIEW_SUCCESS:
-      return state.set('previewData', action.payload.previewData)
+      return state
+        .set('previewData', action.payload.previewData)
         .set('isUpdatingPreview', false)
-        .set('updatePreviewError', null);
+        .set('updatePreviewError', null)
+        // Restore custom values after successful update
+        .set('customValues', state.get('lastCustomValues') || state.get('customValues'));
 
     case UPDATE_PREVIEW_FAILURE:
-      return state.set('previewData', null)
+      return state
+        .set('previewData', null)
         .set('isUpdatingPreview', false)
-        .set('updatePreviewError', action.payload.error);
+        .set('updatePreviewError', action.payload.error)
+        // Restore custom values after failure
+        .set('customValues', fromJS(action.payload.customValues));
 
     // Send Test Email
     case SEND_TEST_MESSAGE_REQUESTED:

package/v2Components/TestAndPreviewSlidebox/sagas.js

@@ -76,14 +76,35 @@ export function* extractTagsSaga(action) {
 // Update Preview Saga
 export function* updatePreviewSaga(action) {
   try {
+    // Store custom values before making the API call
+    const customValues = action.payload.resolvedTags;
+
     const response = yield call(Api.updateEmailPreview, action.payload);
     if (response?.data) {
-      yield put({ type: UPDATE_PREVIEW_SUCCESS, payload: { previewData: response.data } });
+      yield put({
+        type: UPDATE_PREVIEW_SUCCESS,
+        payload: {
+          previewData: response.data,
+          customValues, // Pass custom values to be preserved
+        },
+      });
     } else {
-      yield put({ type: UPDATE_PREVIEW_FAILURE, payload: { error: response.error || 'Failed to update preview' } });
+      yield put({
+        type: UPDATE_PREVIEW_FAILURE,
+        payload: {
+          error: response.error || 'Failed to update preview',
+          customValues, // Pass custom values even on failure
+        },
+      });
     }
   } catch (error) {
-    yield put({ type: UPDATE_PREVIEW_FAILURE, payload: { error: error.message || 'Network error occurred' } });
+    yield put({
+      type: UPDATE_PREVIEW_FAILURE,
+      payload: {
+        error: error.message || 'Network error occurred',
+        customValues: action.payload.resolvedTags, // Pass custom values on error
+      },
+    });
   }
 }
 

package/v2Components/TestAndPreviewSlidebox/tests/reducer.test.js

@@ -105,27 +105,43 @@ describe("previewAndTestReducer", () => {
     const state = fromJS({
       isUpdatingPreview: false,
       updatePreviewError: null,
+      customValues: { test: "value" },
     });
     const action = { type: UPDATE_PREVIEW_REQUEST };
-    const expectedResult = state.set("isUpdatingPreview", true).set("updatePreviewError", null);
+    const expectedResult = state
+      .set("isUpdatingPreview", true)
+      .set("updatePreviewError", null)
+      .set("lastCustomValues", state.get("customValues"));
     expect(previewAndTestReducer(state, action)).toEqual(expectedResult);
   });
   it("should handle UPDATE_PREVIEW_SUCCESS action", () => {
+    const customValues = fromJS({ test: "value" });
     const state = fromJS({
       isUpdatingPreview: false,
       updatePreviewError: null,
+      lastCustomValues: customValues,
     });
-    const action = { type: UPDATE_PREVIEW_SUCCESS, payload: { previewData: "test" } };
-    const expectedResult = state.set("isUpdatingPreview", false).set("updatePreviewError", null).set("previewData", "test");
+    const action = { type: UPDATE_PREVIEW_SUCCESS, payload: { previewData: "test", customValues: customValues.toJS() } };
+    const expectedResult = state
+      .set("isUpdatingPreview", false)
+      .set("updatePreviewError", null)
+      .set("previewData", "test")
+      .set("customValues", customValues);
     expect(previewAndTestReducer(state, action)).toEqual(expectedResult);
   });
   it("should handle UPDATE_PREVIEW_FAILURE action", () => {
+    const customValues = fromJS({ test: "value" });
     const state = fromJS({
       isUpdatingPreview: false,
       updatePreviewError: null,
+      lastCustomValues: customValues,
     });
-    const action = { type: UPDATE_PREVIEW_FAILURE, payload: { error: "Update preview failed" } };
-    const expectedResult = state.set("isUpdatingPreview", false).set("updatePreviewError", "Update preview failed").set("previewData", null);
+    const action = { type: UPDATE_PREVIEW_FAILURE, payload: { error: "Update preview failed", customValues: customValues.toJS() } };
+    const expectedResult = state
+      .set("isUpdatingPreview", false)
+      .set("updatePreviewError", "Update preview failed")
+      .set("previewData", null)
+      .set("customValues", fromJS(action.payload.customValues));
     expect(previewAndTestReducer(state, action)).toEqual(expectedResult);
   });
 

package/v2Components/TestAndPreviewSlidebox/tests/saga.test.js

@@ -138,18 +138,21 @@ describe('TestAndPreviewSlidebox Sagas', () => {
       const mockResponse = {
         data: 'Test Preview Data',
       };
+      const customValues = { test: 'value' };
       return expectSaga(sagas.updatePreviewSaga, {
         payload: {
           previewData: 'Test Preview Data',
+          resolvedTags: customValues,
         },
       })
         .provide([
-          [call(Api.updateEmailPreview, { previewData: 'Test Preview Data' }), mockResponse],
+          [call(Api.updateEmailPreview, { previewData: 'Test Preview Data', resolvedTags: customValues }), mockResponse],
         ])
         .put({
           type: types.UPDATE_PREVIEW_SUCCESS,
           payload: {
             previewData: mockResponse.data,
+            customValues,
           },
         })
         .run();
@@ -159,18 +162,21 @@ describe('TestAndPreviewSlidebox Sagas', () => {
         previewData: 'Test Preview Data',
         error: 'Failed to load preview',
       };
+      const customValues = { test: 'value' };
       return expectSaga(sagas.updatePreviewSaga, {
         payload: {
           previewData: 'Test Preview Data',
+          resolvedTags: customValues,
         },
       })
         .provide([
-          [call(Api.updateEmailPreview, { previewData: 'Test Preview Data' }), mockResponse],
+          [call(Api.updateEmailPreview, { previewData: 'Test Preview Data', resolvedTags: customValues }), mockResponse],
         ])
         .put({
           type: types.UPDATE_PREVIEW_FAILURE,
           payload: {
             error: 'Failed to load preview',
+            customValues,
           },
         })
         .run();
@@ -179,54 +185,63 @@ describe('TestAndPreviewSlidebox Sagas', () => {
       const mockResponse = {
         previewData: 'Test Preview Data',
       };
+      const customValues = { test: 'value' };
       return expectSaga(sagas.updatePreviewSaga, {
         payload: {
           previewData: 'Test Preview Data',
+          resolvedTags: customValues,
         },
       })
         .provide([
-          [call(Api.updateEmailPreview, { previewData: 'Test Preview Data' }), mockResponse],
+          [call(Api.updateEmailPreview, { previewData: 'Test Preview Data', resolvedTags: customValues }), mockResponse],
         ])
         .put({
           type: types.UPDATE_PREVIEW_FAILURE,
           payload: {
             error: 'Failed to update preview',
+            customValues,
           },
         })
         .run();
     });
     it('should handle error in updatePreviewSaga', () => {
       const error = new Error('Preview update failed');
+      const customValues = { test: 'value' };
       return expectSaga(sagas.updatePreviewSaga, {
         payload: {
           previewData: 'Test Preview Data',
+          resolvedTags: customValues,
         },
       })
         .provide([
-          [call(Api.updateEmailPreview, { previewData: 'Test Preview Data' }), throwError(error)],
+          [call(Api.updateEmailPreview, { previewData: 'Test Preview Data', resolvedTags: customValues }), throwError(error)],
         ])
         .put({
           type: types.UPDATE_PREVIEW_FAILURE,
           payload: {
             error: error.message,
+            customValues,
           },
         })
         .run();
     });
     it('should handle error in updatePreviewSaga', () => {
       const error = 'Preview update failed';
+      const customValues = { test: 'value' };
       return expectSaga(sagas.updatePreviewSaga, {
         payload: {
           previewData: 'Test Preview Data',
+          resolvedTags: customValues,
         },
       })
         .provide([
-          [call(Api.updateEmailPreview, { previewData: 'Test Preview Data' }), throwError(error)],
+          [call(Api.updateEmailPreview, { previewData: 'Test Preview Data', resolvedTags: customValues }), throwError(error)],
         ])
         .put({
           type: types.UPDATE_PREVIEW_FAILURE,
           payload: {
             error: 'Network error occurred',
+            customValues,
           },
         })
         .run();

package/v2Containers/Whatsapp/constants.js

@@ -80,7 +80,7 @@ export const mediaTypeOptions = ({host, templateCategory}) => {
           tagColor: CAP_GREEN02,
           tagTextColor: CAP_GREEN01,
         },
-        ...(templateCategory === WHATSAPP_CATEGORIES.marketing && host === HOST_GUPSHUP
+        ...(templateCategory === WHATSAPP_CATEGORIES.marketing && (host === HOST_GUPSHUP || host === HOST_KARIX)
           ? [
             {
               key: 'CAROUSEL',

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

@@ -577,7 +577,7 @@ describe('mediaTypeOptions', () => {
         ? opt.some((o) => o.key === 'CAROUSEL')
         : opt.key === 'CAROUSEL'
     ) || options.flat().some((o) => o.key === 'CAROUSEL');
-    expect(hasCarousel).toBe(false);
+    expect(hasCarousel).toBe(true);
   });
 
   it('should NOT include CAROUSEL when category is NOT MARKETING and host is HOST_GUPSHUP', () => {