spree_storefront 5.0.3 → 5.1.0.beta

data/app/helpers/spree/theme_helper.rb

@@ -1,9 +1,16 @@
 module Spree
   module ThemeHelper
+    # Returns the current page, if not found it will fallback to the homepage
+    #
+    # @return [Spree::Page] the current page
     def current_page
       @current_page ||= current_theme.pages.find_by(type: 'Spree::Pages::Homepage')
     end
 
+    # Returns the current theme, if not found it will fallback to the default theme
+    # If `theme_id` is provided in the params, it will return the theme with the given id
+    #
+    # @return [Spree::Theme] the current theme
     def current_theme
       @current_theme ||= if params[:theme_id].present?
                            current_store.themes.find_by(id: params[:theme_id])
@@ -14,34 +21,56 @@ module Spree
       @current_theme ||= current_store.themes.first
     end
 
+    # Returns the current theme preview
+    #
+    # @return [Spree::ThemePreview] the current theme preview
     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
 
+    # Returns the current page preview
+    #
+    # @return [Spree::PagePreview] the current page preview
     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
 
+    # Returns the current page or page preview, preview takes priority
+    #
+    # @return [Spree::Page] the current page or page preview
     def current_page_or_preview
       @current_page_or_preview ||= current_page_preview || current_page
     end
 
+    # Returns the current theme or theme preview, preview takes priority
+    #
+    # @return [Spree::Theme] the current theme or theme preview
     def current_theme_or_preview
       @current_theme_or_preview ||= current_theme_preview || current_theme
     end
 
+    # Returns the logo set in the `Spree::PageSections::Header` section
+    #
+    # @return [ActiveStorage::Attachment] the logo
     def current_header_logo
       @current_header_logo ||= current_theme_or_preview.sections.find_by(type: 'Spree::PageSections::Header')&.logo
     end
 
+    # Returns whether the page builder is enabled
+    # It checks if there is a theme preview or page preview and if the `page_builder` param is set to `true`
+    #
+    # @return [Boolean] whether the page builder is enabled
     def page_builder_enabled?
       @page_builder_enabled ||= (current_theme_preview.present? || current_page_preview.present?) && params[:page_builder] == 'true'
     end
 
+    # Returns the theme layout sections, eg. header, footer, etc.
+    #
+    # @return [Hash] the theme layout sections
     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|
@@ -55,6 +84,11 @@ module Spree
       {}
     end
 
+    # Returns the theme setting for the given name
+    # if preview is present, it will return the preview setting, otherwise it will return the theme setting
+    #
+    # @param name [String] the name of the theme setting
+    # @return [String] the theme setting
     def theme_setting(name)
       if current_theme_preview.present?
         current_theme_preview.preferences.with_indifferent_access[name]
@@ -64,6 +98,9 @@ module Spree
     end
 
     # This helper allows us to specify opacity in Tailwind's color palette
+    #
+    # @param name [String] the name of the theme setting
+    # @return [String] the theme setting
     def theme_setting_rgb_components(name)
       hex_color = theme_setting(name)
       return unless hex_color.present?
@@ -73,6 +110,10 @@ module Spree
     end
 
     # https://makandracards.com/makandra/496431-ruby-how-to-convert-hex-color-codes-to-rgb-or-rgba
+    # Converts a hex color to rgb
+    #
+    # @param hex [String] the hex color
+    # @return [String] the rgb color
     def hex_color_to_rgb(hex)
       return unless hex.present?
 
@@ -80,6 +121,10 @@ module Spree
       "rgb(#{rgb.join(', ')})"
     end
 
+    # Converts a hex color to rgba
+    #
+    # @param hex [String] the hex color
+    # @return [String] the rgba color
     def hex_color_to_rgba(hex)
       return unless hex.present?
 
@@ -88,6 +133,10 @@ module Spree
       "rgba(#{rgb.join(', ')}, #{opacity.round(2)})"
     end
 
