spree_core 4.10.1 → 5.0.0.rc1

data/app/helpers/spree/products_helper.rb

@@ -74,25 +74,6 @@ module Spree
       string.slice(0..449) + '...'
     end
 
-    # will return a human readable string
-    def available_status(product)
-      Spree::Deprecation.warn(<<-DEPRECATION, caller)
-        `Spree::ProductsHelper#available_status` method from spree/core is deprecated and will be removed.
-        Please use `Spree::Admin::ProductsHelper#available_status` from spree_backend instead.
-      DEPRECATION
-
-      return Spree.t(:archived) if product.discontinued?
-      return Spree.t(:deleted) if product.deleted?
-
-      if product.available?
-        Spree.t(:active)
-      elsif product.make_active_at&.future?
-        Spree.t(:pending_sale)
-      else
-        Spree.t(:draft)
-      end
-    end
-
     def product_images(product, variants)
       if product.variants_and_option_values(current_currency).any?
         variants_without_master_images = variants.reject(&:is_master).map(&:images).flatten
@@ -155,7 +136,7 @@ module Spree
     end
 
     def common_product_cache_keys
-      base_cache_key + price_options_cache_key
+      spree_base_cache_key + price_options_cache_key
     end
 
     private

data/app/javascript/spree/core/controllers/address_autocomplete_controller.js

