From 9bf23550dda69711acbe27f6a0c7461dc58394d4 Mon Sep 17 00:00:00 2001 From: Pedro Silva Date: Thu, 11 Apr 2024 17:14:22 +0100 Subject: [PATCH] Insights preparation. --- .../resources/js/ApplepayButton.js | 2 +- modules/ppcp-axo/extensions.php | 14 ++-- modules/ppcp-axo/resources/js/AxoManager.js | 64 +++++++++++++++++-- modules/ppcp-axo/resources/js/Helper/Debug.js | 2 +- .../resources/js/Insights/PayPalInsights.js | 17 +++-- .../resources/js/Views/BillingView.js | 2 +- .../resources/js/Views/ShippingView.js | 4 +- modules/ppcp-axo/src/Assets/AxoManager.php | 9 +++ .../resources/js/GooglepayButton.js | 2 +- 9 files changed, 92 insertions(+), 24 deletions(-) diff --git a/modules/ppcp-applepay/resources/js/ApplepayButton.js b/modules/ppcp-applepay/resources/js/ApplepayButton.js index 4484bba21..11e14df6a 100644 --- a/modules/ppcp-applepay/resources/js/ApplepayButton.js +++ b/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); } } diff --git a/modules/ppcp-axo/extensions.php b/modules/ppcp-axo/extensions.php index b3cc8ab2b..0a709d572 100644 --- a/modules/ppcp-axo/extensions.php +++ b/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_root_text_color_base' ) - ->action_visible( 'axo_style_root_focus_border_color' ) + ->action_visible( 'axo_style_input_border_width' ) + ->action_visible( 'axo_style_input_text_color_base' ) + ->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' ), diff --git a/modules/ppcp-axo/resources/js/AxoManager.js b/modules/ppcp-axo/resources/js/AxoManager.js index d380c2e2c..143c54707 100644 --- a/modules/ppcp-axo/resources/js/AxoManager.js +++ b/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(); } diff --git a/modules/ppcp-axo/resources/js/Helper/Debug.js b/modules/ppcp-axo/resources/js/Helper/Debug.js index 560bb5c6a..e473d4a3b 100644 --- a/modules/ppcp-axo/resources/js/Helper/Debug.js +++ b/modules/ppcp-axo/resources/js/Helper/Debug.js @@ -1,4 +1,4 @@ export function log(...args) { - console.log('[AXO] ', ...args); + //console.log('[AXO] ', ...args); } diff --git a/modules/ppcp-axo/resources/js/Insights/PayPalInsights.js b/modules/ppcp-axo/resources/js/Insights/PayPalInsights.js index eb9b24d10..926ca9355 100644 --- a/modules/ppcp-axo/resources/js/Insights/PayPalInsights.js +++ b/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); } } diff --git a/modules/ppcp-axo/resources/js/Views/BillingView.js b/modules/ppcp-axo/resources/js/Views/BillingView.js index 4df27defe..c024dfc38 100644 --- a/modules/ppcp-axo/resources/js/Views/BillingView.js +++ b/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}"]`); diff --git a/modules/ppcp-axo/resources/js/Views/ShippingView.js b/modules/ppcp-axo/resources/js/Views/ShippingView.js index bbc9a11d2..3b34c735e 100644 --- a/modules/ppcp-axo/resources/js/Views/ShippingView.js +++ b/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; diff --git a/modules/ppcp-axo/src/Assets/AxoManager.php b/modules/ppcp-axo/src/Assets/AxoManager.php index 4a92208c6..973f0b091 100644 --- a/modules/ppcp-axo/src/Assets/AxoManager.php +++ b/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' ) + ) + ) ); } diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js index 3331a4d49..00b8f7f7d 100644 --- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js +++ b/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); } } }