Add channel currency selection in gift card create dialog, also add loader

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<ContentWithProgressProps> = ({
+  containerClassName,
+  children
+}) => {
+  const classes = useStyles({});
+
+  return children ? (
+    (children as React.ReactElement)
+  ) : (
+    <div className={classNames(classes.container, containerClassName)}>
+      <CircularProgress />
+    </div>
+  );
+};
+
+export default ContentWithProgress;

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<GiftCardCreateDialogProps> = ({
   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<GiftCardCreateDialogProps> = ({
   return (
     <Dialog open={open} maxWidth="sm">
       <DialogTitle>{intl.formatMessage(messages.title)}</DialogTitle>
-      {cardCode ? (
-        <GiftCardCreateDialogCodeContent
-          cardCode={cardCode}
-          onClose={handleClose}
-        />
-      ) : (
-        <GiftCardCreateDialogForm
-          opts={createGiftCardOpts}
-          onClose={handleClose}
-          apiErrors={createGiftCardOpts?.data?.giftCardCreate?.errors}
-          onSubmit={handleSubmit}
-        />
-      )}
+      <ContentWithProgress>
+        {!loadingChannelCurrencies &&
+          (cardCode ? (
+            <GiftCardCreateDialogCodeContent
+              cardCode={cardCode}
+              onClose={handleClose}
+            />
+          ) : (
+            <GiftCardCreateDialogForm
+              channelCurrencies={channelCurrenciesData?.shop?.channelCurrencies}
+              opts={createGiftCardOpts}
+              onClose={handleClose}
+              apiErrors={createGiftCardOpts?.data?.giftCardCreate?.errors}
+              onSubmit={handleSubmit}
+            />
+          ))}
+      </ContentWithProgress>
     </Dialog>
   );
 };

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<GiftCardCreateDialogFormProps> = ({
   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<GiftCardCreateDialogFormProps> = ({
           isError={!!formErrors?.balance}
           helperText={getGiftCardErrorMessage(formErrors?.balance, intl)}
           change={change}
-          choices={mapSingleValueNodeToChoice(shop?.channelCurrencies)}
+          choices={mapSingleValueNodeToChoice(channelCurrencies)}
           containerClassName={classes.balanceContainer}
           textFieldProps={{
             type: "number",

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, {}>(
+  channelCurrencies
+);

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;
+}

src/index.tsx

@@ -152,7 +152,6 @@ const Routes: React.FC = () => {
   const homePageLoaded =
     channelLoaded &&
     isAuthenticated &&
-    hasToken &&
     !tokenAuthLoading &&
     !tokenVerifyLoading;