diff --git a/app/javascript/controllers/goal_pledge_preview_controller.js b/app/javascript/controllers/goal_pledge_preview_controller.js index 8d7601aa6..535345f48 100644 --- a/app/javascript/controllers/goal_pledge_preview_controller.js +++ b/app/javascript/controllers/goal_pledge_preview_controller.js @@ -4,7 +4,13 @@ import { Controller } from "@hotwired/stimulus"; // target amount from values and updates a preview sentence each keystroke. // Template strings come from ERB so the wording stays localized. export default class extends Controller { - static targets = ["amountInput", "preview"]; + static targets = [ + "amountInput", + "preview", + "accountSelect", + "helperConnected", + "helperManual", + ]; static values = { currentBalance: Number, targetAmount: Number, @@ -16,6 +22,22 @@ export default class extends Controller { connect() { this.update(); + this.accountChanged(); + } + + // Helper text reacts to the currently-selected account, not the goal as a + // whole. A mixed-funding goal (one connected account + one manual) used to + // paint the "connected" helper even if the user then picked the manual + // account from the dropdown — the saved pledge would be `kind: manual_save` + // (correct, per `kind_for_account` in the controller) but the helper read + // "transfer-style" copy until submission. + accountChanged() { + if (!this.hasAccountSelectTarget) return; + if (!this.hasHelperConnectedTarget || !this.hasHelperManualTarget) return; + const opt = this.accountSelectTarget.selectedOptions[0]; + const isManual = opt?.dataset.manual === "true"; + this.helperConnectedTarget.hidden = isManual; + this.helperManualTarget.hidden = !isManual; } update() { diff --git a/app/views/goal_pledges/new.html.erb b/app/views/goal_pledges/new.html.erb index ee0ab326a..a8c310efc 100644 --- a/app/views/goal_pledges/new.html.erb +++ b/app/views/goal_pledges/new.html.erb @@ -5,6 +5,12 @@ <%= render "shared/form_errors", model: @pledge %> <% end %> + <% + account_options = @goal.linked_accounts.map do |a| + [ a.name, a.id, { data: { manual: a.manual?.to_s } } ] + end + %> + <%= styled_form_with model: @pledge, url: goal_pledges_path(@goal), class: "space-y-3", @@ -17,12 +23,15 @@ goal_pledge_preview_template_nonzero_value: t(".preview_nonzero"), goal_pledge_preview_template_reached_value: t(".preview_reached") } do |f| %> -

- <% if @goal.any_connected_account? %> - <%= t(".helper_transfer") %> - <% else %> - <%= t(".helper_manual") %> - <% end %> +

+ <%= f.money_field :amount, @@ -39,8 +48,14 @@ data-goal-pledge-preview-target="preview">

<%= f.select :account_id, - options_from_collection_for_select(@goal.linked_accounts, :id, :name, @pledge.account_id), - { label: t(".account_label") } %> + options_for_select(account_options, @pledge.account_id), + { label: t(".account_label") }, + { + data: { + goal_pledge_preview_target: "accountSelect", + action: "change->goal-pledge-preview#accountChanged" + } + } %>
<%= f.submit t(".submit") %>