From 7fe89dc45bf1cc9fa8369b8131c5a41fc1798534 Mon Sep 17 00:00:00 2001 From: Tunbosun Ayinla Date: Fri, 24 Nov 2023 11:35:13 +0100 Subject: [PATCH 1/9] issue/91 - Compatibility with WooCommerce Checkout Block for additional payment gateways (#93) * Move each custom gateways to own folder * Add support for checkout block to the 5 custom gateways * Scripts to register block supports for custom gateways * Update array key used to pass the logo urls in the default gateway * Refactor script used to to register block supports for the default gateway --- ...ass-wc-gateway-paystack-blocks-support.php | 2 +- ...gateway-custom-paystack-blocks-support.php | 114 ++++++++++++++++++ .../class-wc-gateway-custom-paystack.php | 21 ++++ ...c-gateway-paystack-five-blocks-support.php | 11 ++ .../class-wc-gateway-paystack-five.php | 0 ...c-gateway-paystack-four-blocks-support.php | 11 ++ .../class-wc-gateway-paystack-four.php | 0 ...wc-gateway-paystack-one-blocks-support.php | 11 ++ .../class-wc-gateway-paystack-one.php | 0 ...-gateway-paystack-three-blocks-support.php | 11 ++ .../class-wc-gateway-paystack-three.php | 0 ...wc-gateway-paystack-two-blocks-support.php | 11 ++ .../class-wc-gateway-paystack-two.php | 0 resources/js/frontend/blocks/base/index.js | 44 +++++++ .../frontend/blocks/gateway-five/constants.js | 1 + .../js/frontend/blocks/gateway-five/index.js | 29 +++++ .../frontend/blocks/gateway-four/constants.js | 1 + .../js/frontend/blocks/gateway-four/index.js | 29 +++++ .../frontend/blocks/gateway-one/constants.js | 1 + .../js/frontend/blocks/gateway-one/index.js | 29 +++++ .../blocks/gateway-three/constants.js | 1 + .../js/frontend/blocks/gateway-three/index.js | 29 +++++ .../frontend/blocks/gateway-two/constants.js | 1 + .../js/frontend/blocks/gateway-two/index.js | 29 +++++ resources/js/frontend/blocks/index.js | 43 ++----- webpack.config.js | 5 + woo-paystack.php | 27 +++-- 27 files changed, 417 insertions(+), 44 deletions(-) create mode 100644 includes/custom-gateways/class-wc-gateway-custom-paystack-blocks-support.php rename includes/{ => custom-gateways}/class-wc-gateway-custom-paystack.php (98%) create mode 100644 includes/custom-gateways/gateway-five/class-wc-gateway-paystack-five-blocks-support.php rename includes/custom-gateways/{ => gateway-five}/class-wc-gateway-paystack-five.php (100%) create mode 100644 includes/custom-gateways/gateway-four/class-wc-gateway-paystack-four-blocks-support.php rename includes/custom-gateways/{ => gateway-four}/class-wc-gateway-paystack-four.php (100%) create mode 100644 includes/custom-gateways/gateway-one/class-wc-gateway-paystack-one-blocks-support.php rename includes/custom-gateways/{ => gateway-one}/class-wc-gateway-paystack-one.php (100%) create mode 100644 includes/custom-gateways/gateway-three/class-wc-gateway-paystack-three-blocks-support.php rename includes/custom-gateways/{ => gateway-three}/class-wc-gateway-paystack-three.php (100%) create mode 100644 includes/custom-gateways/gateway-two/class-wc-gateway-paystack-two-blocks-support.php rename includes/custom-gateways/{ => gateway-two}/class-wc-gateway-paystack-two.php (100%) create mode 100644 resources/js/frontend/blocks/base/index.js create mode 100644 resources/js/frontend/blocks/gateway-five/constants.js create mode 100644 resources/js/frontend/blocks/gateway-five/index.js create mode 100644 resources/js/frontend/blocks/gateway-four/constants.js create mode 100644 resources/js/frontend/blocks/gateway-four/index.js create mode 100644 resources/js/frontend/blocks/gateway-one/constants.js create mode 100644 resources/js/frontend/blocks/gateway-one/index.js create mode 100644 resources/js/frontend/blocks/gateway-three/constants.js create mode 100644 resources/js/frontend/blocks/gateway-three/index.js create mode 100644 resources/js/frontend/blocks/gateway-two/constants.js create mode 100644 resources/js/frontend/blocks/gateway-two/index.js diff --git a/includes/class-wc-gateway-paystack-blocks-support.php b/includes/class-wc-gateway-paystack-blocks-support.php index 27f0b39..9388474 100644 --- a/includes/class-wc-gateway-paystack-blocks-support.php +++ b/includes/class-wc-gateway-paystack-blocks-support.php @@ -79,7 +79,7 @@ public function get_payment_method_data() { 'description' => $this->get_setting( 'description' ), 'supports' => array_filter( $gateway->supports, array( $gateway, 'supports' ) ), 'allow_saved_cards' => $gateway->saved_cards && is_user_logged_in(), - 'logo_url' => array( $payment_gateways['paystack']->get_logo_url() ), + 'logo_urls' => array( $payment_gateways['paystack']->get_logo_url() ), ); } diff --git a/includes/custom-gateways/class-wc-gateway-custom-paystack-blocks-support.php b/includes/custom-gateways/class-wc-gateway-custom-paystack-blocks-support.php new file mode 100644 index 0000000..c080ba5 --- /dev/null +++ b/includes/custom-gateways/class-wc-gateway-custom-paystack-blocks-support.php @@ -0,0 +1,114 @@ +name}_settings", array() ); + + $this->settings = wp_parse_args( $custom_paystack_gateway_settings, $paystack_gateway_settings ); + + add_action( 'woocommerce_rest_checkout_process_payment_with_context', array( $this, 'failed_payment_notice' ), 8, 2 ); + } + + /** + * Returns if this payment method should be active. If false, the scripts will not be enqueued. + * + * @return boolean + */ + public function is_active() { + $payment_gateways_class = WC()->payment_gateways(); + $payment_gateways = $payment_gateways_class->payment_gateways(); + if ( ! isset( $payment_gateways[ $this->name ] ) ) { + return false; + } + + return $payment_gateways[ $this->name ]->is_available(); + } + + /** + * Returns an array of scripts/handles to be registered for this payment method. + * + * @return array + */ + public function get_payment_method_script_handles() { + $script_asset_path = plugins_url( "/assets/js/blocks/frontend/blocks/{$this->name}.asset.php", WC_PAYSTACK_MAIN_FILE ); + $script_asset = file_exists( $script_asset_path ) + ? require $script_asset_path + : array( + 'dependencies' => array(), + 'version' => WC_PAYSTACK_VERSION, + ); + + $script_url = plugins_url( "/assets/js/blocks/frontend/blocks/{$this->name}.js", WC_PAYSTACK_MAIN_FILE ); + + wp_register_script( + "wc-{$this->name}-blocks", + $script_url, + $script_asset['dependencies'], + $script_asset['version'], + true + ); + + if ( function_exists( 'wp_set_script_translations' ) ) { + wp_set_script_translations( 'wc-paystack-blocks', 'woo-paystack', ); + } + + return array( "wc-{$this->name}-blocks" ); + } + + /** + * Returns an array of key=>value pairs of data made available to the payment methods script. + * + * @return array + */ + public function get_payment_method_data() { + $payment_gateways_class = WC()->payment_gateways(); + $payment_gateways = $payment_gateways_class->payment_gateways(); + $gateway = $payment_gateways[ $this->name ]; + + $payment_icons = $this->get_setting( 'payment_icons' ); + if ( empty( $payment_icons ) ) { + $payment_icons = array( 'paystack' ); + } + + $payment_icons_url = array(); + foreach ( $payment_icons as $payment_icon ) { + $payment_icons_url[] = WC_HTTPS::force_https_url( plugins_url( "assets/images/{$payment_icon}.png", WC_PAYSTACK_MAIN_FILE ) ); + } + + return array( + 'title' => $this->get_setting( 'title' ), + 'description' => $this->get_setting( 'description' ), + 'supports' => array_filter( $gateway->supports, array( $gateway, 'supports' ) ), + 'allow_saved_cards' => $gateway->saved_cards && is_user_logged_in(), + 'logo_urls' => $payment_icons_url, + ); + } + + /** + * Add failed payment notice to the payment details. + * + * @param PaymentContext $context Holds context for the payment. + * @param PaymentResult $result Result object for the payment. + */ + public function failed_payment_notice( PaymentContext $context, PaymentResult &$result ) { + if ( $this->name === $context->payment_method ) { + add_action( + 'wc_gateway_paystack_process_payment_error', + function( $failed_notice ) use ( &$result ) { + $payment_details = $result->payment_details; + $payment_details['errorMessage'] = wp_strip_all_tags( $failed_notice ); + $result->set_payment_details( $payment_details ); + } + ); + } + } +} diff --git a/includes/class-wc-gateway-custom-paystack.php b/includes/custom-gateways/class-wc-gateway-custom-paystack.php similarity index 98% rename from includes/class-wc-gateway-custom-paystack.php rename to includes/custom-gateways/class-wc-gateway-custom-paystack.php index f35e07d..fdf6f08 100644 --- a/includes/class-wc-gateway-custom-paystack.php +++ b/includes/custom-gateways/class-wc-gateway-custom-paystack.php @@ -612,4 +612,25 @@ public function add_gateway_to_checkout( $available_gateways ) { } + /** + * Check if the custom Paystack gateway is enabled. + * + * @return bool + */ + public function is_available() { + + if ( 'yes' == $this->enabled ) { + + if ( ! ( $this->public_key && $this->secret_key ) ) { + + return false; + + } + + return true; + + } + + return false; + } } diff --git a/includes/custom-gateways/gateway-five/class-wc-gateway-paystack-five-blocks-support.php b/includes/custom-gateways/gateway-five/class-wc-gateway-paystack-five-blocks-support.php new file mode 100644 index 0000000..0e09ba3 --- /dev/null +++ b/includes/custom-gateways/gateway-five/class-wc-gateway-paystack-five-blocks-support.php @@ -0,0 +1,11 @@ + { + return decodeEntities( title ) || defaultLabel; +} + +/** + * Content component + */ +export const Content = ({ description }) => { + return decodeEntities( description || '' ); +}; + +const PaymentIcons = ({ logoUrls, label }) => { + return ( +
+ {logoUrls.map((logoUrl, index) => ( + {label} + ))} +
+ ); +}; + +export const Label = ({ logoUrls, title }) => { + return ( + <> +
+
+ { ariaLabel( { title: title } ) } +
+ +
+ + ); +}; diff --git a/resources/js/frontend/blocks/gateway-five/constants.js b/resources/js/frontend/blocks/gateway-five/constants.js new file mode 100644 index 0000000..85fd1a3 --- /dev/null +++ b/resources/js/frontend/blocks/gateway-five/constants.js @@ -0,0 +1 @@ +export const PAYMENT_METHOD_NAME = 'paystack-five'; diff --git a/resources/js/frontend/blocks/gateway-five/index.js b/resources/js/frontend/blocks/gateway-five/index.js new file mode 100644 index 0000000..b97246f --- /dev/null +++ b/resources/js/frontend/blocks/gateway-five/index.js @@ -0,0 +1,29 @@ +/** + * External dependencies + */ +import { registerPaymentMethod } from '@woocommerce/blocks-registry'; +import { getSetting } from '@woocommerce/settings'; +import {Content, ariaLabel, Label} from '../base'; +import { PAYMENT_METHOD_NAME } from './constants'; + +const settings = getSetting( 'paystack-five_data', {} ); +const label = ariaLabel({ title: settings.title }); + +/** + * Paystack payment method config object. + */ +const Paystack_Gateway = { + name: PAYMENT_METHOD_NAME, + label: