spree_storefront 5.0.3 → 5.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7a3165bdc79f4acc7b7ac36a86572a2f6d114fdacc1b125af2b0e86d21983d92
-  data.tar.gz: 852b2926ade744ce9b0c41f0d5f04d68b10c3d5408100b3531dea0966b663fee
+  metadata.gz: d8b5f53e77331921922ac1da27123087c2b06413b7e77bb9061709a3f4c331a6
+  data.tar.gz: 72d769742b732a7d2500dc4ce2ab6d25217198ac40d5010273b9ffb55a815a01
 SHA512:
-  metadata.gz: 2727b7cca478cbe94b87e22cca326b11259138f2e36069487d546bb865cc4ca6952b05e94595350e31907916acb2c1d6f1a22ba45e3dbf382cf3c3af5c000aad
-  data.tar.gz: 5bfc483ae97000fe62611cb3cd7fd39eca7c28104e8a193016a5e21dcf35ec2ee526c8fd1311cd2a4de42dfa95cafec65a5d791ceec662d586b92774d35daa48
+  metadata.gz: e9eb50e07eee8427553b3ff7afb6e4e87a409c7a2bfdd0aa1fae44d31e146ef1595750f79e3a1e4a296390dfc3c9e9b589d17f3e3bf7131f277f859be4ea841d
+  data.tar.gz: 20e8fc5511fbedf98f50cdfe492e4765ca15fe39de324bd4988a2d03ac8b80b5e0a098cb59f0488d73b03cb75f086f02ef3bea757dbd6d0b5e3c434286cf7d88

data/app/assets/stylesheets/storefront_page_builder.css

@@ -1,22 +1,18 @@
 .editor-overlay {
   z-index: 1089;
   width: 100%;
+  container-type: inline-size;
+  container-name: editor-overlay;
 }
 
 .editor-overlay-toolbar {
   position: absolute;
-  top: -26px;
-  left: -1px;
+  min-width: max-content;
   background-color: #0081f1;
   color: #fff;
-  padding: 4px 8px;
   font-size: 12px;
   font-weight: bold;
-  border-radius: 4px 4px 0 0;
-  cursor: pointer;
   display: none;
-}
-.editor-overlay-toolbar {
   right: 2px;
   top: 2px;
   left: auto;
@@ -25,6 +21,15 @@
   padding: 2px 2px;
   border-radius: 4px;
 }
+
+/* If the editor overlay is really small, move the toolbar to the bottom so it doesn't cover the content */
+@container editor-overlay (max-width: 200px) {
+  .editor-overlay-toolbar {
+    top: 100%;
+    right: 0px;
+  }
+}
+
 .editor-overlay-toolbar button {
   padding: 8px;
   border-radius: 4px;

data/app/controllers/spree/account/wished_items_controller.rb

@@ -1,8 +1,6 @@
 module Spree
   module Account
     class WishedItemsController < BaseController
-      skip_before_action :verify_authenticity_token
-
       # POST /account/wished_items
       def create
         variant = current_store.variants.find(wished_item_params[:variant_id])

data/app/controllers/spree/line_items_controller.rb

@@ -22,8 +22,6 @@ module Spree
                                           quantity: @quantity,
                                           options: options)
 
-      flash.now[:error] = result.value.errors.full_messages.to_sentence if result.failure?
-
       @line_item = result.value
 
       if result.success?
@@ -45,9 +43,12 @@ module Spree
       quantity = line_item_params[:quantity]&.to_i || 1
       result = cart_set_item_quantity_service.call(order: @order, line_item: @line_item, quantity: quantity)
 
-      @error = result.value.errors.full_messages.to_sentence if result.failure?
-
-      load_line_items if result.success?
+      if result.success?
+        load_line_items
+      else
+        @error = result.value.errors.full_messages.to_sentence
+        flash.now[:error] = @error
+      end
 
       respond_to do |format|
         format.turbo_stream
@@ -57,9 +58,15 @@ module Spree
 
     def destroy
       result = cart_remove_line_item_service.call(order: @order, line_item: @line_item)
-      load_line_items if result.success?
 
-      track_event('product_removed', { line_item: @line_item })
+      if result.success?
+        load_line_items
+
+        track_event('product_removed', { line_item: @line_item })
+      else
+        @error = result.value.errors.full_messages.to_sentence
+        flash.now[:error] = @error
+      end
 
       respond_to do |format|
         format.turbo_stream

data/app/controllers/spree/products_controller.rb

@@ -23,7 +23,7 @@ module Spree
       load_product
       # An interesting thing is that since we're querying the translations table (in the multi_search),
       # when using not default locale, our related products are different for different locales.
