@shoppexio/storefront-react 0.1.5 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## 0.2.1
+
+- Favorites follow the account session without a reload. Signing in on the
+  account page reloads the favorites store, so the hearts on cards and the
+  product page work at once instead of sending the buyer back to Account.
+  Signing out reloads it too, which clears the previous buyer's saved set
+  instead of leaving it on the page for whoever uses the browser next.
+  (`announceCustomerSessionChange()`, `signOutEndedSession()`.)
+
+## 0.2.0
+
+Breaking:
+
+- `settings.availableGateways` is gone. Use `settings.paymentMethods`: the
+  public payment methods the backend derives from the shop's live gateways,
+  each `{ id, label, kind }` with `kind` `card`, `wallet` or `crypto`,
+  already in display order. A theme no longer maps gateway codes itself.
+- `resolveDeliveryPromise()` returns `{ kind: 'unspecified' }` when the
+  merchant set no delivery time. A missing delivery time used to read as
+  instant delivery; hosted checkout never promised that, and themes no longer
+  do. Handle the new kind in an exhaustive `switch`.
+
+Added:
+
+- Product meta: `shortDescription` (one plain-text line, at most 200
+  characters), the unit labels `unitLabelSingular` / `unitLabelPlural`, an
+  option's `description`, and `resolveYouReceive()` for a "You receive" line
+  that only states the real delivery type: keys for serial products, a
+  download for file products, nothing otherwise.
+- Favorites: `<FavoritesProvider>` and `useFavorites()` for a heart on
+  cards and the product page. It shares one store with the account's
+  favorites tab (`FAVORITES_CHANGED_EVENT`) and reports `signed_out`
+  instead of failing when there is no customer session.
+- Back-in-stock ("Notify me"): `canRequestStockAlert()` and
+  `requestStockAlert()`. `settings.stockAlertsEnabled` reflects the shop
+  toggle.
+- Status page: `parseServiceStatus()` and `buildStatusPageModel()` for a
+  `/status` page. It lists only the products the merchant gave a status
+  (`operational`, `updating`, `detected`, `offline`).
+
+Needs: a Shoppex backend that sends `payment_methods`,
+`stock_alerts_enabled`, `short_description` and `service_status` in the
+storefront payload. Parsing fails fast when a field is missing.
+
 ## 0.1.5
 
 - `loadShopPage()` returns `error` for a failed request or render and `missing`

package/README.md

@@ -80,7 +80,10 @@ createRoot(document.getElementById('root')!).render(
 
 - Catalog: product and bundle cards, categories, sorting, filtering, paging.
 - Product pages: options, pricing per quantity, stock, badges, videos, the
-  rating breakdown.
+  rating breakdown, a short description and a "You receive" line.
+- Favorites on cards and product pages, "Notify me" for sold-out products,
+  and a `/status` page from the statuses the merchant sets.
+- Payment method marks from the shop's live payment methods.
 - Cart: add, update, remove, coupons, quotes from the server, checkout
   hand-off, per-product checkout fields.
 - Reviews, shop pages, navigation menus and the contact form, from the SDK.
@@ -164,6 +167,9 @@ Most themes never need this.
 | Product | The product page model: variants, rating, pricing, quantity bounds, badges, videos | `buildProductDetail()`, `calculateLinePricing()`, `badgesForProductPage()` |
 | Cart | Cart state, quotes, coupons, checkout hand-off | `<CartProvider>`, `useCart()`, `buildCartView()`, `buildCartTotals()` |
 | Checkout fields | Per-product fields a buyer fills before checkout | `resolveCheckoutFields()`, `readCheckoutNeedsDetails()` |
+| Favorites | The signed-in customer's saved products, shared with the account tab | `<FavoritesProvider>`, `useFavorites()` |
+| Back in stock | "Notify me" on a sold-out product or option | `canRequestStockAlert()`, `requestStockAlert()` |
+| Status page | The merchant-set status of each product | `buildStatusPageModel()`, `parseServiceStatus()` |
 | Reviews, pages, menus, contact | SDK-backed hooks | `usePagedShopReviews()`, `loadLatestWrittenReviews()`, `loadShopPage()`, `useNavigationLinks()`, `submitContactTicket()` |
 | Merchant HTML | Sanitizing and flattening merchant rich text | `sanitizeMerchantHtml()`, `flattenMerchantHtmlToText()` |
 | Account routing | Mounting the account and its lazy chunk | `ACCOUNT_PATH`, `ACCOUNT_PATH_ALIAS`, `accountRouteMessage()`, `ACCOUNT_STOREFRONT_ROUTES`, `ACCOUNT_ARTIFACT_CAPABILITIES` |

package/dist/account.js

@@ -4,9 +4,13 @@ import {
   accountTabHref,
   accountTabLabelKey,
   canonicalAccountPath,
+  favoriteProductHref,
   getShoppex,
-  resolveAccountView
-} from "./chunk-D6XKDVAV.js";
+  narrowFavorites,
+  notifyFavoritesChanged,
+  resolveAccountView,
+  withoutFavorite
+} from "./chunk-ZEFZPUAW.js";
 
 // src/account/account-page.tsx
 import { useEffect as useEffect5, useState as useState11 } from "react";
