@godaddy/gd-commerce-storefront 0.7.0 → 0.8.0

package/README.md

@@ -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,

package/docs/server-api.md

@@ -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.8.0",
   "description": "Opinionated React storefront templates for GoDaddy Commerce",
   "type": "module",
   "license": "MIT",