woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

♻️ Consolidate preview-HTML in a new setting type

Browse source
This commit is contained in:
Philipp Stracker 2024-06-27 18:00:37 +02:00
parent 4214821eb1
commit d2f0cb1c31
No known key found for this signature in database
8 changed files with 152 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

15
modules/ppcp-applepay/extensions.php
View file

@ -337,14 +337,13 @@ return array(
'requirements' => array(),
),
'applepay_button_preview' => array(
'type' => 'ppcp-text',
'text' => sprintf(
'
<div class="ppcp-preview ppcp-button-preview" data-ppcp-apm-preview="%1$s">
<h4>' . __( 'Button Styling Preview', 'woocommerce-paypal-payments' ) . '</h4>
<div id="ppcp%1$sButtonPreview" class="ppcp-button-preview-inner"></div>
</div>',
$apm_name
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcp' . $apm_name . 'ButtonPreview',
'type' => 'button',
'message' => __( 'Button Styling Preview', 'woocommerce-paypal-payments' ),
'apm' => $apm_name,
'single' => true,
),
'screens' => array(
State::STATE_ONBOARDED,

15
modules/ppcp-googlepay/extensions.php
View file

@ -235,14 +235,13 @@ return array(
'requirements' => array(),
),
'googlepay_button_preview' => array(
'type' => 'ppcp-text',
'text' => sprintf(
'
<div class="ppcp-preview ppcp-button-preview" data-ppcp-apm-preview="%1$s">
<h4>' . __( 'Button Styling Preview', 'woocommerce-paypal-payments' ) . '</h4>
<div id="ppcp%1$sButtonPreview" class="ppcp-button-preview-inner"></div>
</div>',
$apm_name
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcp' . $apm_name . 'ButtonPreview',
'type' => 'button',
'message' => __( 'Button Styling Preview', 'woocommerce-paypal-payments' ),
'apm' => $apm_name,
'single' => true,
),
'screens' => array(
State::STATE_ONBOARDED,

2
modules/ppcp-wc-gateway/resources/css/gateway-settings.scss
View file

@ -8,7 +8,7 @@
margin-right: -28px;
// Preview box showing a single button.
&[data-ppcp-apm-preview] {
&.ppcp-preview-single {
height: 82px;
@media (min-width: 1200px) {

4
modules/ppcp-wc-gateway/resources/js/gateway-settings.js
View file

@ -349,8 +349,8 @@ document.addEventListener(
*
* Example: See the ppcp-google-pay "extensions.php" file.
*/
document.querySelectorAll('[data-ppcp-apm-preview]').forEach(item => {
const apmName = item.dataset.ppcpApmPreview;
document.querySelectorAll('[data-ppcp-preview-block]').forEach(item => {
const apmName = item.dataset.ppcpPreviewBlock;
const getSettings = buttonSettingsGetterFactory(apmName)
const renderButtonPreview = buttonRefreshTriggerFactory(apmName);

16
modules/ppcp-wc-gateway/src/Settings/Fields/card-button-fields.php
View file

@ -21,14 +21,6 @@ return function ( ContainerInterface $container, array $fields ): array {
return $fields;
}
$render_preview_element = function ( string $id ): string {
return '
<div class="ppcp-preview ppcp-button-preview">
<h4>' . __( 'Standard Card Button Styling Preview', 'woocommerce-paypal-payments' ) . '</h4>
<div id="' . $id . '" class="ppcp-button-preview-inner"></div>
</div>';
};
$new_fields = array(
'card_button_styling_heading' => array(
'heading' => __( 'Standard Card Button Styling', 'woocommerce-paypal-payments' ),
@ -112,8 +104,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => CardButtonGateway::ID,
),
'card_button_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpCardButtonPreview' ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpCardButtonPreview',
'type' => 'button',
'message' => __( 'Standard Card Button Styling Preview', 'woocommerce-paypal-payments' ),
),
'screens' => array(
State::STATE_ONBOARDED,
),

64
modules/ppcp-wc-gateway/src/Settings/Fields/pay-later-tab-fields.php
View file

@ -35,13 +35,6 @@ return function ( ContainerInterface $container, array $fields ): array {
$default_messaging_flex_color = $selected_country === 'US' ? 'white-no-border' : 'white';
$button_message = __( 'Pay Later Button Preview', 'woocommerce-paypal-payments' );
$messaging_message = __( 'Pay Later Messaging Preview', 'woocommerce-paypal-payments' );
$render_preview_element = function ( string $id, string $type, string $message ): string {
return '
<div class="ppcp-preview ppcp-' . $type . '-preview pay-later">
<h4>' . $message . '</h4>
<div id="' . $id . '" class="ppcp-' . $type . '-preview-inner"></div>
</div>';
};
$pay_later_fields = array(
// Messaging.
@ -193,8 +186,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => Settings::PAY_LATER_TAB_ID,
),
'pay_later_general_message_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpGeneralMessagePreview', 'message', $messaging_message ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpGeneralMessagePreview',
'type' => 'message',
'message' => $messaging_message,
),
'screens' => array( State::STATE_ONBOARDED ),
'requirements' => array( 'messages' ),
'gateway' => Settings::PAY_LATER_TAB_ID,
@ -317,8 +314,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => Settings::PAY_LATER_TAB_ID,
),
'pay_later_product_message_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpProductMessagePreview', 'message', $messaging_message ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpProductMessagePreview',
'type' => 'message',
'message' => $messaging_message,
),
'screens' => array( State::STATE_ONBOARDED ),
'requirements' => array( 'messages' ),
'gateway' => Settings::PAY_LATER_TAB_ID,
@ -441,8 +442,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => Settings::PAY_LATER_TAB_ID,
),
'pay_later_cart_message_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpCartMessagePreview', 'message', $messaging_message ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpCartMessagePreview',
'type' => 'message',
'message' => $messaging_message,
),
'screens' => array( State::STATE_ONBOARDED ),
'requirements' => array( 'messages' ),
'gateway' => Settings::PAY_LATER_TAB_ID,
@ -565,8 +570,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => Settings::PAY_LATER_TAB_ID,
),
'pay_later_checkout_message_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpCheckoutMessagePreview', 'message', $messaging_message ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpCheckoutMessagePreview',
'type' => 'message',
'message' => $messaging_message,
),
'screens' => array( State::STATE_ONBOARDED ),
'requirements' => array( 'messages' ),
'gateway' => Settings::PAY_LATER_TAB_ID,
@ -689,8 +698,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => Settings::PAY_LATER_TAB_ID,
),
'pay_later_shop_message_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpShopMessagePreview', 'message', $messaging_message ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpShopMessagePreview',
'type' => 'message',
'message' => $messaging_message,
),
'screens' => array( State::STATE_ONBOARDED ),
'requirements' => array( 'messages' ),
'gateway' => Settings::PAY_LATER_TAB_ID,
@ -813,8 +826,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => Settings::PAY_LATER_TAB_ID,
),
'pay_later_home_message_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpHomeMessagePreview', 'message', $messaging_message ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpHomeMessagePreview',
'type' => 'message',
'message' => $messaging_message,
),
'screens' => array( State::STATE_ONBOARDED ),
'requirements' => array( 'messages' ),
'gateway' => Settings::PAY_LATER_TAB_ID,
@ -857,8 +874,13 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => Settings::PAY_LATER_TAB_ID,
),
'pay_later_button_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpPayLaterButtonPreview', 'button', $button_message ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpPayLaterButtonPreview',
'type' => 'button',
'message' => $button_message,
'apm' => 'paylater',
),
'screens' => array( State::STATE_ONBOARDED ),
'requirements' => array( 'messages' ),
'gateway' => Settings::PAY_LATER_TAB_ID,

