mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 13:44:42 +08:00
♻️ Extract UI configuration to separate files
This commit is contained in:
Philipp Stracker
parent
484356dcc0
commit
c16e5e4c58
8 changed files with 187 additions and 176 deletions
10
modules/ppcp-settings/resources/js/data/configuration.js
Normal file
10
modules/ppcp-settings/resources/js/data/configuration.js
Normal 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';
|
||||||
|
|
@ -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';
|
|
||||||
|
|
@ -15,6 +15,6 @@ export const OnboardingStoreName = Onboarding.STORE_NAME;
|
||||||
export const CommonStoreName = Common.STORE_NAME;
|
export const CommonStoreName = Common.STORE_NAME;
|
||||||
export const StylingStoreName = Styling.STORE_NAME;
|
export const StylingStoreName = Styling.STORE_NAME;
|
||||||
|
|
||||||
export * from './constants';
|
export * from './configuration';
|
||||||
|
|
||||||
addDebugTools( window.ppcpSettings, [ Onboarding, Common, Styling ] );
|
addDebugTools( window.ppcpSettings, [ Onboarding, Common, Styling ] );
|
||||||
|
|
|
||||||
|
|
@ -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',
|
||||||
|
};
|
||||||
|
|
@ -26,24 +26,3 @@ export const REST_HYDRATE_PATH = '/wc/v3/wc_paypal/onboarding';
|
||||||
* @type {string}
|
* @type {string}
|
||||||
*/
|
*/
|
||||||
export const REST_PERSIST_PATH = '/wc/v3/wc_paypal/onboarding';
|
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',
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
|
|
||||||
import { useSelect, useDispatch } from '@wordpress/data';
|
import { useSelect, useDispatch } from '@wordpress/data';
|
||||||
|
|
||||||
import { PRODUCT_TYPES } from '../constants';
|
import { PRODUCT_TYPES } from './configuration';
|
||||||
import { STORE_NAME } from './constants';
|
import { STORE_NAME } from './constants';
|
||||||
|
|
||||||
const useTransient = ( key ) =>
|
const useTransient = ( key ) =>
|
||||||
|
|
|
||||||
149
modules/ppcp-settings/resources/js/data/styling/configuration.js
Normal file
149
modules/ppcp-settings/resources/js/data/styling/configuration.js
Normal 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' ),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
import { __ } from '@wordpress/i18n';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Name of the Redux store module.
|
* Name of the Redux store module.
|
||||||
*
|
*
|
||||||
|
|
@ -28,145 +26,3 @@ export const REST_HYDRATE_PATH = '/wc/v3/wc_paypal/styling';
|
||||||
* @type {string}
|
* @type {string}
|
||||||
*/
|
*/
|
||||||
export const REST_PERSIST_PATH = '/wc/v3/wc_paypal/styling';
|
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' ),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue
