spree_storefront 5.0.0.rc1

data/app/presenters/spree/colors_preview_styles_presenter.rb

@@ -0,0 +1,84 @@
+module Spree
+  class ColorsPreviewStylesPresenter
+    def initialize(colors)
+      @colors = colors.compact_blank.map do |color|
+        case color
+        when String
+          color_name = CGI.unescapeHTML(color.strip)
+
+          { name: color_name, filter_name: color_name }
+        when Hash
+          color_name = CGI.unescapeHTML(color[:name].strip)
+          filter_name = color[:filter_name].present? ? CGI.unescapeHTML(color[:filter_name].strip) : color_name
+
+          { name: color_name, filter_name: filter_name }
+        end
+      end
+    end
+
+    def to_s
+      @to_s ||= if colors.any?
+                  css = ['<style>']
+
+                  colors.each do |color|
+                    css_color = css_colors_hash[color[:filter_name]] || color[:filter_name].gsub(' ', '')
+                    color_name = color[:name]
+                    css << <<~CSS
+                       @supports(background: #{css_color}) {
+                        .color-input[value="#{color_name}"] ~ .label-container .color-preview,
+                        [data-color="#{color_name}"] .color-preview {
+                          background: #{css_color};
+                          display: inline-flex;
+                        }
+                        .color-input[value="#{color_name}"] ~ .label-container .color-label,
+                        [data-color="#{color_name}"] .color-label {
+                          display: none;
+                        }
+                      }
+                    CSS
+                  end
+
+                  css << '</style>'
+
+                  css.join("\n")
+                end
+    end
+
+    private
+
+    attr_reader :colors
+
+    def css_colors_hash
+      @css_colors_hash ||= begin
+        colors_hash = {}
+
+        colors.each do |color|
+          color_name = color[:filter_name]
+          multi_colors = Spree::ColorNames.split_by_color_name(color_name)
+          hex_colors = multi_colors.map(&method(:find_color)).compact
+
+          if hex_colors.any?
+            colors_hash[color_name] = generate_css_color(hex_colors)
+          elsif (subcolors = color_name.split.compact) && subcolors.length > 1
+            subcolors = subcolors.map(&method(:find_color)).compact
+            colors_hash[color_name] = generate_css_color(subcolors)
+          end
+        end
+
+        colors_hash
+      end
+    end
+
+    def generate_css_color(hex_colors)
+      if hex_colors.length > 1
+        "linear-gradient(to right, #{hex_colors.join(', ')})"
+      elsif hex_colors.length == 1
+        hex_colors.first
+      end
+    end
+
+    def find_color(color)
+      Spree::ColorNames.find_by_name(color)&.dig('hex')
+    end
+  end
+end

data/app/presenters/spree/featured_product_presenter.rb

@@ -0,0 +1,42 @@
+module Spree
+  class FeaturedProductPresenter
+    def initialize(section, params:, currency:)
+      @section = section
+      @params = params
+      @currency = currency
+
+      initialize_selected_variants if product
+    end
+
+    attr_reader :selected_variant, :variant_from_options
+
+    delegate :product, to: :section
+
+    private
+
+    attr_reader :section, :params, :currency, :store
+
+    def initialize_selected_variants
+      options_hash = if params.present?
+                       params.split(',').to_h do |option|
+                         key, *value = option.split(':')
+                         [key, value.join(':')]
+                       end
+                     else
+                       {}
+                     end
+
+      variant_finder = Spree::Storefront::VariantFinder.new(
+        product: product,
+        variant_id: nil,
+        options_hash: options_hash,
+        current_currency: currency
+      )
+
+      @selected_variant, @variant_from_options =
+        Rails.cache.fetch([product.cache_key_with_version, 'variant-finder', currency, options_hash].compact) do
+          variant_finder.find
+        end
+    end
+  end
+end

data/app/presenters/spree/mega_nav_presenter.rb

