@capillarytech/creatives-library 9.0.15-alpha.0 → 9.0.15-alpha.3

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

@@ -0,0 +1,422 @@
+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

@@ -0,0 +1,92 @@
+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 = String(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/_templatePreview.scss

@@ -13,9 +13,7 @@
 
 .shell-v2 {
   position: relative;
-  -webkit-transform: translate(-50%);
-  transform: translate(-50%);
-  left: 50%;
+  margin: 0 auto;
   padding: 0 10px;
   width: 450px;
 
@@ -537,20 +535,21 @@
       .unicode-disabled{
         font-size: 16px;
       }
+      position: absolute;
+      overflow: auto;
+      top: 0;
+      left: 17%;
+      white-space: pre-wrap;
+      word-break: break-word;
+      max-height: 100%;
+      line-height: 0.875rem;
+      font-size: 0.625rem;
+      font-family: 'open-sans';
+
       &.sms {
-        max-height: 100%;
-        position: absolute;
         // width: initial;
-        overflow: auto;
-        top: 0;
-        left: 17%;
-        white-space: pre-wrap;
-        word-break: break-word;
-        line-height: 14px;
         padding: 0 8px 8px 8px;
-        font-size: 10px;
         width: 100%;
-        font-family: 'open-sans';
         .rcs-image{
           width: 100%;
           height: 123px;
@@ -571,6 +570,9 @@
             margin-top: 0;
             padding: 4px 8px;
           }
+          &.rcs-desc {
+            margin-top: $CAP_SPACE_08;
+          }
           &.rcs-button-text{
             color: $FONT_COLOR_05;
             .rcs-icon{
@@ -582,22 +584,12 @@
       &:not(.sms){
         padding: 4px;
         background: #3F51B5;
-        position: absolute;
         // width: initial;
-        overflow: auto;
-        top: 0;
-        left: 17%;
-        white-space: pre-wrap;
-        word-break: break-word;
         border-radius: 4px;
-        max-height: 100%;
         color: #FFFFFF;
         width: 70%;
         min-height: 26px;
-        line-height: 14px;
         padding: 8px;
-        font-size: 10px;
-        font-family: 'open-sans';
       }
       &.message-pop-carousel {
         position: relative; 
@@ -842,9 +834,13 @@
 
   .msg-container-carousel {
     display: flex;
+    width: 100%;
     .scroll-container {
       overflow-x: auto;
+      overflow-y: hidden;
       display: flex;
+      flex-wrap: nowrap;
+      width: 100%;
       padding-top: $CAP_SPACE_06;
       padding-right: $CAP_SPACE_06;
       white-space: nowrap;
@@ -865,6 +861,32 @@
   }
 }
 
+.shell-v2.rcs-preview {
+  // Collapse the default 8px margin so the divider renders as a clean hairline, not a white gap.
+  .whatsapp-divider {
+    margin: 0;
+  }
+
+  // Override `.message-pop:not(.sms)` (blue background) for RCS carousel cards.
+  .msg-container.sms {
+    .message-pop.sms {
+      .rcs-carousel-card {
+        background: $CAP_WHITE;
+        color: $CAP_G01;
+        width: 10.4rem;
+        left: 0;
+        flex-shrink: 0;
+        padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
+        border-radius: $CAP_SPACE_04; // 4px (Figma RCS carousel card corner)
+
+        .carousel-title {
+          font-weight: 700 !important;
+        }
+      }
+    }
+  }
+}
+
 .align-center {
   text-align: center;
 }
@@ -1063,8 +1085,6 @@
 }
 .video-icon {
   position: absolute;
-  right: -17px;
-  bottom: -17px;
 }
 
 .zalo-preview-container {

package/v2Components/TemplatePreview/constants.js

@@ -0,0 +1,2 @@
+/** Matches {{ varName }} placeholders (supports dot notation like user.firstName) */
+export const TEMPLATE_VAR_REGEX = /\{\{\s*([a-zA-Z0-9_.]+)\s*\}\}/g;