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

package/package.json

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

package/v2Components/EmailPreview/_emailPreview.scss

@@ -79,6 +79,7 @@
           }
           .email-subject-desktop {
             text-align: left;
+            margin-left: 6%;
             margin-bottom: 8px;
           }
           .tablet-message-container-v2 {

package/v2Components/EmailPreviewV2/_emailPreviewV2.scss

@@ -65,6 +65,7 @@ $classPrefix: email-preview-v2;
               }
               .email-subject-desktop {
                 text-align: left;
+                margin-left: 6%;
                 margin-bottom: 8px;
               }
               .tablet-message-container {

package/v2Components/FormBuilder/index.js

@@ -235,9 +235,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       ( !this.state.usingTabContainer || (this.state.usingTabContainer && nextProps.tabKey !== ''))
       && !_.isEqual(nextProps.formData, this.state.formData) &&
       !_.isEqual(nextProps.formData, this.props.formData)) {
-      this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey}, () => {
-        this.validateForm();
-      });
+      // Don't run validation if we're in Test & Preview mode
+      if (!nextProps.isTestAndPreviewMode) {
+        this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey}, () => {
+          this.validateForm();
+        });
+      } else {
+        // Just update formData without validation
+        this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey});
+      }
       //this.resetTabKeys(nextProps.formData, nextProps.tabCount);
     } else if ((_.isEmpty(this.props.formData) || !this.props.formData) && _.isEmpty(this.state.formData)) {
       this.initialiseForm(nextProps.schema, true);
@@ -265,10 +271,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           this.resetTabKeys(nextProps.formData, nextProps.tabCount, false, true);
         }
         if (type === 'embedded' || ( this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'EMAIL')) {
-          this.validateForm();
+          // Don't run validation if we're in Test & Preview mode
+          if (!nextProps.isTestAndPreviewMode) {
+            this.validateForm();
+          }
         }
         if ((this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'MOBILEPUSH')) {
-          this.validateForm();
+          // Don't run validation if we're in Test & Preview mode
+          if (!nextProps.isTestAndPreviewMode) {
+            this.validateForm();
+          }
         }
       });
     }
@@ -286,7 +298,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
 
           this.initialiseForm(nextProps.schema, false, resetTabKeys);
-          this.validateForm();
+          // Don't run validation if we're in Test & Preview mode
+          if (!nextProps.isTestAndPreviewMode) {
+            this.validateForm();
+          }
         }
       });
     }
