@capillarytech/creatives-library 8.0.159-alpha.1 → 8.0.160

package/package.json

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

package/v2Components/TestAndPreviewSlidebox/SendTestMessage.js

@@ -43,7 +43,7 @@ const SendTestMessage = ({
               multiple
               placeholder={formatMessage(messages.testCustomersPlaceholder)}
             />
-            <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || isEmpty(formData['template-subject']) || isSendingTestMessage}>
+            <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || (isEmpty(formData['template-subject']) && isEmpty(formData[0]?.['template-subject'])) || isSendingTestMessage}>
               <FormattedMessage {...messages.sendTestButton} />
             </CapButton>
           </CapRow>),

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -86,7 +86,20 @@ 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
@@ -101,18 +114,15 @@ const TestAndPreviewSlidebox = (props) => {
     const activeTab = currentTabData?.activeTab;
     const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
     
-    console.log('🔍 getCurrentContent computed:', {
-      beeInstance: !!beeInstance,
-      isDragDrop,
-      beeContent: beeContent || 'EMPTY',
-      content: content || 'EMPTY',
-      templateContent: currentTabData?.[activeTab]?.[`template-content`] || 'EMPTY',
-      result: isDragDrop && beeContent ? beeContent : content
-    });
-    
     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]);
 
@@ -149,73 +159,60 @@ const TestAndPreviewSlidebox = (props) => {
       const activeTab = currentTabData?.activeTab;
       const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
 
-      console.log('🔍 Tag extraction debug:', {
-        show,
-        beeInstance: !!beeInstance,
-        isDragDrop,
-        currentTab,
-        activeTab,
-        currentTabData: !!currentTabData,
-        templateContent: currentTabData?.[activeTab]?.[`template-content`] || 'EMPTY',
-        contentProp: content || 'EMPTY',
-        getCurrentContent: getCurrentContent || 'EMPTY',
-        beeContentState: beeContent || 'EMPTY'
-      });
-
       if (beeInstance && isDragDrop) {
-        console.log('🔍 Using BEE editor path for tag extraction');
-        
-        // For BEE editor, trigger save first to ensure latest content is captured
-        console.log('🔍 Triggering BEE save to capture latest content...');
+        // 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();
-        
-        // Get content from formData (which should have the latest BEE content)
-        const currentTabData = formData[currentTab - 1];
-        const activeTab = currentTabData?.activeTab;
-        const templateContent = currentTabData?.[activeTab]?.[`template-content`];
-        
-        console.log('🔍 BEE content sources:', {
-          templateContent: templateContent || 'EMPTY',
-          beeContent: beeContent || 'EMPTY',
-          content: content || 'EMPTY'
-        });
-        
-        // Use template content from formData if available, otherwise fall back to other sources
-        const beeContentToUse = templateContent || beeContent || content;
-        
-        if (beeContentToUse && beeContentToUse.trim() !== '') {
-          console.log('🔍 Using BEE content for tag extraction:', beeContentToUse.substring(0, 100) + '...');
-          const payloadContent = convert(beeContentToUse, GLOBAL_CONVERT_OPTIONS);
-          console.log('🔍 Converted BEE content for tag extraction:', payloadContent || 'EMPTY');
+      } 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 {
-          console.log('🔍 No BEE content available in any source');
-          // If no content available, wait a bit for the save to complete and try again
-          setTimeout(() => {
-            const updatedTemplateContent = formData[currentTab - 1]?.[activeTab]?.[`template-content`];
-            if (updatedTemplateContent && updatedTemplateContent.trim() !== '') {
-              console.log('🔍 BEE content now available after save:', updatedTemplateContent.substring(0, 100) + '...');
-              const payloadContent = convert(updatedTemplateContent, GLOBAL_CONVERT_OPTIONS);
-              actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
-            } else {
-              console.log('🔍 Still no BEE content, using empty content for tag extraction');
-              actions.extractTagsRequested(formData['template-subject'] || '', '');
-            }
-          }, 1000); // Wait 1 second for save to complete
+          // Fallback to content prop if no template content
+          const payloadContent = convert(
+            getCurrentContent,
+            GLOBAL_CONVERT_OPTIONS
+          );
+          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
         }
-      } else {
-        console.log('🔍 Using non-BEE editor path for tag extraction');
-        console.log('🔍 Non-BEE content sources:', {
-          getCurrentContent: getCurrentContent || 'EMPTY',
-          contentProp: content || 'EMPTY'
-        });
-        // For non-BEE editor, use content prop directly
-        const payloadContent = convert(
-          getCurrentContent,
-          GLOBAL_CONVERT_OPTIONS
-        );
-        console.log('🔍 Converted content for tag extraction:', payloadContent || 'EMPTY');
-        actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
       }
       
       actions.fetchTestCustomersRequested();
@@ -223,22 +220,39 @@ const TestAndPreviewSlidebox = (props) => {
     }
   }, [show, beeInstance, currentTab]);
 
