From 9612ede9ca68c3e2d5dc95c99eead474ae50210e Mon Sep 17 00:00:00 2001
From: Demesmaeker <edm@odoo.com>
Date: Thu, 29 Apr 2021 08:41:29 +0000
Subject: [PATCH] [IMP] sale, payment: improve the UI

Small UI improvements for clarity/continuity:
1. In the "Sales' onboarding wizard > payment configuration >
documentatlion link", font roboto is now used.
2. In the sales order, the error message when 'there is nothing
to invoice' now also explains also what the user has to do to invoice
"Prepaid" services.
3. In the "Payment confirmation" section of the payment portal,
'Reference', 'From' & 'Amount' fields don't look like editable
fields anymore.
4. In the payment forms, tokens created with the Test acquirer
are now identified with a "Test Token" badge in place of the
verified token checkmark.

task-2505913

closes odoo/odoo#70076

Related: odoo/enterprise#18036
Signed-off-by: Antoine Vandevenne (anv) <AntoineVDV@users.noreply.github.com>
---
 .../views/payment_portal_templates.xml        | 33 +++++++++----------
 addons/payment/views/payment_templates.xml    | 33 ++++++++++---------
 .../payment_acquirer_onboarding_templates.xml |  4 +--
 addons/payment_test/__manifest__.py           |  1 +
 .../models/payment_transaction.py             |  3 +-
 .../payment_test/views/payment_templates.xml  | 12 +++++++
 addons/sale/models/sale_order.py              | 16 +++++----
 7 files changed, 58 insertions(+), 44 deletions(-)
 create mode 100644 addons/payment_test/views/payment_templates.xml

diff --git a/addons/payment/views/payment_portal_templates.xml b/addons/payment/views/payment_portal_templates.xml
index ebf26549ddb..7703b29fa6d 100644
--- a/addons/payment/views/payment_portal_templates.xml
+++ b/addons/payment/views/payment_portal_templates.xml
@@ -138,38 +138,35 @@
                                     <label for="form_partner_name" class="col-md-3 col-form-label">
                                         From
                                     </label>
-                                    <div class="col-md-9">
-                                        <span name="form_partner_name"
-                                              class="form-control"
-                                              t-esc="tx.partner_name"/>
-                                    </div>
+                                    <span name="form_partner_name"
+                                          class="col-md-9 col-form-label"
+                                          t-esc="tx.partner_name"/>
                                 </div>
+                                <hr/>
                                 <div class="form-group row">
                                     <label for="form_reference" class="col-md-3 col-form-label">
                                         Reference
                                     </label>
-                                    <div class="col-md-9">
-                                        <span name="form_reference"
-                                              class="form-control"
-                                              t-esc="tx.reference"/>
-                                    </div>
+                                    <span name="form_reference"
+                                          class="col-md-9 col-form-label"
+                                          t-esc="tx.reference"/>
                                 </div>
+                                <hr/>
                                 <div class="form-group row">
                                     <label for="form_amount" class="col-md-3 col-form-label">
                                         Amount
                                     </label>
-                                    <div class="col-md-9">
-                                        <span name="form_amount"
-                                              class="form-control"
-                                              t-esc="tx.amount"
-                                              t-options="{'widget': 'monetary', 'display_currency': tx.currency_id}"/>
-                                    </div>
+                                    <span name="form_amount"
+                                          class="col-md-9 col-form-label"
+                                          t-esc="tx.amount"
+                                          t-options="{'widget': 'monetary', 'display_currency': tx.currency_id}"/>
                                 </div>
+                                <hr/>
                                 <div class="row">
-                                    <div class="col-md-5 offset-md-3 text-muted">
+                                    <div class="col-md-5 text-muted">
                                         Processed by <t t-esc="tx.acquirer_id.sudo().name"/>
                                     </div>
-                                    <div class="col-md-4 mt-2 pl-0">
+                                    <div class="col-md-4 offset-md-3 mt-2 pl-0">
                                         <a role="button"
                                            t-attf-class="btn btn-#{status} float-right"
                                            href="/my/home">
diff --git a/addons/payment/views/payment_templates.xml b/addons/payment/views/payment_templates.xml
index 4d4f3e90a17..9eea1d7f88a 100644
--- a/addons/payment/views/payment_templates.xml
+++ b/addons/payment/views/payment_templates.xml
@@ -120,14 +120,7 @@
                             <!-- === Token name === -->
                             <span class="payment_option_name" t-esc="token.name"/>
                             <!-- === "V" check mark === -->
-                            <i t-if="token.verified" class="fa fa-check text-success"
-                               title="This payment method has been verified by our system."
-                               role="img"
-                               aria-label="Ok"/>
-                            <i t-else="" class="fa fa-check text-muted"
-                               title="This payment method has not been verified by our system."
-                               role="img"
-                               aria-label="Not verified"/>
+                            <t t-call="payment.verified_token_checkmark"/>
                         </label>
                     </div>
                     <!-- === Token inline form === -->
@@ -247,14 +240,7 @@
                             <!-- === Token name === -->
                             <span class="payment_option_name" t-esc="token.name"/>
                             <!-- === "V" check mark === -->
-                            <i t-if="token.verified" class="fa fa-check text-success"
-                               title="This payment method has been verified by our system."
-                               role="img"
-                               aria-label="Ok"/>
-                            <i t-else="" class="fa fa-check text-muted"
-                               title="This payment method has not been verified by our system."
-                               role="img"
-                               aria-label="Not verified"/>
+                            <t t-call="payment.verified_token_checkmark"/>
                         </label>
                         <!-- === "Delete" token button === -->
                         <button name="o_payment_delete_token"
