orionplace-react 0.1.0 → 0.2.0

package/templates/app/_storefront/OrdersPage.tsx

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

@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { StorefrontPageMetadata } from '@/app/_storefront/StorefrontPageMetadata';
+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 = '',
+}: {
+  productId: number;
+  previewKey?: string;
+  initialProduct?: IProduct;
+  initialError?: 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} />
+      <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

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

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

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

@@ -0,0 +1,220 @@
+'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 {
+  productSearchHeading,
+  productSearchTrail,
+  type ProductSearchPage 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 = '',
+}: {
+  scope: ProductSearchScope;
+  initial?: ProductSearchData;
+  initialError?: string;
+}) {
+  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);
+  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>
+  );
+}