Skip to content

Commit 1f1fd2a

Browse files
mirekmmirekm
committed
Merge branch 'main' into fix/line-discounts-discoverabilty
2 parents 40a4817 + 6cbec4c commit 1f1fd2a

12 files changed

Lines changed: 258 additions & 39 deletions

File tree

‎.changeset/khaki-tips-stop.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"saleor-dashboard": patch
3+
---
4+
5+
Fix displaying gift card payment method details in order view.

‎.changeset/old-books-travel.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"saleor-dashboard": patch
3+
---
4+
5+
Added support for displaying transactions' payment method details - for gift cards. Now both Saleor built-in gift cards and apps that reported gift card payment will have dedicated display in order view

‎.changeset/sweet-tables-start.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"saleor-dashboard": patch
3+
---
4+
5+
Tolerate checkoutSettings being undefined while the GraphQL query is still loading.

‎locale/defaultMessages.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1106,6 +1106,9 @@
11061106
"context": "modal button",
11071107
"string": "Upload URL"
11081108
},
1109+
"4X0ZI8": {
1110+
"string": "Gift card"
1111+
},
11091112
"4XhJY+": {
11101113
"context": "dialog header",
11111114
"string": "Add product from {channelName}"

‎src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
136136
deleteExpiredOrdersAfter: orderSettings?.deleteExpiredOrdersAfter,
137137
allowUnpaidOrders: orderSettings?.allowUnpaidOrders,
138138
defaultTransactionFlowStrategy: paymentSettings?.defaultTransactionFlowStrategy,
139-
allowLegacyGiftCardUse: checkoutSettings.allowLegacyGiftCardUse,
139+
allowLegacyGiftCardUse: checkoutSettings?.allowLegacyGiftCardUse,
140140
automaticallyCompleteCheckouts:
141141
checkoutSettings?.automaticallyCompleteFullyPaidCheckouts ?? false,
142142
automaticCompletionDelay: checkoutSettings?.automaticCompletionDelay ?? null,

‎src/fragments/orders.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -656,6 +656,13 @@ export const transactionItemFragment = gql`
656656
lastDigits
657657
}
658658
659+
fragment GiftCardPaymentMethodDetails on GiftCardPaymentMethodDetails {
660+
name
661+
brand
662+
lastChars
663+
isSaleorGiftcard
664+
}
665+
659666
fragment TransactionItem on TransactionItem {
660667
...TransactionBaseItem
661668
pspReference
@@ -677,9 +684,15 @@ export const transactionItemFragment = gql`
677684
... on CardPaymentMethodDetails {
678685
...CardPaymentMethodDetails
679686
}
687+
... on GiftCardPaymentMethodDetails {
688+
...GiftCardPaymentMethodDetails
689+
}
680690
... on OtherPaymentMethodDetails {
681691
...OtherPaymentMethodDetails
682692
}
693+
... on GiftCardPaymentMethodDetails {
694+
...GiftCardPaymentMethodDetails
695+
}
683696
}
684697
events {
685698
...TransactionEvent

‎src/graphql/hooks.generated.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1817,6 +1817,14 @@ export const CardPaymentMethodDetailsFragmentDoc = gql`
18171817
lastDigits
18181818
}
18191819
`;
1820+
export const GiftCardPaymentMethodDetailsFragmentDoc = gql`
1821+
fragment GiftCardPaymentMethodDetails on GiftCardPaymentMethodDetails {
1822+
name
1823+
brand
1824+
lastChars
1825+
isSaleorGiftcard
1826+
}
1827+
`;
18201828
export const OtherPaymentMethodDetailsFragmentDoc = gql`
18211829
fragment OtherPaymentMethodDetails on OtherPaymentMethodDetails {
18221830
name
@@ -1888,9 +1896,15 @@ export const TransactionItemFragmentDoc = gql`
18881896
... on CardPaymentMethodDetails {
18891897
...CardPaymentMethodDetails
18901898
}
1899+
... on GiftCardPaymentMethodDetails {
1900+
...GiftCardPaymentMethodDetails
1901+
}
18911902
... on OtherPaymentMethodDetails {
18921903
...OtherPaymentMethodDetails
18931904
}
1905+
... on GiftCardPaymentMethodDetails {
1906+
...GiftCardPaymentMethodDetails
1907+
}
18941908
}
18951909
events {
18961910
...TransactionEvent
@@ -1922,6 +1936,7 @@ export const TransactionItemFragmentDoc = gql`
19221936
}
19231937
${TransactionBaseItemFragmentDoc}
19241938
${CardPaymentMethodDetailsFragmentDoc}
1939+
${GiftCardPaymentMethodDetailsFragmentDoc}
19251940
${OtherPaymentMethodDetailsFragmentDoc}
19261941
${TransactionEventFragmentDoc}
19271942
${MoneyFragmentDoc}`;

‎src/graphql/types.generated.ts‎

Lines changed: 38 additions & 36 deletions
Large diffs are not rendered by default.

‎src/orders/components/OrderTransaction/OrderTransaction.stories.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,54 @@ export const WithOtherPaymentMethod: Story = {
168168
),
169169
};
170170

