Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated blocks checkout payment method label design #9483

Merged
merged 10 commits into from
Sep 25, 2024
Merged

Updated blocks checkout payment method label design #9483

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4a0705c
WIP Updated blocks checkout label design
gpressutto5 Sep 20, 2024
7e23cc6
WIP Updated blocks checkout label design
gpressutto5 Sep 23, 2024
f8be59d
Using new icons for card only
gpressutto5 Sep 23, 2024
d464b91
Updated Card brand icons
gpressutto5 Sep 23, 2024
ddb4e3f
Using generic card icon for credit card
gpressutto5 Sep 23, 2024
06e410a
Added changelog entry
gpressutto5 Sep 23, 2024
622ef28
Removed unused icons
gpressutto5 Sep 23, 2024
2673bfa
Fixed css
gpressutto5 Sep 23, 2024
91ebb85
Merge branch 'develop' into blocks-checkout-label-design
gpressutto5 Sep 24, 2024
0241d4b
Updated icon_url instead of using conditional in the frontend
gpressutto5 Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/images/payment-method-icons/generic-card.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions changelog/blocks-checkout-label-design
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: add

Redesigned the Payment Method labels for the Blocks Checkout
82 changes: 48 additions & 34 deletions client/checkout/blocks/payment-method-label.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import {
PaymentMethodMessagingElement,
} from '@stripe/react-stripe-js';
import { normalizeCurrencyToMinorUnit } from '../utils';
import { getUPEConfig } from 'wcpay/utils/checkout';
import { __ } from '@wordpress/i18n';
import './style.scss';
import GenericCardIcon from 'assets/images/payment-method-icons/generic-card.svg?asset';

