@godaddy/gd-commerce-storefront 0.7.0 → 0.9.0

package/README.md

@@ -165,7 +165,7 @@ Add your own elements between parts, reorder them, or leave out display parts. `
 | `ProductDetailsAvailability` | Stock for the verified SKU; nothing before verification |
 | `ProductDetailsAddToCart` | Adds the verified SKU and quantity, labeled with the total, such as "Add to cart · $64.00". Until every option is chosen it names the next one, such as "Select size", and pressing it shows an error on each missing option and focuses the first. While a selection is checked or unavailable, it is disabled and its accessible description gives the reason |
 
-Values whose SKUs are all sold out, given the shopper's other selections, are crossed out and announced as "sold out", but stay selectable, so the shopper can change options in any order. This needs every SKU with its attribute values in the product response, which `@godaddy/gd-commerce-server` returns for up to 50 SKUs; for a product with more, no value is marked, and the add button still says "Out of stock" once a sold-out SKU is chosen.
+Values that no active SKU has are left out, so every value shown can be bought, and a link that names one is treated as if that option is not chosen. An attribute that no SKU has a value for keeps all its values. Values whose SKUs are all sold out, given the shopper's other selections, are crossed out and announced as "sold out", but stay selectable, so the shopper can change options in any order. Both need every SKU with its attribute values in the product response, which `@godaddy/gd-commerce-server` returns for up to 50 SKUs; for a product with more, every value is shown, none is marked, and the add button still says "Out of stock" once a sold-out SKU is chosen.
 
 Every part is named `ProductDetails*` because it works only inside `ProductDetailsRoot`. `AddToCartButton` is the standalone button for a SKU you already have.
 
@@ -525,12 +525,16 @@ mutation methods apply only to the connected store; sample cart data is internal
 without `sampleProducts`, and direct product-detail visits, show the unconnected state.
 Sample grids and drawers have the attribute `data-commerce-source="sample"`.
 
-The provider reads configuration on mount and focus, and every five seconds while the page is
-visible and the state is `unbound` or `connecting`. The first failed refresh hides samples and
-clears the sample cart; a later `unbound` response starts an empty sample cart. While
-connecting, refresh failures keep the connecting state for up to 60 seconds before showing
-the error. Polling stops
-when the state is `ready`; focus and explicit retry still refresh configuration.
+The provider reads configuration on mount and focus. While the page is visible and the state is
+`unbound` or `connecting`, it also polls every five seconds for five minutes after the page loads,
+then every minute, and stops thirty minutes after load. Reloading, retrying or a change in the
+reported state starts it again. A page still `connecting` when polling stops shows an error with
+"Retry connection". The first
+failed refresh hides samples and clears the sample cart; a later `unbound` response starts an
+empty sample cart. While connecting, refresh failures keep the connecting
+state for up to 60 seconds before showing the error. Once polling slows to every minute, the next
+failure is already 60 seconds after the last success, so it shows the error at once. Polling
+stops when the state is `ready`; focus and explicit retry still refresh configuration.
 
 Use a server that reports connection state before you enable `sampleProducts`. Successful
 config responses without `state` still mean ready. A server that does not report `unbound`

package/dist/index.js

@@ -212,6 +212,11 @@ function useMoney() {
 	return useCallback((value, currency = currencyCode) => money(value, currency, locale), [locale, currencyCode]);
 }
 const CONNECTING_FAILURE_GRACE_MS = 6e4;
+/** Polls every five seconds for five minutes after the page loads, then every minute, and stops at thirty. */
+const FAST_POLL_FOR_MS = 5 * 6e4;
+const STOP_POLLING_AT_MS = 30 * 6e4;
+/** A failed retry keeps showing connecting this long so the click visibly does something. */
+const RETRY_FEEDBACK_MS = 1e3;
 /** `locale` as a canonical tag, or `en-US` when it is not a valid one, so one bad prop cannot break every price. */
 function resolveLocale(locale) {
 	if (!locale) return "en-US";
@@ -250,6 +255,14 @@ async function loadConfig(signal) {
 }
 function CommerceProvider({ children, catalogPath = "/shop", productPath = "/products", checkoutSuccessPath, theme = {}, getSwatch, locale, onItemAdded, onEvent }) {
 	const resolvedLocale = useMemo(() => resolveLocale(locale), [locale]);
+	const [pollingSince, setPollingSince] = useState(Date.now);
+	const [pollingStopped, setPollingStopped] = useState(false);
+	const [retrying, setRetrying] = useState(false);
+	useEffect(() => {
+		setPollingStopped(false);
+		const timeout = setTimeout(() => setPollingStopped(true), pollingSince + STOP_POLLING_AT_MS - Date.now());
+		return () => clearTimeout(timeout);
+	}, [pollingSince]);
 	const config = useQuery({
 		retry: false,
 		queryKey: ["commerce", "configuration"],
@@ -257,12 +270,26 @@ function CommerceProvider({ children, catalogPath = "/shop", productPath = "/pro
 		staleTime: 3e4,
 		refetchOnMount: "always",
 		refetchOnWindowFocus: "always",
-		refetchInterval: (query) => query.state.data?.state === "unbound" || query.state.data?.state === "connecting" ? 5e3 : false,
+		refetchInterval: (query) => {
+			const waiting = query.state.data?.state === "unbound" || query.state.data?.state === "connecting";
+			const elapsed = Date.now() - pollingSince;
+			if (!waiting || elapsed >= STOP_POLLING_AT_MS) return false;
+			return elapsed < FAST_POLL_FOR_MS ? 5e3 : 6e4;
+		},
 		refetchIntervalInBackground: false
 	});
+	const [reported, setReported] = useState(config.data?.state);
+	if (reported !== config.data?.state) {
+		setReported(config.data?.state);
+		setPollingSince(Date.now());
+		setPollingStopped(false);
+	}
 	const holdConnecting = config.isError && config.data?.state === "connecting" && config.errorUpdatedAt - config.dataUpdatedAt < CONNECTING_FAILURE_GRACE_MS;
 	let connection = config.data?.state ?? "loading";
 	if (config.isError) connection = holdConnecting ? "connecting" : "error";
+	const stalled = pollingStopped && connection === "connecting";
+	if (stalled) connection = "error";
+	if (retrying) connection = "connecting";
 	return /* @__PURE__ */ jsx(BoundCommerceProvider, {
 		config: {
 			cartScope: "",
@@ -273,9 +300,19 @@ function CommerceProvider({ children, catalogPath = "/shop", productPath = "/pro
 			checkoutSuccessPath
 		},
 		connection,
-		connectionError: connection === "error" ? message(config.error) : null,
+		connectionError: connection !== "error" ? null : stalled ? "The store is taking too long to connect." : message(config.error),
 		retryConnection: () => {
-			config.refetch();
+			const started = Date.now();
+			setPollingSince(started);
+			if (connection !== "error") {
+				config.refetch();
+				return;
+			}
+			setRetrying(true);
+			config.refetch().then(async (result) => {
+				if (result.isError) await new Promise((resolve) => setTimeout(resolve, started + RETRY_FEEDBACK_MS - Date.now()));
+				setRetrying(false);
+			});
 		},
 		theme,
 		getSwatch,
@@ -2314,11 +2351,14 @@ function ProductDetailsLoader({ productId, className, children, urlState = true,
 	});
 	const productNotFound = product.isError && product.error instanceof ApiError && product.error.status === 404;
 	const group = product.data?.skuGroup;
-	const attributes = getProductAttributes(group);
+	const attributes = getOfferedAttributes(group, getProductAttributes(group));
 	const skuOptions = getLabeledSkuOptions(group);
 	const explicitSku = skuOptions.find((sku) => sku.id === params.get("sku"));
-	const selections = attributes.map((attribute) => params.get(`option.${attribute.name}`) ?? "");
-	const complete = skuOptions.length > 0 ? !!explicitSku : attributes.every((attribute, index) => attribute.values.some((value$1) => value$1.name === selections[index]));
+	const selections = attributes.map((attribute) => {
+		const value$1 = params.get(`option.${attribute.name}`) ?? "";
+		return attribute.values.some((candidate) => candidate.name === value$1) ? value$1 : "";
+	});
+	const complete = skuOptions.length > 0 ? !!explicitSku : selections.every(Boolean);
 	const selectionParams = new URLSearchParams();
 	selections.filter(Boolean).forEach((value$1) => {
 		selectionParams.append("attributeValues", value$1);
@@ -2448,15 +2488,39 @@ function ProductDetailsLoader({ productId, className, children, urlState = true,
 function focusFirstMissing(root) {
 	root.current?.querySelector("[data-commerce-missing] input:not(:disabled), [data-commerce-missing] select")?.focus();
 }
+function getSkuAttributeValues(group) {
+	const connection = group?.skus;
+	const skus = connection?.edges?.flatMap((edge) => edge?.node ? [edge.node] : []) ?? [];
+	const values = skus.map(getSkuAttributeValueNames);
+	return {
+		skus,
+		values,
+		complete: !connection?.pageInfo?.hasNextPage && (connection?.totalCount ?? skus.length) === skus.length && values.every((names) => names !== null)
+	};
+}
+/**
+* The attributes with only the values some active SKU has, so a shopper is never offered a value that cannot be
+* bought. Needs every SKU with its attribute values, so it keeps every value for a truncated list or an older
+* server. An attribute that no SKU has a value for keeps every value, so its control still renders.
+*/
+function getOfferedAttributes(group, attributes) {
+	const { values, complete } = getSkuAttributeValues(group);
+	if (!complete) return attributes;
+	const offered = new Set(values.flatMap((names) => names ?? []));
+	return attributes.map((attribute) => {
+		const kept = attribute.values.filter((value) => offered.has(value.name));
+		return kept.length ? {
+			...attribute,
+			values: kept
+		} : attribute;
+	});
+}
 /**
 * For each attribute, the values whose every SKU, among those with the other selected values, has tracked stock
 * used up. Needs every SKU with its attribute values, so it is empty for a truncated list or an older server.
 */
 function getSoldOutValues(group, attributes, selections) {
-	const connection = group?.skus;
-	const skus = connection?.edges?.flatMap((edge) => edge?.node ? [edge.node] : []) ?? [];
-	const values = skus.map(getSkuAttributeValueNames);
-	const complete = !connection?.pageInfo?.hasNextPage && (connection?.totalCount ?? skus.length) === skus.length && values.every((names) => names !== null);
+	const { skus, values, complete } = getSkuAttributeValues(group);
 	return attributes.map((attribute, index) => {
 		const soldOut = /* @__PURE__ */ new Set();
 		if (!complete) return soldOut;

package/docs/server-api.md

@@ -68,7 +68,7 @@ Exported `SKUGroup`, `SKU`, `Connection`, `SkuGroupsResult` and `SkuGroupResult`
 
 For options, return `attributes.edges[].node` with `name`, `label`, and `values.edges[].node` containing `name` and `label`. For example, the attribute `color` has values named `blue` and `clay`. The browser sends those value names as repeated `attributeValues` parameters. Return the group with a SKU connection filtered to that exact combination. Zero or multiple results cannot be purchased. Include accurate `totalCount` and `hasNextPage`; a truncated one-item result must never look like a complete match.
 
-Optionally, give each SKU in the unfiltered response its `attributeValues.edges[].node.name`. With every SKU and its value names, the product page crosses out values whose SKUs are all sold out, given the shopper's other selections. Without them, or when `hasNextPage` is true, no value is marked sold out; the add button still reports a sold-out SKU once it is chosen.
+Optionally, give each SKU in the unfiltered response its `attributeValues.edges[].node.name`. With every SKU and its value names, the product page leaves out values that no SKU has and crosses out values whose SKUs are all sold out, given the shopper's other selections. Without them, or when `hasNextPage` is true, every value is shown and none is marked sold out; the add button still reports a sold-out SKU once it is chosen.
 
 Products without attribute definitions can offer explicit SKU selection only when all SKUs are returned with unique IDs and unique nonempty labels/names. Ambiguous or incomplete collections cannot be purchased. No inventory records means untracked inventory; records without an `AVAILABLE` quantity mean unavailable. Supply appropriate records for physical inventory.
 
@@ -134,9 +134,14 @@ live data only when the deployed server reports a new state. If a host's deploym
 state from deployment configuration, a deployed site keeps showing samples until that
 configuration is updated, for example by publishing again.
 
-The storefront polls every five seconds while the page is visible and the state is `unbound` or
-`connecting`, and refreshes on mount and focus. A failed refresh immediately hides samples, without
-automatic request retries. While the last response was `connecting`, refresh failures keep the
-connecting state for up to 60 seconds, so a host restart during connection does not flash an
-error. Polling continues, and a longer failure reports the error. Aborted configuration requests cannot overwrite newer responses.
+While the page is visible and the state is `unbound` or `connecting`, the storefront polls every
+five seconds for five minutes after the page loads, then every minute, and stops thirty minutes
+after load. It also refreshes on mount and focus, and reloading or retrying starts polling again. A
+page still `connecting` when polling stops shows an error with a retry button, so finish connecting
+well within thirty minutes. A failed refresh immediately hides
+samples, without automatic request retries. While the last response was `connecting`, refresh
+failures keep the connecting state for up to 60 seconds, so a host restart during connection does
+not flash an error. This holds only in the first five minutes; after that, polls are a minute
+apart, and the first failure reports the error. Polling continues, and a longer failure reports
+the error. Aborted configuration requests cannot overwrite newer responses.
 Release server and client support before using the `sampleProducts` prop. No new endpoint is required.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godaddy/gd-commerce-storefront",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Opinionated React storefront templates for GoDaddy Commerce",
   "type": "module",
   "license": "MIT",