From f3fb83a183d19cfabfe00fdf591dbcba00ca9f61 Mon Sep 17 00:00:00 2001
From: "Anita (anko)" <anko@odoo.com>
Date: Thu, 8 Dec 2022 09:07:41 +0000
Subject: [PATCH] [IMP] payment: add distinction between providers and tokens

Currently there is no distinction between saved tokens and providers
and there is no info on tokens under what provider they were created.
When client has more than one token it looks messy and counters the
point of token existance. Now tokens have their creation date,provider
and are no longer in the same card as providers.

task-2510973

closes odoo/odoo#108260

Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
---
 addons/payment/views/payment_templates.xml    | 210 ++++++++++--------
 .../views/donation_templates.xml              |   4 +-
 .../website_sale_picking/views/templates.xml  |   2 +-
 3 files changed, 121 insertions(+), 95 deletions(-)

diff --git a/addons/payment/views/payment_templates.xml b/addons/payment/views/payment_templates.xml
index 12680add1e9..3dc2d0f9611 100644
--- a/addons/payment/views/payment_templates.xml
+++ b/addons/payment/views/payment_templates.xml
@@ -56,8 +56,65 @@
             <t t-set="footer_template_id"
                t-value="footer_template_id or 'payment.footer'"/>
 
+            <!-- === Tokens === -->
+            <t t-if="token_count > 0">
+                <span class="fs-4">Saved payment methods</span>
+                <div class="card">
+                    <t t-foreach="tokens" t-as="token">
+                        <t t-set="provider" t-value="token.provider_id"/>
+                        <div name="o_payment_option_card" class="card-body o_payment_option_card">
+                            <label>
+                                <!-- === Radio button === -->
+                                <input name="o_payment_radio"
+                                       type="radio"
+                                       t-att-checked="token.id == default_payment_option_id"
+                                       t-att-data-payment-option-id="token.id"
+                                       t-att-data-provider="token.provider_code"
+                                       data-payment-option-type="token"/>
+                                <!-- === Token name === -->
+                                <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(provider)"
+                                      class="badge rounded-pill text-bg-secondary ms-1">
+                                        + <t t-esc="fees_by_provider.get(provider)"
+                                             t-options="{'widget': 'monetary', 'display_currency': currency}"/>
+                                        Fees
+                                </span>
+                                <!-- === "Test token" badge === -->
+                                <t t-call="payment.test_token_badge"/>
+                                <!-- === "Unpublished" badge === -->
+                                <span t-if="not provider.is_published" class="badge rounded-pill text-bg-danger ms-1">
+                                    Unpublished
+                                </span>
+                                <div class="ms-4 fst-italic small text-muted">
+                                    Managed by
+                                    <span t-esc="dict(provider._fields['code']._description_selection(provider.env))[provider.code]"/>
+                                    — created on 
+                                    <span t-esc="token.create_date.date()"/>
+                                </div>
+                            </label>
+                        </div>
+                        <!-- === Token inline form === -->
+                        <div t-attf-id="o_payment_token_inline_form_{{token.id}}"
+                             name="o_payment_inline_form"
+                             class="card-footer d-none">
+                            <t t-set="token_inline_form_xml_id"
+                               t-value="token.sudo().provider_id.token_inline_form_view_id.xml_id"/>
+                            <!-- === Inline form content (filled by provider) === -->
+                            <div t-if="token_inline_form_xml_id" class="clearfix">
+                                <t t-call="{{token_inline_form_xml_id}}">
+                                    <t t-set="token" t-value="token"/>
+                                </t>
+                            </div>
+                        </div>
+                    </t>
+                </div>
+            </t>
+            <!-- === Providers === -->
+            <span t-if="token_count > 0" class="fs-4 mt-3 d-block">Other payment methods</span>
             <div class="card">
-                <!-- === Providers === -->
                 <t t-foreach="providers" t-as="provider">
                     <div name="o_payment_option_card" class="card-body o_payment_option_card">
                         <label>
@@ -121,50 +178,6 @@
                         </label>
                     </div>
                 </t>
