@capillarytech/creatives-library 8.0.345-alpha.12 → 8.0.345-alpha.13

package/v2Components/SmsFallback/useLocalTemplateList.js

@@ -1,92 +0,0 @@
-import { useState, useCallback, useRef } from 'react';
-
-/**
- * @param {Object} options
- * @param {(params: { page: number, search: string, reset: boolean }) => Promise<{ templates: Array, totalCount: number }>} options.fetchTemplates
- * @param {number} [options.perPage=25]
- */
-export function useLocalTemplateList({ fetchTemplates, perPage = 25 }) {
-  const [listData, setListData] = useState({ templates: [], totalCount: 0 });
-  const [loading, setLoading] = useState(false);
-  const [page, setPage] = useState(1);
-  const [search, setSearchState] = useState('');
-  const searchRef = useRef('');
-  /** Drops stale responses when a newer fetch starts (search / reset while a request is in flight). */
-  const fetchGenerationRef = useRef(0);
-  const setSearch = useCallback((value) => {
-    const term = typeof value === 'string' ? value : '';
-    searchRef.current = term;
-    setSearchState(term);
-  }, []);
-  const lastFetchFullPageRef = useRef(false);
-
-  const { templates = [], totalCount = 0 } = listData ?? {};
-  const hasKnownTotal = (totalCount ?? 0) > 0;
-  const hasMoreByTotal = (totalCount ?? 0) > (templates?.length ?? 0);
-  const hasMoreByFullPage =
-    !hasKnownTotal && lastFetchFullPageRef.current && (templates?.length ?? 0) > 0;
-  const canLoadMore = (hasMoreByTotal || hasMoreByFullPage) && !loading;
-
-  const runFetch = useCallback(
-    async ({ page: p = 1, reset = true, search: searchTerm } = {}) => {
-      const term = searchTerm !== undefined ? searchTerm : searchRef.current;
-      const gen = ++fetchGenerationRef.current;
-      setLoading(true);
-      try {
-        const result = await fetchTemplates({ page: p, search: term, reset });
-        if (gen !== fetchGenerationRef.current) {
-          return;
-        }
-        const nextTemplates = result?.templates ?? [];
-        const nextTotalCount = result?.totalCount ?? 0;
-        lastFetchFullPageRef.current = nextTemplates.length >= perPage;
-        setListData((prev) => ({
-          templates: reset ? nextTemplates : [...(prev.templates || []), ...nextTemplates],
-          totalCount: nextTotalCount > 0 ? nextTotalCount : (reset ? 0 : prev.totalCount),
-        }));
-        setPage(p);
-      } catch (e) {
-        if (gen !== fetchGenerationRef.current) {
-          return;
-        }
-        lastFetchFullPageRef.current = false;
-        if (reset) {
-          setListData({ templates: [], totalCount: 0 });
-          setPage(1);
-        }
-      } finally {
-        if (gen === fetchGenerationRef.current) {
-          setLoading(false);
-        }
-      }
-    },
-    [fetchTemplates, perPage]
-  );
-
-  const loadMore = useCallback(() => {
-    if (!canLoadMore) return;
-    runFetch({ page: page + 1, reset: false, search: searchRef.current });
-  }, [canLoadMore, page, runFetch]);
-
-  const reset = useCallback(
-    (searchTerm) => {
-      const term = searchTerm !== undefined ? searchTerm : searchRef.current;
-      setSearch(term);
-      lastFetchFullPageRef.current = false;
-      runFetch({ page: 1, reset: true, search: term });
-    },
-    [runFetch, setSearch]
-  );
-
-  return {
-    templates,
-    totalCount,
-    loading,
-    page,
-    search,
-    setSearch,
-    loadMore,
-    reset,
-    canLoadMore,
-  };
-}

package/v2Components/TemplatePreview/constants.js

@@ -1,2 +0,0 @@
-/** Matches {{ varName }} placeholders (alphanumeric + underscore) */
-export const TEMPLATE_VAR_REGEX = /\{\{\s*([a-zA-Z0-9_]+)\s*\}\}/g;

package/v2Components/VarSegmentMessageEditor/constants.js

@@ -1,2 +0,0 @@
-/** Default prefix before variable name in variable-slot placeholders. */
-export const VAR_SEGMENT_PLACEHOLDER_PREFIX = 'enter the value for ';

package/v2Components/VarSegmentMessageEditor/index.js

