summon wizard bot

package.json

@@ -28,10 +28,12 @@
     "react-i18next": "^11.4.0",
     "react-redux": "6.0.1",
     "react-router-dom": "5.0.0",
+    "react-simple-chatbot": "^0.6.1",
     "recharts": "^1.8.5",
     "redux": "4.0.1",
     "redux-thunk": "2.3.0",
-    "reselect": "4.0.0"
+    "reselect": "4.0.0",
+    "styled-components": "^5.1.1"
   },
   "devDependencies": {
     "@babel/core": "7.3.4",

public/locales/en/translations.json

@@ -55,7 +55,8 @@
   "Server": {
     "Title": "Server",
     "Subtitle": "Expand to see details",
-    "Thoughts": "This reverse proxy is the only open gate to a secret creation land. There any impulse or thought can fly free and can be materialized without limits.",
+    "Thoughts": "This reverse proxy is the only open gate to a secret creation land. There any impulse or thought can fly free and can be materialized without limits. If you don't believe it, ask the ",
+    "Wizard": "wizard",
     "ServerHostName": "Server host",
     "ApiHostName": "API host",
     "Domain": "Domain",

public/locales/ro/translations.json

@@ -46,7 +46,8 @@
   "Server": {
     "Title": "Server",
     "Subtitle": "Extindeţi pentru a vedea detalii",
-    "Thoughts": "Acest reverse proxy este singura poartă deschisă către un teren secret al creației. Acolo orice impuls sau gând poate zbura liber și poate fi materializat fără limite.",
+    "Thoughts": "Acest reverse proxy este singura poartă deschisă către un teren secret al creației. Acolo orice impuls sau gând poate zbura liber și poate fi materializat fără limite. Dacă nu crezi, întreabă-l pe ",
+    "Wizard": "vrăjitor",
     "ServerHostName": "Gazdă server",
     "ApiHostName": "Gazdă API",
     "Domain": "Domeniu",

src/components/App.js

@@ -11,6 +11,7 @@ import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import { loadFrontendSession } from "../features/frontendSession/actionCreators";
 import ToastNotifier from "../features/snackbar/components/ToastNotifier";
+import BotsManager from "../features/chatbot/components/BotsManager";
 
 function App({ actions }) {
   useEffect(() => {
@@ -25,6 +26,7 @@ function App({ actions }) {
   return (
     <Suspense fallback={<div></div>}>
       <Header />
+      <BotsManager />
       <br />
       <div style={contentStyle}>
         <Switch>

src/features/chatbot/actionCreators.js

@@ -0,0 +1,9 @@
+import * as types from "./actionTypes";
+
+export function summonWizard() {
+  return { type: types.SUMMON_WIZARD };
+}
+
+export function cancelBot() {
+  return { type: types.CANCEL_BOT };
+}

src/features/chatbot/actionTypes.js

@@ -0,0 +1,2 @@
+export const CANCEL_BOT = "CANCEL_BOT";
+export const SUMMON_WIZARD = "SUMMON_WIZARD";

src/features/chatbot/botType.js

@@ -0,0 +1,4 @@
+export const botType = {
+  none: Symbol("none"),
+  wizard: Symbol("wizard")
+};

src/features/chatbot/components/BotsManager.js

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { botType } from "../botType";
+import Wizard from "./Wizard";
+
+const BotsManager = ({ bot }) => {
+  const [type, setType] = useState(bot.type);
+
+  useEffect(() => {
+    if (bot.type) setType(bot.type);
+  }, [bot.type]);
+
+  return (
+    <div style={{ position: "absolute" }}>
+      {type === botType.wizard && <Wizard />}
+    </div>
+  );
+};
+
+BotsManager.propTypes = {
+  bot: PropTypes.object
+};
+
+function mapStateToProps(state) {
+  return {
+    bot: state.bot
+  };
+}
+
+function mapDispatchToProps() {
+  return {};
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(BotsManager);

src/features/chatbot/components/Wizard.js

@@ -0,0 +1,21 @@
+import React from "react";
+import ChatBot from "react-simple-chatbot";
+
+const Wizard = () => {
+  const steps = [
+    {
+      id: "0",
+      message: "Welcome to react chatbot!",
+      trigger: "1"
+    },
+    {
+      id: "1",
+      message: "Bye!",
+      end: true
+    }
+  ];
+
+  return <ChatBot steps={steps} />;
+};
+
+export default Wizard;

src/features/chatbot/reducer.js

@@ -0,0 +1,16 @@
+import * as types from "./actionTypes";
+import initialState from "../../redux/reducers/initialState";
+import { botType } from "./botType";
+
+export default function chatbotReducer(state = initialState.snackbar, action) {
+  switch (action.type) {
+    case types.SUMMON_WIZARD:
+      return { ...state, type: botType.wizard };
+
+    case types.CANCEL_BOT:
+      return { ...state, type: botType.none };
+
+    default:
+      return state;
+  }
+}

src/features/server/components/ServerComponent.js

@@ -31,7 +31,8 @@ const ServerComponent = ({
   serverHost,
   openAbout,
   handleOpenInNewTab,
-  showMessageForAuthor
+  showMessageForAuthor,
+  summonWizard
 }) => {
   const classes = useStyles();
   const { t } = useTranslation();
@@ -92,6 +93,7 @@ const ServerComponent = ({
               data={data}
               serverHost={serverHost}
               handleOpenInNewTab={handleOpenInNewTab}
+              summonWizard={summonWizard}
             />
           )}
         </CardContent>
@@ -133,7 +135,8 @@ ServerComponent.propTypes = {
   serverHost: PropTypes.string,
   openAbout: PropTypes.func.isRequired,
   handleOpenInNewTab: PropTypes.func.isRequired,
-  showMessageForAuthor: PropTypes.func.isRequired
+  showMessageForAuthor: PropTypes.func.isRequired,
+  summonWizard: PropTypes.func.isRequired
 };
 
 export default ServerComponent;

src/features/server/components/ServerContainer.js

@@ -6,6 +6,7 @@ import { loadServerData, loadSystemVersion } from "../actionCreators";
 import ServerComponent from "./ServerComponent";
 import { withRouter } from "react-router-dom";
 import MessageForAuthorContainer from "../../messageForAuthor/components/MessageForAuthorContainer";
+import { summonWizard } from "../../chatbot/actionCreators";
 
 const ServerContainer = ({ actions, data, serverHost, history }) => {
   const [openMessageForAuthor, setOpenMessageForAuthor] = useState(false);
@@ -41,6 +42,7 @@ const ServerContainer = ({ actions, data, serverHost, history }) => {
         openAbout={openAbout}
         handleOpenInNewTab={handleOpenInNewTab}
         showMessageForAuthor={showMessageForAuthor}
+        summonWizard={actions.summonWizard}
       />
       <MessageForAuthorContainer
         open={openMessageForAuthor}
@@ -66,7 +68,10 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators({ loadServerData, loadSystemVersion }, dispatch)
+    actions: bindActionCreators(
+      { loadServerData, loadSystemVersion, summonWizard },
+      dispatch
+    )
   };
 }
 

src/features/server/components/ServerSummary.js

@@ -7,7 +7,12 @@ import styles from "../../../components/common/styles/gridStyles";
 
 const useStyles = makeStyles(styles);
 
-const ServerSummary = ({ data, serverHost, handleOpenInNewTab }) => {
+const ServerSummary = ({
+  data,
+  serverHost,
+  handleOpenInNewTab,
+  summonWizard
+}) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -42,6 +47,10 @@ const ServerSummary = ({ data, serverHost, handleOpenInNewTab }) => {
       <Grid item xs={12} sm={12} md={12}>
         <Typography variant="body2" gutterBottom color="textSecondary">
           {t("Server.Thoughts")}
+          <Link href="#" onClick={summonWizard} variant="body2">
+            {t("Server.Wizard")}
+          </Link>
+          .
         </Typography>
       </Grid>
     </Grid>
@@ -51,7 +60,8 @@ const ServerSummary = ({ data, serverHost, handleOpenInNewTab }) => {
 ServerSummary.propTypes = {
   data: PropTypes.object.isRequired,
   serverHost: PropTypes.string,
-  handleOpenInNewTab: PropTypes.func.isRequired
+  handleOpenInNewTab: PropTypes.func.isRequired,
+  summonWizard: PropTypes.func.isRequired
 };
 
 export default ServerSummary;

src/redux/reducers/index.js

@@ -9,6 +9,7 @@ import releaseNotesReducer from "../../features/releaseNotes/reducer";
 import frontendSessionReducer from "../../features/frontendSession/reducer";
 import snackbarReducer from "../../features/snackbar/reducer";
 import chartsReducer from "../../features/charts/chartsReducer";
+import chatbotReducer from "../../features/chatbot/reducer";
 
 const rootReducer = combineReducers({
   frontendSession: frontendSessionReducer,
@@ -18,6 +19,7 @@ const rootReducer = combineReducers({
   releaseNotes: releaseNotesReducer,
   charts: chartsReducer,
   snackbar: snackbarReducer,
+  bot: chatbotReducer,
   ajaxCallsInProgress: ajaxStatusReducer
 });
 

src/redux/reducers/initialState.js

@@ -18,5 +18,8 @@ export default {
     message: null,
     type: null
   },
+  bot: {
+    type: null
+  },
   ajaxCallsInProgress: 0
 };