spree_backend 4.2.7 → 4.3.0.rc1

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

@@ -1,286 +1,51 @@
-/**
-This is a collection of javascript functions and whatnot
-under the spree namespace that do stuff we find helpful.
-Hopefully, this will evolve into a propper class.
-**/
-
-/* global AUTH_TOKEN, order_number, Sortable, flatpickr, DOMPurify */
-jQuery(function ($) {
-  // Add some tips
-  $('.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')
-  })
-
-  // 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')
-  }
-
-  modalBackdrop.click(closeAllMenus)
-
-  // Main Menu Functionality
-  var sidebarOpen    = $('#sidebar-open')
-  var sidebarClose   = $('#sidebar-close')
-  var activeItem     = $('#main-sidebar').find('.selected')
-
-  activeItem.closest('.nav-sidebar').addClass('active-option')
-  activeItem.closest('.nav-pills').addClass('in show')
-
-  function openMenu() {
-    closeAllMenus()
-    body.addClass('sidebar-open modal-open')
-    modalBackdrop.addClass('show')
-  }
-  sidebarOpen.click(openMenu)
-  sidebarClose.click(closeAllMenus)
-
-  // Contextual Sidebar Menu
-  var contextualSidebarMenuToggle = $('#contextual-menu-toggle')
-  var contextualSidebarMenuClose = $('#contextual-menu-close')
-
-  function toggleContextualMenu() {
-    if (document.body.classList.contains('contextualSideMenu-open')) {
-      closeAllMenus()
-    } else {
-      closeAllMenus()
-      body.addClass('contextualSideMenu-open modal-open')
-      modalBackdrop.addClass('show')
-    }
-  }
-  contextualSidebarMenuToggle.click(toggleContextualMenu)
-  contextualSidebarMenuClose.click(toggleContextualMenu)
-
-  // TODO: remove this js temp behaviour and fix this decent
-  // Temp quick search
-  // When there was a search term, copy it
-  $('.js-quick-search').val($('.js-quick-search-target').val())
-  // Catch the quick search form submit and submit the real form
-  $('#quick-search').submit(function () {
-    $('.js-quick-search-target').val($('.js-quick-search').val())
-    $('#table-filter form').submit()
-    return false
-  })
-
-  // Clickable ransack filters
-  $('.js-add-filter').click(function () {
-    var ransackField = $(this).data('ransack-field')
-    var ransackValue = $(this).data('ransack-value')
-
-    $('#' + ransackField).val(ransackValue)
-    $('#table-filter form').submit()
-  })
-
-  $(document).on('click', '.js-delete-filter', function () {
-    var ransackField = $(this).parents('.js-filter').data('ransack-field')
-
-    $('#' + ransackField).val('')
-    $('#table-filter form').submit()
-  })
-
-  function ransackField (value) {
-    switch (value) {
-      case 'Date Range':
-        return 'Start'
-      case '':
-        return 'Stop'
-      default:
-        return value.trim()
-    }
-  }
-
-  $('.js-filterable').each(function () {
-    var $this = $(this)
-
-    if ($this.val() !== null && $this.val() !== '' && $this.val().length !== 0 && !$this.hasClass('flatpickr-alt-input')) {
-      var ransackValue, filter
-      var ransackFieldId = $this.attr('id')
-      var label = $('label[for="' + ransackFieldId + '"]')
-
-      if ($this.is('select')) {
-        ransackValue = $this.find('option:selected').toArray().map(function (option) {
-          return option.text;
-        }).join(', ')
-      } else {
-        ransackValue = $this.val()
-      }
-
-      label = ransackField(label.text()) + ': ' + ransackValue
-      var cleanLabel = DOMPurify.sanitize(label)
-
-      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()
-    }
-  })
-
-  // per page dropdown
-  // preserves all selected filters / queries supplied by user
-  // changes only per_page value
-  $('.js-per-page-select').change(function () {
-    var form = $(this).closest('.js-per-page-form')
-    var url = form.attr('action')
-    var value = $(this).val().toString()
-    if (url.match(/\?/)) {
-      url += '&per_page=' + value
-    } else {
-      url += '?per_page=' + value
-    }
-    window.location = url
-  })
-
-  // injects per_page settings to all available search forms
-  // so when user changes some filters / queries per_page is preserved
-  $(document).ready(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 + ' />'
-      $('#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')
-  })
-}
-
-// 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="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)
-  }
-}
-
-// Apply to individual radio button that makes another element visible when checked
-$.fn.radioControlsVisibilityOfElement = function (dependentElementSelector) {
-  if (!this.get(0)) { return }
-  var showValue = this.get(0).value
-  var radioGroup = $("input[name='" + this.get(0).name + "']")
-  radioGroup.each(function () {
-    $(this).click(function () {
-      // eslint-disable-next-line eqeqeq
-      $(dependentElementSelector).visible(this.checked && this.value == showValue)
-    })
-    if (this.checked) { this.click() }
-  })
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-  flatpickr.setDefaults({
-    altInput: true,
-    time_24hr: true,
-    altInputClass: 'flatpickr-alt-input',
-    locale: Spree.translations.flatpickr_locale
-  })
-
-  var dateFrom = flatpickr('.datePickerFrom', {
-    onChange: function(selectedDates) {
-      dateTo.set('minDate', selectedDates[0])
-    }
-  })
-
-  var dateTo = flatpickr('.datePickerTo', {
-    onChange: function(selectedDates) {
-      dateFrom.set('maxDate', selectedDates[0])
-    }
-  })
-
-  flatpickr('.datepicker', { })
-})
+/* global order_number, show_flash */
 
 $(document).ready(function() {
+  /**
+    OBSERVE FIELD:
+  **/
   $('.observe_field').on('change', function() {
-    target = $(this).data('update')
+    var target = $(this).data('update')
     $(target).hide()
     $.ajax({
       dataType: 'html',
       url: $(this).data('base-url') + encodeURIComponent($(this).val()),
       type: 'GET'
-    }).done(function (data) {
+    }).done(function(data) {
       $(target).html(data)
       $(target).show()
     })
   })
 
+  /**
+    ADD FIELDS
+  **/
   var uniqueId = 1
-  $('.spree_add_fields').click(function () {
+  $('.spree_add_fields').click(function() {
     var target = $(this).data('target')
     var newTableRow = $(target + ' tr:visible:last').clone()
     var newId = new Date().getTime() + (uniqueId++)
-    newTableRow.find('input, select').each(function () {
+    newTableRow.find('input, select').each(function() {
       var el = $(this)
       el.val('')
       el.prop('id', el.prop('id').replace(/\d+/, newId))
       el.prop('name', el.prop('name').replace(/\d+/, newId))
     })
+
     // When cloning a new row, set the href of all icons to be an empty "#"
     // This is so that clicking on them does not perform the actions for the
     // duplicated row
-    newTableRow.find('a').each(function () {
+    newTableRow.find('a').each(function() {
       var el = $(this)
       el.prop('href', '#')
     })
     $(target).prepend(newTableRow)
   })
 
-  $('body').on('click', '.delete-resource', function () {
+  /**
+    DELETE RESOURCE
+  **/
+  $('body').on('click', '.delete-resource', function() {
     var el = $(this)
     if (confirm(el.data('confirm'))) {
       $.ajax({
@@ -294,14 +59,19 @@ $(document).ready(function() {
         complete: function() {
           el.blur()
         }
-      }).done(function () {
-        var $flash_element = $('.alert-success')
-        if ($flash_element.length) {
-          el.parents('tr').fadeOut('hide', function () {
+      }).done(function() {
+        var $flashElement = $('#FlashAlertsContainer span[data-alert-type="success"]')
+        if ($flashElement.length) {
+          el.parents('tr').fadeOut('hide', function() {
+            $(this).remove()
+          })
+          el.closest('.removable-dom-element').fadeOut('hide', function() {
             $(this).remove()
           })
+          var livePreview = document.getElementById('pageLivePreview')
+          if (livePreview) { livePreview.contentWindow.location.reload() }
         }
-      }).fail(function (response) {
+      }).fail(function(response) {
         show_flash('error', response.responseText)
       })
     } else {
@@ -310,8 +80,11 @@ $(document).ready(function() {
     return false
   })
 
-  $('body').on('click', 'a.spree_remove_fields', function () {
-    el = $(this)
+  /**
+    REMOVE FIELDS
+  **/
+  $('body').on('click', 'a.spree_remove_fields', function() {
+    var el = $(this)
     el.prev('input[type=hidden]').val('1')
     el.closest('.fields').hide()
     if (el.prop('href').substr(-1) === '#') {
@@ -324,72 +97,37 @@ $(document).ready(function() {
           _method: 'delete',
           authenticity_token: AUTH_TOKEN
         }
-      }).done(function () {
-        el.parents('tr').fadeOut('hide', function () {
+      }).done(function() {
+        el.parents('tr').fadeOut('hide', function() {
           $(this).remove()
         })
-      }).fail(function (response) {
+      }).fail(function(response) {
         show_flash('error', response.responseText)
       })
     }
     return false
   })
 
+  /**
+    SELECT PROPERTIES FROM PROTOTYPE
+  **/
   $('body').on('click', '.select_properties_from_prototype', function() {
     $('#busy_indicator').show()
-    var clicked_link = $(this)
+    var clickedLink = $(this)
     $.ajax({
       dataType: 'script',
-      url: clicked_link.prop('href'),
+      url: clickedLink.prop('href'),
       type: 'GET'
-    }).done(function () {
-      clicked_link.parent('td').parent('tr').hide()
+    }).done(function() {
+      clickedLink.parent('td').parent('tr').hide()
       $('#busy_indicator').hide()
     })
     return false
   })
 
-  // Sortable List Up-Down
-  var parentEl = document.getElementsByClassName("sortable")[0];
-  if (parentEl) {
-    var element = parentEl.querySelector('tbody')
-  }
-
-  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
+  /**
+    UTILITY
+  **/
   window.Spree.advanceOrder = function() {
     $.ajax({
       type: 'PUT',

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

@@ -28,13 +28,15 @@ function formatCustomerAddress(address, kind) {
   $('#order_' + kind + '_address_attributes_zipcode').val(address.zipcode)
   $('#order_' + kind + '_address_attributes_phone').val(address.phone)
   $('#order_' + kind + '_address_attributes_phone').val(address.phone)
-  $('#order_' + kind + '_address_attributes_country_id').val(address.country_id)
+  $('#order_' + kind + '_address_attributes_country_id').val(address.country.id)
   $('#order_' + kind + '_address_attributes_country_id').trigger('change')
 
   var stateSelect = $('#order_' + kind + '_address_attributes_state_id')
 
-  update_state(kind.charAt(0), function() {
-    stateSelect.val(address.state_id).trigger('change')
+  updateAddressState(kind.charAt(0), function() {
+    if (address.state) {
+      stateSelect.val(address.state.id).trigger('change')
+    }
   })
 }
 
@@ -64,27 +66,34 @@ function formatCustomerSelection(customer) {
 }
 
 $.fn.customerAutocomplete = function() {
+  var jsonApiUsers = {}
+
   this.select2({
     minimumInputLength: 3,
     placeholder: Spree.translations.choose_a_customer,
     ajax: {
-      url: Spree.routes.users_api,
+      url: Spree.routes.users_api_v2,
       datatype: 'json',
+      headers: Spree.apiV2Authentication(),
       data: function (params) {
         return {
-          q: {
+          filter: {
             'm': 'or',
-            email_start: params.term,
-            ship_address_firstname_start: params.term,
-            ship_address_lastname_start: params.term,
-            bill_address_firstname_start: params.term,
-            bill_address_lastname_start: params.term
+            email_i_cont: params.term,
+            addresses_firstname_start: params.term,
+            addresses_lastname_start: params.term
           },
-          token: Spree.api_key
+          include: 'ship_address.country,ship_address.state,bill_address.country,bill_address.state'
         }
       },
-      processResults: function (data) {
-        return { results: data.users }
+      success: function(data) {
+        var JSONAPIDeserializer = require('jsonapi-serializer').Deserializer
+        new JSONAPIDeserializer({ keyForAttribute: 'snake_case' }).deserialize(data, function (_err, users) {
+          jsonApiUsers = users
+        })
+      },
+      processResults: function (_data) {
+        return { results: jsonApiUsers } // we need to return deserialized json api data
       }
     },
     templateResult: formatCustomerResult

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

@@ -0,0 +1,4 @@
+//= require spree/backend/cms/page
+//= require spree/backend/cms/section
+//= require spree/backend/cms/links
+//= require spree/backend/cms/live_preview

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

@@ -0,0 +1,25 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const linkSwitcher = $('.link_switcher').select2()
+
+  linkSwitcher.on('change', function() {
+    const selectedLinkToValue = $(this).val()
+    const linkSwitcherTarget = this.dataset.targetField || 'menu_item_link'
+    const activePanel = document.querySelector(`div[data-panel-id='${linkSwitcherTarget}']`)
+    const messagePanel = document.querySelector(`div[data-target-message-pannel='${linkSwitcherTarget}']`)
+    const panelType = activePanel.dataset.panelType
+
+    if (selectedLinkToValue === panelType) {
+      activePanel.classList = ''
+      activePanel.classList.add('d-block')
+
+      messagePanel.classList = ''
+      messagePanel.classList.add('d-none')
+    } else {
+      activePanel.classList = ''
+      activePanel.classList.add('d-none')
+
+      messagePanel.classList = ''
+      messagePanel.classList.add('d-block')
+    }
+  })
+})

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

@@ -0,0 +1,34 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const LiveViewSwitcher = document.getElementById('LiveViewSwitcher')
+
+  if (!LiveViewSwitcher) return
+
+  LiveViewSwitcher.addEventListener('click', function(event) {
+    if (event.target && event.target.matches("input[type='radio']")) {
+      switchLiveViewClass(event.target.id)
+    }
+  })
+
+  function switchLiveViewClass(value) {
+    const liveViewCont = document.getElementById('liveViewCont')
+
+    liveViewCont.classList = ''
+    liveViewCont.classList.add(value)
+  }
+
+  const cmsSectionEditorFullScreen = document.getElementById('cmsSectionEditorFullScreen')
+
+  cmsSectionEditorFullScreen.addEventListener('click', function(event) {
+    if (this.getAttribute('aria-pressed') === 'true') {
+      document.body.removeAttribute('data-sections-editor-full-screen')
+    } else {
+      document.body.setAttribute('data-sections-editor-full-screen', '')
+    }
+  })
+
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+  const fullScreenMode = urlParams.get('section_editor_full_screen_mode')
+
+  if (fullScreenMode) cmsSectionEditorFullScreen.click()
+})

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

@@ -0,0 +1,133 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const pageVisabilityAttribute = document.querySelectorAll('[data-cms-page-id]')
+  const pageTypeSelector = document.getElementById('cms_page_type')
+  const el = document.getElementById('cmsPagesectionsArea')
+
+  if (pageTypeSelector) updateCmsPageType()
+
+  $(pageTypeSelector).on('change', function() { updateCmsPageType() })
+
+  if (el) {
+    Sortable.create(el, {
+      handle: '.move-handle',
+      ghostClass: 'moving-this',
+      animation: 550,
+      easing: 'cubic-bezier(1, 0, 0, 1)',
+      swapThreshold: 0.9,
+      forceFallback: true,
+      onEnd: function(evt) {
+        handleSectionReposition(evt)
+      }
+    })
+  }
+
+  pageVisabilityAttribute.forEach(function(elem) {
+    elem.addEventListener('change', function() {
+      handleTogglePageVisibility(this)
+    })
+  })
+})
+
+function handleTogglePageVisibility(obj) {
+  let checkedState = null
+  if (obj.checked) checkedState = true
+
+  const pageId = parseInt(obj.dataset.cmsPageId, 10)
+
+  const data = {
+    cms_page: {
+      visible: checkedState
+    }
+  }
+
+  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 toggleVisibilityState(obj) {
+  const statusHolder = document.getElementById('visibilityStatus')
+  const pageHidden = statusHolder.querySelector('.page_hidden')
+  const pageVisible = statusHolder.querySelector('.page_visible')
+
+  if (obj.checked) {
+    pageHidden.classList.add('d-none')
+    pageVisible.classList.remove('d-none')
+  } else {
+    pageVisible.classList.add('d-none')
+    pageHidden.classList.remove('d-none')
+  }
+}
+
+function reloadPreview() {
+  const liveLiewArea = document.getElementById('pageLivePreview')
+
+  if (!liveLiewArea) return
+
+  liveLiewArea.contentWindow.location.reload();
+}
+
+function handleSectionReposition(evt) {
+  const data = {
+    section_id: parseInt(evt.item.dataset.sectionId, 10),
+    new_position_idx: parseInt(evt.newIndex, 10)
+  }
+
+  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) })
+}
+
+function updateCmsPageType() {
+  const slugField = document.getElementById('cms_page_slug')
+  const updatePageType = document.getElementById('updatePageType')
+
+  if (!slugField) return
+
+  const selectedLinkType = $('#cms_page_type').val()
+
+  if (selectedLinkType === 'Spree::Cms::Pages::Homepage') {
+    slugField.disabled = true
+  } else {
+    slugField.disabled = false
+  }
+
+  if (!updatePageType) return
+
+  const existingType = updatePageType.dataset.pageType
+
+  if (selectedLinkType === existingType) {
+    updatePageType.classList.add('d-none')
+  } else {
+    updatePageType.classList.remove('d-none')
+  }
+}