orionplace-react 0.1.0 → 0.2.0

package/templates/app/_storefront/ArticlePage.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { StorefrontPageMetadata } from '@/app/_storefront/StorefrontPageMetadata';
+import { StorefrontErrorRoute } from '@/app/_storefront/StorefrontErrorRoute';
+import { BlogArticle } from '@/components/orionplace/blog/BlogArticle';
+import type {
+  IBlogPost,
+  IBlogCommentsResponse,
+  IBlogReadingData,
+} from '@/interfaces/orionplace/blog/IBlogApi';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { useOrionplaceStorefront } from '@/hooks/useOrionplaceStorefront';
+import { useBlogComments } from '@/app/_storefront/useBlogComments';
+import { useStorefrontNavigation } from '@/app/_storefront/useStorefrontNavigation';
+import styles from '@/app/storefront.module.css';
+
+type CommentsPage = NonNullable<IBlogCommentsResponse['page_data']>;
+
+export function ArticlePage({
+  postId,
+  initialPost,
+  initialComments,
+}: {
+  postId: number;
+  initialPost?: IBlogPost;
+  initialComments?: CommentsPage;
+}) {
+  const api                             = useOrionplaceApi();
+  const controls                        = useOrionplaceStorefront();
+  const navigation                      = useStorefrontNavigation();
+  const comments                        = useBlogComments(postId, initialComments);
+  const [metadataPost, setMetadataPost] = useState(initialPost);
+  const [missing, setMissing]           = useState(false);
+  useEffect(() => {
+    setMetadataPost(initialPost);
+    setMissing(false);
+  }, [postId, initialPost]);
+
+  if (missing) {
+    return <StorefrontErrorRoute statusCode={404} />;
+  }
+
+  return (
+    <main
+      className={styles.page}
+      data-storefront-page="article"
+    >
+      <StorefrontPageMetadata post={metadataPost} />
+      <BlogArticle
+        {...controls}
+        postId={postId}
+        initialPost={initialPost}
+        onLoaded={setMetadataPost}
+        productActionsDisabled={controls.productActionsDisabled}
+        commentsProps={comments}
+        onLoad={async (action) => {
+          const data = await api.request<{
+            posts: { data: IBlogPost[] };
+          }>(action.endpoint, action.request, action.signal);
+          return data.posts.data.find((post) => post.id === postId) ?? null;
+        }}
+        onReading={(action) =>
+          api.request<IBlogReadingData>(
+            action.endpoint,
+            action.request,
+            action.signal,
+          )
+        }
+        onBack={() => navigation.push('/journal')}
+        onMissing={() => setMissing(true)}
+        onSelect={(product) => navigation.push(`/product/${product.id}`)}
+        onSelectSeller={(seller) =>
+          navigation.push('/sellers', {
+            seller: seller.id,
+          })
+        }
+      />
+    </main>
+  );
+}

package/templates/app/_storefront/CartPage.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { StorefrontCart } from '@/components/orionplace/cart/StorefrontCart';
+import { useOrionplaceAddressForm } from '@/hooks/useOrionplaceAddressForm';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { useOrionplaceStorefront } from '@/hooks/useOrionplaceStorefront';
+import type { StorefrontCartData } from '@/lib/orionplace/cartController';
+import { useStorefrontNavigation } from './useStorefrontNavigation';
+import styles from '@/app/storefront.module.css';
+
+export function CartPage({
+  initial,
+  initialError = '',
+}: {
+  initial?: StorefrontCartData;
+  initialError?: string;
+}) {
+  const api = useOrionplaceApi();
+  const addressForm = useOrionplaceAddressForm();
+  const controls = useOrionplaceStorefront();
+  const navigation = useStorefrontNavigation();
+
+  return (
+    <main
+      className={`${styles.page} ${styles.roomyPage}`}
+      data-storefront-page="cart"
+    >
+      <StorefrontCart
+        initialData={initial}
+        initialError={initialError}
+        loadOnMount={!initial && !initialError}
+        addressFormProps={addressForm}
+        // Cart actions name their URL parameters (cart item, shipment item,
+        // option group) in `params`.
+        onRequest={(action) =>
+          api.request(
+            action.endpoint,
+            action.request,
+            action.signal,
+            'params' in action ? (action.params as Record<string, number>) : {},
+          )
+        }
+        onRequireSignIn={(returnPath) =>
+          navigation.push('/profile', { return: returnPath })
+        }
+        onOpenOrder={(orderId) =>
+          navigation.push('/orders', { order: orderId })
+        }
+        onRequestSecondaryVariants={controls.onRequestSecondaryVariants}
+      />
+    </main>
+  );
+}

