From 3c2a41a185095983af8529609eba5be82c08a5a1 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 8 Oct 2019 16:19:24 +0200
Subject: [PATCH] Require permissions in home section

---
 .../HomeNotificationTable.tsx                 | 182 ++++++++++--------
 src/home/components/HomePage/HomePage.tsx     |  82 +++++---
 src/home/views/index.tsx                      |   1 +
 3 files changed, 150 insertions(+), 115 deletions(-)

diff --git a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
index f87dc12c7..2e66422b4 100644
--- a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
+++ b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
@@ -14,7 +14,10 @@ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import RequirePermissions from "@saleor/components/RequirePermissions";
 import Skeleton from "@saleor/components/Skeleton";
+import { UserPermissionProps } from "@saleor/types";
+import { PermissionEnum } from "@saleor/types/globalTypes";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -26,7 +29,7 @@ const styles = (theme: Theme) =>
     }
   });
 
-interface HomeNotificationTableProps extends WithStyles<typeof styles> {
+interface HomeNotificationTableProps extends UserPermissionProps {
   ordersToCapture: number;
   ordersToFulfill: number;
   productsOutOfStock: number;
@@ -45,101 +48,112 @@ const HomeNotificationTable = withStyles(styles, {
     onProductsOutOfStockClick,
     ordersToCapture,
     ordersToFulfill,
-    productsOutOfStock
-  }: HomeNotificationTableProps) => (
+    productsOutOfStock,
+    userPermissions
+  }: HomeNotificationTableProps & WithStyles<typeof styles>) => (
     <Card>
       <Table>
         <TableBody className={classes.tableRow}>
-          <TableRow hover={true} onClick={onOrdersToFulfillClick}>
-            <TableCell>
-              {ordersToFulfill === undefined ? (
-                <Skeleton />
-              ) : ordersToFulfill === 0 ? (
-                <Typography>
-                  <FormattedMessage
-                    defaultMessage="No orders ready to fulfill"
-                    id="homeNotificationTableNoOrders"
-                  />
-                </Typography>
-              ) : (
-                <Typography>
-                  <FormattedMessage
-                    defaultMessage="{amount, plural,
+          <RequirePermissions
+            userPermissions={userPermissions}
+            requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
+          >
+            <TableRow hover={true} onClick={onOrdersToFulfillClick}>
+              <TableCell>
+                {ordersToFulfill === undefined ? (
+                  <Skeleton />
+                ) : ordersToFulfill === 0 ? (
+                  <Typography>
+                    <FormattedMessage
+                      defaultMessage="No orders ready to fulfill"
+                      id="homeNotificationTableNoOrders"
+                    />
+                  </Typography>
+                ) : (
+                  <Typography>
+                    <FormattedMessage
+                      defaultMessage="{amount, plural,
                   one {One order}
                   other {{amount} Orders}
                 } are ready to fulfill"
-                    id="homeNotificationTableOrders"
-                    values={{
-                      amount: <strong>{ordersToFulfill}</strong>
-                    }}
-                  />
-                </Typography>
-              )}
-            </TableCell>
-            <TableCell className={classes.arrowIcon}>
-              <KeyboardArrowRight />
-            </TableCell>
-          </TableRow>
-          <TableRow hover={true} onClick={onOrdersToCaptureClick}>
-            <TableCell>
-              {ordersToCapture === undefined ? (
-                <Skeleton />
-              ) : ordersToCapture === 0 ? (
-                <Typography>
-                  <FormattedMessage
-                    defaultMessage="No payments waiting for capture"
-                    id="homeNotificationsNoPayments"
-                  />
-                </Typography>
-              ) : (
-                <Typography>
-                  <FormattedMessage
-                    defaultMessage="{amount, plural,
+                      id="homeNotificationTableOrders"
+                      values={{
+                        amount: <strong>{ordersToFulfill}</strong>
+                      }}
+                    />
+                  </Typography>
+                )}
+              </TableCell>
+              <TableCell className={classes.arrowIcon}>
+                <KeyboardArrowRight />
+              </TableCell>
+            </TableRow>
+            <TableRow hover={true} onClick={onOrdersToCaptureClick}>
+              <TableCell>
+                {ordersToCapture === undefined ? (
+                  <Skeleton />
+                ) : ordersToCapture === 0 ? (
+                  <Typography>
+                    <FormattedMessage
+                      defaultMessage="No payments waiting for capture"
+                      id="homeNotificationsNoPayments"
+                    />
+                  </Typography>
+                ) : (
+                  <Typography>
+                    <FormattedMessage
+                      defaultMessage="{amount, plural,
                   one {One payment}
                   other {{amount} Payments}
                 } to capture"
-                    id="homeNotificationTablePayments"
-                    values={{
-                      amount: <strong>{ordersToCapture}</strong>
-                    }}
-                  />
-                </Typography>
-              )}
-            </TableCell>
-            <TableCell className={classes.arrowIcon}>
-              <KeyboardArrowRight />
-            </TableCell>
-          </TableRow>
-          <TableRow hover={true} onClick={onProductsOutOfStockClick}>
-            <TableCell>
-              {productsOutOfStock === undefined ? (
-                <Skeleton />
-              ) : productsOutOfStock === 0 ? (
-                <Typography>
-                  <FormattedMessage
-                    defaultMessage="No products out of stock"
-                    id="homeNotificationsTableNoProducts"
-                  />
-                </Typography>
-              ) : (
-                <Typography>
-                  <FormattedMessage
-                    defaultMessage="{amount, plural,
+                      id="homeNotificationTablePayments"
+                      values={{
+                        amount: <strong>{ordersToCapture}</strong>
+                      }}
+                    />
+                  </Typography>
+                )}
+              </TableCell>
+              <TableCell className={classes.arrowIcon}>
+                <KeyboardArrowRight />
+              </TableCell>
+            </TableRow>
+          </RequirePermissions>
+          <RequirePermissions
+            userPermissions={userPermissions}
+            requiredPermissions={[PermissionEnum.MANAGE_PRODUCTS]}
+          >
+            <TableRow hover={true} onClick={onProductsOutOfStockClick}>
+              <TableCell>
+                {productsOutOfStock === undefined ? (
+                  <Skeleton />
+                ) : productsOutOfStock === 0 ? (
+                  <Typography>
+                    <FormattedMessage
+                      defaultMessage="No products out of stock"
+                      id="homeNotificationsTableNoProducts"
+                    />
+                  </Typography>
+                ) : (
+                  <Typography>
+                    <FormattedMessage
+                      defaultMessage="{amount, plural,
                   one {One product}
                   other {{amount} Products}
                 } out of stock"
-                    id="homeNotificationTableProducts"
-                    values={{
-                      amount: <strong>{productsOutOfStock}</strong>
-                    }}
-                  />
-                </Typography>
-              )}
-            </TableCell>
-            <TableCell className={classes.arrowIcon}>
-              <KeyboardArrowRight />
-            </TableCell>
-          </TableRow>
+                      id="homeNotificationTableProducts"
+                      values={{
+                        amount: <strong>{productsOutOfStock}</strong>
+                      }}
+                    />
+                  </Typography>
+                )}
+              </TableCell>
+              <TableCell className={classes.arrowIcon}>
+                <KeyboardArrowRight />
+              </TableCell>
+            </TableRow>
+          </RequirePermissions>
         </TableBody>
       </Table>
     </Card>
