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 (
-
+
-
-
+
);
}