From 5edd3439801d7e5c5b724e9c0e8a7fe5d8db7d2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Choi=C5=84ski?= Date: Mon, 21 Dec 2020 10:20:11 +0100 Subject: [PATCH 01/13] Use query hook on home page --- src/home/queries.ts | 7 ++-- src/home/views/index.tsx | 87 ++++++++++++++++++++-------------------- 2 files changed, 48 insertions(+), 46 deletions(-) diff --git a/src/home/queries.ts b/src/home/queries.ts index a286a72f2db..ba18119c0d1 100644 --- a/src/home/queries.ts +++ b/src/home/queries.ts @@ -1,7 +1,7 @@ +import makeQuery from "@saleor/hooks/makeQuery"; import gql from "graphql-tag"; -import { TypedQuery } from "../queries"; -import { Home } from "./types/Home"; +import { Home, HomeVariables } from "./types/Home"; const home = gql` query Home($channel: String!) { @@ -80,4 +80,5 @@ const home = gql` } } `; -export const HomePageQuery = TypedQuery(home); + +export const useHomePage = makeQuery(home); diff --git a/src/home/views/index.tsx b/src/home/views/index.tsx index 957ed0c8ff8..5da77d67b2a 100644 --- a/src/home/views/index.tsx +++ b/src/home/views/index.tsx @@ -8,57 +8,58 @@ import { orderListUrl } from "../../orders/urls"; import { productListUrl, productVariantEditUrl } from "../../products/urls"; import { OrderStatusFilter, StockAvailability } from "../../types/globalTypes"; import HomePage from "../components/HomePage"; -import { HomePageQuery } from "../queries"; +import { useHomePage } from "../queries"; const HomeSection = () => { const navigate = useNavigator(); const { user } = useUser(); const { channel } = useAppChannel(); + const { data } = useHomePage({ + displayLoader: true, + variables: { channel: channel.slug } + }); + return ( - - {({ data }) => ( - - data.activities.edges.map(edge => edge.node).reverse() - )} - orders={maybe(() => data.ordersToday.totalCount)} - sales={maybe(() => data.salesToday.gross)} - topProducts={maybe(() => - data.productTopToday.edges.map(edge => edge.node) - )} - onProductClick={(productId, variantId) => - navigate(productVariantEditUrl(productId, variantId)) - } - onOrdersToCaptureClick={() => - navigate( - orderListUrl({ - status: [OrderStatusFilter.READY_TO_CAPTURE] - }) - ) - } - onOrdersToFulfillClick={() => - navigate( - orderListUrl({ - status: [OrderStatusFilter.READY_TO_FULFILL] - }) - ) - } - onProductsOutOfStockClick={() => - navigate( - productListUrl({ - stockStatus: StockAvailability.OUT_OF_STOCK - }) - ) - } - ordersToCapture={maybe(() => data.ordersToCapture.totalCount)} - ordersToFulfill={maybe(() => data.ordersToFulfill.totalCount)} - productsOutOfStock={maybe(() => data.productsOutOfStock.totalCount)} - userName={getUserName(user, true)} - userPermissions={user?.userPermissions || []} - /> + + data.activities.edges.map(edge => edge.node).reverse() + )} + orders={maybe(() => data.ordersToday.totalCount)} + sales={maybe(() => data.salesToday.gross)} + topProducts={maybe(() => + data.productTopToday.edges.map(edge => edge.node) )} - + onProductClick={(productId, variantId) => + navigate(productVariantEditUrl(productId, variantId)) + } + onOrdersToCaptureClick={() => + navigate( + orderListUrl({ + status: [OrderStatusFilter.READY_TO_CAPTURE] + }) + ) + } + onOrdersToFulfillClick={() => + navigate( + orderListUrl({ + status: [OrderStatusFilter.READY_TO_FULFILL] + }) + ) + } + onProductsOutOfStockClick={() => + navigate( + productListUrl({ + stockStatus: StockAvailability.OUT_OF_STOCK + }) + ) + } + ordersToCapture={maybe(() => data.ordersToCapture.totalCount)} + ordersToFulfill={maybe(() => data.ordersToFulfill.totalCount)} + productsOutOfStock={maybe(() => data.productsOutOfStock.totalCount)} + userName={getUserName(user, true)} + userPermissions={user?.userPermissions || []} + /> ); }; From 2a676888e679a7e3d62569b2bbe405e8d2e1bc69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Choi=C5=84ski?= Date: Tue, 22 Dec 2020 12:41:51 +0100 Subject: [PATCH 02/13] Handle no channel --- src/categories/views/CategoryDetails.tsx | 321 +++++++++--------- .../AppLayout/AppChannelContext.tsx | 12 +- src/components/AppLayout/AppLayout.tsx | 14 +- .../HomeNotificationTable.tsx | 20 +- src/home/components/HomePage/HomePage.tsx | 59 ++-- src/home/views/index.tsx | 25 +- src/index.tsx | 5 +- 7 files changed, 253 insertions(+), 203 deletions(-) diff --git a/src/categories/views/CategoryDetails.tsx b/src/categories/views/CategoryDetails.tsx index bf002ae9aae..79382f59ef1 100644 --- a/src/categories/views/CategoryDetails.tsx +++ b/src/categories/views/CategoryDetails.tsx @@ -4,7 +4,9 @@ import DeleteIcon from "@material-ui/icons/Delete"; import ActionDialog from "@saleor/components/ActionDialog"; import useAppChannel from "@saleor/components/AppLayout/AppChannelContext"; import NotFoundPage from "@saleor/components/NotFoundPage"; +import Skeleton from "@saleor/components/Skeleton"; import { WindowTitle } from "@saleor/components/WindowTitle"; +import { channelDetailsFragment } from "@saleor/fragments/channels"; import useBulkActions from "@saleor/hooks/useBulkActions"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; @@ -210,166 +212,179 @@ export const CategoryDetails: React.FC = ({ return ( <> data.category.name)} /> - data.category)} - disabled={loading} - errors={updateResult.data?.categoryUpdate.errors || []} - onAddCategory={() => navigate(categoryAddUrl(id))} - onAddProduct={() => navigate(productAddUrl())} - onBack={() => - navigate( - maybe(() => categoryUrl(data.category.parent.id), categoryListUrl()) - ) - } - onCategoryClick={id => () => navigate(categoryUrl(id))} - onDelete={() => openModal("delete")} - onImageDelete={() => - updateCategory({ - variables: { - id, - input: { - backgroundImage: null - } + {typeof channel !== "undefined" ? ( + <> + data.category)} + disabled={loading} + errors={updateResult.data?.categoryUpdate.errors || []} + onAddCategory={() => navigate(categoryAddUrl(id))} + onAddProduct={() => navigate(productAddUrl())} + onBack={() => + navigate( + maybe( + () => categoryUrl(data.category.parent.id), + categoryListUrl() + ) + ) } - }) - } - onImageUpload={file => - updateCategory({ - variables: { - id, - input: { - backgroundImage: file - } + onCategoryClick={id => () => navigate(categoryUrl(id))} + onDelete={() => openModal("delete")} + onImageDelete={() => + updateCategory({ + variables: { + id, + input: { + backgroundImage: null + } + } + }) } - }) - } - onNextPage={loadNextPage} - onPreviousPage={loadPreviousPage} - pageInfo={pageInfo} - onProductClick={id => () => navigate(productUrl(id))} - onSubmit={handleSubmit} - products={maybe(() => - data.category.products.edges.map(edge => edge.node) - )} - saveButtonBarState={updateResult.status} - selectedChannelId={channel.id} - subcategories={maybe(() => - data.category.children.edges.map(edge => edge.node) - )} - subcategoryListToolbar={ - - openModal("delete-categories", { - ids: listElements + onImageUpload={file => + updateCategory({ + variables: { + id, + input: { + backgroundImage: file + } + } }) } + onNextPage={loadNextPage} + onPreviousPage={loadPreviousPage} + pageInfo={pageInfo} + onProductClick={id => () => navigate(productUrl(id))} + onSubmit={handleSubmit} + products={maybe(() => + data.category.products.edges.map(edge => edge.node) + )} + saveButtonBarState={updateResult.status} + selectedChannelId={channel.id} + subcategories={maybe(() => + data.category.children.edges.map(edge => edge.node) + )} + subcategoryListToolbar={ + + openModal("delete-categories", { + ids: listElements + }) + } + > + + + } + productListToolbar={ + + openModal("delete-products", { + ids: listElements + }) + } + > + + + } + isChecked={isSelected} + selected={listElements.length} + toggle={toggle} + toggleAll={toggleAll} + /> + deleteCategory({ variables: { id } })} + open={params.action === "delete"} + title={intl.formatMessage({ + defaultMessage: "Delete category", + description: "dialog title" + })} + variant="delete" > - - - } - productListToolbar={ - - openModal("delete-products", { - ids: listElements - }) + + {maybe(() => data.category.name, "...")} + ) + }} + /> + + + + + + params.ids.length > 0) + } + confirmButtonState={categoryBulkDeleteOpts.status} + onClose={closeModal} + onConfirm={() => + categoryBulkDelete({ + variables: { ids: params.ids } + }).then(() => refetch()) } + title={intl.formatMessage({ + defaultMessage: "Delete categories", + description: "dialog title" + })} + variant="delete" > - - - } - isChecked={isSelected} - selected={listElements.length} - toggle={toggle} - toggleAll={toggleAll} - /> - deleteCategory({ variables: { id } })} - open={params.action === "delete"} - title={intl.formatMessage({ - defaultMessage: "Delete category", - description: "dialog title" - })} - variant="delete" - > - - {maybe(() => data.category.name, "...")} - ) - }} - /> - - - - - - params.ids.length > 0) - } - confirmButtonState={categoryBulkDeleteOpts.status} - onClose={closeModal} - onConfirm={() => - categoryBulkDelete({ - variables: { ids: params.ids } - }).then(() => refetch()) - } - title={intl.formatMessage({ - defaultMessage: "Delete categories", - description: "dialog title" - })} - variant="delete" - > - - params.ids.length), - displayQuantity: {maybe(() => params.ids.length)} - }} - /> - - - - - - - productBulkDelete({ - variables: { ids: params.ids } - }).then(() => refetch()) - } - title={intl.formatMessage({ - defaultMessage: "Delete products", - description: "dialog title" - })} - variant="delete" - > - - params.ids.length), - displayQuantity: {maybe(() => params.ids.length)} - }} - /> - - + + params.ids.length), + displayQuantity: ( + {maybe(() => params.ids.length)} + ) + }} + /> + + + + + + + productBulkDelete({ + variables: { ids: params.ids } + }).then(() => refetch()) + } + title={intl.formatMessage({ + defaultMessage: "Delete products", + description: "dialog title" + })} + variant="delete" + > + + params.ids.length), + displayQuantity: ( + {maybe(() => params.ids.length)} + ) + }} + /> + + + + ) : ( + + )} ); }; diff --git a/src/components/AppLayout/AppChannelContext.tsx b/src/components/AppLayout/AppChannelContext.tsx index 27aee5a0201..19e548c8a6b 100644 --- a/src/components/AppLayout/AppChannelContext.tsx +++ b/src/components/AppLayout/AppChannelContext.tsx @@ -30,6 +30,10 @@ export const AppChannelProvider: React.FC = ({ children }) => { const { data: channelData, refetch } = useChannelsList({ skip: !isAuthenticated }); + + // TODO mockup + // channelData= {channels: []}; + const [isPickerActive, setPickerActive] = React.useState(false); React.useEffect(() => { if (!selectedChannel) { @@ -38,9 +42,10 @@ export const AppChannelProvider: React.FC = ({ children }) => { }, [channelData]); const availableChannels = channelData?.channels || []; - const channel = availableChannels.find( - channel => channel.id === selectedChannel - ); + + const channel = + channelData && + (availableChannels.find(channel => channel.id === selectedChannel) || null); return ( { ); }; + AppChannelProvider.displayName = "AppChannelProvider"; function useAppChannel(enablePicker = true): UseAppChannel { diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index b093a8c147e..4be74a99fa3 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -215,12 +215,14 @@ const AppLayout: React.FC = ({ children }) => { .includes("mac")} onClick={() => setNavigatorVisibility(true)} /> - + {channel && ( + + )} void; onOrdersToCaptureClick: () => void; onProductsOutOfStockClick: () => void; + noChannel: boolean; } const HomeNotificationTable: React.FC = props => { @@ -46,7 +47,8 @@ const HomeNotificationTable: React.FC = props => { ordersToCapture, ordersToFulfill, productsOutOfStock, - userPermissions + userPermissions, + noChannel } = props; const classes = useStyles(props); @@ -55,6 +57,22 @@ const HomeNotificationTable: React.FC = props => { + {noChannel && ( + + + + {/* */} + Create new channel + + + + + + + )} void; onOrdersToFulfillClick: () => void; onProductClick: (productId: string, variantId: string) => void; onProductsOutOfStockClick: () => void; + noChannel: boolean; } const HomePage: React.FC = props => { @@ -73,7 +74,8 @@ const HomePage: React.FC = props => { ordersToCapture, ordersToFulfill, productsOutOfStock, - userPermissions + userPermissions, + noChannel } = props; const classes = useStyles(props); @@ -131,30 +133,35 @@ const HomePage: React.FC = props => { ordersToFulfill={ordersToFulfill} productsOutOfStock={productsOutOfStock} userPermissions={userPermissions} + noChannel={noChannel} /> - - - - - -
- - - + {topProducts && ( + + + + + )}
+ {activities && ( +
+ + + +
+ )} ); diff --git a/src/home/views/index.tsx b/src/home/views/index.tsx index 5da77d67b2a..8dd5c0e32ac 100644 --- a/src/home/views/index.tsx +++ b/src/home/views/index.tsx @@ -15,21 +15,21 @@ const HomeSection = () => { const { user } = useUser(); const { channel } = useAppChannel(); + const noChannel = !channel && typeof channel !== "undefined"; + const { data } = useHomePage({ displayLoader: true, - variables: { channel: channel.slug } + variables: { channel: channel?.slug } }); return ( - data.activities.edges.map(edge => edge.node).reverse() - )} - orders={maybe(() => data.ordersToday.totalCount)} - sales={maybe(() => data.salesToday.gross)} - topProducts={maybe(() => - data.productTopToday.edges.map(edge => edge.node) - )} + activities={data?.activities.edges.map(edge => edge.node).reverse()} + orders={!noChannel ? data?.ordersToday.totalCount : 0} + sales={maybe(() => data?.salesToday.gross)} + topProducts={ + !noChannel ? data?.productTopToday.edges.map(edge => edge.node) : null + } onProductClick={(productId, variantId) => navigate(productVariantEditUrl(productId, variantId)) } @@ -54,11 +54,12 @@ const HomeSection = () => { }) ) } - ordersToCapture={maybe(() => data.ordersToCapture.totalCount)} - ordersToFulfill={maybe(() => data.ordersToFulfill.totalCount)} - productsOutOfStock={maybe(() => data.productsOutOfStock.totalCount)} + ordersToCapture={!noChannel ? data?.ordersToCapture.totalCount : 0} + ordersToFulfill={!noChannel ? data?.ordersToFulfill.totalCount : 0} + productsOutOfStock={!noChannel ? data?.productsOutOfStock.totalCount : 0} userName={getUserName(user, true)} userPermissions={user?.userPermissions || []} + noChannel={noChannel} /> ); }; diff --git a/src/index.tsx b/src/index.tsx index 766332330ea..34ebfb1bd0f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -145,7 +145,7 @@ const Routes: React.FC = () => { return ( <> - {channel && + {typeof channel !== "undefined" && isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? ( @@ -284,7 +284,8 @@ const Routes: React.FC = () => { - ) : (isAuthenticated && !channel) || (hasToken && tokenVerifyLoading) ? ( + ) : (isAuthenticated && typeof channel === "undefined") || + (hasToken && tokenVerifyLoading) ? ( ) : ( From 94173453fb8ac19879da1b6a18b18752dac5e7e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Choi=C5=84ski?= Date: Wed, 23 Dec 2020 13:48:19 +0100 Subject: [PATCH 03/13] Handle no channel on pages --- src/home/components/HomePage/HomePage.tsx | 4 +- src/home/views/index.tsx | 10 +++-- src/orders/views/OrderList/OrderList.tsx | 38 ++++++++++--------- .../views/ProductList/ProductList.tsx | 10 +++-- 4 files changed, 36 insertions(+), 26 deletions(-) diff --git a/src/home/components/HomePage/HomePage.tsx b/src/home/components/HomePage/HomePage.tsx index 98bdc2cd47c..29b6649f154 100644 --- a/src/home/components/HomePage/HomePage.tsx +++ b/src/home/components/HomePage/HomePage.tsx @@ -101,7 +101,9 @@ const HomePage: React.FC = props => { /> } > - {sales ? ( + {noChannel ? ( + 0 + ) : sales ? ( ) : ( diff --git a/src/home/views/index.tsx b/src/home/views/index.tsx index 8dd5c0e32ac..7e48466c266 100644 --- a/src/home/views/index.tsx +++ b/src/home/views/index.tsx @@ -17,10 +17,12 @@ const HomeSection = () => { const noChannel = !channel && typeof channel !== "undefined"; - const { data } = useHomePage({ - displayLoader: true, - variables: { channel: channel?.slug } - }); + const { data } = !noChannel + ? useHomePage({ + displayLoader: true, + variables: { channel: channel?.slug } + }) + : { data: null }; return ( = ({ params }) => { const { channel, availableChannels } = useAppChannel(); + const noChannel = !channel && typeof channel !== "undefined"; + const tabs = getFilterTabs(); const currentTab = @@ -176,23 +178,25 @@ export const OrderList: React.FC = ({ params }) => { onSubmit={handleFilterTabDelete} tabName={getStringOrPlaceholder(tabs[currentTab - 1]?.name)} /> - ({ - label: channel.name, - value: channel.id - }))} - confirmButtonState="success" - defaultChoice={channel.id} - open={params.action === "create-order"} - onClose={closeModal} - onConfirm={channel => - createOrder({ - variables: { - input: { channel } - } - }) - } - /> + {!noChannel && ( + ({ + label: channel.name, + value: channel.id + }))} + confirmButtonState="success" + defaultChoice={channel.id} + open={params.action === "create-order"} + onClose={closeModal} + onConfirm={channel => + createOrder({ + variables: { + input: { channel } + } + }) + } + /> + )} ); }; diff --git a/src/products/views/ProductList/ProductList.tsx b/src/products/views/ProductList/ProductList.tsx index f47c86ccc66..98cbce0d4fd 100644 --- a/src/products/views/ProductList/ProductList.tsx +++ b/src/products/views/ProductList/ProductList.tsx @@ -127,6 +127,8 @@ export const ProductList: React.FC = ({ params }) => { }); const { availableChannels, channel } = useAppChannel(); + const noChannel = !channel && typeof channel !== "undefined"; + const [openModal, closeModal] = createDialogActionHandlers< ProductListUrlDialog, ProductListUrlQueryParams @@ -222,8 +224,8 @@ export const ProductList: React.FC = ({ params }) => { ); const paginationState = createPaginationState(settings.rowNumber, params); - const filter = getFilterVariables(params, channel.slug); - const sort = getSortQueryVariables(params, channel.slug); + const filter = !noChannel ? getFilterVariables(params, channel.slug) : null; + const sort = !noChannel ? getSortQueryVariables(params, channel.slug) : null; const queryVariables = React.useMemo( () => ({ ...paginationState, @@ -302,7 +304,7 @@ export const ProductList: React.FC = ({ params }) => { () => attributes.data.availableInGrid.edges.map(edge => edge.node), [] )} - currencySymbol={channel?.currencyCode} + currencySymbol={channel?.currencyCode || ""} currentTab={currentTab} defaultSettings={defaultListSettings[ListViews.PRODUCT_LIST]} filterOpts={filterOpts} @@ -380,7 +382,7 @@ export const ProductList: React.FC = ({ params }) => { tabs={getFilterTabs().map(tab => tab.name)} onExport={() => openModal("export")} channelsCount={availableChannels?.length} - selectedChannelId={channel.id} + selectedChannelId={channel?.id} /> Date: Mon, 28 Dec 2020 15:38:28 +0100 Subject: [PATCH 04/13] Add navigate channels --- .../HomeNotificationTable/HomeNotificationTable.tsx | 4 +++- src/home/components/HomePage/HomePage.tsx | 3 +++ src/home/views/index.tsx | 4 ++++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx index 0a11bf84922..9630dbc57d3 100644 --- a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx +++ b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx @@ -33,6 +33,7 @@ interface HomeNotificationTableProps extends UserPermissionProps { ordersToCapture: number; ordersToFulfill: number; productsOutOfStock: number; + onCreateNewChannelClick: () => void; onOrdersToFulfillClick: () => void; onOrdersToCaptureClick: () => void; onProductsOutOfStockClick: () => void; @@ -41,6 +42,7 @@ interface HomeNotificationTableProps extends UserPermissionProps { const HomeNotificationTable: React.FC = props => { const { + onCreateNewChannelClick, onOrdersToCaptureClick, onOrdersToFulfillClick, onProductsOutOfStockClick, @@ -58,7 +60,7 @@ const HomeNotificationTable: React.FC = props => { {noChannel && ( - + {/* void; onOrdersToCaptureClick: () => void; onOrdersToFulfillClick: () => void; onProductClick: (productId: string, variantId: string) => void; @@ -68,6 +69,7 @@ const HomePage: React.FC = props => { topProducts, onProductClick, activities, + onCreateNewChannelClick, onOrdersToCaptureClick, onOrdersToFulfillClick, onProductsOutOfStockClick, @@ -128,6 +130,7 @@ const HomePage: React.FC = props => { { onProductClick={(productId, variantId) => navigate(productVariantEditUrl(productId, variantId)) } + onCreateNewChannelClick={() => { + navigate(channelsListUrl()); + }} onOrdersToCaptureClick={() => navigate( orderListUrl({ From 8041c7e08850051f9e131398bd93c1d7c2bc49f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Choi=C5=84ski?= Date: Mon, 28 Dec 2020 15:55:17 +0100 Subject: [PATCH 05/13] Move messages --- .../HomeNotificationTable.tsx | 88 +++++++++++-------- 1 file changed, 49 insertions(+), 39 deletions(-) diff --git a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx index 9630dbc57d3..d14296e6358 100644 --- a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx +++ b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx @@ -11,7 +11,40 @@ import Skeleton from "@saleor/components/Skeleton"; import { UserPermissionProps } from "@saleor/types"; import { PermissionEnum } from "@saleor/types/globalTypes"; import React from "react"; -import { FormattedMessage } from "react-intl"; +import { defineMessages, useIntl } from "react-intl"; + +const messages = defineMessages({ + createNewChannel: { + defaultMessage: "Create new channel" + }, + noOrders: { + defaultMessage: "No orders ready to fulfill", + id: "homeNotificationTableNoOrders" + }, + orderReady: { + defaultMessage: + "{amount, plural,one {One order is ready to fulfill} other {{amount} Orders are ready to fulfill}}", + id: "homeNotificationTableOrders" + }, + noPaymentWaiting: { + defaultMessage: "No payments waiting for capture", + id: "homeNotificationsNoPayments" + }, + paymentCapture: { + defaultMessage: + "{amount, plural,one {One payment to capture}other {{amount} Payments to capture}}", + id: "homeNotificationTablePayments" + }, + noProductsOut: { + defaultMessage: "No products out of stock", + id: "homeNotificationsTableNoProducts" + }, + productOut: { + defaultMessage: + "{amount, plural,one {One product out of stock}other {{amount} Products out of stock}}", + id: "homeNotificationTableProducts" + } +}); const useStyles = makeStyles( () => ({ @@ -55,6 +88,8 @@ const HomeNotificationTable: React.FC = props => { const classes = useStyles(props); + const intl = useIntl(); + return ( @@ -63,11 +98,7 @@ const HomeNotificationTable: React.FC = props => { - {/* */} - Create new channel + {intl.formatMessage(messages.createNewChannel)} @@ -85,20 +116,13 @@ const HomeNotificationTable: React.FC = props => { ) : ordersToFulfill === 0 ? ( - + {intl.formatMessage(messages.noOrders)} ) : ( - {ordersToFulfill} - }} - /> + {intl.formatMessage(messages.orderReady, { + amount: {ordersToFulfill} + })} )} @@ -112,20 +136,13 @@ const HomeNotificationTable: React.FC = props => { ) : ordersToCapture === 0 ? ( - + {intl.formatMessage(messages.noPaymentWaiting)} ) : ( - {ordersToCapture} - }} - /> + {intl.formatMessage(messages.paymentCapture, { + amount: {ordersToCapture} + })} )} @@ -144,20 +161,13 @@ const HomeNotificationTable: React.FC = props => { ) : productsOutOfStock === 0 ? ( - + {intl.formatMessage(messages.noProductsOut)} ) : ( - {productsOutOfStock} - }} - /> + {intl.formatMessage(messages.productOut, { + amount: {productsOutOfStock} + })} )} From 5d66ce8b497103622f035b38c0800c73558c4edf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Choi=C5=84ski?= Date: Mon, 28 Dec 2020 17:15:29 +0100 Subject: [PATCH 06/13] Refactor --- src/categories/views/CategoryDetails.tsx | 1 - .../HomeNotificationTable.tsx | 16 ++++++++-------- src/storybook/stories/home/HomePage.tsx | 2 ++ 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/categories/views/CategoryDetails.tsx b/src/categories/views/CategoryDetails.tsx index 79382f59ef1..1fe617b71eb 100644 --- a/src/categories/views/CategoryDetails.tsx +++ b/src/categories/views/CategoryDetails.tsx @@ -6,7 +6,6 @@ import useAppChannel from "@saleor/components/AppLayout/AppChannelContext"; import NotFoundPage from "@saleor/components/NotFoundPage"; import Skeleton from "@saleor/components/Skeleton"; import { WindowTitle } from "@saleor/components/WindowTitle"; -import { channelDetailsFragment } from "@saleor/fragments/channels"; import useBulkActions from "@saleor/hooks/useBulkActions"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; diff --git a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx index d14296e6358..a217306c44d 100644 --- a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx +++ b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx @@ -21,24 +21,24 @@ const messages = defineMessages({ defaultMessage: "No orders ready to fulfill", id: "homeNotificationTableNoOrders" }, + noPaymentWaiting: { + defaultMessage: "No payments waiting for capture", + id: "homeNotificationsNoPayments" + }, + noProductsOut: { + defaultMessage: "No products out of stock", + id: "homeNotificationsTableNoProducts" + }, orderReady: { defaultMessage: "{amount, plural,one {One order is ready to fulfill} other {{amount} Orders are ready to fulfill}}", id: "homeNotificationTableOrders" }, - noPaymentWaiting: { - defaultMessage: "No payments waiting for capture", - id: "homeNotificationsNoPayments" - }, paymentCapture: { defaultMessage: "{amount, plural,one {One payment to capture}other {{amount} Payments to capture}}", id: "homeNotificationTablePayments" }, - noProductsOut: { - defaultMessage: "No products out of stock", - id: "homeNotificationsTableNoProducts" - }, productOut: { defaultMessage: "{amount, plural,one {One product out of stock}other {{amount} Products out of stock}}", diff --git a/src/storybook/stories/home/HomePage.tsx b/src/storybook/stories/home/HomePage.tsx index 44b528c0c81..b150068499e 100644 --- a/src/storybook/stories/home/HomePage.tsx +++ b/src/storybook/stories/home/HomePage.tsx @@ -13,6 +13,8 @@ const shop = shopFixture(placeholderImage); const homePageProps: Omit = { activities: shop.activities.edges.map(edge => edge.node), + noChannel: false, + onCreateNewChannelClick: () => undefined, onOrdersToCaptureClick: () => undefined, onOrdersToFulfillClick: () => undefined, onProductClick: () => undefined, From 4ee840bbece985d161b7e33fcce3efebcbd09deb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Choi=C5=84ski?= Date: Mon, 28 Dec 2020 17:26:05 +0100 Subject: [PATCH 07/13] Update storybook and locale --- locale/defaultMessages.json | 3 + .../__snapshots__/Stories.test.ts.snap | 143 ------------------ 2 files changed, 3 insertions(+), 143 deletions(-) diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 2f7279e2382..e41cdf42915 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -3012,6 +3012,9 @@ "src_dot_home_dot_components_dot_HomeActivityCard_dot_placed": { "string": "Order #{orderId} was placed" }, + "src_dot_home_dot_components_dot_HomeNotificationTable_dot_createNewChannel": { + "string": "Create new channel" + }, "src_dot_hooks_dot_3382262667": { "string": "Variant {name} has been set as default." }, diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 7f790fbf860..0582f845936 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -90514,149 +90514,6 @@ exports[`Storyshots Views / HomePage loading 1`] = `
-
-
- - Top Products - -
-
-
-
-
- - - - - - - - - - - - - -
-
-
- -
-
-
-
- - ‌ - - -
- - ‌ - -
-
-
-
-
-
-
-
-
- - Activity - -
-
-
-
-
    -
  • -
    -
    - - ‌ - -
    -
    -
    • -
