From 705df796d242a44ead9c82bc8bd781f7314f5c64 Mon Sep 17 00:00:00 2001
From: Magdalena Markusik <magdalena.markusik@mirumee.com>
Date: Mon, 20 Sep 2021 15:41:18 +0200
Subject: [PATCH] Add gift card expired status (#1412)

* Add gift card expiry status to gift card details provider WIP

* Add gift card expiry handling in gift card update page header

* Add gift card expiry handling to gift card update details tag section & refactor

* Add gift card expiry handling to gift card update details expiry date section

* Add gift card expiry handling to gift card update metadata fields, add disabled prop to metadata cards

* Add comment

* Add gift card expiry handling to gift card list & refactor

* Change back some parts because of change of requirements

* Extract messages

* Remove comments, fix wrong expiry label being displayed in gift card list
---
 locale/defaultMessages.json                   | 24 +++++---
 src/components/Metadata/MetadataCard.tsx      |  1 +
 .../GiftCardUpdateDetailsBalanceSection.tsx   |  2 +-
 .../GiftCardUpdateDetailsCard.tsx             | 34 +++++++----
 .../GiftCardUpdateDetailsCard/messages.ts     |  4 ++
 .../GiftCardUpdateDetailsCard/styles.ts       |  3 +
 .../GiftCardUpdateExpirySelect/messages.ts    |  4 ++
 .../GiftCardUpdateInfoCardContent.tsx         |  3 +-
 .../GiftCardEnableDisableSection.tsx          |  6 +-
 .../GiftCardUpdatePageHeader.tsx              | 59 +++++++++++--------
 .../GiftCardUpdatePageHeader/messages.ts      |  8 +++
 .../GiftCardDetailsProvider.tsx               |  6 +-
 .../GiftCardDetailsProvider/types.ts          |  7 +++
 .../GiftCardDetailsProvider/utils.ts          | 26 ++++++++
 src/giftCards/GiftCardUpdate/types.ts         |  2 +
 .../GiftCardsListTable/GiftCardsListTable.tsx | 55 ++++++++++++-----
 src/giftCards/GiftCardsList/messages.ts       |  4 --
 .../GiftCardListProvider.tsx                  |  9 ++-
 src/giftCards/GiftCardsList/queries.ts        | 21 ++++++-
 .../GiftCardsList/types/GiftCardList.ts       | 54 +++--------------
 .../GiftCardTagInput/GiftCardTagInput.tsx     | 44 +++++---------
 .../components/GiftCardTagInput/messages.ts   |  4 --
 src/utils/maps.ts                             |  1 +
 23 files changed, 229 insertions(+), 152 deletions(-)
 create mode 100644 src/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/types.ts
 create mode 100644 src/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/utils.ts

diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index bdef4229a..0edb01452 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -3546,10 +3546,18 @@
     "context": "GiftCardUpdateDetailsCard set balance button label",
     "string": "set balance"
   },
+  "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardUpdateDetailsCard_dot_tagInputLabel": {
+    "context": "GiftCardTagInput tag label",
+    "string": "Card Tag"
+  },
   "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardUpdateDetailsCard_dot_title": {
     "context": "GiftCardUpdateDetailsCard title",
     "string": "Details"
   },
+  "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardUpdateExpirySelect_dot_expiredOnLabel": {
+    "context": "GiftCarUpdateDetailsExpirySection expired on label",
+    "string": "Expired on {date}"
+  },
   "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardUpdateExpirySelect_dot_expiryDateCheckboxLabel": {
     "context": "GiftCarUpdateDetailsExpirySection expiry date checkbox label",
     "string": "Gift card expires"
@@ -3590,6 +3598,14 @@
     "context": "GiftCardUpdateInfoCard used by label",
     "string": "Used by"
   },
