Skip to content

CIF-1154 - Support discounts in shopping cart #207

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
dplaton merged 6 commits into from
Feb 21, 2020
Merged

CIF-1154 - Support discounts in shopping cart #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e93924c
CIF-1154 - Show discounts and discounted prices in shopping cart
herzog31 Feb 20, 2020
6496866
CIF-1154 - Update unit tests
herzog31 Feb 20, 2020
53ed069
Merge branch 'master' into issue/CIF-1154
herzog31 Feb 20, 2020
0784908
CIF-1154 - Fix checkout pricing
herzog31 Feb 21, 2020
f0ac77b
Merge branch 'master' into issue/CIF-1154
herzog31 Feb 21, 2020
4b3fded
Merge branch 'master' into issue/CIF-1154
dplaton Feb 21, 2020
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
62 changes: 62 additions & 0 deletions react-components/src/components/Minicart/__test__/__snapshots__/discountList.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<DiscountList /> renders the component 1`] = `
<DocumentFragment>
<div
class="root"
>
<div
class="item"
>
<span>
20% off for 3 or more
</span>
<span
class="price"
>
<span>
-
</span>
<span>
$
</span>
<span>
36
</span>
<span>
.
</span>
<span>
40
</span>
</span>
</div>
<div
class="item"
>
<span>
10% off coupon
</span>
<span
class="price"
>
<span>
-
</span>
<span>
$
</span>
<span>
14
</span>
<span>
.
</span>
<span>
56
</span>
</span>
</div>
</div>
</DocumentFragment>
`;
20 changes: 20 additions & 0 deletions react-components/src/components/Minicart/__test__/__snapshots__/product.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,26 @@ exports[`<Product /> renders the component 1`] = `
</span>
</span>
</div>
<div
class="rowTotalRow"
>
<span
class="rowTotal"
>
<span>
$
</span>
<span>
22
</span>
<span>
.
</span>
<span>
00
</span>
</span>
</div>
</div>
<div
class="root"
Expand Down
18 changes: 10 additions & 8 deletions react-components/src/components/Minicart/__test__/cartOptions.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,18 @@ describe('<CartOptions>', () => {
editItem: {
id: '123',
quantity: 2,
product: {
name: 'Dummy product',
prices: {
price: {
regularPrice: {
amount: {
value: 100,
currency: 'USD'
}
}
currency: 'USD',
value: 100
},
row_total: {
currency: 'USD',
value: 100
}
},
product: {
name: 'Dummy product'
}
}
};
Expand Down
41 changes: 41 additions & 0 deletions react-components/src/components/Minicart/__test__/discountList.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/*******************************************************************************
*
* Copyright 2019 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
******************************************************************************/
import React from 'react';
import DiscountList from '../discountList';
import { render } from '@testing-library/react';

const discounts = [
{
amount: {
currency: 'USD',
value: 36.4
},
label: '20% off for 3 or more'
},
{
amount: {
currency: 'USD',
value: 14.56
},
label: '10% off coupon'
}
];

describe('<DiscountList />', () => {
it('renders the component', () => {
const { asFragment } = render(<DiscountList discounts={discounts} />);

expect(asFragment()).toMatchSnapshot();
});
});
16 changes: 9 additions & 7 deletions react-components/src/components/Minicart/__test__/product.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,16 @@ const mockCartItem = {
thumbnail: {
url: '/some/url'
},
name,
name
},
prices: {
price: {
regularPrice: {
amount: {
value: 22,
currency: 'USD'
}
}
currency: 'USD',
value: 22
},
row_total: {
currency: 'USD',
value: 22
}
},
quantity: 2,
Expand Down
32 changes: 18 additions & 14 deletions react-components/src/components/Minicart/__test__/productlist.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,16 @@ describe('<ProductList>', () => {
thumbnail: {
url: '/some/url'
},
name: 'Some t-shirt',
name: 'Some t-shirt'
},
prices: {
price: {
regularPrice: {
amount: {
value: 1,
currency: 'USD'
}
}
currency: 'USD',
value: 1
},
row_total: {
currency: 'USD',
value: 1
}
},
quantity: 2,
Expand All @@ -41,14 +43,16 @@ describe('<ProductList>', () => {
thumbnail: {
url: '/some/url'
},
name: 'Some shorts',
name: 'Some shorts'
},
prices: {
price: {
regularPrice: {
amount: {
value: 30,
currency: 'USD'
}
}
currency: 'USD',
value: 30
},
row_total: {
currency: 'USD',
value: 30
}
},
quantity: 2,
Expand Down
2 changes: 1 addition & 1 deletion react-components/src/components/Minicart/body.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.root {
display: grid;
grid-template-rows: min-content min-content 1fr;
grid-template-rows: min-content min-content min-content 1fr;
overflow: auto;
}
8 changes: 8 additions & 0 deletions react-components/src/components/Minicart/body.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import CouponForm from './couponForm';
import CouponItem from './couponItem';

import { useCartState } from './cartContext';
import DiscountList from './discountList';

const loadingIndicator = <LoadingIndicator>{`Fetching cart data...`}</LoadingIndicator>;

Expand All @@ -49,10 +50,17 @@ const Body = () => {

const cartItems = cart.items;
const couponFragment = !cart.applied_coupon ? <CouponForm /> : <CouponItem />;
const discountFragment =
cart.prices.discounts && cart.prices.discounts.length > 0 ? (
<DiscountList discounts={cart.prices.discounts} />
) : (
<div />
);

return (
<div className={classes.root}>
<ProductList cartItems={cartItems} />
{discountFragment}
{couponFragment}
</div>
);
Expand Down
7 changes: 3 additions & 4 deletions react-components/src/components/Minicart/cartOptions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,9 @@ import { useCartState } from './cartContext';
const CartOptions = () => {
const [{ editItem, cartId }, dispatch] = useCartState();

const { product, quantity: initialQuantity } = editItem;
const { name, price: productPrice } = product;

const { value, currency } = productPrice.regularPrice.amount;
const { product, quantity: initialQuantity, prices } = editItem;
const { name } = product;
const { value, currency } = prices.price;

const [quantity, setQuantity] = useState(initialQuantity);

Expand Down
16 changes: 16 additions & 0 deletions react-components/src/components/Minicart/discountList.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.root {
display: grid;
grid-gap: 1rem;
margin: 0 1.5rem;
font-size: 14px;
padding-bottom: 1.5rem;
}

.item {
display: grid;
grid-template-columns: 75% auto;
}

.price {
text-align: right;
}
50 changes: 50 additions & 0 deletions react-components/src/components/Minicart/discountList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/*******************************************************************************
*
* Copyright 2019 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
******************************************************************************/
import React from 'react';
import { number, shape, arrayOf, string } from 'prop-types';
import { Price } from '@magento/peregrine';

import classes from './discountList.css';

const DiscountList = props => {
let _renderDiscounts = () => {
return props.discounts.map(discount => {
const { currency, value } = discount.amount;
return (
<div className={classes.item} key={discount.label}>
<span>{discount.label}</span>
<span className={classes.price}>
<Price currencyCode={currency} value={-value} />
</span>
</div>
);
});
};

return <div className={classes.root}>{_renderDiscounts()}</div>;
};

DiscountList.propTypes = {
discounts: arrayOf(
shape({
amount: shape({
value: number.isRequired,
currency: string.isRequired
}).isRequired,
label: string.isRequired
})
)
};

export default DiscountList;
8 changes: 6 additions & 2 deletions react-components/src/components/Minicart/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,15 @@ const Footer = () => {
const [{ isOpen, cart }] = useCartState();
const footerClassName = isOpen ? classes.root_open : classes.root;

const { currency, value: totalPrice } = cart.prices.grand_total;
const { subtotal_excluding_tax, subtotal_with_discount_excluding_tax } = cart.prices;

return (
<div className={footerClassName}>
<TotalsSummary currencyCode={currency} numItems={cart.items.length} subtotal={totalPrice} />
<TotalsSummary
subtotal={subtotal_excluding_tax}
subtotalDiscount={subtotal_with_discount_excluding_tax}
numItems={cart.items.length}
/>
<Checkout />
</div>
);
Expand Down
15 changes: 14 additions & 1 deletion react-components/src/components/Minicart/product.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,11 @@

.quantityRow {
align-items: center;
width: 100%;
}

.quantity {
align-items: flex-end;
align-items: flex-start;
display: flex;
grid-column: 2 / span 1;
font-size: 13px;
Expand All @@ -51,6 +52,18 @@
display: inline-flex;
}

.rowTotalRow {
align-items: center;
width: 100%;
text-align: right;
}

.rowTotal {
align-items: center;
display: inline-flex;
float: right;
}

.mask {
position: absolute;
left: -24px;
Expand Down
Loading