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
   }

lib/AdminPages/Pages/Settings.php

@@ -75,10 +75,10 @@ class Settings {
       'premium_key_valid' => !empty($premiumKeyValid),
       'mss_active' => Bridge::isMPSendingServiceEnabled(),
       'mss_key_valid' => !empty($mpApiKeyValid),
-      'members_plugin_active' => $this->wp->isPluginActive('members/members.php'),
       'pages' => Pages::getAll(),
       'current_user' => $this->wp->wpGetCurrentUser(),
       'is_woocommerce_active' => $this->woocommerceHelper->isWooCommerceActive(),
+      'is_members_plugin_active' => $this->wp->isPluginActive('members/members.php'),
       'hosts' => [
         'web' => Hosts::getWebHosts(),
         'smtp' => Hosts::getSMTPHosts(),

views/settings.html

@@ -10,6 +10,7 @@
   <script type="text/javascript">
     <% autoescape 'js' %>
       var mailpoet_woocommerce_active = <%= json_encode(is_woocommerce_active == true) %>;
+      var mailpoet_members_plugin_active = <%= json_encode(is_members_plugin_active == true) %>;
       var mailpoet_is_new_user = <%= json_encode(is_new_user == true) %>;
       var mailpoet_settings = <%= json_encode(settings) %>;
       var mailpoet_segments = <%= json_encode(segments) %>;