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

70 lines
1.9 KiB
JavaScript
Raw Normal View History

import { useEffect, useMemo } from '@wordpress/element';
2024-12-09 19:24:34 +01:00
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';
import { OnboardingHooks, CommonHooks } from '../data';
2025-01-10 13:57:53 +01:00
import SpinnerOverlay from './ReusableComponents/SpinnerOverlay';
import SendOnlyMessage from './Screens/SendOnlyMessage';
2025-01-10 13:57:53 +01:00
import OnboardingScreen from './Screens/Onboarding';
import SettingsScreen from './Screens/Settings';
import { initStore as initSettingsStore } from '../data/settings-tab';
import { useSettingsState } from '../data/settings-tab/hooks';
2024-10-24 13:54:50 +02:00
// Initialize the settings store
initSettingsStore();
2025-01-10 13:57:53 +01:00
const SettingsApp = () => {
const onboardingProgress = OnboardingHooks.useSteps();
const { isReady: settingsIsReady } = useSettingsState();
const {
isReady: merchantIsReady,
merchant: { isSendOnlyCountry },
} = CommonHooks.useMerchantInfo();
2024-12-11 16:56:05 +01:00
// Disable the "Changes you made might not be saved" browser warning.
useEffect( () => {
const suppressBeforeUnload = ( event ) => {
event.stopImmediatePropagation();
return undefined;
};
window.addEventListener( 'beforeunload', suppressBeforeUnload );
return () => {
window.removeEventListener( 'beforeunload', suppressBeforeUnload );
};
}, [] );
2024-12-09 19:24:34 +01:00
const wrapperClass = classNames( 'ppcp-r-app', {
loading: ! onboardingProgress.isReady || ! settingsIsReady,
2024-12-09 19:24:34 +01:00
} );
const Content = useMemo( () => {
if (
! onboardingProgress.isReady ||
! merchantIsReady ||
! settingsIsReady
) {
2024-12-09 19:24:34 +01:00
return (
<SpinnerOverlay
message={ __( 'Loading…', 'woocommerce-paypal-payments' ) }
/>
);
}
if ( isSendOnlyCountry ) {
return <SendOnlyMessage />;
}
2024-12-09 19:24:34 +01:00
if ( ! onboardingProgress.completed ) {
2025-01-10 13:38:47 +01:00
return <OnboardingScreen />;
2024-12-09 19:24:34 +01:00
}
return <SettingsScreen />;
}, [
isSendOnlyCountry,
merchantIsReady,
onboardingProgress.completed,
onboardingProgress.isReady,
settingsIsReady,
] );
2024-12-09 19:24:34 +01:00
return <div className={ wrapperClass }>{ Content }</div>;
2024-10-24 13:54:50 +02:00
};
2025-01-10 13:57:53 +01:00
export default SettingsApp;