@@ -0,0 +1,55 @@
+module Spree
+  class MegaNavPresenter
+    ColumnPresenter = Struct.new(:title, :links, :view_all_linkable, keyword_init: true)
+
+    def initialize(mega_nav)
+      @mega_nav = mega_nav
+    end
+
+    def main_link
+      @main_link ||=
+        if mega_nav.is_a?(Spree::PageBlocks::MegaNavWithSubcategories)
+          to_link(mega_nav.taxon)
+        else
+          mega_nav.links.first
+        end
+    end
+
+    def columns
+      @columns ||=
+        if mega_nav.is_a?(Spree::PageBlocks::MegaNavWithSubcategories)
+          subcategories = mega_nav.taxon&.self_and_descendants || []
+          main_subcategories = subcategories.find_all { |c| c.parent_id == mega_nav.taxon.id }.sort_by(&:position)
+
+          main_subcategories.first(max_columns).map do |child_category|
+            links = subcategories.find_all { |c| c.parent_id == child_category.id }.sort_by(&:position).map(&method(:to_link))
+            ColumnPresenter.new(title: child_category.name, links: links, view_all_linkable: child_category)
+          end.compact_blank
+        elsif mega_nav.is_a?(Spree::PageBlocks::MegaNav)
+          [ColumnPresenter.new(title: main_link.label, links: mega_nav.links.drop(1), view_all_linkable: main_link.linkable)]
+        else
+          []
+        end
+    end
+
+    private
+
+    attr_reader :mega_nav
+
+    def to_link(object)
+      if object.is_a?(Spree::Taxon)
+        Spree::PageLink.new(
+          linkable: object,
+          label: object.name,
+          open_in_new_tab: false
+        )
+      else
+        object
+      end
+    end
+
+    def max_columns
+      @max_columns ||= mega_nav.featured_taxon.present? ? 3 : 4
+    end
+  end
+end

data/app/views/devise/passwords/edit.html.erb

@@ -0,0 +1,22 @@
+<div class="card-dialog max-w-xl mx-auto py-10 px-4">
+  <h2 class="text-xl lg:text-2xl font-medium mb-4"><%= Spree.t(:change_password) %></h2>
+  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
+    <%= render "spree/shared/error_messages", target: resource %>
+    <%= f.hidden_field :reset_password_token %>
+    <div class="flex flex-col mb-4">
+      <%= f.label :password, Spree.t(:password) %>
+      <% if @minimum_password_length %>
+        <em>(<%= @minimum_password_length %> characters minimum)</em>
+      <% end %>
+      <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: 'text-input', required: true %>
+    </div>
+    <div class="flex flex-col mb-4">
+      <%= f.label :password_confirmation, Spree.t(:confirm_password) %>
+      <%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'text-input', required: true %>
+    </div>
+    <div class="actions">
+      <%= f.submit Spree.t(:reset_password), class: 'btn btn-primary' %>
+    </div>
+  <% end %>
+  <%= render "devise/shared/links" %>
+</div>

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

@@ -0,0 +1,16 @@
+<%= turbo_frame_tag :login do %>
+  <div class="card-dialog max-w-xl mx-auto py-10 px-4">
+    <h2 class="text-xl lg:text-2xl font-medium mb-4"><%= Spree.t(:forgot_password) %></h2>
+    <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }, data: { turbo_frame: '_top' }) do |f| %>
+      <%= render "spree/shared/error_messages", target: resource %>
+      <div class="flex flex-col mb-4">
+        <%= f.label :email, Spree.t(:email) %>
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'text-input', required: true %>
+      </div>
+      <div class="actions">
+        <%= f.submit Spree.t(:reset_password), class: 'btn btn-primary w-full' %>
+      </div>
+    <% end %>
+    <%= render "devise/shared/links" %>
+  </div>
+<% end %>

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

