orionplace-react 0.7.8 → 0.8.0

package/templates/app/_storefront/SellersPage.tsx

@@ -1,166 +0,0 @@
-'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 { ProductListLocation } from '@/lib/orionplace/productListLocation';
-import type { ProductListPage } 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 = '',
-  location,
-}: {
-  sellerId?: number;
-  initial?: SellerPageData;
-  initialProducts?: ProductListPage;
-  initialError?: string;
-  location?: ProductListLocation;
-}) {
-  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,
-    location,
-  });
-  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}
-              // The seller scope fixes the seller and its rating, as in the
-              // Nuxt and Svelte packages.
-              fixedFilters={['product_owner', 'owner_rating_from']}
-              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

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

@@ -1,117 +0,0 @@
-'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 = '';
-      }
-    }
-    // Canonical and hreflang links follow the address too (a later list
-    // page has its own). The server's links belong to Next.js, so they are
-    // updated in place; only links added here are ever removed.
-    const wanted   = new Map(
-      head.links.map((link) => [
-        'hreflang' in link ? `alternate:${link.hreflang}` : 'canonical',
-        link.href,
-      ]),
-    );
-    // Next.js's own links first, so they take the address and a copy
-    // added here earlier is the one removed.
-    const links    = [
-      ...document.head.querySelectorAll<HTMLLinkElement>(
-        'link[rel="canonical"], link[rel="alternate"][hreflang]',
-      ),
-    ].sort(
-      (left, right) =>
-        Number(Boolean(left.dataset.orionplaceLink)) -
-        Number(Boolean(right.dataset.orionplaceLink)),
-    );
-    for (const element of links) {
-      const key  = element.rel === 'canonical'
-        ? 'canonical'
-        : `alternate:${element.hreflang}`;
-      const href = wanted.get(key);
-      if (href) {
-        element.href = href;
-        wanted.delete(key);
-      } else if (element.dataset.orionplaceLink) {
-        element.remove();
-      }
-    }
-    for (const [key, href] of wanted) {
-      const element                  = document.createElement('link');
-      const [rel, hreflang]          = key.split(':');
-      element.rel                    = rel;
-      element.href                   = href;
-      element.dataset.orionplaceLink = key;
-      if (hreflang) {
-        element.hreflang = hreflang;
-      }
-      document.head.append(element);
-    }
-  }, [pathname, query, locale, init, product, post, tariff, promo, search, errorKind]);
-  return null;
-}

package/templates/app/_storefront/StorefrontPageStatus.tsx

@@ -1,61 +0,0 @@
-'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/StorefrontProductStructuredData.tsx

@@ -1,77 +0,0 @@
-'use client';
-
-import { usePathname, useSearchParams } from 'next/navigation';
-import {
-  useOrionplace,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectInit } from '@/stores/orionplace';
-import type { IProduct } from '@/interfaces/orionplace';
-import type { IProductLocale } from '@/interfaces/orionplace/products/IProduct';
-import {
-  getAvailableNestedValueFromObject,
-  plainText,
-} from '@/lib/orionplace/presentation';
-import {
-  storefrontAbsoluteUrl,
-  storefrontCanonicalUrl,
-} from '@/lib/orionplace/pageSeo';
-import {
-  shippingCountryCodes,
-  storefrontProductStructuredData,
-  structuredDataJson,
-} from '@/lib/orionplace/productStructuredData';
-
-/**
- * The product page's schema.org data for search engines, rendered with the
- * page on the server. Nuxt and Svelte put the same data into the page head
- * through useOrionplacePageSeo.
- */
-export function StorefrontProductStructuredData({
-  product,
-  origin,
-}: {
-  product?: IProduct;
-  /** The visitor's origin from the server render (storefrontPublicOrigin). */
-  origin: string;
-}) {
-  const pathname   = usePathname();
-  const search     = useSearchParams().toString();
-  const init       = useOrionplace(selectInit);
-  const locale     = useOrionplaceSelections((state) => state.localeCode);
-  const currencyId = useOrionplaceSelections((state) => state.currencyId);
-  const field      = <Key extends keyof IProductLocale>(name: Key) =>
-    getAvailableNestedValueFromObject(product?.locale, locale, name);
-  // A preview or any other page without a canonical address gets no data.
-  const canonical  = storefrontCanonicalUrl(
-    origin,
-    pathname,
-    search ? `?${search}` : '',
-    locale,
-  );
-  const json       = structuredDataJson(
-    canonical
-      ? storefrontProductStructuredData(product, {
-          url: canonical,
-          name: field('product_name'),
-          description: plainText(
-            field('meta_description') || field('short_description'),
-          ).slice(0, 160),
-          currencyId,
-          currencyCode: init?.currencies?.[currencyId]?.currency_code,
-          // The backend's shipping countries, for the return terms.
-          shippingCountries: shippingCountryCodes(init?.shipping_countries),
-          showSeller: !init?.visual_settings?.single_seller_mode,
-          absoluteUrl: (value) => storefrontAbsoluteUrl(value, origin),
-        })
-      : undefined,
-  );
-
-  return json ? (
-    <script
-      type="application/ld+json"
-      // The JSON is escaped by structuredDataJson, so it cannot close the tag.
-      dangerouslySetInnerHTML={{ __html: json }}
-    />
-  ) : null;
-}

package/templates/app/_storefront/StoresPage.tsx

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

@@ -1,62 +0,0 @@
-'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>
-  );
-}