Merge branch 'trunk' into PCP-160-compatibility-with-woo-commerce-product-add-ons-plugin

modules/ppcp-button/resources/js/button.js

@@ -148,7 +148,13 @@ const bootstrap = () => {
         miniCartBootstrap.init();
     }
 
-    if (context === 'product' && PayPalCommerceGateway.single_product_buttons_enabled === '1') {
+    if (
+        context === 'product'
+        && (
+            PayPalCommerceGateway.single_product_buttons_enabled === '1'
+            || hasMessages()
+        )
+    ) {
         const singleProductBootstrap = new SingleProductBootstap(
             PayPalCommerceGateway,
             renderer,
@@ -194,6 +200,12 @@ const bootstrap = () => {
     }
 
 };
+
+const hasMessages = () => {
+    return PayPalCommerceGateway.messages.is_hidden === false
+        && document.querySelector(PayPalCommerceGateway.messages.wrapper);
+}
+
 document.addEventListener(
     'DOMContentLoaded',
     () => {

modules/ppcp-button/resources/js/modules/ActionHandler/SingleProductActionHandler.js

@@ -21,11 +21,11 @@ class SingleProductActionHandler {
         this.cartHelper = null;
     }
 
-    subscriptionsConfiguration() {
+    subscriptionsConfiguration(subscription_plan) {
         return {
             createSubscription: (data, actions) => {
                 return actions.subscription.create({
-                    'plan_id': this.config.subscription_plan_id
+                    'plan_id': subscription_plan
                 });
             },
             onApprove: (data, actions) => {
@@ -73,7 +73,7 @@ class SingleProductActionHandler {
     getSubscriptionProducts()
     {
         const id = document.querySelector('[name="add-to-cart"]').value;
-        return [new Product(id, 1, null, this.extraFields())];
+        return [new Product(id, 1, this.variations(), this.extraFields())];
     }
 
     configuration()

modules/ppcp-button/resources/js/modules/ContextBootstrap/CartBootstap.js

@@ -86,6 +86,12 @@ class CartBootstrap {
             && PayPalCommerceGateway.data_client_id.paypal_subscriptions_enabled
         ) {
             this.renderer.render(actionHandler.subscriptionsConfiguration());
+
+            if(!PayPalCommerceGateway.subscription_product_allowed) {
+                this.gateway.button.is_disabled = true;
+                this.handleButtonStatus();
+            }
+
             return;
         }
 

modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js

@@ -106,6 +106,12 @@ class CheckoutBootstap {
             && PayPalCommerceGateway.data_client_id.paypal_subscriptions_enabled
         ) {
             this.renderer.render(actionHandler.subscriptionsConfiguration(), {}, actionHandler.configuration());
+
+            if(!PayPalCommerceGateway.subscription_product_allowed) {
+                this.gateway.button.is_disabled = true;
+                this.handleButtonStatus();
+            }
+
             return;
         }
 

modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js

@@ -2,6 +2,8 @@ import UpdateCart from "../Helper/UpdateCart";
 import SingleProductActionHandler from "../ActionHandler/SingleProductActionHandler";
 import {hide, show} from "../Helper/Hiding";
 import BootstrapHelper from "../Helper/BootstrapHelper";
+import {loadPaypalJsScript} from "../Helper/ScriptLoading";
+import {getPlanIdFromVariation} from "../Helper/Subscriptions"
 import SimulateCart from "../Helper/SimulateCart";
 import {strRemoveWord, strAddWord, throttle} from "../Helper/Utils";
 
@@ -20,6 +22,8 @@ class SingleProductBootstap {
         this.renderer.onButtonsInit(this.gateway.button.wrapper, () => {
             this.handleChange();
         }, true);
+
+        this.subscriptionButtonsLoaded = false
     }
 
     form() {
@@ -27,6 +31,8 @@ class SingleProductBootstap {
     }
 
     handleChange() {
+        this.subscriptionButtonsLoaded = false
+
         if (!this.shouldRender()) {
             this.renderer.disableSmartButtons(this.gateway.button.wrapper);
             hide(this.gateway.button.wrapper, this.formSelector);
@@ -141,6 +147,25 @@ class SingleProductBootstap {
             || document.querySelector('.wcsatt-options-prompt-label-subscription input[type="radio"]:checked') !== null; // grouped
     }
 
+    variations() {
+        if (!this.hasVariations()) {
+            return null;
+        }
+
+        return [...document.querySelector('form.cart')?.querySelectorAll("[name^='attribute_']")].map(
+            (element) => {
+                return {
+                    value: element.value,
+                    name: element.name
+                }
+            }
+        );
+    }
+
+    hasVariations() {
+        return document.querySelector('form.cart')?.classList.contains('variations_form');
+    }
+
     render() {
         const actionHandler = new SingleProductActionHandler(
             this.gateway,
@@ -156,7 +181,29 @@ class SingleProductBootstap {
             PayPalCommerceGateway.data_client_id.has_subscriptions
             && PayPalCommerceGateway.data_client_id.paypal_subscriptions_enabled
         ) {
-            this.renderer.render(actionHandler.subscriptionsConfiguration());
+            const buttonWrapper = document.getElementById('ppc-button-ppcp-gateway');
+            buttonWrapper.innerHTML = '';
+
+            const subscription_plan = this.variations() !== null
+                ? getPlanIdFromVariation(this.variations())
+                : PayPalCommerceGateway.subscription_plan_id
+            if(!subscription_plan) {
+                return;
+            }
+
+            if(this.subscriptionButtonsLoaded) return
+            loadPaypalJsScript(
+                {
+                    clientId: PayPalCommerceGateway.client_id,
+                    currency: PayPalCommerceGateway.currency,
+                    intent: 'subscription',
+                    vault: true
+                },
+                actionHandler.subscriptionsConfiguration(subscription_plan),
+                this.gateway.button.wrapper
+            );
+
+            this.subscriptionButtonsLoaded = true
             return;
         }
 
@@ -187,6 +234,10 @@ class SingleProductBootstap {
 
             this.messages.renderWithAmount(data.total);
 
+            if ( this.gateway.single_product_buttons_enabled !== '1' ) {
+                return;
+            }
+
             let enableFunding = this.gateway.url_params['enable-funding'];
             let disableFunding = this.gateway.url_params['disable-funding'];
 

modules/ppcp-button/resources/js/modules/Helper/ScriptLoading.js

@@ -25,3 +25,9 @@ export const loadPaypalScript = (config, onLoaded) => {
 
     loadScript(scriptOptions).then(callback);
 }
+
+export const loadPaypalJsScript = (options, buttons, container) => {
+    loadScript(options).then((paypal) => {
+        paypal.Buttons(buttons).render(container);
+    });
+}

modules/ppcp-button/resources/js/modules/Helper/Subscriptions.js

@@ -2,3 +2,19 @@ export const isChangePaymentPage = () => {
     const urlParams = new URLSearchParams(window.location.search)
     return urlParams.has('change_payment_method');
 }
+
+export const getPlanIdFromVariation = (variation) => {
+    let subscription_plan = '';
+    PayPalCommerceGateway.variable_paypal_subscription_variations.forEach((element) => {
+        let obj =  {};
+        variation.forEach(({name, value}) => {
+            Object.assign(obj, {[name.replace('attribute_', '')]: value});
+        })
+
+        if(JSON.stringify(obj) === JSON.stringify(element.attributes) && element.subscription_plan !== '') {
+            subscription_plan = element.subscription_plan;
+        }
+    });
+
+    return subscription_plan;
+}