diff --git a/packages/venia-ui/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/discountSummary.spec.js.snap b/packages/venia-ui/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/discountSummary.spec.js.snap index 4d19127097..f2541ae8cb 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/discountSummary.spec.js.snap +++ b/packages/venia-ui/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/discountSummary.spec.js.snap @@ -1,14 +1,38 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`renders "Discount applied" label if label data is empty 1`] = ` +Array [ + + Discounts applied + , + + - + + $ + + + 1 + + + . + + + 00 + + , +] +`; + exports[`renders accumulated discount value 1`] = ` Array [ - + Discounts applied , + Rebate + , + + - + + $ + + + 1 + + + . + + + 00 + + , +] +`; + exports[`renders discount summary line item correctly 1`] = ` Array [ - + Special rebate , { expect(tree.toJSON()).toMatchSnapshot(); }); + +test('renders discount label value from data ', () => { + const props = { + ...defaultProps, + data: [ + { + amount: { + value: 1, + currency: 'USD' + }, + label: 'Rebate' + } + ] + }; + const tree = createTestInstance(); + + expect(tree.toJSON()).toMatchSnapshot(); +}); + +test('renders "Discount applied" label if label data is empty', () => { + const props = { + ...defaultProps, + data: [ + { + amount: { + value: 1, + currency: 'USD' + } + } + ] + }; + const tree = createTestInstance(); + + expect(tree.toJSON()).toMatchSnapshot(); +}); diff --git a/packages/venia-ui/lib/components/CartPage/PriceSummary/discountSummary.js b/packages/venia-ui/lib/components/CartPage/PriceSummary/discountSummary.js index 3463d98a74..2853684e33 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceSummary/discountSummary.js +++ b/packages/venia-ui/lib/components/CartPage/PriceSummary/discountSummary.js @@ -1,5 +1,5 @@ import React, { Fragment } from 'react'; -import { FormattedMessage } from 'react-intl'; +import { useIntl } from 'react-intl'; import Price from '@magento/venia-ui/lib/components/Price'; import { useStyle } from '../../../classify'; @@ -22,6 +22,7 @@ const getDiscount = (discounts = []) => { return DEFAULT_AMOUNT; } else { return { + label: discounts[0].label, currency: discounts[0].amount.currency, value: discounts.reduce( (acc, discount) => acc + discount.amount.value, @@ -40,6 +41,14 @@ const getDiscount = (discounts = []) => { const DiscountSummary = props => { const classes = useStyle({}, props.classes); const discount = getDiscount(props.data); + const { formatMessage } = useIntl(); + + const label = discount.label + ? discount.label + : formatMessage({ + id: 'discountSummary.lineItemLabel', + defaultMessage: 'Discounts applied' + }); return discount.value ? ( @@ -47,10 +56,7 @@ const DiscountSummary = props => { className={classes.lineItemLabel} data-cy="PriceSummary-DiscountSummary-label" > - + {label} button) { background-color: hsl(205 004% 048%) !important; } + +:global(.venia-home-banner-text > div) { + flex-direction: unset !important; + justify-content: normal !important; +} + +@media (max-width: 960px) { + :global(.venia-home-banner-text > div) { + flex-direction: column !important; + justify-content: center !important; + } +}