@@ -315,6 +301,21 @@
         </ul>
     </template>
 
+    <!-- Verified token checkmark -->
+    <template id="verified_token_checkmark" name="Payment Verified Token Checkmark">
+        <t t-if="0" name="payment_test_hook"/>
+        <t t-else="">
+            <i t-if="token.verified" class="fa fa-check text-success"
+                title="This payment method has been verified by our system."
+                role="img"
+                aria-label="Ok"/>
+            <i t-else="" class="fa fa-check text-muted"
+                title="This payment method has not been verified by our system."
+                role="img"
+                aria-label="Not verified"/>
+        </t>
+    </template>
+
     <!-- Generic footer for payment forms -->
     <template id="footer" name="Payment Footer">
         <!-- Variables description:
diff --git a/addons/payment/wizards/payment_acquirer_onboarding_templates.xml b/addons/payment/wizards/payment_acquirer_onboarding_templates.xml
index 988647986a9..720a7deb3b4 100644
--- a/addons/payment/wizards/payment_acquirer_onboarding_templates.xml
+++ b/addons/payment/wizards/payment_acquirer_onboarding_templates.xml
@@ -38,7 +38,7 @@
                                 </p>
                                 <p attrs="{'invisible': [('paypal_user_type', '=', 'new_user')]}">
                                     <a href="https://www.odoo.com/documentation/14.0/applications/general/payment_acquirers/paypal.html" target="_blank">
-                                        <span class="fa fa-arrow-right"> How to configure your PayPal account</span>
+                                        <span><i class="fa fa-arrow-right"/> How to configure your PayPal account</span>
                                     </a>
                                 </p>
                             </div>
@@ -51,7 +51,7 @@
                                 </group>
                                 <p>
                                     <a href="https://dashboard.stripe.com/account/apikeys" target="_blank">
-                                        <span class="fa fa-arrow-right"> Get my Stripe keys</span>
+                                        <span><i class="fa fa-arrow-right"/> Get my Stripe keys</span>
                                     </a>
                                 </p>
                             </div>
diff --git a/addons/payment_test/__manifest__.py b/addons/payment_test/__manifest__.py
index 205f1952ddb..c7a15e5b29f 100644
--- a/addons/payment_test/__manifest__.py
+++ b/addons/payment_test/__manifest__.py
@@ -10,6 +10,7 @@ It should never be used in production environment. Make sure to disable it befor
 """,
     'depends': ['payment'],
     'data': [
+        'views/payment_templates.xml',
         'views/payment_test_templates.xml',
         'data/payment_acquirer_data.xml',
     ],
diff --git a/addons/payment_test/models/payment_transaction.py b/addons/payment_test/models/payment_transaction.py
index 50aea384e16..4c29c2276fe 100644
--- a/addons/payment_test/models/payment_transaction.py
+++ b/addons/payment_test/models/payment_transaction.py
@@ -66,10 +66,9 @@ class PaymentTransaction(models.Model):
 
         self._set_done()  # Dummy transactions are always successful
         if self.tokenize:
-            cc_number = payment_utils.build_token_name(payment_details_short=data['cc_summary'])
             token = self.env['payment.token'].create({
                 'acquirer_id': self.acquirer_id.id,
-                'name': f"TEST {cc_number}",
+                'name': payment_utils.build_token_name(payment_details_short=data['cc_summary']),
                 'partner_id': self.partner_id.id,
                 'acquirer_ref': 'fake acquirer reference',
                 'verified': True,
diff --git a/addons/payment_test/views/payment_templates.xml b/addons/payment_test/views/payment_templates.xml
new file mode 100644
index 00000000000..5ec72cab6b1
--- /dev/null
+++ b/addons/payment_test/views/payment_templates.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+    <template id="verified_token_checkmark" inherit_id="payment.verified_token_checkmark">
+        <xpath expr="//t[@name='payment_test_hook']" position="replace">
+            <t t-if="token.provider=='test'">
+                <span class="badge badge-warning">Test Token</span>
+            </t>
+        </xpath>
+    </template>
+
+</odoo>
diff --git a/addons/sale/models/sale_order.py b/addons/sale/models/sale_order.py
index d71d4eeb770..aa357d59b78 100644
--- a/addons/sale/models/sale_order.py
+++ b/addons/sale/models/sale_order.py
@@ -649,12 +649,16 @@ class SaleOrder(models.Model):
 
     @api.model
     def _nothing_to_invoice_error(self):
-        msg = _("""There is nothing to invoice!\n
-Reason(s) of this behavior could be:
-- You should deliver your products before invoicing them: Click on the "truck" icon (top-right of your screen) and follow instructions.
-- You should modify the invoicing policy of your product: Open the product, go to the "Sales tab" and modify invoicing policy from "delivered quantities" to "ordered quantities".
-        """)
-        return UserError(msg)
+        return UserError(_(
+            "There is nothing to invoice!\n\n"
+            "Reason(s) of this behavior could be:\n"
+            "- You should deliver your products before invoicing them: Click on the \"truck\" icon "
+            "(top-right of your screen) and follow instructions.\n"
+            "- You should modify the invoicing policy of your product: Open the product, go to the "
+            "\"Sales\" tab and modify invoicing policy from \"delivered quantities\" to \"ordered "
+            "quantities\". For Services, you should modify the Service Invoicing Policy to "
+            "'Prepaid'."
+        ))
 
     def _get_invoiceable_lines(self, final=False):
         """Return the invoiceable lines for order `self`."""