@capillarytech/creatives-library 8.0.329 → 8.0.330

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;
@@ -213,11 +150,10 @@
   margin-right: 0.5rem;
 }
 
-.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 {
@@ -260,7 +196,6 @@
 
   .tag-input-field {
     width: 14.714rem;
-
     .input {
       height: $CAP_SPACE_40;
     }
@@ -273,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;
@@ -331,7 +262,6 @@
     .values-missing-message {
       margin: $CAP_SPACE_16 0;
     }
-
     .editor-header {
       display: flex;
       justify-content: flex-end;
@@ -415,7 +345,7 @@
         align-items: center;
         min-height: $CAP_SPACE_20;
         padding-left: $CAP_SPACE_08;
-
+        
         &:hover {
           background-color: #f5f5f5;
         }
@@ -481,7 +411,6 @@
           color: #bfbfbf;
           font-style: italic;
         }
-
         .ant-input {
           margin: $CAP_SPACE_06 0;
           height: $CAP_SPACE_36;
@@ -490,13 +419,6 @@
       }
     }
 
-    .tags-section-title {
-      margin: $CAP_SPACE_12 0;
-      display: block;
-      color: $CAP_G01;
-      font-weight: $FONT_WEIGHT_MEDIUM;
-    }
-
     .values-table {
       margin-bottom: $CAP_SPACE_16;
       border: $CAP_SPACE_01 solid $CAP_G12;
@@ -549,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 {
@@ -562,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;
       }
@@ -591,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;
@@ -634,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;
   }
@@ -646,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;
@@ -677,7 +583,7 @@
         padding-bottom: $CAP_SPACE_16;
         margin-bottom: $CAP_SPACE_16;
       }
-
+      
       .right-panel {
         padding-left: 0;
         padding-top: $CAP_SPACE_16;
@@ -693,7 +599,6 @@
   .preview-divider {
     margin: 0;
   }
-
   .preview-header {
     display: flex;
     justify-content: space-between;
@@ -705,7 +610,6 @@
       font-size: $FONT_SIZE_M;
       color: #595959;
       gap: $CAP_SPACE_04;
-
       b {
         color: #262626;
         margin-left: $CAP_SPACE_04;
@@ -736,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;
       }
@@ -757,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;
@@ -776,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;
       }
@@ -796,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;
@@ -808,7 +702,6 @@
         gap: $CAP_SPACE_08;
         font-size: $FONT_SIZE_S;
         color: #8c8c8c;
-
         .dots {
           width: $CAP_SPACE_06;
           height: $CAP_SPACE_06;
@@ -823,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;
@@ -846,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
 // ============================================
@@ -86,44 +79,6 @@ export const CHANNELS = {
   ZALO: 'ZALO',
 };
 
-/** Unified preview tab keys when RCS shows RCS + SMS fallback panes. */
-export const PREVIEW_TAB_RCS = 'rcs';
-export const PREVIEW_TAB_SMS_FALLBACK = 'smsFallback';
-export const PREVIEW_TAB_KEYS = [PREVIEW_TAB_RCS, PREVIEW_TAB_SMS_FALLBACK];
-
-/** Channels whose Test & Preview defaults to Android/iOS device frame (not desktop). */
-export const CHANNELS_USING_ANDROID_PREVIEW_DEVICE = [
-  CHANNELS.SMS,
-  CHANNELS.WHATSAPP,
-  CHANNELS.RCS,
-  CHANNELS.INAPP,
-  CHANNELS.MOBILEPUSH,
-  CHANNELS.VIBER,
-];
-
-/** RCS createMessageMeta test payload — rich card envelope literals. */
-export const RCS_TEST_META_CONTENT_TYPE_RICHCARD = 'RICHCARD';
-export const RCS_TEST_META_CARD_TYPE_STANDALONE = 'STANDALONE';
-export const RCS_TEST_META_CARD_ORIENTATION_VERTICAL = 'VERTICAL';
-export const RCS_TEST_META_CARD_WIDTH_SMALL = 'SMALL';
-
-/** React key fallback when a custom-values section has no `key` or title id. */
-export const CUSTOM_VALUES_EDITOR_SECTION_FALLBACK_KEY = 'section';
-
-/**
- * Matches at least one `{{variableName}}` token in SMS / RCS fallback template text.
- */
-export const SMS_MUSTACHE_TAG_PATTERN = /\{\{[^}]+\}\}/;
-
-/** TRAI DLT `{#…#}` placeholders (same idea as `COMBINED_SMS_TEMPLATE_VAR_REGEX` in unified constants). */
-export const SMS_DLT_HASH_TAG_PATTERN = /\{\#[^#]*\#\}/;
-
-/**
- * Key on `smsFallbackContent` passed into Test & Preview — RCS slot map from SmsTraiEdit
- * (`onRcsFallbackEditorStateChange`), merged before tag extraction like the embedded SMS editor.
- */
-export const RCS_SMS_FALLBACK_VAR_MAPPED_PROP = 'rcsSmsFallbackVarMapped';
-
 // ============================================
 // DEVICE CONSTANTS
 // ============================================
@@ -145,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)