orionplace-react 0.1.0 → 0.2.0

package/templates/app/_storefront/useAccountWallet.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import { useOrionplaceStore } from '@/providers/OrionplaceProvider';
+import { selectProfile } from '@/stores/orionplace';
+import type { IProfileResponse } from '@/interfaces/orionplace/accounts/IProfileData';
+
+type ProfilePage = NonNullable<IProfileResponse['page_data']>;
+
+/**
+ * After a purchase or a subscription change the page reloads the customer's
+ * profile; its wallet replaces the balance in the shared state, as Nuxt's
+ * `store.patchWallet()` does. A new Application Load would unmount the page
+ * with its confirmation.
+ */
+export function useAccountWallet() {
+  const store = useOrionplaceStore();
+
+  return (profile: ProfilePage) => {
+    const state   = store.getState();
+    const current = profile.profile_info.find(
+      (item) => item.id === selectProfile(state)?.id,
+    );
+    if (current?.wallet) {
+      state.patchWallet(current.wallet);
+    }
+  };
+}

package/templates/app/_storefront/useBlogComments.ts

@@ -0,0 +1,389 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import type {
+  BlogCommentDeleteAction,
+  BlogCommentsLoadAction,
+  BlogCommentSubmitAction,
+  BlogReplyPage,
+} from '@/components/orionplace/blog/BlogComments';
+import { EBlogCommentStatus } from '@/interfaces/orionplace/blog/IBlogApi';
+import type {
+  IBlogComment,
+  IBlogCommentsResponse,
+} from '@/interfaces/orionplace/blog/IBlogApi';
+import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
+import type { BlogCommentReplies } from '@/lib/orionplace/blogComments';
+import { withNewBlogReply } from '@/lib/orionplace/blogComments';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { fieldErrorText, OrionplaceApiError } from '@/lib/orionplace/api';
+import type { OrionplaceApi } from '@/lib/orionplace/api';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectIsAuthenticated } from '@/stores/orionplace';
+import { useStorefrontNavigation } from './useStorefrontNavigation';
+
+type CommentsPage = NonNullable<IBlogCommentsResponse['page_data']>;
+type ReplyPages   = Record<number, BlogReplyPage>;
+
+const replyPageSize = 50;
+
+function replaceComment(
+  list: readonly IBlogComment[],
+  comment: IBlogComment,
+) {
+  return list.map((item) => (item.id === comment.id ? comment : item));
+}
+
+function countReply(list: readonly IBlogComment[], reply: IBlogComment) {
+  return list.map((item) =>
+    item.id === reply.parent_id ? withNewBlogReply(item, reply) : item,
+  );
+}
+
+function mapReplies(
+  replies: BlogCommentReplies,
+  update: (list: readonly IBlogComment[]) => IBlogComment[],
+) {
+  return Object.fromEntries(
+    Object.entries(replies).map(([id, list]) => [id, update(list)]),
+  ) as BlogCommentReplies;
+}
+
+/*
+ * The discussion pages through root comments (`show_only_main`), newest
+ * first. Replies to every shown comment are loaded with `filters.parent`,
+ * oldest first, level by level, so each reply appears beneath its target
+ * whatever page OrionMarketplace would list it on. `localComments` keeps the customer's
+ * confirmed comments that await moderation and are missing from
+ * blog_comments_get. `client` replaces the storefront's own API client, as
+ * `api` does in useOrionplaceReviews (the documentation previews pass theirs).
+ */
+export function useBlogComments(
+  postId: number,
+  initial?: CommentsPage,
+  client?: Pick<OrionplaceApi, 'request'>,
+) {
+  const storefrontApi               = useOrionplaceApi();
+  const api                         = client ?? storefrontApi;
+  const navigation                  = useStorefrontNavigation();
+  const authenticated               = useOrionplace(selectIsAuthenticated);
+  const locale                      = useOrionplaceSelections(
+    (state) => state.localeCode,
+  );
+  const request                     = useRef<AbortController | undefined>(
+    undefined,
+  );
+  const lastLoad                    = useRef<BlogCommentsLoadAction | undefined>(
+    undefined,
+  );
+  const [roots, setRoots]           = useState(initial?.data ?? []);
+  const [replies, setReplies]       = useState<BlogCommentReplies>({});
+  const [replyPages, setReplyPages] = useState<ReplyPages>({});
+  const [local, setLocal]           = useState<IBlogComment[]>([]);
+  const [pagination, setPagination] = useState<Partial<IApiPagination>>(
+    initial?.rpag ?? {},
+  );
+  const [loaded, setLoaded]         = useState(Boolean(initial));
+  const [pending, setPending]       = useState(false);
+  const [error, setError]           = useState('');
+
+  useEffect(() => () => request.current?.abort(), []);
+
+  useEffect(() => {
+    setLocal([]);
+  }, [postId, authenticated]);
+
+  function errorMessage(reason: unknown) {
+    const fields = reason instanceof OrionplaceApiError ? reason.fields : {};
+
+    return (
+      fieldErrorText(fields) ||
+      featureLabels(locale).failed
+    );
+  }
+
+  function requestReplies(
+    parentId: number,
+    page: number,
+    signal: AbortSignal,
+  ) {
+    return api.request<CommentsPage>(
+      'blog_comments_get',
+      {
+        filters: {
+          for_post: postId,
+          parent: parentId,
+          ordering: 'date_created',
+        },
+        paginate: { page, pp_items: replyPageSize },
+      },
+      signal,
+    );
+  }
+
+  /** Loads replies level by level until no loaded comment reports more. */
+  async function loadDescendants(
+    parents: readonly IBlogComment[],
+    target: Record<number, IBlogComment[]>,
+    pages: ReplyPages,
+    signal: AbortSignal,
+  ) {
+    const visited = new Set(parents.map((comment) => comment.id));
+    let level     = parents.filter((comment) => comment.total_c_replies > 0);
+
+    while (level.length) {
+      const next: IBlogComment[] = [];
+      const results              = await Promise.all(
+        level.map((comment) => requestReplies(comment.id, 1, signal)),
+      );
+
+      results.forEach((data, index) => {
+        const parentId = level[index]!.id;
+        const children = data.data.filter((child) => !visited.has(child.id));
+
+        target[parentId] = children;
+        pages[parentId]  = { page: 1, hasNext: Boolean(data.rpag?.has_next) };
+
+        for (const child of children) {
+          visited.add(child.id);
+          if (child.total_c_replies > 0) {
+            next.push(child);
+          }
+        }
+      });
+
+      level = next;
+    }
+  }
+
+  async function fetchPage(action: BlogCommentsLoadAction, signal: AbortSignal) {
+    const data   = await api.request<CommentsPage>(
+      action.endpoint,
+      action.request,
+      signal,
+    );
+    const nested = {} as Record<number, IBlogComment[]>;
+    const pages  = {} as ReplyPages;
+
+    if (action.mode === 'discussion') {
+      await loadDescendants(data.data, nested, pages, signal);
+    }
+    if (signal.aborted) {
+      return;
+    }
+
+    setRoots(data.data);
+    setReplies(nested);
+    setReplyPages(pages);
+    setPagination(data.rpag);
+  }
+
+  async function fetchReplies(
+    action: BlogCommentsLoadAction,
+    parentId: number,
+    signal: AbortSignal,
+  ) {
+    const data     = await api.request<CommentsPage>(
+      action.endpoint,
+      action.request,
+      signal,
+    );
+    const known    = new Set(
+      (replies[parentId] ?? []).map((comment) => comment.id),
+    );
+    const children = data.data.filter((child) => !known.has(child.id));
+    const nested   = {} as Record<number, IBlogComment[]>;
+    const pages    = {} as ReplyPages;
+
+    await loadDescendants(children, nested, pages, signal);
+    if (signal.aborted) {
+      return;
+    }
+
+    setReplies((current) => ({
+      ...current,
+      ...nested,
+      [parentId]: [...(current[parentId] ?? []), ...children],
+    }));
+    setReplyPages((current) => ({
+      ...current,
+      ...pages,
+      [parentId]: {
+        page: data.rpag.page,
+        hasNext: Boolean(data.rpag.has_next),
+      },
+    }));
+  }
+
+  async function load(action: BlogCommentsLoadAction) {
+    request.current?.abort();
+    const controller = new AbortController();
+    request.current  = controller;
+    if (action.mode !== 'replies') {
+      lastLoad.current = action;
+    }
+    setPending(true);
+    setError('');
+    try {
+      if (action.mode === 'replies' && action.parentId) {
+        await fetchReplies(action, action.parentId, controller.signal);
+      } else {
+        await fetchPage(action, controller.signal);
+      }
+      if (!controller.signal.aborted) {
+        setLoaded(true);
+      }
+    } catch (reason) {
+      if (!controller.signal.aborted) {
+        setError(errorMessage(reason));
+      }
+    } finally {
+      if (request.current === controller) {
+        request.current = undefined;
+        setPending(false);
+      }
+    }
+  }
+
+  // Errors are shown by the list and rethrown, so the form keeps the draft.
+  async function submit(action: BlogCommentSubmitAction) {
+    setError('');
+    try {
+      const comment = await api.request<IBlogComment>(
+        action.endpoint,
+        action.request,
+        undefined,
+        action.commentId ? { comment_id: action.commentId } : {},
+      );
+
+      if (!comment?.id) {
+        throw new Error('Missing confirmed comment');
+      }
+
+      return comment;
+    } catch (reason) {
+      setError(errorMessage(reason));
+      throw reason;
+    }
+  }
+
+  async function remove(action: BlogCommentDeleteAction) {
+    setError('');
+    try {
+      const result = await api.request<{ id: number }>(
+        action.endpoint,
+        action.request,
+        undefined,
+        { comment_id: action.commentId },
+      );
+
+      if (result?.id !== action.commentId) {
+        throw new Error('Missing removed comment');
+      }
+
+      setLocal((current) =>
+        current.filter((item) => item.id !== action.commentId),
+      );
+    } catch (reason) {
+      setError(errorMessage(reason));
+      throw reason;
+    }
+  }
+
+  function rememberLocal(comment: IBlogComment) {
+    setLocal((current) => {
+      const others = current.filter((item) => item.id !== comment.id);
+
+      return comment.status.int === EBlogCommentStatus.APPROVED
+        ? others
+        : [...others, comment];
+    });
+  }
+
+  function countNewReply(reply: IBlogComment) {
+    setRoots((current) => countReply(current, reply));
+    setReplies((current) =>
+      mapReplies(current, (list) => countReply(list, reply)),
+    );
+  }
+
+  function reloadFirstPage() {
+    const action = lastLoad.current;
+
+    if (!action) {
+      return;
+    }
+
+    void load({
+      ...action,
+      request: {
+        ...action.request,
+        paginate: { ...action.request.paginate, page: 1 },
+      },
+    });
+  }
+
+  function saved(comment: IBlogComment, action: BlogCommentSubmitAction) {
+    const isNew     = !action.commentId;
+    const isNewRoot = isNew && comment.parent_id === null;
+    const mine      = lastLoad.current?.mode === 'mine';
+    const page      = pagination.page ?? 1;
+
+    rememberLocal(comment);
+
+    if (mine || (isNewRoot && page !== 1)) {
+      reloadFirstPage();
+      return;
+    }
+
+    if (!isNew) {
+      setRoots((current) => replaceComment(current, comment));
+      setReplies((current) =>
+        mapReplies(current, (list) => replaceComment(list, comment)),
+      );
+      return;
+    }
+
+    if (comment.parent_id === null) {
+      setRoots((current) => [
+        comment,
+        ...current.filter((item) => item.id !== comment.id),
+      ]);
+      return;
+    }
+
+    const parentId  = comment.parent_id;
+
+    setReplies((current) => ({
+      ...current,
+      [parentId]: [
+        ...(current[parentId] ?? []).filter((item) => item.id !== comment.id),
+        comment,
+      ],
+    }));
+    countNewReply(comment);
+  }
+
+  return {
+    roots,
+    replies,
+    replyPages,
+    localComments: local,
+    pagination,
+    loaded,
+    pending,
+    error,
+    onLoad: load,
+    onSubmit: submit,
+    onSaved: saved,
+    onDelete: remove,
+    onRequireSignIn: () =>
+      navigation.push('/profile', {
+        return: `/journal/${postId}`,
+      }),
+  };
+}

