85 lines
2.6 KiB
JavaScript
85 lines
2.6 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { getQuery, getNewPath } from '@woocommerce/navigation';
|
|
import { Button } from '@wordpress/components';
|
|
import { Icon, chevronLeft } from '@wordpress/icons';
|
|
import { useEffect, createContext, useState } from '@wordpress/element';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { Tabs } from './tabs';
|
|
import { SectionNav } from './section-nav';
|
|
import { Content } from './content';
|
|
import { possiblyRenderSettingsSlots } from './settings-slots';
|
|
import { registerTaxSettingsConflictErrorFill } from './conflict-error-slotfill';
|
|
import { registerPaymentsSettingsBannerFill } from '../payments/payments-settings-banner-slotfill';
|
|
import { registerSiteVisibilitySlotFill } from '../launch-your-store';
|
|
import { registerExampleSettingsView } from './settings-view-example';
|
|
import { useFullScreen } from '~/utils';
|
|
import { SidebarContext } from './components/side-bar';
|
|
import './style.scss';
|
|
|
|
const Settings = ( { params } ) => {
|
|
useFullScreen( [ 'woocommerce-settings' ] );
|
|
const settingsData = window.wcSettings?.admin?.settingsPages;
|
|
const sections = settingsData[ params.page ]?.sections;
|
|
const { section } = getQuery();
|
|
const contentData =
|
|
Array.isArray( sections ) && sections.length === 0
|
|
? {}
|
|
: sections[ section || '' ];
|
|
|
|
const [ hasSideBar, setHasSideBar ] = useState( false );
|
|
|
|
// Be sure to render Settings slots when the params change.
|
|
useEffect( () => {
|
|
possiblyRenderSettingsSlots();
|
|
}, [ params.page, section ] );
|
|
|
|
// Register the slot fills for the settings page just once.
|
|
useEffect( () => {
|
|
registerTaxSettingsConflictErrorFill();
|
|
registerPaymentsSettingsBannerFill();
|
|
registerSiteVisibilitySlotFill();
|
|
registerExampleSettingsView();
|
|
}, [] );
|
|
|
|
if ( ! settingsData ) {
|
|
return <div>Error getting data</div>;
|
|
}
|
|
const title = settingsData[ params.page ]?.label;
|
|
|
|
return (
|
|
<>
|
|
<div className="woocommerce-settings-layout">
|
|
<div className="woocommerce-settings-layout-navigation">
|
|
<Button href={ getNewPath( {}, '/', {} ) }>
|
|
<Icon icon={ chevronLeft } />
|
|
Settings
|
|
</Button>
|
|
<Tabs data={ settingsData } page={ params.page } />
|
|
</div>
|
|
<div className="woocommerce-settings-layout-content">
|
|
<div className="woocommerce-settings-layout-title">
|
|
<h1>{ title }</h1>
|
|
</div>
|
|
<SectionNav
|
|
data={ settingsData[ params.page ] }
|
|
section={ section }
|
|
>
|
|
<div className="woocommerce-settings-layout-main">
|
|
<SidebarContext.Provider value={ setHasSideBar }>
|
|
<Content data={ contentData } />
|
|
</SidebarContext.Provider>
|
|
</div>
|
|
</SectionNav>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|