M2P-50 Add option to show bolt management button after the specific d…

…om element (#813) * Add option to show bolt management button after the specific dom element * Add tests * Fix test
BoltApp · Jul 22, 2020 · 237f1f3 · 237f1f3
1 parent 50a7e5f
commit 237f1f3
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 6 deletions.
diff --git a/Block/Js.php b/Block/Js.php
@@ -251,6 +251,8 @@ public function getSettings()
             'is_instant_checkout_button' => $this->getIsInstantCheckoutButton(),
             'cdn_url' => $this->configHelper->getCdnUrl(),
             'always_present_checkout' => $this->enableAlwaysPresentCheckoutButton(),
+            'account_url' => $this->getAccountJsUrl(),
+            'order_management_selector' => $this->getOrderManagementSelector(),
         ]);
     }
 
@@ -462,6 +464,18 @@ public function isOrderManagementEnabled()
             $this->featureSwitches->isOrderManagementEnabled();
     }
 
+    /**
+     * Return true if Order Management is enabled
+     * @return bool
+     */
+    public function getOrderManagementSelector()
+    {
+        if (!$this->configHelper->isOrderManagementEnabled() || !$this->featureSwitches->isOrderManagementEnabled()) {
+            return '';
+        }
+        return $this->configHelper->getOrderManagementSelector();
+    }
+
     /**
      * Return false if block wasn't shown yet
      * Need to provide using block only once

diff --git a/Helper/Config.php b/Helper/Config.php
@@ -127,6 +127,11 @@ class Config extends AbstractHelper
      */
     const XML_PATH_PRODUCT_ORDER_MANAGEMENT = 'payment/boltpay/order_management';
 
+    /**
+     * Enable Bolt order management CSS selector
+     */
+    const XML_PATH_PRODUCT_ORDER_MANAGEMENT_SELECTOR = 'payment/boltpay/order_management_selector';
+
 
     /**
      * Prefetch shipping
@@ -737,6 +742,22 @@ public function isOrderManagementEnabled($store = null)
         );
     }
 
+    /**
+     * Get Order management CSS selector from config
+     *
+     * @param int|string|Store $store
+     *
+     * @return  string
+     */
+    public function getOrderManagementSelector($store = null)
+    {
+        return $this->getScopeConfig()->getValue(
+            self::XML_PATH_PRODUCT_ORDER_MANAGEMENT_SELECTOR,
+            ScopeInterface::SCOPE_STORE,
+            $store
+        );
+    }
+
     /**
      * Get Prefetch Shipping and Tax config
      *

diff --git a/Test/Unit/Block/JsTest.php b/Test/Unit/Block/JsTest.php
@@ -33,7 +33,7 @@
 class JsTest extends \PHPUnit\Framework\TestCase
 {
     // Number of settings in method getSettings()
-    const SETTINGS_NUMBER = 23;
+    const SETTINGS_NUMBER = 25;
     const STORE_ID = 1;
     const CONFIG_API_KEY = 'test_api_key';
     const CONFIG_SIGNING_SECRET = 'test_signing_secret';
@@ -108,7 +108,8 @@ protected function setUp()
             'getReplaceSelectors', 'getGlobalCSS', 'getPrefetchShipping', 'getQuoteIsVirtual',
             'getTotalsChangeSelectors', 'getAdditionalCheckoutButtonClass', 'getAdditionalConfigString', 'getIsPreAuth',
             'shouldTrackCheckoutFunnel','isPaymentOnlyCheckoutEnabled', 'isIPRestricted', 'getPageBlacklist',
-            'getMinicartSupport', 'getIPWhitelistArray', 'getApiKey', 'getSigningSecret', 'getButtonColor', 'isAlwaysPresentCheckoutEnabled'
+            'getMinicartSupport', 'getIPWhitelistArray', 'getApiKey', 'getSigningSecret', 'getButtonColor', 'isAlwaysPresentCheckoutEnabled',
+            'getOrderManagementSelector','isOrderManagementEnabled',
         ];
 
         $this->configHelper = $this->getMockBuilder(HelperConfig::class)
@@ -367,6 +368,8 @@ public function getSettings()
         $this->assertArrayHasKey('default_error_message', $array, $message . 'default_error_message');
         $this->assertArrayHasKey('button_css_styles', $array, $message . 'button_css_styles');
         $this->assertArrayHasKey('always_present_checkout', $array, $message . 'always_present_checkout');
+        $this->assertArrayHasKey('account_url', $array, $message . 'account_url');
+        $this->assertArrayHasKey('order_management_selector', $array, $message . 'order_management_selector');
     }
 
     /**

diff --git a/Test/Unit/Helper/ConfigTest.php b/Test/Unit/Helper/ConfigTest.php
@@ -611,6 +611,7 @@ public function getValueMethodsProvider()
             ['getOnClose', BoltConfig::XML_PATH_TRACK_CLOSE],
             ['getMinimumOrderAmount', BoltConfig::XML_PATH_MINIMUM_ORDER_AMOUNT],
             ['getOnShippingOptionsComplete', BoltConfig::XML_PATH_TRACK_SHIPPING_OPTIONS_COMPLETE],
+            ['getOrderManagementSelector', BoltConfig::XML_PATH_PRODUCT_ORDER_MANAGEMENT_SELECTOR],
         ];
     }
 

diff --git a/etc/adminhtml/system.xml b/etc/adminhtml/system.xml
@@ -95,7 +95,13 @@
                         <config_path>payment/boltpay/order_management</config_path>
                         <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                     </field>
-                    <field id="always_present_checkout" translate="label" type="select" sortOrder="83" showInDefault="1" showInWebsite="1" showInStore="0">
+                    <field id="order_management_selector" translate="label" type="text" sortOrder="83" showInDefault="1" showInWebsite="1" showInStore="1">
+                        <label>CSS selector for Bolt order management button</label>
+                        <depends><field id="order_management">1</field></depends>
+                        <comment>Leave empty for show button in header.</comment>
+                        <config_path>payment/boltpay/order_management_selector</config_path>
+                    </field>
+                    <field id="always_present_checkout" translate="label" type="select" sortOrder="84" showInDefault="1" showInWebsite="1" showInStore="0">
                         <label>(BETA) Enable Always Present Checkout Button</label>
                         <config_path>payment/boltpay/always_present_checkout</config_path>
                         <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>

diff --git a/view/frontend/templates/boltaccount.phtml b/view/frontend/templates/boltaccount.phtml
@@ -20,11 +20,18 @@
  *
  * @var $block \Bolt\Boltpay\Block\Js
  */
