spree_admin 5.0.0.rc1

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

@@ -0,0 +1,70 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = [
+    'trackInventoryCheckbox',
+    'quantityForm',
+    'availableOn',
+    'makeActiveAt',
+    'discontinueOn',
+    'status',
+    'pricesForm'
+  ]
+
+  static values = {
+    hasVariants: Boolean
+  }
+
+  toggleQuantityTracked() {
+    this.toggleQuantityFormVisibility()
+
+    this.dispatch('toggle-quantity-tracked')
+  }
+
+  hasVariantsValueChanged() {
+    this.toggleQuantityFormVisibility()
+    this.togglePricesFormVisibility()
+  }
+
+  switchAvailabilityDatesFields(event) {
+    let status = event.target.value
+    if (status === 'draft') {
+      this.show(this.availableOnTarget)
+      this.show(this.makeActiveAtTarget)
+    } else if (status === 'active') {
+      this.show(this.availableOnTarget)
+      this.hide(this.makeActiveAtTarget)
+    } else {
+      this.hide(this.availableOnTarget)
+      this.hide(this.makeActiveAtTarget)
+    }
+  }
+
+  show(element) {
+    element.classList.remove('d-none')
+  }
+
+  hide(element) {
+    element.classList.add('d-none')
+  }
+
+  toggleQuantityFormVisibility() {
+    if (this.hasQuantityFormTarget) {
+      if (!this.hasVariantsValue && this.trackInventoryCheckboxTarget.checked) {
+        this.quantityFormTarget.classList.remove('d-none')
+      } else {
+        this.quantityFormTarget.classList.add('d-none')
+      }
+    }
+  }
+
+  togglePricesFormVisibility() {
+    if (this.hasPricesFormTarget) {
+      if (this.hasVariantsValue) {
+        this.pricesFormTarget.classList.add('d-none')
+      } else {
+        this.pricesFormTarget.classList.remove('d-none')
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ 'input', 'preview' ]
+
+  updatePreview() {
+    this.previewTarget.innerHTML = this.inputTarget.value
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ 'from', 'to' ]
+
+  replace() {
+    this.fromTarget.classList.add('d-none')
+    this.toTarget.classList.remove('d-none')
+  }
+
+  revert() {
+    this.fromTarget.classList.remove('d-none')
+    this.toTarget.classList.add('d-none')
+  }
+}

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

@@ -0,0 +1,47 @@
+import CheckboxSelectAll from 'stimulus-checkbox-select-all'
+
+export default class extends CheckboxSelectAll {
+  static targets = ['totalPreTaxRefund']
+
+  connect() {
+    this.updateTotalRefundAmount()
+  }
+
+  toggle(event) {
+    super.toggle(event)
+    this.updateTotalRefundAmount()
+  }
+
+  refresh() {
+    super.refresh()
+    this.updateTotalRefundAmount()
+  }
+
+  updateTotalRefundAmount() {
+    var totalPretaxRefund = 0
+    this.checked.forEach((checkbox) => {
+      const returnItemRow = checkbox.closest('tr')
+      const amount = parseFloat(returnItemRow.querySelector('.refund-amount-input').value)
+      totalPretaxRefund += amount
+    })
+
+    const displayTotal = isNaN(totalPretaxRefund) ? '' : totalPretaxRefund.toFixed(2)
+    this.totalPreTaxRefundTarget.innerText = displayTotal
+  }
+
+  updateSuggestedAmount = (event) => {
+    const returnItemRow = event.target.closest('tr')
+    const amount = this.calculateSuggestedAmount(returnItemRow)
+    returnItemRow.querySelector('.refund-amount-input').value = amount.toFixed(2)
+
+    this.updateTotalRefundAmount()
+  }
+
+  calculateSuggestedAmount = (row) => {
+    const returnQuantity = parseInt(row.querySelector('.refund-quantity-input').value, 10)
+    const purchasedQuantity = parseInt(row.querySelector('.purchased-quantity').innerText, 10)
+    const chargedAmount = parseFloat(row.querySelector('.charged-amount').dataset.chargedAmount)
+    const amount = (returnQuantity / purchasedQuantity) * chargedAmount
+    return amount
+  }
+}

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

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="row-link"
+export default class extends Controller {
+  static targets = ["link"]
+
+  openLink(event) {
+    if (event.target.tagName === 'A') return
+
+    event.preventDefault()
+    if (this.linkTarget.target === '_blank') {
+      window.open(this.linkTarget.href, '_blank')
+      return
+    }
+
+    window.Turbo.visit(this.linkTarget.href, { action: "advance" })
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ['value', 'template']
+
+  replace(event) {
+    const inputString = event.target.value;
+    const parts = inputString.split("::");
+    const lastPart = parts[parts.length - 1];
+
+    const template = this.templateTargets.find((template) => template.id == `rule-form-template-${lastPart}`)
+
+    if (template) {
+      this.valueTarget.innerHTML = template.innerHTML
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['checkbox', 'submit', 'search', 'results']
+
+  toggle(event) {
+    if (event.target.type == 'checkbox' || event.target.type == 'radio') {
+      this.refresh()
+    } else {
+      const input =
+        event.target.querySelector('input[type="checkbox"]') || event.target.querySelector('input[type="radio"]')
+      if (input?.disabled) return
+
+      switch (input?.type) {
+        case 'checkbox':
+          input.toggleAttribute('checked')
+        case 'radio':
+          if (input.disabled) break
+          input.checked = true
+      }
+      this.refresh()
+    }
+  }
+
+  refresh() {
+    let checked = this.checkboxTargets.filter((checkbox) => checkbox.checked)
+    if (checked.length > 0) {
+      this.submitTarget.disabled = false
+    } else {
+      this.submitTarget.disabled = true
+    }
+  }
+
+  closeAndClear() {
+    this.searchTarget.value = ''
+    this.resultsTarget.innerHTML = ''
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [
+    'form',
+    'type'
+  ]
+
+  addSection(event) {
+    event.preventDefault()
+    this.typeTarget.value = event.params.type
+    this.formTarget.requestSubmit()
+  }
+}

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

@@ -0,0 +1,117 @@
+import { Controller } from "@hotwired/stimulus"
+import TomSelect from 'tom-select/dist/esm/tom-select.complete.js';
+import { get } from '@rails/request.js'
+
+export default class extends Controller {
+  static values = {
+    url: String, // remote URL to fetch options
+    options: Array, // JSON array of options
+    activeOption: String, // array or single value of selected options,
+    emptyOption: { type: String, default: null }, // empty option put at the top of the list
+    multiple: { type: Boolean, default: false },
+    valueField: { type: String, default: 'id' },
+    searchField: { type: String, default: 'name' },
+    labelField: { type: String, default: 'name' },
+    sortField: { type: String, default: 'name' },
+    create: { type: Boolean, default: false },
+    remoteSearch: { type: Boolean, default: false }, // this will wait for search input before fetching options
+    remoteSearchParams: Object,
+    remoteSearchActiveOption: String
+  }
+  static targets = [ "input" ]
+
+  async connect() {
+    this.tomSelectedInitializedEvent = new CustomEvent('tomSelectInitialized', { bubbles: true} )
+    if (this.urlValue) {
+      if (this.remoteSearchValue) {
+        this.initTomSelect()
+      } else {
+        const response = await get(this.urlValue, { contentType: 'application/json' })
+
+        if (response.ok) {
+          const options = await response.json
+          this.initTomSelect(options)
+        }
+      }
+    } else {
+      this.initTomSelect(this.optionsValue)
+    }
+  }
+
+  disconnect() {
+    if (this.select) {
+      this.select.destroy()
+    }
+  }
+
+  initTomSelect(options = []) {
+    const settings = {
+      maxOptions: 1500,
+      lockOptgroupOrder: true,
+      valueField: this.valueFieldValue,
+      searchField: this.searchFieldValue,
+      labelField: this.labelFieldValue,
+      sortField: this.sortFieldValue,
+      create: this.createValue,
+      onInitialize: () => {
+        this.inputTarget.dispatchEvent(this.tomSelectedInitializedEvent)
+      }
+    }
+
+    if (this.urlValue && this.remoteSearchValue) {
+      const loadUrl = this.urlValue
+      const searchParams = this.remoteSearchParamsValue
+
+      settings.load = async function(query, callback) {
+        const params = new URLSearchParams({ q: query, ...searchParams })
+        const url = loadUrl + '?' + params.toString()
+
+        const response = await get(url, { contentType: 'application/json' })
+
+        if (response.ok) {
+          const options = await response.json
+          options.length > 0 ? callback(options) : callback([])
+        } else {
+          callback()
+        }
+      }
+
+      if (this.remoteSearchActiveOptionValue) {
+        const items = JSON.parse(this.remoteSearchActiveOptionValue)
+        settings.options = items
+        settings.items = items.map(item => item.id)
+      }
+    }
+
+    if (options.length > 0) {
+      if (this.emptyOptionValue) {
+        let groupedOptions = options.map(function (option) {
+          option.group = 'non-empty'
+          return option
+        })
+
+        groupedOptions.unshift({ group: 'empty', id: ' ', name: this.emptyOptionValue })
+
+        settings.options = groupedOptions
+        settings.optgroupField = 'group'
+        settings.optgroups = [
+          { value: 'empty', label: '' },
+          { value: 'non-empty', label: '' }
+        ]
+      } else {
+        settings.options = options
+      }
+    }
+
+    if (this.multipleValue) {
+      settings.maxItems = null
+      settings.plugins = ['remove_button']
+      if (this.activeOptionValue) settings.items = JSON.parse(this.activeOptionValue)
+    } else {
+      if (this.activeOptionValue) settings.items = [this.activeOptionValue]
+    }
+
+    this.inputTarget.classList.remove('d-none')
+    this.select = new TomSelect(this.inputTarget, settings)
+  }
+}

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

@@ -0,0 +1,116 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = [
+    'titlePreview',
+    'slugPreview',
+    'descriptionPreview',
+    'preview',
+    'inputsContainer',
+    'titleInput',
+    'descriptionInput',
+    'slugInput',
+    'sourceTitleInput',
+    'sourceDescriptionInput',
+    'sourceExcerptInput',
+    'placeholder'
+  ]
+
+  static values = {
+    editor: { type: String, default: 'trix' }
+  }
+
+  connect() {
+    this.sourceTitleInputTarget.addEventListener('input', this.updatePreviews)
+
+    if (this.editorValue == 'tinymce') {
+      this.connectTinymceEditor()
+    } else {
+      this.connectTrixEditors()
+    }
+  }
+
+  connectTrixEditors() {
+    document.addEventListener("trix-initialize", () => {
+      if (this.hasSourceDescriptionInputTarget) {
+        this.sourceDescriptionEditorTarget = this.sourceDescriptionInputTarget.editor
+        this.sourceDescriptionInputTarget.addEventListener('trix-change', this.updatePreviews)
+
+        if (this.hasSourceExcerptInputTarget) {
+          this.sourceExcerptEditorTarget = this.sourceExcerptInputTarget.editor
+          this.sourceExcerptInputTarget.addEventListener('trix-change', this.updatePreviews)
+        }
+      }
+
+      this.updatePreviews()
+    })
+  }
+
+  connectTinymceEditor() {
+    const descriptionEditorId = this.sourceDescriptionInputTarget.id
+
+    tinymce.on('AddEditor', (e) => {
+      if (e.editor.id !== descriptionEditorId) return
+      this.sourceDescriptionEditorTarget = tinymce.get(descriptionEditorId)
+      this.sourceDescriptionEditorTarget.on('input', this.updatePreviews)
+      this.sourceDescriptionEditorTarget.on('init', this.updatePreviews)
+    })
+  }
+
+  updatePreviews = () => {
+    if (this.metaTitle.trim().length === 0 && this.metaDescription.trim().length === 0) {
+      this.titlePreviewTarget.textContent = ''
+      this.slugPreviewTarget.textContent = ''
+      this.descriptionPreviewTarget.textContent = ''
+
+      this.previewTarget.classList.add('d-none')
+      this.placeholderTarget.classList.remove('d-none')
+
+      return
+    }
+
+    this.previewTarget.classList.remove('d-none')
+    this.placeholderTarget.classList.add('d-none')
+
+    this.titlePreviewTarget.textContent = this.metaTitle
+    this.slugPreviewTarget.textContent = this.slugInputTarget.value
+    this.descriptionPreviewTarget.textContent = this.metaDescription
+  }
+
+  toggleInputs() {
+    this.inputsContainerTarget.classList.toggle('d-none')
+  }
+
+  get metaTitle() {
+    return this.titleInputTarget.value.length ? this.titleInputTarget.value : this.sourceTitleInputTarget.value
+  }
+
+  get metaDescription() {
+    const metaDescription = this.descriptionInputTarget.value.length
+      ? this.descriptionInputTarget.value
+      : this.sourceTextEditorContent
+
+    if (metaDescription.length > 320) {
+      return metaDescription.substring(0, 320) + '...'
+    }
+
+    return metaDescription
+  }
+
+  get sourceTextEditorContent() {
+    if (!this.hasSourceDescriptionInputTarget) return ''
+
+    if (this.editorValue == 'tinymce') {
+      return this.sourceDescriptionEditorTarget.getContent({ format: 'text' })
+    } else {
+      const descriptionEditorContent = this.sourceDescriptionEditorTarget.getDocument().toString()
+
+      if (this.sourceExcerptEditorTarget) {
+        const excerptEditorDocument = this.sourceExcerptEditorTarget.getDocument()
+        return excerptEditorDocument.isEmpty() ? descriptionEditorContent : excerptEditorDocument.toString()
+      } else {
+        return descriptionEditorContent
+      }
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = [
+    'name',
+    'url',
+  ]
+
+  updateUrlFromName() {
+    const name = this.nameTarget.value
+    const url = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)+/g, '')
+    this.urlTarget.value = url
+
+    // TODO: do ajax call and check if url is available
+    // if not, append a number to the end to make it unique
+  }
+}

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

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+import { Sortable } from "sortablejs"
+import { put } from '@rails/request.js'
+
+export default class extends Controller {
+  static values = { handle: String }
+
+  connect() {
+    const itemSortable = {
+      ...this.options
+    }
+
+    let containers = null
+    containers = this.element.querySelectorAll("[data-sortable-tree-parent-id-value]")
+
+    for (let i = 0; i < containers.length; i++) {
+      new Sortable(containers[i], itemSortable)
+    }
+  }
+
+  async end({ item, newIndex, to }) {
+    if (!item.dataset.sortableTreeUpdateUrlValue) return
+
+    const data = {
+      [item.dataset.sortableTreeResourceNameValue]: {
+        new_parent_id: to.dataset.sortableTreeParentIdValue,
+        new_position_idx: newIndex
+      }
+    }
+
+    const response = await put(item.dataset.sortableTreeUpdateUrlValue, { body: data, responseKind: 'json' })
+
+    if (!response.ok) {
+      alert("This move could not be saved.")
+    }
+  }
+
+  get options() {
+    return {
+      group: {
+        name: "sortable-tree",
+        pull: true,
+        put: true
+      },
+      handle: this.handleValue || undefined,
+      swapThreshold: 0.5,
+      emptyInsertThreshold: 8,
+      dragClass: "item-dragged",
+      draggable: ".draggable",
+      animation: 350,
+      forceFallback: false,
+      onEnd: this.end
+    }
+  }
+}

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

@@ -0,0 +1,87 @@
+import NestedForm from '@stimulus-components/rails-nested-form'
+
+export default class extends NestedForm {
+  static targets = [
+    'target',
+    'template',
+    'sourceLocationId',
+    'destinationLocationId',
+    'sourceInput',
+    'destinationInput',
+    'newVariantAddButton',
+    'newVariantStockLocationId',
+    'newVariantOmitIds'
+  ]
+
+  updateSourceLocation({ target: { value } }) {
+    this.newVariantStockLocationIdTarget.value = value
+    this.sourceInputTargets.forEach((input) => {
+      input.value = value
+    })
+  }
+
+  updateDestinationLocation({ target: { value } }) {
+    const variantAddButtonTooltip = this.newVariantAddButtonTarget.querySelector('.with-tip')
+
+    if (value != '') {
+      this.newVariantAddButtonTarget.removeAttribute('disabled')
+
+      this.variantAddButtonTooltipTitle = variantAddButtonTooltip.getAttribute('data-original-title')
+      variantAddButtonTooltip.setAttribute('data-original-title', '')
+    } else {
+      this.newVariantAddButtonTarget.setAttribute('disabled', '')
+
+      if (this.variantAddButtonTooltipTitle)
+        variantAddButtonTooltip.setAttribute('data-original-title', this.variantAddButtonTooltipTitle)
+    }
+
+    this.destinationInputTargets.forEach((input) => {
+      input.value = value
+    })
+  }
+
+  updateQuantity({
+    target: {
+      value,
+      dataset: { variantId }
+    }
+  }) {
+    this.element.querySelector(`[data-source-movement]:has(input[value='${variantId}']) [data-source-quantity]`).value =
+      -parseInt(value)
+  }
+
+  add(e) {
+    e.preventDefault()
+
+    const selectedVariant = document.querySelector('input[name="stock_transfer[variant_id]"]:checked')
+    const selectedVariantId = selectedVariant.value
+    const variantImage = selectedVariant.closest('.search-picker__option').querySelector('.variant-image')
+    const variantInfo = selectedVariant.closest('.search-picker__option').querySelector('.variant-info')
+    const variantName = variantInfo.querySelector('.variant-name')
+    variantName.innnerText = variantName.innerText
+    this.newVariantOmitIdsTarget.value = [this.newVariantOmitIdsTarget.value, selectedVariantId]
+      .filter((v) => v?.length)
+      .join(',')
+
+    const content = this.templateTarget.innerHTML
+      .replace(/NEW_RECORD/g, new Date().getTime().toString())
+      .replace(/NEW_RECORD2/g, new Date().getTime().toString())
+      .replace(/VARIANT_ID/g, selectedVariantId)
+      .replace(/SOURCE_ID/g, this.sourceLocationIdTarget.value)
+      .replace(/DESTINATION_ID/g, this.destinationLocationIdTarget.value)
+      .replace(/VARIANT_IMAGE/g, variantImage.innerHTML)
+      .replace(/VARIANT_INFO/g, variantInfo.innerHTML)
+
+    this.targetTarget.insertAdjacentHTML('beforebegin', content)
+
+    const event = new CustomEvent('rails-nested-form:add', { bubbles: true })
+    this.element.dispatchEvent(event)
+  }
+
+  remove(e) {
+    super.remove(e)
+    const variantId = e.target.dataset.variantId
+    this.element.querySelector(`[data-source-movement]:has(input[value='${variantId}'])`).remove()
+    this.newVariantOmitIdsTarget.value = this.newVariantOmitIdsTarget.value.split(',').filter((v) => v !== variantId).join(',')
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus'
+
+const countryCurrency =  {AD:"EUR",AE:"AED",AF:"AFN",AG:"XCD",AI:"XCD",AL:"ALL",AM:"AMD",AN:"ANG",AO:"AOA",AQ:"USD",AR:"ARS",AS:"USD",AT:"EUR",AU:"AUD",AW:"AWG",AX:"EUR",AZ:"AZN",BA:"BAM",BB:"BBD",BD:"BDT",BE:"EUR",BF:"XOF",BG:"BGN",BH:"BHD",BI:"BIF",BJ:"XOF",BL:"EUR",BM:"BMD",BN:"BND",BO:"BOB",BQ:"USD",BR:"BRL",BS:"BSD",BT:"BTN",BV:"NOK",BW:"BWP",BY:"BYN",BZ:"BZD",CA:"CAD",CC:"AUD",CD:"CDF",CF:"XAF",CG:"CDF",CH:"CHF",CI:"XOF",CK:"NZD",CL:"CLP",CM:"XAF",CN:"CNY",CO:"COP",CR:"CRC",CU:"CUC",CV:"CVE",CW:"ANG",CX:"AUD",CY:"EUR",CZ:"CZK",DE:"EUR",DJ:"DJF",DK:"DKK",DM:"DOP",DO:"DOP",DZ:"DZD",EC:"USD",EE:"EUR",EG:"EGP",EH:"MAD",ER:"ERN",ES:"EUR",ET:"ETB",FI:"EUR",FJ:"FJD",FK:"FKP",FM:"USD",FO:"DKK",FR:"EUR",GA:"XAF",GB:"GBP",GD:"XCD",GE:"GEL",GF:"EUR",GG:"GBP",GH:"GHS",GI:"GIP",GL:"DKK",GM:"GMD",GN:"GNF",GP:"EUR",GQ:"XAF",GR:"EUR",GS:"GEL",GT:"GTQ",GU:"USD",GW:"XOF",GY:"GYD",HK:"HKD",HM:"AUD",HN:"HNL",HR:"EUR",HT:"HTG",HU:"HUF",ID:"IDR",IE:"EUR",IL:"ILS",IM:"GBP",IN:"INR",IO:"USD",IQ:"IQD",IR:"IRR",IS:"ISK",IT:"EUR",JE:"GBP",JM:"JMD",JO:"JOD",JP:"JPY",KE:"KES",KG:"KGS",KH:"KHR",KI:"AUD",KM:"KMF",KN:"XCD",KP:"KPW",KR:"KRW",KW:"KWD",KY:"KYD",KZ:"KZT",LA:"LAK",LB:"LBP",LC:"XCD",LI:"CHF",LK:"LKR",LR:"LRD",LS:"LSL",LT:"EUR",LU:"EUR",LV:"EUR",LY:"LYD",MA:"MAD",MC:"EUR",MD:"MDL",ME:"EUR",MF:"EUR",MG:"MGA",MH:"USD",MK:"MKD",ML:"XOF",MM:"MMK",MN:"MNT",MO:"MOP",MP:"USD",MQ:"EUR",MR:"MRU",MS:"XCD",MT:"EUR",MU:"MUR",MV:"MVR",MW:"MWK",MX:"MXN",MY:"MYR",MZ:"MZN",NA:"NAD",NC:"XPF",NE:"NGN",NF:"AUD",NG:"NGN",NI:"NIO",NL:"EUR",NO:"NOK",NP:"NPR",NR:"AUD",NU:"NZD",NZ:"NZD",OM:"OMR",PA:"PAB",PE:"PEN",PF:"XPF",PG:"PGK",PH:"PHP",PK:"PKR",PL:"PLN",PM:"EUR",PN:"NZD",PR:"USD",PS:"ILS",PT:"EUR",PW:"USD",PY:"PYG",QA:"QAR",RE:"EUR",RO:"RON",RS:"RSD",RU:"RUB",RW:"RWF",SA:"SAR",SB:"SBD",SC:"SCR",SD:"SDG",SE:"SEK",SG:"SGD",SH:"SHP",SI:"EUR",SJ:"NOK",SK:"EUR",SL:"SLL",SM:"EUR",SN:"XOF",SO:"SOS",SR:"SRD",SS:"SSP",ST:"STN",SV:"USD",SX:"ANG",SY:"SYP",SZ:"SZL",TC:"USD",TD:"XAF",TF:"EUR",TG:"XOF",TH:"THB",TJ:"TJS",TK:"NZD",TL:"USD",TM:"TMT",TN:"TND",TO:"TOP",TR:"TRY",TT:"TTD",TV:"AUD",TW:"TWD",TZ:"TZS",UA:"UAH",UG:"UGX",UM:"USD",US:"USD",UY:"UYU",UZ:"UZS",VA:"EUR",VC:"XCD",VE:"VES",VG:"USD",VI:"USD",VN:"VND",VU:"VUV",WF:"XPF",WS:"USD",YE:"YER",YT:"EUR",ZA:"ZAR",ZM:"ZMW",ZW:"ZWL"}
+export default class extends Controller {
+  static targets = ['currency']
+
+  updateCurrency(e) {
+    const selectController = this.application.getControllerForElementAndIdentifier(
+      this.currencyTarget,
+      'autocomplete-select'
+    )
+
+    if (selectController?.select && countryCurrency[e.target.value]) {
+      selectController.select.setValue(countryCurrency[e.target.value])
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["body", "weightUnit"]
+
+  unitSystemHandler(){
+    let unitSystemByMeasurement = {
+      "metric": [
+        ["Kilogram (kg)", "kg"],
+        ["Gram (g)", "g"],
+      ],
+      "imperial": [
+        ["Pound (lb)", "lb"],
+        ["Ounce (oz)", "oz"]
+      ]
+    }
+    let unitSystem = this.bodyTarget.value
+    let weightUnits = unitSystemByMeasurement[unitSystem]
+    let reqUnits = "";
+
+    weightUnits.forEach((unit) => {
+      reqUnits += "<option value=" + unit[1] + ">" + unit[0] + "</option>";
+    })
+
+    this.weightUnitTarget.innerHTML = reqUnits
+  }
+}