Shared money input should respond to change in currency (#654)

* Add step method to currency

* Change amount placeholder and step, when currency select change

* Lint

* Add test with auth

* Extract request to specific service

app/controllers/currencies_controller.rb

@@ -0,0 +1,6 @@
+class CurrenciesController < ApplicationController
+  def show
+    @currency = Money::Currency.all_instances.find { |currency| currency.iso_code == params[:id] }
+    render json: { step: @currency.step, placeholder: Money.new(0, @currency).format }
+  end
+end

app/helpers/application_form_builder.rb

@@ -33,11 +33,13 @@ class ApplicationFormBuilder < ActionView::Helpers::FormBuilder
 
     readonly_currency = options[:readonly_currency] || false
 
+    currency = money&.currency || Money.default_currency
     default_options = {
       class: "form-field__input",
       value: money&.amount,
-      placeholder: Money.new(0, money&.currency || Money.default_currency).format,
-      step: "0.01" # Not all currencies have 2 decimal places
+      "data-money-field-target" => "amount",
+      placeholder: Money.new(0, currency).format,
+      step: currency.step
     }
 
     merged_options = default_options.merge(options)
@@ -45,11 +47,11 @@ class ApplicationFormBuilder < ActionView::Helpers::FormBuilder
     grouped_options = currency_options_for_select
     selected_currency = money&.currency&.iso_code
 
-    @template.form_field_tag do
+    @template.form_field_tag data: { controller: "money-field" } do
       (label(method, *label_args(options)).to_s if options[:label]) +
       @template.tag.div(class: "flex items-center") do
         number_field(money_amount_method, merged_options.except(:label)) +
-        grouped_select(money_currency_method, grouped_options, { selected: selected_currency, disabled: readonly_currency }, class: "ml-auto form-field__input w-fit pr-8")
+        grouped_select(money_currency_method, grouped_options, { selected: selected_currency, disabled: readonly_currency }, class: "ml-auto form-field__input w-fit pr-8", data: { "money-field-target" => "currency", action: "change->money-field#handleCurrencyChange" })
       end
     end
   end

app/helpers/forms_helper.rb

@@ -1,6 +1,7 @@
 module FormsHelper
-  def form_field_tag(&)
-    tag.div class: "form-field", &
+  def form_field_tag(options = {}, &block)
+    options[:class] = [ "form-field", options[:class] ].compact.join(" ")
+    tag.div **options, &block
   end
 
   def radio_tab_tag(form:, name:, value:, label:, icon:, checked: false, disabled: false)

app/javascript/controllers/money_field_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus";
+import { CurrenciesService } from "services/currencies_service";
+
+// Connects to data-controller="money-field"
+// when currency select change, update the input value with the correct placeholder and step
+export default class extends Controller {
+  static targets = ["amount", "currency"];
+
+  handleCurrencyChange() {
+    const selectedCurrency = event.target.value;
+    this.updateAmount(selectedCurrency);
+  }
+
+  updateAmount(currency) {
+    (new CurrenciesService).get(currency).then((data) => {
+      this.amountTarget.placeholder = data.placeholder;
+      this.amountTarget.step = data.step;
+    });
+  }
+}

app/javascript/services/currencies_service.js

@@ -0,0 +1,5 @@
+export class CurrenciesService {
+  get(id) {
+    return fetch(`/currencies/${id}.json`).then((response) => response.json());
+  }
+}