@@ -0,0 +1,233 @@
+import { Controller } from '@hotwired/stimulus'
+import debounce from 'spree/core/helpers/debounce'
+import GooglePlacesSuggestionsProvider from 'spree/core/helpers/address_autocomplete/google_places_suggestions_provider'
+
+export default class extends Controller {
+  static targets = [
+    'address1',
+    'address2',
+    'city',
+    'state',
+    'zipcode',
+    'country',
+    'suggestionsBoxContainer',
+    'suggestionsBoxList',
+    'suggestionsOptionTemplate',
+    'autocompleteInputContainer',
+    'addressWarning'
+  ]
+  connect() {
+    if (typeof google === 'undefined' || typeof google.maps === 'undefined') {
+      console.warn('Google Maps API is not loaded. Please see https://developers.google.com/maps/documentation/javascript/get-api-key for more information.')
+      return
+    }
+    this.googlePlacesSuggestionsProvider = new GooglePlacesSuggestionsProvider()
+    this.googlePlacesSuggestionsProvider.connect().then(() => {
+      this.selectedCountryIso =
+        this.countryTarget.options[this.countryTarget.selectedIndex].dataset.iso
+      this.addEventListeners()
+    })
+  }
+
+  disconnect() {
+    this.removeEventListeners()
+  }
+
+  countryChanged() {
+    this.selectedCountryIso =
+      this.countryTarget.options[this.countryTarget.selectedIndex].dataset.iso
+  }
+
+  async addressChanged() {
+    if (this.address1Target.value.length < 2) {
+      this.hideSuggestionsBox()
+      return
+    }
+
+    const suggestions =
+      await this.googlePlacesSuggestionsProvider.getSuggestions(
+        this.address1Target.value,
+        this.selectedCountryIso
+      )
+    this.suggestionsCount = suggestions.length
+    this.suggestionsBoxListTarget.replaceChildren(
+      ...suggestions.map((suggestion) =>
+        this.suggestionOptionMarkup(suggestion)
+      )
+    )
+    this.showSuggestionsBox()
+  }
+
+  showSuggestionsBox() {
+    if (this.suggestionsCount > 0) {
+      this.suggestionsBoxContainerTarget.classList.remove('hidden')
+      this.suggestionsBoxContainerTarget.classList.add('block')
+      this.address1Target.setAttribute('aria-expanded', 'true')
+      this.address1Target.setAttribute('autocomplete', 'off')
+      this.selectedIndex = -1
+      this.address1Target.removeAttribute('aria-activedescendant')
+    }
+  }
+
+  hideSuggestionsBox() {
+    this.selectedIndex = -1
+    this.address1Target.setAttribute('aria-expanded', 'false')
+    this.address1Target.setAttribute('autocomplete', 'shipping-address-line1')
+    this.address1Target.removeAttribute('aria-activedescendant')
+    const options = this.suggestionsBoxListTarget.querySelectorAll(
+      '.suggestions-option-container'
+    )
+    options.forEach((option) => {
+      option.setAttribute('aria-selected', 'false')
+    })
+    this.suggestionsBoxContainerTarget.classList.remove('block')
+    this.suggestionsBoxContainerTarget.classList.add('hidden')
+  }
+
+  async handleSuggestionsBoxListKeyPressed(event) {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault()
+        if (this.selectedIndex < this.suggestionsCount - 1) {
+          this.selectOption(this.selectedIndex + 1)
+        } else if (this.suggestionsCount) {
+          this.selectOption(0)
+        }
+        break
+      case 'ArrowUp':
+        event.preventDefault()
+        if (this.selectedIndex > 0) {
+          this.selectOption(this.selectedIndex - 1)
+        } else if (this.suggestionsCount) {
+          this.selectOption(4)
+        }
+        break
+      case 'Enter':
+        event.preventDefault()
+        const selectedOption = this.suggestionsBoxListTarget.querySelector(
+          `[aria-selected="true"]`
+        )
+        await this.fillAddress(selectedOption.dataset.placeId)
+        break
+      case 'Tab':
+        this.hideSuggestionsBox()
+        break
+      case 'Escape':
+        event.preventDefault()
+        this.hideSuggestionsBox()
+        break
+    }
+  }
+
+  async fillAddress(placeID) {
+    const placeDetails =
+      await this.googlePlacesSuggestionsProvider.getPlaceDetails(
+        placeID,
+        this.address1Target
+      )
+
+    if (placeDetails) {
+      this.address1Target.value = placeDetails.fullAddress
+      this.cityTarget.value = placeDetails.city
+      this.zipcodeTarget.value = placeDetails.zipcode
+
+      const stateToSelect = this.stateTarget.querySelector(
+        `option[data-abbr="${placeDetails.stateAbbr}"]`
+      )
+      if (stateToSelect) {
+        stateToSelect.selected = true
+      }
+
+      if (!placeDetails.hasStreetNumber) {
+        this.addressWarningTarget.classList.remove('hidden')
+        this.addressWarningTarget.classList.add('flex')
+      } else {
+        this.addressWarningTarget.classList.remove('flex')
+        this.addressWarningTarget.classList.add('hidden')
+      }
+    }
+
+    this.hideSuggestionsBox()
+  }
+
+  suggestionOptionMarkup(suggestion) {
+    const optionTemplate = this.suggestionsOptionTemplateTarget
+    const newOption = optionTemplate.content.cloneNode(true)
+    const optionContainer = newOption.querySelector(
+      '.suggestions-option-container'
+    )
+    optionContainer.id = `suggestions-option-${suggestion.index}`
+    optionContainer.dataset.placeId = suggestion.placeID
+    optionContainer.setAttribute('aria-label', suggestion.description)
+    optionContainer.innerHTML = suggestion.html
+    optionContainer.addEventListener('click', async (event) => {
+      event.preventDefault()
+      await this.fillAddress(suggestion.placeID)
+    })
+    optionContainer.addEventListener('touchstart', async (event) => {
+      event.preventDefault()
+      await this.fillAddress(suggestion.placeID)
+    })
+    return newOption
+  }
+
+  hideIfClickedOutside(event) {
+    if (event.composedPath().includes(this.autocompleteInputContainerTarget)) {
+      return
+    } else {
+      this.hideSuggestionsBox()
+    }
+  }
+
+  selectOption(index) {
+    const options = this.suggestionsBoxListTarget.querySelectorAll(
+      '.suggestions-option-container'
+    )
+    options.forEach((option) => {
+      option.setAttribute('aria-selected', 'false')
+    })
+    options[index].setAttribute('aria-selected', 'true')
+    this.address1Target.setAttribute('aria-activedescendant', options[index].id)
+    this.selectedIndex = index
+  }
+
+  addEventListeners() {
+    this.address1Target.addEventListener(
+      'input',
+      debounce(this.addressChanged.bind(this))
+    )
+    this.countryTarget.addEventListener(
+      'change',
+      this.countryChanged.bind(this)
+    )
+    this.address1Target.addEventListener(
+      'keydown',
+      this.handleSuggestionsBoxListKeyPressed.bind(this)
+    )
+    this.address1Target.addEventListener(
+      'focus',
+      this.addressChanged.bind(this)
+    )
+    document.addEventListener('click', this.hideIfClickedOutside.bind(this))
+  }
+
+  removeEventListeners() {
+    this.address1Target.removeEventListener(
+      'input',
+      debounce(this.addressChanged.bind(this))
+    )
+    this.countryTarget.removeEventListener(
+      'change',
+      this.countryChanged.bind(this)
+    )
+    this.address1Target.removeEventListener(
+      'keydown',
+      this.handleSuggestionsBoxListKeyPressed.bind(this)
+    )
+    this.address1Target.removeEventListener(
+      'focus',
+      this.addressChanged.bind(this)
+    )
+    document.removeEventListener('click', this.hideIfClickedOutside.bind(this))
+  }
+}

