spree_backend 4.1.13 → 4.2.0.beta

data/app/assets/images/backend-update.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
+  <path fill="currentColor" d="M474.975 82.072c-5.79-5.77-15.123-5.77-20.874 0L173.92 362.589 58.76 247.27c-5.75-5.75-15.085-5.79-20.874 0-5.77 5.75-5.77 15.104 0 20.874l125.597 125.774c2.875 2.895 6.656 4.333 10.437 4.333 3.8 0 7.562-1.438 10.437-4.333l290.62-290.953c5.769-5.77 5.769-15.144 0-20.894z" fill-rule="nonzero" stroke="currentColor" stroke-width="24.024606"/>
+</svg>

data/app/assets/images/backend-user.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 512 512" stroke-linejoin="round">
+  <path fill="currentColor" d="M492.3 256c0-130.3-106-236.3-236.3-236.3 -130.3 0-236.3 106-236.3 236.3 0 66.6 27.8 126.8 72.3 169.8 1 1.4 2.3 2.5 3.7 3.4 42.2 39 98.4 63.1 160.2 63.1 61.9 0 118.1-24.1 160.2-63.1 1.4-0.9 2.7-2 3.7-3.4 44.5-43 72.3-103.2 72.3-169.8Zm-236.3-206.8c114 0 206.8 92.8 206.8 206.8 0 48.3-16.8 92.8-44.7 128 -12.8-41.3-49.4-73.7-99-88.5 27-19.6 44.7-51.3 44.7-87.1 0-59.4-48.3-107.6-107.8-107.6 -59.4 0-107.8 48.3-107.8 107.6 0 35.8 17.7 67.6 44.7 87.1 -49.6 14.9-86.2 47.2-99 88.5 -27.9-35.2-44.7-79.7-44.7-128 0-114 92.8-206.8 206.8-206.8Zm-78.2 159.1c0-43.1 35.1-78.1 78.3-78.1 43.2 0 78.3 35 78.3 78.1 0 43.1-35.1 78.1-78.2 78.1 -43.2 0-78.2-35-78.2-78.1Zm-59 201.9c4.4-54.2 61.9-94.2 137.2-94.2 75.4 0 132.8 40.1 137.2 94.2 -36.6 32.6-84.5 52.5-137.2 52.5 -52.7 0-100.7-20-137.2-52.5Z" style="stroke-width:10px;stroke:currentColor"/>
+</svg>

data/app/assets/images/backend-users.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
+  <g fill-rule="nonzero" stroke="currentColor" stroke-width="9.5">
+    <path fill="currentColor"  d="M401.722 230.445c23.142-14.24 38.654-39.707 38.654-68.787 0-44.569-36.308-80.829-80.932-80.829-44.623 0-80.932 36.26-80.932 80.829 0 29.08 15.512 54.547 38.655 68.787-49.972 11.194-85.037 41.775-85.037 78.782 0 30.285 80.031 38.366 127.314 38.366 47.283 0 127.314-8.081 127.314-38.366 0-37.007-35.065-67.588-85.036-78.782zm-106.538-68.787c0-35.375 28.83-64.156 64.26-64.156 35.43 0 64.26 28.781 64.26 64.156 0 35.376-28.83 64.151-64.26 64.151-35.43 0-64.26-28.775-64.26-64.151zm64.26 169.262c-67.969 0-108.655-14.338-110.637-21.749.052-36.777 49.666-66.689 110.637-66.689 60.965 0 110.575 29.907 110.636 66.678-1.932 7.406-42.622 21.76-110.636 21.76z"/>
+    <path fill="currentColor"  d="M218.769 305.288c26.479-15.872 44.227-44.258 44.227-76.67 0-49.677-41.543-90.092-92.599-90.092-51.056 0-92.599 40.415-92.599 90.092 0 32.412 17.748 60.798 44.227 76.67-57.175 12.477-97.294 46.562-97.294 87.811 0 33.755 91.567 42.762 145.666 42.762 54.099 0 145.666-9.007 145.666-42.762 0-41.249-40.119-75.334-97.294-87.811zm-121.895-76.67c0-39.429 32.986-71.509 73.523-71.509s73.523 32.08 73.523 71.509c0 39.43-32.986 71.503-73.523 71.503s-73.523-32.073-73.523-71.503zm73.523 188.66c-77.767 0-124.318-15.982-126.585-24.242.059-40.991 56.825-74.331 126.585-74.331 69.753 0 126.514 33.333 126.584 74.319-2.21 8.254-48.766 24.254-126.584 24.254z"/>
+  </g>
+</svg>

