orionplace-react 0.7.7 → 0.8.0

package/templates/app/_storefront/OrdersPage.tsx

@@ -1,129 +0,0 @@
-'use client';
-
-import { AccountSection } from '@/components/orionplace/account/AccountSection';
-import { StorefrontOrders } from '@/components/orionplace/orders/StorefrontOrders';
-import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
-import { useOrionplaceAppLoad } from '@/hooks/useOrionplaceAppLoad';
-import { saveAppFile } from '@/lib/orionplace/nativeApp';
-import type {
-  ICartGetResponse,
-  IPaymentMethod,
-} from '@/interfaces/orionplace/cart/ICartData';
-import { EOrderTab } from '@/interfaces/orionplace/orders/IOrderActions';
-import type { IOrderHistoryResponse } from '@/interfaces/orionplace/orders/IOrderHistory';
-import type { IStorefrontPayment } from '@/interfaces/orionplace/shared/IStorefrontControls';
-import { useStorefrontNavigation } from './useStorefrontNavigation';
-
-type OrdersData = NonNullable<IOrderHistoryResponse['page_data']>;
-type CartData = NonNullable<ICartGetResponse['page_data']>;
-
-// The first tab is the default and stays out of the address.
-function listQuery(tab: EOrderTab): Record<string, number> {
-  return tab === EOrderTab.IN_WORK ? {} : { tab };
-}
-
-export function OrdersPage({
-  orderId,
-  tab,
-  initial,
-  initialError = '',
-}: {
-  orderId?: number;
-  tab: EOrderTab;
-  initial?: OrdersData;
-  initialError?: string;
-}) {
-  const api = useOrionplaceApi();
-  const appLoad = useOrionplaceAppLoad();
-  const navigation = useStorefrontNavigation();
-
-  async function download(
-    endpoint: string,
-    request: object,
-    signal: AbortSignal,
-    filename: string,
-  ) {
-    const response = await api.requestResponse(endpoint, request, signal);
-    if (!(response.body instanceof Blob) || response.status >= 300) {
-      throw new Error('Download failed');
-    }
-    // The Android app saves the file itself; its WebView ignores the link.
-    if (await saveAppFile(response.body, filename)) {
-      return;
-    }
-    const url = URL.createObjectURL(response.body);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = filename;
-    link.click();
-    URL.revokeObjectURL(url);
-  }
-
-  return (
-    <AccountSection
-      section="orders"
-      onRetry={() => void appLoad.refresh()}
-    >
-      <StorefrontOrders
-        orderId={orderId}
-        initial={initial}
-        initialError={initialError}
-        initialTab={tab}
-        loadOnMount={!initial && !initialError}
-        onLoad={(action) =>
-          api.request<OrdersData>(
-            action.endpoint,
-            action.request,
-            action.signal,
-          )
-        }
-        onCancel={(action) =>
-          api.request<void>(
-            action.endpoint,
-            action.request,
-            action.signal,
-            action.path,
-          )
-        }
-        onRepeat={(action) =>
-          api.request<void>(action.endpoint, action.request, action.signal)
-        }
-        onReadCart={(action) =>
-          api.request<CartData>(action.endpoint, action.request, action.signal)
-        }
-        onLoadPaymentMethods={(action) =>
-          api.request<Record<string, IPaymentMethod> | IPaymentMethod[]>(
-            action.endpoint,
-            action.request,
-            action.signal,
-            action.path,
-          )
-        }
-        onSetPayment={(action) =>
-          api.request<IStorefrontPayment>(
-            action.endpoint,
-            action.request,
-            action.signal,
-          )
-        }
-        onDownload={(action) =>
-          download(
-            action.endpoint,
-            action.request,
-            action.signal,
-            action.filename,
-          )
-        }
-        onPageChange={(page) =>
-          navigation.replace('/orders', {
-            ...(orderId ? { order: orderId } : listQuery(tab)),
-            ...(page > 1 ? { page } : {}),
-          })
-        }
-        onTabChange={(nextTab) =>
-          navigation.replace('/orders', listQuery(nextTab))
-        }
-      />
-    </AccountSection>
-  );
-}

package/templates/app/_storefront/PrivacyPage.tsx

@@ -1,15 +0,0 @@
-'use client';
-
-import { StorefrontPrivacy } from '@/components/orionplace/legal/StorefrontPrivacy';
-import styles from '@/app/storefront.module.css';
-
-export function PrivacyPage() {
-  return (
-    <main
-      className={styles.page}
-      data-storefront-page="privacy"
-    >
-      <StorefrontPrivacy />
-    </main>
-  );
-}

