@capillarytech/creatives-library 8.0.319 → 8.0.320

package/constants/unified.js

@@ -159,6 +159,20 @@ 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 = /^\{\#[^#]*\#\}$/;
+/** 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.319",
+  "version": "8.0.320",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/templateVarUtils.js

@@ -0,0 +1,172 @@
+/**
+ * Shared utilities for templates containing {{var}} and DLT `{#var#}` tokens.
+ * Same split process used by WhatsApp/RCS: match vars with regex, then split content at each var.
+ */
+
+import {
+  COMBINED_SMS_TEMPLATE_VAR_REGEX,
+  DEFAULT_MUSTACHE_VAR_REGEX,
+  DLT_HASH_VAR_TOKEN_FULL_STRING_REGEX,
+  DLT_VAR_BODY_CAPTURE_REGEX,
+  MUSTACHE_VAR_NAME_CAPTURE_REGEX,
+  MUSTACHE_VAR_TOKEN_FULL_STRING_REGEX,
+} from '../constants/unified';
+
+export { COMBINED_SMS_TEMPLATE_VAR_REGEX, DEFAULT_MUSTACHE_VAR_REGEX } from '../constants/unified';
+
+const isMustacheVarToken = (s) =>
+  typeof s === 'string' && MUSTACHE_VAR_TOKEN_FULL_STRING_REGEX.test(s);
+
+export const isDltHashVarToken = (s) =>
+  typeof s === 'string' && DLT_HASH_VAR_TOKEN_FULL_STRING_REGEX.test(s);
+
+export const isAnyTemplateVarToken = (s) => isMustacheVarToken(s) || isDltHashVarToken(s);
+
+/**
+ * `RegExp.prototype.exec` only advances `lastIndex` when the `g` and/or `y` flag is set.
+ * A non-global regex in a `while ((m = re.exec(s)) !== null)` loop never advances and can run forever.
+ *
+ * @param {RegExp} regex
+ * @returns {RegExp} Same instance if already global; otherwise a new RegExp with `g` appended to flags.
+ */
+function ensureGlobalRegexForExecLoop(regex) {
+  if (!regex || !(regex instanceof RegExp) || regex.global) {
+    return regex;
+  }
+  return new RegExp(regex.source, `${regex.flags}g`);
+}
+
+/**
+ * Splits `content` into alternating plain-text segments and variable tokens, using the order of
+ * matches in `matchedVariableTokens` (e.g. from `String.prototype.match` with a global regex).
+ *
+ * @param {string[]} matchedVariableTokens - Matched tokens in left-to-right order
+ * @param {string} content - Full template string
+ * @returns {string[]}
+ */
+export const splitContentByOrderedVarTokens = (matchedVariableTokens, content) => {
+  const segmentList = [];
+  const tokenQueue = [...(matchedVariableTokens ?? [])];
+  let remainder = content ?? '';
+  while ((remainder?.length ?? 0) > 0) {
+    const nextVarToken = tokenQueue?.[0];
+    if (nextVarToken == null || nextVarToken === '') {
+      segmentList.push(remainder);
+      break;
+    }
+    const varStartIndex = remainder.indexOf(nextVarToken);
+    if (varStartIndex !== -1) {
+      segmentList.push(remainder.substring(0, varStartIndex));
+      segmentList.push(nextVarToken);
+      const afterVar = varStartIndex + (nextVarToken?.length ?? 0);
+      remainder = remainder.substring(afterVar, remainder?.length ?? 0);
+      tokenQueue.shift();
+    } else {
+      segmentList.push(remainder);
+      break;
+    }
+  }
+  return segmentList;
+};
+
+/**
+ * Splits a template string into an array of text + {{var}} segments using the given regex.
+ *
+ * @param {string} str - Template string
+ * @param {RegExp} [varRegex] - Regex that matches var tokens; defaults to DEFAULT_MUSTACHE_VAR_REGEX
+ * @returns {string[]}
+ */
+export const splitTemplateVarString = (str = '', varRegex = DEFAULT_MUSTACHE_VAR_REGEX) => {
+  if (!str) return [];
+  const matchedVariableTokens = str.match(varRegex) || [];
+  return splitContentByOrderedVarTokens(matchedVariableTokens, str).filter(
+    (segment) => segment === 0 || segment
+  );
+};
+
+/**
+ * Extracts unique variable names from `{{var}}` (and, when using default capture, `{#var#}`) strings.
+ *
+ * @param {string} templateStr
+ * @param {RegExp} [captureRegex] - regex with a single capture group for the var name; if omitted, also scans DLT `{#…#}`.
+ * @returns {string[]}
+ */
+export const extractTemplateVariables = (templateStr = '', captureRegex) => {
+  if (!templateStr) return [];
+  const variables = [];
+  const add = (name) => {
+    const n = (name || '').trim();
+    if (n && !variables.includes(n)) variables.push(n);
+  };
+  const mustacheRe = ensureGlobalRegexForExecLoop(
+    captureRegex || MUSTACHE_VAR_NAME_CAPTURE_REGEX,
+  );
+  let match;
+  while ((match = mustacheRe.exec(templateStr)) !== null) {
+    add(match?.[1]);
+  }
+  if (!captureRegex) {
+    const dltRe = new RegExp(DLT_VAR_BODY_CAPTURE_REGEX.source, DLT_VAR_BODY_CAPTURE_REGEX.flags);
+    let dltMatch;
+    while ((dltMatch = dltRe.exec(templateStr)) !== null) {
+      add(dltMatch?.[1] || 'var');
+    }
+  }
+  return variables;
+};
+
+/**
+ * SMS / DLT template preview: replace `{{…}}` / `{#…#}` tokens using `varMapData` keys `${token}_${index}`.
+ * Used by SmsTraiEdit (RCS SMS fallback) and UnifiedPreview fallback SMS bubble.
+ * DLT `{#…#}`: empty / unset slot values show the raw token (matches DLT preview UX); mustache `{{…}}` still
+ * resolves to empty when the slot is cleared.
+ */
+export const getFallbackResolvedContent = (templateStr = '', varMapData = {}) => {
+  const fallbackVarSlotMap = varMapData ?? {};
+  const templateSegments = splitTemplateVarString(templateStr, COMBINED_SMS_TEMPLATE_VAR_REGEX);
+  return templateSegments
+    .map((segment, segmentIndex) => {
+      const isVariableToken = typeof segment === 'string' && isAnyTemplateVarToken(segment);
+      if (!isVariableToken) return segment;
+      const slotKey = `${segment}_${segmentIndex}`;
+      if (Object.prototype.hasOwnProperty.call(fallbackVarSlotMap, slotKey)) {
+        const slotValue = fallbackVarSlotMap[slotKey];
+        if (isDltHashVarToken(segment)) {
+          if (slotValue == null) return segment;
+          const str = String(slotValue);
+          if (str.trim() === '') return segment;
+          return str;
+        }
+        return slotValue == null ? '' : String(slotValue);
+      }
+      if (isDltHashVarToken(segment)) return segment;
+      return '';
+    })
+    .join('');
+};
+
+/**
+ * SMS fallback **card** (library list): show filled slot text; if a slot is empty, unset, or
+ * whitespace-only, show the raw `{{…}}` / `{#…#}` token so “save without labels” still shows
+ * `{#var#}` in the card. {@link getFallbackResolvedContent} keeps DLT placeholders in preview when
+ * slots are empty; mustache cleared slots can still render empty.
+ */
+export const getFallbackResolvedContentForCardDisplay = (templateStr = '', varMapData = {}) => {
+  const fallbackVarSlotMap = varMapData ?? {};
+  const templateSegments = splitTemplateVarString(templateStr, COMBINED_SMS_TEMPLATE_VAR_REGEX);
+  return templateSegments
+    .map((segment, segmentIndex) => {
+      const isVariableToken = typeof segment === 'string' && isAnyTemplateVarToken(segment);
+      if (!isVariableToken) return segment;
+      const slotKey = `${segment}_${segmentIndex}`;
+      if (Object.prototype.hasOwnProperty.call(fallbackVarSlotMap, slotKey)) {
+        const slotValue = fallbackVarSlotMap[slotKey];
+        if (slotValue == null) return segment;
+        const str = String(slotValue);
+        if (str.trim() === '') return segment;
+        return str;
+      }
+      return segment;
+    })
+    .join('');
+};

package/utils/tests/templateVarUtils.test.js

@@ -0,0 +1,160 @@
+import {
+  extractTemplateVariables,
+  splitTemplateVarString,
+  splitContentByOrderedVarTokens,
+  getFallbackResolvedContent,
+  getFallbackResolvedContentForCardDisplay,
+  isDltHashVarToken,
+  isAnyTemplateVarToken,
+} from '../templateVarUtils';
+
+describe('templateVarUtils', () => {
+  describe('splitContentByOrderedVarTokens', () => {
+    it('pushes remainder when next token is not found in string', () => {
+      expect(splitContentByOrderedVarTokens(['{{b}}'], 'hello')).toEqual(['hello']);
+    });
+
+    it('handles empty token queue by pushing remainder', () => {
+      expect(splitContentByOrderedVarTokens([], 'rest')).toEqual(['rest']);
+    });
+
+    it('handles null matchedVariableTokens as empty queue', () => {
+      expect(splitContentByOrderedVarTokens(null, 'abc')).toEqual(['abc']);
+    });
+
+    it('stops and pushes remainder when next token in queue is empty string', () => {
+      expect(splitContentByOrderedVarTokens(['{{a}}', ''], 'x{{a}}y')).toEqual(['x', '{{a}}', 'y']);
+    });
+
+    it('splits multiple ordered tokens across content', () => {
+      expect(splitContentByOrderedVarTokens(['{{a}}', '{{b}}'], 'p{{a}}q{{b}}r')).toEqual([
+        'p',
+        '{{a}}',
+        'q',
+        '{{b}}',
+        'r',
+      ]);
+    });
+
+    it('returns empty segment list when content is null and queue is empty', () => {
+      expect(splitContentByOrderedVarTokens([], null)).toEqual([]);
+    });
+  });
+
+  describe('splitTemplateVarString', () => {
+    it('returns empty array for falsy string', () => {
+      expect(splitTemplateVarString('')).toEqual([]);
+      expect(splitTemplateVarString(null)).toEqual([]);
+    });
+
+    it('splits mustache segments', () => {
+      const parts = splitTemplateVarString('Hi {{name}}!');
+      expect(parts.some((p) => p.includes('name'))).toBe(true);
+    });
+
+    it('omits empty segments after filtering', () => {
+      expect(splitTemplateVarString('a{{x}}b')).toEqual(['a', '{{x}}', 'b']);
+    });
+  });
+
+  describe('getFallbackResolvedContent', () => {
+    it('replaces var segments from varMapData', () => {
+      const out = getFallbackResolvedContent('{{a}}', { '{{a}}_0': 'X' });
+      expect(out).toBe('X');
+    });
+
+    it('keeps DLT token string when slot empty', () => {
+      const out = getFallbackResolvedContent('{#v#}', {});
+      expect(out).toContain('#');
+    });
+
+    it('returns empty string for mustache slot when map has no value', () => {
+      const out = getFallbackResolvedContent('Hi {{missing}}', {});
+      expect(out).toBe('Hi ');
+    });
+
+    it('treats null as empty; explicit empty string is kept (cleared input)', () => {
+      expect(getFallbackResolvedContent('{{a}}', { '{{a}}_0': null })).toBe('');
+      expect(getFallbackResolvedContent('{{a}}', { '{{a}}_0': '' })).toBe('');
+    });
+
+    it('keeps DLT token in preview when slot map has empty string (no tag yet)', () => {
+      expect(getFallbackResolvedContent('{#v#}', { '{#v#}_0': '' })).toBe('{#v#}');
+    });
+
+    it('keeps DLT token in preview when slot map has null', () => {
+      expect(getFallbackResolvedContent('{#v#}', { '{#v#}_0': null })).toBe('{#v#}');
+    });
+
+    it('uses slot replacement when value is non-empty string', () => {
+      expect(getFallbackResolvedContent('A{{b}}C', { '{{b}}_1': 'ok' })).toBe('AokC');
+    });
+  });
+
+  describe('getFallbackResolvedContentForCardDisplay', () => {
+    it('shows raw tokens when map is empty or slots unset', () => {
+      expect(getFallbackResolvedContentForCardDisplay('Hi {{name}}', {})).toBe('Hi {{name}}');
+      expect(getFallbackResolvedContentForCardDisplay('{#var#}', {})).toBe('{#var#}');
+    });
+
+    it('shows raw token when slot key exists but value is empty (no labels)', () => {
+      expect(getFallbackResolvedContentForCardDisplay('{#var#}', { '{#var#}_0': '' })).toBe('{#var#}');
+      expect(getFallbackResolvedContentForCardDisplay('{{a}}', { '{{a}}_0': '' })).toBe('{{a}}');
+    });
+
+    it('replaces when slot has non-empty value', () => {
+      expect(getFallbackResolvedContentForCardDisplay('Hi {{name}}', { '{{name}}_1': 'Pat' })).toBe('Hi Pat');
+    });
+  });
+
+  describe('isDltHashVarToken / isAnyTemplateVarToken', () => {
+    it('detects DLT hash token', () => {
+      expect(isDltHashVarToken('{#x#}')).toBe(true);
+      expect(isDltHashVarToken('plain')).toBe(false);
+    });
+
+    it('isAnyTemplateVarToken combines mustache and DLT', () => {
+      expect(isAnyTemplateVarToken('{{a}}')).toBe(true);
+      expect(isAnyTemplateVarToken('{#x#}')).toBe(true);
+    });
+  });
+
+  describe('extractTemplateVariables', () => {
+    it('returns empty array for empty or missing template', () => {
+      expect(extractTemplateVariables('')).toEqual([]);
+      expect(extractTemplateVariables()).toEqual([]);
+    });
+
+    it('includes DLT {#var#} names when no custom capture regex', () => {
+      const vars = extractTemplateVariables('Hello {#promo#} and {{name}}');
+      expect(vars).toEqual(expect.arrayContaining(['promo', 'name']));
+    });
+
+    it('skips DLT scan when captureRegex is provided', () => {
+      const re = /\{\{([^}]+)\}\}/g;
+      expect(extractTemplateVariables('{#x#} {{y}}', re)).toEqual(['y']);
+    });
+
+    it('dedupes duplicate variable names', () => {
+      expect(extractTemplateVariables('{{a}} {{a}}')).toEqual(['a']);
+    });
+
+    it('uses default name var when DLT body capture is empty', () => {
+      const vars = extractTemplateVariables('{##}');
+      expect(vars).toContain('var');
+    });
+  });
+
+  describe('extractTemplateVariables (regex global)', () => {
+    it('extracts all vars when caller passes a non-global capture regex (avoids infinite exec loop)', () => {
+      const nonGlobal = /\{\{([^}]+)\}\}/;
+      expect(nonGlobal.global).toBe(false);
+      expect(extractTemplateVariables('{{a}} and {{b}}', nonGlobal)).toEqual(['a', 'b']);
+    });
+
+    it('still works when capture regex already has the global flag', () => {
+      const globalRe = /\{\{([^}]+)\}\}/g;
+      expect(extractTemplateVariables('{{x}} {{y}}', globalRe)).toEqual(['x', 'y']);
+    });
+  });
+});