@@ -0,0 +1,21 @@
+<div class="card-dialog mx-auto lg:w-1/3">
+  <% unless params[:checkout] %>
+    <h3 class="mb-5 font-semibold"><%= Spree.t(:create_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| %>
+    <div class="flex flex-col gap-3 mb-3">
+      <%= f.email_field :email, class: 'text-input', placeholder: Spree.t(:email) %>
+
+      <div class="flex w-full">
+        <div class="w-1/2 pr-2">
+          <%= f.text_field :first_name, class: 'text-input w-full', placeholder: Spree.t(:first_name) %>
+        </div>
+        <div class="w-1/2 pl-2">
+          <%= f.text_field :last_name, class: 'text-input w-full', placeholder: Spree.t(:last_name) %>
+        </div>
+      </div>
+    </div>
+    <%= f.submit Spree.t(:create_account), class: 'btn-primary block w-full  lg:w-48  text-center mx-auto' %>
+  <% end %>
+</div>

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

@@ -0,0 +1,24 @@
+<div class="page-container grid grid-cols-1 lg:grid-cols-12 lg:gap-6 lg:mt-6">
+  <div class="lg:col-span-3">
+    <%= render 'spree/account/account_nav', current: 'account' %>
+  </div>
+  <div class="lg:col-span-8 lg:col-start-5 pb-6">
+    <h5 class="uppercase font-medium mb-4"><%= Spree.t(:change_password)  %></h5>
+    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, class: "flex flex-col gap-4" }, data: { turbo: false}) do |f| %>
+      <%= render "spree/shared/error_messages", target: resource %>
+      <div class="field">
+        <p><%= f.label :current_password, Spree.t(:current_password), class: 'text-xs text-neutral-600 block mb-2' %></p>
+        <p><%= f.password_field :current_password, class: 'text-input w-full', autocomplete: "current-password", minlength: @minimum_password_length, required: true %></p>
+      </div>
+      <div class="field">
+        <p><%= f.label :password, Spree.t(:new_password), class: 'text-xs text-neutral-600 block mb-2' %></p>
+        <p><%= f.password_field :password, class: 'text-input w-full', autocomplete: "new-password", minlength: @minimum_password_length, required: true %></p>
+      </div>
+      <div class="field">
+        <p><%= f.label :password_confirmation, Spree.t(:confirm_password), class: 'text-xs text-neutral-600 block mb-2' %></p>
+        <p><%= f.password_field :password_confirmation, class: 'text-input w-full', autocomplete: "new-password", minlength: @minimum_password_length, required: true %></p>
+      </div>
+      <%= f.submit Spree.t(:update), class: 'btn-primary w-full mb-6' %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,27 @@
+<%= turbo_frame_tag :login do %>
+  <div class="card-dialog max-w-xl mx-auto py-10 px-4">
+    <h2 class="text-xl lg:text-2xl font-medium mb-4"><%= Spree.t(:sign_up) %></h2>
+    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), data: { turbo_frame: '_top' }) do |f| %>
+      <%= render "spree/shared/error_messages", target: resource %>
+      <div class="flex flex-col mb-4">
+        <%= f.label :email, Spree.t(:email) %>
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'text-input', required: true %>
+      </div>
+      <div class="flex flex-col mb-4">
+        <%= f.label :password, Spree.t(:password) %>
+        <% if @minimum_password_length %>
+          <em>(<%= @minimum_password_length %> characters minimum)</em>
+        <% end %>
+        <%= f.password_field :password, autocomplete: "new-password", class: 'text-input', required: true %>
+      </div>
+      <div class="flex flex-col mb-4">
+        <%= f.label :password_confirmation, Spree.t(:confirm_password) %>
+        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'text-input', required: true %>
+      </div>
+      <div class="actions">
+        <%= f.submit Spree.t(:sign_up), class: 'btn btn-primary w-full' %>
+      </div>
+    <% end %>
+    <%= render "devise/shared/links" %>
+  </div>
+<% end%>

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

@@ -0,0 +1,25 @@
+<%= turbo_frame_tag :login do %>
+  <div class="card-dialog max-w-xl mx-auto py-10 px-4">
+    <h2 class="text-xl lg:text-2xl font-medium mb-4"><%= Spree.t(:login) %></h2>
+    <%= form_for(resource, as: resource_name, url: spree_login_path, data: { turbo: false }) do |f| %>
+      <div class="flex flex-col mb-4">
+        <%= f.label :email, Spree.t(:email) %>
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'text-input', required: true %>
+      </div>
+      <div class="flex flex-col mb-4">
+        <%= f.label :password, Spree.t(:password) %>
+        <%= f.password_field :password, autocomplete: "current-password", class: 'text-input', required: true %>
+      </div>
+      <% if devise_mapping.rememberable? %>
+        <div class="flex items-center gap-2 text-sm mb-4">
+          <%= f.check_box :remember_me, class: 'input-checkbox' %>
+          <%= f.label :remember_me, Spree.t(:remember_me), class: 'cursor-pointer select-none' %>
+        </div>
+      <% end %>
+      <div class="actions">
+        <%= f.submit Spree.t(:login), class: 'btn btn-primary w-full' %>
+      </div>
+    <% end %>
+    <%= render "devise/shared/links" %>
+  </div>
+<% end %>

