orionplace-react 0.7.7 → 0.8.0

package/templates/app/_storefront/SupportPage.tsx

@@ -1,141 +0,0 @@
-'use client';
-
-import { usePathname, useSearchParams } from 'next/navigation';
-import { AccountSection } from '@/components/orionplace/account/AccountSection';
-import { StorefrontSupport } from '@/components/orionplace/support/StorefrontSupport';
-import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
-import { useOrionplaceAppLoad } from '@/hooks/useOrionplaceAppLoad';
-import type { IOrderHistoryResponse } from '@/interfaces/orionplace/orders/IOrderHistory';
-import type { ICustomerSubscriptionsResponse } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
-import type {
-  ICustomerTicket,
-  ICustomerTicketReply,
-  ICustomerTicketsResponse,
-} from '@/interfaces/orionplace/tickets/ICustomerTicketApi';
-import type { TicketSubjectContext } from '@/lib/orionplace/ticketRequests';
-import {
-  ticketLocationFromQuery,
-  ticketLocationQuery,
-  type TicketLocation,
-} from '@/lib/orionplace/ticketLocation';
-
-type TicketsData = NonNullable<ICustomerTicketsResponse['page_data']>;
-type SubscriptionsData = NonNullable<
-  ICustomerSubscriptionsResponse['page_data']
->;
-type OrdersData = NonNullable<IOrderHistoryResponse['page_data']>;
-
-export function SupportPage({
-  ticketId,
-  context,
-  initial,
-  selected,
-  replies = [],
-  initialError = '',
-}: {
-  ticketId?: number;
-  context?: TicketSubjectContext;
-  initial?: TicketsData;
-  selected?: ICustomerTicket;
-  replies?: ICustomerTicketReply[];
-  initialError?: string;
-}) {
-  const api          = useOrionplaceApi();
-  const appLoad      = useOrionplaceAppLoad();
-  const pathname     = usePathname();
-  const searchParams = useSearchParams();
-  // `?status&page&ticket`: the list tab, its page and the open conversation.
-  const location     = ticketLocationFromQuery(
-    Object.fromEntries(searchParams.entries()),
-  );
-
-  // Moves inside the page use the browser history directly: Next.js keeps
-  // `useSearchParams` in sync without rendering the server page again, and
-  // Back restores the place. A send or delete replaces the entry.
-  function navigate(next: TicketLocation, replace: boolean) {
-    const query = new URLSearchParams(
-      ticketLocationQuery(Object.fromEntries(searchParams.entries()), next),
-    );
-    const href  = `${pathname}?${query}`;
-    if (replace) {
-      window.history.replaceState(null, '', href);
-    } else {
-      window.history.pushState(null, '', href);
-    }
-  }
-
-  return (
-    <AccountSection
-      section="tickets"
-      onRetry={() => void appLoad.refresh()}
-    >
-      <StorefrontSupport
-        ticketId={location.ticket}
-        status={location.status}
-        page={location.page}
-        context={context}
-        initialData={initial}
-        initialSelected={selected}
-        initialReplies={replies}
-        initialError={initialError}
-        loadOnMount={!initial || Boolean(ticketId && !selected)}
-        onLoadTickets={(action) =>
-          api.request<TicketsData>(
-            action.endpoint,
-            action.request,
-            action.signal,
-          )
-        }
-        onLoadReplies={(action) =>
-          api.request<ICustomerTicketReply[]>(
-            action.endpoint,
-            action.request,
-            action.signal,
-          )
-        }
-        onLoadSubscriptions={(action) =>
-          api.request<SubscriptionsData>(
-            action.endpoint,
-            action.request,
-            action.signal,
-          )
-        }
-        onLoadOrder={(action) =>
-          api.request<OrdersData>(
-            action.endpoint,
-            action.request,
-            action.signal,
-          )
-        }
-        onLoadImage={async (action) => {
-          const response = await api.requestResponse(
-            action.endpoint,
-            action.request,
-            action.signal,
-            action.path,
-          );
-          if (!(response.body instanceof Blob) || response.status >= 300) {
-            throw new Error('Image request failed');
-          }
-          return response.body;
-        }}
-        onSubmit={(action) =>
-          api.request<ICustomerTicket | ICustomerTicketReply[]>(
-            action.endpoint,
-            action.request,
-            action.signal,
-          )
-        }
-        onMutate={(action) =>
-          api.request<void>(
-            action.endpoint,
-            action.request,
-            action.signal,
-            action.path,
-          )
-        }
-        onNavigate={navigate}
-      />
-    </AccountSection>
-  );
-}