171+
export const WithSaleorGiftCardPaymentMethod: Story = {
172+
args: {
173+
transaction: {
174+
...transactions.chargeSuccess[0],
175+
index: 0,
176+
paymentMethodDetails: {
177+
__typename: "GiftCardPaymentMethodDetails",
178+
name: "Gift card",
179+
lastChars: "A34F",
180+
isSaleorGiftcard: true,
181+
brand: null,
182+
},
183+
},
184+
},
185+
};
186+
187+
export const WithExternalGiftCardPaymentMethod: Story = {
188+
args: {
189+
transaction: {
190+
...transactions.chargeSuccess[0],
191+
index: 0,
192+
paymentMethodDetails: {
193+
__typename: "GiftCardPaymentMethodDetails",
194+
name: "Gift card",
195+
lastChars: "X9K2",
196+
isSaleorGiftcard: false,
197+
brand: "givex",
198+
},
199+
},
200+
},
201+
};
202+
203+
export const WithExternalGiftCardNoBrand: Story = {
204+
args: {
205+
transaction: {
206+
...transactions.chargeSuccess[0],
207+
index: 0,
208+
paymentMethodDetails: {
209+
__typename: "GiftCardPaymentMethodDetails",
210+
name: "Gift card",
211+
lastChars: "B72M",
212+
isSaleorGiftcard: false,
213+
brand: null,
214+
},
215+
},
216+
},
217+
};
218+
171219
export const WithoutPaymentMethod: Story = {
172220
args: {
173221
transaction: {

‎src/orders/components/OrderTransaction/components/GiftCardPaymentMethod.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { getStaticUrl } from "@dashboard/config";
2+
import { type GiftCardPaymentMethodDetailsFragment } from "@dashboard/graphql";
3+
import { Box, Text } from "@saleor/macaw-ui-next";
4+
import { Gift } from "lucide-react";
5+
import { FormattedMessage } from "react-intl";
6+
7+
import icon from "./saleor-gift-card.svg";
8+
9+
const MASKED_GROUP = "****";
10+
const BRAND_LOGO_SIZE = 26;
11+
12+
const getPaymentMethodIconUrl = (fileName: string) =>
13+
`${getStaticUrl()}payment-methods/${fileName}.svg`;
14+
15+
const SaleorGiftCardIcon = () => (
16+
<Box
17+
width={6}
18+
height={4}
19+
borderRadius={2}
20+
borderStyle="solid"
21+
borderWidth={1}
22+
borderColor="default1"
23+
display="flex"
24+
alignItems="center"
25+
justifyContent="center"
26+
>
27+
<img src={icon} alt="Saleor Gift Card" title="Saleor Gift Card" />
28+
</Box>
29+
);
30+
31+
const ExternalGiftCardIcon = ({ brand }: { brand: string | null }) => {
32+
if (brand) {
33+
return (
34+
<img
35+
src={getPaymentMethodIconUrl("gift-card")}
36+
alt={brand}
37+
title={brand}
38+
height={BRAND_LOGO_SIZE}
39+
/>
40+
);
41+
}
42+
43+
return <Gift size={16} />;
44+
};
45+
46+
const formatGiftCardCode = (lastChars: string | null): string | null => {
47+
if (!lastChars) {
48+
return null;
49+
}
50+
51+
return `${MASKED_GROUP} ${lastChars}`;
52+
};
53+
54+
interface GiftCardPaymentMethodProps {
55+
details: GiftCardPaymentMethodDetailsFragment;
56+
}
57+
58+
export const GiftCardPaymentMethod = ({ details }: GiftCardPaymentMethodProps) => {
59+
const formattedCode = formatGiftCardCode(details.lastChars);
60+
61+
if (details.isSaleorGiftcard) {
62+
return (
63+
<Box display="flex" alignItems="center" gap={2}>
64+
<SaleorGiftCardIcon />
65+
<Text size={2} color="default2">
66+
Saleor Gift Card
67+
</Text>
68+
{formattedCode && (
69+
<Text size={2} color="default2">
70+
<code>{formattedCode}</code>
71+
</Text>
72+
)}
73+
</Box>
74+
);
75+
}
76+
77+
return (
78+
<Box display="flex" alignItems="center" gap={2}>
79+
<ExternalGiftCardIcon brand={details.brand} />
80+
<Text size={2} color="default2">
81+
{details.brand ?? <FormattedMessage defaultMessage="Gift card" id="4X0ZI8" />}
82+
</Text>
83+
{formattedCode && (
84+
<Text size={2} color="default2">
85+
<code>{formattedCode}</code>
86+
</Text>
87+
)}
88+
</Box>
89+
);
90+
};

0 commit comments

Comments
 (0)