Tour guide refactors (#508)

simplq/src/components/common/Tour/Tour.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import Tour from 'reactour';
+import { enableScroll, disableScroll } from './ControlScroll';
+
+export default (props) => {
+  const hasUserBeenOnTour = () => {
+    const tourStatus = localStorage.getItem('__user_been_on_tour__');
+    if (tourStatus === null) {
+      localStorage.setItem('__user_been_on_tour__', true);
+      return true;
+    }
+    return false;
+  };
+  const [tourOpen, setTourOpen] = useState(hasUserBeenOnTour());
+
+  const closeTour = () => setTourOpen(false);
+
+  return (
+    <Tour
+      showNavigation={false}
+      steps={props.toursteps}
+      showNavigationNumber={false}
+      showNumber={false}
+      showCloseButton={false}
+      isOpen={tourOpen}
+      rounded={10}
+      onRequestClose={closeTour}
+      onAfterOpen={disableScroll}
+      onBeforeClose={enableScroll}
+      getCurrentStep={props.stepChange}
+    />
+  );
+};

simplq/src/components/pages/Admin/TourSteps.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import * as Sentry from '@sentry/react';
 
 export const getToursteps = (screenInnerWidth) => {
   const tourProperties = {
@@ -45,6 +46,7 @@ export const getToursteps = (screenInnerWidth) => {
               alt="share queue arrow"
               height="80"
               width="120"
+              style={{ transform: 'rotate(-10deg)' }}
             />
           ) : null}
           <div style={{ transform: 'rotate(-10deg)' }}>Share Queue</div>
@@ -62,11 +64,23 @@ export const getToursteps = (screenInnerWidth) => {
   ];
 };
 
-export const hasUserBeenOnTour = () => {
-  const tourStatus = localStorage.getItem('__user_been_on_tour__');
-  if (tourStatus === null) {
-    localStorage.setItem('__user_been_on_tour__', true);
-    return true;
+export const stepChange = (stepNumber) => {
+  const leftArrow = document.querySelector("[data-tour-elem='left-arrow']");
+  const rightArrow = document.querySelector("[data-tour-elem='right-arrow']");
+
+    if (leftArrow && rightArrow) {
+      if (stepNumber === 0) {
+          leftArrow.childNodes[0].style.color = 'grey';
+          rightArrow.childNodes[0].style.color = 'white';
+        }
+      else if (stepNumber === 1) {
+          leftArrow.childNodes[0].style.color = 'white';
+          rightArrow.childNodes[0].style.color = 'grey';
+      }
   }
-  return false;
-};
+  else
+  {
+    Sentry.captureMessage("left-arrow or right-arrow selectors of reatTour package not found");
+  }
+
+}

simplq/src/components/pages/Admin/index.jsx

@@ -4,7 +4,6 @@ import React, { useState, useEffect, useCallback } from 'react';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import CropFreeIcon from '@material-ui/icons/CropFree';
 import { useAuth0 } from '@auth0/auth0-react';
-import Tour from 'reactour';
 import TokenList from './TokenList';
 import { TokenRequestFactory, QueueRequestFactory } from '../../../api/requestFactory';
 import ShareQueue from './ShareQueue';
@@ -14,9 +13,9 @@ import SidePanel from './AdminSidePanel';
 import StandardButton from '../../common/Button';
 import Ribbon from '../../common/Ribbon';
 import QRCode from '../../common/Popup/QrCode';
-import { disableScroll, enableScroll } from './ControlScroll';
-import { getToursteps, hasUserBeenOnTour } from './TourSteps';
+import { getToursteps, stepChange } from './TourSteps';
 import useRequest from '../../../api/useRequest';
+import Tour from '../../common/Tour/Tour';
 
 const TIMEOUT = 10000;
 let timeoutId;
@@ -28,13 +27,11 @@ export default (props) => {
   const [queueName, setQueueName] = useState();
   const [description, setDescription] = useState('');
   const [showQrCodeModal, setShowQrCodeModal] = useState(false);
-  const [tourOpen, setTourOpen] = useState(hasUserBeenOnTour());
+
   const [toursteps, setToursteps] = useState(getToursteps(window.innerHeight));
   const { isAuthenticated } = useAuth0();
   const { requestMaker } = useRequest();
 
-  const closeTour = () => setTourOpen(false);
-
   const update = useCallback(() => {
     clearTimeout(timeoutId);
     requestMaker(QueueRequestFactory.get(queueId)).then((data) => {
@@ -123,19 +120,7 @@ export default (props) => {
 
   return (
     <div className={styles['admin-content']}>
-      <Tour
-        showNavigation={false}
-        steps={toursteps}
-        showNavigationNumber={false}
-        showNumber={false}
-        showCloseButton={false}
-        isOpen={tourOpen}
-        rounded={10}
-        onRequestClose={closeTour}
-        onAfterOpen={disableScroll}
-        onBeforeClose={enableScroll}
-      />
-
+      <Tour toursteps={toursteps} stepChange={stepChange} />
       <HeaderSection />
       {isAuthenticated ? null : (
         <Ribbon