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;