woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 18:16:38 +08:00
Code Issues Projects Packages Wiki Activity Actions

♻️ Move JS configuration for styling page

Browse source
This commit is contained in:
Philipp Stracker 2025-01-13 19:03:33 +01:00
parent 63f417d7d2
commit 0b624eb8bc
No known key found for this signature in database
5 changed files with 155 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

20
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabStyling.js
View file

@ -7,11 +7,13 @@ import { PayPalScriptProvider, PayPalButtons } from '@paypal/react-paypal-js';
import {
defaultLocationSettings,
paymentMethodOptions,
colorOptions,
shapeOptions,
buttonLayoutOptions,
buttonLabelOptions,
} from '../../../data/settings/tab-styling-data';
import {
STYLING_LABELS,
STYLING_COLORS,
STYLING_LAYOUTS,
STYLING_SHAPES,
} from '../../../data';
const TabStyling = () => {
const [ location, setLocation ] = useState( 'cart' );
@ -52,7 +54,7 @@ const TabStyling = () => {
},
[]
);
}, [] );
}, [ locationSettings ] );
const updateButtonSettings = ( key, value ) => {
setLocationSettings( {
@ -223,7 +225,7 @@ const SectionButtonLayout = ( { locationSettings, updateButtonStyle } ) => {
updateButtonStyle( 'layout', newValue )
}
selected={ locationSettings.settings.style.layout }
options={ buttonLayoutOptions }
options={ Object.values( STYLING_LAYOUTS ) }
/>
</TabStylingSection>
)
@ -242,7 +244,7 @@ const SectionButtonShape = ( { locationSettings, updateButtonStyle } ) => {
updateButtonStyle( 'shape', newValue )
}
selected={ locationSettings.settings.style.shape }
options={ shapeOptions }
options={ Object.values( STYLING_SHAPES ) }
/>
</TabStylingSection>
);
@ -258,7 +260,7 @@ const SectionButtonLabel = ( { locationSettings, updateButtonStyle } ) => {
}
value={ locationSettings.settings.style.label }
label={ __( 'Button Label', 'woocommerce-paypal-payments' ) }
options={ buttonLabelOptions }
options={ Object.values( STYLING_LABELS ) }
/>
</TabStylingSection>
);
@ -274,7 +276,7 @@ const SectionButtonColor = ( { locationSettings, updateButtonStyle } ) => {
updateButtonStyle( 'color', newValue )
}
value={ locationSettings.settings.style.color }
options={ colorOptions }
options={ Object.values( STYLING_COLORS ) }
/>
</TabStylingSection>
);

17
modules/ppcp-settings/resources/js/data/constants.js
View file

@ -1,10 +1,9 @@
export const BUSINESS_TYPES = {
CASUAL_SELLER: 'casual_seller',
BUSINESS: 'business',
};
export { BUSINESS_TYPES, PRODUCT_TYPES } from './onboarding/constants';
export const PRODUCT_TYPES = {
VIRTUAL: 'virtual',
PHYSICAL: 'physical',
SUBSCRIPTIONS: 'subscriptions',
};
export {
STYLING_LOCATIONS,
STYLING_LABELS,
STYLING_COLORS,
STYLING_LAYOUTS,
STYLING_SHAPES,
} from './styling/constants';

23
modules/ppcp-settings/resources/js/data/onboarding/constants.js
View file

