orionplace-react 0.1.0 → 0.2.1

package/templates/app/StorefrontShell.tsx

@@ -0,0 +1,435 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import {
+  usePathname,
+  useSearchParams,
+  useSelectedLayoutSegment,
+} from 'next/navigation';
+import { useStorefrontRouter } from '@/lib/orionplace/navigation';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+  useOrionplaceSelectionsStore,
+  useOrionplaceProductsStore,
+} from '@/providers/OrionplaceProvider';
+import {
+  OrionplaceStorefrontProvider,
+  useOrionplaceStorefront,
+} from '@/hooks/useOrionplaceStorefront';
+import { OrionplaceThemeProvider } from '@/components/orionplace/theme/OrionplaceThemeProvider';
+import { StorefrontHeader } from '@/components/orionplace/storefront/StorefrontHeader';
+import { StorefrontFooter } from '@/components/orionplace/storefront/StorefrontFooter';
+import { CartPreview } from '@/components/orionplace/cart/CartPreview';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { useOrionplaceAppLoad } from '@/hooks/useOrionplaceAppLoad';
+import type { ICartItemMutationResponse } from '@/interfaces/orionplace/cart/ICartActions';
+import { OrionplaceApiError } from '@/lib/orionplace/api';
+import { localesMatch } from '@/lib/orionplace/presentation';
+import {
+  APP_ORIGIN,
+  saveAppLocale,
+  savedAppLocale,
+} from '@/lib/orionplace/nativeApp';
+import {
+  cartPreviewCounter,
+  cartPreviewLabels,
+  cartPreviewProducts,
+  cartPreviewRemoval,
+  cartPreviewState,
+} from '@/lib/orionplace/cartPreview';
+import {
+  createSearchHistory,
+  emptySearchHistory,
+} from '@/lib/orionplace/searchHistory';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { signInPageLocation } from '@/lib/orionplace/signInReturn';
+import { selectInit, selectIsAuthenticated } from '@/stores/orionplace';
+import { MainSearch } from '@/components/orionplace/search/MainSearch';
+import { StorefrontErrorPage } from '@/components/orionplace/shared/StorefrontErrorPage';
+import styles from '@/app/storefront.module.css';
+import { StorefrontPageMetadata } from '@/app/_storefront/StorefrontPageMetadata';
+import {
+  StorefrontPageStatusProvider,
+  useStorefrontPageError,
+} from '@/app/_storefront/StorefrontPageStatus';
+
+function ShellContent({ children }: { children: ReactNode }) {
+  const router                          = useStorefrontRouter();
+  const pathname                        = usePathname();
+  const searchParams                    = useSearchParams();
+  const selections                      = useOrionplaceSelectionsStore();
+  const api                             = useOrionplaceApi();
+  const locale                          = useOrionplaceSelections((state) => state.localeCode);
+  const authenticated                   = useOrionplace(selectIsAuthenticated);
+  const controls                        = useOrionplaceStorefront();
+  const pageError                       = useStorefrontPageError();
+  const cartRequest                     = useRef<AbortController | undefined>(undefined);
+  const authentication                  = useRef(authenticated);
+  const historyLocale                   = useRef(locale);
+  authentication.current                = authenticated;
+  historyLocale.current                 = locale;
+  const products                        = useOrionplaceProductsStore();
+  const cartOpen                        = useRef(false);
+  const [cartPreview, setCartPreview]   = useState(cartPreviewState);
+  const [historyState, setHistoryState] = useState(emptySearchHistory);
+  const history                         = useMemo(
+    () =>
+      createSearchHistory({
+        api,
+        authenticated: () => authentication.current,
+        failedMessage: () => featureLabels(historyLocale.current).failed,
+        changed: setHistoryState,
+      }),
+    [api],
+  );
+
+  useEffect(() => {
+    // The Android app falls back to the language picked on the device.
+    const requested =
+      searchParams.get('locale') || (APP_ORIGIN ? savedAppLocale() : '');
+    // Only a new language resets the currency and units to its own.
+    if (requested && !localesMatch(requested, selections.getState().localeCode)) {
+      selections.getState().setLocale(requested);
+    }
+  }, [pathname, searchParams, selections]);
+
+  // A language the customer picks goes into the address, so a reload and a
+  // shared link keep it; the Android app also keeps it on the device. The
+  // first language set while the storefront loads leaves the address as it is.
+  const shownLocale                     = useRef(locale);
+  useEffect(() => {
+    const previous      = shownLocale.current;
+    shownLocale.current = locale;
+    const requested     = searchParams.get('locale');
+    if (APP_ORIGIN && previous && locale && previous !== locale) {
+      saveAppLocale(locale);
+    }
+    if (
+      !previous ||
+      !locale ||
+      previous === locale ||
+      (requested && localesMatch(requested, locale))
+    ) {
+      return;
+    }
+    const query = new URLSearchParams(searchParams.toString());
+    query.set('locale', locale);
+    router.replace(`${pathname}?${query}`, { scroll: false });
+  }, [locale, pathname, router, searchParams]);
+
+  useEffect(() => {
+    if (locale) {
+      document.documentElement.lang = locale;
+    }
+  }, [locale]);
+
+  useEffect(
+    () => () => {
+      cartRequest.current?.abort();
+      history.reset();
+    },
+    [history],
+  );
+
+  useEffect(() => {
+    if (!authenticated) {
+      history.reset();
+    }
+  }, [authenticated, history]);
+
+  // Another customer session must not show the previous cart.
+  useEffect(() => {
+    cartRequest.current?.abort();
+    cartRequest.current = undefined;
+    cartOpen.current    = false;
+    setCartPreview(cartPreviewState());
+  }, [authenticated]);
+
+  function route(path: string) {
+    router.push(path);
+  }
+
+  function localized(path: string) {
+    const separator = path.includes('?') ? '&' : '?';
+    return `${path}${separator}locale=${encodeURIComponent(locale)}`;
+  }
+
+  // Hover and focus ask for the preview repeatedly; an open preview keeps
+  // its loaded list until it closes.
+  function showCartPreview() {
+    if (!cartOpen.current) {
+      void loadCartPreview();
+    }
+  }
+
+  async function loadCartPreview() {
+    if (cartRequest.current) {
+      return;
+    }
+    const controller    = new AbortController();
+    cartRequest.current = controller;
+    cartOpen.current    = true;
+    setCartPreview({ ...cartPreviewState(), open: true, pending: true });
+    try {
+      const data  = await api.request<{
+        cart_data?: unknown;
+        cart?: { c_cart_positions?: unknown };
+      }>('cart_guest_modal_get', {}, controller.signal);
+      const items = cartPreviewProducts(data);
+      const count = cartPreviewCounter(data);
+      if (!controller.signal.aborted) {
+        setCartPreview((current) => ({
+          ...current,
+          pending: false,
+          products: items,
+        }));
+
+        // Opening the preview also refreshes the header counter.
+        if (count !== undefined) {
+          products.getState().setProductCounters({ c_cart_positions: count });
+        }
+      }
+    } catch (reason) {
+      if (!controller.signal.aborted) {
+        const copy        = cartPreviewLabels(locale);
+        const unavailable =
+          reason instanceof OrionplaceApiError && reason.kind === 'unavailable';
+        setCartPreview((current) => ({
+          ...current,
+          pending: false,
+          error: unavailable ? copy.unavailable : copy.failed,
+        }));
+      }
+    } finally {
+      if (cartRequest.current === controller) {
+        cartRequest.current = undefined;
+      }
+    }
+  }
+
+  // A removal is a mutation: it is not aborted when the preview closes, and
+  // the row, the header counter and the product's cart state change only
+  // after the backend confirms it.
+  async function removeCartItem(cartItemId: number) {
+    const product = cartPreview.products.find(
+      (item) => item.cart_counts?.cart_id === cartItemId,
+    );
+    if (!product || cartPreview.removing.includes(cartItemId)) {
+      return;
+    }
+
+    setCartPreview((current) => ({
+      ...current,
+      removing: [...current.removing, cartItemId],
+      removeError: '',
+    }));
+
+    try {
+      const data = cartPreviewRemoval(
+        await api.request<ICartItemMutationResponse['page_data']>(
+          'cart_guest_remove_by_cart_item',
+          {},
+          undefined,
+          { cart_item_id: cartItemId },
+        ),
+      );
+
+      setCartPreview((current) => ({
+        ...current,
+        products: current.products.filter((item) => item.id !== product.id),
+      }));
+      products.getState().setProductCounters({
+        c_cart_positions: data.c_cart_positions,
+      });
+      products.getState().patchProduct(product.id, {
+        cart_counts: null,
+        ...(typeof data.c_real_left === 'number'
+          ? { c_real_left: data.c_real_left }
+          : {}),
+      });
+    } catch {
+      setCartPreview((current) => ({
+        ...current,
+        removeError: cartPreviewLabels(locale).removeFailed,
+      }));
+    } finally {
+      setCartPreview((current) => ({
+        ...current,
+        removing: current.removing.filter((id) => id !== cartItemId),
+      }));
+    }
+  }
+
+  function closeCartPreview() {
+    cartRequest.current?.abort();
+    cartRequest.current = undefined;
+    cartOpen.current    = false;
+    setCartPreview((current) => ({
+      ...current,
+      open: false,
+      pending: false,
+    }));
+  }
+
+  function search(query: string) {
+    void history.save(query);
+    route(
+      `/browse?q=${encodeURIComponent(query)}` +
+        `&locale=${encodeURIComponent(locale)}`,
+    );
+  }
+
+  if (pageError === 'error') {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className={styles.shell}>
+      <StorefrontPageMetadata />
+      <StorefrontHeader
+        {...controls}
+        categoryHref={(id) => localized(`/category/${id}`)}
+        productHref={(id) => localized(`/product/${id}`)}
+        onSignIn={() => {
+          const target = signInPageLocation(
+            `${pathname}${searchParams.size ? `?${searchParams}` : ''}`,
+            locale,
+          );
+          route(`${target.path}?${new URLSearchParams(target.query)}`);
+        }}
+        onSignOut={() => route(localized('/logout'))}
+        onSelectProfile={() => route(localized('/profile'))}
+        onSelectWallet={() => route(localized('/wallet'))}
+        onSelectWishlist={() => route(localized('/wishlist'))}
+        onSelectCart={() => {
+          closeCartPreview();
+          route(localized('/cart'));
+        }}
+        onPreviewCart={showCartPreview}
+        onCloseCartPreview={closeCartPreview}
+        renderCartPreview={() =>
+          cartPreview.open ? (
+            <CartPreview
+              state={cartPreview}
+              onRetry={() => void loadCartPreview()}
+              onRemove={(id) => void removeCartItem(id)}
+              onSelectProduct={(id) => {
+                closeCartPreview();
+                route(localized(`/product/${id}`));
+              }}
+              onSelectCart={() => {
+                closeCartPreview();
+                route(localized('/cart'));
+              }}
+            />
+          ) : null
+        }
+        onSelectManufacturers={() => route(localized('/manufacturers'))}
+        onSelectJournal={() => route(localized('/journal'))}
+        onSearch={search}
+        renderSearch={(props) => (
+          <MainSearch
+            {...props}
+            history={historyState.items}
+            historyPending={historyState.pending}
+            historyError={historyState.error}
+            historyDeleting={historyState.deleting}
+            onHistorySearch={(query) => void history.load(query)}
+            onHistoryDelete={(id) => void history.remove(id)}
+            onSearch={search}
+          />
+        )}
+        onSelectCategory={(category) =>
+          route(localized(`/category/${category.id}`))
+        }
+        onSelectProduct={(product) =>
+          route(localized(`/product/${product.id}`))
+        }
+        onSelectSeller={(seller) =>
+          route(
+            `/sellers?seller=${seller.id}&locale=${encodeURIComponent(locale)}`,
+          )
+        }
+      />
+      <div className={styles.content}>{children}</div>
+      <StorefrontFooter onNavigate={route} />
+    </div>
+  );
+}
+
+function StorefrontInitialization({ children }: { children: ReactNode }) {
+  const init                                              = useOrionplace(selectInit);
+  const pathname                                          = usePathname();
+  const searchParams                                      = useSearchParams();
+  const selectedLocale                                    =
+    useOrionplaceSelections((state) => state.localeCode);
+  // Next.js names an address without a page `/_not-found`.
+  const unknownAddress                                    =
+    useSelectedLayoutSegment() === '/_not-found';
+  const { status, isReady, initialize }                   =
+    useOrionplaceAppLoad();
+  const initialized                                       = useRef(false);
+  if (isReady) {
+    initialized.current = true;
+  }
+
+  useEffect(() => {
+    if (status === 'idle') {
+      void initialize();
+    }
+  }, [initialize, status]);
+
+  // The Android app shows its first page once the storefront has loaded,
+  // like the website's server render.
+  if (APP_ORIGIN && !initialized.current && status !== 'error') {
+    return null;
+  }
+
+  const refreshing                                        = status === 'pending' && Boolean(init);
+  // Session pages own the retry after a confirmed sign-in or sign-out.
+  // Unmounting them during Application Load would discard that confirmation.
+  const sessionPage                                       =
+    initialized.current && ['/profile', '/logout'].includes(pathname);
+  if (!isReady && !refreshing && !sessionPage) {
+    // A failed Application Load replaces every existing page with the 503
+    // error page, like Nuxt and SvelteKit; an unknown address keeps its 404.
+    if (status === 'error' && unknownAddress) {
+      return <>{children}</>;
+    }
+
+    const locale = searchParams.get('locale') || selectedLocale || 'en';
+    const leave  = (path: string) =>
+      window.location.assign(`${path}?locale=${encodeURIComponent(locale)}`);
+
+    return (
+      <>
+        <StorefrontPageMetadata pageKind="error" />
+        <StorefrontErrorPage
+          statusCode={503}
+          locale={locale}
+          pending={status === 'pending'}
+          onRetry={() => window.location.reload()}
+          onSelectHome={() => leave('/')}
+          onSelectCatalog={() => leave('/catalog')}
+        />
+      </>
+    );
+  }
+
+  return (
+    <OrionplaceStorefrontProvider>
+      <ShellContent>{children}</ShellContent>
+    </OrionplaceStorefrontProvider>
+  );
+}
+
+export function StorefrontShell({ children }: { children: ReactNode }) {
+  return (
+    <OrionplaceThemeProvider>
+      <StorefrontPageStatusProvider>
+        <StorefrontInitialization>{children}</StorefrontInitialization>
+      </StorefrontPageStatusProvider>
+    </OrionplaceThemeProvider>
+  );
+}

