Add roles field

[MAILPOET-2680]

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import BounceAddress from './bounce_address';
 import TaskScheduler from './task_scheduler';
+import Roles from './roles';
 
 export default function Advanced() {
   return (
     <div className="mailpoet-settings-grid">
       <BounceAddress />
       <TaskScheduler />
+      <Roles />
     </div>
   );
 }

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import ReactStringReplace from 'react-string-replace';
+
+import { t } from 'common/functions';
+import { useSelector } from 'settings/store/hooks';
+import { Label, Inputs } from 'settings/components';
+
+export default function Roles() {
+  const isMembersPluginActive = useSelector('hasMembersPlugin')();
+  return (
+    <>
+      <Label
+        title={t('rolesTitle')}
+        description={t('rolesDescription')}
+        htmlFor=""
+      />
+      <Inputs>
+        <p>
+          {isMembersPluginActive
+            ? <a href="?page=roles">{t('manageUsingMembers')}</a>
+            : ReactStringReplace(t('installMembers'),
+              /\[link\](.*?)\[\/link\]/,
+              (text) => (
+                <a
+                  key={text}
+                  href="https://wordpress.org/plugins/members/"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  {text}
+                </a>
+              ))}
+        </p>
+      </Inputs>
+    </>
+  );
+}

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

@@ -10,8 +10,9 @@ export default function makeDefaultState(window: any): State {
   const data = normalizeSettings(window.mailpoet_settings);
   const flags = {
     error: false,
-    woocommerce: !!window.mailpoet_woocommerce_active,
     newUser: !!window.mailpoet_is_new_user,
+    woocommerce: !!window.mailpoet_woocommerce_active,
+    membersPlugin: !!window.mailpoet_members_plugin_active,
   };
   const premiumStatus = getPremiumStatus(
     window.mailpoet_premium_key_valid,

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

@@ -29,6 +29,10 @@ export function hasWooCommerce(state: State) {
   return state.flags.woocommerce;
 }
 
+export function hasMembersPlugin(state: State) {
+  return state.flags.membersPlugin;
+}
+
 export function isNewUser(state: State) {
   return state.flags.newUser;
 }

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

@@ -232,6 +232,7 @@ export type State = {
   }
   flags: {
     woocommerce: boolean
+    membersPlugin: boolean
     newUser: boolean
     error: boolean
   }