webshop/static/js/checkout.js

import { updateCart, updateCartIcon, updateTable, displayProductSelectable, updateBreakdown } from './cart.js';


async function processForm(form) {
  // handle form by preventing default behaviour
  // and instead manipulate data appropriately:
  // - send form to backend via POST
  // - receive response and update DOM w/o hard-refresh

  form.addEventListener('submit', async(e) => {
    e.preventDefault();

    // -- update form data
    const data = await updateCart(form);

    // -- update cart icon
    updateCartIcon(data);

    // -- checkout: update item row
    const cart_items = data.cart_items;
    const cart_breakdown = data.cart_breakdown;
    const cart_item_rows = Array.from(document.querySelectorAll(".cart-table-row"));

    updateTable(cart_items, cart_item_rows, cart_breakdown);

    // -- product: display product availability
    if ('is_product_available' in data) {
      const isProductSelectable = data.is_product_selectable;
      const isProductAvailable = data.is_product_available;

      // -- product: display product availability
      const btnSubmit = document.querySelector('.btn-submit');

      displayProductSelectable(btnSubmit, isProductSelectable, isProductAvailable);
    }

    // update shipping cost on amount change
    const selectCountry = document.querySelector('select#country');
    const shipping_data = prepareShippingCost(selectCountry);
    if (shipping_data !== undefined) {
      const cart_breakdown_shipping = await updateShippingCost(shipping_data.country, shipping_data.weight, shipping_data.csrftoken);
	  updateBreakdown(cart_breakdown_shipping);
    };

  });
};

async function updateShippingCost(country, weight, csrftoken) {
  
  const formData = new FormData();
  formData.append("country", country);
  formData.append("weight", weight);
  formData.append("csrftoken", csrftoken);
  
  const res = await fetch("/checkout/shipping?js=true", {
    method: "POST",
    body: formData
  });

  if (res.ok) {
    return res.json();
  } else {
    return {status: res.status, error: res.statusText};
  }
}

function prepareShippingCost(selectCountry) {
  
  let weight = document.querySelector('.checkout-shipping-info > input[name="weight"]');
  if (weight !== undefined) {
    weight = Number(weight.value);
  }

  let csrftoken = '';
  const token = document.querySelector('.checkout-shipping-info > input[name="csrftoken"]');
  if (token !== undefined) {
    csrftoken = token.value;
  }

  let country = '';
  if (selectCountry.value !== '') {
    country = selectCountry.value; 
  }

  if (!isNaN(weight) && csrftoken !== '' && country !== '') {
    return {
      weight: weight,
      csrftoken: csrftoken,
      country: country,
    };
  }
}

async function setShippingCost() {
  // on page-load and
  // on select-country change,
  // get selected item and make a POST request
  // to calculate the shipping price + return it
  
  const selectCountry = document.querySelector('select#country');
  if (selectCountry !== undefined && selectCountry !== null) {

    // update shipping costs on page load
    const data = prepareShippingCost(selectCountry);
    if (data !== undefined) {
      const cart_breakdown = await updateShippingCost(data.country, data.weight, data.csrftoken);
      updateBreakdown(cart_breakdown);
    };
    
    // update shipping cost on select change
    selectCountry.addEventListener('change', async(e) => {
      const data = prepareShippingCost(selectCountry);
      if (data !== undefined) {
	const cart_breakdown = await updateShippingCost(data.country, data.weight, data.csrftoken);
	updateBreakdown(cart_breakdown);
      };
      
    });
  };
}

window.addEventListener('load', () => {
  ;(async() => {

    const forms = Array.from(document.querySelectorAll('.checkout-item'));
    await Promise.all(forms.map(async(form) => processForm(form)));

    await setShippingCost();
  })();
});