orionplace-react 0.1.0 → 0.2.1

package/templates/app/_storefront/SellersPage.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { useState } from 'react';
+import { ProductReviews } from '@/components/orionplace/products/ProductReviews';
+import { ProductSearchResults } from '@/components/orionplace/search/ProductSearchResults';
+import { StorefrontSellers } from '@/components/orionplace/sellers/StorefrontSellers';
+import type {
+  ISellerDirectoryEntry,
+  ISellerDirectoryResponse,
+} from '@/interfaces/orionplace/sellers/ISellerDirectory';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { useOrionplaceReviews } from '@/hooks/useOrionplaceReviews';
+import { useOrionplaceStorefront } from '@/hooks/useOrionplaceStorefront';
+import { directoryLabels } from '@/lib/orionplace/directoryLabels';
+import type { ProductSearchPage } from '@/lib/orionplace/productSearch';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import { useProductSearch } from './useProductSearch';
+import { useStorefrontNavigation } from './useStorefrontNavigation';
+import styles from '@/app/storefront.module.css';
+
+type SellerPageData = NonNullable<ISellerDirectoryResponse['page_data']>;
+
+export function SellersPage({
+  sellerId,
+  initial,
+  initialProducts,
+  initialError = '',
+}: {
+  sellerId?: number;
+  initial?: SellerPageData;
+  initialProducts?: ProductSearchPage;
+  initialError?: string;
+}) {
+  const api = useOrionplaceApi();
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const navigation = useStorefrontNavigation();
+  const controls = useOrionplaceStorefront();
+  const labels = directoryLabels(locale);
+  const search = useProductSearch({ sellerId }, initialProducts, '', {
+    scrollToTop: false,
+  });
+  const reviews = useOrionplaceReviews({
+    sellerId,
+    onSignInRequired: () =>
+      navigation.push('/profile', {
+        return: navigation.href('/sellers', { seller: sellerId ?? '' }),
+      }),
+  });
+  const [seller, setSeller] = useState<
+    ISellerDirectoryEntry | null | undefined
+  >(sellerId ? initial?.sellers.data[0] : undefined);
+  const pagination = search.data?.products?.rpag;
+  const total      = pagination?.selected_count ?? pagination?.total_count;
+  // Section links keep the seller and language query and scroll to the anchor.
+  const sections   = [
+    { hash: '#seller-products', label: labels.productsTab, count: total },
+    {
+      hash: '#seller-reviews',
+      label: labels.reviews,
+      count: seller?.seller_feedbacks ?? undefined,
+    },
+  ];
+  return (
+    <main
+      className={`${styles.page} ${styles.sellerPage}`}
+      data-storefront-page="sellers"
+    >
+      <StorefrontSellers
+        sellerId={sellerId}
+        initial={initial}
+        initialError={initialError}
+        loadOnMount={!initial}
+        onLoaded={setSeller}
+        onLoad={(action) =>
+          api.request<SellerPageData>(
+            action.endpoint,
+            action.request,
+            action.signal,
+          )
+        }
+      />
+      {sellerId && seller ? (
+        <nav
+          className={styles.sellerSections}
+          aria-label={labels.sellerSections}
+          data-seller-sections
+        >
+          {sections.map((section) => (
+            <a
+              key={section.hash}
+              className={styles.sellerSection}
+              href={section.hash}
+            >
+              {section.label}
+              {section.count !== undefined ? (
+                <span>{section.count}</span>
+              ) : null}
+            </a>
+          ))}
+        </nav>
+      ) : null}
+      {sellerId && seller !== null ? (
+        <>
+          <section
+            id="seller-products"
+            className={styles.section}
+            aria-labelledby="seller-products-title"
+            data-seller-products
+          >
+            <h2 id="seller-products-title">{labels.sellerProducts}</h2>
+            <ProductSearchResults
+              products={search.data?.products?.data ?? []}
+              facets={search.facets}
+              filters={search.filters}
+              fixedFilters={['product_owner']}
+              page={search.page}
+              pages={pagination?.pages}
+              total={total}
+              hasNext={pagination?.has_next ?? false}
+              pending={search.pending}
+              failed={search.failed}
+              loaded={search.loaded}
+              productActionsDisabled={controls.productActionsDisabled}
+              productHref={(id) => navigation.href(`/product/${id}`)}
+              onSelectHome={() => navigation.push('/')}
+              onChangeFilters={search.changeFilters}
+              onClearFilters={search.clearFilters}
+              onChangePage={search.turnPage}
+              onRetry={search.retry}
+              onSelect={(product) => navigation.push(`/product/${product.id}`)}
+              onSelectSeller={(selected) =>
+                navigation.push('/sellers', { seller: selected.id })
+              }
+              onSelectVariant={controls.onSelectVariant}
+              onRequestSecondaryVariants={controls.onRequestSecondaryVariants}
+              onSelectSecondaryVariant={controls.onSelectSecondaryVariant}
+              onToggleFavorite={controls.onToggleFavorite}
+              onAdd={controls.onAdd}
+              onRemove={controls.onRemove}
+              onSubscribe={controls.onSubscribe}
+              onUnsubscribe={controls.onUnsubscribe}
+              onPreorder={controls.onPreorder}
+            />
+          </section>
+          <section
+            id="seller-reviews"
+            className={`${styles.section} ${styles.reviewsSection}`}
+            aria-label={labels.reviews}
+            data-seller-reviews
+          >
+            <ProductReviews
+              sellerId={sellerId}
+              {...reviews}
+            />
+          </section>
+        </>
+      ) : null}
+    </main>
+  );
+}

