woocommerce-paypal-payments/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js

import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {useOnboardingStepBusiness, useOnboardingStepProducts} from "../../data";
import data from "../../utils/data";

const Navigation = ( {
	setStep,
	setCompleted,
	currentStep,
	stepperOrder
} ) => {
    const isLastStep = () => currentStep + 1 === stepperOrder.length;
    const isFistStep = () => currentStep === 0;
	const navigateBy = ( stepDirection ) => {
		let newStep = currentStep + stepDirection;

		if ( isNaN( newStep ) || newStep < 0 ) {
			console.warn( 'Invalid next step:', newStep );
			newStep = 0;
		}

		if ( newStep >= stepperOrder.length ) {
			setCompleted( true );
		} else {
			setStep( newStep );
		}
	};

    const { products, toggleProduct } = useOnboardingStepProducts();
    const { isCasualSeller, setIsCasualSeller } = useOnboardingStepBusiness();

    let navigationTitle = '';
    let disabled = false;

    switch ( currentStep ) {
        case 1:
            navigationTitle = __( 'Set up store type', 'woocommerce-paypal-payments' );
            disabled = isCasualSeller === null
            break;
        case 2:
            navigationTitle = __( 'Select product types', 'woocommerce-paypal-payments' );
            disabled = products.length < 1
            break;
        case 3:
            navigationTitle = __( 'Choose checkout options', 'woocommerce-paypal-payments' );
        case 4:
            navigationTitle = __( 'Connect your PayPal account', 'woocommerce-paypal-payments' );
            break;
        default:
            navigationTitle = __( 'PayPal Payments', 'woocommerce-paypal-payments' );
    }

	return (
        <div className="ppcp-r-navigation-container">
            <div className="ppcp-r-navigation">
                <div className="ppcp-r-navigation--left">
                    <span>{data().getImage('icon-arrow-left.svg')}</span>
                    {!isFistStep() ? (
                        <Button variant="tertiary" onClick={() => navigateBy(-1)}>
                            {navigationTitle}
                        </Button>
                    ) : (
                        <a
                            className="ppcp-r-navigation--left__link"
                            href={global.ppcpSettings.wcPaymentsTabUrl}
                            aria-label={__('Return to payments', 'woocommerce-paypal-payments')}
                        >
                            {navigationTitle}
                        </a>
                    )}
                </div>
                {!isFistStep() && (
                    <div className="ppcp-r-navigation--right">
                        <a
                            href={ global.ppcpSettings.wcPaymentsTabUrl }
                            aria-label={ __( 'Return to payments', 'woocommerce-paypal-payments' ) }
                        >
                            { __( 'Save and exit', 'woocommerce-paypal-payments' ) }
                        </a>
                        {!isLastStep() && (
                            <Button
                                variant="primary"
                                disabled={ disabled }
                                onClick={ () => navigateBy( 1 ) }
                            >
                                { __( 'Continue', 'woocommerce-paypal-payments' ) }
                            </Button>
                        )}
                    </div>
                )}
                <div
                    className="ppcp-r-navigation--progress-bar"
                    style={{
                        width: `${ ( currentStep / ( stepperOrder.length - 1 ) ) * 90 }%`
                    }}
                ></div>
            </div>
        </div>
    );
};

export default Navigation;