spree_storefront 5.0.0.rc1

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

@@ -0,0 +1,153 @@
+<%= render 'spree/checkout/quick_checkout' %>
+
+<% address_type = 'shipping' %>
+<% address_name = "#{address_type[0...4]}_address" %>
+
+<% if user_available_addresses.present? %>
+  <div data-controller="checkout-address-book">
+    <%= turbo_frame_tag :checkout_address_book do %>
+      <div class="mb-4" data-checkout-address-book-target="list">
+        <div id="<%= address_type %>">
+          <h5 class="font-body">
+            <%= Spree.t(address_type + '_address') %>
+          </h5>
+          <ul class="select_address list-group mb-5 border mt-3 rounded-md border-default">
+            <% user_available_addresses.each_with_index do |address, idx| %>
+              <li class="p-0 m-0 border-b border-default" id="<%= [address_type, dom_id(address)].join('_') %>">
+                <% checked = (address.id == @order.ship_address_id || (!@order.ship_address_id && idx == 0)) %>
+                <div class="custom-control custom-radio px-5 py-4 flex items-center">
+                  <%= radio_button_tag "order_#{address_name}_id", address.id, checked, class: 'custom-control-input radio-input mt-1 mr-5', data: { action: 'checkout-address-book#select' } %>
+                  <label class="custom-control-label d-block select-none cursor-pointer max-w-[calc(100%-58px)]" for="<%= "order_#{address_name}_id_#{address.id}" %>">
+                    <%= turbo_frame_tag dom_id(address) do %>
+                      <%= render 'spree/shared/address', address: address %>
+                      <div class="address-book-actions mt-3 <% unless checked %>hidden<% end %>">
+                        <%= link_to Spree.t(:edit), spree.edit_address_path(address, checkout: @order.token), class: 'text-dark' %>
+                      </div>
+                    <% end %>
+                  </label>
+                </div>
+              </li>
+            <% end %>
+            <li class="list-group-item p-0 m-0">
+              <div class="custom-control custom-radio px-5 py-4 flex items-center">
+                <%= radio_button_tag "order_#{address_name}_id", 0, false, class: 'custom-control-input radio-input mr-5', data: { action: 'checkout-address-book#select' } %>
+                <label class="custom-control-label d-block select-none cursor-pointer w-full max-w-[calc(100%-58px)]" for="<%= "order_#{address_name}_id_0" %>">
+                  <%= Spree.t(:new_address) %>
+                  <div class="mt-4 hidden" data-checkout-address-book-target="newAddressForm">
+                    <%= turbo_frame_tag :new_address do %>
+                      <%= form_for try_spree_current_user.addresses.build(country: current_store.default_country), 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, @order.token %>
+                        <%= hidden_field_tag "default_shipping", true %>
+                        <%= hidden_field_tag "default_billing", true %>
+                        <%= f.submit Spree.t('actions.save'), class: 'btn btn-primary btn-block spree-btn mb-5' %>
+                      <% end %>
+                    <% end %>
+                  </div>
+                </label>
+              </label>
+            </li>
+          </ul>
+        </div>
+      </div>
+    <% end %>
+
+    <%= 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 %>
+        <%= form.hidden_field :ship_address_id, data: { 'checkout-address-book-target': 'addressId' } %>
+      </div>
+      <div>
+        <%= button_tag Spree.t(:save_and_continue),
+                        data: {
+                          'checkout-address-book-target': 'submit',
+                          'turbo-submits-with': (render 'spree/checkout/button_processing', is_hidden: false)
+                        },
+                        class: 'btn btn-primary font-weight-bold w-full lg:w-48 float-right checkout-content-save-continue-button',
+                        disabled: @order.ship_address_id.nil? %>
+      </div>
+    <% end %>
+  </div>
+<% else %>
+  <%= form_for @order, url: spree.update_checkout_path(@order.token, @order.state), html: { id: "checkout_form_#{@order.state}" } do |form| %>
+    <div class="mb-5">
+      <%= form.hidden_field :state_lock_version %>
+
+      <% if !try_spree_current_user || try_spree_current_user.email.blank? %>
+        <div class="grid grid-cols-1 lg:grid-cols-2 mb-3 font-body">
+          <h5 class="font-body">
+            <%= Spree.t(:contact_information) %>
+          </h5>
+          <% if !already_have_an_account? && defined?(spree_login_path) %>
+            <div class="lg:text-right">
+              <span class="text-gray-600 text-sm">
+                <%= Spree.t('storefront.checkout.already_have_an_account') %> <span class="text-primary"><%= link_to Spree.t(:login), spree_login_path, data: { turbo_frame: '_top' } %></span>
+              </span>
+            </div>
+          <% end %>
+        </div>
+        <div class="form-group has-float-label mb-3">
+          <%= form.email_field :email, class: 'w-full text-input', required: true, placeholder: Spree.t(:email), id: 'order_ship_address_attributes_email' %>
+          <label for="order_ship_address_attributes_email"><%= Spree.t(:email) %></label>
+        </div>
+      <% end %>
+      <div class="py-2">
+        <div class="flex items-center gap-2">
+          <%= form.check_box :accept_marketing, class: 'checkbox-input' %>
+          <%= form.label :accept_marketing, class: 'cursor-pointer text-sm select-none' do %>
+            <%= Spree.t('storefront.newsletter_subscription.join') %>
+          <% end %>
+        </div>
+
+        <% if !try_spree_current_user && !already_have_an_account? %>
+          <div class="flex items-center gap-2 mt-2">
+            <%= form.check_box :signup_for_an_account, class: 'checkbox-input' %>
+            <%= form.label :signup_for_an_account, class: 'cursor-pointer text-sm select-none' do %>
+              <%= Spree.t('storefront.checkout.signup_for_an_account') %>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+      <% unless try_spree_current_user %>
+        <% if already_have_an_account? %>
+          <div class="py-2 text-sm">
+            It seems you already have an account with us. Please
+            <%= link_to Spree.t(:login), spree_login_path, class: 'text-primary font-semibold' %> to continue.
+          </div>
+        <% end %>
+      <% end %>
+
+      <div class="mb-4" data-controller="checkout-address-book" data-checkout-address-book-target="list">
+        <div id="<%= address_type %>">
+          <h5 class="mt-5 mb-4 font-body">
+            <%= Spree.t(address_type + '_address') %>
+          </h5>
+          <%= form.fields_for address_name do |address_form| %>
+            <div class="inner checkout-content-inner" data-hook='<%= "#{address_type}_inner" %>'>
+              <%= render partial: 'spree/addresses/form', locals: {
+                address_name: address_name,
+                address_form: address_form,
+                address_type: address_type,
+                address: Spree::Address.new(country: current_store.default_country, user: try_spree_current_user),
+                form: form
+              } %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+
+      <%= hidden_field_tag 'save_user_address', true, data: { hook: "save_user_address" } %>
+    </div>
+    <div class="flex justify-end w-full">
+      <%= button_tag Spree.t(:save_and_continue),
+                      class: 'btn-primary w-full lg:w-2/5 font-semibold checkout-content-save-continue-button my-5 !py-4',
+                      data: {
+                        'turbo-submits-with': (render 'spree/checkout/button_processing', is_hidden: false)
+                      } %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<div class="<%= 'hidden' if is_hidden %> spinner flex justify-center">
+  <svg class="animate-spin h-5 w-5 mr-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+  </svg>
+  <%= Spree.t(:processing) %>...
+</div>

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