package/templates/app/_storefront/StorefrontErrorRoute.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { useStorefrontRouter } from '@/lib/orionplace/navigation';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import { useOrionplaceAppLoad } from '@/hooks/useOrionplaceAppLoad';
+import { StorefrontErrorPage } from '@/components/orionplace/shared/StorefrontErrorPage';
+import {
+  storefrontErrorKind,
+  storefrontErrorLocale,
+  storefrontErrorLocation,
+} from '@/lib/orionplace/errorPageLabels';
+import { StorefrontPageMetadata } from '@/app/_storefront/StorefrontPageMetadata';
+import { useStorefrontPageError } from '@/app/_storefront/StorefrontPageStatus';
+
+export function StorefrontErrorRoute({ statusCode }: { statusCode: number }) {
+  const router       = useStorefrontRouter();
+  const searchParams = useSearchParams();
+  const { isReady }  = useOrionplaceAppLoad();
+  const selected     = useOrionplaceSelections((state) => state.localeCode);
+  // Without Application Load the requested language still labels the page.
+  const locale       = isReady
+    ? selected
+    : storefrontErrorLocale(searchParams.get('locale'), selected);
+  const kind         = storefrontErrorKind(statusCode);
+  useStorefrontPageError(kind);
+
+  return (
+    <>
+      <StorefrontPageMetadata pageKind={kind} />
+      <StorefrontErrorPage
+        statusCode={statusCode}
+        locale={locale}
+        onRetry={() => window.location.reload()}
+        onSelectHome={() => router.push(storefrontErrorLocation('/', locale))}
+        onSelectCatalog={() =>
+          router.push(storefrontErrorLocation('/catalog', locale))
+        }
+      />
+    </>
+  );
+}

package/templates/app/_storefront/StorefrontPageMetadata.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useEffect } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectInit } from '@/stores/orionplace';
+import {
+  storefrontMetadata,
+  type StorefrontPageRecords,
+} from '@/lib/orionplace/pageMetadata';
+import { useStorefrontPageError } from '@/app/_storefront/StorefrontPageStatus';
+import { storefrontErrorLocale } from '@/lib/orionplace/errorPageLabels';
+
+export function StorefrontPageMetadata(records: StorefrontPageRecords) {
+  const pathname                                           = usePathname();
+  const query                                              = useSearchParams().toString();
+  const selectedLocale                                     = useOrionplaceSelections((state) => state.localeCode);
+  const init                                               = useOrionplace(selectInit);
+  const { product, post, tariff, promo, search, pageKind } = records;
+  const routeError                                         = useStorefrontPageError();
+  const errorKind                                          = pageKind ?? routeError;
+  const locale                                             =
+    selectedLocale ||
+    storefrontErrorLocale(new URLSearchParams(query).get('locale'), undefined);
+
+  useEffect(() => {
+    // A record page titles itself once its record is there; the shell's
+    // copy (without records) leaves it alone.
+    const detail   =
+      /^\/(?:product|journal|promo)\/[^/]+$/.test(pathname) ||
+      /^\/tariffs\/[^/]+\/[^/]+$/.test(pathname);
+    if (detail && !errorKind && !product && !post && !tariff && !promo) {
+      return;
+    }
+    const url      = new URL(pathname + (query ? '?' + query : ''), location.origin);
+    const head     = storefrontMetadata(init, locale, url, {
+      product,
+      post,
+      tariff,
+      promo,
+      search,
+      pageKind: errorKind,
+    }).head;
+    document.title = head.title;
+    const active   = new Set<string>();
+    for (const tag of head.meta) {
+      const attribute                    = tag.property ? 'property' : 'name';
+      const value                        = tag.property ?? tag.name!;
+      const key                          = `${attribute}:${value}`;
+      active.add(key);
+      let element                        = document.head.querySelector<HTMLMetaElement>(
+        `meta[${attribute}="${CSS.escape(value)}"]`,
+      );
+      if (!element) {
+        element = document.createElement('meta');
+        element.setAttribute(attribute, value);
+        document.head.append(element);
+      }
+      element.content                    = tag.content;
+      element.dataset.orionplaceMetadata = key;
+    }
+    for (const element of document.head.querySelectorAll<HTMLMetaElement>(
+      'meta[data-orionplace-metadata]',
+    )) {
+      if (!active.has(element.dataset.orionplaceMetadata!)) {
+        element.content = '';
+      }
+    }
+  }, [pathname, query, locale, init, product, post, tariff, promo, search, errorKind]);
+  return null;
+}

package/templates/app/_storefront/StorefrontPageStatus.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+import type { StorefrontErrorKind } from '@/lib/orionplace/errorPageLabels';
+
+interface PageError {
+  route: string;
+  kind: StorefrontErrorKind;
+  owner: object;
+}
+
+interface PageStatus {
+  error: PageError | null;
+  setError: Dispatch<SetStateAction<PageError | null>>;
+}
+
+const context = createContext<PageStatus | null>(null);
+
+export function StorefrontPageStatusProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [error, setError] = useState<PageError | null>(null);
+  const value             = useMemo(() => ({ error, setError }), [error]);
+
+  return <context.Provider value={value}>{children}</context.Provider>;
+}
+
+export function useStorefrontPageError(kind?: StorefrontErrorKind) {
+  const state    = useContext(context);
+  const pathname = usePathname();
+  const query    = useSearchParams().toString();
+  const route    = pathname + (query ? `?${query}` : '');
+  const setError = state?.setError;
+
+  useEffect(() => {
+    if (!kind || !setError) {
+      return;
+    }
+
+    const owner = {};
+    setError({ route, kind, owner });
+
+    // An old route must not clear the error registered by its replacement.
+    return () =>
+      setError((current) => (current?.owner === owner ? null : current));
+  }, [kind, route, setError]);
+
+  return state?.error?.route === route ? state.error.kind : undefined;
+}