data/app/views/devise/shared/_links.html.erb

@@ -0,0 +1,22 @@
+<div class="flex flex-col gap-2 my-4">
+  <%- if controller_name != 'user_sessions' %>
+    <%= link_to Spree.t(:login), new_session_path(resource_name) %>
+  <% end %>
+  <%- if devise_mapping.registerable? && controller_name != 'user_registrations' %>
+    <%= link_to Spree.t(:sign_up), new_registration_path(resource_name) %>
+  <% end %>
+  <%- if devise_mapping.recoverable? && controller_name != 'user_passwords' && controller_name != 'user_registrations' %>
+    <%= link_to Spree.t(:forgot_password), new_password_path(resource_name) %>
+  <% end %>
+  <%- if devise_mapping.confirmable? && controller_name != 'user_confirmations' %>
+    <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %>
+  <% end %>
+  <%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'user_unlocks' %>
+    <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %>
+  <% end %>
+  <%- if devise_mapping.omniauthable? %>
+    <%- resource_class.omniauth_providers.each do |provider| %>
+      <%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false } %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,58 @@
+<% content_for(:head) do %>
+  <meta name="robots" content="noindex, nofollow">
+<% end %>
+
+<!doctype html>
+<html lang="<%= I18n.locale %>">
+  <head>
+    <%= render 'spree/shared/head' %>
+    <%= render 'spree/shared/custom_head' %>
+  </head>
+  <body id="checkout-page" class="w-full bg-background text-text">
+    <%= render_storefront_partials(:body_start_partials) %>
+    <%= current_store.storefront_custom_code_body_start&.html_safe %>
+
+    <div id="overlay" class="overlay"></div>
+
+    <div class="w-full min-h-screen text-muted bg-background" id="checkout-container">
+      <header
+        class="checkout-mobile-header lg:hidden relative z-[999] bg-background tailwind-container text-center py-3 mx-auto"
+        id="checkout-mobile-header"
+        data-turbo-permanent>
+        <%= render 'spree/shared/logo', logo: current_header_logo, logo_css: 'ml-5' %>
+      </header>
+      <div class="grid min-h-screen checkout-container">
+        <div class="flex flex-col items-end" id="checkout-main">
+          <div class="checkout-main-container">
+            <header
+              class="mb-0 hidden lg:block"
+              id="checkout-desktop-header"
+              data-turbo-permanent>
+              <%= render 'spree/shared/logo', logo: current_header_logo %>
+            </header>
+            <%= turbo_frame_tag :flash do %>
+              <%= render('spree/shared/flashes') %>
+            <% end %>
+            <div id="checkout">
+              <%= yield %>
+            </div>
+          </div>
+          <footer
+            class="mt-5"
+            id="checkout-footer"
+            data-turbo-permanent>
+            <%= render 'spree/checkout/footer' %>
+          </footer>
+        </div>
+        <div class="flex flex-col items-start col-span-2" id="checkout-summary">
+          <div class="checkout-summary-container">
+            <%= render 'spree/checkout/sidebar' %>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <%= current_store.storefront_custom_code_body_end&.html_safe %>
+    <%= render_storefront_partials(:body_end_partials) %>
+  </body>
+</html>

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

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="<%= I18n.locale %>">
+  <head>
+    <%= render 'spree/shared/head' %>
+    <%= render 'spree/shared/custom_head' %>
+    <%= current_store.storefront_custom_code_head&.html_safe %>
+  </head>
+  <body class="bg-background w-full text-text">
+    <%= render_storefront_partials(:body_start_partials) %>
+    <%= current_store.storefront_custom_code_body_start&.html_safe %>
+
+    <%= turbo_frame_tag(:flash) do %>
+      <%= render 'spree/shared/flashes' %>
+    <% end unless page_builder_enabled? %>
+    <%= yield %>
+    <style>
+      .page-contents {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+        justify-content: space-between;
+      }
+    </style>
+
+    <%= current_store.storefront_custom_code_body_end&.html_safe %>
+    <%= render_storefront_partials(:body_end_partials) %>
+  </body>
+</html>
+
+<% unless Rails.env.test? %>
+  <template id="csrf_meta_tags">
+    <%= csrf_meta_tags %>
+  </template>
+<% end %>

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

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="<%= I18n.locale %>">
+  <head>
+    <%= render 'spree/shared/head' %>
+    <%= render 'spree/shared/custom_head' %>
+    <%= 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 %>">
+    <%= render_storefront_partials(:body_start_partials) %>
+    <%= current_store.storefront_custom_code_body_start&.html_safe %>
+
+    <% if theme_layout_sections.empty? %>
+      <%= render template: 'errors/500' %>
+    <% else %>
+      <%= render_section(theme_layout_sections['announcement_bar']) if theme_layout_sections['announcement_bar'].present? %>
+      <%= render_section(theme_layout_sections['header']) if theme_layout_sections['header'].present? %>
+
+      <%= turbo_frame_tag :flash do %>
+        <%= render('spree/shared/flashes') %>
+      <% end %>
+
+      <%= yield %>
+
+      <%= render_section(theme_layout_sections['newsletter']) if  theme_layout_sections['newsletter'].present? %>
+      <%= render_section(theme_layout_sections['footer']) if theme_layout_sections['footer'].present? %>
+    <% end %>
+
+    <%= current_store.storefront_custom_code_body_end&.html_safe %>
+    <%= render_storefront_partials(:body_end_partials) %>
+  </body>
+</html>
+
+<% unless Rails.env.test? %>
+  <template id="csrf_meta_tags">
+    <%= csrf_meta_tags %>
+  </template>
+<% end %>

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

