diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 58e1c7967..6922d0453 100644 --- a/locale/defaultMessages.json +++ b/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" diff --git a/src/orders/components/OrderPayment/OrderPayment.tsx b/src/orders/components/OrderPayment/OrderPayment.tsx index bc1d42b9a..08042383a 100644 --- a/src/orders/components/OrderPayment/OrderPayment.tsx +++ b/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 = 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 = props => {
- {!!usedGiftCardAmount && ( + {!!usedGiftCardAmount && usedGiftcard && (
- + + {usedGiftcard.last4CodeChars} + + ), + }} + />
{ + if (!order) return null; + + const { giftCards } = order; + + if (giftCards.length > 0) { + return giftCards[0]; + } + + return null; +}; + export const extractOrderGiftCardUsedAmount = ( order?: OrderDetailsFragment, ): number | undefined => { diff --git a/src/orders/components/OrderSummaryCard/OrderSummaryCard.tsx b/src/orders/components/OrderSummaryCard/OrderSummaryCard.tsx index 4451b95c3..07d6befcc 100644 --- a/src/orders/components/OrderSummaryCard/OrderSummaryCard.tsx +++ b/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 = ({ order }) => { const intl = useIntl(); const giftCardAmount = extractOrderGiftCardUsedAmount(order); + const usedGiftcard = obtainUsedGifrcard(order); return ( @@ -79,7 +83,17 @@ const OrderSummaryCard: React.FC = ({ order }) => { {giftCardAmount > 0 && ( + + {" "} + {usedGiftcard.last4CodeChars} + + ), + }} + /> } negative money={{ diff --git a/src/orders/components/OrderSummaryCard/messages.ts b/src/orders/components/OrderSummaryCard/messages.ts index ca69448f7..16ad69fc5 100644 --- a/src/orders/components/OrderSummaryCard/messages.ts +++ b/src/orders/components/OrderSummaryCard/messages.ts @@ -96,8 +96,8 @@ export const orderSummaryMessages = defineMessages({ description: "order payment", }, paidWithGiftCard: { - id: "vM9quW", - defaultMessage: "Paid with Gift Card", + id: "yivxZJ", + defaultMessage: "Paid with Gift Card: ({link})", description: "order payment", }, negative: {