modules/SmOS_CC/checkout.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta id="meta-theme-color" name="theme-color" content="#070707">
  <script>
    (function () {
      try {
        var k = "hah-restaurant-theme";
        var t = localStorage.getItem(k);
        var th = t === "light" ? "light" : "dark";
        document.documentElement.setAttribute("data-theme", th);
        var meta = document.getElementById("meta-theme-color");
        if (meta) meta.setAttribute("content", th === "light" ? "#f6f3ee" : "#070707");
      } catch (e) {
        document.documentElement.setAttribute("data-theme", "dark");
      }
    })();
  </script>
  <title>HAH restaurant | Checkout</title>
  <link rel="icon" type="image/svg+xml" href="assets/logo-c.svg">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap">
  <link rel="stylesheet" href="styles.css?v=13">
</head>
<body>
  <div class="app-shell">
    <header class="app-header">
      <a class="app-back" data-back-order href="order.html">← Back to order</a>
      <button type="button" class="theme-toggle" data-theme-toggle aria-label="Switch theme" title="Theme">
        <svg class="theme-icon theme-icon-sun" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <circle cx="12" cy="12" r="4"/>
          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
        </svg>
        <svg class="theme-icon theme-icon-moon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
        </svg>
      </button>
    </header>

    <main class="app-main" data-checkout>
      <div class="app-hero">
        <p class="app-hero__eyebrow"><span data-order-service>Order</span> · Checkout</p>
        <h1 class="app-hero__title">Checkout</h1>
        <p class="app-hero__lead" data-checkout-lead>Complete your order details below.</p>
      </div>

      <section class="checkout-block" data-checkout-hide-on-done>
        <h2 class="checkout-heading">Order summary</h2>
        <ul class="checkout-lines" data-checkout-lines></ul>
        <p class="checkout-total">Total <strong data-checkout-total>£0.00</strong></p>
        <p class="checkout-ref">Order ID <strong data-checkout-ref>—</strong></p>
      </section>

      <section class="checkout-block" data-checkout-pay data-checkout-hide-on-done>
        <h2 class="checkout-heading" data-checkout-pay-title>Payment</h2>
        <p class="checkout-intro" data-checkout-pay-intro hidden></p>
        <div class="pay-options" data-pay-options role="radiogroup" aria-label="Payment method"></div>
        <div class="pay-detail" data-pay-detail hidden></div>
      </section>

      <section class="checkout-block" data-checkout-details data-checkout-hide-on-done>
        <h2 class="checkout-heading">Your details</h2>
        <form class="checkout-form" data-checkout-form>
          <label class="checkout-field">
            <span>Name</span>
            <input type="text" name="name" required autocomplete="name">
          </label>
          <fieldset class="res-confirm-via" data-confirm-via>
            <legend>Order confirmation <em class="field-optional">(optional)</em></legend>
            <label class="pay-option">
              <input type="radio" name="confirm_via" value="none" checked data-confirm-via-opt>
              <span class="pay-option__body">
                <span class="pay-option__name">No confirmation</span>
              </span>
            </label>
            <label class="pay-option">
              <input type="radio" name="confirm_via" value="email" data-confirm-via-opt>
              <span class="pay-option__body">
                <span class="pay-option__name">Email</span>
                <input type="email" name="email" autocomplete="email" data-confirm-email placeholder="you@example.com" aria-label="Email address" hidden disabled>
              </span>
            </label>
            <label class="pay-option">
              <input type="radio" name="confirm_via" value="phone" data-confirm-via-opt>
              <span class="pay-option__body">
                <span class="pay-option__name">Phone</span>
                <input type="tel" name="phone" autocomplete="tel" data-confirm-phone placeholder="Mobile number" aria-label="Phone number" hidden disabled>
              </span>
            </label>
          </fieldset>
          <label class="checkout-field checkout-field--check">
            <input type="checkbox" name="want_receipt" value="1" data-want-receipt>
            <span>Send me a receipt after payment</span>
          </label>
          <p class="pay-hint" data-receipt-contact-hint hidden>Choose Email or Phone above and enter your details so we can send the receipt.</p>
          <div class="checkout-field" data-field-address hidden>
            <span>Delivery address</span>
            <div class="addr-lookup" data-addr-lookup>
              <div class="addr-lookup__row">
                <input
                  type="text"
                  class="addr-lookup__postcode"
                  data-addr-postcode
                  placeholder="Postcode"
                  autocomplete="postal-code"
                  inputmode="text"
                  spellcheck="false"
                  aria-label="Postcode">
                <button type="button" class="addr-lookup__find" data-addr-find>Find address</button>
              </div>
              <p class="pay-hint" data-addr-status hidden></p>
              <ul class="addr-lookup__list" data-addr-list hidden role="listbox" aria-label="Addresses"></ul>
              <textarea
                name="address"
                rows="3"
                data-addr-value
                autocomplete="street-address"
                placeholder="Select an address from the list, or type it here"
                hidden></textarea>
              <button type="button" class="addr-lookup__manual" data-addr-manual hidden>Enter address manually</button>
            </div>
          </div>
          <label class="checkout-field" data-field-table hidden>
            <span>Table ID</span>
            <select name="table_id">
              <option value="">Select table…</option>
            </select>
          </label>
          <label class="checkout-field">
            <span>Notes (optional)</span>
            <textarea name="notes" rows="2" placeholder="Allergies, doorbell, special requests…"></textarea>
          </label>
          <button type="submit" class="checkout-submit" data-place-order disabled>Place order</button>
          <p class="checkout-gate-hint" data-place-hint hidden></p>
        </form>
      </section>

      <section class="checkout-done" data-checkout-done hidden>
        <h2 class="checkout-heading">Order placed</h2>
        <p class="checkout-done__lead" data-done-lead></p>
        <div class="pay-detail pay-detail--done" data-done-pay></div>
        <div class="checkout-receipt-actions" data-done-receipt hidden>
          <button type="button" class="checkout-submit" data-download-receipt>Download / print receipt</button>
          <p class="pay-hint" data-receipt-send-note hidden></p>
        </div>
        <a class="checkout-submit checkout-submit--link" href="./">Back to start</a>
      </section>
    </main>
  </div>
  <script src="admin-config.js?v=1" defer></script>
  <script src="smos-api.js?v=6" defer></script>
  <script src="reservation-config.js?v=4" defer></script>
  <script src="receipt.js?v=1" defer></script>
  <script src="payments-config.js?v=11" defer></script>
  <script src="app.js?v=24" defer></script>
</body>
</html>