package/templates/app/_storefront/StoresPage.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { StorefrontStores } from '@/components/orionplace/stores/StorefrontStores';
+import type { IStoreDirectoryResponse } from '@/interfaces/orionplace/stores/IStoreDirectory';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { useStorefrontNavigation } from './useStorefrontNavigation';
+import styles from '@/app/storefront.module.css';
+
+type StorePageData = NonNullable<IStoreDirectoryResponse['page_data']>;
+
+export function StoresPage({
+  storeId,
+  query = '',
+  page = 1,
+  initial,
+  initialError = '',
+}: {
+  storeId?: number;
+  query?: string;
+  page?: number;
+  initial?: StorePageData;
+  initialError?: string;
+}) {
+  const api = useOrionplaceApi();
+  const navigation = useStorefrontNavigation();
+  return (
+    <main
+      className={styles.page}
+      data-storefront-page="stores"
+    >
+      <StorefrontStores
+        storeId={storeId}
+        initialQuery={query}
+        initialPage={page}
+        initial={initial}
+        initialError={initialError}
+        loadOnMount={!initial}
+        onLoad={(action) =>
+          api.request(action.endpoint, action.request, action.signal)
+        }
+        onSearch={(search) =>
+          navigation.replace('/stores', search ? { q: search } : {})
+        }
+        onPageChange={(next, search) =>
+          navigation.replace('/stores', {
+            ...(search ? { q: search } : {}),
+            ...(next > 1 ? { page: next } : {}),
+          })
+        }
+      />
+    </main>
+  );
+}

package/templates/app/_storefront/SubscriptionsPage.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { AccountSection } from '@/components/orionplace/account/AccountSection';
+import { StorefrontSubscriptions } from '@/components/orionplace/subscriptions/StorefrontSubscriptions';
+import type { ICustomerSubscriptionsResponse } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { useOrionplaceAppLoad } from '@/hooks/useOrionplaceAppLoad';
+import { useStorefrontNavigation } from './useStorefrontNavigation';
+import { useAccountWallet } from './useAccountWallet';
+
+type SubscriptionsData = NonNullable<
+  ICustomerSubscriptionsResponse['page_data']
+>;
+
+export function SubscriptionsPage({
+  initialData,
+  initialError = '',
+}: {
+  initialData?: SubscriptionsData;
+  initialError?: string;
+}) {
+  const api = useOrionplaceApi();
+  const appLoad = useOrionplaceAppLoad();
+  const patchWallet = useAccountWallet();
+  const navigation = useStorefrontNavigation();
+  const request = <T,>(action: {
+    endpoint: string;
+    request: object;
+    signal: AbortSignal;
+  }) => api.request<T>(action.endpoint, action.request, action.signal);
+
+  return (
+    <AccountSection
+      section="subscriptions"
+      onRetry={() => void appLoad.refresh()}
+    >
+      <StorefrontSubscriptions
+        initialData={initialData}
+        initialError={initialError}
+        loadOnMount={!initialData}
+        onLoad={(action) => request<SubscriptionsData>(action)}
+        onLoadProfile={(action) => request(action)}
+        onRenew={(action) => request(action)}
+        onSetRenewal={(action) => request(action)}
+        onChangeTariff={(action) => request(action)}
+        onChangeOption={(action) => request(action)}
+        onCancel={(action) => request(action)}
+        onRequireSignIn={(returnPath) =>
+          navigation.push('/profile', {
+            return: returnPath,
+          })
+        }
+        onSupport={(subscriptionId) =>
+          navigation.push('/tickets', {
+            subscription: subscriptionId,
+          })
+        }
+        onAccountLoaded={(_subscriptions, profile) => patchWallet(profile)}
+      />
+    </AccountSection>
+  );
+}

