wizard update

src/features/chatbot/actionCreators.js

@@ -4,6 +4,6 @@ export function summonWizard() {
   return { type: types.SUMMON_WIZARD };
 }
 
-export function cancelBot() {
-  return { type: types.CANCEL_BOT };
+export function dismissBot() {
+  return { type: types.DISMISS_BOT };
 }

src/features/chatbot/actionTypes.js

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

src/features/chatbot/components/BotsManager.js

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
 import { botType } from "../botType";
 import Wizard from "./Wizard";
 import { makeStyles } from "@material-ui/core/styles";
+import { dismissBot } from "../actionCreators";
 
 const useStyles = makeStyles(theme => ({
   bot: {
@@ -17,7 +19,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const BotsManager = ({ bot }) => {
+const BotsManager = ({ bot, actions }) => {
   const [type, setType] = useState(bot.type);
   const classes = useStyles();
 
@@ -27,13 +29,16 @@ const BotsManager = ({ bot }) => {
 
   return (
     <div className={classes.botPosition}>
-      <div className={classes.bot}>{type === botType.wizard && <Wizard />}</div>
+      <div className={classes.bot}>
+        {type === botType.wizard && <Wizard dismissBot={actions.dismissBot} />}
+      </div>
     </div>
   );
 };
 
 BotsManager.propTypes = {
-  bot: PropTypes.object
+  bot: PropTypes.object.isRequired,
+  actions: PropTypes.object.isRequired
 };
 
 function mapStateToProps(state) {
@@ -42,8 +47,10 @@ function mapStateToProps(state) {
   };
 }
 
-function mapDispatchToProps() {
-  return {};
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators({ dismissBot }, dispatch)
+  };
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(BotsManager);

src/features/chatbot/components/Wizard.js

@@ -1,9 +1,10 @@
 import React from "react";
+import PropTypes from "prop-types";
 import ChatBot from "react-simple-chatbot";
 import { ThemeProvider } from "styled-components";
 import { useTheme } from "@material-ui/core/styles";
 
-const Wizard = () => {
+const Wizard = ({ dismissBot }) => {
   const theme = useTheme();
 
   const botTheme = {
@@ -41,14 +42,40 @@ const Wizard = () => {
     },
     {
       id: "5",
-      message: "Hi {previousValue}, nice to meet you!",
+      message: "I don't have time for that. Ask me something serious.",
+      trigger: "6"
+    },
+    {
+      id: "6",
+      user: true,
+      trigger: "7"
+    },
+    {
+      id: "7",
+      message:
+        "I don't think I understand '{previousValue}'. You mean, like, flowers?",
+      trigger: "8"
+    },
+    {
+      id: "8",
+      user: true,
+      trigger: "9"
+    },
+    {
+      id: "9",
+      message: "I think you're wasting my time. Farewell!",
       end: true
     }
   ];
 
+  const handleEnd = () => {
+    setTimeout(dismissBot, 3000);
+  };
+
   return (
     <ThemeProvider theme={botTheme}>
       <ChatBot
+        handleEnd={handleEnd}
         steps={steps}
         botAvatar="public/icons/wizard.png"
         headerTitle="Zirhan"
@@ -57,4 +84,8 @@ const Wizard = () => {
   );
 };
 
+Wizard.propTypes = {
+  dismissBot: PropTypes.func.isRequired
+};
+
 export default Wizard;

src/features/chatbot/reducer.js

@@ -7,7 +7,7 @@ export default function chatbotReducer(state = initialState.snackbar, action) {
     case types.SUMMON_WIZARD:
       return { ...state, type: botType.wizard };
 
-    case types.CANCEL_BOT:
+    case types.DISMISS_BOT:
       return { ...state, type: botType.none };
 
     default: