@capillarytech/creatives-library 8.0.298 → 8.0.299-alpha.4

package/v2Components/CommonTestAndPreview/ExistingCustomerModal.js

@@ -0,0 +1,72 @@
+import CapModal from "@capillarytech/cap-ui-library/CapModal";
+import { FormattedMessage, injectIntl } from "react-intl";
+import messages from "./messages";
+import React, { useState } from "react";
+import { CapCard, CapRow, CapColumn, CapLabel } from "@capillarytech/cap-ui-library";
+import { CHANNELS } from "./constants";
+import CapButton from "@capillarytech/cap-ui-library/CapButton";    
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+
+
+const ExistingCustomerModal = ({ customerModal, setCustomerModal, customerData, channel, onSave, intl }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  return (
+    <CapModal
+      visible={customerModal[0]}
+      onCancel={() => setCustomerModal([false, ""])}
+      centered={true}
+      width={500}
+      maskStyle={{ backgroundColor: 'rgba(244, 245, 247, 0.9)' }}
+      footer={
+        <CapRow justify="start">
+          <CapButton
+            type="primary"
+            onClick={() => onSave({},setIsLoading)}
+            loading={isLoading}
+          >
+            <FormattedMessage {...messages.saveButton} />
+          </CapButton>
+        <CapButton
+          type="secondary"
+          onClick={() => setCustomerModal([false, ""])}
+          disabled={isLoading}
+        >
+          <FormattedMessage {...messages.cancelButton} />
+        </CapButton>
+      </CapRow>
+      }
+      title={intl.formatMessage(messages.customerCreationModalTitle)}
+      wrapClassName="common-test-preview-modal-wrap existing-customer-modal-wrap"
+      className="common-test-preview-modal"
+    >
+      <div className="existing-customer-modal">
+        <CapRow className="existing-customer-modal-intro-row">
+          <FormattedMessage {...messages.existingCustomerModalDescription} />
+        </CapRow>
+        <CapCard className="existing-customer-modal-card">
+          <CapRow className="existing-customer-modal-card-row">
+            <CapColumn className="existing-customer-modal-avatar">
+              <CapIcon type="user-profile" className="existing-customer-modal-avatar-icon" />
+            </CapColumn>
+            <CapColumn className="existing-customer-modal-details">
+              <CapRow className="existing-customer-modal-name">
+                {customerData.name || "-"}
+              </CapRow>
+              <CapColumn className="existing-customer-modal-meta">
+                {channel === CHANNELS.EMAIL && customerData.email && (
+                  <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerEmail} />: </span> {customerData.email}</CapRow>
+                )}
+                {channel === CHANNELS.SMS && customerData.mobile && (
+                  <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerMobile} />: </span>{customerData.mobile}</CapRow>
+                )}
+                <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerID} />: </span>{customerData.customerId}</CapRow>
+              </CapColumn>
+            </CapColumn>
+          </CapRow>
+        </CapCard>
+      </div>
+    </CapModal>
+  );
+};
+
+export default injectIntl(ExistingCustomerModal);

package/v2Components/CommonTestAndPreview/SendTestMessage.js

