cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Components/CommonTestAndPreview/SendTestMessage.js

@@ -6,8 +6,13 @@ import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapStepsAccordian from '@capillarytech/cap-ui-library/CapStepsAccordian';
 import CapTreeSelect from '@capillarytech/cap-ui-library/CapTreeSelect';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
 import isEmpty from 'lodash/isEmpty';
 import messages from './messages';
+import DeliverySettings from './DeliverySettings';
+import { CHANNELS } from './constants';
+
+const CHANNELS_WITH_DELIVERY_SETTINGS = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP, CHANNELS.RCS];
 
 const SendTestMessage = ({
   isFetchingTestCustomers,
@@ -17,8 +22,17 @@ const SendTestMessage = ({
   selectedTestEntities,
   handleSendTestMessage,
   formData,
+  channel,
   isSendingTestMessage,
   formatMessage,
+  deliverySettings,
+  senderDetailsByChannel = {},
+  wecrmAccounts,
+  onSaveDeliverySettings,
+  isLoadingSenderDetails,
+  smsTraiDltEnabled,
+  registeredSenderIds,
+  isChannelSmsFallbackPreviewEnabled,
 }) => (
   <CapStepsAccordian
     showNumberSteps={false}
@@ -42,7 +56,27 @@ const SendTestMessage = ({
               value={selectedTestEntities}
               multiple
               placeholder={formatMessage(messages.testCustomersPlaceholder)}
+              getPopupContainer={(triggerNode) => triggerNode.parentNode}
             />
+            {CHANNELS_WITH_DELIVERY_SETTINGS.includes(channel) && (
+              <DeliverySettings
+                channel={channel}
+                deliverySettings={deliverySettings || {}}
+                senderDetailsByChannel={senderDetailsByChannel}
+                wecrmAccounts={wecrmAccounts || []}
+                onSaveDeliverySettings={onSaveDeliverySettings}
+                isLoadingSenderDetails={isLoadingSenderDetails}
+                formatMessage={formatMessage}
+                smsTraiDltEnabled={smsTraiDltEnabled}
+                registeredSenderIds={registeredSenderIds}
+                isChannelSmsFallbackPreviewEnabled={isChannelSmsFallbackPreviewEnabled}
+                whatsappAccountFromForm={
+                  channel === CHANNELS.WHATSAPP && formData?.accountName
+                    ? { accountName: formData.accountName }
+                    : undefined
+                }
+              />
+            )}
             <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || isSendingTestMessage}>
               <FormattedMessage {...messages.sendTestButton} />
             </CapButton>
@@ -60,9 +94,31 @@ SendTestMessage.propTypes = {
   handleTestEntitiesChange: PropTypes.func.isRequired,
   selectedTestEntities: PropTypes.array.isRequired,
   handleSendTestMessage: PropTypes.func.isRequired,
-  formData: PropTypes.object.isRequired,
+  formData: PropTypes.object,
+  channel: PropTypes.string,
   isSendingTestMessage: PropTypes.bool.isRequired,
   formatMessage: PropTypes.func.isRequired,
+  deliverySettings: PropTypes.object,
+  senderDetailsByChannel: PropTypes.object,
+  wecrmAccounts: PropTypes.array,
+  onSaveDeliverySettings: PropTypes.func,
+  isLoadingSenderDetails: PropTypes.bool,
+  smsTraiDltEnabled: PropTypes.bool,
+  registeredSenderIds: PropTypes.array,
+  isChannelSmsFallbackPreviewEnabled: PropTypes.bool,
+};
+
+SendTestMessage.defaultProps = {
+  formData: undefined,
+  channel: undefined,
+  deliverySettings: {},
+  senderDetailsByChannel: {},
+  wecrmAccounts: [],
+  onSaveDeliverySettings: undefined,
+  isLoadingSenderDetails: false,
+  smsTraiDltEnabled: false,
+  registeredSenderIds: [],
+  isChannelSmsFallbackPreviewEnabled: false,
 };
 
 export default SendTestMessage;

package/app/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -11,7 +11,6 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    background: $CAP_WHITE;
     overflow: hidden;
   
     // Preview Chrome wrapper (matches old TestAndPreviewSlidebox design)
@@ -62,7 +61,27 @@
         }
       }
     }
+
+    .unified-preview.unified-preview-rcs-tabs {  
+      .ant-tabs-nav {
+        margin: 0;
+        padding: 0 $CAP_SPACE_16;
+      }
   
+      // Prevent white hover/active backgrounds from default antd styles
+      .ant-tabs-tab,
+      .ant-tabs-tab:hover,
+      .ant-tabs-tab-active {
+        background: transparent;
+      }
+  
+      .ant-tabs-tab-btn,
+      .ant-tabs-tab-btn:hover,
+      .ant-tabs-tab-btn:active {
+        background: transparent;
+      }
+    }
+
     // Preview Content Container
     .preview-content-container {
       flex: 1;

package/app/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -21,8 +21,21 @@ import InAppPreviewContent from './InAppPreviewContent';
 import MobilePushPreviewContent from './MobilePushPreviewContent';
 import ViberPreviewContent from './ViberPreviewContent';
 import ZaloPreviewContent from './ZaloPreviewContent';
-import { CHANNELS, DESKTOP, TABLET, MOBILE, ANDROID, IOS } from '../constants';
+import CapTab from '@capillarytech/cap-ui-library/CapTab';
+import {
+  CHANNELS,
+  DESKTOP,
+  TABLET,
+  MOBILE,
+  ANDROID,
+  IOS,
+  PREVIEW_TAB_RCS,
+  PREVIEW_TAB_SMS_FALLBACK,
+  PREVIEW_TAB_KEYS,
+  RCS_SMS_FALLBACK_VAR_MAPPED_PROP,
+} from '../constants';
 import messages from '../messages';
+import { getFallbackResolvedContent } from '../../../utils/templateVarUtils';
 import './_unifiedPreview.scss';
 
 const UnifiedPreview = ({
@@ -38,7 +51,24 @@ const UnifiedPreview = ({
   lastModified,
   updatedByName,
   showHeader, // Default to true for Test and Preview flow, false for channel component previews
+  smsFallbackContent,
+  smsFallbackResolvedText,
+  activePreviewTab,
+  onPreviewTabChange,
 }) => {
+  const hasFallbackSmsTemplate = !!(smsFallbackContent?.templateContent || smsFallbackContent?.content);
+  const showRcsSmsFallbackTabs = channel === CHANNELS.RCS && hasFallbackSmsTemplate;
+  const rawFallbackTemplate = smsFallbackContent?.templateContent ?? smsFallbackContent?.content ?? '';
+  const rcsFallbackVarMapped = smsFallbackContent?.[RCS_SMS_FALLBACK_VAR_MAPPED_PROP] ?? {};
+  const hasRcsFallbackVarMapped = Object.keys(rcsFallbackVarMapped).length > 0;
+  // When no varmap is present, show raw template so {{tags}} remain visible in the preview.
+  // Only apply slot substitution when varmap entries exist or a resolved text is available.
+  const smsFallbackDisplayContent =
+    smsFallbackResolvedText != null && smsFallbackResolvedText !== ''
+      ? smsFallbackResolvedText
+      : hasRcsFallbackVarMapped
+        ? getFallbackResolvedContent(rawFallbackTemplate, rcsFallbackVarMapped)
+        : rawFallbackTemplate;
   /**
    * Render channel-specific preview content
    * For Phase 5, we'll render placeholders
@@ -124,6 +154,21 @@ const UnifiedPreview = ({
       case CHANNELS.RCS: {
         // RCS content is an object with rcsTitle, rcsDesc, rcsImageSrc, suggestions, etc.
         const rcsContent = typeof content === 'object' ? content : {};
+
+        if (showRcsSmsFallbackTabs && activePreviewTab === PREVIEW_TAB_SMS_FALLBACK) {
+          return (
+            <SmsPreviewContent
+              content={smsFallbackDisplayContent}
+              device={ANDROID}
+              isUpdating={isUpdating}
+              error={error}
+              formatMessage={formatMessage}
+              senderId={smsFallbackContent?.senderId}
+              showHeader={showHeader}
+            />
+          );
+        }
+
         return (
           <RcsPreviewContent
             content={rcsContent}
@@ -268,6 +313,79 @@ const UnifiedPreview = ({
    * PreviewHeader is shown only when showHeader is true (for Test and Preview flow)
    * Channel-specific content will be in separate files in future phases
    */
+  if (showRcsSmsFallbackTabs) {
+    const renderPane = ({ paneChannel, paneDevice, paneShowDeviceToggle, paneContent }) => (
+      <CapRow className="unified-preview-tab-pane">
+        {showHeader && (
+          <PreviewHeader
+            selectedCustomer={selectedCustomer}
+            device={paneDevice}
+            showDeviceToggle={paneShowDeviceToggle}
+            onDeviceChange={onDeviceChange}
+            channel={paneChannel}
+          />
+        )}
+
+        <CapRow className={`preview-content-container ${!showHeader ? 'preview-content-container-no-header' : ''}`}>
+          {paneContent}
+        </CapRow>
+
+       
+      </CapRow>
+    );
+
+    return (
+      <CapRow className="unified-preview unified-preview-rcs-tabs">
+        <CapTab
+          activeKey={activePreviewTab}
+          onChange={onPreviewTabChange}
+          panes={[
+            {
+              tab: formatMessage(messages.rcsTab),
+              key: PREVIEW_TAB_RCS,
+              content: renderPane({
+                paneChannel: CHANNELS.RCS,
+                paneDevice: device,
+                paneShowDeviceToggle: showDeviceToggle,
+                paneContent: (
+                  <RcsPreviewContent
+                    content={typeof content === 'object' ? content : {}}
+                    device={device}
+                    isUpdating={isUpdating}
+                    error={error}
+                    formatMessage={formatMessage}
+                    senderId={content?.senderId}
+                    showHeader={showHeader}
+                  />
+                ),
+              }),
+            },
+            {
+              tab: formatMessage(messages.smsFallbackTab),
+              key: PREVIEW_TAB_SMS_FALLBACK,
+              content: renderPane({
+                paneChannel: CHANNELS.SMS,
+                paneDevice: device,
+                paneShowDeviceToggle: showDeviceToggle,
+                paneContent: (
+                  <SmsPreviewContent
+                    content={smsFallbackDisplayContent}
+                    device={device}
+                    isUpdating={isUpdating}
+                    error={error}
+                    formatMessage={formatMessage}
+                    senderId={smsFallbackContent?.senderId}
+                    showHeader={showHeader}
+                  />
+                ),
+              }),
+            },
+          ]}
+        />
+      </CapRow>
+    );
+  }
+
   return (
     <CapRow className="unified-preview">
       {/* PreviewHeader - shown only in Test and Preview flow, hidden in channel component previews */}
@@ -305,9 +423,7 @@ const UnifiedPreview = ({
           )}
           {updatedByName && (
             <span className="metadata-item">
-              {formatMessage(messages.by)}
-              {' '}
-              {updatedByName}
+              {formatMessage(messages.byAuthor, { name: updatedByName })}
             </span>
           )}
         </CapRow>
@@ -348,6 +464,15 @@ UnifiedPreview.propTypes = {
 
   // Header display
   showHeader: PropTypes.bool, // Show PreviewHeader (true for Test and Preview flow, false for channel component previews)
+
+  // RCS: SMS fallback preview support (same shape as SmsFallback / RCS smsFallbackData)
+  smsFallbackContent: PropTypes.shape({
+    templateContent: PropTypes.string,
+    senderId: PropTypes.string,
+    templateName: PropTypes.string,
+  }),
+  activePreviewTab: PropTypes.oneOf(PREVIEW_TAB_KEYS),
+  onPreviewTabChange: PropTypes.func,
 };
 
 UnifiedPreview.defaultProps = {
@@ -360,6 +485,10 @@ UnifiedPreview.defaultProps = {
   lastModified: null,
   updatedByName: null,
   showHeader: true, // Default to true for Test and Preview flow
+  smsFallbackContent: null,
+  smsFallbackResolvedText: undefined,
+  activePreviewTab: PREVIEW_TAB_RCS,
+  onPreviewTabChange: () => {},
 };
 
 export default UnifiedPreview;

package/app/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -5,7 +5,166 @@
  */
 @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;
+}
+
+/* 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;
+}
+
+/* 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 {
+  z-index: 10030;
+}
+
 .common-test-and-preview-slidebox {
+  .common-test-preview-modal-wrap {
+    z-index: 10003;
+  }
+
+  .ant-modal-mask,
+  .ant-modal-wrap {
+    z-index: 10003;
+  }
+
   .test-preview-header {
     display: flex;
     align-items: center;
@@ -265,6 +424,13 @@
       }
     }
 
+    .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;
@@ -363,14 +529,25 @@
     .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-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 +555,35 @@
   }
 }
 
+// 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;
+  .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/app/v2Components/CommonTestAndPreview/actions.js

@@ -18,6 +18,8 @@ import {
   GET_PREFILLED_VALUES_REQUESTED,
   CLEAR_PREFILLED_VALUES,
   CLEAR_PREVIEW_ERRORS,
+  GET_SENDER_DETAILS_REQUESTED,
+  GET_WECRM_ACCOUNTS_REQUESTED,
 } from './constants';
 
 // ============================================
@@ -125,3 +127,21 @@ export const clearPrefilledValues = () => ({
 export const clearPreviewErrors = () => ({
   type: CLEAR_PREVIEW_ERRORS,
 });
+
+/**
+ * Request sender details for a channel (SMS, EMAIL, WHATSAPP) for delivery settings
+ * @param {Object} payload - { channel, orgUnitId }
+ */
+export const getSenderDetailsRequested = (payload) => ({
+  type: GET_SENDER_DETAILS_REQUESTED,
+  payload,
+});
+
+/**
+ * Request WeCRM accounts (e.g. for WhatsApp account dropdown)
+ * @param {Object} payload - { sourceName } e.g. { sourceName: 'WHATSAPP' }
+ */
+export const getWeCrmAccountsRequested = (payload) => ({
+  type: GET_WECRM_ACCOUNTS_REQUESTED,
+  payload,
+});

package/app/v2Components/CommonTestAndPreview/constants.js

@@ -55,6 +55,16 @@ export const CLEAR_SEARCH_RESULTS = 'app/CommonTestAndPreview/CLEAR_SEARCH_RESUL
 export const CLEAR_PREFILLED_VALUES = 'app/CommonTestAndPreview/CLEAR_PREFILLED_VALUES';
 export const CLEAR_PREVIEW_ERRORS = 'app/CommonTestAndPreview/CLEAR_PREVIEW_ERRORS';
 
+// Get Sender Details (delivery settings for Test and Preview)
+export const GET_SENDER_DETAILS_REQUESTED = 'app/CommonTestAndPreview/GET_SENDER_DETAILS_REQUESTED';
+export const GET_SENDER_DETAILS_SUCCESS = 'app/CommonTestAndPreview/GET_SENDER_DETAILS_SUCCESS';
+export const GET_SENDER_DETAILS_FAILURE = 'app/CommonTestAndPreview/GET_SENDER_DETAILS_FAILURE';
+
+// Get WeCRM Accounts (WhatsApp account list)
+export const GET_WECRM_ACCOUNTS_REQUESTED = 'app/CommonTestAndPreview/GET_WECRM_ACCOUNTS_REQUESTED';
+export const GET_WECRM_ACCOUNTS_SUCCESS = 'app/CommonTestAndPreview/GET_WECRM_ACCOUNTS_SUCCESS';
+export const GET_WECRM_ACCOUNTS_FAILURE = 'app/CommonTestAndPreview/GET_WECRM_ACCOUNTS_FAILURE';
+
 // ============================================
 // CHANNEL CONSTANTS
 // ============================================
@@ -69,6 +79,44 @@ 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
 // ============================================
@@ -94,7 +142,10 @@ export const API_CHANNEL_PUSH = 'PUSH';
 // IDENTIFIER TYPE CONSTANTS
 // ============================================
 export const IDENTIFIER_TYPE_MOBILE = 'mobile';
-export const IDENTIFIER_TYPE_EMAIL = 'email';
+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)
@@ -169,6 +220,11 @@ export const UNSUBSCRIBE_TAG_NAME = 'unsubscribe';
 export const IN_APP_CHANNEL_NAME = 'in-app';
 export const MOBILE_PUSH_CHANNEL_NAME = 'mobile push';
 export const CHANNEL = 'channel';
+export const PHONE_NUMBER = 'PHONE_NUMBER';
+export const DYNAMIC_URL = 'DYNAMIC_URL';
+export const IMAGE = 'IMAGE';
+export const VIDEO = 'VIDEO';
+export const URL = 'URL';
 
 // Initial Payload Template (for reference)
 export const INITIAL_PAYLOAD = {