-  // Single useEffect to handle BEE content updates without causing loops
+  // 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 (isDragDrop && currentTabData?.[activeTab]?.[`template-content`]) {
-      const newBeeContent = currentTabData[activeTab][`template-content`];
-      if (newBeeContent && newBeeContent.trim() !== '' && newBeeContent !== previousBeeContentRef.current) {
-        // Only update if content actually changed to prevent loops
-        previousBeeContentRef.current = newBeeContent;
-        setBeeContent(newBeeContent);
+    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: newBeeContent,
+          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]);
@@ -424,43 +438,65 @@ const TestAndPreviewSlidebox = (props) => {
 
   // Handle update preview
   const handleUpdatePreview = async () => {
-    // For BEE editor, ensure content is saved first
     const currentTabData = formData[currentTab - 1];
     const activeTab = currentTabData?.activeTab;
+    const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
 
-    // Get latest content from BEE editor if needed
-    if (beeInstance && 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
+      // Wait a bit for save to complete and formData to update
       await new Promise((resolve) => setTimeout(resolve, 500));
 
-      // Get latest content from BEE editor
-      beeInstance.getContent((jsonFile, htmlFile) => {
-        const payload = {
-          channel: EMAIL,
-          messageTitle: formData['template-subject'],
-          messageBody: htmlFile || getCurrentContent,
-          resolvedTags: customValues,
-          userId: selectedCustomer?.customerId,
-        };
+      // 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,
+      };
 
-        actions.updatePreviewRequested(payload);
-      });
+      actions.updatePreviewRequested(payload);
       return;
     }
 
-    // Use current content for non-BEE editor
-    const payload = {
-      channel: EMAIL,
-      messageTitle: formData['template-subject'],
-      messageBody: getCurrentContent,
-      resolvedTags: customValues,
-      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'] || ''
+      });
+
+      // Extract tags with latest content
+      const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
+      actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
 
-    actions.updatePreviewRequested(payload);
+      // 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);
+    }
   };
 
   // Handle extract tags button click

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -165,7 +165,6 @@ export function SlideBoxContent(props) {
       handleCloseTestAndPreview,
       isTestAndPreviewMode,
     } = props;
-  console.log('📥 SlideBoxContent received isTestAndPreviewMode:', isTestAndPreviewMode);
   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};
   const creativesLocationProps = {
@@ -664,7 +663,6 @@ export function SlideBoxContent(props) {
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={(() => {
-          console.log('📤 SlideBoxContent passing isTestAndPreviewMode:', isTestAndPreviewMode);
           return isTestAndPreviewMode;
         })()}
       />

package/v2Containers/CreativesContainer/index.js

@@ -1256,11 +1256,8 @@ export class Creatives extends React.Component {
   }
 
 
-
   // NEW: Handler for Test and Preview button
   handleTestAndPreview = () => {
-    console.log('🔓 CreativesContainer handleTestAndPreview called');
-    console.log('🔓 Setting isTestAndPreviewMode to true');
     this.setState({
       showTestAndPreviewSlidebox: true,
       isTestAndPreviewMode: true, // Set flag to prevent validation
@@ -1269,8 +1266,6 @@ export class Creatives extends React.Component {
 
   // NEW: Handler to close Test and Preview slidebox
   handleCloseTestAndPreview = () => {
-    console.log('🔒 CreativesContainer handleCloseTestAndPreview called');
-    console.log('🔒 Setting isTestAndPreviewMode to false');
     this.setState({
       showTestAndPreviewSlidebox: false,
       isTestAndPreviewMode: false, // Reset flag when closing
@@ -1617,10 +1612,7 @@ export class Creatives extends React.Component {
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
               handleTestAndPreview={this.handleTestAndPreview}
               handleCloseTestAndPreview={this.handleCloseTestAndPreview}
-              isTestAndPreviewMode={(() => {
-                console.log('📤 CreativesContainer passing isTestAndPreviewMode:', this.state.isTestAndPreviewMode);
-                return this.state.isTestAndPreviewMode;
-              })()}
+              isTestAndPreviewMode={(() => this.state.isTestAndPreviewMode)()}
             />
           )}
           footer={this.shouldShowFooter() ? (