-      @products = current_store.products.active(current_currency).where.not(id: @product.id).
+      @products = storefront_products_scope.where.not(id: @product.id).
                   multi_search(@product.name).includes(storefront_products_includes).
                   limit(@section.preferred_max_products_to_show)
     end

data/app/controllers/spree/search_controller.rb

@@ -13,7 +13,7 @@ module Spree
       @taxons = []
 
       if query.present? && query.length >= Spree::Storefront::Config.search_min_query_length
-        products_scope = current_store.products.active(current_currency).multi_search(query)
+        products_scope = storefront_products_scope.multi_search(query)
         @products = products_scope.includes(storefront_products_includes)
         @taxons = current_store.taxons.search_by_name(query)
       end

data/app/controllers/spree/store_controller.rb

@@ -116,29 +116,31 @@ module Spree
     end
 
     def storefront_products_scope
-      current_store.products.active(current_currency)
+      @storefront_products_scope ||= current_store.products.active(current_currency)
     end
 
     def default_products_finder_params
-      taxon = @taxon || current_taxon
+      @default_products_finder_params ||= begin
+        taxon = @taxon || current_taxon
 
-      filter = permitted_products_params.fetch(:filter, {}).dup
+        filter = permitted_products_params.fetch(:filter, {}).dup
 
-      filter[:taxon_ids] ||= [taxon&.id.to_s].compact
-      filter[:taxons] = filter[:taxon_ids].join(',')
+        filter[:taxon_ids] ||= [taxon&.id.to_s].compact
+        filter[:taxons] = filter[:taxon_ids].join(',')
 
-      if filter.key?(:min_price) || filter.key?(:max_price)
-        min_price = filter[:min_price].presence || 0
-        max_price = filter[:max_price].presence || 'Infinity'
+        if filter.key?(:min_price) || filter.key?(:max_price)
+          min_price = filter[:min_price].presence || 0
+          max_price = filter[:max_price].presence || 'Infinity'
 
-        filter[:price] = [min_price, max_price].compact.join(',')
-      end
+          filter[:price] = [min_price, max_price].compact.join(',')
+        end
 
-      permitted_products_params.merge(
-        store: current_store,
-        filter: filter,
-        currency: current_currency
-      )
+        permitted_products_params.merge(
+          store: current_store,
+          filter: filter,
+          currency: current_currency
+        )
+      end
     end
 
     def storefront_products

data/app/helpers/spree/cart_helper.rb

@@ -22,7 +22,7 @@ module Spree
         class: opts[:class],
         data: {
           'quantity-picker-target': opts[:action],
-          action: "click->quantity-picker##{opts[:action]} click->cart#disableCart"
+          action: "click->quantity-picker##{opts[:action]} click->cart#disableCart turbo-stream-form:submit-end->cart#enableCart"
         }
       )
     end

data/app/helpers/spree/filters_helper.rb

@@ -76,10 +76,14 @@ module Spree
       if filter_selected
         default_storefront_filter_values_scope
       else
-        Spree::OptionValue.for_products(storefront_products_for_filters).distinct
+        all_option_values_scope
       end
     end
 
+    def all_option_values_scope
+      @all_option_values_scope ||= Spree::OptionValue.for_products(storefront_products_scope).distinct
+    end
+
     def filter_values_for_filter(filter)
       selected = single_option_filter_selected?(filter.name)
       if filter.option_values.loaded?

data/app/helpers/spree/fonts_helper.rb

@@ -38,8 +38,10 @@ module Spree
 
       return if fonts.blank?
 
+      font_weights = (200..700).step(100).to_a
+
       imports = fonts.map do |font|
-        "family=#{font.split(' ').join('+')}:wght@200..700"
+        "family=#{font.split.join('+')}:wght@#{font_weights.join(';')}"
       end.compact.join('&')
 
       return if imports.blank?

data/app/helpers/spree/products_helper.rb

@@ -157,7 +157,7 @@ module Spree
         {
           '@type' => 'ListItem',
           'position' => index + 1,
-          'url' => spree.product_url(product_slug)
+          'url' => spree.product_url(product_slug, host: current_store.url_or_custom_domain)
         }
       end
     end
@@ -201,5 +201,9 @@ module Spree
 
       Spree::ColorsPreviewStylesPresenter.new(option_type.option_values.map { |ov| { name: ov.name, filter_name: ov.name } }).to_s
     end
+
+    def product_properties(product)
+      product.product_properties.joins(:property).merge(Spree::Property.available_on_front_end).sort_by_property_position
+    end
   end
 end

data/app/helpers/spree/storefront_helper.rb

