spree_admin 5.1.0.beta3 → 5.1.0.rc1

data/app/helpers/spree/admin/base_helper.rb

@@ -243,6 +243,61 @@ module Spree
         content_tag(:span, ' *', class: 'required font-weight-bold text-danger')
       end
 
+      # renders a clipboard button
+      # @param options [Hash] the options for the button
+      # @option options [String] :class the CSS class(es) of the button
+      # @option options [Hash] :data the data attributes for the button
+      # @option options [String] :title the title of the button
+      # @return [String] the button
+      def clipboard_button(options = {})
+        options[:class] ||= 'btn btn-clipboard with-tip'
+        options[:type] ||= 'button'
+        options[:data] ||= {}
+        options[:data][:action] = 'clipboard#copy'
+        options[:data][:clipboard_target] = 'button'
+        options[:data][:title] = Spree.t('admin.copy_to_clipboard')
+        options[:aria_label] ||= Spree.t('admin.copy_to_clipboard') # screen-reader label
+
+        content_tag(:button, options) do
+          icon('copy', class: 'mr-0 font-size-sm')
+        end
+      end
+
+      # renders a clipboard component
+      # @param text [String] the text to copy
+      # @param options [Hash] the options for the component
+      # @option options [String] :class the CSS class(es) of the component
+      # @option options [Hash] :data the data attributes for the component
+      # @option options [String] :title the title of the component
+      # @return [String] the component
+      def clipboard_component(text, options = {})
+        options[:data] ||= {}
+        options[:data][:controller] = 'clipboard'
+        options[:data][:clipboard_success_content_value] ||= raw(icon('check', class: 'mr-0 font-size-sm'))
+
+        content_tag(:span, data: options[:data]) do
+          hidden_field_tag(:clipboard_source, text, data: { clipboard_target: 'source' }) +
+            clipboard_button
+        end
+      end
+
+      # renders a progress bar component
+      # @param options [Hash] the options for the component
+      # @param value [Integer] the value of the progress bar
+      # @option options [Integer] :min the minimum value of the progress bar
+      # @option options [Integer] :max the maximum value of the progress bar
+      # @return [String] the component
+      def progress_bar_component(value, options = {})
+        min = options[:min] || 0
+        max = options[:max] || 100
+        percentage = (value.to_f / max * 100).round
+
+        content_tag(:div, class: 'progress') do
+          content_tag(:div, { class: 'progress-bar', role: 'progressbar', style: "width: #{percentage}%", aria: { valuenow: value, valuemin: min, valuemax: max } }) do
+          end
+        end
+      end
+
       # returns the allowed file types for upload, according to the active storage configuration
       # @return [Array<String>] the allowed file types for upload, eg. ['image/png', 'image/jpeg', 'image/gif', 'image/webp']
       def allowed_file_types_for_upload

data/app/helpers/spree/admin/navigation_helper.rb

@@ -231,7 +231,7 @@ module Spree
           link_to url, opts, &block
         else
           link_to url, opts do
-            (label + icon('external-link', class: 'ml-1 mr-0 small')).html_safe
+            (label + icon('external-link', class: 'ml-1 mr-0 small opacity-50')).html_safe
           end
         end
       end
@@ -263,7 +263,7 @@ module Spree
       # @param css [String] the css class of the help bubble
       # @return [String] the help bubble with the icon
       def help_bubble(text = '', placement = 'bottom', css: nil)
-        css ||= 'text-muted opacity-75 cursor-help'
+        css ||= 'text-muted opacity-75 cursor-default'
         content_tag :small, icon('info-square-rounded', class: css), data: { placement: placement }, class: "with-tip #{css}", title: text
       end
 

data/app/helpers/spree/admin/payments_helper.rb

@@ -11,11 +11,6 @@ module Spree
         end
       end
 
-      def payment_method_icon_tag(payment_method, opts = {})
-        image_tag "payment_icons/#{payment_method}.svg", opts
-      rescue Sprockets::Rails::Helper::AssetNotFound
-      end
-
       def available_payment_methods
         @available_payment_methods ||= Spree::PaymentMethod.providers.map { |provider| provider.name.constantize.new }.delete_if { |payment_method| !payment_method.show_in_admin? || current_store.payment_methods.pluck(:type).include?(payment_method.type) }.sort_by(&:name)
       end

