@capillarytech/creatives-library 8.0.159 → 8.0.161

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -5,7 +5,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { convert } from "html-to-text";
 import { createStructuredSelector } from 'reselect';
 import { connect } from 'react-redux';
@@ -75,6 +75,7 @@ const TestAndPreviewSlidebox = (props) => {
     prefilledValues,
     isSendingTestMessage,
     beeInstance,
+    currentTab = 1, // Add currentTab prop with default value
   } = props;
 
   // State management
@@ -85,30 +86,185 @@ const TestAndPreviewSlidebox = (props) => {
   const [showJSON, setShowJSON] = useState(false);
   const [tagsExtracted, setTagsExtracted] = useState(false);
   const [previewDevice, setPreviewDevice] = useState('desktop');
-  const [previewDataHtml, setPreviewDataHtml] = useState(previewData || '');
+  const [previewDataHtml, setPreviewDataHtml] = useState(() => {
+    // Initialize with current content if available
+    const currentTabData = formData[currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+    const templateContent = currentTabData?.[activeTab]?.['template-content'];
+
+    if (templateContent) {
+      return {
+        resolvedBody: templateContent,
+        resolvedTitle: formData['template-subject'] || ''
+      };
+    }
+    return previewData || '';
+  });
   const [selectedTestEntities, setSelectedTestEntities] = useState([]);
+  const [beeContent, setBeeContent] = useState(''); // Track BEE editor content separately
+  const previousBeeContentRef = useRef(''); // Track previous BEE content to prevent unnecessary updates
 
   const isUpdatePreviewDisabled = useMemo(() => (
     requiredTags.some((tag) => !customValues[tag.fullPath])
   ), [requiredTags, customValues]);
 
+  // Get the current content based on editor type
+  const getCurrentContent = useMemo(() => {
+    const currentTabData = formData[currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+    const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
+    
+    if (isDragDrop && beeContent) {
+      return beeContent; // Use BEE content if available
+    }
+
+    // For CKEditor in edit mode, get content from formData
+    if (!isDragDrop && currentTabData?.[activeTab]?.['template-content']) {
+      return currentTabData[activeTab]['template-content'];
+    }
+
+    return content; // Fall back to content prop
+  }, [formData, currentTab, beeContent, content, beeInstance]);
+
   useEffect(() => {
-    if (show && beeInstance) {
-      beeInstance.save();
+    // Only save BEE content if we're actually using BEE editor
+    const currentTabData = formData[currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+    const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
+
+    if (show && beeInstance && isDragDrop) {
+      // Check if we already have content in formData
+      const existingContent = currentTabData?.[activeTab]?.[`template-content`];
+      if (existingContent && existingContent.trim() !== '') {
+        // We already have content, update local state only if it's different
+        if (existingContent !== previousBeeContentRef.current) {
+          previousBeeContentRef.current = existingContent;
+          setBeeContent(existingContent);
+          setPreviewDataHtml({
+            resolvedBody: existingContent,
+            resolvedTitle: formData['template-subject'] || ''
+          });
+        }
+      } else {
+        // No content yet, trigger save
+        beeInstance.save();
+      }
     }
-  }, [show, beeInstance]);
+  }, [show, beeInstance, currentTab]);
 
   useEffect(() => {
     if (show) {
+      // For BEE editor, ensure content is saved and synced first
+      const currentTabData = formData[currentTab - 1];
+      const activeTab = currentTabData?.activeTab;
+      const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
+
+      if (beeInstance && isDragDrop) {
+        // Store original save handler
+        const originalOnSave = beeInstance.onSave;
+
+        // Create temporary save handler
+        const tempSaveHandler = (jsonFile, htmlFile) => {
+          // Call original handler first to ensure editor state is saved
+          if (originalOnSave) {
+            originalOnSave(jsonFile, htmlFile);
+          }
+
+          if (htmlFile) {
+            // Update our states
+            previousBeeContentRef.current = htmlFile;
+            setBeeContent(htmlFile);
+            setPreviewDataHtml({
+              resolvedBody: htmlFile,
+              resolvedTitle: formData['template-subject'] || ''
+            });
+
+            // Extract tags with latest content
+            const payloadContent = convert(htmlFile, GLOBAL_CONVERT_OPTIONS);
+            actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+          }
+
+          // Restore original handler
+          beeInstance.onSave = originalOnSave;
+        };
+
+        // Set temporary handler and trigger save
+        beeInstance.onSave = tempSaveHandler;
+        beeInstance.save();
+      } else {
+        // For CKEditor, get content from formData
+        const templateContent = currentTabData?.[activeTab]?.['template-content'];
+
+        if (templateContent) {
+          // Update preview with initial content
+          setPreviewDataHtml({
+            resolvedBody: templateContent,
+            resolvedTitle: formData['template-subject'] || ''
+          });
+
+          // Extract tags with initial content
+          const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
+          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+        } else {
+          // Fallback to content prop if no template content
+          const payloadContent = convert(
+            getCurrentContent,
+            GLOBAL_CONVERT_OPTIONS
+          );
+          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+        }
+      }
+      
       actions.fetchTestCustomersRequested();
       actions.fetchTestGroupsRequested();
-      const payloadContent = convert(
-        content,
-        GLOBAL_CONVERT_OPTIONS
-      );
-      actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
     }
-  }, [show, content, formData]);
+  }, [show, beeInstance, currentTab]);
+
+  // Effect to handle content updates for both editors
+  useEffect(() => {
+    const currentTabData = formData[currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+    const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
+    const templateContent = currentTabData?.[activeTab]?.['template-content'];
+    
+    if (templateContent && templateContent.trim() !== '') {
+      if (isDragDrop) {
+        // For Bee editor, update both preview and extract tags
+        if (templateContent !== previousBeeContentRef.current) {
+
+          previousBeeContentRef.current = templateContent;
+          setBeeContent(templateContent);
+          setPreviewDataHtml({
+            resolvedBody: templateContent,
+            resolvedTitle: formData['template-subject'] || ''
+          });
+
+          // Extract tags with latest content
+          const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
+          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+        }
+      } else {
+        // For CKEditor, always update preview and extract tags with latest content
+        setPreviewDataHtml({
+          resolvedBody: templateContent,
+          resolvedTitle: formData['template-subject'] || ''
+        });
+
+        // Extract tags with latest content
+        const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
+        actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+      }
+    }
+  }, [formData, currentTab]);
+
+  // Cleanup effect to reset ref when slidebox closes
+  useEffect(() => {
+    if (!show) {
+      previousBeeContentRef.current = '';
+      setBeeContent('');
+      setPreviewDataHtml('');
+    }
+  }, [show]);
 
   useEffect(() => {
     if (previewData) {
@@ -281,15 +437,58 @@ const TestAndPreviewSlidebox = (props) => {
   };
 
   // Handle update preview
-  const handleUpdatePreview = () => {
-    const payload = {
-      channel: EMAIL,
-      messageTitle: formData['template-subject'],
-      messageBody: content,
-      resolvedTags: customValues,
-      userId: selectedCustomer?.customerId,
-    };
-    actions.updatePreviewRequested(payload);
+  const handleUpdatePreview = async () => {
+    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;
+
+      // For BEE editor, ensure content is saved first
+      if (isDragDrop && beeInstance) {
+        // Trigger save to ensure latest content
+        beeInstance.save();
+
+        // Wait a bit for save to complete and formData to update
+        await new Promise((resolve) => setTimeout(resolve, 500));
+
+        // 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,
+        };
+
+        await actions.updatePreviewRequested(payload);
+        return;
+      }
+
+      // 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,
+        };
+
+        // 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),
+      });
+    }
   };
 
   // Handle extract tags button click
@@ -316,7 +515,7 @@ const TestAndPreviewSlidebox = (props) => {
       ...INITIAL_PAYLOAD,
       emailMessageContent: {
         channel: EMAIL,
-        messageBody: previewData?.resolvedBody || content,
+        messageBody: previewData?.resolvedBody || getCurrentContent,
         messageSubject: previewData?.resolvedTitle || formData['template-subject'],
       },
     }, messageMetaConfigId, (response) => {
@@ -408,7 +607,7 @@ const TestAndPreviewSlidebox = (props) => {
       formData={formData}
       isUpdatingPreview={isUpdatingPreview}
       previewDataHtml={previewDataHtml}
-      content={content}
+      content={getCurrentContent}
       formatMessage={formatMessage}
       PreviewChrome={PreviewChrome}
     />
@@ -548,6 +747,7 @@ TestAndPreviewSlidebox.propTypes = {
   prefilledValues: PropTypes.object,
   isSendingTestMessage: PropTypes.bool.isRequired,
   beeInstance: PropTypes.object.isRequired,
+  currentTab: PropTypes.number,
 };
 
 TestAndPreviewSlidebox.defaultProps = {
@@ -555,6 +755,7 @@ TestAndPreviewSlidebox.defaultProps = {
   currentChannel: EMAIL,
   messageMetaConfigId: null,
   prefilledValues: {},
+  currentTab: 1,
 };
 
 // Redux connection

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/PreviewSection.test.js

@@ -91,7 +91,7 @@ describe('PreviewSection', () => {
         </TestWrapper>
       );
 
-      expect(container.querySelector('.preview-section')).toBeTruthy();
+      expect(container.querySelector('.test-and-preview-section')).toBeTruthy();
       expect(container.querySelector('.panel-section')).toBeTruthy();
     });
   });

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/Cap/tests/saga.test.js

@@ -36,7 +36,7 @@ import {
   CREATE_CENTRAL_COMMS_META_ID_REQUEST,
 } from '../constants';
 import { callback, error, error2, videoConfigData } from '../../mockdata';
-import { LOGOUT_FAILURE, LOGOUT_SUCCESS } from '../../../constants/unified';
+import { LOGOUT_FAILURE, LOGOUT_REQUEST, LOGOUT_SUCCESS } from '../../../containers/Cap/constants';
 
 
 

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -163,6 +163,7 @@ export function SlideBoxContent(props) {
       showTestAndPreviewSlidebox,
       handleTestAndPreview,
       handleCloseTestAndPreview,
+      isTestAndPreviewMode,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -594,7 +595,7 @@ export function SlideBoxContent(props) {
       />
         )}
 
-      {isEmailCreate && (
+            {isEmailCreate && (
       <EmailWrapper
         key="creatives-email-wrapper"
         date={new Date().getMilliseconds()}
@@ -626,7 +627,8 @@ export function SlideBoxContent(props) {
         isLoyaltyModule={isLoyaltyModule}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}
-        handleCloseTestAndPreview={handleCloseTestAndPreview} 
+        handleCloseTestAndPreview={handleCloseTestAndPreview}
+        isTestAndPreviewMode={isTestAndPreviewMode}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -660,6 +662,9 @@ export function SlideBoxContent(props) {
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
+        isTestAndPreviewMode={(() => {
+          return isTestAndPreviewMode;
+        })()}
       />
         )}
       {isEditMPush && (
@@ -1055,6 +1060,7 @@ SlideBoxContent.propTypes = {
   hostName: PropTypes.string,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
-  handleCloseTestAndPreview: PropTypes.func
+  handleCloseTestAndPreview: PropTypes.func,
+  isTestAndPreviewMode: PropTypes.bool
 };
 export default SlideBoxContent;