@@ -53,6 +53,7 @@ module Spree
 
     def svg_country_icon(country_code)
       country_code = :us if country_code.to_s.downcase == 'en'
+      country_code = :jp if country_code.to_s.downcase == 'ja'
       tag.span(class: "fi fi-#{country_code.downcase}")
     end
 

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

@@ -56,6 +56,8 @@ export default class extends Controller {
   }
 
   updateCardIcon(cardType) {
+    cardType = (cardType === "mastercard" ? "master" : cardType)
+
     const iconElement = document.getElementById(`credit-card-icon-${cardType}`)
     if (iconElement) {
       this.typeContainerTarget.innerHTML = iconElement.innerHTML

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

@@ -7,4 +7,9 @@ export default class extends Controller {
     this.containerTarget.classList.add('pointer-events-none', 'opacity-50')
     this.spinnerTarget.classList.remove('hidden')
   }
+
+  enableCart() {
+    this.containerTarget.classList.remove('pointer-events-none', 'opacity-50')
+    this.spinnerTarget.classList.add('hidden')
+  }
 }

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/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/passwords/edit.html.erb

@@ -6,7 +6,7 @@
     <div class="flex flex-col mb-4">
       <%= f.label :password, Spree.t(:password) %>
       <% if @minimum_password_length %>
-        <em>(<%= @minimum_password_length %> characters minimum)</em>
+        <em><%= Spree.t(:minimum_password_length, count: @minimum_password_length) %></em>
       <% end %>
       <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: 'text-input', required: true %>
     </div>

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

@@ -10,7 +10,7 @@
       <div class="flex flex-col mb-4">
         <%= f.label :password, Spree.t(:password) %>
         <% if @minimum_password_length %>
-          <em>(<%= @minimum_password_length %> characters minimum)</em>
+          <em><%= Spree.t(:minimum_password_length, count: @minimum_password_length) %></em>
         <% end %>
         <%= f.password_field :password, autocomplete: "new-password", class: 'text-input', required: true %>
       </div>

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

@@ -9,14 +9,14 @@
     <%= 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) %>
+    <%= link_to Spree.t(: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) %>
+    <%= link_to Spree.t(: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 } %>
+      <%= button_to Spree.t(:sign_in_with_provider, provider: OmniAuth::Utils.camelize(provider)), omniauth_authorize_path(resource_name, provider), data: { turbo: false } %>
     <% end %>
   <% end %>
 </div>

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/addresses/edit.html.erb

@@ -38,13 +38,13 @@
             <%= 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
+            <%= 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? %>
-            Set as default billing address
+            <%= 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">

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

@@ -49,7 +49,7 @@
                     <% end %>
                   </div>
                 </label>
-              </label>
+              </div>
             </li>
           </ul>
         </div>
@@ -115,8 +115,7 @@
       <% 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.
+            <%= Spree.t("storefront.checkout.it_seems_you_already_have_an_account_html", link: link_to(Spree.t(:login), spree_login_path, class: 'text-primary font-semibold')) %>
           </div>
         <% end %>
       <% end %>
@@ -132,7 +131,7 @@
                 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),
+                address: address_form.object.persisted? ? address_form.object : Spree::Address.new(country: current_store.default_country, user: try_spree_current_user),
                 form: form
               } %>
             </div>

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

@@ -8,7 +8,7 @@
                                                   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 %>
