🔀 Merge branch 'temp/settings-ui'

# Conflicts:
#	modules/ppcp-settings/resources/js/Components/Screens/Settings.js

modules/ppcp-api-client/src/Endpoint/PartnerReferrals.php

@@ -16,6 +16,8 @@
 
 /**
  * Class PartnerReferrals
+ *
+ * @see https://developer.paypal.com/docs/api/partner-referrals/v2/
  */
 class PartnerReferrals {
 

modules/ppcp-settings/resources/css/_variables.scss

@@ -10,6 +10,7 @@ $color-gray-500: #BBBBBB;
 $color-gray-400: #CCCCCC;
 $color-gray-300: #EBEBEB;
 $color-gray-200: #E0E0E0;
+$color-gray-100: #F0F0F0;
 $color-gray: #646970;
 $color-text-tertiary: #505050;
 $color-text-text: #070707;
@@ -27,6 +28,8 @@ $max-width-settings: 938px;
 
 $card-vertical-gap: 48px;
 
+/* define custom theming options */
+
 :root {
 	--ppcp-color-app-bg: #{$color-white};
 }
@@ -37,4 +40,18 @@ $card-vertical-gap: 48px;
 	--max-width-onboarding-content: #{$max-width-onboarding-content};
 
 	--max-container-width: var(--max-width-settings);
+
+	--color-black: #{$color-black};
+	--color-white: #{$color-white};
+	--color-blueberry: #{$color-blueberry};
+	--color-gray-900: #{$color-gray-900};
+	--color-gray-800: #{$color-gray-800};
+	--color-gray-700: #{$color-gray-700};
+	--color-gray-600: #{$color-gray-600};
+	--color-gray-500: #{$color-gray-500};
+	--color-gray-400: #{$color-gray-400};
+	--color-gray-300: #{$color-gray-300};
+	--color-gray-200: #{$color-gray-200};
+	--color-gray-100: #{$color-gray-100};
+	--color-gradient-dark: #{$color-gradient-dark};
 }

modules/ppcp-settings/resources/css/components/_app.scss

@@ -0,0 +1,22 @@
+/**
+ * Global app-level styles
+ */
+
+.ppcp-r-app.loading {
+	height: 400px;
+	width: 400px;
+	position: absolute;
+	left: 50%;
+	transform: translate(-50%, 0);
+	text-align: center;
+
+	.ppcp-r-spinner-overlay {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.ppcp-r-spinner-overlay__message {
+		transform: translate(0, 32px)
+	}
+}

modules/ppcp-settings/resources/css/components/reusable-components/_busy-state.scss

@@ -0,0 +1,10 @@
+.ppcp-r-busy-wrapper {
+	position: relative;
+
+	&.ppcp--is-loading {
+		pointer-events: none;
+		user-select: none;
+
+		--spinner-overlay-color: #fff4;
+	}
+}

modules/ppcp-settings/resources/css/components/reusable-components/_button.scss

@@ -1,48 +1,102 @@
+%button-style-default {
+	background-color: var(--button-background);
+	color: var(--button-color);
+	box-shadow: inset 0 0 0 1px var(--button-border-color);
+}
+
+%button-style-hover {
+	background-color: var(--button-hover-background);
+	color: var(--button-hover-color);
+	box-shadow: inset 0 0 0 1px var(--button-hover-border-color);
+}
+
+%button-style-disabled {
+	background-color: var(--button-disabled-background);
+	color: var(--button-disabled-color);
+	box-shadow: inset 0 0 0 1px var(--button-disabled-border-color);
+}
+
+%button-shape-pill {
+	border-radius: 50px;
+	padding: 15px 32px;
+	height: auto;
+}
+
 button.components-button, a.components-button {
-	&.is-primary, &.is-secondary {
-		&:not(:disabled) {
-			background-color: $color-black;
-		}
+	/* default theme */
+	--button-color: var(--color-gray-900);
+	--button-background: transparent;
+	--button-border-color: transparent;
 
-		&:disabled {
-			color: $color-gray-700;
-		}
+	--button-hover-color: var(--button-color);
+	--button-hover-background: var(--button-background);
+	--button-hover-border-color: var(--button-border-color);
+
+	--button-disabled-color: var(--color-gray-500);
+	--button-disabled-background: transparent;
+	--button-disabled-border-color: transparent;
+
+	/* style the button template */
 
-		border-radius: 50px;
-		padding: 15px 32px;
-		height: auto;
+	&:not(:disabled) {
+		@extend %button-style-default;
+	}
+
+	&:hover {
+		@extend %button-style-hover;
+	}
+
+	&:disabled {
+		@extend %button-style-disabled;
+	}
+
+	/*
+	----------------------------------------------
+	Customize variants using the theming variables
+	*/
+
+	&.is-primary,
+	&.is-secondary {
+		@extend %button-shape-pill;
 	}
 
 	&.is-primary {
 		@include font(14, 18, 900);
 
-		&:not(:disabled) {
-			background-color: $color-blueberry;
-			color: $color-white;
-		}
+		--button-color: #{$color-white};
+		--button-background: #{$color-blueberry};
+
+		--button-disabled-color: #{$color-gray-100};
+		--button-disabled-background: #{$color-gray-500};
 	}
 
-	&.is-secondary:not(:disabled) {
-		border-color: $color-blueberry;
-		background-color: $color-white;
-		color: $color-blueberry;
+	&.is-secondary {
+		--button-color: #{$color-blueberry};
+		--button-background: #{$color-white};
+		--button-border-color: #{$color-blueberry};
 
-		&:hover {
-			background-color: $color-white;
-			background: none;
-		}
+		--button-disabled-color: #{$color-gray-600};
+		--button-disabled-background: #{$color-gray-100};
+		--button-disabled-border-color: #{$color-gray-400};
 	}
 
 	&.is-tertiary {
-		color: $color-blueberry;
-
-		&:hover {
-			color: $color-gradient-dark;
-		}
+		--button-color: #{$color-blueberry};
+		--button-hover-color: #{$color-gradient-dark};
 
 		&:focus:not(:disabled) {
 			border: none;
 			box-shadow: none;
 		}
 	}
+
+	&.small-button {
+		@include small-button;
+	}
+}
+
+.ppcp--is-loading {
+	button.components-button, a.components-button {
+		@extend %button-style-disabled;
+	}
 }

modules/ppcp-settings/resources/css/components/reusable-components/_settings-toggle-block.scss

@@ -31,10 +31,4 @@
 	&__toggled-content {
 		margin-top: 24px;
 	}
-
-	&.ppcp--is-loading {
-		pointer-events: none;
-
-		--spinner-overlay-color: #fff4;
-	}
 }

modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss

@@ -12,5 +12,6 @@
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
+		margin: 0;
 	}
 }

modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss

@@ -20,12 +20,6 @@
 		margin: 0 0 24px 0;
 	}
 
-	.ppcp-r-toggle-block__toggled-content > button{
-		@include small-button;
-		color: $color-white;
-		border: none;
-	}
-
 	.client-id-error {
 		color: #cc1818;
 		margin: -16px 0 24px;

modules/ppcp-settings/resources/css/style.scss

@@ -3,10 +3,11 @@
 
 #ppcp-settings-container {
 	@import './global';
-	@import './components/reusable-components/onboarding-header';
+	@import './components/reusable-components/busy-state';
 	@import './components/reusable-components/button';
-	@import './components/reusable-components/settings-toggle-block';
 	@import './components/reusable-components/separator';
+	@import './components/reusable-components/onboarding-header';
+	@import './components/reusable-components/settings-toggle-block';
 	@import './components/reusable-components/payment-method-icons';
 	@import "./components/reusable-components/payment-method-item";
 	@import './components/reusable-components/settings-wrapper';
@@ -22,6 +23,7 @@
 	@import './components/screens/onboarding';
 	@import './components/screens/settings';
 	@import './components/screens/overview/tab-styling';
+	@import './components/app';
 }
 
 @import './components/reusable-components/payment-method-modal';

modules/ppcp-settings/resources/js/Components/ReusableComponents/BusyStateWrapper.js

@@ -0,0 +1,68 @@
+import {
+	Children,
+	isValidElement,
+	cloneElement,
+	useMemo,
+	createContext,
+	useContext,
+} from '@wordpress/element';
+import classNames from 'classnames';
+
+import { CommonHooks } from '../../data';
+import SpinnerOverlay from './SpinnerOverlay';
+
+// Create context to track the busy state across nested wrappers
+const BusyContext = createContext( false );
+
+/**
+ * Wraps interactive child elements and modifies their behavior based on the global `isBusy` state.
+ * Allows custom processing of child props via the `onBusy` callback.
+ *
+ * @param {Object}   props             - Component properties.
+ * @param {Children} props.children    - Child components to wrap.
+ * @param {boolean}  props.enabled     - Enables or disables the busy-state logic.
+ * @param {boolean}  props.busySpinner - Allows disabling the spinner in busy-state.
+ * @param {string}   props.className   - Additional class names for the wrapper.
+ * @param {Function} props.onBusy      - Callback to process child props when busy.
+ */
+const BusyStateWrapper = ( {
+	children,
+	enabled = true,
+	busySpinner = true,
+	className = '',
+	onBusy = () => ( { disabled: true } ),
+} ) => {
+	const { isBusy } = CommonHooks.useBusyState();
+	const hasBusyParent = useContext( BusyContext );
+
+	const isBusyComponent = isBusy && enabled;
+	const showSpinner = busySpinner && isBusyComponent && ! hasBusyParent;
+
+	const wrapperClassName = classNames( 'ppcp-r-busy-wrapper', className, {
+		'ppcp--is-loading': isBusyComponent,
+	} );
+
+	const memoizedChildren = useMemo(
+		() =>
+			Children.map( children, ( child ) =>
+				isValidElement( child )
+					? cloneElement(
+							child,
+							isBusyComponent ? onBusy( child.props ) : {}
+					  )
+					: child
+			),
+		[ children, isBusyComponent, onBusy ]
+	);
+
+	return (
+		<BusyContext.Provider value={ isBusyComponent }>
+			<div className={ wrapperClassName }>
+				{ showSpinner && <SpinnerOverlay /> }
+				{ memoizedChildren }
+			</div>
+		</BusyContext.Provider>
+	);
+};
+
+export default BusyStateWrapper;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons.js

@@ -0,0 +1 @@
+export { default as openSignup } from './Icons/open-signup';

modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js

@@ -69,7 +69,6 @@ const AcdcOptionalPaymentMethods = ( {
 						'woocommerce-paypal-payments'
 					) }
 					imageBadge={ [
-						'icon-button-sepa.svg',
 						'icon-button-ideal.svg',
 						'icon-button-blik.svg',
 						'icon-button-bancontact.svg',

modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcons.js

@@ -11,7 +11,6 @@ const PaymentMethodIcons = ( props ) => {
 			<PaymentMethodIcon type="discover" icons={ props.icons } />
 			<PaymentMethodIcon type="apple-pay" icons={ props.icons } />
 			<PaymentMethodIcon type="google-pay" icons={ props.icons } />
-			<PaymentMethodIcon type="sepa" icons={ props.icons } />
 			<PaymentMethodIcon type="ideal" icons={ props.icons } />
 			<PaymentMethodIcon type="bancontact" icons={ props.icons } />
 		</div>