From ccea0de41914f43aecc00995676e95e9d83a335d Mon Sep 17 00:00:00 2001
From: "Anita (anko)" <anko@odoo.com>
Date: Fri, 7 Oct 2022 14:40:36 +0000
Subject: [PATCH] [FIX] website(_payment): show fees badge for tokens on
 payment forms

Fees charged by payment providers are shown when choosing a payment
option (provider or token) on a payment form.

Before this commit, the fees badge was not shown next to tokens, which
could be understood as fee-free.

With this commit, the fees badge will also appear next to tokens.

task-2854120

closes odoo/odoo#103100

X-original-commit: 9dded8b5fadf99379018446d9390e6f9510e8e80
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
---
 addons/payment/views/payment_templates.xml               | 7 +++++++
 .../static/src/js/website_payment_form.js                | 9 ++++++---
 addons/website_payment/views/donation_templates.xml      | 7 +++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/addons/payment/views/payment_templates.xml b/addons/payment/views/payment_templates.xml
index ff1eb0ac0d4..51fe29def9e 100644
--- a/addons/payment/views/payment_templates.xml
+++ b/addons/payment/views/payment_templates.xml
@@ -121,6 +121,13 @@
                             <span class="payment_option_name" t-esc="token.display_name"/>
                             <!-- === "V" check mark === -->
                             <t t-call="payment.verified_token_checkmark"/>
+                            <!-- === "Fees" badge === -->
+                            <span t-if="fees_by_provider.get(token.provider_id)"
+                                  class="badge rounded-pill text-bg-secondary ms-1">
+                                    + <t t-esc="fees_by_provider.get(token.provider_id)"
+                                         t-options="{'widget': 'monetary', 'display_currency': currency}"/>
+                                    Fees
+                            </span>
                             <!-- === "Unpublished" badge === -->
                             <span t-if="not token.provider_id.is_published" class="badge rounded-pill text-bg-danger ms-1">
                                 Unpublished
diff --git a/addons/website_payment/static/src/js/website_payment_form.js b/addons/website_payment/static/src/js/website_payment_form.js
index 16cb3746100..18f129aad78 100644
--- a/addons/website_payment/static/src/js/website_payment_form.js
+++ b/addons/website_payment/static/src/js/website_payment_form.js
@@ -140,11 +140,14 @@ checkoutForm.include({
             }).then(feesPerProvider => {
                 for (const card of this.$('.o_payment_option_card:has(.o_payment_fee)')) {
                     const radio = $(card).find('input[name="o_payment_radio"]');
+                    let providerId;
                     if (radio.data("paymentOptionType") === 'provider') {
-                        const providerId = radio.data("paymentOptionId");
-                        const chunk = $(card).find('.o_payment_fee .oe_currency_value')[0];
-                        chunk.innerText = (feesPerProvider[providerId] || 0).toFixed(2);
+                        providerId = radio.data("paymentOptionId");
+                    } else { // token
+                        providerId = radio.data("paymentProviderId");
                     }
+                    const chunk = $(card).find('.o_payment_fee .oe_currency_value')[0];
+                    chunk.innerText = (feesPerProvider[providerId] || 0).toFixed(2);
                 }
             }).guardedCatch(error => {
                 error.event.preventDefault();
diff --git a/addons/website_payment/views/donation_templates.xml b/addons/website_payment/views/donation_templates.xml
index 42c9bafb642..1c8e3bd6b7f 100644
--- a/addons/website_payment/views/donation_templates.xml
+++ b/addons/website_payment/views/donation_templates.xml
@@ -90,6 +90,13 @@
         <xpath expr="//t[@t-if='fees_by_provider.get(provider)']/span" position="attributes">
             <attribute name="class" add="o_payment_fee" separator=" "/>
         </xpath>
+        <xpath expr="//span[@t-if='fees_by_provider.get(token.provider_id)']" position="attributes">
+            <attribute name="class" add="o_payment_fee" separator=" "/>
+        </xpath>
+        <!-- Allow to find the provider id from the radio of tokens -->
+        <xpath expr="//t[@t-foreach='tokens']//input[@name='o_payment_radio']" position="attributes">
+            <attribute name="t-att-data-payment-provider-id">token.provider_id.id</attribute>
+        </xpath>
         <!-- Adapt Pay confirm button -->
         <xpath expr="//t[@t-set='label']" position="after">
             <t t-set="label" t-value="donation_confirm_button_label or label"/>