@@ -0,0 +1,55 @@
+<%= turbo_frame_tag :checkout_coupon_code, class: "shopping-cart-coupon-code #{local_assigns[:classes]} flex flex-col gap-3" do %>
+  <% if promotion.nil? %>
+    <%= form_tag spree.checkout_apply_coupon_code_path(@order.token), method: :patch, data: {controller: "checkout-promotions"} do %>
+      <div class="flex" data-controller="enable-button">
+        <%= hidden_field_tag :promotion_email, @order.email, data: {checkout_promotions_target: 'promotionEmailField'} %>
+        <%= text_field_tag :coupon_code, params[:coupon_code], class: 'w-full  text-input',
+                                                  placeholder: Spree.t('cart_page.add_promo_code').capitalize,
+                                                  aria: { label: Spree.t('cart_page.add_promo_code') },
+                                                  data: { 'enable-button-target': 'input' },
+                                                  required: true %>
+        <%= button_tag 'Apply', class: 'min-h-full ml-3 btn-primary !px-4 !py-3', data: { 'enable-button-target': 'button' }, disabled: true %>
+      </div>
+    <% end %>
+  <% elsif promotion.present? %>
+    <%= form_tag spree.checkout_remove_coupon_code_path(@order.token), method: :delete do %>
+      <%= hidden_field_tag :coupon_code, promotion.code_for_order(@order) %>
+      <div class="m-0">
+        <div class="flex items-center justify-between text-sm">
+          <span class="max-w-[250px] truncate flex items-center p-2 rounded bg-gray-200">
+            <%= heroicon('tag', options: { class: 'h-4 w-4 mr-2' }) %>
+            <%= promotion.name_for_order(@order) %>
+          </span>
+          <%= button_tag(class: 'btn btn-sm p-1 ml-2', id: 'remove-promotion') do %>
+            <%= heroicon('x-mark', options: { variant: :solid, class: 'h-5 w-5' }) %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  <% elsif @order.respond_to?(:gift_card) && @order.gift_card %>
+    <%= form_tag spree.checkout_remove_coupon_code_path(@order.token), method: :delete do %>
+      <%= hidden_field_tag :gift_card, @order.gift_card.code %>
+      <div class="m-0">
+        <div class="flex items-center justify-between text-sm">
+          <span class="max-w-[250px] truncate flex items-center p-2 rounded bg-gray-200">
+            <%= heroicon('gift', options: { class: 'h-4 w-4 mr-2' }) %>
+            <%= @order.gift_card.code.upcase %>
+          </span>
+          <%= button_tag(class: 'btn btn-sm p-1 ml-2', id: 'remove-promotion') do %>
+            <%= heroicon('x-mark', options: { variant: :solid, class: 'h-5 w-5' }) %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+
+  <% if local_assigns[:result] && action_name == 'apply_coupon_code' %>
+    <% if result.error.blank? %>
+      <div class="alert-success p-2 text-xs rounded"><%= result.success %></div>
+    <% else %>
+      <div class="text-red-500 !text-md text-xs ">
+        <span><%= result.error %></span>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,12 @@
+<li class="p-0 m-0 border-b" id="<%= spree_dom_id(card) %>">
+  <div class="custom-control custom-radio px-5 py-4 flex items-center">
+    <label class="flex flex-row items-center cursor-pointer">
+      <%= radio_button_tag "order[existing_card]", card.gateway_payment_profile_id, index == 0, { data: {action: "checkout-credit-card-book#select" }, class: "mr-5" } %>
+      <div class="flex space-x-4 items-center">
+        <%= payment_method_icon_tag(card.cc_type) %>
+        <span>****<%= card.last_digits %></span>
+        <span><%= card.month.to_s.rjust(2, '0') %>/<%= card.year %></span>
+      </div>
+    </label>
+  </div>
+</li>

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

