https://www.publishersglobal.com/assets/controllers/formula_adjuster_controller-9e4f58e1.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["dialog", "results", "saveBtn"]
5  static values  = { previewUrl: String }
6
7  open() {
8    this.dialogTarget.showModal()
9    this.recalculate()
10  }
11
12  close() {
13    this.dialogTarget.close()
14  }
15
16  recalculate() {
17    clearTimeout(this._debounce)
18    this._debounce = setTimeout(() => this._fetchExamples(), 350)
19  }
20
21  resetToDefaults() {
22    this.element.querySelectorAll("form[data-formula-form] input[data-default]").forEach(input => {
23      input.value = input.dataset.default
24    })
25    this._fetchExamples()
26  }
27
28  _fetchExamples() {
29    const params = new URLSearchParams(new FormData(this.element.querySelector("form[data-formula-form]")))
30    fetch(`${this.previewUrlValue}?${params}`, { headers: { "Accept": "application/json" } })
31      .then(r => r.json())
32      .then(data => this._renderResults(data.examples))
33      .catch(() => {})
34  }
35
36  _renderResults(examples) {
37    if (!examples?.length) return
38    this.resultsTarget.innerHTML = examples.map(ex => `
39      <div class="flex items-center justify-between gap-2 py-1.5 border-b border-slate-100 last:border-0">
40        <p class="text-xs text-slate-600">${ex.label}</p>
41        <span class="text-xs font-semibold shrink-0 ${ex.minimum_applied ? "text-slate-400" : "text-slate-900"}">
42          ${this._formatFee(ex.final)}${ex.minimum_applied ? ' <span class="font-normal">(min)</span>' : ""}
43        </span>
44      </div>
45    `).join("")
46  }
47
48  _formatFee(amount) {
49    return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(amount)
50  }
51}