spree_storefront 5.0.0.rc1

data/app/javascript/spree/storefront/controllers/product_form_controller.js

@@ -0,0 +1,136 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = [
+    'submit',
+    'option',
+    'form',
+    'addToWishlist',
+    'desktopMediaGallery',
+    'productDetails',
+    'spinnerTemplate',
+    'addToWaitlistForm'
+  ]
+  static values = {
+    noCache: Boolean,
+    frameName: String,
+    optionsParamName: String,
+    requiredOptions: Array,
+    selectedVariantDisabled: Boolean,
+    variantFromOptionsDisabled: Boolean,
+    keepOptionsOpen: Boolean,
+    url: String,
+    disabled: Boolean
+  }
+
+  initialize() {
+    this.submitTargetHTML = this.submitTarget.innerHTML
+  }
+
+  connect() {
+    const selectedOptions = new Set()
+    this.optionTargets.forEach((option) => {
+      if (option.checked) {
+        selectedOptions.add(option.dataset.optionId)
+      }
+    })
+    const requiredOptions = new Set(this.requiredOptionsValue)
+
+    this.notSelectedOptions = [...requiredOptions].filter((x) => !selectedOptions.has(x))
+    if (this.notSelectedOptions.length) {
+      this.submitTargets.forEach((button) => button.addEventListener('click', this.showNotSelectedOptions))
+    }
+    if (this.hasAddToWishlistTarget && this.variantFromOptionsDisabledValue && this.notSelectedOptions.length === 0) {
+      this.addToWishlistTarget.disabled = true
+    }
+
+    if (this.hasDesktopMediaGalleryTarget && this.hasProductDetailsTarget) {
+      if (this.desktopMediaGalleryTarget.offsetHeight > 800) {
+        this.productDetailsTarget.classList.add('sticky')
+        const navHeight = document.querySelector('header.sticky')?.offsetHeight || 0
+        this.productDetailsTarget.style.top = `${navHeight}px`
+      }
+    }
+
+    this.formTarget.addEventListener('submit', this.disableSubmitButton)
+    this.submitTargets.forEach((button) => button.addEventListener('turbo-stream-form:submit-end', this.enableForm))
+  }
+
+  disconnect() {
+    this.submitTargets.forEach((button) => button.removeEventListener('click', this.showNotSelectedOptions))
+  }
+
+  showNotSelectedOptions = (e) => {
+    e.preventDefault()
+
+    this.notSelectedOptions.forEach((option, index) => {
+      const fieldSetElement = this.element.querySelector(`[data-option-id="${option}"]`)
+      if (index === 0) {
+        const toggleElement = fieldSetElement.querySelector('[data-controller="dropdown"]')
+        if (toggleElement) {
+          toggleElement.dataset.dropdownOpenValue = true
+          e.stopImmediatePropagation()
+        }
+        fieldSetElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
+      }
+    })
+
+    this.keepOptionsOpenValue = true
+  }
+
+  // reload turbo frame when option is selected
+  updateVariant(_event) {
+    this.submitTarget.disabled = true
+
+    const selectedOptions = []
+
+    this.optionTargets.forEach((option) => {
+      if (option.checked) {
+        selectedOptions.push(`${option.dataset.optionId}:${option.value}`)
+      }
+    })
+
+    const url = new URL(this.urlValue.length ? this.urlValue : window.location.href)
+    if (this.optionsParamNameValue?.length) {
+      url.searchParams.append(this.optionsParamNameValue, selectedOptions.join(','))
+    } else {
+      url.searchParams.append('options', selectedOptions.join(','))
+    }
+
+    if (this.noCacheValue) {
+      url.searchParams.append('no_cache', true)
+    }
+
+    if (this.frameNameValue?.length) {
+      Array.from(document.querySelectorAll(`turbo-frame#${this.frameNameValue}`)).forEach((frame) =>
+        frame.setAttribute('src', url)
+      )
+    } else {
+      window.Turbo.visit(url, { frame: 'main-product' })
+    }
+  }
+
+  disabledValueChanged() {
+    if (this.disabledValue) {
+      this.submitTarget.disabled = true
+      this.submitTarget.innerHTML = this.spinnerTemplateTarget.innerHTML
+    } else {
+      this.submitTarget.innerHTML = this.submitTargetHTML
+      this.submitTarget.disabled = false
+    }
+  }
+
+  disableSubmitButton = () => {
+    this.disabledValue = true
+  }
+
+  changeCartToken = (e) => {
+    if (this.tokenInput) {
+      this.tokenInput.value = e.detail.cartToken
+    }
+  }
+
+  enableForm = () => {
+    this.disabledValue = false
+  }
+}

