spree_backend 4.1.1 → 4.5.0

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

@@ -1,6 +1,6 @@
 /* global variantTemplate */
 // variant autocompletion
-$(function () {
+document.addEventListener("spree:load", function() {
   var variantAutocompleteTemplate = $('#variant_autocomplete_template')
   if (variantAutocompleteTemplate.length > 0) {
     window.variantTemplate = Handlebars.compile(variantAutocompleteTemplate.text())
@@ -9,53 +9,62 @@ $(function () {
   }
 })
 
-function formatVariantResult (variant) {
-  if (variant['images'][0] !== undefined && variant['images'][0].mini_url !== undefined) {
-    variant.image = variant.images[0].mini_url
+function formatVariantResult(variant) {
+  if (variant.loading) {
+    return variant.text
   }
-  return variantTemplate({
+
+  if (variant['images'][0] !== undefined && variant['images'][0].transformed_url !== undefined) {
+    variant.image = variant.images[0].transformed_url
+  }
+  return $(variantTemplate({
     variant: variant
-  })
+  }))
 }
 
 $.fn.variantAutocomplete = function () {
+
+  // deal with initSelection
   return this.select2({
     placeholder: Spree.translations.variant_placeholder,
     minimumInputLength: 3,
-    initSelection: function (element, callback) {
-      return $.get(Spree.routes.variants_api + '/' + element.val(), {
-        token: Spree.api_key
-      }).done(function (data) {
-        return callback(data)
-      })
-    },
+    quietMillis: 200,
     ajax: {
-      url: Spree.url(Spree.routes.variants_api),
-      quietMillis: 200,
-      datatype: 'json',
-      data: function (term) {
-        return {
-          q: {
-            product_name_or_sku_cont: term
+      url: Spree.url(Spree.routes.variants_api_v2),
+      dataType: 'json',
+      data: function (params) {
+        var query = {
+          filter: {
+            search_by_product_name_or_sku: params.term
           },
-          token: Spree.api_key
+          include: 'images,stock_items.stock_location',
+          image_transformation: {
+            size: '100x100'
+          }
         }
+
+        return query;
       },
-      results: function (data) {
-        window.variants = data['variants']
-        return {
-          results: data['variants']
-        }
+      headers: Spree.apiV2Authentication(),
+      success: function(data) {
+        var JSONAPIDeserializer = require('jsonapi-serializer').Deserializer
+        new JSONAPIDeserializer({ keyForAttribute: 'snake_case' }).deserialize(data, function (_err, variants) {
+          jsonApiVariants = variants
+          window.variants = variants
+        })
+      },
+      processResults: function (_data) {
+        return { results: jsonApiVariants } // we need to return deserialized json api data
       }
     },
-    formatResult: formatVariantResult,
-    formatSelection: function (variant) {
-      // eslint-disable-next-line no-extra-boolean-cast
+    templateResult: formatVariantResult,
+    templateSelection: function(variant) {
       if (!!variant.options_text) {
-        return Select2.util.escapeMarkup(variant.name + '(' + variant.options_text + ')')
+        return variant.name + '(' + variant.options_text + ')'
       } else {
-        return Select2.util.escapeMarkup(variant.name)
+        return variant.name
       }
     }
   })
+
 }

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

@@ -1,4 +1,4 @@
-$(function () {
+document.addEventListener("spree:load", function() {
   $('.track_inventory_checkbox').on('click', function () {
     $(this).siblings('.variant_track_inventory').val($(this).is(':checked'))
     $(this).parents('form').submit()
@@ -7,7 +7,8 @@ $(function () {
     $.ajax({
       type: this.method,
       url: this.action,
-      data: $(this).serialize()
+      data: $(this).serialize(),
+      dataType: 'json'
     })
     return false
   })

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

@@ -1,4 +1,4 @@
-$(function () {
+document.addEventListener("spree:load", function() {
   var countryBased = $('#country_based')
   var stateBased = $('#state_based')
   countryBased.click(show_country)

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

@@ -1,16 +1,17 @@
-//= require modernizr
+//= require purify
+//= require sortable
 //= require jquery3
-//= require popper
-//= require bootstrap-sprockets
 //= require handlebars
-//= require js.cookie
-//= require jquery.jstree/jquery.jstree
+//= require cleave
 //= require jquery_ujs
-//= require jquery-ui/widgets/datepicker
-//= require jquery-ui/widgets/sortable
 //= require jquery-ui/widgets/autocomplete
-//= require select2
+//= require select2-full
+//= require sweetalert2
+//= require tinymce
 //= require underscore-min.js
+//= require jsonapi-serializer.min
+
+//= require spree/backend/global/_index
 
 //= require spree
 //= require spree/backend/spree-select2
@@ -20,10 +21,10 @@
 //= require spree/backend/calculator
 //= require spree/backend/checkouts/edit
 //= require spree/backend/gateway
-//= require spree/backend/general_settings
 //= 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
@@ -32,6 +33,8 @@
 //= require spree/backend/product_picker
 //= require spree/backend/progress
 //= require spree/backend/promotions
+//= require spree/backend/cms/_index
+//= require spree/backend/menus/_index
 //= require spree/backend/returns/expedited_exchanges_warning
 //= require spree/backend/returns/return_item_selection
 //= require spree/backend/shipments
@@ -41,41 +44,44 @@
 //= require spree/backend/stock_movement
 //= require spree/backend/stock_transfer
 //= require spree/backend/taxon_autocomplete
-//= require spree/backend/taxon_permalink_preview
-//= require spree/backend/taxon_tree_menu
-//= require spree/backend/taxonomy
 //= require spree/backend/taxons
 //= require spree/backend/users/edit
 //= require spree/backend/user_picker
-//= require spree/backend/tag_picker
 //= require spree/backend/variant_autocomplete
 //= require spree/backend/variant_management
 //= require spree/backend/zone
 
-Spree.routes.clear_cache = Spree.adminPathFor('general_settings/clear_cache')
-Spree.routes.checkouts_api = Spree.pathFor('api/v1/checkouts')
-Spree.routes.classifications_api = Spree.pathFor('api/v1/classifications')
-Spree.routes.option_types_api = Spree.pathFor('api/v1/option_types')
-Spree.routes.option_values_api = Spree.pathFor('api/v1/option_values')
-Spree.routes.orders_api = Spree.pathFor('api/v1/orders')
-Spree.routes.products_api = Spree.pathFor('api/v1/products')
-Spree.routes.shipments_api = Spree.pathFor('api/v1/shipments')
-Spree.routes.checkouts_api = Spree.pathFor('api/v1/checkouts')
-Spree.routes.stock_locations_api = Spree.pathFor('api/v1/stock_locations')
-Spree.routes.taxon_products_api = Spree.pathFor('api/v1/taxons/products')
-Spree.routes.taxons_api = Spree.pathFor('api/v1/taxons')
-Spree.routes.users_api = Spree.pathFor('api/v1/users')
-Spree.routes.tags_api = Spree.pathFor('api/v1/tags')
-Spree.routes.variants_api = Spree.pathFor('api/v1/variants')
-
 Spree.routes.edit_product = function (productId) {
   return Spree.adminPathFor('products/' + productId + '/edit')
 }
-
-Spree.routes.payments_api = function (orderId) {
-  return Spree.pathFor('api/v1/orders/' + orderId + '/payments')
+Spree.routes.apply_coupon_code = function (orderId) {
+  return Spree.pathFor('api/v2/platform/orders/' + orderId + '/apply_coupon_code')
 }
 
-Spree.routes.stock_items_api = function (stockLocationId) {
-  return Spree.pathFor('api/v1/stock_locations/' + stockLocationId + '/stock_items')
+// API v2
+Spree.routes.countries_api_v2 = Spree.pathFor('api/v2/platform/countries')
+Spree.routes.classifications_api_v2 = Spree.pathFor('api/v2/platform/classifications')
+Spree.routes.line_items_api_v2 = Spree.pathFor('api/v2/platform/line_items')
+Spree.routes.menus_api_v2 = Spree.pathFor('api/v2/platform/menus')
+Spree.routes.menus_items_api_v2 = Spree.pathFor('api/v2/platform/menu_items')
+Spree.routes.option_types_api_v2 = Spree.pathFor('api/v2/platform/option_types')
+Spree.routes.option_values_api_v2 = Spree.pathFor('api/v2/platform/option_values')
+Spree.routes.orders_api_v2 = Spree.pathFor('api/v2/platform/orders')
+Spree.routes.pages_api_v2 = Spree.pathFor('api/v2/platform/cms_pages')
+Spree.routes.payments_api_v2 = Spree.pathFor('/api/v2/platform/payments')
+Spree.routes.products_api_v2 = Spree.pathFor('/api/v2/platform/products')
+Spree.routes.sections_api_v2 = Spree.pathFor('/api/v2/platform/cms_sections')
+Spree.routes.shipments_api_v2 = Spree.pathFor('/api/v2/platform/shipments')
+Spree.routes.stock_items_api_v2 = Spree.pathFor('/api/v2/platform/stock_items')
+Spree.routes.stock_locations_api_v2 = Spree.pathFor('/api/v2/platform/stock_locations')
+Spree.routes.taxons_api_v2 = Spree.pathFor('/api/v2/platform/taxons')
+Spree.routes.users_api_v2 = Spree.pathFor('api/v2/platform/users')
+Spree.routes.variants_api_v2 = Spree.pathFor('api/v2/platform/variants')
+
+Spree.apiV2Authentication = function() {
+  if (typeof(OAUTH_TOKEN) !== 'undefined') {
+    return {
+      'Authorization': 'Bearer ' + OAUTH_TOKEN
+    }
+  }
 }

data/app/assets/javascripts/spree.js

@@ -0,0 +1,71 @@
+//= require jsuri
+function Spree () {}
+
+Spree.ready = function (callback) {
+  return document.addEventListener("spree:load", function() {
+    return callback(jQuery)
+  })
+}
+
+Spree.mountedAt = function () {
+  return window.SpreePaths.mounted_at
+}
+
+Spree.adminPath = function () {
+  return window.SpreePaths.admin
+}
+
+Spree.pathFor = function (path) {
+  var locationOrigin = (window.location.protocol + '//' + window.location.hostname) + (window.location.port ? ':' + window.location.port : '')
+
+  return this.url('' + locationOrigin + (this.mountedAt()) + path, this.url_params).toString()
+}
+
+Spree.localizedPathFor = function(path) {
+  if (typeof (SPREE_LOCALE) !== 'undefined' && typeof (SPREE_CURRENCY) !== 'undefined') {
+    var fullUrl = new URL(Spree.pathFor(path))
+    var params = fullUrl.searchParams
+    var pathName = fullUrl.pathname
+
+    params.set('currency', SPREE_CURRENCY)
+
+    if (pathName.match(/api\/v/)) {
+      params.set('locale', SPREE_LOCALE)
+    } else {
+      pathName = (this.mountedAt()) + SPREE_LOCALE + '/' + path
+    }
+    return fullUrl.origin + pathName + '?' + params.toString()
+  }
+  return Spree.pathFor(path)
+}
+
+Spree.adminPathFor = function (path) {
+  return this.pathFor('' + (this.adminPath()) + path)
+}
+
+Spree.url = function (uri, query) {
+  if (uri.path === void 0) {
+    // eslint-disable-next-line no-undef
+    uri = new Uri(uri)
+  }
+  if (query) {
+    $.each(query, function (key, value) {
+      return uri.addQueryParam(key, value)
+    })
+  }
+  return uri
+}
+
+Spree.ajax = function (urlOrSettings, settings) {
+  var url
+  if (typeof urlOrSettings === 'string') {
+    return $.ajax(Spree.url(urlOrSettings).toString(), settings)
+  } else {
+    url = urlOrSettings['url']
+    delete urlOrSettings['url']
+    return $.ajax(Spree.url(url).toString(), urlOrSettings)
+  }
+}
+
+Spree.routes = {}
+Spree.url_params = {}

data/app/assets/stylesheets/spree/backend/components/_badges.scss

@@ -1,3 +1,8 @@
+.badge {
+  font-weight: 400;
+  text-transform: capitalize;
+}
+
 // Green
 .badge-completed,
 .badge-complete,
@@ -10,8 +15,11 @@
 .badge-success,
 .badge-sold,
 .badge-open,
-.badge-authorized {
-  @include badge-variant($success);
+.badge-authorized,
+.badge-published,
+.badge-live,
+.badge-approved {
+  @include badge-variant(theme-color('success'));
 }
 
 // Red
@@ -19,8 +27,9 @@
 .badge-considered_risky,
 .badge-error,
 .badge-invalid,
+.badge-rejected,
 .badge-closed {
-  @include badge-variant($danger);
+  @include badge-variant(theme-color('danger'));
 }
 
 // Orange
@@ -41,6 +50,18 @@
 .badge-void,
 .badge-inactive,
 .badge-notice,
+.badge-suspended,
 .badge-partial {
-  @include badge-variant($warning);
+  @include badge-variant(theme-color('warning'));
+}
+
+// light
+.badge-disabled,
+.badge-invited {
+  @include badge-variant(theme-color('light'));
+}
+
+// Info
+.badge-onboarding {
+  @include badge-variant(theme-color('info'));
 }

data/app/assets/stylesheets/spree/backend/components/_buttons.scss

@@ -1,3 +1,7 @@
+.payment-action-save {
+  @include button-variant(theme-color('success'), theme-color('success'), theme-color('success') );
+}
+
 .btn,
 .nav-pills > li > a {
   vertical-align: middle;
@@ -7,19 +11,35 @@
 .btn {
   text-align: center;
 
-  .glyphicon {
-    padding-right: 3px;
+  .ship {
+    color: #fff;
+  }
+  svg,
+  i.icon {
+    margin-right: 0.5rem;
+    margin-bottom: 3px;
+  }
+  &.icon-link svg{
+    margin-right: 0;
   }
-
-  .ship { color: #fff; }
 }
 
-.btn-sm .glyphicon { padding: 0; }
-
-.btn.action-void { @extend .btn-danger; }
-.btn.action-capture { @extend .btn-success; }
-.btn.payment-action-edit {
-  @extend .btn-primary;
+input#image_attachment >
+input[type="button"],
+input[type="file"]::-webkit-file-upload-button {
+  @include border-radius();
+  border: 1px solid;
+  background-color: white;
+  color: $secondary;
+  border-color: $secondary;
+  padding: 0.375rem 0.75rem;
+  &:hover {
+    color: white;
+    background-color: $secondary;
+  }
+}
 
-  color: $white !important;
+.actions .btn,
+.page-actions .btn {
+  margin: 2px;
 }

data/app/assets/stylesheets/spree/backend/components/_filters.scss

@@ -1,36 +1,35 @@
 #table-filter {
   display: none;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  margin-top: 20px;
 }
 
-.index-filter-button {
-  font-size: $font-size-sm;
-  .glyphicon {
-    color: $gray-800;
-  }
+.index-filter-button .icon-chevron-right {
+  transform: rotate(0);
+  transition: .3s ease-in-out;
+  margin-bottom: 0;
+}
+
+.collapsed .icon-chevron-right {
+  transform: rotate(90deg);
+  transition: .3s ease-in-out;
+}
 
-  button {
-    height: 100%;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-weight: bold;
-    font-size: $small-font-size;
-    border-color: $input-border-color;
-    border-right: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    background-color: $white;
+.default-filter-icon {
+  opacity: 0.1;
+}
+
+i.js-delete-filter {
+  margin-bottom: 0;
+}
 
-    &:hover, &:focus {
-      background-color: $gray-100;
-    }
+.sort_link {
+  .icon, svg {
+    margin-left: 5px;
+    margin-bottom: 2px;
+    width: 0.8rem;
+    height: 0.8rem;
   }
 
-  .js-quick-search {
-    font-size: $font-size-sm;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+  svg.default-filter-arrow {
+    opacity: 0.5;
   }
 }

data/app/assets/stylesheets/spree/backend/components/_icons.scss

@@ -1,5 +1,4 @@
-// TODO: Switch everything to use glyphicons
-.icon, .glyphicon {
+span.icon, span.glyphicon {
   vertical-align: text-top;
 }
 
@@ -240,8 +239,9 @@ $alias_icons: (plus add)
               (globe translate)
               (ok approve);
 
-.icon {
+span.icon {
   @extend .glyphicon;
+  top:2px;
 
   // Map defaults.
   @each $icon in $default_icons {
@@ -254,4 +254,39 @@ $alias_icons: (plus add)
     $alias: nth($map, 2);
     &.icon-#{$alias} { @extend .glyphicon-#{$icon}; }
   }
-}
+}
+
+// Spree SVG Icon Defaults
+i.icon {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  overflow: hidden;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  background-position: center;
+}
+
+
+// Spree SVG Icons in JS
+
+// The icons listed below are used by javascript generated content
+// If you wish to use an existing SVG icon in javascript generated content
+// use <i> tags like this -> <i class="icon icon-close"></i>
+// Using <span> tags will fall back to legacy glyphicon font based icons
+
+i.icon-close,
+i.icon-cancel,
+i.icon-delete,
+i.icon-void          { background-image: url(asset-path("backend-cancel.svg")); }
+i.icon-save          { background-image: url(asset-path("backend-save.svg")); }
+i.icon-add           { background-image: url(asset-path("backend-plus-circle.svg")); }
+i.icon-search        { background-image: url(asset-path("backend-search.svg")); }
+i.icon-settings      { background-image: url(asset-path("backend-settings.svg")); }
+i.icon-delete        { background-image: url(asset-path("backend-delete.svg")); }
+i.icon-edit          { background-image: url(asset-path("backend-edit.svg")); }
+i.icon-chevron-down  { background-image: url(asset-path("backend-chevron-down.svg")); }
+i.icon-chevron-left  { background-image: url(asset-path("backend-chevron-left.svg")); }
+i.icon-chevron-right { background-image: url(asset-path("backend-chevron-right.svg")); }
+i.icon-chevron-up    { background-image: url(asset-path("backend-chevron-up.svg")); }

data/app/assets/stylesheets/spree/backend/components/_main.scss

@@ -1,13 +1,58 @@
 #main-part {
-  padding: $spacer ($spacer * 2) 0 ($spacer * 2);
-  margin-top: 50px;
-}
-
-.sidebar-minimized #main-part {
-  padding: $spacer ($spacer * 2) 0 ($spacer * 5);
+  margin-top: $navbar-brand-height + 1.5rem;
 }
 
 #logo {
   width: auto;
-  height: 40px;
+  height: 36px;
+}
+
+#multi-backdrop {
+  z-index: 0;
+  height: 0;
+  width: 0;
+}
+
+body.modal-open #multi-backdrop {
+  z-index: 1040;
+  width: 100vw;
+  height: 100vh;
+}
+
+.sort-handle {
+  cursor: grab;
+}
+
+.no-wrap {
+  white-space: nowrap;
+}
+
+.card-body {
+  padding: 0.75rem;
+}
+
+@include media-breakpoint-up(sm) {
+  .card-body {
+    padding: 1.25rem;
+  }
+}
+
+.rounded-bottom-only {
+  border-radius: 0 0 $border-radius $border-radius;
+}
+
+.rounded-top-only {
+  border-radius: $border-radius $border-radius 0 0;
+}
+
+.alert {
+  border: 0 none !important;
+}
+
+.card-header, .card-footer {
+  background-color: transparent !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  margin-left: 0.75rem !important;
+  margin-right: 0.75rem !important;
 }

data/app/assets/stylesheets/spree/backend/components/_navbar.scss

@@ -1,21 +1,61 @@
 .header {
   .navbar {
-    background-color: $navbar-inverse-bg;
-    padding: 0;
+    min-height:54px;
 
     a:hover {
       text-decoration: none;
     }
-  }
+    .btn {
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        outline: 0;
+        outline: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+      }
+    }
 
-  .dropdown-toggle {
-    &[aria-expanded="true"] {
-      background-color: $gray-900;
+    #accountNav {
+      i {
+        font-size: 1.3em;
+        line-height: 1rem;
+      }
     }
 
-    &:hover,
-    &:focus {
-      text-decoration: none;
+    #storeSwitcherDropdown {
+      .dropdown-menu.show {
+        min-width: 250px;
+        width: fit-content;
+        max-width: 90vw;
+        max-height: 70vh;
+        overflow-y: hidden !important;
+        top: $navbar-brand-height + 1.5rem;
+        left: 50%;
+        right: 50%;
+        transform: translate(-50%, 0%);
+
+        @include media-breakpoint-up(lg) {
+          left: 0%;
+          right: 0%;
+          transform: translate(0%, 0%);
+        }
+
+        a {
+          white-space: nowrap;
+          overflow-x: hidden;
+          text-overflow: ellipsis;
+
+          svg {
+            vertical-align: text-top;
+            margin-right: 1em;
+          }
+
+          &.disabled svg {
+            color: theme-color('success');
+          }
+        }
+      }
     }
   }
 }