From 47728a78ff3cff27f541822edc66cf9d9e35ac89 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 8 Nov 2023 08:39:53 +0200 Subject: [PATCH] Add style settings for card button --- .../ppcp-button/src/Assets/SmartButton.php | 20 +++- modules/ppcp-wc-gateway/extensions.php | 1 + .../src/Assets/SettingsPageAssets.php | 4 +- .../Settings/Fields/card-button-fields.php | 109 ++++++++++++++++++ 4 files changed, 131 insertions(+), 3 deletions(-) create mode 100644 modules/ppcp-wc-gateway/src/Settings/Fields/card-button-fields.php diff --git a/modules/ppcp-button/src/Assets/SmartButton.php b/modules/ppcp-button/src/Assets/SmartButton.php index 336499a5f..849369c2e 100644 --- a/modules/ppcp-button/src/Assets/SmartButton.php +++ b/modules/ppcp-button/src/Assets/SmartButton.php @@ -1006,8 +1006,9 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages 'id' => CardButtonGateway::ID, 'wrapper' => '#ppc-button-' . CardButtonGateway::ID, 'style' => array( - 'shape' => $this->style_for_context( 'shape', $this->context() ), - // TODO: color black, white from the gateway settings. + 'shape' => $this->style_for_apm( 'shape', 'card' ), + 'color' => $this->style_for_apm( 'color', 'card', 'black' ), + 'layout' => $this->style_for_apm( 'poweredby_tagline', 'card', false ) === $this->normalize_style_value( true ) ? 'vertical' : 'horizontal', ), ), ), @@ -1371,6 +1372,21 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages ?? $this->normalize_style_value( $defaults[ $style ] ?? '' ); } + /** + * Determines the style for a given property in a given APM. + * + * @param string $style The name of the style property. + * @param string $apm The APM name, such as 'card'. + * @param ?mixed $default The default value. + * + * @return string + */ + private function style_for_apm( string $style, string $apm, $default = null ): string { + return $this->get_style_value( "${apm}_button_${style}" ) + ?? ( $default ? $this->normalize_style_value( $default ) : null ) + ?? $this->style_for_context( $style, 'checkout' ); + } + /** * Returns the style property value or null. * diff --git a/modules/ppcp-wc-gateway/extensions.php b/modules/ppcp-wc-gateway/extensions.php index 52f00d66a..45a488d86 100644 --- a/modules/ppcp-wc-gateway/extensions.php +++ b/modules/ppcp-wc-gateway/extensions.php @@ -66,6 +66,7 @@ return array( 'paypal-smart-button-fields.php', 'connection-tab-fields.php', 'pay-later-tab-fields.php', + 'card-button-fields.php', ); return array_merge( diff --git a/modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php b/modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php index 03a9c59b6..8cfb07793 100644 --- a/modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php +++ b/modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php @@ -11,6 +11,8 @@ namespace WooCommerce\PayPalCommerce\WcGateway\Assets; use WooCommerce\PayPalCommerce\Onboarding\Environment; use WooCommerce\PayPalCommerce\Subscription\Helper\SubscriptionHelper; +use WooCommerce\PayPalCommerce\WcGateway\Gateway\CardButtonGateway; +use WooCommerce\PayPalCommerce\WcGateway\Gateway\PayPalGateway; /** * Class SettingsPageAssets @@ -181,7 +183,7 @@ class SettingsPageAssets { $section = wc_clean( wp_unslash( $_GET['section'] ?? '' ) ); // phpcs:enable WordPress.Security.NonceVerification.Recommended - return 'checkout' === $tab && 'ppcp-gateway' === $section; + return 'checkout' === $tab && in_array( $section, array( PayPalGateway::ID, CardButtonGateway::ID ), true ); } /** diff --git a/modules/ppcp-wc-gateway/src/Settings/Fields/card-button-fields.php b/modules/ppcp-wc-gateway/src/Settings/Fields/card-button-fields.php new file mode 100644 index 000000000..82ce4b341 --- /dev/null +++ b/modules/ppcp-wc-gateway/src/Settings/Fields/card-button-fields.php @@ -0,0 +1,109 @@ +get( 'wcgateway.current-ppcp-settings-page-id' ); + + if ( $current_page_id !== CardButtonGateway::ID ) { + return $fields; + } + + $new_fields = array( + 'card_button_styling_heading' => array( + 'heading' => __( 'Standard Card Button Styling', 'woocommerce-paypal-payments' ), + 'description' => sprintf( + // translators: %1$s and %2$s are the opening and closing of HTML tag. + __( + 'Customize the appearance of the Standard Card Button on the %1$sCheckout page%2$s.', + 'woocommerce-paypal-payments' + ), + '', + '', + '' + ), + 'type' => 'ppcp-heading', + 'screens' => array( + State::STATE_START, + State::STATE_ONBOARDED, + ), + 'requirements' => array(), + 'gateway' => CardButtonGateway::ID, + ), + 'card_button_poweredby_tagline' => array( + 'title' => __( 'Tagline', 'woocommerce-paypal-payments' ), + 'type' => 'checkbox', + 'label' => __( 'Enable "Powered by PayPal" tagline', 'woocommerce-paypal-payments' ), + 'default' => false, + 'desc_tip' => true, + 'description' => __( + 'Add the "Powered by PayPal" line below the button.', + 'woocommerce-paypal-payments' + ), + 'screens' => array( + State::STATE_START, + State::STATE_ONBOARDED, + ), + 'requirements' => array(), + 'gateway' => CardButtonGateway::ID, + ), + 'card_button_color' => array( + 'title' => __( 'Color', 'woocommerce-paypal-payments' ), + 'type' => 'select', + 'class' => array(), + 'input_class' => array( 'wc-enhanced-select' ), + 'default' => 'black', + 'desc_tip' => true, + 'description' => __( + 'Controls the background color of the button. Change it to match your site design or aesthetic.', + 'woocommerce-paypal-payments' + ), + 'options' => array( + 'black' => __( 'Black', 'woocommerce-paypal-payments' ), + 'white' => __( 'White', 'woocommerce-paypal-payments' ), + ), + 'screens' => array( + State::STATE_START, + State::STATE_ONBOARDED, + ), + 'requirements' => array(), + 'gateway' => CardButtonGateway::ID, + ), + 'card_button_shape' => array( + 'title' => __( 'Shape', 'woocommerce-paypal-payments' ), + 'type' => 'select', + 'class' => array(), + 'input_class' => array( 'wc-enhanced-select' ), + 'default' => 'rect', + 'desc_tip' => true, + 'description' => __( + 'The pill-shaped button\'s unique and powerful shape signifies PayPal in people\'s minds. Use the rectangular button as an alternative when pill-shaped buttons might pose design challenges.', + 'woocommerce-paypal-payments' + ), + 'options' => array( + 'pill' => __( 'Pill', 'woocommerce-paypal-payments' ), + 'rect' => __( 'Rectangle', 'woocommerce-paypal-payments' ), + ), + 'screens' => array( + State::STATE_START, + State::STATE_ONBOARDED, + ), + 'requirements' => array(), + 'gateway' => CardButtonGateway::ID, + ), + ); + + return array_merge( $fields, $new_fields ); +};