spree_storefront 5.0.0.rc1

data/app/views/themes/default/spree/search/_suggestions.html.erb

@@ -0,0 +1,92 @@
+<% loaded ||= false %>
+<% taxons ||= [] %>
+<% product_limit ||= 20 %>
+<% products ||= [] %>
+<% has_more ||= products.any? && products.count > product_limit %>
+
+<div class="bg-background w-full h-full flex flex-col">
+  <div class="uppercase block py-4 lg:py-6 border-b border-default w-full font-semibold text-sm tracking-widest">
+    <h3 class="page-container"><%= Spree.t(:top_suggestions) %></h3>
+  </div>
+  <div class="flex flex-col md:grid md:grid-cols-4 grid-rows-[1fr_min-content] w-full page-container h-full">
+    <% if loaded %>
+      <div class="flex flex-col justify-between md:!border-r border-default md:h-full md:w-full animate-fadeIn relative border-b md:!border-b-0 w-auto -mx-4">
+        <div class="flex flex-col md:pr-6 mb-4">
+          <h3 class="text-sm uppercase px-4 py-6"><%= Spree.t(:categories) %></h3>
+          <% if taxons.any? %>
+            <% taxons.limit(5).each do |taxon| %>
+              <%= link_to spree.nested_taxons_path(taxon), class: "leading-snug flex justify-between w-full p-4 hover:bg-accent" do %>
+                <%= taxon.name %>
+                <%= render 'spree/shared/icons/chevron_right' %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+        <% if has_more %>
+          <div class="fixed md:sticky py-6 px-4 bottom-0 left-0 bg-accent w-full z-[60]">
+            <%= link_to spree.search_path(q: query), class: "btn-primary text-center uppercase flex items-baseline justify-center" do %>
+              <span class="whitespace-nowrap"><%= Spree.t(:search_all) %> "</span>
+              <span class="whitespace-nowrap overflow-ellipsis w-min max-w-[12ch] overflow-hidden inline"><%= query %></span>
+              <span>"</span>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+      <div class="md:pl-[3.75rem] py-6 w-full h-full md:col-span-3 animate-fadeIn">
+        <% if products.present? %>
+          <div>
+            <%= render 'spree/products/swiper',
+              section: theme_layout_sections['header'],
+              products: products.limit(product_limit),
+              desktop_slides: 3,
+              heading: Spree.t(:products),
+              pagination: 'top',
+              heading_class: "text-sm uppercase !leading-4 -mb-4 lg:mb-0 tracking-widest" %>
+          </div>
+        <% else %>
+          <p class="text-center text-sm text-neutral font-bold">
+            <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::Product)) %>.
+          </p>
+        <% end %>
+      </div>
+
+      <% if has_more && taxons.none? %>
+        <div class="fixed md:relative md:col-span-2 lg:col-span-1 py-6 px-10 bottom-0 left-0 bg-accent w-full z-[60]">
+          <%= link_to spree.search_path(q: query), class: "btn-primary text-center uppercase flex items-baseline justify-center" do %>
+            <span class="whitespace-nowrap"><%= Spree.t(:search_all) %> "</span>
+            <span class="whitespace-nowrap overflow-ellipsis w-min max-w-[12ch] overflow-hidden inline"><%= query %></span>
+            <span>"</span>
+          <% end %>
+        </div>
+      <% end %>
+
+    <% else %>
+      <div class="flex flex-col p-4 md:border-r1 border-default pl-4 gap-2 md:h-full w-full">
+        <% 5.times do %>
+          <div class="block w-full animate-pulse bg-accent h-6"></div>
+        <% end %>
+      </div>
+      <div class='grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6 px-4 md:px-[3.75rem] py-6 w-full h-full md:col-span-3 animate-pulse'>
+        <div class='lg:col-span-12 flex justify-between flex-col overflow-hidden'>
+          <div class='grid gap-4 lg:gap-6 grid-cols-8 lg:grid-cols-12'>
+            <div class='col-span-6 lg:col-span-4'>
+              <div class='aspect-1 bg-accent w-full'></div>
+              <div class='h-6 mt-2 w-32 bg-accent rounded'></div>
+              <div class='h-8 mt-2 w-16 bg-accent rounded'></div>
+            </div>
+            <div class='col-span-2 lg:col-span-4 flex flex-col h-full overflow-hidden'>
+              <div class='h-full lg:aspect-1 bg-accent w-full'></div>
+              <div class='h-6 mt-2 w-32 bg-accent rounded shrink-0'></div>
+              <div class='h-8 mt-2 w-16 bg-accent rounded shrink-0'></div>
+            </div>
+            <div class='hidden col-span-2 lg:col-span-4 lg:flex flex-col h-full overflow-hidden'>
+              <div class='h-full lg:aspect-1 bg-accent w-full'></div>
+              <div class='h-6 mt-2 w-32 bg-accent rounded shrink-0'></div>
+              <div class='h-8 mt-2 w-16 bg-accent rounded shrink-0'></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/themes/default/spree/settings/show.html.erb

