From c16e5e4c58e17e3c800c3eb14f30bf7876140fca Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Thu, 16 Jan 2025 15:03:46 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Extract=20UI=20configurati?= =?UTF-8?q?on=20to=20separate=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/data/configuration.js | 10 ++ .../resources/js/data/constants.js | 9 -- .../ppcp-settings/resources/js/data/index.js | 2 +- .../js/data/onboarding/configuration.js | 26 +++ .../resources/js/data/onboarding/constants.js | 21 --- .../resources/js/data/onboarding/hooks.js | 2 +- .../js/data/styling/configuration.js | 149 ++++++++++++++++++ .../resources/js/data/styling/constants.js | 144 ----------------- 8 files changed, 187 insertions(+), 176 deletions(-) create mode 100644 modules/ppcp-settings/resources/js/data/configuration.js delete mode 100644 modules/ppcp-settings/resources/js/data/constants.js create mode 100644 modules/ppcp-settings/resources/js/data/onboarding/configuration.js create mode 100644 modules/ppcp-settings/resources/js/data/styling/configuration.js diff --git a/modules/ppcp-settings/resources/js/data/configuration.js b/modules/ppcp-settings/resources/js/data/configuration.js new file mode 100644 index 000000000..0f3608552 --- /dev/null +++ b/modules/ppcp-settings/resources/js/data/configuration.js @@ -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'; diff --git a/modules/ppcp-settings/resources/js/data/constants.js b/modules/ppcp-settings/resources/js/data/constants.js deleted file mode 100644 index fbc8e8e11..000000000 --- a/modules/ppcp-settings/resources/js/data/constants.js +++ /dev/null @@ -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'; diff --git a/modules/ppcp-settings/resources/js/data/index.js b/modules/ppcp-settings/resources/js/data/index.js index e447ff770..959c5f187 100644 --- a/modules/ppcp-settings/resources/js/data/index.js +++ b/modules/ppcp-settings/resources/js/data/index.js @@ -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 ] ); diff --git a/modules/ppcp-settings/resources/js/data/onboarding/configuration.js b/modules/ppcp-settings/resources/js/data/onboarding/configuration.js new file mode 100644 index 000000000..4b31689b5 --- /dev/null +++ b/modules/ppcp-settings/resources/js/data/onboarding/configuration.js @@ -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', +}; diff --git a/modules/ppcp-settings/resources/js/data/onboarding/constants.js b/modules/ppcp-settings/resources/js/data/onboarding/constants.js index 7c35ee693..396726199 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/constants.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/constants.js @@ -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', -}; diff --git a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js index c4308c0fa..2d1542f68 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js @@ -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 ) => diff --git a/modules/ppcp-settings/resources/js/data/styling/configuration.js b/modules/ppcp-settings/resources/js/data/styling/configuration.js new file mode 100644 index 000000000..861379e2d --- /dev/null +++ b/modules/ppcp-settings/resources/js/data/styling/configuration.js @@ -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 Cart page.', + '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 Classic Checkout page.', + '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 Express Checkout location.', + '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 Mini Cart.', + '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 Product Page.', + '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' ), + }, +}; diff --git a/modules/ppcp-settings/resources/js/data/styling/constants.js b/modules/ppcp-settings/resources/js/data/styling/constants.js index f21ac7adf..db1082f33 100644 --- a/modules/ppcp-settings/resources/js/data/styling/constants.js +++ b/modules/ppcp-settings/resources/js/data/styling/constants.js @@ -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 Cart page.', - '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 Classic Checkout page.', - '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 Express Checkout location.', - '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 Mini Cart.', - '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 Product Page.', - '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' ), - }, -};