Skip to content

A
Adyen Magento2

We will be off on April 7th (Monday) for public holiday in our country

Commit 0cfc5323 authored by attilak's avatar attilak
Browse files
Options

Fix rerendering the payment methods when shipping address changes

parent 2b4ac52d
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 58 deletions
view/frontend/web/js/model/adyen-payment-service.js
View file @ 0cfc5323
......@@ -4,6 +4,7 @@
*/
define(
[
'ko',
'underscore',
'Magento_Checkout/js/model/quote',
'Magento_Customer/js/model/customer',
......@@ -11,9 +12,10 @@ define(
'mage/storage',
'Adyen_Payment/js/bundle',
],
function (_, quote, customer, urlBuilder, storage, adyenComponent) {
function (ko, _, quote, customer, urlBuilder, storage, adyenComponent) {
'use strict';
var checkoutComponent = {};
var paymentMethods = ko.observable({})
return {
/**
* Retrieve the list of available payment methods from the server
......@@ -73,10 +75,16 @@ define(
originKey: originKey,
environment: environment,
paymentMethodsResponse: paymentMethodsResponse,
showPayButton: false
});
paymentMethods(paymentMethodsResponse.paymentMethods);
},
getCheckoutComponent: function() {
return checkoutComponent;
},
getPaymentMethodsObservable: function() {
return paymentMethods;
}
};
}
......
view/frontend/web/js/view/payment/adyen-methods.js
View file @ 0cfc5323
......@@ -26,13 +26,15 @@ define(
'uiComponent',
'Magento_Checkout/js/model/payment/renderer-list',
'Adyen_Payment/js/model/adyen-payment-service',
'Adyen_Payment/js/model/adyen-configuration'
'Adyen_Payment/js/model/adyen-configuration',
'Magento_Checkout/js/model/quote'
],
function (
Component,
rendererList,
adyenPaymentService,
adyenConfiguration
adyenConfiguration,
quote
) {
'use strict';
rendererList.push(
......@@ -70,47 +72,48 @@ define(
initialize: function () {
this._super();
adyenPaymentService.retrieveAvailablePaymentMethods().done(function (response) {
var responseJson = JSON.parse(response);
var paymentMethodsResponse = responseJson.paymentMethodsResponse;
// TODO check if this is still required or if can be outsourced for the generic component, or checkout can create a ratepay component
/*if (!!window.checkoutConfig.payment.adyenHpp) {
if (JSON.stringify(paymentMethods).indexOf("ratepay") > -1) {
var ratePayId = window.checkoutConfig.payment.adyenHpp.ratePayId;
var dfValueRatePay = self.getRatePayDeviceIdentToken();
window.di = {
t: dfValueRatePay.replace(':', ''),
v: ratePayId,
l: 'Checkout'
};
// Load Ratepay script
var ratepayScriptTag = document.createElement('script');
ratepayScriptTag.src = "//d.ratepay.com/" + ratePayId + "/di.js";
ratepayScriptTag.type = "text/javascript";
document.body.appendChild(ratepayScriptTag);
}
}*/
// Initialises adyen checkout main component with default configuration
adyenPaymentService.initCheckoutComponent(
paymentMethodsResponse,
adyenConfiguration.getOriginKey(),
adyenConfiguration.getLocale(),
adyenConfiguration.getCheckoutEnvironment()
);
})
if (this.isGooglePayEnabled()) {
var googlepayscript = document.createElement('script');
googlepayscript.src = "https://pay.google.com/gp/p/js/pay.js";
googlepayscript.type = "text/javascript";
document.head.appendChild(googlepayscript);
}
quote.shippingAddress.subscribe(function() {
adyenPaymentService.retrieveAvailablePaymentMethods().done(function (response) {
var responseJson = JSON.parse(response);
var paymentMethodsResponse = responseJson.paymentMethodsResponse;
// TODO check if this is still required or if can be outsourced for the generic component, or checkout can create a ratepay component
/*if (!!window.checkoutConfig.payment.adyenHpp) {
if (JSON.stringify(paymentMethods).indexOf("ratepay") > -1) {
var ratePayId = window.checkoutConfig.payment.adyenHpp.ratePayId;
var dfValueRatePay = self.getRatePayDeviceIdentToken();
window.di = {
t: dfValueRatePay.replace(':', ''),
v: ratePayId,
l: 'Checkout'
};
// Load Ratepay script
var ratepayScriptTag = document.createElement('script');
ratepayScriptTag.src = "//d.ratepay.com/" + ratePayId + "/di.js";
ratepayScriptTag.type = "text/javascript";
document.body.appendChild(ratepayScriptTag);
}
}*/
// Initialises adyen checkout main component with default configuration
adyenPaymentService.initCheckoutComponent(
paymentMethodsResponse,
adyenConfiguration.getOriginKey(),
adyenConfiguration.getLocale(),
adyenConfiguration.getCheckoutEnvironment()
);
})
})
},
isGooglePayEnabled: function() {
return window.checkoutConfig.payment.adyenGooglePay.active;
......
view/frontend/web/js/view/payment/method-renderer/adyen-hpp-method.js
View file @ 0cfc5323
......@@ -60,7 +60,6 @@ define(
var brandCode = ko.observable(null);
var paymentMethod = ko.observable(null);
var messageComponents;
var shippingAddressCountryCode = quote.shippingAddress().countryId;
var unsupportedPaymentMethods = ['scheme', 'boleto', 'bcmc_mobile_QR', 'wechatpay', /^bcmc$/, "applepay", "paywithgoogle"];
/**
* Shareble adyen checkout component
......@@ -78,7 +77,8 @@ define(
initObservable: function () {
this._super()
.observe([
'brandCode'
'brandCode',
'paymentListObservable'
]);
return this;
}, initialize: function () {
......@@ -86,7 +86,7 @@ define(
var self = this;
this._super();
fullScreenLoader.startLoader();
var paymentMethodsObservable = adyenPaymentService.getPaymentMethodsObservable();
/**
* Create sherable checkout component
......@@ -94,8 +94,21 @@ define(
*/
self.checkoutComponent = adyenPaymentService.getCheckoutComponent();
var paymentMethods = self.checkoutComponent.paymentMethodsResponse.paymentMethods;
paymentMethodsObservable.subscribe(function() {
console.log('test');
self.checkoutComponent = adyenPaymentService.getCheckoutComponent();
self.setAdyenHppPaymentMethods();
});
},
getAdyenHppPaymentMethods: function () {
return this.paymentListObservable;
},
setAdyenHppPaymentMethods: function () {
var self = this;
fullScreenLoader.startLoader();
var paymentMethods = self.checkoutComponent.paymentMethodsResponse.paymentMethods;
// create component needs to be in initialize method
var messageComponents = {};
......@@ -119,20 +132,6 @@ define(
self.messageComponents = messageComponents;
fullScreenLoader.stopLoader();
},
getAdyenHppPaymentMethods: function () {
var self = this;
var currentShippingAddressCountryCode = quote.shippingAddress().countryId;
// retrieve new payment methods if country code changed
if (shippingAddressCountryCode != currentShippingAddressCountryCode) {
fullScreenLoader.startLoader();
adyenPaymentService.retrieveAvailablePaymentMethods();
shippingAddressCountryCode = currentShippingAddressCountryCode;
fullScreenLoader.stopLoader();
}
// filter unnecessary field details from checkout component
// TODO refactor
self.checkoutComponent.paymentMethodsResponse.paymentMethods.forEach(function (paymentMethod, index) {
......@@ -147,6 +146,8 @@ define(
// Get paymentMethod list with filtered details
var paymentMethods = self.checkoutComponent.paymentMethodsResponse.paymentMethods;
var paymentListObservable = ko.observable([]);
// Iterate through the payment methods and render them
var paymentList = _.reduce(paymentMethods, function (accumulator, value) {
if (!self.isPaymentMethodSupported(value.type)) {
......@@ -227,9 +228,9 @@ define(
return accumulator;
}, []);
return paymentList;
self.paymentListObservable(paymentList);
fullScreenLoader.stopLoader();
},
// TODO prefill gender in components where it is available
getGenderTypes: function () {
return _.map(window.checkoutConfig.payment.adyenHpp.genderTypes, function (value, key) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment