diff --git a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/index.tsx b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/index.tsx index 3c854f17bb..f34883d7d6 100644 --- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/index.tsx +++ b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/index.tsx @@ -1,6 +1,7 @@ +import { useCallback, useMemo } from 'react'; +import { useHistory, useLocation } from 'react-router-dom'; +import { TabPanel } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; -import { RoutedTabs } from '../../../../../../common/tabs/routed_tabs'; -import { Tab } from '../../../../../../common'; import { AutomationFlow } from './automation_flow'; import { Emails } from './emails'; import { Orders } from './orders'; @@ -8,54 +9,69 @@ import { Subscribers } from './subscribers'; import { automationHasEmails } from '../../helpers/automation'; export function Tabs(): JSX.Element { + const history = useHistory(); + const location = useLocation(); + const pageParams = useMemo( + () => new URLSearchParams(location.search), + [location], + ); + const currentTab = pageParams.get('tab') ?? 'automation-flow'; const tabs = [ - - - , + { + name: 'automation-flow', + title: __('Automation flow', 'mailpoet'), + }, ]; - if (automationHasEmails()) { - tabs.push( - - - , - ); - tabs.push( - - - , - ); - tabs.push( - - - , - ); + tabs.push({ + name: 'automation-emails', + title: __('Emails', 'mailpoet'), + }); + tabs.push({ + name: 'automation-orders', + title: _x('Orders', 'WooCommerce orders', 'mailpoet'), + }); + tabs.push({ + name: 'automation-subscribers', + title: __('Subscribers', 'mailpoet'), + }); } + + const updateUrlSearchString = useCallback( + (tab: string) => { + const newSearch = new URLSearchParams({ + ...Object.fromEntries(pageParams.entries()), + ...{ + tab, + }, + }); + history.push({ search: newSearch.toString() }); + }, + [pageParams, history], + ); + return (
- - {tabs} - + + {(tab) => { + switch (tab.name) { + case 'automation-flow': + return ; + case 'automation-emails': + return ; + case 'automation-orders': + return ; + case 'automation-subscribers': + return ; + default: + return null; + } + }} +
); } diff --git a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/index.tsx b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/index.tsx index 3efe6bade3..8573e9da20 100644 --- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/index.tsx +++ b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/index.tsx @@ -1,5 +1,5 @@ import ReactDOM from 'react-dom'; -import { HashRouter } from 'react-router-dom'; +import { BrowserRouter } from 'react-router-dom'; import { TopBarWithBeamer } from '../../../../common/top_bar/top_bar'; import { Notices } from '../../../listing/components/notices'; import { Header } from './components/header'; @@ -14,18 +14,18 @@ function Analytics(): JSX.Element {
+
); } function App(): JSX.Element { return ( - + - - + ); }