data/app/helpers/spree/admin/products_helper.rb

@@ -124,7 +124,7 @@ module Spree
       end
 
       def sorted_product_properties(product)
-        product.product_properties.sort_by { |product_property| product_property.property.position }
+        product.product_properties.includes(:property).sort_by { |product_property| product_property.property.position }
       end
     end
   end

data/app/helpers/spree/admin/promotion_rules_helper.rb

@@ -10,7 +10,19 @@ module Spree
         eligible_values = promotion_rule.preferred_eligible_values || []
         return [] if eligible_values.empty?
 
-        Spree::OptionValueVariant.where(id: eligible_values).to_tom_select_json
+        Spree::OptionValue.includes(:option_type).where(id: eligible_values).map do |ov|
+          {
+            id: ov.id,
+            name: ov.display_presentation
+          }
+        end
+      end
+
+      # Returns the promotion rule option values
+      # @param value_ids [Array<Integer>]
+      # @return [Array<String>]
+      def promotion_rule_option_values(value_ids)
+        Spree::OptionValue.includes(:option_type).where(id: value_ids).map(&:display_presentation)
       end
     end
   end

data/app/helpers/spree/admin/shipment_helper.rb

@@ -1,5 +1,7 @@
 module Spree::Admin
   module ShipmentHelper
+    include Spree::ShipmentHelper
+
     def can_ship?(shipment)
       can?(:update, shipment) && shipment.shippable?
     end

data/app/javascript/spree/admin/application.js

@@ -73,6 +73,7 @@ import SectionFormController from 'spree/admin/controllers/section_form_controll
 import SelectController from 'spree/admin/controllers/select_controller'
 import SeoFormController from 'spree/admin/controllers/seo_form_controller'
 import SlugFormController from 'spree/admin/controllers/slug_form_controller'
+import StickyController from 'spree/admin/controllers/sticky_controller'
 import SortableTree from 'spree/admin/controllers/sortable_tree_controller'
 import StockTransferController from 'spree/admin/controllers/stock_transfer_controller'
 import StoreFormController from 'spree/admin/controllers/store_form_controller'
@@ -124,6 +125,7 @@ application.register('section-form', SectionFormController)
 application.register('select', SelectController)
 application.register('seo-form', SeoFormController)
 application.register('slug-form', SlugFormController)
+application.register('sticky', StickyController)
 application.register('sortable', Sortable)
 application.register('sortable-tree', SortableTree)
 application.register('stock-transfer', StockTransferController)

data/app/javascript/spree/admin/controllers/active_storage_upload_controller.js

@@ -29,7 +29,8 @@ export default class extends Controller {
     })
 
     this.uppy.use(ActiveStorageUpload, {
-      directUploadUrl: document.querySelector("meta[name='direct-upload-url']").getAttribute('content')
+      directUploadUrl: document.querySelector("meta[name='direct-upload-url']").getAttribute('content'),
+      crop: this.cropValue
     })
 
     let dashboardOptions = {}
