woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-12 01:18:39 +08:00
Code Issues Projects Packages Wiki Activity Actions 5

🚧 Refactor the Styling tab

Browse source
This commit is contained in:
Philipp Stracker 2025-01-15 12:25:37 +01:00
parent e9644ba026
commit 491352710e
No known key found for this signature in database
9 changed files with 301 additions and 345 deletions
Download patch file Download diff file Expand all files Collapse all files

308
modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabStyling.js
View file

@ -1,316 +1,22 @@
import { __, sprintf } from '@wordpress/i18n';
import { SelectControl, RadioControl } from '@wordpress/components';
import { PayPalCheckboxGroup } from '../../../ReusableComponents/Fields';
import { useState, useMemo, useEffect } from '@wordpress/element';
import { useState } from '@wordpress/element';

import {
defaultLocationSettings,
paymentMethodOptions,
} from '../../../../data/settings/tab-styling-data';
import {
STYLING_LABELS,
STYLING_COLORS,
STYLING_LAYOUTS,
STYLING_SHAPES,
} from '../../../../data';
import PaymentButtonPreview from '../Components/PaymentButtonPreview';
import { defaultLocationSettings } from '../../../../data/settings/tab-styling-data';

import PreviewPanel from '../Components/Styling/PreviewPanel';
import SettingsPanel from '../Components/Styling/SettingsPanel';

const TabStyling = () => {
const [ location, setLocation ] = useState( 'cart' );
const [ canRender, setCanRender ] = useState( false );
const [ locationSettings, setLocationSettings ] = useState( {
...defaultLocationSettings,
} );

// Sometimes buttons won't render. This fixes the timing problem.
useEffect( () => {
const handleDOMContentLoaded = () => setCanRender( true );
if (
document.readyState === 'interactive' ||
document.readyState === 'complete'
) {
handleDOMContentLoaded();
} else {
document.addEventListener(
'DOMContentLoaded',
handleDOMContentLoaded
);
}
}, [] );

const currentLocationSettings = useMemo( () => {
return locationSettings[ location ];
}, [ location, locationSettings ] );

const locationOptions = useMemo( () => {
return Object.keys( locationSettings ).reduce(
( locationOptionsData, key ) => {
locationOptionsData.push( {
value: locationSettings[ key ].value,
label: locationSettings[ key ].label,
} );

return locationOptionsData;
},
[]
);
}, [ locationSettings ] );

const updateButtonSettings = ( key, value ) => {
setLocationSettings( {
...locationSettings,
[ location ]: {
...currentLocationSettings,
settings: {
...currentLocationSettings.settings,
[ key ]: value,
},
},
} );
};

const updateButtonStyle = ( key, value ) => {
setLocationSettings( {
...locationSettings,
[ location ]: {
...currentLocationSettings,
settings: {
...currentLocationSettings.settings,
style: {
...currentLocationSettings.settings.style,
[ key ]: value,
},
},
},
} );
};

if ( ! canRender ) {
return <></>;
}

return (
<div className="ppcp-r-styling">
<div className="ppcp-r-styling__settings">
<SectionIntro location={ location } />
<SectionLocations
locationOptions={ locationOptions }
location={ location }
setLocation={ setLocation }
/>
<SectionPaymentMethods
locationSettings={ currentLocationSettings }
updateButtonSettings={ updateButtonSettings }
/>
<SettingsPanel />

<SectionButtonLayout
locationSettings={ currentLocationSettings }
updateButtonStyle={ updateButtonStyle }
/>

<SectionButtonShape
locationSettings={ currentLocationSettings }
updateButtonStyle={ updateButtonStyle }
/>
<SectionButtonLabel
locationSettings={ currentLocationSettings }
updateButtonStyle={ updateButtonStyle }
/>
<SectionButtonColor
locationSettings={ currentLocationSettings }
updateButtonStyle={ updateButtonStyle }
/>
<SectionButtonTagline
locationSettings={ currentLocationSettings }
updateButtonStyle={ updateButtonStyle }
/>
</div>
<div className="ppcp-preview ppcp-r-button-preview ppcp-r-styling__preview">
<div className="ppcp-r-styling__preview-inner">
<PaymentButtonPreview
style={ currentLocationSettings.settings.style }
/>
</div>
</div>
<PreviewPanel settings={ locationSettings.settings } />
</div>
);
};

const TabStylingSection = ( props ) => {
let sectionTitleClassName = 'ppcp-r-styling__section';

if ( props?.className ) {
sectionTitleClassName += ` ${ props.className }`;
}

return (
<div className={ sectionTitleClassName }>
<span className="ppcp-r-styling__title">{ props.title }</span>
{ props?.description && (
<p
dangerouslySetInnerHTML={ {
__html: props.description,
} }
className="ppcp-r-styling__description"
/>
) }
{ props.children }
</div>
);
};

