@capillarytech/creatives-library 8.0.330-alpha.0 → 8.0.330

package/constants/unified.js

@@ -159,24 +159,6 @@ export const TAG_CONTENT_REGEX = /{{([^}]+)}}/g;
 export const ENTRY_TRIGGER_TAG_REGEX = /\bentryTrigger\.\w+(?:\.\w+)?(?:\(\w+\))?/g;
 export const SKIP_TAGS_REGEX_GROUPS = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d", "unsubscribe\\(#[a-zA-Z\\d]{6}\\)", "Link_to_[a-zA-Z]", "SURVEY.*.TOKEN", "^[A-Za-z].*\\([a-zA-Z\\d]*\\)", "referral_unique_(code|url).*userid"];
 
-// --- Template variable tokens (`{{var}}`, DLT `{#var#}`) ---
-/** Global: all `{{…}}` placeholders in a string. */
-export const DEFAULT_MUSTACHE_VAR_REGEX = /\{\{[^}]+\}\}/g;
-/** Global: `{{…}}` or DLT `{#…#}` tokens (SMS combined mode). */
-export const COMBINED_SMS_TEMPLATE_VAR_REGEX = /\{\{[^}]+\}\}|\{\#[^#]*\#\}/g;
-/** Full-string check: one mustache token. */
-export const MUSTACHE_VAR_TOKEN_FULL_STRING_REGEX = /^\{\{[^}]+\}\}$/;
-/** Full-string check: one DLT hash token. */
-export const DLT_HASH_VAR_TOKEN_FULL_STRING_REGEX = /^\{\#[^#]*\#\}$/;
-/** Full-string with capture group: inner name for `{{ name }}`-style tokens (whitespace-tolerant). */
-export const MUSTACHE_TOKEN_INNER_NAME_REGEX = /^\{\{\s*([^}]+?)\s*\}\}$/;
-/** Full-string with capture group: inner name/body for `{# name #}` DLT tokens (whitespace-tolerant). */
-export const DLT_HASH_TOKEN_INNER_NAME_REGEX = /^\{#\s*(.*?)\s*#\}$/;
-/** Global with capture group: inner name inside `{{name}}`. */
-export const MUSTACHE_VAR_NAME_CAPTURE_REGEX = /\{\{([^}]+)\}\}/g;
-/** Global with capture group: inner body inside `{#body#}`. */
-export const DLT_VAR_BODY_CAPTURE_REGEX = /\{\#([^#]*)\#\}/g;
-
 export const GET_TRANSLATION_MAPPED = {
   'en': 'en-US',
   'zh-cn': 'zh',

package/package.json

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

package/services/api.js

@@ -741,21 +741,4 @@ export const getBeePopupBuilderToken = () => {
   return request(url, getAPICallObject('GET'));
 };
 
-/**
- * Look up member by identifier (email or mobile) for add test customer flow.
- * Uses standard API auth headers (no x-cap-ct) to avoid CORS preflight issues with node layer.
- * @param {string} identifierType - 'email' or 'mobile'
- * @param {string} identifierValue - email address or mobile number
- * @returns {Promise} Promise resolving to { success, response: { exists, customerDetails } }
- */
-export const getMembersLookup = (identifierType, identifierValue) => {
-  const url = `${API_ENDPOINT}/members?identifierType=${encodeURIComponent(identifierType)}&identifierValue=${encodeURIComponent(identifierValue)}`;
-  return request(url, getAPICallObject('GET'));
-};
-
-export const createTestCustomer = (payload) => {
-  const url = `${API_ENDPOINT}/testCustomers`;
-  return request(url, getAPICallObject('POST', payload));
-};
-
 export {request, getAPICallObject};

package/services/tests/api.test.js

@@ -29,8 +29,6 @@ import {
   getAssetStatus,
   getBeePopupBuilderToken,
   getCmsAccounts,
-  getMembersLookup,
-  createTestCustomer,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -1016,86 +1014,3 @@ describe('getCmsAccounts', () => {
     expect(result).toBeInstanceOf(Promise);
   });
 });
-
-describe('getMembersLookup', () => {
-  beforeEach(() => {
-    global.fetch = jest.fn();
-    global.fetch.mockReturnValue(Promise.resolve({
-      status: 200,
-      json: () => Promise.resolve({ success: true, response: { exists: false, customerDetails: [] } }),
-    }));
-  });
-
-  it('should return a Promise', () => {
-    const result = getMembersLookup('email', 'user@example.com');
-    expect(result).toBeInstanceOf(Promise);
-  });
-
-  it('should be callable with identifierType and identifierValue', () => {
-    expect(typeof getMembersLookup).toBe('function');
-    const result = getMembersLookup('mobile', '9123456789');
-    expect(result).toBeInstanceOf(Promise);
-  });
-
-  it('should call fetch with correct URL encoding and GET method', () => {
-    global.fetch.mockClear();
-    getMembersLookup('email', 'user+test@example.com');
-    expect(global.fetch).toHaveBeenCalled();
-    const calls = global.fetch.mock.calls;
-    const withEncoding = calls.find(
-      (c) =>
-        c[0] &&
-        String(c[0]).includes('members') &&
-        String(c[0]).includes('identifierType=email') &&
-        String(c[0]).includes('user%2Btest%40example.com')
-    );
-    if (withEncoding) {
-      const [url, options] = withEncoding;
-      expect(url).toContain('identifierType=email');
-      expect(url).toContain('identifierValue=user%2Btest%40example.com');
-      expect(options?.method || 'GET').toBe('GET');
-    }
-    const anyMembersCall = calls.find((c) => c[0] && String(c[0]).includes('members'));
-    expect(anyMembersCall).toBeDefined();
-    expect(anyMembersCall[0]).toContain('identifierType=');
-    expect(anyMembersCall[0]).toContain('identifierValue=');
-    expect(anyMembersCall[1]?.method || 'GET').toBe('GET');
-  });
-});
-
-describe('createTestCustomer', () => {
-  beforeEach(() => {
-    global.fetch = jest.fn();
-    global.fetch.mockReturnValue(Promise.resolve({
-      status: 200,
-      json: () => Promise.resolve({ success: true }),
-    }));
-  });
-
-  it('should return a Promise', () => {
-    const payload = { customer: { email: 'test@example.com', firstName: 'Test' } };
-    const result = createTestCustomer(payload);
-    expect(result).toBeInstanceOf(Promise);
-  });
-
-  it('should accept customerId payload for existing customer', () => {
-    const payload = { customerId: 'cust-123' };
-    const result = createTestCustomer(payload);
-    expect(result).toBeInstanceOf(Promise);
-    expect(global.fetch).toHaveBeenCalled();
-    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
-    expect(lastCall[0]).toContain('testCustomers');
-    expect(lastCall[1].method).toBe('POST');
-    expect(lastCall[1].body).toBe(JSON.stringify(payload));
-  });
-
-  it('should call fetch with /testCustomers URL and POST method', () => {
-    const payload = { customer: { email: 'n@b.co', firstName: 'N' } };
-    createTestCustomer(payload);
-    expect(global.fetch).toHaveBeenCalled();
-    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
-    expect(lastCall[0]).toContain('testCustomers');
-    expect(lastCall[1].method).toBe('POST');
-    expect(lastCall[1].body).toBe(JSON.stringify(payload));
-  });
-});

package/utils/commonUtils.js

@@ -17,8 +17,6 @@ import {
 } from "../v2Containers/CreativesContainer/constants";
 import { GLOBAL_CONVERT_OPTIONS } from "../v2Components/FormBuilder/constants";
 import { SMS_TRAI_VAR } from '../v2Containers/SmsTrai/Edit/constants';
-import { EMAIL_REGEX, PHONE_REGEX } from '../v2Components/CommonTestAndPreview/constants';
-
 export const apiMessageFormatHandler = (id, fallback) => (
   <FormattedMessage id={id} defaultMessage={fallback} />
 );
@@ -532,29 +530,3 @@ export const checkForPersonalizationTokens = (formData) => {
   }
   return false;
 };