diff --git a/src/home/components/HomePage/HomePage.tsx b/src/home/components/HomePage/HomePage.tsx
index 4a34bf0ab..ab39338db 100644
--- a/src/home/components/HomePage/HomePage.tsx
+++ b/src/home/components/HomePage/HomePage.tsx
@@ -10,7 +10,10 @@ import CardSpacer from "@saleor/components/CardSpacer";
 import Container from "@saleor/components/Container";
 import Grid from "@saleor/components/Grid";
 import Money from "@saleor/components/Money";
+import RequirePermissions from "@saleor/components/RequirePermissions";
 import Skeleton from "@saleor/components/Skeleton";
+import { UserPermissionProps } from "@saleor/types";
+import { PermissionEnum } from "@saleor/types/globalTypes";
 import Orders from "../../../icons/Orders";
 import Sales from "../../../icons/Sales";
 import {
@@ -39,7 +42,7 @@ const styles = (theme: Theme) =>
     }
   });
 
-export interface HomePageProps extends WithStyles<typeof styles> {
+export interface HomePageProps extends UserPermissionProps {
   activities: Home_activities_edges_node[];
   orders: number;
   ordersToCapture: number;
@@ -68,35 +71,41 @@ const HomePage = withStyles(styles, { name: "HomePage" })(
     onProductsOutOfStockClick,
     ordersToCapture,
     ordersToFulfill,
-    productsOutOfStock
-  }: HomePageProps) => (
+    productsOutOfStock,
+    userPermissions
+  }: HomePageProps & WithStyles<typeof styles>) => (
     <Container>
       <HomeHeader userName={userName} />
       <CardSpacer />
       <Grid>
         <div>
-          <div className={classes.cardContainer}>
-            <HomeAnalyticsCard
-              title={"Sales"}
-              icon={<Sales fontSize={"inherit"} viewBox="0 0 64 64" />}
-            >
-              {sales ? (
-                <Money money={sales} />
-              ) : (
-                <Skeleton style={{ width: "5em" }} />
-              )}
-            </HomeAnalyticsCard>
-            <HomeAnalyticsCard
-              title={"Orders"}
-              icon={<Orders fontSize={"inherit"} viewBox="0 0 64 64" />}
-            >
-              {orders === undefined ? (
-                <Skeleton style={{ width: "5em" }} />
-              ) : (
-                orders
-              )}
-            </HomeAnalyticsCard>
-          </div>
+          <RequirePermissions
+            userPermissions={userPermissions}
+            requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
+          >
+            <div className={classes.cardContainer}>
+              <HomeAnalyticsCard
+                title={"Sales"}
+                icon={<Sales fontSize={"inherit"} viewBox="0 0 64 64" />}
+              >
+                {sales ? (
+                  <Money money={sales} />
+                ) : (
+                  <Skeleton style={{ width: "5em" }} />
+                )}
+              </HomeAnalyticsCard>
+              <HomeAnalyticsCard
+                title={"Orders"}
+                icon={<Orders fontSize={"inherit"} viewBox="0 0 64 64" />}
+              >
+                {orders === undefined ? (
+                  <Skeleton style={{ width: "5em" }} />
+                ) : (
+                  orders
+                )}
+              </HomeAnalyticsCard>
+            </div>
+          </RequirePermissions>
           <HomeNotificationTable
             onOrdersToCaptureClick={onOrdersToCaptureClick}
             onOrdersToFulfillClick={onOrdersToFulfillClick}
@@ -104,16 +113,27 @@ const HomePage = withStyles(styles, { name: "HomePage" })(
             ordersToCapture={ordersToCapture}
             ordersToFulfill={ordersToFulfill}
             productsOutOfStock={productsOutOfStock}
+            userPermissions={userPermissions}
           />
           <CardSpacer />
-          <HomeProductListCard
-            onRowClick={onProductClick}
-            topProducts={topProducts}
-          />
-          <CardSpacer />
+          <RequirePermissions
+            userPermissions={userPermissions}
+            requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
+          >
+            <HomeProductListCard
+              onRowClick={onProductClick}
+              topProducts={topProducts}
+            />
+            <CardSpacer />
+          </RequirePermissions>
         </div>
         <div>
-          <HomeActivityCard activities={activities} />
+          <RequirePermissions
+            userPermissions={userPermissions}
+            requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
+          >
+            <HomeActivityCard activities={activities} />
+          </RequirePermissions>
         </div>
       </Grid>
     </Container>
diff --git a/src/home/views/index.tsx b/src/home/views/index.tsx
index 63bba5deb..8e6aaa1f8 100644
--- a/src/home/views/index.tsx
+++ b/src/home/views/index.tsx
@@ -56,6 +56,7 @@ const HomeSection = () => {
           ordersToFulfill={maybe(() => data.ordersToFulfill.totalCount)}
           productsOutOfStock={maybe(() => data.productsOutOfStock.totalCount)}
           userName={getUserName(user, true)}
+          userPermissions={maybe(() => user.permissions, [])}
         />
       )}
     </HomePageQuery>