@shoppexio/storefront-react 0.3.0 → 0.4.0

package/eject/account/account-downloads.ts

@@ -1,4 +1,5 @@
-import type { SdkCustomerDeliverable, SdkCustomerLicense } from '@shoppexio/storefront-react';
+import type { SdkCustomerDeliverable, SdkCustomerFileAccess, SdkCustomerLicense } from '@shoppexio/storefront-react';
+import { getActiveLocale, t } from './i18n';
 
 /**
  * The downloads panel's pure half.
@@ -116,3 +117,90 @@ export function offersRenewal(license: SdkCustomerLicense): boolean {
   return license.renewable && license.expires_at !== null;
 }
 
+
+/** What one file still allows, as the row says it (Design Batch 2, F1). */
+export interface FileAccessCopy {
+  /** What is left and until when, or why it stopped. Null: nothing to say (unlimited, no end date). */
+  text: string | null;
+  /** The file no longer downloads, so the row offers no Download. */
+  refused: boolean;
+  /** The buyer can ask the shop to open it again. A refund closed it for a reason the shop already decided. */
+  canAsk: boolean;
+}
+
+/**
+ * A file's end date, as a day in the SHOP's calendar.
+ *
+ * The producer sends an instant and the shop's IANA zone. An end at 23:30 in
+ * Berlin is already the next day in UTC and still the same day in New York, so
+ * formatting in the viewer's zone would name a day the shop never set.
+ */
+export function fileAccessDate(endsAt: string, timeZone: string): string {
+  const date = new Date(endsAt);
+  if (Number.isNaN(date.getTime())) return endsAt;
+  return new Intl.DateTimeFormat(getActiveLocale(), {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    timeZone,
+  }).format(date);
+}
+
+/**
+ * The same sentences as the hosted portal's `describeFileAccess`. An open file
+ * names only the parts the producer sent: no limit and no end date says
+ * nothing at all rather than "unlimited".
+ */
+export function describeFileAccess(access: SdkCustomerFileAccess): FileAccessCopy {
+  const until = access.ends_at ? fileAccessDate(access.ends_at, access.time_zone) : null;
+  switch (access.state) {
+    case 'open': {
+      const parts: string[] = [];
+      if (access.downloads_left !== null) {
+        parts.push(t(
+          access.downloads_left === 1 ? 'downloads.accessLeftOne' : 'downloads.accessLeftOther',
+          { count: access.downloads_left },
+        ));
+      }
+      if (until) parts.push(t('downloads.accessUntil', { date: until }));
+      return { text: parts.length > 0 ? parts.join(' · ') : null, refused: false, canAsk: false };
+    }
+    case 'limit_reached':
+      return {
+        text: access.download_limit === null
+          ? t('downloads.accessLimitReached')
+          : t(
+            access.download_limit === 1 ? 'downloads.accessLimitReachedOne' : 'downloads.accessLimitReachedOther',
+            { count: access.download_limit },
+          ),
+        refused: true,
+        canAsk: true,
+      };
+    case 'expired':
+      return {
+        text: until ? t('downloads.accessExpired', { date: until }) : t('downloads.accessExpiredUndated'),
+        refused: true,
+        canAsk: true,
+      };
+    case 'revoked':
+      return { text: t('downloads.accessRevoked'), refused: true, canAsk: true };
+    case 'refunded':
+      return { text: t('downloads.accessRefunded'), refused: true, canAsk: false };
+  }
+}
+
+/**
+ * The ticket "Ask for access" opens: on the order, naming the file and why it
+ * stopped, so the shop can extend, reset or restore it from the order page.
+ */
+export function accessRequestTicket(
+  file: Pick<SdkCustomerDeliverable, 'label' | 'product_title' | 'invoice_uniqid'>,
+  reason: string | null,
+): { title: string; message: string; invoice_id: string } {
+  const message = t('downloads.accessRequestMessage', { file: file.label, product: file.product_title });
+  return {
+    title: t('downloads.accessRequestTitle', { file: file.label }).slice(0, 120),
+    message: reason ? `${message} ${t('downloads.accessRequestReason', { reason })}` : message,
+    invoice_id: file.invoice_uniqid,
+  };
+}

