Add permissions to order management

2019-10-09 12:18:44 +02:00 · 2019-10-09 12:18:44 +02:00 · 5a17d4dc4c
commit 5a17d4dc4c
parent 47b383320d
4 changed files with 92 additions and 56 deletions
--- a/src/orders/components/OrderCustomer/OrderCustomer.tsx
+++ b/src/orders/components/OrderCustomer/OrderCustomer.tsx
@ -16,11 +16,13 @@ import ExternalLink from "@saleor/components/ExternalLink";
 import Form from "@saleor/components/Form";
 import Hr from "@saleor/components/Hr";
 import Link from "@saleor/components/Link";
+import RequirePermissions from "@saleor/components/RequirePermissions";
 import SingleAutocompleteSelectField from "@saleor/components/SingleAutocompleteSelectField";
 import Skeleton from "@saleor/components/Skeleton";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { buttonMessages } from "@saleor/intl";
-import { FetchMoreProps } from "@saleor/types";
+import { FetchMoreProps, UserPermissionProps } from "@saleor/types";
+import { PermissionEnum } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { SearchCustomers_search_edges_node } from "../../../containers/SearchCustomers/types/SearchCustomers";
 import { customerUrl } from "../../../customers/urls";
@ -49,7 +51,9 @@ const styles = (theme: Theme) =>
    }
  });

-export interface OrderCustomerProps extends Partial<FetchMoreProps> {
+export interface OrderCustomerProps
+  extends Partial<FetchMoreProps>,
+    UserPermissionProps {
  order: OrderDetails_order;
  users?: SearchCustomers_search_edges_node[];
  loading?: boolean;
@ -72,6 +76,7 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
    loading,
    order,
    users,
+    userPermissions,
    onCustomerEdit,
    onBillingAddressEdit,
    onFetchMore: onFetchMoreUsers,
@ -100,14 +105,19 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
          })}
          toolbar={
            !!canEditCustomer && (
-              <Button
-                color="primary"
-                variant="text"
-                disabled={!onCustomerEdit}
-                onClick={toggleEditMode}
+              <RequirePermissions
+                userPermissions={userPermissions}
+                requiredPermissions={[PermissionEnum.MANAGE_USERS]}
              >
-                {intl.formatMessage(buttonMessages.edit)}
-              </Button>
+                <Button
+                  color="primary"
+                  variant="text"
+                  disabled={!onCustomerEdit}
+                  onClick={toggleEditMode}
+                >
+                  {intl.formatMessage(buttonMessages.edit)}
+                </Button>
+              </RequirePermissions>
            )
          }
        />
@ -163,18 +173,23 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
              <Typography className={classes.userEmail}>
                {user.email}
              </Typography>
