woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 09:08:09 +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'; } from '../Layout';
const LocationSelector = ( { location, setLocation } ) => { const LocationSelector = ( { location, setLocation } ) => {
const { choices, details } = StylingHooks.useLocationProps( location ); const { choices, details, isActive, setActive } =
StylingHooks.useLocationProps( location );
const activateCheckbox = { const activateCheckbox = {
value: 'active', value: 'active',
@ -51,7 +52,8 @@ const LocationSelector = ( { location, setLocation } ) => {
className="location-activation" className="location-activation"
separatorAndGap={ false } separatorAndGap={ false }
options={ [ activateCheckbox ] } 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, ButtonLabel,
ButtonColor, ButtonColor,
} from './Content'; } from './Content';
import { StylingHooks } from '../../../../../data';
const SettingsPanel = ( { location, setLocation } ) => ( const SettingsPanel = ( { location, setLocation } ) => {
<div className="settings-panel"> const { isActive } = StylingHooks.useLocationProps( location );
<LocationSelector location={ location } setLocation={ setLocation } />
<PaymentMethods location={ location } /> const LocationDetails = () => {
<ButtonLayout location={ location } /> if ( ! isActive ) {
<ButtonShape location={ location } /> return null;
<ButtonLabel location={ location } /> }
<ButtonColor location={ location } />
</div> 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; 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 ) => { export const useLocationProps = ( location ) => {
const { getLocationProp, setLocationProp } = useHooks();
const details = STYLING_LOCATIONS[ location ] ?? {}; const details = STYLING_LOCATIONS[ location ] ?? {};
return { return {
choices: Object.values( STYLING_LOCATIONS ), choices: Object.values( STYLING_LOCATIONS ),
details, details,
isActive: getLocationProp( location, 'enabled' ),
setActive: ( state ) => setLocationProp( location, 'enabled', state ),
}; };
}; };