spree_backend 4.2.4 → 4.3.0.rc3

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')
+  }
+}

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

@@ -0,0 +1,43 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const sectionKindSelector = $('#cms_section_type').select2()
+  const layoutSwitcher = $('#cms_section_layout_style').select2()
+
+  sectionKindSelector.on('change', function() {
+    const selectedValue = $(sectionKindSelector).val()
+    const message = document.getElementById('alertToClickUpdate')
+    const activeSectionKind = document.getElementById('CmsSectionType')
+
+    if (!activeSectionKind) return
+
+    const panelType = activeSectionKind.dataset.panelSectionType
+
+    if (selectedValue === panelType) {
+      activeSectionKind.classList = ''
+      activeSectionKind.classList.add('d-block')
+
+      message.classList = ''
+      message.classList.add('d-none')
+    } else {
+      activeSectionKind.classList = ''
+      activeSectionKind.classList.add('d-none')
+
+      message.classList = ''
+      message.classList.add('d-block')
+    }
+  });
+
+  if (!layoutSwitcher) return
+
+  layoutSwitcher.on('change', function() {
+    const layoutDefault = document.querySelector('#Default')
+    const layoutReverse = document.querySelector('#Reversed')
+
+    if (this.value === 'Default') {
+      layoutDefault.classList = 'd-block'
+      layoutReverse.classList = 'd-none'
+    } else {
+      layoutDefault.classList = 'd-none'
+      layoutReverse.classList = 'd-block'
+    }
+  })
+})

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

@@ -0,0 +1,11 @@
+//= require spree/backend/global/alerts
+//= require spree/backend/global/bootstrap
+//= require spree/backend/global/flatpickr
+//= require spree/backend/global/ransack
+//= require spree/backend/global/info_alert
+//= require spree/backend/global/radio_panel_toggle
+//= require spree/backend/global/responsive_menus
+//= require spree/backend/global/select2_autocomplete
+//= require spree/backend/global/select2_populate
+//= require spree/backend/global/sortable
+//= require spree/backend/global/side_scroll_indication

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

@@ -0,0 +1,66 @@
+/* global Swal */
+
+document.addEventListener('DOMContentLoaded', function() {
+  const alertEl = document.querySelectorAll('[data-alert-type]')
+
+  if (!alertEl) return
+
+  alertEl.forEach(function (elem) {
+    const alertType = elem.dataset.alertType
+    const alertMessage = elem.innerHTML
+
+    show_flash(alertType, alertMessage)
+  })
+})
+
+// eslint-disable-next-line camelcase
+function show_flash(type, message) {
+  let sanitizedType = DOMPurify.sanitize(type)
+  const sanitizedMessage = DOMPurify.sanitize(message)
+
+  if (sanitizedType === 'notice') sanitizedType = 'info'
+
+  // Set up Swal toast alert defaults
+  const Toast = Swal.mixin({
+    toast: true,
+    position: 'bottom',
+    showConfirmButton: false,
+    showCloseButton: true,
+    timer: 4500,
+    timerProgressBar: false,
+    showClass: {
+      popup: 'animate__animated animate__fadeInUp animate__faster',
+      backdrop: '-',
+      icon: '-'
+    },
+    hideClass: {
+      popup: 'animate__animated animate__fadeOutDown animate__faster',
+      backdrop: '-',
+      icon: '-'
+    }
+  })
+
+  Toast.fire({
+    icon: sanitizedType,
+    title: sanitizedMessage
+  })
+
+  appendToFlashAlertsContainer(sanitizedMessage, sanitizedType)
+}
+
+function appendToFlashAlertsContainer (message, type) {
+  if (type === 'info') type = 'notice'
+
+  const parnetNode = document.querySelector('#FlashAlertsContainer')
+  const node = document.createElement('SPAN');
+  const textNode = document.createTextNode(message);
+
+  // Only the most recent alert should be left in the #FlashAlertsContainer.
+  parnetNode.innerHTML = ''
+
+  node.classList.add('d-none')
+  node.setAttribute('data-alert-type', type);
+  node.appendChild(textNode)
+
+  parnetNode.appendChild(node);
+}

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

@@ -0,0 +1,5 @@
+// eslint-disable-next-line no-unused-vars
+function spreeHandleApiRequestError (response) {
+  // eslint-disable-next-line no-undef
+  show_flash('error', `API Error: ${response}`)
+}

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

@@ -0,0 +1,15 @@
+// Use this file for Boostrap customization applied across the Spree Backend
+
+document.addEventListener('DOMContentLoaded', function() {
+  $('.with-tip').each(function() {
+    $(this).tooltip({
+      container: $(this)
+    })
+  })
+
+  $('.with-tip').on('show.bs.tooltip', function(event) {
+    if (('ontouchstart' in window)) {
+      event.preventDefault()
+    }
+  })
+})

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

@@ -0,0 +1,22 @@
+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', {})
+})

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

@@ -0,0 +1,38 @@
+/* global Swal */
+document.addEventListener('DOMContentLoaded', function() {
+  const infoToggle = document.querySelectorAll('[data-show-info]')
+
+  infoToggle.forEach(function(infoElem) {
+    infoElem.addEventListener('click', function() {
+      const alertType = infoElem.dataset.alertKind
+      const alertTitle = infoElem.dataset.alertTitle
+      const alertHtml = infoElem.dataset.alertHtml
+      const alertMessage = infoElem.dataset.alertMessage
+
+      showInfoAlert(alertType, alertTitle, alertMessage, alertHtml)
+    })
+  })
+})
+
+// eslint-disable-next-line no-unused-vars
+function showInfoAlert(type = null, title = null, message = null, html = null) {
+  const infoAlert = Swal.mixin({
+    showConfirmButton: false,
+    showCloseButton: true,
+    timer: null,
+    timerProgressBar: false,
+    showClass: {
+      popup: 'animate__animated animate__fadeInUp animate__faster'
+    },
+    hideClass: {
+      popup: 'animate__animated animate__fadeOutDown animate__faster'
+    }
+  })
+
+  infoAlert.fire({
+    icon: type,
+    title: title,
+    text: message,
+    html: html
+  })
+}