Skip to content

Commit d396f0b

Browse files
iivashchenkoiivashchenko
committed
MAGETWO-58251: PayPal Best Practice to Separate Saved Tokens
1 parent 0cb8b17 commit d396f0b

File tree

5 files changed

+182
-49
lines changed

5 files changed

+182
-49
lines changed

‎app/code/Magento/Checkout/view/frontend/web/js/model/payment/method-group.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* Copyright © 2016 Magento. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
define([
7+
'uiElement',
8+
'mage/translate'
9+
], function (Element, $t) {
10+
'use strict';
11+
12+
var DEFAULT_GROUP_ALIAS = 'default';
13+
14+
return Element.extend({
15+
defaults: {
16+
alias: DEFAULT_GROUP_ALIAS,
17+
title: $t('Payment Method'),
18+
sortOrder: 100,
19+
displayArea: 'payment-methods-items-${ $.alias }'
20+
},
21+
22+
/**
23+
* Checks if group instance is default
24+
*
25+
* @returns {Boolean}
26+
*/
27+
isDefault: function () {
28+
return this.alias === DEFAULT_GROUP_ALIAS;
29+
}
30+
});
31+
});

‎app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js

Lines changed: 112 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,24 @@ define([
1010
'Magento_Checkout/js/model/payment/method-list',
1111
'Magento_Checkout/js/model/payment/renderer-list',
1212
'uiLayout',
13-
'Magento_Checkout/js/model/checkout-data-resolver'
14-
], function (_, ko, utils, Component, paymentMethods, rendererList, layout, checkoutDataResolver) {
13+
'Magento_Checkout/js/model/checkout-data-resolver',
14+
'mage/translate'
15+
], function (_, ko, utils, Component, paymentMethods, rendererList, layout, checkoutDataResolver, $t) {
1516
'use strict';
1617

1718
return Component.extend({
1819
defaults: {
1920
template: 'Magento_Checkout/payment-methods/list',
20-
visible: paymentMethods().length > 0
21+
visible: paymentMethods().length > 0,
22+
configDefaultGroup: {
23+
name: 'methodGroup',
24+
component: 'Magento_Checkout/js/model/payment/method-group'
25+
},
26+
modules: {
27+
defaultGroup: '${ $.configDefaultGroup.name }'
28+
},
29+
paymentGroupsList: [],
30+
defaultGroupTitle: $t('Select a new payment method')
2131
},
2232

2333
/**
@@ -26,7 +36,7 @@ define([
2636
* @returns {Component} Chainable.
2737
*/
2838
initialize: function () {
29-
this._super().initChildren();
39+
this._super().initDefaulGroup().initChildren();
3040
paymentMethods.subscribe(
3141
function (changes) {
3242
checkoutDataResolver.resolvePaymentMethod();
@@ -47,6 +57,27 @@ define([
4757
return this;
4858
},
4959

60+
/** @inheritdoc */
61+
initObservable: function () {
62+
this._super().
63+
observe(['paymentGroupsList']);
64+
65+
return this;
66+
},
67+
68+
/**
69+
* Creates default group
70+
*
71+
* @returns {Component} Chainable.
72+
*/
73+
initDefaulGroup: function() {
74+
layout([
75+
this.configDefaultGroup
76+
]);
77+
78+
return this;
79+
},
80+
5081
/**
5182
* Create renders for child payment methods.
5283
*
@@ -77,7 +108,7 @@ define([
77108
rendererTemplate = {
78109
parent: '${ $.$data.parentName }',
79110
name: '${ $.$data.name }',
80-
displayArea: 'payment-method-items',
111+
displayArea: payment.displayArea,
81112
component: payment.component
82113
};
83114
rendererComponent = utils.template(rendererTemplate, templateData);
@@ -95,7 +126,8 @@ define([
95126
* @param {Object} paymentMethodData
96127
*/
97128
createRenderer: function (paymentMethodData) {
98-
var isRendererForMethod = false;
129+
var isRendererForMethod = false,
130+
currentGroup;
99131

100132
_.find(rendererList(), function (renderer) {
101133

@@ -108,36 +140,91 @@ define([
108140
}
109141

110142
if (isRendererForMethod) {
111-
layout(
112-
[
113-
this.createComponent(
114-
{
115-
config: renderer.config,
116-
component: renderer.component,
117-
name: renderer.type,
118-
method: paymentMethodData.method,
119-
item: paymentMethodData
120-
}
121-
)
122-
]
123-
);
143+
currentGroup = renderer.group ? renderer.group : this.defaultGroup();
144+
145+
this.collectPaymentGroups(currentGroup);
146+
147+
layout([
148+
this.createComponent(
149+
{
150+
config: renderer.config,
151+
component: renderer.component,
152+
name: renderer.type,
153+
method: paymentMethodData.method,
154+
item: paymentMethodData,
155+
displayArea: currentGroup.displayArea
156+
}
157+
)]);
158+
159+
return true;
124160
}
125161
}.bind(this));
126162
},
127163

164+
/**
165+
* Collects unique groups of available payment methods
166+
*
167+
* @param {Object} group
168+
*/
169+
collectPaymentGroups: function (group) {
170+
var groupsList = this.paymentGroupsList(),
171+
isGroupExists = _.some(groupsList, function (existsGroup) {
172+
return existsGroup.alias === group.alias;
173+
});
174+
175+
if (!isGroupExists) {
176+
groupsList.push(group);
177+
groupsList = _.sortBy(groupsList, function (existsGroup) {
178+
return existsGroup.sortOrder;
179+
});
180+
this.paymentGroupsList(groupsList);
181+
}
182+
},
183+
184+
/**
185+
* Returns payment group title
186+
*
187+
* @param {Object} group
188+
* @returns {String}
189+
*/
190+
getGroupTitle: function (group) {
191+
var title = group().title;
192+
193+
if (group().isDefault() && this.paymentGroupsList().length > 1) {
194+
title = this.defaultGroupTitle;
195+
}
196+
197+
return title + ':';
198+
},
199+
200+
/**
201+
* Checks if at least one payment method available
202+
*
203+
* @returns {String}
204+
*/
205+
isPaymentMethodsAvailable: function () {
206+
return _.some(this.paymentGroupsList(), function (group) {
207+
return this.getRegion(group.displayArea)().length;
208+
}, this);
209+
},
210+
128211
/**
129212
* Remove view renderer.
130213
*
131214
* @param {String} paymentMethodCode
132215
*/
133216
removeRenderer: function (paymentMethodCode) {
134-
var items = this.getRegion('payment-method-items');
217+
var items;
135218

136-
_.find(items(), function (value) {
137-
if (value.item.method.indexOf(paymentMethodCode) === 0) {
138-
value.disposeSubscriptions();
139-
value.destroy();
140-
}
219+
_.each(this.paymentGroupsList(), function (group) {
220+
items = this.getRegion(group.displayArea);
221+
222+
_.find(items(), function (value) {
223+
if (value.item.method.indexOf(paymentMethodCode) === 0) {
224+
value.disposeSubscriptions();
225+
value.destroy();
226+
}
227+
});
141228
}, this);
142229
}
143230
});

‎app/code/Magento/Checkout/view/frontend/web/template/payment-methods/list.html

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,18 @@
44
* See COPYING.txt for license details.
55
*/
66
-->
7-
<div class="items payment-methods">
8-
<!-- ko foreach: { data: getRegion('payment-method-items'), as: 'element'} -->
9-
<!-- ko template: element.getTemplate() --><!-- /ko -->
10-
<!-- /ko -->
7+
<div if="isPaymentMethodsAvailable()"
8+
class="items payment-methods">
9+
<div repeat="foreach: paymentGroupsList, item: '$group'">
10+
<div if="getRegion($group().displayArea)().length"
11+
translate="getGroupTitle($group)"
12+
class="step-title"
13+
data-role="title">
14+
</div>
15+
<each args="data: getRegion($group().displayArea), as: 'method'" render=""/>
16+
</div>
17+
</div>
18+
<div ifnot="isPaymentMethodsAvailable()"
19+
class="no-payments-block"
20+
translate="'No Payment Methods'">
1121
</div>
12-
<!-- ko ifnot: getRegion('payment-method-items')().length > 0 --><div class="no-payments-block"><!-- ko i18n: 'No Payment Methods'--><!-- /ko --></div><!-- /ko -->

‎app/code/Magento/Checkout/view/frontend/web/template/payment.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
*/
66
-->
77
<li id="payment" role="presentation" class="checkout-payment-method" data-bind="fadeVisible: isVisible">
8-
<div class="step-title" data-bind="i18n: title" data-role="title"></div>
98
<div id="checkout-step-payment"
109
class="step-content"
1110
data-role="content"

‎app/code/Magento/Vault/view/frontend/web/js/view/payment/vault.js

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,32 @@
44
*/
55
/*browser:true*/
66
/*global define*/
7-
define(
8-
[
9-
'underscore',
10-
'uiComponent',
11-
'Magento_Checkout/js/model/payment/renderer-list'
12-
],
13-
function (
14-
_,
15-
Component,
16-
rendererList
17-
) {
18-
'use strict';
7+
define([
8+
'underscore',
9+
'uiComponent',
10+
'Magento_Checkout/js/model/payment/renderer-list',
11+
'uiLayout',
12+
'uiRegistry'
13+
], function (_, Component, rendererList, layout, registry) {
14+
'use strict';
1915

16+
var vaultGroupName = 'vaultGroup';
17+
18+
layout([{
19+
name: vaultGroupName,
20+
component: 'Magento_Checkout/js/model/payment/method-group',
21+
alias: 'vault',
22+
sortOrder: 10
23+
}]);
24+
25+
registry.get(vaultGroupName, function (vaultGroup) {
2026
_.each(window.checkoutConfig.payment.vault, function (config, index) {
2127
rendererList.push(
2228
{
2329
type: index,
2430
config: config.config,
2531
component: config.component,
32+
group: vaultGroup,
2633

2734
/**
2835
* Custom payment method types comparator
@@ -37,10 +44,10 @@ define(
3744
}
3845
);
3946
});
47+
});
4048

41-
/**
42-
* Add view logic here if needed
43-
*/
44-
return Component.extend({});
45-
}
46-
);
49+
/**
50+
* Add view logic here if needed
51+
*/
52+
return Component.extend({});
53+
});

0 commit comments

Comments
 (0)