@@ -0,0 +1,8 @@
+<% if flash[:error] %>
+  <%= spree_turbo_update_flashes %>
+<% end %>
+
+<%= turbo_stream.update "wishlist-icon" do %>
+  <%= javascript_tag "wishedVariantIds = #{(current_wishlist.variant_ids).to_json.html_safe};" %>
+  <%= render 'spree/shared/wishlist_icon' %>
+<% end %>

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

@@ -0,0 +1,20 @@
+<% if @wished_item.present? %>
+  <%= turbo_stream.remove dom_id(@wished_item) %>
+<% end %>
+
+<% if current_wishlist.wished_items.none? %>
+  <%= turbo_stream.replace 'wishlist' do %>
+    <div class="lg:col-span-9 lg:col-start-4 mb-12 lg:mb-24" id="wishlist">
+      <%= render 'spree/wishlists/no_wished_items' %>
+    </div>
+  <% end %>
+<% end %>
+
+<% if flash[:error] %>
+  <%= spree_turbo_update_flashes %>
+<% end %>
+
+<%= turbo_stream.update "wishlist-icon" do %>
+  <%= javascript_tag "wishedVariantIds = #{(current_wishlist.variant_ids).to_json.html_safe};" %>
+  <%= render 'spree/shared/wishlist_icon' %>
+<% end %>

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

@@ -0,0 +1 @@
+<%= turbo_stream.remove(@address) %>

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