package/eject/account/account-referrals.ts

@@ -1,4 +1,4 @@
-import type { SdkCustomerAffiliateLink, SdkCustomerAffiliateSummary } from '@shoppexio/storefront-react';
+import type { SdkCustomerAffiliateLink, SdkCustomerAffiliateRates, SdkCustomerAffiliateSummary } from '@shoppexio/storefront-react';
 
 /**
  * The referrals panel's pure half.
@@ -239,3 +239,72 @@ export function referralLinkInput(draft: ReferralLinkDraft): ReferralLinkInputRe
     },
   };
 }
+
+/** A catalog key and its values, translated by the panel. */
+export interface ReferralMessage {
+  key: string;
+  params?: Record<string, string>;
+}
+
+export interface ReferralRateRow {
+  id: 'rate' | 'order' | 'binding';
+  title: ReferralMessage;
+  detail: ReferralMessage | null;
+}
+
+/**
+ * "Your rates" (Design Batch 3 F2), the same rows as the Easy-lane account
+ * block: the rate and the products that earn nothing, the cap and minimum per
+ * order, and how long a referred buyer stays. A part shows only when the shop
+ * set it. One rate per link was not true once products, a cap and a minimum
+ * could pay less.
+ */
+export function referralRateRows(
+  rates: SdkCustomerAffiliateRates,
+  format: {
+    money: (usd: string) => string;
+    /** "A, B and C" in the reader's language. */
+    list: (names: string[]) => string;
+    /** "2 more", for the No Commission products past the three named. */
+    more: (count: number) => string;
+  },
+): ReferralRateRow[] {
+  const percent = String(rates.percent);
+  const more = rates.disabled_product_count - rates.disabled_products.length;
+  const names = more > 0 ? [...rates.disabled_products, format.more(more)] : rates.disabled_products;
+  const disabled: ReferralMessage | null = rates.disabled_product_count === 0
+    ? null
+    : rates.disabled_product_count === 1
+      ? { key: 'referrals.ratesProductEarnsNothing', params: { product: format.list(names) } }
+      : { key: 'referrals.ratesProductsEarnNothing', params: { products: format.list(names) } };
+  // A product with its own rate pays that instead of this one, so "every product" would overpromise.
+  const customRate: ReferralMessage | null = rates.custom_rate_product_count === 0 ? null : { key: 'referrals.ratesCustomRateProducts' };
+  const rows: ReferralRateRow[] = [{
+    id: 'rate',
+    title: { key: disabled || customRate ? 'referrals.ratesMostProducts' : 'referrals.ratesEveryProduct', params: { percent } },
+    detail: disabled ?? customRate,
+  }];
+  const minimum: ReferralMessage | null = rates.minimum_order_usd === null
+    ? null
+    : { key: 'referrals.ratesMinimum', params: { amount: format.money(rates.minimum_order_usd) } };
+  if (rates.cap_usd !== null) {
+    rows.push({ id: 'order', title: { key: 'referrals.ratesCap', params: { amount: format.money(rates.cap_usd) } }, detail: minimum });
+  } else if (minimum) {
+    rows.push({ id: 'order', title: minimum, detail: null });
+  }
+  if (rates.binding_mode !== 'PER_ORDER') {
+    rows.push({
+      id: 'binding',
+      title: rates.binding_days === null
+        ? { key: 'referrals.ratesBindingForever' }
+        : { key: 'referrals.ratesBindingDays', params: { days: String(rates.binding_days) } },
+      detail: { key: 'referrals.ratesBindingDetail' },
+    });
+  }
+  return rows;
+}
+
+/** A link names its rate only when it earns another one than "Your rates" says. */
+export function linkCommissionDiffers(link: SdkCustomerAffiliateLink, rates: SdkCustomerAffiliateRates | null): boolean {
+  return rates === null || link.effective_commission_percent !== rates.percent;
+}

package/eject/account/account-reseller.ts

