donation: Remove second step for address

It is better when the payment method is selected later. This keeps
the form cleaner and allows the user to change it later.

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/donate.html b/src/templates/donate.html
index 4393e263ba145daa86d9172c6e5a8a6729aa5030..8a240fac170a6cf989f0fc5f1ea0132cb504d25f 100644 (file)
--- a/src/templates/donate.html
+++ b/src/templates/donate.html
@@ -72,78 +72,6 @@
                                                                                </div>
 
                                                                                <div class="row mb-5">
-                                                                                       <div class="col">
-                                                                                               <h6>Choose payment</h6>
-
-                                                                                               <div class="form-check form-check-inline">
-                                                                                                       <input class="form-check-input" type="radio"
-                                                                                                               name="payment" id="credit-card" value="credit-card" checked>
-                                                                                                       <label for="credit-card" class="form-check-label">
-                                                                                                               <picture>
-                                                                                                                       <source srcset="{{ static_url("img/amex.png") }},
-                                                                                                                               {{ static_url("img/amex@2x.png") }} 2x,
-                                                                                                                               {{ static_url("img/amex@3x.png") }} 3x ">
-                                                                                                                       <img src="{{ static_url("img/amex.png") }}"
-                                                                                                                               srcset="{{ static_url("img/amex.png") }},
-                                                                                                                               {{ static_url("img/amex@2x.png") }} 2x,
-                                                                                                                               {{ static_url("img/amex@3x.png") }} 3x "
-                                                                                                                               alt="Amex" class="m-xl-2">
-                                                                                                               </picture>
-
-                                                                                                               <picture>
-                                                                                                                       <source srcset="{{ static_url("img/mastercard.png") }},
-                                                                                                                               {{ static_url("img/mastercard@2x.png") }} 2x,
-                                                                                                                               {{ static_url("img/mastercard@3x.png") }} 3x ">
-                                                                                                                       <img src="{{ static_url("img/mastercard.png") }}"
-                                                                                                                               srcset="{{ static_url("img/mastercard.png") }},
-                                                                                                                               {{ static_url("img/mastercard@2x.png") }} 2x,
-                                                                                                                               {{ static_url("img/mastercard@3x.png") }} 3x "
-                                                                                                                               alt="Mastercard" class="m-xl-2">
-                                                                                                               </picture>
-
-                                                                                                               <picture>
-                                                                                                                       <source srcset="{{ static_url("img/visa.png") }},
-                                                                                                                               {{ static_url("img/visa@2x.png") }} 2x,
-                                                                                                                               {{ static_url("img/visa@3x.png") }} 3x ">
-                                                                                                                       <img src="{{ static_url("img/visa.png") }}"
-                                                                                                                               srcset="{{ static_url("img/visa.png") }},
-                                                                                                                               {{ static_url("img/visa@2x.png") }} 2x,
-                                                                                                                               {{ static_url("img/visa@3x.png") }} 3x "
-                                                                                                                               alt="Visa" class="m-xl-2">
-                                                                                                               </picture>
-                                                                                                       </label>
-                                                                                               </div>
-
-                                                                                               <div class="form-check form-check-inline">
-                                                                                                       <input class="form-check-input" type="radio" name="payment"
-                                                                                                               id="direct-debit" value="direct-debit">
-
-                                                                                                       <label for="direct-debit" class="form-check-label">
-                                                                                                               SEPA
-                                                                                                       </label>
-                                                                                               </div>
-
-                                                                                               <div class="form-check form-check-inline paypal">
-                                                                                                       <input class="form-check-input" type="radio" name="payment"
-                                                                                                               id="paypal" value="paypal">
-
-                                                                                                       <label for="paypal" class="form-check-label">
-                                                                                                               <picture>
-                                                                                                                       <source srcset="{{ static_url("img/paypal.png") }},
-                                                                                                                               {{ static_url("img/paypal@2x.png") }} 2x,
-                                                                                                                               {{ static_url("img/paypal@3x.png") }} 3x ">
-                                                                                                                       <img src="{{ static_url("img/paypal.png") }}"
-                                                                                                                               srcset="{{ static_url("img/paypal.png") }},
-                                                                                                                               {{ static_url("img/paypal@2x.png") }} 2x,
-                                                                                                                               {{ static_url("img/paypal@3x.png") }} 3x "
-                                                                                                                               alt="PayPal" class="m-xl-2">
-                                                                                                               </picture>
-                                                                                                       </label>
-                                                                                               </div>
-                                                                                       </div>
-                                                                               </div>
-
-                                                                               <div class="row collapse" id="address">
                                                                                        <div class="col d-flex flex-column">
                                                                                                <div class="form-row">
                                                                                                        <div class="col">
