From 6d3e346a19be76cb44eec2280091f288bab31c2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 10 Aug 2021 10:59:15 +0200 Subject: [PATCH] Improve limit messages (#1274) --- .../ChannelsListPage/ChannelsListPage.tsx | 18 +- src/components/PageHeader/PageHeader.tsx | 21 +- .../OrderDraftListPage/OrderDraftListPage.tsx | 26 +- src/orders/components/OrderLimitReached.tsx | 21 + .../OrderListPage/OrderListPage.tsx | 34 +- .../views/OrderDraftList/OrderDraftList.tsx | 7 + .../ProductListPage/ProductListPage.tsx | 18 +- .../StaffListPage/StaffListPage.tsx | 18 +- .../__snapshots__/Stories.test.ts.snap | 1632 ++++++++++++++++- .../stories/orders/OrderDraftListPage.tsx | 8 +- .../WarehouseListPage/WarehouseListPage.tsx | 18 +- 11 files changed, 1762 insertions(+), 59 deletions(-) create mode 100644 src/orders/components/OrderLimitReached.tsx diff --git a/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx b/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx index e5ed9cd28..09452eae6 100644 --- a/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx +++ b/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx @@ -56,12 +56,18 @@ export const ChannelsListPage: React.FC = ({ + {limitsReached && } { + const intl = useIntl(); + + return ( + + + + ); +}; + +OrderLimitReached.displayName = "OrderLimitReached"; +export default OrderLimitReached; diff --git a/src/orders/components/OrderListPage/OrderListPage.tsx b/src/orders/components/OrderListPage/OrderListPage.tsx index ac8a1dfe0..38d280147 100644 --- a/src/orders/components/OrderListPage/OrderListPage.tsx +++ b/src/orders/components/OrderListPage/OrderListPage.tsx @@ -2,18 +2,18 @@ import { Button, Card } from "@material-ui/core"; import CardMenu from "@saleor/components/CardMenu"; import Container from "@saleor/components/Container"; import FilterBar from "@saleor/components/FilterBar"; -import LimitReachedAlert from "@saleor/components/LimitReachedAlert"; import PageHeader from "@saleor/components/PageHeader"; import { RefreshLimits_shop_limits } from "@saleor/components/Shop/types/RefreshLimits"; import { sectionNames } from "@saleor/intl"; import { makeStyles } from "@saleor/macaw-ui"; import { OrderListUrlSortField } from "@saleor/orders/urls"; import { FilterPageProps, PageListProps, SortPage } from "@saleor/types"; -import { isLimitReached } from "@saleor/utils/limits"; +import { hasLimits, isLimitReached } from "@saleor/utils/limits"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; import { OrderList_orders_edges_node } from "../../types/OrderList"; +import OrderLimitReached from "../OrderLimitReached"; import OrderList from "../OrderList"; import { createFilterStructure, @@ -58,10 +58,26 @@ const OrderListPage: React.FC = ({ const intl = useIntl(); const classes = useStyles({}); const filterStructure = createFilterStructure(intl, filterOpts); + const limitsReached = isLimitReached(limits, "orders"); return ( - + {!!onSettingsOpen && ( = ({ /> )} - {isLimitReached(limits, "orders") && ( - - - - )} + {limitsReached && } = ({ params }) => { }); const { channel, availableChannels } = useAppChannel(); + const limitOpts = useShopLimitsQuery({ + variables: { + orders: true + } + }); const tabs = getFilterTabs(); @@ -183,6 +189,7 @@ export const OrderDraftList: React.FC = ({ params }) => { = props => { = ({ + + + +
+
+
+
+
+
+
+ Order limit reached +
+ +
+ You have reached your order limit, you will be billed extra for orders above limit. If you would like to up your limit, contact your administration staff about raising your limits. +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + +
+
+ No. of Order +
+ +
+ 		+
+
+ Date +
+
+ 		+
+
+ Customer +
+
+ 		+
+
+ Total +
+
+
+
+
+
+ + No of Rows: + +
+
+ 20 +
+ + +
+
+
+
+ + +
+
+
+ + + + + + + + #20 + + + + Laura Stone 1 2 + + $305.17 +
+ + + + + + + + #19 + + + + Elizabeth Vaughn + + $1,215.89 +
+ + + + + + + + #18 + + + + david.lawson@example.com + + $321.71 +
+ + + + + + + + #17 + + + + Aaron Randall + + $271.95 +
+ + + + + + + + #16 + + + + Laura Jensen + + $335.84 +
+ + + + + + + + #15 + + + + Jenna Villa + + $1,042.15 +
+ + + + + + + + #14 + + + + Wesley Davis + + $213.69 +
+ + + + + + + + #13 + + + + Anthony Gonzalez + + $367.03 +
+ + + + + + + + #12 + + + + Denise Freeman + + $298.76 +
+ + + + + + + + #11 + + + + James Ball + + $663.69 +
+ + + + + + + + #10 + + + + Michael Martinez + + $280.41 +
+ + + + + + + + #9 + + + + Melissa Simon + + $234.93 +
+ + + + + + + + #8 + + + + Justin Mccoy + + $485.19 +
+ + + + + + + + #7 + + + + Anthony Gonzalez + + $223.54 +
+ + + + + + + + #6 + + + + Bradley Ford + + $237.55 +
+ + + + + + + + #5 + + + + David Lawson + + $453.55 +
+ + + + + + + + #4 + + + + Lauren Watson + + $812.67 +
+ + + + + + + + #3 + + + + Mark Lee + + $481.41 +
+ + + + + + + + #2 + + + + Kara Murphy + + $569.19 +
+ + + + + + + + #1 + + + + Curtis Bailey + + $557.00 +
+
+
+
+ +`; + exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
+
+ 230/500 orders +