diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabStyling.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabStyling.js index 7ddd8be7a..ad931c844 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabStyling.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabStyling.js @@ -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 ) } /> ) @@ -242,7 +244,7 @@ const SectionButtonShape = ( { locationSettings, updateButtonStyle } ) => { updateButtonStyle( 'shape', newValue ) } selected={ locationSettings.settings.style.shape } - options={ shapeOptions } + options={ Object.values( STYLING_SHAPES ) } /> ); @@ -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 ) } /> ); @@ -274,7 +276,7 @@ const SectionButtonColor = ( { locationSettings, updateButtonStyle } ) => { updateButtonStyle( 'color', newValue ) } value={ locationSettings.settings.style.color } - options={ colorOptions } + options={ Object.values( STYLING_COLORS ) } /> ); diff --git a/modules/ppcp-settings/resources/js/data/constants.js b/modules/ppcp-settings/resources/js/data/constants.js index 5654ad476..fbc8e8e11 100644 --- a/modules/ppcp-settings/resources/js/data/constants.js +++ b/modules/ppcp-settings/resources/js/data/constants.js @@ -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'; diff --git a/modules/ppcp-settings/resources/js/data/onboarding/constants.js b/modules/ppcp-settings/resources/js/data/onboarding/constants.js index 4b33c6701..7c35ee693 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 @@ -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', +}; 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 index 6bdb4f643..ae0636481 100644 --- a/modules/ppcp-settings/resources/js/data/settings/tab-styling-data.js +++ b/modules/ppcp-settings/resources/js/data/settings/tab-styling-data.js @@ -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' ), - }, -]; diff --git a/modules/ppcp-settings/resources/js/data/styling/constants.js b/modules/ppcp-settings/resources/js/data/styling/constants.js index db1082f33..e5e32efab 100644 --- a/modules/ppcp-settings/resources/js/data/styling/constants.js +++ b/modules/ppcp-settings/resources/js/data/styling/constants.js @@ -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 Cart page 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 Classic Checkout page 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 Express Checkout location 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 Mini Cart 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 Product Page 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' ), + }, +};