package/templates/app/_storefront/CatalogPage.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { StorefrontCatalog } from '@/components/orionplace/catalog/StorefrontCatalog';
+import type { ICategory } from '@/interfaces/orionplace';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { useStorefrontNavigation } from './useStorefrontNavigation';
+import styles from '@/app/storefront.module.css';
+
+export function CatalogPage({ catalog }: { catalog: ICategory[] }) {
+  const api = useOrionplaceApi();
+  const navigation = useStorefrontNavigation();
+  // The open level lives in `?category`, so Back goes one level up.
+  const branch     = Number(useSearchParams().get('category'));
+
+  return (
+    <main
+      className={styles.page}
+      data-storefront-page="catalog"
+    >
+      <StorefrontCatalog
+        initialData={{ tree: catalog, childfree: [], unique_ids: [] }}
+        loadOnMount={false}
+        onLoad={(action) =>
+          api.request(action.endpoint, action.request, action.signal)
+        }
+        onSelectCategory={(category) =>
+          navigation.push(`/category/${category.id}`)
+        }
+        branch={Number.isInteger(branch) && branch > 0 ? branch : undefined}
+        onOpenBranch={(categoryId) =>
+          navigation.push('/catalog', categoryId ? { category: categoryId } : {})
+        }
+      />
+    </main>
+  );
+}

package/templates/app/_storefront/CategoryPage.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { StorefrontCategory } from '@/components/orionplace/categories/StorefrontCategory';
+import { useOrionplaceStorefront } from '@/hooks/useOrionplaceStorefront';
+import { useOrionplaceCatalog } from '@/providers/OrionplaceProvider';
+import { catalogBranchIds } from '@/lib/orionplace/catalog';
+import type { ProductSearchPage } from '@/lib/orionplace/productSearch';
+import { useProductSearch } from './useProductSearch';
+import { useStorefrontNavigation } from './useStorefrontNavigation';
+
+export function CategoryPage({
+  categoryId,
+  initial,
+  initialError = '',
+}: {
+  categoryId: number;
+  initial?: ProductSearchPage;
+  initialError?: string;
+}) {
+  const navigation = useStorefrontNavigation();
+  const controls   = useOrionplaceStorefront();
+  const catalog    = useOrionplaceCatalog((state) => state.catalog);
+  const search     = useProductSearch(
+    { categoryId, categoryIds: catalogBranchIds(catalog, categoryId) },
+    initial,
+    initialError,
+  );
+  const pagination = search.data?.products?.rpag;
+
+  return (
+    <StorefrontCategory
+      {...controls}
+      categoryId={categoryId}
+      products={search.data?.products?.data ?? []}
+      facets={search.facets}
+      filters={search.filters}
+      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}
+      homeHref={navigation.href('/')}
+      categoryHref={(id) => navigation.href(`/category/${id}`)}
+      productHref={(id) => navigation.href(`/product/${id}`)}
+      onSelectHome={() => navigation.push('/')}
+      onSelectCategory={(category) =>
+        navigation.push(`/category/${category.id}`)
+      }
+      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,
+        })
+      }
+    />
+  );
+}