package/templates/app/_storefront/useProductSearch.ts

@@ -0,0 +1,171 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import {
+  useOrionplaceBrowseStore,
+  useOrionplaceProductsStore,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import type { ProductFacetSelection } from '@/interfaces/orionplace/products/IProductSearchFacets';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import {
+  loadProductSearch,
+  productSearchFacetData,
+  type ProductSearchPage,
+  type ProductSearchScope,
+} from '@/lib/orionplace/productSearch';
+import { initialSearchFacets } from '@/lib/orionplace/searchFilters';
+import { apiErrorMessage } from '@/lib/orionplace/api';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+
+/*
+ * A search needs a category, a fixed scope or a 3-letter query, as in the
+ * other packages: the sellers list (no seller) sent an empty search that the
+ * backend refused.
+ */
+function searchable(scope: ProductSearchScope) {
+  return Boolean(
+    scope.categoryId || scope.sellerId || scope.manufacturerId ||
+      scope.storeId || scope.featured || (scope.query?.length ?? 0) >= 3,
+  );
+}
+
+/*
+ * `scrollToTop: false` keeps the scroll position on a page turn, for a page
+ * whose pagination scrolls to its own list (the seller page).
+ */
+export function useProductSearch(
+  scope: ProductSearchScope,
+  initial?: ProductSearchPage,
+  initialError = '',
+  options: { scrollToTop?: boolean } = {},
+) {
+  const api                   = useOrionplaceApi();
+  const locale                = useOrionplaceSelections(
+    (state) => state.localeCode,
+  );
+  const productsStore         = useOrionplaceProductsStore();
+  const browseStore           = useOrionplaceBrowseStore();
+  const [data, setData]       = useState(initial);
+  const [filters, setFilters] = useState<ProductFacetSelection>({});
+  const [page, setPage]       = useState(initial?.products?.rpag.page ?? 1);
+  const [pending, setPending] = useState(false);
+  const [loaded, setLoaded]   = useState(Boolean(initial));
+  const [error, setError]     = useState(initialError);
+  // Filter choices of the scope's first response; a filtered response must
+  // not shrink them, so the visitor can still pick another seller or price.
+  const [facets, setFacets]   = useState(() => productSearchFacetData(initial));
+  const request               = useRef<AbortController | undefined>(undefined);
+  const signature             = JSON.stringify(scope);
+
+  function apply(next: ProductSearchPage) {
+    // The backend sends the unfiltered total with the first page only;
+    // later pages keep it, as in the Nuxt and Svelte packages.
+    setData((previous) =>
+      next.products && previous?.products
+        ? {
+            ...next,
+            products: {
+              ...next.products,
+              rpag: {
+                ...previous.products.rpag,
+                ...Object.fromEntries(
+                  Object.entries(next.products.rpag ?? {}).filter(
+                    ([, value]) => value !== undefined,
+                  ),
+                ),
+              },
+            },
+          }
+        : next,
+    );
+    setLoaded(true);
+    const incoming = productSearchFacetData(next);
+    if (incoming) {
+      browseStore.getState().preserveSearchFacets(incoming);
+      setFacets((previous) => initialSearchFacets(previous, incoming));
+    }
+    for (const product of next.products?.data ?? []) {
+      productsStore
+        .getState()
+        .setProduct(product, 'products', next.selects?.sellers);
+    }
+  }
+
+  async function load(nextPage = page, nextFilters = filters) {
+    request.current?.abort();
+    const controller = new AbortController();
+    request.current  = controller;
+    setPending(true);
+    setError('');
+    try {
+      const next = await loadProductSearch(
+        api,
+        scope,
+        nextFilters,
+        nextPage,
+        controller.signal,
+      );
+      if (!controller.signal.aborted) {
+        setPage(nextPage);
+        apply(next);
+      }
+    } catch (reason) {
+      if (!(reason instanceof Error && reason.name === 'AbortError')) {
+        setError(apiErrorMessage(reason) || featureLabels(locale).failed);
+      }
+    } finally {
+      if (request.current === controller) {
+        request.current = undefined;
+        setPending(false);
+      }
+    }
+  }
+
+  useEffect(() => {
+    browseStore.getState().setSearchQuery(scope.query ?? '');
+    browseStore.getState().setSearchFilters({});
+    browseStore.getState().setSearchFacets(productSearchFacetData(initial));
+    setFacets(productSearchFacetData(initial));
+    setData(initial);
+    setFilters({});
+    setPage(initial?.products?.rpag.page ?? 1);
+    setLoaded(Boolean(initial));
+    setError(initialError);
+    if (!initial && searchable(scope)) {
+      void load(1, {});
+    }
+    return () => request.current?.abort();
+  }, [signature]);
+
+  return {
+    data,
+    facets,
+    filters,
+    page,
+    pending,
+    loaded,
+    failed: Boolean(error),
+    error,
+    changeFilters(next: ProductFacetSelection) {
+      setFilters(next);
+      browseStore.getState().setSearchFilters(next);
+      void load(1, next);
+    },
+    clearFilters() {
+      setFilters({});
+      browseStore.getState().setSearchFilters({});
+      void load(1, {});
+    },
+    turnPage(next: number) {
+      if (options.scrollToTop !== false) {
+        // The next page starts at the top, as in the Nuxt and Svelte packages.
+        window.scrollTo({ top: 0, behavior: 'instant' });
+      }
+      void load(next);
+    },
+    retry() {
+      void load(page);
+    },
+  };
+}

package/templates/app/_storefront/useStorefrontNavigation.ts

@@ -0,0 +1,36 @@
+'use client';
+
+import { useStorefrontRouter } from '@/lib/orionplace/navigation';
+import {
+  useOrionplaceSelections,
+  useOrionplaceSelectionsStore,
+} from '@/providers/OrionplaceProvider';
+
+export function useStorefrontNavigation() {
+  const router     = useStorefrontRouter();
+  const selections = useOrionplaceSelectionsStore();
+  const locale     = useOrionplaceSelections((state) => state.localeCode);
+
+  function href(path: string, values: Record<string, string | number> = {}) {
+    const url            = new URL(path, 'http://orionplace.invalid');
+    const query          = url.searchParams;
+    // A session refresh can finish before React renders its new selections.
+    const selectedLocale = selections.getState().localeCode || locale;
+    if (selectedLocale) {
+      query.set('locale', selectedLocale);
+    }
+    for (const [name, value] of Object.entries(values)) {
+      query.set(name, String(value));
+    }
+    return `${url.pathname}?${query}${url.hash}`;
+  }
+
+  return {
+    locale,
+    href,
+    push: (path: string, values?: Record<string, string | number>) =>
+      router.push(href(path, values)),
+    replace: (path: string, values?: Record<string, string | number>) =>
+      router.replace(href(path, values)),
+  };
+}

package/templates/app/activity/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/activity', props);
+}

