Magento2: how to call login popup on place order button and remove from proceed to checkout button

Question

Magento2.3.1: How to call login popup on place order button and remove from proceed to checkout button.

I am trying to get solution with these files:-

vendor/magento/module-customer/view/frontend/web/js/model/authentication-popup.js

createPopUp: function (element) {
            var options = {
                'type': 'popup',
                'modalClass': 'popup-authentication',
                'focus': '[name=username]',
                'responsive': true,
                'innerScroll': true,
                'trigger': '.proceed-to-checkout',  // I want to add place order button class here
                'buttons': []
            };

            this.modalWindow = element;
            modal(options, $(this.modalWindow));
        },

But I am not able to find which class should I use and how login popup works with .proceed-to-checkout class, even I have changed this and test.

If there is any other approach please let me know and if I am on the right direction what place order class should I use here.

Answer 1

Take a look on js files:

https://github.com/magento/magento2/blob/2.3/app/code/Magento/Checkout/view/frontend/web/js/sidebar.js#L77

https://github.com/magento/magento2/blob/2.3/app/code/Magento/Checkout/view/frontend/web/js/proceed-to-checkout.js#L20

Here you can see how Magento show login pop while guest checkout disable.

You have to add 'Magento_Customer/js/model/authentication-popup' to placeorder button js file and call the authenticationPopup.showModal();.

Create a Js Mixin on 'Magento_Checkout/js/action/place-order' and 'Magento_Checkout/js/action/set-payment-information' on and called authenticationPopup.showModal();

See https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_mixins.html#mixin-examples-in-magento