package/templates/app/_storefront/ContactPage.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { StorefrontContact } from '@/components/orionplace/contact/StorefrontContact';
+import { useOrionplace } from '@/providers/OrionplaceProvider';
+import { selectProfile } from '@/stores/orionplace';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import styles from '@/app/storefront.module.css';
+
+export function ContactPage() {
+  const api = useOrionplaceApi();
+  const profile = useOrionplace(selectProfile);
+
+  return (
+    <main
+      className={styles.page}
+      data-storefront-page="contact"
+    >
+      <StorefrontContact
+        initialName={[profile?.first_name, profile?.last_name]
+          .filter(Boolean)
+          .join(' ')}
+        initialEmail={profile?.email ?? ''}
+        onLoadCaptcha={(action, signal) =>
+          api.request(action.endpoint, action.request, signal)
+        }
+        onSubmit={(action, signal) =>
+          api.request(action.endpoint, action.request, signal)
+        }
+      />
+    </main>
+  );
+}

package/templates/app/_storefront/HomePage.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useStorefrontRouter } from '@/lib/orionplace/navigation';
+import { EventEnrollmentDialog } from '@/components/orionplace/events/EventEnrollmentDialog';
+import type { IAppLoadCommonEvents } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonEvents';
+import {
+  eventReturnPath,
+  signInPageLocation,
+} from '@/lib/orionplace/signInReturn';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { useOrionplaceProfile } from '@/hooks/useOrionplaceProfile';
+import { StorefrontHome } from '@/components/orionplace/storefront/StorefrontHome';
+import { useOrionplaceStorefront } from '@/hooks/useOrionplaceStorefront';
+import { useOrionplaceHomeProducts } from '@/hooks/useOrionplaceHomeProducts';
+import { homeLabels } from '@/lib/orionplace/homeLabels';
+import { useStorefrontNavigation } from './useStorefrontNavigation';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectInit, selectIsAuthenticated } from '@/stores/orionplace';
+import styles from '@/app/storefront.module.css';
+
+export function HomePage() {
+  const navigation                  = useStorefrontNavigation();
+  const controls                    = useOrionplaceStorefront();
+  const init                        = useOrionplace(selectInit);
+  const authenticated               = useOrionplace(selectIsAuthenticated);
+  const api                         = useOrionplaceApi();
+  const router                      = useStorefrontRouter();
+  const pathname                    = usePathname();
+  const query                       = useSearchParams();
+  const profile                     = useOrionplaceProfile({ loadOnMount: false });
+  const homeProducts                = useOrionplaceHomeProducts();
+  const locale                      = useOrionplaceSelections(
+    (state) => state.localeCode,
+  );
+  const homeCopy                    = homeLabels(locale);
+  const [enrollment, setEnrollment] = useState<IAppLoadCommonEvents>();
+  const currentPath                 = pathname + (query.size ? `?${query}` : '');
+
+  function requireSignIn(returnPath: string) {
+    const location = signInPageLocation(returnPath, navigation.locale);
+    router.push(navigation.href(location.path, location.query));
+  }
+
+  function selectEvent(event: IAppLoadCommonEvents) {
+    if (!event.promo) {
+      return;
+    }
+    if (!authenticated) {
+      requireSignIn(eventReturnPath(currentPath, event.id));
+      return;
+    }
+    setEnrollment(event);
+  }
+
+  function closeEnrollment() {
+    setEnrollment(undefined);
+    if (query.has('event')) {
+      const next = new URLSearchParams(query);
+      next.delete('event');
+      router.replace(pathname + (next.size ? `?${next}` : ''));
+    }
+  }
+
+  useEffect(() => {
+    const eventId = Number(query.get('event'));
+    const event   = init?.events?.find((entry) => entry.id === eventId);
+    if (event?.promo) {
+      setEnrollment(event);
+    }
+  }, [query, init]);
+
+  useEffect(() => {
+    if (enrollment && authenticated && !profile.state.loaded) {
+      void profile.request({ action: 'load' });
+    }
+  }, [enrollment?.id, authenticated]);
+
+  return (
+    <main data-storefront-page="home">
+      <h1 className={styles.visuallyHidden}>
+        {init?.contact?.company_name || 'Orionplace'}
+      </h1>
+      {homeProducts.error ? (
+        <p
+          role="status"
+          className={styles.homeNotice}
+        >
+          {homeCopy.newFailed}
+          <button
+            type="button"
+            className={styles.homeNoticeButton}
+            onClick={() => void homeProducts.load()}
+          >
+            {homeCopy.retry}
+          </button>
+        </p>
+      ) : null}
+      <StorefrontHome
+        {...controls}
+        categoryHref={(id) => navigation.href(`/category/${id}`)}
+        productHref={(id) => navigation.href(`/product/${id}`)}
+        onSelect={(product) => navigation.push(`/product/${product.id}`)}
+        onSelectSeller={(seller) =>
+          navigation.push('/sellers', {
+            seller: seller.id,
+          })
+        }
+        onSelectCategory={(category) =>
+          navigation.push(`/category/${category.id}`)
+        }
+        onSelectBanner={(banner) => {
+          if (banner.category) {
+            navigation.push(`/category/${banner.category}`);
+          }
+        }}
+        onSelectFeatured={() => navigation.push('/featured')}
+        onSelectEvent={selectEvent}
+      />
+      {enrollment ? (
+        <EventEnrollmentDialog
+          key={enrollment.id}
+          event={enrollment}
+          profileState={profile.state}
+          currentPath={currentPath}
+          onEnroll={(action, signal) =>
+            api.request(action.endpoint, action.request, signal)
+          }
+          onRequireSignIn={(request) => requireSignIn(request.returnPath)}
+          onProfileRequest={profile.request}
+          onClose={closeEnrollment}
+        />
+      ) : null}
+    </main>
+  );
+}

