@omega.js/extension 0.1.0

package/dist/assets/themes/base/_layouts/frontend/pages/payment/confirmation.html

@@ -0,0 +1,131 @@
+---
+layout: frontend/core/cover
+
+# ═══ Payment confirmation — reimagined 2026-07-16: the receipt moment.
+# Serif headline + ok-chip, the order as a RECEIPT panel (mono order id,
+# hairline rows), next steps as the numbered ritual, quiet support foot.
+# All web-manager bindings preserved (confirmation.order.*, subscription.*);
+# the celebration confetti rides the page JS as before.
+---
+
+<!-- Confirmation Section -->
+<section class="col-12 col-md-10 col-lg-8 col-xl-6 mw-md">
+  <div class="card omega-receipt">
+    <div class="card-body p-4 p-md-5">
+      <!-- The moment — one of three. The redirect is the provider's CLAIM;
+           entitlement is granted by the webhook, which lands after the browser
+           does, so the page opens in `processing` and only the confirmed block
+           is allowed to say the payment went through (#232). -->
+      <div class="text-center mb-5">
+        <!-- The wait is real work, so it MOVES: the chip holds the framework's
+             spinner idiom instead of a still clock (Ian's QA, 2026-08-15). A
+             reduced-motion visitor gets the same chip held still, labeled by
+             the headline and line below it (docs/shared/theming.md). -->
+        <div data-omega-bind="@show confirmation.verification.processing">
+          <span class="omega-icon-chip omega-icon-chip--neutral omega-icon-chip--lg mb-3">
+            <span class="spinner-border spinner-border-sm" role="status">
+              <span class="visually-hidden">Confirming your payment...</span>
+            </span>
+          </span>
+          <h1 class="omega-display omega-display--section mb-2">Confirming your <em>payment</em></h1>
+          <p class="omega-quiet mb-0">One moment while your payment finishes processing.</p>
+        </div>
+
+        <div data-omega-bind="@show confirmation.verification.confirmed" hidden>
+          <span class="omega-icon-chip omega-icon-chip--neutral omega-icon-chip--lg omega-receipt__check mb-3">
+            <i class="fa-solid fa-check fa-md"></i>
+          </span>
+          <h1 class="omega-display omega-display--section mb-2">You're <em>in</em>. Thank you!</h1>
+          <p class="omega-quiet mb-0">Payment received. A receipt is on its way to your inbox.</p>
+        </div>
+
+        <div data-omega-bind="@show confirmation.verification.timedOut" hidden>
+          <span class="omega-icon-chip omega-icon-chip--neutral omega-icon-chip--lg mb-3">
+            <i class="fa-solid fa-circle-exclamation fa-md"></i>
+          </span>
+          <h1 class="omega-display omega-display--section mb-2">Still <em>processing</em></h1>
+          <p class="omega-quiet mb-0">Your payment is taking longer than usual to confirm. Nothing is lost. If your account has not updated shortly, <a href="/contact">contact support</a> with the order number below.</p>
+        </div>
+      </div>
+
+      <!-- The receipt — part of the ANSWER, not of the wait. It starts hidden
+           and reveals with the confirmed (or timed-out) moment, so the order
+           numbers never sit on screen beside "Confirming your payment" (#232).
+           A timeout DOES reveal it: the order number is what support asks for. -->
+      <div class="omega-receipt__panel mb-5" data-omega-bind="@hide confirmation.verification.processing" hidden>
+        <div class="omega-receipt__row omega-binding-skeleton" data-omega-bind="@show confirmation">
+          <span class="omega-micro">Order</span>
+          <span class="font-monospace fw-semibold" data-omega-bind="@text confirmation.order.id">Loading...</span>
+        </div>
+
+        <div class="omega-receipt__row omega-binding-skeleton" data-omega-bind="@show confirmation">
+          <span class="omega-micro" data-omega-bind="@text confirmation.order.itemLabel">Plan</span>
+          <span class="fw-semibold" data-omega-bind="@text confirmation.order.productName">Loading...</span>
+        </div>
+
+        <div class="omega-receipt__row omega-receipt__row--total omega-binding-skeleton" data-omega-bind="@show confirmation">
+          <span class="omega-micro">Total paid</span>
+          <span class="omega-receipt__total" data-omega-bind="@text confirmation.order.total">$--</span>
+        </div>
+
+        <div data-omega-bind="@show confirmation.subscription.show" hidden>
+          <div class="omega-receipt__note small" data-omega-bind="@text confirmation.subscription.infoText"></div>
+        </div>
+
+        <!-- A one-time buy renews nothing, so it gets its own note instead of
+             the subscription sentence with empty cycle slots (#282) -->
+        <div data-omega-bind="@show confirmation.purchase.show" hidden>
+          <div class="omega-receipt__note small" data-omega-bind="@text confirmation.purchase.infoText"></div>
+        </div>
+      </div>
+
+      <!-- What happens now — the same claim in prose, so it waits with the receipt -->
+      <div class="mb-5" data-omega-bind="@hide confirmation.verification.processing" hidden>
+        <span class="omega-micro d-block mb-3">What happens now</span>
+        <div class="omega-rowlist">
+          <div class="omega-rowlist__item">
+            <span class="d-inline-flex align-items-center gap-3">
+              <span class="omega-icon-chip omega-icon-chip--neutral"><i class="fa-solid fa-envelope fa-sm"></i></span>
+              <span><strong>Your receipt lands by email</strong>, order confirmation included.</span>
+            </span>
+          </div>
+          <!-- "Your plan" is subscription language, so the row branches with
+               the notes above: plan copy for subscriptions, purchase copy for
+               a one-time buy (#282). Both gates already include `confirmed`. -->
+          <div class="omega-rowlist__item" data-omega-bind="@show confirmation.subscription.show" hidden>
+            <span class="d-inline-flex align-items-center gap-3">
+              <span class="omega-icon-chip omega-icon-chip--neutral"><i class="fa-solid fa-unlock fa-sm"></i></span>
+              <span><strong>Everything's unlocked</strong>: your plan is live in <a href="/dashboard/account">your account</a>.</span>
+            </span>
+          </div>
+          <div class="omega-rowlist__item" data-omega-bind="@show confirmation.purchase.show" hidden>
+            <span class="d-inline-flex align-items-center gap-3">
+              <span class="omega-icon-chip omega-icon-chip--neutral"><i class="fa-solid fa-unlock fa-sm"></i></span>
+              <span><strong>Everything's unlocked</strong>: your purchase is ready in <a href="/dashboard/account#orders">your orders</a>.</span>
+            </span>
+          </div>
+          <div class="omega-rowlist__item">
+            <span class="d-inline-flex align-items-center gap-3">
+              <span class="omega-icon-chip omega-icon-chip--neutral"><i class="fa-solid fa-headset fa-sm"></i></span>
+              <span><strong>Questions?</strong> <a href="/contact">Support</a> answers fast. Bring your order number.</span>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
+        <a href="/dashboard/account" class="btn btn-adaptive btn-lg w-100 w-sm-auto omega-hover-nudge">
+          Go to your account
+          <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+        </a>
+        <a href="/" class="btn btn-outline-adaptive btn-lg w-100 w-sm-auto">
+          <i class="fa-solid fa-house fa-sm me-2"></i>
+          Back to home
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ content | omega_content_format }}

package/dist/assets/themes/base/_layouts/frontend/pages/portal/email-preferences.html

@@ -0,0 +1,104 @@
+---
+layout: frontend/core/cover
+
+---
+
+<section class="col-12 col-md-8 col-lg-6 col-xl-5 mw-sm">
+  <div class="card">
+    <div class="card-body p-3 p-md-5">
+      <!-- Logo -->
+      <div class="text-center mb-3">
+        <div class="avatar avatar-xl">
+          {% comment %} #467: the VISIBLE lockup prefers the bridged vector when the mint produced one — `brand.images.brandmark` stays the raster OG/social and payment sync need. {% endcomment %}
+          <img src="{{ assetManifest.brandmarkSvg | default: resolved.config.brand.images.brandmark | omega_cachebreak }}" alt="{{ resolved.config.brand.name }} Logo"/>
+        </div>
+      </div>
+
+      <!-- Header -->
+      <div class="text-center mb-4">
+        <h1 class="omega-display omega-display--section mb-2">Email preferences</h1>
+        <p class="text-muted" id="email-preferences-description">Loading your preferences...</p>
+      </div>
+
+      <!-- Error state (hidden by default) -->
+      <div id="email-preferences-error" class="text-center" hidden>
+        <div class="alert alert-danger mb-4">
+          <i class="fa-solid fa-triangle-exclamation me-1"></i>
+          <span id="email-preferences-error-message">Invalid or missing parameters.</span>
+        </div>
+        <a href="/" class="btn btn-outline-adaptive">
+          <i class="fa-solid fa-arrow-left me-1"></i>
+          Back to home
+        </a>
+      </div>
+
+      <!-- Form (hidden until params are validated by JS) -->
+      <div id="email-preferences-content" hidden>
+        <!-- Email display -->
+        <div class="hairline rounded-3 p-3 mb-4 text-center">
+          <span class="omega-micro d-block mb-1">Managing preferences for</span>
+          <strong id="email-preferences-address" class="text-break"></strong>
+        </div>
+
+        <!-- Email preferences Form -->
+        <form id="email-preferences-form" autocomplete="off" data-form-state="initializing" onsubmit="return false">
+          <!-- Action selector — segmented (gliding thumb rides .active) -->
+          <div class="mb-4">
+            <div class="d-flex" role="group" aria-label="Email preference action" data-omega-segmented>
+              <button type="button" class="btn flex-fill active" data-action="unsubscribe">
+                <i class="fa-solid fa-bell-slash fa-sm me-1"></i>
+                Unsubscribe
+              </button>
+              <button type="button" class="btn flex-fill" data-action="resubscribe">
+                <i class="fa-solid fa-bell fa-sm me-1"></i>
+                Resubscribe
+              </button>
+            </div>
+          </div>
+
+          <!-- Info note (changes based on action) -->
+          <p class="omega-quiet small mb-4 d-flex align-items-start gap-2" id="email-preferences-info-unsubscribe">
+            <span class="omega-dot mt-1 flex-shrink-0"></span>
+            <span>You'll stop receiving emails of this type. Important account emails (receipts, security) still arrive.</span>
+          </p>
+          <p class="omega-quiet small mb-4 d-flex align-items-start gap-2" id="email-preferences-info-resubscribe" hidden>
+            <span class="omega-dot omega-dot--ok mt-1 flex-shrink-0"></span>
+            <span>You'll start receiving these emails again.</span>
+          </p>
+
+          <div class="mb-4 text-start">
+            <label for="email_confirm" class="form-label fw-semibold">
+              Confirm your email address <span class="text-danger">*</span>
+            </label>
+            <input type="email" class="form-control form-control-md" id="email_confirm" name="email_confirm"
+              placeholder="Type your email to confirm"
+              autocomplete="email"
+              autofocus
+              required>
+            <div class="invalid-feedback"></div>
+          </div>
+
+          <!-- Honeypot field (bot detection) -->
+          <div class="form-group mb-3" style="display: none;" aria-hidden="true">
+            <input type="text" class="form-control" name="honey" tabindex="-1" autocomplete="off">
+          </div>
+
+          <button type="submit" class="btn btn-adaptive w-100 mb-4" id="email-preferences-submit">
+            <i class="fa-solid fa-bell-slash fa-sm me-2"></i>
+            <span class="button-text">Unsubscribe</span>
+          </button>
+        </form>
+
+        <!-- Back to Home -->
+        <div class="mt-3 pt-3 hairline-top text-center">
+          <a href="/" class="btn btn-outline-adaptive btn-sm">
+            <i class="fa-solid fa-arrow-left fa-xs me-1"></i>
+            Back to home
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ content | omega_content_format }}