@@ -24,6 +24,9 @@ const SendTestMessage = ({
   channel,
   isSendingTestMessage,
   formatMessage,
+  renderAddTestCustomerButton,
+  searchValue,
+  setSearchValue,
   deliverySettings,
   senderDetailsOptions,
   wecrmAccounts,
@@ -31,57 +34,77 @@ const SendTestMessage = ({
   isLoadingSenderDetails,
   smsTraiDltEnabled,
   registeredSenderIds,
-}) => (
-  <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)}
+}) => {
+  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 || {}}
-                senderDetailsOptions={senderDetailsOptions || []}
-                wecrmAccounts={wecrmAccounts || []}
-                onSaveDeliverySettings={onSaveDeliverySettings}
-                isLoadingSenderDetails={isLoadingSenderDetails}
-                formatMessage={formatMessage}
-                smsTraiDltEnabled={smsTraiDltEnabled}
-                registeredSenderIds={registeredSenderIds}
-                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 || {}}
+                  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,
+        },
+      ]}
+    />
+  );
+};
 
 SendTestMessage.propTypes = {
   isFetchingTestCustomers: PropTypes.bool.isRequired,
@@ -94,6 +117,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,
   senderDetailsOptions: PropTypes.array,
   wecrmAccounts: PropTypes.array,
@@ -106,6 +132,9 @@ SendTestMessage.propTypes = {
 SendTestMessage.defaultProps = {
   formData: undefined,
   channel: undefined,
+  renderAddTestCustomerButton: undefined,
+  searchValue: '',
+  setSearchValue: undefined,
   deliverySettings: {},
   senderDetailsOptions: [],
   wecrmAccounts: [],

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -5,6 +5,158 @@
  */
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
+  /* All ant overrides scoped under wrapper to avoid affecting other modals. */
+.common-test-preview-modal-wrap {
+  z-index: 10000 !important;
+}
+
+/* Notifications rendered inside slidebox (getContainer) so they appear in campaigns/library mode */
+.common-test-and-preview-notification-container {
+  .ant-notification {
+    z-index: 10001;
+  }
+}
+
+/* Lookup spinner overlay above test-customers dropdown. */
+.common-test-preview-lookup-spin {
+  position: relative;
+  z-index: 1000;
+
+  .ant-spin-container::after {
+    z-index: 1;
+  }
+}
+
+/* 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;
+}
+
+/* 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 */
+  }
+  .ant-modal-footer {
+    text-align: left;
+    margin-left: 0.625rem; /* 10px at 16px root */
+    margin-top: 0.9375rem; /* 15px at 16px root */
+  }
+
+  .customer-creation-modal-row {
+    margin-bottom: $CAP_SPACE_16;
+
+    &--last {
+      margin-bottom: $CAP_SPACE_24;
+    }
+  }
+
+  .customer-creation-modal-description {
+    color: $CAP_G01;
+    font-size: $FONT_SIZE_M;
+  }
+
+  .customer-creation-modal-label {
+    margin-bottom: $CAP_SPACE_04;
+    display: block;
+    font-size: $FONT_SIZE_M;
+    font-weight: bold;
+    color: $CAP_G01;
+  }
+
+  .customer-creation-modal-optional {
+    color: $CAP_G06;
+    font-weight: normal;
+  }
+
+  .customer-creation-modal-input {
+    width: 100%;
+    color: $CAP_G01;
+
+    &.has-error {
+      color: $CAP_COLOR_03 !important;
+      .ant-input {
+        border-color: $CAP_COLOR_03 !important;
+      }
+    }
+  }
+
+  .customer-creation-modal-validation-error {
+    color: $CAP_COLOR_03;
+    font-size: $FONT_SIZE_S;
+    margin-top: $CAP_SPACE_04;
+  }
+
+  /* Existing customer modal content */
+  .existing-customer-modal {
+    &-intro-row {
+      margin-bottom: $CAP_SPACE_16;
+    }
+
+    .ant-card-body {
+      padding: 1rem;
+    }
+
+    &-card {
+      border-radius: $CAP_SPACE_08;
+      border: $CAP_SPACE_01 solid $CAP_G06;
+      padding: 0;
+    }
+
+    &-card-row {
+      display: flex;
+      align-items: flex-start;
+      padding: 0;
+    }
+
+    &-avatar {
+      width: 3rem; /* 48px at 16px root */
+      height: 3rem;
+      border-radius: 1.25rem; /* 20px at 16px root */
+      background-color: $CAP_G07;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: $CAP_SPACE_04;
+      margin-right: $CAP_SPACE_16;
+      flex-shrink: 0;
+    }
+
+    &-avatar-icon {
+      font-size: $CAP_SPACE_24;
+      color: $CAP_G01;
+    }
+
+    &-details {
+      flex: 1;
+    }
+
+    &-name {
+      font-size: $FONT_SIZE_L;
+      font-weight: 500;
+      color: $CAP_G01;
+      margin-bottom: $CAP_SPACE_04;
+    }
+
+    &-meta {
+      font-size: $FONT_SIZE_M;
+      color: $CAP_G01;
+      line-height: 1.4;
+    }
+
+    &-meta-label {
+      color: $CAP_G04;
+    }
+  }
+}
+
+
+.add-test-customer-icon {
+  margin-top: 0.3rem;
+  margin-right: 0.5rem;
+}
+
 .common-test-and-preview-slidebox {
   .test-preview-header {
     display: flex;
@@ -54,6 +206,7 @@
 
   .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;
@@ -363,14 +516,26 @@
     .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%;
-      height: $CAP_SPACE_40;
-      margin: $CAP_SPACE_12 0;
-      .ant-select-selection {
-        height: inherit;
+      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;
@@ -378,6 +543,37 @@
   }
 }
 
+// Test customers TreeSelect dropdown: limit height and make scrollable (dropdown renders in portal)
+// min-width so dropdown looks the same in campaigns and creatives
+.test-customers-tree-select-dropdown {
+  min-width: 18rem !important;
+  max-height: 20rem !important; /* 320px */
+  overflow-y: auto !important;
+  .ant-select-tree-list-holder-inner {
+    overflow: visible;
+  }
+}
+
+.test-customer-add-btn {
+  width: 100%;
+  background-color: transparent !important;
+  color: $FONT_COLOR_05 !important;
+  white-space: normal;
+  word-break: normal;
+  overflow-wrap: break-word;
+  height: auto;
+
+  /* Truncate long email/phone in label so it doesn't break mid-string */
+  .test-customer-add-btn-value {
+    display: inline-block;
+    max-width: 12rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: bottom;
+  }
+}
+
 // Responsive design for smaller screens
 @media (max-width: 54.857rem) {
   .common-test-and-preview-slidebox {

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
 // ============================================
@@ -100,11 +107,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_MOBILE = 'mobile';
 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';
 
 // ============================================
 // CHANNEL NAME CONSTANTS (for CDN and other utilities)