data/app/javascript/spree/storefront/controllers/quantity_picker_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ 'quantity', 'increase', 'decrease' ]
+
+  connect() {
+    if (this.quantity <= 1) this.disableButton(this.decreaseTarget)
+  }
+
+  get quantity() {
+    return parseInt(this.quantityTarget.value) || 1
+  }
+
+  get maxQuantity() {
+    return parseInt(this.quantityTarget.max) || 9999
+  }
+
+  set quantity(value) {
+    this.quantityTarget.value = parseInt(value) || 1
+  }
+
+  increase() {
+    if (this.quantity < this.maxQuantity) this.quantity = this.quantity + 1
+    if (this.quantity > 1) this.enableButton(this.decreaseTarget)
+    if (this.quantity == this.maxQuantity && this.increaseTarget.type != 'submit') this.disableButton(this.increaseTarget)
+  }
+
+  decrease() {
+    if (this.quantity > 1) this.quantity = this.quantity - 1
+    if (this.quantity == 1 && this.decreaseTarget.type != 'submit') this.disableButton(this.decreaseTarget)
+    if (this.quantity < this.maxQuantity) this.enableButton(this.increaseTarget)
+  }
+
+  disableButton(button) {
+    button.setAttribute('disabled', 'disabled')
+    button.classList.add('opacity-50', 'cursor-not-allowed')
+  }
+
+  enableButton(button) {
+    button.removeAttribute('disabled')
+    button.classList.remove('opacity-50', 'cursor-not-allowed')
+  }
+}

data/app/javascript/spree/storefront/controllers/search_suggestions_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from '@hotwired/stimulus'
+import { get } from '@rails/request.js'
+import debounce from 'spree/core/helpers/debounce'
+
+export default class extends Controller {
+  static targets = ['input']
+  static values = {
+    url: String
+  }
+
+  connect() {
+    this.debouncedQuerySuggestions = debounce(this.querySuggestions)
+    this.inputTarget.addEventListener('input', this.debouncedQuerySuggestions)
+    this.openSearchButton = document.querySelector('#open-search')
+    this.openSearchButton.addEventListener('click', this.show)
+
+    this.searchSuggestionsContainer = document.querySelector('#search-suggestions')
+    this.searchSuggestionsContent = this.searchSuggestionsContainer.querySelector('#search-suggestions-content')
+    this.loadingHTML = this.searchSuggestionsContainer.querySelector('template#loading').innerHTML
+    Turbo.StreamActions[`search-suggestions:close`] = this.remoteClose(this)
+  }
+
+  remoteClose = (controller) => {
+    return function () {
+      controller.hide()
+    }
+  }
+  disconnect() {
+    delete Turbo.StreamActions[`search-suggestions:close`]
+    this.hide()
+    this.inputTarget.removeEventListener('input', this.debouncedQuerySuggestions)
+    this.openSearchButton.removeEventListener('click', this.show)
+  }
+  hide = () => {
+    this.searchSuggestionsContainer.style.display = 'none'
+  }
+  clear = () => {
+    this.searchSuggestionsContent.innerHTML = ''
+    this.searchSuggestionsContent.classList.remove(...this.searchSuggestionsContent.dataset.showClass.split(' '))
+    this.searchSuggestionsContent.classList.add('hidden')
+    this.element.classList.remove(...this.element.dataset.showClass.split(' '))
+  }
+  show = () => {
+    this.searchSuggestionsContainer.style.display = 'block'
+    this.inputTarget.focus()
+    const oldInputValue = this.inputTarget.value
+    this.inputTarget.value = ''
+    this.inputTarget.value = oldInputValue
+  }
+  querySuggestions = async () => {
+    if (this.inputTarget.value.length >= 3 && this.inputTarget.value.trim().length) {
+      this.searchSuggestionsContent.innerHTML = this.loadingHTML
+      this.searchSuggestionsContent.classList.remove('hidden')
+      this.searchSuggestionsContent.classList.add(...this.searchSuggestionsContent.dataset.showClass.split(' '))
+      this.element.classList.add(...this.element.dataset.showClass.split(' '))
+      await get(`${this.urlValue}?q=${this.inputTarget.value}`, {
+        responseKind: 'turbo-stream'
+      })
+    }
+  }
+}