@@ -0,0 +1,32 @@
+<%= turbo_frame_tag :settings_modal do %>
+  <div
+    data-modal-target="container"
+    data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
+    class="currency-and-locale-modal hidden animate-fadeIn fixed inset-0 overflow-y-auto flex items-end md:items-center justify-center z-[9999] h-dvh w-full"
+    style="animation-duration: 150ms;">
+    <div class="w-full lg:w-[600px] relative h-auto lg:max-h-screen flex justify-center flex-col gap-4 bg-background p-5 ">
+      <button
+      type="button"
+      data-action="modal#close"
+      class="absolute top-5 right-5">
+        <%= render 'spree/shared/icons/close' %>
+      </button>
+      <h3 class="text-lg font-bold"><%= Spree.t("i18n.localization_settings") %></h3>
+      <%= form_with url: spree.settings_path, method: :put, class: 'flex flex-col gap-4', data: {turbo: false} do |f| %>
+        <% if should_render_currency_dropdown? %>
+          <div class="flex flex-col gap-2">
+            <%= f.label :switch_to_currency, Spree.t(:currency), class: 'text-xs text-neutral-600' %>
+            <%= f.select :switch_to_currency, options_for_select(supported_currency_options, current_currency) %>
+          </div>
+        <% end %>
+        <% if should_render_locale_dropdown? %>
+          <div class="flex flex-col gap-2">
+            <%= f.label :switch_to_locale, Spree.t("i18n.language"), class: 'text-xs text-neutral-600' %>
+            <%= f.select :switch_to_locale, options_for_select(supported_locales_options, current_locale) %>
+          </div>
+        <% end %>
+        <%= f.submit Spree.t("actions.save"), class: 'btn-primary' %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/themes/default/spree/shared/_account_pane.html.erb

@@ -0,0 +1,28 @@
+<div
+  id='account-pane'
+  data-turbo-permanent
+  data-slideover-account-target='overlay'
+  class='fixed inset-0 flex flex-row-reverse z-50 transition-opacity hidden'
+>
+  <div class='fixed inset-0'>
+    <div data-action='click->slideover-account#toggle' class='absolute inset-0 bg-background opacity-75'></div>
+  </div>
+  <div
+    id='slideover-account'
+    data-slideover-account-target='menu'
+    class='relative sidebar-pane flex-1 !flex flex-col w-full bg-background text-text md:border-l border-default transition ease-in-out duration-300 translate-x-full'
+  >
+    <div class='p-4 gap-4 flex-shrink-0 flex items-center justify-between border-b border-default z-50'>
+      <button
+        data-action='slideover-account#toggle'
+        class='flex items-center justify-center rounded-full focus:outline-none focus:bg-background'
+        aria-label='Close account sidebar'
+      >
+        <%= render 'spree/shared/icons/cross' %>
+      </button>
+      <span class='text-xl font-medium uppercase leading-loose'><%= Spree.t(:account) %></span>
+      <span></span>
+    </div>
+    <%= turbo_frame_tag "login", src: spree_login_path, loading: "lazy" %>
+  </div>
+</div>

data/app/views/themes/default/spree/shared/_address.html.erb