-                <!-- === Tokens === -->
-                <t t-foreach="tokens" t-as="token">
-                    <div name="o_payment_option_card" class="card-body o_payment_option_card">
-                        <label>
-                            <!-- === Radio button === -->
-                            <input name="o_payment_radio"
-                                   type="radio"
-                                   t-att-checked="token.id == default_payment_option_id"
-                                   t-att-data-payment-option-id="token.id"
-                                   t-att-data-provider="token.provider_code"
-                                   data-payment-option-type="token"/>
-                            <!-- === Token name === -->
-                            <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>
-                            <!-- === "Test token" badge === -->
-                            <t t-call="payment.test_token_badge"/>
-                            <!-- === "Unpublished" badge === -->
-                            <span t-if="not token.provider_id.is_published" class="badge rounded-pill text-bg-danger ms-1">
-                                Unpublished
-                            </span>
-                        </label>
-                    </div>
-                    <!-- === Token inline form === -->
-                    <div t-attf-id="o_payment_token_inline_form_{{token.id}}"
-                         name="o_payment_inline_form"
-                         class="card-footer d-none">
-                        <t t-set="token_inline_form_xml_id"
-                           t-value="token.sudo().provider_id.token_inline_form_view_id.xml_id"/>
-                        <!-- === Inline form content (filled by provider) === -->
-                        <div t-if="token_inline_form_xml_id" class="clearfix">
-                            <t t-call="{{token_inline_form_xml_id}}">
-                                <t t-set="token" t-value="token"/>
-                            </t>
-                        </div>
-                    </div>
-                </t>
             </div>
             <!-- === "Pay" button === -->
             <t t-call="{{footer_template_id}}">
@@ -209,8 +222,66 @@
                         else None"/>
             <t t-set="footer_template_id"
                t-value="footer_template_id or 'payment.footer'"/>
+            <!-- === Tokens === -->
+            <t t-if="token_count > 0"> 
+                <span class="fs-4">Saved payment methods</span>
+                <div class="card">
+                    <t t-foreach="tokens" t-as="token">
+                        <t t-set="provider" t-value="token.provider_id"/>
+                        <div name="o_payment_option_card" class="card-body o_payment_option_card">
+                            <label>
+                                <!-- === Radio button === -->
+                                <!-- Only shown if 'assign_token_route' is set -->
+                                <input name="o_payment_radio"
+                                       type="radio"
+                                       t-att-checked="token.id == default_payment_option_id"
+                                       t-att-class="'' if bool(assign_token_route) else 'd-none'"
+                                       t-att-data-payment-option-id="token.id"
+                                       t-att-data-provider="token.provider_code"
+                                       data-payment-option-type="token"/>
+                                <!-- === Token name === -->
+                                <span class="payment_option_name" t-esc="token.display_name"/>
+                                <!-- === "V" check mark === -->
+                                <t t-call="payment.verified_token_checkmark"/>
+                                <!-- === "Test token" badge === -->
+                                <t t-call="payment.test_token_badge"/>
+                                <!-- === "Unpublished" badge === -->
+                                <span t-if="not provider.is_published and token.env.user._is_internal()"
+                                      class="badge rounded-pill text-bg-danger ms-1">
+                                    Unpublished
+                                </span>
+                            </label>
+                            <!-- === "Delete" token button === -->
+                            <button name="o_payment_delete_token"
+                                    class="btn btn-primary btn-sm float-end">
+                                <i class="fa fa-trash"/> Delete
+                            </button>
+                            <div class="fst-italic small text-muted">
+                                    Managed by
+                                    <span t-esc="dict(provider._fields['code']._description_selection(provider.env))[provider.code]"/>
+                                    – created on 
+                                    <span t-esc="token.create_date.date()"/>
+                            </div>                      
+                        </div>
+                        <!-- === Token inline form === -->
+                        <div t-attf-id="o_payment_token_inline_form_{{token.id}}"
+                             name="o_payment_inline_form"
+                             class="card-footer d-none">
+                            <t t-set="token_inline_form_xml_id"
+                               t-value="token.sudo().provider_id.token_inline_form_view_id.xml_id"/>
+                            <!-- === Inline form content (filled by provider) === -->
+                            <div t-if="token_inline_form_xml_id" class="clearfix">
+                                <t t-call="{{token_inline_form_xml_id}}">
+                                    <t t-set="token" t-value="token"/>
+                                </t>
+                            </div>
+                        </div>
+                    </t>
+                </div>
+            </t>
+            <!-- === Providers === -->
+            <div t-if="token_count>0" class="fs-4 mt-3 d-block">Add new payment method</div>
             <div class="card">