-
-export const isValidEmail = (email) => EMAIL_REGEX.test(email);
-export const isValidMobile = (mobile) => PHONE_REGEX.test(mobile);
-
-export const formatPhoneNumber = (phone) => {
-  if (!phone) return '';
-  return String(phone).replace(/[^\d]/g, '');
-};
-
-/**
- * TRAI sender IDs on persisted RCS SMS fallback: may live on the merged object, under
- * `templateConfigs`, or (legacy) `templateConfigs.header`. Same resolution order as
- * `createPayload` in `Rcs/index.js`.
- */
-export function extractRegisteredSenderIdsFromSmsFallbackRecord(record) {
-  if (!record || typeof record !== 'object') return null;
-  const tc = record.templateConfigs && typeof record.templateConfigs === 'object'
-    ? record.templateConfigs
-    : {};
-  const candidates = [record.registeredSenderIds, tc.registeredSenderIds, tc.header];
-  for (let i = 0; i < candidates.length; i += 1) {
-    const a = candidates[i];
-    if (Array.isArray(a) && a.length > 0) return a;
-  }
-  return null;
-}

package/utils/tests/commonUtil.test.js

@@ -8,11 +8,6 @@ import {
   validateCarouselCards,
   hasPersonalizationTags,
   checkForPersonalizationTokens,
-  isValidEmail,
-  isValidMobile,
-  formatPhoneNumber,
-  getMessageForDevice,
-  getTitleForDevice,
 } from "../commonUtils";
 import { skipTags } from "../tagValidations";
 import { SMS_TRAI_VAR } from '../../v2Containers/SmsTrai/Edit/constants';
