@capillarytech/creatives-library 8.0.345-alpha.15 → 8.0.345-alpha.16

package/v2Components/SmsFallback/index.scss

@@ -1,265 +0,0 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables';
-
-/* Edit SMS Fallback slidebox: back control before title (CapHeader `prefix`) */
-.sms-fallback-slidebox-header--edit {
-  .sms-fallback-slidebox-header__prefix {
-    display: inline-flex;
-    align-items: center;
-    margin-right: $CAP_SPACE_12;
-  }
-
-  .sms-fallback-slidebox-header__back {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: $CAP_SPACE_04;
-    margin: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    color: inherit;
-    border-radius: $CAP_SPACE_04;
-    line-height: 1;
-
-    &:focus-visible {
-      outline: $CAP_SPACE_01 solid map-get($CAP_SECONDARY, base);
-      outline-offset: $CAP_SPACE_02;
-    }
-
-    .anticon {
-      font-size: 1rem;
-    }
-  }
-}
-
-.sms-fallback-header-row {
-  margin-bottom: $CAP_SPACE_12;
-}
-
-/* Selected fallback template card: thin line under SMS title row (matches preview card layout) */
-.sms-fallback-card-wrap {
-  .ant-card.cap-custom-card.SMS .ant-card-head {
-    border-bottom: $CAP_SPACE_01 solid $CAP_COLOR_16;
-  }
-
-  /* Breathing room between header rule and body copy */
-  .ant-card.cap-custom-card.SMS .ant-card-body {
-    padding-top: $CAP_SPACE_16;
-  }
-}
-
-/* "Select template" — scoped via wrapper; no `ant-*` selectors */
-.sms-fallback-select-wrap {
-  /* `button` bumps specificity vs library defaults without targeting ant classes */
-  button.sms-fallback-select-btn {
-    $sms-fallback-secondary: map-get($CAP_SECONDARY, base);
-
-    /* Same padding + radius default vs hover so the control doesn’t grow on hover */
-    min-width: auto;
-    min-height: auto;
-    height: auto;
-    padding: $CAP_SPACE_08 $CAP_SPACE_12;
-    border: none;
-    border-radius: $CAP_SPACE_04;
-    color: $sms-fallback-secondary;
-    font-weight: $FONT_WEIGHT_MEDIUM;
-    line-height: 1.25;
-    background-color: transparent;
-    box-shadow: none;
-
-    &:hover:not(:disabled) {
-      color: $sms-fallback-secondary;
-      background-color: #ebf8ff;
-      font-weight: $FONT_WEIGHT_MEDIUM;
-    }
-
-    &:hover:not(:disabled) span {
-      font-weight: $FONT_WEIGHT_MEDIUM;
-    }
-
-    &:focus:not(:disabled) {
-      color: $sms-fallback-secondary;
-      font-weight: $FONT_WEIGHT_MEDIUM;
-    }
-
-    &:focus-visible:not(:disabled) {
-      outline: $CAP_SPACE_01 solid $sms-fallback-secondary;
-      outline-offset: $CAP_SPACE_02;
-    }
-
-    &:disabled {
-      color: $FONT_COLOR_03;
-      background-color: transparent;
-      border: none;
-      opacity: 1;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.sms-fallback-inline-editor {
-  margin-top: $CAP_SPACE_08;
-}
-
-/* Toolbar search uses shared `.action-container__toolbar-row .search-text` (13.125rem) from `_templates.scss` — same as other channels. */
-
-.sms-fallback-selector {
-  position: relative;
-  min-height: 12.5rem;
-}
-
-/* Portal’d template picker: give the slidebox a real height so the grid flex fills the space (no dead band below the cards). */
-.sms-fallback-selector:not(.sms-fallback-selector--visually-hidden) {
-  height: 100vh;
-  max-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  box-sizing: border-box;
-
-  .add-creatives-section.creatives-slidebox--local-sms-templates {
-    flex: 1 1 0%;
-    min-height: 0;
-    height: 100%;
-    max-height: 100%;
-    display: flex;
-    flex-direction: column;
-
-    .cap-slide-box-v2-container {
-      flex: 1 1 0%;
-      min-height: 0;
-      height: 100%;
-      max-height: 100%;
-    }
-  }
-}
-
-/* Off-screen but in DOM: avoid huge pixel offsets; clip + fixed corner. */
-.sms-fallback-selector--visually-hidden {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 0.0625rem;
-  height: 0.0625rem;
-  margin: -0.0625rem;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-  opacity: 0;
-  pointer-events: none;
-  z-index: -1;
-}
-
-.sms-fallback-selector__loading {
-  position: absolute;
-  inset: 0;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba($CAP_WHITE, 0.7);
-}
-
-/* Creatives SMS create: same title alignment as `SlideBoxHeader` + `.support-video-elements` */
-.sms-fallback-create-slidebox-header.support-video-elements {
-  .cap-header-v2-title {
-    display: inline-flex;
-    align-items: center;
-  }
-}
-
-.sms-fallback-create-slidebox-header__prefix {
-  margin-right: $CAP_SPACE_16;
-  display: inline-flex;
-  align-items: center;
-}
-
-.sms-fallback-slidebox,
-.rcs-sms-fallback-slidebox {
-  z-index: 10010;
-
-  > .cap-slide-box-v2-container {
-    z-index: 10011;
-    background: $CAP_WHITE;
-    /*
-     * cap-ui sets overflow-y:auto on the panel; combined with our old min-height/height:auto overrides
-     * the whole panel scrolled and the footer looked like a separate band with a second scrollbar.
-     * Normal SMS edit: only `.slidebox-content-container` scrolls; footer stays in the fixed slot.
-     */
-    overflow: hidden;
-  }
-
-  .slidebox-header,
-  .slidebox-content-container,
-  .slidebox-footer {
-    background: $CAP_WHITE;
-  }
-}
-
-/*
- * Embedded SMS create in RCS fallback: same flex layout as Creatives `creatives-slidebox--local-sms-templates`
- * so only the middle scrolls and `SlideBoxFooter` stays in cap-ui’s fixed footer slot (no huge empty gap).
- */
-.sms-fallback-slidebox--embedded-sms-create {
-  .cap-slide-box-v2-container {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    max-height: 100vh;
-  }
-
-  .slidebox-content-container {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .slidebox-content-container > div {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .sms-create-container {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .sms-create-container .ant-spin-nested-loading {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .sms-create-container .ant-spin-container {
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-}
-
-/* Same as CreativesContainer `creatives-library-mode` for embedded SMS (no tab bar chrome). */
-.add-creatives-section.creatives-library-mode {
-  .sms-create-container {
-    .ant-tabs-top-bar {
-      display: none;
-    }
-  }
-}
-
-.sms-fallback-taglist-popover,
-.rcs-sms-fallback-taglist-popover {
-  z-index: 10020;
-}

package/v2Components/SmsFallback/messages.js

@@ -1,78 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-const scope = 'creatives.componentsV2.SmsFallback';
-
-export default defineMessages({
-  sectionTitle: {
-    id: `${scope}.sectionTitle`,
-    defaultMessage: 'Fallback SMS message (Optional)',
-  },
-  sectionTitleWithoutOptional: {
-    id: `${scope}.sectionTitleWithoutOptional`,
-    defaultMessage: 'Fallback SMS message',
-  },
-  selectTemplate: {
-    id: `${scope}.selectTemplate`,
-    defaultMessage: 'Select template',
-  },
-  templateListTitle: {
-    id: `${scope}.templateListTitle`,
-    defaultMessage: 'Creative templates',
-  },
-  templateListDescription: {
-    id: `${scope}.templateListDescription`,
-    defaultMessage: 'Select only one creative',
-  },
-  searchByCreativeName: {
-    id: `${scope}.searchByCreativeName`,
-    defaultMessage: 'Search by creative name',
-  },
-  createNew: {
-    id: `${scope}.createNew`,
-    defaultMessage: 'Create new',
-  },
-  uploadNew: {
-    id: `${scope}.uploadNew`,
-    defaultMessage: 'Upload template',
-  },
-  createTitle: {
-    id: `${scope}.createTitle`,
-    defaultMessage: 'Create SMS template',
-  },
-  backToTemplates: {
-    id: `${scope}.backToTemplates`,
-    defaultMessage: 'Back to templates',
-  },
-  editTitle: {
-    id: `${scope}.editTitle`,
-    defaultMessage: 'Edit SMS Fallback',
-  },
-  messagePreview: {
-    id: `${scope}.messagePreview`,
-    defaultMessage: 'Message: {message}',
-  },
-  editTemplate: {
-    id: `${scope}.editTemplate`,
-    defaultMessage: 'Edit',
-  },
-  removeTemplate: {
-    id: `${scope}.removeTemplate`,
-    defaultMessage: 'Remove',
-  },
-  messageLabel: {
-    id: `${scope}.messageLabel`,
-    defaultMessage: 'Message',
-  },
-  totalCharacters: {
-    id: `${scope}.totalCharacters`,
-    defaultMessage: '{smsCount} SMS ({number} characters)',
-  },
-  unicodeLabel: {
-    id: `${scope}.unicodeLabel`,
-    defaultMessage: 'Allow unicode characters',
-  },
-  fallbackCardUntitled: {
-    id: `${scope}.fallbackCardUntitled`,
-    defaultMessage: 'Untitled creative',
-  },
-});

package/v2Components/SmsFallback/smsFallbackUtils.js

@@ -1,118 +0,0 @@
-import get from 'lodash/get';
-import { getFallbackResolvedContentForCardDisplay } from '../../utils/templateVarUtils';
-import { extractRegisteredSenderIdsFromSmsFallbackRecord } from '../../utils/commonUtils';
-import { SMS_CATEGORY_FILTERS } from './constants';
-
-export function buildFallbackDataFromTemplate(template) {
-  const base = get(template, 'versions.base', {});
-  const smsEditor = base['sms-editor'] || '';
-  /**
-   * `templateContent` is the raw template string (may contain {{vars}} / {#slots#}).
-   * `content` is the display/send body — identical here since no resolution happens at pick time.
-   * They diverge in `buildFallbackDataFromCreativesPayload` where `messageBody` (resolved) differs
-   * from `tc.template` (raw). Consumers should prefer `templateContent`; read `content` as fallback
-   * (see `mapFallbackValueToEditTemplateData`).
-   */
-  const templateContent = smsEditor;
-  const content = smsEditor;
-  const headerList = Array.isArray(base.header) ? base.header : [];
-  const senderId = (headerList[0]) || base.senderId || '';
-  const templateName =
-    template.name
-    || base.template_name
-    || base['template-name']
-    || '';
-  return {
-    smsTemplateId: template._id || '',
-    templateName,
-    content,
-    templateContent,
-    senderId,
-    /** TRAI DLT registered sender IDs — used by Test & Preview delivery settings filtering. */
-    registeredSenderIds: headerList,
-    unicodeValidity: typeof base['unicode-validity'] === 'boolean' ? base['unicode-validity'] : true,
-  };
-}
-
-export function mapFallbackValueToEditTemplateData(source) {
-  if (!source) return null;
-  const rcsSmsFallbackVarMappedFromSource = source?.rcsSmsFallbackVarMapped;
-  const hasPersistedFallbackVarMap =
-    rcsSmsFallbackVarMappedFromSource != null
-    && typeof rcsSmsFallbackVarMappedFromSource === 'object'
-    && Object.keys(rcsSmsFallbackVarMappedFromSource).length > 0;
-  const registeredSenderIdsForHeader =
-    extractRegisteredSenderIdsFromSmsFallbackRecord(source);
-  return {
-    _id: source?.smsTemplateId,
-    name: source?.templateName,
-    versions: {
-      base: {
-        'sms-editor': source?.templateContent || source?.content,
-        ...(source?.templateName != null && String(source.templateName).trim() !== ''
-          ? { template_name: String(source.templateName).trim() }
-          : {}),
-        ...(Array.isArray(registeredSenderIdsForHeader) && registeredSenderIdsForHeader.length
-          ? { header: registeredSenderIdsForHeader }
-          : {}),
-        ...(typeof source?.unicodeValidity === 'boolean'
-          ? { 'unicode-validity': source.unicodeValidity }
-          : {}),
-        ...(hasPersistedFallbackVarMap
-          ? { 'rcs-sms-fallback-var-mapped': rcsSmsFallbackVarMappedFromSource }
-          : {}),
-      },
-    },
-  };
-}
-
-export function getBaseFromSmsTraiFormData(formData) {
-  const base = get(formData, 'versions.base', get(formData, 'value.base', {})) || {};
-  return { base };
-}
-
-export function resolveContentFromTraiBase(base) {
-  const smsEditor = base['sms-editor'] || '';
-  return smsEditor;
-}
-
-/**
- * Card body: show TagList / VarSegment values where filled; otherwise show raw `{{…}}` / `{#…#}` tokens
- * (so saving without slot labels still shows `{#var#}` on the card).
- */
-export function getSmsFallbackCardDisplayContent(value) {
-  if (!value || typeof value !== 'object') return '';
-  const templateStr = String(value.templateContent ?? value.content ?? '');
-  const map = value.rcsSmsFallbackVarMapped;
-  return getFallbackResolvedContentForCardDisplay(templateStr, map && typeof map === 'object' ? map : {});
-}
-
-export function filterSmsTemplatesByCategory(templates, smsFilter) {
-  if (!Array.isArray(templates)) return [];
-  if (!smsFilter || smsFilter === SMS_CATEGORY_FILTERS.ALL) return templates;
-  return templates.filter((template) =>
-    (get(template, 'versions.base.type') || '').toLowerCase().includes(smsFilter),
-  );
-}
-
-/**
- * Maps `CreativesContainer` `getCreativesData` payload (after save / create) to SmsFallback `value` shape.
- * See `CreativesContainer.getCreativesData` SMS branch for `messageBody` / `templateConfigs`.
- */
-export function buildFallbackDataFromCreativesPayload(creativesData) {
-  if (!creativesData || creativesData.channel !== 'SMS') return null;
-  const tc = creativesData.templateConfigs || {};
-  const templateStr = typeof tc.template === 'string' ? tc.template : '';
-  const bodyRaw = creativesData.messageBody;
-  const body = typeof bodyRaw === 'string' ? bodyRaw : templateStr;
-  const headerList = Array.isArray(tc.registeredSenderIds) ? tc.registeredSenderIds : [];
-  return {
-    smsTemplateId: tc.templateId != null ? String(tc.templateId) : '',
-    templateName: tc.templateName != null ? String(tc.templateName) : '',
-    content: body,
-    templateContent: templateStr || body,
-    senderId: headerList[0] || '',
-    registeredSenderIds: headerList,
-    unicodeValidity: true,
-  };
-}

package/v2Components/SmsFallback/tests/SmsFallbackLocalSelector.test.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { SmsFallbackLocalSelector } from '../SmsFallbackLocalSelector';
-
-jest.mock('v2Containers/CreativesContainer', () => ({
-  __esModule: true,
-  default: () => <div data-testid="creatives-mock">CreativesContainer</div>,
-}));
-
-jest.mock('v2Components/CapPageSpinner', () => ({
-  __esModule: true,
-  default: () => <span data-testid="spinner">spinner</span>,
-}));
-
-describe('SmsFallbackLocalSelector', () => {
-  const baseProps = {
-    hidden: false,
-    fetchDetailsLoading: false,
-    templateList: {
-      templates: [],
-      loading: false,
-      loadMore: jest.fn(),
-      search: '',
-      setSearch: jest.fn(),
-      reset: jest.fn(),
-    },
-    channelsToHide: ['email'],
-    smsRegister: {},
-    onCloseCreatives: jest.fn(),
-    onSelectTemplate: jest.fn(),
-    filterContent: <div>filters</div>,
-    getCreativesData: jest.fn(),
-  };
-
-  it('renders CreativesContainer with local template config', () => {
-    render(<SmsFallbackLocalSelector {...baseProps} />);
-    expect(screen.getByTestId('creatives-mock')).toBeInTheDocument();
-  });
-
-  it('shows loading overlay when fetchDetailsLoading is true', () => {
-    render(<SmsFallbackLocalSelector {...baseProps} fetchDetailsLoading />);
-    expect(screen.getByTestId('spinner')).toBeInTheDocument();
-  });
-
-  it('applies visually hidden class when hidden', () => {
-    const { container } = render(<SmsFallbackLocalSelector {...baseProps} hidden />);
-    expect(container.querySelector('.sms-fallback-selector--visually-hidden')).toBeTruthy();
-  });
-});

package/v2Components/SmsFallback/tests/rcsSmsFallback.acceptance.test.js

@@ -1,147 +0,0 @@
-/**
- * RCS SMS fallback — acceptance / regression tests.
- *
- * Covers documented product behavior for the SMS fallback picker (SmsFallback) and
- * related payload expectations. Full end-to-end flows (CreativesContainer + SlideBox + SmsTraiEdit)
- * are better suited to manual or browser automation; those are marked with it.todo below.
- */
-
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { Provider } from 'react-redux';
-import { createStore } from 'redux';
-import { IntlProvider } from 'react-intl';
-import SmsFallback from '../index';
-import smsFallbackMessages from '../messages';
-
-
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useDispatch: () => jest.fn(),
-}));
-
-jest.mock('../../../services/api', () => ({
-  getTemplateDetails: jest.fn().mockResolvedValue({ response: {} }),
-}));
-
-jest.mock('../../../v2Containers/Templates/utils/smsTemplatesListApi', () => ({
-  fetchSmsTemplatesListPage: jest.fn().mockResolvedValue({ templates: [], totalCount: 0 }),
-}));
-
-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
-  createPortal: (node) => node,
-}));
-
-jest.mock('../../../v2Containers/CreativesContainer', () => ({
-  __esModule: true,
-  default: () => <div data-testid="sms-fallback-creatives-container">CreativesContainer</div>,
-}));
-
-jest.mock('../../../v2Containers/SmsTrai/Edit', () => ({
-  __esModule: true,
-  default: () => <div data-testid="sms-trai-edit-mock">SmsTraiEdit</div>,
-}));
-
-jest.mock('../../../v2Containers/SmsWrapper', () => ({
-  __esModule: true,
-  default: () => <div data-testid="sms-wrapper-mock">SmsWrapper</div>,
-}));
-
-const intlMessages = Object.keys(smsFallbackMessages).reduce((acc, key) => {
-  const m = smsFallbackMessages[key];
-  acc[m.id] = m.defaultMessage;
-  return acc;
-}, {});
-
-const renderSmsFallback = (props = {}) => {
-  const store = createStore((state = {}) => state);
-  return render(
-    <Provider store={store}>
-      <IntlProvider locale="en" messages={intlMessages}>
-        <SmsFallback
-          onChange={jest.fn()}
-          smsRegister={props.smsRegister ?? 'DLT'}
-          isFullMode={props.isFullMode ?? true}
-          {...props}
-        />
-      </IntlProvider>
-    </Provider>
-  );
-};
-
-describe('RCS SMS fallback — Create/Edit UI (SmsFallback)', () => {
-  it('shows “Fallback SMS message (Optional)” section title when no template is selected', () => {
-    renderSmsFallback({ value: null });
-    expect(
-      screen.getByText(smsFallbackMessages.sectionTitle.defaultMessage)
-    ).toBeInTheDocument();
-  });
-
-  it('renders Select template control when no fallback value is set', () => {
-    renderSmsFallback({ value: null });
-    expect(
-      screen.getByRole('button', { name: smsFallbackMessages.selectTemplate.defaultMessage })
-    ).toBeInTheDocument();
-  });
-
-  it('opens embedded SMS template list (CreativesContainer) when Select template is clicked', async () => {
-    renderSmsFallback({ value: null });
-    fireEvent.click(
-      screen.getByRole('button', { name: smsFallbackMessages.selectTemplate.defaultMessage })
-    );
-    await waitFor(() => {
-      expect(screen.getByTestId('sms-fallback-creatives-container')).toBeInTheDocument();
-    });
-  });
-
-  it('shows template name and content on the card when a fallback value is set', () => {
-    renderSmsFallback({
-      value: {
-        templateName: 'Promo SMS',
-        content: 'Hello {{name}}',
-      },
-      showAsCard: true,
-    });
-    expect(screen.getByText('Promo SMS')).toBeInTheDocument();
-    expect(screen.getByText(/Hello/)).toBeInTheDocument();
-  });
-
-  it('wraps the SMS fallback card in sms-fallback-card-wrap for header border styling', () => {
-    const { container } = renderSmsFallback({
-      value: {
-        templateName: 'Promo SMS',
-        content: 'Hello',
-      },
-      showAsCard: true,
-    });
-    expect(container.querySelector('.sms-fallback-card-wrap')).toBeTruthy();
-    expect(container.querySelector('.sms-fallback-card-wrap .sms-fallback-card')).toBeTruthy();
-  });
-
-  it.todo('Edit icon / more menu → Edit should open SlideBox in edit mode with header “Edit SMS Fallback” and SmsTraiEdit (Ant Dropdown + portal — use E2E or user-event + getPopupContainer)');
-  it.todo('More menu → Remove should clear selection and show Select template CTA again');
-
-  it.todo('SlideBox list header should match product copy for template selection (see CreativesContainer / TemplatesV2)');
-  it.todo('Template grid should list only SMS creatives approved per channel filters (API + DLT category filters)');
-  it.todo('Selecting a template should load details and transition to SmsTraiEdit with correct templateData');
-  it.todo('Done/Save in SmsTraiEdit should persist card and close slidebox (integration)');
-});
-
-describe('RCS SMS fallback — SlideBox interactions', () => {
-  it.todo('Closing SlideBox without confirming should not set fallback when none was selected');
-});
-
-/**
- * Payload: `app/v2Containers/Rcs/tests/index.test.js` asserts `smsFallBackContent` is omitted when no SmsFallback data.
- */
-describe('RCS SMS fallback — Create/Edit payload', () => {
-  it.todo('Create/Update RCS without selecting fallback should not send smsFallBackContent (covered in Rcs index.test.js — keep in sync)');
-});
-
-describe('RCS SMS fallback — Edit flow (hydration & save)', () => {
-  it.todo('Opening an existing RCS template with smsFallBackContent should pre-populate the fallback card');
-  it.todo('Editing fallback on an existing RCS should update the card after Done/Save');
-  it.todo('Removing fallback on an existing RCS should clear card and omit smsFallBackContent on next save');
-});