-                <!-- === Providers === -->
                 <t t-foreach="providers" t-as="provider">
                     <div name="o_payment_option_card" class="card-body o_payment_option_card">
                         <label>
@@ -261,51 +332,6 @@
                         </div>
                     </t>
                 </t>
-                <!-- === Tokens === -->
-                <t t-foreach="tokens" t-as="token">
-                    <div name="o_payment_option_card" class="card-body o_payment_option_card">
-                        <label>
-                            <!-- === Radio button === -->
-                            <!-- Only shown if 'assign_token_route' is set -->
-                            <input name="o_payment_radio"
-                                   type="radio"
-                                   t-att-checked="token.id == default_payment_option_id"
-                                   t-att-class="'' if bool(assign_token_route) else 'd-none'"
-                                   t-att-data-payment-option-id="token.id"
-                                   t-att-data-provider="token.provider_code"
-                                   data-payment-option-type="token"/>
-                            <!-- === Token name === -->
-                            <span class="payment_option_name" t-esc="token.display_name"/>
-                            <!-- === "V" check mark === -->
-                            <t t-call="payment.verified_token_checkmark"/>
-                            <!-- === "Test token" badge === -->
-                            <t t-call="payment.test_token_badge"/>
-                            <!-- === "Unpublished" badge === -->
-                            <span t-if="not token.provider_id.is_published and token.env.user._is_internal()"
-                                  class="badge rounded-pill text-bg-danger ms-1">
-                                Unpublished
-                            </span>
-                        </label>
-                        <!-- === "Delete" token button === -->
-                        <button name="o_payment_delete_token"
-                                class="btn btn-primary btn-sm float-end">
-                            <i class="fa fa-trash"/> Delete
-                        </button>
-                    </div>
-                    <!-- === Token inline form === -->
-                    <div t-attf-id="o_payment_token_inline_form_{{token.id}}"
-                         name="o_payment_inline_form"
-                         class="card-footer d-none">
-                        <t t-set="token_inline_form_xml_id"
-                           t-value="token.sudo().provider_id.token_inline_form_view_id.xml_id"/>
-                        <!-- === Inline form content (filled by provider) === -->
-                        <div t-if="token_inline_form_xml_id" class="clearfix">
-                            <t t-call="{{token_inline_form_xml_id}}">
-                                <t t-set="token" t-value="token"/>
-                            </t>
-                        </div>
-                    </div>
-                </t>
             </div>
             <!-- === "Save Payment Method" button === -->
             <t t-call="{{footer_template_id}}">
@@ -416,7 +442,7 @@
 
     <!-- Test token badge -->
     <template id="test_token_badge" name="Test Token Badge">
-        <span t-if="provider.state == 'test'" class="badge rounded-pill test-bg-warning">
+        <span t-if="token.provider_id.state == 'test'" class="badge rounded-pill text-bg-warning">
             Test Token
         </span>
     </template>
diff --git a/addons/website_payment/views/donation_templates.xml b/addons/website_payment/views/donation_templates.xml
index 1c8e3bd6b7f..c1524bdf0b3 100644
--- a/addons/website_payment/views/donation_templates.xml
+++ b/addons/website_payment/views/donation_templates.xml
@@ -90,12 +90,12 @@
         <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">
+        <xpath expr="//span[@t-if='fees_by_provider.get(provider)']" 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>
+            <attribute name="t-att-data-payment-provider-id">provider.id</attribute>
         </xpath>
         <!-- Adapt Pay confirm button -->
         <xpath expr="//t[@t-set='label']" position="after">
diff --git a/addons/website_sale_picking/views/templates.xml b/addons/website_sale_picking/views/templates.xml
index 2ca10b70183..e42cd0ead21 100644
--- a/addons/website_sale_picking/views/templates.xml
+++ b/addons/website_sale_picking/views/templates.xml
@@ -7,7 +7,7 @@
     </template>
 
     <template id="checkout_payment" inherit_id="payment.checkout">
-        <xpath expr="//input[@name='o_payment_radio']" position="attributes">
+        <xpath expr="//t[@t-foreach='providers']//input[@name='o_payment_radio']" position="attributes">
             <attribute name="t-att-data-is-onsite">1 if provider.custom_mode == 'onsite' else 0</attribute>
         </xpath>
     </template>