-
From 5a5bfa78c0182ce52f908e99e4f4d2fc79e75d90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Choi=C5=84ski?= Date: Mon, 28 Dec 2020 17:27:01 +0100 Subject: [PATCH 08/13] Remove comment --- src/components/AppLayout/AppChannelContext.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/AppLayout/AppChannelContext.tsx b/src/components/AppLayout/AppChannelContext.tsx index 19e548c8a6b..930cacfd019 100644 --- a/src/components/AppLayout/AppChannelContext.tsx +++ b/src/components/AppLayout/AppChannelContext.tsx @@ -31,9 +31,6 @@ export const AppChannelProvider: React.FC = ({ children }) => { skip: !isAuthenticated }); - // TODO mockup - // channelData= {channels: []}; - const [isPickerActive, setPickerActive] = React.useState(false); React.useEffect(() => { if (!selectedChannel) { From eed545af13090ab2785cf61975930e38a677ea23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Choi=C5=84ski?= Date: Wed, 6 Jan 2021 16:15:43 +0100 Subject: [PATCH 09/13] Refactor --- src/categories/views/CategoryDetails.tsx | 323 +++++++++++----------- src/home/components/HomePage/HomePage.tsx | 16 +- src/home/views/index.tsx | 29 +- src/index.tsx | 19 +- 4 files changed, 192 insertions(+), 195 deletions(-) diff --git a/src/categories/views/CategoryDetails.tsx b/src/categories/views/CategoryDetails.tsx index 1fe617b71eb..85949088a14 100644 --- a/src/categories/views/CategoryDetails.tsx +++ b/src/categories/views/CategoryDetails.tsx @@ -208,182 +208,173 @@ export const CategoryDetails: React.FC = ({ variables => updatePrivateMetadata({ variables }) ); + if (typeof channel === "undefined") { + return ; + } + return ( <> data.category.name)} /> - {typeof channel !== "undefined" ? ( - <> - data.category)} - disabled={loading} - errors={updateResult.data?.categoryUpdate.errors || []} - onAddCategory={() => navigate(categoryAddUrl(id))} - onAddProduct={() => navigate(productAddUrl())} - onBack={() => - navigate( - maybe( - () => categoryUrl(data.category.parent.id), - categoryListUrl() - ) - ) + data.category)} + disabled={loading} + errors={updateResult.data?.categoryUpdate.errors || []} + onAddCategory={() => navigate(categoryAddUrl(id))} + onAddProduct={() => navigate(productAddUrl())} + onBack={() => + navigate( + maybe(() => categoryUrl(data.category.parent.id), categoryListUrl()) + ) + } + onCategoryClick={id => () => navigate(categoryUrl(id))} + onDelete={() => openModal("delete")} + onImageDelete={() => + updateCategory({ + variables: { + id, + input: { + backgroundImage: null + } } - onCategoryClick={id => () => navigate(categoryUrl(id))} - onDelete={() => openModal("delete")} - onImageDelete={() => - updateCategory({ - variables: { - id, - input: { - backgroundImage: null - } - } - }) + }) + } + onImageUpload={file => + updateCategory({ + variables: { + id, + input: { + backgroundImage: file + } } - onImageUpload={file => - updateCategory({ - variables: { - id, - input: { - backgroundImage: file - } - } + }) + } + onNextPage={loadNextPage} + onPreviousPage={loadPreviousPage} + pageInfo={pageInfo} + onProductClick={id => () => navigate(productUrl(id))} + onSubmit={handleSubmit} + products={maybe(() => + data.category.products.edges.map(edge => edge.node) + )} + saveButtonBarState={updateResult.status} + selectedChannelId={channel.id} + subcategories={maybe(() => + data.category.children.edges.map(edge => edge.node) + )} + subcategoryListToolbar={ + + openModal("delete-categories", { + ids: listElements }) } - onNextPage={loadNextPage} - onPreviousPage={loadPreviousPage} - pageInfo={pageInfo} - onProductClick={id => () => navigate(productUrl(id))} - onSubmit={handleSubmit} - products={maybe(() => - data.category.products.edges.map(edge => edge.node) - )} - saveButtonBarState={updateResult.status} - selectedChannelId={channel.id} - subcategories={maybe(() => - data.category.children.edges.map(edge => edge.node) - )} - subcategoryListToolbar={ - - openModal("delete-categories", { - ids: listElements - }) - } - > - - - } - productListToolbar={ - - openModal("delete-products", { - ids: listElements - }) - } - > - - - } - isChecked={isSelected} - selected={listElements.length} - toggle={toggle} - toggleAll={toggleAll} - /> - deleteCategory({ variables: { id } })} - open={params.action === "delete"} - title={intl.formatMessage({ - defaultMessage: "Delete category", - description: "dialog title" - })} - variant="delete" > - - {maybe(() => data.category.name, "...")} - ) - }} - /> - - - - - - params.ids.length > 0) - } - confirmButtonState={categoryBulkDeleteOpts.status} - onClose={closeModal} - onConfirm={() => - categoryBulkDelete({ - variables: { ids: params.ids } - }).then(() => refetch()) - } - title={intl.formatMessage({ - defaultMessage: "Delete categories", - description: "dialog title" - })} - variant="delete" - > - - params.ids.length), - displayQuantity: ( - {maybe(() => params.ids.length)} - ) - }} - /> - - - - - - - productBulkDelete({ - variables: { ids: params.ids } - }).then(() => refetch()) + + + } + productListToolbar={ + + openModal("delete-products", { + ids: listElements + }) } - title={intl.formatMessage({ - defaultMessage: "Delete products", - description: "dialog title" - })} - variant="delete" > - - params.ids.length), - displayQuantity: ( - {maybe(() => params.ids.length)} - ) - }} - /> - - - - ) : ( - - )} + + + } + isChecked={isSelected} + selected={listElements.length} + toggle={toggle} + toggleAll={toggleAll} + /> + deleteCategory({ variables: { id } })} + open={params.action === "delete"} + title={intl.formatMessage({ + defaultMessage: "Delete category", + description: "dialog title" + })} + variant="delete" + > + + {maybe(() => data.category.name, "...")} + ) + }} + /> + + + + + + params.ids.length > 0) + } + confirmButtonState={categoryBulkDeleteOpts.status} + onClose={closeModal} + onConfirm={() => + categoryBulkDelete({ + variables: { ids: params.ids } + }).then(() => refetch()) + } + title={intl.formatMessage({ + defaultMessage: "Delete categories", + description: "dialog title" + })} + variant="delete" + > + + params.ids.length), + displayQuantity: {maybe(() => params.ids.length)} + }} + /> + + + + + + + productBulkDelete({ + variables: { ids: params.ids } + }).then(() => refetch()) + } + title={intl.formatMessage({ + defaultMessage: "Delete products", + description: "dialog title" + })} + variant="delete" + > + + params.ids.length), + displayQuantity: {maybe(() => params.ids.length)} + }} + /> + + ); }; diff --git a/src/home/components/HomePage/HomePage.tsx b/src/home/components/HomePage/HomePage.tsx index 68c69929604..dbae636707b 100644 --- a/src/home/components/HomePage/HomePage.tsx +++ b/src/home/components/HomePage/HomePage.tsx @@ -73,10 +73,10 @@ const HomePage: React.FC = props => { onOrdersToCaptureClick, onOrdersToFulfillClick, onProductsOutOfStockClick, - ordersToCapture, - ordersToFulfill, - productsOutOfStock, - userPermissions, + ordersToCapture = 0, + ordersToFulfill = 0, + productsOutOfStock = 0, + userPermissions = [], noChannel } = props; @@ -121,10 +121,12 @@ const HomePage: React.FC = props => { /> } > - {orders === undefined ? ( - - ) : ( + {noChannel ? ( + 0 + ) : orders !== undefined ? ( orders + ) : ( + )}
diff --git a/src/home/views/index.tsx b/src/home/views/index.tsx index 617881a1871..ddc7238baba 100644 --- a/src/home/views/index.tsx +++ b/src/home/views/index.tsx @@ -4,7 +4,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useUser from "@saleor/hooks/useUser"; import React from "react"; -import { getUserName, maybe } from "../../misc"; +import { getUserName } from "../../misc"; import { orderListUrl } from "../../orders/urls"; import { productListUrl, productVariantEditUrl } from "../../products/urls"; import { OrderStatusFilter, StockAvailability } from "../../types/globalTypes"; @@ -18,21 +18,18 @@ const HomeSection = () => { const noChannel = !channel && typeof channel !== "undefined"; - const { data } = !noChannel - ? useHomePage({ - displayLoader: true, - variables: { channel: channel?.slug } - }) - : { data: null }; + const { data } = useHomePage({ + displayLoader: true, + variables: { channel: channel?.slug }, + skip: false + }); return ( edge.node).reverse()} - orders={!noChannel ? data?.ordersToday.totalCount : 0} - sales={maybe(() => data?.salesToday.gross)} - topProducts={ - !noChannel ? data?.productTopToday.edges.map(edge => edge.node) : null - } + orders={data?.ordersToday.totalCount} + sales={data?.salesToday.gross} + topProducts={data?.productTopToday.edges.map(edge => edge.node)} onProductClick={(productId, variantId) => navigate(productVariantEditUrl(productId, variantId)) } @@ -60,11 +57,11 @@ const HomeSection = () => { }) ) } - ordersToCapture={!noChannel ? data?.ordersToCapture.totalCount : 0} - ordersToFulfill={!noChannel ? data?.ordersToFulfill.totalCount : 0} - productsOutOfStock={!noChannel ? data?.productsOutOfStock.totalCount : 0} + ordersToCapture={data?.ordersToCapture.totalCount} + ordersToFulfill={data?.ordersToFulfill.totalCount} + productsOutOfStock={data?.productsOutOfStock.totalCount} userName={getUserName(user, true)} - userPermissions={user?.userPermissions || []} + userPermissions={user?.userPermissions} noChannel={noChannel} /> ); diff --git a/src/index.tsx b/src/index.tsx index 34ebfb1bd0f..b199afe7031 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -142,13 +142,21 @@ const Routes: React.FC = () => { } = useAuth(); const { channel } = useAppChannel(false); + const channelLoaded = typeof channel !== "undefined"; + + const homePageLoaded = + channelLoaded && + isAuthenticated && + !tokenAuthLoading && + !tokenVerifyLoading; + + const homePageLoading = + (isAuthenticated && !channelLoaded) || (hasToken && tokenVerifyLoading); + return ( <> - {typeof channel !== "undefined" && - isAuthenticated && - !tokenAuthLoading && - !tokenVerifyLoading ? ( + {homePageLoaded ? ( @@ -284,8 +292,7 @@ const Routes: React.FC = () => { - ) : (isAuthenticated && typeof channel === "undefined") || - (hasToken && tokenVerifyLoading) ? ( + ) : homePageLoading ? ( ) : ( From f14f1adea4df91159784c2dfb27e4635be364e6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Choi=C5=84ski?= Date: Thu, 7 Jan 2021 10:53:05 +0100 Subject: [PATCH 10/13] Update storybook --- .../__snapshots__/Stories.test.ts.snap | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 0582f845936..948719ea165 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -90429,11 +90429,11 @@ exports[`Storyshots Views / HomePage loading 1`] = ` - - ‌ - + No orders ready to fulfill +
- - ‌ - + No payments waiting for capture +
- - ‌ - + No products out of stock + Date: Thu, 7 Jan 2021 22:53:30 +0100 Subject: [PATCH 11/13] Fix skip --- src/home/views/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/home/views/index.tsx b/src/home/views/index.tsx index ddc7238baba..d873ce5ff67 100644 --- a/src/home/views/index.tsx +++ b/src/home/views/index.tsx @@ -20,8 +20,8 @@ const HomeSection = () => { const { data } = useHomePage({ displayLoader: true, - variables: { channel: channel?.slug }, - skip: false + skip: noChannel, + variables: { channel: channel?.slug } }); return ( From 7e14dea49a96281dcb257d00c3415011e1a88b77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Choi=C5=84ski?= Date: Tue, 12 Jan 2021 15:25:57 +0100 Subject: [PATCH 12/13] Fix undefined channel --- src/categories/views/CategoryDetails.tsx | 2 +- .../components/CollectionList/CollectionList.tsx | 16 +++++++++------- .../views/CollectionList/CollectionList.tsx | 2 +- .../components/SaleCreatePage/SaleCreatePage.tsx | 2 +- .../components/SaleSummary/SaleSummary.tsx | 6 +++--- .../components/VoucherSummary/VoucherSummary.tsx | 6 +++--- src/discounts/views/SaleList/SaleList.tsx | 2 +- .../views/VoucherDetails/VoucherDetails.tsx | 2 +- src/discounts/views/VoucherList/VoucherList.tsx | 2 +- .../views/OrderDraftList/OrderDraftList.tsx | 8 +++----- .../views/ProductUpdate/ProductUpdate.tsx | 2 +- 11 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/categories/views/CategoryDetails.tsx b/src/categories/views/CategoryDetails.tsx index 85949088a14..30a97ff0264 100644 --- a/src/categories/views/CategoryDetails.tsx +++ b/src/categories/views/CategoryDetails.tsx @@ -261,7 +261,7 @@ export const CategoryDetails: React.FC = ({ data.category.products.edges.map(edge => edge.node) )} saveButtonBarState={updateResult.status} - selectedChannelId={channel.id} + selectedChannelId={channel?.id} subcategories={maybe(() => data.category.children.edges.map(edge => edge.node) )} diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx index a42b4c57fc6..fd8cf3aea94 100644 --- a/src/collections/components/CollectionList/CollectionList.tsx +++ b/src/collections/components/CollectionList/CollectionList.tsx @@ -146,8 +146,8 @@ const CollectionList: React.FC = props => { collections, collection => { const isSelected = collection ? isChecked(collection.id) : false; - const channel = collection?.channelListings.find( - listing => listing.channel.id === selectedChannelId + const channel = collection?.channelListings?.find( + listing => listing?.channel?.id === selectedChannelId ); return ( = props => { {collection && !collection?.channelListings?.length ? ( "-" ) : collection?.channelListings !== undefined ? ( - + channel ? ( + + ) : null ) : ( )} diff --git a/src/collections/views/CollectionList/CollectionList.tsx b/src/collections/views/CollectionList/CollectionList.tsx index c91004e5d39..4e404ae7f60 100644 --- a/src/collections/views/CollectionList/CollectionList.tsx +++ b/src/collections/views/CollectionList/CollectionList.tsx @@ -184,7 +184,7 @@ export const CollectionList: React.FC = ({ params }) => { toggle={toggle} toggleAll={toggleAll} channelsCount={availableChannels?.length} - selectedChannelId={channel.id} + selectedChannelId={channel?.id} /> params.ids.length > 0)} diff --git a/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx b/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx index 1901e9a4031..b39100bd628 100644 --- a/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx +++ b/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx @@ -78,7 +78,7 @@ const SaleCreatePage: React.FC = ({ triggerChange ); const formDisabled = data.channelListings?.some(channel => - validatePrice(channel.discountValue) + validatePrice(channel?.discountValue) ); return ( diff --git a/src/discounts/components/SaleSummary/SaleSummary.tsx b/src/discounts/components/SaleSummary/SaleSummary.tsx index 08bca53afa7..bf77c571dc6 100644 --- a/src/discounts/components/SaleSummary/SaleSummary.tsx +++ b/src/discounts/components/SaleSummary/SaleSummary.tsx @@ -51,12 +51,12 @@ const SaleSummary: React.FC = ({ sale.type === SaleType.FIXED && channel?.discountValue ? ( ) : channel?.discountValue ? ( - + ) : ( "-" ) diff --git a/src/discounts/components/VoucherSummary/VoucherSummary.tsx b/src/discounts/components/VoucherSummary/VoucherSummary.tsx index d66c1837cbe..2e1233191a1 100644 --- a/src/discounts/components/VoucherSummary/VoucherSummary.tsx +++ b/src/discounts/components/VoucherSummary/VoucherSummary.tsx @@ -69,12 +69,12 @@ const VoucherSummary: React.FC = ({ channel?.discountValue ? ( ) : channel?.discountValue ? ( - + ) : ( "-" ) diff --git a/src/discounts/views/SaleList/SaleList.tsx b/src/discounts/views/SaleList/SaleList.tsx index f32a4271487..a71ee51a42e 100644 --- a/src/discounts/views/SaleList/SaleList.tsx +++ b/src/discounts/views/SaleList/SaleList.tsx @@ -199,7 +199,7 @@ export const SaleList: React.FC = ({ params }) => { } - selectedChannelId={channel.id} + selectedChannelId={channel?.id} /> = ({ ...(updateChannelsOpts.data ?.voucherChannelListingUpdate.errors || []) ]} - selectedChannelId={channel.id} + selectedChannelId={channel?.id} pageInfo={pageInfo} onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} diff --git a/src/discounts/views/VoucherList/VoucherList.tsx b/src/discounts/views/VoucherList/VoucherList.tsx index d4e72cdeba8..84c804ca785 100644 --- a/src/discounts/views/VoucherList/VoucherList.tsx +++ b/src/discounts/views/VoucherList/VoucherList.tsx @@ -200,7 +200,7 @@ export const VoucherList: React.FC = ({ params }) => { } - selectedChannelId={channel.id} + selectedChannelId={channel?.id} /> = ({ params }) => { tabName={maybe(() => tabs[currentTab - 1].name, "...")} /> ({ - label: channel.name, - value: channel.id - }))} + channelsChoices={mapNodeToChoice(availableChannels)} confirmButtonState="success" - defaultChoice={channel.id} + defaultChoice={channel?.id} open={params.action === "create-order"} onClose={closeModal} onConfirm={channel => diff --git a/src/products/views/ProductUpdate/ProductUpdate.tsx b/src/products/views/ProductUpdate/ProductUpdate.tsx index 9b1d67c0222..de155342504 100644 --- a/src/products/views/ProductUpdate/ProductUpdate.tsx +++ b/src/products/views/ProductUpdate/ProductUpdate.tsx @@ -423,7 +423,7 @@ export const ProductUpdate: React.FC = ({ id, params }) => { loading: searchCollectionsOpts.loading, onFetchMore: loadMoreCollections }} - selectedChannelId={channel.id} + selectedChannelId={channel?.id} openChannelsModal={handleChannelsModalOpen} onChannelsChange={setCurrentChannels} /> From 23cad8818636e17a974edd94d885abdac58b8f33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Choi=C5=84ski?= Date: Wed, 13 Jan 2021 10:08:42 +0100 Subject: [PATCH 13/13] Update storybook --- .../__snapshots__/Stories.test.ts.snap | 80 ++----------------- 1 file changed, 5 insertions(+), 75 deletions(-) diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 948719ea165..bbfeede454c 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -51858,21 +51858,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = ` class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id" data-test="availability" data-test-availability="true" - > -
-
-
- Available in 1/2 -
-
-
- + /> -
-
-
- Available in 1/2 -
-
-
- + /> -
-
-
- Available in 1/2 -
-
-
- + /> -
-
-
- Available in 1/2 -
-
-
- + /> -
-
-
- Available in 1/2 -
-
-
- + />