Merge pull request #1309 from mirumee/fix-gift-cards-currencies-select

Fix gift cards currencies select and some minor bugs

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,

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[]
   );
 }
 

src/components/Skeleton.tsx

@@ -42,7 +42,7 @@ const Skeleton: React.FC<SkeletonProps> = props => {
   const classes = useStyles(props);
 
   return children ? (
-    (children as React.ReactElement)
+    <>{children}</>
   ) : (
     <span
       data-test-id="skeleton"

src/giftCards/GiftCardCreateDialog/ContentWithProgress.tsx

@@ -0,0 +1,39 @@
+import { CircularProgress } from "@material-ui/core";
+import { makeStyles } from "@saleor/macaw-ui";
+import classNames from "classnames";
+import React from "react";
+
+interface ContentWithProgressProps {
+  containerClassName?: string;
+}
+
+export const useStyles = makeStyles(
+  theme => ({
+    container: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      width: "100%",
+      padding: theme.spacing
+    }
+  }),
+  { name: "ContentWithProgress" }
+);
+
+const ContentWithProgress: React.FC<ContentWithProgressProps> = ({
+  containerClassName,
+  children
+}) => {
+  const classes = useStyles({});
+
+  return children ? (
+    <>{children}</>
+  ) : (
+    <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

@@ -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}
               />
               <SectionRoute
-                /* add after backend adds the permission to schema */
-                // permissions={[]}
+                permissions={[PermissionEnum.MANAGE_GIFT_CARD]}
                 path={giftCardsSectionUrlName}
                 component={GiftCardSection}
               />