@@ -0,0 +1,35 @@
+<% cache [*spree_base_cache_scope.call(address), address.user] do %>
+  <div class="text-sm">
+    <div class="mb-1"><%= address.full_name %></div>
+    <% unless address.company.blank? %>
+      <div class="org">
+        <%= address.company %>
+      </div>
+    <% end %>
+    <div class="adr">
+      <div class="street-address-line">
+        <%= address.street %>
+      </div>
+      <div class="local">
+        <span class="locality"><%= address.city %></span>,
+        <span class="region"><%= address.state_text %></span>
+        <span class="postal-code"><%= address.zipcode %></span>
+        <span class="country-name"><%= address.country.try(:iso3) %></span>
+      </div>
+    </div>
+    <% if address.user %>
+      <div class="flex flex-wrap gap-2 mt-3">
+        <% if address.id == address.user.ship_address_id %>
+          <div class="bg-accent border border-default rounded-full px-3 py-2 text-xs">
+            <%= Spree.t(:default_shipping_address) %>
+          </div>
+        <% end %>
+        <% if address.id == address.user.bill_address_id %>
+          <div class="bg-accent border border-default rounded-full px-3 py-2 text-xs">
+            <%= Spree.t(:default_billing_address) %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/themes/default/spree/shared/_cart_icon.html.erb

@@ -0,0 +1,13 @@
+<%= turbo_frame_tag "cart-icon-#{current_order&.item_count}", target: '_top' do %>
+  <%= link_to spree.cart_path,
+    class: 'relative block w-6',
+    id: "cart-pane-link",
+    data: { action: 'click->slideover#toggle click@window->slideover#hide' },
+    onclick: 'event.preventDefault()' do %>
+    <%= render 'spree/shared/icons/cart' %>
+    <span class='cart-counter w-full text-[8px] font-extrabold absolute top-[10px] text-center'>
+      <%= current_order.item_count if current_order&.item_count&.positive? %>
+    </span>
+    <span class='sr-only'><%= Spree.t('storefront.cart.items_in_cart') %>, <%= Spree.t('storefront.cart.view_bag') %></span>
+  <% end %>
+<% end %>

data/app/views/themes/default/spree/shared/_cart_pane.html.erb

@@ -0,0 +1,38 @@
+<!-- begin sidebar/slideover -->
+<div
+  id="cart-pane"
+  data-slideover-target='overlay'
+  class='fixed inset-0 flex flex-row-reverse z-50 transition-opacity hidden'
+>
+  <div class='fixed inset-0'>
+    <div data-action='click->slideover#toggle' class='absolute inset-0 bg-background opacity-75'></div>
+  </div>
+  <div
+    id='slideover-cart'
+    data-slideover-target='menu'
+    class='relative sidebar-pane flex-1 !flex flex-col w-full bg-background text-text md:border-l border-default transition ease-in-out duration-300 translate-x-full'
+  >
+    <div class='p-4 gap-4 flex-shrink-0 flex items-center justify-between border-b border-default z-50'>
+      <%= button_tag(
+        type: 'button',
+        data: { action: 'slideover#toggle' },
+        class: 'flex items-center justify-center rounded-full focus:outline-none focus:bg-background',
+        aria: { label: 'Close sidebar' }
+      ) do %>
+        <%= render 'spree/shared/icons/close' %>
+      <% end %>
+      <span class='text-xl font-medium uppercase leading-loose'><%= Spree.t(:cart) %></span>
+      <span class='relative block w-6'>
+        <%= render 'spree/shared/icons/cart' %>
+        <span class='cart-counter w-full text-[8px] font-extrabold absolute top-[10px] text-center'>
+          <%= current_order.item_count if current_order.present? && current_order.item_count.to_i > 0 %>
+        </span>
+        <span class='sr-only'><%= Spree.t('storefront.cart.items_in_cart') %>, <%= Spree.t('storefront.cart.view_bag') %></span>
+      </span>
+    </div>
+    <div class='flex-1 h-0 overflow-y-auto'>
+      <%= turbo_frame_tag :cart_contents, class: 'cart-contents', src: spree.cart_path, loading: :lazy %>
+    </div>
+  </div>
+</div>
+<!-- end sidebar/slideover -->

data/app/views/themes/default/spree/shared/_css_variables.html.erb

@@ -0,0 +1,54 @@
+<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(current_theme) do %>
+  <style data-turbo-track="reload">
+    <%= theme_setting(:custom_font_css_import) if theme_setting(:custom_font_css_import).present? %>
+
+    :root {
+      --primary: <%= theme_setting(:primary_color) %>;
+      --accent: <%= theme_setting(:accent_color) %>;
+      --danger: <%= theme_setting(:danger_color) %>;
+      --success: <%= theme_setting(:success_color) %>;
+      --neutral: <%= theme_setting(:neutral_color) %>;
+
+      --background: <%= theme_setting(:background_color) %>;
+      --text: <%= theme_setting(:text_color) %>;
+
+      --border-default-color: <%= theme_setting(:border_color) %>;
+      --border-default-width: <%= theme_setting(:border_width) %>px;
+      --border-default-radius: <%= theme_setting(:border_radius) %>px;
+
+      /* --border-default-shadow: <%= "#{theme_setting(:border_shadow_horizontal_offset)}px #{theme_setting(:border_shadow_vertical_offset)}px #{theme_setting(:border_shadow_blur)}px rgba(0, 0, 0, #{theme_setting(:border_shadow_opacity)})" %>; */
+      --button: <%= theme_setting(:button_background_color) || theme_setting(:primary_color) %>;
+      --button-rgb: <%= theme_setting_rgb_components(:button_background_color) || theme_setting_rgb_components(:primary_color) %>;
+      --button-text: <%= theme_setting(:button_text_color) %>;
+      --button-border-radius: <%= theme_setting(:button_border_radius) %>px;
+      --button-border-width: <%= theme_setting(:button_border_thickness) %>px;
+      --button-border-color: <%= theme_setting(:button_border_color).presence %>;
+
+      --button-hover: <%= theme_setting(:button_hover_background_color) ||  theme_setting(:button_background_color) || theme_setting(:primary_color)%>;
+      --button-hover-text: <%= theme_setting(:button_hover_text_color) || theme_setting(:button_text_color) || theme_setting(:background_color)%>;
+
+      --secondary-button: <%= theme_setting(:secondary_button_background_color) || theme_setting(:background_color) %>;
+      --secondary-button-text: <%= theme_setting(:secondary_button_text_color) || theme_setting(:button_background_color) || theme_setting(:primary_color) %>;
+      --secondary-button-hover: <%= theme_setting(:secondary_button_hover_background_color) || theme_setting(:button_background_color) || theme_setting(:primary_color) %>;
+      --secondary-button-hover-text: <%= theme_setting(:secondary_button_hover_text_color) || theme_setting(:background_color) %>;
+
+      --input: <%= theme_setting(:input_border_color) || theme_setting(:border_color) %>;
+      --input-bg: <%= theme_setting(:input_background_color) %>;
+      --input-text: <%= theme_setting(:input_text_color) %>;
+      --input-focus-bg: <%= theme_setting(:input_focus_background_color) || theme_setting(:input_background_color) %>;
+      --input-border-radius: <%= theme_setting(:input_border_radius) %>px;
+
+      --neutral-50: #F3F3F3;
+      --neutral-100: #EAEAEA;
+      --neutral-200: #D4D4D4;
+      --neutral-300: #B3B3B3;
+      --neutral-400: #999999;
+      --neutral-500: #808080;
+      --neutral-600: #666666;
+      --neutral-700: #4D4D4D;
+      --neutral-800: #333333;
+      --neutral-900: #1A1A1A;
+      --accent-100: #FBFAF8;
+    }
+  </style>
+<% end %>

data/app/views/themes/default/spree/shared/_error_messages.html.erb

@@ -0,0 +1,9 @@
+<% if target && target.errors.any? %>
+  <div id="errorExplanation" class="alert-error text-center mb-4 p-2">
+    <ul>
+      <% target.errors.full_messages.each do |msg| %>
+        <li><%= msg %></li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>

data/app/views/themes/default/spree/shared/_error_messages_without_base_attribute.html.erb

