reverse-proxy-frontend/src/features/chatbot/components/Wizard.js

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";
import { useTranslation } from "react-i18next";
import { bots, messageSource } from "../constants";

const Wizard = ({ dismissBot, saveMessage }) => {
  const theme = useTheme();
  const { t } = useTranslation();

  const botTheme = {
    background: "#f5f8fb",
    fontFamily: "monospace",
    headerBgColor: theme.palette.primary.main,
    headerFontColor: "#fff",
    headerFontSize: "16px",
    botBubbleColor: theme.palette.primary.main,
    botFontColor: "#fff",
    userBubbleColor: "#fff",
    userFontColor: "#4a4a4a"
  };

  const getMessage = message => input => {
    const currentDate = new Date();
    let messageToSave = message;
    if (message.includes("previousValue") && input.previousValue) {
      messageToSave = message.replace("{previousValue}", input.previousValue);
    }
    saveMessage(messageSource.bot, currentDate, messageToSave);
    return message;
  };
  const validate = text => {
    const currentDate = new Date();
    saveMessage(messageSource.user, currentDate, text);
    return true;
  };

  const steps = [
    {
      id: "1",
      message: getMessage(t("Chatbot.Wizard.Message1")),
      trigger: "2"
    },
    {
      id: "2",
      message: getMessage(t("Chatbot.Wizard.Message2")),
      trigger: "3"
    },
    {
      id: "3",
      message: getMessage(t("Chatbot.Wizard.Message3")),
      trigger: "4"
    },
    {
      id: "4",
      user: true,
      validator: validate,
      trigger: "5"
    },
    {
      id: "5",
      message: getMessage(t("Chatbot.Wizard.Message5")),
      trigger: "6"
    },
    {
      id: "6",
      user: true,
      validator: validate,
      trigger: "7"
    },
    {
      id: "7",
      message: getMessage(t("Chatbot.Wizard.Message7")),
      trigger: "8"
    },
    {
      id: "8",
      user: true,
      validator: validate,
      trigger: "9"
    },
    {
      id: "9",
      message: getMessage(t("Chatbot.Wizard.Message9")),
      end: true
    }
  ];

  const handleEnd = () => {
    setTimeout(dismissBot, 3000);
  };

  const getAvatar = () => {
    const basePath = "public/icons/wizard.png";
    if (process.env.PUBLIC_URL) {
      return `${process.env.PUBLIC_URL}/${basePath}`;
    } else {
      return basePath;
    }
  };

  return (
    <ThemeProvider theme={botTheme}>
      <ChatBot
        handleEnd={handleEnd}
        steps={steps}
        botAvatar={getAvatar()}
        headerTitle={bots.Zirhan}
      />
    </ThemeProvider>
  );
};

Wizard.propTypes = {
  dismissBot: PropTypes.func.isRequired,
  saveMessage: PropTypes.func.isRequired
};

export default Wizard;