data/app/assets/images/backend-view.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
+  <path fill="currentColor" d="M256 192c0 35.328-28.672 64-64 64 0 35.328 28.672 64 64 64s64-28.672 64-64-28.672-64-64-64zm0-128C124.736 64 0 212.736 0 256c0 43.264 124.736 192 256 192s256-148.736 256-192c0-43.264-124.736-192-256-192zm0 320c-70.688 0-128-57.312-128-128s57.312-128 128-128 128 57.312 128 128-57.312 128-128 128z" fill-rule="nonzero"/>
+</svg>
+
+
+<!-- To give Spree backwards compatability this file is duplicated in the following SVG files -->
+  <!-- VIEW EYE-OPEN -->
+<!-- If you update this file, be sure to make the same changes in all of the files above -->

data/app/assets/images/backend-void.svg

@@ -0,0 +1,7 @@
+<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"  style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(5.37908e-15,-16.6134,-16.6134,-5.37908e-15,470.536,472.199)">
+        <path d="M14.061,12.927L24.78,23.646C25.073,23.939 25.073,24.414 24.78,24.707C24.487,25 24.013,25 23.72,24.707L13,13.987L2.28,24.707C1.987,25 1.513,25 1.22,24.707C0.927,24.414 0.927,23.939 1.22,23.646L11.939,12.927L1.22,2.207C0.927,1.914 0.927,1.439 1.22,1.146C1.366,1 1.558,0.927 1.75,0.927C1.942,0.927 2.134,1 2.28,1.146L13,11.866L23.72,1.146C23.866,1 24.058,0.927 24.25,0.927C24.442,0.927 24.634,1 24.78,1.146C25.073,1.439 25.073,1.914 24.78,2.207L14.061,12.927Z" style="fill-rule:nonzero;stroke:currentColor;stroke-width:2.05px;"/>
+    </g>
+</svg>
+
+<!-- CANCEL CLOSE VOID-->

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

@@ -1,13 +1,15 @@
 //= require modernizr
+//= require purify
+//= require sortable
+//= require flatpickr
 //= require jquery3
 //= require popper
 //= require bootstrap-sprockets
 //= require handlebars
+//= require cleave
 //= require js.cookie
 //= require jquery.jstree/jquery.jstree
 //= require jquery_ujs
-//= require jquery-ui/widgets/datepicker
-//= require jquery-ui/widgets/sortable
 //= require jquery-ui/widgets/autocomplete
 //= require select2
 //= require underscore-min.js
@@ -24,6 +26,7 @@
 //= require spree/backend/handlebar_extensions
 //= require spree/backend/line_items
 //= require spree/backend/line_items_on_order_edit
+//= require spree/backend/multi_currency
 //= require spree/backend/option_type_autocomplete
 //= require spree/backend/option_value_picker
 //= require spree/backend/orders/edit

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

@@ -4,74 +4,83 @@ under the spree namespace that do stuff we find helpful.
 Hopefully, this will evolve into a propper class.
 **/
 
