@capillarytech/creatives-library 8.0.353-alpha.6 → 8.0.353

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

@@ -1,422 +0,0 @@
-import { renderHook, act } from '@testing-library/react-hooks';
-import { waitFor } from '@testing-library/react';
-import { useLocalTemplateList } from '../useLocalTemplateList';
-
-const makeDeferred = () => {
-  let resolve;
-  let reject;
-  const promise = new Promise((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { promise, resolve, reject };
-};
-
-describe('useLocalTemplateList', () => {
-  it('drops stale response when a newer reset starts', async () => {
-    const first = makeDeferred();
-    const second = makeDeferred();
-    const fetchTemplates = jest
-      .fn()
-      .mockImplementationOnce(() => first.promise)
-      .mockImplementationOnce(() => second.promise);
-
-    const { result } = renderHook(() =>
-      useLocalTemplateList({ fetchTemplates, perPage: 2 })
-    );
-
-    act(() => {
-      result.current.reset('old-search');
-    });
-
-    act(() => {
-      result.current.reset('new-search');
-    });
-
-    await act(async () => {
-      second.resolve({
-        templates: [{ _id: 'new-1' }],
-        totalCount: 1,
-      });
-      await Promise.resolve();
-    });
-
-    expect(result.current.templates).toEqual([{ _id: 'new-1' }]);
-    expect(result.current.totalCount).toBe(1);
-
-    await act(async () => {
-      first.resolve({
-        templates: [{ _id: 'old-1' }],
-        totalCount: 1,
-      });
-      await Promise.resolve();
-    });
-
-    // Older response should not overwrite latest state.
-    expect(result.current.templates).toEqual([{ _id: 'new-1' }]);
-    expect(result.current.search).toBe('new-search');
-  });
-
-  it('keeps existing templates when loadMore fails', async () => {
-    const fetchTemplates = jest.fn(({ page }) => {
-      if (page === 1) {
-        return Promise.resolve({
-          templates: [{ _id: 't1' }, { _id: 't2' }],
-          totalCount: 4,
-        });
-      }
-      return Promise.reject(new Error('load-more-failed'));
-    });
-
-    const { result } = renderHook(() =>
-      useLocalTemplateList({ fetchTemplates, perPage: 2 })
-    );
-
-    act(() => {
-      result.current.reset('');
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-      expect(result.current.templates).toHaveLength(2);
-      expect(result.current.page).toBe(1);
-    });
-
-    act(() => {
-      result.current.loadMore();
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-    });
-
-    // Non-reset failure should not wipe already loaded data.
-    expect(result.current.templates).toEqual([{ _id: 't1' }, { _id: 't2' }]);
-    expect(result.current.totalCount).toBe(4);
-    expect(result.current.page).toBe(1);
-  });
-
-  it('clears list on reset failure', async () => {
-    const fetchTemplates = jest
-      .fn()
-      .mockResolvedValueOnce({
-        templates: [{ _id: 'seed-1' }, { _id: 'seed-2' }],
-        totalCount: 2,
-      })
-      .mockRejectedValueOnce(new Error('reset-failed'));
-
-    const { result } = renderHook(() =>
-      useLocalTemplateList({ fetchTemplates, perPage: 2 })
-    );
-
-    act(() => {
-      result.current.reset('');
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-      expect(result.current.templates).toHaveLength(2);
-    });
-
-    act(() => {
-      result.current.reset('fresh-search');
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-    });
-
-    expect(result.current.templates).toEqual([]);
-    expect(result.current.totalCount).toBe(0);
-    expect(result.current.page).toBe(1);
-    expect(result.current.search).toBe('fresh-search');
-  });
-
-  it('keeps previous totalCount when loadMore returns zero totalCount', async () => {
-    const fetchTemplates = jest.fn(({ page }) => {
-      if (page === 1) {
-        return Promise.resolve({
-          templates: [{ _id: 't1' }],
-          totalCount: 10,
-        });
-      }
-      return Promise.resolve({
-        templates: [{ _id: 't2' }],
-        totalCount: 0,
-      });
-    });
-
-    const { result } = renderHook(() =>
-      useLocalTemplateList({ fetchTemplates, perPage: 1 })
-    );
-
-    act(() => {
-      result.current.reset('');
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-      expect(result.current.templates).toHaveLength(1);
-      expect(result.current.totalCount).toBe(10);
-    });
-
-    act(() => {
-      result.current.loadMore();
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-    });
-
-    expect(result.current.templates.map((t) => t._id)).toEqual(['t1', 't2']);
-    expect(result.current.totalCount).toBe(10);
-  });
-
-  it('ignores rejection from a superseded fetch (stale generation)', async () => {
-    const slowFirst = makeDeferred();
-    const fetchTemplates = jest
-      .fn()
-      .mockImplementationOnce(() => slowFirst.promise)
-      .mockImplementationOnce(() =>
-        Promise.resolve({ templates: [{ _id: 'from-second' }], totalCount: 1 }),
-      );
-
-    const { result } = renderHook(() =>
-      useLocalTemplateList({ fetchTemplates, perPage: 25 })
-    );
-
-    act(() => {
-      result.current.reset('first-search');
-    });
-    act(() => {
-      result.current.reset('second-search');
-    });
-
-    await act(async () => {
-      await Promise.resolve();
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-      expect(result.current.templates).toEqual([{ _id: 'from-second' }]);
-    });
-
-    await act(async () => {
-      slowFirst.reject(new Error('stale'));
-      await Promise.resolve();
-    });
-
-    expect(result.current.templates).toEqual([{ _id: 'from-second' }]);
-    expect(result.current.search).toBe('second-search');
-  });
-
-  it('does not leave loading stuck when stale resolve completes after newer fetch (finally gen check)', async () => {
-    const d1 = makeDeferred();
-    const fetchTemplates = jest
-      .fn()
-      .mockImplementationOnce(() => d1.promise)
-      .mockResolvedValueOnce({ templates: [{ _id: 'new' }], totalCount: 1 });
-
-    const { result } = renderHook(() =>
-      useLocalTemplateList({ fetchTemplates, perPage: 2 }),
-    );
-
-    act(() => {
-      result.current.reset('a');
-    });
-    act(() => {
-      result.current.reset('b');
-    });
-
-    await act(async () => {
-      d1.resolve({ templates: [{ _id: 'old' }], totalCount: 1 });
-      await Promise.resolve();
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-      expect(result.current.templates).toEqual([{ _id: 'new' }]);
-    });
-  });
-
-  it('coerces setSearch non-string values to empty search term', () => {
-    const fetchTemplates = jest.fn().mockResolvedValue({ templates: [], totalCount: 0 });
-    const { result } = renderHook(() =>
-      useLocalTemplateList({ fetchTemplates, perPage: 25 }),
-    );
-
-    act(() => {
-      result.current.setSearch(null);
-    });
-    expect(result.current.search).toBe('');
-
-    act(() => {
-      result.current.setSearch(123);
-    });
-    expect(result.current.search).toBe('');
-  });
-
-  it('does not call fetch when loadMore runs but canLoadMore is false', async () => {
-    const fetchTemplates = jest.fn().mockResolvedValue({
-      templates: [{ _id: 'only' }],
-      totalCount: 1,
-    });
-
-    const { result } = renderHook(() =>
-      useLocalTemplateList({ fetchTemplates, perPage: 1 }),
-    );
-
-    act(() => {
-      result.current.reset('');
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-      expect(result.current.canLoadMore).toBe(false);
-    });
-
-    const callsAfterFirst = fetchTemplates.mock.calls.length;
-
-    act(() => {
-      result.current.loadMore();
-    });
-
-    expect(fetchTemplates.mock.calls.length).toBe(callsAfterFirst);
-  });
-
-  it('passes explicit search term from reset() through to fetchTemplates', async () => {
-    const fetchTemplates = jest.fn().mockResolvedValue({
-      templates: [{ _id: 'r1' }],
-      totalCount: 5,
-    });
-
-    const { result } = renderHook(() =>
-      useLocalTemplateList({ fetchTemplates, perPage: 25 }),
-    );
-
-    act(() => {
-      result.current.reset('explicit-search');
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-    });
-
-    expect(fetchTemplates).toHaveBeenCalledWith(
-      expect.objectContaining({ search: 'explicit-search', page: 1, reset: true }),
-    );
-    expect(result.current.search).toBe('explicit-search');
-  });
-
-  it('stores a positive totalCount returned by the API', async () => {
-    const fetchTemplates = jest.fn().mockResolvedValue({
-      templates: [{ _id: 'a' }, { _id: 'b' }],
-      totalCount: 42,
-    });
-
-    const { result } = renderHook(() =>
-      useLocalTemplateList({ fetchTemplates, perPage: 25 }),
-    );
-
-    act(() => {
-      result.current.reset('');
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-    });
-
-    expect(result.current.totalCount).toBe(42);
-    expect(result.current.templates).toHaveLength(2);
-  });
-
-  it('canLoadMore is false while a fetch is in progress even when more items exist', async () => {
-    let resolveFirst;
-    const fetchTemplates = jest.fn(
-      () => new Promise((res) => { resolveFirst = res; }),
-    );
-
-    const { result } = renderHook(() =>
-      useLocalTemplateList({ fetchTemplates, perPage: 2 }),
-    );
-
-    act(() => {
-      result.current.reset('');
-    });
-
-    // Loading is true → canLoadMore must be false regardless of hasMoreByTotal
-    expect(result.current.loading).toBe(true);
-    expect(result.current.canLoadMore).toBe(false);
-
-    await act(async () => {
-      resolveFirst({ templates: [{ _id: 'x' }, { _id: 'y' }], totalCount: 10 });
-      await Promise.resolve();
-    });
-
-    expect(result.current.loading).toBe(false);
-    expect(result.current.canLoadMore).toBe(true);
-  });
-
-  it('canLoadMore is false when templates is empty (hasMoreByFullPage requires length > 0)', async () => {
-    const fetchTemplates = jest.fn().mockResolvedValue({
-      templates: [],
-      totalCount: 0,
-    });
-
-    const { result } = renderHook(() =>
-      useLocalTemplateList({ fetchTemplates, perPage: 0 }),
-    );
-
-    act(() => {
-      result.current.reset('');
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-    });
-
-    // templates.length === 0 means hasMoreByFullPage is false even if lastFetchFullPage would be true
-    expect(result.current.canLoadMore).toBe(false);
-  });
-
-  it('allows loadMore when totalCount is unknown but first page is full (hasMoreByFullPage)', async () => {
-    const fetchTemplates = jest.fn(({ page }) => {
-      if (page === 1) {
-        return Promise.resolve({
-          templates: [{ _id: 'a' }, { _id: 'b' }],
-          totalCount: 0,
-        });
-      }
-      return Promise.resolve({
-        templates: [{ _id: 'c' }],
-        totalCount: 0,
-      });
-    });
-
-    const { result } = renderHook(() =>
-      useLocalTemplateList({ fetchTemplates, perPage: 2 }),
-    );
-
-    act(() => {
-      result.current.reset('');
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-      expect(result.current.canLoadMore).toBe(true);
-    });
-
-    act(() => {
-      result.current.loadMore();
-    });
-
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-    });
-
-    expect(result.current.templates.map((t) => t._id)).toEqual(['a', 'b', 'c']);
-    expect(fetchTemplates).toHaveBeenCalledWith(
-      expect.objectContaining({ page: 2, reset: false }),
-    );
-  });
-});

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 (supports dot notation like user.firstName) */
-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;
-}