@@ -55,16 +56,6 @@ export default class extends Controller {
 
     this.uppy.on('file-editor:complete', (updatedFile) => {
       console.log('File editing complete:', updatedFile)
-      // Remove the old file from Uppy's file list
-      this.uppy.removeFile(updatedFile.id)
-      // Add the updated file to Uppy
-      this.uppy.addFile({
-        name: updatedFile.name,
-        type: updatedFile.type,
-        data: updatedFile.data,
-        source: 'local',
-        isRemote: false
-      })
 
       this.handleUI(updatedFile)
 

data/app/javascript/spree/admin/controllers/multi_tom_select_controller.js

@@ -26,8 +26,9 @@ export default class extends Controller {
   values() {
     return this.selectTargets
       .map((selectTarget) => selectTarget.querySelector('select'))
-      .map((select) => select.options[select.selectedIndex].text)
-      .filter((text) => text?.length > 0)
+      .map((select) => select.options[select.selectedIndex])
+      .filter((option) => option.value.length > 0)
+      .map((option) => ({ text: option.text, value: option.value}))
   }
 
   setValues() {

data/app/javascript/spree/admin/controllers/return_items_controller.js

@@ -21,7 +21,12 @@ export default class extends CheckboxSelectAll {
     var totalPretaxRefund = 0
     this.checked.forEach((checkbox) => {
       const returnItemRow = checkbox.closest('tr')
-      const amount = parseFloat(returnItemRow.querySelector('.refund-amount-input').value)
+      const refundAmountInput = returnItemRow.querySelector('.refund-amount-input')
+      let amount = parseFloat(refundAmountInput.value)
+      if (!Number.isFinite(amount)) {
+        amount = 0
+        refundAmountInput.value = 0
+      }
       totalPretaxRefund += amount
     })
 

data/app/javascript/spree/admin/controllers/sticky_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    threshold: { type: Number, default: 60 }
+  }
+
+  connect() {
+    this.handleScroll = this.handleScroll.bind(this)
+    window.addEventListener('scroll', this.handleScroll)
+  }
+
+  disconnect() {
+    window.removeEventListener('scroll', this.handleScroll)
+  }
+
+  handleScroll() {
+    if (window.scrollY > this.thresholdValue) {
+      this.element.classList.add('sticky-top')
+    } else {
+      this.element.classList.remove('sticky-top')
+    }
+  }
+}

data/app/javascript/spree/admin/controllers/variants_form_controller.js

@@ -129,7 +129,7 @@ export default class extends CheckboxSelectAll {
       const nestingLevel = internalName.split('/').length
       if (nestingLevel === 1) {
         const firstOptionKey = Object.keys(this.optionsValue)[0]
-        const newOptionValues = this.optionsValue[firstOptionKey].values.filter((value) => value !== internalName)
+        const newOptionValues = this.optionsValue[firstOptionKey].values.filter((value) => value.text !== internalName)
         if (newOptionValues.length === 0) {
           const newOptionsValue = this.optionsValue
           delete newOptionsValue[firstOptionKey]
@@ -265,12 +265,12 @@ export default class extends CheckboxSelectAll {
     let name = ''
     let internalName = name
     if (i === 0) {
-      name = variant[keys[i]]
+      name = variant[keys[i]].text
       internalName = name
     } else {
-      const namesPath = keys.slice(1, keys.length).map((key) => variant[key])
+      const namesPath = keys.slice(1, keys.length).map((key) => variant[key].text)
       name = namesPath.join(' / ')
-      internalName = `${variant[keys[0]]}/${namesPath.join('/')}`
+      internalName = `${variant[keys[0]].text}/${namesPath.join('/')}`
     }
 
     return { name, internalName }
@@ -495,7 +495,7 @@ export default class extends CheckboxSelectAll {
             const variantEditButton = variantTarget.querySelector('[data-slot="variantEditButton"]')
 
             if (variantEditButton) {
-              variantEditButton.href = `/admin/products/${this.productIdValue}/variants/${variantId}/edit`
+              variantEditButton.href = `${Spree.adminPath}/products/${this.productIdValue}/variants/${variantId}/edit`
               variantEditButton.classList.remove('invisible')
             }
           }
@@ -572,12 +572,12 @@ export default class extends CheckboxSelectAll {
   refreshParentInputs() {
     const firstOption = Object.values(this.optionsValue)[0]
     if (firstOption) {
-      firstOption.values.forEach((name) => {
+      firstOption.values.forEach((option) => {
         this.currenciesValue.forEach((currency) => {
-          this.updateParentPriceRange(name, currency)
+          this.updateParentPriceRange(option.text, currency)
         })
         this.stockLocationsValue.forEach((stockLocationId) => {
-          this.updateParentStockSum(name, stockLocationId)
+          this.updateParentStockSum(option.text, stockLocationId)
         })
         this.updateShopLocationCountOnHand()
       })
@@ -615,11 +615,17 @@ export default class extends CheckboxSelectAll {
         .find((option) => option.name === key).position
       inputs.push(positionInput)
 
-      const valueInput = document.createElement('input')
-      valueInput.type = 'hidden'
-      valueInput.name = `product[variants_attributes][${i}][options][][value]`
-      valueInput.value = variant[key]
-      inputs.push(valueInput)
+      const optionNameInput = document.createElement('input')
+      optionNameInput.type = 'hidden'
+      optionNameInput.name = `product[variants_attributes][${i}][options][][option_value_name]`
+      optionNameInput.value = variant[key].value
+      inputs.push(optionNameInput)
+
+      const optionIdInput = document.createElement('input')
+      optionIdInput.type = 'hidden'
+      optionIdInput.name = `product[variants_attributes][${i}][options][][option_value_presentation]`
+      optionIdInput.value = variant[key].text
+      inputs.push(optionIdInput)
     })
 
     return inputs
@@ -924,8 +930,8 @@ export default class extends CheckboxSelectAll {
     const optionValuesSelectContainer = template.querySelector('[data-slot="optionValuesSelectContainer"]')
     const tomSelectOptionValues = optionValues.map((optionValue) => {
       return {
-        id: availableOptions.find((availableOption) => availableOption.name === optionValue)?.id,
-        name: optionValue
+        id: optionValue.value,
+        name: optionValue.text,
       }
     })
 
@@ -948,8 +954,8 @@ export default class extends CheckboxSelectAll {
     values.forEach((value) => {
       const template = this.optionValueTemplateTarget.content.cloneNode(true)
       const optionValueNameEl = template.querySelector('[data-slot="optionValueName"]')
-      optionValueNameEl.textContent = value
-      optionValueNameEl.dataset.name = value
+      optionValueNameEl.textContent = value.text
+      optionValueNameEl.dataset.name = value.text
 
       templates.push(template)
     })

data/app/javascript/spree/admin/helpers/uppy_active_storage.js

@@ -20,7 +20,8 @@ export default class ActiveStorageUpload extends BasePlugin {
       limit: 0,
       timeout: 30 * 1000,
       directUploadUrl: null,
-      headers: {}
+      headers: {},
+      crop: false
     }
 
     this.opts = Object.assign({}, defaultOptions, opts)
@@ -37,10 +38,19 @@ export default class ActiveStorageUpload extends BasePlugin {
 
   install() {
     this.uppy.addUploader(this.handleUpload)
+    this.uppy.on('file-editor:complete', this.onEditorComplete)
   }
 
   uninstall() {
     this.uppy.removeUploader(this.handleUpload)
+    this.uppy.off('file-editor:complete', this.onEditorComplete)
+  }
+  
+  onEditorComplete = (updatedFile) => {
+    this.handleUpload([updatedFile.id])
+
+    // call directly upload method after editing image
+    return this.uploadFiles([updatedFile])
   }
 
   handleUpload(fileIDs) {
@@ -48,6 +58,10 @@ export default class ActiveStorageUpload extends BasePlugin {
       this.uppy.log("[ActiveStorage] No files to upload!")
       return Promise.resolve()
     }
+    // do not upload before editing is done
+    if (this.opts.crop) {
+      return Promise.resolve()
+    }
 
     this.uppy.log("[ActiveStorage] Uploading...")
     const files = fileIDs.map(fileID => this.uppy.getFile(fileID))
@@ -115,8 +129,6 @@ export default class ActiveStorageUpload extends BasePlugin {
             directUploadSignedId: blob.signed_id,
           }
 
-          this.uppy.setFileState(file.id, { response })
-
           this.uppy.emit("upload-success", file, blob)
 
           return resolve(file)

data/app/views/active_storage/_upload_form.html.erb

@@ -2,7 +2,7 @@
 <% height ||= 300 %>
 <% crop ||= false unless defined?(crop) %>
 <% auto_submit ||= false %>
-<% can_delete ||= true unless defined?(can_delete) %>
+<% show_delete_button = defined?(can_delete) ? can_delete : true %>
 <% css ||= '' %>
 
 <% if field_name && form %>
@@ -36,7 +36,7 @@
 
         <% if crop %>
           <span class="text-muted ml-2 text-center small mt-2">
-            Recommended size: <%= width %>x<%= height %>px
+            <%= Spree.t('admin.recommended_size') %>: <%= width %>x<%= height %>px
           </span>
         <% end %>
       </div>
@@ -48,7 +48,7 @@
         <%= Spree.t('actions.select_file') %>
       </button>
 
-      <% if can_delete %>
+      <% if show_delete_button %>
         <button type="button" class="btn btn-danger ml-auto" data-action="active-storage-upload#remove" data-turbo-confirm="<%= Spree.t(:are_you_sure) %>">
           <%= icon('trash') %>
 

data/app/views/spree/admin/coupon_codes/_coupon_code.html.erb

@@ -1,11 +1,7 @@
 <tr id="spree_coupon_code_<%= coupon_code[0] %>">
   <td class="w-50">
-    <div data-controller="clipboard">
-      <code data-clipboard-target="source"><%= coupon_code[1].upcase %></code>
-      <button type="button" class="btn btn-light p-1 ml-2 with-tip" data-action="clipboard#copy" title="<%= Spree.t('admin.copy_to_clipboard') %>">
-        <%= icon('copy-check', class: 'mr-0 font-size-sm') %>
-      </button>
-    </div>
+    <code><%= coupon_code[1].upcase %></code>
+    <%= clipboard_component(coupon_code[1].upcase) %>
   </td>
   <td class="w-25 font-size-sm"><%= active_badge(coupon_code[2] == 'used') %></td>
   <td class="w-25 font-size-sm"><%= local_time(coupon_code[3]) %></td>

data/app/views/spree/admin/coupon_codes/index.csv.erb

@@ -10,5 +10,5 @@
   coupon_code[0].upcase,
   coupon_code[1],
   coupon_code[2]
-  ]).strip.html_safe %>
+  ]).strip %>
 <%- end -%>

data/app/views/spree/admin/custom_domains/edit.html.erb

@@ -3,11 +3,10 @@
   <%= @custom_domain.url %>
 <% end %>
 
-<%= render partial: 'spree/admin/shared/error_messages', locals: { target: @object } %>
-
 <%= form_for @object, url: spree.admin_custom_domain_path(@object) do |f| %>
   <div class="row">
-    <div class="col-lg-6">
+    <div class="col-lg-6 offset-lg-3">
+      <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @object } %>
       <%= render partial: 'form', locals: { f: f } %>
       <%= render partial: 'spree/admin/shared/edit_resource_links', locals: { f: f } %>
     </div>

data/app/views/spree/admin/custom_domains/new.html.erb

@@ -3,11 +3,10 @@
   <%= Spree.t(:new_custom_domain) %>
 <% end %>
 
-<%= render partial: 'spree/admin/shared/error_messages', locals: { target: @object } %>
-
 <%= form_for @object, url: spree.admin_custom_domains_path do |f| %>
   <div class="row">
-    <div class="col-lg-6">
+    <div class="col-lg-6 offset-lg-3">
+      <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @object } %>
       <%= render partial: 'form', locals: { f: f } %>
       <%= render partial: 'spree/admin/shared/new_resource_links' %>
     </div>

data/app/views/spree/admin/dashboard/_setup_progress.html.erb

@@ -12,8 +12,7 @@
         </span>
       </span>
     </div>
-    <div class="progress">
-      <div class="progress-bar bg-success" style="width: <%= current_store.setup_percentage %>%" role="progressbar" aria-valuenow="<%= current_store.setup_percentage %>" aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
+
+    <%= progress_bar_component(current_store.setup_percentage) %>
   </div>
 </div>

data/app/views/spree/admin/dashboard/_store_preview.html.erb

@@ -12,15 +12,9 @@
     <% end %>
 
     <div class="card-body px-2 pt-0 pb-2">
-      <div class="flex my-2 p-1 w-100 rounded border" data-controller="clipboard" data-clipboard-success-content-value="Copied!">
-        <% if current_store.default_custom_domain&.active? %>
-          <%= text_field_tag :custom_domain, current_store.default_custom_domain.url, readonly: true, class: 'form-control-plaintext py-0', data: { clipboard_target: 'source' } %>
-        <% else %>
-          <%= text_field_tag :domain, current_store.url, readonly: true, class: 'form-control-plaintext py-0', data: { clipboard_target: 'source' } %>
-        <% end %>
-        <button data-action="clipboard#copy" data-clipboard-target="button" class="btn btn-sm py-1 hover-gray">
-          Copy
-        </button>
+      <div class="flex my-2 p-1 w-100 rounded border">
+        <%= text_field_tag :domain, current_store.url_or_custom_domain, readonly: true, class: 'form-control-plaintext py-0' %>
+        <%= clipboard_component(current_store.url_or_custom_domain) %>
       </div>
 
       <div class="d-flex">

data/app/views/spree/admin/gift_card_batches/_form.html.erb

@@ -0,0 +1,30 @@
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title">
+      <%= Spree.t(:gift_card_batch) %>
+    </h5>
+  </div>
+
+  <div class="card-body">
+    <div class="form-group">
+      <%= f.label :prefix, raw(Spree.t('admin.gift_card_batches.prefix') + required_span_tag)%>
+      <%= f.text_field :prefix, class: 'form-control', disabled: f.object.persisted? %>
+      <%= f.error_message_on :prefix %>
+    </div>
+    <div class="form-group">
+      <%= f.label :amount, raw(Spree.t(:amount) + required_span_tag) %>
+      <%= f.number_field :amount, class: 'form-control', disabled: f.object.persisted?, required: true %>
+      <%= f.error_message_on :amount %>
+    </div>
+    <div class="form-group">
+      <%= f.label :codes_count, raw(Spree.t('admin.gift_card_batches.codes_count') + required_span_tag) %>
+      <%= f.number_field :codes_count, class: 'form-control', disabled: f.object.persisted?, required: true, min: 1, max: Spree::Config[:gift_card_batch_limit] %>
+      <%= f.error_message_on :codes_count %>
+    </div>
+    <div class="form-group">
+      <%= f.label :expires_at, Spree.t(:expires_at) %>
+      <%= f.date_field :expires_at, class: 'form-control', disabled: f.object.persisted? %>
+      <%= f.error_message_on :expires_at %>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/gift_card_batches/new.html.erb

@@ -0,0 +1,15 @@
+<% content_for :page_title do %>
+  <%= page_header_back_button spree.admin_gift_cards_path %>
+  <%= Spree.t('admin.gift_card_batches.new_gift_card_batch') %>
+<% end %>
+
+<%= form_for [:admin, @object] do |f| %>
+  <div class="row">
+    <div class="col-lg-6 offset-lg-3">
+      <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @object } %>
+
+      <%= render 'form', f: f %>
+      <%= render 'spree/admin/shared/new_resource_links' %>
+    </div>
+  </div>
+<% end %>

data/app/views/spree/admin/gift_cards/_filters.html.erb

@@ -0,0 +1,43 @@
+<% frame_name ||= nil %>
+<% filter_form_url = params[:user_id].present? ? spree.admin_user_gift_cards_path(params[:user_id]) : spree.admin_gift_cards_path %>
+
+<%= search_form_for @search,
+  url: filter_form_url,
+  class: "filter-wrap",
+  data: {
+    controller: "filters reveal",
+    reveal_hidden_class: "d-none",
+    filters_url_value: request.url
+  } do |f| %>
+  <%= hidden_field_tag :frame_name, frame_name if frame_name.present? %>
+
+  <div class="d-flex flex-column flex-lg-row gap-2">
+    <%= render 'spree/admin/shared/filters_search_bar', param: :code_eq, label: Spree.t(:code) %>
+    <%= render "table_filter_dropdown" %>
+    <%= render "spree/admin/shared/filters_button" %>
+  </div>
+  <div data-reveal-target="item" class="d-none" id="table-filter">
+    <% if params[:user_id].blank? %>
+      <div class="form-group">
+        <%= f.label :users_email_eq, Spree.t(:email) %>
+        <%= f.text_field :users_email_eq, class: "form-control", data: {filters_target: :input} %>
+      </div>
+    <% end %>
+
+    <div class="form-group">
+      <%= f.label :batch_prefix_eq, Spree.t('admin.gift_card_batches.prefix') %>
+      <%= f.text_field :batch_prefix_eq, class: "form-control", data: {filters_target: :input} %>
+    </div>
+
+    <div class="form-actions">
+      <%= turbo_save_button_tag Spree.t(:filter_results) do %>
+        <%= icon("search") %>
+        <%= Spree.t(:filter_results) %>
+      <% end %>
+    </div>
+  </div>
+
+   <%= render "spree/admin/shared/filter_badge_template" %>
+
+  <div data-filters-target="badgesContainer" class="filter-badges-container"></div>
+<% end %>

data/app/views/spree/admin/gift_cards/_form.html.erb

@@ -0,0 +1,30 @@
+<% unless f.object.persisted? %>
+  <div class="form-group">
+    <%= f.label :code do %>
+      <%= Spree.t(:code) %>
+      <%= help_bubble(Spree.t('admin.gift_cards.code_help_text')) %>
+    <% end %>
+    <%= f.text_field :code, class: 'form-control'  %>
+    <%= f.error_message_on :code %>
+  </div>
+<% end %>
+
+<div class="form-group">
+  <%= f.label :amount, raw(Spree.t(:amount) + required_span_tag) %>
+  <%= f.text_field :amount, class: 'form-control', required: true %>
+  <%= f.error_message_on :amount %>
+</div>
+
+<div class="form-group">
+  <%= f.label :user_id, Spree.t(:customer) %>
+  <%= tom_select_tag 'gift_card[user_id]',
+        active_option: @user&.id || @object.user_id,
+        include_blank: true,
+        options: users_for_select_options %>
+</div>
+<div class="form-group">
+  <%= f.label :expires_at, Spree.t(:expires_at) %>
+  <%= f.date_field :expires_at, class: 'form-control' %>
+  <%= f.error_message_on :expires_at %>
+</div>
+

data/app/views/spree/admin/gift_cards/_gift_card.html.erb

@@ -0,0 +1,28 @@
+<% link = @user.present? ? spree.admin_user_gift_card_path(gift_card, user_id: @user.id) : spree.admin_gift_card_path(gift_card) %>
+
+<tr id="<%= spree_dom_id gift_card %>" data-controller="row-link">
+  <td class="w-25 py-0">
+    <%= link_to gift_card.code.upcase, link, class: 'font-weight-bold d-block w-100 h-100 py-2', data: { 'turbo-frame': '_top', row_link_target: :link } %>
+  </td>
+  <td class="w-10 cursor-pointer" data-action="click->row-link#openLink"><%= gift_card.display_amount %></td>
+  <td class="w-10 cursor-pointer" data-action="click->row-link#openLink"><%= gift_card.display_amount_used %></td>
+  <td class="w-10 cursor-pointer" data-action="click->row-link#openLink"><%= gift_card.currency.upcase %></td>
+  <td class="w-10 cursor-pointer" data-action="click->row-link#openLink"><%= active_badge(gift_card.active?, label: gift_card.display_state) %></td>
+  <td class="w-10 cursor-pointer" data-action="click->row-link#openLink">
+    <% if gift_card.expires_at.present? %>
+      <%= local_date(gift_card.expires_at) %>
+    <% else %>
+      <span class="text-muted">
+        <%= Spree.t(:not_available) %>
+      </span>
+    <% end %></td>
+  <td class="w-15 cursor-pointer" data-action="click->row-link#openLink">
+    <% if gift_card.user.present? %>
+      <%= gift_card.user.email %>
+    <% else %>
+      <span class="text-muted">
+        <%= Spree.t(:not_available) %>
+      </span>
+    <% end %>
+  </td>
+</tr>