const SectionIntro = ( { location } ) => {
const { description, descriptionLink } =
defaultLocationSettings[ location ];
const buttonStyleDescription = sprintf( description, descriptionLink );

return (
<TabStylingSection
className="ppcp-r-styling__section--rc ppcp-r-styling__section--empty"
title={ __( 'Button Styling', 'wooocommerce-paypal-payments' ) }
description={ buttonStyleDescription }
/>
);
};

const SectionLocations = ( { locationOptions, location, setLocation } ) => {
return (
<TabStylingSection className="ppcp-r-styling__section--rc">
<SelectControl
className="ppcp-r-styling__select"
value={ location }
onChange={ ( newLocation ) => setLocation( newLocation ) }
label={ __( 'Locations', 'woocommerce-paypal-payments' ) }
options={ locationOptions }
/>
</TabStylingSection>
);
};

const SectionPaymentMethods = ( {
locationSettings,
updateButtonSettings,
} ) => {
return (
<TabStylingSection
title={ __( 'Payment Methods', 'woocommerce-paypal-payments' ) }
className="ppcp-r-styling__section--rc"
>
<div className="ppcp-r-styling__payment-method-checkboxes">
<PayPalCheckboxGroup
value={ paymentMethodOptions }
changeCallback={ ( newValue ) =>
updateButtonSettings( 'paymentMethods', newValue )
}
currentValue={ locationSettings.settings.paymentMethods }
/>
</div>
</TabStylingSection>
);
};

const SectionButtonLayout = ( { locationSettings, updateButtonStyle } ) => {
const buttonLayoutIsAllowed =
locationSettings.settings.style?.layout &&
locationSettings.settings.style?.tagline === false;
return (
buttonLayoutIsAllowed && (
<TabStylingSection
className="ppcp-r-styling__section--rc"
title={ __( 'Button Layout', 'woocommerce-paypal-payments' ) }
>
<RadioControl
className="ppcp-r__horizontal-control"
onChange={ ( newValue ) =>
updateButtonStyle( 'layout', newValue )
}
selected={ locationSettings.settings.style.layout }
options={ Object.values( STYLING_LAYOUTS ) }
/>
</TabStylingSection>
)
);
};

const SectionButtonShape = ( { locationSettings, updateButtonStyle } ) => {
return (
<TabStylingSection
title={ __( 'Shape', 'woocommerce-paypal-payments' ) }
className="ppcp-r-styling__section--rc"
>
<RadioControl
className="ppcp-r__horizontal-control"
onChange={ ( newValue ) =>
updateButtonStyle( 'shape', newValue )
}
selected={ locationSettings.settings.style.shape }
options={ Object.values( STYLING_SHAPES ) }
/>
</TabStylingSection>
);
};

const SectionButtonLabel = ( { locationSettings, updateButtonStyle } ) => {
return (
<TabStylingSection>
<SelectControl
className="ppcp-r-styling__select"
onChange={ ( newValue ) =>
updateButtonStyle( 'label', newValue )
}
value={ locationSettings.settings.style.label }
label={ __( 'Button Label', 'woocommerce-paypal-payments' ) }
options={ Object.values( STYLING_LABELS ) }
/>
</TabStylingSection>
);
};

const SectionButtonColor = ( { locationSettings, updateButtonStyle } ) => {
return (
<TabStylingSection>
<SelectControl
className=" ppcp-r-styling__select"
label={ __( 'Button Color', 'woocommerce-paypal-payments' ) }
onChange={ ( newValue ) =>
updateButtonStyle( 'color', newValue )
}
value={ locationSettings.settings.style.color }
options={ Object.values( STYLING_COLORS ) }
/>
</TabStylingSection>
);
};

const SectionButtonTagline = ( { locationSettings, updateButtonStyle } ) => {
const taglineIsAllowed =
locationSettings.settings.style.hasOwnProperty( 'tagline' ) &&
locationSettings.settings.style?.layout === 'horizontal';

return (
taglineIsAllowed && (
<TabStylingSection
title={ __( 'Tagline', 'woocommerce-paypal-payments' ) }
className="ppcp-r-styling__section--rc"
>
<PayPalCheckboxGroup
value={ [
{
value: 'tagline',
label: __(
'Enable Tagline',
'woocommerce-paypal-payments'
),
},
] }
changeCallback={ ( newValue ) => {
updateButtonStyle( 'tagline', newValue );
} }
currentValue={ locationSettings.settings.style.tagline }
/>
</TabStylingSection>
)
);
};

export default TabStyling;