package/templates/app/[[...path]]/page.app.tsx

@@ -0,0 +1,11 @@
+import { AppRoutes } from '@/app/_storefront/AppRoutes';
+
+// The Android app build is this one page; AppRoutes shows the page of the
+// current address (orionplace/runtime/app.mjs).
+export function generateStaticParams() {
+  return [{ path: [''] }];
+}
+
+export default function Page() {
+  return <AppRoutes />;
+}

package/templates/app/_storefront/ActivityPage.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { AccountActivity } from '@/components/orionplace/account/AccountActivity';
+import { AccountSection } from '@/components/orionplace/account/AccountSection';
+import { useAccountActivity } from '@/hooks/useAccountActivity';
+import { useStorefrontNavigation } from './useStorefrontNavigation';
+
+export function ActivityPage({ tab }: { tab?: string }) {
+  const navigation = useStorefrontNavigation();
+  const activity = useAccountActivity();
+
+  return (
+    <AccountSection section="activity">
+      <AccountActivity
+        tab={tab}
+        onTabChange={(next) => navigation.replace('/activity', { tab: next })}
+        promocodes={activity.promocodes}
+        logs={activity.logs}
+        reviews={activity.reviews}
+      />
+    </AccountSection>
+  );
+}

package/templates/app/_storefront/AddressesPage.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { AccountSection } from '@/components/orionplace/account/AccountSection';
+import { StorefrontAddresses } from '@/components/orionplace/address/StorefrontAddresses';
+import { useAccountAddresses } from '@/hooks/useAccountAddresses';
+import { useOrionplaceAppLoad } from '@/hooks/useOrionplaceAppLoad';
+import type { IUserAddressListResponse } from '@/interfaces/orionplace/address/IUserAddress';
+
+type AddressPageData = NonNullable<IUserAddressListResponse['page_data']>;
+
+export function AddressesPage({
+  initial,
+  initialError = '',
+}: {
+  initial?: AddressPageData;
+  initialError?: string;
+}) {
+  const appLoad = useOrionplaceAppLoad();
+  const addresses = useAccountAddresses({ initial, initialError });
+
+  return (
+    <AccountSection
+      section="addresses"
+      onRetry={() => void appLoad.refresh()}
+    >
+      <StorefrontAddresses {...addresses} />
+    </AccountSection>
+  );
+}