package/templates/app/_storefront/TariffsPage.tsx

@@ -1,180 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { StorefrontErrorRoute } from '@/app/_storefront/StorefrontErrorRoute';
-import { StorefrontTariffs } from '@/components/orionplace/subscriptions/StorefrontTariffs';
-import { StorefrontTariff } from '@/components/orionplace/subscriptions/StorefrontTariff';
-import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
-import { useAccountWallet } from '@/app/_storefront/useAccountWallet';
-import type { IProfileResponse } from '@/interfaces/orionplace/accounts/IProfileData';
-import type { ICustomerSubscriptionsResponse } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
-import { useStorefrontNavigation } from '@/app/_storefront/useStorefrontNavigation';
-import { OrionplaceCatalogSnapshotProvider } from '@/providers/OrionplaceProvider';
-import { useOrionplaceCatalog } from '@/providers/OrionplaceProvider';
-import { StorefrontPageMetadata } from '@/app/_storefront/StorefrontPageMetadata';
-import type { ISubscriptionTariffsResponse } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
-import styles from '@/app/storefront.module.css';
-
-type ProfilePageData = NonNullable<IProfileResponse['page_data']>;
-type SubscriptionsPageData = NonNullable<
-  ICustomerSubscriptionsResponse['page_data']
->;
-
-export function TariffsPage({ ids = [] }: { ids?: number[] }) {
-  const api         = useOrionplaceApi();
-  const patchWallet = useAccountWallet();
-  const navigation  = useStorefrontNavigation();
-  const actions     = {
-    onSubscribe: (
-      action: Parameters<
-        NonNullable<
-          React.ComponentProps<typeof StorefrontTariffs>['onSubscribe']
-        >
-      >[0],
-    ) => api.request<void>(action.endpoint, action.request, action.signal),
-    onLoadSubscriptions: (
-      action: Parameters<
-        React.ComponentProps<typeof StorefrontTariffs>['onLoadSubscriptions']
-      >[0],
-    ) =>
-      api.request<SubscriptionsPageData>(
-        action.endpoint,
-        action.request,
-        action.signal,
-      ),
-    onLoadProfile: (
-      action: Parameters<
-        React.ComponentProps<typeof StorefrontTariffs>['onLoadProfile']
-      >[0],
-    ) =>
-      api.request<ProfilePageData>(
-        action.endpoint,
-        action.request,
-        action.signal,
-      ),
-    onAccountLoaded: (
-      _subscriptions: SubscriptionsPageData,
-      profile: ProfilePageData,
-    ) => patchWallet(profile),
-  };
-
-  return (
-    <main
-      className={`${styles.page} ${styles.roomyPage}`}
-      data-storefront-page="tariffs"
-    >
-      <StorefrontTariffs
-        {...actions}
-        ids={ids}
-        onLoad={(action) =>
-          api.request(action.endpoint, action.request, action.signal)
-        }
-        onRequireSignIn={(returnPath) =>
-          navigation.push('/profile', {
-            return: returnPath,
-          })
-        }
-      />
-    </main>
-  );
-}
-
-export function TariffPage({
-  tariffId,
-  initial,
-  initialError = '',
-}: {
-  tariffId: number;
-  initial?: NonNullable<ISubscriptionTariffsResponse['page_data']>;
-  initialError?: string;
-}) {
-  return (
-    <OrionplaceCatalogSnapshotProvider
-      key={tariffId}
-      snapshot={initial}
-    >
-      <TariffContent
-        tariffId={tariffId}
-        preloaded={Boolean(initial)}
-        initialError={initialError}
-      />
-    </OrionplaceCatalogSnapshotProvider>
-  );
-}
-
-function TariffContent({
-  tariffId,
-  preloaded,
-  initialError,
-}: {
-  tariffId: number;
-  preloaded: boolean;
-  initialError: string;
-}) {
-  const [missing, setMissing] = useState(false);
-  const api                   = useOrionplaceApi();
-  const patchWallet           = useAccountWallet();
-  const navigation            = useStorefrontNavigation();
-  const tariff                = useOrionplaceCatalog((state) => state.getTariff(tariffId));
-  const actions               = {
-    onSubscribe: (
-      action: Parameters<
-        NonNullable<
-          React.ComponentProps<typeof StorefrontTariff>['onSubscribe']
-        >
-      >[0],
-    ) => api.request<void>(action.endpoint, action.request, action.signal),
-    onLoadSubscriptions: (
-      action: Parameters<
-        React.ComponentProps<typeof StorefrontTariff>['onLoadSubscriptions']
-      >[0],
-    ) =>
-      api.request<SubscriptionsPageData>(
-        action.endpoint,
-        action.request,
-        action.signal,
-      ),
-    onLoadProfile: (
-      action: Parameters<
-        React.ComponentProps<typeof StorefrontTariff>['onLoadProfile']
-      >[0],
-    ) =>
-      api.request<ProfilePageData>(
-        action.endpoint,
-        action.request,
-        action.signal,
-      ),
-    onAccountLoaded: (
-      _subscriptions: SubscriptionsPageData,
-      profile: ProfilePageData,
-    ) => patchWallet(profile),
-  };
-
-  if (missing) {
-    return <StorefrontErrorRoute statusCode={404} />;
-  }
-
-  return (
-    <main
-      className={`${styles.page} ${styles.compactPage}`}
-      data-storefront-page="tariff"
-    >
-      <StorefrontPageMetadata tariff={tariff} />
-      <StorefrontTariff
-        {...actions}
-        tariffId={tariffId}
-        preloaded={preloaded}
-        initialError={initialError}
-        onLoad={(action) =>
-          api.request(action.endpoint, action.request, action.signal)
-        }
-        onRequireSignIn={(returnPath) =>
-          navigation.push('/profile', {
-            return: returnPath,
-          })
-        }
-        onMissing={() => setMissing(true)}
-      />
-    </main>
-  );
-}

