@capillarytech/creatives-library 8.0.328 → 8.0.329

package/v2Components/CommonTestAndPreview/SendTestMessage.js

@@ -25,6 +25,9 @@ const SendTestMessage = ({
   channel,
   isSendingTestMessage,
   formatMessage,
+  renderAddTestCustomerButton,
+  searchValue,
+  setSearchValue,
   deliverySettings,
   senderDetailsByChannel = {},
   wecrmAccounts,
@@ -33,59 +36,78 @@ const SendTestMessage = ({
   smsTraiDltEnabled,
   registeredSenderIds,
   isChannelSmsFallbackPreviewEnabled,
-}) => (
-  <CapStepsAccordian
-    showNumberSteps={false}
-    isChevronIcon
-    expandIconPosition="right"
-    items={[
-      {
-        header: <CapHeader
-          size="regular"
-          description={<FormattedMessage {...messages.testMessageDescription} />}
-          title={<FormattedMessage {...messages.sendTestMessage} />}
-        />,
-        content: (
-          <CapRow className="send-test-content">
-            <CapHeader size="label1" title={<FormattedMessage {...messages.testCustomers} />} />
-            <CapTreeSelect
-              className="test-customers-tree-select"
-              loading={isFetchingTestCustomers || isFetchingTestGroups}
-              treeData={testEntitiesTreeData}
-              onChange={handleTestEntitiesChange}
-              value={selectedTestEntities}
-              multiple
-              placeholder={formatMessage(messages.testCustomersPlaceholder)}
-              getPopupContainer={(triggerNode) => triggerNode.parentNode}
+}) => {
+  const addCustomerContent = renderAddTestCustomerButton ? renderAddTestCustomerButton() : null;
+  return (
+    <CapStepsAccordian
+      showNumberSteps={false}
+      isChevronIcon
+      expandIconPosition="right"
+      items={[
+        {
+          header: (
+            <CapHeader
+              size="regular"
+              description={<FormattedMessage {...messages.testMessageDescription} />}
+              title={<FormattedMessage {...messages.sendTestMessage} />}
             />
-            {CHANNELS_WITH_DELIVERY_SETTINGS.includes(channel) && (
-              <DeliverySettings
-                channel={channel}
-                deliverySettings={deliverySettings || {}}
-                senderDetailsByChannel={senderDetailsByChannel}
-                wecrmAccounts={wecrmAccounts || []}
-                onSaveDeliverySettings={onSaveDeliverySettings}
-                isLoadingSenderDetails={isLoadingSenderDetails}
-                formatMessage={formatMessage}
-                smsTraiDltEnabled={smsTraiDltEnabled}
-                registeredSenderIds={registeredSenderIds}
-                isChannelSmsFallbackPreviewEnabled={isChannelSmsFallbackPreviewEnabled}
-                whatsappAccountFromForm={
-                  channel === CHANNELS.WHATSAPP && formData?.accountName
-                    ? { accountName: formData.accountName }
-                    : undefined
-                }
+          ),
+          content: (
+            <CapRow className="send-test-content">
+              <CapHeader size="label1" title={<FormattedMessage {...messages.testCustomers} />} />
+              <CapTreeSelect
+                className="test-customers-tree-select"
+                dropdownMatchSelectWidth
+                dropdownClassName="test-customers-tree-select-dropdown"
+                listHeight={280}
+                loading={isFetchingTestCustomers || isFetchingTestGroups}
+                treeData={testEntitiesTreeData}
+                onChange={handleTestEntitiesChange}
+                value={selectedTestEntities}
+                showSearch
+                searchValue={searchValue}
+                onSearch={setSearchValue}
+                treeNodeFilterProp="title"
+                {...(addCustomerContent ? { notFoundContent: addCustomerContent } : {})}
+                multiple
+                placeholder={formatMessage(messages.testCustomersPlaceholder)}
+                dropdownStyle={{ zIndex: 900, maxHeight: 320 }}
+                placement="bottomLeft"
+                getPopupContainer={(node) => node.closest('.send-test-section') || document.body}
               />
-            )}
-            <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || isSendingTestMessage}>
-              <FormattedMessage {...messages.sendTestButton} />
-            </CapButton>
-          </CapRow>),
-        key: 1,
-      },
-    ]}
-  />
-);
+              {CHANNELS_WITH_DELIVERY_SETTINGS.includes(channel) && (
+                <DeliverySettings
+                  channel={channel}
+                  deliverySettings={deliverySettings || {}}
+                  senderDetailsByChannel={senderDetailsByChannel}
+                  wecrmAccounts={wecrmAccounts || []}
+                  onSaveDeliverySettings={onSaveDeliverySettings}
+                  isLoadingSenderDetails={isLoadingSenderDetails}
+                  formatMessage={formatMessage}
+                  smsTraiDltEnabled={smsTraiDltEnabled}
+                  registeredSenderIds={registeredSenderIds}
+                  isChannelSmsFallbackPreviewEnabled={isChannelSmsFallbackPreviewEnabled}
+                  whatsappAccountFromForm={
+                    channel === CHANNELS.WHATSAPP && formData?.accountName
+                      ? { accountName: formData.accountName }
+                      : undefined
+                  }
+                />
+              )}
+              <CapButton
+                onClick={handleSendTestMessage}
+                disabled={isEmpty(selectedTestEntities) || isSendingTestMessage}
+              >
+                <FormattedMessage {...messages.sendTestButton} />
+              </CapButton>
+            </CapRow>
+          ),
+          key: 1,
+        },
+      ]}
+    />
+  );
+};
 
 SendTestMessage.propTypes = {
   isFetchingTestCustomers: PropTypes.bool.isRequired,
@@ -98,6 +120,9 @@ SendTestMessage.propTypes = {
   channel: PropTypes.string,
   isSendingTestMessage: PropTypes.bool.isRequired,
   formatMessage: PropTypes.func.isRequired,
+  renderAddTestCustomerButton: PropTypes.func,
+  searchValue: PropTypes.string,
+  setSearchValue: PropTypes.func,
   deliverySettings: PropTypes.object,
   senderDetailsByChannel: PropTypes.object,
   wecrmAccounts: PropTypes.array,
@@ -111,6 +136,9 @@ SendTestMessage.propTypes = {
 SendTestMessage.defaultProps = {
   formData: undefined,
   channel: undefined,
+  renderAddTestCustomerButton: undefined,
+  searchValue: '',
+  setSearchValue: () => {}, // no-op when not provided; required by TreeSelect when showSearch is true
   deliverySettings: {},
   senderDetailsByChannel: {},
   wecrmAccounts: [],

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -5,9 +5,12 @@
  */
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
-  /* All ant overrides scoped under wrapper to avoid affecting other modals. */
+/* All ant overrides scoped under wrapper to avoid affecting other modals. */
 .common-test-preview-modal-wrap {
-  z-index: 10000 !important;
+  z-index: 10000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 /* Lookup spinner overlay above test-customers dropdown. */
@@ -22,19 +25,23 @@
 
 /* When customer lookup is loading, dropdown renders inside .send-test-section; lower it so spinner is on top. */
 .common-test-preview-customer-loading .test-customers-tree-select-dropdown {
-  z-index: 0 !important;
+  z-index: 0;
 }
 
 /* Customer creation modal content – avoid inline styles */
-.common-test-preview-modal {
-  color: $CAP_G01 !important;
-  .ant-modal-content {
-    width: 28.5rem; /* 456px at 16px root */
-  }
+.common-test-preview-modal.common-test-preview-modal {
+  color: $CAP_G01;
+  width: 32.571em;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 32.571em;
+
   .ant-modal-footer {
     text-align: left;
-    margin-left: 0.625rem; /* 10px at 16px root */
-    margin-top: 0.9375rem; /* 15px at 16px root */
+    margin-left: 0.625rem;
+    /* 10px at 16px root */
+    margin-top: 0.9375rem;
+    /* 15px at 16px root */
   }
 
   .customer-creation-modal-row {
@@ -63,22 +70,72 @@
     font-weight: normal;
   }
 
+  /* Input text color and font to match standalone (lib mode can lose host styles) */
   .customer-creation-modal-input {
-    width: 100%;
-    color: $CAP_G01;
+    /* Sizes in em for 14px base: same px as .5rem 2.5rem 1.5rem .875rem at 16px (8px, 40px, 24px, 14px) */
+    .ant-input {
+      color: $CAP_G01;
+      font-size: $FONT_SIZE_M;
+      font-weight: normal;
+      padding: 0.571em;
+      /* 8px */
+      height: 2.857em;
+      /* 40px */
+      line-height: 1.714em;
+      /* 24px */
+    }
+
+    .ant-input:hover,
+    .ant-input:focus {
+      border: 1px solid $CAP_G01;
+    }
 
-    &.has-error {
-      color: $CAP_COLOR_03 !important;
-      .ant-input {
-        border-color: $CAP_COLOR_03 !important;
+    .ant-input::placeholder {
+      color: $CAP_G06;
+    }
+
+    /* Error state: single clean red border, no double line or focus ring */
+    &.has-input-error {
+      .ant-input-affix-wrapper {
+        border: 1px solid $CAP_COLOR_03;
+        border-radius: $CAP_SPACE_04;
+      }
+
+      .ant-input-affix-wrapper:hover,
+      .ant-input-affix-wrapper:focus,
+      .ant-input-affix-wrapper-focused {
+        border: 1px solid $CAP_COLOR_03;
+      }
+
+      .ant-input-affix-wrapper .ant-input {
+        border: none !important;
       }
     }
   }
 
+  /* Error message only – no extra border/line below the input */
   .customer-creation-modal-validation-error {
     color: $CAP_COLOR_03;
     font-size: $FONT_SIZE_S;
     margin-top: $CAP_SPACE_04;
+    border: none;
+    border-top: none;
+    box-shadow: none;
+
+    &::before,
+    &::after {
+      display: none;
+      content: none;
+      border: none;
+    }
+  }
+
+  /* Lookup loading: make Email and Mobile fields look disabled (wrapper-only) */
+  .customer-creation-modal--lookup-loading .customer-creation-modal-row--email .customer-creation-modal-input,
+  .customer-creation-modal--lookup-loading .customer-creation-modal-row--last .customer-creation-modal-input {
+    opacity: 0.65;
+    cursor: not-allowed;
+    background-color: $CAP_G09;
   }
 
   /* Existing customer modal content */
@@ -87,13 +144,17 @@
       margin-bottom: $CAP_SPACE_16;
     }
 
+    .ant-card.cap-card-v2 {
+      border: none
+    }
+
     .ant-card-body {
       padding: 1rem;
+      border-radius: $CAP_SPACE_08;
+      border: $CAP_SPACE_01 solid $CAP_G06;
     }
 
     &-card {
-      border-radius: $CAP_SPACE_08;
-      border: $CAP_SPACE_01 solid $CAP_G06;
       padding: 0;
     }
 
@@ -104,9 +165,11 @@
     }
 
     &-avatar {
-      width: 3rem; /* 48px at 16px root */
+      width: 3rem;
+      /* 48px at 16px root */
       height: 3rem;
-      border-radius: 1.25rem; /* 20px at 16px root */
+      border-radius: 1.25rem;
+      /* 20px at 16px root */
       background-color: $CAP_G07;
       display: flex;
       align-items: center;
@@ -155,9 +218,6 @@
 }
 
 .common-test-and-preview-slidebox {
-  .common-test-preview-modal-wrap {
-    z-index: 10003;
-  }
 
   .ant-modal-mask,
   .ant-modal-wrap {
@@ -200,6 +260,7 @@
 
   .tag-input-field {
     width: 14.714rem;
+
     .input {
       height: $CAP_SPACE_40;
     }
@@ -212,12 +273,16 @@
 
   .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;
+
     .panel-divider {
       margin: 0;
     }
+
     .no-tags-extracted-info-note {
       .note-text {
         white-space: unset;
@@ -266,6 +331,7 @@
     .values-missing-message {
       margin: $CAP_SPACE_16 0;
     }
+
     .editor-header {
       display: flex;
       justify-content: flex-end;
@@ -349,7 +415,7 @@
         align-items: center;
         min-height: $CAP_SPACE_20;
         padding-left: $CAP_SPACE_08;
-        
+
         &:hover {
           background-color: #f5f5f5;
         }
@@ -415,6 +481,7 @@
           color: #bfbfbf;
           font-style: italic;
         }
+
         .ant-input {
           margin: $CAP_SPACE_06 0;
           height: $CAP_SPACE_36;
@@ -482,10 +549,11 @@
       justify-content: space-between;
       margin-bottom: $CAP_SPACE_16;
     }
+
     .editor-actions::before,
     .editor-actions::after {
-        content: none;
-        display: none;
+      content: none;
+      display: none;
     }
 
     .optional-tags-section {
@@ -494,9 +562,10 @@
         color: #666;
       }
 
-        z-index: -1;
+      z-index: -1;
+
       .optional-tags-content {
-        padding: $CAP_SPACE_16;  
+        padding: $CAP_SPACE_16;
         background: #f5f5f5;
         border-radius: $CAP_SPACE_04;
       }
@@ -522,31 +591,40 @@
       margin-bottom: $CAP_SPACE_16;
       color: #666;
     }
+
     .ant-collapse-header {
       padding-left: 0;
     }
+
     .ant-collapse-content-box {
       padding-left: 0 !important;
     }
+
     .send-test-content {
       flex-direction: column;
       align-items: stretch;
       gap: 0;
     }
+
     .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,
       .ant-select-selector {
         min-height: $CAP_SPACE_40;
         height: auto !important;
       }
     }
+
     .send-test-content .ant-btn {
       margin-top: $CAP_SPACE_04;
       flex-shrink: 0;
     }
+
     .ant-select-selection__choice {
       background-color: $CAP_G08;
       border-radius: $CAP_SPACE_04;
@@ -556,8 +634,11 @@
 
 // Test customers TreeSelect dropdown: limit height and make scrollable (dropdown renders in portal)
 .test-customers-tree-select-dropdown {
-  max-height: 20rem !important; /* 320px */
-  overflow-y: auto !important;
+  min-width: 18rem;
+  max-height: 20rem;
+  /* 320px */
+  overflow-y: auto;
+
   .ant-select-tree-list-holder-inner {
     overflow: visible;
   }
@@ -565,8 +646,10 @@
 
 .test-customer-add-btn {
   width: 100%;
-  background-color: transparent !important;
-  color: $FONT_COLOR_05 !important;
+  &.ant-btn.cap-button-v2.flat-btn {
+    background-color: transparent;
+    color: $FONT_COLOR_05;
+  }
   white-space: normal;
   word-break: normal;
   overflow-wrap: break-word;
@@ -594,7 +677,7 @@
         padding-bottom: $CAP_SPACE_16;
         margin-bottom: $CAP_SPACE_16;
       }
-      
+
       .right-panel {
         padding-left: 0;
         padding-top: $CAP_SPACE_16;
@@ -610,6 +693,7 @@
   .preview-divider {
     margin: 0;
   }
+
   .preview-header {
     display: flex;
     justify-content: space-between;
@@ -621,6 +705,7 @@
       font-size: $FONT_SIZE_M;
       color: #595959;
       gap: $CAP_SPACE_04;
+
       b {
         color: #262626;
         margin-left: $CAP_SPACE_04;
@@ -651,10 +736,12 @@
 
   .preview-body {
     border-radius: $CAP_SPACE_08;
-    box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0,0,0,0.1);
+    box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0, 0, 0, 0.1);
+
     &.mobile {
       width: 26.786rem;
       margin: 0 auto;
+
       .browser-bar {
         background: $CAP_G08;
       }
@@ -670,13 +757,16 @@
         display: flex;
         gap: $CAP_SPACE_08;
         color: $CAP_G06;
+
         .refresh-icon {
           margin-top: $CAP_SPACE_04;
+
           svg path {
             fill: $CAP_G06;
           }
         }
       }
+
       .address-bar {
         flex-grow: 1;
         background: $CAP_WHITE;
@@ -686,13 +776,16 @@
         color: #595959;
         text-align: center;
         border: $CAP_SPACE_01 solid $CAP_G07;
+
         .address-bar-label {
           float: left;
         }
+
         .browser-address-bar-icon {
           float: right;
         }
       }
+
       .browser-actions {
         color: #8c8c8c;
       }
@@ -703,9 +796,11 @@
       align-items: center;
       padding: $CAP_SPACE_16;
       gap: $CAP_SPACE_16;
+
       .back-arrow {
         font-size: $CAP_SPACE_16;
       }
+
       .email-meta {
         margin-left: auto;
         display: flex;
@@ -713,6 +808,7 @@
         gap: $CAP_SPACE_08;
         font-size: $FONT_SIZE_S;
         color: #8c8c8c;
+
         .dots {
           width: $CAP_SPACE_06;
           height: $CAP_SPACE_06;
@@ -727,16 +823,19 @@
       align-items: center;
       padding: 0 $CAP_SPACE_16 $CAP_SPACE_16;
       gap: $CAP_SPACE_12;
+
       .sender-avatar {
         width: $CAP_SPACE_40;
         height: $CAP_SPACE_40;
         border-radius: 50%;
         background: $CAP_G12;
       }
+
       .sender-info {
         .sender-name {
           font-weight: 500;
         }
+
         .recipient-info {
           font-size: $FONT_SIZE_S;
           color: #8c8c8c;
@@ -747,6 +846,7 @@
     .email-content {
       border-top: $CAP_SPACE_01 solid $CAP_G12;
       padding: 0 $CAP_SPACE_16;
+
       iframe {
         border: none;
       }

package/v2Components/CommonTestAndPreview/actions.js

@@ -20,6 +20,7 @@ import {
   CLEAR_PREVIEW_ERRORS,
   GET_SENDER_DETAILS_REQUESTED,
   GET_WECRM_ACCOUNTS_REQUESTED,
+  ADD_TEST_CUSTOMER,
 } from './constants';
 
 // ============================================
@@ -92,6 +93,15 @@ export const getTestGroupsRequested = () => ({
   type: GET_TEST_GROUPS_REQUESTED,
 });
 
+/**
+ * Add a test customer to the list (e.g. after adding existing customer so tree shows name)
+ * @param {Object} customer - { userId, customerId, name, email, mobile }
+ */
+export const addTestCustomer = (customer) => ({
+  type: ADD_TEST_CUSTOMER,
+  payload: { customer },
+});
+
 /**
  * Create or update message meta configuration
  * @param {Object} payload - Message meta payload

package/v2Components/CommonTestAndPreview/constants.js

@@ -33,6 +33,7 @@ export const SEND_TEST_MESSAGE_FAILURE = 'app/CommonTestAndPreview/SEND_TEST_MES
 export const GET_TEST_CUSTOMERS_REQUESTED = 'app/CommonTestAndPreview/GET_TEST_CUSTOMERS_REQUESTED';
 export const GET_TEST_CUSTOMERS_SUCCESS = 'app/CommonTestAndPreview/GET_TEST_CUSTOMERS_SUCCESS';
 export const GET_TEST_CUSTOMERS_FAILURE = 'app/CommonTestAndPreview/GET_TEST_CUSTOMERS_FAILURE';
+export const ADD_TEST_CUSTOMER = 'app/CommonTestAndPreview/ADD_TEST_CUSTOMER';
 
 // Test Groups
 export const GET_TEST_GROUPS_REQUESTED = 'app/CommonTestAndPreview/GET_TEST_GROUPS_REQUESTED';
@@ -65,6 +66,12 @@ export const GET_WECRM_ACCOUNTS_REQUESTED = 'app/CommonTestAndPreview/GET_WECRM_
 export const GET_WECRM_ACCOUNTS_SUCCESS = 'app/CommonTestAndPreview/GET_WECRM_ACCOUNTS_SUCCESS';
 export const GET_WECRM_ACCOUNTS_FAILURE = 'app/CommonTestAndPreview/GET_WECRM_ACCOUNTS_FAILURE';
 
+// ============================================
+// CUSTOMER MODAL TYPE (test customer addition)
+// ============================================
+export const CUSTOMER_MODAL_NEW = 'new';
+export const CUSTOMER_MODAL_EXISTING = 'existing';
+
 // ============================================
 // CHANNEL CONSTANTS
 // ============================================
@@ -138,14 +145,21 @@ export const CLIENT_NAME_CREATIVES = 'CREATIVES';
 // Note: API uses "PUSH" instead of "MOBILEPUSH" for MobilePush channel
 export const API_CHANNEL_PUSH = 'PUSH';
 
+// ============================================
+// VALIDATION REGEX (shared with commonUtils for email/mobile validation)
+// ============================================
+export const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+export const PHONE_REGEX = /^[1-9]\d{7,14}$/;
+
 // ============================================
 // IDENTIFIER TYPE CONSTANTS
 // ============================================
+export const IDENTIFIER_TYPE_EMAIL = 'email';
 export const IDENTIFIER_TYPE_MOBILE = 'mobile';
 export const IDENTIFIER_TYPE_PHONE = 'phone';
 
 // Customer creation modal – input error state class suffix (used with customer-creation-modal-input)
-export const INPUT_HAS_ERROR_CLASS = ' has-error';
+export const INPUT_HAS_ERROR_CLASS = ' has-input-error';
 
 // ============================================
 // CHANNEL NAME CONSTANTS (for CDN and other utilities)