@@ -634,170 +629,6 @@ describe("validateLiquidTemplateContent", () => {
   });
 });
 
-describe("isValidEmail", () => {
-  it("returns true for valid email addresses", () => {
-    expect(isValidEmail("user@example.com")).toBe(true);
-    expect(isValidEmail("test.user@domain.co")).toBe(true);
-    expect(isValidEmail("a@b.co")).toBe(true);
-  });
-
-  it("returns false for invalid email addresses", () => {
-    expect(isValidEmail("")).toBe(false);
-    expect(isValidEmail("invalid")).toBe(false);
-    expect(isValidEmail("@nodomain.com")).toBe(false);
-    expect(isValidEmail("noatsign.com")).toBe(false);
-    expect(isValidEmail("missingtld@domain")).toBe(false);
-    expect(isValidEmail("  user@example.com  ")).toBe(false);
-  });
-
-  it("returns true for edge case single-char local part", () => {
-    expect(isValidEmail("x@y.co")).toBe(true);
-  });
-});
-
-describe("isValidMobile", () => {
-  it("returns true for valid mobile numbers (8-15 digits, no leading zero)", () => {
-    expect(isValidMobile("12345678")).toBe(true);
-    expect(isValidMobile("9123456789")).toBe(true);
-    expect(isValidMobile("123456789012345")).toBe(true);
-  });
-
-  it("returns false for invalid mobile numbers", () => {
-    expect(isValidMobile("")).toBe(false);
-    expect(isValidMobile("01234567")).toBe(false);
-    expect(isValidMobile("1234567")).toBe(false);
-    expect(isValidMobile("1234567890123456")).toBe(false);
-    expect(isValidMobile("abc12345678")).toBe(false);
-    expect(isValidMobile("12345 67890")).toBe(false);
-  });
-
-  it("returns true for exactly 8 and exactly 15 digits", () => {
-    expect(isValidMobile("12345678")).toBe(true);
-    expect(isValidMobile("123456789012345")).toBe(true);
-  });
-});
-
-describe("formatPhoneNumber", () => {
-  it("returns empty string for falsy input", () => {
-    expect(formatPhoneNumber("")).toBe("");
-    expect(formatPhoneNumber(null)).toBe("");
-    expect(formatPhoneNumber(undefined)).toBe("");
-  });
-
-  it("strips non-digit characters", () => {
-    expect(formatPhoneNumber("91 234 567 890")).toBe("91234567890");
-    expect(formatPhoneNumber("+91-234567890")).toBe("91234567890");
-    expect(formatPhoneNumber("(123) 456-7890")).toBe("1234567890");
-  });
-
-  it("returns digits-only string unchanged", () => {
-    expect(formatPhoneNumber("9123456789")).toBe("9123456789");
-  });
-
-  it("returns empty string for whitespace-only input", () => {
-    expect(formatPhoneNumber("   ")).toBe("");
-  });
-});
-
-describe("hasPersonalizationTags", () => {
-  it("returns true when text has liquid tags {{ }}", () => {
-    expect(hasPersonalizationTags("Hello {{name}}")).toBe(true);
-    expect(hasPersonalizationTags("{{foo}}")).toBe(true);
-  });
-
-  it("returns true when text has bracket tags [ ]", () => {
-    expect(hasPersonalizationTags("Hello [event.name]")).toBe(true);
-    expect(hasPersonalizationTags("[tag]")).toBe(true);
-  });
-
-  it("returns false for empty or no tags", () => {
-    expect(hasPersonalizationTags("")).toBeFalsy();
-    expect(hasPersonalizationTags()).toBeFalsy();
-    expect(hasPersonalizationTags("plain text")).toBe(false);
-    expect(hasPersonalizationTags("only {{ open")).toBe(false);
-  });
-
-  it("returns false when only [ or only ] present without matching pair", () => {
-    expect(hasPersonalizationTags("only [ open")).toBe(false);
-    expect(hasPersonalizationTags("only ] close")).toBe(false);
-  });
-
-  it("returns true when liquid tags have content with spaces", () => {
-    expect(hasPersonalizationTags("Hello {{ customer.name }}")).toBe(true);
-  });
-});
-
-describe("getMessageForDevice", () => {
-  it("returns message for device from templateData", () => {
-    const templateData = {
-      versions: {
-        android: { base: { expandableDetails: { message: "Android msg" } } },
-        ios: { base: { expandableDetails: { message: "iOS msg" } } },
-      },
-    };
-    expect(getMessageForDevice(templateData, "android")).toBe("Android msg");
-    expect(getMessageForDevice(templateData, "ios")).toBe("iOS msg");
-  });
-
-  it("returns undefined for missing path", () => {
-    expect(getMessageForDevice(null, "android")).toBeUndefined();
-    expect(getMessageForDevice({}, "android")).toBeUndefined();
-    expect(getMessageForDevice({ versions: {} }, "android")).toBeUndefined();
-  });
-
-  it("returns undefined when base exists but expandableDetails is missing", () => {
-    expect(getMessageForDevice({ versions: { android: { base: {} } } }, "android")).toBeUndefined();
-  });
-});
-
-describe("getTitleForDevice", () => {
-  it("returns title for device from templateData", () => {
-    const templateData = {
-      versions: {
-        android: { base: { title: "Android title" } },
-        ios: { base: { title: "iOS title" } },
-      },
-    };
-    expect(getTitleForDevice(templateData, "android")).toBe("Android title");
-    expect(getTitleForDevice(templateData, "ios")).toBe("iOS title");
-  });
-
-  it("returns empty string for missing title", () => {
-    expect(getTitleForDevice(null, "android")).toBe("");
-    expect(getTitleForDevice({}, "android")).toBe("");
-    expect(getTitleForDevice({ versions: { android: { base: {} } } }, "android")).toBe("");
-  });
-
-  it("returns empty string when base.title is undefined", () => {
-    expect(getTitleForDevice({ versions: { android: { base: { title: undefined } } } }, "android")).toBe("");
-  });
-});
-
-describe("checkForPersonalizationTokens", () => {
-  it("returns true when formData contains liquid or bracket tokens", () => {
-    expect(checkForPersonalizationTokens({ 0: { content: "Hi {{name}}" } })).toBe(true);
-    expect(checkForPersonalizationTokens({ tab1: { message: "Hello [event.id]" } })).toBe(true);
-  });
-
-  it("returns false for empty or no tokens", () => {
-    expect(checkForPersonalizationTokens(null)).toBe(false);
-    expect(checkForPersonalizationTokens({})).toBe(false);
-    expect(checkForPersonalizationTokens({ 0: { content: "plain" } })).toBe(false);
-  });
-
-  it("returns false for non-object formData", () => {
-    expect(checkForPersonalizationTokens("string")).toBe(false);
-  });
-
-  it("returns true for two-level nested object containing token", () => {
-    expect(checkForPersonalizationTokens({ tab: { body: "Hi {{name}}" } })).toBe(true);
-  });
-
-  it("returns false for formData with array value (no string tokens)", () => {
-    expect(checkForPersonalizationTokens({ 0: { items: ["a", "b"] } })).toBe(false);
-  });
-});
-
 describe("validateMobilePushContent", () => {
   const formatMessage = jest.fn(msg => msg.id);
   const messages = {

package/v2Components/CapTagList/index.js

@@ -382,9 +382,6 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   render() {
     const {
       hidePopover = false, intl = {}, moduleFilterEnabled, label, modalProps, channel, fetchingSchemaError = false,
-      overlayStyle,
-      overlayClassName,
-      getPopupContainer,
     } = this.props;
     const {formatMessage} = intl;
     const {
@@ -477,9 +474,6 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             content={contentSection}
             trigger="click"
             placement={this.props.popoverPlacement || (channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop")}
-            overlayStyle={overlayStyle}
-            overlayClassName={overlayClassName}
-            getPopupContainer={getPopupContainer}
           >
             <CapTooltip
               title={
@@ -551,10 +545,6 @@ CapTagList.propTypes = {
   disableTooltipMsg: PropTypes.string,
   fetchingSchemaError: PropTypes.bool,
   popoverPlacement: PropTypes.string,
-  overlayStyle: PropTypes.object,
-  overlayClassName: PropTypes.string,
-  /** e.g. () => document.body — avoids overflow/stacking issues inside slideboxes */
-  getPopupContainer: PropTypes.func,
 };
 
 CapTagList.defaultValue = {

package/v2Components/CommonTestAndPreview/CustomValuesEditor.js

@@ -8,7 +8,6 @@ import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapInput from '@capillarytech/cap-ui-library/CapInput';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import messages from './messages';
-import { CUSTOM_VALUES_EDITOR_SECTION_FALLBACK_KEY } from './constants';
 
 const CustomValuesEditor = ({
   isExtractingTags,
@@ -17,16 +16,15 @@ const CustomValuesEditor = ({
   setShowJSON,
   customValues,
   handleJSONTextChange,
-  sections,
+  extractedTags,
+  requiredTags,
+  optionalTags,
   handleCustomValueChange,
   handleDiscardCustomValues,
   handleUpdatePreview,
   isUpdatingPreview,
   formatMessage,
 }) => {
-  /** Same as SMS Test & Preview: show token path from extract-tags (fullPath or name). */
-  const getPersonalizationTagColumnLabel = (tagNode) => tagNode?.fullPath ?? tagNode?.name ?? '';
-
   if (isExtractingTags) {
     return (
       <CapRow className="loading-container">
@@ -79,68 +77,52 @@ const CustomValuesEditor = ({
         </CapRow>
       ) : (
         <>
-          {(sections || []).filter((tagsSection) =>
-            (tagsSection?.requiredTags?.length || 0) + (tagsSection?.optionalTags?.length || 0) > 0).map((section) => (
-            <React.Fragment key={section.key || section.title?.id || section.title || CUSTOM_VALUES_EDITOR_SECTION_FALLBACK_KEY}>
-              {section.title ? (
-                <CapLabel type="label2" className="tags-section-title">
-                  {typeof section.title === 'string' ? section.title : <FormattedMessage {...section.title} />}
+          {extractedTags?.length > 0 && (
+            <CapRow className="values-table">
+              <CapRow className="table-header">
+                <CapLabel type="label31" className="header-cell">
+                  <FormattedMessage {...messages.personalizationTags} />
                 </CapLabel>
-              ) : null}
-              <CapRow className="values-table">
-                <CapRow className="table-header">
-                  <CapLabel type="label31" className="header-cell">
-                    <FormattedMessage {...messages.personalizationTags} />
-                  </CapLabel>
-                  <CapLabel type="label31" className="header-cell">
-                    <FormattedMessage {...messages.customValues} />
-                  </CapLabel>
-                </CapRow>
-                {(section?.requiredTags || []).map((tag, tagIndex) => {
-                  const personalizationTagColumnText = getPersonalizationTagColumnLabel(tag);
-                  return (
-                  <CapRow key={tag?.fullPath ?? `required-${tagIndex}`} className="value-row">
-                    <CapRow className="tag-name">
-                      {personalizationTagColumnText}
-                      <span className="required-tag-indicator">*</span>
-                    </CapRow>
-                    <CapRow className="tag-input">
-                      <CapInput
-                        type="text"
-                        isRequired
-                        className="tag-input-field"
-                        value={customValues?.[tag?.fullPath] ?? ''}
-                        onChange={(e) => handleCustomValueChange(tag?.fullPath, e.target.value)}
-                        placeholder={formatMessage(messages.enterValue)}
-                        size="small"
-                      />
-                    </CapRow>
+                <CapLabel type="label31" className="header-cell">
+                  <FormattedMessage {...messages.customValues} />
+                </CapLabel>
+              </CapRow>
+              {requiredTags.map((tag) => (
+                <CapRow key={tag.fullPath} className="value-row">
+                  <CapRow className="tag-name">
+                    {tag.fullPath}
+                    <span className="required-tag-indicator">*</span>
                   </CapRow>
-                  );
-                })}
-                {(section?.optionalTags || []).map((tag, tagIndex) => {
-                  const personalizationTagColumnText = getPersonalizationTagColumnLabel(tag);
-                  return (
-                  <CapRow key={tag?.fullPath ?? `optional-${tagIndex}`} className="value-row">
-                    <CapRow className="tag-name">
-                      {personalizationTagColumnText}
-                    </CapRow>
-                    <CapRow className="tag-input">
-                      <CapInput
-                        type="text"
-                        className="tag-input-field"
-                        value={customValues?.[tag?.fullPath] ?? ''}
-                        onChange={(e) => handleCustomValueChange(tag?.fullPath, e.target.value)}
-                        placeholder={formatMessage(messages.enterValue)}
-                        size="small"
-                      />
-                    </CapRow>
+                  <CapRow className="tag-input">
+                    <CapInput
+                      type="text"
+                      isRequired
+                      className="tag-input-field"
+                      value={customValues[tag.fullPath] || ''}
+                      onChange={(e) => handleCustomValueChange(tag.fullPath, e.target.value)}
+                      placeholder={formatMessage(messages.enterValue)}
+                      size="small"
+                    />
                   </CapRow>
-                  );
-                })}
-              </CapRow>
-            </React.Fragment>
-          ))}
+                </CapRow>
+              ))}
+              {optionalTags?.map((tag) => (
+                <CapRow key={tag.fullPath} className="value-row">
+                  <CapRow className="tag-name">{tag.fullPath}</CapRow>
+                  <CapRow className="tag-input">
+                    <CapInput
+                      type="text"
+                      className="tag-input-field"
+                      value={customValues[tag.fullPath] || ''}
+                      onChange={(e) => handleCustomValueChange(tag.fullPath, e.target.value)}
+                      placeholder={formatMessage(messages.enterValue)}
+                      size="small"
+                    />
+                  </CapRow>
+                </CapRow>
+              ))}
+            </CapRow>
+          )}
         </>
       )}
       <CapRow className="editor-actions">
@@ -174,12 +156,9 @@ CustomValuesEditor.propTypes = {
   setShowJSON: PropTypes.func.isRequired,
   customValues: PropTypes.object.isRequired,
   handleJSONTextChange: PropTypes.func.isRequired,
-  sections: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    requiredTags: PropTypes.array,
-    optionalTags: PropTypes.array,
-  })).isRequired,
+  extractedTags: PropTypes.array.isRequired,
+  requiredTags: PropTypes.array.isRequired,
+  optionalTags: PropTypes.array.isRequired,
   handleCustomValueChange: PropTypes.func.isRequired,
   handleDiscardCustomValues: PropTypes.func.isRequired,
   handleUpdatePreview: PropTypes.func.isRequired,

package/v2Components/CommonTestAndPreview/DeliverySettings/DeliverySettings.scss

@@ -18,17 +18,11 @@
   }
 
   &__summary-entry {
-    display: flex;
-    align-items: baseline;
-    gap: 0;
     margin-right: $CAP_SPACE_18;
   }
 
-  &__summary-key,
-  &__summary-value {
-    line-height: 1.4;
-    margin-top: 0;
-    margin-bottom: 0;
+  &__summary-key {
+    line-height: $CAP_SPACE_16;
   }
 
   &__edit-icon {