Merge pull request #216 from zimmerman-team/feat/DX-1159

Feat/dx 1159

src/app/components/Dialogs/PlanDialog/common/message.tsx

@@ -0,0 +1,129 @@
+import React from "react";
+import Box from "@material-ui/core/Box";
+import styled from "styled-components/macro";
+import Typography from "@material-ui/core/Typography";
+import { useRecoilState } from "recoil";
+import { planDialogAtom } from "app/state/recoil/atoms";
+import { useHistory } from "react-router-dom";
+
+const MessageContainer = styled((props) => <Box {...props} />)`
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  @media (max-width: 960px) {
+    flex-direction: column;
+    align-items: normal;
+  }
+  p {
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    color: #231d2c;
+    cursor: pointer;
+  }
+`;
+
+const Typo = styled((props) => <Typography {...props} />)`
+  && {
+    align-self: center;
+    @media (max-width: 960px) {
+      margin-bottom: 8px;
+    }
+  }
+`;
+
+const Button = styled.button`
+  padding: 16px 24px;
+  border-radius: 48px;
+  background: #6061e5;
+  color: #fff;
+  outline: none;
+  border: none;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  text-transform: uppercase;
+  cursor: pointer;
+  flex-shrink: 0;
+
+  @media (max-width: 960px) {
+    margin-bottom: 8px;
+  }
+`;
+
+type MessageProps = {
+  onClose?: () => void;
+  message: string;
+};
+
+export const Message = (props: MessageProps) => {
+  const [planDialog, setPlanDialog] = useRecoilState(planDialogAtom);
+
+  const history = useHistory();
+  return (
+    <MessageContainer display="flex">
+      <Typo
+        variant="body1"
+        css={`
+          color: #231d2c;
+
+          a {
+            color: #231d2c;
+          }
+        `}
+        dangerouslySetInnerHTML={{ __html: props.message }}
+      />
+      <div
+        css={`
+          display: flex;
+          align-items: center;
+          gap: 16px;
+        `}
+      >
+        <p
+          css={`
+            text-transform: uppercase;
+            flex-shrink: 0;
+          `}
+          onClick={props.onClose}
+        >
+          Not Now
+        </p>
+        {planDialog.tryAgain && (
+          <Button
+            type="button"
+            onClick={() => {
+              planDialog.onTryAgain();
+              setPlanDialog({
+                open: false,
+                message: "",
+                tryAgain: "",
+                onTryAgain: () => {},
+              });
+            }}
+          >
+            {planDialog.tryAgain}
+          </Button>
+        )}
+        <Button
+          type="button"
+          onClick={() => {
+            history.push("/pricing");
+            setPlanDialog({
+              open: false,
+              message: "",
+              tryAgain: "",
+              onTryAgain: () => {},
+            });
+          }}
+        >
+          Upgrade Now
+        </Button>
+      </div>
+    </MessageContainer>
+  );
+};

src/app/components/Dialogs/PlanDialog/index.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import styled from "styled-components/macro";
+import Snackbar from "@material-ui/core/Snackbar";
+import SnackbarContent from "@material-ui/core/SnackbarContent";
+import { Message } from "./common/message";
+import { useRecoilState } from "recoil";
+import { planDialogAtom } from "app/state/recoil/atoms";
+
+type SnackBarProps = {
+  open: boolean;
+  handleClose: () => void;
+  message: string;
+};
+
+const BaseSnackbar = styled((props) => (
+  <Snackbar {...props} data-cy="plan-dialog" />
+))`
+  && {
+    bottom: 16px;
+  }
+
+  & [class*="MuiSnackbarContent-root"] {
+    background-color: white;
+    width: 1232px;
+    border-radius: 10px;
+    box-shadow: 0 8px 17px -4px rgba(130, 142, 148, 0.35),
+      0 0 4px 0 rgba(130, 142, 148, 0.16), 0 0 2px 0 rgba(130, 142, 148, 0.12);
+    flex-wrap: nowrap;
+    padding: 0 0;
+    display: flex;
+    justify-content: space-between;
+
+    @media (max-width: 1280px) {
+      width: 100%;
+    }
+  }
+
+  /* & [class*="MuiButtonBase-root"] {
+    border-radius: 10px;
+    height: 32px;
+  } */
+  & [class*="MuiTypography-root"] {
+    font-weight: 325;
+    font-size: 16px;
+    font-family: "GothamNarrow-Book", sans-serif;
+
+    > a {
+      font-family: "GothamNarrow-Book", sans-serif;
+    }
+  }
+
+  & [class*="MuiSnackbarContent-message"] {
+    padding: 24px 76px;
+    width: 100%;
+  }
+
+  & [class*="MuiSnackbarContent-action"] {
+    padding-left: 64px;
+    font-family: "GothamNarrow-Book", sans-serif;
+  }
+`;
+
+export const PlanDialog = () => {
+  const [planDialog, setPlanDialog] = useRecoilState(planDialogAtom);
+
+  const handleClose = () => {
+    setPlanDialog({
+      open: false,
+      message: "",
+      tryAgain: "",
+      onTryAgain: () => {},
+    });
+  };
+
+  return (
+    <>
+      <BaseSnackbar
+        ClickAwayListenerProps={{ mouseEvent: false }}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "center",
+        }}
+        open={planDialog.open}
+        autoHideDuration={null}
+        onClose={handleClose}
+      >
+        <SnackbarContent
+          aria-describedby="client-snackbar"
+          message={
+            <Message onClose={handleClose} message={planDialog.message} />
+          }
+        />
+      </BaseSnackbar>
+    </>
+  );
+};

