Add PageSource to sdk payment options

bold-commerce · Dec 16, 2024 · 88b3f7c · 88b3f7c
1 parent 6ba7ada
commit 88b3f7c
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 35 deletions.
diff --git a/Observer/ShortcutButtons/AddExpressPayButtonsObserver.php b/Observer/ShortcutButtons/AddExpressPayButtonsObserver.php
@@ -43,15 +43,30 @@ public function execute(Observer $observer): void
         /** @var ExpressPayShortcutButtons $expressPayShortcutButtons */
         $expressPayShortcutButtons = $layout->createBlock(
             ExpressPayShortcutButtons::class,
-            ExpressPayShortcutButtons::BLOCK_ALIAS,
+            '',
             [
                 'data' => [
                     'express_pay_view_model' => $this->expressPayFactory->create(),
-                    'render_page_source' => PaymentBoosterConfigProvider::PAGE_SOURCE_MINICART
+                    'render_page_source' => $this->getPageType($observer->getEvent())
                 ]
             ]
         );
 
         $container->addShortcut($expressPayShortcutButtons);
     }
+
+    /**
+     * @param $event
+     * @return string
+     */
+    private function getPageType($event) : string
+    {
+        if ($event->getIsCatalogProduct()) {
+            return PaymentBoosterConfigProvider::PAGE_SOURCE_PRODUCT;
+        }
+        if ($event->getIsShoppingCart()) {
+            return PaymentBoosterConfigProvider::PAGE_SOURCE_CART;
+        }
+        return PaymentBoosterConfigProvider::PAGE_SOURCE_MINICART;
+    }
 }
diff --git a/UI/PaymentBoosterConfigProvider.php b/UI/PaymentBoosterConfigProvider.php
@@ -20,9 +20,10 @@
 class PaymentBoosterConfigProvider implements ConfigProviderInterface
 {
 
-    public const PAGE_SOURCE_PRODUCT = 'product';
+    public const PAGE_SOURCE_PRODUCT = 'product-details';
     public const PAGE_SOURCE_CART = 'cart';
     public const PAGE_SOURCE_MINICART = 'mini-cart';
+    public const PAGE_SOURCE_CHECKOUT = 'checkout';
 
     /**
      * @var CheckoutData
@@ -113,7 +114,7 @@ public function getConfig(): array
             if ($epsGatewayId === null) {
                 $errorMsgs[] = '$epsGatewayId is null.';
             }
-            
+
             $this->logger->critical('Error in PaymentBoosterConfigProvider->getConfig(): '.implode(', ', $errorMsgs));
             return [];
         }

diff --git a/view/frontend/layout/checkout_index_index.xml b/view/frontend/layout/checkout_index_index.xml
@@ -13,6 +13,9 @@
                                         <item name="bold-express-pay" xsi:type="array">
                                             <item name="component" xsi:type="string">Bold_CheckoutPaymentBooster/js/view/bold-express-pay</item>
                                             <item name="sortOrder" xsi:type="string">0</item>
+                                            <item name="config" xsi:type="array">
+                                                <item name="render_page_source" xsi:type="const">Bold\CheckoutPaymentBooster\UI\PaymentBoosterConfigProvider::PAGE_SOURCE_CHECKOUT</item>
+                                            </item>
                                         </item>
                                         <item name="shipping-step" xsi:type="array">
                                             <item name="children" xsi:type="array">

diff --git a/view/frontend/templates/express-pay.phtml b/view/frontend/templates/express-pay.phtml
@@ -11,14 +11,15 @@ use Bold\CheckoutPaymentBooster\ViewModel\ExpressPay;
 $expressPayViewModel = $block->getData('express_pay_view_model');
 $pageSource = $block->getData('render_page_source');
 $isEnabled = $expressPayViewModel->isEnabled($pageSource);
+$containerId = 'express-pay-buttons-' . $pageSource;
 
 if (!$isEnabled):
     return;
 endif;
 ?>
 
 <div id="express-pay-container" data-testid="express-pay-container">
-    <div id="express-pay-buttons"></div>
+    <div id="<?= $block->escapeHtml($containerId) ?>"></div>
 </div>
 
 <script>
@@ -34,7 +35,8 @@ endif;
 {
     "#express-pay-container": {
         "Bold_CheckoutPaymentBooster/js/express-pay-storefront": {
-            "pageSource": "<?= $block->escapeJs($pageSource) ?>"
+            "pageSource": "<?= $block->escapeHtml($pageSource) ?>",
+            "containerId": "<?= $block->escapeHtml($containerId) ?>"
         }
     }
 }

diff --git a/view/frontend/web/js/express-pay-storefront.js b/view/frontend/web/js/express-pay-storefront.js
@@ -1,41 +1,21 @@
 define([
     'uiComponent',
-    'ko',
     'underscore',
     'Bold_CheckoutPaymentBooster/js/model/spi',
     'Magento_Customer/js/customer-data'
 ], function (
     Component,
-    ko,
     _,
     spi,
     customerData
 ) {
     'use strict'
 
     return Component.extend({
-        defaults: {
-            _pageSource: ko.observable('')
-        },
-
-        initialize: async function (config) {
+        initialize: async function () {
             this._super();
 
-            this._pageSource(config.pageSource);
             this._initConfig();
-            this._setVisibility();
-        },
-
-        /**
-         * Set the visibility of the component.
-         * @private
-         */
-        _setVisibility: function () {
-            const ppcpExpressContainer = document.getElementById('ppcp-express-payment');
-            if (ppcpExpressContainer) {
-                ppcpExpressContainer.remove();
-            }
-
             this._renderExpressPayments();
         },
 
@@ -46,11 +26,9 @@ define([
         },
 
         _renderExpressPayments: async function () {
-            const containerId = 'express-pay-buttons';
-
             let boldPaymentsInstance;
             try {
-                boldPaymentsInstance = await spi.getPaymentsClient(this._pageSource());
+                boldPaymentsInstance = await spi.getPaymentsClient(this.pageSource);
             } catch (error) {
                 console.error('Could not instantiate Bold Payments Client.', error);
                 return;
@@ -61,10 +39,11 @@ define([
                 shopName: window.checkoutConfig.bold?.shopName ?? '',
                 isPhoneRequired: window.checkoutConfig.bold?.isPhoneRequired ?? true,
                 fastlane: window.checkoutConfig.bold?.fastlane,
-                allowedCountryCodes: allowedCountries
+                allowedCountryCodes: allowedCountries,
+                pageSource: this.pageSource
             };
 
-            boldPaymentsInstance.renderWalletPayments(containerId, walletOptions);
+            boldPaymentsInstance.renderWalletPayments(this.containerId, walletOptions);
         },
 
         _getAllowedCountryCodes: function () {

diff --git a/view/frontend/web/js/view/bold-express-pay.js b/view/frontend/web/js/view/bold-express-pay.js
@@ -1,13 +1,11 @@
 define([
     'uiComponent',
     'ko',
-    'jquery',
     'underscore',
     'Bold_CheckoutPaymentBooster/js/model/spi',
 ], function (
     Component,
     ko,
-    $,
     _,
     spi,
 ) {
@@ -72,7 +70,8 @@ define([
                         shopName: window.checkoutConfig.bold?.shopName ?? '',
                         isPhoneRequired: window.checkoutConfig.bold?.isPhoneRequired ?? true,
                         fastlane: window.checkoutConfig.bold?.fastlane,
-                        allowedCountryCodes: allowedCountries
+                        allowedCountryCodes: allowedCountries,
+                        pageSource: this.render_page_source
                     };
 
                     boldPaymentsInstance.renderWalletPayments(containerId, walletOptions);