@shoppexio/storefront-react 0.3.0 → 0.5.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>
         ))}
@@ -445,6 +503,9 @@ export function AccountOrderDetail({ orderId }: { orderId: string }) {
         order AFTER it was paid for.
       */}
       <OrderWarranties orderUniqid={order.uniqid} />
+
+      {/* Keyed: a review posted on one order must not follow the buyer to the next. */}
+      <OrderReview key={order.uniqid} orderUniqid={order.uniqid} />
     </div>
   );
 }
@@ -458,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);
@@ -469,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;
     }
 
@@ -495,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>
   );
 }
@@ -686,6 +763,91 @@ function WarrantyRow({
   );
 }
 
+/** The three scores the server keeps, as the buyer reads them. */
+const REVIEW_SCORE_KEYS: Readonly<Record<number, string>> = {
+  5: 'orders.reviewPositive',
+  3: 'orders.reviewNeutral',
+  1: 'orders.reviewNegative',
+};
+
+/**
+ * The buyer's review of this order.
+ *
+ * The server decides whether the order can be reviewed (`can_review`: paid,
+ * reviews on, inside the edit window) and names the hosted review page for it
+ * (`review_url`, null otherwise); this only reads that state and never guesses
+ * it. The review is written on that page, never posted from here: this page
+ * runs beside merchant theme code that holds the buyer's session, and a review
+ * it could post would not be the buyer's own (#1152). Nothing is drawn while
+ * the read is in flight, or when there is neither a review page to open nor a
+ * review of the buyer's own to show. A failed read is shown with a retry,
+ * because it cannot be told apart from an order waiting for its review.
+ */
+export function OrderReview({ orderUniqid }: { orderUniqid: string }) {
+  const { state, reload } = useAccountResource(`review:${orderUniqid}`, () =>
+    callCustomerApi((sdk) => sdk.orderReview(orderUniqid)));
+
+  if (state.status === 'loading') return null;
+
+  if (state.status === 'error') {
+    return (
+      <ReviewSection>
+        <AccountError message={state.message} onRetry={reload} />
+      </ReviewSection>
+    );
+  }
+
+  const review = state.data;
+  const ownReview = review.already_submitted && !review.is_automated;
+  // Absent on a backend that predates the link; a URL that fails the scheme check gets no anchor.
+  const href = safeExternalHref(review.review_url);
+  if (href === null && !ownReview) return null;
+
+  return (
+    <ReviewSection
+      description={review.product_title
+        ? t('orders.reviewPrompt', { product: review.product_title })
+        : t('orders.reviewPromptGeneric')}
+    >
+      <AccountCard className="sxa:flex sxa:flex-col sxa:items-start sxa:gap-3 sxa:px-5 sxa:py-4">
+        {ownReview ? (
+          <div>
+            <p className="sxa:text-small sxa:font-semibold">
+              {t((review.score === null ? undefined : REVIEW_SCORE_KEYS[review.score]) ?? 'orders.reviewFallbackLabel')}
+              {review.submitted_at ? (
+                <span className="sxa:font-normal sxa:text-muted"> · {formatAccountDate(review.submitted_at)}</span>
+              ) : null}
+            </p>
+            {review.message ? (
+              <p className="sxa:mt-1.5 sxa:text-small sxa:whitespace-pre-line sxa:text-muted">{review.message}</p>
+            ) : null}
+          </div>
+        ) : review.is_automated ? (
+          <p className="sxa:text-small sxa:text-muted">{t('orders.reviewAutomated')}</p>
+        ) : null}
+        {href === null ? null : (
+          <a
+            href={href}
+            className="sx-account-cta sxa:cta-button sxa:inline-flex sxa:h-9 sxa:shrink-0 sxa:items-center sxa:px-4 sxa:text-small sxa:font-semibold"
+          >
+            {t(ownReview ? 'orders.reviewEdit' : 'orders.reviewWrite')}
+          </a>
+        )}
+      </AccountCard>
+    </ReviewSection>
+  );
+}
+
+function ReviewSection({ description, children }: { description?: string; children: ReactNode }) {
+  return (
+    <section className="sxa:mt-8">
+      <AccountSectionTitle>{t('orders.reviewTitle')}</AccountSectionTitle>
+      {description ? <p className="sxa:mt-1.5 sxa:text-small sxa:text-muted">{description}</p> : null}
+      <div className="sxa:mt-4">{children}</div>
+    </section>
+  );
+}
+
 /** Cover as a sentence. Cancelled cover names no date, because it has none. */
 function coverageLabel(coverage: WarrantyCoverage): string {
   switch (coverage.kind) {

package/eject/account/overview.tsx

@@ -21,6 +21,7 @@ import {
   AccountError,
   AccountRowsSkeleton,
   AccountSectionTitle,
+  HostedPageLink,
   formatAccountAmount,
   formatInvoiceAmount,
 } from './shared';
@@ -78,6 +79,11 @@ export function AccountOverview() {
             </div>
             <p className="sxa:text-small sxa:text-muted">{t('overview.walletNote')}</p>
           </div>
+          {/* Adding funds is a payment, so it happens on the hosted top-up page,
+              and only when the shop takes top-ups (decision T4). */}
+          {account.wallet.topups_allowed ? (
+            <HostedPageLink page="topup" hints={{}} label={t('overview.topUp')} className="sxa:mt-4 sxa:border-t sxa:pt-4" />
+          ) : null}
         </AccountCard>
       ) : null}
 

package/eject/account/referrals.tsx

@@ -24,13 +24,15 @@ import {
   isEnrolledInReferrals,
   isForeignBalanceCurrency,
   isShareableLink,
+  linkCommissionDiffers,
   offersReferralLinks,
   referralLinkInput,
+  referralRateRows,
   referralShareUrl,
 } from './account-referrals';
 import { callCustomerApi, safeExternalHref } from './customer-account';
-import type { SdkCustomerAffiliateLink, SdkCustomerAffiliateSummary } from '@shoppexio/storefront-react';
-import { t } from './i18n';
+import type { SdkCustomerAffiliateLink, SdkCustomerAffiliateRates, SdkCustomerAffiliateSummary } from '@shoppexio/storefront-react';
+import { getActiveLocale, t } from './i18n';
 import { ExternalLinkIcon } from './icons';
 import { useAccountDashboard } from './dashboard';
 import {
@@ -136,6 +138,8 @@ export function AccountReferrals() {
         </div>
       ) : null}
 
+      {summary.rates ? <YourRates rates={summary.rates} /> : null}
+
       <section>
         <div className="sxa:flex sxa:flex-wrap sxa:items-center sxa:justify-between sxa:gap-3">
           <AccountSectionTitle>{t('referrals.linksTitle')}</AccountSectionTitle>
@@ -192,7 +196,7 @@ export function AccountReferrals() {
             <ul className="sxa:space-y-4">
               {summary.links.map((link) => (
                 <li key={link.id}>
-                  <ReferralLinkCard link={link} currency={currency} />
+                  <ReferralLinkCard link={link} currency={currency} rates={summary.rates} />
                 </li>
               ))}
             </ul>
@@ -460,12 +464,45 @@ function BalanceTile({
   );
 }
 
+/** "Your rates": what a referral earns, in the rows the Easy-lane account block shows. */
+function YourRates({ rates }: { rates: SdkCustomerAffiliateRates }) {
+  const id = useId();
+  const locale = getActiveLocale();
+  const rows = referralRateRows(rates, {
+    // The cap and the minimum are kept in US dollars, like the affiliate ledger.
+    money: (usd) => formatAccountAmount(usd, 'USD'),
+    list: (names) => new Intl.ListFormat(locale, { type: 'conjunction' }).format(names),
+    more: (count) => t('referrals.ratesMoreProducts', { count: String(count) }),
+  });
+  return (
+    <section aria-labelledby={id}>
+      <h2 id={id} className="sx-account-section-title sxa:font-heading sxa:text-body sxa:font-semibold">
+        {t('referrals.yourRates')}
+      </h2>
+      <AccountCard className="sxa:mt-4 sxa:p-5">
+        <ul className="sxa:space-y-3">
+          {rows.map((row) => (
+            <li key={row.id}>
+              <p className="sxa:text-small sxa:font-semibold">{t(row.title.key, row.title.params)}</p>
+              {row.detail ? (
+                <p className="sxa:mt-0.5 sxa:text-micro sxa:text-muted">{t(row.detail.key, row.detail.params)}</p>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      </AccountCard>
+    </section>
+  );
+}
+
 function ReferralLinkCard({
   link,
   currency,
+  rates,
 }: {
   link: SdkCustomerAffiliateLink;
   currency: string;
+  rates: SdkCustomerAffiliateRates | null;
 }) {
   /*
    * The shareable URL is the SERVER's — it knows the shop's own storefront
@@ -490,8 +527,13 @@ function ReferralLinkCard({
         <div className="sxa:min-w-0">
           <p className="sxa:truncate sxa:text-small sxa:font-semibold">{link.label ?? link.code}</p>
           <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
-            {t('referrals.commission', { percent: link.effective_commission_percent })}
-            {' · '}
+            {/* "Your rates" names the rate; a link says it only when it earns another one. */}
+            {linkCommissionDiffers(link, rates) ? (
+              <>
+                {t('referrals.commission', { percent: link.effective_commission_percent })}
+                {' · '}
+              </>
+            ) : null}
             {t('referrals.buyerDiscount', { percent: link.effective_customer_discount_percent })}
           </p>
         </div>