-if ($block->shouldDisableBoltCheckout()) { return;
+if ($block->shouldDisableBoltCheckout()) {
+    return;
 }
-if (!$block->isOrderManagementEnabled()) { return;
+if (!$block->isOrderManagementEnabled()) {
+    return;
 }
-if ($block->isBlockAlreadyShown('account')) { return;
+// If CSS selector is set we want to insert button via fronend after this selector.
+if ($block->getOrderManagementSelector()) {
+    return;
+}
+if ($block->isBlockAlreadyShown('account')) {
+    return;
 }
 $accountJsUrl = $block->getAccountJsUrl();
 $checkoutKey = $block->getCheckoutKey();

diff --git a/view/frontend/templates/js/replacejs.phtml b/view/frontend/templates/js/replacejs.phtml
@@ -2274,6 +2274,41 @@ if (!$block->isSaveCartInSections()) { ?>
             invalidateBoltCart();
         });
 
+        // insert Bolt order managenent button into DOM
+        if (settings.order_management_selector) {
+            var insertAccountScript = function () {
+                var scriptTag = document.getElementById('bolt-account');
+                if (scriptTag) {
+                    return;
+                }
+                var publishableKey = getCheckoutKey();
+                scriptTag = document.createElement('script');
+                scriptTag.setAttribute('type', 'text/javascript');
+                scriptTag.setAttribute('async', '');
+                scriptTag.setAttribute('src', settings.account_url);
+                scriptTag.setAttribute('id', 'bolt-account');
+                scriptTag.setAttribute('data-publishable-key', publishableKey);
+                document.head.appendChild(scriptTag);
+            }
+            var insertManagementButtonDivAfterElement = function(element) {
+                var orderMagagementButton = document.createElement('div');
+                orderMagagementButton.setAttribute('class', 'bolt-account-login');
+                element.parentNode.insertBefore(orderMagagementButton, element.nextSibling);
+                insertAccountScript();
+            }
+            var setupOrderManagementReplacement = function() {
+                element = document.querySelector(settings.order_management_selector);
+                if (element) {
+                    insertManagementButtonDivAfterElement(element);
+                } else {
+                    onElementReady(settings.order_management_selector, function(element) {
+                        insertManagementButtonDivAfterElement(element);
+                    });
+                }
+            }
+            setupOrderManagementReplacement();
+        };
+
         ////////////////////////////////////////////////////
         // Initially configures BoltCheckout.
         // Required for setting check callback which either