Skip to content

Commit 1e6e9cc

Browse files
krissyhiserotekrissyhiserote
committed
MC-41657: Reflect changed price: Checkout
1 parent 52804d7 commit 1e6e9cc

File tree

8 files changed

+242
-140
lines changed

8 files changed

+242
-140
lines changed

‎app/code/Magento/Paypal/Block/PayLater/Banner.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ public function getJsLayout()
7171
$jsLayout = [
7272
'components' => [
7373
'payLater' => [
74-
'component' =>
75-
$this->jsLayout['components']['payLater']['component'] ?? 'Magento_Paypal/js/view/paylater',
74+
'component' => $this->jsLayout['components']['payLater']['component']
75+
?? 'Magento_Paypal/js/view/paylater-default',
7676
'config' => [
7777
'sdkUrl' => $this->getPayPalSdkUrl(),
7878
]

‎app/code/Magento/Paypal/Model/PayLaterCheckoutConfigProvider.php

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@
1212
*/
1313
class PayLaterCheckoutConfigProvider implements ConfigProviderInterface
1414
{
15+
/**
16+
* Checkout payment page placement
17+
*/
18+
private const PLACEMENT = 'payment';
19+
1520
/**
1621
* @var PayLaterConfig
1722
*/
@@ -38,7 +43,7 @@ public function __construct(PayLaterConfig $payLaterConfig, SdkUrl $sdkUrl)
3843
public function getConfig()
3944
{
4045
$attributes = $this->payLaterConfig->getStyleConfig(PayLaterConfig::CHECKOUT_PAYMENT_PLACEMENT);
41-
$attributes['data-pp-placement'] = PayLaterConfig::CHECKOUT_PAYMENT_PLACEMENT;
46+
$attributes['data-pp-placement'] = self::PLACEMENT;
4247

4348
$config['payment']['paypalPayLater']['enabled'] = $this->payLaterConfig->isEnabled(
4449
PayLaterConfig::CHECKOUT_PAYMENT_PLACEMENT

‎app/code/Magento/Paypal/view/frontend/layout/catalog_product_view.xml

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,13 @@
1919
<arguments>
2020
<argument name="placement" xsi:type="string">product</argument>
2121
<argument name="position" xsi:type="string">header</argument>
22+
<argument name="jsLayout" xsi:type="array">
23+
<item name="components" xsi:type="array">
24+
<item name="payLater" xsi:type="array">
25+
<item name="component" xsi:type="string">Magento_Paypal/js/view/paylater-product</item>
26+
</item>
27+
</item>
28+
</argument>
2229
</arguments>
2330
</block>
2431
</referenceContainer>
@@ -34,6 +41,13 @@
3441
<arguments>
3542
<argument name="placement" xsi:type="string">product</argument>
3643
<argument name="position" xsi:type="string">near_pp_button</argument>
44+
<argument name="jsLayout" xsi:type="array">
45+
<item name="components" xsi:type="array">
46+
<item name="payLater" xsi:type="array">
47+
<item name="component" xsi:type="string">Magento_Paypal/js/view/paylater-product</item>
48+
</item>
49+
</item>
50+
</argument>
3751
</arguments>
3852
</block>
3953
</referenceContainer>
@@ -43,6 +57,13 @@
4357
<arguments>
4458
<argument name="placement" xsi:type="string">product</argument>
4559
<argument name="position" xsi:type="string">near_pp_button</argument>
60+
<argument name="jsLayout" xsi:type="array">
61+
<item name="components" xsi:type="array">
62+
<item name="payLater" xsi:type="array">
63+
<item name="component" xsi:type="string">Magento_Paypal/js/view/paylater-product</item>
64+
</item>
65+
</item>
66+
</argument>
4667
</arguments>
4768
</block>
4869
</referenceBlock>

‎app/code/Magento/Paypal/view/frontend/layout/checkout_index_index.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<item name="before-place-order" xsi:type="array">
2929
<item name="children" xsi:type="array">
3030
<item name="paylater-place-order" xsi:type="array">
31-
<item name="component" xsi:type="string">Magento_Paypal/js/view/paylater</item>
31+
<item name="component" xsi:type="string">Magento_Paypal/js/view/paylater-checkout</item>
3232
<item name="sortOrder" xsi:type="string">100</item>
3333
<item name="displayArea" xsi:type="string">before-place-order</item>
3434
</item>

‎app/code/Magento/Paypal/view/frontend/web/js/view/paylater-checkout.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
define([
7+
'jquery',
8+
'ko',
9+
'Magento_Paypal/js/view/paylater-default',
10+
'Magento_Checkout/js/model/quote',
11+
'domReady!'
12+
], function (
13+
$,
14+
ko,
15+
Component,
16+
quote
17+
) {
18+
'use strict';
19+
20+
const payLaterEnabled = window.checkoutConfig.payment.paypalPayLater.enabled;
21+
const payLaterConfig = window.checkoutConfig.payment.paypalPayLater.config;
22+
23+
return Component.extend({
24+
defaults: {
25+
template: 'Magento_Paypal/paylater',
26+
sdkUrl: payLaterEnabled ? payLaterConfig.sdkUrl : '',
27+
attributes: payLaterConfig.attributes,
28+
amount: ko.observable(),
29+
style: 'margin-bottom: 10px;',
30+
},
31+
32+
/**
33+
* Initialize
34+
*
35+
* @returns {*}
36+
*/
37+
initialize: function () {
38+
this._super();
39+
this.updateAmount();
40+
41+
return this;
42+
},
43+
44+
/**
45+
* Update amount
46+
*/
47+
updateAmount: function () {
48+
const amount = this.amount;
49+
quote.totals.subscribe(function (newValue) {
50+
amount(newValue['base_grand_total']);
51+
});
52+
}
53+
});
54+
});

‎app/code/Magento/Paypal/view/frontend/web/js/view/paylater-default.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
define([
7+
'jquery',
8+
'ko',
9+
'uiElement',
10+
'Magento_Paypal/js/in-context/paypal-sdk',
11+
'domReady!'
12+
], function (
13+
$,
14+
ko,
15+
Component,
16+
paypalSdk
17+
) {
18+
'use strict';
19+
20+
return Component.extend({
21+
22+
defaults: {
23+
template: 'Magento_Paypal/paylater',
24+
sdkUrl: '',
25+
attributes: {},
26+
amount: ko.observable(),
27+
style: '',
28+
},
29+
30+
/**
31+
* Initialize
32+
*
33+
* @returns {*}
34+
*/
35+
initialize: function () {
36+
this._super();
37+
38+
if ( this.sdkUrl !== '') {
39+
this.loadPayPalSdk(this.sdkUrl);
40+
}
41+
42+
return this;
43+
},
44+
45+
/**
46+
* Get attribute value from configuration
47+
*
48+
* @param {String} attributeName
49+
* @returns {*|null}
50+
*/
51+
getAttribute: function (attributeName) {
52+
return typeof this.attributes[attributeName] !== 'undefined' ?
53+
this.attributes[attributeName] : null;
54+
},
55+
56+
/**
57+
* Load PP SDK with preconfigured options
58+
*
59+
* @param {String} sdkUrl
60+
*/
61+
loadPayPalSdk: function (sdkUrl) {
62+
paypalSdk(sdkUrl);
63+
}
64+
});
65+
});

‎app/code/Magento/Paypal/view/frontend/web/js/view/paylater-product.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
define([
7+
'jquery',
8+
'ko',
9+
'Magento_Paypal/js/view/paylater-default',
10+
'priceBox',
11+
'domReady!'
12+
], function (
13+
$,
14+
ko,
15+
Component,
16+
) {
17+
'use strict';
18+
19+
return Component.extend({
20+
21+
defaults: {
22+
priceBoxSelector: '.price-box',
23+
qtyFieldSelector: '#product_addtocart_form [name="qty"]',
24+
},
25+
qty: 1,
26+
price: 0,
27+
28+
/**
29+
* Initialize
30+
*
31+
* @returns {*}
32+
*/
33+
initialize: function () {
34+
var priceBox, qty;
35+
36+
this._super();
37+
38+
priceBox = $(this.priceBoxSelector);
39+
40+
if (priceBox.priceBox('option') &&
41+
priceBox.priceBox('option').prices
42+
) {
43+
this.price = priceBox.priceBox('option').prices.finalPrice.amount;
44+
priceBox.on('priceUpdated', this._onPriceChange.bind(this));
45+
}
46+
47+
qty = $(this.qtyFieldSelector);
48+
qty.on('change', this._onQtyChange.bind(this));
49+
50+
this._updateAmount();
51+
52+
return this;
53+
},
54+
55+
/**
56+
* Handle changed product qty
57+
*
58+
* @param {jQuery.Event} event
59+
* @private
60+
*/
61+
_onQtyChange: function (event) {
62+
var qty = parseFloat($(event.target).val());
63+
64+
this.qty = !isNaN(qty) && qty ? qty : 1;
65+
this._updateAmount();
66+
},
67+
68+
/**
69+
* Handle product price change
70+
*
71+
* @param {jQuery.Event} event
72+
* @param {Object} data
73+
* @private
74+
*/
75+
_onPriceChange: function (event, data) {
76+
this.price = data.finalPrice.amount;
77+
this._updateAmount();
78+
},
79+
80+
/**
81+
* Calculate and update amount
82+
*
83+
* @private
84+
*/
85+
_updateAmount: function () {
86+
var amount = this.price * this.qty;
87+
88+
if (amount !== 0) {
89+
this.amount(amount);
90+
}
91+
}
92+
});
93+
});

0 commit comments

Comments
 (0)