-/* global Cookies, AUTH_TOKEN, order_number */
+/* global AUTH_TOKEN, order_number, Sortable, flatpickr, DOMPurify */
+
+//= require spree/backend/flatpickr_locals
 
 jQuery(function ($) {
   // Add some tips
-  $('.with-tip').tooltip()
+  $('.with-tip').each(function() {
+    $(this).tooltip({
+      container: $(this)
+    })
+  })
+
+  $('.with-tip').on('show.bs.tooltip', function(event) {
+    if (('ontouchstart' in window)) {
+      event.preventDefault()
+    }
+  })
 
   $('.js-show-index-filters').click(function () {
     $('.filter-well').slideToggle()
     $(this).parents('.filter-wrap').toggleClass('collapsed')
-    $('span.icon', $(this)).toggleClass('icon-chevron-down')
   })
 
-  $('#main-sidebar').find('[data-toggle="collapse"]').on('click', function () {
-    if ($(this).find('.icon-chevron-left').length === 1) {
-      $(this).find('.icon-chevron-left').removeClass('icon-chevron-left').addClass('icon-chevron-down')
-    } else {
-      $(this).find('.icon-chevron-down').removeClass('icon-chevron-down').addClass('icon-chevron-left')
-    }
-  })
-
-  // Sidebar nav toggle functionality
-  var sidebar_toggle = $('#sidebar-toggle')
+  // Responsive Menus
+  var body  = $('body')
+  var modalBackdrop  = $('#multi-backdrop')
+
+  // Fail safe on resize
+  var resizeTimer;
+  window.addEventListener('resize', function () {
+    document.body.classList.remove('modal-open', 'sidebar-open', 'contextualSideMenu-open');
+    document.body.classList.add('resize-animation-stopper');
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function () {
+      document.body.classList.remove('resize-animation-stopper');
+    }, 400);
+  });
+
+  function closeAllMenus() {
+    body.removeClass()
+    body.addClass('admin')
+    modalBackdrop.removeClass('show')
+  }
 
-  sidebar_toggle.on('click', function() {
-    var wrapper = $('#wrapper')
-    var main    = $('#main-part')
-    var sidebar = $('#main-sidebar')
-    var version = $('.spree-version')
-    var collapsed = sidebar.find('[aria-expanded="true"]')
-    var collapsedIcons = sidebar.find('.icon-chevron-down')
+  modalBackdrop.click(closeAllMenus)
 
-    wrapper.toggleClass('sidebar-minimized')
+  // Main Menu Functionality
+  var sidebarOpen    = $('#sidebar-open')
+  var sidebarClose   = $('#sidebar-close')
+  var activeItem     = $('#main-sidebar').find('.selected')
 
-    collapsed
-      .attr('aria-expanded', 'false')
-      .next()
-      .removeClass('show')
+  activeItem.closest('.nav-sidebar').addClass('active-option')
+  activeItem.closest('.nav-pills').addClass('in show')
 
-    collapsedIcons
-      .removeClass('icon-chevron-down')
-      .addClass('icon-chevron-left')
+  function openMenu() {
+    closeAllMenus()
+    body.addClass('sidebar-open modal-open')
+    modalBackdrop.addClass('show')
+  }
+  sidebarOpen.click(openMenu)
+  sidebarClose.click(closeAllMenus)
 
-    // these should match `spree/backend/app/helpers/spree/admin/navigation_helper.rb#main_part_classes`
-    main
-      .toggleClass('col-12 sidebar-collapsed')
-      .toggleClass('col-9 offset-3 col-md-10 offset-md-2')
+  // Contextual Sidebar Menu
+  var contextualSidebarMenuToggle = $('#contextual-menu-toggle')
+  var contextualSidebarMenuClose = $('#contextual-menu-close')
 
-    if (wrapper.hasClass('sidebar-minimized')) {
-      Cookies.set('sidebar-minimized', 'true', { path: '/admin' })
-      version.removeClass('d-md-block')
+  function toggleContextualMenu() {
+    if (document.body.classList.contains('contextualSideMenu-open')) {
+      closeAllMenus()
     } else {
-      Cookies.set('sidebar-minimized', 'false', { path: '/admin' })
-      version.addClass('d-md-block')
-    }
-  })
-
-  $('.sidebar-menu-item').mouseover(function () {
-    if ($('#wrapper').hasClass('sidebar-minimized')) {
-      $(this).addClass('menu-active')
-      $(this).find('ul.nav').addClass('submenu-active')
+      closeAllMenus()
+      body.addClass('contextualSideMenu-open modal-open')
+      modalBackdrop.addClass('show')
     }
-  })
-  $('.sidebar-menu-item').mouseout(function () {
-    if ($('#wrapper').hasClass('sidebar-minimized')) {
-      $(this).removeClass('menu-active')
-      $(this).find('ul.nav').removeClass('submenu-active')
-    }
-  })
+  }
+  contextualSidebarMenuToggle.click(toggleContextualMenu)
+  contextualSidebarMenuClose.click(toggleContextualMenu)
 
   // TODO: remove this js temp behaviour and fix this decent
   // Temp quick search
@@ -84,28 +93,6 @@ jQuery(function ($) {
     return false
   })
 
-  // Main menu active item submenu show
-  var active_item = $('#main-sidebar').find('.selected')
-  active_item.closest('.nav-pills').addClass('in show')
-  active_item.closest('.nav-sidebar')
-    .find('.icon-chevron-left')
-    .removeClass('icon-chevron-left')
-    .addClass('icon-chevron-down')
-
-  // Replace ▼ and ▲ in sort_link with nicer icons
-  $('.sort_link').each(function () {
-    // Remove the &nbsp in the text
-    var sortLinkText = $(this).text().replace('\xA0', '')
-
-    if (sortLinkText.indexOf('▼') >= 0) {
-      $(this).text(sortLinkText.replace('▼', ''))
-      $(this).append('<span class="icon icon-chevron-down"></span>')
-    } else if (sortLinkText.indexOf('▲') >= 0) {
-      $(this).text(sortLinkText.replace('▲', ''))
-      $(this).append('<span class="icon icon-chevron-up"></span>')
-    }
-  })
-
   // Clickable ransack filters
   $('.js-add-filter').click(function () {
     var ransackField = $(this).data('ransack-field')
@@ -148,8 +135,9 @@ jQuery(function ($) {
       }
 
       label = ransackField(label.text()) + ': ' + ransackValue
+      var cleanLabel = DOMPurify.sanitize(label)
 
-      filter = '<span class="js-filter badge badge-secondary" data-ransack-field="' + ransackFieldId + '">' + label + '<span class="icon icon-delete js-delete-filter"></span></span>'
+      filter = '<span class="js-filter badge badge-secondary" data-ransack-field="' + ransackFieldId + '">' + cleanLabel + '<i class="icon icon-cancel ml-2 js-delete-filter"></i></span>'
       $(".js-filters").append(filter).show()
     }
   })
@@ -179,20 +167,46 @@ jQuery(function ($) {
       $('#table-filter form').append(perPageInput)
     }
   })
+})
+
+function handleAlert (element) {
+  element.classList.add('animate__animated', 'animate__bounceInUp')
+  element.addEventListener('animationend', function () {
+    element.classList.remove('animate__bounceInUp')
+    element.classList.add('animate__fadeOutDownBig', 'animate__delay-3s')
+  })
+}
 
