diff --git a/modules/ppcp-axo/extensions.php b/modules/ppcp-axo/extensions.php index e730166a7..e81176244 100644 --- a/modules/ppcp-axo/extensions.php +++ b/modules/ppcp-axo/extensions.php @@ -83,6 +83,7 @@ return array( ->condition_element( 'axo_enabled', '1' ) ->action_visible( 'axo_gateway_title' ) ->action_visible( 'axo_privacy' ) + ->action_visible( 'axo_name_on_card' ) ->action_visible( 'axo_style_heading' ) ->action_class( 'axo_enabled', 'active' ) ->to_array(), @@ -94,6 +95,7 @@ return array( ->action_visible( 'axo_style_root_bg_color' ) ->action_visible( 'axo_style_root_error_color' ) ->action_visible( 'axo_style_root_font_family' ) + ->action_visible( 'axo_style_root_text_color_base' ) ->action_visible( 'axo_style_root_font_size_base' ) ->action_visible( 'axo_style_root_padding' ) ->action_visible( 'axo_style_root_primary_color' ) @@ -133,7 +135,7 @@ return array( 'title' => __( 'Privacy', 'woocommerce-paypal-payments' ), 'type' => 'select', 'label' => __( - 'Require customers to confirm express payments from the Cart and Express Checkout on the checkout page. + 'This setting will control whether Fastlane branding is shown by email field.
PayPal powers this accelerated checkout solution from Fastlane. Since you\'ll share consumers\' email addresses with PayPal, please consult your legal advisors on the apropriate privacy setting for your business.
', 'woocommerce-paypal-payments' ), @@ -151,6 +153,17 @@ return array( 'gateway' => array( 'dcc', 'axo' ), 'requirements' => array( 'axo' ), ), + 'axo_name_on_card' => array( + 'title' => __( 'Display Name on Card', 'woocommerce-paypal-payments' ), + 'type' => 'checkbox', + 'default' => 'yes', + 'classes' => array( 'ppcp-field-indent' ), + 'class' => array(), + 'label' => __( 'Enable this to display the "Name on Card" field for new Fastlane buyers.', 'woocommerce-paypal-payments' ), + 'screens' => array( State::STATE_ONBOARDED ), + 'gateway' => array(), + 'requirements' => array( 'axo' ), + ), 'axo_style_heading' => array( 'heading' => __( 'Advanced Style Settings (optional)', 'woocommerce-paypal-payments' ), 'heading_html' => sprintf( @@ -200,52 +213,9 @@ return array( 'axo_style_root_bg_color' => array( 'title' => __( 'Background Color', 'woocommerce-paypal-payments' ), 'type' => 'text', + 'placeholder' => '#ffffff', 'classes' => array( 'ppcp-field-indent' ), - 'default' => '#ffffff', - 'screens' => array( - State::STATE_ONBOARDED, - ), - 'requirements' => array( 'axo' ), - 'gateway' => array( 'dcc', 'axo' ), - ), - 'axo_style_root_error_color' => array( - 'title' => __( 'Error Color', 'woocommerce-paypal-payments' ), - 'type' => 'text', - 'classes' => array( 'ppcp-field-indent' ), - 'default' => '#d9360b', - 'screens' => array( - State::STATE_ONBOARDED, - ), - 'requirements' => array( 'axo' ), - 'gateway' => array( 'dcc', 'axo' ), - ), - 'axo_style_root_font_family' => array( - 'title' => __( 'Font Family', 'woocommerce-paypal-payments' ), - 'type' => 'text', - 'classes' => array( 'ppcp-field-indent' ), - 'default' => 'PayPal Open', - 'screens' => array( - State::STATE_ONBOARDED, - ), - 'requirements' => array( 'axo' ), - 'gateway' => array( 'dcc', 'axo' ), - ), - 'axo_style_root_font_size_base' => array( - 'title' => __( 'Font Size Base', 'woocommerce-paypal-payments' ), - 'type' => 'text', - 'classes' => array( 'ppcp-field-indent' ), - 'default' => '16px', - 'screens' => array( - State::STATE_ONBOARDED, - ), - 'requirements' => array( 'axo' ), - 'gateway' => array( 'dcc', 'axo' ), - ), - 'axo_style_root_padding' => array( - 'title' => __( 'Padding', 'woocommerce-paypal-payments' ), - 'type' => 'text', - 'classes' => array( 'ppcp-field-indent' ), - 'default' => '4px', + 'default' => '', 'screens' => array( State::STATE_ONBOARDED, ), @@ -255,8 +225,69 @@ return array( 'axo_style_root_primary_color' => array( 'title' => __( 'Primary Color', 'woocommerce-paypal-payments' ), 'type' => 'text', + 'placeholder' => '#0057F', 'classes' => array( 'ppcp-field-indent' ), - 'default' => '#0057ff', + 'default' => '', + 'screens' => array( + State::STATE_ONBOARDED, + ), + 'requirements' => array( 'axo' ), + 'gateway' => array( 'dcc', 'axo' ), + ), + 'axo_style_root_error_color' => array( + 'title' => __( 'Error Color', 'woocommerce-paypal-payments' ), + 'type' => 'text', + 'placeholder' => '#D9360B', + 'classes' => array( 'ppcp-field-indent' ), + 'default' => '', + 'screens' => array( + State::STATE_ONBOARDED, + ), + 'requirements' => array( 'axo' ), + 'gateway' => array( 'dcc', 'axo' ), + ), + 'axo_style_root_font_family' => array( + 'title' => __( 'Font Family', 'woocommerce-paypal-payments' ), + 'type' => 'text', + 'placeholder' => 'PayPal-Open', + 'classes' => array( 'ppcp-field-indent' ), + 'default' => '', + 'screens' => array( + State::STATE_ONBOARDED, + ), + 'requirements' => array( 'axo' ), + 'gateway' => array( 'dcc', 'axo' ), + ), + 'axo_style_root_text_color_base' => array( + 'title' => __( 'Text Color Base', 'woocommerce-paypal-payments' ), + 'type' => 'text', + 'placeholder' => '#010B0D', + 'classes' => array( 'ppcp-field-indent' ), + 'default' => '', + 'screens' => array( + State::STATE_ONBOARDED, + ), + 'requirements' => array( 'axo' ), + 'gateway' => array( 'dcc', 'axo' ), + ), + 'axo_style_root_font_size_base' => array( + 'title' => __( 'Font Size Base', 'woocommerce-paypal-payments' ), + 'type' => 'text', + 'placeholder' => '16px', + 'classes' => array( 'ppcp-field-indent' ), + 'default' => '', + 'screens' => array( + State::STATE_ONBOARDED, + ), + 'requirements' => array( 'axo' ), + 'gateway' => array( 'dcc', 'axo' ), + ), + 'axo_style_root_padding' => array( + 'title' => __( 'Padding', 'woocommerce-paypal-payments' ), + 'type' => 'text', + 'placeholder' => '4px', + 'classes' => array( 'ppcp-field-indent' ), + 'default' => '', 'screens' => array( State::STATE_ONBOARDED, ), @@ -278,8 +309,9 @@ return array( 'axo_style_input_bg_color' => array( 'title' => __( 'Background Color', 'woocommerce-paypal-payments' ), 'type' => 'text', + 'placeholder' => '#ffffff', 'classes' => array( 'ppcp-field-indent' ), - 'default' => '#ffffff', + 'default' => '', 'screens' => array( State::STATE_ONBOARDED, ), @@ -289,8 +321,9 @@ return array( 'axo_style_input_border_radius' => array( 'title' => __( 'Border Radius', 'woocommerce-paypal-payments' ), 'type' => 'text', + 'placeholder' => '0.25em', 'classes' => array( 'ppcp-field-indent' ), - 'default' => '0.25em', + 'default' => '', 'screens' => array( State::STATE_ONBOARDED, ), @@ -300,8 +333,9 @@ return array( 'axo_style_input_border_color' => array( 'title' => __( 'Border Color', 'woocommerce-paypal-payments' ), 'type' => 'text', + 'placeholder' => '#DADDDD', 'classes' => array( 'ppcp-field-indent' ), - 'default' => '#dadddd', + 'default' => '', 'screens' => array( State::STATE_ONBOARDED, ), @@ -311,8 +345,9 @@ return array( 'axo_style_input_border_width' => array( 'title' => __( 'Border Width', 'woocommerce-paypal-payments' ), 'type' => 'text', + 'placeholder' => '1px', 'classes' => array( 'ppcp-field-indent' ), - 'default' => '1px', + 'default' => '', 'screens' => array( State::STATE_ONBOARDED, ), @@ -322,8 +357,9 @@ return array( 'axo_style_input_text_color_base' => array( 'title' => __( 'Text Color Base', 'woocommerce-paypal-payments' ), 'type' => 'text', + 'placeholder' => '#010B0D', 'classes' => array( 'ppcp-field-indent' ), - 'default' => '#010b0d', + 'default' => '', 'screens' => array( State::STATE_ONBOARDED, ), @@ -333,8 +369,9 @@ return array( 'axo_style_input_focus_border_color' => array( 'title' => __( 'Focus Border Color', 'woocommerce-paypal-payments' ), 'type' => 'text', + 'placeholder' => '#0057FF', 'classes' => array( 'ppcp-field-indent' ), - 'default' => '#0057ff', + 'default' => '', 'screens' => array( State::STATE_ONBOARDED, ), diff --git a/modules/ppcp-axo/resources/css/styles.scss b/modules/ppcp-axo/resources/css/styles.scss index 0fcfb2cd6..ef71f331b 100644 --- a/modules/ppcp-axo/resources/css/styles.scss +++ b/modules/ppcp-axo/resources/css/styles.scss @@ -1,13 +1,3 @@ - -.ppcp-axo-card-icons { - padding: 4px 0 16px 25px; - - .ppcp-card-icon { - float: left !important; - max-height: 25px; - } -} - .ppcp-axo-watermark-container { max-width: 200px; margin-top: 10px; diff --git a/modules/ppcp-axo/resources/js/AxoManager.js b/modules/ppcp-axo/resources/js/AxoManager.js index 6fbdb8d73..f0ccca428 100644 --- a/modules/ppcp-axo/resources/js/AxoManager.js +++ b/modules/ppcp-axo/resources/js/AxoManager.js @@ -162,6 +162,17 @@ class AxoManager { ev.preventDefault(); } }); + + // Listening to status update event + document.addEventListener('axo_status_updated', (ev) => { + const termsField = document.querySelector("[name='terms-field']"); + if(termsField) { + const status = ev.detail; + const shouldHide = status.active && status.validEmail === false && status.hasProfile === false; + + termsField.parentElement.style.display = shouldHide ? 'none' : 'block'; + } + }); } rerender() { @@ -347,6 +358,8 @@ class AxoManager { log('Status updated', JSON.parse(JSON.stringify(this.status))); + document.dispatchEvent(new CustomEvent("axo_status_updated", {detail: this.status})); + this.rerender(); } @@ -431,7 +444,6 @@ class AxoManager { // Move email to the AXO container. let emailRow = document.querySelector(this.el.fieldBillingEmail.selector); wrapperElement.prepend(emailRow); - emailRow.querySelector('input').focus(); } } @@ -463,9 +475,9 @@ class AxoManager { this.el.gatewayRadioButton.trigger('change'); } - async renderWatermark() { + async renderWatermark(includeAdditionalInfo = true) { (await this.fastlane.FastlaneWatermarkComponent({ - includeAdditionalInfo: true + includeAdditionalInfo })).render(this.el.watermarkContainer.selector); } @@ -548,13 +560,16 @@ class AxoManager { if (authResponse.authenticationState === 'succeeded') { log(JSON.stringify(authResponse)); - // Add addresses this.setShipping(authResponse.profileData.shippingAddress); - this.setBilling({ - address: authResponse.profileData.card.paymentSource.card.billingAddress, - phoneNumber: authResponse.profileData.shippingAddress.phoneNumber.nationalNumber ?? '' - }); - this.setCard(authResponse.profileData.card); + + const billingAddress = authResponse.profileData?.card?.paymentSource?.card?.billingAddress; + if(billingAddress) { + this.setBilling({ + address: billingAddress, + phoneNumber: authResponse.profileData.shippingAddress.phoneNumber.nationalNumber ?? '' + }); + this.setCard(authResponse.profileData.card); + } this.setStatus('validEmail', true); this.setStatus('hasProfile', true); @@ -562,11 +577,23 @@ class AxoManager { this.hideGatewaySelection = true; this.$('.wc_payment_methods label').hide(); + await this.renderWatermark(false); + this.rerender(); } else { // authentication failed or canceled by the customer + // set status as guest customer log("Authentication Failed") + + this.setStatus('validEmail', true); + this.setStatus('hasProfile', false); + + await this.renderWatermark(true); + + this.cardComponent = (await this.fastlane.FastlaneCardComponent( + this.cardComponentData() + )).render(this.el.paymentContainer.selector + '-form'); } } else { @@ -577,6 +604,8 @@ class AxoManager { this.setStatus('validEmail', true); this.setStatus('hasProfile', false); + await this.renderWatermark(true); + this.cardComponent = (await this.fastlane.FastlaneCardComponent( this.cardComponentData() )).render(this.el.paymentContainer.selector + '-form'); @@ -620,6 +649,8 @@ class AxoManager { this.shippingView.toSubmitData(data); this.cardView.toSubmitData(data); + this.ensureBillingPhoneNumber(data); + this.submit(this.data.card.id, data); } else { // Gary flow @@ -639,10 +670,15 @@ class AxoManager { } cardComponentData() { - return { - fields: { - cardholderName: {} // optionally pass this to show the card holder name + const fields = { + cardholderName: { + enabled: true } + }; + + return { + fields: fields, + styles: this.deleteKeysWithEmptyString(this.axoConfig.style_options) } } @@ -693,6 +729,9 @@ class AxoManager { formData.set(key, data[key]); }); + // Set type of user (Ryan) to be received on WC gateway process payment request. + formData.set('fastlane_member', true); + fetch(wc_checkout_params.checkout_url, { // TODO: maybe create a new endpoint to process_payment. method: "POST", body: formData @@ -743,6 +782,34 @@ class AxoManager { return this.axoConfig?.widgets?.email === 'use_widget'; } + deleteKeysWithEmptyString = (obj) => { + for(let key of Object.keys(obj)){ + if (obj[key] === ''){ + delete obj[key]; + } + else if (typeof obj[key] === 'object'){ + obj[key] = this.deleteKeysWithEmptyString(obj[key]); + if (Object.keys(obj[key]).length === 0 ) delete obj[key]; + } + } + + return Array.isArray(obj) ? obj.filter(val => val) : obj; + } + + ensureBillingPhoneNumber(data) { + if (data.billing_phone === '') { + let phone = ''; + const cc = this.data?.shipping?.phoneNumber?.countryCode; + const number = this.data?.shipping?.phoneNumber?.nationalNumber; + + if (cc) { + phone = `+${cc} `; + } + phone += number; + + data.billing_phone = phone; + } + } } export default AxoManager; diff --git a/modules/ppcp-axo/resources/js/Views/ShippingView.js b/modules/ppcp-axo/resources/js/Views/ShippingView.js index 4f0a18f8d..0799fdbc5 100644 --- a/modules/ppcp-axo/resources/js/Views/ShippingView.js +++ b/modules/ppcp-axo/resources/js/Views/ShippingView.js @@ -45,9 +45,8 @@ class ShippingView {