64
modules/ppcp-wc-gateway/src/Settings/Fields/paypal-smart-button-fields.php
View file

@ -28,13 +28,7 @@ return function ( ContainerInterface $container, array $fields ): array {
$has_enabled_separate_button_gateways = $container->get( 'wcgateway.settings.has_enabled_separate_button_gateways' );
$render_preview_element = function ( string $id ): string {
return '
<div class="ppcp-preview ppcp-button-preview">
<h4>' . __( 'Button Styling Preview', 'woocommerce-paypal-payments' ) . '</h4>
<div id="' . $id . '" class="ppcp-button-preview-inner"></div>
</div>';
};
$preview_message = __( 'Standard Card Button Styling Preview', 'woocommerce-paypal-payments' );
$axo_smart_button_location_notice = $container->has( 'axo.smart-button-location-notice' ) ? $container->get( 'axo.smart-button-location-notice' ) : '';
@ -213,8 +207,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => 'paypal',
),
'button_general_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpGeneralButtonPreview' ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpGeneralButtonPreview',
'type' => 'button',
'message' => $preview_message,
),
'screens' => array(
State::STATE_ONBOARDED,
),
@ -359,8 +357,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => 'paypal',
),
'button_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpCheckoutButtonPreview' ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpCheckoutButtonPreview',
'type' => 'button',
'message' => $preview_message,
),
'screens' => array(
State::STATE_ONBOARDED,
),
@ -499,8 +501,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => 'paypal',
),
'button_product_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpProductButtonPreview' ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpProductButtonPreview',
'type' => 'button',
'message' => $preview_message,
),
'screens' => array(
State::STATE_ONBOARDED,
),
@ -639,8 +645,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => 'paypal',
),
'button_cart_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpCartButtonPreview' ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpCartButtonPreview',
'type' => 'button',
'message' => $preview_message,
),
'screens' => array(
State::STATE_ONBOARDED,
),
@ -796,8 +806,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => 'paypal',
),
'button_mini-cart_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpMiniCartButtonPreview' ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpMiniCartButtonPreview',
'type' => 'button',
'message' => $preview_message,
),
'screens' => array(
State::STATE_ONBOARDED,
),
@ -914,8 +928,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => 'paypal',
),
'button_checkout-block-express_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpCheckoutBlockExpressButtonPreview' ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpCheckoutBlockExpressButtonPreview',
'type' => 'button',
'message' => $preview_message,
),
'screens' => array(
State::STATE_ONBOARDED,
),
@ -1032,8 +1050,12 @@ return function ( ContainerInterface $container, array $fields ): array {
'gateway' => 'paypal',
),
'button_cart-block_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpCartBlockButtonPreview' ),
'type' => 'ppcp-preview',
'preview' => array(
'id' => 'ppcpCartBlockButtonPreview',
'type' => 'button',
'message' => $preview_message,
),
'screens' => array(
State::STATE_ONBOARDED,
),

