Merge branch 'trunk' into PCP-4102-save-and-display-pay-later-messaging-configuration

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

@@ -1,25 +1,33 @@
+$margin_bottom: 48px;
+
 .ppcp-r-navigation-container {
+	// Theming.
+	--wp-components-color-accent: #{$color-blueberry};
+	--color-text: #{$color-gray-900};
+	--color-disabled: #CCC;
+	--navbar-height: 40px;
+	--navbar-vertical-padding: 10px;
+	--subnavigation-height: 40px;
+
+	// Styling.
 	position: sticky;
 	top: var(--wp-admin--admin-bar--height);
 	z-index: 10;
 
-	padding: 10px 48px;
+	padding: 0 48px;
-	margin: 0 -20px 48px -20px;
+	margin: 0 -20px #{$margin_bottom} -20px;
 
 	box-shadow: 0 -1px 0 0 $color-gray-300 inset;
 	background: var(--ppcp-color-app-bg);
 	transition: box-shadow 0.3s;
 
-	--wp-components-color-accent: #{$color-blueberry};
-	--color-text: #{$color-gray-900};
-	--color-disabled: #CCC;
-
 	.ppcp-r-navigation {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		flex-direction: column;
+		flex-direction: row;
-		gap: 10px;
+		height: calc(var(--navbar-height) + (2 * var(--navbar-vertical-padding)));
+		padding: var(--navbar-vertical-padding) 0;
 
 		.components-button {
 			@include font(13, 20, 400);
@@ -58,40 +66,46 @@
 				}
 			}
 		}
-		&--row {
+	}
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			width: 100%;
-			padding-bottom: 10px;
-		}
 
+	.ppcp-r-navigation--left {
+		align-items: center;
+		display: inline-flex;
+	}
 
-		&--left {
+	.ppcp-r-navigation--right {
-			align-items: center;
+		.is-link {
-			display: inline-flex;
+			padding: 10px 16px;
 		}
+	}
 
-		&--right {
+	.ppcp-r-navigation--progress-bar {
-			.is-link {
+		position: absolute;
-				padding: 10px 16px;
+		bottom: 0;
-			}
+		left: 0;
-		}
+		background-color: var(--wp-components-color-accent);
-
+		height: 4px;
-		&--progress-bar {
+		transition: width 0.3s;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			background-color: var(--wp-components-color-accent);
-			height: 4px;
-			transition: width 0.3s;
-		}
 	}
 
 	&.ppcp--is-scrolled {
 		box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85, 93, 102, .3);
 	}
 
