@capillarytech/creatives-library 8.0.164 → 8.0.166

package/package.json

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

package/v2Components/NavigationBar/saga.js

@@ -6,13 +6,15 @@ export default [
   {
     key: 'navigation',
     saga: function* navigationConfigSaga() {
-      yield all(CapCollapsibleLeftNavigationSagas.map(saga => saga.call()));
+      yield all(CapCollapsibleLeftNavigationSagas.map((saga) => saga.call()));
     },
   },
   {
     key: 'analyticsBotSaga',
     saga: function* analyticsBotSagaFn() {
-      yield all(analyticsBotSaga.map(saga => saga.call()));
+      if (analyticsBotSaga && Array.isArray(analyticsBotSaga)) {
+        yield all(analyticsBotSaga.map((saga) => saga.call()));
+      }
     },
   },
 ];

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

@@ -1,34 +1,78 @@
 import { expectSaga } from "redux-saga-test-plan";
-import rootSagas from "../saga";
 import * as matchers from "redux-saga-test-plan/matchers";
 import CapCollapsibleLeftNavigationSagas from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/saga';
-import { analyticsBotSaga } from "@capillarytech/cap-ui-library/CapAskAira";
+
+import rootSagas from "../saga";
+
+// Mock the analyticsBotSaga module
+jest.mock('@capillarytech/cap-ui-library/CapAskAira', () => ({
+  analyticsBotSaga: [
+    {
+      * call() { yield true; },
+    },
+    {
+      * call() { yield true; },
+    },
+  ],
+}));
 
 describe("analyticsBotSagaFn", () => {
-  test.concurrent("should call all analytics bot sagas", () => {
-    const { saga: analyticsBotSagaFn } = rootSagas.find(
-      s => s.key === "analyticsBotSaga"
-    );
+  const { saga: analyticsBotSagaFn } = rootSagas.find(
+    (s) => s.key === "analyticsBotSaga"
+  );
+
+  test.concurrent("should handle when analyticsBotSaga is valid array", () => {
+    // Mock module with valid array
+    jest.mock('@capillarytech/cap-ui-library/CapAskAira', () => ({
+      analyticsBotSaga: [
+        {
+          * call() { yield true; },
+        },
+        {
+          * call() { yield true; },
+        },
+      ],
+    }));
+
     return expectSaga(analyticsBotSagaFn)
       .provide([
-        [matchers.call.fn(analyticsBotSaga[0]), undefined],
-        [matchers.call.fn(analyticsBotSaga[1]), undefined]
+        [matchers.call.fn(() => {}), undefined],
       ])
       .run();
   });
+
+  test.concurrent("should handle when analyticsBotSaga is undefined", () => {
+    // Mock module with undefined analyticsBotSaga
+    jest.mock('@capillarytech/cap-ui-library/CapAskAira', () => ({
+      analyticsBotSaga: undefined,
+    }));
+
+    return expectSaga(analyticsBotSagaFn)
+      .run();
+  });
+
+  test.concurrent("should handle when analyticsBotSaga is not an array", () => {
+    // Mock module with non-array analyticsBotSaga
+    jest.mock('@capillarytech/cap-ui-library/CapAskAira', () => ({
+      analyticsBotSaga: {},
+    }));
+
+    return expectSaga(analyticsBotSagaFn)
+      .run();
+  });
 });
 
 describe("navigationConfigSaga", () => {
-    it.concurrent("should call all analytics bot sagas", () => {
-      const { saga: navigationConfigSaga } = rootSagas.find(
-        s => s.key === "navigation"
-      );
-  
-      return expectSaga(navigationConfigSaga)
-        .provide([
-          [matchers.call.fn(CapCollapsibleLeftNavigationSagas[0]), undefined],
-          [matchers.call.fn(CapCollapsibleLeftNavigationSagas[1]), undefined]
-        ])
-        .run();
-    });
+  it.concurrent("should call all analytics bot sagas", () => {
+    const { saga: navigationConfigSaga } = rootSagas.find(
+      (s) => s.key === "navigation"
+    );
+
+    return expectSaga(navigationConfigSaga)
+      .provide([
+        [matchers.call.fn(CapCollapsibleLeftNavigationSagas[0]), undefined],
+        [matchers.call.fn(CapCollapsibleLeftNavigationSagas[1]), undefined],
+      ])
+      .run();
   });
+});

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -179,7 +179,7 @@ const TestAndPreviewSlidebox = (props) => {
               resolvedTitle: formData['template-subject'] || ''
             });
 
-            // Extract tags with latest content
+            // Always extract tags when content changes
             const payloadContent = convert(htmlFile, GLOBAL_CONVERT_OPTIONS);
             actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
           }