package/templates/app/_storefront/AppRoutes.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import {
+  Fragment,
+  Suspense,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { OrionplaceProvider, useOrionplaceSelectionsStore, useOrionplaceStore } from '@/providers/OrionplaceProvider';
+import { StorefrontShell } from '@/app/StorefrontShell';
+import { StorefrontErrorRoute } from '@/app/_storefront/StorefrontErrorRoute';
+import {
+  loadStorefrontRoute,
+  matchStorefrontRoute,
+  type StorefrontRouteQuery,
+} from '@/app/_storefront/storefrontRoutes';
+import { transport } from '@/hooks/useOrionplaceApi';
+import { OrionplaceApi, apiErrorMessage } from '@/lib/orionplace/api';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import {
+  handleAppBackButton,
+  nativeAppCookies,
+} from '@/lib/orionplace/nativeApp';
+import {
+  openAppAddress,
+  takeAppPageReplace,
+  takeAppPageScroll,
+  useStorefrontRouter,
+} from '@/lib/orionplace/navigation';
+import { requestProductPage } from '@/lib/orionplace/productPage';
+import {
+  requestPromoProducts,
+  requestPublication,
+  requestTariffs,
+} from '@/lib/orionplace/storefrontRecords';
+
+/*
+ * The Android app build (orionplace/runtime/app.mjs): one static page that
+ * shows the storefront page of the current address. It runs the same route
+ * table as the website's server pages (storefrontRoutes.tsx), in the app.
+ */
+
+function query(search: URLSearchParams): StorefrontRouteQuery {
+  const values: StorefrontRouteQuery = {};
+  for (const name of new Set(search.keys())) {
+    const all    = search.getAll(name);
+    values[name] = all.length > 1 ? all : all[0];
+  }
+  return values;
+}
+
+// A plain link inside the app opens its page in the app, without a reload.
+function openLinksInApp(event: MouseEvent) {
+  const link = (event.target as Element | null)?.closest?.('a[href]');
+  if (
+    !(link instanceof HTMLAnchorElement) ||
+    event.defaultPrevented ||
+    event.button !== 0 ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey ||
+    (link.target && link.target !== '_self') ||
+    link.hasAttribute('download') ||
+    link.origin !== location.origin
+  ) {
+    return;
+  }
+  event.preventDefault();
+  openAppAddress(link.pathname + link.search + link.hash);
+}
+
+/** The page of the current address and its first data, as on the website. */
+export function AppRoutes() {
+  const pathname                = usePathname();
+  const searchParams            = useSearchParams();
+  const store                   = useOrionplaceStore();
+  const selections              = useOrionplaceSelectionsStore();
+  const router                  = useStorefrontRouter();
+  const [shown, setShown]       = useState<{ key: string; page: ReactNode }>();
+  const pendingScroll           = useRef(false);
+  const shownKey                = useRef('');
+  const search                  = searchParams.toString();
+
+  useEffect(() => {
+    const match    = matchStorefrontRoute(pathname);
+    const scroll   = takeAppPageScroll();
+    const replaced = takeAppPageReplace();
+    let current    = true;
+    const show     = (key: string, page: ReactNode) => {
+      pendingScroll.current = scroll;
+      shownKey.current      = key;
+      setShown({ key, page });
+    };
+    if (!match) {
+      show('404', <StorefrontErrorRoute statusCode={404} />);
+      return;
+    }
+    const api      = new OrionplaceApi({
+      transport,
+      endpoints: () => store.getState().endpoints,
+      cookies: nativeAppCookies,
+      locale: () => selections.getState().localeCode,
+      currency: () => selections.getState().currencyId,
+    });
+    const { result, failure } = store.getState();
+    void loadStorefrontRoute(match.pattern, {
+      params: match.params,
+      query: query(new URLSearchParams(search)),
+      address: pathname + (search ? `?${search}` : ''),
+      appLoad: { result, failure },
+      locale: async () => selections.getState().localeCode,
+      api: async () => api,
+      errorText: async (reason) =>
+        apiErrorMessage(reason) ||
+        featureLabels(selections.getState().localeCode).failed,
+      product: (id, key) => requestProductPage(api, id, key),
+      publication: (id) => requestPublication(api, id),
+      tariffs: (id) => requestTariffs(api, id),
+      promoProducts: (id, page) => requestPromoProducts(api, id, page),
+    }).then((route) => {
+      if (!current) {
+        return;
+      }
+      if ('redirect' in route) {
+        router.replace(route.redirect);
+      } else if ('notFound' in route) {
+        show('404', <StorefrontErrorRoute statusCode={404} />);
+      } else {
+        // A link, Back or Forward opens a fresh page, as a new address does on
+        // the website. The page's own replace (a tab, a page number) keeps its
+        // state, as Next.js keeps it there.
+        const record = `${match.pattern}:${JSON.stringify(match.params)}`;
+        const key    = replaced && shownKey.current.startsWith(`${record}?`)
+          ? shownKey.current
+          : `${record}?${search}`;
+        show(key, route.page);
+      }
+    });
+    return () => {
+      current = false;
+    };
+  }, [pathname, search, router, selections, store]);
+
+  // A new page opens at the top, or at its #section as on the website.
+  useEffect(() => {
+    if (!pendingScroll.current) {
+      return;
+    }
+    pendingScroll.current = false;
+    const section = location.hash
+      ? document.getElementById(decodeURIComponent(location.hash.slice(1)))
+      : null;
+    if (section) {
+      section.scrollIntoView();
+    } else {
+      window.scrollTo(0, 0);
+    }
+  }, [shown]);
+
+  return shown ? <Fragment key={shown.key}>{shown.page}</Fragment> : null;
+}
+
+/** The storefront of the app, with the back button and in-app links. */
+export function AppStorefront({ children }: { children: ReactNode }) {
+  useEffect(() => {
+    handleAppBackButton();
+    document.addEventListener('click', openLinksInApp);
+    return () => document.removeEventListener('click', openLinksInApp);
+  }, []);
+
+  return (
+    <OrionplaceProvider>
+      <Suspense fallback={null}>
+        <StorefrontShell>{children}</StorefrontShell>
+      </Suspense>
+    </OrionplaceProvider>
+  );
+}