+  "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardUpdatePageHeader_dot_disabledStatusLabel": {
+    "context": "giftCardUpdatePageHeader disabled status label",
+    "string": "Disabled"
+  },
+  "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardUpdatePageHeader_dot_expiredStatusLabel": {
+    "context": "giftCardUpdatePageHeader expired status label",
+    "string": "Expired"
+  },
   "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardUpdatePageHeader_dot_resendButtonLabel": {
     "context": "giftCardUpdatePageHeader resendButtonLabel",
     "string": "Resend code"
@@ -3654,10 +3670,6 @@
     "context": "GiftCardsListHeader menu item settings",
     "string": "Export card codes"
   },
-  "src_dot_giftCards_dot_GiftCardsList_dot_giftCardDisabledLabel": {
-    "context": "GiftCardsListTable disabled label",
-    "string": "Disabled"
-  },
   "src_dot_giftCards_dot_GiftCardsList_dot_giftCardProduct": {
     "context": "GiftCardsListHeader alert",
     "string": "gift card product"
@@ -3754,10 +3766,6 @@
     "context": "checkbox label",
     "string": "Set gift card expiration period"
   },
-  "src_dot_giftCards_dot_components_dot_GiftCardTagInput_dot_label": {
-    "context": "GiftCardTagInput tag label",
-    "string": "Card Tag"
-  },
   "src_dot_giftCards_dot_components_dot_GiftCardTagInput_dot_placeholder": {
     "context": "GiftCardTagInput tag placeholder",
     "string": "Tag"
diff --git a/src/components/Metadata/MetadataCard.tsx b/src/components/Metadata/MetadataCard.tsx
index e2dabd4de..d394cdbf4 100644
--- a/src/components/Metadata/MetadataCard.tsx
+++ b/src/components/Metadata/MetadataCard.tsx
@@ -120,6 +120,7 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
                       />
                     )}
                   </Typography>
