Mileage calculator script tag

mileage_calc.php

<script type="text/javascript">

  // hard-coded product id of mile rate woocommerce product
  let productId = 246;
  let map, auto;

  const v1_url = window.theme_bundle_data.rest_url + 'sim/cremation/shop/v1/';
  const v2_url = window.theme_bundle_data.rest_url + 'sim/cremation/shop/v2/';

  const v2_endpoints = {
    add: v2_url + 'cart/add',
    update: v2_url + 'cart/update'
  }

  const v1_endpoints = {
    refresh: v1_url + 'cart.html'
  };

  const fetch = (args) => Promise.resolve(jQuery.ajax(args))

  function showSpinner() {
    jQuery('#loading-anim').fadeIn()
  }
  function hideSpinner() {
    jQuery('#loading-anim').fadeOut()
  }

  function updateQuantity(product_id, quantity) {
    return fetch({
      url: `${v2_endpoints.update}?product_id=${product_id}&quantity=${quantity}`,
      cache: false,
      method: 'POST'
    })
  }
  function refreshCart() {
    return fetch({
      url: v1_endpoints.refresh,
      cache: false
    }).then(response => {
      return jQuery('aside.sidebar')
        .find('.sidebar-cart')
        .html(response.data)
    })
  }

  function initGM() {
    let input = document.querySelector(".gmaps_autocomplete input");
    auto = new google.maps.places.Autocomplete(input, {});
    auto.setFields(['geometry']),
    auto.addListener('place_changed', calcDistance);
  }

  // taken from https://www.movable-type.co.uk/scripts/latlong.html
  function distance(lat1, lng1, lat2, lng2) {
    const R = 3959; // radius of earth in miles
    let latDiff = radians(lat2-lat1);
    let lngDiff = radians(lng2-lng1)

    let a = Math.sin(latDiff/2) * Math.sin(latDiff/2) +
            Math.cos(radians(lat1)) * Math.cos(radians(lat2)) *
            Math.sin(lngDiff/2) * Math.sin(lngDiff/2);
    let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

    let d = R * c;
    return d;
  }
  function radians(deg) {
    return parseFloat(deg * (Math.PI / 180));
  }
  
  function calcDistance() {
    let { geometry: { location } } = auto.getPlace();
    let lat = location.lat();
    let lng = location.lng();
    let locationLat = 32.129047;
    let locationLng = -101.793159;
    let totalDistance = distance(lat, lng, locationLat, locationLng);

    updateCart(totalDistance);
  }

  async function updateCart(distance) {
    if (distance > 30) {
      showSpinner();
      await updateQuantity(productId, Math.ceil(distance) - 30);
      await refreshCart();
      hideSpinner();
      hideMileCount();
    } else {
      showSpinner();
      await updateQuantity(productId, 0);
      await refreshCart();
      hideSpinner();
    }
  }
  
  function hideMileCount() {
    let $ = jQuery;
    let $row = $('.cart_list.product_list_widget span[data-product_id='+productId+']').parent().parent();
    let $priceBox = $row.find('.tiny-4 span');
    let priceBoxText = $priceBox.text().trim().split(' ');
    let qty = priceBoxText[0];
    let price = priceBoxText[2].replace('$','');
    $priceBox.text(`$${(parseFloat(qty)*parseFloat(price)).toFixed(2)}`);
  }

  jQuery(document).ready(function() {
    hideMileCount();
  })

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo get_field('google_maps_api_key', 'option'); ?>&libraries=places&callback=initGM" async defer></script>