@tokenoftrust/storefront-runner 2.0.2 → 2.0.4

package/apps/storefront/src/components/admin/AdminCheckoutSettingsPanel.astro

@@ -1,226 +0,0 @@
----
-/**
- * <AdminCheckoutSettingsPanel> — the "Cart & Checkout appearance" settings
- * section. Mirrors the managed checkout settings surface (brand colors,
- * per-template URLs, store/feature config); each visual field is
- * prepopulated from the tenant's theme (the style-guide) and can be overridden
- * or reset back to that theme default.
- *
- * Presentational at the current admin altitude: the resolve/override/reset MODEL
- * is real (lib/commerce/checkoutSettings), but SAVE is the commerce-service
- * theme PUT/refresh seam — surfaced, not faked.
- */
-import { getCheckoutSettingsViewModel } from "@/lib/admin/services/mock";
-import { resolveAdminTargetTenant } from "@/config/adminTargetTenant";
-import type { CheckoutFieldGroup, CheckoutSettingsField } from "@/lib/commerce/checkoutSettings";
-
-const { envelope } = Astro.props;
-// Resolve the TARGET tenant's config through the resolver seam (config layer),
-// then build the view model from it — lib never reaches into the static map.
-const targetTenant = await resolveAdminTargetTenant(envelope.targetTenant);
-const vm = getCheckoutSettingsViewModel(envelope, targetTenant);
-
-const GROUP_META: Record<CheckoutFieldGroup, { title: string; blurb: string }> = {
-  colors: {
-    title: "Brand colors",
-    blurb: "Hosted checkout colors, prepopulated from this tenant's theme tokens.",
-  },
-  templates: {
-    title: "Templates",
-    blurb: "Per-surface hosted template URLs (checkout, cart, cart drawer, receipt, email).",
-  },
-  store: {
-    title: "Store & features",
-    blurb: "Store identity and checkout feature toggles. No theme default.",
-  },
-};
-const GROUP_ORDER: CheckoutFieldGroup[] = ["colors", "templates", "store"];
-const byGroup = (g: CheckoutFieldGroup) => vm.fields.filter((f) => f.group === g);
-
-const isColor = (f: CheckoutSettingsField) => f.kind === "color";
----
-
-<div class="panel" id="settings-cart-appearance">
-  <div class="panel-head settings-panel-head">
-    <h3><svg><use href="#i-gear"></use></svg>Cart &amp; Checkout Appearance</h3>
-    <span class="chip blue">Managed checkout</span>
-  </div>
-
-  {!vm.hasStore ? (
-    <div class="panel-body">
-      <p class="note">This tenant has no hosted checkout store configured, so there is nothing to theme here.</p>
-    </div>
-  ) : (
-    <div class="panel-body grid">
-      <div class="checkout-head">
-        <p class="note">
-          Values are <b>prepopulated from the theme</b> (the style guide). Override any field, or
-          reset it back to the theme default. {vm.overrideCount > 0 ? `${vm.overrideCount} field(s) currently overridden.` : "No overrides yet."}
-        </p>
-        <button class="btn" type="button" disabled={vm.overrideCount === 0}>
-          <svg><use href="#i-refresh"></use></svg>Reset all to theme
-        </button>
-      </div>
-
-      {GROUP_ORDER.map((g) => (
-        <section class="checkout-group">
-          <div class="checkout-group-head">
-            <h4>{GROUP_META[g].title}</h4>
-            <p>{GROUP_META[g].blurb}</p>
-          </div>
-          <div class="checkout-fields">
-            {byGroup(g).map((f) => (
-              <div class="checkout-field">
-                <div class="checkout-field-label">
-                  <label>{f.label}</label>
-                  <span class:list={["chip", f.source === "override" ? "amber" : "green"]}>
-                    {f.source === "override" ? "Overridden" : "Theme default"}
-                  </span>
-                </div>
-
-                <div class="checkout-field-control">
-                  {isColor(f) ? (
-                    <span class="checkout-swatch" style={`background:${f.value}`} aria-hidden="true"></span>
-                  ) : null}
-
-                  {f.kind === "boolean" ? (
-                    <span class:list={["chip", f.value ? "teal" : ""]}>{f.value ? "On" : "Off"}</span>
-                  ) : f.kind === "select" ? (
-                    <select disabled>
-                      {(f.options ?? []).map((o) => (
-                        <option selected={o === f.value}>{o}</option>
-                      ))}
-                    </select>
-                  ) : (
-                    <input
-                      type="text"
-                      value={String(f.value)}
-                      readonly
-                      class:list={["checkout-input", { url: f.kind === "url" }]}
-                    />
-                  )}
-
-                  {f.resettable && f.source === "override" ? (
-                    <button class="btn ghost checkout-reset" type="button" title={`Reset to theme default: ${f.default}`}>
-                      Reset
-                    </button>
-                  ) : f.resettable ? (
-                    <span class="checkout-default-hint">= theme</span>
-                  ) : (
-                    <span class="checkout-default-hint">no theme default</span>
-                  )}
-                </div>
-
-                {f.help ? <p class="checkout-help">{f.help}</p> : null}
-              </div>
-            ))}
-          </div>
-        </section>
-      ))}
-
-      <p class="note checkout-seam">
-        <svg><use href="#i-alert"></use></svg>
-        Saving updates the managed checkout theme through the commerce service. That API hop is
-        not wired in this build.
-      </p>
-    </div>
-  )}
-</div>
-
-<style>
-  .checkout-head {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-  }
-  .checkout-group {
-    border-top: 1px solid var(--admin-line);
-    padding-top: 14px;
-    margin-top: 4px;
-  }
-  .checkout-group-head h4 {
-    margin: 0;
-    font-size: 13px;
-  }
-  .checkout-group-head p {
-    margin: 2px 0 12px;
-    color: var(--admin-muted);
-    font-size: 12px;
-  }
-  .checkout-fields {
-    display: grid;
-    gap: 14px;
-  }
-  .checkout-field {
-    display: grid;
-    gap: 6px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--admin-line);
-  }
-  .checkout-field:last-child {
-    border-bottom: 0;
-    padding-bottom: 0;
-  }
-  .checkout-field-label {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-  .checkout-field-label label {
-    font-size: 13px;
-    font-weight: 640;
-    color: var(--admin-ink);
-  }
-  .checkout-field-control {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-  }
-  .checkout-swatch {
-    width: 26px;
-    height: 26px;
-    border-radius: var(--admin-radius-sm);
-    border: 1px solid var(--admin-line-strong);
-    flex: none;
-  }
-  .checkout-input {
-    min-height: 34px;
-    padding: 0 10px;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-    min-width: 220px;
-  }
-  .checkout-input.url {
-    min-width: 340px;
-    font-family: ui-monospace, Menlo, monospace;
-    font-size: 12px;
-  }
-  .checkout-reset {
-    font-size: 12px;
-  }
-  .checkout-default-hint {
-    color: var(--admin-muted);
-    font-size: 11px;
-  }
-  .checkout-help {
-    margin: 0;
-    color: var(--admin-muted);
-    font-size: 12px;
-  }
-  .checkout-seam {
-    display: flex;
-    gap: 8px;
-    align-items: flex-start;
-    border-top: 1px solid var(--admin-line);
-    padding-top: 12px;
-  }
-  .checkout-seam code {
-    font-family: ui-monospace, Menlo, monospace;
-    font-size: 11px;
-  }
-</style>