package/templates/app/_storefront/ProductPage.tsx

@@ -1,113 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { StorefrontPageMetadata } from '@/app/_storefront/StorefrontPageMetadata';
-import { StorefrontProductStructuredData } from '@/app/_storefront/StorefrontProductStructuredData';
-import { StorefrontErrorRoute } from '@/app/_storefront/StorefrontErrorRoute';
-import { StorefrontProduct } from '@/components/orionplace/products/StorefrontProduct';
-import type { IProduct } from '@/interfaces/orionplace';
-import { useOrionplace } from '@/providers/OrionplaceProvider';
-import { selectInit } from '@/stores/orionplace';
-import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
-import { useOrionplaceStorefront } from '@/hooks/useOrionplaceStorefront';
-import { useOrionplaceReviews } from '@/hooks/useOrionplaceReviews';
-import { requestProductPage } from '@/lib/orionplace/productPage';
-import { useStorefrontNavigation } from '@/app/_storefront/useStorefrontNavigation';
-import styles from '@/app/storefront.module.css';
-
-export function ProductPage({
-  productId,
-  previewKey   = '',
-  initialProduct,
-  initialError = '',
-  origin       = '',
-}: {
-  productId: number;
-  previewKey?: string;
-  initialProduct?: IProduct;
-  initialError?: string;
-  /** The visitor's origin from the server render. */
-  origin?: string;
-}) {
-  const api                                   = useOrionplaceApi();
-  const init                                  = useOrionplace(selectInit);
-  const navigation                            = useStorefrontNavigation();
-  const controls                              = useOrionplaceStorefront();
-  const reviews                               = useOrionplaceReviews({
-    productId,
-    onSignInRequired: () =>
-      navigation.push('/profile', {
-        return: navigation.href(`/product/${productId}`),
-      }),
-  });
-  const [metadataProduct, setMetadataProduct] = useState(initialProduct);
-  const [missing, setMissing]                 = useState(false);
-  useEffect(() => {
-    setMetadataProduct(initialProduct);
-    setMissing(false);
-  }, [productId, initialProduct]);
-
-  if (missing) {
-    return <StorefrontErrorRoute statusCode={404} />;
-  }
-
-  return (
-    <main
-      className={`${styles.page} ${styles.compactPage}`}
-      data-storefront-page="product"
-    >
-      <StorefrontPageMetadata product={metadataProduct} />
-      <StorefrontProductStructuredData
-        product={metadataProduct}
-        origin={origin}
-      />
-      <StorefrontProduct
-        productId={productId}
-        previewKey={previewKey}
-        initialProduct={initialProduct}
-        preloaded={Boolean(initialProduct)}
-        loadOnMount={!initialProduct}
-        initialError={initialError}
-        actionPending={controls.productActionsDisabled}
-        profileHref={navigation.href('/profile')}
-        reviewProps={reviews}
-        onLoad={(action) =>
-          requestProductPage(api, productId, previewKey, action.signal)
-        }
-        // StorefrontProduct keeps the store up to date itself; writing
-        // here could put back a shorter list copy over the full product.
-        onLoaded={setMetadataProduct}
-        onMissing={() => setMissing(true)}
-        onSelectSeller={(seller) =>
-          navigation.push('/sellers', {
-            seller: seller.id,
-          })
-        }
-        onToggleFavorite={controls.onToggleFavorite}
-        onSelectVariant={controls.onSelectVariant}
-        onSelectSecondaryVariant={controls.onSelectSecondaryVariant}
-        onRequestSecondaryVariants={controls.onRequestSecondaryVariants}
-        onAdd={controls.onAdd}
-        onRemove={controls.onRemove}
-        onSubscribe={controls.onSubscribe}
-        onUnsubscribe={controls.onUnsubscribe}
-        onSubmitPreorder={async (action) => {
-          const request: Record<string, unknown> = {
-            product: action.request.product,
-          };
-          if (!init?.is_authenticated) {
-            if (action.request.email) {
-              request.email = action.request.email;
-            }
-            if (action.request.phone) {
-              request.phone = action.request.phone;
-            }
-          }
-          await api.request(action.endpoint, request, action.signal);
-          return true;
-        }}
-        onSignIn={controls.signIn}
-      />
-    </main>
-  );
-}

