From 9e50dd755e4be9de093d4f6c61691caa050684ea Mon Sep 17 00:00:00 2001 From: Magdalena Markusik Date: Thu, 19 Aug 2021 18:12:25 +0200 Subject: [PATCH 1/5] Fix auth token check for home page loading --- src/auth/AuthProvider.tsx | 2 +- src/index.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/auth/AuthProvider.tsx b/src/auth/AuthProvider.tsx index 974cee3f3..8acb73dcc 100644 --- a/src/auth/AuthProvider.tsx +++ b/src/auth/AuthProvider.tsx @@ -28,7 +28,7 @@ export const useAuth = () => { const isAuthenticated = !!user.user; return { - hasToken: !!getTokens(), + hasToken: !!getTokens().auth, isAuthenticated, tokenAuthLoading: user.tokenAuthLoading, tokenVerifyLoading: user.tokenVerifyLoading, diff --git a/src/index.tsx b/src/index.tsx index a29f67231..372fec523 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -144,6 +144,7 @@ const Routes: React.FC = () => { tokenVerifyLoading, user } = useAuth(); + const { channel } = useAppChannel(false); const channelLoaded = typeof channel !== "undefined"; @@ -151,6 +152,7 @@ const Routes: React.FC = () => { const homePageLoaded = channelLoaded && isAuthenticated && + hasToken && !tokenAuthLoading && !tokenVerifyLoading; @@ -193,8 +195,7 @@ const Routes: React.FC = () => { component={CustomerSection} /> From 874f20929eac6d3620f7e1d4c03398961f8cb511 Mon Sep 17 00:00:00 2001 From: Magdalena Markusik Date: Thu, 19 Aug 2021 18:38:50 +0200 Subject: [PATCH 2/5] Add channel currency selection in gift card create dialog, also add loader --- .../ContentWithProgress.tsx | 40 +++++++++++++++++++ .../GiftCardCreateDialog.tsx | 37 +++++++++++------ .../GiftCardCreateDialogForm.tsx | 11 +++-- src/giftCards/GiftCardCreateDialog/queries.ts | 15 +++++++ .../types/ChannelCurrencies.ts | 17 ++++++++ src/index.tsx | 1 - 6 files changed, 101 insertions(+), 20 deletions(-) create mode 100644 src/giftCards/GiftCardCreateDialog/ContentWithProgress.tsx create mode 100644 src/giftCards/GiftCardCreateDialog/queries.ts create mode 100644 src/giftCards/GiftCardCreateDialog/types/ChannelCurrencies.ts diff --git a/src/giftCards/GiftCardCreateDialog/ContentWithProgress.tsx b/src/giftCards/GiftCardCreateDialog/ContentWithProgress.tsx new file mode 100644 index 000000000..0587fc432 --- /dev/null +++ b/src/giftCards/GiftCardCreateDialog/ContentWithProgress.tsx @@ -0,0 +1,40 @@ +import { CircularProgress } from "@material-ui/core"; +import { makeStyles } from "@saleor/macaw-ui"; +import classNames from "classnames"; +import React from "react"; + +interface ContentWithProgressProps { + containerClassName?: string; + children: React.ReactNode | React.ReactNode[]; +} + +export const useStyles = makeStyles( + theme => ({ + container: { + display: "flex", + alignItems: "center", + justifyContent: "center", + height: "100%", + width: "100%", + padding: theme.spacing(3) + } + }), + { name: "ContentWithProgress" } +); + +const ContentWithProgress: React.FC = ({ + containerClassName, + children +}) => { + const classes = useStyles({}); + + return children ? ( + (children as React.ReactElement) + ) : ( +
+ +
+ ); +}; + +export default ContentWithProgress; diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialog.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialog.tsx index 7f652ec21..b50869ed4 100644 --- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialog.tsx +++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialog.tsx @@ -6,12 +6,14 @@ import commonErrorMessages from "@saleor/utils/errors/common"; import React, { useState } from "react"; import { useIntl } from "react-intl"; +import ContentWithProgress from "./ContentWithProgress"; import GiftCardCreateDialogCodeContent from "./GiftCardCreateDialogCodeContent"; import GiftCardCreateDialogForm, { GiftCardCreateFormData } from "./GiftCardCreateDialogForm"; import { giftCardCreateDialogMessages as messages } from "./messages"; import { useGiftCardCreateMutation } from "./mutations"; +import { useChannelCurrencies } from "./queries"; import { GiftCardCreate } from "./types/GiftCardCreate"; import { getGiftCardExpirySettingsInputData } from "./utils"; @@ -27,6 +29,11 @@ const GiftCardCreateDialog: React.FC = ({ const intl = useIntl(); const notify = useNotifier(); + const { + data: channelCurrenciesData, + loading: loadingChannelCurrencies + } = useChannelCurrencies({}); + const [cardCode, setCardCode] = useState(null); const onCompleted = (data: GiftCardCreate) => { @@ -94,19 +101,23 @@ const GiftCardCreateDialog: React.FC = ({ return ( {intl.formatMessage(messages.title)} - {cardCode ? ( - - ) : ( - - )} + + {!loadingChannelCurrencies && + (cardCode ? ( + + ) : ( + + ))} + ); }; diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx index 40096f59a..a6568eda8 100644 --- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx +++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx @@ -7,7 +7,6 @@ import { GiftCardError } from "@saleor/fragments/types/GiftCardError"; import GiftCardExpirySelect from "@saleor/giftCards/components/GiftCardExpirySelect"; import GiftCardTagInput from "@saleor/giftCards/components/GiftCardTagInput"; import useForm from "@saleor/hooks/useForm"; -import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import Label from "@saleor/orders/components/OrderHistory/Label"; @@ -49,20 +48,20 @@ interface GiftCardCreateDialogFormProps { apiErrors: GiftCardError[]; onSubmit: (data: GiftCardCreateFormData) => void; onClose: () => void; + channelCurrencies: string[]; } const GiftCardCreateDialogForm: React.FC = ({ onSubmit, opts, onClose, - apiErrors + apiErrors, + channelCurrencies }) => { const intl = useIntl(); const classes = useStyles({}); - const shop = useShop(); - // TEMP - const initialCurrency = shop?.channelCurrencies?.[0]; + const initialCurrency = channelCurrencies[0]; const [selectedCustomer, setSelectedCustomer] = useState< GiftCardCreateFormCustomer @@ -105,7 +104,7 @@ const GiftCardCreateDialogForm: React.FC = ({ isError={!!formErrors?.balance} helperText={getGiftCardErrorMessage(formErrors?.balance, intl)} change={change} - choices={mapSingleValueNodeToChoice(shop?.channelCurrencies)} + choices={mapSingleValueNodeToChoice(channelCurrencies)} containerClassName={classes.balanceContainer} textFieldProps={{ type: "number", diff --git a/src/giftCards/GiftCardCreateDialog/queries.ts b/src/giftCards/GiftCardCreateDialog/queries.ts new file mode 100644 index 000000000..cbfd98f57 --- /dev/null +++ b/src/giftCards/GiftCardCreateDialog/queries.ts @@ -0,0 +1,15 @@ +import makeQuery from "@saleor/hooks/makeQuery"; +import gql from "graphql-tag"; + +import { ChannelCurrencies } from "./types/ChannelCurrencies"; + +const channelCurrencies = gql` + query ChannelCurrencies { + shop { + channelCurrencies + } + } +`; +export const useChannelCurrencies = makeQuery( + channelCurrencies +); diff --git a/src/giftCards/GiftCardCreateDialog/types/ChannelCurrencies.ts b/src/giftCards/GiftCardCreateDialog/types/ChannelCurrencies.ts new file mode 100644 index 000000000..2b44c7d9d --- /dev/null +++ b/src/giftCards/GiftCardCreateDialog/types/ChannelCurrencies.ts @@ -0,0 +1,17 @@ +/* tslint:disable */ +/* eslint-disable */ +// @generated +// This file was automatically generated and should not be edited. + +// ==================================================== +// GraphQL query operation: ChannelCurrencies +// ==================================================== + +export interface ChannelCurrencies_shop { + __typename: "Shop"; + channelCurrencies: string[]; +} + +export interface ChannelCurrencies { + shop: ChannelCurrencies_shop; +} diff --git a/src/index.tsx b/src/index.tsx index 372fec523..69adc15ff 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -152,7 +152,6 @@ const Routes: React.FC = () => { const homePageLoaded = channelLoaded && isAuthenticated && - hasToken && !tokenAuthLoading && !tokenVerifyLoading; From 14e36db39918ae95b96b95396279079c832fbcd9 Mon Sep 17 00:00:00 2001 From: Magdalena Markusik Date: Fri, 20 Aug 2021 10:30:25 +0200 Subject: [PATCH 3/5] Refactor --- src/giftCards/GiftCardCreateDialog/ContentWithProgress.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/giftCards/GiftCardCreateDialog/ContentWithProgress.tsx b/src/giftCards/GiftCardCreateDialog/ContentWithProgress.tsx index 0587fc432..afbb27494 100644 --- a/src/giftCards/GiftCardCreateDialog/ContentWithProgress.tsx +++ b/src/giftCards/GiftCardCreateDialog/ContentWithProgress.tsx @@ -5,7 +5,6 @@ import React from "react"; interface ContentWithProgressProps { containerClassName?: string; - children: React.ReactNode | React.ReactNode[]; } export const useStyles = makeStyles( @@ -16,7 +15,7 @@ export const useStyles = makeStyles( justifyContent: "center", height: "100%", width: "100%", - padding: theme.spacing(3) + padding: theme.spacing } }), { name: "ContentWithProgress" } From 745b5d49ed74ef293cdda785b3b6ae41f4dd5414 Mon Sep 17 00:00:00 2001 From: Magdalena Markusik Date: Fri, 20 Aug 2021 10:55:04 +0200 Subject: [PATCH 4/5] Add option for left menu to display subitems based on their own permission, instead of parent permission --- src/components/AppLayout/menuStructure.ts | 43 +++++++++++++++++------ 1 file changed, 32 insertions(+), 11 deletions(-) diff --git a/src/components/AppLayout/menuStructure.ts b/src/components/AppLayout/menuStructure.ts index 9463d40c6..879caba09 100644 --- a/src/components/AppLayout/menuStructure.ts +++ b/src/components/AppLayout/menuStructure.ts @@ -50,30 +50,33 @@ function createMenuStructure(intl: IntlShape, user: User): SidebarMenuItem[] { ariaLabel: "products", label: intl.formatMessage(sectionNames.products), id: "products", - url: productListUrl() + url: productListUrl(), + permissions: [PermissionEnum.MANAGE_PRODUCTS] }, { ariaLabel: "categories", label: intl.formatMessage(sectionNames.categories), id: "categories", - url: categoryListUrl() + url: categoryListUrl(), + permissions: [PermissionEnum.MANAGE_PRODUCTS] }, { ariaLabel: "collections", label: intl.formatMessage(sectionNames.collections), id: "collections", - url: collectionListUrl() + url: collectionListUrl(), + permissions: [PermissionEnum.MANAGE_PRODUCTS] }, { ariaLabel: "giftCards", label: intl.formatMessage(sectionNames.giftCards), id: "giftCards", - url: giftCardsListUrl() + url: giftCardsListUrl(), + permissions: [PermissionEnum.MANAGE_GIFT_CARD] } ], iconSrc: catalogIcon, label: intl.formatMessage(commonMessages.catalog), - permissions: [PermissionEnum.MANAGE_PRODUCTS], id: "catalogue" }, { @@ -160,12 +163,30 @@ function createMenuStructure(intl: IntlShape, user: User): SidebarMenuItem[] { } ]; - return menuItems.filter( - menuItem => - !menuItem.permissions || - (user?.userPermissions || []).some(permission => - menuItem.permissions.includes(permission.code) - ) + const isMenuItemPermitted = (menuItem: FilterableMenuItem) => + !menuItem.permissions || + (user?.userPermissions || []).some(permission => + menuItem.permissions.includes(permission.code) + ); + + const getFilteredMenuItems = (menuItems: FilterableMenuItem[]) => + menuItems.filter(isMenuItemPermitted); + + return menuItems.reduce( + (resultItems: FilterableMenuItem[], menuItem: FilterableMenuItem) => { + const { children } = menuItem; + + if (!isMenuItemPermitted(menuItem)) { + return resultItems; + } + + const filteredChildren = children + ? getFilteredMenuItems(children) + : undefined; + + return [...resultItems, { ...menuItem, children: filteredChildren }]; + }, + [] as FilterableMenuItem[] ); } From b83a542b88c35d0d581f01064ff4862861e3728b Mon Sep 17 00:00:00 2001 From: Magdalena Markusik Date: Fri, 20 Aug 2021 12:54:23 +0200 Subject: [PATCH 5/5] Refactor --- src/components/Skeleton.tsx | 2 +- src/giftCards/GiftCardCreateDialog/ContentWithProgress.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx index 463ee22e1..dbbd1ba96 100644 --- a/src/components/Skeleton.tsx +++ b/src/components/Skeleton.tsx @@ -42,7 +42,7 @@ const Skeleton: React.FC = props => { const classes = useStyles(props); return children ? ( - (children as React.ReactElement) + <>{children} ) : ( = ({ const classes = useStyles({}); return children ? ( - (children as React.ReactElement) + <>{children} ) : (