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

♻️ Extract UI configuration to separate files

Browse source
This commit is contained in:
Philipp Stracker 2025-01-16 15:03:46 +01:00
parent 484356dcc0
commit c16e5e4c58
No known key found for this signature in database
8 changed files with 187 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

10
modules/ppcp-settings/resources/js/data/configuration.js Normal file
View file

@ -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';

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

@ -1,9 +0,0 @@
export { BUSINESS_TYPES, PRODUCT_TYPES } from './onboarding/constants';
export {
STYLING_LOCATIONS,
STYLING_LABELS,
STYLING_COLORS,
STYLING_LAYOUTS,
STYLING_SHAPES,
} from './styling/constants';

2
modules/ppcp-settings/resources/js/data/index.js
View file

@ -15,6 +15,6 @@ export const OnboardingStoreName = Onboarding.STORE_NAME;
export const CommonStoreName = Common.STORE_NAME;
export const StylingStoreName = Styling.STORE_NAME;
export * from './constants';
export * from './configuration';
addDebugTools( window.ppcpSettings, [ Onboarding, Common, Styling ] );

26
modules/ppcp-settings/resources/js/data/onboarding/configuration.js Normal file
View file

@ -0,0 +1,26 @@
/**
* 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',
SUBSCRIPTIONS: 'subscriptions',
};

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

@ -26,24 +26,3 @@ 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',
};

2
modules/ppcp-settings/resources/js/data/onboarding/hooks.js
View file

@ -9,7 +9,7 @@
import { useSelect, useDispatch } from '@wordpress/data';
import { PRODUCT_TYPES } from '../constants';
import { PRODUCT_TYPES } from './configuration';
import { STORE_NAME } from './constants';
const useTransient = ( key ) =>

149
modules/ppcp-settings/resources/js/data/styling/configuration.js Normal file
View file

@ -0,0 +1,149 @@
/**
* Configuration for UI components.
*
* @file
*/
import { __ } from '@wordpress/i18n';
export const STYLING_LOCATIONS = {
cart: {
value: 'cart',
label: __( 'Cart', 'woocommerce-paypal-payments' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Cart page</a>.',
'wooocommerce-paypal-payments'
),
link: '#',
},
'classic-checkout': {
value: 'classic-checkout',
label: __( 'Classic Checkout', 'woocommerce-paypal-payments' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Classic Checkout page</a>.',
'wooocommerce-paypal-payments'
),
link: '#',
},
'express-checkout': {
value: 'express-checkout',
label: __( 'Express Checkout', 'woocommerce-paypal-payments' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Express Checkout location</a>.',
'wooocommerce-paypal-payments'
),
link: '#',
},
'mini-cart': {
value: 'mini-cart',
label: __( 'Mini Cart', 'woocommerce-paypel-payements' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Mini Cart</a>.',
'wooocommerce-paypal-payments'
),
link: '#',
},
'product-page': {
value: 'product-page',
label: __( 'Product Page', 'woocommerce-paypal-payments' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Product Page</a>.',
'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' ),
},
};
export const STYLING_PAYMENT_METHODS = {
paypal: {
value: '',
label: __( 'PayPal', 'woocommerce-paypal-payments' ),
checked: true,
disabled: true,
},
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' ),
},
};

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

@ -1,5 +1,3 @@
import { __ } from '@wordpress/i18n';
/**
* Name of the Redux store module.
*
@ -28,145 +26,3 @@ 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' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Cart page</a>.',
'wooocommerce-paypal-payments'
),
link: '#',
},
'classic-checkout': {
value: 'classic-checkout',
label: __( 'Classic Checkout', 'woocommerce-paypal-payments' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Classic Checkout page</a>.',
'wooocommerce-paypal-payments'
),
link: '#',
},
'express-checkout': {
value: 'express-checkout',
label: __( 'Express Checkout', 'woocommerce-paypal-payments' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Express Checkout location</a>.',
'wooocommerce-paypal-payments'
),
link: '#',
},
'mini-cart': {
value: 'mini-cart',
label: __( 'Mini Cart', 'woocommerce-paypel-payements' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Mini Cart</a>.',
'wooocommerce-paypal-payments'
),
link: '#',
},
'product-page': {
value: 'product-page',
label: __( 'Product Page', 'woocommerce-paypal-payments' ),
// translators: %s is the URL to a documentation page.
description: __(
'More details on the <a href="%s">Product Page</a>.',
'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' ),
},
};
export const STYLING_PAYMENT_METHODS = {
paypal: {
value: '',
label: __( 'PayPal', 'woocommerce-paypal-payments' ),
checked: true,
disabled: true,
},
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' ),
},
};