package/templates/app/_storefront/UnsubscribePage.tsx

@@ -1,29 +0,0 @@
-'use client';
-
-import { EmailUnsubscribe } from '@/components/orionplace/contact/EmailUnsubscribe';
-import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
-import styles from '@/app/storefront.module.css';
-
-export function UnsubscribePage({
-  token,
-  kind,
-}: {
-  token: string;
-  kind: string;
-}) {
-  const api = useOrionplaceApi();
-  return (
-    <main
-      className={styles.page}
-      data-storefront-page="unsubscribe"
-    >
-      <EmailUnsubscribe
-        token={token}
-        kind={kind}
-        onSubmit={(action, signal) =>
-          api.request<void>(action.endpoint, action.request, signal)
-        }
-      />
-    </main>
-  );
-}

package/templates/app/_storefront/WalletPage.tsx

@@ -1,78 +0,0 @@
-'use client';
-
-import { AccountSection } from '@/components/orionplace/account/AccountSection';
-import { StorefrontWallet } from '@/components/orionplace/wallet/StorefrontWallet';
-import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
-import { useOrionplaceAppLoad } from '@/hooks/useOrionplaceAppLoad';
-import type { IProfileResponse } from '@/interfaces/orionplace/accounts/IProfileData';
-import type { IPaymentMethod } from '@/interfaces/orionplace/cart/ICartData';
-import type {
-  IInvoice,
-  IInvoicesResponse,
-} from '@/interfaces/orionplace/payments/IInvoice';
-import type { IStorefrontPayment } from '@/interfaces/orionplace/shared/IStorefrontControls';
-
-type InvoicesData = NonNullable<IInvoicesResponse['page_data']>;
-type ProfileData = NonNullable<IProfileResponse['page_data']>;
-
-// The tab and page stay out of the address, as in the other packages: a
-// reload opens the wallet payments from page 1.
-export function WalletPage({
-  initial,
-  initialError = '',
-}: {
-  initial?: InvoicesData;
-  initialError?: string;
-}) {
-  const api = useOrionplaceApi();
-  const appLoad = useOrionplaceAppLoad();
-
-  return (
-    <AccountSection
-      section="wallet"
-      onRetry={() => void appLoad.refresh()}
-    >
-      <StorefrontWallet
-        initialData={initial}
-        initialError={initialError}
-        loadOnMount={!initial && !initialError}
-        onLoad={(action) =>
-          api.request<InvoicesData>(
-            action.endpoint,
-            action.request,
-            action.signal,
-          )
-        }
-        onLoadMethods={(action) =>
-          api.request<IPaymentMethod[]>(
-            action.endpoint,
-            action.request,
-            action.signal,
-          )
-        }
-        onCreate={(action) =>
-          api.request<IStorefrontPayment>(
-            action.endpoint,
-            action.request,
-            action.signal,
-          )
-        }
-        onCancel={(action) =>
-          api.request<IInvoice>(
-            action.endpoint,
-            action.request,
-            action.signal,
-            action.path,
-          )
-        }
-        onLoadProfile={(action) =>
-          api.request<ProfileData>(
-            action.endpoint,
-            action.request,
-            action.signal,
-          )
-        }
-      />
-    </AccountSection>
-  );
-}

