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 7

✨ Implement logic for the enable buttons checkbox

Browse source
This commit is contained in:
Philipp Stracker 2025-01-17 16:17:33 +01:00
parent 2eac7bc5c9
commit 5c371d928e
No known key found for this signature in database
3 changed files with 37 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,7 +10,8 @@ import {
} from '../Layout';
const LocationSelector = ( { location, setLocation } ) => {
const { choices, details } = StylingHooks.useLocationProps( location );
const { choices, details, isActive, setActive } =
StylingHooks.useLocationProps( location );
const activateCheckbox = {
value: 'active',
@ -51,7 +52,8 @@ const LocationSelector = ( { location, setLocation } ) => {
className="location-activation"
separatorAndGap={ false }
options={ [ activateCheckbox ] }
value={ 'active' }
value={ isActive }
onChange={ setActive }
/>
</>
);

40
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js
View file

@ -6,16 +6,36 @@ import {
ButtonLabel,
ButtonColor,
} from './Content';
import { StylingHooks } from '../../../../../data';
const SettingsPanel = ( { location, setLocation } ) => (
<div className="settings-panel">
<LocationSelector location={ location } setLocation={ setLocation } />
<PaymentMethods location={ location } />
<ButtonLayout location={ location } />
<ButtonShape location={ location } />
<ButtonLabel location={ location } />
<ButtonColor location={ location } />
</div>
);
const SettingsPanel = ( { location, setLocation } ) => {
const { isActive } = StylingHooks.useLocationProps( location );
const LocationDetails = () => {
if ( ! isActive ) {
return null;
}
return (
<>
<PaymentMethods location={ location } />
<ButtonLayout location={ location } />
<ButtonShape location={ location } />
<ButtonLabel location={ location } />
<ButtonColor location={ location } />
</>
);
};
return (
<div className="settings-panel">
<LocationSelector
location={ location }
setLocation={ setLocation }
/>
<LocationDetails />
</div>
);
};
export default SettingsPanel;

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

@ -83,11 +83,14 @@ export const useStylingLocation = () => {
};
export const useLocationProps = ( location ) => {
const { getLocationProp, setLocationProp } = useHooks();
const details = STYLING_LOCATIONS[ location ] ?? {};
return {
choices: Object.values( STYLING_LOCATIONS ),
details,
isActive: getLocationProp( location, 'enabled' ),
setActive: ( state ) => setLocationProp( location, 'enabled', state ),
};
};