spree_backend 4.3.0 → 4.4.0

data/app/assets/javascripts/spree/backend/cms/page.es6

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   const pageVisabilityAttribute = document.querySelectorAll('[data-cms-page-id]')
   const pageTypeSelector = document.getElementById('cms_page_type')
   const el = document.getElementById('cmsPagesectionsArea')
@@ -32,32 +32,24 @@ function handleTogglePageVisibility(obj) {
   let checkedState = null
   if (obj.checked) checkedState = true
 
-  const pageId = parseInt(obj.dataset.cmsPageId, 10)
+  const pageId = obj.dataset.cmsPageId
 
   const data = {
     cms_page: {
       visible: checkedState
     }
   }
+  const requestData = {
+     uri: Spree.routes.pages_api_v2 + `/${pageId}`,
+     method: 'PATCH',
+     dataBody: data,
+  }
+  spreeFetchRequest(requestData, handleToggleSuccess)
 
-  fetch(Spree.routes.pages_api_v2 + `/${pageId}`, {
-    method: 'PATCH',
-    headers: {
-      Authorization: 'Bearer ' + OAUTH_TOKEN,
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(data)
-  })
-    .then(response => {
-      if (response.ok) {
-        reloadPreview()
-        toggleVisibilityState(obj)
-      } else {
-        // eslint-disable-next-line no-undef
-        spreeHandleApiRequestError(response)
-      }
-    })
-    .catch(err => { console.error(err) })
+  function handleToggleSuccess() {
+    toggleVisibilityState(obj)
+    reloadPreview()
+  }
 }
 
 function toggleVisibilityState(obj) {
@@ -83,28 +75,18 @@ function reloadPreview() {
 }
 
 function handleSectionReposition(evt) {
+  const sectionId = evt.item.dataset.sectionId
   const data = {
-    section_id: parseInt(evt.item.dataset.sectionId, 10),
-    new_position_idx: parseInt(evt.newIndex, 10)
+    cms_section: {
+      position: parseInt(evt.newIndex, 10) + 1
+    }
   }
-
-  fetch(Spree.routes.sections_api_v2 + '/reposition', {
-    method: 'PATCH',
-    headers: {
-      Authorization: 'Bearer ' + OAUTH_TOKEN,
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(data)
-  })
-    .then(response => {
-      if (response.ok) {
-        reloadPreview()
-      } else {
-        // eslint-disable-next-line no-undef
-        spreeHandleApiRequestError(response.status)
-      }
-    })
-    .catch(err => { console.error(err) })
+  const requestData = {
+     uri: `${Spree.routes.sections_api_v2}/${sectionId}`,
+     method: 'PATCH',
+     dataBody: data,
+  }
+  spreeFetchRequest(requestData, reloadPreview)
 }
 
 function updateCmsPageType() {

data/app/assets/javascripts/spree/backend/cms/section.es6

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   const sectionKindSelector = $('#cms_section_type').select2()
   const layoutSwitcher = $('#cms_section_layout_style').select2()
 

data/app/assets/javascripts/spree/backend/gateway.js

@@ -1,4 +1,4 @@
-$(function () {
+document.addEventListener("spree:load", function() {
   var originalGtwyType = $('#gtwy-type').prop('value')
   $('div#gateway-settings-warning').hide()
   $('#gtwy-type').change(function () {

data/app/assets/javascripts/spree/backend/general_settings.js

@@ -1,5 +1,5 @@
 /* global show_flash */
-$(function () {
+document.addEventListener("spree:load", function() {
   $('[data-hook=general_settings_clear_cache] #clear_cache').click(function () {
     if (confirm(Spree.translations.are_you_sure)) {
       $.ajax({

data/app/assets/javascripts/spree/backend/global/_index.js

@@ -1,5 +1,6 @@
 //= require spree/backend/global/alerts
-//= require spree/backend/global/bootstrap
+//= require spree/backend/global/animate_css
+//= require spree/backend/global/fetch_request_utility
 //= require spree/backend/global/flatpickr
 //= require spree/backend/global/ransack
 //= require spree/backend/global/info_alert
@@ -9,3 +10,4 @@
 //= require spree/backend/global/select2_populate
 //= require spree/backend/global/sortable
 //= require spree/backend/global/side_scroll_indication
+//= require spree/backend/global/tinymce

data/app/assets/javascripts/spree/backend/global/alerts.es6

@@ -1,6 +1,6 @@
 /* global Swal */
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   const alertEl = document.querySelectorAll('[data-alert-type]')
 
   if (!alertEl) return

data/app/assets/javascripts/spree/backend/global/animate_css.es6

@@ -0,0 +1,19 @@
+/* eslint-disable no-unused-vars */
+
+//
+// Handle clearing out of animation styles from complete animation.
+const animateCSS = (element, animation, speed, prefix = 'animate__') =>
+  new Promise((resolve) => {
+    const animationName = `${prefix}${animation}`
+    const node = document.querySelector(element)
+
+    node.classList.add(`${prefix}animated`, animationName, prefix + speed)
+
+    function handleAnimationEnd(event) {
+      event.stopPropagation()
+      node.classList.remove(`${prefix}animated`, animationName)
+      resolve('Animation ended')
+    }
+
+    node.addEventListener('animationend', handleAnimationEnd, { once: true })
+  })

data/app/assets/javascripts/spree/backend/global/fetch_request_utility.es6

@@ -0,0 +1,114 @@
+/* eslint-disable no-undef */
+/* eslint-disable no-unused-vars */
+
+//
+// Shows the progress bar on fech requests
+const showProgressIndicator = () => {
+  Turbo.navigator.delegate.adapter.progressBar.setValue(0)
+  Turbo.navigator.delegate.adapter.progressBar.show()
+}
+
+//
+// Hides the progress bar on fech requests
+const hideProgressIndicator = () => {
+  Turbo.navigator.delegate.adapter.progressBar.setValue(1)
+  Turbo.navigator.delegate.adapter.progressBar.hide()
+}
+
+//
+// Handles the fetch request response.
+// If the response has content it is returned, else if the response is a 204 no-content,
+// the resolved text is returned.
+const spreeHandleFetchRequestResponse = function(response) {
+  hideProgressIndicator()
+
+  if (response.status === 204) {
+    return response.text()
+  } else {
+    return response.json()
+  }
+}
+
+//
+// Handles fech request errors by triggering the appropriate flash alert type and displaying
+// the response message.
+const spreeHandleFetchRequestError = function(data) {
+  if (data.error != null) {
+    show_flash('error', data.error)
+  } else if (data.message != null) {
+    show_flash('success', data.message)
+  } else if (data.exception != null) {
+    show_flash('info', data.exception)
+  } else if (data.detail != null) {
+    show_flash('info', data.detail)
+  }
+}
+
+//
+// Reloads the window.
+const spreeWindowReload = function() {
+  window.location.reload()
+}
+
+//
+// SPREE FECTCH REQUEST
+// Pass a json object containing your fetch request details and settings, you can also send a second optional
+// argument, this second argument is your success response handler, and lastly a third argument that carries
+// through a target element to the response method if needed, the second and third arguments are optional.
+// When using spreeFetchRequest() the loading... progress bar, flash notice and errors are all handled for you.
+//
+// EXAMPLE SENDING A POST REQUEST TO CREATE A NEW SHIPMENT:
+//    const data = {
+//      order_id: 'H8213728798',
+//      variant_id: 2,
+//      quantity: 4,
+//      stock_location_id: 1
+//    }
+//
+//    const requestData = {
+//      // request details
+//      uri: Spree.routes.shipments_api_v2,
+//      method: 'POST',
+//      dataBody: data,
+//
+//   // Optional Settings
+//   // disableProgressIndicator: true,   Allows you to disable the progress loader bar if needed.
+//   // formatDataBody: false             If you have pre-formatted data, pass this option to stop the function performing the default stringify.
+//    }
+//    spreeFetchRequest(requestData, someCallbackFunction, this)
+//
+const spreeFetchRequest = function(requstData, success = null, target = null) {
+  if (!requstData.disableProgressIndicator === true) showProgressIndicator()
+
+  let requestDataBody
+
+  const requestUri = requstData.uri || null
+  const requestMethod = requstData.method || 'GET'
+  const requestContentType = requstData.ContentType || 'application/json'
+
+  if (requstData.formatDataBody === false) {
+    requestDataBody = requstData.dataBody
+  } else {
+    requestDataBody = JSON.stringify(requstData.dataBody) || null
+  }
+
+  if (requestUri == null) return
+
+  fetch(requestUri, {
+    method: requestMethod,
+    headers: {
+      'Authorization': 'Bearer ' + OAUTH_TOKEN,
+      'Content-Type': requestContentType
+    },
+    body: requestDataBody
+  })
+    .then((response) => spreeHandleFetchRequestResponse(response)
+      .then((data) => {
+        if (response.ok) {
+          if (success != null) success(data, target)
+        } else {
+          spreeHandleFetchRequestError(data)
+        }
+      }))
+    .catch(err => console.log(err))
+}

data/app/assets/javascripts/spree/backend/global/flatpickr.es6

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   flatpickr.setDefaults({
     altInput: true,
     time_24hr: true,
@@ -20,3 +20,10 @@ document.addEventListener('DOMContentLoaded', function() {
 
   flatpickr('.datepicker', {})
 })
+
+document.addEventListener("turbo:before-cache", function() {
+  document.querySelectorAll('.datePickerFrom, .datePickerTo, .datepicker').forEach(function(element) {
+    element._flatpickr.destroy()
+  })
+})
+

data/app/assets/javascripts/spree/backend/global/info_alert.es6

@@ -1,5 +1,5 @@
 /* global Swal */
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   const infoToggle = document.querySelectorAll('[data-show-info]')
 
   infoToggle.forEach(function(infoElem) {

data/app/assets/javascripts/spree/backend/global/radio_panel_toggle.es6

@@ -2,7 +2,7 @@
   radioControlsVisibilityOfElement:
   Apply to individual radio button that makes another element visible when checked
 **/
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   $.fn.radioControlsVisibilityOfElement = function(dependentElementSelector) {
     if (!this.get(0)) { return }
     var showValue = this.get(0).value

data/app/assets/javascripts/spree/backend/global/ransack.es6

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   const QuickSearchInput = document.getElementById('quick_search')
 
   if (QuickSearchInput) {
@@ -80,7 +80,7 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   })
 
-  // per page dropdown
+  // per page drop-down
   // preserves all selected filters / queries supplied by user
   // changes only per_page value
   $('.js-per-page-select').change(function() {
@@ -92,16 +92,18 @@ document.addEventListener('DOMContentLoaded', function() {
     } else {
       url += '?per_page=' + value
     }
-    window.location = url
+    Turbo.visit(url)
   })
 
   // injects per_page settings to all available search forms
   // so when user changes some filters / queries per_page is preserved
-  $(document).ready(function() {
+  document.addEventListener("spree:load", function() {
     var perPageDropdown = $('.js-per-page-select:first')
     if (perPageDropdown.length) {
       var perPageValue = perPageDropdown.val().toString()
-      var perPageInput = '<input type="hidden" name="per_page" value=' + perPageValue + ' />'
+      var perPageInput = '<input class="hidden_per_page_input" type="hidden" name="per_page" value=' + perPageValue + ' />'
+
+      $('.hidden_per_page_input').remove()
       $('#table-filter form').append(perPageInput)
     }
   })

data/app/assets/javascripts/spree/backend/global/responsive_menus.es6

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   var body = $('body')
   var modalBackdrop = $('#multi-backdrop')
 

data/app/assets/javascripts/spree/backend/global/select2_autocomplete.es6

@@ -8,23 +8,30 @@
 //  data-autocomplete-url-value="products_api_v2"
 
 //  OPTIONAL:
-//  data-autocomplete-placeholder-value="Seach Pages"     <- Sets the placeholder | DEFAULT is: 'Search'.
+//  data-autocomplete-placeholder-value="Search Pages"     <- Sets the placeholder | DEFAULT is: 'Search'.
 //  data-autocomplete-clear-value=boolean                 <- Allow select2 to be cleared | DEFAULT is: false (no clear button).
 //  data-autocomplete-multiple-value=boolean              <- Multiple or Single select | DEFAULT is: false (single).
 //  data-autocomplete-return-attr-value="pretty_name"     <- Return Attribute. | DEFAULT is: 'name'.
 //  data-autocomplete-min-input-value="4"                 <- Minimum input for search | DEFAULT is: 3.
 //  data-autocomplete-search-query-value="title_i_cont"   <- Custom search query | DEFAULT is: 'name_i_cont'.
 //  data-autocomplete-custom-return-id-value="permalink"  <- Return a custom attribute | DEFAULT: returns id.
-//  data-autocomplete-debug-mode-value=boolean            <- Turn on console loggin of data returned by the request.
+//  data-autocomplete-debug-mode-value=boolean            <- Turn on console login of data returned by the request.
 //
 //  Add your own custom URL params to the request as needed
 //  EXAMPLE:
 //  data-autocomplete-additional-url-params-value="filter[type_not_eq]=Spree::Cms::Pages::Homepage"
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   loadAutoCompleteParams()
 })
 
+// we need to delete select2 instances before document is saved to cache
+// https://stackoverflow.com/questions/36497723/select2-with-ajax-gets-initialized-several-times-with-rails-turbolinks-events
+document.addEventListener("turbo:before-cache", function() {
+  const select2Autocompletes = document.querySelectorAll('select[data-autocomplete-url-value]')
+  select2Autocompletes.forEach(element => $(element).select2('destroy'))
+})
+
 // eslint-disable-next-line no-unused-vars
 function loadAutoCompleteParams() {
   const select2Autocompletes = document.querySelectorAll('select[data-autocomplete-url-value]')
@@ -77,7 +84,7 @@ $.fn.select2Autocomplete = function(params) {
     // URL + Additional URL Params + Sparse Fields
     apiUrl = `${params.apiUrl}?${additionalUrlParams}&${sparseFields}`
   } else {
-    // URL + Sparse Fields (the default response for a noraml Select2)
+    // URL + Sparse Fields (the default response for a normal Select2)
     apiUrl = `${params.apiUrl}?${sparseFields}`
   }
 

data/app/assets/javascripts/spree/backend/global/select2_populate.es6

@@ -1,6 +1,6 @@
 /**
   populateSelectOptionsFromApi(params)
-  Allows you to easily fetch data from API (Platfrom v2) and populate an empty <select> with <option> tags, including a selected <option> tag.
+  Allows you to easily fetch data from API (Platform v2) and populate an empty <select> with <option> tags, including a selected <option> tag.
 
   ## EXAMPLE A
   # Populating a list of all taxons including a selected item
@@ -67,7 +67,7 @@ const updateSelectSuccess = function(parsedData, returnValueFromAttributes, retu
 
     if (returnValueFromAttributes == null) {
       optionEl.value = object.id
-      if (parseInt(selectedOption, 10) === parseInt(object.id, 10)) optionEl.selected = true
+      if (selectedOption === object.id) optionEl.selected = true
     } else {
       optionEl.value = object.attributes[returnValueFromAttributes]
       if (selectedOpt.value === object.attributes[returnValueFromAttributes]) {

data/app/assets/javascripts/spree/backend/global/side_scroll_indication.es6

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener("spree:load", function () {
   const navWrapper = document.querySelectorAll('[data-nav-x-wrapper]')
   navWrapper.forEach(el => initHorizontalNav(el))
 })
@@ -16,7 +16,7 @@ function initHorizontalNav (containerEl) {
   const navContent = navContainer.querySelector('[data-nav-x-content]')
   const activeNavItem = navContent.querySelector('.active')
 
-  // Trigger on DOMContentLoaded
+  // Trigger on spree:load
   setOverscrollIndicators()
 
   if (activeNavItem) focusActiveItem(navContainer, activeNavItem)

data/app/assets/javascripts/spree/backend/global/sortable.es6

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   var parentEl = document.getElementsByClassName('sortable')[0];
   if (parentEl) {
     var element = parentEl.querySelector('tbody')

data/app/assets/javascripts/spree/backend/global/tinymce.es6

@@ -1,5 +1,6 @@
-document.addEventListener('DOMContentLoaded', function() {
-  // eslint-disable-next-line no-undef
+document.addEventListener("spree:load", function() {
+  tinymce.remove() // Required for spree:load
+
   tinymce.init({
     selector: '.spree-rte',
     plugins: [

data/app/assets/javascripts/spree/backend/line_items.js

@@ -1,5 +1,5 @@
 /* global toggleItemEdit, order_number */
-$(function () {
+document.addEventListener("spree:load", function() {
   // handle edit click
   $('a.edit-line-item').click(toggleLineItemEdit)
   // handle cancel click
@@ -37,19 +37,19 @@ function toggleLineItemEdit () {
 
 function lineItemURL (lineItemId) {
   // eslint-disable-next-line camelcase
-  return Spree.routes.orders_api + '/' + order_number + '/line_items/' + lineItemId + '.json'
+  return Spree.routes.line_items_api_v2 + '/' + lineItemId
 }
 
 function adjustLineItem (lineItemId, quantity) {
   $.ajax({
-    type: 'PUT',
+    type: 'PATCH',
     url: Spree.url(lineItemURL(lineItemId)),
     data: {
       line_item: {
         quantity: quantity
-      },
-      token: Spree.api_key
-    }
+      }
+    },
+    headers: Spree.apiV2Authentication(),
   }).done(function () {
     window.Spree.advanceOrder()
   })
@@ -59,9 +59,7 @@ function deleteLineItem (lineItemId) {
   $.ajax({
     type: 'DELETE',
     url: Spree.url(lineItemURL(lineItemId)),
-    headers: {
-      'X-Spree-Token': Spree.api_key
-    }
+    headers: Spree.apiV2Authentication(),
   }).done(function () {
     $('#line-item-' + lineItemId).remove()
     if ($('.line-items tr.line-item').length === 0) {

data/app/assets/javascripts/spree/backend/line_items_on_order_edit.js

@@ -1,15 +1,15 @@
-/* global variantLineItemTemplate, order_number */
+/* global variantLineItemTemplate, order_number, order_id */
 // This file contains the code for interacting with line items in the manual cart
-$(document).ready(function () {
+document.addEventListener("spree:load", function() {
   'use strict'
 
   // handle variant selection, show stock level.
   $('#add_line_item_variant_id').change(function () {
-    var variantId = $(this).val()
+    var variantId = $(this).val().toString()
 
     var variant = _.find(window.variants, function (variant) {
       // eslint-disable-next-line eqeqeq
-      return variant.id == variantId
+      return variant.id.toString() == variantId
     })
     $('#stock_details').html(variantLineItemTemplate({ variant: variant }))
     $('#stock_details').show()
@@ -20,33 +20,28 @@ $(document).ready(function () {
 function addVariant () {
   $('#stock_details').hide()
   var variantId = $('select.variant_autocomplete').val()
-  var quantity = $('input#variant_quantity').val()
+  var quantity = parseInt($('input#variant_quantity').val())
 
-  adjustLineItems(order_number, variantId, quantity)
+  adjustLineItems(order_id, variantId, quantity)
   return 1
 }
 
-adjustLineItems = function(order_number, variant_id, quantity){
-    var url = Spree.routes.orders_api + '/' + order_number + '/line_items'
-
-    $.ajax({
-      type: 'POST',
-      url: Spree.url(url),
-      data: {
-        line_item: {
-          variant_id: variant_id,
-          quantity: quantity
-        },
-        token: Spree.api_key
-      }
-    }).done(function () {
-        window.Spree.advanceOrder()
-        window.location.reload()
-    }).fail(function (msg) {
-      if (typeof msg.responseJSON.message != 'undefined') {
-        alert(msg.responseJSON.message)
-      } else {
-        alert(msg.responseJSON.exception)
+adjustLineItems = function(order_id, variant_id, quantity){
+  $.ajax({
+    type: 'POST',
+    url: Spree.routes.line_items_api_v2,
+    data: {
+      line_item: {
+        order_id: order_id,
+        variant_id: variant_id,
+        quantity: quantity
       }
-    })
+    },
+    headers: Spree.apiV2Authentication()
+  }).done(function () {
+      window.Spree.advanceOrder()
+      window.location.reload()
+  }).fail(function (response) {
+    show_flash('error', response.responseJSON.error)
+  })
 }

data/app/assets/javascripts/spree/backend/menus/_index.es6

@@ -1,2 +1 @@
-//= require spree/backend/menus/menu
 //= require spree/backend/menus/menu_item

data/app/assets/javascripts/spree/backend/menus/menu_item.es6

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   const menuItemType = $('#menu_item_item_type').select2()
 
   updateContainerMessage()

data/app/assets/javascripts/spree/backend/multi_currency.js

@@ -1,6 +1,6 @@
 //= require spree/backend
 
-$(document).ready(function () {
+document.addEventListener("spree:load", function() {
   $.expr[':'].Contains = function (a, i, m) {
     return (
       (a.textContent || a.innerText || '')
@@ -32,7 +32,7 @@ $(document).ready(function () {
   }
 
   // ondomready
-  $(function () {
+  document.addEventListener("spree:load", function() {
     listFilter($('#variant-prices'))
   })
 })

data/app/assets/javascripts/spree/backend/option_type_autocomplete.js

@@ -24,7 +24,7 @@ $.fn.optionTypeAutocomplete = function () {
   })
 }
 
-$(document).ready(function () {
+document.addEventListener("spree:load", function() {
   var productOptionTypeSelector = document.getElementById('product_option_type_ids')
   if (productOptionTypeSelector == null) return
   if (productOptionTypeSelector.hasAttribute('data-autocomplete-url-value')) return

data/app/assets/javascripts/spree/backend/orders/edit.js

@@ -1,4 +1,4 @@
-$(document).ready(function () {
+document.addEventListener("spree:load", function() {
   'use strict'
   $('[data-hook="add_product_name"]').find('.variant_autocomplete').variantAutocomplete()
 })