48
modules/ppcp-wc-gateway/src/Settings/SettingsRenderer.php
View file

@ -437,11 +437,18 @@ $data_rows_html
</th>
<?php endif; ?>
<td colspan="<?php echo (int) $colspan; ?>">
<?php
'ppcp-text' === $config['type'] ?
$this->render_text( $config )
: woocommerce_form_field( $key, $config, $value );
?>
<?php
switch ( $config['type'] ) {
case 'ppcp-text':
$this->render_text( $config );
break;
case 'ppcp-preview':
$this->render_preview_block( $config );
break;
default:
woocommerce_form_field( $key, $config, $value );
}
?>
<?php if ( $description ) : ?>
<p class="<?php echo 'ppcp-heading' === $config['type'] ? '' : 'description'; ?>"><?php echo wp_kses_post( $description ); ?></p>
@ -493,6 +500,37 @@ $data_rows_html
}
}
/**
* Renders a preview block to render the (live) preview of a payment button.
*
* @param array $config The configuration array.
*/
private function render_preview_block( array $config ) {
$id = $config['preview']['id'] ?? '';
$type = $config['preview']['type'] ?? 'button';
$message = $config['preview']['message'] ?? __( 'Button Styling Preview', 'woocommerce-paypal-payments' );
$classes = array( "ppcp-$type-preview" );
$which = $config['preview']['apm'] ?? '';
// Layout class that limits the height and modifies the bottom-position of the box.
if ( ! empty( $config['preview']['single'] ) ) {
$classes[] = 'ppcp-preview-single';
}
printf(
'<div class="ppcp-preview %1$s" %5$s>
<h4>%2$s</h4>
<div id="%3$s" class="ppcp-%4$s-preview-inner"></div>
</div>',
esc_attr( implode( ' ', $classes ) ), // 1
esc_html( $message ), // 2
esc_attr( $id ), // 3
esc_attr( $type ), // 4
// Used by JS to determine which preview buttons are displayed in the box:
$which ? 'data-ppcp-preview-block="' . esc_attr( $which ) . '"' : '' // 5
);
}
/**
* Renders the information that the PayPal account can not yet process DCC.
*/