@@ -1,5 +1,5 @@
 /**
- * Pure wire narrowing and basket quote helpers for the wholesale account tab.
+ * Pure wire narrowing for the wholesale account tab.
  *
  * The shapes below follow the mapper functions in
  * `apps/backend-elysia/src/routes/v1/customer-reseller.ts` exactly. They do not
@@ -38,6 +38,8 @@ export interface ResellerProgramState {
   enrollment_mode: ResellerEnrollmentMode;
   application_message: string | null;
   require_application_note: boolean;
+  /** The shop hands out delivery URLs; the "Delivery URL" link shows only then. */
+  delivery_url_enabled: boolean;
   reseller: ResellerRelationship | null;
 }
 
@@ -45,7 +47,6 @@ export interface ResellerCatalogVariant {
   variant_id: string;
   title: string;
   stock: number;
-  supplier_backed: boolean;
   orderable: boolean;
   base_price: string;
   unit_price: string;
@@ -59,7 +60,6 @@ export interface ResellerCatalogItem {
   title: string;
   type: string;
   stock: number;
-  supplier_backed: boolean;
   orderable: boolean;
   volume_discount_enabled: boolean;
   base_price: string;
@@ -82,13 +82,7 @@ export interface ResellerCatalogPayload {
   catalog: ResellerCatalog;
 }
 
-export interface ResellerOrderItemInput {
-  product_id: string;
-  variant_id?: string;
-  quantity: number;
-}
-
-/** Producer limits from `ResellerOrderItemSchema`. Quantities are units, not fractions. */
+/** Producer limits from `ResellerOrderItemSchema`. Quantities are units, not fractions; an order line is read against them. */
 export const RESELLER_QUANTITY_MIN_UNITS = 1;
 export const RESELLER_QUANTITY_MAX_UNITS = 100_000;
 
@@ -98,31 +92,6 @@ export function isValidResellerQuantity(value: number): boolean {
     && value <= RESELLER_QUANTITY_MAX_UNITS;
 }
 
-export interface ResellerQuoteItem {
-  product_id: string;
-  product_title: string;
-  product_type: string;
-  variant_id: string | null;
-  variant_title: string | null;
-  quantity: number;
-  base_price: string;
-  discount_percent: number;
-  unit_price: string;
-  line_total: string;
-  applied_override: ResellerAppliedOverride;
-  volume_discount_applied: string;
-}
-
-export interface ResellerQuote {
-  currency: string;
-  tier: { id: string; name: string; discount_percent: number };
-  items: ResellerQuoteItem[];
-  subtotal: string;
-  volume_discount_total: string;
-  total: string;
-  savings: string;
-}
-
 export interface ResellerOrderListItem {
   uniqid: string;
   status: string;
@@ -287,6 +256,7 @@ export function narrowResellerProgram(
     !isEnrollmentMode(payload.enrollment_mode) ||
     !isNullableString(payload.application_message) ||
     typeof payload.require_application_note !== "boolean" ||
+    typeof payload.delivery_url_enabled !== "boolean" ||
     reseller === undefined
   ) {
     return { ok: false };
@@ -298,6 +268,7 @@ export function narrowResellerProgram(
       enrollment_mode: payload.enrollment_mode,
       application_message: payload.application_message,
       require_application_note: payload.require_application_note,
+      delivery_url_enabled: payload.delivery_url_enabled,
       reseller,
     },
   };
@@ -318,7 +289,6 @@ function narrowCatalogVariant(value: unknown): ResellerCatalogVariant | null {
     typeof value.variant_id !== "string" ||
     typeof value.title !== "string" ||
     !isFiniteNumber(value.stock) ||
-    typeof value.supplier_backed !== "boolean" ||
     typeof value.orderable !== "boolean" ||
     typeof value.base_price !== "string" ||
     typeof value.unit_price !== "string" ||
@@ -343,7 +313,6 @@ function narrowCatalogItem(value: unknown): ResellerCatalogItem | null {
     typeof value.title !== "string" ||
     typeof value.type !== "string" ||
     !isFiniteNumber(value.stock) ||
-    typeof value.supplier_backed !== "boolean" ||
     typeof value.orderable !== "boolean" ||
     typeof value.volume_discount_enabled !== "boolean" ||
     typeof value.base_price !== "string" ||
@@ -358,7 +327,6 @@ function narrowCatalogItem(value: unknown): ResellerCatalogItem | null {
     title: value.title,
     type: value.type,
     stock: value.stock,
-    supplier_backed: value.supplier_backed,
     orderable: value.orderable,
     volume_discount_enabled: value.volume_discount_enabled,
     base_price: value.base_price,
@@ -412,69 +380,6 @@ export function narrowResellerCatalog(
   };
 }
 
-function narrowQuoteItem(value: unknown): ResellerQuoteItem | null {
-  if (!isRecord(value)) return null;
-  if (
-    typeof value.product_id !== "string" ||
-    typeof value.product_title !== "string" ||
-    typeof value.product_type !== "string" ||
-    !isNullableString(value.variant_id) ||
-    !isNullableString(value.variant_title) ||
-    !isValidResellerQuantity(value.quantity as number) ||
-    typeof value.base_price !== "string" ||
-    !isFiniteNumber(value.discount_percent) ||
-    typeof value.unit_price !== "string" ||
-    typeof value.line_total !== "string" ||
-    !isAppliedOverride(value.applied_override) ||
-    typeof value.volume_discount_applied !== "string"
-  )
-    return null;
-  return value as unknown as ResellerQuoteItem;
-}
-
-/** `POST /reseller/orders/quote`, written against mapQuote. */
-export function narrowResellerQuote(
-  payload: unknown,
-): NarrowResult<ResellerQuote> {
-  if (!isRecord(payload) || !isRecord(payload.quote)) return { ok: false };
-  const raw = payload.quote;
-  const tier = narrowTier(raw.tier);
-  if (
-    !tier ||
-    typeof tier.name !== "string" ||
-    typeof tier.discount_percent !== "number" ||
-    typeof raw.currency !== "string" ||
-    !Array.isArray(raw.items) ||
-    typeof raw.subtotal !== "string" ||
-    typeof raw.volume_discount_total !== "string" ||
-    typeof raw.total !== "string" ||
-    typeof raw.savings !== "string"
-  )
-    return { ok: false };
-  const items: ResellerQuoteItem[] = [];
-  for (const entry of raw.items) {
-    const item = narrowQuoteItem(entry);
-    if (!item) return { ok: false };
-    items.push(item);
-  }
-  return {
-    ok: true,
-    data: {
-      currency: raw.currency,
-      tier: {
-        id: tier.id,
-        name: tier.name,
-        discount_percent: tier.discount_percent,
-      },
-      items,
-      subtotal: raw.subtotal,
-      volume_discount_total: raw.volume_discount_total,
-      total: raw.total,
-      savings: raw.savings,
-    },
-  };
-}
-
 function narrowOrderListItem(value: unknown): ResellerOrderListItem | null {
   if (!isRecord(value)) return null;
   if (
@@ -627,35 +532,6 @@ export function narrowResellerApiKeys(
   return { ok: true, data: keys };
 }
 
-/** Stable identity of one basket version. Order is normalized for comparison. */
-export function resellerBasketKey(
-  items: readonly ResellerOrderItemInput[],
-): string {
-  for (const item of items) {
-    if (!isValidResellerQuantity(item.quantity)) {
-      throw new RangeError(
-        `Wholesale quantity must be a whole number from ${RESELLER_QUANTITY_MIN_UNITS} to ${RESELLER_QUANTITY_MAX_UNITS} units; received ${String(item.quantity)}.`,
-      );
-    }
-  }
-
-  return JSON.stringify(
-    [...items]
-      .map((item) => ({
-        product_id: item.product_id,
-        variant_id: item.variant_id ?? null,
-        quantity: item.quantity,
-      }))
-      .sort((left, right) => {
-        const product = left.product_id.localeCompare(right.product_id);
-        return (
-          product ||
-          (left.variant_id ?? "").localeCompare(right.variant_id ?? "")
-        );
-      }),
-  );
-}
-
 /**
  * The one way into the program this buyer actually has.
  *
@@ -673,13 +549,3 @@ export function resellerEntryMode(
     ? "MANUAL"
     : program.enrollment_mode;
 }
-
-/** A quote is displayed only for the basket it priced. */
-export function quoteMatchesBasket(
-  quotedBasketKey: string | null,
-  items: readonly ResellerOrderItemInput[],
-): boolean {
-  return (
-    quotedBasketKey !== null && quotedBasketKey === resellerBasketKey(items)
-  );
-}

package/eject/account/downloads.tsx

@@ -19,7 +19,9 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { accountOrderHref } from '@shoppexio/storefront-react';
 import {
+  accessRequestTicket,
   buildDownloadGroups,
+  describeFileAccess,
   isEmptyDownloadGroups,
   licenseExpiryDate,
   offersRenewal,
@@ -50,6 +52,8 @@ export function AccountDownloads() {
   const [notice, setNotice] = useState<string | null>(null);
   const [actionError, setActionError] = useState<string | null>(null);
   const [resettingUniqid, setResettingUniqid] = useState<string | null>(null);
+  const [askingId, setAskingId] = useState<string | null>(null);
+  const [askedIds, setAskedIds] = useState<ReadonlySet<string>>(() => new Set());
 
   if (state.status === 'loading') {
     return <AccountRowsSkeleton rows={4} label={t('downloads.loading')} />;
@@ -108,6 +112,29 @@ export function AccountDownloads() {
     reload();
   };
 
+  /*
+   * "Ask for access" is a support ticket on the order, through the same
+   * `createTicket` the Support panel uses, so the shop answers it where it
+   * answers everything else. One request in flight; a row that asked once says
+   * so instead of offering a second ticket.
+   */
+  const askForAccess = async (file: FileDownload, reason: string | null) => {
+    if (askingId !== null) return;
+    setAskingId(file.id);
+    setNotice(null);
+    setActionError(null);
+    const result = await callCustomerApi((sdk) => sdk.createTicket(accessRequestTicket(file, reason)));
+    setAskingId(null);
+
+    if (!result.success) {
+      setActionError(result.message?.trim() || t('downloads.accessRequestFailed'));
+      return;
+    }
+
+    setAskedIds((current) => new Set(current).add(file.id));
+    setNotice(t('downloads.accessRequestDone'));
+  };
+
   return (
     <div className="sxa:space-y-8">
       {notice ? <AccountNotice message={notice} /> : null}
@@ -137,7 +164,13 @@ export function AccountDownloads() {
           <ul className="sxa:mt-4 sxa:space-y-3">
             {groups.files.map((file) => (
               <li key={file.id}>
-                <FileRow file={file} />
+                <FileRow
+                  file={file}
+                  asking={askingId === file.id}
+                  asked={askedIds.has(file.id)}
+                  disabled={askingId !== null}
+                  onAskForAccess={(reason) => void askForAccess(file, reason)}
+                />
               </li>
             ))}
           </ul>
@@ -267,7 +300,19 @@ function LicenseRow({
   );
 }
 
-function FileRow({ file }: { file: FileDownload }) {
+function FileRow({
+  file,
+  asking,
+  asked,
+  disabled,
+  onAskForAccess,
+}: {
+  file: FileDownload;
+  asking: boolean;
+  asked: boolean;
+  disabled: boolean;
+  onAskForAccess: (reason: string | null) => void;
+}) {
   /*
    * A plain link, not a fetch. The path is same-origin under `/api/customer/`,
    * so the browser sends the session cookie the Shoppex worker owns — there is
@@ -279,21 +324,45 @@ function FileRow({ file }: { file: FileDownload }) {
    * because a dead link dressed as a button is worse than a plain refusal.
    */
   const href = safeExternalHref(file.href);
+  /*
+   * What is left and until when, or why the file closed. A file the server
+   * refuses offers no Download: the link would only answer with that refusal.
+   * A missing `access` (older backend) is a file with nothing to say.
+   */
+  const access = file.access ? describeFileAccess(file.access) : null;
 
   return (
     <AccountCard className="sxa:flex sxa:flex-wrap sxa:items-center sxa:gap-4 sxa:px-5 sxa:py-4">
       <BoxIcon className="sxa:h-4 sxa:w-4 sxa:shrink-0 sxa:text-muted" />
       <div className="sxa:min-w-0 sxa:flex-1">
         <p className="sxa:truncate sxa:text-small sxa:font-semibold">{file.label}</p>
-        <p className="sxa:mt-1 sxa:truncate sxa:text-micro sxa:text-muted">{file.product_title}</p>
+        <p className="sxa:mt-1 sxa:text-micro sxa:text-muted" data-file-access={file.access?.state}>
+          {[file.product_title, access?.text].filter(Boolean).join(' · ')}
+        </p>
       </div>
-      {href === null ? (
+      {access?.refused ? null : href === null ? (
         <span className="sx-account-chip sxa:meta-chip sxa:meta-chip--neutral">{t('common.unavailable')}</span>
       ) : (
         <a href={href} download className="sx-account-button sxa:card-button sxa:card-button--add sxa:shrink-0">
           {t('downloads.download')}
         </a>
       )}
+      {access?.canAsk ? (
+        asked ? (
+          <p role="status" className="sxa:shrink-0 sxa:text-micro sxa:text-muted">{t('downloads.accessRequested')}</p>
+        ) : (
+          <button
+            type="button"
+            onClick={() => onAskForAccess(access.text)}
+            disabled={disabled}
+            aria-busy={asking || undefined}
+            className="sx-account-button sxa:card-button sxa:card-button--add sxa:shrink-0 sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+          >
+            {asking ? <BusySpinner className="sxa:mr-1.5 sxa:h-3.5 sxa:w-3.5" /> : null}
+            {asking ? t('downloads.askingAccess') : t('downloads.askAccess')}
+          </button>
+        )
+      ) : null}
     </AccountCard>
   );
 }

package/eject/account/hosted-page.ts

@@ -0,0 +1,45 @@
+/**
+ * The way out of the account to a hosted buyer page on the checkout host
+ * (design Batch 7, H2 and A1): `{checkout}/{page}/{shopId}`.
+ *
+ * Adding funds, changing a card and handing out a reseller key happen there,
+ * behind the page's own email code, because the JavaScript on a storefront
+ * origin may be the merchant's. So the link carries only the shop, the page to
+ * come back to and the page's display hints; never an email or a token. The
+ * hosted page reads and checks everything again on the server, so a forged
+ * hint can at most open the wrong segment.
+ *
+ * The same rule as `hostedPageUrl` in
+ * `packages/storefront-commerce/src/sx/hosted-page-url.ts`, which the theme
+ * lane uses. This package does not depend on storefront-commerce, so it keeps
+ * its own copy; the two must build the same URL.
+ */
+
+export type HostedPage = 'topup' | 'reseller' | 'billing';
+
+/** `return` is the account page the buyer comes back to; every other entry is a display hint. */
+export type HostedPageQuery = { return: string } & Record<string, string>;
+
+export function hostedPageUrl(
+  checkoutBaseUrl: string,
+  page: HostedPage,
+  shopId: string,
+  query: HostedPageQuery,
+): string {
+  const url = new URL(`/${page}/${encodeURIComponent(shopId)}`, checkoutBaseUrl);
+  for (const [name, value] of Object.entries(query)) url.searchParams.set(name, value);
+  return url.toString();
+}
+
+/**
+ * The link to `page` for the shop this storefront serves, back to the page the
+ * buyer is on now. Null when the worker injected no `shopId` or no
+ * `checkoutBaseUrl`: without both there is no page to link to, and the caller
+ * renders nothing rather than a guessed host.
+ */
+export function hostedPageHref(page: HostedPage, hints: Record<string, string>): string | null {
+  const shopId = typeof window.shopId === 'string' ? window.shopId.trim() : '';
+  const checkoutBaseUrl = typeof window.checkoutBaseUrl === 'string' ? window.checkoutBaseUrl.trim() : '';
+  if (!shopId || !checkoutBaseUrl) return null;
+  return hostedPageUrl(checkoutBaseUrl, page, shopId, { ...hints, return: window.location.href });
+}