diff --git a/src/orders/components/OrderCustomer/OrderCustomer.tsx b/src/orders/components/OrderCustomer/OrderCustomer.tsx index ab07c3220..ede68908b 100644 --- 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 { +export interface OrderCustomerProps + extends Partial, + 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 && ( - + + ) } /> @@ -163,18 +173,23 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })( {user.email} -
- - - -
+ +
+ + + +
+
{/* TODO: Uncomment it after adding ability to filter orders by customer */} {/*
@@ -187,36 +202,40 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })( )} -
- -
- - - -
+ {!!user && ( + <> +
+ +
+ + + +
- {maybe(() => order.userEmail) === undefined ? ( - - ) : order.userEmail === null ? ( - - - - ) : ( - order.userEmail)}`} - typographyProps={{ color: "primary" }} - > - {maybe(() => order.userEmail)} - - )} -
+ {maybe(() => order.userEmail) === undefined ? ( + + ) : order.userEmail === null ? ( + + + + ) : ( + order.userEmail)}`} + typographyProps={{ color: "primary" }} + > + {maybe(() => order.userEmail)} + + )} +
+ + )}
diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx index 8e2b332bd..871ca148e 100644 --- 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 { +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) => { 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} diff --git a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx index 92518ea54..e32a241ed 100644 --- 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) => { 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} diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx index a33c405d4..051368fb9 100644 --- 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 = ({ params }) => { const navigate = useNavigator(); + const { user } = useUser(); return ( = ({ () => data.order.availableShippingMethods, [] )} + userPermissions={maybe( + () => user.permissions, + [] + )} onOrderCancel={() => openModal("cancel")} onOrderFulfill={() => openModal("fulfill")} onFulfillmentCancel={fulfillmentId => @@ -466,6 +472,10 @@ export const OrderDetails: React.StatelessComponent = ({ onProfileView={() => navigate(customerUrl(order.user.id)) } + userPermissions={maybe( + () => user.permissions, + [] + )} />