Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PW-7651] - Apple Pay & Google Pay currency and the currency symbol issue #20

Merged
merged 3 commits into from
Dec 20, 2022
Merged

[PW-7651] - Apple Pay & Google Pay currency and the currency symbol issue #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ebaaa04
[PW-7651] - Use currency and grand total of the quote
candemiralp Dec 16, 2022
bc91904
[PW-7651] - Use currency and grand total of the quote
candemiralp Dec 16, 2022
fa54262
[PW-7651] - Update currency configuration
candemiralp Dec 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 24 additions & 6 deletions view/frontend/web/js/applepay/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ define([
'Adyen_ExpressCheckout/js/helpers/validatePdpForm',
'Adyen_ExpressCheckout/js/model/config',
'Adyen_ExpressCheckout/js/model/countries',
'Adyen_ExpressCheckout/js/model/totals'
'Adyen_ExpressCheckout/js/model/totals',
'Adyen_ExpressCheckout/js/model/currency'
],
function (
Component,
Expand Down Expand Up @@ -56,7 +57,8 @@ define([
validatePdpForm,
configModel,
countriesModel,
totalsModel
totalsModel,
currencyModel
) {
'use strict';

Expand Down Expand Up @@ -87,6 +89,7 @@ define([

setExpressMethods(response);
totalsModel().setTotal(response.totals.grand_total);
currencyModel().setCurrency(response.totals.quote_currency_code)

const $priceBox = getPdpPriceBox();
const pdpForm = getPdpForm(element);
Expand Down Expand Up @@ -142,6 +145,11 @@ define([
});
const applePayConfiguration = this.getApplePayConfiguration(applePaymentMethod, element);

if (this.isProductView) {
applePayConfiguration.currencyCode = currencyModel().getCurrency();
applePayConfiguration.amount.currency = currencyModel().getCurrency();
}

this.applePayComponent = adyenCheckoutComponent.create(
'applepay',
applePayConfiguration
Expand Down Expand Up @@ -186,10 +194,20 @@ define([
const config = configModel().getConfig();
const countryCode = config.countryCode === 'UK' ? 'GB' : config.countryCode;
const pdpForm = getPdpForm(element);
let currency;

if (this.isProductView) {
currency = currencyModel().getCurrency();
} else {
const cartData = customerData.get('cart');
const adyenMethods = cartData()['adyen_payment_methods'];
const paymentMethodExtraDetails = adyenMethods.paymentMethodsExtraDetails[applePaymentMethod.type];
currency = paymentMethodExtraDetails.configuration.amount.currency;
}

return {
countryCode: countryCode,
currencyCode: config.currency,
currencyCode: currency,
totalPriceLabel: $t('Grand Total'),
configuration: {
domainName: window.location.hostname,
Expand All @@ -200,7 +218,7 @@ define([
value: this.isProductView
? formatAmount(totalsModel().getTotal() * 100)
: formatAmount(getCartSubtotal() * 100),
currency: config.currency
currency: currency
},
supportedNetworks: getSupportedNetworks(),
merchantCapabilities: ['supports3DS'],
Expand Down Expand Up @@ -285,7 +303,7 @@ define([
applePayShippingContactUpdate.newShippingMethods = shippingMethods;
applePayShippingContactUpdate.newTotal = {
label: $t('Grand Total'),
amount: response.base_grand_total.toString()
amount: response.grand_total.toString()
};
applePayShippingContactUpdate.newLineItems = [
{
Expand Down Expand Up @@ -332,7 +350,7 @@ define([
applePayShippingMethodUpdate.newTotal = {
type: 'final',
label: $t('Grand Total'),
amount: response.base_grand_total.toString()
amount: response.grand_total.toString()
};
applePayShippingMethodUpdate.newLineItems = [
{
Expand Down
47 changes: 30 additions & 17 deletions view/frontend/web/js/googlepay/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ define([
'Adyen_ExpressCheckout/js/helpers/validatePdpForm',
'Adyen_ExpressCheckout/js/model/config',
'Adyen_ExpressCheckout/js/model/countries',
'Adyen_ExpressCheckout/js/model/totals'
'Adyen_ExpressCheckout/js/model/totals',
'Adyen_ExpressCheckout/js/model/currency'
],
function (
Component,
Expand Down Expand Up @@ -54,7 +55,8 @@ define([
validatePdpForm,
configModel,
countriesModel,
totalsModel
totalsModel,
currencyModel
) {
'use strict';

Expand Down Expand Up @@ -111,6 +113,7 @@ define([

setExpressMethods(response);
totalsModel().setTotal(response.totals.grand_total);
currencyModel().setCurrency(response.totals.quote_currency_code)

const $priceBox = getPdpPriceBox();
const pdpForm = getPdpForm(element);
Expand Down Expand Up @@ -192,6 +195,16 @@ define([
const googlePayStyles = getGooglePayStyles();
const config = configModel().getConfig();
const pdpForm = getPdpForm(element);
let currency;

if (this.isProductView) {
currency = currencyModel().getCurrency();
} else {
const cartData = customerData.get('cart');
const adyenMethods = cartData()['adyen_payment_methods'];
const paymentMethodExtraDetails = adyenMethods.paymentMethodsExtraDetails[googlePaymentMethod.type];
currency = paymentMethodExtraDetails.configuration.amount.currency;
}

return {
showPayButton: true,
Expand All @@ -215,7 +228,7 @@ define([
totalPrice: this.isProductView
? formatAmount(totalsModel().getTotal())
: formatAmount(getCartSubtotal()),
currencyCode: config.currency
currencyCode: currency
},
paymentDataCallbacks: {
onPaymentDataChanged: this.onPaymentDataChanged.bind(this)
Expand Down Expand Up @@ -254,18 +267,6 @@ define([
return;
}

const shippingMethods = response.map((shippingMethod) => {
const label = shippingMethod.price_incl_tax
? formatCurrency(shippingMethod.price_incl_tax) + ' - ' + shippingMethod.method_title
: shippingMethod.method_title;

return {
id: shippingMethod.method_code,
label: label,
description: shippingMethod.carrier_title
};
});

this.shippingMethods = response;
const selectedShipping = data.shippingOptionData.id === 'shipping_option_unselected'
? response[0]
Expand All @@ -287,6 +288,18 @@ define([

setTotalsInfo(totalsPayload, this.isProductView)
.done(function (totals) {
const shippingMethods = response.map((shippingMethod) => {
const label = shippingMethod.price_incl_tax
? formatCurrency(shippingMethod.price_incl_tax, totals.quote_currency_code) + ' - ' + shippingMethod.method_title
: shippingMethod.method_title;

return {
id: shippingMethod.method_code,
label: label,
description: shippingMethod.carrier_title
};
});

const paymentDataRequestUpdate = {
newShippingOptionParameters: {
defaultSelectedOptionId: selectedShipping.method_code,
Expand All @@ -301,9 +314,9 @@ define([
status: 'FINAL'
}
],
currencyCode: totals.base_currency_code,
currencyCode: totals.quote_currency_code,
totalPriceStatus: 'FINAL',
totalPrice: totals.base_grand_total.toString(),
totalPrice: totals.grand_total.toString(),
totalPriceLabel: 'Total',
countryCode: configModel().getConfig().countryCode
}
Expand Down
4 changes: 2 additions & 2 deletions view/frontend/web/js/helpers/formatCurrency.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
define(['Adyen_ExpressCheckout/js/model/config'], function (configModel) {
'use strict';

return function (amount) {
return function (amount, currency) {
const config = configModel().getConfig();
const locale = config.locale.replace('_', '-');
const options = {
style: 'currency',
currency: config.currency
currency: currency
};

return new Intl.NumberFormat(locale, options).format(amount);
Expand Down
19 changes: 19 additions & 0 deletions view/frontend/web/js/model/currency.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
define([
'uiComponent',
'ko'
], function (Component, ko) {
'use strict';
return Component.extend({
defaults: {
currency: ko.observable(0).extend({notify: 'always'})
},

getCurrency: function () {
return this.currency();
},

setCurrency: function (currency) {
return this.currency(currency);
}
});
});