Add location-specific configuration

This commit is contained in:
Philipp Stracker 2025-01-17 13:20:58 +01:00
parent 4b47084aa2
commit 0428dd08aa
No known key found for this signature in database
3 changed files with 12 additions and 6 deletions

View file

@ -16,6 +16,7 @@ export const STYLING_LOCATIONS = {
'wooocommerce-paypal-payments' 'wooocommerce-paypal-payments'
), ),
link: '#', link: '#',
props: { layout: false, tagline: false },
}, },
'classic-checkout': { 'classic-checkout': {
value: 'classic-checkout', value: 'classic-checkout',
@ -26,6 +27,7 @@ export const STYLING_LOCATIONS = {
'wooocommerce-paypal-payments' 'wooocommerce-paypal-payments'
), ),
link: '#', link: '#',
props: { layout: true, tagline: true },
}, },
'express-checkout': { 'express-checkout': {
value: 'express-checkout', value: 'express-checkout',
@ -36,6 +38,7 @@ export const STYLING_LOCATIONS = {
'wooocommerce-paypal-payments' 'wooocommerce-paypal-payments'
), ),
link: '#', link: '#',
props: { layout: false, tagline: false },
}, },
'mini-cart': { 'mini-cart': {
value: 'mini-cart', value: 'mini-cart',
@ -46,6 +49,7 @@ export const STYLING_LOCATIONS = {
'wooocommerce-paypal-payments' 'wooocommerce-paypal-payments'
), ),
link: '#', link: '#',
props: { layout: true, tagline: true },
}, },
product: { product: {
value: 'product', value: 'product',
@ -56,6 +60,7 @@ export const STYLING_LOCATIONS = {
'wooocommerce-paypal-payments' 'wooocommerce-paypal-payments'
), ),
link: '#', link: '#',
props: { layout: true, tagline: true },
}, },
}; };

View file

@ -138,10 +138,11 @@ export const useLabelProps = ( location ) => {
export const useLayoutProps = ( location ) => { export const useLayoutProps = ( location ) => {
const { getLocationProp, setLocationProp } = useHooks(); const { getLocationProp, setLocationProp } = useHooks();
const { details } = useLocationProps( location );
return { return {
choices: Object.values( STYLING_LAYOUTS ), choices: Object.values( STYLING_LAYOUTS ),
isAvailable: true, isAvailable: false !== details.props.layout,
layout: getLocationProp( location, 'layout' ), layout: getLocationProp( location, 'layout' ),
setLayout: ( layout ) => setLocationProp( location, 'layout', layout ), setLayout: ( layout ) => setLocationProp( location, 'layout', layout ),
}; };
@ -149,6 +150,7 @@ export const useLayoutProps = ( location ) => {
export const useTaglineProps = ( location ) => { export const useTaglineProps = ( location ) => {
const { getLocationProp, setLocationProp } = useHooks(); const { getLocationProp, setLocationProp } = useHooks();
const { details } = useLocationProps( location );
return { return {
choices: [ choices: [
@ -157,7 +159,10 @@ export const useTaglineProps = ( location ) => {
label: __( 'Enable Tagline', 'woocommerce-paypal-payments' ), label: __( 'Enable Tagline', 'woocommerce-paypal-payments' ),
}, },
], ],
isAvailable: true, isAvailable:
false !== details.props.tagline &&
STYLING_LAYOUTS.horizontal.value ===
getLocationProp( location, 'layout' ),
tagline: getLocationProp( location, 'tagline' ), tagline: getLocationProp( location, 'tagline' ),
setTagline: ( tagline ) => setTagline: ( tagline ) =>
setLocationProp( location, 'tagline', tagline ), setLocationProp( location, 'tagline', tagline ),

View file

@ -33,8 +33,6 @@ const defaultPersistent = Object.freeze( {
label: STYLING_LABELS.pay.value, label: STYLING_LABELS.pay.value,
shape: STYLING_SHAPES.rect.value, shape: STYLING_SHAPES.rect.value,
color: STYLING_COLORS.gold.value, color: STYLING_COLORS.gold.value,
layout: STYLING_LAYOUTS.vertical.value,
tagline: false,
} ), } ),
[ STYLING_LOCATIONS[ 'classic-checkout' ].value ]: Object.freeze( { [ STYLING_LOCATIONS[ 'classic-checkout' ].value ]: Object.freeze( {
enabled: true, enabled: true,
@ -51,8 +49,6 @@ const defaultPersistent = Object.freeze( {
label: STYLING_LABELS.checkout.value, label: STYLING_LABELS.checkout.value,
shape: STYLING_SHAPES.rect.value, shape: STYLING_SHAPES.rect.value,
color: STYLING_COLORS.gold.value, color: STYLING_COLORS.gold.value,
layout: STYLING_LAYOUTS.vertical.value,
tagline: false,
} ), } ),
[ STYLING_LOCATIONS[ 'mini-cart' ].value ]: Object.freeze( { [ STYLING_LOCATIONS[ 'mini-cart' ].value ]: Object.freeze( {
enabled: true, enabled: true,