woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 11

💄 New help icon instead of text for location info

Browse source
This commit is contained in:
Philipp Stracker 2025-01-17 15:38:08 +01:00
parent 48c68c1855
commit 962c69905d
No known key found for this signature in database
4 changed files with 25 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

8
modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss
View file

@ -25,6 +25,14 @@
padding-top: 16px;
padding-bottom: var(--block-separator-gap);
margin-bottom: -29px;
.section-content {
display: flex;
& > .components-base-control:first-of-type {
width: 100%;
}
}
}
// Select-fields have a smaller gap between the header and input field.

13
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js
View file

@ -1,11 +1,12 @@
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { help } from '@wordpress/icons';
import { StylingHooks } from '../../../../../../data';
import { Description } from '../../../../../ReusableComponents/SettingsBlocks';
import { SelectStylingSection, StylingSection } from '../Layout';
const LocationSelector = ( { location, setLocation } ) => {
const { choices, description } = StylingHooks.useLocationProps( location );
const { choices, details } = StylingHooks.useLocationProps( location );
return (
<>
@ -26,7 +27,13 @@ const LocationSelector = ( { location, setLocation } ) => {
value={ location }
onChange={ setLocation }
>
<Description asHtml={ true }>{ description }</Description>
{ details.link && (
<Button
icon={ help }
href={ details.link }
target="_blank"
/>
) }
</SelectStylingSection>
</>
);

37
modules/ppcp-settings/resources/js/data/styling/configuration.js
View file

@ -10,56 +10,31 @@ export const STYLING_LOCATIONS = {
cart: {
value: 'cart',
label: __( 'Cart', 'woocommerce-paypal-payments' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Cart page</a>.',
'wooocommerce-paypal-payments'
),
link: '#',
link: 'https://woocommerce.com/document/woocommerce-paypal-payments/#button-on-cart',
props: { layout: false, tagline: false },
},
'classic-checkout': {
value: 'classic-checkout',
label: __( 'Classic Checkout', 'woocommerce-paypal-payments' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Classic Checkout page</a>.',
'wooocommerce-paypal-payments'
),
link: '#',
link: 'https://woocommerce.com/document/woocommerce-paypal-payments/#button-on-checkout',
props: { layout: true, tagline: true },
},
'express-checkout': {
value: 'express-checkout',
label: __( 'Express Checkout', 'woocommerce-paypal-payments' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Express Checkout location</a>.',
'wooocommerce-paypal-payments'
),
link: '#',
link: 'https://woocommerce.com/document/woocommerce-paypal-payments/#button-on-block-express-checkout',
props: { layout: false, tagline: false },
},
'mini-cart': {
value: 'mini-cart',
label: __( 'Mini Cart', 'woocommerce-paypel-payements' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Mini Cart</a>.',
'wooocommerce-paypal-payments'
),
link: '#',
link: 'https://woocommerce.com/document/woocommerce-paypal-payments/#button-on-mini-cart',
props: { layout: true, tagline: true },
},
product: {
value: 'product',
label: __( 'Product Page', 'woocommerce-paypal-payments' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Product Page</a>.',
'wooocommerce-paypal-payments'
),
link: '#',
link: 'https://woocommerce.com/document/woocommerce-paypal-payments/#button-on-single-product',
props: { layout: true, tagline: true },
},
};
@ -138,10 +113,12 @@ export const STYLING_PAYMENT_METHODS = {
venmo: {
value: 'venmo',
label: __( 'Venmo', 'woocommerce-paypal-payments' ),
isFunding: true,
},
paylater: {
value: 'paylater',
label: __( 'Pay Later', 'woocommerce-paypal-payments' ),
isFunding: true,
},
googlepay: {
value: 'googlepay',

4
modules/ppcp-settings/resources/js/data/styling/hooks.js
View file

@ -85,13 +85,9 @@ export const useStylingLocation = () => {
export const useLocationProps = ( location ) => {
const details = STYLING_LOCATIONS[ location ] ?? {};
// eslint-disable-next-line @wordpress/valid-sprintf
const description = sprintf( details.description ?? '', details.link );
return {
choices: Object.values( STYLING_LOCATIONS ),
details,
description,
};
};