Skip to content

Commit

Permalink
Dependently render discount row
Browse files Browse the repository at this point in the history
  • Loading branch information
@tjwiebell
tjwiebell committed Nov 10, 2020
1 parent 41d2595 commit b8eb620
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 52 deletions.
111 changes: 111 additions & 0 deletions .../components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/orderTotal.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,116 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`should conditionally render discount row 1`] = `
<div>
<div>
<mock-FormattedMessage
defaultMessage="Order Total"
id="orderDetails.orderTotal"
/>
</div>
<div>
<span>
<mock-FormattedMessage
defaultMessage="Subtotal"
id="orderDetails.subtotal"
/>
</span>
<span>
<span>
$
</span>
<span>
1
</span>
<span>
,
</span>
<span>
234
</span>
<span>
.
</span>
<span>
00
</span>
</span>
</div>
<div>
<span>
<mock-FormattedMessage
defaultMessage="Tax"
id="orderDetails.tax"
/>
</span>
<span>
<span>
$
</span>
<span>
34
</span>
<span>
.
</span>
<span>
00
</span>
</span>
</div>
<div>
<span>
<mock-FormattedMessage
defaultMessage="Shipping"
id="orderDetails.shipping"
/>
</span>
<span>
<span>
$
</span>
<span>
12
</span>
<span>
.
</span>
<span>
00
</span>
</span>
</div>
<div>
<span>
<mock-FormattedMessage
defaultMessage="Total"
id="orderDetails.total"
/>
</span>
<span>
<span>
$
</span>
<span>
1
</span>
<span>
,
</span>
<span>
434
</span>
<span>
.
</span>
<span>
00
</span>
</span>
</div>
</div>
`;

exports[`should render properly 1`] = `
<div>
<div>
Expand Down
20 changes: 19 additions & 1 deletion packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/orderTotal.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,13 @@ const defaultProps = {
{
amount: {
currency: 'USD',
value: 123
value: 62
}
},
{
amount: {
currency: 'USD',
value: 61
}
}
],
Expand Down Expand Up @@ -37,3 +43,15 @@ test('should render properly', () => {

expect(tree.toJSON()).toMatchSnapshot();
});

test('should conditionally render discount row', () => {
const props = {
data: {
...defaultProps.data,
discounts: null
}
};
const tree = createTestInstance(<OrderTotal {...props} />);

expect(tree.toJSON()).toMatchSnapshot();
});
6 changes: 0 additions & 6 deletions packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
}

.heading {
grid-row: 1 / span 1;
font-weight: var(--venia-global-fontWeight-bold);
padding-bottom: 0.5rem;
}
Expand All @@ -16,35 +15,30 @@
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
grid-row: 2 / span 1;
}

.discount {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
grid-row: 3 / span 1;
}

.tax {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
grid-row: 4 / span 1;
}

.shipping {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
grid-row: 5 / span 1;
}

.total {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
grid-row: 6 / span 1;
font-weight: var(--venia-global-fontWeight-bold);
}

Expand Down
74 changes: 33 additions & 41 deletions packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useMemo } from 'react';
import { arrayOf, string, shape, number } from 'prop-types';
import { FormattedMessage } from 'react-intl';

Expand All @@ -7,31 +7,6 @@ import { mergeClasses } from '@magento/venia-ui/lib/classify';

import defaultClasses from './orderTotal.css';

const DEFAULT_AMOUNT = {
currency: 'USD',
value: 0
};

/**
* Reduces discounts array into a single amount.
*
* @param {Array} discounts
*/
const getDiscount = (discounts = []) => {
// discounts from data can be null
if (!discounts || !discounts.length) {
return DEFAULT_AMOUNT;
} else {
return {
currency: discounts[0].amount.currency,
value: discounts.reduce(
(acc, discount) => acc + discount.amount.value,
0
)
};
}
};

const OrderTotal = props => {
const { classes: propClasses, data } = props;
const {
Expand All @@ -42,7 +17,37 @@ const OrderTotal = props => {
total_shipping
} = data;
const classes = mergeClasses(defaultClasses, propClasses);
const totalDiscount = getDiscount(discounts);

const discountRowElement = useMemo(() => {
if (!discounts || !discounts.length) {
return null;
}

const discountTotal = {
currency: discounts[0].amount.currency,
value: discounts.reduce(
(acc, discount) => acc + discount.amount.value,
0
)
};

return (
<div className={classes.discount}>
<span>
<FormattedMessage
id="orderDetails.discount"
defaultMessage="Discount"
/>
</span>
<span>
<Price
value={discountTotal.value}
currencyCode={discountTotal.currency}
/>
</span>
</div>
);
}, [classes.discount, discounts]);

return (
<div className={classes.root}>
Expand All @@ -66,20 +71,7 @@ const OrderTotal = props => {
/>
</span>
</div>
<div className={classes.discount}>
<span>
<FormattedMessage
id="orderDetails.discount"
defaultMessage="Discount"
/>
</span>
<span>
<Price
value={totalDiscount.value}
currencyCode={totalDiscount.currency}
/>
</span>
</div>
{discountRowElement}
<div className={classes.tax}>
<span>
<FormattedMessage
Expand Down
6 changes: 2 additions & 4 deletions packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/shippingMethod.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,15 @@
}

.heading {
grid-row: 1 / span 1;
font-weight: var(--venia-global-fontWeight-bold);
padding-bottom: 0.375rem;
}

.method {
grid-row: 2 / span 1;
.method:empty {
display: none;
}

.tracking {
display: grid;
grid-row: 3 / span 1;
row-gap: 0.375rem;
}

0 comments on commit b8eb620

Please sign in to comment.