@@ -0,0 +1,70 @@
+<%= form_for @order, url: spree.update_checkout_path(@order.token, @order.state), data: { controller: 'checkout-delivery' } do |form| %>
+  <div class="mb-5">
+    <%= turbo_frame_tag :checkout_lock_version do %>
+      <%= hidden_field_tag 'order[state_lock_version]', @order.state_lock_version %>
+    <% end %>
+    <div id="shipping-method">
+      <% if @order.backordered_variants.any? %>
+        <div class="alert rounded border border-default text-sm p-5 mb-6">
+          Some products in your cart will be dispatched a bit later than the rest of your order:
+          <ul class="list-disc list-inside flex-col flex space-y-1 mt-2">
+            <% @order.backordered_variants.each do |variant| %>
+              <li><%= variant.name %></li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
+
+      <div id="methods">
+        <%= form.fields_for :shipments do |ship_form| %>
+          <div class="shipment">
+            <h5 class="checkout-content-header mb-3 font-body">
+              <%= Spree.t('storefront.checkout.delivery_method').capitalize %>
+              <% if ship_form.object.stock_location.present? %>
+                <%= Spree.t(:from).downcase %>
+                <strong><%= ship_form.object.stock_location.name %></strong>
+              <% end %>
+            </h5>
+            <ul class="rounded-md list-group mb-4 border border-default border-b-0 text-sm border-default" data-checkout-delivery-target="shippingList">
+              <% ship_form.object.shipping_rates.includes(:shipping_method, :tax_rate).each do |rate| %>
+                <li class="list-group-item p-0 m-0 border-b delivery-list-item border-default" data-checkout-delivery-target="shippingRate">
+                  <div class="custom-control custom-radio flex items-center px-5 py-4">
+                    <%= ship_form.radio_button :selected_shipping_rate_id,
+                      rate.id,
+                      class: 'custom-control-input radio-input',
+                      id: "shipping-rate-#{rate.id}",
+                      data: {
+                        action: 'click->checkout-delivery#update',
+                        cost: rate.display_cost,
+                        tax: rate.display_tax_amount
+                      } %>
+                    <label class="select-none cursor-pointer px-2 word-break w-full" for="<%= "shipping-rate-#{rate.id}" %>">
+                      <%= rate.name %>
+                      <% if rate.delivery_range %>
+                        <span class="text-gray-600 text-xs ml-3"><%= rate.display_delivery_range %></span>
+                      <% end %>
+                    </label>
+                    <span class="text-right">
+                      <%= rate.cost <= 0 ? Spree.t(:free) : rate.display_cost %>
+                    </span>
+                  </div>
+                </li>
+              <% end %>
+            </ul>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+  <div class="flex justify-end w-full mt-5">
+    <div class="flex justify-end w-full">
+      <%= button_tag Spree.t(:save_and_continue),
+                      class: 'btn-primary w-full lg:w-2/5 font-semibold checkout-content-save-continue-button my-5 !py-4',
+                      data: { action: 'click->checkout-delivery#disableShippingRates',
+                              'checkout-delivery-target': 'submit',
+                              'turbo-submits-with': (render 'button_processing', is_hidden: false)
+                      } %>
+    </div>
+  </div>
+<% end %>
+

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

