Insights preparation.

modules/ppcp-applepay/resources/js/ApplepayButton.js

@@ -39,7 +39,7 @@ class ApplepayButton {
 
         this.log = function() {
             if ( this.buttonConfig.is_debug ) {
-                console.log('[ApplePayButton]', ...arguments);
+                //console.log('[ApplePayButton]', ...arguments);
             }
         }
 

modules/ppcp-axo/extensions.php

@@ -88,6 +88,8 @@ return array(
 									->action_visible( 'axo_email_widget' )
 									->action_visible( 'axo_address_widget' )
 									->action_visible( 'axo_payment_widget' )
+									->action_visible( 'axo_privacy' )
+									->action_visible( 'axo_style_heading' )
 									->action_class( 'axo_enabled', 'active' )
 									->to_array(),
 								$display_manager
@@ -104,9 +106,9 @@ return array(
 									->action_visible( 'axo_style_input_bg_color' )
 									->action_visible( 'axo_style_input_border_radius' )
 									->action_visible( 'axo_style_input_border_color' )
-									->action_visible( 'axo_style_root_border_width' )
+									->action_visible( 'axo_style_input_border_width' )
-									->action_visible( 'axo_style_root_text_color_base' )
+									->action_visible( 'axo_style_input_text_color_base' )
-									->action_visible( 'axo_style_root_focus_border_color' )
+									->action_visible( 'axo_style_input_focus_border_color' )
 									->to_array(),
 							)
 						),
@@ -352,7 +354,7 @@ return array(
 					'requirements' => array(),
 					'gateway'      => 'dcc',
 				),
-				'axo_style_root_border_width' => array(
+				'axo_style_input_border_width' => array(
 					'title'        => __( 'Border Width', 'woocommerce-paypal-payments' ),
 					'type'         => 'text',
 					'classes'      => array( 'ppcp-field-indent' ),
@@ -362,7 +364,7 @@ return array(
 					'requirements' => array(),
 					'gateway'      => 'dcc',
 				),
-				'axo_style_root_text_color_base' => array(
+				'axo_style_input_text_color_base' => array(
 					'title'        => __( 'Text Color Base', 'woocommerce-paypal-payments' ),
 					'type'         => 'text',
 					'classes'      => array( 'ppcp-field-indent' ),
@@ -372,7 +374,7 @@ return array(
 					'requirements' => array(),
 					'gateway'      => 'dcc',
 				),
-				'axo_style_root_focus_border_color' => array(
+				'axo_style_input_focus_border_color' => array(
 					'title'        => __( 'Focus Border Color', 'woocommerce-paypal-payments' ),
 					'type'         => 'text',
 					'classes'      => array( 'ppcp-field-indent' ),

modules/ppcp-axo/resources/js/AxoManager.js

@@ -4,6 +4,7 @@ import DomElementCollection from "./Components/DomElementCollection";
 import ShippingView from "./Views/ShippingView";
 import BillingView from "./Views/BillingView";
 import CardView from "./Views/CardView";
+import PayPalInsights from "./Insights/PayPalInsights";
 
 class AxoManager {
 
@@ -55,10 +56,44 @@ class AxoManager {
             console.log(this);
             return this;
         }
+
+        if (
+            this.axoConfig?.insights?.enabled
+            && this.axoConfig?.insights?.client_id
+            && this.axoConfig?.insights?.session_id
+        ) {
+            PayPalInsights.config(this.axoConfig?.insights?.client_id, { debug: true });
+            PayPalInsights.setSessionId(this.axoConfig?.insights?.session_id);
+            PayPalInsights.trackJsLoad();
+
+            if (document.querySelector('.woocommerce-checkout')) {
+                PayPalInsights.trackBeginCheckout({
+                    amount: this.axoConfig?.insights?.amount,
+                    page_type: 'checkout',
+                    user_data: {
+                        country: 'US',
+                        is_store_member: false,
+                    }
+                });
+            }
+        }
     }
 
     registerEventHandlers() {
 
+        jQuery(document).on('change', 'input[name=payment_method]', (ev) => {
+            const map = {
+                'ppcp-axo-gateway': 'card',
+                'ppcp-gateway': 'paypal',
+            }
+
+            PayPalInsights.trackSelectPaymentMethod({
+                payment_method_selected: map[ev.target.value] || 'other',
+                page_type: 'checkout'
+            });
+        });
+
+
         // Listen to Gateway Radio button changes.
         this.el.gatewayRadioButton.on('change', (ev) => {
             if (ev.target.checked) {
@@ -83,7 +118,7 @@ class AxoManager {
             if (this.status.hasProfile) {
                 const { selectionChanged, selectedAddress } = await this.fastlane.profile.showShippingAddressSelector();
 
-                console.log('selectedAddress', selectedAddress);
+                //console.log('selectedAddress', selectedAddress);
 
                 if (selectionChanged) {
                     this.setShipping(selectedAddress);
@@ -103,11 +138,11 @@ class AxoManager {
         this.el.changeCardLink.on('click', async () => {
             const response = await this.fastlane.profile.showCardSelector();
 
-            console.log('card response', response);
+            //console.log('card response', response);
 
             if (response.selectionChanged) {
 
-                console.log('response.selectedCard.paymentToken', response.selectedCard.paymentToken);
+                //console.log('response.selectedCard.paymentToken', response.selectedCard.paymentToken);
 
                 this.setCard(response.selectedCard);
                 this.setBilling({
@@ -478,6 +513,15 @@ class AxoManager {
         this.data.email = this.emailInput.value;
         this.billingView.setData(this.data);
 
+        if (!this.fastlane.identity) {
+            log('Not initialized.');
+            return;
+        }
+
+        PayPalInsights.trackSubmitCheckoutEmail({
+            page_type: 'checkout'
+        });
+
         const lookupResponse = await this.fastlane.identity.lookupCustomerByEmail(this.emailInput.value);
 
         if (lookupResponse.customerContextId) {
@@ -499,7 +543,7 @@ class AxoManager {
                 });
                 this.setCard(authResponse.profileData.card);
 
-                console.log('authResponse', authResponse);
+                //console.log('authResponse', authResponse);
 
                 this.setStatus('validEmail', true);
                 this.setStatus('hasProfile', true);
@@ -522,7 +566,7 @@ class AxoManager {
             this.setStatus('validEmail', true);
             this.setStatus('hasProfile', false);
 
-            console.log('this.cardComponentData()', this.cardComponentData());
+            //console.log('this.cardComponentData()', this.cardComponentData());
 
             this.cardComponent = await this.fastlane
                 .FastlaneCardComponent(
@@ -620,6 +664,16 @@ class AxoManager {
 
         this.el.axoNonceInput.get().value = nonce;
 
+        PayPalInsights.trackEndCheckout({
+            amount: this.axoConfig?.insights?.amount,
+            page_type: 'checkout',
+            payment_method_selected: 'card',
+            user_data: {
+                country: 'US',
+                is_store_member: false,
+            }
+        });
+
         this.el.defaultSubmitButton.click();
     }
 

modules/ppcp-axo/resources/js/Helper/Debug.js

@@ -1,4 +1,4 @@
 
 export function log(...args) {
-    console.log('[AXO] ', ...args);
+    //console.log('[AXO] ', ...args);
 }

modules/ppcp-axo/resources/js/Insights/PayPalInsights.js

@@ -11,43 +11,46 @@ class PayPalInsights {
     /**
      * @returns {PayPalInsights}
      */
-    static getInstance() {
+    static init() {
         if (!PayPalInsights.instance) {
             PayPalInsights.instance = new PayPalInsights();
         }
         return PayPalInsights.instance;
     }
 
-    track(eventName, data) {
+    static track(eventName, data) {
+        PayPalInsights.init();
         paypalInsight('event', eventName, data);
     }
 
     static config (clientId, data) {
+        PayPalInsights.init();
         paypalInsight('config', clientId, data);
     }
 
     static setSessionId (sessionId) {
+        PayPalInsights.init();
         paypalInsight('set', { session_id: sessionId });
     }
 
     static trackJsLoad () {
-        PayPalInsights.getInstance().track('js_load', { timestamp: Date.now() });
+        PayPalInsights.track('js_load', { timestamp: Date.now() });
     }
 
     static trackBeginCheckout (data) {
-        PayPalInsights.getInstance().track('begin_checkout', data);
+        PayPalInsights.track('begin_checkout', data);
     }
 
     static trackSubmitCheckoutEmail (data) {
-        PayPalInsights.getInstance().track('submit_checkout_email', data);
+        PayPalInsights.track('submit_checkout_email', data);
     }
 
     static trackSelectPaymentMethod (data) {
-        PayPalInsights.getInstance().track('select_payment_method', data);
+        PayPalInsights.track('select_payment_method', data);
     }
 
     static trackEndCheckout (data) {
-        PayPalInsights.getInstance().track('end_checkout', data);
+        PayPalInsights.track('end_checkout', data);
     }
 
 }

modules/ppcp-axo/resources/js/Views/BillingView.js

@@ -16,7 +16,7 @@ class BillingView {
                     const selectElement = document.querySelector(selectSelector);
 
                     if (!selectElement) {
-                        return ${key};
+                        return key;
                     }
 
                     const option = selectElement.querySelector(`option[value="${key}"]`);

modules/ppcp-axo/resources/js/Views/ShippingView.js

@@ -16,7 +16,7 @@ class ShippingView {
                     const selectElement = document.querySelector(selectSelector);
 
                     if (!selectElement) {
-                        return ${key};
+                        return key;
                     }
 
                     const option = selectElement.querySelector(`option[value="${key}"]`);
@@ -88,7 +88,7 @@ class ShippingView {
                     'valuePath': null,
                 },
                 phone: {
-                    'selector': '#billing_phone_field', // There is no shipping phone field.
+                    //'selector': '#billing_phone_field', // There is no shipping phone field.
                     'valueCallback': function (data) {
                         let phone = '';
                         const cc = data?.shipping?.phoneNumber?.countryCode;

modules/ppcp-axo/src/Assets/AxoManager.php

@@ -160,6 +160,15 @@ class AxoManager {
 				'address' => $address_widget ?: 'render',
 				'payment' => $payment_widget ?: 'render',
 			),
+			'insights' => array(
+				'enabled'    => true,
+				'client_id'  => ( $this->settings->has( 'client_id' ) ? $this->settings->get( 'client_id' ) : null ),
+				'session_id' => substr( md5( WC()->session->get_customer_unique_id() ), 0, 16 ),
+				'amount'     => array(
+					'currency_code' => get_woocommerce_currency(),
+					'value'         => WC()->cart->get_total( 'numeric' )
+				)
+			)
 		);
 	}
 

modules/ppcp-googlepay/resources/js/GooglepayButton.js

@@ -28,7 +28,7 @@ class GooglepayButton {
 
         this.log = function() {
             if ( this.buttonConfig.is_debug ) {
-                console.log('[GooglePayButton]', ...arguments);
+                //console.log('[GooglePayButton]', ...arguments);
             }
         }
     }