diff --git a/app/code/Magento/Checkout/view/frontend/web/js/model/payment/method-group.js b/app/code/Magento/Checkout/view/frontend/web/js/model/payment/method-group.js
new file mode 100644
index 0000000000000000000000000000000000000000..4236a215d73596b918d782a2773698e5fa25234f
--- /dev/null
+++ b/app/code/Magento/Checkout/view/frontend/web/js/model/payment/method-group.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+ 'uiElement',
+ 'mage/translate'
+], function (Element, $t) {
+ 'use strict';
+
+ var DEFAULT_GROUP_ALIAS = 'default';
+
+ return Element.extend({
+ defaults: {
+ alias: DEFAULT_GROUP_ALIAS,
+ title: $t('Payment Method'),
+ sortOrder: 100,
+ displayArea: 'payment-methods-items-${ $.alias }'
+ },
+
+ /**
+ * Checks if group instance is default
+ *
+ * @returns {Boolean}
+ */
+ isDefault: function () {
+ return this.alias === DEFAULT_GROUP_ALIAS;
+ }
+ });
+});
diff --git a/app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js b/app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js
index 18f6b8479c229326e28e9c02157d6a39e34625ee..918d305ee031b1d2c96eb6b246a765a16f6c8446 100644
--- a/app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js
+++ b/app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js
@@ -10,14 +10,22 @@ define([
'Magento_Checkout/js/model/payment/method-list',
'Magento_Checkout/js/model/payment/renderer-list',
'uiLayout',
- 'Magento_Checkout/js/model/checkout-data-resolver'
-], function (_, ko, utils, Component, paymentMethods, rendererList, layout, checkoutDataResolver) {
+ 'Magento_Checkout/js/model/checkout-data-resolver',
+ 'mage/translate',
+ 'uiRegistry'
+], function (_, ko, utils, Component, paymentMethods, rendererList, layout, checkoutDataResolver, $t, registry) {
'use strict';
return Component.extend({
defaults: {
template: 'Magento_Checkout/payment-methods/list',
- visible: paymentMethods().length > 0
+ visible: paymentMethods().length > 0,
+ configDefaultGroup: {
+ name: 'methodGroup',
+ component: 'Magento_Checkout/js/model/payment/method-group'
+ },
+ paymentGroupsList: [],
+ defaultGroupTitle: $t('Select a new payment method')
},
/**
@@ -26,7 +34,7 @@ define([
* @returns {Component} Chainable.
*/
initialize: function () {
- this._super().initChildren();
+ this._super().initDefaulGroup().initChildren();
paymentMethods.subscribe(
function (changes) {
checkoutDataResolver.resolvePaymentMethod();
@@ -47,6 +55,27 @@ define([
return this;
},
+ /** @inheritdoc */
+ initObservable: function () {
+ this._super().
+ observe(['paymentGroupsList']);
+
+ return this;
+ },
+
+ /**
+ * Creates default group
+ *
+ * @returns {Component} Chainable.
+ */
+ initDefaulGroup: function() {
+ layout([
+ this.configDefaultGroup
+ ]);
+
+ return this;
+ },
+
/**
* Create renders for child payment methods.
*
@@ -77,7 +106,7 @@ define([
rendererTemplate = {
parent: '${ $.$data.parentName }',
name: '${ $.$data.name }',
- displayArea: 'payment-method-items',
+ displayArea: payment.displayArea,
component: payment.component
};
rendererComponent = utils.template(rendererTemplate, templateData);
@@ -95,49 +124,105 @@ define([
* @param {Object} paymentMethodData
*/
createRenderer: function (paymentMethodData) {
- var isRendererForMethod = false;
+ var isRendererForMethod = false,
+ currentGroup;
+
+ registry.get(this.configDefaultGroup.name, function (defaultGroup) {
+ _.each(rendererList(), function (renderer) {
- _.find(rendererList(), function (renderer) {
+ if (renderer.hasOwnProperty('typeComparatorCallback') &&
+ typeof renderer.typeComparatorCallback == 'function'
+ ) {
+ isRendererForMethod = renderer.typeComparatorCallback(renderer.type, paymentMethodData.method);
+ } else {
+ isRendererForMethod = renderer.type === paymentMethodData.method;
+ }
- if (renderer.hasOwnProperty('typeComparatorCallback') &&
- typeof renderer.typeComparatorCallback == 'function'
- ) {
- isRendererForMethod = renderer.typeComparatorCallback(renderer.type, paymentMethodData.method);
- } else {
- isRendererForMethod = renderer.type === paymentMethodData.method;
- }
+ if (isRendererForMethod) {
+ currentGroup = renderer.group ? renderer.group : defaultGroup;
- if (isRendererForMethod) {
- layout(
- [
+ this.collectPaymentGroups(currentGroup);
+
+ layout([
this.createComponent(
{
config: renderer.config,
component: renderer.component,
name: renderer.type,
method: paymentMethodData.method,
- item: paymentMethodData
+ item: paymentMethodData,
+ displayArea: currentGroup.displayArea
}
- )
- ]
- );
- }
+ )]);
+ }
+ }.bind(this));
}.bind(this));
},
+ /**
+ * Collects unique groups of available payment methods
+ *
+ * @param {Object} group
+ */
+ collectPaymentGroups: function (group) {
+ var groupsList = this.paymentGroupsList(),
+ isGroupExists = _.some(groupsList, function (existsGroup) {
+ return existsGroup.alias === group.alias;
+ });
+
+ if (!isGroupExists) {
+ groupsList.push(group);
+ groupsList = _.sortBy(groupsList, function (existsGroup) {
+ return existsGroup.sortOrder;
+ });
+ this.paymentGroupsList(groupsList);
+ }
+ },
+
+ /**
+ * Returns payment group title
+ *
+ * @param {Object} group
+ * @returns {String}
+ */
+ getGroupTitle: function (group) {
+ var title = group().title;
+
+ if (group().isDefault() && this.paymentGroupsList().length > 1) {
+ title = this.defaultGroupTitle;
+ }
+
+ return title + ':';
+ },
+
+ /**
+ * Checks if at least one payment method available
+ *
+ * @returns {String}
+ */
+ isPaymentMethodsAvailable: function () {
+ return _.some(this.paymentGroupsList(), function (group) {
+ return this.getRegion(group.displayArea)().length;
+ }, this);
+ },
+
/**
* Remove view renderer.
*
* @param {String} paymentMethodCode
*/
removeRenderer: function (paymentMethodCode) {
- var items = this.getRegion('payment-method-items');
+ var items;
+
+ _.each(this.paymentGroupsList(), function (group) {
+ items = this.getRegion(group.displayArea);
- _.find(items(), function (value) {
- if (value.item.method.indexOf(paymentMethodCode) === 0) {
- value.disposeSubscriptions();
- value.destroy();
- }
+ _.find(items(), function (value) {
+ if (value.item.method.indexOf(paymentMethodCode) === 0) {
+ value.disposeSubscriptions();
+ value.destroy();
+ }
+ });
}, this);
}
});
diff --git a/app/code/Magento/Checkout/view/frontend/web/template/payment-methods/list.html b/app/code/Magento/Checkout/view/frontend/web/template/payment-methods/list.html
index 66769f37386d6402c3d71d19f7f08ef6d88ca8b7..f6c41c62eeca62fcd89e0d85715863806d95e9f8 100644
--- a/app/code/Magento/Checkout/view/frontend/web/template/payment-methods/list.html
+++ b/app/code/Magento/Checkout/view/frontend/web/template/payment-methods/list.html
@@ -4,9 +4,19 @@
* See COPYING.txt for license details.
*/
-->
-<div class="items payment-methods">
- <!-- ko foreach: { data: getRegion('payment-method-items'), as: 'element'} -->
- <!-- ko template: element.getTemplate() --><!-- /ko -->
- <!-- /ko -->
+<div if="isPaymentMethodsAvailable()"
+ class="items payment-methods">
+ <div repeat="foreach: paymentGroupsList, item: '$group'"
+ class="payment-group">
+ <div if="getRegion($group().displayArea)().length"
+ translate="getGroupTitle($group)"
+ class="step-title"
+ data-role="title">
+ </div>
+ <each args="data: getRegion($group().displayArea), as: 'method'" render=""/>
+ </div>
+</div>
+<div ifnot="isPaymentMethodsAvailable()"
+ class="no-payments-block"
+ translate="'No Payment Methods'">
</div>
-<!-- ko ifnot: getRegion('payment-method-items')().length > 0 --><div class="no-payments-block"><!-- ko i18n: 'No Payment Methods'--><!-- /ko --></div><!-- /ko -->
diff --git a/app/code/Magento/Checkout/view/frontend/web/template/payment.html b/app/code/Magento/Checkout/view/frontend/web/template/payment.html
index 292ece611e6b664f04c4ee78a8ace01d03fb49f5..46467839da3fb08eb994d61b0d2aaa48912ada87 100644
--- a/app/code/Magento/Checkout/view/frontend/web/template/payment.html
+++ b/app/code/Magento/Checkout/view/frontend/web/template/payment.html
@@ -5,7 +5,6 @@
*/
-->
<li id="payment" role="presentation" class="checkout-payment-method" data-bind="fadeVisible: isVisible">
- <div class="step-title" data-bind="i18n: title" data-role="title"></div>
<div id="checkout-step-payment"
class="step-content"
data-role="content"
diff --git a/app/code/Magento/Ui/view/base/web/js/lib/core/collection.js b/app/code/Magento/Ui/view/base/web/js/lib/core/collection.js
index 49133721369c85dba954788626875d1a13c26a1e..493b8c78f0cdfbf56f43c8775ab2fcd0edf5ff64 100644
--- a/app/code/Magento/Ui/view/base/web/js/lib/core/collection.js
+++ b/app/code/Magento/Ui/view/base/web/js/lib/core/collection.js
@@ -268,6 +268,14 @@ define([
_.each(grouped, this.updateRegion, this);
+ _.each(this.regions, function (items) {
+ var hasObsoleteComponents = items().length && !_.intersection(_elems, items()).length;
+
+ if (hasObsoleteComponents) {
+ items.removeAll();
+ }
+ });
+
this.elems(_elems);
return this;
diff --git a/app/code/Magento/Vault/view/frontend/web/js/view/payment/vault.js b/app/code/Magento/Vault/view/frontend/web/js/view/payment/vault.js
index 05d56e305f23eea9473c5c3da2d0a130ca2c42a5..3015755191d37d3159158a9505a5b3c9bf5c7bf8 100644
--- a/app/code/Magento/Vault/view/frontend/web/js/view/payment/vault.js
+++ b/app/code/Magento/Vault/view/frontend/web/js/view/payment/vault.js
@@ -4,25 +4,32 @@
*/
/*browser:true*/
/*global define*/
-define(
- [
- 'underscore',
- 'uiComponent',
- 'Magento_Checkout/js/model/payment/renderer-list'
- ],
- function (
- _,
- Component,
- rendererList
- ) {
- 'use strict';
+define([
+ 'underscore',
+ 'uiComponent',
+ 'Magento_Checkout/js/model/payment/renderer-list',
+ 'uiLayout',
+ 'uiRegistry'
+], function (_, Component, rendererList, layout, registry) {
+ 'use strict';
+ var vaultGroupName = 'vaultGroup';
+
+ layout([{
+ name: vaultGroupName,
+ component: 'Magento_Checkout/js/model/payment/method-group',
+ alias: 'vault',
+ sortOrder: 10
+ }]);
+
+ registry.get(vaultGroupName, function (vaultGroup) {
_.each(window.checkoutConfig.payment.vault, function (config, index) {
rendererList.push(
{
type: index,
config: config.config,
component: config.component,
+ group: vaultGroup,
/**
* Custom payment method types comparator
@@ -37,10 +44,10 @@ define(
}
);
});
+ });
- /**
- * Add view logic here if needed
- */
- return Component.extend({});
- }
-);
+ /**
+ * Add view logic here if needed
+ */
+ return Component.extend({});
+});
diff --git a/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_payments.less b/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_payments.less
index 7731595870f061c990acc5cc36d68980e8ba590f..453a9ce958f4d3f2716c015c99ff72a525b3838f 100644
--- a/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_payments.less
+++ b/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_payments.less
@@ -24,6 +24,7 @@
& when (@media-common = true) {
.checkout-payment-method {
.step-title {
+ border-bottom: 0;
margin-bottom: 0;
}
@@ -39,6 +40,12 @@
display: block;
}
}
+
+ & + .payment-method {
+ .payment-method-title {
+ .lib-css(border-top, @checkout-payment-method-title__border);
+ }
+ }
}
.payment-method-content {
@@ -54,7 +61,6 @@
}
.payment-method-title {
- .lib-css(border-top, @checkout-payment-method-title__border);
.lib-css(padding, @checkout-payment-method-title__padding 0);
margin: 0;
@@ -80,6 +86,14 @@
}
}
+ .payment-group {
+ & + .payment-group {
+ .step-title {
+ margin: @indent__base 0 0;
+ }
+ }
+ }
+
.field-select-billing,
.billing-address-form {
.lib-css(max-width, @checkout-billing-address-form__max-width);
diff --git a/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_payments.less b/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_payments.less
index 85b2e96e6ea4add2316a572f0ce4ad16bfe073d2..a8c84ef51a92af04d403be3eb522610693a9a823 100644
--- a/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_payments.less
+++ b/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_payments.less
@@ -24,6 +24,7 @@
& when (@media-common = true) {
.checkout-payment-method {
.step-title {
+ border-bottom: 0;
margin-bottom: 0;
}
@@ -39,6 +40,12 @@
display: block;
}
}
+
+ & + .payment-method {
+ .payment-method-title {
+ .lib-css(border-top, @checkout-payment-method-title__border);
+ }
+ }
}
.payment-method-content {
@@ -54,7 +61,6 @@
}
.payment-method-title {
- .lib-css(border-top, @checkout-payment-method-title__border);
.lib-css(padding, @checkout-payment-method-title__padding 0);
margin: 0;
@@ -80,6 +86,14 @@
}
}
+ .payment-group {
+ & + .payment-group {
+ .step-title {
+ margin: @indent__base 0 0;
+ }
+ }
+ }
+
.field-select-billing,
.billing-address-form {
.lib-css(max-width, @checkout-billing-address-form__max-width);