Add Settings tabs

[MAILPOET-2676]

assets/js/src/settings/components/tab_link.tsx

@@ -0,0 +1,29 @@
+import cn from 'classnames';
+import React, { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import MailPoet from 'mailpoet';
+
+type Props = {
+  name: string
+  current: string
+  children: ReactNode
+  automationId: string
+}
+
+export default (props: Props) => (
+  <Link
+    to={`/${props.name}`}
+    onClick={() => trackTabClicked(props.name)}
+    data-automation-id={props.automationId}
+    className={cn('nav-tab', { 'nav-tab-active': props.name === props.current })}
+  >
+    {props.children}
+  </Link>
+);
+
+const trackTabClicked = (tab: string) => {
+  MailPoet.trackEvent('User has clicked a tab in Settings', {
+    'MailPoet Free version': (window as any).mailpoet_version,
+    'Tab ID': tab,
+  });
+};

assets/js/src/settings/components/tabs.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import MailPoet from 'mailpoet';
+import { useSelector } from 'settings/store/hooks';
+import TabLink from './tab_link';
+
+export default () => {
+  const { pathname } = useLocation();
+  const [, current] = pathname.split('/');
+  const hasWooCommerce = useSelector('hasWooCommerce')();
+
+  return (
+    <h2 className="nav-tab-wrapper">
+      <TabLink
+        name="basics"
+        current={current}
+        automationId="basic_settings_tab"
+      >
+        {MailPoet.I18n.t('basicsTab')}
+      </TabLink>
+      <TabLink
+        name="signup"
+        current={current}
+        automationId="signup_settings_tab"
+      >
+        {MailPoet.I18n.t('signupConfirmationTab')}
+      </TabLink>
+      <TabLink
+        name="mta"
+        current={current}
+        automationId="send_with_settings_tab"
+      >
+        {MailPoet.I18n.t('sendWithTab')}
+      </TabLink>
+      {hasWooCommerce && (
+      <TabLink
+        name="woocommerce"
+        current={current}
+        automationId="woocommerce_settings_tab"
+      >
+        {MailPoet.I18n.t('wooCommerceTab')}
+      </TabLink>
+      )}
+      <TabLink
+        name="advanced"
+        current={current}
+        automationId="settings-advanced-tab"
+      >
+        {MailPoet.I18n.t('advancedTab')}
+      </TabLink>
+      <TabLink
+        name="premium"
+        current={current}
+        automationId="activation_settings_tab"
+      >
+        {MailPoet.I18n.t('keyActivationTab')}
+      </TabLink>
+    </h2>
+  );
+};