data/app/javascript/spree/storefront/controllers/searchable_list_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['input', 'item']
+
+  connect() {
+    this.inputTarget.addEventListener('input', this.filter)
+  }
+
+  disconnect() {
+    this.inputTarget.removeEventListener('input', this.filter)
+  }
+
+  filter = () => {
+    const query = this.inputTarget.value.toLowerCase()
+    this.itemTargets.forEach((el) => {
+      const text = el.dataset.text.toLowerCase()
+      if (text.includes(query)) {
+        el.classList.remove('hidden')
+      } else {
+        el.classList.add('hidden')
+      }
+    })
+  }
+}

data/app/javascript/spree/storefront/controllers/slideover_controller.js

@@ -0,0 +1,40 @@
+import { Slideover } from 'tailwindcss-stimulus-components'
+import { lockScroll, unlockScroll } from 'spree/core/helpers/scroll_lock'
+export default class extends Slideover {
+  connect() {
+    Turbo.StreamActions[`${this.identifier}:open`] = this.remoteOpen(this)
+    super.connect()
+  }
+
+  disconnect() {
+    super.disconnect()
+    delete Turbo.StreamActions[`${this.identifier}:open`]
+  }
+
+  remoteOpen(controller) {
+    return function () {
+      if (this.target === controller.overlayTarget.id) {
+        controller.openValue = true
+      }
+    }
+  }
+
+  _show() {
+    const headerController = this.application.getControllerForElementAndIdentifier(this.element, 'header')
+    headerController?.freeze() // If there is a header controller, freeze it, so it doesn't move when the slideover opens
+
+    super._show()
+
+    // Don't scroll the background when slideover is open
+    lockScroll()
+  }
+
+  _hide() {
+    const headerController = this.application.getControllerForElementAndIdentifier(this.element, 'header')
+    headerController?.unfreeze()
+
+    super._hide()
+    // Restore the background scroll
+    unlockScroll()
+  }
+}

data/app/javascript/spree/storefront/controllers/sticky_button_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['stickyButton', 'fixedButton']
+
+  connect() {
+    if (!this.hasFixedButtonTarget) return
+
+    this.handleScroll()
+
+    const header = document.querySelector('header.sticky')
+
+    this.navHeight = header ? header.offsetHeight : 0
+    window.addEventListener('scroll', this.handleScroll, true)
+  }
+
+  disconnect() {
+    window.removeEventListener('scroll', this.handleScroll)
+  }
+
+  handleScroll = () => {
+    const button = this.stickyButtonTarget
+    const top = button.getBoundingClientRect().top
+    const fixedButton = this.fixedButtonTarget
+
+    if (top < this.navHeight || top > window.innerHeight) {
+      fixedButton.classList.remove('hidden')
+    } else {
+      fixedButton.classList.add('hidden')
+    }
+  }
+}

data/app/javascript/spree/storefront/controllers/toggle_menu_controller.js

@@ -0,0 +1,32 @@
+import { Toggle } from 'tailwindcss-stimulus-components'
+import { lockScroll, unlockScroll } from 'spree/core/helpers/scroll_lock'
+
+export default class ToggleMenu extends Toggle {
+  static targets = ['toggleable', 'content', 'button']
+  static values = ['open']
+
+  connect() {
+    super.connect()
+  }
+
+  hide(e) {
+    if (this.openValue) {
+      super.hide(e)
+      this.buttonTarget.classList.remove('menu-open')
+    }
+  }
+
+  toggle(e) {
+    this.contentTarget.style.paddingBottom = `${this.contentTarget.offsetTop}px`
+    super.toggle(e)
+    if (this.openValue) {
+      this.buttonTarget.classList.add('menu-open')
+      setTimeout(() => {
+        lockScroll()
+      }, 0)
+    } else {
+      this.buttonTarget.classList.remove('menu-open')
+      unlockScroll()
+    }
+  }
+}

data/app/javascript/spree/storefront/controllers/turbo_stream_form_controller.js