-  // Make flash messages disappear
-  setTimeout(function () { $('.alert-auto-disappear').slideUp() }, 5000)
+// Triggers alert if required on document ready.
+$(document).ready(function () {
+  var element = document.querySelector('.flash-alert')
+
+  if (element) {
+    handleAlert(element)
+  }
 })
 
 $.fn.visible = function (cond) { this[ cond ? 'show' : 'hide' ]() }
+// Triggers alerts when requested by javascript.
 // eslint-disable-next-line camelcase
 function show_flash (type, message) {
+  var cleanMessage = DOMPurify.sanitize(message)
+  var existingAlert = document.querySelector('.flash-alert')
+
+  if (existingAlert) {
+    existingAlert.remove()
+  }
+
   var flashDiv = $('.alert-' + type)
   if (flashDiv.length === 0) {
-    flashDiv = $('<div class="alert alert-' + type + '" />')
-    $('#content').prepend(flashDiv)
+    flashDiv = $('<div class="d-flex justify-content-center position-fixed flash-alert">' +
+                 '<div class="alert alert-' + type + ' mx-2">' + cleanMessage + '</div></div>')
+
+    $('body').append(flashDiv)
+
+    var ajaxFlashNotfication = document.querySelector('.flash-alert')
+    handleAlert(ajaxFlashNotfication)
   }
-  flashDiv.html(message).show().delay(10000).slideUp()
 }
 
 // Apply to individual radio button that makes another element visible when checked
@@ -208,31 +222,34 @@ $.fn.radioControlsVisibilityOfElement = function (dependentElementSelector) {
     if (this.checked) { this.click() }
   })
 }