@@ -0,0 +1,26 @@
+<div class="flex justify-between items-center">
+  <div class="flex items-center">
+    <div class="mr-5 w-[64px] h-[64px] relative rounded bg-accent-100">
+      <span class="rounded-full text-xs text-center font-bold pl-[0.5px] py-1 w-6 text-sidebar-text bg-background absolute -right-2 -top-3">
+        <%= line_item.quantity %>
+      </span>
+      <% image = line_item.variant.default_image %>
+      <% if image.present? && image.attached? && image.variable? %>
+        <%= image_tag main_app.cdn_image_url(image.variant(spree_image_variant_options(resize_to_fill: [128, 128]))), class: 'rounded border border-default bg-transparent object-cover object-center', loading: :lazy, width: 64, height: 64 %>
+      <% end %>
+    </div>
+    <div class="col-6 col-md-8 pr-3 text-sm">
+      <p class="font-bold word-break"><%= line_item.name %></p>
+      <p class="text-xs"><%= line_item.options_text %></p>
+    </div>
+  </div>
+  <div class="font-semibold text-sm text-right">
+    <% if should_display_compare_at_price?(line_item.variant) %>
+      <span class="line-through text-red-500">
+        <%= Spree::Money.new(line_item.variant.compare_at_amount_in(line_item.currency) * line_item.quantity, currency: line_item.currency) %>
+      </span>
+      <br />
+    <% end %>
+    <%= line_item.display_pre_tax_amount %>
+  </div>
+</div>

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

