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 11

✨ Add UI for the “Enable payment methods” checkbox

Browse source
This commit is contained in:
Philipp Stracker 2025-01-17 16:08:59 +01:00
parent 8b945dab95
commit 365ab7f372
No known key found for this signature in database
2 changed files with 22 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

7
modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss
View file

@ -19,12 +19,9 @@
position: sticky;
top: var(--sticky-offset-top);
background: var(--ppcp-color-app-bg);
border-bottom: 1px solid var(--color-gray-200);
box-shadow: 0 5px 10px 5px var(--ppcp-color-app-bg);
z-index: 5;
padding-top: 16px;
padding-bottom: var(--block-separator-gap);
margin-bottom: -29px;
padding: 16px 10px 8px;
margin: 0 -10px -8px;
.section-content {
display: flex;

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

@ -3,11 +3,23 @@ import { Button } from '@wordpress/components';
import { help } from '@wordpress/icons';
import { StylingHooks } from '../../../../../../data';
import { SelectStylingSection, StylingSection } from '../Layout';
import {
SelectStylingSection,
StylingSection,
CheckboxStylingSection,
} from '../Layout';
const LocationSelector = ( { location, setLocation } ) => {
const { choices, details } = StylingHooks.useLocationProps( location );
const activateCheckbox = {
value: 'active',
label: __(
'Enable payment methods in this location',
'woocommerce-paypal-payments'
),
};
return (
<>
<StylingSection
@ -18,7 +30,7 @@ const LocationSelector = ( { location, setLocation } ) => {
'Customize the appearance of the PayPal smart buttons on your website and choose which payment buttons to display.',
'woocommerce-paypal-payments'
) }
></StylingSection>
/>
<SelectStylingSection
className="location-selector"
title={ __( 'Location', 'woocommerce-paypal-payments' ) }
@ -35,6 +47,12 @@ const LocationSelector = ( { location, setLocation } ) => {
/>
) }
</SelectStylingSection>
<CheckboxStylingSection
className="location-activation"
separatorAndGap={ false }
options={ [ activateCheckbox ] }
value={ 'active' }
/>
</>
);
};