@capillarytech/creatives-library 8.0.309 → 8.0.310

package/v2Components/CommonTestAndPreview/SendTestMessage.js

@@ -24,9 +24,6 @@ const SendTestMessage = ({
   channel,
   isSendingTestMessage,
   formatMessage,
-  renderAddTestCustomerButton,
-  searchValue,
-  setSearchValue,
   deliverySettings,
   senderDetailsOptions,
   wecrmAccounts,
@@ -34,77 +31,57 @@ const SendTestMessage = ({
   isLoadingSenderDetails,
   smsTraiDltEnabled,
   registeredSenderIds,
-}) => {
-  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} />}
+}) => (
+  <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)}
             />
-          ),
-          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}
+            {CHANNELS_WITH_DELIVERY_SETTINGS.includes(channel) && (
+              <DeliverySettings
+                channel={channel}
+                deliverySettings={deliverySettings || {}}
+                senderDetailsOptions={senderDetailsOptions || []}
+                wecrmAccounts={wecrmAccounts || []}
+                onSaveDeliverySettings={onSaveDeliverySettings}
+                isLoadingSenderDetails={isLoadingSenderDetails}
+                formatMessage={formatMessage}
+                smsTraiDltEnabled={smsTraiDltEnabled}
+                registeredSenderIds={registeredSenderIds}
+                whatsappAccountFromForm={
+                  channel === CHANNELS.WHATSAPP && formData?.accountName
+                    ? { accountName: formData.accountName }
+                    : undefined
+                }
               />
-              {CHANNELS_WITH_DELIVERY_SETTINGS.includes(channel) && (
-                <DeliverySettings
-                  channel={channel}
-                  deliverySettings={deliverySettings || {}}
-                  senderDetailsOptions={senderDetailsOptions || []}
-                  wecrmAccounts={wecrmAccounts || []}
-                  onSaveDeliverySettings={onSaveDeliverySettings}
-                  isLoadingSenderDetails={isLoadingSenderDetails}
-                  formatMessage={formatMessage}
-                  smsTraiDltEnabled={smsTraiDltEnabled}
-                  registeredSenderIds={registeredSenderIds}
-                  whatsappAccountFromForm={
-                    channel === CHANNELS.WHATSAPP && formData?.accountName
-                      ? { accountName: formData.accountName }
-                      : undefined
-                  }
-                />
-              )}
-              <CapButton
-                onClick={handleSendTestMessage}
-                disabled={isEmpty(selectedTestEntities) || isSendingTestMessage}
-              >
-                <FormattedMessage {...messages.sendTestButton} />
-              </CapButton>
-            </CapRow>
-          ),
-          key: 1,
-        },
-      ]}
-    />
-  );
-};
+            )}
+            <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || isSendingTestMessage}>
+              <FormattedMessage {...messages.sendTestButton} />
+            </CapButton>
+          </CapRow>),
+        key: 1,
+      },
+    ]}
+  />
+);
 
 SendTestMessage.propTypes = {
   isFetchingTestCustomers: PropTypes.bool.isRequired,
@@ -117,9 +94,6 @@ 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,
   senderDetailsOptions: PropTypes.array,
   wecrmAccounts: PropTypes.array,
@@ -132,9 +106,6 @@ 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: {},
   senderDetailsOptions: [],
   wecrmAccounts: [],

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -5,12 +5,9 @@
  */
 @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;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  z-index: 10000 !important;
 }
 
 /* Lookup spinner overlay above test-customers dropdown. */
@@ -25,23 +22,19 @@
 
 /* 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;
+  z-index: 0 !important;
 }
 
 /* Customer creation modal content – avoid inline styles */
