@shoppexio/storefront-react 0.4.0 → 0.6.0

package/eject/account/orders.tsx

@@ -13,6 +13,7 @@
  * `account-route.ts`. Order detail is not a page of its own.
  */
 
+import { BUYER_STATUS_FILTERS, buyerInvoiceStatus, type BuyerStatusFilter } from './buyer-invoice-status';
 import { useState, type ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { paymentMethodLabel } from './account-payment-method';
@@ -29,7 +30,7 @@ import {
   warrantyDate,
 } from './account-warranties';
 import { callCustomerApi, safeExternalHref } from './customer-account';
-import type { SdkCustomerDeliverySummary, SdkCustomerWarranty } from '@shoppexio/storefront-react';
+import type { SdkCustomerDeliverySummary, SdkCustomerOrderDetail, SdkCustomerWarranty } from '@shoppexio/storefront-react';
 import { t, tOptional } from './i18n';
 import {
   ArrowLeftIcon,
@@ -48,7 +49,7 @@ import {
   AccountRowsSkeleton,
   AccountSectionTitle,
   BusySpinner,
-  StatusChip,
+  InvoiceStatusChip,
   formatAccountAmount,
   formatAccountDate,
   formatInvoiceAmount,
@@ -57,25 +58,6 @@ import {
 
 const ORDERS_PER_PAGE = 10;
 
-/** The producer's invoice-status enum, in the order the hosted portal lists it. */
-const STATUS_FILTERS = [
-  'COMPLETED',
-  'PENDING',
-  'PROCESSING',
-  'REFUNDED',
-  'DISPUTED',
-  'EXPIRED',
-] as const;
-
-const STATUS_LABEL_KEYS: Record<(typeof STATUS_FILTERS)[number], string> = {
-  COMPLETED: 'orders.statusCompleted',
-  PENDING: 'orders.statusPending',
-  PROCESSING: 'orders.statusProcessing',
-  REFUNDED: 'orders.statusRefunded',
-  DISPUTED: 'orders.statusDisputed',
-  EXPIRED: 'orders.statusExpired',
-};
-
 /** The template's field skin, shared with the checkout and contact forms. */
 const FIELD =
   'sx-account-field sxa:w-full sxa:border sxa:bg-[color-mix(in_oklab,_var(--sx-bg)_40%,_transparent)] sxa:px-3 sxa:py-2.5 sxa:text-small sxa:shadow-card sxa:placeholder:text-muted sxa:focus-visible:border-accent sxa:focus-visible:ring-[3px] sxa:focus-visible:ring-[color-mix(in_oklab,_var(--sx-accent)_50%,_transparent)] sxa:focus-visible:outline-none';
@@ -123,7 +105,7 @@ export function OrderRow({
           <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">{formatAccountDate(createdAt)}</p>
         </div>
         <span className="sxa:shrink-0 sxa:text-small sxa:font-semibold sxa:tabular-nums">{amount}</span>
-        <StatusChip status={status} />
+        <InvoiceStatusChip status={status} />
       </AccountCard>
     </Link>
   );
@@ -131,32 +113,33 @@ export function OrderRow({
 
 export function AccountOrders() {
   const [page, setPage] = useState(1);
-  const [status, setStatus] = useState('');
+  const [statusGroup, setStatusGroup] = useState<BuyerStatusFilter | ''>('');
   const [search, setSearch] = useState('');
   /** What was last SENT, as against what is currently being typed. */
-  const [applied, setApplied] = useState({ status: '', search: '' });
+  const [applied, setApplied] = useState<{ statusGroup: BuyerStatusFilter | ''; search: string }>({ statusGroup: '', search: '' });
 
   const { state, reload } = useAccountResource(
-    `orders:${page}:${applied.status}:${applied.search}`,
+    `orders:${page}:${applied.statusGroup}:${applied.search}`,
     () => callCustomerApi((sdk) => sdk.orders({
       page,
       limit: ORDERS_PER_PAGE,
-      ...(applied.status ? { status: applied.status } : {}),
+      // One group of the buyer status table, filtered by the producer: "Paid" is two statuses.
+      ...(applied.statusGroup ? { statusGroup: applied.statusGroup } : {}),
       ...(applied.search ? { search: applied.search } : {}),
     })),
   );
 
   // A changed filter is a different list. Staying on page four of the old one
   // would ask for a page the new list may not have and answer with nothing.
-  const applyFilters = (next: { status?: string; search?: string }) => {
-    const merged = { status: next.status ?? status, search: next.search ?? search };
-    setStatus(merged.status);
+  const applyFilters = (next: { statusGroup?: BuyerStatusFilter | ''; search?: string }) => {
+    const merged = { statusGroup: next.statusGroup ?? statusGroup, search: next.search ?? search };
+    setStatusGroup(merged.statusGroup);
     setSearch(merged.search);
     setApplied(merged);
     setPage(1);
   };
 
-  const filtering = applied.status !== '' || applied.search !== '';
+  const filtering = applied.statusGroup !== '' || applied.search !== '';
 
   const filterBar = (
     <form
@@ -176,14 +159,15 @@ export function AccountOrders() {
       />
       <div className="sxa:relative">
         <select
-          value={status}
+          value={statusGroup}
           aria-label={t('orders.status')}
-          onChange={(event) => applyFilters({ status: event.target.value })}
+          onChange={(event) => applyFilters({ statusGroup: BUYER_STATUS_FILTERS.find((filter) => filter.id === event.target.value)?.id ?? '' })}
           className="sxa:h-10 sxa:w-full sxa:appearance-none sxa:border sxa:bg-surface sxa:pr-9 sxa:pl-4 sxa:text-small sxa:focus:outline-none sxa:sm:w-auto sxa:rounded-input"
         >
           <option value="">{t('orders.statusAll')}</option>
-          {STATUS_FILTERS.map((value) => (
-            <option key={value} value={value}>{t(STATUS_LABEL_KEYS[value])}</option>
+          {/* The table's groups, in the words of the status chips (Design Batch 9, C2). */}
+          {BUYER_STATUS_FILTERS.map((filter) => (
+            <option key={filter.id} value={filter.id}>{t(`invoiceStatus.${filter.labelKey}`)}</option>
           ))}
         </select>
         <div className="sxa:pointer-events-none sxa:absolute sxa:inset-y-0 sxa:right-0 sxa:flex sxa:items-center sxa:px-3 sxa:text-muted">
@@ -304,6 +288,63 @@ export function AccountOrders() {
   );
 }
 
+/**
+ * Why an order offers no receipt, when the buyer status table gives it none
+ * (Design Batch 9, C7). Only where the sentence is true: an expired order that
+ * took no payment, and one the shop cancelled. An unpaid order still waits for
+ * payment, and a disputed one says nothing more.
+ */
+export function noReceiptKey(order: Pick<SdkCustomerOrderDetail, 'status' | 'expiredPayment'>): string | null {
+  if (order.status === 'VOIDED') return 'orders.noReceiptVoided';
+  if (order.status === 'EXPIRED' && order.expiredPayment === 'NONE') return 'orders.noReceiptUnpaid';
+  return null;
+}
+
+/**
+ * When the order was paid, for one the buyer status table counts as paid (a
+ * held order waiting for stock is; a disputed one is not), else when it was
+ * placed (Design Batch 9, C1).
+ */
+export function orderDateLine(order: Pick<SdkCustomerOrderDetail, 'status' | 'createdAt' | 'paidAt'>): string {
+  return order.paidAt && buyerInvoiceStatus(order.status)?.paid
+    ? t('orders.paidOn', { date: formatAccountDate(order.paidAt) })
+    : formatAccountDate(order.createdAt);
+}
+
+/**
+ * What a paid order held for a restock says (C1). The restock delivers the
+ * whole order at once and the wire does not say which line is short, so only
+ * a single item is named.
+ */
+export function waitingStockNotice(order: Pick<SdkCustomerOrderDetail, 'status' | 'lineItems'>): string | null {
+  if (order.status !== 'AWAITING_STOCK') return null;
+  const [only] = order.lineItems;
+  const body = order.lineItems.length === 1 && only!.quantity === 1
+    ? t('orders.waitingStock.body', { item: only!.productTitle })
+    : t('orders.waitingStock.bodyOrder');
+  return `${t('orders.waitingStock.title')} ${body}`;
+}
+
+/** A line of a held order waits for the restock; "Pending" would read as unpaid (C1). */
+export function lineDeliveryChipStatus(
+  orderStatus: string,
+  line: Pick<SdkCustomerOrderDetail['lineItems'][number], 'deliveryStatus'>,
+): string {
+  return orderStatus === 'AWAITING_STOCK' && line.deliveryStatus === 'PENDING' ? 'WAITING' : line.deliveryStatus;
+}
+
+/**
+ * The sentence under a line the seller delivered without anything to hand
+ * over (C7). Withheld goods (a gift, a reveal not taken) are not "nothing",
+ * and neither is a backend that did not say.
+ */
+export function nothingToDownloadDate(
+  line: Pick<SdkCustomerOrderDetail['lineItems'][number], 'deliveredAt' | 'deliverySummary'>,
+  deliveryWithheld: boolean | undefined,
+): string | null {
+  return line.deliveredAt !== null && line.deliverySummary === null && deliveryWithheld === false ? line.deliveredAt : null;
+}
+
 export function AccountOrderDetail({ orderId }: { orderId: string }) {
   const { state, reload } = useAccountResource(`order:${orderId}`, () =>
     callCustomerApi((sdk) => sdk.order(orderId)));
@@ -326,6 +367,9 @@ export function AccountOrderDetail({ orderId }: { orderId: string }) {
       <div>
         {backLink}
         <div className="sxa:mt-5">
+          <AccountSectionTitle>{t('orders.detailError', { id: orderId })}</AccountSectionTitle>
+        </div>
+        <div className="sxa:mt-4">
           <AccountError message={state.message} onRetry={reload} />
         </div>
       </div>
@@ -333,6 +377,8 @@ export function AccountOrderDetail({ orderId }: { orderId: string }) {
   }
 
   const order = state.data;
+  const noReceipt = noReceiptKey(order);
+  const waiting = waitingStockNotice(order);
 
   return (
     <div>
@@ -341,9 +387,9 @@ export function AccountOrderDetail({ orderId }: { orderId: string }) {
       <div className="sxa:mt-5 sxa:flex sxa:flex-wrap sxa:items-start sxa:justify-between sxa:gap-4">
         <div>
           <AccountSectionTitle>{t('orders.detailTitle', { id: order.uniqid })}</AccountSectionTitle>
-          <p className="sxa:mt-1 sxa:text-small sxa:text-muted">{formatAccountDate(order.createdAt)}</p>
+          <p className="sxa:mt-1 sxa:text-small sxa:text-muted">{orderDateLine(order)}</p>
         </div>
-        <StatusChip status={order.status} />
+        <InvoiceStatusChip status={order.status} />
       </div>
 
       {/*
@@ -356,7 +402,18 @@ export function AccountOrderDetail({ orderId }: { orderId: string }) {
         <p className="sxa:mt-3 sxa:text-small sxa:leading-relaxed sxa:text-muted">{order.statusDetails}</p>
       ) : null}
 
-      <InvoicePdfButton orderUniqid={order.uniqid} />
+      {waiting ? (
+        <AccountCard className="sxa:mt-4 sxa:px-5 sxa:py-4">
+          <p role="status" className="sxa:text-small sxa:leading-relaxed">{waiting}</p>
+        </AccountCard>
+      ) : null}
+
+      {/* The receipt follows the buyer status table: unpaid, expired, cancelled and disputed orders have none. */}
+      {buyerInvoiceStatus(order.status)?.receipt ? (
+        <InvoicePdfButton orderUniqid={order.uniqid} />
+      ) : noReceipt ? (
+        <p className="sxa:mt-4 sxa:text-small sxa:text-muted">{t(noReceipt)}</p>
+      ) : null}
 
       <ul className="sxa:mt-6 sxa:space-y-3">
         {order.lineItems.map((item) => (
@@ -384,7 +441,7 @@ export function AccountOrderDetail({ orderId }: { orderId: string }) {
                     rendered for every line rather than only for the unhappy ones.
                   */}
                   <p className="sxa:mt-1.5">
-                    <DeliveryChip status={item.deliveryStatus} />
+                    <DeliveryChip status={lineDeliveryChipStatus(order.status, item)} />
                   </p>
                 </div>
               </div>
@@ -396,6 +453,7 @@ export function AccountOrderDetail({ orderId }: { orderId: string }) {
                 payment status.
               */}
               {item.deliverySummary ? <DeliveredItems summary={item.deliverySummary} /> : null}
+              {nothingToDownload(item, order.deliveryWithheld)}
             </AccountCard>
           </li>
         ))}
@@ -461,9 +519,16 @@ export function AccountOrderDetail({ orderId }: { orderId: string }) {
  * a temporary object URL on an anchor the buyer never sees; the name is the
  * producer's, and when it sent none the browser picks one.
  */
+function nothingToDownload(line: SdkCustomerOrderDetail['lineItems'][number], deliveryWithheld: boolean | undefined): ReactNode {
+  const deliveredAt = nothingToDownloadDate(line, deliveryWithheld);
+  if (deliveredAt === null) return null;
+  return <p className="sxa:mt-3 sxa:text-small sxa:text-muted">{t('orders.nothingToDownload', { date: formatAccountDate(deliveredAt) })}</p>;
+}
+
 function InvoicePdfButton({ orderUniqid }: { orderUniqid: string }) {
   const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  /** Why the last try failed: the session ended (sign in again) or the receipt could not be made (try later). */
+  const [error, setError] = useState<'signed-out' | 'failed' | null>(null);
 
   const download = async () => {
     setBusy(true);
@@ -472,7 +537,7 @@ function InvoicePdfButton({ orderUniqid }: { orderUniqid: string }) {
     setBusy(false);
 
     if (!response.success || response.data === undefined) {
-      setError(response.message?.trim() || t('orders.invoicePdfFailed'));
+      setError(response.status === 401 || response.status === 403 ? 'signed-out' : 'failed');
       return;
     }
 
@@ -498,7 +563,16 @@ function InvoicePdfButton({ orderUniqid }: { orderUniqid: string }) {
           : <ReceiptIcon className="sxa:mr-1.5 sxa:h-3.5 sxa:w-3.5" />}
         {busy ? t('orders.invoicePdfLoading') : t('orders.invoicePdf')}
       </button>
-      {error ? <AccountFieldError message={error} /> : null}
+      {error === 'failed' ? <AccountFieldError message={t('orders.pdfFailed')} /> : null}
+      {error === 'signed-out' ? (
+        <div className="sxa:mt-3 sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-3">
+          <AccountFieldError message={t('orders.pdfSignedOut')} />
+          {/* A fresh load asks who is signed in and shows the sign-in form. */}
+          <button type="button" onClick={() => window.location.reload()} className="sx-account-button sxa:card-button sxa:card-button--add sxa:mt-3">
+            {t('login.submit')}
+          </button>
+        </div>
+      ) : null}
     </div>
   );
 }

package/eject/account/reseller.tsx

@@ -54,6 +54,7 @@ import {
   BusySpinner,
   CopyButton,
   HostedPageLink,
+  InvoiceStatusChip,
   StatusChip,
   formatAccountAmount,
   formatAccountDate,
@@ -853,7 +854,7 @@ function WholesaleOrders() {
                 <span className="sxa:text-small sxa:font-semibold sxa:tabular-nums">
                   {formatAccountAmount(order.total, order.currency)}
                 </span>
-                <StatusChip status={order.status} />
+                <InvoiceStatusChip status={order.status} />
               </button>
             </li>
           ))}
@@ -916,7 +917,7 @@ function WholesaleOrderDetail({ uniqid, onBack }: { uniqid: string; onBack: () =
             {formatAccountDateTime(order.created_at)}
           </p>
         </div>
-        <StatusChip status={order.status} />
+        <InvoiceStatusChip status={order.status} />
       </div>
 
       <AccountCard className="sxa:mt-5 sxa:p-6">

package/eject/account/shared.tsx

@@ -12,6 +12,7 @@
  * of them invents a value the producer did not send.
  */
 
+import { buyerInvoiceStatus, type BuyerStatusTone } from './buyer-invoice-status';
 import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { safeExternalHref, toPanelState, type AccountPanelState } from './customer-account';
@@ -213,11 +214,8 @@ const STATUS_TONES: Record<string, string> = {
   CONVERTED: TONE_GOOD,
   // In flight. The buyer is waiting on someone, or someone is waiting on them.
   PENDING: TONE_WAITING,
-  PENDING_PAYMENT: TONE_WAITING,
   PROCESSING: TONE_WAITING,
-  AWAITING_STOCK: TONE_WAITING,
   AWAITING_REPLY: TONE_WAITING,
-  UNDERPAID: TONE_WAITING,
   TRIALING: TONE_WAITING,
   PAUSED: TONE_WAITING,
   INCOMPLETE: TONE_WAITING,
@@ -247,6 +245,26 @@ const STATUS_TONES: Record<string, string> = {
  * the tone never applied.
  */
 
+const INVOICE_TONES: Record<BuyerStatusTone, string> = {
+  positive: TONE_GOOD,
+  notice: TONE_WAITING,
+  danger: TONE_BAD,
+  neutral: 'sxa:meta-chip--neutral',
+};
+
+/**
+ * An order's status: the word (`invoiceStatus.*`) and the tone from the one
+ * buyer status table (Design Batch 9, C2), the rows the checkout and the theme
+ * account read too. A status the table does not know falls to `StatusChip`.
+ */
+export function InvoiceStatusChip({ status }: { status: string }) {
+  const row = buyerInvoiceStatus(status.trim().toUpperCase());
+  if (!row) return <StatusChip status={status} />;
+  return (
+    <span className={`sx-account-status sx-account-chip sxa:meta-chip sxa:meta-chip--status ${INVOICE_TONES[row.tone]} sxa:shrink-0`}>{t(`invoiceStatus.${row.labelKey}`)}</span>
+  );
+}
+
 /** `label` replaces the status word when the caller has a better one; the tone still follows `status`. */
 export function StatusChip({ status, label }: { status: string; label?: string }) {
   const tone = STATUS_TONES[status.trim().toUpperCase()] ?? 'sxa:meta-chip--neutral';