package/templates/app/_storefront/JournalPage.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { StorefrontJournal } from '@/components/orionplace/blog/StorefrontJournal';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import type { BlogJournalPage } from '@/lib/orionplace/blogJournal';
+import { useStorefrontNavigation } from './useStorefrontNavigation';
+import styles from '@/app/storefront.module.css';
+
+export function JournalPage({
+  initial,
+  page,
+}: {
+  initial?: BlogJournalPage;
+  page: number;
+}) {
+  const api = useOrionplaceApi();
+  const navigation = useStorefrontNavigation();
+
+  return (
+    <main
+      className={styles.page}
+      data-storefront-page="journal"
+    >
+      <StorefrontJournal
+        initial={initial}
+        page={page}
+        articlePath="/journal"
+        onLoad={(action) =>
+          api.request(action.endpoint, action.request, action.signal)
+        }
+        onPageChange={(next) => navigation.push('/journal', { page: next })}
+        onSelect={(postId) => navigation.push(`/journal/${postId}`)}
+      />
+    </main>
+  );
+}

package/templates/app/_storefront/LogoutPage.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { StorefrontLogout } from '@/components/orionplace/account/StorefrontLogout';
+import { useOrionplaceStore } from '@/providers/OrionplaceProvider';
+import { selectIsAuthenticated, selectIsReady } from '@/stores/orionplace';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { useOrionplaceAppLoad } from '@/hooks/useOrionplaceAppLoad';
+import { useStorefrontNavigation } from './useStorefrontNavigation';
+
+export function LogoutPage() {
+  const api                       = useOrionplaceApi();
+  const appLoad                   = useOrionplaceAppLoad();
+  const store                     = useOrionplaceStore();
+  const navigation                = useStorefrontNavigation();
+  const mounted                   = useRef(true);
+  const active                    = useRef<AbortController | null>(null);
+  const confirmed                 = useRef(false);
+  const [pending, setPending]     = useState(true);
+  const [failed, setFailed]       = useState(false);
+  const [signedOut, setSignedOut] = useState(false);
+
+  async function logout() {
+    if (active.current || !mounted.current) {
+      return;
+    }
+    if (!selectIsReady(store.getState()) && !confirmed.current) {
+      setPending(false);
+      setFailed(true);
+      return;
+    }
+    setPending(true);
+    setFailed(false);
+    const controller = new AbortController();
+    active.current   = controller;
+    try {
+      if (!confirmed.current) {
+        if (selectIsAuthenticated(store.getState())) {
+          await api.request('profile_logout', {}, controller.signal);
+        }
+        controller.signal.throwIfAborted();
+        confirmed.current = true;
+        setSignedOut(true);
+      }
+      await appLoad.refresh();
+      controller.signal.throwIfAborted();
+      if (
+        !selectIsReady(store.getState()) ||
+        selectIsAuthenticated(store.getState())
+      ) {
+        throw new Error('Guest initialization failed');
+      }
+      navigation.replace('/');
+    } catch {
+      if (!controller.signal.aborted) {
+        setFailed(true);
+      }
+    } finally {
+      if (active.current === controller) {
+        active.current = null;
+        setPending(false);
+      }
+    }
+  }
+
+  useEffect(() => {
+    let current     = true;
+    mounted.current = true;
+    queueMicrotask(() => {
+      if (current) {
+        void logout();
+      }
+    });
+    return () => {
+      current         = false;
+      mounted.current = false;
+      active.current?.abort();
+      active.current  = null;
+    };
+  }, []);
+
+  return (
+    <StorefrontLogout
+      pending={pending}
+      failed={failed}
+      signedOut={signedOut}
+      onRetry={() => void logout()}
+      onSelectHome={() => navigation.replace('/')}
+    />
+  );
+}