+	.ppcp--top-sub-navigation {
+		height: var(--subnavigation-height);
+		margin: 0;
+		padding: 0;
+
+		.ppcp-r-tabs {
+			margin: 0;
+		}
+
+		.components-tab-panel__tabs-item {
+			height: var(--subnavigation-height);
+		}
+	}
+
 	@media screen and (max-width: 782px) {
 		padding: 10px 12px;
 

modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss

@@ -1,6 +1,6 @@
 .ppcp-r-tabs {
 	--wp-components-color-accent: #{$color-blueberry};
-	--wp-admin-border-width-focus: 3px;
+	--wp-admin-border-width-focus: 2px;
 
 	transition: max-width 0.2s;
 	margin-top: 10px;
@@ -9,11 +9,9 @@
 	.components-tab-panel__tabs {
 		gap: 0;
 		overflow: auto;
+
 		.components-button {
 			padding: 16px 20px;
-			&.is-active {
-				background-color: #fff4;
-			}
 		}
 	}
 }

modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss

@@ -12,6 +12,7 @@ body:has(.ppcp-r-container--onboarding) {
 	.woocommerce-layout__header,
 	.wrap.woocommerce form > h2,
 	#mainform .subsubsub,
+	#mainform .subsubsub + br.clear,
 	#screen-meta-links {
 		display: none !important;
 		visibility: hidden;

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

@@ -1,4 +1,4 @@
-import data from '../../utils/data';
+import { PPIcon } from './Icons';
 
 const ImageBadge = ( { images } ) => {
 	if ( ! images || ! images.length ) {
@@ -8,7 +8,13 @@ const ImageBadge = ( { images } ) => {
 	return (
 		<BadgeContent>
 			<span className="ppcp-r-badge-box__title-image-badge">
-				{ images.map( ( badge ) => data().getImage( badge ) ) }
+				{ images.map( ( badge, index ) => (
+					<PPIcon
+						key={ `badge-${ index }` }
+						imageName={ badge }
+						className="ppcp-r-badge-box__image"
+					/>
+				) ) }
 			</span>
 		</BadgeContent>
 	);

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js

@@ -65,7 +65,9 @@ const OptionItem = ( {
 			<div className="ppcp--box-content">
 				<div className="ppcp--box-content-inner">
 					<span className="ppcp--box-title">{ itemTitle }</span>
-					<p className="ppcp--box-description">{ itemDescription }</p>
+					<div className="ppcp--box-description">
+						{ itemDescription }
+					</div>
 					{ children && (
 						<div className="ppcp--box-details">{ children }</div>
 					) }

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const GenericIcon = ( { imageName, className = '', alt = '' } ) => {
+	const pathToImages = global.ppcpSettings.assets.imagesUrl;
+
+	return (
+		<img
+			className={ className }
+			alt={ alt }
+			src={ `${ pathToImages }${ imageName }` }
+		/>
+	);
+};
+
+export default GenericIcon;

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

@@ -1,6 +1,6 @@
 import { SVG, Path } from '@wordpress/primitives';
 
-const logoPayPal = (
+const LogoPayPal = (
 	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 38">
 		<Path
 			d="M109.583.683v27.359h-6.225V.683h6.225Zm-8.516 9.234v18.175h-5.534v-1.567c-.7.683-1.5 1.2-2.383 1.567a7.259 7.259 0 0 1-2.892.583c-1.3 0-2.508-.242-3.616-.725a9.216 9.216 0 0 1-2.892-2.067 10.021 10.021 0 0 1-1.958-3.05c-.459-1.183-.684-2.458-.684-3.816 0-1.359.225-2.617.684-3.775.483-1.184 1.133-2.217 1.958-3.092a8.708 8.708 0 0 1 2.892-2.033c1.108-.509 2.316-.767 3.616-.767 1.034 0 2 .192 2.892.583a7.312 7.312 0 0 1 2.383 1.567V9.933h5.534v-.016Zm-9.809 13.225c1.134 0 2.059-.384 2.784-1.167.75-.775 1.125-1.767 1.125-2.975 0-1.208-.375-2.208-1.125-2.975-.725-.775-1.659-1.167-2.784-1.167-1.125 0-2.075.384-2.825 1.167-.725.775-1.083 1.767-1.083 2.975 0 1.208.367 2.208 1.083 2.975.75.775 1.692 1.167 2.825 1.167ZM72.225.683c1.642 0 3.042.234 4.2.692 1.158.458 2.133 1.1 2.933 1.925a9.439 9.439 0 0 1 1.917 2.908c.458 1.092.683 2.267.683 3.525 0 1.259-.225 2.434-.683 3.525a9.293 9.293 0 0 1-1.917 2.909c-.791.825-1.775 1.466-2.933 1.925-1.158.458-2.558.691-4.2.691h-3v9.3h-6.333V.683h9.333Zm-.908 12.467c.85 0 1.491-.083 1.958-.258a3.853 3.853 0 0 0 1.192-.725c.65-.609.975-1.417.975-2.434 0-1.016-.325-1.825-.975-2.433a3.329 3.329 0 0 0-1.192-.692c-.458-.191-1.108-.291-1.958-.291h-2.1v6.833h2.1ZM39.558 9.917h6.875l4.667 8.716h.075l4.158-8.716H61.7l-13.642 27.4h-6.333l6.225-12.534-8.392-14.866Zm-1.225 0v18.175H32.8v-1.567c-.7.683-1.5 1.2-2.383 1.567a7.258 7.258 0 0 1-2.892.583c-1.3 0-2.508-.242-3.617-.725a9.218 9.218 0 0 1-2.891-2.067 10.18 10.18 0 0 1-1.959-3.05c-.458-1.183-.683-2.458-.683-3.816 0-1.359.225-2.617.683-3.775.484-1.184 1.134-2.217 1.959-3.092a8.626 8.626 0 0 1 2.891-2.033c1.109-.509 2.317-.767 3.617-.767 1.033 0 2 .192 2.892.583A7.312 7.312 0 0 1 32.8 11.5V9.933h5.533v-.016Zm-9.808 13.225c1.133 0 2.058-.384 2.792-1.167.75-.775 1.125-1.767 1.125-2.975 0-1.208-.375-2.208-1.125-2.975-.725-.775-1.659-1.167-2.792-1.167-1.133 0-2.075.384-2.825 1.167-.725.775-1.083 1.767-1.083 2.975 0 1.208.366 2.208 1.083 2.975.75.775 1.692 1.167 2.825 1.167ZM9.75.683c1.642 0 3.042.234 4.2.692 1.158.458 2.133 1.1 2.933 1.925A9.439 9.439 0 0 1 18.8 6.208c.458 1.092.683 2.267.683 3.525 0 1.259-.225 2.434-.683 3.525a9.293 9.293 0 0 1-1.917 2.909c-.791.825-1.775 1.466-2.933 1.925-1.158.458-2.558.691-4.2.691h-3v9.3H.417V.683H9.75Zm-.9 12.467c.85 0 1.492-.083 1.958-.258A3.855 3.855 0 0 0 12 12.167c.65-.609.975-1.417.975-2.434 0-1.016-.325-1.825-.975-2.433a3.33 3.33 0 0 0-1.192-.692c-.458-.191-1.108-.291-1.958-.291h-2.1v6.833h2.1Z"
@@ -9,4 +9,4 @@ const logoPayPal = (
 	</SVG>
 );
 
-export default logoPayPal;
+export default LogoPayPal;

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

@@ -1,9 +1,9 @@
 import { SVG, Path } from '@wordpress/primitives';
 
-const openSignup = (
+const OpenSignup = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24">
 		<Path d="M12.4999 12.75V18.75C12.4999 18.9489 12.4209 19.1397 12.2803 19.2803C12.1396 19.421 11.9488 19.5 11.7499 19.5C11.551 19.5 11.3603 19.421 11.2196 19.2803C11.0789 19.1397 10.9999 18.9489 10.9999 18.75V14.5613L4.78055 20.7806C4.71087 20.8503 4.62815 20.9056 4.5371 20.9433C4.44606 20.981 4.34847 21.0004 4.24993 21.0004C4.15138 21.0004 4.0538 20.981 3.96276 20.9433C3.87171 20.9056 3.78899 20.8503 3.7193 20.7806C3.64962 20.7109 3.59435 20.6282 3.55663 20.5372C3.51892 20.4461 3.49951 20.3485 3.49951 20.25C3.49951 20.1515 3.51892 20.0539 3.55663 19.9628C3.59435 19.8718 3.64962 19.7891 3.7193 19.7194L9.93868 13.5H5.74993C5.55102 13.5 5.36025 13.421 5.2196 13.2803C5.07895 13.1397 4.99993 12.9489 4.99993 12.75C4.99993 12.5511 5.07895 12.3603 5.2196 12.2197C5.36025 12.079 5.55102 12 5.74993 12H11.7499C11.9488 12 12.1396 12.079 12.2803 12.2197C12.4209 12.3603 12.4999 12.5511 12.4999 12.75ZM19.9999 3H7.99993C7.6021 3 7.22057 3.15804 6.93927 3.43934C6.65796 3.72064 6.49993 4.10218 6.49993 4.5V9C6.49993 9.19891 6.57895 9.38968 6.7196 9.53033C6.86025 9.67098 7.05102 9.75 7.24993 9.75C7.44884 9.75 7.63961 9.67098 7.78026 9.53033C7.92091 9.38968 7.99993 9.19891 7.99993 9V4.5H19.9999V16.5H15.4999C15.301 16.5 15.1103 16.579 14.9696 16.7197C14.8289 16.8603 14.7499 17.0511 14.7499 17.25C14.7499 17.4489 14.8289 17.6397 14.9696 17.7803C15.1103 17.921 15.301 18 15.4999 18H19.9999C20.3978 18 20.7793 17.842 21.0606 17.5607C21.3419 17.2794 21.4999 16.8978 21.4999 16.5V4.5C21.4999 4.10218 21.3419 3.72064 21.0606 3.43934C20.7793 3.15804 20.3978 3 19.9999 3Z" />
 	</SVG>
 );
 
-export default openSignup;
+export default OpenSignup;

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

@@ -1,5 +1,6 @@
-export { default as openSignup } from './open-signup';
+export { default as PPIcon } from './GenericIcon';
-export { default as logoPayPal } from './logo-paypal';
+export { default as OpenSignup } from './OpenSignup';
+export { default as LogoPayPal } from './LogoPayPal';
 
 export const NOTIFICATION_SUCCESS = '✔️';
 export const NOTIFICATION_ERROR = '❌';

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

@@ -5,7 +5,7 @@ import { TabPanel } from '@wordpress/components';
 
 import { updateQueryString } from '../../utils/navigation';
 
-const TabNavigation = ( { tabs, activePanel, setActivePanel } ) => {
+const TabBar = ( { tabs, activePanel, setActivePanel } ) => {
 	const isValidTab = ( tabsList, checkTab ) => {
 		return tabsList.some( ( tab ) => tab.name === checkTab );
 	};
@@ -36,4 +36,4 @@ const TabNavigation = ( { tabs, activePanel, setActivePanel } ) => {
 	);
 };
 
-export default TabNavigation;
+export default TabBar;

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

@@ -6,7 +6,6 @@ import classNames from 'classnames';
 import useIsScrolled from '../../hooks/useIsScrolled';
 import { useNavigation } from '../../hooks/useNavigation';
 import BusyStateWrapper from './BusyStateWrapper';
-import TabNavigation from './TabNavigation';
 
 const TopNavigation = ( {
 	title,
@@ -16,9 +15,7 @@ const TopNavigation = ( {
 	onTitleClick = null,
 	showProgressBar = false,
 	progressBarPercent = 0,
-	tabs = [],
+	subNavigation = null,
-	activePanel = '',
-	setActivePanel = () => {},
 } ) => {
 	const { goToWooCommercePaymentsTab } = useNavigation();
 	const { isScrolled } = useIsScrolled();
@@ -44,9 +41,9 @@ const TopNavigation = ( {
 	}, [] );
 
 	return (
-		<div className={ className }>
+		<>
-			<div className="ppcp-r-navigation">
+			<nav className={ className }>
-				<div className="ppcp-r-navigation--row">
+				<div className="ppcp-r-navigation">
 					<BusyStateWrapper
 						className="ppcp-r-navigation--left"
 						busySpinner={ false }
@@ -69,19 +66,18 @@ const TopNavigation = ( {
 						{ children }
 					</BusyStateWrapper>
 				</div>
-				{ tabs.length > 0 && (
+
-					<TabNavigation
+				{ subNavigation && (
-						tabs={ tabs }
+					<section className="ppcp--top-sub-navigation">
-						activePanel={ activePanel }
+						{ subNavigation }
-						setActivePanel={ setActivePanel }
+					</section>
-					/>
 				) }
 
 				{ showProgressBar && (
 					<ProgressBar percent={ progressBarPercent } />
 				) }
-			</div>
+			</nav>
-		</div>
+		</>
 	);
 };
 

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ConnectionButton.js

@@ -1,7 +1,7 @@
 import { Button } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
 import classNames from 'classnames';
-import { openSignup } from '../../../ReusableComponents/Icons';
+import { OpenSignup } from '../../../ReusableComponents/Icons';
 import { useHandleOnboardingButton } from '../../../../hooks/useHandleConnections';
 import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
 
@@ -27,7 +27,7 @@ const ButtonOrPlaceholder = ( {
 	const buttonProps = {
 		className,
 		variant,
-		icon: showIcon ? openSignup : null,
+		icon: showIcon ? OpenSignup : null,
 	};
 
 	if ( href ) {

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js

@@ -21,9 +21,37 @@ const OnboardingNavigation = ( { stepDetails, onNext, onPrev } ) => {
 			showProgressBar={ true }
 			progressBarPercent={ percentage * 0.9 }
 		>
-			<Button variant="link" onClick={ goToWooCommercePaymentsTab }>
+			<OnboardingNavigationActions
+				onExit={ goToWooCommercePaymentsTab }
+				isFirst={ isFirst }
+				isDisabled={ isDisabled }
+				showNext={ showNext }
+				onNext={ onNext }
+			/>
+		</TopNavigation>
+	);
+};
+
+export default OnboardingNavigation;
+
+const OnboardingNavigationActions = ( {
+	isFirst,
+	showNext,
+	isDisabled,
+	onExit,
+	onNext,
+} ) => {
+	// On first page we don't have any actions.
+	if ( isFirst ) {
+		return null;
+	}
+
+	return (
+		<>
+			<Button variant="link" onClick={ onExit }>
 				{ __( 'Save and exit', 'woocommerce-paypal-payments' ) }
 			</Button>
+
 			{ showNext && (
 				<Button
 					variant="primary"
@@ -33,8 +61,6 @@ const OnboardingNavigation = ( { stepDetails, onNext, onPrev } ) => {
 					{ __( 'Continue', 'woocommerce-paypal-payments' ) }
 				</Button>
 			) }
-		</TopNavigation>
+		</>
 	);
 };
-
-export default OnboardingNavigation;

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js

@@ -1,13 +1,13 @@
 import { Icon } from '@wordpress/components';
 
-import { logoPayPal } from '../../../ReusableComponents/Icons';
+import { LogoPayPal } from '../../../ReusableComponents/Icons';
 
 const OnboardingHeader = ( props ) => {
 	return (
 		<section className="ppcp-r-onboarding-header">
 			<div className="ppcp-r-onboarding-header__logo">
 				<div className="ppcp-r-onboarding-header__logo-wrapper">
-					<Icon icon={ logoPayPal } width="auto" height={ 38 } />
+					<Icon icon={ LogoPayPal } width={ 110 } height={ 38 } />
 				</div>
 			</div>
 			<div className="ppcp-r-onboarding-header__content">

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js

@@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n';
 
 import TopNavigation from '../../../ReusableComponents/TopNavigation';
 import { useSaveSettings } from '../../../../hooks/useSaveSettings';
+import TabBar from '../../../ReusableComponents/TabBar';
 
 const SettingsNavigation = ( {
 	canSave = true,
@@ -18,9 +19,13 @@ const SettingsNavigation = ( {
 		<TopNavigation
 			title={ title }
 			exitOnTitleClick={ true }
-			tabs={ tabs }
+			subNavigation={
-			activePanel={ activePanel }
+				<TabBar
-			setActivePanel={ setActivePanel }
+					tabs={ tabs }
+					activePanel={ activePanel }
+					setActivePanel={ setActivePanel }
+				/>
+			}
 		>
 			{ canSave && (
 				<Button variant="primary" onClick={ persistAll }>

modules/ppcp-settings/resources/js/data/debug.js

@@ -6,15 +6,22 @@ import {
 	StylingStoreName,
 	TodosStoreName,
 } from './index';
-import { setCompleted } from './onboarding/actions';
 
 export const addDebugTools = ( context, modules ) => {
-	if ( ! context || ! context?.debug ) {
+	if ( ! context ) {
 		return;
 	}
 
+	/*
+     // TODO - enable this condition for version 3.0.1
+     // In version 3.0.0 we want to have the debug tools available on every installation
+     if ( ! context.debug ) { return }
+     */
+
+	const debugApi = ( window.ppcpDebugger = window.ppcpDebugger || {} );
+
 	// Dump the current state of all our Redux stores.
-	context.dumpStore = async () => {
+	debugApi.dumpStore = async () => {
 		/* eslint-disable no-console */
 		if ( ! console?.groupCollapsed ) {
 			console.error( 'console.groupCollapsed is not supported.' );
@@ -42,7 +49,7 @@ export const addDebugTools = ( context, modules ) => {
 	};
 
 	// Reset all Redux stores to their initial state.
-	context.resetStore = () => {
+	debugApi.resetStore = () => {
 		const stores = [];
 		const { isConnected } = wp.data.select( CommonStoreName ).merchant();
 
@@ -70,13 +77,17 @@ export const addDebugTools = ( context, modules ) => {
 			// eslint-disable-next-line no-console
 			console.log( `Reset store: ${ storeName }...` );
 
-			store.reset();
+			try {
-			store.persist();
+				store.reset();
+				store.persist();
+			} catch ( error ) {
+				console.error( ' ... Reset failed, skipping this store' );
+			}
 		} );
 	};
 
 	// Disconnect the merchant and display the onboarding wizard.
-	context.disconnect = () => {
+	debugApi.disconnect = () => {
 		const common = wp.data.dispatch( CommonStoreName );
 
 		common.disconnectMerchant();
@@ -88,10 +99,13 @@ export const addDebugTools = ( context, modules ) => {
 	};
 
 	// Enters or completes the onboarding wizard without changing anything else.
-	context.onboardingMode = ( state ) => {
+	debugApi.onboardingMode = ( state ) => {
 		const onboarding = wp.data.dispatch( OnboardingStoreName );
 
 		onboarding.setCompleted( ! state );
 		onboarding.persist();
 	};
+
+	// Expose original debug API.
+	Object.assign( context, debugApi );
 };