data/app/javascript/spree/core/controllers/address_form_controller.js

@@ -0,0 +1,98 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = [
+    'country',
+    'state',
+    'stateName',
+    'stateLabel',
+    'stateArrow',
+    'zipcode'
+  ]
+
+  static values = {
+    countries: Array,
+    states: Array,
+    currentStateId: String
+  }
+
+  constructor(...args) {
+    super(...args)
+    this.changeCountry()
+  }
+
+  get country() {
+    return this.countriesValue.find(
+      (country) => country.id == this.countryTarget.value
+    )
+  }
+
+  get state() {
+    return this.statesValue.find((state) => state[1] == this.stateTarget.value)
+  }
+
+  get states() {
+    return this.statesValue.filter(
+      (state) => state[0] == this.countryTarget.value
+    )
+  }
+
+  changeCountry(_event) {
+    var form = document.querySelector('.address-form')
+    this.stateTarget.required = this.country.states_required
+    this.stateTarget.value = ''
+    this.stateTarget.innerHTML = ''
+
+    var allStates = this.stateTarget.parentNode.parentNode
+    var stateName = this.stateNameTarget
+    var stateSelector = this.stateTarget
+
+    if (this.country.states_required) {
+      this.stateLabelTarget.parentNode.parentNode.classList.remove('hidden')
+      form.classList.toggle('cols-2', false)
+
+      allStates.classList.remove('hidden')
+      allStates.classList.add('flex')
+      if (this.states.length > 0) {
+        stateSelector.classList.remove('hidden')
+        stateName.classList.add('hidden')
+
+        this.states.map((state) => {
+          const option = document.createElement('option')
+          option.value = state[1]
+          option.dataset.abbr = state[2]
+          option.text = state[3]
+
+          if (option.value == this.currentStateIdValue) {
+            option.selected = true
+          }
+
+          this.stateTarget.add(option)
+        })
+      } else {
+        stateName.classList.remove('hidden')
+        stateSelector.classList.add('hidden')
+      }
+    } else {
+      form.classList.toggle('cols-2', true)
+      allStates.classList.add('hidden')
+      allStates.classList.remove('flex')
+    }
+
+    this.zipcodeTarget.required = this.country.zipcode_required
+    if (this.country.zipcode_required) {
+      form.classList.toggle('col-1', false)
+      this.zipcodeTarget.parentNode.classList.remove('hidden')
+    } else {
+      if (!this.country.states_required) {
+        form.classList.toggle('col-1', true)
+        form.classList.toggle('cols-2', false)
+      } else {
+        form.classList.toggle('col-1', false)
+        form.classList.toggle('cols-2', true)
+      }
+      this.zipcodeTarget.parentNode.classList.add('hidden')
+      this.zipcodeTarget.value = null
+    }
+  }
+}

data/app/javascript/spree/core/controllers/enable_button_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "button"];
+  static values = {
+    allowBlank: { type: Boolean, default: false },
+    disableWhenNotChanged: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this.buttonTarget.setAttribute("disabled", true);
+
+    if (this.inputTargets.every((input) => input.value || input.checked || this.allowBlankValue) && !this.disableWhenNotChangedValue) {
+      this.buttonTarget.removeAttribute("disabled");
+    }
+
+    this.inputTargets.forEach((input) => {
+      input.addEventListener("input", (event) => this.handleChange(event));
+    });
+  }
+
+  handleChange(event) {
+    if (this.inputTargets.every((input) => event.target.value || event.target.checked || this.allowBlankValue)) {
+      this.buttonTarget.removeAttribute("disabled");
+    } else {
+      this.buttonTarget.setAttribute("disabled", true);
+    }
+  }
+}

data/app/javascript/spree/core/helpers/address_autocomplete/google_places_suggestions_provider.js

