Skip to content

Commit

Permalink
fix: remove 'test mode' badge from shortcode checkout (#9800)
Browse files Browse the repository at this point in the history
  • Loading branch information
@frosso
frosso committed Nov 25, 2024
1 parent 6a6ed19 commit 55f1c68
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 172 deletions.
4 changes: 4 additions & 0 deletions changelog/fix-remove-shortcode-test-mode-badge-from-label
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fix

fix: remove "test mode" badge from shortcode checkout.
66 changes: 39 additions & 27 deletions client/checkout/classic/event-handlers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,43 +159,55 @@ jQuery( function ( $ ) {

async function injectStripePMMEContainers() {
const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
const labelBase = 'payment_method_woocommerce_payments_';
const paymentMethods = getUPEConfig( 'paymentMethodsConfig' );
const paymentMethodsKeys = Object.keys( paymentMethods );
const cartData = await api.pmmeGetCartData();

for ( const method of paymentMethodsKeys ) {
if ( bnplMethods.includes( method ) ) {
const targetLabel = document.querySelector(
`label[for="${ labelBase }${ method }"]`
);
const containerID = `stripe-pmme-container-${ method }`;
const container = document.getElementById( containerID );

if ( ! container ) {
continue;
if ( document.getElementById( containerID ) ) {
document.getElementById( containerID ).innerHTML = '';
}

container.innerHTML = '';
container.dataset.paymentMethodType = method;

const currentCountry =
cartData?.billing_address?.country ||
getUPEConfig( 'storeCountry' );
if (
paymentMethods[ method ]?.countries.length === 0 ||
paymentMethods[ method ]?.countries?.includes(
currentCountry
)
) {
await mountStripePaymentMethodMessagingElement(
api,
container,
{
amount: cartData?.totals?.total_price,
currency: cartData?.totals?.currency_code,
decimalPlaces:
cartData?.totals?.currency_minor_unit,
country: currentCountry,
},
'shortcode_checkout'
);
if ( targetLabel ) {
let container = document.getElementById( containerID );
if ( ! container ) {
container = document.createElement( 'span' );
container.id = containerID;
container.dataset.paymentMethodType = method;
container.classList.add( 'stripe-pmme-container' );
targetLabel.appendChild( container );
}

const currentCountry =
cartData?.billing_address?.country ||
getUPEConfig( 'storeCountry' );

if (
paymentMethods[ method ]?.countries.length === 0 ||
paymentMethods[ method ]?.countries?.includes(
currentCountry
)
) {
await mountStripePaymentMethodMessagingElement(
api,
container,
{
amount: cartData?.totals?.total_price,
currency: cartData?.totals?.currency_code,
decimalPlaces:
cartData?.totals?.currency_minor_unit,
country: currentCountry,
},
'shortcode_checkout'
);
}
}
}
}
Expand Down
139 changes: 44 additions & 95 deletions client/checkout/classic/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,117 +30,66 @@
border: none;
}

.woopayments-rich-payment-method-label {
// this will be displayed only on specific scenarios. Otherwise, the "legacy" label will be displayed.
display: none;
}

#payment .payment_methods {
li[class*='payment_method_woocommerce_payments'] > label > img {
li[class*='payment_method_woocommerce_payments'] label img {
float: right;
border: 0;
padding: 0;
height: 24px !important;
max-height: 24px !important;
}
}

&.wc_payment_methods,
&.woocommerce-PaymentMethods {
li[class*='payment_method_woocommerce_payments'] {
display: grid;
grid-template-columns: 0fr 0fr 1fr;
grid-template-rows: max-content;

.woopayments-plain-payment-method-label {
display: none;
}

> input[name='payment_method'] {
&:checked ~ label {
.payment-method-title {
margin-right: 8px; // 8px gap between .payment-method-title and .test-mode.badge
}
li.wc_payment_method:has( .input-radio:not( :checked )
+ label
.stripe-pmme-container ) {
display: grid;
grid-template-columns: min-content 1fr;
grid-template-rows: auto auto;
align-items: baseline;

.input-radio {
grid-row: 1;
grid-column: 1;
}

.test-mode.badge {
display: inline-block; // hiding the badge when the payment method is not selected
}
label {
grid-column: 2;
grid-row: 1;
}

.stripe-pmme-container {
display: none;
}
}
}
img {
grid-row: 1 / span 2;
align-self: center;
}

> label {
grid-column: 3;
margin-bottom: 0;
}
.stripe-pmme-container {
width: 100%;
grid-column: 1;
grid-row-start: 2;
pointer-events: none;
}

> div.payment_box {
grid-area: 2 / 1 / 3 / 4;
}
.payment_box {
flex: 0 0 100%;
grid-row: 2;
grid-column: 1 / span 2;
}
}

> label:has( .woopayments-rich-payment-method-label ) {
display: inline-flex;
align-items: center;
width: 100%;
li.wc_payment_method:has( .input-radio:checked
+ label
.stripe-pmme-container ) {
display: block;

> img {
display: none; // we'll display the image inside `.woopayments-rich-payment-method-label`, instead.
}
.input-radio:checked {
+ label {
.stripe-pmme-container {
display: none;
}

.woopayments-rich-payment-method-label {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
margin-bottom: 0;
flex-grow: 1;

.label-title-container {
display: block;
}

.payment-method-title {
white-space: normal; // Allows wrapping if text is too long
vertical-align: middle;
}

.test-mode.badge {
display: none;
background-color: #fff2d7;
border-radius: 4px;
padding: 4px 6px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #4d3716;
vertical-align: middle;
white-space: nowrap; // Prevents the badge text from wrapping
}

img {
border: 0;
padding: 0;
height: 24px !important;
max-height: 24px !important;
justify-self: end;
margin: 3px 0; // ensuring the images don't appear squished when all the payment methods are rendered next to each others, like in Elementor.
align-self: center;
}

.stripe-pmme-container {
&:empty {
display: none; // hides container if empty, without affecting alignment
}

margin-left: 0.25em; // WooCommerce Core will add a   on the left of the payment method's label - this spacing ensures that at least it's consistently aligned.
pointer-events: none;
grid-column: 1 / 2;
grid-row: 2 / 3;
align-self: start;
width: 100%;
}
img {
grid-column: 2;
}
}
}
Expand Down
49 changes: 0 additions & 49 deletions includes/class-wc-payment-gateway-wcpay.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -572,46 +572,6 @@ public function init_hooks() {
$this->maybe_init_subscriptions_hooks();
}

/**
* Returns the gateway title
*
* @return string
* */
public function get_title() {
$title = parent::get_title();

if (
( is_checkout() || is_add_payment_method_page() ) &&
! isset( $_GET['change_payment_method'] ) // phpcs:ignore WordPress.Security.NonceVerification
) {
$test_mode_badge = '';
if ( WC_Payments::mode()->is_test() ) {
$test_mode_badge = '<span class="test-mode badge">' . __( 'Test Mode', 'woocommerce-payments' ) . '</span>';
}

$bnpl_messaging_container = '';
if ( $this->payment_method->is_bnpl() ) {
$bnpl_messaging_container = '<span id="stripe-pmme-container-' . $this->payment_method->get_id() . '" class="stripe-pmme-container"></span>';
}

// the "plain" payment method label is displayed on some sections of the app
// - like "pay for order" when a payment method is pre-selected or a payment has previously failed.
$html = '<span class="woopayments-plain-payment-method-label">' . $title . '</span>';
$html .= '<div class="woopayments-rich-payment-method-label">';
$html .= '<div class="label-title-container">';
$html .= '<span class="payment-method-title">&nbsp;' . $title . '</span>';
$html .= $test_mode_badge;
$html .= '</div>';
$html .= $this->get_icon();
$html .= $bnpl_messaging_container;
$html .= '</div>';

return $html;
}

return $title;
}

/**
* Updates icon and title using the account country.
* This method runs on init is not in the controller because get_account_country might
Expand Down Expand Up @@ -3246,15 +3206,6 @@ public function update_fraud_rules_based_on_general_options() {
}
}

/**
* Overriding the base method because the `alt` tag would otherwise output the markup returned by the `get_title()` method in this class - which we don't want.
*
* @return string
*/
public function get_icon() {
return '<img src="' . esc_url( WC_HTTPS::force_https_url( $this->get_theme_icon() ) ) . '" alt="' . esc_attr( $this->payment_method->get_title() ) . ' payment method logo" />';
}

/**
* The URL for the current payment method's icon.
*
Expand Down
1 change: 0 additions & 1 deletion tests/e2e-pw/specs/shopper/klarna-checkout-purchase.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ test.describe( 'Klarna Checkout', () => {
await shopperPage
.locator( '.wc_payment_methods' )
.getByText( 'Klarna' )
.nth( 1 )
.click();

await shopper.placeOrder( shopperPage );
Expand Down

0 comments on commit 55f1c68

Please sign in to comment.