Merge pull request #25 from showpass/SPW-20610-2

fix (playground) | Simplify basket reset - SPW-20610

Author: sumeet-sandhu

scripts/checkout-restart.test.mjs

@@ -14,15 +14,29 @@ const { StaticRouter } = require("react-router-dom/server");
 const source = readFileSync(new URL("../src/docs-app/ui/components/widgets/checkout-restart.ts", import.meta.url), "utf8");
 const code = ts.transpileModule(source, { compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2020 } }).outputText;
 
-function fixture() {
+function fixture({ redirectDirectoryIndex = false } = {}) {
   const listeners = new Set();
   const timers = new Map();
   const replies = [];
   const events = [];
   const controller = new AbortController();
   const window = {
     crypto: webcrypto,
-    location: { origin: "https://dev.showpass.com", reload: () => events.push("reload") },
+    location: {
+      origin: "https://dev.showpass.com",
+      reload() {
+        events.push("reload");
+        const url = new URL(window.location.href);
+        if (redirectDirectoryIndex && url.pathname === "/sdk/widget-playground") {
+          // GitHub Pages adds the directory's trailing slash. HTTP redirects
+          // clear history state, including the single-use reset click marker.
+          url.pathname += "/";
+          window.location.href = url.toString();
+          window.history.state = null;
+          events.push("redirect");
+        }
+      },
+    },
     history: {
       state: { idx: 0 },
       replaceState(state, title, url) { this.state = state; if (url) window.location.href = new URL(url, window.location.origin).toString(); },
@@ -51,7 +65,7 @@ test("navigation retains only public settings and strips tokens and reset state"
   const f = fixture();
   const search = new URLSearchParams({ environment: "demo", eventId: "event", membershipId: "membership", theme: "#24727b", tab: "mounted", widget: "event", customer_attribution_token: "SECRET", token: "SECRET", returnUrl: "https://evil.example", checkoutAction: "reset" });
   const resetUrl = new URL(f.getCheckoutResetUrl(search, "reset"), f.window.location.origin);
-  assert.equal(resetUrl.pathname, "/sdk/widget-playground");
+  assert.equal(resetUrl.pathname, "/sdk/widget-playground/");
   assert.equal(resetUrl.searchParams.get("memberId"), "membership");
   assert.equal(resetUrl.searchParams.get("checkoutAction"), "reset");
   assert.equal(resetUrl.searchParams.get("environment"), "demo");
@@ -69,7 +83,7 @@ test("a button click reloads the Playground with a single-use reset intent and n
   assert.equal(f.consumeCheckoutResetIntent(), false);
   f.startCheckoutReset(new URLSearchParams({ environment: "demo", eventId: "test-event", customer_attribution_token: "SECRET" }));
   const url = new URL(f.window.location.href);
-  assert.equal(url.pathname, "/sdk/widget-playground");
+  assert.equal(url.pathname, "/sdk/widget-playground/");
   assert.equal(url.searchParams.get("checkoutAction"), "reset");
   assert.ok(!f.window.location.href.includes("SECRET"));
   assert.ok(!JSON.stringify(f.window.history.state).includes("SECRET"));
@@ -88,6 +102,17 @@ test("a completed reset retains public settings without starting another reset",
   assert.equal(f.consumeCheckoutResetIntent(), false);
 });
 
+test("the first reset click survives a static-host reload without losing its intent", () => {
+  const f = fixture({ redirectDirectoryIndex: true });
+  for (let attempt = 0; attempt < 3; attempt++) {
+    f.startCheckoutReset(new URLSearchParams({ environment: "demo", eventId: "test-event" }));
+    assert.equal(f.consumeCheckoutResetIntent(), true, "the first click must authorize reset after reload");
+    assert.equal(f.consumeCheckoutResetIntent(), false, "the intent must still be single-use");
+    assert.equal(new URL(f.window.location.href).pathname, "/sdk/widget-playground/");
+  }
+  assert.deepEqual(f.events, ["reload", "reload", "reload"]);
+});
+
 test("expired or malformed history markers cannot authorize reset", () => {
   const f = fixture();
   for (const timestamp of [Date.now() - 61_000, Date.now() + 61_000, true, "reset"]) {

src/docs-app/data/sdk/02-ticket-purchase-widget.md

@@ -70,15 +70,15 @@ Open the [Widget Playground](/sdk/widget-playground), select the same environmen
 
 The widget forwards the token to Showpass checkout, which includes it in the basket request body. The playground keeps the token in memory and clears it on reload or environment change. Use a fresh token after its one-hour expiry; do not paste your Partner credential here. Close and reopen an existing modal after changing the applied token.
 
-**If you are signed in, your Showpass account must match the token’s customer.** To test different customers, use an incognito window and stay signed out. Reset basket keeps the current login.
+**If you are signed in, your Showpass account must match the token’s customer.** To test different customers, use an incognito window and stay signed out. Clearing and resetting keeps the current login.
 
 ### Reset a test checkout in the Playground
 
-Applying or clearing a token changes the Playground setting. It does not discard items or change the customer attached to an existing Showpass basket. **Clear token** keeps that basket.
+Applying a token changes the Playground setting and keeps the existing basket and customer. **Clear token & reset basket** removes both the pasted and applied token and expires that basket so you can test another customer.
 
-Use **Reset basket** beside **Apply token** and **Clear token**, inside **Partner customer**, before testing another customer:
+Use **Clear token & reset basket** beside **Apply token**, inside **Partner customer**, before testing another customer:
 
-1. Click **Reset basket**. It immediately starts resetting the basket, with progress shown below the token controls. There is no separate confirmation page or dialog.
+1. Click **Clear token & reset basket**. It immediately starts resetting the basket, with progress shown below the token controls. There is no separate confirmation page or dialog.
 2. The Playground refreshes to unload old widgets and clears both the pasted and applied token. Your public settings are kept. The old basket is expired and its reservations released.
 3. When **Basket reset** appears, paste and apply the next customer's token, then select items to create a fresh basket. Leave the token empty to try ordinary checkout.
 

src/docs-app/ui/components/widgets/PlaygroundCheckoutReset.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Loader2 } from "lucide-react";
 import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
 import { Button } from "@/shared/components/button";
 import { consumeCheckoutResetIntent, getCheckoutResetUrl, runCheckoutRestart, startCheckoutReset } from "./checkout-restart";
@@ -20,6 +21,7 @@ export default function PlaygroundCheckoutReset({ environment, disabled }: Playg
   const authorized = React.useRef(false);
   const [attempt, setAttempt] = React.useState(0);
   const [error, setError] = React.useState("");
+  const busy = resetting && !error;
 
   React.useEffect(() => {
     const frame = iframe.current;
@@ -60,8 +62,9 @@ export default function PlaygroundCheckoutReset({ environment, disabled }: Playg
   };
 
   return <>
-    <Button size="sm" variant="outline" disabled={disabled || (resetting && !error)} onClick={reset}>
-      {error ? "Retry reset" : "Reset basket"}
+    <Button size="sm" variant="outline" disabled={disabled || busy} aria-busy={busy} onClick={reset}>
+      {busy && <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" aria-hidden="true" />}
+      {error ? "Retry reset" : busy ? "Resetting basket…" : "Clear token & reset basket"}
     </Button>
     {resetting && <iframe ref={iframe} title="Reset test basket" hidden allow="storage-access *" referrerPolicy="origin" />}
     {error ? <p role="alert" className="w-full text-xs text-destructive">{error}</p>

src/docs-app/ui/components/widgets/checkout-restart.ts

@@ -17,7 +17,9 @@ export function getCheckoutResetUrl(search: URLSearchParams, action?: "reset"):
   }
   if (action) query.set("checkoutAction", action);
   const queryString = query.toString();
-  return `/sdk/widget-playground${queryString ? `?${queryString}` : ""}`;
+  // GitHub Pages redirects directory URLs without a trailing slash. Avoid that
+  // redirect on reload because it clears the history marker for the reset click.
+  return `/sdk/widget-playground/${queryString ? `?${queryString}` : ""}`;
 }
 
 export function startCheckoutReset(search: URLSearchParams): void {

src/pages/WidgetPlayground.tsx

@@ -108,7 +108,6 @@ const WidgetPlayground: React.FC = () => {
   const [eventError, setEventError] = React.useState("");
   const [isOpeningEvent, setIsOpeningEvent] = React.useState(false);
   const openingEvent = React.useRef(false);
-  const [checkoutStatus, setCheckoutStatus] = React.useState("");
   const onSdkReady = React.useCallback(() => setSdkReady(true), []);
 
   const changeEnvironment = (value: string) => {
@@ -275,14 +274,12 @@ const WidgetPlayground: React.FC = () => {
                   <div className="flex flex-wrap gap-2">
                     <Button size="sm" disabled={resetting || !tokenInput.trim() || !!tokenError || tokenInput.trim() === customerAttributionToken}
                       onClick={() => setCustomerAttributionToken(tokenInput.trim())}>Apply token</Button>
-                    <Button size="sm" variant="outline" disabled={resetting || (!tokenInput && !customerAttributionToken)}
-                      onClick={() => { setTokenInput(""); setCustomerAttributionToken(""); setCheckoutStatus("Token cleared. The existing basket is kept. Use Reset basket to discard it."); }}>Clear token</Button>
                     <PlaygroundCheckoutReset environment={environment} disabled={isOpeningEvent} />
                   </div>
                   {tokenError && <p role="alert" className="text-xs text-destructive">{tokenError}</p>}
                   {tokenInput.trim() !== customerAttributionToken && !tokenError && <p className="text-xs text-muted-foreground">Your changes have not been applied yet.</p>}
                   <p role="status" className="text-xs">{customerAttributionToken ? "Token applied to Event Tickets." : "No token applied. You can still try normal checkout."}</p>
-                  <p className="text-xs text-muted-foreground">Apply/Clear token keeps the current basket. Reset basket clears it and your token, then refreshes the Playground. Your login stays the same.</p>
+                  <p className="text-xs text-muted-foreground">Applying a token keeps the existing basket. Clearing and resetting removes the token and expires that basket. Your login stays the same.</p>
                   {environment === "prod" && <p className="text-xs text-destructive">Production reset releases real reservations, including those shared with other widgets.</p>}
                 </div>
               </details>
@@ -331,7 +328,6 @@ const WidgetPlayground: React.FC = () => {
           </div>
         </div>
       </section>
-      {checkoutStatus && <p role="status" className="mb-4 text-sm">{checkoutStatus}</p>}
       {sdkError && <p role="alert" className="mb-4 text-destructive">{sdkError} Check that this environment is running and reload the page.</p>}
       {!resetting && !sdkReady && !sdkError && <p role="status" className="mb-4">Loading Showpass widgets…</p>}