@@ -202,7 +202,7 @@ const TestAndPreviewSlidebox = (props) => {
             resolvedTitle: formData['template-subject'] || ''
           });
 
-          // Extract tags with initial content
+          // Always extract tags when showing
           const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
           actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
         } else {
@@ -211,6 +211,7 @@ const TestAndPreviewSlidebox = (props) => {
             getCurrentContent,
             GLOBAL_CONVERT_OPTIONS
           );
+          // Always extract tags when showing
           actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
         }
       }
@@ -228,31 +229,30 @@ const TestAndPreviewSlidebox = (props) => {
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
     
     if (templateContent && templateContent.trim() !== '') {
+      // Common function to handle content update
+      const handleContentUpdate = (content) => {
+        setPreviewDataHtml({
+          resolvedBody: content,
+          resolvedTitle: formData['template-subject'] || ''
+        });
+
+        // Extract tags from content
+        const payloadContent = convert(content, GLOBAL_CONVERT_OPTIONS);
+        actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+      };
+
       if (isDragDrop) {
-        // For Bee editor, update both preview and extract tags
+        // For Bee editor, update preview
         if (templateContent !== previousBeeContentRef.current) {
-
           previousBeeContentRef.current = templateContent;
           setBeeContent(templateContent);
-          setPreviewDataHtml({
-            resolvedBody: templateContent,
-            resolvedTitle: formData['template-subject'] || ''
-          });
-
-          // Extract tags with latest content
-          const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
-          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+          handleContentUpdate(templateContent);
         }
       } else {
-        // For CKEditor, always update preview and extract tags with latest content
-        setPreviewDataHtml({
-          resolvedBody: templateContent,
-          resolvedTitle: formData['template-subject'] || ''
-        });
-
-        // Extract tags with latest content
-        const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
-        actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+        // For CKEditor, only update if content changed
+        if (templateContent !== previewDataHtml?.resolvedBody) {
+          handleContentUpdate(templateContent);
+        }
       }
     }
   }, [formData, currentTab]);
