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

assets/js/src/settings/index.tsx

@@ -1,11 +1,43 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {
+  HashRouter, Switch, Route, Redirect,
+} from 'react-router-dom';
+import Notices from 'notices/notices.jsx';
+import { GlobalContext, useGlobalContextValue } from 'context';
+import MailPoet from 'mailpoet';
+import {
+  Advanced,
+  Basics,
+  KeyActivation,
+  SendWith,
+  SignupConfirmation,
+  WooCommerce,
+} from './pages';
 import { initStore } from './store';
+import Tabs from './components/tabs';
 
-const App = () => null;
+const App = () => (
+  <GlobalContext.Provider value={useGlobalContextValue(window)}>
+    <HashRouter>
+      <Notices />
+      <h1 className="title">{MailPoet.I18n.t('settings')}</h1>
+      <Tabs />
+      <Switch>
+        <Route path="/basics" component={Basics} />
+        <Route path="/signup" component={SignupConfirmation} />
+        <Route path="/mta" component={SendWith} />
+        <Route path="/woocommerce" component={WooCommerce} />
+        <Route path="/advanced" component={Advanced} />
+        <Route path="/premium" component={KeyActivation} />
+        <Redirect to="/basics" />
+      </Switch>
+    </HashRouter>
+  </GlobalContext.Provider>
+);
 
 const container = document.getElementById('settings_container');
 if (container) {
-  initStore((window as any).mailpoet_settings);
+  initStore(window);
   ReactDOM.render(<App />, container);
 }

assets/js/src/settings/pages/advanced.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Advanced() {
+  return <p>Advanced!</p>;
+}

assets/js/src/settings/pages/basics.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Basics() {
+  return <p>Basics!</p>;
+}

assets/js/src/settings/pages/index.tsx

@@ -0,0 +1,6 @@
+export { default as Advanced } from './advanced';
+export { default as Basics } from './basics';
+export { default as KeyActivation } from './key_activation';
+export { default as SendWith } from './send_with';
+export { default as SignupConfirmation } from './signup_confirmation';
+export { default as WooCommerce } from './woo_commerce';

assets/js/src/settings/pages/key_activation.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function KeyActivation() {
+  return <p>Key Activation!</p>;
+}

assets/js/src/settings/pages/send_with.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function SendWith() {
+  return <p>Send With!</p>;
+}

assets/js/src/settings/pages/signup_confirmation.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function SignupConfirmation() {
+  return <p>Signup Confirmation!</p>;
+}

assets/js/src/settings/pages/woo_commerce.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function WooCommerce() {
+  return <p>WooCommerce!</p>;
+}

assets/js/src/settings/store/index.ts

@@ -8,8 +8,8 @@ import makeDefaultState from './make_default_state';
 
 export const STORE_NAME = 'mailpoet-settings';
 
-export const initStore = (data: Settings) => registerStore(STORE_NAME, {
-  reducer: createReducer(makeDefaultState(data)),
+export const initStore = (window: any) => registerStore(STORE_NAME, {
+  reducer: createReducer(makeDefaultState(window)),
   actions,
   selectors,
   controls,

assets/js/src/settings/store/make_default_state.ts

@@ -1,11 +1,15 @@
 import { State, Settings } from './types';
 
-export default function makeDefaultState(data: Settings): State {
+export default function makeDefaultState(window: any): State {
   return {
     save: {
       inProgress: false,
       error: null,
     },
-    data,
+    flags: {
+      woocommerce: !!window.mailpoet_woocommerce_active,
+      newUser: !!window.mailpoet_is_new_user,
+    },
+    data: window.mailpoet_settings,
   };
 }

assets/js/src/settings/store/selectors.ts

@@ -20,3 +20,11 @@ export function hasError(state: State): boolean {
 export function getError(state: State): any {
   return state.save.error;
 }
+
+export function hasWooCommerce(state: State) {
+  return state.flags.woocommerce;
+}
+
+export function isNewUser(state: State) {
+  return state.flags.newUser;
+}

assets/js/src/settings/store/types.ts

@@ -42,6 +42,10 @@ export type Settings = {
 
 export type State = {
   data: Settings
+  flags: {
+    woocommerce: boolean
+    newUser: boolean
+  }
   save: {
     inProgress: boolean
     error: any