+
                   <Typography color="textSecondary">
                     <FormattedMessage
                       defaultMessage="Use the button below to add new metadata field"
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx
index d91334060..6b6470915 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx
@@ -33,7 +33,7 @@ const GiftCardUpdateDetailsBalanceSection: React.FC = () => {
           <HorizontalSpacer />
           /
           <HorizontalSpacer />
-          <Money money={initialBalance} />
+          <Money className={classes.balanceTotal} money={initialBalance} />
         </div>
       </div>
       <CardSpacer />
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx
index 25414a417..0d787ae3b 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx
@@ -1,4 +1,11 @@
-import { Button, Card, CardContent, Divider } from "@material-ui/core";
+import {
+  Button,
+  Card,
+  CardContent,
+  Divider,
+  Typography
+} from "@material-ui/core";
+import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
@@ -16,9 +23,8 @@ import { giftCardUpdateDetailsCardMessages as messages } from "./messages";
 const GiftCardUpdateDetailsCard: React.FC = () => {
   const intl = useIntl();
 
-  const { loading } = useGiftCardDetails();
+  const { loading, giftCard } = useGiftCardDetails();
   const { openSetBalanceDialog } = useGiftCardUpdateDialogs();
-
   const {
     change,
     data: { tag },
@@ -30,13 +36,16 @@ const GiftCardUpdateDetailsCard: React.FC = () => {
       <CardTitle
         title={intl.formatMessage(messages.title)}
         toolbar={
-          <Button
-            data-test-id="set-balance-button"
-            color="primary"
-            onClick={openSetBalanceDialog}
-          >
-            {intl.formatMessage(messages.setBalanceButtonLabel)}
-          </Button>
+          !loading &&
+          !giftCard?.isExpired && (
+            <Button
+              data-test-id="set-balance-button"
+              color="primary"
+              onClick={openSetBalanceDialog}
+            >
+              {intl.formatMessage(messages.setBalanceButtonLabel)}
+            </Button>
+          )
         }
       />
       <CardContent>
@@ -47,10 +56,13 @@ const GiftCardUpdateDetailsCard: React.FC = () => {
               <CardSpacer />
               <Divider />
               <CardSpacer />
+              <Typography>
+                {intl.formatMessage(messages.tagInputLabel)}
+              </Typography>
+              <VerticalSpacer />
               <GiftCardTagInput
                 error={formErrors?.tag}
                 name="tag"
-                withTopLabel
                 value={tag}
                 change={change}
               />
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/messages.ts b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/messages.ts
index fd6b70ccf..8e55b0e92 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/messages.ts
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/messages.ts
@@ -12,5 +12,9 @@ export const giftCardUpdateDetailsCardMessages = defineMessages({
   cardBalanceLabel: {
     defaultMessage: "Card Balance",
     description: "GiftCardUpdateDetailsCard card balance label"
+  },
+  tagInputLabel: {
+    defaultMessage: "Card Tag",
+    description: "GiftCardTagInput tag label"
   }
 });
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/styles.ts b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/styles.ts
index e0e54d1a6..545821bda 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/styles.ts
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/styles.ts
@@ -22,6 +22,9 @@ export const useGiftCardDetailsBalanceStyles = makeStyles(
       height: 28,
       borderRadius: 14,
       backgroundColor: theme.palette.primary.light
+    },
+    balanceTotal: {
+      color: theme.palette.text.secondary
     }
   }),
   { name: "GiftCardUpdateDetailsBalanceSection" }
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/messages.ts b/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/messages.ts
index b684596a4..a6a6fd5d9 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/messages.ts
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/messages.ts
@@ -8,5 +8,9 @@ export const giftCardExpirySelectMessages = defineMessages({
   expiryDateLabel: {
     defaultMessage: "Expiration date",
     description: "GiftCarUpdateDetailsExpirySection expiry date label"
+  },
+  expiredOnLabel: {
+    defaultMessage: "Expired on {date}",
+    description: "GiftCarUpdateDetailsExpirySection expired on label"
   }
 });
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateInfoCard/GiftCardUpdateInfoCardContent.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateInfoCard/GiftCardUpdateInfoCardContent.tsx
index ed82d52d6..853ec7812 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateInfoCard/GiftCardUpdateInfoCardContent.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateInfoCard/GiftCardUpdateInfoCardContent.tsx
@@ -16,10 +16,9 @@ import React from "react";
 import { MessageDescriptor, useIntl } from "react-intl";
 
 import useGiftCardDetails from "../providers/GiftCardDetailsProvider/hooks/useGiftCardDetails";
+import { PLACEHOLDER } from "../types";
 import { giftCardUpdateInfoCardMessages as messages } from "./messages";
 
-const PLACEHOLDER = "-";
-
 const GiftCardUpdateInfoCardContent: React.FC = () => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardEnableDisableSection.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardEnableDisableSection.tsx
index fef56f553..fb5fa3ac7 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardEnableDisableSection.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardEnableDisableSection.tsx
@@ -20,9 +20,13 @@ const GiftCardEnableDisableSection: React.FC = () => {
   const intl = useIntl();
 
   const {
-    giftCard: { id, isActive }
+    giftCard: { id, isActive, isExpired }
   } = useGiftCardDetails();
 
+  if (isExpired) {
+    return null;
+  }
+
   const onActivateCompleted = (data: GiftCardActivate) => {
     const errors = data?.giftCardActivate?.errors;
 
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx
index 3f6397b46..a15d16971 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx
@@ -25,42 +25,53 @@ const GiftCardUpdatePageHeader: React.FC = () => {
 
   const { openResendCodeDialog } = useGiftCardUpdateDialogs();
 
-  const { displayCode, isActive } = giftCard;
+  const { displayCode, isActive, isExpired } = giftCard;
 
   const title = intl.formatMessage(tableMessages.codeEndingWithLabel, {
     displayCode
   });
 
+  const getPageTitle = () => {
+    if (isExpired) {
+      return (
+        <PageTitleWithStatusChip
+          title={title}
+          statusLabel={intl.formatMessage(messages.expiredStatusLabel)}
+          statusType={StatusType.NEUTRAL}
+        />
+      );
+    }
+
+    if (!isActive) {
+      return (
+        <PageTitleWithStatusChip
+          title={title}
+          statusLabel={intl.formatMessage(messages.disabledStatusLabel)}
+          statusType={StatusType.ERROR}
+        />
+      );
+    }
+
+    return title;
+  };
+
   return (
     <>
       <Backlink onClick={navigateBack}>
         {intl.formatMessage(sectionNames.giftCards)}
       </Backlink>
-      <PageHeader
-        inline
-        title={
-          isActive ? (
-            title
-          ) : (
-            <PageTitleWithStatusChip
-              title={title}
-              statusLabel={intl.formatMessage(
-                tableMessages.giftCardDisabledLabel
-              )}
-              statusType={StatusType.ERROR}
-            />
-          )
-        }
-      >
+      <PageHeader inline title={getPageTitle()}>
         <GiftCardEnableDisableSection />
         <HorizontalSpacer />
-        <Button
-          color="primary"
-          variant="contained"
-          onClick={openResendCodeDialog}
-        >
-          {intl.formatMessage(messages.resendButtonLabel)}
-        </Button>
+        {!isExpired && (
+          <Button
+            color="primary"
+            variant="contained"
+            onClick={openResendCodeDialog}
+          >
+            {intl.formatMessage(messages.resendButtonLabel)}
+          </Button>
+        )}
       </PageHeader>
     </>
   );
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/messages.ts b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/messages.ts
index fd4dc2628..e0071f8ae 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/messages.ts
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/messages.ts
@@ -15,5 +15,13 @@ export const giftCardUpdatePageHeaderMessages = defineMessages({
   resendButtonLabel: {
     defaultMessage: "Resend code",
     description: "giftCardUpdatePageHeader resendButtonLabel"
+  },
+  expiredStatusLabel: {
+    defaultMessage: "Expired",
+    description: "giftCardUpdatePageHeader expired status label"
+  },
+  disabledStatusLabel: {
+    defaultMessage: "Disabled",
+    description: "giftCardUpdatePageHeader disabled status label"
   }
 });
diff --git a/src/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/GiftCardDetailsProvider.tsx b/src/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/GiftCardDetailsProvider.tsx
index d24f4dd5e..6aa8ea2f3 100644
--- a/src/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/GiftCardDetailsProvider.tsx
+++ b/src/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/GiftCardDetailsProvider.tsx
@@ -2,6 +2,8 @@ import React, { createContext } from "react";
 
 import { useGiftCardDetailsQuery } from "../../queries";
 import { GiftCardDetails_giftCard } from "../../types/GiftCardDetails";
+import { ExtendedGiftCard } from "./types";
+import { getExtendedGiftCard } from "./utils";
 
 interface GiftCardDetailsProviderProps {
   children: React.ReactNode;
@@ -9,7 +11,7 @@ interface GiftCardDetailsProviderProps {
 }
 
 export interface GiftCardDetailsConsumerProps {
-  giftCard: GiftCardDetails_giftCard;
+  giftCard: ExtendedGiftCard<GiftCardDetails_giftCard> | undefined;
   loading: boolean;
 }
 
@@ -27,7 +29,7 @@ const GiftCardDetailsProvider: React.FC<GiftCardDetailsProviderProps> = ({
   });
 
   const providerValues: GiftCardDetailsConsumerProps = {
-    giftCard: data?.giftCard,
+    giftCard: getExtendedGiftCard(data?.giftCard),
     loading
   };
 
diff --git a/src/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/types.ts b/src/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/types.ts
new file mode 100644
index 000000000..b64b6c5a8
--- /dev/null
+++ b/src/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/types.ts
@@ -0,0 +1,7 @@
+export type ExtendedGiftCard<T extends GiftCardBase> = T & {
+  isExpired: boolean;
+};
+
+export interface GiftCardBase {
+  expiryDate: string | undefined;
+}
diff --git a/src/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/utils.ts b/src/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/utils.ts
new file mode 100644
index 000000000..bd177865d
--- /dev/null
+++ b/src/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/utils.ts
@@ -0,0 +1,26 @@
+import moment from "moment";
+
+import { ExtendedGiftCard, GiftCardBase } from "./types";
+
+export function isGiftCardExpired<T extends GiftCardBase>(
+  giftCard: T
+): boolean {
+  if (!giftCard?.expiryDate) {
+    return false;
+  }
+
+  return moment(giftCard?.expiryDate).isBefore(moment());
+}
+
+export function getExtendedGiftCard<T extends GiftCardBase>(
+  giftCard?: T
+): ExtendedGiftCard<T> {
+  if (!giftCard) {
+    return undefined;
+  }
+
+  return {
+    ...giftCard,
+    isExpired: isGiftCardExpired(giftCard)
+  };
+}
diff --git a/src/giftCards/GiftCardUpdate/types.ts b/src/giftCards/GiftCardUpdate/types.ts
index 0fd7c8151..d13994de0 100644
--- a/src/giftCards/GiftCardUpdate/types.ts
+++ b/src/giftCards/GiftCardUpdate/types.ts
@@ -9,3 +9,5 @@ export enum GiftCardUpdatePageActionParamsEnum {
 export type GiftCardUpdatePageUrlQueryParams = Dialog<
   GiftCardUpdatePageActionParamsEnum
 >;
+
+export const PLACEHOLDER = "-";
diff --git a/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTable.tsx b/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTable.tsx
index bf8c09304..721b1b7d4 100644
--- a/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTable.tsx
+++ b/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTable.tsx
@@ -14,6 +14,7 @@ import Skeleton from "@saleor/components/Skeleton";
 import StatusChip from "@saleor/components/StatusChip";
 import { StatusType } from "@saleor/components/StatusChip/types";
 import { customerUrl } from "@saleor/customers/urls";
+import { PLACEHOLDER } from "@saleor/giftCards/GiftCardUpdate/types";
 import { giftCardUrl } from "@saleor/giftCards/urls";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { renderCollection } from "@saleor/misc";
@@ -21,6 +22,7 @@ import { productUrl } from "@saleor/products/urls";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import { giftCardUpdatePageHeaderMessages as giftCardStatusChipMessages } from "../../GiftCardUpdate/GiftCardUpdatePageHeader/messages";
 import { giftCardsListTableMessages as messages } from "../messages";
 import useGiftCardListDialogs from "../providers/GiftCardListDialogsProvider/hooks/useGiftCardListDialogs";
 import useGiftCardList from "../providers/GiftCardListProvider/hooks/useGiftCardList";
@@ -29,8 +31,6 @@ import { useTableStyles as useStyles } from "../styles";
 import GiftCardsListTableFooter from "./GiftCardsListTableFooter";
 import GiftCardsListTableHeader from "./GiftCardsListTableHeader";
 
-const PLACEHOLDER = "-";
-
 const GiftCardsListTable: React.FC = () => {
   const intl = useIntl();
   const classes = useStyles({});
@@ -43,6 +43,38 @@ const GiftCardsListTable: React.FC = () => {
   const redirectToGiftCardUpdate = (id: string) => () =>
     navigate(giftCardUrl(id));
 
+  const selectGiftCardStatusChip = ({
+    isActive,
+    isExpired
+  }: {
+    isActive: boolean;
+    isExpired: boolean;
+  }) => {
+    if (isExpired) {
+      return (
+        <StatusChip
+          size="md"
+          status={StatusType.NEUTRAL}
+          label={intl.formatMessage(
+            giftCardStatusChipMessages.expiredStatusLabel
+          )}
+        />
+      );
+    }
+
+    if (!isActive) {
+      return (
+        <StatusChip
+          size="md"
+          status={StatusType.ERROR}
+          label={intl.formatMessage(
+            giftCardStatusChipMessages.disabledStatusLabel
+          )}
+        />
+      );
+    }
+  };
+
   return (
     <Card>
       <ResponsiveTable>
@@ -59,7 +91,8 @@ const GiftCardsListTable: React.FC = () => {
               tag,
               isActive,
               product,
-              currentBalance
+              currentBalance,
+              isExpired
             }) => (
               <TableRow
                 onClick={redirectToGiftCardUpdate(id)}
@@ -80,18 +113,10 @@ const GiftCardsListTable: React.FC = () => {
                         displayCode
                       })}
                     </Typography>
-                    {!isActive && (
-                      <>
-                        <HorizontalSpacer spacing={2} />
-                        <StatusChip
-                          size="md"
-                          status={StatusType.ERROR}
-                          label={intl.formatMessage(
-                            messages.giftCardDisabledLabel
-                          )}
-                        />
-                      </>
-                    )}
+                    <>
+                      <HorizontalSpacer spacing={2} />
+                      {selectGiftCardStatusChip({ isActive, isExpired })}
+                    </>
                   </div>
                 </TableCell>
                 <TableCell>
diff --git a/src/giftCards/GiftCardsList/messages.ts b/src/giftCards/GiftCardsList/messages.ts
index d50a642f3..6faf6ccae 100644
--- a/src/giftCards/GiftCardsList/messages.ts
+++ b/src/giftCards/GiftCardsList/messages.ts
@@ -75,10 +75,6 @@ export const giftCardsListTableMessages = defineMessages({
     defaultMessage: "Code ending with {displayCode}",
     description: "GiftCardsListTable code ending with label"
   },
-  giftCardDisabledLabel: {
-    defaultMessage: "Disabled",
-    description: "GiftCardsListTable disabled label"
-  },
   noGiftCardsFound: {
     defaultMessage: "No gift cards found",
     description: "GiftCardsListTable no cards found title"
diff --git a/src/giftCards/GiftCardsList/providers/GiftCardListProvider/GiftCardListProvider.tsx b/src/giftCards/GiftCardsList/providers/GiftCardListProvider/GiftCardListProvider.tsx
index 47873708a..69c5e6c50 100644
--- a/src/giftCards/GiftCardsList/providers/GiftCardListProvider/GiftCardListProvider.tsx
+++ b/src/giftCards/GiftCardsList/providers/GiftCardListProvider/GiftCardListProvider.tsx
@@ -1,3 +1,5 @@
+import { ExtendedGiftCard } from "@saleor/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/types";
+import { getExtendedGiftCard } from "@saleor/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/utils";
 import useBulkActions, {
   UseBulkActionsProps
 } from "@saleor/hooks/useBulkActions";
@@ -28,7 +30,7 @@ interface GiftCardsListProviderProps {
 }
 
 export interface GiftCardListDataProps {
-  giftCards: GiftCardList_giftCards_edges_node[];
+  giftCards: Array<ExtendedGiftCard<GiftCardList_giftCards_edges_node>>;
   pageInfo: PageInfo;
   loading: boolean;
   params: GiftCardListUrlQueryParams;
@@ -73,8 +75,11 @@ export const GiftCardsListProvider: React.FC<GiftCardsListProviderProps> = ({
     variables: queryVariables
   });
 
+  const giftCards =
+    mapEdgesToItems(data?.giftCards)?.map(getExtendedGiftCard) || [];
+
   const providerValues: GiftCardsListConsumerProps = {
-    giftCards: mapEdgesToItems(data?.giftCards) || [],
+    giftCards,
     loading,
     isSelected,
     listElements,
diff --git a/src/giftCards/GiftCardsList/queries.ts b/src/giftCards/GiftCardsList/queries.ts
index 7efde8920..d8cce173a 100644
--- a/src/giftCards/GiftCardsList/queries.ts
+++ b/src/giftCards/GiftCardsList/queries.ts
@@ -3,19 +3,32 @@ import { fragmentMoney } from "@saleor/fragments/products";
 import makeQuery from "@saleor/hooks/makeQuery";
 import gql from "graphql-tag";
 
-import { giftCardDataFragment } from "../GiftCardUpdate/queries";
 import { GiftCardList, GiftCardListVariables } from "./types/GiftCardList";
 import { GiftCardProductsCount } from "./types/GiftCardProductsCount";
 
 export const giftCardList = gql`
   ${fragmentUserBase}
   ${fragmentMoney}
-  ${giftCardDataFragment}
   query GiftCardList($first: Int, $after: String, $last: Int, $before: String) {
     giftCards(first: $first, after: $after, before: $before, last: $last) {
       edges {
         node {
-          ...GiftCardData
+          id
+          usedByEmail
+          displayCode
+          isActive
+          expiryDate
+          product {
+            id
+            name
+          }
+          tag
+          usedBy {
+            ...UserBase
+          }
+          currentBalance {
+            ...Money
+          }
         }
       }
       pageInfo {
@@ -27,6 +40,7 @@ export const giftCardList = gql`
     }
   }
 `;
+
 export const useGiftCardListQuery = makeQuery<
   GiftCardList,
   GiftCardListVariables
@@ -42,6 +56,7 @@ export const giftCardProductsCount = gql`
     }
   }
 `;
+
 export const useGiftCardProductsCountQuery = makeQuery<
   GiftCardProductsCount,
   never
diff --git a/src/giftCards/GiftCardsList/types/GiftCardList.ts b/src/giftCards/GiftCardsList/types/GiftCardList.ts
index 0ab0abee9..4d6545846 100644
--- a/src/giftCards/GiftCardsList/types/GiftCardList.ts
+++ b/src/giftCards/GiftCardsList/types/GiftCardList.ts
@@ -7,25 +7,6 @@
 // GraphQL query operation: GiftCardList
 // ====================================================
 
-export interface GiftCardList_giftCards_edges_node_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface GiftCardList_giftCards_edges_node_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface GiftCardList_giftCards_edges_node_createdBy {
-  __typename: "User";
-  id: string;
-  firstName: string;
-  lastName: string;
-}
-
 export interface GiftCardList_giftCards_edges_node_product {
   __typename: "Product";
   id: string;
@@ -39,18 +20,6 @@ export interface GiftCardList_giftCards_edges_node_usedBy {
   lastName: string;
 }
 
-export interface GiftCardList_giftCards_edges_node_app {
-  __typename: "App";
-  id: string;
-  name: string | null;
-}
-
-export interface GiftCardList_giftCards_edges_node_initialBalance {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
 export interface GiftCardList_giftCards_edges_node_currentBalance {
   __typename: "Money";
   amount: number;
@@ -59,24 +28,15 @@ export interface GiftCardList_giftCards_edges_node_currentBalance {
 
 export interface GiftCardList_giftCards_edges_node {
   __typename: "GiftCard";
-  metadata: (GiftCardList_giftCards_edges_node_metadata | null)[];
-  privateMetadata: (GiftCardList_giftCards_edges_node_privateMetadata | null)[];
-  displayCode: string;
-  boughtInChannel: string | null;
-  createdBy: GiftCardList_giftCards_edges_node_createdBy | null;
-  product: GiftCardList_giftCards_edges_node_product | null;
-  usedBy: GiftCardList_giftCards_edges_node_usedBy | null;
-  usedByEmail: string | null;
-  createdByEmail: string | null;
-  app: GiftCardList_giftCards_edges_node_app | null;
-  created: any;
-  expiryDate: any | null;
-  lastUsedOn: any | null;
-  isActive: boolean;
-  initialBalance: GiftCardList_giftCards_edges_node_initialBalance | null;
-  currentBalance: GiftCardList_giftCards_edges_node_currentBalance | null;
   id: string;
+  usedByEmail: string | null;
+  displayCode: string;
+  isActive: boolean;
+  expiryDate: any | null;
+  product: GiftCardList_giftCards_edges_node_product | null;
   tag: string | null;
+  usedBy: GiftCardList_giftCards_edges_node_usedBy | null;
+  currentBalance: GiftCardList_giftCards_edges_node_currentBalance | null;
 }
 
 export interface GiftCardList_giftCards_edges {
diff --git a/src/giftCards/components/GiftCardTagInput/GiftCardTagInput.tsx b/src/giftCards/components/GiftCardTagInput/GiftCardTagInput.tsx
index 7e818bf00..265791c49 100644
--- a/src/giftCards/components/GiftCardTagInput/GiftCardTagInput.tsx
+++ b/src/giftCards/components/GiftCardTagInput/GiftCardTagInput.tsx
@@ -1,5 +1,3 @@
-import { Typography } from "@material-ui/core";
-import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import SingleAutocompleteSelectField, {
   SingleAutocompleteSelectFieldProps
 } from "@saleor/components/SingleAutocompleteSelectField";
@@ -24,12 +22,10 @@ interface GiftCardTagInputProps
   extends Pick<SingleAutocompleteSelectFieldProps, "name"> {
   change: FormChange;
   value: string;
-  withTopLabel?: boolean;
   error: GiftCardError;
 }
 
 const GiftCardTagInput: React.FC<GiftCardTagInputProps> = ({
-  withTopLabel = false,
   change,
   name,
   value,
@@ -47,30 +43,22 @@ const GiftCardTagInput: React.FC<GiftCardTagInputProps> = ({
   );
 
   return (
-    <>
-      {withTopLabel && (
-        <>
-          <Typography>{intl.formatMessage(messages.label)}</Typography>
-          <VerticalSpacer />
-        </>
-      )}
-      <SingleAutocompleteSelectField
-        error={!!error}
-        helperText={getGiftCardErrorMessage(error, intl)}
-        allowCustomValues
-        name={name || "giftCardTag"}
-        label={`${intl.formatMessage(
-          messages.placeholder
-        )} *${intl.formatMessage(commonMessages.optionalField)}`}
-        data-test-id="gift-card-tag-select-field"
-        value={value}
-        displayValue={value}
-        choices={choices}
-        fetchChoices={search}
-        onChange={change}
-        onFetchMore={loadMore}
-      />
-    </>
+    <SingleAutocompleteSelectField
+      error={!!error}
+      helperText={getGiftCardErrorMessage(error, intl)}
+      allowCustomValues
+      name={name || "giftCardTag"}
+      label={`${intl.formatMessage(messages.placeholder)} *${intl.formatMessage(
+        commonMessages.optionalField
+      )}`}
+      data-test-id="gift-card-tag-select-field"
+      value={value}
+      displayValue={value}
+      choices={choices}
+      fetchChoices={search}
+      onChange={change}
+      onFetchMore={loadMore}
+    />
   );
 };
 
diff --git a/src/giftCards/components/GiftCardTagInput/messages.ts b/src/giftCards/components/GiftCardTagInput/messages.ts
index 57ba26f01..305e9d8c8 100644
--- a/src/giftCards/components/GiftCardTagInput/messages.ts
+++ b/src/giftCards/components/GiftCardTagInput/messages.ts
@@ -1,10 +1,6 @@
 import { defineMessages } from "react-intl";
 
 export const giftCardTagInputMessages = defineMessages({
-  label: {
-    defaultMessage: "Card Tag",
-    description: "GiftCardTagInput tag label"
-  },
   placeholder: {
     defaultMessage: "Tag",
     description: "GiftCardTagInput tag placeholder"
diff --git a/src/utils/maps.ts b/src/utils/maps.ts
index 825796bb4..f9aaeb502 100644
--- a/src/utils/maps.ts
+++ b/src/utils/maps.ts
@@ -44,6 +44,7 @@ export function mapNodeToChoice<
   T extends ExtendedNode | Node,
   K extends ChoiceValue
 >(nodes: T[], getterFn: (node: T) => K): Array<SingleAutocompleteChoiceType<K>>;
+
 export function mapNodeToChoice<T extends ExtendedNode>(
   nodes: T[],
   getterFn?: (node: T) => any