@@ -230,16 +158,63 @@
                                                                                                                </div>
                                                                                                        </div>
                                                                                                </div>
+                                                                                       </div>
+                                                                               </div>
 
-                                                                                               <input type="submit" class="btn btn-primary btn-lg mx-auto"
+                                                                               <div class="row mb-5">
+                                                                                       <div class="col text-center">
+                                                                                               <input type="submit" class="btn btn-primary btn-lg"
                                                                                                        id="donate" value="{{ _("Donate Now") }}">
                                                                                        </div>
                                                                                </div>
 
                                                                                <div class="row">
-                                                                                       <div class="col text-center">
-                                                                                               <button class="btn btn-primary btn-lg" id="next"
-                                                                                                       data-toggle="collapse" href="#address">{{ _("Next") }} &raquo;</button>
+                                                                                       <div class="col d-flex justify-content-center">
+                                                                                               <picture>
+                                                                                                       <source srcset="{{ static_url("img/amex.png") }},
+                                                                                                               {{ static_url("img/amex@2x.png") }} 2x,
+                                                                                                               {{ static_url("img/amex@3x.png") }} 3x">
+                                                                                                       <img src="{{ static_url("img/amex.png") }}"
+                                                                                                               srcset="{{ static_url("img/amex.png") }},
+                                                                                                               {{ static_url("img/amex@2x.png") }} 2x,
+                                                                                                               {{ static_url("img/amex@3x.png") }} 3x"
+                                                                                                               alt="Amex" class="m-xl-2">
+                                                                                               </picture>
+
+                                                                                               <picture>
+                                                                                                       <source srcset="{{ static_url("img/mastercard.png") }},
+                                                                                                               {{ static_url("img/mastercard@2x.png") }} 2x,
+                                                                                                               {{ static_url("img/mastercard@3x.png") }} 3x">
+                                                                                                       <img src="{{ static_url("img/mastercard.png") }}"
+                                                                                                               srcset="{{ static_url("img/mastercard.png") }},
+                                                                                                               {{ static_url("img/mastercard@2x.png") }} 2x,
+                                                                                                               {{ static_url("img/mastercard@3x.png") }} 3x"
+                                                                                                               alt="Mastercard" class="m-xl-2">
+                                                                                               </picture>
+
+                                                                                               <picture>
+                                                                                                       <source srcset="{{ static_url("img/visa.png") }},
+                                                                                                               {{ static_url("img/visa@2x.png") }} 2x,
+                                                                                                               {{ static_url("img/visa@3x.png") }} 3x">
+                                                                                                       <img src="{{ static_url("img/visa.png") }}"
+                                                                                                               srcset="{{ static_url("img/visa.png") }},
+                                                                                                               {{ static_url("img/visa@2x.png") }} 2x,
+                                                                                                               {{ static_url("img/visa@3x.png") }} 3x"
+                                                                                                               alt="Visa" class="m-xl-2">
+                                                                                               </picture>
+
+                                                                                               <!-- XXX insert SEPA logo -->
+
+                                                                                               <picture>
+                                                                                                       <source srcset="{{ static_url("img/paypal.png") }},
+                                                                                                               {{ static_url("img/paypal@2x.png") }} 2x,
+                                                                                                               {{ static_url("img/paypal@3x.png") }} 3x">
+                                                                                                       <img src="{{ static_url("img/paypal.png") }}"
+                                                                                                               srcset="{{ static_url("img/paypal.png") }},
+                                                                                                               {{ static_url("img/paypal@2x.png") }} 2x,
+                                                                                                               {{ static_url("img/paypal@3x.png") }} 3x"
+                                                                                                               alt="PayPal" class="m-xl-2">
+                                                                                               </picture>
                                                                                        </div>
                                                                                </div>
 
@@ -358,16 +333,6 @@
                                }
                        });
 
-                       $("input[name='frequency']").on("change", function() {
-                               var frequency = $(this).val();
-
-                               if (frequency == "monthly") {
-                                       $(".paypal").hide();
-                               } else {
-                                       $(".paypal").show();
-                               }
-                       })
-
                        // Copy amount when clicking on a radio button
                        $("input[name='amount-selector']").on("change", function() {
                                var value = $(this).val();
@@ -390,12 +355,6 @@
                                }
                        });
 
-                       $("#next").click(function (event) {
-                               event.preventDefault();
-
-                               $(this).hide();
-                       });
-
                        $("#donate").click(function (event) {
                                var frequency = $("input[name='frequency']").val();