Skip to content

Fix visual regressions on refund with line items view #5951

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
witoszekdev merged 19 commits into from
Oct 9, 2025
Merged

Fix visual regressions on refund with line items view #5951

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
9b385bb
Fix warning missing margin
witoszekdev Oct 7, 2025
d12251d
Fix box missing spacing
witoszekdev Oct 7, 2025
6e270c2
Use smaller gap, reuse component
witoszekdev Oct 7, 2025
7201b7f
Optically align checkbox
witoszekdev Oct 7, 2025
2c78039
Add possibility to override layout breakpoints
witoszekdev Oct 8, 2025
0204de8
Use custom breakpoints for OrderTransactionRefundPage
witoszekdev Oct 8, 2025
4afa890
Refactor transaction grid to avoid overflows
witoszekdev Oct 8, 2025
8c03254
Fix broken sidebar when customized
witoszekdev Oct 8, 2025
f5966c2
Add proper scroll to order transaction tiles
witoszekdev Oct 9, 2025
90c2c2b
Fix rendering bugs on firefox
witoszekdev Oct 9, 2025
434e95c
Add better paddings
witoszekdev Oct 9, 2025
d171c43
Add changeset
witoszekdev Oct 9, 2025
0b34981
CR: remove !important
witoszekdev Oct 9, 2025
3ebbd15
CR: use css variables and add comments
witoszekdev Oct 9, 2025
e20aa93
CR: Add better explanation
witoszekdev Oct 9, 2025
4dec10a
Merge branch 'main' into eng-838-fix-visual-regressions
witoszekdev Oct 9, 2025
1a2a9c9
CR: remove empty divs
witoszekdev Oct 9, 2025
829aa31
Fix failing tests
witoszekdev Oct 9, 2025
9d6cdb9
Merge branch 'main' into eng-838-fix-visual-regressions
witoszekdev Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/orders/components/OrderManualTransactionRefundPage/OrderManualTransactionRefundPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export const OrderManualTransactionRefundPage = ({
<Box marginBottom={"auto"}>
<Reason />
</Box>
<DashboardCard.Content>
<DashboardCard.Content marginTop={4}>
<OrderManualTransactionRefundWarning />
</DashboardCard.Content>
</Box>
Expand Down
5 changes: 2 additions & 3 deletions src/orders/components/OrderTransactionRefundPage/OrderTransactionRefundPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,17 +290,16 @@ const OrderTransactionRefundPage = ({
<OrderTransactionTiles transactions={order?.transactions} control={control} />
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<Box __width="400px" display="flex" flexDirection="column" height="100%">
<Box __width="400px" display="flex" flexDirection="column" height="100%" gap={8}>
<OrderTransactionSummary
amountError={amountError || formErrors.amount}
control={control}
selectedProductsValue={selectedProductsValue}
canRefundShipping={canRefundShipping(order, draftRefund)}
shippingCost={order?.shippingPrice.gross}
currency={order?.total.gross.currency}
marginBottom={12}
/>
<Box marginBottom={12}>
<Box>
<DashboardCard>
<DashboardCard.Header>
<DashboardCard.Title>Refund reason</DashboardCard.Title>
Expand Down
115 changes: 67 additions & 48 deletions ...ransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,21 @@ interface OrderTransactionSummaryProps extends BoxProps {
currency: string | undefined;
}

// For usage in grid that exceeds our 16px padding for full background line
const FullWidthLine = () => {
return (
<Box gridColumn="full" position="relative">
<Box
borderBottomStyle="solid"
borderBottomWidth={1}
borderColor="default1"
position="absolute"
style={{ left: -16, right: -16, bottom: 0, height: "1px" }}
/>
</Box>
);
};

export const OrderTransactionSummary = ({
amountError,
control,
Expand Down Expand Up @@ -49,38 +64,36 @@ export const OrderTransactionSummary = ({
<Text as="p">
<FormattedMessage {...messages.amountDescription} />
</Text>
<Box display="flex" flexDirection="column" backgroundColor="default2" borderRadius={3}>
<Box backgroundColor="default2" borderRadius={3} padding={4}>
<Box
display="flex"
justifyContent="space-between"
display="grid"
__columnGap="6px"
rowGap={4}
__gridTemplateColumns="auto 1fr auto"
alignItems="center"
borderBottomStyle="solid"
borderBottomWidth={1}
borderColor="default1"
paddingY={4}
>
<Text size={3}>
{/* Selected products row - no checkbox */}
<Text gridColumnStart="2" size={3}>
<FormattedMessage {...messages.selectedProducts} />
</Text>
{currency ? (
<Money money={{ currency, amount: selectedProductsValue }} />
) : (
<Box display="flex" width={20}>
<Skeleton />
</Box>
)}
</Box>
<Box
display="flex"
justifyContent="space-between"
alignItems="center"
borderBottomStyle="solid"
borderBottomWidth={1}
borderColor="default1"
paddingY={4}
>
<Box display="flex" justifyContent="flex-end">
{currency ? (
<Money money={{ currency, amount: selectedProductsValue }} />
) : (
<Box display="flex" width={20}>
<Skeleton />
</Box>
)}
</Box>

<FullWidthLine />

{canRefundShipping ? (
<Checkbox checked={shippingField.value} onCheckedChange={shippingField.onChange}>
<Checkbox
display="contents"
checked={shippingField.value}
onCheckedChange={shippingField.onChange}
>
<Text size={3}>
<FormattedMessage {...messages.shipping} />
</Text>
Expand All @@ -89,6 +102,7 @@ export const OrderTransactionSummary = ({
<Tooltip>
<Tooltip.Trigger>
<Checkbox
display="contents"
disabled
checked={shippingField.value}
onCheckedChange={shippingField.onChange}
Expand All @@ -105,21 +119,20 @@ export const OrderTransactionSummary = ({
</Tooltip.Content>
</Tooltip>
)}
{shippingCost ? (
<Money money={shippingCost} />
) : (
<Box display="flex" width={20}>
<Skeleton />
</Box>
)}
</Box>
<Box
display="flex"
justifyContent="space-between"
paddingTop={4}
paddingBottom={amountError ? 2 : 4}
>
<Text size={5} display="flex" alignItems="center">
<Box display="flex" justifyContent="flex-end">
{shippingCost ? (
<Money money={shippingCost} />
) : (
<Box display="flex" width={20}>
<Skeleton />
</Box>
)}
</Box>

<FullWidthLine />

{/* Total row */}
<Text gridColumnStart="2" size={5}>
<FormattedMessage {...messages.totalAmount} />
</Text>
<Input
Expand All @@ -131,14 +144,20 @@ export const OrderTransactionSummary = ({
__width={100}
endAdornment={currency}
/>

{/* Error message */}
{!!amountError && (
<>
<Box />
<Box />
<Box textAlign="right">
<Text color="critical1" size={1}>
{amountError.message}
</Text>
</Box>
</>
)}
</Box>
{!!amountError && (
<Box textAlign="right" paddingBottom={4}>
<Text color="critical1" size={1}>
{amountError.message}
</Text>
</Box>
)}
</Box>
</DashboardCard.Content>
</DashboardCard>
Expand Down
Loading