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

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
@@ -87,28 +88,169 @@ const TestAndPreviewSlidebox = (props) => {
   const [previewDevice, setPreviewDevice] = useState('desktop');
   const [previewDataHtml, setPreviewDataHtml] = useState(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;
+    
+    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
+    }
+    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;
+
+      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...');
+        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');
+          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
+        }
+      } 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();
       actions.fetchTestGroupsRequested();
-      const payloadContent = convert(
-        content,
-        GLOBAL_CONVERT_OPTIONS
-      );
-      actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
     }
-  }, [show, content, formData]);
+  }, [show, beeInstance, currentTab]);
+
+  // Single useEffect to handle BEE content updates without causing loops
+  useEffect(() => {
+    const currentTabData = formData[currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+    const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
+    
+    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);
+        setPreviewDataHtml({
+          resolvedBody: newBeeContent,
+          resolvedTitle: formData['template-subject'] || ''
+        });
+      }
+    }
+  }, [formData, currentTab]);
+
+  // Cleanup effect to reset ref when slidebox closes
+  useEffect(() => {
+    if (!show) {
+      previousBeeContentRef.current = '';
+      setBeeContent('');
+      setPreviewDataHtml('');
+    }
+  }, [show]);
 
   useEffect(() => {
     if (previewData) {
@@ -281,14 +423,43 @@ const TestAndPreviewSlidebox = (props) => {
   };
 
   // Handle update preview
-  const handleUpdatePreview = () => {
+  const handleUpdatePreview = async () => {
+    // For BEE editor, ensure content is saved first
+    const currentTabData = formData[currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+
+    // Get latest content from BEE editor if needed
+    if (beeInstance && currentTabData?.[activeTab]?.is_drag_drop) {
+      // Trigger save to ensure latest content
+      beeInstance.save();
+
+      // Wait a bit for save to complete
+      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,
+        };
+
+        actions.updatePreviewRequested(payload);
+      });
+      return;
+    }
+
+    // Use current content for non-BEE editor
     const payload = {
       channel: EMAIL,
       messageTitle: formData['template-subject'],
-      messageBody: content,
+      messageBody: getCurrentContent,
       resolvedTags: customValues,
       userId: selectedCustomer?.customerId,
     };
+
     actions.updatePreviewRequested(payload);
   };
 
@@ -316,7 +487,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 +579,7 @@ const TestAndPreviewSlidebox = (props) => {
       formData={formData}
       isUpdatingPreview={isUpdatingPreview}
       previewDataHtml={previewDataHtml}
-      content={content}
+      content={getCurrentContent}
       formatMessage={formatMessage}
       PreviewChrome={PreviewChrome}
     />
@@ -548,6 +719,7 @@ TestAndPreviewSlidebox.propTypes = {
   prefilledValues: PropTypes.object,
   isSendingTestMessage: PropTypes.bool.isRequired,
   beeInstance: PropTypes.object.isRequired,
+  currentTab: PropTypes.number,
 };
 
 TestAndPreviewSlidebox.defaultProps = {
@@ -555,6 +727,7 @@ TestAndPreviewSlidebox.defaultProps = {
   currentChannel: EMAIL,
   messageMetaConfigId: null,
   prefilledValues: {},
+  currentTab: 1,
 };
 
 // Redux connection

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/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -163,7 +163,9 @@ export function SlideBoxContent(props) {
       showTestAndPreviewSlidebox,
       handleTestAndPreview,
       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 = {
@@ -594,7 +596,7 @@ export function SlideBoxContent(props) {
       />
         )}
 
-      {isEmailCreate && (
+            {isEmailCreate && (
       <EmailWrapper
         key="creatives-email-wrapper"
         date={new Date().getMilliseconds()}
@@ -626,7 +628,8 @@ export function SlideBoxContent(props) {
         isLoyaltyModule={isLoyaltyModule}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}
-        handleCloseTestAndPreview={handleCloseTestAndPreview} 
+        handleCloseTestAndPreview={handleCloseTestAndPreview}
+        isTestAndPreviewMode={isTestAndPreviewMode}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -660,6 +663,10 @@ export function SlideBoxContent(props) {
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
+        isTestAndPreviewMode={(() => {
+          console.log('📤 SlideBoxContent passing isTestAndPreviewMode:', isTestAndPreviewMode);
+          return isTestAndPreviewMode;
+        })()}
       />
         )}
       {isEditMPush && (
@@ -1055,6 +1062,7 @@ SlideBoxContent.propTypes = {
   hostName: PropTypes.string,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
-  handleCloseTestAndPreview: PropTypes.func
+  handleCloseTestAndPreview: PropTypes.func,
+  isTestAndPreviewMode: PropTypes.bool
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/index.js

@@ -103,6 +103,7 @@ export class Creatives extends React.Component {
       activeFormBuilderTab: constants.ANDROID,
       // NEW: Test and Preview feature state
       showTestAndPreviewSlidebox: false,
+      isTestAndPreviewMode: false, // Add flag to track Test & Preview mode
     };
     this.liquidFlow = Boolean(commonUtil.hasLiquidSupportFeature());
     this.creativesTemplateSteps = {
@@ -877,7 +878,7 @@ export class Creatives extends React.Component {
           const { Templates, templateData: templateDataProps } = this.props;
           const selectedWhatsappAccount = Templates?.selectedWhatsappAccount;
           const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
-          const accountDetails = (selectedWhatsappAccount ? selectedWhatsappAccount : selectedAccountDetails);
+          const accountDetails = (selectedWhatsappAccount || selectedAccountDetails);
           const accountId = selectedAccountId || (selectedWhatsappAccount?.id || '');
           const { versions } = template.value;
           const {
@@ -917,13 +918,12 @@ export class Creatives extends React.Component {
           //to send {{unsubscribe}} to backend inside varMapped
           const unsubscribeRegex = /Click {{unsubscribe}} to unsubscribe/g;
           if (
-            languages[0].content?.match(unsubscribeRegex)?.length > 0 &&
-            Object.keys(varMapped)?.every(
+            languages[0].content?.match(unsubscribeRegex)?.length > 0
+            && Object.keys(varMapped)?.every(
               (key) => !key?.includes("_unsubscribe")
             )
           ) {
-            varMapped[`{{${Object.keys(varMapped).length + 1}}}_unsubscribe`] =
-              "{{unsubscribe}}";
+            varMapped[`{{${Object.keys(varMapped).length + 1}}}_unsubscribe`] = "{{unsubscribe}}";
           }
           const whatsappMedia = {
             header,
@@ -1255,14 +1255,26 @@ export class Creatives extends React.Component {
     this.setState({ isDiscardMessage: true });
   }
 
+
+
   // NEW: Handler for Test and Preview button
   handleTestAndPreview = () => {
-    this.setState({ showTestAndPreviewSlidebox: true });
+    console.log('🔓 CreativesContainer handleTestAndPreview called');
+    console.log('🔓 Setting isTestAndPreviewMode to true');
+    this.setState({
+      showTestAndPreviewSlidebox: true,
+      isTestAndPreviewMode: true, // Set flag to prevent validation
+    });
   }
 
   // NEW: Handler to close Test and Preview slidebox
   handleCloseTestAndPreview = () => {
-    this.setState({ showTestAndPreviewSlidebox: false });
+    console.log('🔒 CreativesContainer handleCloseTestAndPreview called');
+    console.log('🔒 Setting isTestAndPreviewMode to false');
+    this.setState({
+      showTestAndPreviewSlidebox: false,
+      isTestAndPreviewMode: false, // Reset flag when closing
+    });
   }
 
   shouldShowFooter = () => {
@@ -1300,8 +1312,8 @@ export class Creatives extends React.Component {
     }
     if (channel === constants.MOBILE_PUSH
       && ((slidBoxContent === 'createTemplate' && !isEmpty(mobilePushCreateMode))
-        || (slidBoxContent === 'editTemplate' && (currentStep === 'modeSelection' || isFullMode))) &&
-      templateNameExists) {
+        || (slidBoxContent === 'editTemplate' && (currentStep === 'modeSelection' || isFullMode)))
+      && templateNameExists) {
       showFooter = true;
     }
 
@@ -1312,8 +1324,8 @@ export class Creatives extends React.Component {
     }
 
     if (showFooter) {
-      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') ||
-        ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
+      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent')
+        || ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
         showFooter = showFooter && !this.state.isLoadingContent;
       } else if (slidBoxContent === "editTemplate"
         && ([constants.SMS, constants.WECHAT, constants.EMAIL].includes(channel)
@@ -1378,7 +1390,7 @@ export class Creatives extends React.Component {
       onBlur={() => { this.setState({ isEditName: false }, () => { this.showTemplateName({ formData, onFormDataChange }); }); }}
       onChange={(ev) => {
         const { value } = ev.currentTarget;
-        const isEmptyTemplateName = value.trim() ? false : true;
+        const isEmptyTemplateName = !value.trim();
 
         const newFormData = { ...formData, 'template-name': value, 'isTemplateNameEdited': true };
         this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
@@ -1405,7 +1417,6 @@ export class Creatives extends React.Component {
   }
 
   showLiquidErrorInFooter = (errorMessagesFromFormBuilder, currentFormBuilderTab) => {
-
     this.setState({
       isLiquidValidationError: !isEmpty(get(errorMessagesFromFormBuilder, constants.LIQUID_ERROR_MSG, [])) || !isEmpty(get(errorMessagesFromFormBuilder, constants.STANDARD_ERROR_MSG, [])),
       liquidErrorMessage: errorMessagesFromFormBuilder,
@@ -1476,6 +1487,7 @@ export class Creatives extends React.Component {
       liquidErrorMessage,
       activeFormBuilderTab,
       showTestAndPreviewSlidebox,
+      isTestAndPreviewMode,
     } = this.state;
     const {
       isFullMode,
@@ -1498,8 +1510,7 @@ export class Creatives extends React.Component {
       isLoyaltyModule,
       loyaltyMetaData = {},
     } = this.props;
-    const mapTemplateCreate =
-      slidBoxContent === "createTemplate"
+    const mapTemplateCreate = slidBoxContent === "createTemplate"
       && weChatTemplateType === MAP_TEMPLATE
       && templateStep !== "modeSelection";
     const slideBoxWrapperMargin = (get(liquidErrorMessage, 'STANDARD_ERROR_MSG.length', 0) > 0 && get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0)
@@ -1606,6 +1617,10 @@ 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;
+              })()}
             />
           )}
           footer={this.shouldShowFooter() ? (

package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap

@@ -17,6 +17,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
             "actionName": "SEND_COMMUNICATION_ACTION",
@@ -102,6 +103,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
             "actionName": "SEND_COMMUNICATION_ACTION",
@@ -187,6 +189,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
             "actionName": "SEND_COMMUNICATION_ACTION",
@@ -284,6 +287,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
             "actionName": "SEND_COMMUNICATION_ACTION",
@@ -381,6 +385,7 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
             "actionName": "SEND_COMMUNICATION_ACTION",