@@ -0,0 +1,179 @@
+export default class {
+  async connect() {
+    if (typeof google?.maps === 'undefined') {
+      console.error('Google Places API is not loaded')
+      return
+    }
+    this.placesApi = await google.maps.importLibrary('places')
+    this.googleSessionToken = new this.placesApi.AutocompleteSessionToken()
+    this.autocompleteSevice = new this.placesApi.AutocompleteService()
+  }
+
+  async getSuggestions(input, country) {
+    return new Promise((resolve, reject) => {
+      if (this.placesApi === undefined) {
+        reject('You must call connect() before getSuggestions()')
+        return
+      }
+
+      this.autocompleteSevice.getPlacePredictions(
+        {
+          input,
+          // We can use `address`, `street_address`
+          // `street_address` is the most accurate and specific, but sometimes it returns no results, even if the address is valid
+          // Since we are validating the address on the server, we can use `address`
+          types: [],
+          componentRestrictions: {
+            country
+          },
+          sessionToken: this.googleSessionToken
+        },
+        (predictions, status) => {
+          if (status !== this.placesApi.PlacesServiceStatus.OK) {
+            resolve([])
+          } else {
+            resolve(predictions.map(this.parsePrediction.bind(this)))
+          }
+        }
+      )
+    })
+  }
+
+  async getPlaceDetails(placeID, target) {
+    return new Promise((resolve, reject) => {
+      if (this.placesApi === undefined) {
+        reject('You must call connect() before getPlaceDetails()')
+        return
+      }
+
+      const service = new this.placesApi.PlacesService(target)
+      service.getDetails(
+        {
+          placeId: placeID,
+          fields: ['address_components'],
+          sessionToken: this.googleSessionToken
+        },
+        (place, status) => {
+          if (status !== this.placesApi.PlacesServiceStatus.OK) {
+            resolve(null)
+            return
+          }
+
+          this.sessionToken = new this.placesApi.AutocompleteSessionToken()
+
+          const fullAddress = []
+          let hasStreetNumber = false
+
+          const details = {
+            fullAddress: '',
+            city: '',
+            stateAbbr: '',
+            zipcode: '',
+            hasStreetNumber: false
+          }
+
+          let locality = undefined
+          let postal_town = undefined
+          let sublocality = undefined
+          let administrative_area_level_3 = undefined
+          let premise = undefined
+          let subpremise = undefined
+
+          place.address_components.forEach((component) => {
+            if (component.types.includes('street_number')) {
+              fullAddress.push(component.long_name)
+              hasStreetNumber = true
+            }
+            if (component.types.includes('subpremise')) {
+              subpremise = component.long_name
+            }
+            if (component.types.includes('premise')) {
+              premise = component.long_name
+            }
+            if (component.types.includes('route')) {
+              fullAddress.push(component.long_name)
+            }
+            if (component.types.includes('locality')) {
+              locality = component.long_name
+            }
+            if (component.types.includes('postal_town')) {
+              postal_town = component.long_name
+            }
+            if (component.types.includes('sublocality')) {
+              sublocality = component.long_name
+            }
+            if (component.types.includes('administrative_area_level_1')) {
+              details.stateAbbr = component.short_name
+            }
+            if (component.types.includes('postal_code')) {
+              details.zipcode = component.long_name
+            }
+            if (component.types.includes('administrative_area_level_3')) {
+              administrative_area_level_3 = component.long_name
+            }
+          })
+          // City is tricky, because it can be in different fields
+          details.city =
+            locality ||
+            postal_town ||
+            sublocality ||
+            administrative_area_level_3 ||
+            ''
+          if (premise && !hasStreetNumber) {
+            fullAddress.unshift(premise)
+            hasStreetNumber = true
+          }
+          if (subpremise) {
+            fullAddress.push(subpremise)
+          }
+          details.hasStreetNumber = hasStreetNumber
+          details.fullAddress = fullAddress.join(' ')
+          resolve(details)
+        }
+      )
+    })
+  }
+
+  parsePrediction(prediction, index) {
+    const suggestion = {
+      index: index,
+      placeID: prediction.place_id,
+      description: prediction.description
+    }
+
+    const splittedText = this.splitTextForMarks(prediction)
+    suggestion.html = splittedText
+      .map((textArea) =>
+        textArea.marked
+          ? `<mark class="bg-transparent">${textArea.text}</mark>`
+          : textArea.text
+      )
+      .join('')
+
+    return suggestion
+  }
+
+  // This function takes the prediction and splits the description into an array of objects with the text and a boolean indicating if it should be highlighted
+  splitTextForMarks(prediction) {
+    let markedAreas = [...prediction.matched_substrings.sort((m) => m.offset)]
+    const textAreas = []
+    for (let i = 0; i < prediction.description.length; i++) {
+      if (markedAreas[0]?.offset === i) {
+        textAreas.push({
+          text: prediction.description.substring(i, i + markedAreas[0].length),
+          marked: true
+        })
+        i += markedAreas[0].length - 1
+        markedAreas.shift()
+        markedAreas = [...markedAreas.sort((m) => m.offset)]
+      } else {
+        textAreas.push({
+          text: prediction.description.charAt(i),
+          marked: false
+        })
+      }
+    }
+
+    return textAreas
+  }
+}