export default ( {
api,
Expand All @@ -16,6 +20,7 @@ export default ( {
} ) => {
const cartData = wp.data.select( 'wc/store/cart' ).getCartData();
const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
const isTestMode = getUPEConfig( 'testMode' );

// Stripe expects the amount to be sent as the minor unit of 2 digits.
const amount = parseInt(
Expand All @@ -32,45 +37,54 @@ export default ( {
window.wcBlocksCheckoutData?.storeCountry ||
'US';

let icon =
upeAppearanceTheme === 'night' ? upeConfig.darkIcon : upeConfig.icon;
if ( upeName === 'card' ) {
icon = GenericCardIcon;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can foresee us having a lot of additional conditionals here to support other updated payment methods. Can we not simply update this icon_url property on the CC_Payment_Method class? I think this icon property is only used at checkout and reusing this parameter would allow us to set this asset in a single place and reuse it in the shortcode checkout as well. 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is also used on the Settings page, so we would need a conditional there if we updated the icon_url. I think using it here is better as we're only using it while we can't remove the brand icons from Stripe. We will still need this conditional when we update it to the multiple brand icons version, as we can't have multiple icons in icon_url.

image

I don't think this will be the case for any other payment method.

Copy link
Contributor

@FangedParakeet FangedParakeet Sep 25, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is also used on the Settings page

On the settings page, AFAIA, that icon is imported separately here from where it is used from this map. WC_Payment_Gateway::get_icon() is used in two places:

  • WC_Payment_Gateway::get_icon_url()
    • This is only used by WC_Payments_Checkout here to provide this to the client, where I believe this icon property is only consumed by our checkout client code that you've currently adapted.
  • WC_Payment_Gateway::get_theme_icon()
    • This is only used to set the gateway's icon property here, which is actually used to set the icon for the shortcode checkout gateway.

As I see it, we can either change the CC_Payment_Method icon_url property here to use the generic icon and share this between shortcode and blocks checkouts or we can ignore this property and set the asset manually on the client, as you've done in this PR. If we choose the second approach, we may no longer have any use for the icon_url property on the CC_Payment_Method class however, though that may not be such a bad thing.

In any case, I don't see that much need to fret over this decision in this PR. I've just created #9487 as a follow-up, so we can let whoever picks up that issue find an answer to this dilemma there. We could still possibly use both approaches and keep the icon_url solely for the shortcode checkout, though this seems like it might get a little redundant.

I don't think this will be the case for any other payment method.

On further consideration, this also seems like a valid point.

We will still need this conditional when we update it to the multiple brand icons version, as we can't have multiple icons in icon_url.

This too, so I think the approach here seems like a valid one.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right! I'm sorry. I got confused because my first thought was to replace the cc.svg file with the new svg, which affected the settings icon.


return (
<>
<span>
{ upeConfig.title }
{ bnplMethods.includes( upeName ) &&
( upeConfig.countries.length === 0 ||
upeConfig.countries.includes( currentCountry ) ) &&
amount > 0 &&
currentCountry && (
<>
<Elements
stripe={ api.getStripeForUPE( upeName ) }
options={ {
appearance: stripeAppearance ?? {},
} }
>
<PaymentMethodMessagingElement
options={ {
amount: amount || 0,
currency:
cartData.totals.currency_code ||
'USD',
paymentMethodTypes: [ upeName ],
countryCode: currentCountry,
displayType: 'promotional_text',
} }
/>
</Elements>
</>
) }
<div className="payment-method-label">
<span className="payment-method-label__label">
{ upeConfig.title }
</span>
{ isTestMode && (
<span className="test-mode badge">
{ __( 'Test Mode', 'woocommerce-payments' ) }
</span>
) }
<img
src={
upeAppearanceTheme === 'night'
? upeConfig.darkIcon
: upeConfig.icon
}
className="payment-methods--logos"
src={ icon }
alt={ upeConfig.title }
/>
</span>
</div>
{ bnplMethods.includes( upeName ) &&
( upeConfig.countries.length === 0 ||
upeConfig.countries.includes( currentCountry ) ) &&
amount > 0 &&
currentCountry && (
<div className="bnpl-message">
<Elements
stripe={ api.getStripeForUPE( upeName ) }
options={ {
appearance: stripeAppearance ?? {},
} }
>
<PaymentMethodMessagingElement
options={ {
amount: amount || 0,
currency:
cartData.totals.currency_code || 'USD',
paymentMethodTypes: [ upeName ],
countryCode: currentCountry,
displayType: 'promotional_text',
} }
/>
</Elements>
</div>
) }
</>
);
};
69 changes: 46 additions & 23 deletions client/checkout/blocks/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,31 +43,58 @@ button.wcpay-stripelink-modal-trigger:hover {
}

.wc-block-checkout__payment-method {
.wc-block-components-radio-control__label span {
width: 95%;
.wc-block-components-radio-control__label {
width: 100%;
display: block !important;

> .payment-method-label {
display: grid !important;
justify-content: normal !important;
grid-template-columns: max-content auto;
grid-template-areas: 'label badge logos';
align-items: center;
gap: 8px;
width: 100%;

&:has( .StripeElement ) {
display: grid;
grid-template-columns: 1fr auto;
}
> .payment-method-label__label {
grid-area: label;
width: 100%;
}

img {
float: right;
border: 0;
padding: 0;
height: 24px;
max-height: 24px;
> .payment-methods--logos {
grid-area: logos;
justify-self: end;
}

> .test-mode.badge {
grid-area: badge;
background-color: #fff2d7;
border-radius: 4px;
padding: 4px 6px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #4d3716;
justify-self: start;
width: max-content;
}

@include breakpoint( '<480px' ) {
grid-template-areas: 'label logos' 'badge badge';
grid-template-columns: 1fr auto;
align-items: start;

.payment-methods--logos {
justify-self: end;
}
}
}

.StripeElement {
.bnpl-message {
width: 100%;
grid-column: 1 / span 2;
grid-row-start: 2;
pointer-events: none;

+ img {
grid-row: 1 / span 2;
grid-column: 2;
@include breakpoint( '<480px' ) {
margin-top: 8px;
}
}
}
Expand All @@ -89,10 +116,6 @@ button.wcpay-stripelink-modal-trigger:hover {
.StripeElement {
display: none;
}
img {
grid-column: 2;
grid-row: 1;
}
}
/* stylelint-disable-next-line selector-id-pattern */
#radio-control-wc-payment-method-options-woocommerce_payments_affirm__label
Expand Down
Loading