orionplace-react 0.1.0 → 0.2.0

package/templates/app/_storefront/TariffsPage.tsx

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

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

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

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