raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-11 23:17:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Put payment method description just above the

Browse Source 
+ update spec by adding `data-paymentmethod-id` attribute
This commit is contained in:
Jean-Baptiste Bellet
2022-12-13 15:39:54 +01:00
parent f1bb4fdf38
commit 2d86e8857a
3 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/views/split_checkout/_payment.html.haml
View File

@@ -17,14 +17,15 @@
= f.label :payment_method_id, "#{payment_method.name}", for: "payment_method_#{payment_method.id}"
%em=payment_or_shipping_price(payment_method, @order)
= f.error_message_on :payment_method, standalone: true
- available_payment_methods.each do |payment_method|
.paymentmethod-container{id: "paymentmethod#{payment_method.id}", style: "display: #{payment_method.id == selected_payment_method ? "block" : "none"}"}
.paymentmethod-container{"data-paymentmethod-id": "paymentmethod#{payment_method.id}", style: "display: #{payment_method.id == selected_payment_method ? "block" : "none"}"}
- if payment_method.description && !payment_method.description.empty?
.paymentmethod-description.panel
#{payment_method.description}
= f.error_message_on :payment_method, standalone: true
- available_payment_methods.each do |payment_method|
.paymentmethod-container{"data-paymentmethod-id": "paymentmethod#{payment_method.id}", style: "display: #{payment_method.id == selected_payment_method ? "block" : "none"}"}
.paymentmethod-form
= render partial: "split_checkout/payment/#{payment_method.method_type}", locals: { payment_method: payment_method, f: f }

7
app/webpacker/controllers/paymentmethod_controller.js
View File

@@ -16,7 +16,9 @@ export default class extends Controller {
const stripeCardSelector =
this.application.getControllerForElementAndIdentifier(
document
.getElementById(event.target.dataset.paymentmethodId)
.querySelector(
`[data-paymentmethod-id="${event.target.dataset.paymentmethodId}"]`
)
.querySelector('[data-controller="stripe-cards"]'),
"stripe-cards"
);
@@ -27,7 +29,8 @@ export default class extends Controller {
Array.from(
document.getElementsByClassName("paymentmethod-container")
).forEach((container) => {
const enabled = container.id === paymentMethodContainerId;
const enabled =
container.dataset.paymentmethodId === paymentMethodContainerId;
if (enabled) {
container.style.display = "block";

6
spec/javascripts/stimulus/paymentmethod_controller_test.js
View File

@@ -18,19 +18,19 @@ describe("PaymentmethodController", () => {
<input id="paymentmethod_2" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod2" data-paymentmethod-target="input" checked="checked" />
<input id="paymentmethod_3" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod3" data-paymentmethod-target="input"/>
<div class="paymentmethod-container" id="paymentmethod1">
<div class="paymentmethod-container" id="paymentmethod1" data-paymentmethod-id="paymentmethod1">
<input type="number" id="input1" />
<select id="select1" >
<option value="1">1</option>
</select>
</div>
<div class="paymentmethod-container" id="paymentmethod2">
<div class="paymentmethod-container" id="paymentmethod2" data-paymentmethod-id="paymentmethod2">
<input type="number" id="input2" />
<select id="select2" >
<option value="1">1</option>
</select>
</div>
<div class="paymentmethod-container" id="paymentmethod3">
<div class="paymentmethod-container" id="paymentmethod3" data-paymentmethod-id="paymentmethod3">
<input type="number" id="input3" />
<select id="select3" >
<option value="1">1</option>