@@ -8618,52 +8622,6 @@ function CodeRow({ code }) {
 // src/account/favorites.tsx
 import { useEffect as useEffect2, useState as useState3 } from "react";
 import { Link as Link3 } from "react-router-dom";
-
-// src/account/account-favorites.ts
-function isRecord2(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function readNullableString(record, key) {
-  const value = record[key];
-  if (value === null || typeof value === "string") return value;
-  return void 0;
-}
-function narrowFavorites(payload) {
-  if (!isRecord2(payload) || !Array.isArray(payload.favorites)) return { ok: false };
-  const favorites = [];
-  for (const entry of payload.favorites) {
-    if (!isRecord2(entry)) return { ok: false };
-    const productUniqid = entry.product_uniqid;
-    const title = entry.title;
-    const slug = readNullableString(entry, "slug");
-    const imageUrl = readNullableString(entry, "image_url");
-    const priceDisplay = entry.price_display;
-    const unavailable = entry.unavailable;
-    const createdAt = entry.created_at;
-    if (typeof productUniqid !== "string" || typeof title !== "string" || slug === void 0 || imageUrl === void 0 || typeof priceDisplay !== "number" || !Number.isFinite(priceDisplay) || typeof unavailable !== "boolean" || typeof createdAt !== "string") {
-      return { ok: false };
-    }
-    favorites.push({
-      product_uniqid: productUniqid,
-      title,
-      slug,
-      image_url: imageUrl,
-      price_display: priceDisplay,
-      unavailable,
-      created_at: createdAt
-    });
-  }
-  return { ok: true, favorites };
-}
-function favoriteProductHref(favorite) {
-  if (favorite.unavailable || !favorite.slug) return null;
-  return `/product/${encodeURIComponent(favorite.slug)}`;
-}
-function withoutFavorite(favorites, productUniqid) {
-  return favorites.filter((favorite) => favorite.product_uniqid !== productUniqid);
-}
-
-// src/account/favorites.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function AccountFavorites() {
   const { state, reload } = useAccountResource("favorites", () => callCustomerApi((sdk) => sdk.favorites()));
@@ -8709,6 +8667,7 @@ function AccountFavorites() {
       setRemoveError(result.message?.trim() || t("favorites.removeFailed"));
       return;
     }
+    notifyFavoritesChanged();
     setFavorites((current) => current ? withoutFavorite(current, favorite.product_uniqid) : current);
   };
   return /* @__PURE__ */ jsxs4("div", { children: [
@@ -11264,21 +11223,21 @@ function grantStatusLabel(status) {
 import { useEffect as useEffect4, useId as useId2, useRef as useRef4, useState as useState8 } from "react";
 
 // src/account/account-settings.ts
-function isRecord3(value) {
+function isRecord2(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
-function readNullableString2(record, key) {
+function readNullableString(record, key) {
   const value = record[key];
   if (value === null || typeof value === "string") return value;
   return void 0;
 }
 function narrowEmailPreferences(payload) {
-  if (!isRecord3(payload) || typeof payload.global_unsubscribed !== "boolean") return { ok: false };
+  if (!isRecord2(payload) || typeof payload.global_unsubscribed !== "boolean") return { ok: false };
   if (!Array.isArray(payload.lists)) return { ok: false };
   const lists = [];
   for (const entry of payload.lists) {
-    if (!isRecord3(entry)) return { ok: false };
-    const description = readNullableString2(entry, "description");
+    if (!isRecord2(entry)) return { ok: false };
+    const description = readNullableString(entry, "description");
     if (typeof entry.id !== "string" || typeof entry.name !== "string" || description === void 0 || typeof entry.subscribed !== "boolean") {
       return { ok: false };
     }
@@ -11287,12 +11246,12 @@ function narrowEmailPreferences(payload) {
   return { ok: true, preferences: { global_unsubscribed: payload.global_unsubscribed, lists } };
 }
 function narrowCustomerSessions(payload) {
-  if (!isRecord3(payload) || !Array.isArray(payload.sessions)) return { ok: false };
+  if (!isRecord2(payload) || !Array.isArray(payload.sessions)) return { ok: false };
   const sessions = [];
   for (const entry of payload.sessions) {
-    if (!isRecord3(entry)) return { ok: false };
-    const ipAddress = readNullableString2(entry, "ip_address");
-    const userAgent = readNullableString2(entry, "user_agent");
+    if (!isRecord2(entry)) return { ok: false };
+    const ipAddress = readNullableString(entry, "ip_address");
+    const userAgent = readNullableString(entry, "user_agent");
     if (typeof entry.id !== "string" || typeof entry.created_at !== "string" || typeof entry.expires_at !== "string" || ipAddress === void 0 || userAgent === void 0 || typeof entry.current !== "boolean") {
       return { ok: false };
     }
@@ -11857,7 +11816,7 @@ function billingMessage(plan) {
 function cancelsAtPeriodEnd(gateway) {
   return gateway.trim().toUpperCase() !== "PAYPAL";
 }
-function isRecord4(value) {
+function isRecord3(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function readString(record, key) {
@@ -11865,10 +11824,10 @@ function readString(record, key) {
   return typeof value === "string" ? value : null;
 }
 function narrowBillingHistory(payload) {
-  if (!isRecord4(payload) || !Array.isArray(payload.invoices)) return { ok: false };
+  if (!isRecord3(payload) || !Array.isArray(payload.invoices)) return { ok: false };
   const invoices = [];
   for (const entry of payload.invoices) {
-    if (!isRecord4(entry)) return { ok: false };
+    if (!isRecord3(entry)) return { ok: false };
     const uniqid = readString(entry, "uniqid");
     const total = readString(entry, "total");
     const currency = readString(entry, "currency");
@@ -12135,10 +12094,10 @@ function BillingHistoryList({ payload, reload }) {
 import { useId as useId3, useState as useState10 } from "react";
 
 // src/account/account-support.ts
-function isRecord5(value) {
+function isRecord4(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
-function readNullableString3(record, key) {
+function readNullableString2(record, key) {
   const value = record[key];
   if (value === null || typeof value === "string") return value;
   return void 0;
@@ -12147,12 +12106,12 @@ function isSupportMessageRole(value) {
   return value === "CUSTOMER" || value === "MERCHANT" || value === "SYSTEM";
 }
 function narrowSupportTicket(payload) {
-  if (!isRecord5(payload) || !isRecord5(payload.ticket)) return { ok: false };
+  if (!isRecord4(payload) || !isRecord4(payload.ticket)) return { ok: false };
   const raw = payload.ticket;
   const uniqid = raw.uniqid;
-  const title = readNullableString3(raw, "title");
+  const title = readNullableString2(raw, "title");
   const status = raw.status;
-  const invoiceId = readNullableString3(raw, "invoice_id");
+  const invoiceId = readNullableString2(raw, "invoice_id");
   const createdAt = raw.created_at;
   const updatedAt = raw.updated_at;
   if (typeof uniqid !== "string" || title === void 0 || typeof status !== "string" || invoiceId === void 0 || typeof createdAt !== "string" || typeof updatedAt !== "string" || !Array.isArray(raw.messages)) {
@@ -12160,7 +12119,7 @@ function narrowSupportTicket(payload) {
   }
   const messages = [];
   for (const entry of raw.messages) {
-    if (!isRecord5(entry)) return { ok: false };
+    if (!isRecord4(entry)) return { ok: false };
     const { id, role, message, created_at: messageCreatedAt } = entry;
     if (typeof id !== "string" || !isSupportMessageRole(role) || typeof message !== "string" || typeof messageCreatedAt !== "string") {
       return { ok: false };
@@ -12196,7 +12155,7 @@ function messageAuthorKey(role) {
   return "support.fromMerchant";
 }
 function readCreatedTicketUniqid(data) {
-  if (!isRecord5(data)) return null;
+  if (!isRecord4(data)) return null;
   const uniqid = data.uniqid;
   return typeof uniqid === "string" && uniqid.length > 0 ? uniqid : null;
 }
@@ -12548,6 +12507,12 @@ function remainingSearch(search) {
   const query = kept.toString();
   return query ? `?${query}` : "";
 }
+function announceCustomerSessionChange() {
+  notifyFavoritesChanged();
+}
+function signOutEndedSession(result) {
+  return result.success || result.status !== void 0;
+}
 function AccountPage({ frame: Frame, notFound }) {
   const location = useLocation();
   const search = new URLSearchParams(location.search);
@@ -12586,11 +12551,12 @@ function AccountPage({ frame: Frame, notFound }) {
     setSignOutError(null);
     const result = await callCustomerApi((sdk) => sdk.logout());
     setSigningOut(false);
-    if (!result.success && result.status === void 0) {
+    if (!signOutEndedSession(result)) {
       setSignOutError(result.message?.trim() || t("account.signOutFailed"));
       return;
     }
     setSession({ status: "signed-out" });
+    announceCustomerSessionChange();
   };
   if (canonical !== null) return /* @__PURE__ */ jsx15(Navigate, { to: `${canonical}${remainingSearch(search)}`, replace: true });
   if (view.kind === "unknown-tab") return /* @__PURE__ */ jsx15(Fragment3, { children: notFound });
@@ -12626,6 +12592,7 @@ function AccountPage({ frame: Frame, notFound }) {
             onSignedIn: () => {
               setPrefill(spendSignInPrefill());
               setSession({ status: "signed-in" });
+              announceCustomerSessionChange();
             }
           }
         ) : null,