src/app/hooks/useCheckUserPlan.tsx

@@ -0,0 +1,115 @@
+import { useAuth0 } from "@auth0/auth0-react";
+import { planDialogAtom } from "app/state/recoil/atoms";
+import { useStoreState } from "app/state/store/hooks";
+import axios from "axios";
+import React from "react";
+import { useSetRecoilState } from "recoil";
+
+export function useCheckUserPlan() {
+  const { isAuthenticated } = useAuth0();
+  const token = useStoreState((state) => state.AuthToken.value);
+  const setPlanDialog = useSetRecoilState(planDialogAtom);
+
+  const [userPlan, setUserPlan] = React.useState<{
+    planData: {
+      name: string;
+      datasets: {
+        noOfDatasets: number;
+        datasetsSize: number;
+        availability: number;
+        connectData: boolean;
+        exportDatasetCsv: boolean;
+        connectYourOwnDataSource: boolean;
+        googleDrive: boolean;
+      };
+      charts: {
+        noOfCharts: number;
+        chartBuilderAccess: boolean;
+        shareChart: boolean;
+        basicCharts: boolean;
+        advancedCharts: boolean;
+        aiAgent: boolean;
+        customCharting: boolean;
+      };
+      reports: {
+        noOfReports: number;
+        basicTemplates: boolean;
+        advancedTemplates: boolean;
+        mediaSupport: boolean;
+        aiChat: boolean;
+        aiAgent: boolean;
+      };
+    };
+    assetsCount: {
+      datasets: number;
+      charts: number;
+      reports: number;
+    };
+  } | null>(null);
+
+  React.useEffect(() => {
+    if (!token) return;
+    axios
+      .get(`${process.env.REACT_APP_API}/users/plan-data`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((response) => {
+        setUserPlan(response.data);
+      });
+  }, [token]);
+
+  const handleClick = (
+    asset: "report" | "chart" | "dataset",
+    handleCreate: () => void
+  ) => {
+    if (!isAuthenticated) {
+      return handleCreate();
+    }
+    if (userPlan) {
+      if (asset === "dataset") {
+        if (
+          userPlan.planData.datasets.noOfDatasets >
+          userPlan.assetsCount.datasets
+        ) {
+          handleCreate();
+        } else {
+          setPlanDialog({
+            open: true,
+            message: `You have reached the <b>${userPlan.planData.datasets.noOfDatasets}</b> datasets limit for your ${userPlan.planData.name} Plan. Upgrade to increase.`,
+            tryAgain: "",
+            onTryAgain: () => {},
+          });
+        }
+      } else if (asset === "chart") {
+        if (userPlan.planData.charts.noOfCharts > userPlan.assetsCount.charts) {
+          handleCreate();
+        } else {
+          setPlanDialog({
+            open: true,
+            message: `You have reached the <b>${userPlan.planData.charts.noOfCharts}</b> charts limit for your ${userPlan.planData.name} Plan. Upgrade to increase.`,
+            tryAgain: "",
+            onTryAgain: () => {},
+          });
+        }
+      } else if (asset === "report") {
+        if (
+          userPlan.planData.reports.noOfReports > userPlan.assetsCount.reports
+        ) {
+          handleCreate();
+        } else {
+          setPlanDialog({
+            open: true,
+            message: `You have reached the <b>${userPlan.planData.reports.noOfReports}</b> reports limit for your ${userPlan.planData.name} Plan. Upgrade to increase.`,
+            tryAgain: "",
+            onTryAgain: () => {},
+          });
+        }
+      }
+    }
+  };
+
+  return { userPlan, handleClick };
+}

src/app/index.tsx

@@ -4,14 +4,15 @@ import React from "react";
 import Providers from "app/Providers";
 import { MainRoutes } from "app/Routes";
 import { AppDialogs } from "app/components/Dialogs";
-import useMediaQuery from "@material-ui/core/useMediaQuery";
 import { CookieDialog } from "app/components/Dialogs/CookieDialog";
+import { PlanDialog } from "./components/Dialogs/PlanDialog";
 
 export function App() {
   return (
     <Providers>
       <AppDialogs />
       <CookieDialog open data-testid="cookie-dialog" />
+      <PlanDialog />
       <MainRoutes />
     </Providers>
   );