@@ -0,0 +1,51 @@
+import { Controller } from '@hotwired/stimulus'
+import { FetchRequest } from '@rails/request.js'
+
+// This controller is needed if you have many forms that are using turbo and can be submitted in rapid succession.
+// Turbo by default will cancel all the previous requests and only submit the last one,
+// but server side you will still receive all the requests and process them.
+// And since the request was cancelled, turbo will not process the response.
+// So this may lead to desync between the UI and the server.
+// GH issue: https://github.com/hotwired/turbo-rails/issues/310
+// Code that causes issue: https://github.com/hotwired/turbo/blob/main/src/core/drive/navigator.js#L32
+export default class extends Controller {
+  connect() {
+    this.element.addEventListener('submit', this.handleSubmit)
+    this.submitElements = this.element.querySelectorAll('[type="submit"]')
+  }
+
+  disconnect() {
+    this.element.removeEventListener('submit', this.handleSubmit)
+  }
+
+  handleSubmit = async (event) => {
+    event.preventDefault()
+
+    const form = event.target
+    const url = form.action
+    const method = form.method
+    const body = new FormData(form)
+    const headers = {}
+
+    const request = new FetchRequest(method, url, {
+      body: body,
+      headers: headers,
+      responseKind: 'turbo-stream'
+    })
+
+    this.submitElements.forEach((element) => {
+      element.disabled = true
+    })
+    form.ariaBusy = true
+
+    await request.perform()
+
+    const submitEndEvent = new Event('turbo-stream-form:submit-end')
+
+    this.submitElements.forEach((element) => {
+      element.disabled = false
+      element.dispatchEvent(submitEndEvent)
+    })
+    form.ariaBusy = false
+  }
+}

data/app/javascript/spree/storefront/controllers/wished_item_controller.js

@@ -0,0 +1,69 @@
+// this is a super simple controller to control the state of the add to wishlist icon state
+
+import { Controller } from '@hotwired/stimulus'
+import { post, destroy } from '@rails/request.js'
+export default class extends Controller {
+  static targets = ['add', 'remove']
+  static values = {
+    variantId: String,
+  }
+
+  connect() {
+    const wishedVariantIds = window.wishedVariantIds || [];
+    const variantId = this.variantIdValue;
+
+    if (wishedVariantIds.includes(variantId)) {
+      this.showRemoveButton();
+    } else {
+      this.showAddButton();
+    }
+  }
+
+  add = async (event) => {
+    event.preventDefault()
+
+    const body = new FormData()
+    body.append('wished_item[variant_id]', this.variantIdValue)
+
+    const headers = {}
+
+    const response = await post('/account/wishlist/wished_items', { 
+      body: body,
+      headers: headers,
+      responseKind: 'turbo-stream'
+    })
+    if (response.ok) {
+      this.showRemoveButton();
+    } else {
+      console.error('Error adding item to wishlist');
+      window.alert('Error adding item to wishlist');
+    }
+  }
+
+  remove = async (event) => {
+    event.preventDefault()
+
+    const headers = {}
+
+    const response = await destroy(`/account/wishlist/wished_items/${this.variantIdValue}`, { 
+      headers: headers,
+      responseKind: 'turbo-stream'
+    })
+    if (response.ok) {
+      this.showAddButton();
+    } else {
+      console.error('Error removing item from wishlist');
+      window.alert('Error removing item from wishlist');
+    }
+  }
+
+  showAddButton() {
+    this.addTarget.classList.remove('hidden');
+    this.removeTarget.classList.add('hidden');
+  }
+
+  showRemoveButton() {
+    this.addTarget.classList.add('hidden');
+    this.removeTarget.classList.remove('hidden');
+  }
+}

data/app/javascript/spree/storefront/helpers/lazy_load_controllers_with_manifest.js

