spree_storefront 5.0.0.rc1

data/app/helpers/spree/theme_helper.rb

@@ -0,0 +1,244 @@
+module Spree
+  module ThemeHelper
+    def current_page
+      @current_page ||= current_theme.pages.find_by(type: 'Spree::Pages::Homepage')
+    end
+
+    def current_theme
+      @current_theme ||= if params[:theme_id].present?
+                           current_store.themes.find_by(id: params[:theme_id])
+                         else
+                           current_store.default_theme || current_store.themes.first
+                         end
+    ensure
+      @current_theme ||= current_store.themes.first
+    end
+
+    def current_theme_preview
+      return if params[:theme_preview_id].blank?
+
+      @current_theme_preview ||= current_theme.previews.find_by(id: params[:theme_preview_id])
+    end
+
+    def current_page_preview
+      return if params[:page_preview_id].blank?
+
+      @current_page_preview ||= current_page.previews.find_by(id: params[:page_preview_id])
+    end
+
+    def current_page_or_preview
+      @current_page_or_preview ||= current_page_preview || current_page
+    end
+
+    def current_theme_or_preview
+      @current_theme_or_preview ||= current_theme_preview || current_theme
+    end
+
+    def current_header_logo
+      @current_header_logo ||= current_theme_or_preview.sections.find_by(type: 'Spree::PageSections::Header')&.logo
+    end
+
+    def page_builder_enabled?
+      @page_builder_enabled ||= (current_theme_preview.present? || current_page_preview.present?) && params[:page_builder] == 'true'
+    end
+
+    def theme_layout_sections
+      @theme_layout_sections ||= current_theme_or_preview.sections.includes(:links, { asset_attachment: :blob },
+                                                                            { blocks: [:rich_text_text, :links] }).all.each_with_object({}) do |section, hash|
+        hash[section.type.to_s.demodulize.underscore] = section
+      end
+    rescue StandardError => e
+      raise e unless Rails.env.production?
+
+      Rails.error.report(e, context: { theme_id: current_theme_or_preview.id }, source: 'spree.storefront')
+
+      {}
+    end
+
+    def theme_setting(name)
+      if current_theme_preview.present?
+        current_theme_preview.preferences.with_indifferent_access[name]
+      elsif current_theme.present?
+        current_theme.preferences.with_indifferent_access[name]
+      end
+    end
+
+    # This helper allows us to specify opacity in Tailwind's color palette
+    def theme_setting_rgb_components(name)
+      hex_color = theme_setting(name)
+      return unless hex_color.present?
+
+      rgb = hex_color[0..6].match(/^#(..)(..)(..)$/).captures.map(&:hex)
+      rgb.join(', ')
+    end
+
+    # https://makandracards.com/makandra/496431-ruby-how-to-convert-hex-color-codes-to-rgb-or-rgba
+    def hex_color_to_rgb(hex)
+      return unless hex.present?
+
+      rgb = hex[0..6].match(/^#(..)(..)(..)$/).captures.map(&:hex)
+      "rgb(#{rgb.join(', ')})"
+    end
+
+    def hex_color_to_rgba(hex)
+      return unless hex.present?
+
+      *rgb, alpha = hex.match(/^#(..)(..)(..)(..)?$/).captures.map { |hex_pair| hex_pair&.hex }
+      opacity = (alpha || 255) / 255.0
+      "rgba(#{rgb.join(', ')}, #{opacity.round(2)})"
+    end
+
+    def section_styles(section)
+      styles = {}
+
+      bg_color = section.preferred_background_color.presence || theme_setting('background_color')
+      styles['background-color'] = bg_color
+      styles['--section-background'] = bg_color
+      text_color = section.preferred_text_color.presence || theme_setting('text_color')
+      styles['color'] = text_color
+      styles['--section-color'] = text_color
+      styles['border-color'] = section.preferred_border_color.presence || theme_setting('border_color')
+      styles['padding-top'] = "#{section.preferred_top_padding.presence}px"
+      styles['padding-bottom'] = "#{section.preferred_bottom_padding.presence}px"
+      styles['border-top-width'] = "#{section.preferred_top_border_width.presence}px"
+      border_bottom_width = "#{section.preferred_bottom_border_width.presence}px"
+      styles['border-bottom-width'] = border_bottom_width
+      styles['--section--border-bottom-width'] = border_bottom_width
+
+      if section.respond_to?(:preferred_button_text_color) && section.preferred_button_text_color.present?
+        styles['--button-text-color'] = section.preferred_button_text_color
+      end
+
+      if section.respond_to?(:preferred_button_background_color) && section.preferred_button_background_color.present?
+        styles['--button-background-color'] = section.preferred_button_background_color
+      end
+
+      styles.map { |k, v| "#{k}: #{v}" }.join(';')
+    end
+
+    def section_heading_styles(section)
+      styles = {}
+
+      styles['text-transform'] = :uppercase if theme_setting('headings_uppercase')
+      if section.respond_to?(:preferred_heading_bottom_padding) && section.preferred_heading_bottom_padding.present?
+        styles['padding-bottom'] =
+          "#{section.preferred_heading_bottom_padding}px"
+      end
+
+      styles.compact_blank.map { |k, v| "#{k}: #{v}" }.join(';')
+    end
+
+    def block_attributes(block, allowed_styles: :all)
+      has_width_desktop = block.respond_to?(:preferred_width_desktop) && block.preferred_width_desktop.present? ? "width-desktop='true'" : nil
+
+      attributes = {
+        data: {
+          editor_id: "block-#{block.id}",
+          editor_name: block.display_name,
+          editor_parent_id: "section-#{block.section_id}",
+          editor_link: spree.respond_to?(:edit_admin_page_section_block_path) ? spree.edit_admin_page_section_block_path(block.section, block) : nil
+        },
+        id: "block-#{block.id}",
+        class: "block-#{block.class.name.demodulize.underscore.dasherize}",
+        style: block_styles(block, allowed_styles: allowed_styles),
+        width_desktop: has_width_desktop
+      }.compact_blank
+
+      tag.attributes(attributes)
+    end
+
+    def link_attributes(link, as_html: true)
+      parent_type = case link.parent_type
+                    when 'Spree::PageSection'
+                      :section
+                    when 'Spree::PageBlock'
+                      :block
+                    else
+                      return ''
+                    end
+
+      attributes = if spree.respond_to?(:admin) && spree.respond_to?(:edit_admin_page_link_path) && spree.respond_to?(:edit_admin_page_section_block_path)
+                   {
+                      data: {
+                        editor_id: "link-#{link.id}",
+                        editor_name: link.label,
+                        editor_parent_id: "#{parent_type}-#{link.parent_id}",
+                        editor_link: case parent_type
+                                    when :section
+                                      spree.edit_admin_page_link_path(link, page_section_id: link.parent_id)
+                                    when :block
+                                      spree.edit_admin_page_link_path(link, block_id: link.parent_id)
+                                    end
+                      },
+                      id: "link-#{link.id}",
+                      class: "link-#{link.class.name.demodulize.underscore.dasherize}"
+                    }
+                  else
+                   {}
+                  end
+
+      if as_html
+        tag.attributes(attributes)
+      else
+        attributes
+      end
+    end
+
+    def block_styles(block, allowed_styles: :all)
+      styles = {}
+
+      styles['text-align'] = block.preferred_text_alignment if block.respond_to?(:preferred_text_alignment) && block.preferred_text_alignment.present?
+      styles['width'] = "#{block.preferred_width_desktop}%" if block.respond_to?(:preferred_width_desktop) && block.preferred_width_desktop.present?
+      if block.respond_to?(:preferred_container_alignment)
+        styles['margin'] = case block.preferred_container_alignment
+                           when 'center'
+                             '0 auto'
+                           when 'right'
+                             '0 0 0 auto'
+                           else
+                             '0 auto 0 0'
+                           end
+      end
+      styles['color'] = if block.respond_to?(:preferred_text_color) && block.preferred_text_color.present?
+                          block.preferred_text_color
+                        else
+                          'var(--section-color)'
+                        end
+
+      styles['padding-top'] = "#{block.preferred_top_padding}px" if block.respond_to?(:preferred_top_padding) && block.preferred_top_padding.present?
+      if block.respond_to?(:preferred_bottom_padding) && block.preferred_bottom_padding.present?
+        styles['padding-bottom'] = "#{block.preferred_bottom_padding}px"
+      end
+      styles['text-transform'] = :uppercase if theme_setting('headings_uppercase') && block.type == 'heading'
+      styles['background-color'] = if block.respond_to?(:preferred_background_color) && block.preferred_background_color.present?
+                                     block.preferred_background_color
+                                   else
+                                     'var(--section-background)'
+                                   end
+
+      if block.respond_to?(:preferred_button_background_color) && block.preferred_button_background_color.present?
+        styles['--button-background-color'] = block.preferred_button_background_color
+      end
+      if block.respond_to?(:preferred_button_text_color) && block.preferred_button_text_color.present?
+        styles['--button-text-color'] = block.preferred_button_text_color
+      end
+
+      styles = styles.compact_blank
+      styles = styles.slice(*allowed_styles) if allowed_styles != :all
+
+      styles.map { |k, v| "#{k}: #{v}" }.join(';')
+    end
+
+    def block_background_color_style(block)
+      return nil unless block.respond_to?(:preferred_background_color) && block.preferred_background_color.present?
+
+      "background-color: #{block.preferred_background_color};"
+    end
+
+    def block_css_classes(block)
+      classes = []
+      classes << "justify-#{block.preferred_justify}" if block.respond_to?(:preferred_justify) && block.preferred_justify.present?
+      classes.join(',')
+    end
+  end
+end

data/app/helpers/spree/turbo_helper.rb

@@ -0,0 +1,13 @@
+module Spree
+  module TurboHelper
+    def spree_turbo_update_flashes
+      turbo_stream.update 'flash' do
+        render 'spree/shared/flashes'
+      end
+    end
+
+    def spree_turbo_update_cart(order = current_order)
+      turbo_stream.update_all '.cart-counter', order.item_count.positive? ? order.item_count : ''
+    end
+  end
+end

data/app/helpers/spree/turbo_stream_actions_helper.rb

@@ -0,0 +1,13 @@
+module Spree
+  module TurboStreamActionsHelper
+    def slideover_open(slideover_name, target)
+      turbo_stream_action_tag "#{slideover_name}:open", target: target
+    end
+
+    def search_suggestions_close
+      turbo_stream_action_tag 'search-suggestions:close'
+    end
+
+    ::Turbo::Streams::TagBuilder.prepend(self)
+  end
+end

data/app/helpers/spree/wishlist_helper.rb

@@ -0,0 +1,7 @@
+module Spree
+  module WishlistHelper
+    def current_wishlist
+      @current_wishlist ||= try_spree_current_user&.default_wishlist_for_store(current_store)
+    end
+  end
+end

data/app/javascript/spree/storefront/application.js

@@ -0,0 +1,156 @@
+import '@hotwired/turbo-rails'
+import { Application } from '@hotwired/stimulus'
+
+let application
+
+if (typeof window.Stimulus === "undefined") {
+  application = Application.start()
+  application.debug = false
+  window.Stimulus = application
+} else {
+  application = window.Stimulus
+}
+
+import { Alert, Toggle } from 'tailwindcss-stimulus-components'
+application.register('alert', Alert)
+application.register('toggle', Toggle)
+
+
+// We need to preload the carousel controller, otherwise it causes a huge layout shift when it's loaded.
+import CarouselController from 'spree/storefront/controllers/carousel_controller'
+application.register('carousel', CarouselController)
+
+// We need to make allow list of controllers to be loaded, this is needed because by default Stimulus will try to load all the controllers that it encounters in the DOM.
+// Since Spree Storefront can be extended with custom views/partials, we need to be able to control which controllers can be loaded from our application.
+
+const controllers = [
+  'accordion',
+  'account-nav',
+  'address-autocomplete',
+  'address-form',
+  'auto-submit',
+  'card-validation',
+  'cart',
+  'checkout-address-book',
+  'checkout-delivery',
+  'checkout-promotions',
+  'checkout-summary',
+  'clear-input',
+  'copy-input',
+  'dropdown',
+  'enable-button',
+  'header',
+  'infinite-scroll',
+  'lightbox',
+  'mobile-nav',
+  'modal',
+  'no-ui-slider',
+  'pdp-desktop-gallery',
+  'plp-variant-picker',
+  'product-form',
+  'quantity-picker',
+  'read-more',
+  'reveal',
+  'scroll-to',
+  'search-suggestions',
+  'searchable-list',
+  'slideover-account',
+  'slideover',
+  'sticky-button',
+  'toggle-menu',
+  'turbo-stream-form',
+  'wished-item',
+]
+
+
+// Manifest is needed to load controllers that names don't match the controller filename, or are not in the controllers directory.
+const manifest = {
+  "auto-submit": "@stimulus-components/auto-submit",
+  "address-form": "spree/core/controllers/address_form_controller",
+  "address-autocomplete": "spree/core/controllers/address_autocomplete_controller",
+  "enable-button": "spree/core/controllers/enable_button_controller",
+  "slideover-account": "spree/storefront/controllers/slideover_controller",
+  "reveal": "stimulus-reveal-controller",
+  "scroll-to": "stimulus-scroll-to",
+  "read-more": "stimulus-read-more",
+}
+
+import { lazyLoadControllersFromManifest } from "spree/storefront/helpers/lazy_load_controllers_with_manifest"
+
+lazyLoadControllersFromManifest(controllers, "spree/storefront/controllers", application, manifest)
+
+
+const scrollToOverlay = (overlay) => {
+  const { top, left } = overlay.getBoundingClientRect()
+
+  window.scroll({
+    behavior: 'smooth',
+    top: window.scrollY + top - window.innerHeight / 2 + overlay.offsetHeight / 2,
+    left: left + window.scrollX
+  })
+}
+
+// page builder UI
+const toggleHighlightEditorOverlay = (query) => {
+  const overlay = document.querySelector(query)
+
+  if (overlay) {
+    if (overlay.classList.contains('editor-overlay-hover')) {
+      overlay.classList.remove('editor-overlay-hover')
+    } else {
+      overlay.classList.add('editor-overlay-hover')
+
+      scrollToOverlay(overlay)
+    }
+  }
+}
+
+
+const makeOverlayActive = (id) => {
+  const overlay = document.querySelector(`.editor-overlay[data-editor-id="${id}"]`)
+
+  document.querySelectorAll('.editor-overlay-active').forEach((el) => {
+    el.classList.remove('editor-overlay-active')
+  })
+
+  if (overlay) {
+    overlay.classList.add('editor-overlay-active')
+    scrollToOverlay(overlay)
+  }
+}
+
+const toggleHighlightElement = (id) => {
+  toggleHighlightEditorOverlay(`.editor-overlay[data-editor-id="${id}"]`)
+}
+
+window.scrollToOverlay = scrollToOverlay
+window.toggleHighlightElement = toggleHighlightElement
+window.makeOverlayActive = makeOverlayActive
+
+document.addEventListener('turbo:submit-start', () => {
+  Turbo.navigator.delegate.adapter.progressBar.setValue(0)
+  Turbo.navigator.delegate.adapter.progressBar.show()
+})
+
+document.addEventListener('turbo:submit-end', () => {
+  Turbo.navigator.delegate.adapter.progressBar.setValue(100)
+  Turbo.navigator.delegate.adapter.progressBar.hide()
+})
+
+function replaceCsrfMetaTags() {
+  const csrfMetaTagsTemplate = document.querySelector('template#csrf_meta_tags')
+  if (!csrfMetaTagsTemplate) return
+
+  const csrfMetaTags = csrfMetaTagsTemplate.content.cloneNode(true)
+
+  document.head.querySelectorAll('meta[name="csrf-token"]').forEach((tag) => tag.remove())
+  document.head.querySelectorAll('meta[name="csrf-param"]').forEach((tag) => tag.remove())
+
+  document.head.appendChild(csrfMetaTags)
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', replaceCsrfMetaTags)
+} else {
+  replaceCsrfMetaTags()
+}

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

@@ -0,0 +1,25 @@
+import AccordionController from '@kanety/stimulus-accordion'
+
+export default class extends AccordionController {
+  static values = {
+    storeKey: String,
+    closeOthers: Boolean
+  }
+
+  toggle(e) {
+    const closeOthers = this.hasCloseOthersValue ? this.closeOthersValue : true
+    this.togglers.forEach((toggler) => {
+      if (toggler.contains(e.target)) {
+        if (this.isOpened(toggler)) {
+          this.close(toggler)
+        } else {
+          this.open(toggler)
+        }
+      } else if (this.isOpened(toggler) && closeOthers) {
+        this.close(toggler)
+      }
+    })
+
+    e.preventDefault()
+  }
+}

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

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  connect() {
+    this.element.querySelector('[data-active=true]').scrollIntoView({
+      block: 'nearest',
+      inline: 'center'
+    })
+  }
+}

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

@@ -0,0 +1,103 @@
+import { Controller } from "@hotwired/stimulus"
+import valid from "card-validator"
+
+export default class extends Controller {
+  static targets = ["number", "expiry", "cvv", "typeContainer", "ccType"]
+
+  connect() {
+    this.numberTarget.addEventListener('input', this.validateCard.bind(this))
+    this.expiryTarget.addEventListener('input', this.validateExpiry.bind(this))
+    this.cvvTarget.addEventListener('input', this.validateCVV.bind(this))
+  }
+
+  validateCard(event) {
+    let value = event.target.value.replace(/\D/g, '')
+    const validation = valid.number(value)
+
+    // Format the card number with spaces
+    if (validation.card) {
+      const gaps = validation.card.gaps
+      let formatted = ''
+      let currentPosition = 0
+
+      // Add spaces based on the card type's gap positions
+      for (let i = 0; i < value.length; i++) {
+        if (gaps.includes(i)) {
+          formatted += ' '
+        }
+        formatted += value[i]
+      }
+
+      // Update input value with formatted number
+      event.target.value = formatted.trim()
+    } else {
+      // Default formatting for unknown card types (4 digit groups)
+      event.target.value = value.replace(/(.{4})/g, '$1 ').trim()
+    }
+
+    if (validation.isPotentiallyValid) {
+      event.target.classList.remove('invalid')
+    } else {
+      event.target.classList.add('invalid')
+    }
+
+    if (validation.card) {
+      // Update CVV validation length based on card type
+      this.cvvTarget.setAttribute('maxlength', validation.card.code.size)
+
+      // Update card type field and icon
+      const cardType = validation.card.type
+      this.ccTypeTarget.value = cardType.replace(/-/g, '_')
+      this.updateCardIcon(cardType)
+    } else {
+      this.ccTypeTarget.value = ''
+      this.typeContainerTarget.innerHTML = ''
+    }
+  }
+
+  updateCardIcon(cardType) {
+    const iconElement = document.getElementById(`credit-card-icon-${cardType}`)
+    if (iconElement) {
+      this.typeContainerTarget.innerHTML = iconElement.innerHTML
+    } else {
+      this.typeContainerTarget.innerHTML = ''
+    }
+  }
+
+  validateExpiry(event) {
+    let input = event.target.value.replace(/\D/g, '').substring(0, 6)
+
+    // Format as MM/YYYY
+    if (input.length > 2) {
+      input = input.substring(0, 2) + '/' + input.substring(2)
+    }
+
+    // Validate month
+    const monthValue = parseInt(input.substring(0, 2))
+    if (monthValue > 12) {
+      input = '12' + input.substring(2)
+    }
+
+    event.target.value = input
+
+    const [month, year] = input.split('/')
+    const validation = valid.expirationDate({ month, year })
+
+    if (validation.isPotentiallyValid) {
+      event.target.classList.remove('invalid')
+    } else {
+      event.target.classList.add('invalid')
+    }
+  }
+
+  validateCVV(event) {
+    const cvv = event.target.value
+    const validation = valid.cvv(cvv)
+
+    if (validation.isPotentiallyValid) {
+      event.target.classList.remove('invalid')
+    } else {
+      event.target.classList.add('invalid')
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+import Carousel from '@stimulus-components/carousel'
+
+export default class extends Carousel {
+  static targets = ['pagination']
+
+  get defaultOptions() {
+    const setStyle = (el, display) => {
+      if (Array.isArray(el)) {
+        el.forEach((cEl) => (cEl.style.display = display))
+      } else {
+        el.style.display = display
+      }
+    }
+
+    return Object.assign(super.defaultOptions, {
+      pagination: {
+        el: this.hasPaginationTarget ? this.paginationTarget : undefined
+      },
+      on: {
+        // Hide the arrow buttons if there are not needed
+        init: function () {
+          if (this.navigation.prevEl && this.navigation.nextEl) {
+            if (!this.allowSlidePrev && !this.allowSlideNext) {
+              setStyle(this.navigation.prevEl, 'none')
+              setStyle(this.navigation.nextEl, 'none')
+            }
+          }
+        },
+        resize: function () {
+          if (this.navigation.prevEl && this.navigation.nextEl) {
+            if (!this.allowSlidePrev && !this.allowSlideNext) {
+              setStyle(this.navigation.prevEl, 'none')
+              setStyle(this.navigation.nextEl, 'none')
+            } else {
+              // Let class hide/show the arrows
+              setStyle(this.navigation.prevEl, null)
+              setStyle(this.navigation.nextEl, null)
+            }
+          }
+        }
+      }
+    })
+  }
+}

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

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['container', 'spinner']
+
+  disableCart() {
+    this.containerTarget.classList.add('pointer-events-none', 'opacity-50')
+    this.spinnerTarget.classList.remove('hidden')
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ["list", "newAddressForm", "addressId", "submit"]
+
+  select(event) {
+    const radio = event.target
+    if (radio.value == 0) {
+      this.newAddressFormTarget.classList.remove('hidden')
+      this.addressIdTarget.value = null
+      this.submitTarget.setAttribute('disabled', true)
+    } else {
+      this.newAddressFormTarget.classList.add('hidden')
+      this.addressIdTarget.value = radio.value
+      this.submitTarget.removeAttribute('disabled')
+    }
+
+    Array.from(document.getElementsByClassName('address-book-actions')).forEach(
+      (item) => item.classList.add('hidden')
+    )
+    const actions = Array.from(
+      radio.parentElement.getElementsByClassName('address-book-actions')
+    )
+    if (actions.length > 0) {
+      actions[0].classList.remove('hidden')
+    }
+  }
+}