Farmbot-Web-App/frontend/help/tours.ts

import { history } from "../history";
import { Step as TourStep } from "react-joyride";
import { TourContent } from "../constants";
import { t } from "../i18next_wrapper";
import { selectAllTools } from "../resources/selectors";
import { store } from "../redux/store";
import { getFbosConfig } from "../resources/getters";
import {
  getFwHardwareValue, hasUTM,
} from "../devices/components/firmware_hardware_support";

export enum Tours {
  gettingStarted = "gettingStarted",
  monitoring = "monitoring",
  funStuff = "funStuff",
}

export const tourNames = () => [
  { name: Tours.gettingStarted, description: t("getting started") },
  { name: Tours.monitoring, description: t("see what FarmBot is doing") },
  { name: Tours.funStuff, description: t("find new features") },
];

const hasTools = () =>
  selectAllTools(store.getState().resources.index).length > 0;

const noUTM = () =>
  !hasUTM(getFwHardwareValue(
    getFbosConfig(store.getState().resources.index)));

const toolsStep = () => hasTools()
  ? [{
    target: ".tools",
    content: noUTM()
      ? t(TourContent.ADD_SEED_CONTAINERS)
      : t(TourContent.ADD_TOOLS),
    title: noUTM()
      ? t("Add seed containers")
      : t("Add tools and seed containers"),
  }]
  : [{
    target: ".tools",
    content: noUTM()
      ? t(TourContent.ADD_SEED_CONTAINERS_AND_SLOTS)
      : t(TourContent.ADD_TOOLS_AND_SLOTS),
    title: noUTM()
      ? t("Add seed containers and slots")
      : t("Add tools and slots"),
  }];

const toolSlotsStep = () => hasTools()
  ? [{
    target: ".tool-slots",
    content: t(TourContent.ADD_TOOLS_AND_SLOTS),
    title: t("Add slots"),
  }]
  : [];

export const TOUR_STEPS = (): { [x: string]: TourStep[] } => ({
  [Tours.gettingStarted]: [
    {
      target: ".plant-inventory-panel",
      content: t(TourContent.ADD_PLANTS),
      title: t("Add plants"),
    },
    ...toolsStep(),
    ...toolSlotsStep(),
    {
      target: ".peripherals-widget",
      content: t(TourContent.ADD_PERIPHERALS),
      title: t("Add peripherals"),
    },
    {
      target: ".sequence-list-panel",
      content: t(TourContent.ADD_SEQUENCES),
      title: t("Create sequences"),
    },
    {
      target: ".regimen-list-panel",
      content: t(TourContent.ADD_REGIMENS),
      title: t("Create regimens"),
    },
    {
      target: ".farm-event-panel",
      content: t(TourContent.ADD_FARM_EVENTS),
      title: t("Create events"),
    },
  ],
  [Tours.monitoring]: [
    {
      target: ".move-widget",
      content: t(TourContent.LOCATION_GRID),
      title: t("View current location"),
    },
    {
      target: ".farm-designer",
      content: t(TourContent.VIRTUAL_FARMBOT),
      title: t("View current location"),
    },
    {
      target: ".logs-table",
      content: t(TourContent.LOGS_TABLE),
      title: t("View log messages"),
    },
    {
      target: ".photos",
      content: t(TourContent.PHOTOS),
      title: t("Take and view photos"),
    },
  ],
  [Tours.funStuff]: [
    {
      target: ".app-settings-widget",
      content: t(TourContent.APP_SETTINGS),
      title: t("Customize your web app experience"),
    },
  ],
});

export const tourPageNavigation = (nextStepTarget: string | HTMLElement) => {
  switch (nextStepTarget) {
    case ".farm-designer":
      history.push("/app/designer");
      break;
    case ".plant-inventory-panel":
      history.push("/app/designer/plants");
      break;
    case ".farm-event-panel":
      history.push("/app/designer/events");
      break;
    case ".move-widget":
    case ".peripherals-widget":
      history.push("/app/controls");
      break;
    case ".device-widget":
      history.push("/app/device");
      break;
    case ".sequence-list-panel":
      history.push("/app/sequences");
      break;
    case ".regimen-list-panel":
      history.push("/app/regimens");
      break;
    case ".tool-list":
    case ".toolbay-list":
      history.push("/app/tools");
      break;
    case ".tools":
    case ".tool-slots":
      history.push("/app/designer/tools");
      break;
    case ".photos":
      history.push("/app/farmware");
      break;
    case ".logs-table":
      history.push("/app/logs");
      break;
    case ".app-settings-widget":
      history.push("/app/account");
      break;
  }
};