@@ -0,0 +1,7 @@
+<%= turbo_frame_tag :checkout_line_items, id: 'line_items', target: '_top' do %>
+  <% cache spree_base_cache_scope.call(order.line_items.cache_key_with_version) do %>
+    <div class="overflow-y-auto line-items flex flex-col gap-5 pt-5 md:pt-0" data-checkout-summary-target="line_items">
+      <%= render collection: order.line_items, partial: 'spree/checkout/line_item', cached: spree_base_cache_scope %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,17 @@
+<div data-controller="modal" data-modal-opened-value="true" data-modal-allow-background-close="false">
+  <div data-modal-target="container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 9999;">
+    <div class="max-h-screen w-full max-w-lg relative">
+      <div class="m-1 bg-white rounded shadow">
+        <div class="p-8">
+          <h2 class="text-xl mb-4"><%= Spree.t(:shipping_not_available) %></h2>
+          <p class="mb-4"><%= Spree.t('errors.messages.no_shipping_methods_available') %> </p>
+
+          <div class="flex justify-end items-center flex-wrap mt-6">
+            <%= link_to 'Return to cart', spree.cart_path, class: 'mx-4 py-4', target: :_top %>
+            <%= link_to 'Close', checkout_state_path(@order.token, @order.state), class: 'btn-primary font-semibold checkout-content-save-continue-button my-5 ml-4 !py-4', target: :_top %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,28 @@
+<div data-controller="modal" data-modal-opened-value="true" data-modal-allow-background-close="false">
+  <div data-modal-target="container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 9999;">
+    <div class="max-h-screen w-full max-w-lg relative">
+      <div class="m-1 bg-white rounded shadow">
+        <div class="p-8">
+          <h2 class="text-xl mb-4"><%= Spree.t('storefront.checkout.shipping_not_available') %></h2>
+          <p class="mb-4">
+            <%= Spree.t('storefront.checkout.errors.invalid_line_items', count: @order.line_items_without_shipping_rates.size) %>
+          </p>
+
+          <div class="mb-5 overflow-y-auto pt-3 mx-3 lg:mx-8 lg:mt-4 lg:pt-6 line-items" data-checkout-summary-target="line_items">
+            <%= render collection: @order.line_items_without_shipping_rates, partial: 'spree/checkout/line_item', cached: spree_base_cache_scope %>
+          </div>
+
+          <div class="flex justify-end items-center flex-wrap mt-6">
+            <%= link_to Spree.t('storefront.checkout.continue_to_cart'), spree.cart_path, class: 'mx-4 py-4', target: :_top %>
+            <%= button_to Spree.t('storefront.checkout.continue_to_checkout'),
+                        spree.checkout_remove_missing_items_path(@order.token, line_item_ids: @order.line_items_without_shipping_rates.map(&:id)),
+                        class: 'btn-primary font-semibold checkout-content-save-continue-button my-5 ml-4 !py-4',
+                        method: :delete,
+                        data: { turbo: false, 'turbo-submits-with': (render 'spree/checkout/button_processing', is_hidden: false) }
+            %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,35 @@
+<%= form_for @order, url: spree.update_checkout_path(@order.token, @order.state), html: { id: "checkout_form_#{@order.state}" } do |form| %>
+  <%= form.hidden_field :state_lock_version %>
+  
+  <% if @order.respond_to?(:gift_card) %>
+    <%= turbo_frame_tag :gift_card_code_field do %>
+      <%= hidden_field_tag 'order[gift_card_code]', @order.gift_card&.code %>
+      <%= hidden_field_tag 'order[gift_card_amount]', @order.gift_card_total %>
+    <% end %>
+  <% end %>
+  
+  <% use_shipping = @order.shipping_eq_billing_address? || @order.bill_address.nil? || @order.bill_address.new_record? %>
+  
+  <div id="billing-address" class="mb-8 max-w-full" data-controller="toggle">
+    <h5 class="mb-3 font-body font-semibold">
+      <%= Spree.t(:billing_address) %>
+    </h5>
+    <div class="flex items-center">
+      <%= form.check_box :use_shipping, { checked: use_shipping, class: 'checkbox-input', data: { action: 'change->toggle#toggle' } } %>
+      <%= form.label :use_shipping, Spree.t(:use_shipping_address), class: 'ml-1 cursor-pointer select-none' %>
+    </div>
+    <%= form.fields_for :bill_address do |address_form| %>
+      <div class="mt-4 <%= 'hidden' if use_shipping %>" data-toggle-target='toggleable'>
+        <%= render partial: 'spree/addresses/form', locals: {
+          address_name: 'bill_address',
+          address_form: address_form,
+          address_type: 'billing',
+          address: @order.bill_address,
+          form: form
+        } %>
+      </div>
+    <% end %>
+  </div>
+
+  <%= render 'spree/checkout/payment_methods', form: form %>
+<% end %>

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

