spree_admin 5.2.6 → 5.3.0.rc1

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

@@ -63,14 +63,14 @@ export default class extends Controller {
       this.slugPreviewTarget.textContent = ''
       this.descriptionPreviewTarget.textContent = ''
 
-      this.previewTarget.classList.add('d-none')
-      this.placeholderTarget.classList.remove('d-none')
+      this.previewTarget.classList.add('hidden')
+      this.placeholderTarget.classList.remove('hidden', 'd-none')
 
       return
     }
 
-    this.previewTarget.classList.remove('d-none')
-    this.placeholderTarget.classList.add('d-none')
+    this.previewTarget.classList.remove('hidden', 'd-none')
+    this.placeholderTarget.classList.add('hidden')
 
     this.titlePreviewTarget.textContent = this.metaTitle
     this.slugPreviewTarget.textContent = this.slugInputTarget.value
@@ -78,7 +78,7 @@ export default class extends Controller {
   }
 
   toggleInputs() {
-    this.inputsContainerTarget.classList.toggle('d-none')
+    this.inputsContainerTarget.classList.toggle('hidden')
   }
 
   get metaTitle() {

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

@@ -154,7 +154,7 @@ export default class extends Controller {
     }
 
     // Show dropdown
-    dropdown.classList.remove('d-none');
+    dropdown.classList.remove('hidden', 'd-none');
 
     // Style dropdown items
     dropdown.querySelectorAll('.nav-link').forEach((item, index) => {
@@ -209,7 +209,7 @@ export default class extends Controller {
     }
 
     // Hide dropdown
-    this.activeDropdown.classList.add('d-none');
+    this.activeDropdown.classList.add('hidden');
 
     // Restore dropdown to original position in sidebar
     if (this.activeDropdown._originalParent) {

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

@@ -16,9 +16,13 @@ export default class extends Controller {
 
   handleScroll() {
     if (window.scrollY > this.thresholdValue) {
-      this.element.classList.add('sticky-top')
+      this.element.classList.add('sticky')
+      this.element.classList.add('top-0')
+      this.element.classList.add('z-[1020]')
     } else {
-      this.element.classList.remove('sticky-top')
+      this.element.classList.remove('sticky')
+      this.element.classList.remove('top-0')
+      this.element.classList.remove('z-[1020]')
     }
   }
 }

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

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    url: String
+  }
+
+  connect() {
+    // Controller is ready
+  }
+
+  // This method can be used to handle custom list interactions
+  // Currently, form submission is handled by the form's native behavior
+  // with Turbo, so this is mainly a placeholder for future enhancements
+
+  refresh() {
+    // Reload the current page with Turbo
+    Turbo.visit(window.location.href)
+  }
+}

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

@@ -33,6 +33,7 @@ export default class extends CheckboxSelectAll {
     prices: Object,
     currentCurrency: String,
     currencies: Array,
+    currencyFormats: Object,
     variantIds: Object,
     currentStockLocationId: String,
     stockLocations: Array,
@@ -70,14 +71,27 @@ export default class extends CheckboxSelectAll {
     }
 
     this.inventoryFormTarget = document.querySelector('.inventory-form');
+
+    // Add form submit listener to normalize price inputs before submission
+    this.form = this.element.closest('form')
+    if (this.form) {
+      this.boundNormalizePricesBeforeSubmit = this.normalizePricesBeforeSubmit.bind(this)
+      this.form.addEventListener('submit', this.boundNormalizePricesBeforeSubmit)
+    }
+  }
+
+  disconnect() {
+    if (this.form && this.boundNormalizePricesBeforeSubmit) {
+      this.form.removeEventListener('submit', this.boundNormalizePricesBeforeSubmit)
+    }
   }
 
   toggleQuantityTracked() {
-    this.element.querySelectorAll('.column-quantity').forEach((el) => el.classList.toggle('d-none'))
+    this.element.querySelectorAll('.column-quantity').forEach((el) => this.toggleHidden(el))
 
     this.variantTemplateTarget.content
       .querySelectorAll('.column-quantity')
-      .forEach((el) => el.classList.toggle('d-none'))
+      .forEach((el) => this.toggleHidden(el))
   }
 
   toggle(e) {
@@ -111,9 +125,9 @@ export default class extends CheckboxSelectAll {
 
   toggleDeleteButton() {
     if (this.checked.length > 0) {
-      this.deleteButtonTarget.classList.remove('d-none')
+      this.deleteButtonTarget.classList.remove('hidden', 'd-none')
     } else {
-      this.deleteButtonTarget.classList.add('d-none')
+      this.deleteButtonTarget.classList.add('hidden')
     }
   }
 
@@ -212,11 +226,11 @@ export default class extends CheckboxSelectAll {
         .querySelectorAll(`input[data-slot='[stock_items_attributes][${stockLocationId}][count_on_hand]_input']`)
         .forEach((el) => {
           if (stockLocationId === newStockLocationId) {
-            el.classList.remove('d-none')
+            el.classList.remove('hidden', 'd-none')
             el.classList.add('d-block')
           } else {
             el.classList.remove('d-block')
-            el.classList.add('d-none')
+            el.classList.add('hidden')
           }
         })
     })
@@ -232,11 +246,11 @@ export default class extends CheckboxSelectAll {
         )
         .forEach((el) => {
           if (currency === newCurrency) {
-            el.classList.remove('d-none')
-            el.classList.add('d-flex')
+            el.classList.remove('hidden', 'd-none')
+            el.classList.add('flex')
           } else {
-            el.classList.remove('d-flex')
-            el.classList.add('d-none')
+            el.classList.remove('flex')
+            el.classList.add('hidden')
           }
         })
     })
@@ -416,7 +430,7 @@ export default class extends CheckboxSelectAll {
     pricesVariation.delete(null)
 
     if (pricesVariation.size === 0) {
-      parentPriceEl.value = this.priceForVariant(variantName, currency).amount?.toLocaleString(this.localeValue) || ''
+      parentPriceEl.value = this.formatNumber(this.priceForVariant(variantName, currency).amount, currency)
       parentPriceEl.placeholder = ''
       return
     }
@@ -425,9 +439,10 @@ export default class extends CheckboxSelectAll {
 
     if (minPrice !== maxPrice) {
       parentPriceEl.value = null
-      parentPriceEl.placeholder = `${minPrice} - ${maxPrice}`
+      parentPriceEl.placeholder = `${this.formatNumber(minPrice, currency)} - ${this.formatNumber(maxPrice, currency)}`
     } else {
-      parentPriceEl.value = minPrice
+      parentPriceEl.value = this.formatNumber(minPrice, currency)
+      parentPriceEl.placeholder = ''
     }
   }
 
@@ -464,7 +479,7 @@ export default class extends CheckboxSelectAll {
     const currentVariants = new Set()
 
     if (keys.length) {
-      this.variantsTableTarget.classList.remove('d-none')
+      this.variantsTableTarget.classList.remove('hidden', 'd-none')
 
       const nestingLevel = Math.min(keys.length, 2)
 
@@ -572,7 +587,7 @@ export default class extends CheckboxSelectAll {
         })
       }
     } else {
-      this.variantsTableTarget.classList.add('d-none')
+      this.variantsTableTarget.classList.add('hidden')
     }
 
     this.variantsContainerTarget.querySelectorAll('[data-variants-form-target="variant"]').forEach((variant) => {
@@ -681,11 +696,11 @@ export default class extends CheckboxSelectAll {
 
       stockInput.value = stockItem.count_on_hand
       if (String(stockLocationId) === String(this.currentStockLocationIdValue)) {
-        stockInput.classList.remove('d-none')
+        stockInput.classList.remove('hidden', 'd-none')
         stockInput.classList.add('d-block')
       } else {
         stockInput.classList.remove('d-block')
-        stockInput.classList.add('d-none')
+        stockInput.classList.add('hidden')
       }
       if (stockItem.id) {
         stockIdInput.value = stockItem.id
@@ -704,15 +719,15 @@ export default class extends CheckboxSelectAll {
       const idInput = variantTarget.querySelector(`input[data-slot="[prices_attributes][${currency}][id]_input"]`)
       priceInput.name = `product[variants_attributes][${idx}][prices_attributes][${currency}]`
       if (currency === this.currentCurrencyValue) {
-        priceInput.parentElement.classList.remove('d-none')
-        priceInput.parentElement.classList.add('d-flex')
+        priceInput.parentElement.classList.remove('hidden', 'd-none')
+        priceInput.parentElement.classList.add('flex')
       } else {
-        priceInput.parentElement.classList.remove('d-flex')
-        priceInput.parentElement.classList.add('d-none')
+        priceInput.parentElement.classList.remove('flex')
+        priceInput.parentElement.classList.add('hidden')
       }
 
       const existingPrice = this.priceForVariant(internalName, currency)
-      priceInput.value = existingPrice.amount?.toLocaleString(this.localeValue) || ''
+      priceInput.value = this.formatNumber(existingPrice.amount, currency)
       currencyInput.value = currency
       if (existingPrice.id) {
         idInput.value = existingPrice.id
@@ -810,9 +825,9 @@ export default class extends CheckboxSelectAll {
     this.newOptionNameInputTarget.tomselect.clear()
     this.newOptionValuesSelectContainerTarget.reset()
 
-    this.newOptionFormTarget.classList.add('d-none')
+    this.newOptionFormTarget.classList.add('hidden')
 
-    this.newOptionButtonTarget.classList.remove('d-none')
+    this.newOptionButtonTarget.classList.remove('hidden', 'd-none')
   }
 
   editOption(event) {
@@ -891,8 +906,8 @@ export default class extends CheckboxSelectAll {
 
   showNewOptionForm(event) {
     event.preventDefault()
-    this.newOptionFormTarget.classList.remove('d-none')
-    this.newOptionButtonTarget.classList.add('d-none')
+    this.newOptionFormTarget.classList.remove('hidden', 'd-none')
+    this.newOptionButtonTarget.classList.add('hidden')
     this.refreshOptionNameSelect()
   }
 
@@ -1119,9 +1134,108 @@ export default class extends CheckboxSelectAll {
     if (!this.inventoryFormTarget) return
 
     if (value) {
-      this.inventoryFormTarget.classList.remove('d-none')
+      this.inventoryFormTarget.classList.remove('hidden', 'd-none')
     } else {
-      this.inventoryFormTarget.classList.add('d-none')
+      this.inventoryFormTarget.classList.add('hidden')
     }
   }
+
+  toggleHidden(el) {
+    if (el.classList.contains('hidden') || el.classList.contains('d-none')) {
+      el.classList.remove('hidden', 'd-none')
+    } else {
+      el.classList.add('hidden')
+    }
+  }
+
+  formatNumber(value, currency = null) {
+    if (value === null) return ''
+    if (typeof value === 'string' && value.trim() === '') return ''
+
+    const number = Number(value)
+    if (!Number.isFinite(number)) return ''
+
+    // Use currency-specific decimal mark if available
+    const currencyCode = currency || this.currentCurrencyValue
+    const currencyFormat = this.currencyFormatsValue?.[currencyCode]
+
+    if (currencyFormat?.decimal_mark) {
+      // Format with 2 decimal places and replace . with currency's decimal mark
+      return number.toFixed(2).replace('.', currencyFormat.decimal_mark)
+    }
+
+    // Fallback to locale-based formatting
+    return number.toLocaleString(this.localeValue, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+      useGrouping: false
+    })
+  }
+
+  /**
+   * Normalizes a locale-formatted number string to standard decimal format
+   * e.g., "1.234,56" (German) -> "1234.56"
+   * e.g., "30,99" (Polish) -> "30.99"
+   * @param {string} value - The locale-formatted number string
+   * @returns {string} The normalized number string with "." as decimal separator
+   */
+  normalizeNumber(value) {
+    if (value === null || value === undefined) return ''
+
+    let stringValue = String(value).trim()
+    if (stringValue === '') return ''
+
+    // Detect the decimal separator by finding the last separator character
+    // This handles both "1,234.56" (en) and "1.234,56" (de/pl) formats
+    const lastComma = stringValue.lastIndexOf(',')
+    const lastDot = stringValue.lastIndexOf('.')
+
+    let decimalSeparator = '.'
+    let thousandsSeparator = ','
+
+    // If comma comes after dot, comma is the decimal separator (European format)
+    // Also treat comma as decimal if there's no dot and comma has 1-3 digits after it
+    if (lastComma > lastDot) {
+      decimalSeparator = ','
+      thousandsSeparator = '.'
+    } else if (lastDot === -1 && lastComma !== -1) {
+      // No dot present, check if comma looks like a decimal separator
+      // (has 1-3 digits after it, typical for currency)
+      const afterComma = stringValue.substring(lastComma + 1)
+      if (/^\d{1,3}$/.test(afterComma)) {
+        decimalSeparator = ','
+        thousandsSeparator = '.'
+      }
+    }
+
+    // Remove thousands separators
+    stringValue = stringValue.split(thousandsSeparator).join('')
+
+    // Replace decimal separator with standard "."
+    if (decimalSeparator !== '.') {
+      stringValue = stringValue.replace(decimalSeparator, '.')
+    }
+
+    // Remove any non-numeric characters except "." and "-"
+    stringValue = stringValue.replace(/[^0-9.\-]/g, '')
+
+    return stringValue
+  }
+
+  /**
+   * Normalizes all price inputs in the variants form before submission
+   * @param {Event} event - The form submit event
+   */
+  normalizePricesBeforeSubmit(event) {
+    // Find all price inputs in the variants container
+    const priceInputs = this.variantsContainerTarget.querySelectorAll(
+      'input[data-slot*="[prices_attributes]"][data-slot*="[amount]_input"]'
+    )
+
+    priceInputs.forEach((input) => {
+      if (input.value) {
+        input.value = this.normalizeNumber(input.value)
+      }
+    })
+  }
 }

data/app/javascript/spree/admin/helpers/trix/video_embed.js

@@ -55,7 +55,7 @@ Trix.config.toolbar.getDefaultHTML = function() {
           </div>
         </div>
 
-        <div class="trix-dialog--error-container mt-2 d-none">
+        <div class="trix-dialog--error-container mt-2 hidden">
           <small class="trix-dialog--error-message text-danger"></small>
         </div>
       </div>
@@ -123,8 +123,8 @@ function initializeTrixEditor(editor) {
       const errorContainer = dialog.querySelector(".trix-dialog--error-container")
       const errorMessage = errorContainer.querySelector(".trix-dialog--error-message")
 
-      if (!errorContainer.classList.contains('d-none')) {
-        errorContainer.classList.add('d-none')
+      if (!errorContainer.classList.contains('hidden')) {
+        errorContainer.classList.add('hidden')
       }
 
       errorMessage.innerHTML = ''
@@ -145,8 +145,8 @@ function initializeTrixEditor(editor) {
       } else {
         const { error } = await response.json
 
-        if (errorContainer.classList.contains('d-none')) {
-          errorContainer.classList.remove('d-none')
+        if (errorContainer.classList.contains('hidden')) {
+          errorContainer.classList.remove('hidden', 'd-none')
         }
 
         errorMessage.innerHTML = error

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

@@ -0,0 +1,38 @@
+// Custom Turbo confirm dialog
+// Replaces browser native confirm() with a styled dialog
+
+export function initTurboConfirm() {
+  const dialog = document.getElementById("turbo-confirm-dialog")
+  const messageElement = document.getElementById("turbo-confirm-message")
+  const confirmButton = document.getElementById("turbo-confirm-button")
+
+  if (!dialog || !messageElement || !confirmButton) return
+
+  Turbo.config.forms.confirm = (message, element, submitter) => {
+    messageElement.textContent = message
+
+    // Allow custom button text via data-turbo-confirm-button attribute
+    const buttonText = submitter?.dataset.turboConfirmButton || element?.dataset.turboConfirmButton || "Confirm"
+    confirmButton.textContent = buttonText
+
+    // Allow custom button class via data-turbo-confirm-button-class attribute
+    const buttonClass = submitter?.dataset.turboConfirmButtonClass || element?.dataset.turboConfirmButtonClass
+    if (buttonClass) {
+      confirmButton.className = `btn ${buttonClass}`
+    } else {
+      confirmButton.className = "btn btn-primary"
+    }
+
+    dialog.showModal()
+
+    return new Promise((resolve) => {
+      dialog.addEventListener("close", () => {
+        resolve(dialog.returnValue === "confirm")
+      }, { once: true })
+    })
+  }
+}
+
+// Initialize on DOMContentLoaded and turbo:load
+document.addEventListener("DOMContentLoaded", initTurboConfirm)
+document.addEventListener("turbo:load", initTurboConfirm)