-.common-test-preview-modal.common-test-preview-modal {
-  color: $CAP_G01;
-  width: 32.571em;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 32.571em;
-
+.common-test-preview-modal {
+  color: $CAP_G01 !important;
+  .ant-modal-content {
+    width: 28.5rem; /* 456px at 16px root */
+  }
   .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 {
@@ -70,72 +63,22 @@
     font-weight: normal;
   }
 
-  /* Input text color and font to match standalone (lib mode can lose host styles) */
   .customer-creation-modal-input {
-    /* 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;
-    }
-
-    .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;
-      }
+    width: 100%;
+    color: $CAP_G01;
 
-      .ant-input-affix-wrapper .ant-input {
-        border: none !important;
+    &.has-error {
+      color: $CAP_COLOR_03 !important;
+      .ant-input {
+        border-color: $CAP_COLOR_03 !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 */
@@ -144,17 +87,13 @@
       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;
     }
 
@@ -165,11 +104,9 @@
     }
 
     &-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;
@@ -214,6 +151,9 @@
 }
 
 .common-test-and-preview-slidebox {
+  .common-test-preview-modal-wrap {
+    z-index: 10003;
+  }
 
   .ant-modal-mask,
   .ant-modal-wrap {
@@ -256,7 +196,6 @@
 
   .tag-input-field {
     width: 14.714rem;
-
     .input {
       height: $CAP_SPACE_40;
     }
@@ -269,16 +208,12 @@
 
   .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;
@@ -327,7 +262,6 @@
     .values-missing-message {
       margin: $CAP_SPACE_16 0;
     }
-
     .editor-header {
       display: flex;
       justify-content: flex-end;
@@ -411,7 +345,7 @@
         align-items: center;
         min-height: $CAP_SPACE_20;
         padding-left: $CAP_SPACE_08;
-
+        
         &:hover {
           background-color: #f5f5f5;
         }
@@ -477,7 +411,6 @@
           color: #bfbfbf;
           font-style: italic;
         }
-
         .ant-input {
           margin: $CAP_SPACE_06 0;
           height: $CAP_SPACE_36;
@@ -538,11 +471,10 @@
       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 {
@@ -551,10 +483,9 @@
         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;
       }
@@ -580,40 +511,31 @@
       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;
@@ -623,11 +545,8 @@
 
 // Test customers TreeSelect dropdown: limit height and make scrollable (dropdown renders in portal)
 .test-customers-tree-select-dropdown {
-  min-width: 18rem;
-  max-height: 20rem;
-  /* 320px */
-  overflow-y: auto;
-
+  max-height: 20rem !important; /* 320px */
+  overflow-y: auto !important;
   .ant-select-tree-list-holder-inner {
     overflow: visible;
   }
@@ -635,10 +554,8 @@
 
 .test-customer-add-btn {
   width: 100%;
-  &.ant-btn.cap-button-v2.flat-btn {
-    background-color: transparent;
-    color: $FONT_COLOR_05;
-  }
+  background-color: transparent !important;
+  color: $FONT_COLOR_05 !important;
   white-space: normal;
   word-break: normal;
   overflow-wrap: break-word;
@@ -666,7 +583,7 @@
         padding-bottom: $CAP_SPACE_16;
         margin-bottom: $CAP_SPACE_16;
       }
-
+      
       .right-panel {
         padding-left: 0;
         padding-top: $CAP_SPACE_16;
@@ -682,7 +599,6 @@
   .preview-divider {
     margin: 0;
   }
-
   .preview-header {
     display: flex;
     justify-content: space-between;
@@ -694,7 +610,6 @@
       font-size: $FONT_SIZE_M;
       color: #595959;
       gap: $CAP_SPACE_04;
-
       b {
         color: #262626;
         margin-left: $CAP_SPACE_04;
@@ -725,12 +640,10 @@
 
   .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;
       }
@@ -746,16 +659,13 @@
         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;
@@ -765,16 +675,13 @@
         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;
       }
@@ -785,11 +692,9 @@
       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;
@@ -797,7 +702,6 @@
         gap: $CAP_SPACE_08;
         font-size: $FONT_SIZE_S;
         color: #8c8c8c;
-
         .dots {
           width: $CAP_SPACE_06;
           height: $CAP_SPACE_06;
@@ -812,19 +716,16 @@
       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;
@@ -835,7 +736,6 @@
     .email-content {
       border-top: $CAP_SPACE_01 solid $CAP_G12;
       padding: 0 $CAP_SPACE_16;
-
       iframe {
         border: none;
       }

package/v2Components/CommonTestAndPreview/actions.js

@@ -20,7 +20,6 @@ import {
   CLEAR_PREVIEW_ERRORS,
   GET_SENDER_DETAILS_REQUESTED,
   GET_WECRM_ACCOUNTS_REQUESTED,
-  ADD_TEST_CUSTOMER,
 } from './constants';
 
 // ============================================
@@ -93,15 +92,6 @@ 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,7 +33,6 @@ 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';
@@ -66,12 +65,6 @@ 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
 // ============================================
@@ -107,21 +100,14 @@ 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-input-error';
+export const INPUT_HAS_ERROR_CLASS = ' has-error';
 
 // ============================================
 // CHANNEL NAME CONSTANTS (for CDN and other utilities)