-              <div>
-                <Link
-                  underline={false}
-                  href={createHref(customerUrl(user.id))}
-                  onClick={onProfileView}
-                >
-                  <FormattedMessage
-                    defaultMessage="View Profile"
-                    description="link"
-                  />
-                </Link>
-              </div>
+              <RequirePermissions
+                userPermissions={userPermissions}
+                requiredPermissions={[PermissionEnum.MANAGE_USERS]}
+              >
+                <div>
+                  <Link
+                    underline={false}
+                    href={createHref(customerUrl(user.id))}
+                    onClick={onProfileView}
+                  >
+                    <FormattedMessage
+                      defaultMessage="View Profile"
+                      description="link"
+                    />
+                  </Link>
+                </div>
+              </RequirePermissions>
              {/* TODO: Uncomment it after adding ability to filter
                    orders by customer */}
              {/* <div>
@ -187,36 +202,40 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
            </>
          )}
        </CardContent>
-        <Hr />
-        <CardContent>
-          <div className={classes.sectionHeader}>
-            <Typography className={classes.sectionHeaderTitle}>
-              <FormattedMessage
-                defaultMessage="Contact Information"
-                description="subheader"
-              />
-            </Typography>
-          </div>
+        {!!user && (
+          <>
+            <Hr />
+            <CardContent>
+              <div className={classes.sectionHeader}>
+                <Typography className={classes.sectionHeaderTitle}>
+                  <FormattedMessage
+                    defaultMessage="Contact Information"
+                    description="subheader"
+                  />
+                </Typography>
+              </div>

-          {maybe(() => order.userEmail) === undefined ? (
-            <Skeleton />
-          ) : order.userEmail === null ? (
-            <Typography>
-              <FormattedMessage
-                defaultMessage="Not set"
-                description="customer is not set in draft order"
-                id="orderCustomerCustomerNotSet"
-              />
-            </Typography>
-          ) : (
-            <ExternalLink
-              href={`mailto:${maybe(() => order.userEmail)}`}
-              typographyProps={{ color: "primary" }}
-            >
-              {maybe(() => order.userEmail)}
-            </ExternalLink>
-          )}
-        </CardContent>
+              {maybe(() => order.userEmail) === undefined ? (
+                <Skeleton />
+              ) : order.userEmail === null ? (
+                <Typography>
+                  <FormattedMessage
+                    defaultMessage="Not set"
+                    description="customer is not set in draft order"
+                    id="orderCustomerCustomerNotSet"
+                  />
+                </Typography>
+              ) : (
+                <ExternalLink
+                  href={`mailto:${maybe(() => order.userEmail)}`}
+                  typographyProps={{ color: "primary" }}
+                >
+                  {maybe(() => order.userEmail)}
+                </ExternalLink>
+              )}
+            </CardContent>
+          </>
+        )}
        <Hr />
        <CardContent>
          <div className={classes.sectionHeader}>
--- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
+++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
@ -17,6 +17,7 @@ import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import Skeleton from "@saleor/components/Skeleton";
 import { sectionNames } from "@saleor/intl";
+import { UserPermissionProps } from "@saleor/types";
 import { maybe, renderCollection } from "../../../misc";
 import { OrderStatus } from "../../../types/globalTypes";
 import { OrderDetails_order } from "../../types/OrderDetails";
@ -38,7 +39,7 @@ const styles = (theme: Theme) =>
    }
  });

-export interface OrderDetailsPageProps extends WithStyles<typeof styles> {
+export interface OrderDetailsPageProps extends UserPermissionProps {
  order: OrderDetails_order;
  shippingMethods?: Array<{
    id: string;
@ -68,12 +69,13 @@ const OrderDetailsPage = withStyles(styles, { name: "OrderDetailsPage" })(
  ({
    classes,
    order,
-    onOrderCancel,
+    userPermissions,
    onBack,
    onBillingAddressEdit,
    onFulfillmentCancel,
    onFulfillmentTrackingNumberUpdate,
    onNoteAdd,
+    onOrderCancel,
    onOrderFulfill,
    onPaymentCapture,
    onPaymentPaid,
@ -81,7 +83,7 @@ const OrderDetailsPage = withStyles(styles, { name: "OrderDetailsPage" })(
    onPaymentVoid,
    onShippingAddressEdit,
    onProfileView
-  }: OrderDetailsPageProps) => {
+  }: OrderDetailsPageProps & WithStyles<typeof styles>) => {
    const intl = useIntl();

    const canCancel = maybe(() => order.status) !== OrderStatus.CANCELED;
@ -170,6 +172,7 @@ const OrderDetailsPage = withStyles(styles, { name: "OrderDetailsPage" })(
              canEditAddresses={canEditAddresses}
              canEditCustomer={false}
              order={order}
+              userPermissions={userPermissions}
              onBillingAddressEdit={onBillingAddressEdit}
              onShippingAddressEdit={onShippingAddressEdit}
              onProfileView={onProfileView}
--- a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
+++ b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
@ -18,7 +18,7 @@ import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import Skeleton from "@saleor/components/Skeleton";
 import { sectionNames } from "@saleor/intl";
-import { FetchMoreProps } from "@saleor/types";
+import { FetchMoreProps, UserPermissionProps } from "@saleor/types";
 import { SearchCustomers_search_edges_node } from "../../../containers/SearchCustomers/types/SearchCustomers";
 import { maybe } from "../../../misc";
 import { DraftOrderInput } from "../../../types/globalTypes";
@ -39,7 +39,9 @@ const styles = (theme: Theme) =>
    }
  });

-export interface OrderDraftPageProps extends FetchMoreProps {
+export interface OrderDraftPageProps
+  extends FetchMoreProps,
+    UserPermissionProps {
  disabled: boolean;
  order: OrderDetails_order;
  users: SearchCustomers_search_edges_node[];
@ -90,7 +92,8 @@ const OrderDraftPage = withStyles(styles, { name: "OrderDraftPage" })(
    onProfileView,
    order,
    users,
-    usersLoading
+    usersLoading,
+    userPermissions
  }: OrderDraftPageProps & WithStyles<typeof styles>) => {
    const intl = useIntl();

@ -147,6 +150,7 @@ const OrderDraftPage = withStyles(styles, { name: "OrderDraftPage" })(
              loading={usersLoading}
              order={order}
              users={users}
+              userPermissions={userPermissions}
              onBillingAddressEdit={onBillingAddressEdit}
              onCustomerEdit={onCustomerEdit}
              onFetchMore={onFetchMore}
--- a/src/orders/views/OrderDetails/index.tsx
+++ b/src/orders/views/OrderDetails/index.tsx
@ -2,6 +2,7 @@ import React from "react";

 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
+import useUser from "@saleor/hooks/useUser";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
 import SearchCustomers from "../../../containers/SearchCustomers";
 import { customerUrl } from "../../../customers/urls";
@ -80,6 +81,7 @@ export const OrderDetails: React.StatelessComponent<OrderDetailsProps> = ({
  params
 }) => {
  const navigate = useNavigator();
+  const { user } = useUser();

  return (
    <TypedOrderDetailsQuery
@ -183,6 +185,10 @@ export const OrderDetails: React.StatelessComponent<OrderDetailsProps> = ({
                                  () => data.order.availableShippingMethods,
                                  []
                                )}
+                                userPermissions={maybe(
+                                  () => user.permissions,
+                                  []
+                                )}
                                onOrderCancel={() => openModal("cancel")}
                                onOrderFulfill={() => openModal("fulfill")}
                                onFulfillmentCancel={fulfillmentId =>
@ -466,6 +472,10 @@ export const OrderDetails: React.StatelessComponent<OrderDetailsProps> = ({
                                onProfileView={() =>
                                  navigate(customerUrl(order.user.id))
                                }
+                                userPermissions={maybe(
+                                  () => user.permissions,
+                                  []
+                                )}
                              />
                              <OrderDraftCancelDialog
                                confirmButtonState={getMutationState(