Skip to content

Commit b5e947f

Browse files
mirekmmirekm
committed
Address code review feedback
1 parent c4c590e commit b5e947f

6 files changed

Lines changed: 198 additions & 12 deletions

File tree

‎src/orders/components/OrderHistory/ExtendedDiscountTimelineEvent/ExtendedDiscountTimelineEvent.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { type TitleElement } from "@dashboard/components/Timeline/TimelineEventH
33
import { toActor } from "@dashboard/components/Timeline/utils";
44
import { type OrderEventFragment, OrderEventsEnum } from "@dashboard/graphql";
55
import { Box, Text } from "@saleor/macaw-ui-next";
6+
import { type ReactNode } from "react";
67
import { defineMessages, useIntl } from "react-intl";
78

89
import { OrderHistoryDate } from "../OrderHistoryDate";
@@ -18,7 +19,7 @@ const messages = defineMessages({
1819

1920
interface ExtendedDiscountTimelineEventProps {
2021
event: OrderEventFragment;
21-
title?: React.ReactNode;
22+
title?: ReactNode;
2223
titleElements?: TitleElement[];
2324
isLastInGroup?: boolean;
2425
}

‎src/orders/components/OrderHistory/ExtendedDiscountTimelineEvent/index.tsx‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/orders/components/OrderHistory/ExtendedTimelineEvent.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,9 @@ const eventTypeToTitleKey: Partial<Record<OrderEventsEnum, keyof typeof titles>>
9090
[OrderEventsEnum.ORDER_LINE_DISCOUNT_UPDATED]: "orderLineDiscountUpdated",
9191
};
9292

93+
// Some timeline events intentionally do not map to a dedicated title in this component.
94+
const FALLBACK_TITLE_TEXT = "";
95+
9396
const localMessages = defineMessages({
9497
refundedAmount: {
9598
id: "nngeI3",
@@ -128,7 +131,7 @@ const ExtendedTimelineEvent = ({
128131

129132
if (isTimelineEventOfDiscountType(type)) {
130133
if (type === OrderEventsEnum.ORDER_LINE_DISCOUNT_UPDATED) {
131-
const productName = lines[0]?.itemName;
134+
const productName = lines?.[0]?.itemName;
132135
const isAdded = hasOrderLineDiscountWithNoPreviousValue(event);
133136
const messageDescriptor = isAdded
134137
? titles.orderLineDiscountAdded
@@ -168,7 +171,7 @@ const ExtendedTimelineEvent = ({
168171

169172
const titleKey = eventTypeToTitleKey[type];
170173
const titleMessage = titleKey ? titles[titleKey] : undefined;
171-
const titleText = titleMessage ? intl.formatMessage(titleMessage) : "";
174+
const titleText = titleMessage ? intl.formatMessage(titleMessage) : FALLBACK_TITLE_TEXT;
172175
const titleElement: TitleElement = { text: titleText };
173176

174177
const selectTitleElements = (): TitleElement[] => {
@@ -209,8 +212,8 @@ const ExtendedTimelineEvent = ({
209212
<OrderLineItem
210213
key={orderLine?.id ? `${id}-line-${orderLine.id}` : `${id}-line-${i}`}
211214
orderLine={orderLine}
212-
quantity={quantity}
213-
itemName={itemName}
215+
quantity={quantity ?? 0}
216+
fallbackItemName={itemName ?? "Product"}
214217
/>
215218
))}
216219
</>

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

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
import {
2+
DiscountValueTypeEnum,
3+
type OrderEventFragment,
4+
OrderEventsEnum,
5+
} from "@dashboard/graphql";
6+
import type { Meta, StoryObj } from "@storybook/react-vite";
7+
import type { ComponentType } from "react";
8+
import { MemoryRouter } from "react-router-dom";
9+
import { fn } from "storybook/test";
10+
11+
import { OrderHistory } from "./OrderHistory";
12+
13+
const baseDate = "2026-03-20T10:00:00.000Z";
14+
15+
const createEvent = (overrides: Partial<OrderEventFragment>): OrderEventFragment => ({
16+
__typename: "OrderEvent",
17+
id: "event-1",
18+
amount: null,
19+
shippingCostsIncluded: null,
20+
date: baseDate,
21+
email: null,
22+
emailType: null,
23+
invoiceNumber: null,
24+
message: null,
25+
quantity: null,
26+
transactionReference: null,
27+
type: OrderEventsEnum.OTHER,
28+
discount: null,
29+
relatedOrder: null,
30+
related: null,
31+
user: null,
32+
app: null,
33+
lines: null,
34+
...overrides,
35+
});
36+
37+
const lineDiscount = {
38+
__typename: "OrderEventDiscountObject" as const,
39+
valueType: DiscountValueTypeEnum.FIXED,
40+
value: 5,
41+
reason: "Seasonal adjustment",
42+
oldValueType: DiscountValueTypeEnum.FIXED,
43+
oldValue: 2,
44+
amount: {
45+
__typename: "Money" as const,
46+
amount: 5,
47+
currency: "USD",
48+
},
49+
oldAmount: {
50+
__typename: "Money" as const,
51+
amount: 2,
52+
currency: "USD",
53+
},
54+
};
55+
56+
const meta: Meta<typeof OrderHistory> = {
57+
title: "Orders/OrderHistory",
58+
component: OrderHistory,
59+
decorators: [
60+
(Story: ComponentType) => (
61+
<MemoryRouter>
62+
<Story />
63+
</MemoryRouter>
64+
),
65+
],
66+
argTypes: {
67+
history: { table: { disable: true } },
68+
onNoteAdd: { table: { disable: true } },
69+
onNoteUpdate: { table: { disable: true } },
70+
},
71+
args: {
72+
orderCurrency: "USD",
73+
onNoteAdd: fn(() => Promise.resolve(undefined)),
74+
onNoteUpdate: fn(() => Promise.resolve({})),
75+
onNoteUpdateLoading: false,
76+
},
77+
};
78+
79+
export default meta;
80+
type Story = StoryObj<typeof OrderHistory>;
81+
82+
export const OrderLineDiscountRemoved: Story = {
83+
args: {
84+
history: [
85+
createEvent({
86+
id: "event-order-line-discount-removed",
87+
type: OrderEventsEnum.ORDER_LINE_DISCOUNT_REMOVED,
88+
lines: [
89+
{
90+
__typename: "OrderEventOrderLineObject",
91+
discount: null,
92+
itemName: "Running Shoes / 42",
93+
orderLine: {
94+
__typename: "OrderLine",
95+
id: "line-1",
96+
productName: "Running Shoes",
97+
variantName: "Size 42",
98+
},
99+
quantity: 2,
100+
},
101+
],
102+
}),
103+
],
104+
},
105+
};
106+
107+
export const OrderLineDiscountUpdated: Story = {
108+
args: {
109+
history: [
110+
createEvent({
111+
id: "event-order-line-discount-updated",
112+
type: OrderEventsEnum.ORDER_LINE_DISCOUNT_UPDATED,
113+
lines: [
114+
{
115+
__typename: "OrderEventOrderLineObject",
116+
discount: lineDiscount,
117+
itemName: "T-Shirt / M",
118+
orderLine: {
119+
__typename: "OrderLine",
120+
id: "line-2",
121+
productName: "T-Shirt",
122+
variantName: "M",
123+
},
124+
quantity: 1,
125+
},
126+
],
127+
}),
128+
],
129+
},
130+
};
131+
132+
export const OrderDiscountAutomaticallyUpdated: Story = {
133+
args: {
134+
history: [
135+
createEvent({
136+
id: "event-order-discount-automatically-updated",
137+
type: OrderEventsEnum.ORDER_DISCOUNT_AUTOMATICALLY_UPDATED,
138+
discount: {
139+
...lineDiscount,
140+
reason: "Promotion rule recalculation",
141+
},
142+
}),
143+
],
144+
},
145+
};
146+
147+
export const DraftCreatedFromReplace: Story = {
148+
args: {
149+
history: [
150+
createEvent({
151+
id: "event-draft-created-from-replace",
152+
type: OrderEventsEnum.DRAFT_CREATED_FROM_REPLACE,
153+
relatedOrder: {
154+
__typename: "Order",
155+
id: "order-123",
156+
number: "123",
157+
},
158+
}),
159+
],
160+
},
161+
};
162+
163+
export const OrderLineDiscountRemovedWithoutProductData: Story = {
164+
args: {
165+
history: [
166+
createEvent({
167+
id: "event-order-line-discount-removed-fallback",
168+
type: OrderEventsEnum.ORDER_LINE_DISCOUNT_REMOVED,
169+
lines: [
170+
{
171+
__typename: "OrderEventOrderLineObject",
172+
discount: null,
173+
itemName: null,
174+
orderLine: null,
175+
quantity: null,
176+
},
177+
],
178+
}),
179+
],
180+
},
181+
};

‎src/orders/components/OrderHistory/OrderHistory.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,8 @@ const OrderHistory = ({
273273

274274
if (type === OrderEventsEnum.ORDER_LINE_DISCOUNT_REMOVED && lines?.length > 0) {
275275
const productLine = lines[0];
276-
const productName = productLine.orderLine?.productName || productLine.itemName;
276+
const productName =
277+
productLine.orderLine?.productName || productLine.itemName || "Product";
277278
const variantName = productLine.orderLine?.variantName;
278279
const displayName = variantName ? `${productName} (${variantName})` : productName;
279280

@@ -342,8 +343,8 @@ const OrderHistory = ({
342343
<OrderLineItem
343344
key={`${id}-line-${line.orderLine?.id || `${line.itemName}-${line.quantity}-${i}`}`}
344345
orderLine={line.orderLine}
345-
quantity={line.quantity}
346-
itemName={line.itemName}
346+
quantity={line.quantity ?? 0}
347+
fallbackItemName={line.itemName ?? "Product"}
347348
/>
348349
))}
349350
{hasRelatedOrder && (

‎src/orders/components/OrderHistory/OrderLineItem.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@ type EventLine = NonNullable<OrderEventFragment["lines"]>[number];
66
interface OrderLineItemProps {
77
orderLine: EventLine["orderLine"];
88
quantity: number;
9-
itemName: string;
9+
// Used when orderLine or orderLine.productName is missing.
10+
fallbackItemName: string;
1011
}
1112

12-
export const OrderLineItem = ({ orderLine, quantity, itemName }: OrderLineItemProps) => (
13+
export const OrderLineItem = ({ orderLine, quantity, fallbackItemName }: OrderLineItemProps) => (
1314
<Box display="flex" alignItems="center" justifyContent="space-between" gap={3}>
1415
<Box display="flex" flexDirection="column">
1516
<Text size={3} fontWeight="medium">
16-
{orderLine?.productName || itemName}
17+
{orderLine?.productName || fallbackItemName}
1718
</Text>
1819
{orderLine?.variantName && (
1920
<Text size={2} color="default2">

0 commit comments

Comments
 (0)