package/templates/app/_storefront/ManufacturersPage.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { StorefrontManufacturers } from '@/components/orionplace/manufacturers/StorefrontManufacturers';
+import type {
+  IManufacturer,
+  IManufacturerIndexGroup,
+} from '@/interfaces/orionplace/catalog/ICatalogDirectory';
+import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { useStorefrontNavigation } from './useStorefrontNavigation';
+import styles from '@/app/storefront.module.css';
+
+export function ManufacturersPage({
+  manufacturerId,
+  prefix = '',
+  groups,
+  manufacturers,
+  pagination,
+}: {
+  manufacturerId?: number;
+  prefix?: string;
+  groups?: IManufacturerIndexGroup[];
+  manufacturers?: IManufacturer[];
+  pagination?: Partial<IApiPagination>;
+}) {
+  const api = useOrionplaceApi();
+  const navigation = useStorefrontNavigation();
+
+  return (
+    <main
+      className={styles.page}
+      data-storefront-page="manufacturers"
+    >
+      <StorefrontManufacturers
+        key={`${manufacturerId ?? ''}:${prefix}`}
+        manufacturerId={manufacturerId}
+        initialPrefix={prefix}
+        initialIndexGroups={groups}
+        initialManufacturers={manufacturers}
+        initialPagination={pagination}
+        loadOnMount={false}
+        onLoadIndex={(action) =>
+          api.request(action.endpoint, action.request, action.signal)
+        }
+        onSearch={(action) =>
+          api.request(action.endpoint, action.request, action.signal)
+        }
+        onSelectProducts={(manufacturer) =>
+          navigation.push('/browse', {
+            manufacturer: manufacturer.id,
+          })
+        }
+        onNavigate={(view, replace) =>
+          navigation[replace ? 'replace' : 'push'](
+            '/manufacturers',
+            Object.fromEntries(
+              Object.entries(view).filter(([, value]) => value !== undefined),
+            ),
+          )
+        }
+      />
+    </main>
+  );
+}