package/templates/app/_storefront/SupportPage.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+import { AccountSection } from '@/components/orionplace/account/AccountSection';
+import { StorefrontSupport } from '@/components/orionplace/support/StorefrontSupport';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { useOrionplaceAppLoad } from '@/hooks/useOrionplaceAppLoad';
+import type { IOrderHistoryResponse } from '@/interfaces/orionplace/orders/IOrderHistory';
+import type { ICustomerSubscriptionsResponse } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
+import type {
+  ICustomerTicket,
+  ICustomerTicketReply,
+  ICustomerTicketsResponse,
+} from '@/interfaces/orionplace/tickets/ICustomerTicketApi';
+import type { TicketSubjectContext } from '@/lib/orionplace/ticketRequests';
+import {
+  ticketLocationFromQuery,
+  ticketLocationQuery,
+  type TicketLocation,
+} from '@/lib/orionplace/ticketLocation';
+
+type TicketsData = NonNullable<ICustomerTicketsResponse['page_data']>;
+type SubscriptionsData = NonNullable<
+  ICustomerSubscriptionsResponse['page_data']
+>;
+type OrdersData = NonNullable<IOrderHistoryResponse['page_data']>;
+
+export function SupportPage({
+  ticketId,
+  context,
+  initial,
+  selected,
+  replies = [],
+  initialError = '',
+}: {
+  ticketId?: number;
+  context?: TicketSubjectContext;
+  initial?: TicketsData;
+  selected?: ICustomerTicket;
+  replies?: ICustomerTicketReply[];
+  initialError?: string;
+}) {
+  const api          = useOrionplaceApi();
+  const appLoad      = useOrionplaceAppLoad();
+  const pathname     = usePathname();
+  const searchParams = useSearchParams();
+  // `?status&page&ticket`: the list tab, its page and the open conversation.
+  const location     = ticketLocationFromQuery(
+    Object.fromEntries(searchParams.entries()),
+  );
+
+  // Moves inside the page use the browser history directly: Next.js keeps
+  // `useSearchParams` in sync without rendering the server page again, and
+  // Back restores the place. A send or delete replaces the entry.
+  function navigate(next: TicketLocation, replace: boolean) {
+    const query = new URLSearchParams(
+      ticketLocationQuery(Object.fromEntries(searchParams.entries()), next),
+    );
+    const href  = `${pathname}?${query}`;
+    if (replace) {
+      window.history.replaceState(null, '', href);
+    } else {
+      window.history.pushState(null, '', href);
+    }
+  }
+
+  return (
+    <AccountSection
+      section="tickets"
+      onRetry={() => void appLoad.refresh()}
+    >
+      <StorefrontSupport
+        ticketId={location.ticket}
+        status={location.status}
+        page={location.page}
+        context={context}
+        initialData={initial}
+        initialSelected={selected}
+        initialReplies={replies}
+        initialError={initialError}
+        loadOnMount={!initial || Boolean(ticketId && !selected)}
+        onLoadTickets={(action) =>
+          api.request<TicketsData>(
+            action.endpoint,
+            action.request,
+            action.signal,
+          )
+        }
+        onLoadReplies={(action) =>
+          api.request<ICustomerTicketReply[]>(
+            action.endpoint,
+            action.request,
+            action.signal,
+          )
+        }
+        onLoadSubscriptions={(action) =>
+          api.request<SubscriptionsData>(
+            action.endpoint,
+            action.request,
+            action.signal,
+          )
+        }
+        onLoadOrder={(action) =>
+          api.request<OrdersData>(
+            action.endpoint,
+            action.request,
+            action.signal,
+          )
+        }
+        onLoadImage={async (action) => {
+          const response = await api.requestResponse(
+            action.endpoint,
+            action.request,
+            action.signal,
+            action.path,
+          );
+          if (!(response.body instanceof Blob) || response.status >= 300) {
+            throw new Error('Image request failed');
+          }
+          return response.body;
+        }}
+        onSubmit={(action) =>
+          api.request<ICustomerTicket | ICustomerTicketReply[]>(
+            action.endpoint,
+            action.request,
+            action.signal,
+          )
+        }
+        onMutate={(action) =>
+          api.request<void>(
+            action.endpoint,
+            action.request,
+            action.signal,
+            action.path,
+          )
+        }
+        onNavigate={navigate}
+      />
+    </AccountSection>
+  );
+}