Show received Universal Checkout events in the sample overlay

platforms/web/sample/styles.css

@@ -1264,6 +1264,19 @@ button:disabled {
   display: none;
 }
 
+.universal-page .product-scroll {
+  flex: none;
+  overflow: visible;
+}
+
+@media (min-width: 1181px) {
+  .universal-page .workspace {
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    overscroll-behavior: contain;
+  }
+}
+
 @media (max-width: 1180px) {
   html.universal-page {
     height: auto;
@@ -1297,7 +1310,6 @@ button:disabled {
     overflow: visible;
   }
 
-  body.universal-page .product-scroll,
   body.universal-page .runtime-scroll {
     overflow: visible;
   }

platforms/web/sample/universal-main.ts

@@ -1,10 +1,19 @@
+import "@shopify/checkout-kit/universal";
+
 import { normalizeQuantity } from "./cart";
 import { createColumnResizer } from "./column-resizer";
-import { setDevelopmentContinuationHost } from "./universal/browser-policy";
+import { $ } from "./dom";
+import {
+  isConfiguredContinuationUrl,
+  setDevelopmentContinuationHost,
+} from "./universal/browser-policy";
 import { loadSampleConfiguration } from "./universal/configuration";
 import { createUniversalController } from "./universal/controller";
+import { mountUniversalOverlay } from "./universal/overlay";
 import { createSessionPreparationController } from "./universal/preparation";
 import { isBuyerCountry, isCheckoutEnvironment } from "./universal/policy";
+import { createSourceSelection } from "./universal/source-selection";
+import { querySourceViewRefs, renderSourceView } from "./universal/source-view";
 import {
   createInitialState,
   createUniversalStore,
@@ -22,9 +31,24 @@ import { queryUniversalRefs, renderUniversalApp, renderUniversalChange } from ".
 import "./styles.css";
 
 const refs = queryUniversalRefs();
+const sourceRefs = querySourceViewRefs();
 const store = createUniversalStore(createInitialState(loadUniversalDisplay()));
 const controller = createUniversalController({ store });
 const preparation = createSessionPreparationController({ store });
+const sourceSelection = createSourceSelection(isConfiguredContinuationUrl);
+const overlay = mountUniversalOverlay({
+  parent: document.body,
+  hostLog: $<HTMLElement>("#event-log"),
+  hostHeader: $<HTMLElement>(".events-header"),
+  hostNotice: refs.runtimeNotice,
+  validateSource: (value) =>
+    isConfiguredContinuationUrl(value, store.getState().environment) ? value : undefined,
+  onChange: (snapshot) => {
+    if (store.getState().runtime.notice !== snapshot.notice) {
+      controller.setRuntimeNotice(snapshot.notice);
+    }
+  },
+});
 const resizer = createColumnResizer({
   layout: refs.layout,
   leftPanel: refs.settingsPanel,
@@ -37,9 +61,22 @@ const resizer = createColumnResizer({
 
 const unsubscribe = store.subscribe((state, previous) => {
   renderUniversalChange(refs, state, previous);
+  syncSelectedSource();
   resizer.reposition();
 });
 
+function syncSelectedSource(): void {
+  const state = store.getState();
+  const selected = sourceSelection.select(state.preparation, state.environment);
+  renderSourceView(sourceRefs, sourceSelection.mode, sourceSelection.pastedDraft, selected);
+  overlay.configure({
+    src: selected.url,
+    target: state.display.target,
+    appearance: state.display.appearance,
+    logLevel: state.display.logLevel,
+  });
+}
+
 function updateDisplay(partial: Partial<DisplayState>): void {
   const display = { ...store.getState().display, ...partial };
   store.update((state) => ({ ...state, display }));
@@ -56,6 +93,30 @@ refs.form.addEventListener("submit", (event) => {
 
 refs.domainInput.addEventListener("input", controller.clearAddError);
 
+sourceRefs.generatedInput.addEventListener("change", () => {
+  if (!sourceRefs.generatedInput.checked) return;
+  sourceSelection.setMode("generated");
+  syncSelectedSource();
+});
+
+sourceRefs.pastedInput.addEventListener("change", () => {
+  if (!sourceRefs.pastedInput.checked) return;
+  sourceSelection.setMode("pasted");
+  syncSelectedSource();
+  sourceRefs.pastedUrl.focus();
+});
+
+sourceRefs.pastedUrl.addEventListener("input", () => {
+  sourceSelection.setPastedDraft(sourceRefs.pastedUrl.value);
+  syncSelectedSource();
+});
+
+sourceRefs.openButton.addEventListener("click", () => {
+  const state = store.getState();
+  if (!sourceSelection.select(state.preparation, state.environment).ready) return;
+  overlay.attemptOpen();
+});
+
 refs.form.addEventListener("change", (event) => {
   const target = event.target;
   if (!(target instanceof HTMLSelectElement)) return;
@@ -150,6 +211,7 @@ refs.shopList.addEventListener("change", (event) => {
 });
 
 renderUniversalApp(refs, store.getState());
+syncSelectedSource();
 resizer.applyWidths();
 void loadSampleConfiguration()
   .then((configuration) => {
@@ -158,6 +220,7 @@ void loadSampleConfiguration()
       if (!store.getState().shops.some((shop) => shop.domain === domain))
         controller.addShop(domain);
     }
+    syncSelectedSource();
     return undefined;
   })
   .catch(() => {
@@ -169,6 +232,7 @@ window.addEventListener("resize", resizer.reposition);
 window.addEventListener("pagehide", (event) => {
   if (event.persisted) return;
   unsubscribe();
+  overlay.dispose();
   controller.dispose();
   preparation.dispose();
   window.removeEventListener("resize", resizer.reposition);

platforms/web/sample/universal.html

@@ -77,7 +77,7 @@ <h2 id="settings-heading">Settings</h2>
               <span>target</span>
               <select id="uc-target" name="target">
                 <option value="popup">popup (window)</option>
-                <option value="auto">auto (new tab)</option>
+                <option value="auto">auto (browser window)</option>
               </select>
             </label>
             <label>
@@ -155,6 +155,48 @@ <h2 id="uc-cart-heading">Selected carts</h2>
             </div>
           </section>
 
+          <section class="uc-open-card" aria-labelledby="uc-open-heading">
+            <div class="uc-open-heading">
+              <h2 id="uc-open-heading">Open with Checkout Kit</h2>
+              <p class="muted">
+                Checkout Kit displays events from each shop in its checkout overlay.
+              </p>
+            </div>
+            <fieldset class="uc-source-options">
+              <legend>Checkout URL source</legend>
+              <label>
+                <input id="uc-source-generated" type="radio" name="uc-source-mode" checked />
+                <span>Use the URL created from selected carts</span>
+              </label>
+              <label>
+                <input id="uc-source-pasted" type="radio" name="uc-source-mode" />
+                <span>Advanced: paste an existing Universal Checkout URL</span>
+              </label>
+            </fieldset>
+            <div id="uc-pasted-fields" class="uc-pasted-fields" hidden>
+              <label for="uc-pasted-url">Existing Universal Checkout URL</label>
+              <input
+                id="uc-pasted-url"
+                type="url"
+                inputmode="url"
+                autocomplete="off"
+                autocapitalize="off"
+                spellcheck="false"
+                placeholder="https://shop.app/checkouts/uc/…"
+                aria-describedby="uc-source-status"
+              />
+              <p class="field-help">
+                This advanced input stays on this page only and is cleared when you change modes.
+              </p>
+            </div>
+            <p id="uc-source-status" class="notice" data-tone="info" role="status">
+              Create a Universal Checkout URL from the selected carts first.
+            </p>
+            <button id="uc-open" type="button" class="primary-action" disabled>
+              Open Universal Checkout
+            </button>
+          </section>
+
           <div class="panel-header storefront-header">
             <h2>Shop catalogs</h2>
             <span id="uc-shop-count" class="status-pill">0 shops</span>