@capillarytech/creatives-library 8.0.299-alpha.3 → 8.0.299-alpha.4

package/package.json

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

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -10,6 +10,13 @@
   z-index: 10000 !important;
 }
 
+/* Notifications rendered inside slidebox (getContainer) so they appear in campaigns/library mode */
+.common-test-and-preview-notification-container {
+  .ant-notification {
+    z-index: 10001;
+  }
+}
+
 /* Lookup spinner overlay above test-customers dropdown. */
 .common-test-preview-lookup-spin {
   position: relative;
@@ -199,6 +206,7 @@
 
   .left-panel {
     width: 40%;
+    min-width: 20rem; /* Consistent width in campaigns/library mode so test customer dropdown matches creatives */
     padding-right: 1rem;
     border-right: $CAP_SPACE_01 solid $CAP_G12;
     overflow-y: auto;
@@ -515,6 +523,7 @@
     }
     .test-customers-tree-select {
       width: 100%;
+      min-width: 18rem; /* Consistent dropdown width in campaigns and creatives */
       min-height: $CAP_SPACE_40;
       margin: $CAP_SPACE_12 0 $CAP_SPACE_08;
       .ant-select-selection,
@@ -535,7 +544,9 @@
 }
 
 // Test customers TreeSelect dropdown: limit height and make scrollable (dropdown renders in portal)
+// min-width so dropdown looks the same in campaigns and creatives
 .test-customers-tree-select-dropdown {
+  min-width: 18rem !important;
   max-height: 20rem !important; /* 320px */
   overflow-y: auto !important;
   .ant-select-tree-list-holder-inner {

package/v2Components/CommonTestAndPreview/index.js

@@ -171,6 +171,9 @@ const CommonTestAndPreview = (props) => {
   const [selectedTestEntities, setSelectedTestEntities] = useState([]);
   const [beeContent, setBeeContent] = useState(''); // Track BEE editor content separately (EMAIL only)
   const previousBeeContentRef = useRef(''); // Track previous BEE content (EMAIL only)
+  // Container for notifications so they render inside the slidebox (visible in campaigns/library mode)
+  const notificationContainerRef = useRef(null);
+  const getNotificationContainer = () => notificationContainerRef.current || document.body;
   // Delivery settings for Test and Preview (SMS, Email, WhatsApp) — user selection only
   const [testPreviewDeliverySettings, setTestPreviewDeliverySettings] = useState({
     [CHANNELS.SMS]: {
@@ -444,6 +447,7 @@ const CommonTestAndPreview = (props) => {
         if (response && response.success) {
           CapNotification.success({
             message: formatMessage(messages.newTestCustomerAddedSuccess),
+            getContainer: getNotificationContainer,
           });
           // API may return customerId in response.response (e.g. { response: { customerId: 438845651 } })
           const res = response?.response || response;
@@ -466,6 +470,7 @@ const CommonTestAndPreview = (props) => {
           CapNotification.error({
             message: formatMessage(messages.errorTitle),
             description: response?.message || formatMessage(messages.failedToAddTestCustomer),
+            getContainer: getNotificationContainer,
           });
         }
     } catch (error) {
@@ -474,6 +479,7 @@ const CommonTestAndPreview = (props) => {
         CapNotification.error({
           message: formatMessage(messages.errorTitle),
           description: error?.message || formatMessage(messages.errorAddingTestCustomer),
+          getContainer: getNotificationContainer,
         });
       }
     } finally {
@@ -2522,6 +2528,7 @@ const CommonTestAndPreview = (props) => {
     } catch (error) {
       CapNotification.error({
         message: formatMessage(messages.invalidJSON),
+        getContainer: getNotificationContainer,
       });
     }
   };
@@ -2568,6 +2575,7 @@ const CommonTestAndPreview = (props) => {
     } catch (error) {
       CapNotification.error({
         message: formatMessage(messages.previewUpdateError),
+        getContainer: getNotificationContainer,
       });
     }
   };
@@ -2661,6 +2669,7 @@ const CommonTestAndPreview = (props) => {
       setSearchValue('');
       CapNotification.success({
         message: formatMessage(messages.customerAlreadyInTestList),
+        getContainer: getNotificationContainer,
       });
       return;
     }
@@ -2676,7 +2685,7 @@ const CommonTestAndPreview = (props) => {
 
       if (!success) {
         const errorMessage = response?.message || response?.status?.message || formatMessage(messages.memberLookupError);
-        CapNotification.error({ title: formatMessage(messages.errorTitle), message: errorMessage });
+        CapNotification.error({ title: formatMessage(messages.errorTitle), message: errorMessage, getContainer: getNotificationContainer });
         return;
       }
 
@@ -2693,6 +2702,7 @@ const CommonTestAndPreview = (props) => {
           setSearchValue('');
           CapNotification.success({
             message: formatMessage(messages.customerAlreadyInTestList),
+            getContainer: getNotificationContainer,
           });
           return;
         }
@@ -2710,6 +2720,7 @@ const CommonTestAndPreview = (props) => {
     } catch {
       CapNotification.error({
         message: formatMessage(messages.memberLookupError),
+        getContainer: getNotificationContainer,
       });
     } finally {
       setIsCustomerDataLoading(false);
@@ -2762,10 +2773,12 @@ const CommonTestAndPreview = (props) => {
           if (result) {
             CapNotification.success({
               message: formatMessage(messages.testMessageSent),
+              getContainer: getNotificationContainer,
             });
           } else {
             CapNotification.error({
               message: formatMessage(messages.testMessageFailed),
+              getContainer: getNotificationContainer,
             });
           }
         });
@@ -2887,6 +2900,7 @@ const CommonTestAndPreview = (props) => {
       show={show}
       size="size-xl"
       content={(
+        <div ref={notificationContainerRef} className="common-test-and-preview-notification-container" style={{ position: 'relative', height: '100%' }}>
         <CapSpin
           spinning={isCustomerDataLoading}
           className={`common-test-preview-lookup-spin ${isCustomerDataLoading ? 'common-test-preview-customer-loading' : ''}`}
@@ -2933,6 +2947,7 @@ const CommonTestAndPreview = (props) => {
           )}
           </CapRow>
         </CapSpin>
+        </div>
       )}
     />
   );