@@ -0,0 +1,57 @@
+<% if params[:checkout].present? %>
+  <%= turbo_frame_tag dom_id(@address) do %>
+    <%= render 'spree/shared/error_messages', target: @address %>
+    <%= form_for @address, html: { id: 'checkout_form_address' } do |f| %>
+      <%= render 'spree/addresses/form',
+        address_name: 'address',
+        address_form: f,
+        address_type: 'shipping',
+        address: @address %>
+
+      <%= hidden_field_tag :checkout, params[:checkout] %>
+      <div class="flex justify-between items-center">
+        <%= f.submit Spree.t(:update), class: 'btn btn-primary w-25 !py-2' %>
+        <%= link_to Spree.t('actions.discard'), :back, class: 'btn btn-light w-25 !py-2' %>
+      </div>
+    <% end %>
+  <% 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">
+      <%= render 'spree/account/account_nav', current: 'address' %>
+    </div>
+    <div class="lg:col-span-6 lg:col-start-4">
+      <div class="pb-4 border-b border-default -mx-4 lg:mx-0 px-4 lg:px-8">
+        <h3 class="text-xl uppercase font-medium lg:font-semibold"><%= Spree.t(:edit_address) %></h3>
+      </div>
+      <%= render 'spree/shared/error_messages', target: @address %>
+      <%= form_for @address, html: { id: 'checkout_form_address' }, method: :put do |f| %>
+        <div class="lg:px-8 pt-4">
+          <%= render 'spree/addresses/form',
+            address_name: 'address',
+            address_form: f,
+            address_type: 'shipping',
+            address: @address %>
+        </div>
+        <div class="lg:px-8 pb-4">
+          <%= 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? %>
+            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? %>
+            Set as default billing address
+          <% end %>
+        </div>
+        <div class="border-t border-default -mx-4 lg:mx-0 px-4 flex justify-end items-center gap-4 py-6 lg:px-8">
+          <%= link_to Spree.t('actions.cancel'), :back, class: 'uppercase text-sm font-semibold tracking-widest' %>
+          <%= f.submit Spree.t(:update), class: 'btn-primary' %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,71 @@
+<% if turbo_frame_request? %>
+  <%= turbo_frame_tag :new_address do %>
+    <div class="card-dialog">
+      <%= render 'spree/shared/error_messages', target: @address %>
+      <%= form_for @address, html: { id: 'checkout_form_address' } do |f| %>
+        <%= render 'spree/addresses/form',
+            address_name: 'address',
+            address_form: f,
+            address_type: 'shipping',
+            address: @address %>
+        <%= hidden_field_tag :order_token, params[:order_token] %>
+        <%= hidden_field_tag "default_shipping", true %>
+        <%= hidden_field_tag "default_billing", true %>
+        <%= f.submit Spree.t('actions.save'), class: 'btn-primary w-48 text-center', id: 'save-btn' %>
+      <% end %>
+    </div>
+  <% end %>
+<% else %>
+  <% if params[:checkout].present? %>
+    <div class="card-dialog mx-auto lg:w-1/3">
+      <h3 class="mb-5 font-semibold"><%= Spree.t(:new_address) %></h3>
+      <%= render 'spree/shared/error_messages', target: @address %>
+      <%= form_for @address, html: { id: 'checkout_form_address' } do |f| %>
+        <%= render 'spree/addresses/form',
+              address_name: 'address',
+              address_form: f,
+              address_type: 'shipping',
+              address: @address %>
+        <div class="flex justify-between items-center">
+          <%= f.submit Spree.t('actions.save'), class: 'btn-primary w-48 text-center', id: 'save-btn' %>
+          <%= link_to Spree.t('actions.discard'), :back, class: 'btn btn-light w-25 !py-2' %>
+        </div>
+      <% end %>
+    </div>
+  <% 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">
+        <%= render 'spree/account/account_nav', current: 'address' %>
+      </div>
+      <div class="lg:col-span-6 lg:col-start-4">
+        <div class="pb-4 border-b border-default -mx-4 lg:mx-0 px-4 lg:px-8">
+          <h3 class="text-xl uppercase font-medium lg:font-semibold"><%= Spree.t(:add_address) %></h3>
+        </div>
+        <%= render 'spree/shared/error_messages', target: @address %>
+        <%= form_for @address, html: { id: 'checkout_form_address' } do |f| %>
+          <div class="lg:px-8 pt-4">
+            <%= render 'spree/addresses/form',
+              address_name: 'address',
+              address_form: f,
+              address_type: 'shipping',
+              address: @address %>
+          </div>
+          <div class="lg:px-8 pb-4">
+            <%= 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 -mx-4 lg:mx-0 px-4 flex justify-end items-center gap-4 py-6 lg:px-8">
+            <%= link_to Spree.t('actions.cancel'), :back, class: 'uppercase text-sm font-semibold tracking-widest' %>
+            <%= f.submit Spree.t('actions.save'), class: 'btn-primary' %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+<% end %>