data/app/javascript/spree/core/helpers/debounce.js

@@ -0,0 +1,9 @@
+export default function debounce(func, timeout = 300) {
+  let timer
+  return (...args) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      func.apply(this, args)
+    }, timeout)
+  }
+}

data/app/javascript/spree/core/helpers/scroll_lock.js

@@ -0,0 +1,25 @@
+export function lockScroll() {
+  const body = document.body
+  const scrollPosition = window.scrollY || body.scrollTop
+  document.documentElement.style.setProperty('--scroll-y', scrollPosition)
+
+  body.style.top = `-${scrollPosition}px`
+  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+  document.body.style.paddingRight = `${scrollbarWidth}px`
+  body.style.left = '0px'
+  body.style.right = '0px'
+  body.style.overflow = 'hidden'
+  body.style.position = 'fixed'
+}
+
+export function unlockScroll() {
+  const body = document.body
+  body.style.position = ''
+  body.style.paddingRight = ''
+  body.style.left = ''
+  body.style.right = ''
+  body.style.overflow = ''
+
+  document.documentElement.scrollTop = document.documentElement.style.getPropertyValue('--scroll-y') || window.scrollY
+  body.style.top = ''
+}

data/app/jobs/spree/addresses/geocode_address_job.rb

@@ -0,0 +1,31 @@
+module Spree
+  module Addresses
+    class GeocodeAddressError < StandardError; end
+
+    class GeocodeAddressJob < BaseJob
+      queue_as Spree.queues.addresses
+
+      def perform(address_id)
+        address = Spree::Address.find(address_id)
+
+        coordinates = Geocoder.coordinates(
+          address.geocoder_address,
+          country: address.country_iso3
+        )
+
+        if coordinates.present?
+          address.update_columns(latitude: coordinates[0], longitude: coordinates[1], updated_at: Time.current)
+        else
+          # Unfortunately there is no way to get the error message from Geocoder,
+          # but the request is fully displayed in the server logs
+          Rails.error.report(
+            GeocodeAddressError.new("Cannot geocode address ID: #{address.id}"),
+            handled: false,
+            context: { address_id: address_id },
+            source: 'spree.core'
+          )
+        end
+      end
+    end
+  end
+end

data/app/jobs/spree/base_job.rb

@@ -1,4 +1,5 @@
 module Spree
   class BaseJob < ApplicationJob
+    queue_as Spree.queues.default
   end
 end

data/app/jobs/spree/coupon_codes/bulk_generate_job.rb

@@ -0,0 +1,17 @@
+module Spree
+  module CouponCodes
+    class BulkGenerateJob < Spree::BaseJob
+      queue_as Spree.queues.coupon_codes
+
+      def perform(promotion_id, quantity)
+        promotion = Spree::Promotion.find(promotion_id)
+        return unless promotion.present?
+
+        Spree::CouponCodes::BulkGenerate.call(
+          promotion: promotion,
+          quantity: quantity
+        )
+      end
+    end
+  end
+end

data/app/jobs/spree/exports/generate_job.rb

@@ -0,0 +1,12 @@
+module Spree
+  module Exports
+    class GenerateJob < Spree::BaseJob
+      queue_as Spree.queues.exports
+
+      def perform(export_id)
+        export = Spree::Export.find(export_id)
+        export.generate
+      end
+    end
+  end
+end

data/app/jobs/spree/products/auto_match_taxons_job.rb

@@ -0,0 +1,14 @@
+module Spree
+  module Products
+    class AutoMatchTaxonsJob < ::Spree::BaseJob
+      queue_as Spree.queues.taxons
+
+      def perform(product_id)
+        product = Spree::Product.find_by(id: product_id)
+        return unless product.present?
+
+        Spree::Products::AutoMatchTaxons.call(product: product)
+      end
+    end
+  end
+end