@@ -0,0 +1,15 @@
+<% if target && target.errors.any? %>
+  <div id="errorExplanation" class="alert-error text-center mb-4 p-2">
+    <ul>
+      <% target.errors.messages.each do |msg| %>
+        <li>
+          <% if msg[0] != :base && !msg[0].to_s.ends_with?(".base") %>
+            <%= target.errors.full_messages_for(msg[0]).to_sentence %>
+          <% else %>
+            <%= msg[1].flatten.to_sentence %>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>

data/app/views/themes/default/spree/shared/_flash.html.erb

@@ -0,0 +1,16 @@
+<% if for_template || (key.present? && value.present?)  %>
+  <div class="pointer-events-none w-full">
+    <div data-controller="alert" data-alert-hide-class="translate-x-[500px] opacity-0" class="ease-in-out duration-500 w-full relative pointer-events-auto <%= tailwind_classes_for(key) %>">
+      <div class="p-2">
+        <p class="text-sm lg:text-base font-medium text-center uppercase text-text flash-message">
+          <%= value %>
+        </p>
+        <button data-action="alert#close" class="absolute top-2 right-2 h-[22px] lg:h-6">
+          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/themes/default/spree/shared/_flashes.html.erb

@@ -0,0 +1,10 @@
+<template id="flashMessage">
+  <%= render partial: 'spree/shared/flash', locals: { key: nil, value: nil, for_template: true } %>
+</template>
+<div id="flashes" class="fixed z-[9999] w-full top-0">
+  <% if flash.any? %>
+    <% flash.each do |key, value| %>
+      <%= render partial: 'spree/shared/flash', locals: { key: key, value: value, for_template: false } %>
+    <% end %>
+  <% end %>
+</div>

data/app/views/themes/default/spree/shared/_json_ld.html.erb

@@ -0,0 +1,32 @@
+<% cache spree_base_cache_scope.call(current_store) do %>
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Organization",
+      "url": <%= current_store.formatted_url_or_custom_domain.to_json.html_safe %>,
+      "sameAs": <%= current_store.social_links.to_json.html_safe %>,
+    <% if current_store.logo && current_store.logo&.attached? && current_store.logo&.variable? %>
+      "logo": <%= main_app.cdn_image_url(current_store.logo.variant(spree_image_variant_options(resize_to_fill: [500, 500]))).to_json.html_safe %>,
+    <% end %>
+      "name": <%= current_store.name.to_json.html_safe %>,
+      "email": <%= current_store.customer_support_email.to_json.html_safe %>
+    }
+  </script>
+<% end %>
+
+<% if canonical_path.include?('search') %>
+  <% potential_action_target = "#{canonical_href(current_store.url_or_custom_domain)}?q={search_term_string}" %>
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebSite",
+      "name": <%= current_store.name.to_json.html_safe %>,
+      "potentialAction": {
+        "@type": "SearchAction",
+        "target": <%= potential_action_target.to_json.html_safe %>,
+        "query-input": "required name=search_term_string"
+      },
+      "url": <%= current_store.formatted_url_or_custom_domain.to_json.html_safe %>
+    }
+  </script>
+<% end %>

data/app/views/themes/default/spree/shared/_line_item_options.html.erb

@@ -0,0 +1,18 @@
+<% line_item.variant.option_values.select { |ov| ov.option_type.color? }.each do |option| %>
+  <div>
+    <input class="hidden color-input" value="<%= option.name %>" >
+    <div class="label-container h-[30px] border border-default p-0.5 inline-flex items-center hover:border-dashed hover:border-primary">
+      <div class="color-preview w-[24px] h-[24px]"></div>
+      <div class="text-sm px-2">
+        <%= option.presentation %>
+      </div>
+    </div>
+  </div>
+<% end %>
+<% line_item.variant.option_values.reject { |ov| ov.option_type.color? }.each do |option| %>
+  <div>
+    <div class="h-[30px] border border-default px-2 inline-flex items-center hover:border-dashed hover:border-primary text-sm">
+      <%= option.presentation %>
+    </div>
+  </div>
+<% end %>

data/app/views/themes/default/spree/shared/_logo.html.erb

