Merge pull request #5 from flatlogic/virtual-tour

Virtual tour

package.json

@@ -103,6 +103,7 @@
     "react-dropzone": "^6.2.4",
     "react-google-maps": "^9.4.5",
     "react-images": "^0.5.19",
+    "react-joyride": "^2.1.1",
     "react-maskedinput": "^4.0.1",
     "react-mde": "2.3.4",
     "react-redux": "^5.0.7",

src/components/App.js

@@ -29,6 +29,7 @@ const PrivateRoute = ({dispatch, component, ...rest }) => {
 const CloseButton = ({closeToast}) => <i onClick={closeToast} className="la la-close notifications-close"/>
 
 class App extends React.PureComponent {
+
   render() {
     return (
         <div>

src/components/Header/Header.js

@@ -24,6 +24,7 @@ import { NavbarTypes } from '../../reducers/layout';
 import Notifications from '../Notifications';
 import { logoutUser } from '../../actions/user';
 import chroma from 'chroma-js'
+import Joyride, { STATUS } from 'react-joyride';
 import { toggleSidebar, openSidebar, closeSidebar, changeActiveSidebarItem, chatToggleItem } from '../../actions/navigation';
 
 import a5 from '../../images/people/a5.jpg';
@@ -58,8 +59,53 @@ class Header extends React.Component {
       focus: false,
       showNewMessage: false,
       hideMessage: true,
+      run: true,
+      steps: [
+        {
+          content: 'You can adjust sidebar, or leave it closed 🤩',
+          placement: 'bottom',
+          target: '#toggleSidebar',
+          textAlign: 'center',
+        },
+        {
+          content: "Admin can check out his messages and tasks easily 🤔",
+          placement: 'bottom',
+          target: '.dropdown-toggle',
+        },
+        {
+          content: "Clickable cog can provide you with link to important pages 🤠",
+          placement: 'bottom',
+          target: '.tutorial-dropdown',
+        },
+        {
+          content: 'Check out chat, do not miss new ideas 🧐',
+          placement: 'bottom',
+          target: '#toggle-chat',
+        },
+        {
+          content: 'Open theme cusomizer sidebar, play with it or watch tour! ❤️',
+          placement: 'left',
+          target: '.helper-button'
+        },
+      ],
     };
   }
+
+  handleJoyrideCallback = (CallBackProps) => {
+    const { status } = CallBackProps;
+
+    if (([STATUS.FINISHED, STATUS.SKIPPED]).includes(status)) {
+      this.setState({ run: false });
+    }
+
+  };
+
+  start = () => {
+    this.setState({
+      run: true,
+    });
+  };
+
   componentDidMount() {
     if (window.innerWidth > 576) {
       setTimeout(() => {
@@ -133,6 +179,60 @@ class Header extends React.Component {
 
     return (
       <Navbar className={`${s.root} d-print-none ${navbarType === NavbarTypes.FLOATING ? s.navbarFloatingType : ''}`} style={{backgroundColor: navbarColor}}>
+        <Joyride
+          callback={this.handleJoyrideCallback}
+          continuous={true}
+          run={this.state.run}
+          showSkipButton={true}
+          steps={this.state.steps}
+          spotlightPadding={-10}
+          disableOverlay={true}
+          styles={{
+            options: {
+              arrowColor: '#ffffff',
+              backgroundColor: '#ffffff',
+              overlayColor: 'rgba(79, 26, 0, 0.4)',
+              primaryColor: '#000',
+              textColor: '#495057',
+              spotlightPadding: 0,
+              zIndex: 1000,
+              padding: 5,
+              width: 240,
+            },
+            tooltip: {
+              fontSize: 15,
+              padding: 5,
+            },
+            tooltipContent: {
+              padding: '20px 5px 0',
+            },
+            floater: {
+              arrow: {
+                padding: 10
+              },
+            },
+            buttonClose: {
+              display: 'none'
+            },
+            buttonNext: {
+              backgroundColor: "#FFC247",
+              fontSize: 13,
+              borderRadius: 4,
+              color: "#ffffff",
+              fontWeight: "bold"
+            },
+            buttonBack: {
+              color: "#798892",
+              marginLeft: 'auto',
+              fontSize: 13,
+              marginRight: 5,
+            },
+            buttonSkip: {
+              color: "#798892",
+              fontSize: 13,
+            },
+          }}
+        />
         <Nav>
           <NavItem>
             <NavLink className="d-md-down-none ml-5" id="toggleSidebar" onClick={this.toggleSidebar}>
@@ -210,7 +310,7 @@ class Header extends React.Component {
               <Notifications />
             </DropdownMenu>
           </Dropdown>
-          <Dropdown nav isOpen={this.state.menuOpen} toggle={this.toggleMenu} className="d-sm-down-none">
+          <Dropdown nav isOpen={this.state.menuOpen} toggle={this.toggleMenu} className="d-sm-down-none tutorial-dropdown">
             <DropdownToggle nav>
               <i className={`la la-cog ${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`} />
             </DropdownToggle>

src/components/Helper/Helper.js

@@ -3,6 +3,7 @@ import cx from 'classnames';
 import { Button } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import Joyride, { STATUS } from 'react-joyride';
 import { DashboardThemes, SidebarTypes, NavbarTypes } from '../../reducers/layout';
 import { changeTheme, changeSidebarColor, changeNavbarColor, navbarTypeToggle, sidebarTypeToggle } from '../../actions/layout';
 import CustomColorPicker from '../ColorPicker';
@@ -22,12 +23,65 @@ class Helper extends Component {
     dashboardTheme: DashboardThemes.DARK
   };
 
-  state = { isOpened: false };
+  state = {
+    isOpened: false,
+    run: false,
+    steps: [
+      {
+        content: 'Easily adjust navbar 🤔',
+        placement: 'left',
+        target: '.navbar-type-switcher',
+        textAlign: 'center',
+        disableBeacon: true,
+      },
+      {
+        content: "Choose a color for navbar, create unique layout ✌️",
+        placement: 'left',
+        target: '.navbar-color-picker',
+      },
+      {
+        content: "Also customize sidebar type, it's cool 👌",
+        placement: 'left',
+        target: '.sidebar-type-switcher',
+      },
+      {
+        content: 'We also have different colors for sidebar, pick one from palette 😇',
+        placement: 'left',
+        target: '.sidebar-color-picker',
+      },
+      {
+        content: 'Purchase out template if you like it, we appreciate it 🤗!',
+        placement: 'left',
+        target: '.purchase-button'
+      },
+    ],
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (!prevState.modalIsOpen && this.state.modalIsOpen) {
+      this.start();
+    }
+  }
+
+  handleJoyrideCallback = (CallBackProps) => {
+    const { status } = CallBackProps;
+
+    if (([STATUS.FINISHED, STATUS.SKIPPED]).includes(status)) {
+      this.setState({ run: false });
+    }
+
+  };
+
+  start = () => {
+    this.setState({
+      run: true,
+    });
+  };
 
   toggle = () => {
-    this.setState(prevState => ({
-      isOpened: !prevState.isOpened,
-    }));
+    this.setState({
+      isOpened: !this.state.isOpened,
+    });
   };
 
   changeTheme = (state) => {
@@ -53,7 +107,62 @@ class Helper extends Component {
 
     return (
       <div className={cx(s.themeHelper, { [s.themeHelperOpened]: isOpened })}>
-          <div className={`${s.themeHelperBtn} bg-warning`} onClick={this.toggle}>
+
+        <Joyride
+          callback={this.handleJoyrideCallback}
+          continuous={true}
+          run={this.state.run}
+          showSkipButton={true}
+          steps={this.state.steps}
+          disableOverlay={true}
+          styles={{
+            options: {
+              arrowColor: '#ffffff',
+              backgroundColor: '#ffffff',
+              overlayColor: 'rgba(79, 26, 0, 0.4)',
+              primaryColor: '#000',
+              textColor: '#495057',
+              spotlightPadding: 0,
+              zIndex: 1000,
+              padding: 5,
+              width: 240,
+            },
+            tooltip: {
+              fontSize: 15,
+              padding: 5,
+            },
+            tooltipContent: {
+              padding: '20px 5px 0',
+            },
+            floater: {
+              arrow: {
+                padding: 10
+              },
+            },
+            buttonClose: {
+              display: 'none'
+            },
+            buttonNext: {
+              backgroundColor: "#FFC247",
+              fontSize: 13,
+              borderRadius: 4,
+              color: "#ffffff",
+              fontWeight: "bold"
+            },
+            buttonBack: {
+              color: "#798892",
+              marginLeft: 'auto',
+              fontSize: 13,
+              marginRight: 5,
+            },
+            buttonSkip: {
+              color: "#798892",
+              fontSize: 13,
+            },
+          }}
+        />
+
+          <div className={`${s.themeHelperBtn} bg-warning helper-button`} onClick={this.toggle}>
             <div className={cx(s.themeHelperSpinner, 'text-white')}>
               <i className="la la-cog" />
               <i className="la la-cog" />
@@ -62,10 +171,13 @@ class Helper extends Component {
         <Widget
           className={s.themeHelperContent}
         >
-          <h5 className="mt-2 mb-5">Theme</h5>
+          <div className={s.helperHeader}>
+            <h5 className="m-0">Theme</h5>
+            <Button onClick={this.start} outline color="info">Check out tour!</Button>  
+          </div>    
 
           <div className="theme-settings">
-            <h5>Navbar Type</h5>
+            <h5 className="navbar-type-switcher">Navbar Type</h5>
             <div className="form-group row">
               <div className="abc-radio">
                 <input onChange={() => this.navbarStateToggle(NavbarTypes.STATIC)} type="radio" checked={navbarType === NavbarTypes.STATIC ? true : ''} name="navbar-type" id="navbar_static" />
@@ -78,15 +190,15 @@ class Helper extends Component {
               </div>
             </div>
 
-            <h5 className="mt-4">Navbar Color</h5>
+            <h5 className="mt-4 navbar-color-picker">Navbar Color</h5>
             <CustomColorPicker 
               colors={config.app.colors}
               activeColor={navbarColor}
               updateColor={this.updateColor}
               customizationItem={"navbar"}
             />
 
-            <h5 className="mt-4">Sidebar Type</h5>
+            <h5 className="mt-4 sidebar-type-switcher">Sidebar Type</h5>
             <div className="form-group row">
               <div className="abc-radio">
                 <input type="radio" onChange={() => this.sidebarStateToggle(SidebarTypes.TRANSPARENT)} checked={sidebarType === SidebarTypes.TRANSPARENT ? true : ''} name="sidebar-type" id="sidebar_transparent" />
@@ -99,7 +211,7 @@ class Helper extends Component {
               </div>
             </div>
 
-            <h5 className="mt-4">Sidebar Color</h5>
+            <h5 className="mt-4 sidebar-color-picker">Sidebar Color</h5>
             <CustomColorPicker 
               colors={config.app.colors}
               activeColor={sidebarColor}
@@ -112,7 +224,7 @@ class Helper extends Component {
             <Button
               href="https://flatlogic.com/admin-dashboards/sing-app-react"
               target="_blank"
-              className="btn-rounded-f btn-block fs-mini"
+              className="btn-rounded-f btn-block fs-mini purchase-button"
               color="warning"
             >
               <span className="text-white">Purchase</span>

src/components/Helper/Helper.module.scss

@@ -8,6 +8,13 @@
   bottom: 20px;
   z-index: 101;
 
+  .helperHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 0 30px 0;
+  }
+
   @include transition(right $sidebar-transition-time ease-in-out);
 
   & :global {