added some steps to the bin tour to reference each of the tabs, added some step to the signup tour to show some more pages and also added a way to change unit settings IN the tour step, now it is entirely their fault if they skip it, we cant make it any more in their face

src/bin/BinTour.tsx

@@ -1,6 +1,6 @@
 // import { useAuth0 } from "@auth0/auth0-react";
 import { Typography } from "@mui/material";
-import Tour from "common/Tour";
+import Tour, { TourStep } from "common/Tour";
 import { random } from "lodash";
 import moment from "moment";
 import { useGlobalState, useSnackbar, useUserAPI } from "providers";
@@ -8,8 +8,13 @@ import React, { useEffect, useState } from "react";
 import { Step } from "react-joyride";
 // import Emoji from "react-emoji-render";
 
-export default function BinTour() {
+interface Props {
+  setDetailTabState?: ( detail: "inventory" | "sensors" | "analytics" | "presets" | "alerts" | "transactions", buttonIndex: number) => void
+}
+
+export default function BinTour(props: Props) {
   // const { userID } = useAuth0();
+  const {setDetailTabState} = props
   const [{ user }, dispatch] = useGlobalState();
   const userID = user.id()
   const { error } = useSnackbar();
@@ -35,8 +40,8 @@ export default function BinTour() {
     }
   };
 
-  const getTourSteps = (): Step[] => {
-    let steps: Step[] = [
+  const getTourSteps = (): TourStep[] => {
+    let steps: TourStep[] = [
       {
         title: (
           <React.Fragment>
@@ -103,24 +108,12 @@ export default function BinTour() {
         disableBeacon: false
       },
       {
-        title: "Graphs",
+        title: "View Other Data",
         content: (
           <React.Fragment>
             <Typography variant="body2" paragraph>
-              Bin related analytics are displayed here.
-            </Typography>
-          </React.Fragment>
-        ),
-        target: "#tour-graphs",
-        placement: "left",
-        disableBeacon: false
-      },
-      {
-        title: "Choose your graphs",
-        content: (
-          <React.Fragment>
-            <Typography variant="body2" paragraph>
-              Use this tab to view other sets of data. Sensors must be attached to view sensor data.
+              Use these tabs to view other Bin Details such as inventory levels over time, 
+              alerts and interactions for connected components, and data for attached sensors
             </Typography>
           </React.Fragment>
         ),
@@ -128,6 +121,122 @@ export default function BinTour() {
         placement: "bottom",
         disableBeacon: false
       },
+      {
+        title: "Inventory",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              The inventory tab shows your bins inventory level over a specified window as well as the times the bin mode was changed.
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-details",
+        placement: "left-start",
+        disableBeacon: false,
+        onNext: () => {
+          if (setDetailTabState) setDetailTabState("sensors", 1)
+        }
+      },
+      {
+        title: "Sensors",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              The sensors tab shows readings from attached sensors over time
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-details",
+        placement: "left-start",
+        disableBeacon: false,
+        onNext: () => {
+          if (setDetailTabState) setDetailTabState("analytics", 2)
+        }
+      },
+      {
+        title: "Analytics",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              The analysis tab shows analytic bin data using attached sensors
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-details",
+        placement: "left-start",
+        disableBeacon: false,
+        onNext: () => {
+          if (setDetailTabState) setDetailTabState("alerts", 3)
+        }
+      },
+      {
+        title: "Alerts and Interactions",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              The Alerts tab allows you to view or add any new interactions or alerts for connected components 
+              and displays recent notifications from those alerts
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-details",
+        placement: "left-start",
+        disableBeacon: false,
+        onNext: () => {
+          if (setDetailTabState) setDetailTabState("presets", 4)
+        }
+      },
+      {
+        title: "Bin Mode Presets",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              The Presets tab allows you to create custom presets for the interactions for a device when changing bin modes
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-details",
+        placement: "left-start",
+        disableBeacon: false,
+        onNext: () => {
+          if (setDetailTabState) setDetailTabState("transactions", 5)
+        }
+      },
+      {
+        title: "Bin Transactions",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              The transactions tab allows view any pending transaction when using a hybrid inventory control
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-details",
+        placement: "left-start",
+        disableBeacon: false,
+        onNext: () => {
+          if (setDetailTabState) setDetailTabState("inventory", 0)
+        }
+      },
+      {
+        title: "Bin Conditions",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              This section will display conditions based on the bin mode
+            </Typography>
+            <Typography variant="body2" paragraph>
+              Storage Mode: simply displays the Storage conditions by itself with the target temperature and moisture set in the bin settings
+            </Typography>
+            <Typography variant="body2" paragraph>
+              Other Modes: will display the interactions for the bins devices that are controlling a fan or heater on the bin as well as the storage conditions
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-conditions",
+        placement: "right",
+        disableBeacon: false
+      },
       {
         title: "Change Mode",
         content: (
@@ -138,12 +247,15 @@ export default function BinTour() {
             <ul>
               <li>Storage mode: default</li>
               <li>
-                Drying mode: use heat to dry grain ☀️
+                Cooldown mode: use fans to hold bin temperature lower  ❆❅
+                {/* <Emoji text="  ❆❅" /> */}
+              </li>
+              <li>
+                Drying mode: use heat to dry grain ☀️ (only visible when the target moisture is lower than the starting moisture in the bin settings)
                 {/* <Emoji text=" ☀️" /> */}
               </li>
               <li>
-                Cooldown mode: use fans to hold bin temperature lower  ❆❅
-                {/* <Emoji text="  ❆❅" /> */}
+                Hydrating mode: use humid air to hydrate grain (only visible when the target moisture is higher than the starting moisture in the bin settings)
               </li>
             </ul>
           </React.Fragment>

src/bin/BinVisualizerV2.tsx

@@ -1727,32 +1727,34 @@ export default function BinVisualizer(props: Props) {
         {modeChangeInProgress &&
           <CircularProgress color="primary" size={25}/>
         }
-        <ButtonGroup 
-          disableAll={modeChangeInProgress}
-          buttons={[
-            {
-              title: "Storage",
-              function: () => {
-                setModeStorage()
+        <Box id="tour-bin-mode">
+          <ButtonGroup 
+            disableAll={modeChangeInProgress}
+            buttons={[
+              {
+                title: "Storage",
+                function: () => {
+                  setModeStorage()
+                }
+              },
+              {
+                title: "Cooldown",
+                function: () => {
+                  setModeCooldown()
+                }
+              },
+              {
+                title: bin.settings.inventory && bin.settings.inventory?.initialMoisture < bin.settings.inventory?.targetMoisture ? "Hydrating" : "Drying",
+                function: () => {
+                  // setShowInputMoisture(true)
+                  setModeConditioning() //will set it to either drying or hydrating based on the initial and target moisture
+                }
               }
-            },
-            {
-              title: "Cooldown",
-              function: () => {
-                setModeCooldown()
-              }
-            },
-            {
-              title: bin.settings.inventory && bin.settings.inventory?.initialMoisture < bin.settings.inventory?.targetMoisture ? "Hydrating" : "Drying",
-              function: () => {
-                // setShowInputMoisture(true)
-                setModeConditioning() //will set it to either drying or hydrating based on the initial and target moisture
-              }
-            }
-          ]}
-          toggledButtons={determineToggle(mode)}
-          toggle
-        />
+            ]}
+            toggledButtons={determineToggle(mode)}
+            toggle
+            />
+        </Box>
       </Box>
     );
   };