-// eslint-disable-next-line camelcase
-function handle_date_picker_fields () {
-  $('.datepicker').datepicker({
+
+document.addEventListener('DOMContentLoaded', function() {
+  var dateFrom = flatpickr('.datePickerFrom', {
+    time_24hr: true,
     dateFormat: Spree.translations.date_picker,
-    dayNames: Spree.translations.abbr_day_names,
-    dayNamesMin: Spree.translations.abbr_day_names,
-    firstDay: Spree.translations.first_day,
-    monthNames: Spree.translations.month_names,
-    prevText: Spree.translations.previous,
-    nextText: Spree.translations.next,
-    showOn: 'focus',
-    showAnim: ''
+    monthSelectorType: 'static',
+    onChange: function(selectedDates) {
+      dateTo.set('minDate', selectedDates[0])
+    }
   })
 
-  // Correctly display range dates
-  $('.date-range-filter .datepicker-from').datepicker('option', 'onSelect', function (selectedDate) {
-    $('.date-range-filter .datepicker-to').datepicker('option', 'minDate', selectedDate)
+  var dateTo = flatpickr('.datePickerTo', {
+    monthSelectorType: 'static',
+    time_24hr: true,
+    dateFormat: Spree.translations.date_picker,
+    onChange: function(selectedDates) {
+      dateFrom.set('maxDate', selectedDates[0])
+    }
   })
-  $('.date-range-filter .datepicker-to').datepicker('option', 'onSelect', function (selectedDate) {
-    $('.date-range-filter .datepicker-from').datepicker('option', 'maxDate', selectedDate)
+
+  flatpickr('.datepicker', {
+    monthSelectorType: 'static',
+    time_24hr: true,
+    dateFormat: Spree.translations.date_picker
   })
-}
+})
 
-$(document).ready(function(){
-  handle_date_picker_fields()
+$(document).ready(function() {
   $('.observe_field').on('change', function() {
     target = $(this).data('update')
     $(target).hide()
@@ -277,7 +294,10 @@ $(document).ready(function(){
           _method: 'delete',
           authenticity_token: AUTH_TOKEN
         },
-        dataType: 'script'
+        dataType: 'script',
+        complete: function() {
+          el.blur()
+        }
       }).done(function () {
         var $flash_element = $('.alert-success')
         if ($flash_element.length) {
@@ -288,6 +308,8 @@ $(document).ready(function(){
       }).fail(function (response) {
         show_flash('error', response.responseText)
       })
+    } else {
+      el.blur()
     }
     return false
   })
@@ -317,7 +339,7 @@ $(document).ready(function(){
     return false
   })
 
-  $('body').on('click', '.select_properties_from_prototype', function(){
+  $('body').on('click', '.select_properties_from_prototype', function() {
     $('#busy_indicator').show()
     var clicked_link = $(this)
     $.ajax({
@@ -331,60 +353,47 @@ $(document).ready(function(){
     return false
   })
 
-  // Fix sortable helper
-  var fixHelper = function (e, ui) {
-    ui.children().each(function () {
-      $(this).width($(this).width())
-    })
-    return ui
+  // Sortable List Up-Down
+  var parentEl = document.getElementsByClassName("sortable")[0];
+  if (parentEl) {
+    var element = parentEl.querySelector('tbody')
   }
 
-  $('table.sortable').ready(function () {
-    var tdCount = $(this).find('tbody tr:first-child td').length
-    $('table.sortable tbody').sortable(
-      {
-        handle: '.handle',
-        helper: fixHelper,
-        placeholder: 'ui-sortable-placeholder',
-        update: function(event, ui) {
-          var tbody = this
-          $('#progress').show()
-          var positions = { authenticity_token: AUTH_TOKEN }
-          $.each($('tr', tbody), function(position, obj) {
-            reg = /spree_(\w+_?)+_(\d+)/
-            parts = reg.exec($(obj).prop('id'))
-            if (parts) {
-              positions['positions[' + parts[2] + ']'] = position + 1
-            }
-          })
-          $.ajax({
-            type: 'POST',
-            dataType: 'script',
-            url: $(ui.item).closest('table.sortable').data('sortable-link'),
-            data: positions
-          }).done(function () {
-            $('#progress').hide()
-          })
-        },
-        start: function (event, ui) {
-          // Set correct height for placehoder (from dragged tr)
-          ui.placeholder.height(ui.item.height())
-          // Fix placeholder content to make it correct width
-          ui.placeholder.html("<td colspan='" + (tdCount - 1) + "'></td><td class='actions'></td>")
-        },
-        stop: function (event, ui) {
-          // Fix odd/even classes after reorder
-          $('table.sortable tr:even').removeClass('odd even').addClass('even')
-          $('table.sortable tr:odd').removeClass('odd even').addClass('odd')
-        }
-
-      })
-  })
+  if (element) {
+    Sortable.create(element, {
+      handle: '.move-handle',
+      animation: 550,
+      ghostClass: 'bg-light',
+      dragClass: "sortable-drag-v",
+      easing: 'cubic-bezier(1, 0, 0, 1)',
+      swapThreshold: 0.9,
+      forceFallback: true,
+      onEnd: function (evt) {
+        var itemEl = evt.item
+        var positions = { authenticity_token: AUTH_TOKEN }
+        $.each($('tr', element), function(position, obj) {
+          reg = /spree_(\w+_?)+_(\d+)/
+          parts = reg.exec($(obj).prop('id'))
+          if (parts) {
+            positions['positions[' + parts[2] + ']'] = position + 1
+          }
+        })
+        $.ajax({
+          type: 'POST',
+          dataType: 'json',
+          url: $(itemEl).closest('table.sortable').data('sortable-link'),
+          data: positions
+        })
+      }
+    })
+  }
 
+  // Close notifications
   $('a.dismiss').click(function () {
     $(this).parent().fadeOut()
   })
 
+  // Utility
   window.Spree.advanceOrder = function() {
     $.ajax({
       type: 'PUT',