+    # Returns the section inline CSS styles
+    #
+    # @param section [Spree::PageSection] the section
+    # @return [String] the section inline CSS styles
     def section_styles(section)
       styles = {}
 
@@ -116,6 +165,10 @@ module Spree
       styles.map { |k, v| "#{k}: #{v}" }.join(';')
     end
 
+    # Returns the section heading inline CSS styles
+    #
+    # @param section [Spree::PageSection] the section
+    # @return [String] the section heading inline CSS styles
     def section_heading_styles(section)
       styles = {}
 
@@ -128,6 +181,11 @@ module Spree
       styles.compact_blank.map { |k, v| "#{k}: #{v}" }.join(';')
     end
 
+    # Returns the block HTML attributes
+    # it automatically adds data attributes for page builder
+    #
+    # @param block [Spree::PageBlock] the block
+    # @return [Hash] the block attributes
     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
 
@@ -147,6 +205,11 @@ module Spree
       tag.attributes(attributes)
     end
 
+    # Returns the link HTML attributes
+    # it automatically adds data attributes for page builder
+    #
+    # @param link [Spree::PageLink] the link
+    # @return [Hash] the link attributes
     def link_attributes(link, as_html: true)
       parent_type = case link.parent_type
                     when 'Spree::PageSection'
@@ -184,6 +247,11 @@ module Spree
       end
     end
 
+    # Returns the block inline CSS styles
+    #
+    # @param block [Spree::PageBlock] the block
+    # @param allowed_styles [Symbol] the allowed styles, if not provided, all styles will be returned
+    # @return [String] the block inline CSS styles
     def block_styles(block, allowed_styles: :all)
       styles = {}
 
@@ -229,12 +297,20 @@ module Spree
       styles.map { |k, v| "#{k}: #{v}" }.join(';')
     end
 
+    # Returns the block background color style
+    #
+    # @param block [Spree::PageBlock] the block
+    # @return [String] the block background color style
     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
 
+    # Returns the block CSS classes
+    #
+    # @param block [Spree::PageBlock] the block
+    # @return [String] the block CSS classes
     def block_css_classes(block)
       classes = []
       classes << "justify-#{block.preferred_justify}" if block.respond_to?(:preferred_justify) && block.preferred_justify.present?

data/app/helpers/spree/wishlist_helper.rb

@@ -1,5 +1,8 @@
 module Spree
   module WishlistHelper
+    # Returns the current wishlist for the current user.
+    #
+    # @return [Spree::Wishlist] The current wishlist
     def current_wishlist
       @current_wishlist ||= try_spree_current_user&.default_wishlist_for_store(current_store)
     end

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