package/templates/app/_storefront/ProfilePage.tsx

@@ -1,75 +0,0 @@
-'use client';
-
-import { useSearchParams } from 'next/navigation';
-import { useState } from 'react';
-import { AccountSection } from '@/components/orionplace/account/AccountSection';
-import { ProfileSignIn } from '@/components/orionplace/account/ProfileSignIn';
-import { StorefrontProfile } from '@/components/orionplace/account/StorefrontProfile';
-import { useOrionplace } from '@/providers/OrionplaceProvider';
-import { selectIsAuthenticated } from '@/stores/orionplace';
-import { useOrionplaceProfile } from '@/hooks/useOrionplaceProfile';
-import { useStorefrontNavigation } from '@/app/_storefront/useStorefrontNavigation';
-import styles from '@/app/storefront.module.css';
-import { signInReturnLocation } from '@/lib/orionplace/signInReturn';
-import { profileLabels } from '@/lib/orionplace/profileLabels';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-
-export function ProfilePage() {
-  const authenticated                 = useOrionplace(selectIsAuthenticated);
-  const navigation                    = useStorefrontNavigation();
-  const locale                        = useOrionplaceSelections((state) => state.localeCode);
-  const query                         = useSearchParams();
-  const profile                       = useOrionplaceProfile();
-  const [redirecting, setRedirecting] = useState(false);
-  const authentication                = useOrionplaceProfile({
-    loadOnMount: false,
-    onAuthenticated: () => {
-      setRedirecting(true);
-      navigation.replace(
-        signInReturnLocation(
-          query.get('redirect') ?? query.get('return'),
-          locale,
-        ),
-      );
-    },
-  });
-  const showsSignIn                   =
-    !authenticated || authentication.state.refreshRequired || redirecting;
-
-  if (showsSignIn) {
-    return (
-      <main
-        className={styles.profileSignInPage}
-        data-storefront-page="profile-sign-in"
-      >
-        {profile.state.message === 'delete-account' ? (
-          <p
-            className={styles.profileDeleted}
-            role="status"
-            data-profile-deleted
-          >
-            {profileLabels(locale).deleted}
-          </p>
-        ) : null}
-        <ProfileSignIn
-          state={authentication.state}
-          redirecting={redirecting}
-          headingLevel="h1"
-          onRequest={(action) => void authentication.request(action)}
-        />
-      </main>
-    );
-  }
-
-  return (
-    <div data-storefront-page="profile">
-      <AccountSection section="profile">
-        <StorefrontProfile
-          state={profile.state}
-          onRequest={(action) => void profile.request(action)}
-          onSelectHome={() => navigation.push('/')}
-        />
-      </AccountSection>
-    </div>
-  );
-}

package/templates/app/_storefront/PromoPage.tsx

