Fix Gift Cards (#3352)

src/apps/components/MarketplaceAlert/MarketplaceAlert.tsx

@@ -1,5 +1,6 @@
 import { Typography } from "@material-ui/core";
 import { Alert } from "@saleor/macaw-ui";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -23,7 +24,7 @@ export const MarketplaceAlert: React.FC<MarketplaceAlertProps> = ({
   return (
     <Alert
       variant="warning"
-      className={classes.alert}
+      className={clsx(classes.alert, "remove-icon-background")}
       close={true}
       title={intl.formatMessage(msgs.marketplaceError)}
     >

src/components/DryRun/DryRun.tsx

@@ -102,7 +102,11 @@ const DryRun: React.FC<DryRunProps> = ({
         </DialogContentText>
 
         {!!unavailableObjects.length && (
-          <Alert variant="warning" close={false}>
+          <Alert
+            variant="warning"
+            close={false}
+            className="remove-icon-background"
+          >
             <Typography>
               {intl.formatMessage(messages.unavailableEvents)}
               <br />

src/giftCards/GiftCardsList/GiftCardListSearchAndFilters/GiftCardListSearchAndFilters.tsx

@@ -7,6 +7,7 @@ import { DEFAULT_INITIAL_SEARCH_DATA } from "@dashboard/config";
 import { giftCardListUrl } from "@dashboard/giftCards/urls";
 import { useGiftCardCurrenciesQuery } from "@dashboard/graphql";
 import { getSearchFetchMoreProps } from "@dashboard/hooks/makeTopLevelSearch/utils";
+import useLocalStorage from "@dashboard/hooks/useLocalStorage";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { maybe } from "@dashboard/misc";
 import useCustomerSearch from "@dashboard/searches/useCustomerSearch";
@@ -39,14 +40,12 @@ import {
 const GiftCardListSearchAndFilters: React.FC = () => {
   const navigate = useNavigator();
   const intl = useIntl();
+  const [selectedChannel] = useLocalStorage("channel", "");
 
   const { reset, params } = useGiftCardList();
 
-  const {
+  const { onClose, openSearchDeleteDialog, openSearchSaveDialog } =
-    onClose,
+    useGiftCardListDialogs();
-    openSearchDeleteDialog,
-    openSearchSaveDialog,
-  } = useGiftCardListDialogs();
 
   const defaultSearchVariables = {
     variables: { ...DEFAULT_INITIAL_SEARCH_DATA, first: 5 },
@@ -62,7 +61,13 @@ const GiftCardListSearchAndFilters: React.FC = () => {
     loadMore: fetchMoreProducts,
     search: searchProducts,
     result: searchProductsResult,
-  } = useProductSearch(defaultSearchVariables);
+  } = useProductSearch({
+    variables: {
+      ...DEFAULT_INITIAL_SEARCH_DATA,
+      first: 5,
+      channel: selectedChannel,
+    },
+  });
 
   const {
     loadMore: fetchMoreGiftCardTags,
@@ -70,10 +75,8 @@ const GiftCardListSearchAndFilters: React.FC = () => {
     result: searchGiftCardTagsResult,
   } = useGiftCardTagsSearch(defaultSearchVariables);
 
-  const {
+  const { data: giftCardCurrenciesData, loading: loadingGiftCardCurrencies } =
-    data: giftCardCurrenciesData,
+    useGiftCardCurrenciesQuery();
-    loading: loadingGiftCardCurrencies,
-  } = useGiftCardCurrenciesQuery();
 
   const filterOpts = getFilterOpts({
     params,
@@ -108,17 +111,14 @@ const GiftCardListSearchAndFilters: React.FC = () => {
   const tabs = getFilterTabs();
   const currentTab = getFiltersCurrentTab(params, tabs);
 
-  const [
+  const [changeFilters, resetFilters, handleSearchChange] =
-    changeFilters,
+    createFilterHandlers({
-    resetFilters,
+      createUrl: giftCardListUrl,
-    handleSearchChange,
+      getFilterQueryParam,
-  ] = createFilterHandlers({
+      navigate,
-    createUrl: giftCardListUrl,
+      params,
-    getFilterQueryParam,
+      cleanupFn: reset,
-    navigate,
+    });
-    params,
-    cleanupFn: reset,
-  });
 
   const handleTabChange = (tab: number) => {
     reset();

src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeaderAlert.tsx

@@ -1,4 +1,5 @@
 import { useGiftCardProductsCountQuery } from "@dashboard/graphql";
+import useLocalStorage from "@dashboard/hooks/useLocalStorage";
 import { Alert } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -8,11 +9,14 @@ import GiftCardsListHeaderAlertContent from "./GiftCardsListHeaderAlertContent";
 
 const GiftCardsListHeaderAlert: React.FC = () => {
   const intl = useIntl();
+  const [selectedChannel] = useLocalStorage("channel", "");
 
-  const {
+  const { data: giftCardProductsCount, loading: giftCardProductsCountLoading } =
-    data: giftCardProductsCount,
+    useGiftCardProductsCountQuery({
-    loading: giftCardProductsCountLoading,
+      variables: {
-  } = useGiftCardProductsCountQuery();
+        channel: selectedChannel,
+      },
+    });
 
   const giftCardProductTypesExist =
     giftCardProductsCount?.giftCardProductTypes.totalCount > 0;
@@ -29,6 +33,7 @@ const GiftCardsListHeaderAlert: React.FC = () => {
         title={intl.formatMessage(messages.noGiftCardsAlertTitle)}
         variant="warning"
         close={false}
+        className="remove-icon-background"
       >
         <GiftCardsListHeaderAlertContent
           giftCardProductTypesExist={giftCardProductTypesExist}

src/giftCards/GiftCardsList/queries.ts

@@ -62,11 +62,11 @@ export const giftCardTotalCount = gql`
 `;
 
 export const giftCardProductsCount = gql`
-  query GiftCardProductsCount {
+  query GiftCardProductsCount($channel: String!) {
     giftCardProductTypes: productTypes(filter: { kind: GIFT_CARD }) {
       totalCount
     }
-    giftCardProducts: products(filter: { giftCard: true }) {
+    giftCardProducts: products(filter: { giftCard: true }, channel: $channel) {
       totalCount
     }
   }

src/graphql/hooks.generated.ts

@@ -7784,11 +7784,11 @@ export type GiftCardTotalCountQueryHookResult = ReturnType<typeof useGiftCardTot
 export type GiftCardTotalCountLazyQueryHookResult = ReturnType<typeof useGiftCardTotalCountLazyQuery>;
 export type GiftCardTotalCountQueryResult = Apollo.QueryResult<Types.GiftCardTotalCountQuery, Types.GiftCardTotalCountQueryVariables>;
 export const GiftCardProductsCountDocument = gql`
-    query GiftCardProductsCount {
+    query GiftCardProductsCount($channel: String!) {
   giftCardProductTypes: productTypes(filter: {kind: GIFT_CARD}) {
     totalCount
   }
-  giftCardProducts: products(filter: {giftCard: true}) {
+  giftCardProducts: products(filter: {giftCard: true}, channel: $channel) {
     totalCount
   }
 }
@@ -7806,10 +7806,11 @@ export const GiftCardProductsCountDocument = gql`
  * @example
  * const { data, loading, error } = useGiftCardProductsCountQuery({
  *   variables: {
+ *      channel: // value for 'channel'
  *   },
  * });
  */
-export function useGiftCardProductsCountQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<Types.GiftCardProductsCountQuery, Types.GiftCardProductsCountQueryVariables>) {
+export function useGiftCardProductsCountQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.GiftCardProductsCountQuery, Types.GiftCardProductsCountQueryVariables>) {
         const options = {...defaultOptions, ...baseOptions}
         return ApolloReactHooks.useQuery<Types.GiftCardProductsCountQuery, Types.GiftCardProductsCountQueryVariables>(GiftCardProductsCountDocument, options);
       }
@@ -13734,8 +13735,13 @@ export type SearchPermissionGroupsQueryHookResult = ReturnType<typeof useSearchP
 export type SearchPermissionGroupsLazyQueryHookResult = ReturnType<typeof useSearchPermissionGroupsLazyQuery>;
 export type SearchPermissionGroupsQueryResult = Apollo.QueryResult<Types.SearchPermissionGroupsQuery, Types.SearchPermissionGroupsQueryVariables>;
 export const SearchProductsDocument = gql`
-    query SearchProducts($after: String, $first: Int!, $query: String!) {
+    query SearchProducts($after: String, $first: Int!, $query: String!, $channel: String) {
-  search: products(after: $after, first: $first, filter: {search: $query}) {
+  search: products(
+    after: $after
+    first: $first
+    filter: {search: $query}
+    channel: $channel
+  ) {
     edges {
       node {
         id
@@ -13787,6 +13793,7 @@ export const SearchProductsDocument = gql`
  *      after: // value for 'after'
  *      first: // value for 'first'
  *      query: // value for 'query'
+ *      channel: // value for 'channel'
  *   },
  * });
  */

src/graphql/types.generated.ts

@@ -8161,7 +8161,9 @@ export type GiftCardTotalCountQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type GiftCardTotalCountQuery = { __typename: 'Query', giftCards: { __typename: 'GiftCardCountableConnection', totalCount: number | null } | null };
 
-export type GiftCardProductsCountQueryVariables = Exact<{ [key: string]: never; }>;
+export type GiftCardProductsCountQueryVariables = Exact<{
+  channel: Scalars['String'];
+}>;
 
 
 export type GiftCardProductsCountQuery = { __typename: 'Query', giftCardProductTypes: { __typename: 'ProductTypeCountableConnection', totalCount: number | null } | null, giftCardProducts: { __typename: 'ProductCountableConnection', totalCount: number | null } | null };
@@ -9283,6 +9285,7 @@ export type SearchProductsQueryVariables = Exact<{
   after?: InputMaybe<Scalars['String']>;
   first: Scalars['Int'];
   query: Scalars['String'];
+  channel?: InputMaybe<Scalars['String']>;
 }>;
 
 

src/orders/components/OrderDraftPage/OrderDraftAlert.tsx

@@ -1,6 +1,7 @@
 import { ChannelUsabilityDataQuery } from "@dashboard/graphql";
 import { OrderSharedType } from "@dashboard/orders/types";
 import { Alert, AlertProps } from "@saleor/macaw-ui";
+import clsx from "clsx";
 import React from "react";
 import { MessageDescriptor, useIntl } from "react-intl";
 
@@ -52,7 +53,12 @@ const OrderDraftAlert: React.FC<OrderDraftAlertProps> = props => {
   }
 
   return (
-    <Alert variant="warning" close className={classes.root} {...alertProps}>
+    <Alert
+      variant="warning"
+      close
+      className={clsx(classes.root, "remove-icon-background")}
+      {...alertProps}
+    >
       <OrderAlerts
         alerts={alerts}
         alertsHeader={intl.formatMessage(alertMessages.manyAlerts)}

src/searches/useProductSearch.ts

@@ -7,8 +7,18 @@ import {
 import makeTopLevelSearch from "@dashboard/hooks/makeTopLevelSearch";
 
 export const searchProducts = gql`
-  query SearchProducts($after: String, $first: Int!, $query: String!) {
+  query SearchProducts(
-    search: products(after: $after, first: $first, filter: { search: $query }) {
+    $after: String
+    $first: Int!
+    $query: String!
+    $channel: String
+  ) {
+    search: products(
+      after: $after
+      first: $first
+      filter: { search: $query }
+      channel: $channel
+    ) {
       edges {
         node {
           id