@@ -0,0 +1,72 @@
+<%= turbo_frame_tag :checkout_payment_methods do %>
+  <% if !@order.payment_required? && @order.using_store_credit? %>
+    <div class="d-flex flex-column mb-5">
+      <p>
+        <% if @order.respond_to?(:gift_card) && @order.gift_card.present? %>
+          <%= Spree.t('storefront.checkout.gift_card_amount_applied', amount: @order.display_gift_card_total, code: @order.gift_card.code) %>
+        <% else %>
+          <%= Spree.t('storefront.checkout.store_credits_amount_applied', amount: @order.display_total_applicable_store_credit.abs) %>
+        <% end %>
+
+        <%= Spree.t('storefront.checkout.order_already_paid') %>
+      </p>
+    </div>
+    <div class="flex justify-end w-full">
+      <%= button_tag Spree.t(:place_now),
+                      class: 'btn-primary w-full lg:w-2/5 font-semibold checkout-content-save-continue-button my-5 !py-4',
+                      data: { 'turbo-submits-with': (render 'spree/checkout/button_processing', is_hidden: false) } %>
+    </div>
+  <% else %>
+    <h5 class="mb-3 font-body font-semibold">
+      <%= Spree.t(:payment) %>
+    </h5>
+    <p class="text-muted mb-3 text-neutral-600">
+      <%= Spree.t('storefront.checkout.all_transactions_are_secure_and_encrypted') %>
+    </p>
+
+    <%= render partial: 'spree/checkout/payment/store_credit' %>
+
+    <% if checkout_available_payment_methods.size > 1 %>
+      <ul id="payment-method-fields" class="rounded-md list-group mb-4 border border-default border-b-0 text-sm border-default">
+        <% selected_method = params[:payment_method_id].present? ? checkout_available_payment_methods.find { |method| method.id.to_s == params[:payment_method_id].to_s } : checkout_available_payment_methods.first %>
+
+        <% checkout_available_payment_methods.each do |method| %>
+          <li class="list-group-item p-0 m-0 border-b delivery-list-item border-default">
+            <%= link_to spree.checkout_state_path(token: @order.token, state: 'payment', payment_method_id: method.id), class: 'custom-control custom-radio flex items-center px-5 py-4 cursor-pointer w-full' do %>
+              <%= radio_button_tag "order[payments_attributes][][payment_method_id]",
+                    method.id,
+                    selected_method == method,
+                    class: 'mr-3' %>
+              <%= Spree.t(method.name, scope: :payment_methods, default: method.name) %>
+            <% end %>
+
+            <% if selected_method == method %>
+              <div class="px-5 py-4">
+                <%= render partial: "spree/checkout/payment/#{method.method_type}", locals: { payment_method: method } %>
+              </div>
+            <% end %>
+          </li>
+        <% end %>
+      </ul>
+    <% elsif checkout_available_payment_methods.any? %>
+      <%= hidden_field_tag "order[payments_attributes][][payment_method_id]", checkout_available_payment_methods.first&.id %>
+      <%= render partial: "spree/checkout/payment/#{checkout_available_payment_methods.first.method_type}", locals: { payment_method: checkout_available_payment_methods.first } %>
+    <% end %>
+  <% end %>
+
+  <p class="text-xs mt-2 mb-4">
+    <%= Spree.t('storefront.checkout.by_placing_this_order_you_agree_to') %>
+    <%= link_to Spree.t(:terms_of_service), policy_path('terms_of_service'), target: :_blank, class: 'text-primary' %><%= I18n.t('support.array.two_words_connector') %>
+    <%= link_to Spree.t(:privacy_policy), policy_path('privacy_policy'), target: :_blank, class: 'text-primary' %>.
+  </p>
+
+  <div class="flex justify-end w-full">
+    <button type="submit"
+            id="checkout-payment-submit"
+            class="btn-primary w-full lg:w-2/5 font-semibold checkout-content-save-continue-button my-5 !py-4"
+    >
+      <%= render 'button_processing', is_hidden: true %>
+      <%= Spree.t(:pay).titleize %>
+    </button>
+  </div>
+<% end %>

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

