orionplace-react 0.7.8 → 0.8.0

package/templates/app/_storefront/ArticlePage.tsx

@@ -1,84 +0,0 @@
-'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;
-        }}
-        onLoadPlacements={(action) =>
-          api.request(action.endpoint, action.request, action.signal)
-        }
-        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

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

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

@@ -1,68 +0,0 @@
-'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 { ProductListLocation } from '@/lib/orionplace/productListLocation';
-import type { ProductListPage } from '@/lib/orionplace/productSearch';
-import { useProductSearch } from './useProductSearch';
-import { useStorefrontNavigation } from './useStorefrontNavigation';
-
-export function CategoryPage({
-  categoryId,
-  initial,
-  initialError = '',
-  location,
-}: {
-  categoryId: number;
-  initial?: ProductListPage;
-  initialError?: string;
-  location?: ProductListLocation;
-}) {
-  const navigation = useStorefrontNavigation();
-  const controls   = useOrionplaceStorefront();
-  const catalog    = useOrionplaceCatalog((state) => state.catalog);
-  const search     = useProductSearch(
-    { categoryId, categoryIds: catalogBranchIds(catalog, categoryId) },
-    initial,
-    initialError,
-    { location },
-  );
-  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

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

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

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

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

@@ -1,64 +0,0 @@
-'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>
-  );
-}