@@ -1,125 +0,0 @@
-/**
- * Shared message editor that renders template text with {{var}} and/or DLT `{#var#}` segments as
- * variable inputs and static text as headings.
- * Reused by RCS (title/description), SmsTrai Edit (SMS fallback), and WhatsApp (edit message/header).
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import {
-  splitTemplateVarString,
-  DEFAULT_MUSTACHE_VAR_REGEX,
-  isAnyTemplateVarToken,
-} from '../../utils/templateVarUtils';
-
-import './index.scss';
-import { VAR_SEGMENT_PLACEHOLDER_PREFIX } from './constants';
-
-const { TextArea } = CapInput;
-
-export function VarSegmentMessageEditor({
-  templateString = '',
-  valueMap = {},
-  onChange,
-  onFocus,
-  placeholderPrefix = VAR_SEGMENT_PLACEHOLDER_PREFIX,
-  getPlaceholder,
-  wrapperClassName = 'rcs_text_area_wrapper',
-  rowClassName = 'rcs-edit-template-message-input',
-  headingClassName = 'rcs-edit-template-message-split',
-  varRegex,
-  readOnly = false,
-  disabled = false,
-  footerContent,
-  renderVarFooter,
-}) {
-  const segments = splitTemplateVarString(templateString, varRegex || DEFAULT_MUSTACHE_VAR_REGEX);
-  if (!segments?.length) return null;
-
-  return (
-    <div className={wrapperClassName}>
-      <CapRow className={rowClassName}>
-        {segments.map((segmentToken, segmentIndex) => {
-          const isVar =
-            typeof segmentToken === 'string' && isAnyTemplateVarToken(segmentToken);
-          if (isVar) {
-            const varSegmentFieldId = `${segmentToken}_${segmentIndex}`;
-            const slotValueFromMap = valueMap?.[varSegmentFieldId];
-            // Missing key: show empty (not the raw {{…}} token) so cleared slots and incomplete maps
-            // cannot resurrect the token; placeholder still guides the user.
-            const value =
-              slotValueFromMap !== undefined && slotValueFromMap !== null ? slotValueFromMap : '';
-            if (readOnly) {
-              return (
-                <CapHeading
-                  key={varSegmentFieldId}
-                  type="h4"
-                  className={`${headingClassName} var-segment-message-editor__read-only-value`.trim()}
-                >
-                  {value}
-                </CapHeading>
-              );
-            }
-            const fromGet = getPlaceholder && getPlaceholder(segmentToken, segmentIndex);
-            const placeholder =
-              fromGet !== undefined && fromGet !== null && fromGet !== ''
-                ? fromGet
-                : `${placeholderPrefix}${segmentToken}`;
-            return (
-              <div key={varSegmentFieldId} className="var-segment-message-editor__var-slot">
-                <TextArea
-                  id={varSegmentFieldId}
-                  placeholder={placeholder}
-                  autosize={{ minRows: 1, maxRows: 3 }}
-                  value={value}
-                  onFocus={() => onFocus && onFocus(varSegmentFieldId)}
-                  onChange={(e) =>
-                    onChange && onChange(varSegmentFieldId, e?.target?.value ?? '')}
-                  disabled={disabled}
-                />
-                {renderVarFooter
-                  ? renderVarFooter(segmentToken, segmentIndex, varSegmentFieldId)
-                  : null}
-              </div>
-            );
-          }
-          if (segmentToken) {
-            return (
-              <CapHeading
-                key={`static_${segmentIndex}_${segmentToken}`}
-                type="h4"
-                className={headingClassName}
-              >
-                {segmentToken}
-              </CapHeading>
-            );
-          }
-          return null;
-        })}
-      </CapRow>
-      {footerContent}
-    </div>
-  );
-}
-
-VarSegmentMessageEditor.propTypes = {
-  templateString: PropTypes.string,
-  valueMap: PropTypes.object,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  placeholderPrefix: PropTypes.string,
-  getPlaceholder: PropTypes.func,
-  wrapperClassName: PropTypes.string,
-  rowClassName: PropTypes.string,
-  headingClassName: PropTypes.string,
-  varRegex: PropTypes.object,
-  readOnly: PropTypes.bool,
-  disabled: PropTypes.bool,
-  footerContent: PropTypes.node,
-  /** Optional hint below a variable field (e.g. DLT `{#var#}` max length). */
-  renderVarFooter: PropTypes.func,
-};
-
-export default VarSegmentMessageEditor;

package/v2Components/VarSegmentMessageEditor/index.scss

