diff --git a/admin/.prettierrc b/admin/.prettierrc
new file mode 100644
index 00000000000..cc4e9153538
--- /dev/null
+++ b/admin/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "trailingComma": "es5",
+  "semi": false
+}
diff --git a/admin/app/components/solidus_admin/layout/navigation/component.js b/admin/app/components/solidus_admin/layout/navigation/component.js
index a88d49caec1..7ec21ab73fd 100644
--- a/admin/app/components/solidus_admin/layout/navigation/component.js
+++ b/admin/app/components/solidus_admin/layout/navigation/component.js
@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static values = {
-    cookie: String
+    cookie: String,
   }
 
   setCookie(event) {
diff --git a/admin/app/components/solidus_admin/orders/show/address/component.js b/admin/app/components/solidus_admin/orders/show/address/component.js
index ebb6df4ab34..fdf4c09f9eb 100644
--- a/admin/app/components/solidus_admin/orders/show/address/component.js
+++ b/admin/app/components/solidus_admin/orders/show/address/component.js
@@ -1,9 +1,9 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["addresses"]
 
   close() {
-    this.addressesTarget.removeAttribute('open')
+    this.addressesTarget.removeAttribute("open")
   }
 }
diff --git a/admin/app/components/solidus_admin/orders/show/component.js b/admin/app/components/solidus_admin/orders/show/component.js
index 8de1e56f478..6a8ce2ae8cc 100644
--- a/admin/app/components/solidus_admin/orders/show/component.js
+++ b/admin/app/components/solidus_admin/orders/show/component.js
@@ -1,7 +1,7 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   closeMenus() {
-    this.element.querySelectorAll('details').forEach(details => details.removeAttribute('open'))
+    this.element.querySelectorAll("details").forEach((details) => details.removeAttribute("open"))
   }
 }
diff --git a/admin/app/components/solidus_admin/orders/show/customer_search/component.js b/admin/app/components/solidus_admin/orders/show/customer_search/component.js
index 68e6b65b05b..4dd4d7885b2 100644
--- a/admin/app/components/solidus_admin/orders/show/customer_search/component.js
+++ b/admin/app/components/solidus_admin/orders/show/customer_search/component.js
@@ -1,14 +1,15 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static values = { customersUrl: String }
 
   async search({ detail: { query, controller } }) {
-    controller.resultsValue =
-      (await (await fetch(`${this.customersUrlValue}?q[name_or_variants_including_master_sku_cont]=${query}`)).text())
+    controller.resultsValue = await (
+      await fetch(`${this.customersUrlValue}?q[name_or_variants_including_master_sku_cont]=${query}`)
+    ).text()
   }
 
   submit(event) {
-    event.detail.resultTarget.querySelector('form').submit()
+    event.detail.resultTarget.querySelector("form").submit()
   }
 }
diff --git a/admin/app/components/solidus_admin/stock_items/edit/component.js b/admin/app/components/solidus_admin/stock_items/edit/component.js
index 6181ca0e904..74290149beb 100644
--- a/admin/app/components/solidus_admin/stock_items/edit/component.js
+++ b/admin/app/components/solidus_admin/stock_items/edit/component.js
@@ -1,17 +1,18 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static values = {
     initialCountOnHand: Number,
   }
 
-  static targets = ['countOnHand', 'quantityAdjustment']
+  static targets = ["countOnHand", "quantityAdjustment"]
 
   connect() {
     this.updateCountOnHand()
   }
 
   updateCountOnHand() {
-    this.countOnHandTarget.value = parseInt(this.initialCountOnHandValue) + parseInt(this.quantityAdjustmentTarget.value)
+    this.countOnHandTarget.value =
+      parseInt(this.initialCountOnHandValue) + parseInt(this.quantityAdjustmentTarget.value)
   }
 }
