@godaddy/gd-commerce-storefront 0.8.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.
 

package/dist/index.js

@@ -2351,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);
@@ -2485,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.
 

package/package.json

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