-
-
+
+
+
-
- { props.description && (
+
+ { description && (
) }
- { props?.toggleAdditionalContent &&
- props.children &&
- props.value === props.currentValue && (
-
- { props.children }
-
- ) }
+ { toggleAdditionalContent && children && value === currentValue && (
+
+ { children }
+
+ ) }
);
};
-
-export const handleCheckboxState = ( checked, props ) => {
- let newValue = null;
- if ( ! Array.isArray( props.currentValue ) ) {
- newValue = checked;
- } else if ( checked ) {
- newValue = [ ...props.currentValue, props.value ];
- } else {
- newValue = props.currentValue.filter(
- ( value ) => value !== props.value
- );
- }
- props.changeCallback( newValue );
-};
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/HStack.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/HStack.js
new file mode 100644
index 000000000..2c54ac7da
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/HStack.js
@@ -0,0 +1,26 @@
+/**
+ * Temporary component, until the experimental HStack block editor component is stable.
+ *
+ * @see https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-hstack--docs
+ * @file
+ */
+import classNames from 'classnames';
+
+const HStack = ( { className, spacing = 3, children } ) => {
+ const wrapperClass = classNames(
+ 'components-flex components-h-stack',
+ className
+ );
+
+ const styles = {
+ gap: `calc(${ 4 * spacing }px)`,
+ };
+
+ return (
+
+ { children }
+
+ );
+};
+
+export default HStack;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js
index ec3ba31ae..46048e071 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js
@@ -1,9 +1,24 @@
+import classNames from 'classnames';
+
// Block Elements
-export const Title = ( { children, className = '' } ) => (
-
- { children }
-
-);
+export const Title = ( {
+ children,
+ altStyle = false,
+ big = false,
+ className = '',
+} ) => {
+ const elementClasses = classNames(
+ 'ppcp-r-settings-block__title',
+ className,
+ {
+ 'style-alt': altStyle,
+ 'style-big': big,
+ }
+ );
+
+ return
{ children };
+};
+
export const TitleWrapper = ( { children } ) => (
{ children }
);
@@ -14,13 +29,28 @@ export const SupplementaryLabel = ( { children } ) => (
);
-export const Description = ( { children, className = '' } ) => (
-
- { children }
-
-);
+export const Description = ( { children, asHtml = false, className = '' } ) => {
+ // Don't output anything if description is empty.
+ if ( ! children ) {
+ return null;
+ }
+
+ const elementClasses = classNames(
+ 'ppcp-r-settings-block__description',
+ className
+ );
+
+ if ( ! asHtml ) {
+ return
{ children };
+ }
+
+ return (
+
+ );
+};
export const Action = ( { children } ) => (
{ children }
@@ -33,11 +63,18 @@ export const Header = ( { children, className = '' } ) => (
);
// Card Elements
-export const Content = ( { children, id = '' } ) => (
-
- { children }
-
-);
+export const Content = ( { children, className = '', id = '' } ) => {
+ const elementClasses = classNames(
+ 'ppcp-r-settings-card__content',
+ className
+ );
+
+ return (
+
+ { children }
+
+ );
+};
export const ContentWrapper = ( { children } ) => (
{ children }
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettings.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettings.js
index 1b471fe1e..80d025af8 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettings.js
@@ -1,31 +1,16 @@
-import { useState } from '@wordpress/element';
import ConnectionStatus from './TabSettingsElements/ConnectionStatus';
import CommonSettings from './TabSettingsElements/CommonSettings';
import ExpertSettings from './TabSettingsElements/ExpertSettings';
+import { useSettings } from '../../../data/settings-tab/hooks';
const TabSettings = () => {
- const [ settings, setSettings ] = useState( {
- invoicePrefix: '',
- authorizeOnly: false,
- captureVirtualOnlyOrders: false,
- savePaypalAndVenmo: false,
- saveCreditCardAndDebitCard: false,
- payNowExperience: false,
- sandboxAccountCredentials: false,
- sandboxMode: null,
- sandboxEnabled: false,
- sandboxClientId: '',
- sandboxSecretKey: '',
- sandboxConnected: false,
- logging: false,
- subtotalMismatchFallback: null,
- brandName: '',
- softDescriptor: '',
- paypalLandingPage: null,
- buttonLanguage: '',
- } );
+ const { settings, setSettings } = useSettings();
+
const updateFormValue = ( key, value ) => {
- setSettings( { ...settings, [ key ]: value } );
+ setSettings( {
+ ...settings,
+ [ key ]: value,
+ } );
};
return (
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabStyling.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabStyling.js
deleted file mode 100644
index 7ddd8be7a..000000000
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabStyling.js
+++ /dev/null
@@ -1,336 +0,0 @@
-import { __, sprintf } from '@wordpress/i18n';
-import { SelectControl, RadioControl } from '@wordpress/components';
-import { PayPalCheckboxGroup } from '../../ReusableComponents/Fields';
-import { useState, useMemo, useEffect } from '@wordpress/element';
-import { PayPalScriptProvider, PayPalButtons } from '@paypal/react-paypal-js';
-
-import {
- defaultLocationSettings,
- paymentMethodOptions,
- colorOptions,
- shapeOptions,
- buttonLayoutOptions,
- buttonLabelOptions,
-} from '../../../data/settings/tab-styling-data';
-
-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;
- },
- []
- );
- }, [] );
-
- 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 (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-const TabStylingSection = ( props ) => {
- let sectionTitleClassName = 'ppcp-r-styling__section';
-
- if ( props?.className ) {
- sectionTitleClassName += ` ${ props.className }`;
- }
-
- return (
-
-
{ props.title }
- { props?.description && (
-
- ) }
- { props.children }
-
- );
-};
-
-const SectionIntro = ( { location } ) => {
- const { description, descriptionLink } =
- defaultLocationSettings[ location ];
- const buttonStyleDescription = sprintf( description, descriptionLink );
-
- return (
-
- );
-};
-
-const SectionLocations = ( { locationOptions, location, setLocation } ) => {
- return (
-
- setLocation( newLocation ) }
- label={ __( 'Locations', 'woocommerce-paypal-payments' ) }
- options={ locationOptions }
- />
-
- );
-};
-
-const SectionPaymentMethods = ( {
- locationSettings,
- updateButtonSettings,
-} ) => {
- return (
-
-
-
- updateButtonSettings( 'paymentMethods', newValue )
- }
- currentValue={ locationSettings.settings.paymentMethods }
- />
-
- );
-};
-
-const SectionButtonLayout = ( { locationSettings, updateButtonStyle } ) => {
- const buttonLayoutIsAllowed =
- locationSettings.settings.style?.layout &&
- locationSettings.settings.style?.tagline === false;
- return (
- buttonLayoutIsAllowed && (
-
-
- updateButtonStyle( 'layout', newValue )
- }
- selected={ locationSettings.settings.style.layout }
- options={ buttonLayoutOptions }
- />
-
- )
- );
-};
-
-const SectionButtonShape = ( { locationSettings, updateButtonStyle } ) => {
- return (
-
-
- updateButtonStyle( 'shape', newValue )
- }
- selected={ locationSettings.settings.style.shape }
- options={ shapeOptions }
- />
-
- );
-};
-
-const SectionButtonLabel = ( { locationSettings, updateButtonStyle } ) => {
- return (
-
-
- updateButtonStyle( 'label', newValue )
- }
- value={ locationSettings.settings.style.label }
- label={ __( 'Button Label', 'woocommerce-paypal-payments' ) }
- options={ buttonLabelOptions }
- />
-
- );
-};
-
-const SectionButtonColor = ( { locationSettings, updateButtonStyle } ) => {
- return (
-
-
- updateButtonStyle( 'color', newValue )
- }
- value={ locationSettings.settings.style.color }
- options={ colorOptions }
- />
-
- );
-};
-
-const SectionButtonTagline = ( { locationSettings, updateButtonStyle } ) => {
- const taglineIsAllowed =
- locationSettings.settings.style.hasOwnProperty( 'tagline' ) &&
- locationSettings.settings.style?.layout === 'horizontal';
-
- return (
- taglineIsAllowed && (
-
- {
- updateButtonStyle( 'tagline', newValue );
- } }
- currentValue={ locationSettings.settings.style.tagline }
- />
-
- )
- );
-};
-
-const SectionButtonPreview = ( { locationSettings } ) => {
- return (
-
-
- Error
-
-
- );
-};
-
-export default TabStyling;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js
index f195ea1b1..9023a1f9b 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js
@@ -1,16 +1,34 @@
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
+import { CommonHooks, StylingHooks } from '../../../../data';
import TopNavigation from '../../../ReusableComponents/TopNavigation';
+import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
const SettingsNavigation = () => {
+ const { withActivity } = CommonHooks.useBusyState();
+
+ // Todo: Implement other stores here.
+ const { persist: persistStyling } = StylingHooks.useStore();
+
+ const handleSaveClick = () => {
+ // Todo: Add other stores here.
+ withActivity(
+ 'persist-styling',
+ 'Save styling details',
+ persistStyling
+ );
+ };
+
const title = __( 'PayPal Payments', 'woocommerce-paypal-payments' );
return (
-
+
+
+
);
};
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonColor.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonColor.js
new file mode 100644
index 000000000..29b98069c
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonColor.js
@@ -0,0 +1,20 @@
+import { __ } from '@wordpress/i18n';
+
+import { StylingHooks } from '../../../../../../data';
+import { SelectStylingSection } from '../Layout';
+
+const SectionButtonColor = ( { location } ) => {
+ const { color, setColor, choices } = StylingHooks.useColorProps( location );
+
+ return (
+
+ );
+};
+
+export default SectionButtonColor;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLabel.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLabel.js
new file mode 100644
index 000000000..de7c1a103
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLabel.js
@@ -0,0 +1,20 @@
+import { __ } from '@wordpress/i18n';
+
+import { StylingHooks } from '../../../../../../data';
+import { SelectStylingSection } from '../Layout';
+
+const SectionButtonLabel = ( { location } ) => {
+ const { label, setLabel, choices } = StylingHooks.useLabelProps( location );
+
+ return (
+
+ );
+};
+
+export default SectionButtonLabel;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLayout.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLayout.js
new file mode 100644
index 000000000..1a284f72a
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLayout.js
@@ -0,0 +1,29 @@
+import { __ } from '@wordpress/i18n';
+
+import { StylingHooks } from '../../../../../../data';
+import { RadiobuttonStylingSection } from '../Layout';
+import { Tagline } from './index';
+
+const SectionButtonLayout = ( { location } ) => {
+ const { isAvailable, layout, setLayout, choices } =
+ StylingHooks.useLayoutProps( location );
+
+ if ( ! isAvailable ) {
+ return null;
+ }
+
+ return (
+ <>
+
+
+
+ );
+};
+
+export default SectionButtonLayout;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonShape.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonShape.js
new file mode 100644
index 000000000..71bc5bebe
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonShape.js
@@ -0,0 +1,20 @@
+import { __ } from '@wordpress/i18n';
+
+import { StylingHooks } from '../../../../../../data';
+import { RadiobuttonStylingSection } from '../Layout';
+
+const SectionButtonShape = ( { location } ) => {
+ const { shape, setShape, choices } = StylingHooks.useShapeProps( location );
+
+ return (
+
+ );
+};
+
+export default SectionButtonShape;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js
new file mode 100644
index 000000000..a747e93b3
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js
@@ -0,0 +1,62 @@
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { help } from '@wordpress/icons';
+
+import { StylingHooks } from '../../../../../../data';
+import {
+ SelectStylingSection,
+ StylingSection,
+ CheckboxStylingSection,
+} from '../Layout';
+
+const LocationSelector = ( { location, setLocation } ) => {
+ const { choices, details, isActive, setActive } =
+ StylingHooks.useLocationProps( location );
+
+ const activateCheckbox = {
+ value: 'active',
+ label: __(
+ 'Enable payment methods in this location',
+ 'woocommerce-paypal-payments'
+ ),
+ };
+
+ return (
+ <>
+
+
+ { details.link && (
+
+ ) }
+
+
+
+ );
+};
+
+export default LocationSelector;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js
new file mode 100644
index 000000000..0397d34c3
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js
@@ -0,0 +1,21 @@
+import { __ } from '@wordpress/i18n';
+
+import { StylingHooks } from '../../../../../../data';
+import { CheckboxStylingSection } from '../Layout';
+
+const SectionPaymentMethods = ( { location } ) => {
+ const { paymentMethods, setPaymentMethods, choices } =
+ StylingHooks.usePaymentMethodProps( location );
+
+ return (
+
+ );
+};
+
+export default SectionPaymentMethods;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/Tagline.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/Tagline.js
new file mode 100644
index 000000000..88912455b
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/Tagline.js
@@ -0,0 +1,33 @@
+import { __ } from '@wordpress/i18n';
+
+import { StylingHooks } from '../../../../../../data';
+import { CheckboxStylingSection } from '../Layout';
+
+const SectionTagline = ( { location } ) => {
+ const { isAvailable, tagline, setTagline } =
+ StylingHooks.useTaglineProps( location );
+
+ if ( ! isAvailable ) {
+ return null;
+ }
+
+ const checkbox = {
+ value: 'active',
+ label: __(
+ 'Show tagline below buttons',
+ 'woocommerce-paypal-payments'
+ ),
+ };
+
+ return (
+
+ );
+};
+
+export default SectionTagline;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/index.js
new file mode 100644
index 000000000..4529fb9eb
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/index.js
@@ -0,0 +1,7 @@
+export { default as LocationSelector } from './LocationSelector';
+export { default as ButtonColor } from './ButtonColor';
+export { default as ButtonLabel } from './ButtonLabel';
+export { default as ButtonLayout } from './ButtonLayout';
+export { default as ButtonShape } from './ButtonShape';
+export { default as PaymentMethods } from './PaymentMethods';
+export { default as Tagline } from './Tagline';
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js
new file mode 100644
index 000000000..b9fefc52e
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js
@@ -0,0 +1,34 @@
+import SettingsBlock from '../../../../../ReusableComponents/SettingsBlocks/SettingsBlock';
+import {
+ Description,
+ Header,
+ Title,
+ Content,
+} from '../../../../../ReusableComponents/SettingsBlocks';
+
+const StylingSection = ( {
+ title,
+ bigTitle = false,
+ className = '',
+ description = '',
+ separatorAndGap = true,
+ children,
+} ) => {
+ return (
+
+
+
+ { title }
+
+ { description }
+
+
+ { children }
+
+ );
+};
+
+export default StylingSection;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js
new file mode 100644
index 000000000..d3ca92db4
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js
@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+
+import { CheckboxGroup } from '../../../../../ReusableComponents/Fields';
+import HStack from '../../../../../ReusableComponents/HStack';
+import StylingSection from './StylingSection';
+
+const StylingSectionWithCheckboxes = ( {
+ title,
+ className = '',
+ description = '',
+ separatorAndGap = true,
+ options,
+ value,
+ onChange,
+ children,
+} ) => {
+ className = classNames( 'has-checkboxes', className );
+
+ return (
+
+
+
+
+
+ { children }
+
+ );
+};
+
+export default StylingSectionWithCheckboxes;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithRadiobuttons.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithRadiobuttons.js
new file mode 100644
index 000000000..337e2b30f
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithRadiobuttons.js
@@ -0,0 +1,39 @@
+import { RadioControl } from '@wordpress/components';
+import classNames from 'classnames';
+
+import HStack from '../../../../../ReusableComponents/HStack';
+import StylingSection from './StylingSection';
+
+const StylingSectionWithRadiobuttons = ( {
+ title,
+ className = '',
+ description = '',
+ separatorAndGap = true,
+ options,
+ selected,
+ onChange,
+ children,
+} ) => {
+ className = classNames( 'has-radio-buttons', className );
+
+ return (
+
+
+
+
+
+ { children }
+
+ );
+};
+
+export default StylingSectionWithRadiobuttons;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithSelect.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithSelect.js
new file mode 100644
index 000000000..2b0ef8031
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithSelect.js
@@ -0,0 +1,37 @@
+import { SelectControl } from '@wordpress/components';
+import classNames from 'classnames';
+
+import StylingSection from './StylingSection';
+
+const StylingSectionWithSelect = ( {
+ title,
+ className = '',
+ description = '',
+ separatorAndGap = true,
+ options,
+ value,
+ onChange,
+ children,
+} ) => {
+ className = classNames( 'has-select', className );
+
+ return (
+
+
+
+ { children }
+
+ );
+};
+
+export default StylingSectionWithSelect;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/index.js
new file mode 100644
index 000000000..ea856552d
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/index.js
@@ -0,0 +1,4 @@
+export { default as StylingSection } from './StylingSection';
+export { default as CheckboxStylingSection } from './StylingSectionWithCheckboxes';
+export { default as RadiobuttonStylingSection } from './StylingSectionWithRadiobuttons';
+export { default as SelectStylingSection } from './StylingSectionWithSelect';
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/PreviewPanel.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/PreviewPanel.js
new file mode 100644
index 000000000..8fde7aa98
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/PreviewPanel.js
@@ -0,0 +1,64 @@
+import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js';
+import { STYLING_PAYMENT_METHODS, StylingHooks } from '../../../../../data';
+import { useMemo } from '@wordpress/element';
+
+const PREVIEW_CLIENT_ID = 'test';
+const PREVIEW_MERCHANT_ID = 'QTQX5NP6N9WZU';
+
+const PreviewPanel = ( { location } ) => {
+ const { paymentMethods } = StylingHooks.usePaymentMethodProps( location );
+ const { layout } = StylingHooks.useLayoutProps( location );
+ const { shape } = StylingHooks.useShapeProps( location );
+ const { label } = StylingHooks.useLabelProps( location );
+ const { color } = StylingHooks.useColorProps( location );
+ const { tagline } = StylingHooks.useTaglineProps( location );
+
+ const style = useMemo(
+ () => ( {
+ layout,
+ shape,
+ label,
+ color,
+ tagline,
+ } ),
+ [ color, label, layout, shape, tagline ]
+ );
+
+ const disableFunding = useMemo( () => {
+ const disabled = [ 'card' ];
+ Object.values( STYLING_PAYMENT_METHODS )
+ .filter( ( method ) => method.isFunding )
+ .filter( ( method ) => ! paymentMethods.includes( method.value ) )
+ .forEach( ( method ) => {
+ disabled.push( method.value );
+ } );
+ return disabled;
+ }, [ paymentMethods ] );
+
+ // TODO: Changes in the providerOptions are not reflected on the page.
+ const providerOptions = useMemo(
+ () => ( {
+ clientId: PREVIEW_CLIENT_ID,
+ merchantId: PREVIEW_MERCHANT_ID,
+ components: 'buttons',
+ 'disable-funding': disableFunding.join( ',' ),
+ 'buyer-country': 'US', // Todo: simulate shop country here?
+ currency: 'USD',
+ } ),
+ [ disableFunding ]
+ );
+
+ return (
+
+ );
+};
+
+export default PreviewPanel;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js
new file mode 100644
index 000000000..dd5b383b8
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js
@@ -0,0 +1,41 @@
+import {
+ LocationSelector,
+ PaymentMethods,
+ ButtonLayout,
+ ButtonShape,
+ ButtonLabel,
+ ButtonColor,
+} from './Content';
+import { StylingHooks } from '../../../../../data';
+
+const SettingsPanel = ( { location, setLocation } ) => {
+ const { isActive } = StylingHooks.useLocationProps( location );
+
+ const LocationDetails = () => {
+ if ( ! isActive ) {
+ return null;
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+
+ );
+};
+
+export default SettingsPanel;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabStyling.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabStyling.js
new file mode 100644
index 000000000..48a24a2ee
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabStyling.js
@@ -0,0 +1,16 @@
+import { StylingHooks } from '../../../../data';
+import PreviewPanel from '../Components/Styling/PreviewPanel';
+import SettingsPanel from '../Components/Styling/SettingsPanel';
+
+const TabStyling = () => {
+ const { location, setLocation } = StylingHooks.useStylingLocation();
+
+ return (
+
+ );
+};
+
+export default TabStyling;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js
index fa19dc6e4..85d4cf5bd 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js
@@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
import TabOverview from '../../Overview/TabOverview';
import TabPaymentMethods from '../../Overview/TabPaymentMethods';
import TabSettings from '../../Overview/TabSettings';
-import TabStyling from '../../Overview/TabStyling';
+import TabStyling from './TabStyling';
import TabPayLaterMessaging from '../../Overview/TabPayLaterMessaging';
/**
diff --git a/modules/ppcp-settings/resources/js/data/_example/actions.js b/modules/ppcp-settings/resources/js/data/_example/actions.js
index 7360424f4..59d68d37c 100644
--- a/modules/ppcp-settings/resources/js/data/_example/actions.js
+++ b/modules/ppcp-settings/resources/js/data/_example/actions.js
@@ -36,28 +36,37 @@ export const hydrate = ( payload ) => ( {
payload,
} );
+/**
+ * Generic transient-data updater.
+ *
+ * @param {string} prop Name of the property to update.
+ * @param {any} value The new value of the property.
+ * @return {Action} The action.
+ */
+export const setTransient = ( prop, value ) => ( {
+ type: ACTION_TYPES.SET_TRANSIENT,
+ payload: { [ prop ]: value },
+} );
+
+/**
+ * Generic persistent-data updater.
+ *
+ * @param {string} prop Name of the property to update.
+ * @param {any} value The new value of the property.
+ * @return {Action} The action.
+ */
+export const setPersistent = ( prop, value ) => ( {
+ type: ACTION_TYPES.SET_PERSISTENT,
+ payload: { [ prop ]: value },
+} );
+
/**
* Transient. Marks the store as "ready", i.e., fully initialized.
*
* @param {boolean} isReady
* @return {Action} The action.
*/
-export const setIsReady = ( isReady ) => ( {
- type: ACTION_TYPES.SET_TRANSIENT,
- payload: { isReady },
-} );
-
-/**
- * Persistent. Sets a sample value.
- * TODO: Replace with a real action/property.
- *
- * @param {string} value
- * @return {Action} The action.
- */
-export const setSampleValue = ( value ) => ( {
- type: ACTION_TYPES.SET_PERSISTENT,
- payload: { sampleValue: value },
-} );
+export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady );
/**
* Side effect. Triggers the persistence of store data to the server.
diff --git a/modules/ppcp-settings/resources/js/data/_example/hooks.js b/modules/ppcp-settings/resources/js/data/_example/hooks.js
index 394fceb7e..b6878c2a9 100644
--- a/modules/ppcp-settings/resources/js/data/_example/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/_example/hooks.js
@@ -7,39 +7,24 @@
* @file
*/
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
+import { createHooksForStore } from '../utils';
import { STORE_NAME } from './constants';
-const useTransient = ( key ) =>
- useSelect(
- ( select ) => select( STORE_NAME ).transientData()?.[ key ],
- [ key ]
- );
-
-const usePersistent = ( key ) =>
- useSelect(
- ( select ) => select( STORE_NAME ).persistentData()?.[ key ],
- [ key ]
- );
-
const useHooks = () => {
- const {
- persist,
-
- // TODO: Replace with real property.
- setSampleValue,
- } = useDispatch( STORE_NAME );
+ const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
+ const { persist } = useDispatch( STORE_NAME );
// Read-only flags and derived state.
// Nothing here yet.
// Transient accessors.
- const isReady = useTransient( 'isReady' );
+ const [ isReady ] = useTransient( 'isReady' );
// Persistent accessors.
// TODO: Replace with real property.
- const sampleValue = usePersistent( 'sampleValue' );
+ const [ sampleValue, setSampleValue ] = usePersistent( 'sampleValue' );
return {
persist,
diff --git a/modules/ppcp-settings/resources/js/data/common/actions.js b/modules/ppcp-settings/resources/js/data/common/actions.js
index 8f2b14812..cf7837d54 100644
--- a/modules/ppcp-settings/resources/js/data/common/actions.js
+++ b/modules/ppcp-settings/resources/js/data/common/actions.js
@@ -36,16 +36,37 @@ export const hydrate = ( payload ) => ( {
payload,
} );
+/**
+ * Generic transient-data updater.
+ *
+ * @param {string} prop Name of the property to update.
+ * @param {any} value The new value of the property.
+ * @return {Action} The action.
+ */
+export const setTransient = ( prop, value ) => ( {
+ type: ACTION_TYPES.SET_TRANSIENT,
+ payload: { [ prop ]: value },
+} );
+
+/**
+ * Generic persistent-data updater.
+ *
+ * @param {string} prop Name of the property to update.
+ * @param {any} value The new value of the property.
+ * @return {Action} The action.
+ */
+export const setPersistent = ( prop, value ) => ( {
+ type: ACTION_TYPES.SET_PERSISTENT,
+ payload: { [ prop ]: value },
+} );
+
/**
* Transient. Marks the onboarding details as "ready", i.e., fully initialized.
*
* @param {boolean} isReady
* @return {Action} The action.
*/
-export const setIsReady = ( isReady ) => ( {
- type: ACTION_TYPES.SET_TRANSIENT,
- payload: { isReady },
-} );
+export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady );
/**
* Transient. Sets the active settings tab.
@@ -53,21 +74,8 @@ export const setIsReady = ( isReady ) => ( {
* @param {string} activeModal
* @return {Action} The action.
*/
-export const setActiveModal = ( activeModal ) => ( {
- type: ACTION_TYPES.SET_TRANSIENT,
- payload: { activeModal },
-} );
-
-/**
- * Transient. Changes the "saving" flag.
- *
- * @param {boolean} isSaving
- * @return {Action} The action.
- */
-export const setIsSaving = ( isSaving ) => ( {
- type: ACTION_TYPES.SET_TRANSIENT,
- payload: { isSaving },
-} );
+export const setActiveModal = ( activeModal ) =>
+ setTransient( 'activeModal', activeModal );
/**
* Transient (Activity): Marks the start of an async activity
@@ -107,10 +115,8 @@ export const stopActivity = ( id ) => ( {
* @param {boolean} useSandbox
* @return {Action} The action.
*/
-export const setSandboxMode = ( useSandbox ) => ( {
- type: ACTION_TYPES.SET_PERSISTENT,
- payload: { useSandbox },
-} );
+export const setSandboxMode = ( useSandbox ) =>
+ setPersistent( 'useSandbox', useSandbox );
/**
* Persistent. Toggles the "Manual Connection" mode on or off.
@@ -118,10 +124,8 @@ export const setSandboxMode = ( useSandbox ) => ( {
* @param {boolean} useManualConnection
* @return {Action} The action.
*/
-export const setManualConnectionMode = ( useManualConnection ) => ( {
- type: ACTION_TYPES.SET_PERSISTENT,
- payload: { useManualConnection },
-} );
+export const setManualConnectionMode = ( useManualConnection ) =>
+ setPersistent( 'useManualConnection', useManualConnection );
/**
* Side effect. Saves the persistent details to the WP database.
diff --git a/modules/ppcp-settings/resources/js/data/common/hooks.js b/modules/ppcp-settings/resources/js/data/common/hooks.js
index 8fcf3f6a9..796d1c50c 100644
--- a/modules/ppcp-settings/resources/js/data/common/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/common/hooks.js
@@ -9,41 +9,31 @@
import { useDispatch, useSelect } from '@wordpress/data';
import { useCallback } from '@wordpress/element';
+
+import { createHooksForStore } from '../utils';
import { STORE_NAME } from './constants';
-const useTransient = ( key ) =>
- useSelect(
- ( select ) => select( STORE_NAME ).transientData()?.[ key ],
- [ key ]
- );
-
-const usePersistent = ( key ) =>
- useSelect(
- ( select ) => select( STORE_NAME ).persistentData()?.[ key ],
- [ key ]
- );
-
const useHooks = () => {
+ const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
const {
persist,
- setSandboxMode,
- setManualConnectionMode,
sandboxOnboardingUrl,
productionOnboardingUrl,
authenticateWithCredentials,
authenticateWithOAuth,
- setActiveModal,
startWebhookSimulation,
checkWebhookSimulationState,
} = useDispatch( STORE_NAME );
// Transient accessors.
- const isReady = useTransient( 'isReady' );
- const activeModal = useTransient( 'activeModal' );
+ const [ isReady ] = useTransient( 'isReady' );
+ const [ activeModal, setActiveModal ] = useTransient( 'activeModal' );
// Persistent accessors.
- const isSandboxMode = usePersistent( 'useSandbox' );
- const isManualConnectionMode = usePersistent( 'useManualConnection' );
+ const [ isSandboxMode, setSandboxMode ] = usePersistent( 'useSandbox' );
+ const [ isManualConnectionMode, setManualConnectionMode ] = usePersistent(
+ 'useManualConnection'
+ );
const merchant = useSelect(
( select ) => select( STORE_NAME ).merchant(),
[]
diff --git a/modules/ppcp-settings/resources/js/data/configuration.js b/modules/ppcp-settings/resources/js/data/configuration.js
new file mode 100644
index 000000000..0f3608552
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/data/configuration.js
@@ -0,0 +1,10 @@
+export { BUSINESS_TYPES, PRODUCT_TYPES } from './onboarding/configuration';
+
+export {
+ STYLING_LOCATIONS,
+ STYLING_PAYMENT_METHODS,
+ STYLING_LABELS,
+ STYLING_COLORS,
+ STYLING_LAYOUTS,
+ STYLING_SHAPES,
+} from './styling/configuration';
diff --git a/modules/ppcp-settings/resources/js/data/index.js b/modules/ppcp-settings/resources/js/data/index.js
index 587ef036e..393c09db2 100644
--- a/modules/ppcp-settings/resources/js/data/index.js
+++ b/modules/ppcp-settings/resources/js/data/index.js
@@ -1,20 +1,24 @@
import { addDebugTools } from './debug';
import * as Onboarding from './onboarding';
import * as Common from './common';
+import * as Styling from './styling';
import * as Payment from './payment';
Onboarding.initStore();
Common.initStore();
Payment.initStore();
+Styling.initStore();
export const OnboardingHooks = Onboarding.hooks;
export const CommonHooks = Common.hooks;
export const PaymentHooks = Payment.hooks;
+export const StylingHooks = Styling.hooks;
export const OnboardingStoreName = Onboarding.STORE_NAME;
export const CommonStoreName = Common.STORE_NAME;
export const PaymentStoreName = Payment.STORE_NAME;
+export const StylingStoreName = Styling.STORE_NAME;
-export * from './constants';
+export * from './configuration';
-addDebugTools( window.ppcpSettings, [ Onboarding, Common, Payment ] );
+addDebugTools( window.ppcpSettings, [ Onboarding, Common, Payment, Styling ] );
diff --git a/modules/ppcp-settings/resources/js/data/onboarding/actions.js b/modules/ppcp-settings/resources/js/data/onboarding/actions.js
index e9bf8ed5f..8c6f2999f 100644
--- a/modules/ppcp-settings/resources/js/data/onboarding/actions.js
+++ b/modules/ppcp-settings/resources/js/data/onboarding/actions.js
@@ -36,16 +36,37 @@ export const hydrate = ( payload ) => ( {
payload,
} );
+/**
+ * Generic transient-data updater.
+ *
+ * @param {string} prop Name of the property to update.
+ * @param {any} value The new value of the property.
+ * @return {Action} The action.
+ */
+export const setTransient = ( prop, value ) => ( {
+ type: ACTION_TYPES.SET_TRANSIENT,
+ payload: { [ prop ]: value },
+} );
+
+/**
+ * Generic persistent-data updater.
+ *
+ * @param {string} prop Name of the property to update.
+ * @param {any} value The new value of the property.
+ * @return {Action} The action.
+ */
+export const setPersistent = ( prop, value ) => ( {
+ type: ACTION_TYPES.SET_PERSISTENT,
+ payload: { [ prop ]: value },
+} );
+
/**
* Transient. Marks the onboarding details as "ready", i.e., fully initialized.
*
* @param {boolean} isReady
* @return {Action} The action.
*/
-export const setIsReady = ( isReady ) => ( {
- type: ACTION_TYPES.SET_TRANSIENT,
- payload: { isReady },
-} );
+export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady );
/**
* Transient. Sets the "manualClientId" value.
@@ -53,10 +74,8 @@ export const setIsReady = ( isReady ) => ( {
* @param {string} manualClientId
* @return {Action} The action.
*/
-export const setManualClientId = ( manualClientId ) => ( {
- type: ACTION_TYPES.SET_TRANSIENT,
- payload: { manualClientId },
-} );
+export const setManualClientId = ( manualClientId ) =>
+ setTransient( 'manualClientId', manualClientId );
/**
* Transient. Sets the "manualClientSecret" value.
@@ -64,10 +83,8 @@ export const setManualClientId = ( manualClientId ) => ( {
* @param {string} manualClientSecret
* @return {Action} The action.
*/
-export const setManualClientSecret = ( manualClientSecret ) => ( {
- type: ACTION_TYPES.SET_TRANSIENT,
- payload: { manualClientSecret },
-} );
+export const setManualClientSecret = ( manualClientSecret ) =>
+ setTransient( 'manualClientSecret', manualClientSecret );
/**
* Persistent.Set the "onboarding completed" flag which shows or hides the wizard.
@@ -75,10 +92,8 @@ export const setManualClientSecret = ( manualClientSecret ) => ( {
* @param {boolean} completed
* @return {Action} The action.
*/
-export const setCompleted = ( completed ) => ( {
- type: ACTION_TYPES.SET_PERSISTENT,
- payload: { completed },
-} );
+export const setCompleted = ( completed ) =>
+ setPersistent( 'completed', completed );
/**
* Persistent. Sets the onboarding wizard to a new step.
@@ -86,10 +101,7 @@ export const setCompleted = ( completed ) => ( {
* @param {number} step
* @return {Action} The action.
*/
-export const setStep = ( step ) => ( {
- type: ACTION_TYPES.SET_PERSISTENT,
- payload: { step },
-} );
+export const setStep = ( step ) => setPersistent( 'step', step );
/**
* Persistent. Sets the "isCasualSeller" value.
@@ -97,10 +109,8 @@ export const setStep = ( step ) => ( {
* @param {boolean} isCasualSeller
* @return {Action} The action.
*/
-export const setIsCasualSeller = ( isCasualSeller ) => ( {
- type: ACTION_TYPES.SET_PERSISTENT,
- payload: { isCasualSeller },
-} );
+export const setIsCasualSeller = ( isCasualSeller ) =>
+ setPersistent( 'isCasualSeller', isCasualSeller );
/**
* Persistent. Sets the "areOptionalPaymentMethodsEnabled" value.
@@ -110,10 +120,11 @@ export const setIsCasualSeller = ( isCasualSeller ) => ( {
*/
export const setAreOptionalPaymentMethodsEnabled = (
areOptionalPaymentMethodsEnabled
-) => ( {
- type: ACTION_TYPES.SET_PERSISTENT,
- payload: { areOptionalPaymentMethodsEnabled },
-} );
+) =>
+ setPersistent(
+ 'areOptionalPaymentMethodsEnabled',
+ areOptionalPaymentMethodsEnabled
+ );
/**
* Persistent. Sets the "products" array.
@@ -121,10 +132,8 @@ export const setAreOptionalPaymentMethodsEnabled = (
* @param {string[]} products
* @return {Action} The action.
*/
-export const setProducts = ( products ) => ( {
- type: ACTION_TYPES.SET_PERSISTENT,
- payload: { products },
-} );
+export const setProducts = ( products ) =>
+ setPersistent( 'products', products );
/**
* Side effect. Triggers the persistence of onboarding data to the server.
diff --git a/modules/ppcp-settings/resources/js/data/constants.js b/modules/ppcp-settings/resources/js/data/onboarding/configuration.js
similarity index 51%
rename from modules/ppcp-settings/resources/js/data/constants.js
rename to modules/ppcp-settings/resources/js/data/onboarding/configuration.js
index 5654ad476..4b31689b5 100644
--- a/modules/ppcp-settings/resources/js/data/constants.js
+++ b/modules/ppcp-settings/resources/js/data/onboarding/configuration.js
@@ -1,8 +1,24 @@
+/**
+ * Configuration for UI components.
+ *
+ * @file
+ */
+
+/**
+ * Onboarding options for StepBusiness
+ *
+ * @type {Object}
+ */
export const BUSINESS_TYPES = {
CASUAL_SELLER: 'casual_seller',
BUSINESS: 'business',
};
+/**
+ * Onboarding options for StepProducts
+ *
+ * @type {Object}
+ */
export const PRODUCT_TYPES = {
VIRTUAL: 'virtual',
PHYSICAL: 'physical',
diff --git a/modules/ppcp-settings/resources/js/data/onboarding/constants.js b/modules/ppcp-settings/resources/js/data/onboarding/constants.js
index 4b33c6701..396726199 100644
--- a/modules/ppcp-settings/resources/js/data/onboarding/constants.js
+++ b/modules/ppcp-settings/resources/js/data/onboarding/constants.js
@@ -8,7 +8,7 @@
export const STORE_NAME = 'wc/paypal/onboarding';
/**
- * REST path to hydrate data of this module by loading data from the WP DB..
+ * REST path to hydrate data of this module by loading data from the WP DB.
*
* Used by: Resolvers
* See: OnboardingRestEndpoint.php
diff --git a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
index c4308c0fa..70999960c 100644
--- a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
@@ -9,32 +9,14 @@
import { useSelect, useDispatch } from '@wordpress/data';
-import { PRODUCT_TYPES } from '../constants';
+import { createHooksForStore } from '../utils';
+import { PRODUCT_TYPES } from './configuration';
import { STORE_NAME } from './constants';
-const useTransient = ( key ) =>
- useSelect(
- ( select ) => select( STORE_NAME ).transientData()?.[ key ],
- [ key ]
- );
-
-const usePersistent = ( key ) =>
- useSelect(
- ( select ) => select( STORE_NAME ).persistentData()?.[ key ],
- [ key ]
- );
-
const useHooks = () => {
- const {
- persist,
- setStep,
- setCompleted,
- setIsCasualSeller,
- setManualClientId,
- setManualClientSecret,
- setAreOptionalPaymentMethodsEnabled,
- setProducts,
- } = useDispatch( STORE_NAME );
+ const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
+
+ const { persist } = useDispatch( STORE_NAME );
// Read-only flags and derived state.
const flags = useSelect( ( select ) => select( STORE_NAME ).flags(), [] );
@@ -44,18 +26,22 @@ const useHooks = () => {
);
// Transient accessors.
- const isReady = useTransient( 'isReady' );
- const manualClientId = useTransient( 'manualClientId' );
- const manualClientSecret = useTransient( 'manualClientSecret' );
+ const [ isReady ] = useTransient( 'isReady' );
+ const [ manualClientId, setManualClientId ] =
+ useTransient( 'manualClientId' );
+ const [ manualClientSecret, setManualClientSecret ] =
+ useTransient( 'manualClientSecret' );
// Persistent accessors.
- const step = usePersistent( 'step' );
- const completed = usePersistent( 'completed' );
- const isCasualSeller = usePersistent( 'isCasualSeller' );
- const areOptionalPaymentMethodsEnabled = usePersistent(
- 'areOptionalPaymentMethodsEnabled'
- );
- const products = usePersistent( 'products' );
+ const [ step, setStep ] = usePersistent( 'step' );
+ const [ completed, setCompleted ] = usePersistent( 'completed' );
+ const [ isCasualSeller, setIsCasualSeller ] =
+ usePersistent( 'isCasualSeller' );
+ const [
+ areOptionalPaymentMethodsEnabled,
+ setAreOptionalPaymentMethodsEnabled,
+ ] = usePersistent( 'areOptionalPaymentMethodsEnabled' );
+ const [ products, setProducts ] = usePersistent( 'products' );
const savePersistent = async ( setter, value ) => {
setter( value );
diff --git a/modules/ppcp-settings/resources/js/data/settings-tab/action-types.js b/modules/ppcp-settings/resources/js/data/settings-tab/action-types.js
new file mode 100644
index 000000000..d13c0cbcf
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/data/settings-tab/action-types.js
@@ -0,0 +1,40 @@
+/**
+ * Settings action types
+ *
+ * Defines the constants used for dispatching actions in the settings store.
+ * Each constant represents a unique action type that can be handled by reducers.
+ *
+ * @file
+ */
+
+export default {
+ /**
+ * Represents setting transient (temporary) state data.
+ * These values are not persisted and will reset on page reload.
+ */
+ SET_TRANSIENT: 'ppcp/settings/SET_TRANSIENT',
+
+ /**
+ * Represents setting persistent state data.
+ * These values are meant to be saved to the server and persist between page loads.
+ */
+ SET_PERSISTENT: 'ppcp/settings/SET_PERSISTENT',
+
+ /**
+ * Resets the store state to its initial values.
+ * Used when needing to clear all settings data.
+ */
+ RESET: 'ppcp/settings/RESET',
+
+ /**
+ * Initializes the store with data, typically used during store initialization
+ * to set up the initial state with data from the server.
+ */
+ HYDRATE: 'ppcp/settings/HYDRATE',
+
+ /**
+ * Triggers the persistence of store data to the server.
+ * Used when changes need to be saved to the backend.
+ */
+ DO_PERSIST_DATA: 'ppcp/settings/DO_PERSIST_DATA',
+};
diff --git a/modules/ppcp-settings/resources/js/data/settings-tab/actions.js b/modules/ppcp-settings/resources/js/data/settings-tab/actions.js
new file mode 100644
index 000000000..a13cedeab
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/data/settings-tab/actions.js
@@ -0,0 +1,71 @@
+/**
+ * Action Creators: Define functions to create action objects.
+ *
+ * These functions update state or trigger side effects (e.g., async operations).
+ * Actions are categorized as Transient, Persistent, or Side effect.
+ *
+ * @file
+ */
+
+import { select } from '@wordpress/data';
+import ACTION_TYPES from './action-types';
+import { STORE_NAME } from './constants';
+
+/**
+ * @typedef {Object} Action An action object that is handled by a reducer or control.
+ * @property {string} type - The action type.
+ * @property {Object?} payload - Optional payload for the action.
+ */
+
+/**
+ * Special. Resets all values in the store to initial defaults.
+ *
+ * @return {Action} The action.
+ */
+export const reset = () => ( {
+ type: ACTION_TYPES.RESET,
+} );
+
+/**
+ * Persistent. Sets the full store details during app initialization.
+ *
+ * @param {Object} payload Initial store data
+ * @return {Action} The action.
+ */
+export const hydrate = ( payload ) => ( {
+ type: ACTION_TYPES.HYDRATE,
+ payload,
+} );
+
+/**
+ * Transient. Marks the store as "ready", i.e., fully initialized.
+ *
+ * @param {boolean} isReady Whether the store is ready
+ * @return {Action} The action.
+ */
+export const setIsReady = ( isReady ) => ( {
+ type: ACTION_TYPES.SET_TRANSIENT,
+ payload: { isReady },
+} );
+
+/**
+ * Persistent. Updates the settings data in the store.
+ *
+ * @param {Object} settings The settings object to store
+ * @return {Action} The action.
+ */
+export const setSettings = ( settings ) => ( {
+ type: ACTION_TYPES.SET_PERSISTENT,
+ payload: settings,
+} );
+
+/**
+ * Side effect. Triggers the persistence of store data to the server.
+ * Yields an action with the current persistent data to be saved.
+ *
+ * @return {Action} The action.
+ */
+export const persist = function* () {
+ const data = yield select( STORE_NAME ).persistentData();
+ yield { type: ACTION_TYPES.DO_PERSIST_DATA, data };
+};
diff --git a/modules/ppcp-settings/resources/js/data/settings-tab/constants.js b/modules/ppcp-settings/resources/js/data/settings-tab/constants.js
new file mode 100644
index 000000000..dd7faa120
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/data/settings-tab/constants.js
@@ -0,0 +1,28 @@
+/**
+ * Name of the Redux store module.
+ *
+ * Used by: Reducer, Selector, Index
+ *
+ * @type {string}
+ */
+export const STORE_NAME = 'wc/paypal/settings';
+
+/**
+ * REST path to hydrate data of this module by loading data from the WP DB.
+ *
+ * Used by: Resolvers
+ * See: SettingsRestEndpoint.php
+ *
+ * @type {string}
+ */
+export const REST_HYDRATE_PATH = '/wc/v3/wc_paypal/settings';
+
+/**
+ * REST path to persist data of this module to the WP DB.
+ *
+ * Used by: Controls
+ * See: SettingsRestEndpoint.php
+ *
+ * @type {string}
+ */
+export const REST_PERSIST_PATH = '/wc/v3/wc_paypal/settings';
diff --git a/modules/ppcp-settings/resources/js/data/settings-tab/controls.js b/modules/ppcp-settings/resources/js/data/settings-tab/controls.js
new file mode 100644
index 000000000..11e5e6a04
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/data/settings-tab/controls.js
@@ -0,0 +1,34 @@
+/**
+ * Controls: Implement side effects, typically asynchronous operations.
+ *
+ * Controls use ACTION_TYPES keys as identifiers.
+ * They are triggered by corresponding actions and handle external interactions.
+ *
+ * @file
+ */
+
+import apiFetch from '@wordpress/api-fetch';
+import { REST_PERSIST_PATH } from './constants';
+import ACTION_TYPES from './action-types';
+
+/**
+ * Control handlers for settings store actions.
+ * Each handler maps to an ACTION_TYPE and performs the corresponding async operation.
+ */
+export const controls = {
+ /**
+ * Persists settings data to the server via REST API.
+ * Triggered by the DO_PERSIST_DATA action to save settings changes.
+ *
+ * @param {Object} action The action object
+ * @param {Object} action.data The settings data to persist
+ * @return {Promise