package/templates/app/addresses/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/addresses', props);
+}

package/templates/app/api/[...orionplace]/route.ts

@@ -1,14 +1,21 @@
 // Every browser request to /api/... reaches your personal marketplace API here.
-import { forwardMarketplace } from '__ORIONPLACE_RUNTIME__';
+import { forwardMarketplace } from '@orionplace-runtime/marketplace.mjs';
 
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
 
 function handler(request: Request): Promise<Response> {
-  return forwardMarketplace(request, { mimicFrontDomain: process.env.MIMIC_FRONT_DOMAIN ?? '' });
+  return forwardMarketplace(request, {
+    mimicFrontDomain: process.env.MIMIC_FRONT_DOMAIN ?? '',
+  });
 }
 
 export {
-  handler as GET, handler as HEAD, handler as OPTIONS, handler as POST,
-  handler as PUT, handler as PATCH, handler as DELETE,
+  handler as GET,
+  handler as HEAD,
+  handler as OPTIONS,
+  handler as POST,
+  handler as PUT,
+  handler as PATCH,
+  handler as DELETE,
 };

package/templates/app/browse/page.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next';
+import { browseLabels } from '@/lib/orionplace/browseLabels';
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+export async function generateMetadata({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}): Promise<Metadata> {
+  const query  = await searchParams;
+  const locale = typeof query.locale === 'string' ? query.locale : 'en';
+  const search = typeof query.q === 'string' ? query.q.trim() : '';
+  const title  = browseLabels(locale).searchResults;
+
+  return {
+    title: search ? `${title} · ${search}` : title,
+    robots: { index: false, follow: true },
+  };
+}
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/browse', props);
+}