Chore: Extracting Wishlist from 3dealer to Core

resources/js/index.js

@@ -7,3 +7,4 @@
 // stoic_embed.js is not re-exported here: per its own docblock, it's a
 // standalone vendored script meant to be included directly, not imported.
 export { registerCheckout } from './checkout/index.js'
+export { registerWishlist } from './wishlist/index.js'

resources/js/wishlist/index.js

@@ -0,0 +1,10 @@
+import WishlistController from './wishlist-controller'
+
+// Registers the wishlist module's Stimulus controller onto the host app's
+// Stimulus application. Call once from the host's JS entry point:
+//
+//     import { registerWishlist } from '@boboko/core'
+//     registerWishlist(application)
+export function registerWishlist(application) {
+    application.register('wishlist', WishlistController)
+}

resources/js/wishlist/wishlist-controller.js

@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Heart toggle. Posts the form with fetch and reflects the server's answer on
+// aria-pressed, which the consuming app's own CSS uses to swap the outline
+// and filled heart. If the request fails, falls back to a normal form submit.
+export default class extends Controller {
+    static targets = ['button', 'status']
+
+    static values = {
+        addLabel: String,
+        removeLabel: String,
+        addedMessage: String,
+        removedMessage: String,
+    }
+
+    async toggle(event) {
+        event.preventDefault()
+
+        if (this.busy) return
+        this.busy = true
+
+        try {
+            const response = await fetch(this.element.action, {
+                method: 'POST',
+                headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
+                body: new FormData(this.element),
+            })
+
+            if (!response.ok) throw new Error(`Wishlist toggle failed: ${response.status}`)
+
+            const { active } = await response.json()
+
+            this.buttonTarget.setAttribute('aria-pressed', active ? 'true' : 'false')
+            this.buttonTarget.setAttribute('aria-label', active ? this.removeLabelValue : this.addLabelValue)
+            this.statusTarget.textContent = active ? this.addedMessageValue : this.removedMessageValue
+        } catch {
+            this.element.submit()
+        } finally {
+            this.busy = false
+        }
+    }
+}