@@ -1,46 +0,0 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables';
-
-/* Same look as RCS edit message block: background, spacing, text color */
-.rcs_text_area_wrapper {
-  .rcs-edit-template-message-input {
-    background-color: $CAP_G10;
-    padding: $CAP_SPACE_12 $CAP_SPACE_16 $CAP_SPACE_16;
-  }
-
-  .rcs-edit-template-message-split {
-    margin: 0 0 $CAP_SPACE_04 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: $FONT_COLOR_04;
-    font-weight: 500;
-  }
-
-  /* Variable chips: match RCS edit (white field, light border, 4px radius) */
-  .rcs-edit-template-message-input .ant-input,
-  .rcs-edit-template-message-input textarea.ant-input {
-    margin: 0 0 0.125rem 0;
-    border-radius: 0.25rem;
-    border: 0.0625rem solid $CAP_G07;
-    background-color: $CAP_WHITE;
-    overflow: hidden;
-  }
-
-  /* Small gap between tag border and the next line (static text) */
-  .rcs-edit-template-message-input :not(:first-child) {
-    margin-top: $CAP_SPACE_08;
-  }
-
-  .rcs-edit-template-message-input > *:last-child {
-    margin-bottom: 0;
-  }
-
-  .var-segment-message-editor__var-slot {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-}
-
-.var-segment-message-editor__read-only-value {
-  margin: 0;
-}

package/v2Containers/CreativesContainer/CreativesSlideBoxWrapper.js

@@ -1,43 +0,0 @@
-/**
- * Styled wrapper for CapSlideBox used by CreativesContainer and RCS SMS fallback
- * so header/content/footer margins match.
- */
-import styled from 'styled-components';
-import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
-
-const CreativesSlideBoxWrapper = styled.div`
-  .cap-slide-box-v2-container {
-    /*
-     * Liquid-error spacing must stay *inside* the content column. margin-bottom on
-     * .slidebox-content-container added to the in-flow height past 100vh, so the outer
-     * .cap-slide-box-v2-container (overflow-y: auto in cap-ui) gained a second scrollbar.
-     */
-    .slidebox-header {
-      margin-bottom: ${({ slideBoxWrapperMargin }) => `${slideBoxWrapperMargin}`};
-      padding: 0 rem;
-      &.has-footer {
-        overflow-x: hidden;
-      }
-    }
-    .slidebox-content-container {
-      margin-bottom: 0;
-      padding: 0 rem;
-      padding-bottom: ${({ slideBoxWrapperMargin }) => `${slideBoxWrapperMargin}`};
-      box-sizing: border-box;
-      &.has-footer {
-        overflow-x: hidden;
-      }
-    }
-    .slidebox-footer {
-      /* Only apply margin-bottom to footer when ErrorInfoNote is shown in footer (BEE editor) */
-      /* For HTML Editor, errors are shown in ValidationErrorDisplay (inside content area), so no footer margin needed */
-      margin-bottom: ${({ shouldApplyFooterMargin }) => (shouldApplyFooterMargin ? `${CAP_SPACE_16}` : '0')};
-      padding: 0 rem;
-      &.has-footer {
-        overflow-x: hidden;
-      }
-    }
-  }
-`;
-
-export default CreativesSlideBoxWrapper;

package/v2Containers/CreativesContainer/embeddedSlideboxUtils.js

@@ -1,67 +0,0 @@
-/**
- * Shared logic for CreativesContainer slidebox + embedded flows (e.g. RCS SMS fallback)
- * that mirror the same footer liquid errors and layout margins.
- */
-import get from 'lodash/get';
-import {
-  CAP_SPACE_32,
-  CAP_SPACE_56,
-  CAP_SPACE_64,
-} from '@capillarytech/cap-ui-library/styled/variables';
-import * as constants from './constants';
-
-/**
- * Returns true if value is "deep empty": no errors present.
- * Same rules as CreativesContainer (used for liquid / standard error payloads).
- */
-export function isDeepEmpty(value) {
-  if (value == null) return true;
-  if (typeof value === 'string') return value.length === 0;
-  if (Array.isArray(value)) return value.length === 0;
-  if (typeof value === 'object') {
-    return Object.values(value).every(isDeepEmpty);
-  }
-  return false;
-}
-
-/**
- * Header/content margin below slidebox chrome when ErrorInfoNote stacks errors — same formula as CreativesContainer#render.
- */
-export function getSlideBoxWrapperMarginFromLiquidErrors(liquidErrorMessage) {
-  return (get(liquidErrorMessage, 'STANDARD_ERROR_MSG.length', 0) > 0
-    && get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0)
-    ? CAP_SPACE_64
-    : get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0
-      ? CAP_SPACE_56
-      : get(liquidErrorMessage, 'STANDARD_ERROR_MSG.length', 0) > 0
-        ? CAP_SPACE_32
-        : 0;
-}
-
-/**
- * Maps FormBuilder `showLiquidErrorInFooter` args to slidebox footer state.
- * Returns `null` when CreativesContainer intentionally skips updating (Mobile Push OLD empty clear).
- */
-export function computeLiquidFooterUpdateFromFormBuilder(
-  errorMessagesFromFormBuilder,
-  currentFormBuilderTab,
-  { previousIsLiquidValidationError, currentChannelUpper } = {},
-) {
-  const liquidMsgs = get(errorMessagesFromFormBuilder, constants.LIQUID_ERROR_MSG, []);
-  const standardMsgs = get(errorMessagesFromFormBuilder, constants.STANDARD_ERROR_MSG, []);
-  const hasLiquid = !isDeepEmpty(liquidMsgs);
-  const hasStandard = !isDeepEmpty(standardMsgs);
-  const isLiquidValidationError = hasLiquid || hasStandard;
-  const isMobilePush = currentChannelUpper === constants.MOBILE_PUSH;
-  if (!hasLiquid && !hasStandard && previousIsLiquidValidationError && isMobilePush) {
-    return null;
-  }
-  return {
-    isLiquidValidationError,
-    liquidErrorMessage: errorMessagesFromFormBuilder,
-    activeFormBuilderTab:
-      currentFormBuilderTab === 1
-        ? constants.ANDROID
-        : (currentFormBuilderTab === 2 ? constants.IOS : null),
-  };
-}

package/v2Containers/CreativesContainer/tests/SlideBoxContent.localTemplates.test.js

@@ -1,90 +0,0 @@
-/**
- * Covers `localTemplatesConfig` / `useLocalTemplates` branch in SlideBoxContent → TemplatesV2
- * (embedded SMS template list / RCS SMS fallback).
- */
-import React from 'react';
-import { mountWithIntl, shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
-import { SlideBoxContent } from '../SlideBoxContent';
-
-const mockTemplatesV2 = jest.fn(() => <div data-testid="templates-v2-mock" />);
-jest.mock('../../TemplatesV2', () => ({
-  __esModule: true,
-  default: (props) => mockTemplatesV2(props),
-}));
-
-const baseProps = {
-  slidBoxContent: 'templates',
-  currentChannel: 'SMS',
-  onSelectTemplate: jest.fn(),
-  onPreviewTemplate: jest.fn(),
-  onCreateNew: jest.fn(),
-  onChannelChange: jest.fn(),
-  location: { pathname: '/sms', query: {}, search: '' },
-  cap: {},
-  channelsToHide: [],
-  channelsToDisable: [],
-  handleClose: jest.fn(),
-  messageDetails: {},
-  onCreateComplete: jest.fn(),
-};
-
-describe('SlideBoxContent local templates (TemplatesV2)', () => {
-  beforeEach(() => {
-    mockTemplatesV2.mockClear();
-  });
-
-  // Use mount when asserting TemplatesV2 mock calls: shallow does not invoke children under styled CreativesWrapper.
-  it('renders TemplatesV2 in full mode when useLocalTemplates is true', () => {
-    mountWithIntl(
-      <SlideBoxContent
-        {...baseProps}
-        isFullMode
-        localTemplatesConfig={{
-          useLocalTemplates: true,
-          localTemplates: [],
-          localTemplatesLoading: false,
-        }}
-      />,
-    );
-    expect(mockTemplatesV2).toHaveBeenCalled();
-    const passed = mockTemplatesV2.mock.calls[mockTemplatesV2.mock.calls.length - 1][0];
-    expect(passed.localTemplatesConfig.useLocalTemplates).toBe(true);
-  });
-
-  it('does not render TemplatesV2 in full mode when useLocalTemplates is false', () => {
-    shallowWithIntl(
-      <SlideBoxContent
-        {...baseProps}
-        isFullMode
-        localTemplatesConfig={{ useLocalTemplates: false }}
-      />,
-    );
-    expect(mockTemplatesV2).not.toHaveBeenCalled();
-  });
-
-  it('renders TemplatesV2 in library mode without localTemplates flag', () => {
-    mountWithIntl(
-      <SlideBoxContent
-        {...baseProps}
-        isFullMode={false}
-      />,
-    );
-    expect(mockTemplatesV2).toHaveBeenCalled();
-  });
-
-  it('merges top-level local template props via pick when localTemplatesConfig is omitted', () => {
-    mountWithIntl(
-      <SlideBoxContent
-        {...baseProps}
-        isFullMode
-        useLocalTemplates
-        localTemplates={[{ _id: '1' }]}
-        localTemplatesLoading={false}
-      />,
-    );
-    expect(mockTemplatesV2).toHaveBeenCalled();
-    const passed = mockTemplatesV2.mock.calls[mockTemplatesV2.mock.calls.length - 1][0];
-    expect(passed.localTemplatesConfig.useLocalTemplates).toBe(true);
-    expect(passed.localTemplatesConfig.localTemplates).toEqual([{ _id: '1' }]);
-  });
-});