MC-41652: Reflect changed price: Product

Author: xmav

app/code/Magento/Catalog/view/base/web/js/price-box.js

@@ -131,6 +131,7 @@ define([
                 }, this);
             }
 
+            this.element.trigger('priceUpdated', this.cache.displayPrices);
             this.element.trigger('reloadPrice');
         },
 

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

@@ -78,7 +78,7 @@ private function getPayPalSdkUrl()
      */
     private function getConfig()
     {
-        return [];
+        return ['data-pp-style-logo-position' => 'right'];
     }
 
     /**

app/code/Magento/Paypal/etc/csp_whitelist.xml

@@ -25,6 +25,11 @@
                 <value id="paypal_analytics" type="host">t.paypal.com</value>
             </values>
         </policy>
+        <policy id="connect-src">
+            <values>
+                <value id="www_sandbox_paypal" type="host">www.sandbox.paypal.com</value>
+            </values>
+        </policy>
         <policy id="frame-src">
             <values>
                 <value id="www_paypal" type="host">www.paypal.com</value>

app/code/Magento/Paypal/view/frontend/web/js/view/paylater.js

@@ -4,10 +4,13 @@
  */
 
 define([
+    'jquery',
     'ko',
     'uiElement',
-    'Magento_Paypal/js/in-context/paypal-sdk'
+    'Magento_Paypal/js/in-context/paypal-sdk',
+    'domReady!'
 ], function (
+    $,
     ko,
     Component,
     paypalSdk
@@ -19,24 +22,78 @@ define([
         defaults: {
             template: 'Magento_Paypal/paylater',
             sdkUrl: '',
-            attributes: {
-                'data-pp-amount': '',
-                'data-pp-style-logo-position': 'right'
-            }
+            priceBoxSelector: '.price-box',
+            qtyFieldSelector: '#product_addtocart_form [name="qty"]',
+            displayAmount: true,
+            attributes: {}
         },
+        amount: ko.observable(),
+        qty: 1,
+        price: 0,
 
         /**
          * Initialize
          *
          * @returns {*}
          */
         initialize: function () {
+            var priceBox, qty;
+
             this._super();
             this.loadPayPalSdk(this.sdkUrl);
 
+            if (this.displayAmount) {
+                priceBox = $(this.priceBoxSelector);
+                this.price = priceBox.priceBox('option').priceConfig.prices.finalPrice.amount;
+                priceBox.on('priceUpdated', this._onPriceChange.bind(this));
+
+                qty = $(this.qtyFieldSelector);
+                qty.on('change', this._onQtyChange.bind(this));
+
+                this._updateAmount();
+            }
+
             return this;
         },
 
+        /**
+         * Handle changed product qty
+         *
+         * @param {jQuery.Event} event
+         * @private
+         */
+        _onQtyChange: function (event) {
+            var qty = parseFloat($(event.target).val());
+
+            this.qty = !isNaN(qty) && qty ? qty : 1;
+            this._updateAmount();
+        },
+
+        /**
+         * Handle product price change
+         *
+         * @param {jQuery.Event} event
+         * @param {Object} data
+         * @private
+         */
+        _onPriceChange: function (event, data) {
+            this.price = data.finalPrice.amount;
+            this._updateAmount();
+        },
+
+        /**
+         * Calculate and update amount
+         *
+         * @private
+         */
+        _updateAmount: function () {
+            var amount = this.price * this.qty;
+
+            if (amount !== 0) {
+                this.amount(amount);
+            }
+        },
+
         /**
          * Get attribute value from configuration
          *

app/code/Magento/Paypal/view/frontend/web/template/paylater.html

@@ -5,7 +5,7 @@
  */
 -->
 <div data-pp-message data-bind="attr: {
-        'data-pp-amount': getAttribute('data-pp-amount'),
+        'data-pp-amount': amount,
         'data-pp-placement': getAttribute('data-pp-placement'),
         'data-pp-style-layout': getAttribute('data-pp-style-layout'),
         'data-pp-style-logo-type': getAttribute('data-pp-style-logo-type'),
@@ -14,5 +14,5 @@
         'data-pp-style-text-size': getAttribute('data-pp-style-text-size'),
         'data-pp-style-color': getAttribute('data-pp-style-color'),
         'data-pp-style-ratio': getAttribute('data-pp-style-ratio'),
-    }"></div>
+    }" ></div>