@@ -0,0 +1,42 @@
+<% logo ||= current_store.logo %>
+<% height ||= 64 %>
+<% logo_css ||= '' %>
+
+<%= link_to spree.root_path, id: 'site-logo' do %>
+  <span class='sr-only'><%= current_store.name %></span>
+  <% if logo.present? && logo.attached? && logo.variable? %>
+    <% aspect_ratio = as_aspect_ratio(logo) %>
+    <% logo_style = "aspect-ratio: #{aspect_ratio};" %>
+
+    <% if aspect_ratio.to_f > 10 %>
+      <% mobile_class = "h-[16px]" %>
+      <% desktop_class = "md:h-[32px]" %>
+    <% elsif aspect_ratio.to_f > 5 %>
+      <% mobile_class = "h-[25px]" %>
+      <% desktop_class = "md:h-[32px]" %>
+    <% elsif aspect_ratio.to_f < 3 %>
+      <% mobile_class = "h-[32px]" %>
+      <% desktop_class = "md:h-[64px]" %>
+    <% else %>
+      <% mobile_class = "h-[32px]" %>
+    <% end %>
+
+    <% if defined?(height) && height > 0 %>
+      <% logo_style += "--desktop-height: #{height}px;" %>
+      <% cdn_height = height %>
+      <% desktop_class = "custom-desktop-height" %>
+    <% elsif aspect_ratio.to_f < 3 %>
+      <% cdn_height = 64 %>
+    <% else %>
+      <% cdn_height = 32 %>
+    <% end %>
+
+    <% img_class = "w-auto #{mobile_class} #{desktop_class} #{logo_css}" %>
+
+    <% variant_options = spree_image_variant_options(resize_to_fit: [nil, cdn_height * 3]) %>
+
+    <%= image_tag main_app.cdn_image_url(logo.variant(variant_options)), class: img_class, alt: current_store.name, style: logo_style, height: cdn_height %>
+  <% else %>
+    <h1 class='text-lg uppercase text-center'><%= current_store.name %></h1>
+  <% end %>
+<% end %>

data/app/views/themes/default/spree/shared/_meta_tags.html.erb

@@ -0,0 +1,45 @@
+<% unless current_store.prefers_index_in_search_engines? %>
+  <meta name="robots" content="noindex, nofollow">
+<% end %>
+
+<% og_title = title.presence || current_store.name %>
+<% og_url = canonical_href(current_store.url_or_custom_domain) %>
+<% og_type = 'website' %>
+<% og_description = page_description.presence || current_store.description.presence || current_store.name %>
+
+<% if @product %>
+  <% og_type = 'product' %>
+<% elsif @article %>
+  <% og_type = 'article' %>
+<% end %>
+
+<meta name="description" content="<%= h(og_description) %>">
+
+<meta property="og:site_name" content="<%= current_store.name %>">
+<meta property="og:url" content="<%= og_url %>">
+<meta property="og:title" content="<%= h(og_title) %>">
+<meta property="og:type" content="<%= og_type %>">
+<meta property="og:description" content="<%= h(og_description) %>">
+
+<% if page_image.present? && page_image.attached? && page_image.variable? %>
+  <% image_url = main_app.cdn_image_url(page_image.variant(spree_image_variant_options(resize_to_fill: [1200, 630]))) %>
+
+  <meta property="og:image" content="<%= image_url %>">
+  <meta property="og:image:secure_url" content="<%= image_url %>">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:image:alt" content="<%= title.gsub(current_store.name, '') %>">
+  <meta property="twitter:image" content="<%= image_url %>" />
+<% end %>
+
+<% if @product && @product.price_in(current_currency).present? %>
+  <meta property="og:price:amount" content="<%= @product.price_in(current_currency).amount.to_s %>">
+  <meta property="og:price:currency" content="<%= current_order&.currency || current_store.default_currency %>">
+<% end %>
+
+<% if current_store.twitter.present? %>
+  <meta name="twitter:site" content="<%= '@' + current_store.twitter.split('twitter.com/').last %>">
+<% end %>
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="<%= h(og_title) %>">
+<meta name="twitter:description" content="<%= h(og_description) %>">

data/app/views/themes/default/spree/shared/_order_details.html.erb

@@ -0,0 +1,106 @@
+<% shipments ||= order.shipments %>
+
+<% if order.order_refunded? || order.partially_refunded? %>
+  <div class="alert-warning mb-5 py-2 px-3">
+    <% i18n_key_suffix = "#{shipments.shipped_but_canceled.any? ? 'refunded' : 'canceled'}.#{order.partially_refunded? ? 'partially' : 'fully'}" %>
+
+    <% if order.respond_to?(:gift_card) && order.gift_card.present? %>
+      <% key = "storefront.refund_action_required_message.order_#{i18n_key_suffix}" %>
+      <%= Spree.t(key, customer_support_email: order.store.customer_support_email ) %>
+    <% else %>
+      <% key = "storefront.refund_action_not_required_message.order_#{i18n_key_suffix}" %>
+      <%= Spree.t(key) %>
+    <% end %>
+  </div>
+<% end %>
+
+<p class="mb-6">
+  <%= I18n.t('activerecord.attributes.spree/order.completed_at') %> <%= local_time(order.completed_at) %>
+</p>
+
+<%== color_options_style_for_line_items(shipments.flat_map(&:line_items)) %>
+
+<ul>
+  <%= render partial: 'spree/shared/order_shipment', collection: shipments, as: :shipment, cached: spree_base_cache_scope %>
+</ul>
+
+<div class="mt-6 bg-accent mb-24">
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6 p-4 lg:p-6 text-sm bg-border bg-accent-100">
+    <!-- billing address -->
+    <div>
+      <div class="uppercase tracking-widest">
+        <%= Spree.t(:billing_address) %>
+      </div>
+      <div class="!leading-[1.375rem] text-neutral-800">
+        <%= render 'spree/shared/address', address: order.billing_address %>
+      </div>
+    </div>
+    <!-- payment into -->
+    <div class="mb-5 lg:mb-0">
+      <div class="uppercase tracking-widest">
+        <%= Spree.t(:payment_information) %>
+      </div>
+      <div class="!leading-[1.375rem] text-neutral-800">
+        <%= render collection: order.payments.valid, partial: 'spree/shared/payment', cached: spree_base_cache_scope %>
+      </div>
+    </div>
+  </div>
+  <!-- totals/summary -->
+  <div class="p-4 lg:p-6 text-sm">
+    <div class="flex items-center justify-between py-2">
+      <div>
+        <%= Spree.t(:subtotal) %>
+      </div>
+      <div>
+        <%= order.display_item_total.to_html %>
+      </div>
+    </div>
+    <div class="flex items-center justify-between py-2">
+      <div>
+        <%= Spree.t(:shipping) %>
+      </div>
+      <div>
+        <%= order.display_ship_total.to_html %>
+      </div>
+    </div>
+    <% if order.promo_total != 0 %>
+      <div class="flex items-center justify-between py-2">
+        <div>
+          <%= Spree.t(:discount) %>
+        </div>
+        <div>
+          <%= order.display_promo_total.to_html %>
+        </div>
+      </div>
+    <% end %>
+    <div class="flex items-center justify-between py-2">
+      <div>
+        <%= Spree.t(:tax) %>
+      </div>
+      <div>
+        <%= order.display_tax_total.to_html %>
+      </div>
+    </div>
+
+    <% if order.respond_to?(:gift_card) && order.gift_card.present? %>
+      <div class="flex items-center justify-between py-2">
+        <div><%= Spree.t(:gift_card) %></div>
+        <div>-<%= order.display_gift_card_total.to_html %></div>
+      </div>
+    <% elsif order.using_store_credit? %>
+      <div class="flex items-center justify-between py-2">
+        <div><%= Spree.t(:store_credits) %></div>
+        <div><%= order.display_total_applied_store_credit %></div>
+      </div>
+    <% end %>
+
+    <div class="flex items-center justify-between text-lg pt-4 font-medium border-default border-t">
+      <div>
+        <%= Spree.t(:total) %>
+      </div>
+      <div>
+        <%= order.display_total_minus_store_credits.to_html %>
+      </div>
+    </div>
+  </div>
+</div>