orionplace-react 0.7.8 → 0.8.0

package/templates/app/StorefrontShell.tsx

@@ -1,443 +0,0 @@
-'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 { CookieNotice } from '@/components/orionplace/legal/CookieNotice';
-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} />
-      {/* The notice is for the website; the Android app links its policy from the store listing. */}
-      {APP_ORIGIN ? null : (
-        <CookieNotice
-          href={`${localized('/privacy')}#cookies`}
-          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

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

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

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

@@ -1,184 +0,0 @@
-'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 {
-  requestJournalPage,
-  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),
-      journalPage: (page, pageSize) => requestJournalPage(api, page, pageSize),
-    }).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>
-  );
-}