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/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[] ); } 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} ) : ( ({ + container: { + display: "flex", + alignItems: "center", + justifyContent: "center", + height: "100%", + width: "100%", + padding: theme.spacing + } + }), + { name: "ContentWithProgress" } +); + +const ContentWithProgress: React.FC = ({ + containerClassName, + children +}) => { + const classes = useStyles({}); + + return children ? ( + <>{children} + ) : ( +
+ +
+ ); +}; + +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 a29f67231..69adc15ff 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"; @@ -193,8 +194,7 @@ const Routes: React.FC = () => { component={CustomerSection} />