@capillarytech/creatives-library 8.0.310-alpha.0 → 8.0.311

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)

package/v2Components/CommonTestAndPreview/index.js

@@ -17,9 +17,6 @@ import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CustomerCreationModal from './CustomerCreationModal';
-import { createTestCustomer } from '../../services/api';
 
 // Import messages and styles
 import messages from './messages';
@@ -30,16 +27,10 @@ import LeftPanelContent from './LeftPanelContent';
 import CustomValuesEditor from './CustomValuesEditor';
 import SendTestMessage from './SendTestMessage';
 import PreviewSection from './PreviewSection';
-import AddTestCustomerButton from './AddTestCustomer';
-import ExistingCustomerModal from './ExistingCustomerModal';
+
 // Import constants
 import {
   CHANNELS,
-  CUSTOMER_MODAL_NEW,
-  CUSTOMER_MODAL_EXISTING,
-  IDENTIFIER_TYPE_EMAIL,
-  IDENTIFIER_TYPE_MOBILE,
-  IDENTIFIER_TYPE_PHONE,
   TEST,
   DESKTOP,
   ANDROID,
@@ -83,8 +74,6 @@ import {
 
 // Import utilities
 import { getCdnUrl } from '../../utils/cdnTransformation';
-import { isValidEmail, isValidMobile } from '../../utils/commonUtils';
-import { getMembersLookup } from '../../services/api';
 
 /**
  * Preview Component Factory - REMOVED IN PHASE 5
@@ -141,11 +130,6 @@ const CommonTestAndPreview = (props) => {
   const [customValues, setCustomValues] = useState({});
   const [showJSON, setShowJSON] = useState(false);
   const [tagsExtracted, setTagsExtracted] = useState(false);
-  const [searchValue, setSearchValue] = useState("");
-  const [customerModal, setCustomerModal] = useState([false, ""]);
-  const [isCustomerDataLoading, setIsCustomerDataLoading] = useState(false);
-  const [customerData, setCustomerData] = useState({ name: '', email: '', mobile: '', customerId: '' });
-
   // Initialize device based on channel: SMS uses Android/iOS, others use Desktop/Mobile
   // Initialize device based on channel: SMS, WhatsApp, RCS, InApp, MobilePush, and Viber use Android/iOS, others use Desktop/Mobile
   const initialDevice = (channel === CHANNELS.SMS || channel === CHANNELS.WHATSAPP || channel === CHANNELS.RCS || channel === CHANNELS.INAPP || channel === CHANNELS.MOBILEPUSH || channel === CHANNELS.VIBER) ? ANDROID : DESKTOP;
@@ -364,7 +348,7 @@ const CommonTestAndPreview = (props) => {
     return content || '';
   }, [channel, formData, currentTab, beeContent, content, beeInstance]);
 
-  // Build test entities tree data from testCustomers prop (includes customers added via addTestCustomer action)
+  // Build test entities tree data
   const testEntitiesTreeData = useMemo(() => {
     const groupsNode = {
       title: 'Groups',
@@ -377,10 +361,7 @@ const CommonTestAndPreview = (props) => {
       title: 'Individuals',
       value: 'customers-node',
       selectable: false,
-      children: testCustomers?.map((customer) => ({
-        title: customer?.name?.trim() || customer?.email?.trim() || customer?.mobile?.trim() || customer?.userId || customer?.customerId,
-        value: customer?.userId ?? customer?.customerId,
-      })) || [],
+      children: testCustomers?.map((customer) => ({ title: customer.name, value: customer?.userId })),
     };
 
     return [groupsNode, customersNode];
@@ -410,13 +391,15 @@ const CommonTestAndPreview = (props) => {
   /**
    * Common handler for saving test customers (both new and existing)
    */
-  const handleSaveTestCustomer = async (validationErrors = {},setIsLoading = () => {}) => {
+  const handleSaveTestCustomer = async (validationErrors = {},setIsLoading) => {
     // Check for validation errors before saving (for new customers)
     if (customerModal[1] === CUSTOMER_MODAL_NEW && (validationErrors.email || validationErrors.mobile)) {
       return;
     }
 
-    setIsLoading(true);
+    if (typeof setIsLoading === 'function') {
+      setIsLoading(true);
+    }
     
     try {
       let payload;
@@ -2576,6 +2559,7 @@ const CommonTestAndPreview = (props) => {
    * Handle extract tags
    */
   const handleExtractTags = () => {
+    // Get content based on channel
     let contentToExtract = getCurrentContent;
 
     if (channel === CHANNELS.EMAIL && formData) {
@@ -2676,10 +2660,7 @@ const CommonTestAndPreview = (props) => {
 
       if (!success) {
         const errorMessage = response?.message || response?.status?.message || formatMessage(messages.memberLookupError);
-        CapNotification.error({
-          message: formatMessage(messages.memberLookupError),
-          description: errorMessage,
-        });
+        CapNotification.error({ title: formatMessage(messages.errorTitle), message: errorMessage });
         return;
       }
 
@@ -2713,7 +2694,6 @@ const CommonTestAndPreview = (props) => {
     } catch {
       CapNotification.error({
         message: formatMessage(messages.memberLookupError),
-        description: formatMessage(messages.memberLookupError),
       });
     } finally {
       setIsCustomerDataLoading(false);
@@ -2838,7 +2818,6 @@ const CommonTestAndPreview = (props) => {
       content={getCurrentContent}
       channel={channel}
       isSendingTestMessage={isSendingTestMessage}
-      renderAddTestCustomerButton={renderAddTestCustomerButton}
       formatMessage={formatMessage}
       deliverySettings={testPreviewDeliverySettings[channel]}
       senderDetailsOptions={senderDetailsByChannel[channel]}
@@ -2847,8 +2826,6 @@ const CommonTestAndPreview = (props) => {
       isLoadingSenderDetails={isLoadingSenderDetails}
       smsTraiDltEnabled={smsTraiDltEnabled}
       registeredSenderIds={registeredSenderIds}
-      searchValue={searchValue}
-      setSearchValue={setSearchValue}
     />
   );
 
@@ -2858,20 +2835,6 @@ const CommonTestAndPreview = (props) => {
     />
   );
 
-  const renderAddTestCustomerButton = () => {
-    const value = searchValue || "";
-    const showAddButton =
-      [CHANNELS.EMAIL, CHANNELS.SMS].includes(channel) &&
-      (channel === CHANNELS.EMAIL ? isValidEmail(value) : isValidMobile(value));
-    if (!showAddButton) return null;
-    return (
-      <AddTestCustomerButton
-        searchValue={value}
-        handleAddTestCustomer={handleAddTestCustomer}
-      />
-    );
-  };
-
   // Header content for the slidebox
   const slideboxHeader = (
     <CapRow className="test-preview-header">
@@ -2891,18 +2854,14 @@ const CommonTestAndPreview = (props) => {
       show={show}
       size="size-xl"
       content={(
-        <CapSpin
-          spinning={isCustomerDataLoading}
-          className={`common-test-preview-lookup-spin ${isCustomerDataLoading ? 'common-test-preview-customer-loading' : ''}`}
-        >
-          <CapRow className="test-preview-container">
-            <CapRow className="test-and-preview-panels">
-              {/* Left Panel */}
-              <CapRow className="left-panel">
-                {channel === CHANNELS.ZALO ? null : renderLeftPanelContent()}
-                <CapDivider className="panel-divider" />
-
-                {/* Send Test Message Section */}
+        <CapRow className="test-preview-container">
+          <CapRow className="test-and-preview-panels">
+            {/* Left Panel */}
+            <CapRow className="left-panel">
+              {channel === CHANNELS.ZALO ? null : renderLeftPanelContent()}
+              <CapDivider className="panel-divider" />
+
+              {/* Send Test Message Section */}
               {config.enableTestMessage !== false && (
                 <CapRow className="panel-section send-test-section">
                   {renderSendTestMessage()}
@@ -2916,27 +2875,7 @@ const CommonTestAndPreview = (props) => {
               {renderPreview()}
             </CapRow>
           </CapRow>
-          {customerModal[0] && customerModal[1] === CUSTOMER_MODAL_EXISTING && (
-            <ExistingCustomerModal
-              customerData={customerData}
-              setCustomerModal={setCustomerModal}
-              customerModal={customerModal}
-              channel={channel}
-              onSave={handleSaveTestCustomer}
-            />
-          )}
-          {customerModal[0] && customerModal[1] === CUSTOMER_MODAL_NEW && (
-            <CustomerCreationModal
-              customerData={customerData}
-              setCustomerData={setCustomerData}
-              setCustomerModal={setCustomerModal}
-              customerModal={customerModal}
-              onSave={handleSaveTestCustomer}
-              channel={channel}
-            />
-          )}
-          </CapRow>
-        </CapSpin>
+        </CapRow>
       )}
     />
   );
@@ -3038,4 +2977,4 @@ CommonTestAndPreview.defaultProps = {
 // Note: Redux connection is handled by the wrapper components (e.g., TestAndPreviewSlidebox)
 // This component receives all Redux props (including intl) from its parent
 
-export default CommonTestAndPreview;
+export default CommonTestAndPreview;