Merge branch 'develop' into fix/DX-449

zimmerman-team · Aug 2, 2023 · f0b88b4 · f0b88b4
2 parents 59c9180 + f555256
commit f0b88b4
Show file tree

Hide file tree

Showing 21 changed files with 661 additions and 246 deletions.
diff --git a/src/app/components/AppBar/index.tsx b/src/app/components/AppBar/index.tsx
@@ -389,7 +389,9 @@ const ActionMenu = () => {
 
               &:hover,
               &:active {
+                cursor: pointer;
                 background: #6061e5;
+
                 button {
                   color: #fff;
                 }

diff --git a/src/app/components/Dialogs/TourGuide/index.tsx b/src/app/components/Dialogs/TourGuide/index.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+import TourStart from "app/components/Dialogs/TourGuide/tourStart";
+import RowFrameIntro from "app/components/Dialogs/TourGuide/rowFrameIntro";
+import SelectStructure from "./selectStructure";
+import TourEnd from "./tourEnd";
+import { useRecoilState } from "recoil";
+import { reportCreationTourStepAtom } from "app/state/recoil/atoms";
+import useCookie from "@devhammed/use-cookie";
+
+export default function TourGuide(props: {
+  reportType: "basic" | "advanced" | "ai";
+  toolBoxOpen: boolean;
+}) {
+  const [reportCreationTourStep, setReportCreationTourStep] = useRecoilState(
+    reportCreationTourStepAtom
+  );
+  const [cookie, setCookie] = useCookie("tourGuide", "true");
+  const [open, setOpen] = React.useState(cookie);
+
+  function handleClose() {
+    setCookie("false", {
+      expires: 31536000 * 20,
+      domain: "",
+      path: "",
+      secure: false,
+      httpOnly: false,
+      maxAge: 0,
+      sameSite: "",
+    });
+    setOpen(!open);
+  }
+
+  const displayBasicReportTourStep = () => {
+    switch (reportCreationTourStep) {
+      case 0:
+        return (
+          <TourStart
+            setStep={setReportCreationTourStep}
+            open={open}
+            handleClose={handleClose}
+          />
+        );
+      case 1:
+        return (
+          <RowFrameIntro
+            setStep={setReportCreationTourStep}
+            handleClose={handleClose}
+            open={open}
+            toolBoxOpen={props.toolBoxOpen}
+            reportType={props.reportType}
+          />
+        );
+      case 2:
+        return (
+          <SelectStructure
+            handleClose={handleClose}
+            open={open}
+            toolBoxOpen={props.toolBoxOpen}
+          />
+        );
+      case 3:
+        return (
+          <TourEnd
+            handleClose={handleClose}
+            open={open}
+            reportType={props.reportType}
+            toolBoxOpen={props.toolBoxOpen}
+          />
+        );
+      default:
+        return;
+    }
+  };
+  const displayAdvancedReportTourStep = () => {
+    switch (reportCreationTourStep) {
+      case 0:
+        return (
+          <TourStart
+            setStep={setReportCreationTourStep}
+            open={open}
+            handleClose={handleClose}
+          />
+        );
+      case 1:
+        return (
+          <RowFrameIntro
+            setStep={setReportCreationTourStep}
+            handleClose={handleClose}
+            open={open}
+            toolBoxOpen={props.toolBoxOpen}
+            reportType={props.reportType}
+          />
+        );
+      case 2:
+        return (
+          <TourEnd
+            handleClose={handleClose}
+            open={open}
+            reportType={props.reportType}
+            toolBoxOpen={props.toolBoxOpen}
+          />
+        );
+      case 3:
+      default:
+        return;
+    }
+  };
+
+  return (
+    <>
+      {props.reportType === "basic" && displayBasicReportTourStep()}
+      {props.reportType === "advanced" && displayAdvancedReportTourStep()}
+    </>
+  );
+}
diff --git a/src/app/components/Dialogs/TourGuide/rowFrameIntro.tsx b/src/app/components/Dialogs/TourGuide/rowFrameIntro.tsx
@@ -0,0 +1,105 @@
+import React from "react";
+import { SetterOrUpdater } from "recoil";
+import { CloseOutlined } from "@material-ui/icons";
+import { IconButton } from "@material-ui/core";
+
+export default function RowFrameIntro(props: {
+  setStep: SetterOrUpdater<number>;
+  handleClose: () => void;
+  open: boolean;
+  reportType: "basic" | "advanced" | "ai";
+  toolBoxOpen: boolean;
+}) {
+  return (
+    <div
+      css={`
+        position: absolute;
+        ${props.reportType === "basic" &&
+        `top: 13rem; left: ${props.toolBoxOpen ? "0.5%" : "10%"}; `}
+        ${props.reportType === "advanced" && "top: 11.7rem; left: -5%;"} 
+        transition: left 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+
+        display: ${props.open ? "block" : "none"};
+        z-index: 2;
+      `}
+    >
+      <div
+        css={`
+          position: relative;
+          height: 114px;
+          width: 320px;
+          padding: 12px;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          align-self: stretch;
+          flex-shrink: 0;
+          border-radius: 8px;
+          background: #231d2c;
+          color: #fff;
+          font-family: "Gotham Narrow", sans-serif;
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 350;
+          line-height: 16px;
+
+          ::after {
+            content: "";
+            position: absolute;
+            border: 8px solid transparent;
+            border-bottom-color: #231d2c;
+            border-top: 0;
+            top: -8px;
+            left: 50%;
+            margin-left: -20px;
+          }
+        `}
+      >
+        <IconButton
+          css={`
+            padding: 0;
+            font-size: 16px;
+            margin: 0;
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            color: #fff;
+            &:hover {
+              background: none;
+              cursor: pointer;
+            }
+          `}
+          onClick={props.handleClose}
+        >
+          <CloseOutlined color={"inherit"} fontSize={"inherit"} />
+        </IconButton>
+        <p>
+          <b>
+            The reports in Dx are created by rows. Whenever you want to add
+            chart or text, you need to use the Row frame element and Select a
+            structure for the row.
+          </b>
+        </p>
+        <button
+          type="button"
+          onClick={() => {
+            props.setStep(2);
+          }}
+          css={`
+            border: none;
+            background: none;
+            outline: none;
+            color: #fff;
+            text-decoration: underline;
+            text-align: right;
+            width: 100%;
+            margin-top: 0px;
+            cursor: pointer;
+          `}
+        >
+          <b>Next</b>
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/Dialogs/TourGuide/selectStructure.tsx b/src/app/components/Dialogs/TourGuide/selectStructure.tsx
@@ -0,0 +1,81 @@
+import { IconButton } from "@material-ui/core";
+import { CloseOutlined } from "@material-ui/icons";
+import React from "react";
+
+export default function SelectStructure(props: {
+  handleClose: () => void;
+  open: boolean;
+  toolBoxOpen: boolean;
+}) {
+  return (
+    <div
+      css={`
+        position: absolute;
+        top: 13rem;
+        left: ${props.toolBoxOpen ? "0%" : "11%"};
+        transition: left 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+
+        display: ${props.open ? "block" : "none"};
+        z-index: 2;
+      `}
+    >
+      <div
+        css={`
+          position: relative;
+          height: 59px;
+          width: 320px;
+          padding: 12px;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          align-self: stretch;
+          flex-shrink: 0;
+          border-radius: 8px;
+          background: #231d2c;
+          color: #fff;
+          font-family: "Gotham Narrow", sans-serif;
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 350;
+          line-height: 16px;
+
+          ::after {
+            content: "";
+            position: absolute;
+            border: 8px solid transparent;
+            border-bottom-color: #231d2c;
+            border-top: 0;
+            top: -8px;
+            left: 50%;
+            margin-left: -20px;
+          }
+          p {
+            margin-top: 10px;
+          }
+        `}
+      >
+        <IconButton
+          css={`
+            padding: 0;
+            font-size: 16px;
+            margin: 0;
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            color: #fff;
+            &:hover {
+              background: none;
+              cursor: pointer;
+            }
+          `}
+          onClick={props.handleClose}
+        >
+          <CloseOutlined color={"inherit"} fontSize={"inherit"} />
+        </IconButton>
+        <p>
+          <b>Try it! Select what structure you want for your row!</b>
+        </p>
+      </div>
+    </div>
+  );
+}