@capillarytech/creatives-library 8.0.296 → 8.0.297

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.296",
+  "version": "8.0.297",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.js

@@ -22,9 +22,6 @@ import messages from './messages';
 import {
   CHANNELS,
   DEFAULT_DELIVERY_SETTINGS_BY_CHANNEL,
-  NO_OPTIONS_LABEL,
-  HEADER_SIZE_LABEL,
-  BUTTON_TYPE_PRIMARY,
   ROW_KEY_PREFIX,
   DELIVERY_SETTING_KEY_DOMAIN_ID,
   DELIVERY_SETTING_KEY_DOMAIN_GATEWAY_MAP_ID,
@@ -90,9 +87,7 @@ const ModifyDeliverySettings = (props) => {
     senderDetailsOptions,
   ]);
 
-  const noOptionsLabel = formatMessage
-    ? formatMessage(messages.noOptions)
-    : NO_OPTIONS_LABEL;
+  const noOptionsLabel = formatMessage(messages.noOptions);
 
   const allDomainOptions = useMemo(
     () => (senderDetailsOptions || []).map((senderDetails) => ({
@@ -245,7 +240,7 @@ const ModifyDeliverySettings = (props) => {
     }) => (
       <CapRow className="modify-delivery-settings__field-row" key={rowKey}>
         <CapHeader
-          size={HEADER_SIZE_LABEL}
+          size="label"
           title={<FormattedMessage {...titleMessage} />}
           className="modify-delivery-settings__field-header"
         />
@@ -386,7 +381,7 @@ const ModifyDeliverySettings = (props) => {
         disabled: field.disabled,
       }))}
       <CapRow className="modify-delivery-settings__actions">
-        <CapButton type={BUTTON_TYPE_PRIMARY} onClick={handleDone}>
+        <CapButton type="primary" onClick={handleDone}>
           <FormattedMessage {...messages.done} />
         </CapButton>
       </CapRow>

package/v2Components/CommonTestAndPreview/DeliverySettings/constants.js

@@ -5,21 +5,9 @@
 
 import { CHANNELS } from '../constants';
 
-/** Fallback label when no dropdown options (used when formatMessage unavailable) */
-export const NO_OPTIONS_LABEL = 'No options';
-
-/** Fallback label when delivery settings are not configured (used when formatMessage unavailable) */
-export const NOT_CONFIGURED_LABEL = 'Not configured';
-
 /** Placeholder shown in summary when a value is empty */
 export const SUMMARY_EMPTY_PLACEHOLDER = '—';
 
-/** CapHeading type for delivery settings section title */
-export const HEADING_TYPE_H10 = 'h10';
-
-/** CapRow type for flex layout */
-export const ROW_TYPE_FLEX = 'flex';
-
 /** Channel names — use CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP from parent constants */
 export { CHANNELS } from '../constants';
 
@@ -34,26 +22,9 @@ export const DELIVERY_SETTING_KEY_SENDER_REPLY_TO = 'senderReplyTo';
 export const DELIVERY_SETTING_KEY_SOURCE_ACCOUNT_IDENTIFIER = 'sourceAccountIdentifier';
 export const DELIVERY_SETTING_KEY_SENDER_MOB_NUM = 'senderMobNum';
 
-/** CapLabel type props */
-export const LABEL_TYPE_LABEL1 = 'label1';
-export const LABEL_TYPE_LABEL2 = 'label2';
-export const LABEL_TYPE_LABEL9 = 'label9';
-
-/** CapIcon type for edit action */
-export const ICON_TYPE_EDIT = 'edit';
-
-/** CapSlideBox size prop */
-export const SLIDE_BOX_SIZE_L = 'size-l';
-
 /** data-testid for delivery settings edit icon */
 export const TEST_ID_DELIVERY_SETTINGS_EDIT = 'delivery-settings-edit';
 
-/** CapHeader size prop for form labels */
-export const HEADER_SIZE_LABEL = 'label';
-
-/** CapButton type for primary action */
-export const BUTTON_TYPE_PRIMARY = 'primary';
-
 /** Prefix for row keys in field list map */
 export const ROW_KEY_PREFIX = 'row-';
 

package/v2Components/CommonTestAndPreview/DeliverySettings/index.js

@@ -7,13 +7,11 @@
 
 import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";
-import {
-  CapRow,
-  CapHeading,
-  CapIcon,
-  CapLabel,
-  CapSlideBox,
-} from "@capillarytech/cap-ui-library";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import CapSlideBox from "@capillarytech/cap-ui-library/CapSlideBox";
 import { FormattedMessage } from "react-intl";
 import get from "lodash/get";
 import messages from "./messages";
@@ -21,10 +19,7 @@ import ModifyDeliverySettings from "./ModifyDeliverySettings";
 import {
   CHANNELS,
   CHANNELS_WITH_DELIVERY_SETTINGS,
-  NOT_CONFIGURED_LABEL,
   SUMMARY_EMPTY_PLACEHOLDER,
-  HEADING_TYPE_H10,
-  ROW_TYPE_FLEX,
   DELIVERY_SETTING_KEY_DOMAIN_ID,
   DELIVERY_SETTING_KEY_GSM_SENDER_ID,
   DELIVERY_SETTING_KEY_SENDER_EMAIL,
@@ -32,11 +27,6 @@ import {
   DELIVERY_SETTING_KEY_SENDER_REPLY_TO,
   DELIVERY_SETTING_KEY_SOURCE_ACCOUNT_IDENTIFIER,
   DELIVERY_SETTING_KEY_SENDER_MOB_NUM,
-  LABEL_TYPE_LABEL1,
-  LABEL_TYPE_LABEL2,
-  LABEL_TYPE_LABEL9,
-  ICON_TYPE_EDIT,
-  SLIDE_BOX_SIZE_L,
   TEST_ID_DELIVERY_SETTINGS_EDIT,
 } from "./constants";
 import "./DeliverySettings.scss";
@@ -72,9 +62,7 @@ const DeliverySettings = (props) => {
     return null;
   }
 
-  const notConfiguredLabel = formatMessage
-    ? formatMessage(messages.notConfigured)
-    : NOT_CONFIGURED_LABEL;
+  const notConfiguredLabel = formatMessage(messages.notConfigured);
 
   const getSummaryText = () => {
     const empty = SUMMARY_EMPTY_PLACEHOLDER;
@@ -165,19 +153,19 @@ const DeliverySettings = (props) => {
   return (
     <CapRow className="delivery-settings">
       <CapRow className="delivery-settings__heading-row">
-        <CapHeading type={HEADING_TYPE_H10}>
+        <CapHeading type="h10">
           <FormattedMessage {...messages.deliverySettings} />
         </CapHeading>
       </CapRow>
-      <CapRow type={ROW_TYPE_FLEX} className="delivery-settings__summary-row">
-        <CapRow type={ROW_TYPE_FLEX} className="delivery-settings__summary-inner">
+      <CapRow type="flex" className="delivery-settings__summary-row">
+        <CapRow type="flex" className="delivery-settings__summary-inner">
           {summaryObject == null ? (
-            <CapLabel type={LABEL_TYPE_LABEL2}>{notConfiguredLabel}</CapLabel>
+            <CapLabel type="label2">{notConfiguredLabel}</CapLabel>
           ) : (
             Object.entries(summaryObject).map(([key, value]) => (
-              <CapRow type={ROW_TYPE_FLEX} key={key} className="delivery-settings__summary-entry">
-                <CapLabel type={LABEL_TYPE_LABEL1} className="delivery-settings__summary-key">{key}</CapLabel>
-                <CapLabel type={LABEL_TYPE_LABEL9}>
+              <CapRow type="flex" key={key} className="delivery-settings__summary-entry">
+                <CapLabel type="label1" className="delivery-settings__summary-key">{key}</CapLabel>
+                <CapLabel type="label9">
                   :
                   {' '}
                   {value}
@@ -187,7 +175,7 @@ const DeliverySettings = (props) => {
           )}
         </CapRow>
         <CapIcon
-          type={ICON_TYPE_EDIT}
+          type="edit"
           onClick={openSlideBox}
           className="delivery-settings__edit-icon"
           data-testid={TEST_ID_DELIVERY_SETTINGS_EDIT}
@@ -198,7 +186,7 @@ const DeliverySettings = (props) => {
       {isSlideBoxOpen && (
         <CapSlideBox
           show
-          size={SLIDE_BOX_SIZE_L}
+          size="size-l"
           header={<FormattedMessage {...messages.deliverySettings} />}
           handleClose={closeSlideBox}
           content={(

package/v2Components/CommonTestAndPreview/tests/DeliverySettings/index.test.js

@@ -11,18 +11,17 @@ import { CHANNELS } from '../../constants';
 
 jest.mock('../../DeliverySettings/DeliverySettings.scss', () => ({}));
 
-jest.mock('@capillarytech/cap-ui-library', () => ({
-  CapRow: ({ children, className, ...rest }) => <div className={className} data-testid="cap-row" {...rest}>{children}</div>,
-  CapHeading: ({ children }) => <div data-testid="cap-heading">{children}</div>,
-  CapIcon: ({ onClick, className, 'data-testid': testId }) => <button type="button" onClick={onClick} className={className} data-testid={testId || 'cap-icon'} aria-label="edit" />,
-  CapLabel: ({ children, type }) => <span data-type={type}>{children}</span>,
-  CapSlideBox: ({ show, content, handleClose }) => (show ? (
-    <div data-testid="cap-slidebox">
-      <button type="button" onClick={handleClose} data-testid="slidebox-close">Close</button>
-      {content}
-    </div>
-  ) : null),
-}));
+// Mock subpath imports (used by DeliverySettings/index.js and ModifyDeliverySettings.js)
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => ({ children, className, ...rest }) => <div className={className} data-testid="cap-row" {...rest}>{children}</div>);
+jest.mock('@capillarytech/cap-ui-library/CapHeading', () => ({ children }) => <div data-testid="cap-heading">{children}</div>);
+jest.mock('@capillarytech/cap-ui-library/CapIcon', () => ({ onClick, className, 'data-testid': testId }) => <button type="button" onClick={onClick} className={className} data-testid={testId || 'cap-icon'} aria-label="edit" />);
+jest.mock('@capillarytech/cap-ui-library/CapLabel', () => ({ children, type }) => <span data-type={type}>{children}</span>);
+jest.mock('@capillarytech/cap-ui-library/CapSlideBox', () => ({ show, content, handleClose }) => (show ? (
+  <div data-testid="cap-slidebox">
+    <button type="button" onClick={handleClose} data-testid="slidebox-close">Close</button>
+    {content}
+  </div>
+) : null));
 
 const mockModifyDeliverySettings = jest.fn();
 jest.mock('../../DeliverySettings/ModifyDeliverySettings', () => function MockModifyDeliverySettings(props) {