[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>
This commit is contained in:
Anita (anko)
committed by
Antoine Vandevenne (anv)
Antoine Vandevenne (anv)
parent
ba0cc488ed
commit
f3fb83a183
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user