@@ -1,66 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { PromoProducts } from '@/components/orionplace/promo/PromoProducts';
-import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
-import { useOrionplaceStorefront } from '@/hooks/useOrionplaceStorefront';
-import type { IProductSearchResponse } from '@/interfaces/orionplace/products/IProductSearchApi';
-import type { IPromoDefinition } from '@/interfaces/orionplace/cart/ICartData';
-import { useStorefrontNavigation } from './useStorefrontNavigation';
-import { StorefrontPageMetadata } from './StorefrontPageMetadata';
-import styles from '@/app/storefront.module.css';
-
-type PromoData = NonNullable<IProductSearchResponse['page_data']>;
-
-export function PromoPage({
-  promoTypeId,
-  promoCode = '',
-  initial,
-  initialError = '',
-}: {
-  promoTypeId: number;
-  promoCode?: string;
-  initial?: PromoData;
-  initialError?: string;
-}) {
-  const api               = useOrionplaceApi();
-  const controls          = useOrionplaceStorefront();
-  const navigation        = useStorefrontNavigation();
-  // The loaded offer names the page, as in the other packages.
-  const [promo, setPromo] = useState<IPromoDefinition | null>(null);
-
-  return (
-    <main
-      className={styles.page}
-      data-storefront-page="promo"
-    >
-      <StorefrontPageMetadata promo={promo} />
-      <PromoProducts
-        promoTypeId={promoTypeId}
-        promoCode={promoCode}
-        initial={initial}
-        initialError={initialError}
-        loadOnMount={!initial && !initialError}
-        onLoaded={setPromo}
-        productActionsDisabled={controls.productActionsDisabled}
-        productHref={(id) => navigation.href(`/product/${id}`)}
-        onLoad={(action) =>
-          api.request<PromoData>(action.endpoint, action.request, action.signal)
-        }
-        onSelect={(product) => navigation.push(`/product/${product.id}`)}
-        onSelectSeller={(seller) =>
-          navigation.push('/sellers', { seller: seller.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}
-      />
-    </main>
-  );
-}

package/templates/app/_storefront/PromocodesPage.tsx

@@ -1,17 +0,0 @@
-'use client';
-
-import { AccountSection } from '@/components/orionplace/account/AccountSection';
-import { AccountPromocodes } from '@/components/orionplace/account/AccountPromocodes';
-import { useAccountPromocodes } from '@/hooks/useAccountPromocodes';
-
-export function PromocodesPage() {
-  const promocodes = useAccountPromocodes();
-  return (
-    <AccountSection section="promocodes">
-      <AccountPromocodes
-        {...promocodes}
-        headingLevel="h1"
-      />
-    </AccountSection>
-  );
-}

package/templates/app/_storefront/SearchPage.tsx

@@ -1,225 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
-import { directoryLabels } from '@/lib/orionplace/directoryLabels';
-import { storeAddress, storePhoneLink } from '@/lib/orionplace/storeDirectory';
-import type { IPhysicalStore, IStoreDirectoryResponse } from '@/interfaces/orionplace/stores/IStoreDirectory';
-import { ProductSearchResults } from '@/components/orionplace/search/ProductSearchResults';
-import {
-  useOrionplace,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectInit, selectIsReady } from '@/stores/orionplace';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import { useOrionplaceStorefront } from '@/hooks/useOrionplaceStorefront';
-import { browseLabels } from '@/lib/orionplace/browseLabels';
-import { featuredLabels } from '@/lib/orionplace/featuredLabels';
-import type { ProductListLocation } from '@/lib/orionplace/productListLocation';
-import {
-  productSearchHeading,
-  productSearchTrail,
-  type ProductListPage as ProductSearchData,
-  type ProductSearchScope,
-} from '@/lib/orionplace/productSearch';
-import { useProductSearch } from './useProductSearch';
-import { useStorefrontNavigation } from './useStorefrontNavigation';
-import styles from '@/app/storefront.module.css';
-import { StorefrontPageMetadata } from './StorefrontPageMetadata';
-
-function fixedKeys(scope: ProductSearchScope) {
-  return [
-    scope.categoryId ? 'categories' : '',
-    scope.sellerId ? 'product_owner' : '',
-    scope.sellerId ? 'owner_rating_from' : '',
-    scope.manufacturerId ? 'product_manufacture' : '',
-    scope.storeId ? 'physical_store' : '',
-    scope.featured ? 'only_featured' : '',
-  ].filter(Boolean);
-}
-
-export function SearchPage({
-  scope,
-  initial,
-  initialError = '',
-  location,
-}: {
-  scope: ProductSearchScope;
-  initial?: ProductSearchData;
-  initialError?: string;
-  location?: ProductListLocation;
-}) {
-  const locale     = useOrionplaceSelections((state) => state.localeCode);
-  const labels     = browseLabels(locale);
-  const featured   = featuredLabels(locale);
-  const init       = useOrionplace(selectInit);
-  const ready      = useOrionplace(selectIsReady);
-  // Recommendations follow a customer's searches, so a guest is asked to sign in.
-  const guest      = Boolean(scope.featured && ready && !init?.is_authenticated);
-  const navigation = useStorefrontNavigation();
-  const controls   = useOrionplaceStorefront();
-  const search     = useProductSearch(scope, initial, initialError, {
-    location,
-  });
-  const pagination = search.data?.products?.rpag;
-  const api = useOrionplaceApi();
-  const directory = directoryLabels(locale);
-  const [storeDetails, setStoreDetails] = useState<IPhysicalStore>();
-  const physicalStore = storeDetails?.id === scope.storeId ? storeDetails : undefined;
-  useEffect(() => {
-    const request = new AbortController();
-    setStoreDetails(undefined);
-    if (scope.storeId) {
-      void api.request<NonNullable<IStoreDirectoryResponse['page_data']>>(
-        'stores_get',
-        { filters: { id: scope.storeId }, paginate: { page: 1, pp_items: 1 } },
-        request.signal,
-      ).then((data) => {
-        if (!request.signal.aborted) {
-          setStoreDetails(data.data.find((item) => item.id === scope.storeId));
-        }
-      }).catch(() => {});
-    }
-    return () => request.abort();
-  }, [api, scope.storeId]);
-  const names      = {
-    store: physicalStore?.store_name,
-    manufacturer: search.data?.selects?.manufacture?.find(
-      (item) => item.id === scope.manufacturerId,
-    )?.name,
-    seller: search.data?.selects?.sellers?.find(
-      (item) => item.id === scope.sellerId,
-    )?.seller_name,
-  };
-  const heading    = scope.featured
-    ? { title: featured.title, caption: '', named: false }
-    : productSearchHeading(scope, names, labels);
-  const trail      = scope.featured
-    ? [{ label: labels.home, path: '/' }, { label: featured.title }]
-    : productSearchTrail(scope, names, labels);
-
-  return (
-    <main
-      className={`${styles.page} ${styles.searchPage}`}
-      data-storefront-page="search"
-    >
-      <StorefrontPageMetadata search={{ scope, names }} />
-      <nav
-        aria-label={labels.breadcrumb}
-        className={styles.searchBreadcrumbs}
-        data-search-breadcrumbs
-      >
-        {trail.map((item, index) => (
-          <span
-            className={styles.searchCrumb}
-            key={`${index}:${item.label}`}
-          >
-            {index > 0 ? <span aria-hidden="true">/</span> : null}
-            {item.path ? (
-              <a href={navigation.href(item.path, item.query)}>{item.label}</a>
-            ) : (
-              <span
-                aria-current={index === trail.length - 1 ? 'page' : undefined}
-                className={
-                  index === trail.length - 1
-                    ? styles.searchCrumbCurrent
-                    : undefined
-                }
-              >
-                {item.label}
-              </span>
-            )}
-          </span>
-        ))}
-      </nav>
-      <header className={styles.searchHeader}>
-        <h1
-          className={styles.searchTitle}
-          data-search-title
-        >
-          {heading.title}
-        </h1>
-        {heading.named ? (
-          <p className={styles.searchCaption}>{heading.caption}</p>
-        ) : null}
-        {scope.query ? (
-          <p className={styles.searchQuery}>«{scope.query}»</p>
-        ) : null}
-        {scope.featured ? (
-          <p className={styles.searchDescription}>{featured.description}</p>
-        ) : null}
-      </header>
-      {physicalStore ? (
-        <section
-          className={styles.searchStoreInfo}
-          data-search-store-info
-          aria-label={physicalStore.store_name}
-        >
-          <p>{storeAddress(physicalStore, locale)}</p>
-          {physicalStore.phone_number ? (
-            <a href={storePhoneLink(physicalStore.phone_number)}>
-              {physicalStore.phone_number}
-            </a>
-          ) : null}
-          {physicalStore.working_hours ? (
-            <details>
-              <summary>{directory.hours}</summary>
-              <dl>
-                {Object.entries(physicalStore.working_hours).map(([day, hours]) => (
-                  <div key={day}>
-                    <dt>{directory.weekdays[Number(day) - 1]}</dt>
-                    <dd>{hours.open}–{hours.close}</dd>
-                  </div>
-                ))}
-              </dl>
-            </details>
-          ) : null}
-        </section>
-      ) : null}
-      {guest ? (
-        <div
-          className={styles.featuredGuest}
-          data-featured-guest
-        >
-          <OrionplaceEmptyState
-            kind="search"
-            size="large"
-            messageTag="h2"
-            message={featured.guestTitle}
-            description={featured.guestDescription}
-          />
-        </div>
-      ) : (
-        <ProductSearchResults
-          {...controls}
-          emptyDescription={scope.featured ? featured.empty : undefined}
-          query={scope.sellerId || scope.manufacturerId || scope.storeId || scope.featured || scope.categoryId ? undefined : scope.query}
-          products={search.data?.products?.data ?? []}
-          facets={search.facets}
-          filters={search.filters}
-          fixedFilters={fixedKeys(scope)}
-          page={search.page}
-          pages={pagination?.pages}
-          total={pagination?.selected_count ?? pagination?.total_count}
-          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={(seller) =>
-            navigation.push('/sellers', {
-              seller: seller.id,
-            })
-          }
-        />
-      )}
-    </main>
-  );
-}