-
-
+const PREVIEW_CLIENT_ID = 'test';
+const PREVIEW_MERCHANT_ID = 'QTQX5NP6N9WZU';
+
+const PreviewPanel = () => {
+ // TODO: Make those props dynamic based on location style settings.
+ const style = {};
+ const components = [ 'buttons', 'googlepay' ];
+
+ const providerOptions = {
+ clientId: PREVIEW_CLIENT_ID,
+ merchantId: PREVIEW_MERCHANT_ID,
+ components: components.join( ',' ),
+ 'disable-funding': 'card',
+ 'buyer-country': 'US',
+ currency: 'USD',
+ };
+
+ 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
index d6571a4c5..e739ab629 100644
--- 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
@@ -1,54 +1,28 @@
import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
import { RadioControl, SelectControl } from '@wordpress/components';
-import { STYLING_LOCATIONS } from '../../../../../data';
+// Dummy hook.
+import { useStylingLocation, useStylingProps } from '../../Tabs/TabStyling';
+
import { PayPalCheckboxGroup } from '../../../../ReusableComponents/Fields';
import LocationSelector from './LocationSelector';
import StylingSection from './StylingSection';
const SettingsPanel = () => {
- const { location, setLocation } = useState( 'cart' );
-
- const currentLocationSettings = {
- settings: { shape: '', label: '', color: '' },
- };
- const handleChange = () => {};
+ const { location, setLocation } = useStylingLocation();
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
);
};
@@ -56,129 +30,115 @@ const SettingsPanel = () => {
export default SettingsPanel;
// -----
-const SectionPaymentMethods = ( {
- locationSettings,
- updateButtonSettings,
-} ) => {
- const paymentMethodOptions = [];
+const SectionPaymentMethods = ( { location } ) => {
+ const { paymentMethods, setPaymentMethods, paymentMethodChoices } =
+ useStylingProps( location );
return (
-
-
- updateButtonSettings( 'paymentMethods', newValue )
- }
- currentValue={ locationSettings.paymentMethods }
- />
-
);
};
-const SectionButtonLayout = ( { locationSettings, updateButtonStyle } ) => {
- const buttonLayoutIsAllowed =
- locationSettings.layout && locationSettings.tagline === false;
- return (
- buttonLayoutIsAllowed && (
-
-
- updateButtonStyle( 'layout', newValue )
- }
- selected={ locationSettings.layout }
- options={ [] }
- />
-
- )
- );
-};
+const SectionButtonLayout = ( { location } ) => {
+ const { supportsLayout, layout, setLayout, layoutChoices } =
+ useStylingProps( location );
+
+ if ( ! supportsLayout ) {
+ return null;
+ }
-const SectionButtonShape = ( { locationSettings, updateButtonStyle } ) => {
return (
- updateButtonStyle( 'shape', newValue )
- }
- selected={ locationSettings.shape }
- options={ [] }
+ options={ layoutChoices }
+ selected={ layout }
+ onChange={ setLayout }
/>
);
};
-const SectionButtonLabel = ( { locationSettings, updateButtonStyle } ) => {
+const SectionButtonShape = ( { location } ) => {
+ const { shape, setShape, shapeChoices } = useStylingProps( location );
+
+ return (
+
+
+
+ );
+};
+
+const SectionButtonLabel = ( { location } ) => {
+ const { label, setLabel, labelChoices } = useStylingProps( location );
+
return (
- updateButtonStyle( 'label', newValue )
- }
- value={ locationSettings.label }
label={ __( 'Button Label', 'woocommerce-paypal-payments' ) }
- options={ [] }
+ className="ppcp-r-styling__select"
+ options={ labelChoices }
+ value={ label }
+ onChange={ setLabel }
/>
);
};
-const SectionButtonColor = ( { locationSettings, updateButtonStyle } ) => {
+const SectionButtonColor = ( { location } ) => {
+ const { color, setColor, colorChoices } = useStylingProps( location );
+
return (
- updateButtonStyle( 'color', newValue )
- }
- value={ locationSettings.color }
- options={ [] }
+ className=" ppcp-r-styling__select"
+ options={ colorChoices }
+ value={ color }
+ onChange={ setColor }
/>
);
};
-const SectionButtonTagline = ( { locationSettings, updateButtonStyle } ) => {
- const taglineIsAllowed =
- locationSettings.hasOwnProperty( 'tagline' ) &&
- locationSettings.layout === 'horizontal';
+const SectionButtonTagline = ( { location } ) => {
+ const { supportsTagline, tagline, setTagline, taglineChoices } =
+ useStylingProps( location );
+
+ if ( ! supportsTagline ) {
+ return null;
+ }
return (
- taglineIsAllowed && (
-
- {
- updateButtonStyle( 'tagline', newValue );
- } }
- currentValue={ locationSettings.tagline }
- />
-
- )
+
+
+
);
};
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
index 4a0b8f015..07f5ad4d9 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabStyling.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabStyling.js
@@ -1,22 +1,113 @@
-import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useState } from '@wordpress/element';
-import { defaultLocationSettings } from '../../../../data/settings/tab-styling-data';
+import {
+ STYLING_COLORS,
+ STYLING_LABELS,
+ STYLING_LAYOUTS,
+ STYLING_LOCATIONS,
+ STYLING_PAYMENT_METHODS,
+ STYLING_SHAPES,
+} from '../../../../data/styling/constants';
import PreviewPanel from '../Components/Styling/PreviewPanel';
import SettingsPanel from '../Components/Styling/SettingsPanel';
-const TabStyling = () => {
- const [ locationSettings, setLocationSettings ] = useState( {
- ...defaultLocationSettings,
- } );
-
- return (
-
- );
-};
+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 ),
+ };
+};
diff --git a/modules/ppcp-settings/resources/js/data/settings/tab-styling-data.js b/modules/ppcp-settings/resources/js/data/settings/tab-styling-data.js
deleted file mode 100644
index ae0636481..000000000
--- a/modules/ppcp-settings/resources/js/data/settings/tab-styling-data.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { __ } from '@wordpress/i18n';
-
-const cartAndExpressCheckoutSettings = {
- paymentMethods: [],
- style: {
- shape: 'pill',
- label: 'paypal',
- color: 'gold',
- },
-};
-
-const settings = {
- paymentMethods: [],
- style: {
- layout: 'vertical',
- shape: cartAndExpressCheckoutSettings.style.shape,
- label: cartAndExpressCheckoutSettings.style.label,
- color: cartAndExpressCheckoutSettings.style.color,
- tagline: false,
- },
-};
-
-export const defaultLocationSettings = {
- cart: {
- value: 'cart',
- label: __( 'Cart', 'woocommerce-paypal-payments' ),
- settings: { ...cartAndExpressCheckoutSettings },
- // translators: %s: Link to Cart page
- description: __(
- 'Customize the appearance of the PayPal smart buttons on the
[MISSING LINK]Cart page and select which additional payment buttons to display in this location.',
- 'wooocommerce-paypal-payments'
- ),
- descriptionLink: '#',
- },
- 'classic-checkout': {
- value: 'classic-checkout',
- label: __( 'Classic Checkout', 'woocommerce-paypal-payments' ),
- settings: { ...settings },
- // translators: %s: Link to Classic Checkout page
- description: __(
- 'Customize the appearance of the PayPal smart buttons on the
[MISSING LINK]Classic Checkout page and choose which additional payment buttons to display in this location.',
- 'wooocommerce-paypal-payments'
- ),
- descriptionLink: '#',
- },
- 'express-checkout': {
- value: 'express-checkout',
- label: __( 'Express Checkout', 'woocommerce-paypal-payments' ),
- settings: { ...cartAndExpressCheckoutSettings },
- // translators: %s: Link to Express Checkout location
- description: __(
- 'Customize the appearance of the PayPal smart buttons on the
[MISSING LINK]Express Checkout location and choose which additional payment buttons to display in this location.',
- 'wooocommerce-paypal-payments'
- ),
- descriptionLink: '#',
- },
- 'mini-cart': {
- value: 'mini-cart',
- label: __( 'Mini Cart', 'woocommerce-paypel-payements' ),
- settings: { ...settings },
- // translators: %s: Link to Mini Cart
- description: __(
- 'Customize the appearance of the PayPal smart buttons on the
[MISSING LINK]Mini Cart and choose which additional payment buttons to display in this location.',
- 'wooocommerce-paypal-payments'
- ),
- descriptionLink: '#',
- },
- 'product-page': {
- value: 'product-page',
- label: __( 'Product Page', 'woocommerce-paypal-payments' ),
- settings: { ...settings },
- // translators: %s: Link to Product Page
- description: __(
- 'Customize the appearance of the PayPal smart buttons on the
[MISSING LINK]Product Page and choose which additional payment buttons to display in this location.',
- 'wooocommerce-paypal-payments'
- ),
- descriptionLink: '#',
- },
-};
-
-export const paymentMethodOptions = [
- {
- value: 'venmo',
- label: __( 'Venmo', 'woocommerce-paypal-payments' ),
- },
- {
- value: 'paylater',
- label: __( 'Pay Later', 'woocommerce-paypal-payments' ),
- },
- {
- value: 'googlepay',
- label: __( 'Google Pay', 'woocommerce-paypal-payments' ),
- },
- {
- value: 'applepay',
- label: __( 'Apple Pay', 'woocommerce-paypal-payments' ),
- },
-];
diff --git a/modules/ppcp-settings/resources/js/data/styling/constants.js b/modules/ppcp-settings/resources/js/data/styling/constants.js
index 92d3714da..395d80cdb 100644
--- a/modules/ppcp-settings/resources/js/data/styling/constants.js
+++ b/modules/ppcp-settings/resources/js/data/styling/constants.js
@@ -145,3 +145,22 @@ export const STYLING_SHAPES = {
label: __( 'Rectangle', 'woocommerce-paypal-payments' ),
},
};
+
+export const STYLING_PAYMENT_METHODS = {
+ venmo: {
+ value: 'venmo',
+ label: __( 'Venmo', 'woocommerce-paypal-payments' ),
+ },
+ paylater: {
+ value: 'paylater',
+ label: __( 'Pay Later', 'woocommerce-paypal-payments' ),
+ },
+ googlepay: {
+ value: 'googlepay',
+ label: __( 'Google Pay', 'woocommerce-paypal-payments' ),
+ },
+ applepay: {
+ value: 'applepay',
+ label: __( 'Apple Pay', 'woocommerce-paypal-payments' ),
+ },
+};