ultimate-jekyll-manager 0.0.96 → 0.0.98

package/_backup/checkout copy 3.html

@@ -0,0 +1,376 @@
+---
+### ALL PAGES ###
+layout: themes/[ site.theme.id ]/frontend/core/cover
+
+### THEME CONFIG ###
+theme:
+  main:
+    align: "start"
+
+### WEB MANAGER CONFIG ###
+web_manager:
+  auth:
+    config:
+      policy: "authenticated"
+
+### PAGE CONFIG ###
+---
+
+<style>
+  /* Custom CSS Grid layout for desktop checkout */
+  @media (min-width: 992px) {
+    #checkout-form .row {
+      display: grid !important;
+      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+      gap: 2rem;
+      align-items: start;
+    }
+
+    /* Billing & Customer Info - Top left */
+    .checkout-billing {
+      grid-column: 1 !important;
+      grid-row: 1 !important;
+      max-width: 100% !important;
+      width: 100% !important;
+      flex: unset !important;
+    }
+
+    /* Order Summary - Right side, spans both rows */
+    .checkout-summary {
+      grid-column: 2 !important;
+      grid-row: 1 / span 2 !important;
+      margin-left: 0 !important;
+      max-width: 100% !important;
+      width: 100% !important;
+      flex: unset !important;
+      align-self: start !important;
+    }
+
+    /* Payment Method - Bottom left, directly under billing */
+    .checkout-payment {
+      grid-column: 1 !important;
+      grid-row: 2 !important;
+      margin-top: 0 !important;
+      max-width: 100% !important;
+      width: 100% !important;
+      flex: unset !important;
+    }
+  }
+</style>
+
+<!-- Fullscreen Preloader -->
+<div id="checkout-preloader" class="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-body" style="z-index: 9999;">
+  <div class="text-center">
+    <div class="spinner-border spinner-border-lg text-primary mb-3" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+    <h5 class="text-muted">Loading secure checkout...</h5>
+    <p class="text-muted small mb-0">Please be patient while your order is prepared.</p>
+  </div>
+</div>
+
+<!-- Error Message Container -->
+<div id="checkout-error-container" class="d-none">
+  <div class="row justify-content-center">
+    <div class="col-lg-8">
+      <div class="alert alert-danger" role="alert">
+        <h4 class="alert-heading">Oops! Something went wrong</h4>
+        <p id="checkout-error-message"></p>
+        <hr>
+        <button class="btn btn-outline-danger" onclick="window.location.reload()">
+          Try again
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Checkout Section -->
+<section id="checkout-content" class="col-12 col-xl-10 mw-xl">
+  <div class="row mb-4">
+    <div class="col-12">
+      <h1 class="h2 mb-0 text-center text-lg-start">Checkout</h1>
+    </div>
+  </div>
+  <div class="card border-0 shadow-lg">
+    <div class="card-body p-3 p-md-5">
+      <!-- Title Row -->
+      <!-- <div class="row mb-4">
+        <div class="col-12">
+          <h1 class="h2 mb-0 text-center text-lg-start">Checkout</h1>
+        </div>
+      </div> -->
+
+      <!-- Main Checkout Form -->
+      <form id="checkout-form" autocomplete="on" novalidate>
+        <!-- Content Row -->
+        <div class="row d-lg-flex">
+          <!-- Section 1: Billing Cycle & Customer Info -->
+          <div class="col-12 col-lg-7 mb-4 order-1 checkout-billing">
+            <!-- Billing Cycle Selection -->
+            <div class="_card _border-1 _border-secondary _shadow-sm mb-4">
+              <div class="card-body">
+                <h3 class="h5 fw-bold mb-3">Billing Cycle</h3>
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                  <h6 class="fw-bold mb-0">
+                    <span id="selected-plan-name">Loading...</span> Plan
+                  </h6>
+                  <a href="/pricing" class="small text-decoration-none">
+                    {% uj_icon "arrow-left", "me-1" %}
+                    Change plan
+                  </a>
+                </div>
+
+                <!-- Subscription Toggle (hidden by default) -->
+                <div id="subscription-toggle" class="d-none">
+                  <div class="row g-3">
+                    <div class="col-6">
+                      <input type="radio" class="btn-check" name="billing-cycle" id="annually" value="annually">
+                      <label class="btn btn-outline-secondary text-body w-100 p-3 position-relative border-2 rounded-3 _animation-hover-up" for="annually">
+                        <span id="savings-badge" class="position-absolute top-0 start-50 translate-middle badge rounded-pill bg-primary px-3 py-2">Save --</span>
+                        <div class="d-flex align-items-center justify-content-center mb-2">
+                          <span class="bg-secondary bg-opacity-25 text-secondary rounded-circle d-inline-flex align-items-center justify-content-center">
+                            {% uj_icon "check", "fa-md p-1" %}
+                          </span>
+                        </div>
+                        <div class="fs-4 mb-1">
+                          <span id="annually-price-lg">$--</span>
+                          <span class="text-muted fs-6 fw-normal">/mo</span>
+                        </div>
+                        <div class="text-muted small">Annual Plan</div>
+                      </label>
+                    </div>
+                    <div class="col-6">
+                      <input type="radio" class="btn-check" name="billing-cycle" id="monthly" value="monthly">
+                      <label class="btn btn-outline-secondary text-body w-100 p-3 border-2 rounded-3 _animation-hover-up" for="monthly">
+                        <div class="d-flex align-items-center justify-content-center mb-2">
+                          <span class="bg-secondary bg-opacity-25 text-secondary rounded-circle d-inline-flex align-items-center justify-content-center">
+                            {% uj_icon "check", "fa-md p-1" %}
+                          </span>
+                        </div>
+                        <div class="fs-4 mb-1">
+                          <span id="monthly-price-lg">$--</span>
+                          <span class="text-muted fs-6 fw-normal">/mo</span>
+                        </div>
+                        <div class="text-muted small">Monthly Plan</div>
+                      </label>
+                    </div>
+                  </div>
+
+                  <!-- Payment text under the boxes -->
+                  <div class="text-muted small text-center mt-2">
+                    * Pay <span class="mb-0" id="billing-cycle-payment-text">$-- monthly</span>
+                  </div>
+
+                  <!-- Free Trial Badge -->
+                  <div id="trial-badge" class="alert alert-success mt-3 mb-0 p-2 d-none">
+                    <small class="d-flex align-items-center mb-0">
+                      {% uj_icon "gift", "me-2" %}
+                      <span id="trial-message"></span>
+                    </small>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <hr>
+
+            <!-- Customer Information Card -->
+            <div class="_card _border-1 _border-secondary _shadow-sm mb-3">
+              <div class="card-body">
+                <h3 class="h5 fw-bold mb-3">Customer Information</h3>
+
+                <div class="text-start">
+                  Managing order for <strong data-wm-bind="@text auth.user.email"></strong>, <a href="#" id="switch-account">switch account</a>.
+                </div>
+
+                <!-- Customer form fields will go here when needed -->
+                <div id="customer-fields" class="text-start">
+                  <!-- Future form fields like shipping address, VAT number, etc. -->
+                  <!-- <div class="mb-3">
+                    <label for="customer-name" class="form-label fw-semibold">
+                      Name <span class="text-danger">*</span>
+                    </label>
+                    <input type="text" class="form-control form-control-md" id="customer-name" name="customer_name" placeholder="Enter your full name" autocomplete="name" required>
+                  </div> -->
+                </div>
+              </div>
+            </div>
+
+            <!-- HR separator (visible on desktop only) -->
+            <hr class="d-none d-lg-block">
+          </div>
+
+          <!-- Section 2: Order Summary -->
+          <div class="col-12 col-lg-5 mb-4 mb-lg-0 order-2 ms-lg-auto checkout-summary">
+            <div class="order-summary-sticky">
+              <div class="_card _border-1 _border-secondary _shadow-sm">
+                <div class="card-body">
+                  <h3 class="h5 fw-bold mb-3">Order Summary</h3>
+
+                  <!-- Product Item -->
+                  <div class="order-item mb-4">
+                    <div class="d-flex align-items-center">
+                      <div class="position-relative me-3">
+                        <div class="product-thumbnail bg-light rounded-3 d-flex align-items-center justify-content-center">
+                          <img src="{{ site.brand.images.brandmark }}?cb={{ site.uj.cache_breaker }}" class="img-fluid p-3" alt="{{ site.brand.name }} Plan Icon"/>
+                        </div>
+                        <span class="position-absolute badge rounded-pill bg-primary" style="top: -0.375rem; right: -0.375rem;">
+                          1
+                          <span class="visually-hidden">quantity</span>
+                        </span>
+                      </div>
+                      <div class="flex-grow-1 text-start">
+                        <h6 class="mb-1" id="product-name">Loading...</h6>
+                        <p class="text-muted small mb-0" id="product-description">Loading product details...</p>
+                      </div>
+                      <div class="text-end d-none">
+                        <div class="fw-bold" id="product-price">$--</div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Discount Code -->
+                  <div class="mb-4">
+                    <div class="input-group">
+                      <input type="text" class="form-control rounded-start-3 border py-2 px-3 text-start" id="discount-code" name="discount-code" placeholder="Discount code" autocomplete="off">
+                      <button class="btn btn-adaptive rounded-end-3 border px-4" type="button" id="apply-discount" data-action="apply-discount">Apply</button>
+                    </div>
+
+                    <!-- Discount Messages -->
+                    <div class="text-start">
+                      <div id="discount-message-loading" class="mt-2 text-primary small d-none">
+                        {% uj_icon "clock", "me-1" %} Checking code...
+                      </div>
+                      <div id="discount-message-success" class="mt-2 text-success small d-none">
+                        {% uj_icon "check-circle", "me-1" %} <span id="confirmation-text">Discount applied</span>
+                      </div>
+                      <div id="discount-message-error" class="mt-2 text-danger small d-none">
+                        {% uj_icon "times-circle", "me-1" %} <span id="error-text">Invalid discount code</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Price Breakdown -->
+                  <div>
+                    <div class="d-flex justify-content-between mb-2">
+                      <span class="text-muted">Subtotal</span>
+                      <span id="subtotal">$--</span>
+                    </div>
+
+                    <div class="d-flex justify-content-between mb-2 text-success d-none" id="discount-row">
+                      <span>Discount (<span id="discount-percent"></span>)</span>
+                      <span>-$<span id="discount-amount"></span></span>
+                    </div>
+
+                    <div class="d-flex justify-content-between mb-3 text-success d-none" id="trial-discount-row">
+                      <span>Free Trial Discount</span>
+                      <span>-$<span id="trial-discount-amount"></span></span>
+                    </div>
+
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                      <span class="fw-bold fs-5">Total Due Today</span>
+                      <span class="fw-bold fs-4" id="total-price">$--</span>
+                    </div>
+
+                    <hr class="my-3">
+
+                    <div class="d-flex justify-content-between align-items-center text-muted">
+                      <span>Recurring</span>
+                      <span id="recurring-amount">$-- <span id="recurring-period">monthly</span></span>
+                    </div>
+
+                    <!-- Subscription Terms -->
+                    <div id="subscription-terms" class="mt-3 rounded-3 small text-body-tertiary d-none text-start">
+                      <span id="terms-text"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Trust Badges -->
+              <div class="text-center mt-2">
+                <div class="d-flex justify-content-center align-items-center gap-3 text-muted">
+                  <a href="javascript:;" class="text-decoration-none btn-link" id="checkout-help-button">
+                    {% uj_icon "messages-question", "text-primary" %} Need help? Chat with us now!
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Section 3: Payment Method -->
+          <div class="col-12 col-lg-7 mb-4 order-3 checkout-payment">
+            <!-- Payment Method Card (Mobile position) -->
+            <div class="_card _border-1 _border-secondary _shadow-sm mb-0">
+              <div class="card-body">
+                <h3 class="h5 fw-bold mb-3">Payment Method</h3>
+
+                <!-- Direct Payment Buttons -->
+                <div class="d-grid gap-3">
+                  <!-- Credit/Debit Card Button -->
+                  <button type="submit" class="btn btn-adaptive btn-lg py-3 d-flex align-items-center justify-content-center" id="pay-with-card" data-payment-method="card" data-action="pay-card">
+                    {% uj_icon "credit-card", "me-2 fa-3xl" %}
+                    <span class="fw-semibold">Credit/Debit</span>
+                  </button>
+
+                  <!-- PayPal Button -->
+                  <button type="submit" class="btn btn-paypal btn-lg py-3 d-flex align-items-center justify-content-center" id="pay-with-paypal" data-payment-method="paypal" data-action="pay-paypal">
+                    <img src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-200px.png"
+                        alt="PayPal"
+                        height="28"
+                        style="max-height: 28px;">
+                  </button>
+
+                  <!-- Apple Pay Button (shown conditionally) -->
+                  <button type="submit" class="btn btn-dark btn-lg py-3 d-flex align-items-center justify-content-center d-none" id="pay-with-apple-pay" data-payment-method="apple-pay" data-action="pay-apple-pay">
+                    {% uj_icon "apple", "me-2 fa-3xl" %}
+                    <span class="fw-semibold">Apple Pay</span>
+                  </button>
+
+                  <!-- Google Pay Button (shown conditionally) -->
+                  <button type="submit" class="btn btn-outline-dark btn-lg py-3 d-flex align-items-center justify-content-center d-none" id="pay-with-google-pay" data-payment-method="google-pay" data-action="pay-google-pay">
+                    <img src="https://www.gstatic.com/instantbuy/svg/dark_gpay.svg"
+                        alt="Google Pay"
+                        height="24"
+                        class="me-2">
+                    <span class="fw-semibold">Google Pay</span>
+                  </button>
+
+                  <!-- Crypto Button -->
+                  <button type="submit" class="btn btn-outline-adaptive btn-lg py-3 d-flex align-items-center justify-content-center" id="pay-with-crypto" data-payment-method="crypto" data-action="pay-crypto">
+                    {% uj_icon "bitcoin", "me-2 fa-3xl" %}
+                    <span class="fw-semibold">Crypto</span>
+                  </button>
+
+                  <!-- Divider -->
+                  <!-- <div class="d-flex align-items-center my-2">
+                    <hr class="flex-grow-1">
+                    <span class="text-muted small px-3">or pay with cryptocurrency</span>
+                    <hr class="flex-grow-1">
+                  </div> -->
+
+                  <p class="text-muted small text-center mb-0">
+                    By purchasing, you agree to our <a href="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</a>.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Security badges -->
+            <div class="text-center mt-2">
+              <div class="d-flex justify-content-center align-items-center gap-3 small text-muted">
+                <span>{% uj_icon "shield-check", "text-success" %} Secure Checkout</span>
+                <span>{% uj_icon "lock", "text-success" %} SSL Encrypted</span>
+                <span>{% uj_icon "check-circle", "text-success" %} Money-back guarantee</span>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </form>
+    </div>
+  </div>
+</section>
+
+{{ content | uj_content_format }}