mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 18:16:38 +08:00
♻️ Move dummy hook into redux store
This commit is contained in:
Philipp Stracker
parent
8755242530
commit
bd14ea441e
4 changed files with 111 additions and 118 deletions
|
|
@ -1,15 +1,13 @@
|
|||
import { SelectControl } from '@wordpress/components';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
|
||||
// Dummy hook.
|
||||
import { useStylingProps } from '../../Tabs/TabStyling';
|
||||
|
||||
import { StylingHooks } from '../../../../../data';
|
||||
import { Description } from '../../../../ReusableComponents/SettingsBlocks';
|
||||
import StylingSection from './StylingSection';
|
||||
import StylingSectionWithSelect from './StylingSectionWithSelect';
|
||||
|
||||
const LocationSelector = ( { location, setLocation } ) => {
|
||||
const { locationChoices, locationDetails } = useStylingProps( location );
|
||||
const { locationChoices, locationDetails } =
|
||||
StylingHooks.useStylingProps( location );
|
||||
const { description, link } = locationDetails || {};
|
||||
const locationDescription = sprintf( description, link );
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
// Dummy hook.
|
||||
import { useStylingLocation, useStylingProps } from '../../Tabs/TabStyling';
|
||||
|
||||
import { StylingHooks } from '../../../../../data';
|
||||
import LocationSelector from './LocationSelector';
|
||||
import StylingSectionWithSelect from './StylingSectionWithSelect';
|
||||
import StylingSectionWithCheckboxes from './StylingSectionWithCheckboxes';
|
||||
import StylingSectionWithRadiobuttons from './StylingSectionWithRadiobuttons';
|
||||
|
||||
const SettingsPanel = () => {
|
||||
const { location, setLocation } = useStylingLocation();
|
||||
const { location, setLocation } = StylingHooks.useStylingLocation();
|
||||
|
||||
return (
|
||||
<div className="settings-panel">
|
||||
|
|
@ -33,7 +31,7 @@ export default SettingsPanel;
|
|||
|
||||
const SectionPaymentMethods = ( { location } ) => {
|
||||
const { paymentMethods, setPaymentMethods, paymentMethodChoices } =
|
||||
useStylingProps( location );
|
||||
StylingHooks.useStylingProps( location );
|
||||
|
||||
return (
|
||||
<StylingSectionWithCheckboxes
|
||||
|
|
@ -48,7 +46,7 @@ const SectionPaymentMethods = ( { location } ) => {
|
|||
|
||||
const SectionButtonLayout = ( { location } ) => {
|
||||
const { supportsLayout, layout, setLayout, layoutChoices } =
|
||||
useStylingProps( location );
|
||||
StylingHooks.useStylingProps( location );
|
||||
|
||||
if ( ! supportsLayout ) {
|
||||
return null;
|
||||
|
|
@ -66,7 +64,8 @@ const SectionButtonLayout = ( { location } ) => {
|
|||
};
|
||||
|
||||
const SectionButtonShape = ( { location } ) => {
|
||||
const { shape, setShape, shapeChoices } = useStylingProps( location );
|
||||
const { shape, setShape, shapeChoices } =
|
||||
StylingHooks.useStylingProps( location );
|
||||
|
||||
return (
|
||||
<StylingSectionWithRadiobuttons
|
||||
|
|
@ -80,7 +79,8 @@ const SectionButtonShape = ( { location } ) => {
|
|||
};
|
||||
|
||||
const SectionButtonLabel = ( { location } ) => {
|
||||
const { label, setLabel, labelChoices } = useStylingProps( location );
|
||||
const { label, setLabel, labelChoices } =
|
||||
StylingHooks.useStylingProps( location );
|
||||
|
||||
return (
|
||||
<StylingSectionWithSelect
|
||||
|
|
@ -94,7 +94,8 @@ const SectionButtonLabel = ( { location } ) => {
|
|||
};
|
||||
|
||||
const SectionButtonColor = ( { location } ) => {
|
||||
const { color, setColor, colorChoices } = useStylingProps( location );
|
||||
const { color, setColor, colorChoices } =
|
||||
StylingHooks.useStylingProps( location );
|
||||
|
||||
return (
|
||||
<StylingSectionWithSelect
|
||||
|
|
@ -109,7 +110,7 @@ const SectionButtonColor = ( { location } ) => {
|
|||
|
||||
const SectionButtonTagline = ( { location } ) => {
|
||||
const { supportsTagline, tagline, setTagline, taglineChoices } =
|
||||
useStylingProps( location );
|
||||
StylingHooks.useStylingProps( location );
|
||||
|
||||
if ( ! supportsTagline ) {
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,3 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import { useCallback, useState } from '@wordpress/element';
|
||||
|
||||
import {
|
||||
STYLING_COLORS,
|
||||
STYLING_LABELS,
|
||||
STYLING_LAYOUTS,
|
||||
STYLING_LOCATIONS,
|
||||
STYLING_PAYMENT_METHODS,
|
||||
STYLING_SHAPES,
|
||||
} from '../../../../data';
|
||||
|
||||
import PreviewPanel from '../Components/Styling/PreviewPanel';
|
||||
import SettingsPanel from '../Components/Styling/SettingsPanel';
|
||||
|
||||
|
|
@ -21,93 +9,3 @@ const TabStyling = () => (
|
|||
);
|
||||
|
||||
export default TabStyling;
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Temporary "hook" to extract logic before moving it to the Redux store.
|
||||
export const useStylingLocation = () => {
|
||||
const [ location, setLocation ] = useState( 'cart' );
|
||||
|
||||
return { location, setLocation };
|
||||
};
|
||||
|
||||
export const useStylingProps = ( location ) => {
|
||||
const defaultStyle = {
|
||||
paymentMethods: [],
|
||||
color: 'gold',
|
||||
shape: 'rect',
|
||||
label: 'paypal',
|
||||
layout: 'vertical',
|
||||
tagline: false,
|
||||
};
|
||||
|
||||
const [ styles, setStyles ] = useState( {
|
||||
cart: { ...defaultStyle, label: 'checkout' },
|
||||
'classic-checkout': { ...defaultStyle },
|
||||
'express-checkout': { ...defaultStyle, label: 'pay' },
|
||||
'mini-cart': { ...defaultStyle, label: 'pay' },
|
||||
'product-page': { ...defaultStyle },
|
||||
} );
|
||||
|
||||
const getLocationStyle = useCallback(
|
||||
( prop ) => styles[ location ]?.[ prop ],
|
||||
[ location, styles ]
|
||||
);
|
||||
|
||||
const setLocationStyle = useCallback(
|
||||
( prop, value ) => {
|
||||
setStyles( ( prevState ) => ( {
|
||||
...prevState,
|
||||
[ location ]: {
|
||||
...prevState[ location ],
|
||||
[ prop ]: value,
|
||||
},
|
||||
} ) );
|
||||
},
|
||||
[ location ]
|
||||
);
|
||||
|
||||
return {
|
||||
// Location (drop down).
|
||||
locationChoices: Object.values( STYLING_LOCATIONS ),
|
||||
locationDetails: STYLING_LOCATIONS[ location ],
|
||||
|
||||
// Payment methods (checkboxes).
|
||||
paymentMethodChoices: Object.values( STYLING_PAYMENT_METHODS ),
|
||||
paymentMethods: getLocationStyle( 'paymentMethods' ),
|
||||
setPaymentMethods: ( methods ) =>
|
||||
setLocationStyle( 'paymentMethods', methods ),
|
||||
|
||||
// Color (dropdown).
|
||||
colorChoices: Object.values( STYLING_COLORS ),
|
||||
color: getLocationStyle( 'color' ),
|
||||
setColor: ( color ) => setLocationStyle( 'color', color ),
|
||||
|
||||
// Shape (radio).
|
||||
shapeChoices: Object.values( STYLING_SHAPES ),
|
||||
shape: getLocationStyle( 'shape' ),
|
||||
setShape: ( shape ) => setLocationStyle( 'shape', shape ),
|
||||
|
||||
// Label (dropdown).
|
||||
labelChoices: Object.values( STYLING_LABELS ),
|
||||
label: getLocationStyle( 'label' ),
|
||||
setLabel: ( label ) => setLocationStyle( 'label', label ),
|
||||
|
||||
// Layout (radio).
|
||||
layoutChoices: Object.values( STYLING_LAYOUTS ),
|
||||
supportsLayout: true,
|
||||
layout: getLocationStyle( 'layout' ),
|
||||
setLayout: ( layout ) => setLocationStyle( 'layout', layout ),
|
||||
|
||||
// Tagline (checkbox).
|
||||
taglineChoices: [
|
||||
{
|
||||
value: 'tagline',
|
||||
label: __( 'Enable Tagline', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
],
|
||||
supportsTagline: true,
|
||||
tagline: getLocationStyle( 'tagline' ),
|
||||
setTagline: ( tagline ) => setLocationStyle( 'tagline', tagline ),
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,9 +7,19 @@
|
|||
* @file
|
||||
*/
|
||||
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useCallback, useState } from '@wordpress/element'; // Temporary
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
|
||||
import { STORE_NAME } from './constants';
|
||||
import {
|
||||
STYLING_COLORS,
|
||||
STYLING_LABELS,
|
||||
STYLING_LAYOUTS,
|
||||
STYLING_LOCATIONS,
|
||||
STYLING_PAYMENT_METHODS,
|
||||
STYLING_SHAPES,
|
||||
} from './configuration';
|
||||
|
||||
const useTransient = ( key ) =>
|
||||
useSelect(
|
||||
|
|
@ -42,7 +52,93 @@ const useHooks = () => {
|
|||
};
|
||||
};
|
||||
|
||||
export const useState = () => {
|
||||
export const useStore = () => {
|
||||
const { persist, isReady } = useHooks();
|
||||
return { persist, isReady };
|
||||
};
|
||||
|
||||
export const useStylingLocation = () => {
|
||||
const [ location, setLocation ] = useState( 'cart' );
|
||||
return { location, setLocation };
|
||||
};
|
||||
|
||||
export const useStylingProps = ( location ) => {
|
||||
const defaultStyle = {
|
||||
paymentMethods: [],
|
||||
color: 'gold',
|
||||
shape: 'rect',
|
||||
label: 'paypal',
|
||||
layout: 'vertical',
|
||||
tagline: false,
|
||||
};
|
||||
|
||||
const [ styles, setStyles ] = useState( {
|
||||
cart: { ...defaultStyle, label: 'checkout' },
|
||||
'classic-checkout': { ...defaultStyle },
|
||||
'express-checkout': { ...defaultStyle, label: 'pay' },
|
||||
'mini-cart': { ...defaultStyle, label: 'pay' },
|
||||
'product-page': { ...defaultStyle },
|
||||
} );
|
||||
|
||||
const getLocationStyle = useCallback(
|
||||
( prop ) => styles[ location ]?.[ prop ],
|
||||
[ location, styles ]
|
||||
);
|
||||
|
||||
const setLocationStyle = useCallback(
|
||||
( prop, value ) => {
|
||||
setStyles( ( prevState ) => ( {
|
||||
...prevState,
|
||||
[ location ]: {
|
||||
...prevState[ location ],
|
||||
[ prop ]: value,
|
||||
},
|
||||
} ) );
|
||||
},
|
||||
[ location ]
|
||||
);
|
||||
|
||||
return {
|
||||
// Location (drop down).
|
||||
locationChoices: Object.values( STYLING_LOCATIONS ),
|
||||
locationDetails: STYLING_LOCATIONS[ location ],
|
||||
|
||||
// Payment methods (checkboxes).
|
||||
paymentMethodChoices: Object.values( STYLING_PAYMENT_METHODS ),
|
||||
paymentMethods: getLocationStyle( 'paymentMethods' ),
|
||||
setPaymentMethods: ( methods ) =>
|
||||
setLocationStyle( 'paymentMethods', methods ),
|
||||
|
||||
// Color (dropdown).
|
||||
colorChoices: Object.values( STYLING_COLORS ),
|
||||
color: getLocationStyle( 'color' ),
|
||||
setColor: ( color ) => setLocationStyle( 'color', color ),
|
||||
|
||||
// Shape (radio).
|
||||
shapeChoices: Object.values( STYLING_SHAPES ),
|
||||
shape: getLocationStyle( 'shape' ),
|
||||
setShape: ( shape ) => setLocationStyle( 'shape', shape ),
|
||||
|
||||
// Label (dropdown).
|
||||
labelChoices: Object.values( STYLING_LABELS ),
|
||||
label: getLocationStyle( 'label' ),
|
||||
setLabel: ( label ) => setLocationStyle( 'label', label ),
|
||||
|
||||
// Layout (radio).
|
||||
layoutChoices: Object.values( STYLING_LAYOUTS ),
|
||||
supportsLayout: true,
|
||||
layout: getLocationStyle( 'layout' ),
|
||||
setLayout: ( layout ) => setLocationStyle( 'layout', layout ),
|
||||
|
||||
// Tagline (checkbox).
|
||||
taglineChoices: [
|
||||
{
|
||||
value: 'tagline',
|
||||
label: __( 'Enable Tagline', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
],
|
||||
supportsTagline: true,
|
||||
tagline: getLocationStyle( 'tagline' ),
|
||||
setTagline: ( tagline ) => setLocationStyle( 'tagline', tagline ),
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
