diff --git a/modules/ppcp-settings/resources/js/data/styling/configuration.js b/modules/ppcp-settings/resources/js/data/styling/configuration.js index ecb7a3765..eef2f90bf 100644 --- a/modules/ppcp-settings/resources/js/data/styling/configuration.js +++ b/modules/ppcp-settings/resources/js/data/styling/configuration.js @@ -16,6 +16,7 @@ export const STYLING_LOCATIONS = { 'wooocommerce-paypal-payments' ), link: '#', + props: { layout: false, tagline: false }, }, 'classic-checkout': { value: 'classic-checkout', @@ -26,6 +27,7 @@ export const STYLING_LOCATIONS = { 'wooocommerce-paypal-payments' ), link: '#', + props: { layout: true, tagline: true }, }, 'express-checkout': { value: 'express-checkout', @@ -36,6 +38,7 @@ export const STYLING_LOCATIONS = { 'wooocommerce-paypal-payments' ), link: '#', + props: { layout: false, tagline: false }, }, 'mini-cart': { value: 'mini-cart', @@ -46,6 +49,7 @@ export const STYLING_LOCATIONS = { 'wooocommerce-paypal-payments' ), link: '#', + props: { layout: true, tagline: true }, }, product: { value: 'product', @@ -56,6 +60,7 @@ export const STYLING_LOCATIONS = { 'wooocommerce-paypal-payments' ), link: '#', + props: { layout: true, tagline: true }, }, }; diff --git a/modules/ppcp-settings/resources/js/data/styling/hooks.js b/modules/ppcp-settings/resources/js/data/styling/hooks.js index 2e77d41f2..f2bee3952 100644 --- a/modules/ppcp-settings/resources/js/data/styling/hooks.js +++ b/modules/ppcp-settings/resources/js/data/styling/hooks.js @@ -138,10 +138,11 @@ export const useLabelProps = ( location ) => { export const useLayoutProps = ( location ) => { const { getLocationProp, setLocationProp } = useHooks(); + const { details } = useLocationProps( location ); return { choices: Object.values( STYLING_LAYOUTS ), - isAvailable: true, + isAvailable: false !== details.props.layout, layout: getLocationProp( location, 'layout' ), setLayout: ( layout ) => setLocationProp( location, 'layout', layout ), }; @@ -149,6 +150,7 @@ export const useLayoutProps = ( location ) => { export const useTaglineProps = ( location ) => { const { getLocationProp, setLocationProp } = useHooks(); + const { details } = useLocationProps( location ); return { choices: [ @@ -157,7 +159,10 @@ export const useTaglineProps = ( location ) => { label: __( 'Enable Tagline', 'woocommerce-paypal-payments' ), }, ], - isAvailable: true, + isAvailable: + false !== details.props.tagline && + STYLING_LAYOUTS.horizontal.value === + getLocationProp( location, 'layout' ), tagline: getLocationProp( location, 'tagline' ), setTagline: ( tagline ) => setLocationProp( location, 'tagline', tagline ), diff --git a/modules/ppcp-settings/resources/js/data/styling/reducer.js b/modules/ppcp-settings/resources/js/data/styling/reducer.js index 7c553091e..e41cd1e40 100644 --- a/modules/ppcp-settings/resources/js/data/styling/reducer.js +++ b/modules/ppcp-settings/resources/js/data/styling/reducer.js @@ -33,8 +33,6 @@ const defaultPersistent = Object.freeze( { label: STYLING_LABELS.pay.value, shape: STYLING_SHAPES.rect.value, color: STYLING_COLORS.gold.value, - layout: STYLING_LAYOUTS.vertical.value, - tagline: false, } ), [ STYLING_LOCATIONS[ 'classic-checkout' ].value ]: Object.freeze( { enabled: true, @@ -51,8 +49,6 @@ const defaultPersistent = Object.freeze( { label: STYLING_LABELS.checkout.value, shape: STYLING_SHAPES.rect.value, color: STYLING_COLORS.gold.value, - layout: STYLING_LAYOUTS.vertical.value, - tagline: false, } ), [ STYLING_LOCATIONS[ 'mini-cart' ].value ]: Object.freeze( { enabled: true,