https://passages.ink/assets/controllers/billing_period_controller-ce6aa140.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["monthlyPrice", "yearlyPrice", "intervalInput", "monthlyButton", "yearlyButton"]
5
6  connect() {
7    this.selectMonthly()
8  }
9
10  selectMonthly() {
11    this.monthlyPriceTargets.forEach(el => el.classList.remove("hidden"))
12    this.yearlyPriceTargets.forEach(el => el.classList.add("hidden"))
13    this.intervalInputTargets.forEach(el => el.value = "monthly")
14    this._activate(this.monthlyButtonTarget)
15    this._deactivate(this.yearlyButtonTarget)
16  }
17
18  selectYearly() {
19    this.monthlyPriceTargets.forEach(el => el.classList.add("hidden"))
20    this.yearlyPriceTargets.forEach(el => el.classList.remove("hidden"))
21    this.intervalInputTargets.forEach(el => el.value = "yearly")
22    this._activate(this.yearlyButtonTarget)
23    this._deactivate(this.monthlyButtonTarget)
24  }
25
26  _activate(button) {
27    button.classList.add("bg-ink", "text-white")
28    button.classList.remove("text-stone-500")
29  }
30
31  _deactivate(button) {
32    button.classList.remove("bg-ink", "text-white")
33    button.classList.add("text-stone-500")
34  }
35}