@capillarytech/creatives-library 9.0.15-alpha.1 → 9.0.16

package/v2Containers/Sms/tests/smsFormDataHelpers.test.js

@@ -1,253 +0,0 @@
-import {
-  getSmsMessageFromFormData,
-  getSmsEmbeddedFooterValidity,
-} from '../smsFormDataHelpers';
-
-// ---------------------------------------------------------------------------
-// getSmsMessageFromFormData
-// ---------------------------------------------------------------------------
-
-describe('getSmsMessageFromFormData', () => {
-  describe('null / invalid formData guard', () => {
-    it('returns empty string when formData is null', () => {
-      expect(getSmsMessageFromFormData(null, 1)).toBe('');
-    });
-
-    it('returns empty string when formData is undefined', () => {
-      expect(getSmsMessageFromFormData(undefined, 1)).toBe('');
-    });
-
-    it('returns empty string when formData is a string (not an object)', () => {
-      expect(getSmsMessageFromFormData('bad', 1)).toBe('');
-    });
-
-    it('returns empty string when formData is a number', () => {
-      expect(getSmsMessageFromFormData(42, 1)).toBe('');
-    });
-  });
-
-  describe('currentTab normalisation', () => {
-    it('defaults to tab 1 when currentTab is null', () => {
-      const formData = { 0: { 'sms-editor': 'hello' } };
-      expect(getSmsMessageFromFormData(formData, null)).toBe('hello');
-    });
-
-    it('defaults to tab 1 when currentTab is undefined', () => {
-      const formData = { 0: { 'sms-editor': 'hello' } };
-      expect(getSmsMessageFromFormData(formData, undefined)).toBe('hello');
-    });
-
-    it('defaults to tab 1 when currentTab is 0', () => {
-      const formData = { 0: { 'sms-editor': 'hello' } };
-      expect(getSmsMessageFromFormData(formData, 0)).toBe('hello');
-    });
-
-    it('defaults to tab 1 when currentTab is negative', () => {
-      const formData = { 0: { 'sms-editor': 'hello' } };
-      expect(getSmsMessageFromFormData(formData, -5)).toBe('hello');
-    });
-  });
-
-  describe('versioned key lookup', () => {
-    it('uses "sms-editor" key for tab 1', () => {
-      const formData = { 0: { 'sms-editor': 'tab1 msg' } };
-      expect(getSmsMessageFromFormData(formData, 1)).toBe('tab1 msg');
-    });
-
-    it('uses "sms-editor2" versioned key for tab 2', () => {
-      const formData = { 1: { 'sms-editor2': 'tab2 msg', 'sms-editor': 'fallback' } };
-      expect(getSmsMessageFromFormData(formData, 2)).toBe('tab2 msg');
-    });
-
-    it('uses "sms-editor3" versioned key for tab 3', () => {
-      const formData = { 2: { 'sms-editor3': 'tab3 msg' } };
-      expect(getSmsMessageFromFormData(formData, 3)).toBe('tab3 msg');
-    });
-
-    it('returns empty string when versioned key exists but is null (cleared version)', () => {
-      const formData = { 1: { 'sms-editor2': null } };
-      expect(getSmsMessageFromFormData(formData, 2)).toBe('');
-    });
-
-    it('returns empty string when versioned key exists but is empty string', () => {
-      const formData = { 1: { 'sms-editor2': '' } };
-      expect(getSmsMessageFromFormData(formData, 2)).toBe('');
-    });
-
-    it('coerces a numeric value in versioned key to string', () => {
-      const formData = { 1: { 'sms-editor2': 12345 } };
-      expect(getSmsMessageFromFormData(formData, 2)).toBe('12345');
-    });
-  });
-
-  describe('"sms-editor" flat key fallback (versioned key absent)', () => {
-    it('falls back to "sms-editor" when versioned key is absent for tab 2', () => {
-      const formData = { 1: { 'sms-editor': 'flat fallback' } };
-      expect(getSmsMessageFromFormData(formData, 2)).toBe('flat fallback');
-    });
-  });
-
-  describe('activeTab nested fallback', () => {
-    it('falls back to activeTab["sms-editor"] when neither versioned key nor flat "sms-editor" is present', () => {
-      // The versioned key must be absent entirely for the activeTab fallback to be reached.
-      // (If 'sms-editor' exists but is null, the function commits to '' without falling through.)
-      const formData = {
-        0: {
-          activeTab: 'variant1',
-          variant1: { 'sms-editor': 'variant msg' },
-        },
-      };
-      expect(getSmsMessageFromFormData(formData, 1)).toBe('variant msg');
-    });
-
-    it('falls back to base["sms-editor"] when activeTab entry lacks "sms-editor" and flat key is absent', () => {
-      const formData = {
-        0: {
-          activeTab: 'variant1',
-          variant1: {},
-          base: { 'sms-editor': 'base msg' },
-        },
-      };
-      expect(getSmsMessageFromFormData(formData, 1)).toBe('base msg');
-    });
-
-    it('defaults activeTab to "base" when activeTab prop is not set and flat key is absent', () => {
-      const formData = {
-        0: {
-          base: { 'sms-editor': 'default base msg' },
-        },
-      };
-      expect(getSmsMessageFromFormData(formData, 1)).toBe('default base msg');
-    });
-  });
-
-  describe('root formData.base fallback', () => {
-    it('falls back to formData.base["sms-editor"] when tab slot is missing', () => {
-      const formData = {
-        base: { 'sms-editor': 'root base msg' },
-      };
-      expect(getSmsMessageFromFormData(formData, 1)).toBe('root base msg');
-    });
-
-    it('returns empty string when even root base has no "sms-editor"', () => {
-      const formData = { base: {} };
-      expect(getSmsMessageFromFormData(formData, 1)).toBe('');
-    });
-
-    it('returns empty string when formData has no relevant keys at all', () => {
-      expect(getSmsMessageFromFormData({}, 1)).toBe('');
-    });
-  });
-});
-
-// ---------------------------------------------------------------------------
-// getSmsEmbeddedFooterValidity
-// ---------------------------------------------------------------------------
-
-describe('getSmsEmbeddedFooterValidity', () => {
-  describe('isTemplateNameEmpty', () => {
-    it('is true when template-name is absent', () => {
-      const formData = { 0: { 'sms-editor': 'msg' } };
-      const { isTemplateNameEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
-      expect(isTemplateNameEmpty).toBe(true);
-    });
-
-    it('is true when template-name is empty string', () => {
-      const formData = { 'template-name': '', 0: { 'sms-editor': 'msg' } };
-      const { isTemplateNameEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
-      expect(isTemplateNameEmpty).toBe(true);
-    });
-
-    it('is true when template-name is whitespace only', () => {
-      const formData = { 'template-name': '   ', 0: { 'sms-editor': 'msg' } };
-      const { isTemplateNameEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
-      expect(isTemplateNameEmpty).toBe(true);
-    });
-
-    it('is false when template-name is a non-empty string', () => {
-      const formData = { 'template-name': 'My Template', 0: { 'sms-editor': 'msg' } };
-      const { isTemplateNameEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
-      expect(isTemplateNameEmpty).toBe(false);
-    });
-  });
-
-  describe('isMessageEmpty — single tab', () => {
-    it('is true when message is empty string', () => {
-      const formData = { 'template-name': 'T', 0: { 'sms-editor': '' } };
-      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
-      expect(isMessageEmpty).toBe(true);
-    });
-
-    it('is true when message is whitespace only', () => {
-      const formData = { 'template-name': 'T', 0: { 'sms-editor': '   ' } };
-      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
-      expect(isMessageEmpty).toBe(true);
-    });
-
-    it('is true when no sms-editor key at all', () => {
-      const formData = { 'template-name': 'T', 0: {} };
-      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
-      expect(isMessageEmpty).toBe(true);
-    });
-
-    it('is false when message is non-empty', () => {
-      const formData = { 'template-name': 'T', 0: { 'sms-editor': 'Hello world' } };
-      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
-      expect(isMessageEmpty).toBe(false);
-    });
-  });
-
-  describe('isMessageEmpty — multiple tabs', () => {
-    it('is false when all tabs have non-empty messages', () => {
-      const formData = {
-        'template-name': 'T',
-        0: { 'sms-editor': 'Tab 1 message' },
-        1: { 'sms-editor2': 'Tab 2 message' },
-        2: { 'sms-editor3': 'Tab 3 message' },
-      };
-      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 3);
-      expect(isMessageEmpty).toBe(false);
-    });
-
-    it('is true when the second tab has an empty message', () => {
-      const formData = {
-        'template-name': 'T',
-        0: { 'sms-editor': 'Tab 1 message' },
-        1: { 'sms-editor2': '' },
-      };
-      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 2);
-      expect(isMessageEmpty).toBe(true);
-    });
-
-    it('is true when the third tab has no message', () => {
-      const formData = {
-        'template-name': 'T',
-        0: { 'sms-editor': 'msg1' },
-        1: { 'sms-editor2': 'msg2' },
-        2: {},
-      };
-      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 3);
-      expect(isMessageEmpty).toBe(true);
-    });
-
-    it('treats tabCount=1 as single-tab check even when not explicitly provided', () => {
-      const formData = { 'template-name': 'T', 0: { 'sms-editor': 'msg' } };
-      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData);
-      expect(isMessageEmpty).toBe(false);
-    });
-  });
-
-  describe('both fields together', () => {
-    it('returns both empty when template name absent and message empty', () => {
-      const formData = { 0: { 'sms-editor': '' } };
-      const result = getSmsEmbeddedFooterValidity(formData, 1);
-      expect(result).toEqual({ isTemplateNameEmpty: true, isMessageEmpty: true });
-    });
-
-    it('returns both non-empty when template name and message are present', () => {
-      const formData = { 'template-name': 'My Template', 0: { 'sms-editor': 'Hello!' } };
-      const result = getSmsEmbeddedFooterValidity(formData, 1);
-      expect(result).toEqual({ isTemplateNameEmpty: false, isMessageEmpty: false });
-    });
-  });
-});