diff --git a/admin/app/components/solidus_admin/ui/dropdown/component.js b/admin/app/components/solidus_admin/ui/dropdown/component.js
index 82080b800aa..23a83937d30 100644
--- a/admin/app/components/solidus_admin/ui/dropdown/component.js
+++ b/admin/app/components/solidus_admin/ui/dropdown/component.js
@@ -1,5 +1,5 @@
-import { Controller } from '@hotwired/stimulus'
-import { useClickOutside } from 'stimulus-use'
+import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from "stimulus-use"
 
 export default class extends Controller {
   connect() {
@@ -11,6 +11,6 @@ export default class extends Controller {
   }
 
   close() {
-    this.element.removeAttribute('open')
+    this.element.removeAttribute("open")
   }
 }
diff --git a/admin/app/components/solidus_admin/ui/forms/address/component.js b/admin/app/components/solidus_admin/ui/forms/address/component.js
index c39c7cd161b..cf54de223b2 100644
--- a/admin/app/components/solidus_admin/ui/forms/address/component.js
+++ b/admin/app/components/solidus_admin/ui/forms/address/component.js
@@ -1,4 +1,4 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["country", "state", "stateName", "stateWrapper", "stateNameWrapper"]
@@ -7,8 +7,8 @@ export default class extends Controller {
     const countryId = this.countryTarget.value
 
     fetch(`/admin/countries/${countryId}/states`)
-      .then(response => response.json())
-      .then(data => {
+      .then((response) => response.json())
+      .then((data) => {
         this.updateStateOptions(data)
       })
   }
@@ -30,13 +30,12 @@ export default class extends Controller {
     const stateSelect = this.stateTarget
     const stateName = this.stateNameTarget
 
-
     if (showSelect) {
       // Show state select dropdown.
       stateSelect.disabled = false
       stateName.value = ""
-      stateWrapper.classList.remove('hidden')
-      stateNameWrapper.classList.add('hidden')
+      stateWrapper.classList.remove("hidden")
+      stateNameWrapper.classList.add("hidden")
     } else {
       // Show state name text input if no states to choose from.
       stateSelect.disabled = true
diff --git a/admin/app/components/solidus_admin/ui/forms/input/component.js b/admin/app/components/solidus_admin/ui/forms/input/component.js
index 44ff79b03b0..e9f10607793 100644
--- a/admin/app/components/solidus_admin/ui/forms/input/component.js
+++ b/admin/app/components/solidus_admin/ui/forms/input/component.js
@@ -1,4 +1,4 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static values = {
@@ -6,11 +6,10 @@ export default class extends Controller {
   }
 
   connect() {
-    if (this.customValidityValue)
-      this.element.setCustomValidity(this.customValidityValue)
+    if (this.customValidityValue) this.element.setCustomValidity(this.customValidityValue)
   }
 
   clearCustomValidity() {
-    this.element.setCustomValidity('')
+    this.element.setCustomValidity("")
   }
 }
diff --git a/admin/app/components/solidus_admin/ui/modal/component.js b/admin/app/components/solidus_admin/ui/modal/component.js
index 3d9ec5c408e..193ad2b6fd6 100644
--- a/admin/app/components/solidus_admin/ui/modal/component.js
+++ b/admin/app/components/solidus_admin/ui/modal/component.js
@@ -1,7 +1,7 @@
-import { Controller } from "@hotwired/stimulus";
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   connect() {
-    this.element.showModal();
+    this.element.showModal()
   }
 }
diff --git a/admin/app/components/solidus_admin/ui/table/component.js b/admin/app/components/solidus_admin/ui/table/component.js
index 66837d4ce75..746c859f167 100644
--- a/admin/app/components/solidus_admin/ui/table/component.js
+++ b/admin/app/components/solidus_admin/ui/table/component.js
@@ -36,9 +36,9 @@ export default class extends Controller {
     const shouldSetSortable = this.sortableValue && this.modeValue !== "batch" && this.modeValue !== "search"
 
     if (shouldSetSortable) {
-      this.tableBodyTarget.setAttribute('data-controller', 'sortable')
+      this.tableBodyTarget.setAttribute("data-controller", "sortable")
     } else {
-      this.tableBodyTarget.removeAttribute('data-controller')
+      this.tableBodyTarget.removeAttribute("data-controller")
     }
   }
 
@@ -54,13 +54,13 @@ export default class extends Controller {
   }
 
   clearSearch() {
-    this.searchFieldTarget.value = ''
+    this.searchFieldTarget.value = ""
     this.search()
   }
 
   resetSearchAndFilters() {
     if (this.hasFilterToolbarTarget) {
-      this.filterToolbarTarget.querySelectorAll('fieldset').forEach(fieldset => fieldset.disabled = true)
+      this.filterToolbarTarget.querySelectorAll("fieldset").forEach((fieldset) => (fieldset.disabled = true))
     }
 
     this.searchFieldTarget.disabled = true
@@ -70,7 +70,7 @@ export default class extends Controller {
   selectRow(event) {
     if (this.checkboxTargets.some((checkbox) => checkbox.checked)) {
       this.modeValue = "batch"
-    } else if (this.hasSearchFieldTarget && (this.searchFieldTarget.value !== '')) {
+    } else if (this.hasSearchFieldTarget && this.searchFieldTarget.value !== "") {
       this.modeValue = "search"
     } else if (this.hasScopesToolbarTarget) {
       this.modeValue = "scopes"
@@ -84,7 +84,7 @@ export default class extends Controller {
   selectAllRows(event) {
     if (event.target.checked) {
       this.modeValue = "batch"
-    } else if (this.hasSearchFieldTarget && (this.searchFieldTarget.value !== '')) {
+    } else if (this.hasSearchFieldTarget && this.searchFieldTarget.value !== "") {
       this.modeValue = "search"
     } else if (this.hasScopesToolbarTarget) {
       this.modeValue = "scopes"
@@ -106,10 +106,10 @@ export default class extends Controller {
     } else {
       const url = new URL(event.params.url, "http://dummy.com")
       const params = new URLSearchParams(url.search)
-      const frameId = params.get('_turbo_frame')
+      const frameId = params.get("_turbo_frame")
       const frame = frameId ? { frame: frameId } : {}
       // remove the custom _turbo_frame param from url search:
-      params.delete('_turbo_frame')
+      params.delete("_turbo_frame")
       url.search = params.toString()
 
       window.Turbo.visit(url.pathname + url.search, frame)
@@ -117,7 +117,7 @@ export default class extends Controller {
   }
 
   toggleCheckbox(row) {
-    const checkbox = this.checkboxTargets.find(selection => row.contains(selection))
+    const checkbox = this.checkboxTargets.find((selection) => row.contains(selection))
 
     if (checkbox) {
       checkbox.checked = !checkbox.checked
@@ -131,14 +131,10 @@ export default class extends Controller {
 
   confirmAction(event) {
     const message = event.params.message
+      .replace("${count}", this.selectedRows().length)
       .replace(
-        "${count}",
-        this.selectedRows().length
-      ).replace(
         "${resource}",
-        this.selectedRows().length > 1 ?
-        event.params.resourcePlural :
-        event.params.resourceSingular
+        this.selectedRows().length > 1 ? event.params.resourcePlural : event.params.resourceSingular
       )
 
     if (!confirm(message)) {
@@ -167,7 +163,7 @@ export default class extends Controller {
 
     // Update the rows background color
     this.checkboxTargets.filter((checkbox) =>
-      checkbox.closest("tr").classList.toggle(this.selectedRowClass, checkbox.checked),
+      checkbox.closest("tr").classList.toggle(this.selectedRowClass, checkbox.checked)
     )
 
     // Update the selected rows count
diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
index fdbc336f8b1..29f886d2c2a 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
@@ -1,11 +1,11 @@
-import { Controller } from '@hotwired/stimulus'
-import { useClickOutside, useDebounce } from 'stimulus-use'
+import { Controller } from "@hotwired/stimulus"
+import { useClickOutside, useDebounce } from "stimulus-use"
 
-const BG_GRAY = 'bg-gray-100'
+const BG_GRAY = "bg-gray-100"
 
 export default class extends Controller {
-  static targets = ['details', 'summary', 'option', 'checkbox', 'menu']
-  static debounces = ['init']
+  static targets = ["details", "summary", "option", "checkbox", "menu"]
+  static debounces = ["init"]
 
   connect() {
     useDebounce(this, { wait: 50 })
@@ -37,7 +37,7 @@ export default class extends Controller {
   filterOptions(event) {
     const query = event.currentTarget.value.toLowerCase()
     this.optionTargets.forEach((option) => {
-      option.style.display = option.textContent.toLowerCase().includes(query) ? 'block' : 'none'
+      option.style.display = option.textContent.toLowerCase().includes(query) ? "block" : "none"
     })
   }
 
@@ -50,24 +50,26 @@ export default class extends Controller {
     this.checkboxTargets.forEach((checkbox) => {
       const hiddenElements = checkbox.parentElement.querySelectorAll("input[type='hidden']")
       checkbox.checked
-        ? hiddenElements.forEach(e => e.removeAttribute("disabled"))
-        : hiddenElements.forEach(e => e.setAttribute("disabled", true))
+        ? hiddenElements.forEach((e) => e.removeAttribute("disabled"))
+        : hiddenElements.forEach((e) => e.setAttribute("disabled", true))
     })
   }
 
   sortCheckboxes() {
     const checkboxes = this.checkboxTargets
 
-    checkboxes.sort((a, b) => {
-      if (a.checked && !b.checked) return -1
-      if (!a.checked && b.checked) return 1
-      return 0
-    }).forEach(checkbox => {
-      this.menuTarget.appendChild(checkbox.closest('div'))
-    })
+    checkboxes
+      .sort((a, b) => {
+        if (a.checked && !b.checked) return -1
+        if (!a.checked && b.checked) return 1
+        return 0
+      })
+      .forEach((checkbox) => {
+        this.menuTarget.appendChild(checkbox.closest("div"))
+      })
   }
 
   isAnyCheckboxChecked() {
-    return this.checkboxTargets.some(checkbox => checkbox.checked)
+    return this.checkboxTargets.some((checkbox) => checkbox.checked)
   }
 }
diff --git a/admin/app/components/solidus_admin/ui/toast/component.js b/admin/app/components/solidus_admin/ui/toast/component.js
index b8ecfcdf4d1..de1cecf8644 100644
--- a/admin/app/components/solidus_admin/ui/toast/component.js
+++ b/admin/app/components/solidus_admin/ui/toast/component.js
@@ -1,8 +1,8 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ['closeButton']
-  static classes = ['animation']
+  static targets = ["closeButton"]
+  static classes = ["animation"]
   static values = { transition: Number }
 
   connect() {
diff --git a/admin/app/components/solidus_admin/ui/toggletip/component.js b/admin/app/components/solidus_admin/ui/toggletip/component.js
index ec04b795ad7..0b7d78a468a 100644
--- a/admin/app/components/solidus_admin/ui/toggletip/component.js
+++ b/admin/app/components/solidus_admin/ui/toggletip/component.js
@@ -1,30 +1,30 @@
-import { Controller } from '@hotwired/stimulus'
-import { useClickOutside } from 'stimulus-use'
+import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from "stimulus-use"
 
 export default class extends Controller {
-  static targets = ['bubble']
+  static targets = ["bubble"]
 
-  connect () {
+  connect() {
     useClickOutside(this)
     this.open = false
   }
 
-  clickOutside () {
+  clickOutside() {
     this.close()
   }
 
-  toggle (e) {
+  toggle(e) {
     e.preventDefault()
     this.open = !this.open
     this.render()
   }
 
-  open () {
+  open() {
     this.open = true
     this.render()
   }
 
-  close () {
+  close() {
     this.open = false
     this.render()
   }
@@ -35,10 +35,12 @@ export default class extends Controller {
 
     if (needsPositioning) {
       const bubbleRect = this.bubbleTarget.getBoundingClientRect()
-      if (bubbleRect.right  > window.innerWidth) this.bubbleTarget.style.left = `${window.innerWidth - bubbleRect.width}px`
-      if (bubbleRect.bottom > window.innerHeight) this.bubbleTarget.style.top = `${window.innerHeight - bubbleRect.height}px`
-      if (bubbleRect.left < 0) this.bubbleTarget.style.left = '0px'
-      if (bubbleRect.top < 0) this.bubbleTarget.style.top = '0px'
+      if (bubbleRect.right > window.innerWidth)
+        this.bubbleTarget.style.left = `${window.innerWidth - bubbleRect.width}px`
+      if (bubbleRect.bottom > window.innerHeight)
+        this.bubbleTarget.style.top = `${window.innerHeight - bubbleRect.height}px`
+      if (bubbleRect.left < 0) this.bubbleTarget.style.left = "0px"
+      if (bubbleRect.top < 0) this.bubbleTarget.style.top = "0px"
     }
   }
 }
diff --git a/admin/app/components/solidus_admin/users/store_credits/index/component.js b/admin/app/components/solidus_admin/users/store_credits/index/component.js
index b6f7437145d..18d886a69ab 100644
--- a/admin/app/components/solidus_admin/users/store_credits/index/component.js
+++ b/admin/app/components/solidus_admin/users/store_credits/index/component.js
@@ -4,10 +4,10 @@ export default class extends Controller {
   actionButtonClicked(event) {
     const url = new URL(event.params.url, "http://dummy.com")
     const params = new URLSearchParams(url.search)
-    const frameId = params.get('_turbo_frame')
+    const frameId = params.get("_turbo_frame")
     const frame = frameId ? { frame: frameId } : {}
     // remove the custom _turbo_frame param from url search:
-    params.delete('_turbo_frame')
+    params.delete("_turbo_frame")
     url.search = params.toString()
 
     window.Turbo.visit(url.pathname + url.search, frame)
diff --git a/admin/app/components/solidus_admin/users/store_credits/show/component.js b/admin/app/components/solidus_admin/users/store_credits/show/component.js
index b6f7437145d..18d886a69ab 100644
--- a/admin/app/components/solidus_admin/users/store_credits/show/component.js
+++ b/admin/app/components/solidus_admin/users/store_credits/show/component.js
@@ -4,10 +4,10 @@ export default class extends Controller {
   actionButtonClicked(event) {
     const url = new URL(event.params.url, "http://dummy.com")
     const params = new URLSearchParams(url.search)
-    const frameId = params.get('_turbo_frame')
+    const frameId = params.get("_turbo_frame")
     const frame = frameId ? { frame: frameId } : {}
     // remove the custom _turbo_frame param from url search:
-    params.delete('_turbo_frame')
+    params.delete("_turbo_frame")
     url.search = params.toString()
 
     window.Turbo.visit(url.pathname + url.search, frame)