@@ -260,9 +260,19 @@ const TestAndPreviewSlidebox = (props) => {
   // Cleanup effect to reset ref when slidebox closes
   useEffect(() => {
     if (!show) {
+      // Reset all state
       previousBeeContentRef.current = '';
       setBeeContent('');
       setPreviewDataHtml('');
+      setSelectedCustomer(null);
+      setRequiredTags([]);
+      setOptionalTags([]);
+      setCustomValues({});
+      setShowJSON(false);
+      setTagsExtracted(false);
+      setPreviewDevice('desktop');
+      setSelectedTestEntities([]);
+      actions.clearPrefilledValues();
     }
   }, [show]);
 
@@ -274,14 +284,22 @@ const TestAndPreviewSlidebox = (props) => {
 
   // Listen for extract tags API result
   useEffect(() => {
-    if (extractedTags?.length > 0) {
-      // Categorize tags into required and optional
-      const required = [];
-      const optional = [];
+    // Categorize tags into required and optional
+    const required = [];
+    const optional = [];
+    let hasPersonalizationTags = false;
 
+    if (extractedTags?.length > 0) {
       const processTag = (tag, parentPath = '') => {
         const currentPath = parentPath ? `${parentPath}.${tag.name}` : tag.name;
 
+        // Skip unsubscribe tag for input fields
+        if (tag?.name === 'unsubscribe') {
+          return;
+        }
+
+        hasPersonalizationTags = true;
+
         if (tag?.metaData?.userDriven === false) {
           required.push({
             ...tag,
@@ -301,43 +319,75 @@ const TestAndPreviewSlidebox = (props) => {
 
       extractedTags.forEach((tag) => processTag(tag));
 
-      setRequiredTags(required);
-      setOptionalTags(optional);
+      if (hasPersonalizationTags) {
+        setRequiredTags(required);
+        setOptionalTags(optional);
 
-      // Initialize custom values for required tags
-      const initialValues = {};
-      required.forEach((tag) => {
-        initialValues[tag.fullPath] = '';
-      });
-      optional.forEach((tag) => {
-        initialValues[tag.fullPath] = '';
-      });
-      setCustomValues(initialValues);
+        // Initialize custom values for required tags
+        const initialValues = {};
+        required.forEach((tag) => {
+          initialValues[tag?.fullPath] = '';
+        });
+        optional.forEach((tag) => {
+          initialValues[tag?.fullPath] = '';
+        });
+        setCustomValues(initialValues);
+      } else {
+        // Reset all tag-related state if no personalization tags
+        setRequiredTags([]);
+        setOptionalTags([]);
+        setCustomValues({});
+        setTagsExtracted(false);
+      }
+    } else {
+      // Reset all tag-related state if no tags
+      setRequiredTags([]);
+      setOptionalTags([]);
+      setCustomValues({});
+      setTagsExtracted(false);
     }
   }, [extractedTags]);
 
   useEffect(() => {
-    if (tagsExtracted && selectedCustomer) {
-      const userDrivenTags = optionalTags?.map((tag) => tag.name);
-      if (userDrivenTags?.length > 0) {
+    if (selectedCustomer) {
+      setTagsExtracted(true); // Auto-open custom values editor
+      
+      // Get all available tags
+      const allTags = [...requiredTags, ...optionalTags];
+      
+      if (allTags.length > 0) {
         const payload = {
           channel: EMAIL,
           messageTitle: formData['template-subject'],
-          messageBody: content,
-          resolvedTags: customValues,
+          messageBody: getCurrentContent,
+          resolvedTags: {},
           userId: selectedCustomer?.customerId,
         };
         actions.getPrefilledValuesRequested(payload);
       }
     }
-  }, [selectedCustomer, tagsExtracted]);
+  }, [selectedCustomer]);
 
   useEffect(() => {
-    if (prefilledValues && !isEmpty(prefilledValues)) {
-      setCustomValues((prev) => ({
-        ...prev,
-        ...prefilledValues,
-      }));
+    if (prefilledValues) {
+      // Always replace all values with prefilled values
+      const updatedValues = {};
+      [...requiredTags, ...optionalTags].forEach((tag) => {
+        updatedValues[tag?.fullPath] = prefilledValues[tag?.fullPath] || '';
+      });
+
+      
+      setCustomValues(updatedValues);
+
+      // Update preview with prefilled values
+      const payload = {
+        channel: EMAIL,
+        messageTitle: formData['template-subject'],
+        messageBody: getCurrentContent,
+        resolvedTags: updatedValues,
+        userId: selectedCustomer?.customerId,
+      };
+      actions.updatePreviewRequested(payload);
     }
   }, [JSON.stringify(prefilledValues)]);
 
@@ -371,7 +421,13 @@ const TestAndPreviewSlidebox = (props) => {
     setPreviewDevice('desktop');
     setPreviewDataHtml('');
     setSelectedTestEntities([]);
+    setBeeContent('');
+    previousBeeContentRef.current = '';
+    
+    // Clear any pending actions
     actions.clearPrefilledValues();
+    
+    // Call parent's onClose if provided
     if (onClose) {
       onClose();
     }
@@ -384,24 +440,35 @@ const TestAndPreviewSlidebox = (props) => {
   // Handle customer selection from CustomerSearchSection
   const handleCustomerSelect = (customer) => {
     setSelectedCustomer(customer);
-    setCustomValues((prev) => {
-      const newValues = { ...prev };
-      optionalTags.forEach((tag) => {
-        delete newValues[tag.fullPath];
-      });
-      return newValues;
+    setTagsExtracted(true); // Auto-open custom values editor
+    
+    // Clear any existing values while waiting for prefilled values
+    const emptyValues = {};
+    [...requiredTags, ...optionalTags].forEach((tag) => {
+      emptyValues[tag?.fullPath] = '';
     });
+    setCustomValues(emptyValues);
   };
 
   const handleClearSelection = () => {
     setSelectedCustomer(null);
-    setCustomValues((prev) => {
-      const newValues = { ...prev };
-      optionalTags.forEach((tag) => {
-        delete newValues[tag.fullPath];
-      });
-      return newValues;
+    
+    // Initialize empty values for all tags
+    const emptyValues = {};
+    [...requiredTags, ...optionalTags].forEach((tag) => {
+      emptyValues[tag?.fullPath] = '';
     });
+    setCustomValues(emptyValues);
+
+    // Update preview with empty values
+    const payload = {
+      channel: EMAIL,
+      messageTitle: formData['template-subject'],
+      messageBody: getCurrentContent,
+      resolvedTags: emptyValues,
+      userId: null,
+    };
+    actions.updatePreviewRequested(payload);
   };
 
   // Handle custom value changes
@@ -426,63 +493,38 @@ const TestAndPreviewSlidebox = (props) => {
 
   // Handle discard custom values
   const handleDiscardCustomValues = () => {
-    const resetValues = {};
-    requiredTags.forEach((tag) => {
-      resetValues[tag?.fullPath] = '';
+    // Initialize empty values for all tags
+    const emptyValues = {};
+    [...requiredTags, ...optionalTags].forEach((tag) => {
+      emptyValues[tag?.fullPath] = '';
     });
-    optionalTags.forEach((tag) => {
-      resetValues[tag?.fullPath] = '';
-    });
-    setCustomValues(resetValues);
+    setCustomValues(emptyValues);
+
+    // Update preview with empty values
+    const payload = {
+      channel: EMAIL,
+      messageTitle: formData['template-subject'],
+      messageBody: getCurrentContent,
+      resolvedTags: emptyValues,
+      userId: selectedCustomer?.customerId,
+    };
+    actions.updatePreviewRequested(payload);
   };
 
   // Handle update preview
   const handleUpdatePreview = async () => {
     try {
-      // Store current values to prevent loss during update
-      const currentCustomValues = { ...customValues };
-      
-      const currentTabData = formData[currentTab - 1];
-      const activeTab = currentTabData?.activeTab;
-      const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
-
-      // For BEE editor, ensure content is saved first
-      if (isDragDrop && beeInstance) {
-        // Trigger save to ensure latest content
-        beeInstance.save();
-
-        // Wait a bit for save to complete and formData to update
-        await new Promise((resolve) => setTimeout(resolve, 500));
-
-        // Get latest content from formData
-        const updatedContent = formData[currentTab - 1]?.[activeTab]?.['template-content'];
-        const payload = {
-          channel: EMAIL,
-          messageTitle: formData['template-subject'],
-          messageBody: updatedContent || getCurrentContent,
-          resolvedTags: currentCustomValues, // Use stored values
-          userId: selectedCustomer?.customerId,
-        };
+      // Include unsubscribe tag if content contains it
+      const resolvedTags = { ...customValues };
 
-        await actions.updatePreviewRequested(payload);
-        return;
-      }
-
-      // For CKEditor, get latest content directly from formData
-      const templateContent = currentTabData?.[activeTab]?.['template-content'];
-      if (templateContent) {
-        // Create payload for CKEditor preview update
-        const payload = {
-          channel: EMAIL,
-          messageTitle: formData['template-subject'],
-          messageBody: templateContent,
-          resolvedTags: currentCustomValues,
-          userId: selectedCustomer?.customerId,
-        };
-
-        // Use the same update preview action for both editors
-        await actions.updatePreviewRequested(payload);
-      }
+      const payload = {
+        channel: EMAIL,
+        messageTitle: formData['template-subject'],
+        messageBody: getCurrentContent,
+        resolvedTags,
+        userId: selectedCustomer?.customerId,
+      };
+      await actions.updatePreviewRequested(payload);
     } catch (error) {
       console.error('Error updating preview:', error);
       CapNotification.error({
@@ -493,7 +535,34 @@ const TestAndPreviewSlidebox = (props) => {
 
   // Handle extract tags button click
   const handleExtractTags = () => {
+    // Extract tags from current content
+    const currentTabData = formData[currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+    const templateContent = currentTabData?.[activeTab]?.['template-content'];
+    
+    // Check for personalization tags (excluding unsubscribe)
+    const content = templateContent || getCurrentContent;
+    const tags = content.match(/{{[^}]+}}/g) || [];
+    const hasPersonalizationTags = tags.some(tag => !tag.includes('unsubscribe'));
+    
+    if (!hasPersonalizationTags && tags.length === 1 && tags[0].includes('unsubscribe')) {
+      // If only unsubscribe tag is present, show noTagsExtracted message
+      setTagsExtracted(false);
+      setRequiredTags([]);
+      setOptionalTags([]);
+      setCustomValues({});
+      return;
+    }
+    
+    // Extract tags
     setTagsExtracted(true);
+    if (templateContent) {
+      const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
+      actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+    } else {
+      const payloadContent = convert(getCurrentContent, GLOBAL_CONVERT_OPTIONS);
+      actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+    }
   };
 
   const handleTestEntitiesChange = (value) => {

package/v2Containers/Email/index.js

@@ -2696,19 +2696,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const previewSubject = formData['template-subject'];
     const testOrPreviewProps = {channel: EMAIL, content: previewContent, subject: previewSubject};
     
-    // Call our handler instead of the props methods to set the flag
-    const handleClick = () => {
-      if (action === 'TEST') {
-        // For test action, open our Test & Preview slidebox
-        this.handleTestAndPreview();
-      } else {
-        // For preview action, call the original method
-        const { onPreviewContentClicked } = this.props;
-        if (onPreviewContentClicked) {
-          onPreviewContentClicked(testOrPreviewProps);
-        }
-      }
-    };
+    const { onPreviewContentClicked, onTestContentClicked } = this.props;
     
     return (
       <CapButton
@@ -2718,7 +2706,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           padding: '0 6px',
         }}
         type="flat"
-        onClick={handleClick}
+        onClick={() => action === 'PREVIEW' ? onPreviewContentClicked(testOrPreviewProps) : onTestContentClicked(testOrPreviewProps)}
       >
         <CapIcon type={action === 'PREVIEW' ? "eye" : "lab"}/>
         {action === 'PREVIEW' ? <FormattedMessage {...messages.preview} /> : <FormattedMessage {...messages.testMessage} />}
@@ -2773,7 +2761,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       tags = this.props.supportedTags;
     }
     const { showImageSelectionBox = false } = this.state;
-    const showTestAndPreview = !showImageSelectionBox && getDefaultTags === 'outbound';
+     const showTestAndPreview = !showImageSelectionBox && getDefaultTags === 'outbound' && !this.props.showTestAndPreviewSlidebox;
     return (
       <div className="email-container">
         <CapSpin spinning={isLoading}>