Display gift card on order (#4070)

* Link giftcard when was used in order

* Link giftcard when was used in order

* Messages

locale/defaultMessages.json

@@ -8250,10 +8250,6 @@
     "context": "button",
     "string": "Open in GraphiQL"
   },
-  "vM9quW": {
-    "context": "order payment",
-    "string": "Paid with Gift Card"
-  },
   "vN3qdA": {
     "context": "button",
     "string": "Undo"
@@ -8712,6 +8708,10 @@
   "yi1HSj": {
     "string": "({numberOfCharacters} of {maxCharacters} characters)"
   },
+  "yivxZJ": {
+    "context": "order payment",
+    "string": "Paid with Gift Card: ({link})"
+  },
   "ymo+cm": {
     "context": "voucher discount",
     "string": "All products"

src/orders/components/OrderPayment/OrderPayment.tsx

@@ -1,9 +1,11 @@
 import { Button } from "@dashboard/components/Button";
 import CardTitle from "@dashboard/components/CardTitle";
 import HorizontalSpacer from "@dashboard/components/HorizontalSpacer";
+import Link from "@dashboard/components/Link";
 import Money from "@dashboard/components/Money";
 import { Pill } from "@dashboard/components/Pill";
 import Skeleton from "@dashboard/components/Skeleton";
+import { giftCardPath } from "@dashboard/giftCards/urls";
 import {
   OrderAction,
   OrderDetailsFragment,
@@ -19,7 +21,11 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { transformPaymentStatus } from "../../../misc";
 import { orderPaymentMessages, paymentButtonMessages } from "./messages";
 import { useStyles } from "./styles";
-import { extractOrderGiftCardUsedAmount, extractRefundedAmount } from "./utils";
+import {
+  extractOrderGiftCardUsedAmount,
+  extractRefundedAmount,
+  obtainUsedGifrcard,
+} from "./utils";
 
 interface OrderPaymentProps {
   order: OrderDetailsFragment;
@@ -44,6 +50,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
   const payment = transformPaymentStatus(order?.paymentStatus, intl);
   const refundedAmount = extractRefundedAmount(order);
   const usedGiftCardAmount = extractOrderGiftCardUsedAmount(order);
+  const usedGiftcard = obtainUsedGifrcard(order);
 
   const getDeliveryMethodName = (order: OrderDetailsFragment) => {
     if (
@@ -208,9 +215,18 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
       <Divider />
       <CardContent className={classes.payments}>
         <div className={classes.root}>
-          {!!usedGiftCardAmount && (
+          {!!usedGiftCardAmount && usedGiftcard && (
             <div>
-              <FormattedMessage {...orderPaymentMessages.paidWithGiftCard} />
+              <FormattedMessage
+                {...orderPaymentMessages.paidWithGiftCard}
+                values={{
+                  link: (
+                    <Link href={giftCardPath(usedGiftcard.id)}>
+                      {usedGiftcard.last4CodeChars}
+                    </Link>
+                  ),
+                }}
+              />
               <div className={classes.leftmostRightAlignedElement}>
                 <Money
                   money={{

src/orders/components/OrderPayment/messages.ts

@@ -91,8 +91,8 @@ export const orderPaymentMessages = defineMessages({
     description: "order payment",
   },
   paidWithGiftCard: {
-    id: "vM9quW",
+    id: "yivxZJ",
-    defaultMessage: "Paid with Gift Card",
+    defaultMessage: "Paid with Gift Card: ({link})",
     description: "order payment",
   },
   includedInSubtotal: {

src/orders/components/OrderPayment/utils.ts

@@ -8,6 +8,18 @@ import {
 import { IMoney } from "@dashboard/utils/intl";
 import compact from "lodash/compact";
 
+export const obtainUsedGifrcard = (order?: OrderDetailsFragment) => {
+  if (!order) return null;
+
+  const { giftCards } = order;
+
+  if (giftCards.length > 0) {
+    return giftCards[0];
+  }
+
+  return null;
+};
+
 export const extractOrderGiftCardUsedAmount = (
   order?: OrderDetailsFragment,
 ): number | undefined => {

src/orders/components/OrderSummaryCard/OrderSummaryCard.tsx

@@ -1,11 +1,14 @@
 // @ts-strict-ignore
 import CardTitle from "@dashboard/components/CardTitle";
+import Link from "@dashboard/components/Link";
+import { giftCardPath } from "@dashboard/giftCards/urls";
 import { OrderDetailsFragment, OrderDiscountType } from "@dashboard/graphql";
 import { Card, CardContent } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import { obtainUsedGifrcard } from "../OrderPayment/utils";
 import { orderSummaryMessages } from "./messages";
 import SummaryLine from "./SummaryLine";
 import { SummaryList } from "./SummaryList";
@@ -41,6 +44,7 @@ const OrderSummaryCard: React.FC<OrderPaymentProps> = ({ order }) => {
   const intl = useIntl();
 
   const giftCardAmount = extractOrderGiftCardUsedAmount(order);
+  const usedGiftcard = obtainUsedGifrcard(order);
 
   return (
     <Card data-test-id="OrderSummaryCard">
@@ -79,7 +83,17 @@ const OrderSummaryCard: React.FC<OrderPaymentProps> = ({ order }) => {
           {giftCardAmount > 0 && (
             <SummaryLine
               text={
-                <FormattedMessage {...orderSummaryMessages.paidWithGiftCard} />
+                <FormattedMessage
+                  {...orderSummaryMessages.paidWithGiftCard}
+                  values={{
+                    link: (
+                      <Link href={giftCardPath(usedGiftcard.id)}>
+                        {" "}
+                        {usedGiftcard.last4CodeChars}
+                      </Link>
+                    ),
+                  }}
+                />
               }
               negative
               money={{

src/orders/components/OrderSummaryCard/messages.ts

@@ -96,8 +96,8 @@ export const orderSummaryMessages = defineMessages({
     description: "order payment",
   },
   paidWithGiftCard: {
-    id: "vM9quW",
+    id: "yivxZJ",
-    defaultMessage: "Paid with Gift Card",
+    defaultMessage: "Paid with Gift Card: ({link})",
     description: "order payment",
   },
   negative: {