@@ -0,0 +1,24 @@
+<div id="existing_cards" data-controller="checkout-credit-card-book">
+  <div class="form-group">
+    <ul class="list-group mb-5 border mt-3 rounded-md">
+      <% checkout_payment_sources.each_with_index do |card, i| %>
+        <%= render partial: 'credit_card', locals: { card: card, index: i } %>
+      <% end %>
+      <li>
+        <div class="custom-control custom-radio px-5 py-4 flex items-center w-full">
+          <label class="flex flex-row items-center w-full pr-8">
+            <%= radio_button_tag "order[existing_card]", nil, false, {  data: {action: "checkout-credit-card-book#select checkout-stripe#initializeStripe"}, class: "mr-5" } %>
+            <div class="w-full flex flex-col items-start space-y-4 justify-center">
+              <span class="cursor-pointer">
+                <%= Spree.t(:add_new_credit_card) %>
+              </span>
+              <div class="w-full hidden" data-checkout-credit-card-book-target="newCreditCardForm">
+                
+              </div>
+            </div>
+          </label>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1 @@
+<%= render_storefront_partials(:quick_checkout_partials) %>

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

@@ -0,0 +1,34 @@
+<div data-controller="checkout-summary" class="w-full">
+  <div data-controller='toggle' data-toggle-class="summary-folded" class="w-full summary-wrapper flex flex-col leading-none" data-toggle-target="toggleable" data-checkout-summary-target="wrapper">
+    <button data-action='click->toggle#toggle touch->toggle#toggle' class="w-full lg:hidden relative z-[999] bg-accent", id="toggle-order-summary">
+      <div class="h-full flex justify-between text-sm items-center">
+        <p class="flex gap-1 chevron-summary items-center">
+          <%= heroicon("shopping-bag", variant: :outline) %>
+          <span class="show-summary hidden">
+            <%= Spree.t(:show) %>
+          </span>
+          <span class="hide-summary">
+            <%= Spree.t(:hide) %>
+          </span>
+          <span class="lowercase"><%= Spree.t(:order_summary) %></span>
+        </p>
+        <span class="font-bold" id='summary-order-total'>
+          <%= @order.display_total.to_html %>
+        </span>
+      </div>
+    </button>
+    <div class="summary overflow-hidden transition-[height] h-0 p-0" data-checkout-summary-target="container">
+      <div class="summary-content flex flex-col gap-5" data-checkout-summary-target="content">
+        <%= render 'line_items', order: @order %>
+
+        <div data-checkout-summary-target="coupon_area" class="flex flex-col gap-5">
+          <% unless action_name == 'complete' %>
+            <%= render 'coupon_code', promotion: @order.valid_coupon_promotions.first %>
+            <%= render 'store_credit' %>
+          <% end %>
+          <%= render 'summary', order: @order %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+<%= turbo_frame_tag :checkout_store_credit do %>
+  <% if can_use_store_credit_on_checkout?(@order) %>
+    <%= form_tag(
+      @order.using_store_credit? ? spree.checkout_remove_store_credit_path(@order.token) : spree.checkout_apply_store_credit_path(@order.token),
+      method: @order.using_store_credit? ? :delete : :patch,
+      class: 'aria-busy:opacity-25',
+      data: { controller: 'auto-submit' }
+    ) do %>
+      <div class="flex items-center justify-between border text-sm px-5 py-4 rounded-md border-neutral-200 cursor-pointer">
+        <%= label_tag :store_credit, class: 'flex items-center gap-3 text-sm cursor-pointer' do %>
+          <%= check_box_tag :store_credit, '1', @order.using_store_credit?,
+            class: 'input-checkbox !border-neutral-200 rounded-md',
+            data: { action: 'auto-submit#submit' } %>
+          <%= Spree.t("store_credit.apply") %>
+        <% end %>
+
+        <div><%= @order.display_total_available_store_credit %></div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>