orionplace-react 0.1.0 → 0.2.0

package/templates/app/_storefront/storefrontRoutes.tsx

@@ -0,0 +1,738 @@
+import type { ReactElement } from 'react';
+import { ActivityPage } from '@/app/_storefront/ActivityPage';
+import { AddressesPage } from '@/app/_storefront/AddressesPage';
+import { ArticlePage } from '@/app/_storefront/ArticlePage';
+import { CartPage } from '@/app/_storefront/CartPage';
+import { CatalogPage } from '@/app/_storefront/CatalogPage';
+import { CategoryPage } from '@/app/_storefront/CategoryPage';
+import { ContactPage } from '@/app/_storefront/ContactPage';
+import { HomePage } from '@/app/_storefront/HomePage';
+import { JournalPage } from '@/app/_storefront/JournalPage';
+import { LogoutPage } from '@/app/_storefront/LogoutPage';
+import { ManufacturersPage } from '@/app/_storefront/ManufacturersPage';
+import { OrdersPage } from '@/app/_storefront/OrdersPage';
+import { ProductPage } from '@/app/_storefront/ProductPage';
+import { ProfilePage } from '@/app/_storefront/ProfilePage';
+import { PromocodesPage } from '@/app/_storefront/PromocodesPage';
+import { PromoPage } from '@/app/_storefront/PromoPage';
+import { SearchPage } from '@/app/_storefront/SearchPage';
+import { SellersPage } from '@/app/_storefront/SellersPage';
+import { StorefrontErrorRoute } from '@/app/_storefront/StorefrontErrorRoute';
+import { StoresPage } from '@/app/_storefront/StoresPage';
+import { SubscriptionsPage } from '@/app/_storefront/SubscriptionsPage';
+import { SupportPage } from '@/app/_storefront/SupportPage';
+import { TariffPage, TariffsPage } from '@/app/_storefront/TariffsPage';
+import { UnsubscribePage } from '@/app/_storefront/UnsubscribePage';
+import { WalletPage } from '@/app/_storefront/WalletPage';
+import { WishlistPage } from '@/app/_storefront/WishlistPage';
+import type { OrionplaceApi } from '@/lib/orionplace/api';
+import type { AppLoadFailure, AppLoadResult } from '@/interfaces/orionplace';
+import type { IBlogCommentsResponse } from '@/interfaces/orionplace/blog/IBlogApi';
+import type { IManufacturerIndexGroup } from '@/interfaces/orionplace/catalog/ICatalogDirectory';
+import {
+  EOrderTab,
+  type EOrderTab as OrderTab,
+} from '@/interfaces/orionplace/orders/IOrderActions';
+import type { IOrderHistoryResponse } from '@/interfaces/orionplace/orders/IOrderHistory';
+import type { IInvoicesResponse } from '@/interfaces/orionplace/payments/IInvoice';
+import type { IProductSearchResponse } from '@/interfaces/orionplace/products/IProductSearchApi';
+import type { ISellerDirectoryResponse } from '@/interfaces/orionplace/sellers/ISellerDirectory';
+import type { IStoreDirectoryResponse } from '@/interfaces/orionplace/stores/IStoreDirectory';
+import type { ICustomerSubscriptionsResponse } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
+import type {
+  ICustomerTicket,
+  ICustomerTicketReply,
+  ICustomerTicketsResponse,
+} from '@/interfaces/orionplace/tickets/ICustomerTicketApi';
+import type { IUserAddressListResponse } from '@/interfaces/orionplace/address/IUserAddress';
+import type { StorefrontCartData } from '@/lib/orionplace/cartController';
+import type { requestProductPage } from '@/lib/orionplace/productPage';
+import type {
+  requestPromoProducts,
+  requestPublication,
+  requestTariffs,
+} from '@/lib/orionplace/storefrontRecords';
+import type { TicketSubjectContext } from '@/lib/orionplace/ticketRequests';
+import {
+  blogPageNumber,
+  blogPageSize,
+  blogPostsRequest,
+  type BlogPostsPage,
+} from '@/lib/orionplace/blogJournal';
+import { blogViewType } from '@/lib/orionplace/blogPresentation';
+import { catalogBranchIds, findCatalogCategory } from '@/lib/orionplace/catalog';
+import {
+  manufacturerSearchRequest,
+  type ManufacturerSearchData,
+} from '@/lib/orionplace/manufacturerDirectory';
+import {
+  loadProductSearch,
+  type ProductSearchPage,
+  type ProductSearchScope,
+} from '@/lib/orionplace/productSearch';
+import {
+  emptySellerFilters,
+  sellerDirectoryRequest,
+  sellerProfileRequest,
+} from '@/lib/orionplace/sellerDirectory';
+import { signInPageLocation } from '@/lib/orionplace/signInReturn';
+import {
+  positiveQueryId,
+  ticketLocationFromQuery,
+} from '@/lib/orionplace/ticketLocation';
+
+/*
+ * The storefront's pages: what each address shows and the data it opens with.
+ * The website runs these during the server render (app/<page>/page.tsx, via
+ * lib/orionplace/serverRoute.tsx); the Android app runs the same in the app
+ * (app/_storefront/AppRoutes.tsx), so both open every page alike.
+ */
+
+export type StorefrontRouteQuery = Record<string, string | string[] | undefined>;
+
+export interface StorefrontRouteContext {
+  params: Record<string, string>;
+  query: StorefrontRouteQuery;
+  /** The address with its query, which sign-in returns to. */
+  address: string;
+  appLoad: { result: AppLoadResult | null; failure: AppLoadFailure | null };
+  /** The storefront language of this request. */
+  locale: () => Promise<string>;
+  api: () => Promise<OrionplaceApi>;
+  /** The text a page shows when its first request fails. */
+  errorText: (reason: unknown) => Promise<string>;
+  product: (
+    id: number,
+    key: string,
+  ) => ReturnType<typeof requestProductPage>;
+  publication: (id: number) => ReturnType<typeof requestPublication>;
+  tariffs: (id: number) => ReturnType<typeof requestTariffs>;
+  /** The promotion page's products; the server shares it with the page title. */
+  promoProducts: (id: number, page: number) => ReturnType<typeof requestPromoProducts>;
+}
+
+export type StorefrontRouteResult =
+  | { page: ReactElement }
+  | { redirect: string }
+  | { notFound: true };
+
+type Loader = (context: StorefrontRouteContext) => Promise<StorefrontRouteResult>;
+
+function positive(value: string | string[] | undefined) {
+  const parsed = Number(Array.isArray(value) ? value[0] : value);
+  return Number.isSafeInteger(parsed) && parsed > 0 ? parsed : undefined;
+}
+
+function text(value: string | string[] | undefined) {
+  return typeof value === 'string' ? value : '';
+}
+
+function recordId(value: string | undefined) {
+  return /^[1-9]\d*$/.test(value ?? '') ? Number(value) : 0;
+}
+
+/** Account pages send a guest to sign-in, which returns here afterwards. */
+async function signInFirst(context: StorefrontRouteContext) {
+  const { result } = context.appLoad;
+  if (!result || result.response.page_data.init.is_authenticated) {
+    return undefined;
+  }
+  const location   = signInPageLocation(context.address, await context.locale());
+  return { redirect: `${location.path}?${new URLSearchParams(location.query)}` };
+}
+
+/** A page that loads its first data and shows the failure text otherwise. */
+async function initialData<T>(
+  context: StorefrontRouteContext,
+  load: (api: OrionplaceApi) => Promise<T>,
+) {
+  try {
+    return { initial: await load(await context.api()), initialError: '' };
+  } catch (reason) {
+    return { initial: undefined, initialError: await context.errorText(reason) };
+  }
+}
+
+function orderTab(value: string | string[] | undefined): OrderTab {
+  const parsed = Number(Array.isArray(value) ? value[0] : value);
+  return Object.values(EOrderTab).includes(parsed as OrderTab)
+    ? (parsed as OrderTab)
+    : EOrderTab.IN_WORK;
+}
+
+function ticketSubject(query: StorefrontRouteQuery): TicketSubjectContext | undefined {
+  for (const kind of ['item', 'option', 'subscription'] as const) {
+    const id = positiveQueryId(query[kind]);
+    if (id) {
+      return { kind, id, orderId: positiveQueryId(query.order) };
+    }
+  }
+  return undefined;
+}
+
+const routes: Record<string, Loader> = {
+  '/': async () => ({ page: <HomePage /> }),
+
+  '/activity': async (context) =>
+    (await signInFirst(context)) ?? {
+      page: <ActivityPage tab={typeof context.query.tab === 'string' ? context.query.tab : undefined} />,
+    },
+
+  '/addresses': async (context) => {
+    const signIn = await signInFirst(context);
+    if (signIn) {
+      return signIn;
+    }
+    const { initial, initialError } = await initialData(context, (api) =>
+      api.request<NonNullable<IUserAddressListResponse['page_data']>>('address_get', { filters: {} }),
+    );
+    return {
+      page: (
+        <AddressesPage
+          initial={initial}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/browse': async (context) => {
+    const { query }                 = context;
+    if (query.view === 'blog') {
+      return { redirect: `/journal?locale=${encodeURIComponent(await context.locale())}` };
+    }
+    const scope: ProductSearchScope = {
+      query: typeof query.q === 'string' ? query.q.trim() : '',
+      sellerId: positive(query.seller),
+      manufacturerId: positive(query.manufacturer),
+      storeId: positive(query.store),
+    };
+    const searched                  =
+      !scope.query ||
+      scope.query.length >= 3 ||
+      Object.values(scope).some((value) => typeof value === 'number');
+    const { initial, initialError } = searched
+      ? await initialData(context, (api) => loadProductSearch(api, scope))
+      : { initial: undefined, initialError: '' };
+    return {
+      page: (
+        <SearchPage
+          scope={scope}
+          initial={initial}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/cart': async (context) => {
+    const { initial, initialError } = await initialData(context, (api) =>
+      api.request<StorefrontCartData>('cart_guest_get', {}),
+    );
+    return {
+      page: (
+        <CartPage
+          initial={initial}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/catalog': async (context) => ({
+    page: <CatalogPage catalog={context.appLoad.result?.response.page_data.init.catalog ?? []} />,
+  }),
+
+  '/category/[id]': async (context) => {
+    const categoryId                = recordId(context.params.id);
+    const { result, failure }       = context.appLoad;
+    if (!result) {
+      return { page: <StorefrontErrorRoute statusCode={failure?.httpStatus ?? 503} /> };
+    }
+    const catalog                   = result.response.page_data.init.catalog ?? [];
+    if (!categoryId || !findCatalogCategory(catalog, categoryId)) {
+      return { notFound: true };
+    }
+    const { initial, initialError } = await initialData(context, (api) =>
+      loadProductSearch(api, {
+        categoryId,
+        categoryIds: catalogBranchIds(catalog, categoryId),
+      }),
+    );
+    return {
+      page: (
+        <CategoryPage
+          categoryId={categoryId}
+          initial={initial}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/contact': async () => ({ page: <ContactPage /> }),
+
+  '/featured': async (context) => {
+    const scope                     = { featured: true } as const;
+    const { initial, initialError } = await initialData(context, (api) =>
+      loadProductSearch(api, scope),
+    );
+    return {
+      page: (
+        <SearchPage
+          scope={scope}
+          initial={initial}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/journal': async (context) => {
+    const page     = blogPageNumber(context.query.page);
+    const pageSize = blogPageSize(
+      blogViewType(
+        context.appLoad.result?.response.page_data.init.visual_settings?.blog_view_type,
+      ),
+    );
+    let initial;
+    try {
+      const data = await (await context.api()).request<BlogPostsPage>(
+        'blog_posts_get',
+        blogPostsRequest({}, page, pageSize),
+      );
+      initial    = { page, pageSize, data };
+    } catch {
+      initial = undefined;
+    }
+    return {
+      page: (
+        <JournalPage
+          initial={initial}
+          page={page}
+        />
+      ),
+    };
+  },
+
+  '/journal/[id]': async (context) => {
+    const postId      = recordId(context.params.id);
+    if (!postId) {
+      return { notFound: true };
+    }
+    let initialPost;
+    let requestFailed = false;
+    try {
+      initialPost = await context.publication(postId);
+    } catch {
+      requestFailed = true;
+    }
+    if (!initialPost && !requestFailed) {
+      return { notFound: true };
+    }
+    let initialComments;
+    try {
+      if (initialPost) {
+        initialComments = await (await context.api()).request<
+          NonNullable<IBlogCommentsResponse['page_data']>
+        >('blog_comments_get', {
+          filters: {
+            for_post: postId,
+            ordering: '-date_created',
+            show_only_main: true,
+          },
+          paginate: { page: 1, pp_items: 20 },
+        });
+      }
+    } catch {
+      initialComments = undefined;
+    }
+    return {
+      page: (
+        <ArticlePage
+          postId={postId}
+          initialPost={initialPost}
+          initialComments={initialComments}
+        />
+      ),
+    };
+  },
+
+  '/logout': async () => ({ page: <LogoutPage /> }),
+
+  '/manufacturers': async (context) => {
+    const manufacturerId = positive(context.query.manufacturer);
+    const prefix         = typeof context.query.prefix === 'string' ? context.query.prefix.trim() : '';
+    let groups;
+    let manufacturers;
+    let pagination;
+    try {
+      const api = await context.api();
+      if (manufacturerId || prefix) {
+        const data    = await api.request<ManufacturerSearchData>(
+          'manufactures_manufactures_get',
+          manufacturerSearchRequest(manufacturerId, prefix, 1),
+        );
+        manufacturers = data.manufactures.data;
+        pagination    = data.manufactures.rpag;
+      } else {
+        groups = await api.request<IManufacturerIndexGroup[]>(
+          'manufactures_manufactures_list_get',
+          { filters: {} },
+        );
+      }
+    } catch {
+      groups = manufacturerId || prefix ? undefined : [];
+    }
+    return {
+      page: (
+        <ManufacturersPage
+          manufacturerId={manufacturerId}
+          prefix={prefix}
+          groups={groups}
+          manufacturers={manufacturers}
+          pagination={pagination ?? undefined}
+        />
+      ),
+    };
+  },
+
+  '/orders': async (context) => {
+    const signIn                    = await signInFirst(context);
+    if (signIn) {
+      return signIn;
+    }
+    const orderId                   = positive(context.query.order);
+    const tab                       = orderTab(context.query.tab);
+    const page                      = positive(context.query.page) ?? 1;
+    const { initial, initialError } = await initialData(context, (api) =>
+      api.request<NonNullable<IOrderHistoryResponse['page_data']>>('profile_orders_get', {
+        filters: orderId ? { id: orderId } : { order_tab: tab },
+        paginate: { page, pp_items: 5 },
+      }),
+    );
+    return {
+      page: (
+        <OrdersPage
+          orderId={orderId}
+          tab={tab}
+          initial={initial}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/product/[id]': async (context) => {
+    const productId  = recordId(context.params.id);
+    if (!productId) {
+      return { notFound: true };
+    }
+    const previewKey = text(context.query.key);
+    let initialProduct;
+    let initialError = '';
+    try {
+      initialProduct = await context.product(productId, previewKey);
+    } catch (reason) {
+      initialError = await context.errorText(reason);
+    }
+    if (!initialProduct && !initialError) {
+      return { notFound: true };
+    }
+    return {
+      page: (
+        <ProductPage
+          productId={productId}
+          previewKey={previewKey}
+          initialProduct={initialProduct}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/profile': async () => ({ page: <ProfilePage /> }),
+
+  '/promo/[id]': async (context) => {
+    const promoTypeId               = /^\d+$/.test(context.params.id ?? '') ? positive(context.params.id) : undefined;
+    if (!promoTypeId) {
+      return { notFound: true };
+    }
+    const page                      = positive(context.query.page) ?? 1;
+    const promoCode                 = typeof context.query.code === 'string' ? context.query.code.trim() : '';
+    const { initial, initialError } = await initialData(context, () =>
+      context.promoProducts(promoTypeId, page),
+    );
+    return {
+      page: (
+        <PromoPage
+          promoTypeId={promoTypeId}
+          promoCode={promoCode}
+          initial={initial}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/promocodes': async (context) =>
+    (await signInFirst(context)) ?? { page: <PromocodesPage /> },
+
+  '/sellers': async (context) => {
+    const { query } = context;
+    if (context.appLoad.result?.response.page_data.init.visual_settings?.single_seller_mode) {
+      return { redirect: `/catalog?locale=${encodeURIComponent(text(query.locale))}` };
+    }
+    const sellerId  = positive(text(query.seller) || undefined);
+    let initial;
+    let initialProducts: ProductSearchPage | undefined;
+    let initialError = '';
+    try {
+      const api = await context.api();
+      initial   = await api.request<NonNullable<ISellerDirectoryResponse['page_data']>>(
+        'sellers_get',
+        sellerId
+          ? sellerProfileRequest(sellerId)
+          : sellerDirectoryRequest(emptySellerFilters(), 1),
+      );
+      if (sellerId && initial.sellers.data[0]) {
+        initialProducts = await loadProductSearch(api, { sellerId }, {}, 1);
+      }
+    } catch (reason) {
+      initialError = await context.errorText(reason);
+    }
+    return {
+      page: (
+        <SellersPage
+          sellerId={sellerId}
+          initial={initial}
+          initialProducts={initialProducts}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/stores': async (context) => {
+    const { query }                 = context;
+    const storeId                   = positive(text(query.store) || undefined);
+    const search                    = typeof query.q === 'string' ? query.q.trim() : '';
+    const page                      = positive(text(query.page) || undefined) ?? 1;
+    const { initial, initialError } = await initialData(context, (api) =>
+      api.request<NonNullable<IStoreDirectoryResponse['page_data']>>('stores_get', {
+        filters: storeId ? { id: storeId } : { search_string: search },
+        paginate: { page, pp_items: 5 },
+      }),
+    );
+    return {
+      page: (
+        <StoresPage
+          storeId={storeId}
+          query={search}
+          page={page}
+          initial={initial}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/subscriptions': async (context) => {
+    const signIn                    = await signInFirst(context);
+    if (signIn) {
+      return signIn;
+    }
+    const { initial, initialError } = await initialData(context, (api) =>
+      api.request<NonNullable<ICustomerSubscriptionsResponse['page_data']>>('subscriptions_get', {}),
+    );
+    return {
+      page: (
+        <SubscriptionsPage
+          initialData={initial}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/tariffs': async (context) => {
+    const ids = text(context.query.ids)
+      .split(',')
+      .map(Number)
+      .filter((id) => Number.isSafeInteger(id) && id > 0);
+    return { page: <TariffsPage ids={ids} /> };
+  },
+
+  '/tariffs/[slug]/[id]': async (context) => {
+    const tariffId   = recordId(context.params.id);
+    if (!tariffId) {
+      return { notFound: true };
+    }
+    let initial;
+    let initialError = '';
+    try {
+      initial = await context.tariffs(tariffId);
+    } catch (reason) {
+      initialError = await context.errorText(reason);
+    }
+    if (initial && !initial.data.some((tariff) => tariff.id === tariffId)) {
+      return { notFound: true };
+    }
+    return {
+      page: (
+        <TariffPage
+          tariffId={tariffId}
+          initial={initial}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/tickets': async (context) => {
+    const signIn                        = await signInFirst(context);
+    if (signIn) {
+      return signIn;
+    }
+    // `?status&page&ticket`: the list tab, its page and the open conversation.
+    const location                      = ticketLocationFromQuery(context.query);
+    const ticketId                      = location.ticket;
+    let initial: NonNullable<ICustomerTicketsResponse['page_data']> | undefined;
+    let selected: ICustomerTicket | undefined;
+    let replies: ICustomerTicketReply[] = [];
+    let initialError                    = '';
+    try {
+      const api = await context.api();
+      initial   = await api.request<NonNullable<ICustomerTicketsResponse['page_data']>>(
+        'customer_tickets_get',
+        {
+          filters: { ticket_status: location.status },
+          paginate: { page: location.page, pp_items: 10 },
+        },
+      );
+      if (ticketId) {
+        const exact = await api.request<NonNullable<ICustomerTicketsResponse['page_data']>>(
+          'customer_tickets_get',
+          {
+            filters: { id: ticketId },
+            paginate: { page: 1, pp_items: 1 },
+          },
+        );
+        selected    = exact.data[0];
+        if (selected) {
+          replies = await api.request<ICustomerTicketReply[]>(
+            'customer_tickets_reply_getall',
+            { filters: { ticket: selected.id } },
+          );
+        }
+      }
+    } catch (reason) {
+      initialError = await context.errorText(reason);
+    }
+    return {
+      page: (
+        <SupportPage
+          ticketId={ticketId}
+          context={ticketSubject(context.query)}
+          initial={initial}
+          selected={selected}
+          replies={replies}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/unsubscribe': async (context) => ({
+    page: (
+      <UnsubscribePage
+        token={text(context.query.t)}
+        kind={text(context.query.ut)}
+      />
+    ),
+  }),
+
+  '/wallet': async (context) => {
+    const signIn                    = await signInFirst(context);
+    if (signIn) {
+      return signIn;
+    }
+    const { initial, initialError } = await initialData(context, (api) =>
+      api.request<NonNullable<IInvoicesResponse['page_data']>>('invoices_get', {
+        filters: { invoice_type: 'wallet' },
+        paginate: { page: 1, pp_items: 10 },
+      }),
+    );
+    return {
+      page: (
+        <WalletPage
+          initial={initial}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+
+  '/wishlist': async (context) => {
+    const signIn                    = await signInFirst(context);
+    if (signIn) {
+      return signIn;
+    }
+    const value                     = context.query.mode;
+    const mode                      =
+      (Array.isArray(value) ? value[0] : value) === 'notifications' ? 'notifications' : 'wishlist';
+    const page                      = positive(context.query.page) ?? 1;
+    const { initial, initialError } = await initialData(context, (api) =>
+      api.request<NonNullable<IProductSearchResponse['page_data']>>('products_search', {
+        filters:
+          mode === 'notifications'
+            ? { subscription_exists: true }
+            : { show_whishlist: true },
+        paginate: { page, pp_items: 12 },
+      }),
+    );
+    return {
+      page: (
+        <WishlistPage
+          mode={mode}
+          initial={initial}
+          initialError={initialError}
+        />
+      ),
+    };
+  },
+};
+
+export type StorefrontRoutePattern = keyof typeof routes;
+
+/** Runs the page of one route pattern, for example '/product/[id]'. */
+export function loadStorefrontRoute(
+  pattern: StorefrontRoutePattern,
+  context: StorefrontRouteContext,
+) {
+  return routes[pattern](context);
+}
+
+/** The route pattern and parameters of an address path, as Next.js matches them. */
+export function matchStorefrontRoute(path: string) {
+  const parts = path.replace(/\/+$/, '').split('/').filter(Boolean);
+  for (const pattern of Object.keys(routes)) {
+    const pieces = pattern.split('/').filter(Boolean);
+    if (pieces.length !== parts.length) {
+      continue;
+    }
+    const params: Record<string, string> = {};
+    const matched                        = pieces.every((piece, index) => {
+      const name = /^\[(\w+)\]$/.exec(piece)?.[1];
+      if (name) {
+        params[name] = decodeURIComponent(parts[index]);
+        return true;
+      }
+      return piece === parts[index];
+    });
+    if (matched) {
+      return { pattern: pattern as StorefrontRoutePattern, params };
+    }
+  }
+  return undefined;
+}