@capillarytech/creatives-library 8.0.325 → 8.0.327-alpha.0

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;
@@ -150,15 +213,11 @@
   margin-right: 0.5rem;
 }
 
-/* CapSlideBox defaults to z-index 100; RCS SMS fallback slidebox + tag popovers use 10010–10020 — must stack above or close control is not clickable. */
-.cap-slide-box-v2.common-test-and-preview-slidebox {
+.cap-slide-box-v2.common-test-and-preview-slidebox .cap-slide-box-v2-container {
   z-index: 10030;
 }
 
 .common-test-and-preview-slidebox {
-  .common-test-preview-modal-wrap {
-    z-index: 10003;
-  }
 
   .ant-modal-mask,
   .ant-modal-wrap {
@@ -201,6 +260,7 @@
 
   .tag-input-field {
     width: 14.714rem;
+
     .input {
       height: $CAP_SPACE_40;
     }
@@ -213,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;
@@ -267,6 +331,7 @@
     .values-missing-message {
       margin: $CAP_SPACE_16 0;
     }
+
     .editor-header {
       display: flex;
       justify-content: flex-end;
@@ -350,7 +415,7 @@
         align-items: center;
         min-height: $CAP_SPACE_20;
         padding-left: $CAP_SPACE_08;
-        
+
         &:hover {
           background-color: #f5f5f5;
         }
@@ -416,6 +481,7 @@
           color: #bfbfbf;
           font-style: italic;
         }
+
         .ant-input {
           margin: $CAP_SPACE_06 0;
           height: $CAP_SPACE_36;
@@ -483,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 {
@@ -495,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;
       }
@@ -523,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;
@@ -557,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;
   }
@@ -566,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;
@@ -595,7 +677,7 @@
         padding-bottom: $CAP_SPACE_16;
         margin-bottom: $CAP_SPACE_16;
       }
-      
+
       .right-panel {
         padding-left: 0;
         padding-top: $CAP_SPACE_16;
@@ -611,6 +693,7 @@
   .preview-divider {
     margin: 0;
   }
+
   .preview-header {
     display: flex;
     justify-content: space-between;
@@ -622,6 +705,7 @@
       font-size: $FONT_SIZE_M;
       color: #595959;
       gap: $CAP_SPACE_04;
+
       b {
         color: #262626;
         margin-left: $CAP_SPACE_04;
@@ -652,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;
       }
@@ -671,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;
@@ -687,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;
       }
@@ -704,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;
@@ -714,6 +808,7 @@
         gap: $CAP_SPACE_08;
         font-size: $FONT_SIZE_S;
         color: #8c8c8c;
+
         .dots {
           width: $CAP_SPACE_06;
           height: $CAP_SPACE_06;
@@ -728,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;
@@ -748,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)