=DashboardManager overhaul. A bit easier to modify the output of pages. Sti...

Jake Vanderwerf

2026-06-29 4089ba01e0881c89a72332e13bc3a80b6bddec2a

 assets/js/concise/Checkout.js

@@ -15,6 +15,7 @@
class Checkout {
   constructor(config = {}) {
      this.config = config;
      this.isActive = false;

      this.isInitialized = false;
      this.cartItems     = new Map();
@@ -22,8 +23,11 @@
      this.provider      = this.checkout?.querySelector('form')?.dataset.provider || '';

      this.isOpen        = this.config.isOpen === '1' || false;
      //TODO: Remove this.
      this.isOpen = true;

      this.api = `${jvbSettings.api}${this.provider}/`;

      this.isLoggedIn    = this.config.is_logged_in || false;
      this.userEmail     = this.config.user_email || '';
      this.savedCards    = [];
@@ -43,7 +47,8 @@
         this.initListeners();
         this.defineTemplates();

         if (this.isLoggedIn) {
         if (this.isLoggedIn && this.isActive) {
            console.log('Loading saved cards');
            this.loadSavedCards();
         }
      }
@@ -184,6 +189,7 @@
   initElements() {
      this.restoreElement = false;
      this.selectors = {
         pass: '#magic-link-form a[data-tab]',
         toggle: {
            btn: '.toggle-cart',
            count: '.toggle-cart .count',
@@ -192,7 +198,13 @@
         panels: {
            checkout: {
               toggle: 'button[data-tab="checkout"]',
               form: '#cart form'
               form: 'form#checkout'
            },
            order: {
               toggle: 'button[data-tab="order"]',
            },
            login: {
               pass: 'button[data-tab="login"]',
            }
         },
         cart: {
@@ -206,8 +218,8 @@
               total: '#cart tfoot .total',
               tax: '#cart tfoot .tax',
            },
            grandTotal: '#cart .total span',
            tax: '#cart .cart-total .tax span',
            // grandTotal: '#cart .total span',
            // tax: '#cart .cart-total .tax span',
         }
      };
      this.ui = window.uiFromSelectors(this.selectors);
@@ -218,9 +230,8 @@
         this.ui.toggle.btn.title    = 'Currently closed for online ordering';
      }

      this.checkoutForm  = this.checkout.querySelector('form');

      this.tabs = window.jvbTabs.registerTab(this.checkoutForm, {
      this.tabs = window.jvbTabs.registerTab(this.checkout, {
         updateURL: false
      });
   }
@@ -230,7 +241,7 @@
      this.keyHandler    = this.handleEscape.bind(this);
      this.changeHandler = this.handleChange.bind(this);

      this.checkoutForm.addEventListener('submit', (e) => this.handleFormSubmit(e));
      this.ui.panels.checkout.form?.addEventListener('submit', (e) => this.handleFormSubmit(e));
      document.addEventListener('click', this.clickHandler);
      document.addEventListener('change', this.changeHandler);
      // document.addEventListener('keydown', this.keyHandler);
@@ -241,7 +252,10 @@
    *****************************************************************/

   handleClick(e) {
      if (window.targetCheck(e, 'button') && window.targetCheck(e, 'div.quantity')) {
      if (e.target === this.ui.pass) {
         e.preventDefault();
         window.jvbTabs.switchTab('login', window.jvbTabs.getConfig(this.ui.panels.login.pass));
      } else if (window.targetCheck(e, 'button') && window.targetCheck(e, 'div.quantity')) {
         let quantity = window.targetCheck(e, 'div.quantity');
         this.handleNumberClick(e, quantity);
      } else if (window.targetCheck(e, '[data-add-to-cart]') && window.targetCheck(e, 'button')) {
@@ -511,13 +525,16 @@
         this.ui.panels.checkout.toggle.title    = 'Add some things to your cart first!';
         this.ui.cart.empty.hidden = false;
         this.ui.cart.table.hidden = true;
         this.ui.cart.total.hidden = true;
         // this.ui.cart.total.hidden = true;
         this.a11y.announce('Nothing in Cart');
      } else {
         this.ui.cart.empty.hidden = true;
         this.ui.panels.checkout.toggle.disabled       = false;
         this.ui.panels.checkout.toggle.disabled       = !this.isActive;
         if (!this.isActive) {
            this.ui.panels.checkout.toggle.title = 'We\'re experiencing technical difficulties. Try calling or coming in person.';
         }
         this.ui.cart.table.hidden = false;
         this.ui.cart.total.hidden                  = false;
         // this.ui.cart.total.hidden                  = false;
         this.ui.panels.checkout.toggle.title           = 'Checkout';
      }
   }
@@ -563,13 +580,14 @@
      let total = 0;
      this.cartItems.forEach(item => total += item.total);
      let tax = total * 0.05;
      window.eraseText(this.ui.cart.tax);
      // window.eraseText(this.ui.cart.tax);
      window.eraseText(this.ui.cart.foot.tax);
      window.eraseText(this.ui.cart.foot.total);
      window.typeText(this.ui.cart.foot.tax, window.formatPrice(tax));
      window.typeText(this.ui.cart.grandTotal, window.formatPrice(total + tax));
      // window.typeText(this.ui.cart.grandTotal, window.formatPrice(total + tax));
      window.typeText(this.ui.cart.foot.total, window.formatPrice(total + tax));
      this.ui.cart.tax.classList.remove('typeText');
      this.ui.cart.foot.tax.classList.remove('typeText');
      this.ui.cart.foot.total.classList.remove('typeText');
   }

   /*****************************************************************
@@ -614,13 +632,10 @@
      const orderData = this.extractOrderData(form);

      try {
         window.jvbLoading?.showLoading?.('Processing payment...');
         const result = await this.processPayment(orderData);
         this.handleSuccess(result, form);
      } catch (error) {
         this.handleError(error);
      } finally {
         window.jvbLoading?.hideLoading?.();
      }
   }

@@ -631,7 +646,7 @@
   trackOrder(orderNum) {
      this.orderId = orderNum;
      this.scheduleOrderCheck();
      this.checkout.querySelector('button[data-tab=order]').hidden = false;
      this.ui.panels.order.toggle.hidden = false;
   }

   scheduleOrderCheck() {
@@ -643,9 +658,7 @@
   }

   async checkOrderStatus() {
      const response = await fetch(`${this.config.api_url}order-status/${this.orderId}`, {
         headers: { 'X-WP-Nonce': this.config.nonce }
      });
      const response = await window.auth.fetch(`${this.api}order-status/${this.orderId}`, );
      const data = await response.json();
      if (data.status !== 'ready') {
         this.scheduleOrderCheck();
@@ -670,6 +683,7 @@
      const container = document.getElementById('saved-cards');
      if (!container || this.savedCards.length === 0) return;

      console.log('Yup');
      const html = `
         <div class="saved-cards-section">
            <h4>Saved Payment Methods</h4>