@@ -0,0 +1,78 @@
+const controllerAttribute = "data-controller"
+
+// This function is based on `lazyLoadControllersFrom` function from Stimulus.
+// https://github.com/hotwired/stimulus-rails/blob/main/app/assets/javascripts/stimulus-loading.js
+// We need to slightly modify it to fit our needs, mostly to make allow list of controllers to be loaded and to use manifest when controller is not in the controllers directory.
+// More information about what is `manifest` and what are `controllers` can be found in the `application.js` file.
+
+export function lazyLoadControllersFromManifest(controllers, under, application, manifest = {}, element = document) {
+  lazyLoadExistingControllers(controllers, under, application, manifest, element)
+  lazyLoadNewControllers(controllers, under, application, manifest, element)
+}
+
+function lazyLoadExistingControllers(controllers, under, application, manifest, element) {
+  queryControllerNamesWithin(element).forEach(controllerName => {
+    if (controllers.includes(controllerName)) {
+      loadController(controllerName, under, application, manifest)
+    }
+  }
+  )
+}
+
+function lazyLoadNewControllers(controllers, under, application, manifest, element) {
+  new MutationObserver((mutationsList) => {
+    for (const { attributeName, target, type } of mutationsList) {
+      switch (type) {
+        case "attributes": {
+          if (attributeName == controllerAttribute && target.getAttribute(controllerAttribute)) {
+            extractControllerNamesFrom(target).forEach(controllerName => {
+              if (controllers.includes(controllerName)) {
+                loadController(controllerName, under, application, manifest)
+              }
+            }
+            )
+          }
+          break;
+        }
+
+        case "childList": {
+          lazyLoadExistingControllers(controllers, under, application, manifest, target)
+          break;
+        }
+      }
+    }
+  }).observe(element, { attributeFilter: [controllerAttribute], subtree: true, childList: true })
+}
+
+function queryControllerNamesWithin(element) {
+  return Array.from(element.querySelectorAll(`[${controllerAttribute}]`)).map(extractControllerNamesFrom).flat()
+}
+
+function extractControllerNamesFrom(element) {
+  return element.getAttribute(controllerAttribute).split(/\s+/).filter(content => content.length)
+}
+
+function loadController(name, under, application, manifest) {
+  if (canRegisterController(name, application)) {
+    import(controllerFilename(name, under, manifest))
+      .then(module => registerController(name, module, application))
+      .catch(error => console.error(`Failed to autoload controller: ${name}`, error))
+  }
+}
+
+function controllerFilename(name, under, manifest) {
+  if (manifest && manifest[name]) {
+    return manifest[name]
+  }
+  return `${under}/${name.replace(/--/g, "/").replace(/-/g, "_")}_controller`
+}
+
+function registerController(name, module, application) {
+  if (canRegisterController(name, application)) {
+    application.register(name, module.default)
+  }
+}
+
+function canRegisterController(name, application) {
+  return !application.router.modulesByIdentifier.has(name)
+}

data/app/javascript/spree/storefront/helpers/show_flash_message.js

@@ -0,0 +1,25 @@
+const FLASH_CLASSES = {
+  notice: ['alert-notice'],
+  success: ['alert-success'],
+  error: ['alert-error']
+}
+
+export default function showFlashMessage(messageText, type = 'notice') {
+  const flashesContainer = document.querySelector('#flashes')
+  const flashTemplate = document.querySelector('#flashMessage')
+
+  // prevent alerts duplication
+  flashesContainer.querySelectorAll('.flash-message').forEach(el => {
+    if (el.textContent === messageText) {
+      el.closest('[data-controller="alert"]').querySelector('[data-action="alert#close"]').click()
+    }
+  })
+
+  const newFlash = flashTemplate.content.cloneNode(true)
+  newFlash.querySelector('.flash-message').textContent = messageText
+  newFlash
+    .querySelector('[data-controller="alert"]')
+    .classList.add(...FLASH_CLASSES[type])
+
+  flashesContainer.appendChild(newFlash)
+}

data/app/models/spree/color_names.rb

@@ -0,0 +1,35 @@
+module Spree
+  class ColorNames
+    include Singleton
+
+    class << self
+      def colors
+        @colors ||= Rails.cache.fetch('color_names', expires_in: 1.day) do
+          file_path = File.join(Spree::Storefront::Engine.root, 'vendor', 'colornames.json')
+
+          if File.exist?(file_path)
+            JSON.parse(File.read(file_path))
+          else
+            []
+          end
+        end
+      end
+
+      def colors_cache
+        @colors_cache ||= colors.inject({}) do |hash, color|
+          hash[color['name'].downcase] = color
+          hash
+        end
+      end
+
+      def find_by_name(name)
+        colors_cache[name.downcase]
+      end
+
+      def split_by_color_name(name)
+        multi_color_regex = /(\s+and\s+|\s*-\s*|\s*&\s*|\s*\+\s*|\s*\/\s*)/
+        name.gsub(multi_color_regex, ',').split(',').map(&:strip)
+      end
+    end
+  end
+end

data/app/models/spree/contact.rb

@@ -0,0 +1,24 @@
+module Spree
+  class Contact < MailForm::Base
+    attribute :name, validate: true
+    attribute :email, validate: /\A([\w.%+\-]+)@([\w\-]+\.)+(\w{2,})\z/i
+    attribute :message, validate: true
+    attribute :customer_support_email, validate: :customer_support_email_bug?
+
+    def headers
+      {
+        subject: 'Contact Us',
+        to: customer_support_email.to_s,
+        from: %("#{name}" <#{email}>)
+      }
+    end
+
+    def customer_support_email_bug?
+      errors.add(:customer_support_email, 'is not there') if customer_support_email.nil? || customer_support_email.empty?
+    end
+
+    def [](key)
+      send(key)
+    end
+  end
+end