+        <%= button_tag Spree.t(: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? %>

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

@@ -6,7 +6,7 @@
     <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:
+          <%= Spree.t("storefront.checkout.backorder_notice") %>
           <ul class="list-disc list-inside flex-col flex space-y-1 mt-2">
             <% @order.backordered_variants.each do |variant| %>
               <li><%= variant.name %></li>
@@ -67,4 +67,3 @@
     </div>
   </div>
 <% end %>
-

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

@@ -7,8 +7,8 @@
           <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 %>
+            <%= link_to Spree.t("storefront.checkout.return_to_cart"), spree.cart_path, class: 'mx-4 py-4', target: :_top %>
+            <%= link_to Spree.t(: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>

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

@@ -66,7 +66,7 @@
             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 %>
+      <%= Spree.t(:pay) %>
     </button>
   </div>
 <% end %>

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

@@ -47,70 +47,71 @@
                   <span>
                     <%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %>
                   </span>
-                <% end %>
+                </div>
               <% end %>
             <% end %>
-          <% elsif order.state == 'address' %>
-            <div class="flex justify-between items-center mb-2">
-              <span><%= Spree.t(:shipping) %>:</span>
-              <span class="text-xs text-gray-500"><%= Spree.t('storefront.checkout.calculated_at_next_step') %></span>
-            </div>
           <% end %>
+        <% elsif order.state == 'address' %>
+          <div class="flex justify-between items-center mb-2">
+            <span><%= Spree.t(:shipping) %>:</span>
+            <span class="text-xs text-gray-500"><%= Spree.t('storefront.checkout.calculated_at_next_step') %></span>
+          </div>
+        <% end %>
 
-          <% if order.payment? || order.completed? %>
-            <% cache spree_base_cache_scope.call(order.all_adjustments.nonzero.tax.eligible.cache_key_with_version) do %>
-              <% order.all_adjustments.nonzero.tax.eligible.group_by(&:label).each do |label, adjustments| %>
-                <div class="flex justify-between items-center mb-2">
-                  <span><%= label %></span>
+        <% if order.payment? || order.completed? %>
+          <% cache spree_base_cache_scope.call(order.all_adjustments.nonzero.tax.eligible.cache_key_with_version) do %>
+            <% order.all_adjustments.nonzero.tax.eligible.group_by(&:label).each do |label, adjustments| %>
+              <div class="flex justify-between items-center mb-2">
+                <span><%= label %></span>
 
-                  <% tax_total = Spree::Money.new(adjustments.sum(&:amount), currency: order.currency) %>
-                  <span><%= tax_total.to_html %></span>
-                </div>
-              <% end %>
+                <% tax_total = Spree::Money.new(adjustments.sum(&:amount), currency: order.currency) %>
+                <span><%= tax_total.to_html %></span>
+              </div>
             <% end %>
           <% end %>
+        <% end %>
 
-          <% if order.adjustments.nonzero.non_tax.eligible.exists? %>
-            <% order.adjustments.nonzero.non_tax.eligible.each do |adjustment| %>
-              <div class="flex justify-between items-center mb-2">
+        <% if order.adjustments.nonzero.non_tax.eligible.exists? %>
+          <% order.adjustments.nonzero.non_tax.eligible.each do |adjustment| %>
+            <div class="flex justify-between items-center mb-2">
                 <span>
                   <%= adjustment.label %>:
                 </span>
-                <span>
+              <span>
                   <%= adjustment.display_amount.to_html %>
                 </span>
-              </div>
-            <% end %>
-          <% end %>
-
-          <% if order.respond_to?(:gift_card) && order.gift_card.present? %>
-            <div class="flex justify-between items-center mb-2">
-              <span><%= Spree.t(:gift_card) %>:</span>
-              <span>-<%= order.display_gift_card_total %></span>
-            </div>
-          <% elsif order.using_store_credit? %>
-            <div class="flex justify-between items-center mb-2">
-              <span>Store credit:</span>
-              <span><%= order.display_total_applied_store_credit %></span>
             </div>
           <% end %>
+        <% end %>
 
-          <div>
-            <div class="flex justify-between items-center">
-              <span class="font-bold text-lg"><%= Spree.t(:total) %></span>
-              <div class="">
-                <span class="text-xs mr-1"><%= order.currency.upcase %></span>
-                <span class="font-semibold text-lg inline" id='summary-order-total' data-currency="<%= Money::Currency.find(order.currency).symbol %>">
+        <% if order.respond_to?(:gift_card) && order.gift_card.present? %>
+          <div class="flex justify-between items-center mb-2">
+            <span><%= Spree.t(:gift_card) %>:</span>
+            <span>-<%= order.display_gift_card_total %></span>
+          </div>
+        <% elsif order.using_store_credit? %>
+          <div class="flex justify-between items-center mb-2">
+            <span><%= Spree.t(:store_credit_name) %>:</span>
+            <span><%= order.display_total_applied_store_credit %></span>
+          </div>
+        <% end %>
+
+        <div>
+          <div class="flex justify-between items-center">
+            <span class="font-bold text-lg"><%= Spree.t(:total) %></span>
+            <div class="">
+              <span class="text-xs mr-1"><%= order.currency.upcase %></span>
+              <span class="font-semibold text-lg inline" id='summary-order-total' data-currency="<%= Money::Currency.find(order.currency).symbol %>">
                   <%= order.display_total_minus_store_credits.to_html %>
                 </span>
-              </div>
             </div>
           </div>
         </div>
-      <% end %>
-
-      <div id="checkout-message" class="mt-8">
-        <%= current_store.checkout_message if current_store.checkout_message.present? %>
       </div>
+    <% end %>
+
+    <div id="checkout-message" class="mt-8">
+      <%= current_store.checkout_message if current_store.checkout_message.present? %>
     </div>
-  <% end %>
+  </div>
+<% end %>