@ -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
@ -26,3 +26,24 @@ export const REST_HYDRATE_PATH = '/wc/v3/wc_paypal/onboarding';
* @type {string}
*/
export const REST_PERSIST_PATH = '/wc/v3/wc_paypal/onboarding';
/**
* 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',
SUBSCRIPTIONS: 'subscriptions',
};

64
modules/ppcp-settings/resources/js/data/settings/tab-styling-data.js
View file

@ -96,67 +96,3 @@ export const paymentMethodOptions = [
label: __( 'Apple Pay', 'woocommerce-paypal-payments' ),
},
];
export const buttonLabelOptions = [
{
value: 'paypal',
label: __( 'PayPal', 'woocommerce-paypal-payments' ),
},
{
value: 'checkout',
label: __( 'Checkout', 'woocommerce-paypal-payments' ),
},
{
value: 'buynow',
label: __( 'PayPal Buy Now', 'woocommerce-paypal-payments' ),
},
{
value: 'pay',
label: __( 'Pay with PayPal', 'woocommerce-paypal-payments' ),
},
];
export const colorOptions = [
{
value: 'gold',
label: __( 'Gold (Recommended)', 'woocommerce-paypal-payments' ),
},
{
value: 'blue',
label: __( 'Blue', 'woocommerce-paypal-payments' ),
},
{
value: 'silver',
label: __( 'Silver', 'woocommerce-paypal-payments' ),
},
{
value: 'black',
label: __( 'Black', 'woocommerce-paypal-payments' ),
},
{
value: 'white',
label: __( 'White', 'woocommerce-paypal-payments' ),
},
];
export const buttonLayoutOptions = [
{
label: __( 'Vertical', 'woocommerce-paypal-payments' ),
value: 'vertical',
},
{
label: __( 'Horizontal', 'woocommerce-paypal-payments' ),
value: 'horizontal',
},
];
export const shapeOptions = [
{
value: 'pill',
label: __( 'Pill', 'woocommerce-paypal-payments' ),
},
{
value: 'rect',
label: __( 'Rectangle', 'woocommerce-paypal-payments' ),
},
];

114
modules/ppcp-settings/resources/js/data/styling/constants.js
View file

@ -1,3 +1,5 @@
import { __ } from '@wordpress/i18n';
/**
* Name of the Redux store module.
*
@ -26,3 +28,115 @@ export const REST_HYDRATE_PATH = '/wc/v3/wc_paypal/styling';
* @type {string}
*/
export const REST_PERSIST_PATH = '/wc/v3/wc_paypal/styling';
export const STYLING_LOCATIONS = {
cart: {
value: 'cart',
label: __( 'Cart', 'woocommerce-paypal-payments' ),
description: __(
'Customize the appearance of the PayPal smart buttons on the <a href="%s">Cart page</a> and select which additional payment buttons to display in this location.',
'wooocommerce-paypal-payments'
),
link: '#',
},
'classic-checkout': {
value: 'classic-checkout',
label: __( 'Classic Checkout', 'woocommerce-paypal-payments' ),
description: __(
'Customize the appearance of the PayPal smart buttons on the <a href="%s">Classic Checkout page</a> and choose which additional payment buttons to display in this location.',
'wooocommerce-paypal-payments'
),
link: '#',
},
'express-checkout': {
value: 'express-checkout',
label: __( 'Express Checkout', 'woocommerce-paypal-payments' ),
description: __(
'Customize the appearance of the PayPal smart buttons on the <a href="%s">Express Checkout location</a> and choose which additional payment buttons to display in this location.',
'wooocommerce-paypal-payments'
),
link: '#',
},
'mini-cart': {
value: 'mini-cart',
label: __( 'Mini Cart', 'woocommerce-paypel-payements' ),
description: __(
'Customize the appearance of the PayPal smart buttons on the <a href="%s">Mini Cart</a> and choose which additional payment buttons to display in this location.',
'wooocommerce-paypal-payments'
),
link: '#',
},
'product-page': {
value: 'product-page',
label: __( 'Product Page', 'woocommerce-paypal-payments' ),
description: __(
'Customize the appearance of the PayPal smart buttons on the <a href="%s">Product Page</a> and choose which additional payment buttons to display in this location.',
'wooocommerce-paypal-payments'
),
link: '#',
},
};
export const STYLING_LABELS = {
paypal: {
value: 'paypal',
label: __( 'PayPal', 'woocommerce-paypal-payments' ),
},
checkout: {
value: 'checkout',
label: __( 'Checkout', 'woocommerce-paypal-payments' ),
},
buynow: {
value: 'buynow',
label: __( 'PayPal Buy Now', 'woocommerce-paypal-payments' ),
},
pay: {
value: 'pay',
label: __( 'Pay with PayPal', 'woocommerce-paypal-payments' ),
},
};
export const STYLING_COLORS = {
gold: {
value: 'gold',
label: __( 'Gold (Recommended)', 'woocommerce-paypal-payments' ),
},
blue: {
value: 'blue',
label: __( 'Blue', 'woocommerce-paypal-payments' ),
},
silver: {
value: 'silver',
label: __( 'Silver', 'woocommerce-paypal-payments' ),
},
black: {
value: 'black',
label: __( 'Black', 'woocommerce-paypal-payments' ),
},
white: {
value: 'white',
label: __( 'White', 'woocommerce-paypal-payments' ),
},
};
export const STYLING_LAYOUTS = {
vertical: {
value: 'vertical',
label: __( 'Vertical', 'woocommerce-paypal-payments' ),
},
horizontal: {
value: 'horizontal',
label: __( 'Horizontal', 'woocommerce-paypal-payments' ),
},
};
export const STYLING_SHAPES = {
pill: {
value: 'pill',
label: __( 'Pill', 'woocommerce-paypal-payments' ),
},
rect: {
value: 'rect',
label: __( 'Rectangle', 'woocommerce-paypal-payments' ),
},
};