package/v2Components/CapTagList/index.js

@@ -382,6 +382,9 @@ 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 {
@@ -474,6 +477,9 @@ 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={
@@ -545,6 +551,10 @@ 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,6 +8,7 @@ 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,
@@ -16,15 +17,16 @@ const CustomValuesEditor = ({
   setShowJSON,
   customValues,
   handleJSONTextChange,
-  extractedTags,
-  requiredTags,
-  optionalTags,
+  sections,
   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">
@@ -77,52 +79,68 @@ const CustomValuesEditor = ({
         </CapRow>
       ) : (
         <>
-          {extractedTags?.length > 0 && (
-            <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} />
+          {(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} />}
                 </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>
-                  <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>
+              ) : 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>
-              ))}
-              {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"
-                    />
+                {(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>
                   </CapRow>
-                </CapRow>
-              ))}
-            </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>
+                  );
+                })}
+              </CapRow>
+            </React.Fragment>
+          ))}
         </>
       )}
       <CapRow className="editor-actions">
@@ -156,9 +174,12 @@ CustomValuesEditor.propTypes = {
   setShowJSON: PropTypes.func.isRequired,
   customValues: PropTypes.object.isRequired,
   handleJSONTextChange: PropTypes.func.isRequired,
-  extractedTags: PropTypes.array.isRequired,
-  requiredTags: PropTypes.array.isRequired,
-  optionalTags: PropTypes.array.isRequired,
+  sections: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    requiredTags: PropTypes.array,
+    optionalTags: PropTypes.array,
+  })).isRequired,
   handleCustomValueChange: PropTypes.func.isRequired,
   handleDiscardCustomValues: PropTypes.func.isRequired,
   handleUpdatePreview: PropTypes.func.isRequired,

package/v2Components/CommonTestAndPreview/DeliverySettings/DeliverySettings.scss

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