package/templates/app/_storefront/WishlistPage.tsx

@@ -1,79 +0,0 @@
-'use client';
-
-import { AccountSection } from '@/components/orionplace/account/AccountSection';
-import { StorefrontWishlist } from '@/components/orionplace/products/StorefrontWishlist';
-import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
-import { useOrionplaceAppLoad } from '@/hooks/useOrionplaceAppLoad';
-import { useOrionplaceStorefront } from '@/hooks/useOrionplaceStorefront';
-import type { IProductSearchResponse } from '@/interfaces/orionplace/products/IProductSearchApi';
-import { useStorefrontNavigation } from './useStorefrontNavigation';
-
-type WishlistData = NonNullable<IProductSearchResponse['page_data']>;
-type WishlistMode = 'wishlist' | 'notifications';
-
-export function WishlistPage({
-  mode,
-  initial,
-  initialError = '',
-}: {
-  mode: WishlistMode;
-  initial?: WishlistData;
-  initialError?: string;
-}) {
-  const api        = useOrionplaceApi();
-  const appLoad    = useOrionplaceAppLoad();
-  const controls   = useOrionplaceStorefront();
-  const navigation = useStorefrontNavigation();
-
-  return (
-    <AccountSection
-      section="wishlist"
-      onRetry={() => void appLoad.refresh()}
-    >
-      <StorefrontWishlist
-        initialMode={mode}
-        initial={initial}
-        initialError={initialError}
-        loadOnMount={!initial && !initialError}
-        productActionsDisabled={controls.productActionsDisabled}
-        productHref={(id) => navigation.href(`/product/${id}`)}
-        onLoad={(action) =>
-          api.request<WishlistData>(
-            action.endpoint,
-            action.request,
-            action.signal,
-          )
-        }
-        onRemoveWishlist={(action) =>
-          api.request<{ count: number }>(
-            action.endpoint,
-            action.request,
-            action.signal,
-            action.path,
-          )
-        }
-        onUnsubscribeEntry={(action) =>
-          api.request<void>(
-            action.endpoint,
-            action.request,
-            action.signal,
-            action.path,
-          )
-        }
-        onSelect={(product) => navigation.push(`/product/${product.id}`)}
-        onSelectSeller={(seller) =>
-          navigation.push('/sellers', { seller: seller.id })
-        }
-        onSelectVariant={controls.onSelectVariant}
-        onRequestSecondaryVariants={controls.onRequestSecondaryVariants}
-        onSelectSecondaryVariant={controls.onSelectSecondaryVariant}
-        onToggleFavorite={controls.onToggleFavorite}
-        onAdd={controls.onAdd}
-        onRemove={controls.onRemove}
-        onSubscribe={controls.onSubscribe}
-        onUnsubscribe={controls.onUnsubscribe}
-        onPreorder={controls.onPreorder}
-      />
-    </AccountSection>
-  );
-}