package/v2Containers/SmsTrai/Edit/index.scss

@@ -1,126 +0,0 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables';
-
-.sms-trai-segmented-editor {
-  .ant-input {
-    margin-bottom: 0.125rem;
-  }
-}
-
-/*
- * DLT SMS fallback edit only: mirror RCS rich-card message box (`.cap-rcs-creatives` + default
- * VarSegment `rcs-edit-template-message-input` / `rcs-edit-template-message-split`).
- */
-.sms-trai-edit-rcs-fallback {
-  width: 100%;
-
-  .rcs_text_area_wrapper {
-    position: relative;
-    width: 100%;
-  }
-
-  .rcs_text_area_wrapper .rcs-edit-template-message-input {
-    background-color: $CAP_G10;
-    padding: $CAP_SPACE_12 $CAP_SPACE_16;
-  }
-
-  .rcs_text_area_wrapper .rcs-edit-template-message-split {
-    margin-bottom: $CAP_SPACE_08;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: $FONT_COLOR_03;
-    font-weight: 500;
-  }
-
-  .rcs_text_area_wrapper .rcs-edit-template-message-input .ant-input,
-  .rcs_text_area_wrapper .rcs-edit-template-message-input textarea.ant-input {
-    width: 100%;
-    box-sizing: border-box;
-    min-height: 2.5rem;
-    padding-top: $CAP_SPACE_08;
-    padding-bottom: $CAP_SPACE_08;
-    border-color: $CAP_G07;
-    box-shadow: none;
-    overflow: hidden;
-  }
-
-  .rcs_text_area_wrapper .rcs-edit-template-message-input .ant-input:focus,
-  .rcs_text_area_wrapper .rcs-edit-template-message-input .ant-input:active,
-  .rcs_text_area_wrapper .rcs-edit-template-message-input textarea.ant-input:focus,
-  .rcs_text_area_wrapper .rcs-edit-template-message-input textarea.ant-input:active {
-    border-color: $CAP_G07;
-    box-shadow: none;
-    outline: none;
-  }
-
-  /*
-   * DLT per-slot hint: long selector (under CapSpin + message row) for specificity without !important.
-   */
-  .rcs_text_area_wrapper .rcs-edit-template-message-input .var-segment-message-editor__var-slot {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .rcs_text_area_wrapper
-    .rcs-edit-template-message-input
-    .var-segment-message-editor__var-slot
-    span.sms-trai-rcs-fallback-var-hint {
-    display: block;
-    box-sizing: border-box;
-    flex-shrink: 0;
-    margin-top: $CAP_SPACE_04;
-    margin-left: auto;
-    margin-right: 0;
-    width: fit-content;
-    max-width: 100%;
-    text-align: right;
-    color: $FONT_COLOR_02;
-    font-weight: 400;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    opacity: 0.92;
-  }
-
-  /* Footer “1 SMS (n characters)” — match RCS message typography, not muted gray */
-  .rcs-character-count,
-  .rcs-character-count--compact {
-    color: $FONT_COLOR_03;
-    font-weight: 500;
-  }
-}
-
-.rcs-character-count {
-  display: block;
-  margin-top: $CAP_SPACE_16;
-  margin-bottom: $CAP_SPACE_04;
-  text-align: right;
-  color: $FONT_COLOR_02;
-  width: 100%;
-}
-
-.rcs-character-count--compact {
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 400;
-}
-
-/* Non–RCS fallback: segmented editor shell + character count row (was inline styles on CapRow) */
-.sms-trai-editor-segment-row {
-  background-color: $CAP_G10;
-  padding: $CAP_SPACE_16;
-}
-
-.sms-trai-length-row {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: $CAP_SPACE_04;
-}
-
-.sms-trai-char-count-heading {
-  margin-top: $CAP_SPACE_04;
-  margin-bottom: 0;
-}
-
-.sms-trai-edit-bottom-spacer {
-  margin-bottom: 6.25rem;
-}

package/v2Containers/Templates/TemplatesActionBar.js

@@ -1,101 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-
-/**
- * Reusable action bar for template pickers.
- * Layout and spacing live in `_templates.scss` (`.action-container`, `.action-container__toolbar-row`).
- * Default search field width: `.action-container__toolbar-row .search-text` (13.125rem).
- * Pass `searchInputClassName` / `searchInputStyle` to override (defaults match Templates list: 210px per master).
- */
-const TemplatesActionBar = ({
-  searchValue,
-  onSearchChange,
-  onSearch,
-  onClear,
-  searchPlaceholder,
-  searchInputClassName,
-  searchInputStyle,
-  ctaLabel,
-  onCtaClick,
-  ctaDisabled,
-  ctaClassName,
-  ctaNode,
-  children,
-  showCta = true,
-}) => (
-  <div className="action-container">
-    <div className="action-container__toolbar-row">
-      {searchPlaceholder && (
-        <CapInput.Search
-          className={['search-text', searchInputClassName].filter(Boolean).join(' ')}
-          placeholder={searchPlaceholder}
-          value={searchValue}
-          onChange={onSearchChange}
-          /* antd `Input` (used by CapInput.Search) has no `onSearch`; only `Input.Search` does. */
-          onPressEnter={(e) => {
-            if (onSearch) {
-              const v = e?.target && 'value' in e.target ? e.target.value : searchValue;
-              onSearch(v);
-            }
-          }}
-          onSearch={onSearch}
-          onClear={onClear}
-          onScroll={(e) => e.stopPropagation()}
-        />
-      )}
-      {children}
-    </div>
-    {showCta && (
-      <div>
-        {ctaNode || (
-          <CapButton
-            className={ctaClassName}
-            type="primary"
-            disabled={ctaDisabled}
-            onClick={onCtaClick}
-          >
-            {ctaLabel}
-          </CapButton>
-        )}
-      </div>
-    )}
-  </div>
-);
-
-TemplatesActionBar.propTypes = {
-  searchValue: PropTypes.string,
-  onSearchChange: PropTypes.func,
-  onSearch: PropTypes.func,
-  onClear: PropTypes.func,
-  searchPlaceholder: PropTypes.string,
-  searchInputClassName: PropTypes.string,
-  searchInputStyle: PropTypes.object,
-  ctaLabel: PropTypes.node,
-  onCtaClick: PropTypes.func,
-  ctaDisabled: PropTypes.bool,
-  ctaClassName: PropTypes.string,
-  ctaNode: PropTypes.node,
-  children: PropTypes.node,
-  showCta: PropTypes.bool,
-};
-
-TemplatesActionBar.defaultProps = {
-  searchValue: '',
-  onSearchChange: () => {},
-  onSearch: () => {},
-  onClear: () => {},
-  searchPlaceholder: '',
-  searchInputClassName: '',
-  searchInputStyle: { width: '210px' },
-  ctaLabel: null,
-  onCtaClick: () => {},
-  ctaDisabled: false,
-  ctaClassName: '',
-  ctaNode: null,
-  children: null,
-};
-
-export default TemplatesActionBar;
-

package/v2Containers/Templates/tests/TemplatesActionBar.test.js

@@ -1,120 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import TemplatesActionBar from '../TemplatesActionBar';
-
-jest.mock('@capillarytech/cap-ui-library/CapInput', () => {
-  const React = require('react');
-  function Search(props) {
-    return React.createElement('input', {
-      'data-testid': 'cap-input-search',
-      value: props?.value,
-      placeholder: props?.placeholder,
-      onChange: props?.onChange,
-      onKeyDown: (e) => {
-        if (e.key === 'Enter' && props.onPressEnter) {
-          props.onPressEnter(e);
-        }
-      },
-    });
-  }
-  function CapInput() {
-    return null;
-  }
-  CapInput.Search = Search;
-  return { __esModule: true, default: CapInput };
-});
-
-jest.mock('@capillarytech/cap-ui-library/CapButton', () => {
-  const React = require('react');
-  return function CapButton(props) {
-    return React.createElement('button', {
-      type: 'button',
-      'data-testid': 'cta',
-      onClick: props?.onClick,
-      disabled: props?.disabled,
-    }, props?.children);
-  };
-});
-
-describe('TemplatesActionBar', () => {
-  it('renders search when searchPlaceholder is set', () => {
-    render(
-      <TemplatesActionBar
-        searchPlaceholder="Find templates"
-        searchValue="hi"
-        ctaLabel="Create"
-      />,
-    );
-    expect(screen.getByTestId('cap-input-search')).toHaveAttribute('placeholder', 'Find templates');
-  });
-
-  it('omits search when searchPlaceholder is empty', () => {
-    const { container } = render(
-      <TemplatesActionBar searchPlaceholder="" ctaLabel="Go" />,
-    );
-    expect(container.querySelector('[data-testid="cap-input-search"]')).toBeNull();
-  });
-
-  it('fires onSearchChange and onCtaClick', () => {
-    const onSearchChange = jest.fn();
-    const onCtaClick = jest.fn();
-    render(
-      <TemplatesActionBar
-        searchPlaceholder="S"
-        onSearchChange={onSearchChange}
-        ctaLabel="New"
-        onCtaClick={onCtaClick}
-      />,
-    );
-    fireEvent.change(screen.getByTestId('cap-input-search'), { target: { value: 'x' } });
-    fireEvent.click(screen.getByTestId('cta'));
-    expect(onSearchChange).toHaveBeenCalled();
-    expect(onCtaClick).toHaveBeenCalled();
-  });
-
-  it('fires onSearch when Enter is pressed (antd Input has no native onSearch)', () => {
-    const onSearch = jest.fn();
-    render(
-      <TemplatesActionBar
-        searchPlaceholder="S"
-        searchValue="query"
-        onSearch={onSearch}
-        ctaLabel="New"
-      />,
-    );
-    const input = screen.getByTestId('cap-input-search');
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-    expect(onSearch).toHaveBeenCalledWith('query');
-  });
-
-  it('renders ctaNode instead of default button when provided', () => {
-    render(
-      <TemplatesActionBar
-        searchPlaceholder="S"
-        ctaNode={<span data-testid="custom-cta">Custom</span>}
-      />,
-    );
-    expect(screen.getByTestId('custom-cta')).toBeInTheDocument();
-    expect(screen.queryByTestId('cta')).toBeNull();
-  });
-
-  it('hides CTA area when showCta is false', () => {
-    const { container } = render(
-      <TemplatesActionBar searchPlaceholder="S" showCta={false} ctaLabel="X" />,
-    );
-    expect(container.querySelector('[data-testid="cta"]')).toBeNull();
-  });
-
-  it('renders children in toolbar row', () => {
-    render(
-      <TemplatesActionBar searchPlaceholder="S" ctaLabel="C">
-        <span data-testid="child">extra</span>
-      </TemplatesActionBar>,
-    );
-    expect(screen.getByTestId('child')).toBeInTheDocument();
-  });
-});