@@ -299,10 +314,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (!_.isEmpty(nextProps.injectedTags) && !_.isEqual(nextProps.injectedTags, this.props.injectedTags)) {
-      this.validateForm(nextProps.tags, nextProps.injectedTags);
+      // Don't run validation if we're in Test & Preview mode
+      if (!nextProps.isTestAndPreviewMode) {
+        this.validateForm(nextProps.tags, nextProps.injectedTags);
+      }
     }
     if (!_.isEmpty(nextProps.tags) && !_.isEqual(nextProps.tags, this.props.tags)) {
-      this.validateForm(nextProps.tags, nextProps.injectedTags);
+      // Don't run validation if we're in Test & Preview mode
+      if (!nextProps.isTestAndPreviewMode) {
+        this.validateForm(nextProps.tags, nextProps.injectedTags);
+      }
     }
     if (!_.isEqual(nextProps.showModal, this.props.showModal)) {
       this.setState({showModal: nextProps.showModal});
@@ -3917,55 +3938,59 @@ FormBuilder.defaultProps = {
   userLocale: localStorage.getItem('jlocale') || 'en',
   showLiquidErrorInFooter: () => {},
   metaDataStatus: "",
+  isTestAndPreviewMode: false, // Default to false to maintain existing behavior
 };
 
 FormBuilder.propTypes = {
   schema: PropTypes.object.isRequired,
-  onSubmit: PropTypes.func,
-  formData: PropTypes.object,
-  onChange: PropTypes.func,
-  isEdit: PropTypes.bool,
-  usingTabContainer: PropTypes.bool,
-  parent: PropTypes.object,
-  iframeParent: PropTypes.object,
-  location: PropTypes.object,
-  tags: PropTypes.array,
-  injectedTags: PropTypes.object,
-  onFormValidityChange: PropTypes.func,
-  checkValidation: PropTypes.bool,
-  onContextChange: PropTypes.func,
-  tabCount: PropTypes.number,
-  isSchemaChanged: PropTypes.bool,
-  modal: PropTypes.object,
-  isNewVersionFlow: PropTypes.bool,
-  baseLanguage: PropTypes.string,
-  supportedLanguages: PropTypes.array,
-  router: PropTypes.object,
-  currentTab: PropTypes.number,
-  showModal: PropTypes.bool,
-  handleCancelModal: PropTypes.func,
-  cmsTemplates: PropTypes.array,
-  getCmsTemplatesInProgress: PropTypes.bool,
-  showEdmEmailTemplates: PropTypes.bool,
-  toggleEdmEmailTemplateSelection: PropTypes.func,
-  handleEdmDefaultTemplateSelection: PropTypes.func,
-  userLocale: PropTypes.string,
-  setModalContent: PropTypes.func,
-  addLanguageType: PropTypes.string,
-  getValidationData: PropTypes.func,
-  startValidation: PropTypes.bool,
-  // saveForm: PropTypes.bool,
-  stopValidation: PropTypes.func,
-  handleDelete: PropTypes.func,
-  intl: intlShape.isRequired,
-  selectedOfferDetails: PropTypes.array,
-  setDrawerVisibility: PropTypes.bool,
-  capDrawerContent: PropTypes.array,
-  isFullMode: PropTypes.bool,
-  currentOrgDetails: PropTypes.object,
-  liquidExtractionInProgress: PropTypes.bool,
-  showLiquidErrorInFooter: PropTypes.func,
-  channel: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  currentTab: PropTypes.number.isRequired,
+  parent: PropTypes.object.isRequired,
+  formData: PropTypes.object.isRequired,
+  location: PropTypes.object.isRequired,
+  tabKey: PropTypes.string.isRequired,
+  tags: PropTypes.array.isRequired,
+  tagModule: PropTypes.string.isRequired,
+  injectedTags: PropTypes.object.isRequired,
+  onFormValidityChange: PropTypes.func.isRequired,
+  handleCancelModal: PropTypes.func.isRequired,
+  usingTabContainer: PropTypes.bool.isRequired,
+  checkValidation: PropTypes.bool.isRequired,
+  onContextChange: PropTypes.func.isRequired,
+  tabCount: PropTypes.number.isRequired,
+  isNewVersionFlow: PropTypes.bool.isRequired,
+  modal: PropTypes.object.isRequired,
+  showModal: PropTypes.bool.isRequired,
+  isEdit: PropTypes.bool.isRequired,
+  iframeParent: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired,
+  baseLanguage: PropTypes.string.isRequired,
+  supportedLanguages: PropTypes.array.isRequired,
+  isSchemaChanged: PropTypes.bool.isRequired,
+  cmsTemplates: PropTypes.array.isRequired,
+  getCmsTemplatesInProgress: PropTypes.bool.isRequired,
+  showEdmEmailTemplates: PropTypes.bool.isRequired,
+  toggleEdmEmailTemplateSelection: PropTypes.func.isRequired,
+  handleEdmDefaultTemplateSelection: PropTypes.func.isRequired,
+  setModalContent: PropTypes.func.isRequired,
+  addLanguageType: PropTypes.string.isRequired,
+  startValidation: PropTypes.bool.isRequired,
+  getValidationData: PropTypes.func.isRequired,
+  saveForm: PropTypes.bool.isRequired,
+  stopValidation: PropTypes.func.isRequired,
+  selectedOfferDetails: PropTypes.object.isRequired,
+  saveBeeInstance: PropTypes.func.isRequired,
+  saveBeeData: PropTypes.func.isRequired,
+  uuid: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  isEmailLoading: PropTypes.bool.isRequired,
+  moduleType: PropTypes.string.isRequired,
+  showLiquidErrorInFooter: PropTypes.bool.isRequired,
+  eventContextTags: PropTypes.array.isRequired,
+  forwardedTags: PropTypes.object.isRequired,
+  isLoyaltyModule: PropTypes.bool.isRequired,
+  isTestAndPreviewMode: PropTypes.bool, // Add new prop type
 };
 
 const mapStateToProps = createStructuredSelector({

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,33 +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(() => {
     // Only save BEE content if we're actually using BEE editor
-    const currentTabData = formData[formData.currentTab - 1];
+    const currentTabData = formData[currentTab - 1];
     const activeTab = currentTabData?.activeTab;
     const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
 
     if (show && beeInstance && isDragDrop) {
-      beeInstance.save();
+      // 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, formData]);
+  }, [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) {
@@ -288,7 +425,7 @@ const TestAndPreviewSlidebox = (props) => {
   // Handle update preview
   const handleUpdatePreview = async () => {
     // For BEE editor, ensure content is saved first
-    const currentTabData = formData[formData.currentTab - 1];
+    const currentTabData = formData[currentTab - 1];
     const activeTab = currentTabData?.activeTab;
 
     // Get latest content from BEE editor if needed
@@ -304,7 +441,7 @@ const TestAndPreviewSlidebox = (props) => {
         const payload = {
           channel: EMAIL,
           messageTitle: formData['template-subject'],
-          messageBody: htmlFile || content,
+          messageBody: htmlFile || getCurrentContent,
           resolvedTags: customValues,
           userId: selectedCustomer?.customerId,
         };
@@ -314,11 +451,11 @@ const TestAndPreviewSlidebox = (props) => {
       return;
     }
 
-    // Use content from formData for non-BEE editor
+    // Use current content for non-BEE editor
     const payload = {
       channel: EMAIL,
       messageTitle: formData['template-subject'],
-      messageBody: content,
+      messageBody: getCurrentContent,
       resolvedTags: customValues,
       userId: selectedCustomer?.customerId,
     };
@@ -350,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) => {
@@ -442,7 +579,7 @@ const TestAndPreviewSlidebox = (props) => {
       formData={formData}
       isUpdatingPreview={isUpdatingPreview}
       previewDataHtml={previewDataHtml}
-      content={content}
+      content={getCurrentContent}
       formatMessage={formatMessage}
       PreviewChrome={PreviewChrome}
     />
@@ -582,6 +719,7 @@ TestAndPreviewSlidebox.propTypes = {
   prefilledValues: PropTypes.object,
   isSendingTestMessage: PropTypes.bool.isRequired,
   beeInstance: PropTypes.object.isRequired,
+  currentTab: PropTypes.number,
 };
 
 TestAndPreviewSlidebox.defaultProps = {
@@ -589,6 +727,7 @@ TestAndPreviewSlidebox.defaultProps = {
   currentChannel: EMAIL,
   messageMetaConfigId: null,
   prefilledValues: {},
+  currentTab: 1,
 };
 
 // Redux connection

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",

package/v2Containers/Email/index.js

@@ -89,6 +89,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       addLanguageType: '',
       startValidation: false,
       saveForm: false,
+      showTestAndPreviewSlidebox: false,
+      isTestAndPreviewMode: false, // Add flag to prevent validation during Test & Preview
     };
 
     this.isTagLoaded = false;
@@ -239,6 +241,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   componentWillReceiveProps(nextProps) {
+    console.log('🔄 componentWillReceiveProps called - isTestAndPreviewMode:', this.state.isTestAndPreviewMode);
+    console.log('📥 Email received isTestAndPreviewMode prop:', nextProps.isTestAndPreviewMode);
+    
     // if (this.props.location.query.type === 'embedded') {
     //   this.showNext();
     // }
@@ -246,7 +251,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (isFullMode && isGetFormData && !_.isEqual(isGetFormData, this.props.isGetFormData) && !this.state.isDragDrop) {
       //only for ck editor
       //when create button is clicked in full mode
+      // Don't start validation if we're in Test & Preview mode
+            if (!nextProps.isTestAndPreviewMode) {
+        console.log('✅ componentWillReceiveProps calling startValidation - isTestAndPreviewMode:', nextProps.isTestAndPreviewMode);
       this.startValidation(true);
+      } else {
+        console.log('🚫 componentWillReceiveProps blocked startValidation - Test & Preview mode active');
+      }
     }
     if (this.state.languageDataSet && nextProps.Templates.selectedEmailLayout && nextProps.Templates.selectedEmailLayout !== '' && !_.isEqual(this.props.Templates.selectedEmailLayout, nextProps.Templates.selectedEmailLayout )) {
       this.setNewLanguageContent(nextProps.Templates.selectedEmailLayout);
@@ -801,6 +812,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   getFormData = (e, value) => {
+    // Don't run validation if we're in Test & Preview mode
+    if (this.props.isTestAndPreviewMode) {
+      console.log('🚫 getFormData blocked - Test & Preview mode active');
+      return;
+    }
+    
+    console.log('✅ getFormData called - isTestAndPreviewMode:', this.props.isTestAndPreviewMode);
+    
     this.setState({getFormDataValue: value, gettingFormData: true}, () => {
       this.saveValidationData();
     });
@@ -1017,6 +1036,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     });
   }
   startValidation = (shouldSave) => {
+    // Don't start validation if we're in Test & Preview mode
+    if (this.props.isTestAndPreviewMode) {
+      console.log('🚫 startValidation blocked - Test & Preview mode active');
+      return;
+    }
+    
+    console.log('✅ startValidation called - shouldSave:', shouldSave, 'isTestAndPreviewMode:', this.props.isTestAndPreviewMode);
+    
     if (!this.state.startValidation && shouldSave) {
       this.setState({startValidation: true});
     }
@@ -1025,6 +1052,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({startValidation: false}, this.props.onValidationFail);
   }
   saveValidationData = () => {
+    // Don't run validation if we're in Test & Preview mode
+    if (this.props.isTestAndPreviewMode) {
+      console.log('🚫 saveValidationData blocked - Test & Preview mode active');
+      return;
+    }
+    
+    console.log('✅ saveValidationData called - isTestAndPreviewMode:', this.props.isTestAndPreviewMode);
+    
     let saveCount = 0;
     const isBeeEnable = this.checkBeeEditorAllowedForLibrary();
     this.setState({saveEdmDataMode: 'validation', saveCount: 0, cmsDataCount: 0}, () => {
@@ -2107,7 +2142,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
 
      //const data = {"base":{"subject":"deded","html_content":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html> <head> \t<title>Scheduled Report</title> \t<meta http-equiv=\"Content-Type\" content=\"text/html charset=UTF-8\"/> \t<style type=\"text/css\">.container-main p{line-height: 1.6;}@media screen and (max-width: 480px){a.brand{font-size: 35px;}}@media screen and (max-width: 480px){.container-main a{text-align: center;}a.brand{text-align: center;}}a.brand img{vertical-align: middle; padding: 0 8px 0 0; width: 250px;}@media screen and (max-width: 480px){a.brand img{width: 220px !important;}}@media screen and (max-width: 480px){.container-content{padding: 15px 20px; font-size: 12px !important;} .email-footer{font-size: 12px !important;}}.container-content table{border-collapse: collapse;}.container-content table tr td p{margin: 5px;}.container-content table tr td p span{font-weight: bold; padding: 0 3px 0 0;}@media screen and (max-width: 480px){a.btn-view-reports{margin: 25px auto 10px;}}a.btn-view-reports:hover{background: grey; color: #fff;}.email-footer p{text-align: center; font-size: 12px; color: grey;}.email-footer p a{color: blue; cursor: pointer;}.email-footer p a:hover{color: grey;} \t</style> </head> <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center> <table class=\"container-main\" style=\"background:#eeeeee; color:#000000; font-family:'Open Sans',sans-serif; font-size:16px; font-weight:400; margin:0 auto; max-width:978px; padding:15px; width:100%\"> \t<tbody> \t\t<tr> \t\t\t<td> \t\t\t<table class=\"email-header\" style=\"background:#ffffff; margin:0 0 5px; padding:17px 0; width:100%\"> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td style=\"width:100%\"><a class=\"brand\" href=\"#\" style=\"display: table; margin: 0 auto; text-decoration: none; font-size: 37px; color: grey;\"><CapImage alt=\"Capillary Technologies\" src=\"https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png\" /> </a></td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<div class=\"container-content\" style=\"background:#ffffff; padding:20px 35px\"> \t\t\t<p>Hi Ashish Karan,</p>  \t\t\t<p>You&#39;ve received a new scheduled report. {{unsubscribe}}</p>  \t\t\t<table> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Org Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>autotest1</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Scheduled Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>Schedule Test</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Time Period: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>1st Jan, 2017 to 24th Sep, 2017</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Report Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>redDart Report</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<p style=\"font-size:15px; margin-top:25px\">By clicking &quot;View Report&quot; you will be redirected to Capillary Analytics to view the automated report.</p> \t\t\t<a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91?snapshot=59c8bce750f4e75ec8b0d24c\" style=\"background: #009e0f; text-align: center; color: #fff; font-size: 16px; padding: 10px 25px; cursor: pointer; text-decoration: none; display: block; width: 120px; margin: 25px auto 15px;\" target=\"_blank\">View Report</a></div>  \t\t\t<div class=\"email-footer\"> \t\t\t<p style=\"color:grey; font-size:12px; text-align:center\">You&#39;ve received this mail because you subscribed to Schedule Test schedule of redDart Report. <a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91/schedule/59c8bce750f4e75ec8b0d24c/unsubscribeSchedule\" style=\"color: blue; cursor: pointer;\" target=\"_blank\">Unsubscribe</a></p>  \t\t\t<p><a href=\"http://capillarytech.com/privacy-policy/\" target=\"_blank\">Privacy Policy</a> | <a href=\"http://capillarytech.com/about-us/\" target=\"_blank\">About Capillary</a></p> \t\t\t</div> \t\t\t</td> \t\t</tr> \t</tbody> </table> </body> </html> ","is_drag_drop":false,"drag_drop_id":null},"secondary_templates":[{"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":false,"drag_drop_id":null,"scope":null,"tag":null,"is_default":null,"html_content":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html> <head> \t<title>Scheduled Report</title> \t<meta http-equiv=\"Content-Type\" content=\"text/html charset=UTF-8\"/> \t<style type=\"text/css\">.container-main p{line-height: 1.6;}@media screen and (max-width: 480px){a.brand{font-size: 35px;}}@media screen and (max-width: 480px){.container-main a{text-align: center;}a.brand{text-align: center;}}a.brand img{vertical-align: middle; padding: 0 8px 0 0; width: 250px;}@media screen and (max-width: 480px){a.brand img{width: 220px !important;}}@media screen and (max-width: 480px){.container-content{padding: 15px 20px; font-size: 12px !important;} .email-footer{font-size: 12px !important;}}.container-content table{border-collapse: collapse;}.container-content table tr td p{margin: 5px;}.container-content table tr td p span{font-weight: bold; padding: 0 3px 0 0;}@media screen and (max-width: 480px){a.btn-view-reports{margin: 25px auto 10px;}}a.btn-view-reports:hover{background: grey; color: #fff;}.email-footer p{text-align: center; font-size: 12px; color: grey;}.email-footer p a{color: blue; cursor: pointer;}.email-footer p a:hover{color: grey;} \t</style> </head> <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center> <table class=\"container-main\" style=\"background:#eeeeee; color:#000000; font-family:'Open Sans',sans-serif; font-size:16px; font-weight:400; margin:0 auto; max-width:978px; padding:15px; width:100%\"> \t<tbody> \t\t<tr> \t\t\t<td> \t\t\t<table class=\"email-header\" style=\"background:#ffffff; margin:0 0 5px; padding:17px 0; width:100%\"> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td style=\"width:100%\"><a class=\"brand\" href=\"#\" style=\"display: table; margin: 0 auto; text-decoration: none; font-size: 37px; color: grey;\"><CapImage alt=\"Capillary Technologies\" src=\"https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png\" /> </a></td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<div class=\"container-content\" style=\"background:#ffffff; padding:20px 35px\"> \t\t\t<p>Hi Ashish Karan,</p>  \t\t\t<p>You&#39;ve received a new scheduled report. {{unsubscribe}}</p>  \t\t\t<table> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Org Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>autotest1</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Scheduled Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>Schedule Test</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Time Period: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>1st Jan, 2017 to 24th Sep, 2017</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Report Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>redDart Report</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<p style=\"font-size:15px; margin-top:25px\">By clicking &quot;View Report&quot; you will be redirected to Capillary Analytics to view the automated report.</p> \t\t\t<a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91?snapshot=59c8bce750f4e75ec8b0d24c\" style=\"background: #009e0f; text-align: center; color: #fff; font-size: 16px; padding: 10px 25px; cursor: pointer; text-decoration: none; display: block; width: 120px; margin: 25px auto 15px;\" target=\"_blank\">View Report</a></div>  \t\t\t<div class=\"email-footer\"> \t\t\t<p style=\"color:grey; font-size:12px; text-align:center\">You&#39;ve received this mail because you subscribed to Schedule Test schedule of redDart Report. <a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91/schedule/59c8bce750f4e75ec8b0d24c/unsubscribeSchedule\" style=\"color: blue; cursor: pointer;\" target=\"_blank\">Unsubscribe</a></p>  \t\t\t<p><a href=\"http://capillarytech.com/privacy-policy/\" target=\"_blank\">Privacy Policy</a> | <a href=\"http://capillarytech.com/about-us/\" target=\"_blank\">About Capillary</a></p> \t\t\t</div> \t\t\t</td> \t\t</tr> \t</tbody> </table> </body> </html> ","secondary_template_id":"9500","is_base_template":1,"language_name":"English","language":"English","lang_id":"69"}],"edit":true,"tags":[]};
-  //  const data = {edit: true, "base":{"subject":"testsubject","html_content":"<html>  <head>  \t<meta charset=\"utf-8\" />  \t<title>Aster Secure</title>  \t<style type=\"text/css\">#outlook a {    padding: 0;  }      body {    width: 100% !important;    -webkit-text-size-adjust: 100%;    -ms-text-size-adjust: 100%;    margin: 0;    padding: 0;}      .ExternalClass {    width: 100%;  }      .ExternalClass,  .ExternalClass p,  .ExternalClass span,  .ExternalClass font,  .ExternalClass td,  .ExternalClass div {    line-height: 100%;  }      #backgroundTable {    margin: 0;    padding: 0;    width: 100% !important;    line-height: 100% !important;  }  img {    outline: none;    text-decoration: none;    border: none;    -ms-interpolation-mode: bicubic;  }  a img {    border: none;  }  .image_fix {    display: block;  }  p {    margin: 0px 0px !important;  }  table td {    border-collapse: collapse;  }  table {    border-collapse: collapse;    mso-table-lspace: 0pt;    mso-table-rspace: 0pt;  }        table[class=full] {    width: 100%;    clear: both;  }  table[class=spacetable] {    height: 176px;  }  table[class=spacetable1] {    height: 431px;  }  table[class=spacetable2] {    height: 50px;  }  table[class=spacetable3] {    height: 55px;  }  \t  @media only screen and (min-width: 320px) and (max-width: 540px) {      a[href^=\"tel\"],      a[href^=\"sms\"] {          text-decoration: none;          color: #ffffff;                              pointer-events: none;          cursor: default;      }      .mobile_link a[href^=\"tel\"],      .mobile_link a[href^=\"sms\"] {          text-decoration: default;          color: #ffffff !important;          pointer-events: auto;          cursor: default;      }      img[class=logo] {          width: 132px!important;      }      img[class=shop] {          width:53px!important;             text-align: center!important;      }         table[class=innerlayer] {          width: 300px !important;          text-align: center;      }      img[class=spot] {          width: 65px!important;      }      img[class=banner] {          width: 290px !important;          text-align: center;      }      img[class=banner1] {          width: 229px!important;      }      img[class=click] {          width:55px!important;      }      img[class=border] {          width: 290px!important;      }      td[class=txtfont] {          font-size:11px!important;        height:50px!important;          line-height: 15px!important;            }  \t  span[class=txtfont] {          font-size:9px!important;        height:98px!important;          line-height:23px!important;            }       \t td[class=txtfont1] {          font-size:11px!important; height:40px!important;    line-height: 14px!important;      } img[class=left] {          width:195px!important;      } img[class=right] {          width:46px!important;      } \t   \t  td[class=txtfont3] {          font-size:8px!important;}   \ttd[class=txtfont2] {          font-size:6px!important;            line-height:9px!important;              }      td[class=txtbold] {          font-size: 21px!important;      }      img[class=gap] {          width:92px!important;      }      img[class=gap1] {          width: 20px!important;      }      table[class=social] {          width: 99% !important;      }      img[class=fb] {          width:20px!important;      }      img[class=in] {          width:21px!important;      }      img[class=tw] {          width:20px!important;      }      img[class=pin] {          width:41px!important;      }       \t   img[class=and] {          width:81px!important;      }      img[class=my] {          width: 44px!important;      }  \t    img[class=you] {          width:21px!important;      }      img[class=store] {          width:65px!important;      }  \t \t    img[class=snap] {          width:24px!important;                }      td[class=textlen] {          height:52px!important;      }  \ttd[class=tdlen]  \t{  \theight:35px!important;font-size: 10px !important;  \t}    \t\t\timg[class=a] { width: 42px!important; }   \t\t\timg[class=b] { width: 22px!important; }   \t\t\timg[class=c] { width: 72px!important; }   \t\t\timg[class=d] { width: 50px!important; }   \t\t\timg[class=e] { width: 56px!important; }   \t\t\timg[class=f] { width: 56px!important; }   \t\t\t}  \t</style>  </head>  <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center>  <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">  \t<tbody>  \t\t<tr>  \t\t\t<td>  \t\t\t<table align=\"center\" bgcolor=\"#fff\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">  \t\t\t\t<tbody>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">Shop at Aster Pharmacy this month and You could be the next lucky winner!</td>  \t\t\t\t\t</tr>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td><a href=\"#\" style=\"pointer-events:none;\"><CapImage class=\"banner\" src=\"https://s3-eu-west-1.amazonaws.com/fs.capillary.eu/intouch_creative_assets/890bdffee3b2322d8ec7.jpg\" style=\"border:none; display:block\" /></a></td>  \t\t\t\t\t</tr>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">To remove your email address from our mailing list , please click on {{unsubscribe}}</td>  \t\t\t\t\t</tr>  \t\t\t\t</tbody>  \t\t\t</table>  \t\t\t</td>  \t\t</tr>  \t</tbody>  </table>  </body>  </html>  ","is_drag_drop":0,"drag_drop_id":null},"secondary_templates":[{"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":false,"drag_drop_id":null,"scope":null,"tag":null,"is_default":null,"html_content":"<html>\r\n<head>\r\n\t<meta charset=\"utf-8\" />\r\n\t<title>Aster Secure</title>\r\n\t<style type=\"text/css\">#outlook a {    padding: 0;  }      body {    width: 100% !important;    -webkit-text-size-adjust: 100%;    -ms-text-size-adjust: 100%;    margin: 0;    padding: 0;}      .ExternalClass {    width: 100%;  }      .ExternalClass,  .ExternalClass p,  .ExternalClass span,  .ExternalClass font,  .ExternalClass td,  .ExternalClass div {    line-height: 100%;  }      #backgroundTable {    margin: 0;    padding: 0;    width: 100% !important;    line-height: 100% !important;  }  img {    outline: none;    text-decoration: none;    border: none;    -ms-interpolation-mode: bicubic;  }  a img {    border: none;  }  .image_fix {    display: block;  }  p {    margin: 0px 0px !important;  }  table td {    border-collapse: collapse;  }  table {    border-collapse: collapse;    mso-table-lspace: 0pt;    mso-table-rspace: 0pt;  }        table[class=full] {    width: 100%;    clear: both;  }  table[class=spacetable] {    height: 176px;  }  table[class=spacetable1] {    height: 431px;  }  table[class=spacetable2] {    height: 50px;  }  table[class=spacetable3] {    height: 55px;  }  \t  @media only screen and (min-width: 320px) and (max-width: 540px) {      a[href^=\"tel\"],      a[href^=\"sms\"] {          text-decoration: none;          color: #ffffff;                              pointer-events: none;          cursor: default;      }      .mobile_link a[href^=\"tel\"],      .mobile_link a[href^=\"sms\"] {          text-decoration: default;          color: #ffffff !important;          pointer-events: auto;          cursor: default;      }      img[class=logo] {          width: 132px!important;      }      img[class=shop] {          width:53px!important;             text-align: center!important;      }         table[class=innerlayer] {          width: 300px !important;          text-align: center;      }      img[class=spot] {          width: 65px!important;      }      img[class=banner] {          width: 290px !important;          text-align: center;      }      img[class=banner1] {          width: 229px!important;      }      img[class=click] {          width:55px!important;      }      img[class=border] {          width: 290px!important;      }      td[class=txtfont] {          font-size:11px!important;        height:50px!important;          line-height: 15px!important;            }  \t  span[class=txtfont] {          font-size:9px!important;        height:98px!important;          line-height:23px!important;            }       \t td[class=txtfont1] {          font-size:11px!important; height:40px!important;    line-height: 14px!important;      } img[class=left] {          width:195px!important;      } img[class=right] {          width:46px!important;      } \t   \t  td[class=txtfont3] {          font-size:8px!important;}   \ttd[class=txtfont2] {          font-size:6px!important;            line-height:9px!important;              }      td[class=txtbold] {          font-size: 21px!important;      }      img[class=gap] {          width:92px!important;      }      img[class=gap1] {          width: 20px!important;      }      table[class=social] {          width: 99% !important;      }      img[class=fb] {          width:20px!important;      }      img[class=in] {          width:21px!important;      }      img[class=tw] {          width:20px!important;      }      img[class=pin] {          width:41px!important;      }       \t   img[class=and] {          width:81px!important;      }      img[class=my] {          width: 44px!important;      }  \t    img[class=you] {          width:21px!important;      }      img[class=store] {          width:65px!important;      }  \t \t    img[class=snap] {          width:24px!important;                }      td[class=textlen] {          height:52px!important;      }  \ttd[class=tdlen]  \t{  \theight:35px!important;font-size: 10px !important;  \t}    \t\t\timg[class=a] { width: 42px!important; }   \t\t\timg[class=b] { width: 22px!important; }   \t\t\timg[class=c] { width: 72px!important; }   \t\t\timg[class=d] { width: 50px!important; }   \t\t\timg[class=e] { width: 56px!important; }   \t\t\timg[class=f] { width: 56px!important; }   \t\t\t}\r\n\t</style>\r\n</head>\r\n<body>\r\n<table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">\r\n\t<tbody>\r\n\t\t<tr>\r\n\t\t\t<td>\r\n\t\t\t<table align=\"center\" bgcolor=\"#fff\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">\r\n\t\t\t\t<tbody>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">Shop at Aster Pharmacy this month and You could be the next lucky winner!</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td><a href=\"#\" style=\"pointer-events:none;\"><CapImage class=\"banner\" src=\"https://s3-eu-west-1.amazonaws.com/fs.capillary.eu/intouch_creative_assets/890bdffee3b2322d8ec7.jpg\" style=\"border:none; display:block\" /></a></td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">To remove your email address from our mailing list , please click on {{unsubscribe}}</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t</tbody>\r\n\t\t\t</table>\r\n\t\t\t</td>\r\n\t\t</tr>\r\n\t</tbody>\r\n</table>\r\n</body>\r\n</html>\r\n","secondary_template_id":"9584","is_base_template":1,"language_name":"English","language":"English","lang_id":"69"}, {"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":false,"drag_drop_id":null,"scope":null,"tag":null,"is_default":null,"html_content":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html> <head> \t<title>Scheduled Report</title> \t<meta http-equiv=\"Content-Type\" content=\"text/html charset=UTF-8\"/> \t<style type=\"text/css\">.container-main p{line-height: 1.6;}@media screen and (max-width: 480px){a.brand{font-size: 35px;}}@media screen and (max-width: 480px){.container-main a{text-align: center;}a.brand{text-align: center;}}a.brand img{vertical-align: middle; padding: 0 8px 0 0; width: 250px;}@media screen and (max-width: 480px){a.brand img{width: 220px !important;}}@media screen and (max-width: 480px){.container-content{padding: 15px 20px; font-size: 12px !important;} .email-footer{font-size: 12px !important;}}.container-content table{border-collapse: collapse;}.container-content table tr td p{margin: 5px;}.container-content table tr td p span{font-weight: bold; padding: 0 3px 0 0;}@media screen and (max-width: 480px){a.btn-view-reports{margin: 25px auto 10px;}}a.btn-view-reports:hover{background: grey; color: #fff;}.email-footer p{text-align: center; font-size: 12px; color: grey;}.email-footer p a{color: blue; cursor: pointer;}.email-footer p a:hover{color: grey;} \t</style> </head> <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center> <table class=\"container-main\" style=\"background:#eeeeee; color:#000000; font-family:'Open Sans',sans-serif; font-size:16px; font-weight:400; margin:0 auto; max-width:978px; padding:15px; width:100%\"> \t<tbody> \t\t<tr> \t\t\t<td> \t\t\t<table class=\"email-header\" style=\"background:#ffffff; margin:0 0 5px; padding:17px 0; width:100%\"> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td style=\"width:100%\"><a class=\"brand\" href=\"#\" style=\"display: table; margin: 0 auto; text-decoration: none; font-size: 37px; color: grey;\"><CapImage alt=\"Capillary Technologies\" src=\"https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png\" /> </a></td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<div class=\"container-content\" style=\"background:#ffffff; padding:20px 35px\"> \t\t\t<p>Hi Ashish Karan,</p>  \t\t\t<p>You&#39;ve received a new scheduled report. {{unsubscribe}}</p>  \t\t\t<table> \t\t\t\t<tbody> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Org Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>autotest1</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Scheduled Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>Schedule Test</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Time Period: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>1st Jan, 2017 to 24th Sep, 2017</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t\t<tr> \t\t\t\t\t\t<td><strong>Report Name: </strong></td> \t\t\t\t\t\t<td> \t\t\t\t\t\t<p>redDart Report</p> \t\t\t\t\t\t</td> \t\t\t\t\t</tr> \t\t\t\t</tbody> \t\t\t</table>  \t\t\t<p style=\"font-size:15px; margin-top:25px\">By clicking &quot;View Report&quot; you will be redirected to Capillary Analytics to view the automated report.</p> \t\t\t<a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91?snapshot=59c8bce750f4e75ec8b0d24c\" style=\"background: #009e0f; text-align: center; color: #fff; font-size: 16px; padding: 10px 25px; cursor: pointer; text-decoration: none; display: block; width: 120px; margin: 25px auto 15px;\" target=\"_blank\">View Report</a></div>  \t\t\t<div class=\"email-footer\"> \t\t\t<p style=\"color:grey; font-size:12px; text-align:center\">You&#39;ve received this mail because you subscribed to Schedule Test schedule of redDart Report. <a href=\"https://nightly.capillary.in/analytics/v2/report/59c37820e626a10df78c8d91/schedule/59c8bce750f4e75ec8b0d24c/unsubscribeSchedule\" style=\"color: blue; cursor: pointer;\" target=\"_blank\">Unsubscribe</a></p>  \t\t\t<p><a href=\"http://capillarytech.com/privacy-policy/\" target=\"_blank\">Privacy Policy</a> | <a href=\"http://capillarytech.com/about-us/\" target=\"_blank\">About Capillary</a></p> \t\t\t</div> \t\t\t</td> \t\t</tr> \t</tbody> </table> </body> </html> ","secondary_template_id":"9500","is_base_template":false,"language_name":"Hindi","language":"Hindi","lang_id":"151"},{"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":1,"drag_drop_id":"55acf47048a85bbf7681a35a","scope":null,"tag":null,"is_default":null,"html_content":"","secondary_template_id":"9500","is_base_template":0,"language_name":"Japanese","language":"Japanese","lang_id":"100"}]};
+  //  const data = {edit: true, "base":{"subject":"testsubject","html_content":"<html>  <head>  \t<meta charset=\"utf-8\" />  \t<title>Aster Secure</title>  \t<style type=\"text/css\">#outlook a {    padding: 0;  }      body {    width: 100% !important;    -webkit-text-size-adjust: 100%;    -ms-text-size-adjust: 100%;    margin: 0;    padding: 0;}      .ExternalClass {    width: 100%;  }      .ExternalClass,  .ExternalClass p,  .ExternalClass span,  .ExternalClass font,  .ExternalClass td,  .ExternalClass div {    line-height: 100%;  }      #backgroundTable {    margin: 0;    padding: 0;    width: 100% !important;    line-height: 100% !important;  }  img {    outline: none;    text-decoration: none;    border: none;    -ms-interpolation-mode: bicubic;  }  a img {    border: none;  }  .image_fix {    display: block;  }  p {    margin: 0px 0px !important;  }  table td {    border-collapse: collapse;  }  table {    border-collapse: collapse;    mso-table-lspace: 0pt;    mso-table-rspace: 0pt;  }        table[class=full] {    width: 100%;    clear: both;  }  table[class=spacetable] {    height: 176px;  }  table[class=spacetable1] {    height: 431px;  }  table[class=spacetable2] {    height: 50px;  }  table[class=spacetable3] {    height: 55px;  }  \t  @media only screen and (min-width: 320px) and (max-width: 540px) {      a[href^=\"tel\"],      a[href^=\"sms\"] {          text-decoration: none;          color: #ffffff;                              pointer-events: none;          cursor: default;      }      .mobile_link a[href^=\"tel\"],      .mobile_link a[href^=\"sms\"] {          text-decoration: default;          color: #ffffff !important;          pointer-events: auto;          cursor: default;      }      img[class=logo] {          width: 132px!important;      }      img[class=shop] {          width:53px!important;             text-align: center!important;      }         table[class=innerlayer] {          width: 300px !important;          text-align: center;      }      img[class=spot] {          width: 65px!important;      }      img[class=banner] {          width: 290px !important;          text-align: center;      }      img[class=banner1] {          width: 229px!important;      }      img[class=click] {          width:55px!important;      }      img[class=border] {          width: 290px!important;      }      td[class=txtfont] {          font-size:11px!important;        height:50px!important;          line-height: 15px!important;            }  \t  span[class=txtfont] {          font-size:9px!important;        height:98px!important;          line-height:23px!important;            }       \t td[class=txtfont1] {          font-size:11px!important; height:40px!important;    line-height: 14px!important;      } img[class=left] {          width:195px!important;      } img[class=right] {          width:46px!important;      } \t   \t  td[class=txtfont3] {          font-size:8px!important;}   \ttd[class=txtfont2] {          font-size:6px!important;            line-height:9px!important;              }      td[class=txtbold] {          font-size: 21px!important;      }      img[class=gap] {          width:92px!important;      }      img[class=gap1] {          width: 20px!important;      }      table[class=social] {          width: 99% !important;      }      img[class=fb] {          width:20px!important;      }      img[class=in] {          width:21px!important;      }      img[class=tw] {          width:20px!important;      }      img[class=pin] {          width:41px!important;      }       \t   img[class=and] {          width:81px!important;      }      img[class=my] {          width: 44px!important;      }  \t    img[class=you] {          width:21px!important;      }      img[class=store] {          width:65px!important;      }  \t \t    img[class=snap] {          width:24px!important;                }      td[class=textlen] {          height:52px!important;      }  \ttd[class=tdlen]  \t{  \theight:35px!important;font-size: 10px !important;  \t}    \t\t\timg[class=a] { width: 42px!important; }   \t\t\timg[class=b] { width: 22px!important; }   \t\t\timg[class=c] { width: 72px!important; }   \t\t\timg[class=d] { width: 50px!important; }   \t\t\timg[class=e] { width: 56px!important; }   \t\t\timg[class=f] { width: 56px!important; }   \t\t\t}  \t</style>  </head>  <body><center>\n\t\t\t\t\t\t\t\t\t\tIf you have difficulties viewing this mail, click\n\t\t\t\t\t\t\t\t\t\t<a href=\"https://nightly.capillary.in/business_controller/campaigns/emails/links/view.php?utrack={{user_id_b64}}&mtrack={{outbox_id_b64}}\" style = \"text-decoration: underline;color: #369;\" target=\"_blank\">here</a><br/>\n\t\t\t\t\t\t\t\t\t</center>  <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">  \t<tbody>  \t\t<tr>  \t\t\t<td>  \t\t\t<table align=\"center\" bgcolor=\"#fff\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">  \t\t\t\t<tbody>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">Shop at Aster Pharmacy this month and You could be the next lucky winner!</td>  \t\t\t\t\t</tr>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td><a href=\"#\" style=\"pointer-events:none;\"><CapImage class=\"banner\" src=\"https://s3-eu-west-1.amazonaws.com/fs.capillary.eu/intouch_creative_assets/890bdffee3b2322d8ec7.jpg\" style=\"border:none; display:block\" /></a></td>  \t\t\t\t\t</tr>  \t\t\t\t\t<tr>  \t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">To remove your email address from our mailing list , please click on {{unsubscribe}}</td>  \t\t\t\t\t</tr>  \t\t\t\t</tbody>  \t\t\t</table>  \t\t\t</td>  \t\t</tr>  \t</tbody>  </table>  </body>  </html>  ","is_drag_drop":0,"drag_drop_id":null},"secondary_templates":[{"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":false,"drag_drop_id":null,"scope":null,"tag":null,"is_default":null,"html_content":"<html>\r\n<head>\r\n\t<meta charset=\"utf-8\" />\r\n\t<title>Aster Secure</title>\r\n\t<style type=\"text/css\">#outlook a {    padding: 0;  }      body {    width: 100% !important;    -webkit-text-size-adjust: 100%;    -ms-text-size-adjust: 100%;    margin: 0;    padding: 0;}      .ExternalClass {    width: 100%;  }      .ExternalClass,  .ExternalClass p,  .ExternalClass span,  .ExternalClass font,  .ExternalClass td,  .ExternalClass div {    line-height: 100%;  }      #backgroundTable {    margin: 0;    padding: 0;    width: 100% !important;    line-height: 100% !important;  }  img {    outline: none;    text-decoration: none;    border: none;    -ms-interpolation-mode: bicubic;  }  a img {    border: none;  }  .image_fix {    display: block;  }  p {    margin: 0px 0px !important;  }  table td {    border-collapse: collapse;  }  table {    border-collapse: collapse;    mso-table-lspace: 0pt;    mso-table-rspace: 0pt;  }        table[class=full] {    width: 100%;    clear: both;  }  table[class=spacetable] {    height: 176px;  }  table[class=spacetable1] {    height: 431px;  }  table[class=spacetable2] {    height: 50px;  }  table[class=spacetable3] {    height: 55px;  }  \t  @media only screen and (min-width: 320px) and (max-width: 540px) {      a[href^=\"tel\"],      a[href^=\"sms\"] {          text-decoration: none;          color: #ffffff;                              pointer-events: none;          cursor: default;      }      .mobile_link a[href^=\"tel\"],      .mobile_link a[href^=\"sms\"] {          text-decoration: default;          color: #ffffff !important;          pointer-events: auto;          cursor: default;      }      img[class=logo] {          width: 132px!important;      }      img[class=shop] {          width:53px!important;             text-align: center!important;      }         table[class=innerlayer] {          width: 300px !important;          text-align: center;      }      img[class=spot] {          width: 65px!important;      }      img[class=banner] {          width: 290px !important;          text-align: center;      }      img[class=banner1] {          width: 229px!important;      }      img[class=click] {          width:55px!important;      }      img[class=border] {          width: 290px!important;      }      td[class=txtfont] {          font-size:11px!important;        height:50px!important;          line-height: 15px!important;            }  \t  span[class=txtfont] {          font-size:9px!important;        height:98px!important;          line-height:23px!important;            }       \t td[class=txtfont1] {          font-size:11px!important; height:40px!important;    line-height: 14px!important;      } img[class=left] {          width:195px!important;      } img[class=right] {          width:46px!important;      } \t   \t  td[class=txtfont3] {          font-size:8px!important;}   \ttd[class=txtfont2] {          font-size:6px!important;            line-height:9px!important;              }      td[class=txtbold] {          font-size: 21px!important;      }      img[class=gap] {          width:92px!important;      }      img[class=gap1] {          width: 20px!important;      }      table[class=social] {          width: 99% !important;      }      img[class=fb] {          width:20px!important;      }      img[class=in] {          width:21px!important;      }      img[class=tw] {          width:20px!important;      }      img[class=pin] {          width:41px!important;      }       \t   img[class=and] {          width:81px!important;      }      img[class=my] {          width: 44px!important;      }  \t    img[class=you] {          width:21px!important;      }      img[class=store] {          width:65px!important;      }  \t \t    img[class=snap] {          width:24px!important;                }      td[class=textlen] {          height:52px!important;      }  \ttd[class=tdlen]  \t{  \theight:35px!important;font-size: 10px !important;  \t}    \t\t\timg[class=a] { width: 42px!important; }   \t\t\timg[class=b] { width: 22px!important; }   \t\t\timg[class=c] { width: 72px!important; }   \t\t\timg[class=d] { width: 50px!important; }   \t\t\timg[class=e] { width: 56px!important; }   \t\t\timg[class=f] { width: 56px!important; }   \t\t\t}\r\n\t</style>\r\n</head>\r\n<body>\r\n<table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">\r\n\t<tbody>\r\n\t\t<tr>\r\n\t\t\t<td>\r\n\t\t\t<table align=\"center\" bgcolor=\"#fff\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"outerlayer\" style=\"width:650px\">\r\n\t\t\t\t<tbody>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">Shop at Aster Pharmacy this month and You could be the next lucky winner!</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td><a href=\"#\" style=\"pointer-events:none;\"><CapImage class=\"banner\" src=\"https://s3-eu-west-1.amazonaws.com/fs.capillary.eu/intouch_creative_assets/890bdffee3b2322d8ec7.jpg\" style=\"border:none; display:block\" /></a></td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td class=\"txtfont2\" height=\"40\" style=\"font-family: Verdana, Geneva, sans-serif; text-align:center; font-size:11px; color:gray;  line-height:13px;\" width=\"600\">To remove your email address from our mailing list , please click on {{unsubscribe}}</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t</tbody>\r\n\t\t\t</table>\r\n\t\t\t</td>\r\n\t\t</tr>\r\n\t</tbody>\r\n</table>\r\n</body>\r\n</html>\r\n","secondary_template_id":"9584","is_base_template":1,"language_name":"English","language":"English","lang_id":"69"}, {"is_preview_generated":null,"preview_url":null,"is_favourite":null,"is_drag_drop":1,"drag_drop_id":"55acf47048a85bbf7681a35a","scope":null,"tag":null,"is_default":null,"html_content":"","secondary_template_id":"9500","is_base_template":0,"language_name":"Japanese","language":"Japanese","lang_id":"100"}]};
 
     if (data && data.edit) {
       // const formData = {'0': {}};
@@ -2678,7 +2713,24 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       formData[0][selectedLanguages[0]]['template-content'];
     const previewSubject = formData['template-subject'];
     const testOrPreviewProps = {channel: EMAIL, content: previewContent, subject: previewSubject};
-    const { onPreviewContentClicked, onTestContentClicked } = this.props;
+    
+    // Call our handler instead of the props methods to set the flag
+    const handleClick = () => {
+      console.log('🖱️ Button clicked - action:', action);
+      if (action === 'TEST') {
+        console.log('🔓 TEST button clicked - calling handleTestAndPreview');
+        // For test action, open our Test & Preview slidebox
+        this.handleTestAndPreview();
+      } else {
+        console.log('👁️ PREVIEW button clicked - calling onPreviewContentClicked');
+        // For preview action, call the original method
+        const { onPreviewContentClicked } = this.props;
+        if (onPreviewContentClicked) {
+          onPreviewContentClicked(testOrPreviewProps);
+        }
+      }
+    };
+    
     return (
       <CapButton
         style={{
@@ -2687,7 +2739,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           padding: '0 6px',
         }}
         type="flat"
-        onClick={() => action === 'PREVIEW' ? onPreviewContentClicked(testOrPreviewProps) : onTestContentClicked(testOrPreviewProps)}
+        onClick={handleClick}
       >
         <CapIcon type={action === 'PREVIEW' ? "eye" : "lab"}/>
         {action === 'PREVIEW' ? <FormattedMessage {...messages.preview} /> : <FormattedMessage {...messages.testMessage} />}
@@ -2715,10 +2767,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         content: html // Keep latest content in state
       };
     }, () => {
-      // Always trigger validation to ensure content is saved
+              // Only trigger validation if we're not in Test & Preview mode
+        if (!this.props.isTestAndPreviewMode) {
       this.setState({
         startValidation: true
       });
+        }
     });
   }
 
@@ -2741,6 +2795,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     }
     const { showImageSelectionBox = false } = this.state;
     const showTestAndPreview = !showImageSelectionBox && getDefaultTags === 'outbound';
+    console.log('🔍 showTestAndPreview conditions:', {
+      showImageSelectionBox,
+      getDefaultTags,
+      showTestAndPreview
+    });
     return (
       <div className="email-container">
         <CapSpin spinning={isLoading}>
@@ -2804,6 +2863,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   eventContextTags={this.props?.eventContextTags}
                   forwardedTags={this.props?.forwardedTags}
                   isLoyaltyModule={this.props?.isLoyaltyModule}
+                  isTestAndPreviewMode={this.state.isTestAndPreviewMode} // Add flag to prevent validation
               /> : ''}
             </Col>
           </Row>
@@ -2833,10 +2893,37 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           beeInstance={this.beeInstance}
           content={testAndPreviewContent}
           currentChannel={EMAIL}
+          currentTab={this.state.currentTab}
         />
       </div>
     );
   }
+
+  handleCloseTestAndPreview = () => {
+    console.log('🔒 Closing Test & Preview - setting isTestAndPreviewMode to false');
+    this.setState({ 
+      showTestAndPreviewSlidebox: false,
+      isTestAndPreviewMode: false // Reset flag when closing
+    });
+  }
+
+  handleTestAndPreview = () => {
+    console.log('🔓 handleTestAndPreview called - current isTestAndPreviewMode:', this.state.isTestAndPreviewMode);
+    console.log('🔓 Setting isTestAndPreviewMode to true and opening slidebox');
+    this.setState({ 
+      showTestAndPreviewSlidebox: true,
+      isTestAndPreviewMode: true // Set flag to prevent validation
+    }, () => {
+      console.log('🔓 State updated - new isTestAndPreviewMode:', this.state.isTestAndPreviewMode);
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    // Debug flag changes
+    if (prevState.isTestAndPreviewMode !== this.state.isTestAndPreviewMode) {
+      console.log('🔄 isTestAndPreviewMode changed from', prevState.isTestAndPreviewMode, 'to', this.state.isTestAndPreviewMode);
+    }
+  }
 }
 
 Email.propTypes = {

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -55,6 +55,7 @@ const useEmailWrapper = ({
   showTestAndPreviewSlidebox,
   handleTestAndPreview,
   handleCloseTestAndPreview,
+  isTestAndPreviewMode,
 }) => {
   // State management
   const [templateName, setTemplateName] = useState('');
@@ -299,6 +300,7 @@ const useEmailWrapper = ({
     showTestAndPreviewSlidebox,
     handleTestAndPreview,
     handleCloseTestAndPreview,
+    isTestAndPreviewMode,
   }), [
     setIsLoadingContent,
     routeParams,
@@ -322,6 +324,7 @@ const useEmailWrapper = ({
     showTestAndPreviewSlidebox,
     handleTestAndPreview,
     handleCloseTestAndPreview,
+    isTestAndPreviewMode,
   ]);
 
   // Prepare props for CmsTemplatesComponent

package/v2Containers/EmailWrapper/index.js

@@ -61,6 +61,7 @@ const EmailWrapper = (props) => {
     showTestAndPreviewSlidebox,
     handleTestAndPreview,
     handleCloseTestAndPreview,
+    isTestAndPreviewMode,
   } = props;
 
   // Pass destructured props to the custom hook
@@ -113,6 +114,7 @@ const EmailWrapper = (props) => {
     showTestAndPreviewSlidebox,
     handleTestAndPreview,
     handleCloseTestAndPreview,
+    isTestAndPreviewMode,
   });
 
   // Render using the presentation component with data from the hook
@@ -174,6 +176,10 @@ EmailWrapper.propTypes = {
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
   editor: PropTypes.object,
+  showTestAndPreviewSlidebox: PropTypes.bool,
+  handleTestAndPreview: PropTypes.func,
+  handleCloseTestAndPreview: PropTypes.func,
+  isTestAndPreviewMode: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({