[FIX] website_payment: fix incorrect custom amount behavior in /donat…

…ion/pay

Since version 15.0, users have encountered issues with the custom amount
selection on the donation page, leading to confusion about the amount
that would actually be donated.

Bug 1: Multiple amounts could be selected simultaneously, affecting
versions 17+.
Bug 2: The last selected amount was not the actual amount donated,
affecting versions 15+.

This commit addresses Bug 1,2 in version 17+. During the forward port to
master, the patch will be removed

Steps to Reproduce:
1. Place a donation on the website with predefined amounts.
2. Select a predefined donation amount.
3. Enter a custom donation amount.
4. Switch back to a predefined amount.
5. Select the custom amount again and proceed to donate.

Result: The custom amount is not properly applied.

For more details, see the video linked in the task

task-4115678

closes odoo#177270

X-original-commit: 9c4d599
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
Signed-off-by: Alessandro Caldonazzi (alca) <alca@odoo.com>

addons/website_payment/static/src/js/payment_form.js

@@ -8,6 +8,8 @@ import PaymentForm from '@payment/js/payment_form';
 PaymentForm.include({
     events: Object.assign({}, PaymentForm.prototype.events || {}, {
         'change input[name="o_donation_amount"]': '_updateAmount',
+        'focus input[name="amount"]': '_updateAmount',
+        'focus input[name="o_donation_amount"]': '_updateAmount',
     }),
 
     // #=== WIDGET LIFECYCLE ===#
@@ -30,8 +32,18 @@ PaymentForm.include({
      * @return {void}
      */
     _updateAmount(ev) {
-        if (ev.target.value > 0) {
+        if (ev.target.value >= 0) {
             this.paymentContext.amount = ev.target.value;
+            if (ev.target.name === "o_donation_amount" && ev.target.type === "number") {
+                this.el.querySelector("#other_amount").value = ev.target.value;
+            }
+            if (ev.target.id === "other_amount" || (ev.target.name === "o_donation_amount" && ev.target.type === "number")) {
+                this.el.querySelectorAll('input[name="o_donation_amount"][type="radio"]').forEach((radioEl) => {
+                    radioEl.checked = false;
+                });
+            } else if (ev.target.name === "o_donation_amount") {
+                this.el.querySelector("#other_amount").checked = false;
+            }
         }
     },