@@ -28,20 +28,12 @@ export default class extends Controller {
   }
 
   connect() {
-    const selectedOptions = new Set()
-    this.optionTargets.forEach((option) => {
-      if (option.checked) {
-        selectedOptions.add(option.dataset.optionId)
-      }
-    })
-    const requiredOptions = new Set(this.requiredOptionsValue)
+    if (this.hasAddToWishlistTarget && this.variantFromOptionsDisabledValue) {
+      const notSelectedOptions = this.getNotSelectedOptions()
 
-    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 (notSelectedOptions.length === 0) {
+        this.addToWishlistTarget.disabled = true
+      }
     }
 
     if (this.hasDesktopMediaGalleryTarget && this.hasProductDetailsTarget) {
@@ -56,14 +48,14 @@ export default class extends Controller {
     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) => {
+    const notSelectedOptions = this.getNotSelectedOptions()
+
+    if (!notSelectedOptions.length) return
+
     e.preventDefault()
 
-    this.notSelectedOptions.forEach((option, index) => {
+    notSelectedOptions.forEach((option, index) => {
       const fieldSetElement = this.element.querySelector(`[data-option-id="${option}"]`)
       if (index === 0) {
         const toggleElement = fieldSetElement.querySelector('[data-controller="dropdown"]')
@@ -133,4 +125,15 @@ export default class extends Controller {
   enableForm = () => {
     this.disabledValue = false
   }
+
+  getNotSelectedOptions() {
+    const selectedOptions = new Set()
+    this.optionTargets.forEach((option) => {
+      if (option.checked) {
+        selectedOptions.add(option.dataset.optionId)
+      }
+    })
+    const requiredOptions = new Set(this.requiredOptionsValue)
+    return [...requiredOptions].filter((x) => !selectedOptions.has(x))
+  }
 }

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

@@ -3,41 +3,48 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = [ 'quantity', 'increase', 'decrease' ]
 
+  static values = {
+    min: { type: Number, default: 1 },
+    max: { type: Number, default: 9999 }
+  }
+
+  static classes = ['disabled']
+
   connect() {
-    if (this.quantity <= 1) this.disableButton(this.decreaseTarget)
+    if (this.quantity <= this.minValue) this.disableButton(this.decreaseTarget)
   }
 
   get quantity() {
-    return parseInt(this.quantityTarget.value) || 1
+    return parseInt(this.quantityTarget.value) || this.minValue
   }
 
   get maxQuantity() {
-    return parseInt(this.quantityTarget.max) || 9999
+    return parseInt(this.quantityTarget.max) || this.maxValue
   }
 
   set quantity(value) {
-    this.quantityTarget.value = parseInt(value) || 1
+    this.quantityTarget.value = parseInt(value) || this.minValue
   }
 
   increase() {
     if (this.quantity < this.maxQuantity) this.quantity = this.quantity + 1
-    if (this.quantity > 1) this.enableButton(this.decreaseTarget)
+    if (this.quantity > this.minValue) 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.minValue) this.quantity = this.quantity - 1
+    if (this.quantity == this.minValue && 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')
+    button.classList.add(...this.disabledClasses)
   }
 
   enableButton(button) {
     button.removeAttribute('disabled')
-    button.classList.remove('opacity-50', 'cursor-not-allowed')
+    button.classList.remove(...this.disabledClasses)
   }
 }

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

@@ -27,6 +27,8 @@ export default class extends Slideover {
 
     // Don't scroll the background when slideover is open
     lockScroll()
+
+    window.dispatchEvent(new Event('slideover:open'))
   }
 
   _hide() {

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

@@ -6,6 +6,8 @@ export default class extends Controller {
   static targets = ['add', 'remove']
   static values = {
     variantId: String,
+    createWishlistPath: String,
+    destroyWishlistPath: String
   }
 
   connect() {
@@ -27,7 +29,7 @@ export default class extends Controller {
 
     const headers = {}
 
-    const response = await post('/account/wishlist/wished_items', { 
+    const response = await post(this.createWishlistPathValue, { 
       body: body,
       headers: headers,
       responseKind: 'turbo-stream'
@@ -45,7 +47,7 @@ export default class extends Controller {
 
     const headers = {}
 
-    const response = await destroy(`/account/wishlist/wished_items/${this.variantIdValue}`, { 
+    const response = await destroy(this.destroyWishlistPathValue, { 
       headers: headers,
       responseKind: 'turbo-stream'
     })

data/app/views/devise/registrations/_form.html.erb

@@ -1,6 +1,6 @@
 <div class="card-dialog mx-auto lg:w-1/3">
   <% unless params[:checkout] %>
-    <h3 class="mb-5 font-semibold"><%= Spree.t(:create_account) %></h3>
+    <h3 class="mb-5 font-semibold"><%= Spree.t(:create_a_new_account) %></h3>
   <% end %>
   <%= render partial: 'spree/shared/error_messages', locals: { target: @user } %>
   <%= form_for resource, as: :spree_user, url: spree.registration_path(checkout: params[:checkout]), data: { turbo: false } do |f| %>
@@ -16,6 +16,6 @@
         </div>
       </div>
     </div>
-    <%= f.submit Spree.t(:create_account), class: 'btn-primary block w-full  lg:w-48  text-center mx-auto' %>
+    <%= f.submit Spree.t(:create_a_new_account), class: 'btn-primary block w-full  lg:w-48  text-center mx-auto' %>
   <% end %>
 </div>

data/app/views/devise/sessions/new.html.erb

@@ -21,5 +21,21 @@
       </div>
     <% end %>
     <%= render "devise/shared/links" %>
+
+    <% if current_order.present? &&
+          current_store&.prefers_guest_checkout? &&
+          stored_location&.include?(spree.checkout_path(current_order.token))
+    %>
+      <div class="relative my-5 flex items-center">
+        <div class="flex-grow border-t border-gray-200"></div>
+        <span class="mx-4 text-sm text-gray-500 uppercase"><%= Spree.t(:or) %></span>
+        <div class="flex-grow border-t border-gray-200"></div>
+      </div>
+
+      <div class="flex flex-col items-center gap-4">
+        <p class="text-sm text-gray-600"><%= Spree.t(:continue_without_logging_in) %></p>
+        <%= link_to Spree.t(:continue_as_guest), spree.checkout_path(current_order.token, guest: true), class: 'btn btn-secondary w-full max-w-sm', data: { turbo: false } %>
+      </div>
+    <% end %>
   </div>
 <% end %>

data/app/views/layouts/spree/checkout.html.erb

@@ -8,7 +8,7 @@
     <%= render 'spree/shared/head' %>
     <%= render 'spree/shared/custom_head' %>
   </head>
-  <body id="checkout-page" class="w-full bg-background text-text">
+  <body id="checkout-page" class="theme-<%= current_theme.class.name.demodulize.underscore %> w-full bg-background text-text">
     <%= render_storefront_partials(:body_start_partials) %>
     <%= current_store.storefront_custom_code_body_start&.html_safe %>
 

data/app/views/layouts/spree/storefront.html.erb

@@ -6,7 +6,7 @@
     <%= render 'spree/shared/json_ld' %>
     <%= current_store.storefront_custom_code_head&.html_safe %>
   </head>
-  <body class="bg-background w-full text-text <%= current_page&.slug %>-page <% if current_theme_preview.present? %>inside-page-builder<% end %>">
+  <body class="theme-<%= current_theme.class.name.demodulize.underscore %> bg-background w-full text-text <%= current_page&.slug %>-page <% if current_theme_preview.present? %>inside-page-builder<% end %>">
     <%= render_storefront_partials(:body_start_partials) %>
     <%= current_store.storefront_custom_code_body_start&.html_safe %>
 

data/app/views/spree/account/wished_items/create.turbo_stream.erb

@@ -5,4 +5,5 @@
 <%= turbo_stream.update "wishlist-icon" do %>
   <%= javascript_tag "wishedVariantIds = #{(current_wishlist.variant_ids).to_json.html_safe};" %>
   <%= render 'spree/shared/wishlist_icon' %>
+  <%= render_storefront_partials(:add_to_wishlist_partials) %>
 <% end %>

data/app/views/spree/addresses/edit.html.erb

@@ -15,6 +15,10 @@
       </div>
     <% end %>
   <% end %>
+<% elsif turbo_frame_request? %>
+  <%= turbo_frame_tag "edit_address_modal_#{@address.id}" do %>
+    <%= render partial: 'spree/account/addresses/edit_address_modal', locals: { address: @address } %>
+  <% end %>
 <% else %>
   <div class="page-container grid grid-cols-1 lg:grid-cols-12 lg:gap-6 lg:mt-6">
     <div class="lg:col-span-2">

data/app/views/spree/addresses/new.html.erb

@@ -15,6 +15,9 @@
       <% end %>
     </div>
   <% end %>
+  <%= turbo_frame_tag :new_address_modal do %>
+    <%= render partial: 'spree/account/addresses/new_address_modal', locals: { address: @address } %>
+  <% end %>
 <% else %>
   <% if params[:checkout].present? %>
     <div class="card-dialog mx-auto lg:w-1/3">

data/app/views/spree/checkout/edit.html.erb

@@ -39,7 +39,7 @@
               <%= Spree.t(:ship_address) %>
             </div>
             <div class="px-5 word-break">
-              <%= @order.ship_address.to_s.gsub('<br/>', ', ').html_safe %>
+              <%= sanitize(@order.ship_address.to_s.gsub('<br/>', ', ')) %>
             </div>
           </div>
           <div class="text-xs">
@@ -82,11 +82,13 @@
     <%= render partial: 'spree/checkout/payment', locals: { order: @order } %>
   <% elsif @order.delivery? %>
     <%= render partial: 'spree/checkout/delivery', locals: { order: @order } %>
-  <% else %>
+  <% elsif step = @order.checkout_steps.find { |s| s == @order.state } %>
     <%= form_for @order, url: spree.update_checkout_path(@order.token, @order.state), html: { id: "checkout_form_#{@order.state}" } do |form| %>
       <div>
         <%= form.hidden_field :state_lock_version unless @order.errors.any? %>
-        <%= render @order.state, form: form %>
+        <% if step.in?(%w[address delivery payment confirm]) %>
+          <%= render partial: "spree/checkout/#{step}", locals: { form: form } %>
+        <% end %>
       </div>
       <div>
         <%= button_tag Spree.t(:save_and_continue),

data/app/views/spree/line_items/create.turbo_stream.erb

@@ -6,6 +6,7 @@
   <%= turbo_stream.replace_all '.cart-contents' do %>
     <%= turbo_frame_tag cart_id(@order), class: 'cart-contents' do %>
       <%= render 'spree/orders/cart' %>
+      <%= render_storefront_partials(:add_to_cart_partials) %>
     <% end %>
   <% end %>
 

data/app/views/spree/line_items/destroy.turbo_stream.erb

@@ -5,6 +5,8 @@
     <% else %>
       <%= render 'spree/orders/cart' %>
     <% end %>
+
+    <%= render_storefront_partials(:remove_from_cart_partials) %>
   <% end %>
 <% end %>
 

data/app/views/spree/products/show.html.erb

@@ -1 +1,2 @@
-<%= render_page(current_page_or_preview, product: @product) %>
+<%= render_page(current_page_or_preview, product: @product) %>
+<%= render_storefront_partials(:product_partials) %>

data/app/views/themes/default/spree/account/addresses/_address.html.erb

@@ -1,10 +1,20 @@
 <li class="p-4 my-4 border border-accent lg:flex justify-between relative" id="<%= dom_id(address) %>">
   <%= render 'spree/shared/address', address: address %>
   <div class="flex gap-6 h-6 lg:h-10 mt-6 lg:mt-0">
-    <%= link_to spree.edit_address_path(address), class: 'flex gap-2 lg:p-2' do %>
-      <%= render 'spree/shared/icons/edit' %>
-      <span class="uppercase text-sm font-semibold tracking-widest"><%= Spree.t(:edit_address) %></span>
-    <% end %>
+    <div data-controller="modal" data-modal-allow-background-close="true">
+      <%= button_tag type: "button", class: 'flex gap-2 lg:p-2', data: { action: "click->modal#open" } do %>
+        <%= render 'spree/shared/icons/edit' %>
+        <span class="uppercase text-sm font-semibold tracking-widest"><%= Spree.t(:edit) %></span>
+      <% end %>
+      <%= turbo_frame_tag "edit_address_modal_#{address.id}",
+            src: spree.edit_address_path(address),
+            loading: :lazy,
+            data: {
+              modal_target: "container", 
+              action: "click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
+            },
+            class: "hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center z-[9999]" %>
+    </div>
     <div
                   data-controller="modal"
                   data-modal-allow-background-close="true"

data/app/views/themes/default/spree/account/addresses/_edit_address_modal.html.erb

@@ -0,0 +1,38 @@
+<div class="bg-white h-[90vh] lg:h-[70vh] w-full lg:w-1/3 flex flex-col overflow-hidden">
+  <%= form_for @address, method: :put, html: { class: "flex flex-col h-full", data: { turbo_frame: "_top" } } do |f| %>
+    <div class="px-8 py-6 border-b shrink-0">
+      <div class="flex justify-between items-center">
+        <h3 class="text-xl lg:text-2xl font-medium lg:font-semibold capitalize">
+          <%= Spree.t(:edit_address) %>
+        </h3>
+        <button data-action="click->modal#close" class="ml-4">
+          <%= render 'spree/shared/icons/close' %>
+          <span class="sr-only"><%= Spree.t(:close) %></span>
+        </button>
+      </div>
+      <%= render 'spree/shared/error_messages', target: @address, class: 'alert-error text-center mt-4 p-2' %>
+    </div>
+    <div class="overflow-y-auto px-8 py-2 grow">
+      <div class="py-4 text-left">
+        <%= render 'spree/addresses/form',
+          address_name: 'address',
+          address_form: f,
+          address_type: 'shipping',
+          address: @address %>
+      </div>
+      <%= label_tag "default_shipping", class: "flex items-center gap-2 text-sm mb-4" do %>
+        <%= check_box_tag "default_shipping", "true", @address.user_default_shipping?, class: 'input-checkbox input-address-default', disabled: @address.user_default_shipping? %>
+        <%= Spree.t('address_book.set_as_default_delivery_address') %>
+      <% end %>
+      <%= label_tag "default_billing", class: "flex items-center gap-2 text-sm mb-4" do %>
+        <%= check_box_tag "default_billing", "true", @address.user_default_billing?, class: 'input-checkbox input-address-default', disabled: @address.user_default_billing? %>
+        <%= Spree.t('address_book.set_as_default_billing_address') %>
+      <% end %>
+    </div>
+    <div class="border-t border-default px-8 py-4 flex justify-end gap-8 shrink-0">
+      <%= button_tag Spree.t(:cancel), class: 'uppercase text-sm font-semibold', data: { action: 'click->modal#close' } %>
+      <%= hidden_field_tag :from_modal, "true" %>
+      <%= f.submit Spree.t(:update), class: 'btn-primary w-48' %>
+    </div>
+  <% end %>
+</div>

data/app/views/themes/default/spree/account/addresses/_new_address_modal.html.erb

@@ -0,0 +1,38 @@
+<div class="bg-white h-[90vh] lg:h-[70vh] w-full lg:w-1/3 flex flex-col overflow-hidden">
+  <%= form_for @address, html: { class: "flex flex-col h-full", data: { turbo_frame: "_top" } } do |f| %>
+    <div class="px-8 py-6 border-b shrink-0">
+      <div class="flex justify-between items-center">
+        <h3 class="text-xl lg:text-2xl font-medium lg:font-semibold capitalize">
+          <%= Spree.t(:add_address) %>
+        </h3>
+        <button data-action="click->modal#close" class="ml-4">
+          <%= render 'spree/shared/icons/close' %>
+          <span class="sr-only"><%= Spree.t(:close) %></span>
+        </button>
+      </div>
+      <%= render 'spree/shared/error_messages', target: @address, class: 'alert-error text-center mt-4 p-2' %>
+    </div>
+    <div class="overflow-y-auto px-8 py-2 grow">
+      <div class="py-4 text-left">
+        <%= render 'spree/addresses/form',
+          address_name: 'address',
+          address_form: f,
+          address_type: 'shipping',
+          address: @address %>
+      </div>
+      <%= label_tag "default_shipping", class: "flex items-center gap-2 text-sm mb-4" do %>
+        <%= check_box_tag "default_shipping", "true", true, class: 'input-checkbox' %>
+        <%= Spree.t('address_book.set_as_default_delivery_address') %>
+      <% end %>
+      <%= label_tag "default_billing", class: "flex items-center gap-2 text-sm mb-4" do %>
+        <%= check_box_tag "default_billing", "true", true, class: 'input-checkbox' %>
+        <%= Spree.t('address_book.set_as_default_billing_address') %>
+      <% end %>
+    </div>
+    <div class="border-t border-default px-8 py-4 flex justify-end gap-8 shrink-0">
+      <%= button_tag Spree.t(:cancel), class: 'uppercase text-sm font-semibold', data: { action: 'click->modal#close' } %>
+      <%= hidden_field_tag :from_modal, "true" %>
+      <%= f.submit Spree.t(:add), class: 'btn-primary w-48', data: { test_id: 'add-address-button' } %>
+    </div>
+  <% end %>
+</div>

data/app/views/themes/default/spree/account/addresses/index.html.erb

@@ -12,14 +12,34 @@
           <%= render partial: 'spree/account/addresses/address', collection: @addresses, cached: ->a {[*spree_base_cache_scope.call(a), try_spree_current_user.ship_address_id, try_spree_current_user.bill_address_id]}, as: :address %>
         </ul>
         <div class="flex">
-          <%= link_to Spree.t(:add_address), spree.new_address_path, class: 'btn-primary block w-full lg:w-auto' %>
+          <div data-controller="modal" data-modal-allow-background-close="true">
+            <%= button_tag Spree.t(:add), type: "button", class: "btn-primary block w-full lg:w-auto", data: { action: "click->modal#open" } %>
+            <%= turbo_frame_tag :new_address_modal, 
+                  src: spree.new_address_path,
+                  loading: :lazy,
+                  data: { 
+                    modal_target: "container", 
+                    action: "click->modal#closeBackground keyup@window->modal#closeWithKeyboard" 
+                  },
+                  class: "hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center z-[9999]" %>
+          </div>
         </div>
       <% else %>
         <div class="text-center py-6">
           <p class="mb-2 font-medium uppercase"><%= Spree.t('storefront.account.no_addresses_title') %></p>
           <p><%= Spree.t('storefront.account.no_addresses_description') %></p>
           <div class="flex mt-8 justify-center">
-            <%= link_to Spree.t(:add), spree.new_address_path, class: 'btn-primary block' %>
+            <div data-controller="modal" data-modal-allow-background-close="true">
+              <%= button_tag Spree.t(:add), type: "button", class: "btn-primary block", data: { action: "click->modal#open" } %>
+              <%= turbo_frame_tag :new_address_modal,
+                    src: spree.new_address_path,
+                    loading: :lazy,
+                    data: { 
+                      modal_target: "container", 
+                      action: "click->modal#closeBackground keyup@window->modal#closeWithKeyboard" 
+                    },
+                    class: "hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center z-[9999]" %>
+            </div>
           </div>
         </div>
       <% end %>

data/app/views/themes/default/spree/orders/_line_item_quantity.html.erb

@@ -1,6 +1,6 @@
 <div class="flex items-center">
   <%= form_for line_item, url: spree.line_item_url(line_item, order_token: line_item.order.token), data: { controller: 'turbo-stream-form' } do |item_form| %>
-    <div class="quantity-picker" data-controller="quantity-picker">
+    <div class="quantity-picker" data-controller="quantity-picker" data-quantity-picker-disabled-class="opacity-50 cursor-not-allowed">
       <!-- this is a dummy button to work with turbo frame forms when hitting ENTER -->
       <%= button_tag render('spree/shared/icons/minus'), type: 'submit', class: 'hidden' %>
       <%= quantity_modifier_button_tag render('spree/shared/icons/minus'), type: 'submit', action: 'decrease', class: 'quantity-decrease-button' %>