diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/orderTotal.spec.js b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/orderTotal.spec.js
index b3871beeb3..f5fcbdcad3 100644
--- a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/orderTotal.spec.js
+++ b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/orderTotal.spec.js
@@ -9,7 +9,13 @@ const defaultProps = {
{
amount: {
currency: 'USD',
- value: 123
+ value: 62
+ }
+ },
+ {
+ amount: {
+ currency: 'USD',
+ value: 61
}
}
],
@@ -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(
);
+
+ expect(tree.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.css b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.css
index 49e2e30caf..b03659499c 100644
--- a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.css
+++ b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.css
@@ -7,7 +7,6 @@
}
.heading {
- grid-row: 1 / span 1;
font-weight: var(--venia-global-fontWeight-bold);
padding-bottom: 0.5rem;
}
@@ -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);
}
diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.js b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.js
index c52cbaae1d..e6e3724199 100644
--- a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.js
+++ b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.js
@@ -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';
@@ -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 {
@@ -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 (
+
+ );
+ }, [classes.discount, discounts]);
return (
@@ -66,20 +71,7 @@ const OrderTotal = props => {
/>
-
+ {discountRowElement}