diff --git a/app/code/Magento/Checkout/view/frontend/web/js/model/payment-service.js b/app/code/Magento/Checkout/view/frontend/web/js/model/payment-service.js
index 950b7a28bb1799089b0ed25488f4a805f2434b06..77841ad3b0632b0d155c7618039ea15fdc5776e9 100644
--- a/app/code/Magento/Checkout/view/frontend/web/js/model/payment-service.js
+++ b/app/code/Magento/Checkout/view/frontend/web/js/model/payment-service.js
@@ -2,87 +2,72 @@
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-/*jshint browser:true jquery:true*/
-/*global alert*/
define(
[
- 'ko',
- 'jquery',
+ 'underscore',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/payment/method-list',
'Magento_Checkout/js/action/select-payment-method'
],
- function (ko, $, quote, methodList, selectPaymentMethod) {
+ function (_, quote, methodList, selectPaymentMethod) {
'use strict';
+ var freeMethodCode = 'free';
+
return {
- availablePaymentMethods: ko.observableArray([]),
- selectedPaymentInfo: ko.observableArray([]),
isFreeAvailable: false,
- setPaymentMethods: function(methods) {
+ /**
+ * Populate the list of payment methods
+ * @param {Array} methods
+ */
+ setPaymentMethods: function (methods) {
var self = this,
- freeMethod = null;
- $.each(methods, function (key, method) {
- if (method['code'] == 'free') {
- self.isFreeAvailable = true;
- freeMethod = method;
- }
+ freeMethod,
+ filteredMethods,
+ methodIsAvailable;
+
+ freeMethod = _.find(methods, function (method) {
+ return method.method === freeMethodCode;
});
+ this.isFreeAvailable = freeMethod ? true : false;
if (self.isFreeAvailable && freeMethod && quote.totals().grand_total <= 0) {
methods.splice(0, methods.length, freeMethod);
+ selectPaymentMethod(freeMethod);
}
+ filteredMethods = _.without(methods, freeMethod);
- if (methods.length == 1) {
- selectPaymentMethod(methods[0])
- } else if(quote.paymentMethod()) {
- var methodIsAvailable = methods.some(function (item) {
- return (item.code == quote.paymentMethod().method);
+ if (filteredMethods.length === 1) {
+ selectPaymentMethod(filteredMethods[0]);
+ } else if (quote.paymentMethod()) {
+ methodIsAvailable = methods.some(function (item) {
+ return item.method === quote.paymentMethod().method;
});
//Unset selected payment method if not available
if (!methodIsAvailable) {
selectPaymentMethod(null);
}
}
-
- $.each(methods, function (key, method) {
- if (method['code'] == 'free') {
- this.isFreeAvailable = true;
- }
- });
methodList(methods);
},
+ /**
+ * Get the list of available payment methods.
+ * @returns {Array}
+ */
getAvailablePaymentMethods: function () {
var methods = [],
self = this;
- $.each(methodList(), function (key, method) {
- if (self.isFreeMethodActive() && (
- quote.totals().grand_total <= 0 && method['code'] == 'free'
- || quote.totals().grand_total > 0 && method['code'] != 'free'
- ) || !self.isFreeMethodActive()
+ _.each(methodList(), function (method) {
+ if (self.isFreeAvailable && (
+ quote.totals().grand_total <= 0 && method.method === freeMethodCode ||
+ quote.totals().grand_total > 0 && method.method !== freeMethodCode
+ ) || !self.isFreeAvailable
) {
methods.push(method);
}
});
+
return methods;
- },
- isFreeMethodActive: function () {
- return this.isFreeAvailable;
- },
- setSelectedPaymentInfo: function(data) {
- this.selectedPaymentInfo(data);
- },
- getSelectedPaymentInfo: function () {
- return this.selectedPaymentInfo();
- },
- getTitleByCode: function(code) {
- var methodTitle = '';
- $.each(this.getAvailablePaymentMethods(), function (key, entity) {
- if (entity['code'] == code) {
- methodTitle = entity['title'];
- }
- });
- return methodTitle;
}
- }
+ };
}
);
diff --git a/app/code/Magento/Checkout/view/frontend/web/js/model/payment/method-converter.js b/app/code/Magento/Checkout/view/frontend/web/js/model/payment/method-converter.js
new file mode 100644
index 0000000000000000000000000000000000000000..794f7d9a38b01fc043414adb8fdb2714f0aeac42
--- /dev/null
+++ b/app/code/Magento/Checkout/view/frontend/web/js/model/payment/method-converter.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define(
+ [
+ 'underscore'
+ ],
+ function (_) {
+ 'use strict';
+
+ return function (methods) {
+ _.each(methods, function(method) {
+ if (method.hasOwnProperty('code')) {
+ method.method = method.code;
+ delete method.code;
+ }
+ });
+
+ return methods;
+ };
+ }
+);
diff --git a/app/code/Magento/Checkout/view/frontend/web/js/model/shipping-save-processor/default.js b/app/code/Magento/Checkout/view/frontend/web/js/model/shipping-save-processor/default.js
index ad188f843bcfc8919b8aa1c698e83ef414857df3..7233d429dc0691907a04b174452db883dbdc24df 100644
--- a/app/code/Magento/Checkout/view/frontend/web/js/model/shipping-save-processor/default.js
+++ b/app/code/Magento/Checkout/view/frontend/web/js/model/shipping-save-processor/default.js
@@ -10,10 +10,12 @@ define(
'Magento_Checkout/js/model/resource-url-manager',
'mage/storage',
'Magento_Checkout/js/model/payment-service',
+ 'Magento_Checkout/js/model/payment/method-converter',
'Magento_Ui/js/model/messageList'
],
- function (ko, quote, resourceUrlManager, storage, paymentService, messageList) {
+ function (ko, quote, resourceUrlManager, storage, paymentService, methodConverter, messageList) {
'use strict';
+
return {
saveShippingInformation: function() {
var payload = {
@@ -30,7 +32,7 @@ define(
).done(
function (response) {
quote.setTotals(response.totals);
- paymentService.setPaymentMethods(response.payment_methods);
+ paymentService.setPaymentMethods(methodConverter(response.payment_methods));
}
).fail(
function (response) {
@@ -39,6 +41,6 @@ define(
}
);
}
- }
+ };
}
);
diff --git a/app/code/Magento/Checkout/view/frontend/web/js/view/payment.js b/app/code/Magento/Checkout/view/frontend/web/js/view/payment.js
index 0894335ad143e67cb2e3013212e045e4008dbd80..cde7e59dad6483cd2f2c95c55b1764403f80f035 100644
--- a/app/code/Magento/Checkout/view/frontend/web/js/view/payment.js
+++ b/app/code/Magento/Checkout/view/frontend/web/js/view/payment.js
@@ -10,12 +10,14 @@ define(
'ko',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/step-navigator',
- 'Magento_Checkout/js/model/payment-service'
+ 'Magento_Checkout/js/model/payment-service',
+ 'Magento_Checkout/js/model/payment/method-converter'
],
- function (Component, ko, quote, stepNavigator, paymentService) {
+ function (Component, ko, quote, stepNavigator, paymentService, methodConverter) {
+ 'use strict';
/** Set payment methods to collection */
- paymentService.setPaymentMethods(window.checkoutConfig.paymentMethods);
+ paymentService.setPaymentMethods(methodConverter(window.checkoutConfig.paymentMethods));
return Component.extend({
defaults: {
@@ -34,6 +36,6 @@ define(
getFormKey: function() {
return window.checkoutConfig.formKey;
}
- })
+ });
}
);
diff --git a/app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js b/app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js
index 7eb2b8085423da69f7ea820e4a2a5c119f2000df..7fa9e10b69a781d1f9afc86bc79ae7cc39c388d7 100644
--- a/app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js
+++ b/app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js
@@ -10,9 +10,10 @@ define(
'Magento_Checkout/js/action/place-order',
'Magento_Checkout/js/action/select-payment-method',
'Magento_Checkout/js/model/quote',
- 'Magento_Customer/js/model/customer'
+ 'Magento_Customer/js/model/customer',
+ 'Magento_Checkout/js/model/payment-service'
],
- function (ko, $, Component, placeOrderAction, selectPaymentMethodAction, quote, customer) {
+ function (ko, $, Component, placeOrderAction, selectPaymentMethodAction, quote, customer, paymentService) {
'use strict';
return Component.extend({
redirectAfterPlaceOrder: true,
@@ -55,26 +56,20 @@ define(
return true;
},
- isEnabled: ko.computed(function () {
- return quote.paymentMethod()
- ? quote.paymentMethod().method
- : null;
- }
- ),
-
isChecked: ko.computed(function () {
- return quote.paymentMethod()
- ? quote.paymentMethod().method
- : null;
- }
- ),
+ return quote.paymentMethod() ? quote.paymentMethod().method : null;
+ }),
+
+ isRadioButtonVisible: ko.computed(function () {
+ return paymentService.getAvailablePaymentMethods().length !== 1;
+ }),
/**
* Get payment method data
*/
getData: function() {
return {
- "method": this.item.code,
+ "method": this.item.method,
"po_number": null,
"cc_owner": null,
"cc_number": null,
@@ -96,7 +91,7 @@ define(
* Get payment method code.
*/
getCode: function () {
- return this.item.code;
+ return this.item.method;
},
validate: function () {
@@ -104,7 +99,7 @@ define(
},
getBillingAddressFormName: function() {
- return 'billing-address-form-' + this.item.code;
+ return 'billing-address-form-' + this.item.method;
},
disposeSubscriptions: function () {
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 870dddde5c79e2449ea2331b8922922fba23405c..78faf6ba156658108f4820978fba27190f2cc9a3 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
@@ -32,7 +32,7 @@ define([
if (change.status === 'added') {
this.createRenderer(change.value);
} else if (change.status === 'deleted') {
- this.removeRenderer(change.value.code);
+ this.removeRenderer(change.value.method);
}
}, this);
}, this, 'arrayChange');
@@ -60,7 +60,7 @@ define([
* @param {Object} paymentMethodData
*/
createRenderer: function (paymentMethodData) {
- var renderer = this.getRendererByType(paymentMethodData.code),
+ var renderer = this.getRendererByType(paymentMethodData.method),
rendererTemplate,
rendererComponent,
templateData;
@@ -68,7 +68,7 @@ define([
if (renderer) {
templateData = {
parentName: this.name,
- name: paymentMethodData.code
+ name: paymentMethodData.method
};
rendererTemplate = {
parent: '${ $.$data.parentName }',
@@ -109,7 +109,7 @@ define([
removeRenderer: function (paymentMethodCode) {
var items = this.getRegion('payment-method-items');
_.find(items(), function (value) {
- if (value.item.code === paymentMethodCode) {
+ if (value.item.method === paymentMethodCode) {
value.disposeSubscriptions();
this.removeChild(value);
}
diff --git a/app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/method-renderer/banktransfer-method.js b/app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/method-renderer/banktransfer-method.js
index f89996cd2507439c28de09b27ae5ae4fce22a9ee..e139bbf2fa4b1d5148317167bc8d4a1ae2392bc9 100644
--- a/app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/method-renderer/banktransfer-method.js
+++ b/app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/method-renderer/banktransfer-method.js
@@ -19,7 +19,7 @@ define(
* @returns {String}
*/
getInstructions: function () {
- return window.checkoutConfig.payment.instructions[this.item.code];
+ return window.checkoutConfig.payment.instructions[this.item.method];
}
});
}
diff --git a/app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/method-renderer/cashondelivery-method.js b/app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/method-renderer/cashondelivery-method.js
index e397136a75b62cb945291e5e339f1faeb5cacc11..9dea96883c3235d087e106bc20b728f9fc8315da 100644
--- a/app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/method-renderer/cashondelivery-method.js
+++ b/app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/method-renderer/cashondelivery-method.js
@@ -17,7 +17,7 @@ define(
/** Returns payment method instructions */
getInstructions: function() {
- return window.checkoutConfig.payment.instructions[this.item.code];
+ return window.checkoutConfig.payment.instructions[this.item.method];
}
});
}
diff --git a/app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/method-renderer/purchaseorder-method.js b/app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/method-renderer/purchaseorder-method.js
index c98ca8585e39e0795d91f76d48c563e3f141da16..a5d09084f5cb8c5fefdb256cfdf94079f2b9e9e6 100644
--- a/app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/method-renderer/purchaseorder-method.js
+++ b/app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/method-renderer/purchaseorder-method.js
@@ -24,7 +24,7 @@ define(
},
getData: function () {
return {
- "method": this.item.code,
+ "method": this.item.method,
'po_number': this.purchaseOrderNumber(),
"cc_owner": null,
"cc_number": null,
diff --git a/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/banktransfer.html b/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/banktransfer.html
index f67a723a6db4942671a759fc7744095a80a43c0e..806b76da03c6abb864dd2b41b1672b42ec30565f 100644
--- a/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/banktransfer.html
+++ b/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/banktransfer.html
@@ -4,13 +4,13 @@
* See COPYING.txt for license details.
*/
-->
-<div class="payment-method" data-bind="css: {'_active': (item.code == isEnabled())}">
+<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice">
<input type="radio"
name="payment[method]"
class="radio"
- data-bind="attr: {'id': item.code}, value: item.code, checked: isChecked, click: selectPaymentMethod" />
- <label data-bind="attr: {'for': item.code}" class="label"><span data-bind="text: getTitle()"></span></label>
+ data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod" />
+ <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
</div>
<div class="payment-method-content">
@@ -29,7 +29,7 @@
<div class="primary">
<button class="action primary checkout"
type="submit"
- data-bind="click: placeOrder, attr: {'title': $t('Place Order')}, enable: (item.code == isEnabled())"
+ data-bind="click: placeOrder, attr: {'title': $t('Place Order')}, enable: (getCode() == isChecked())"
disabled>
<span data-bind="text: $t('Place Order')"></span>
</button>
diff --git a/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/cashondelivery.html b/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/cashondelivery.html
index 2e94ec7a399f4d248916c2073a7676d63acd8cc9..13f9b4822b9eeca7253355849b6e6e5cbb04e10c 100644
--- a/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/cashondelivery.html
+++ b/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/cashondelivery.html
@@ -4,13 +4,13 @@
* See COPYING.txt for license details.
*/
-->
-<div class="payment-method" data-bind="css: {'_active': (item.code == isEnabled())}">
+<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice">
<input type="radio"
name="payment[method]"
class="radio"
- data-bind="attr: {'id': item.code}, value: item.code, checked: isChecked, click: selectPaymentMethod"/>
- <label data-bind="attr: {'for': item.code}" class="label"><span data-bind="text: getTitle()"></span></label>
+ data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod"/>
+ <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
</div>
<div class="payment-method-content">
@@ -29,7 +29,7 @@
<div class="primary">
<button class="action primary checkout"
type="submit"
- data-bind="click: placeOrder, attr: {title: $t('Place Order')}, enable: (item.code == isEnabled())"
+ data-bind="click: placeOrder, attr: {title: $t('Place Order')}, enable: (getCode() == isChecked())"
disabled>
<span data-bind="text: $t('Place Order')"></span>
</button>
diff --git a/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/checkmo.html b/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/checkmo.html
index 1b03849155e0157e0e2e56a4cc408f232ca2a0b1..58f85845434792ab778b177461ac493a743d649d 100644
--- a/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/checkmo.html
+++ b/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/checkmo.html
@@ -4,13 +4,13 @@
* See COPYING.txt for license details.
*/
-->
-<div class="payment-method" data-bind="css: {'_active': (item.code == isEnabled())}">
+<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice">
<input type="radio"
name="payment[method]"
class="radio"
- data-bind="attr: {'id': item.code}, value: item.code, checked: isChecked, click: selectPaymentMethod"/>
- <label data-bind="attr: {'for': item.code}" class="label"><span data-bind="text: getTitle()"></span></label>
+ data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
+ <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
</div>
<div class="payment-method-content">
<div class="payment-method-billing-address">
@@ -41,7 +41,7 @@
<div class="primary">
<button class="action primary checkout"
type="submit"
- data-bind="click: placeOrder, attr: {title: $t('Place Order')}, enable: (item.code == isEnabled())"
+ data-bind="click: placeOrder, attr: {title: $t('Place Order')}, enable: (getCode() == isChecked())"
disabled>
<span data-bind="text: $t('Place Order')"></span>
</button>
diff --git a/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/purchaseorder-form.html b/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/purchaseorder-form.html
index f79444d796e76e79dd393b9bb61cca7f23d71f52..3b7a36932bba97bc874eb34f63c55d2aada41c18 100644
--- a/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/purchaseorder-form.html
+++ b/app/code/Magento/OfflinePayments/view/frontend/web/template/payment/purchaseorder-form.html
@@ -4,15 +4,15 @@
* See COPYING.txt for license details.
*/
-->
-<div class="payment-method" data-bind="css: {'_active': (item.code == isEnabled())}">
+<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
<form id="purchaseorder-form" class="form form-purchase-order">
<div class="payment-method-title field choice">
<input type="radio"
name="payment[method]"
class="radio"
- data-bind="attr: {'id': item.code}, value: item.code, checked: isChecked, click: selectPaymentMethod"/>
- <label data-bind="attr: {'for': item.code}" class="label">
+ data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod"/>
+ <label data-bind="attr: {'for': getCode()}" class="label">
<span data-bind="text: getTitle()"></span>
</label>
</div>
@@ -49,7 +49,7 @@
<div class="primary">
<button class="action primary checkout"
type="submit"
- data-bind="click: placeOrder, attr: {title: $t('Place Order')}, enable: (item.code == isEnabled())"
+ data-bind="click: placeOrder, attr: {title: $t('Place Order')}, enable: (getCode() == isChecked())"
data-role="review-save">
<span data-bind="text: $t('Place Order')"></span>
</button>
diff --git a/app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-form.js b/app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-form.js
index 8a6170c79c95d37065f1b8ad4c87982910c224bc..5c1abc1e3c75b1721a889badee6e364009bd448f 100644
--- a/app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-form.js
+++ b/app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-form.js
@@ -89,7 +89,7 @@ define(
},
getData: function() {
return {
- 'method': this.item.code,
+ 'method': this.item.method,
'cc_type': this.creditCardType(),
'cc_exp_year': this.creditCardExpYear(),
'cc_exp_month': this.creditCardExpMonth(),
diff --git a/app/code/Magento/Payment/view/frontend/web/template/payment/free.html b/app/code/Magento/Payment/view/frontend/web/template/payment/free.html
index 8c1cccb0118735d5fd931605d24f090f06153b40..fb33eafd3cfbb59e8fffe9983692fe3d2fad1050 100644
--- a/app/code/Magento/Payment/view/frontend/web/template/payment/free.html
+++ b/app/code/Magento/Payment/view/frontend/web/template/payment/free.html
@@ -4,13 +4,13 @@
* See COPYING.txt for license details.
*/
-->
-<div class="payment-method" data-bind="css: {'_active': (item.code == isEnabled())}, visible: isAvailable()">
+<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}, visible: isAvailable()">
<div class="payment-method-title field choice">
<input type="radio"
name="payment[method]"
class="radio"
- data-bind="attr: {'id': item.code}, value: item.code, checked: isChecked, click: selectPaymentMethod"/>
- <label data-bind="attr: {'for': item.code}" class="label"><span data-bind="text: getTitle()"></span></label>
+ data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
+ <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
</div>
<div class="payment-method-content">
<div class="payment-method-billing-address">