What I want to do is hit all, I'm going to add in like four products at least right. So advanced oop, I'm going to put in user interface design right and hit checkout, and we have our products here right?

So what we need to do, is we need to somehow get the subtotal here okay, and we also need to get the subtotal in the cart here. So let's go ahead and start by going into review.js and implementing mapStateToProps here instead of null, and then let's implement this function, so let's say function mapStateToProps let's pass in state and let's return state. Alright now let's pull out the cart products so let's say const cartProducts is equal to state.user okay, and then we'll just return cartProducts, okay, we should be good there.

review.js

function mapStateToProps(state) {
    const { cartProducts } = state.user;
    return { cartProducts }
}

Review = connect(mapStateToProps, actions)(Review);

export default Review;

Now what we need to do is just go get the count and throw it into the form okay. So let's say that in our render function const subtotal is equal to and then let's map over each item how many times we need to okay. So let's say this.props.artProducts.map and we'll say product... let's say cartProduct arrow function, and in here we need to say okay we need to take the amounts and add them up okay.

So let's instead say this.props.cartProducts and then above this let's say let subtotal okay and put a semicolon... actually put 0, let's say is equal to 0 and then we'll say subtotal plus equals cartProduct.quantity, so how many times we have that product like two times for example, times the product okay so however many times we get the product times the product price, let's say cartProduct.product.price okay, and that will give us our subtotal. Then what we need to do is past it into reviewForm, let's say subtotal is equal to subtotal.

review.js

render() {
    let subtotal =0;
    this.props.cartProducts.map(cartProduct => {
        subtotal += cartProduct.quantity * cartProduct.product.price;
    })
    return (
        <div className='review'>
            <PageTitle className='review__page-title' title='Order Review'/>
            <ReviewForm className='review__form' onSubmit={this.onSubmit} subtotal={subtotal}/>
        </div>
    )
}

Okay, now let's head over into reviewForm.js and then pull it out of our props. Okay, then let's go down here and let's add it in instead of this, let's do this, subtotal, okay, we're good there. Now we don't have any taxes, and that's a whole bunch of database stuff with stripe anyway, so we're not going to handle taxes, we're just going to put it in a variable and we're going to say tax... we're going to have a fixed tax rate let's say, this is a thing too you can just have a fixed tax rate okay.

So we have tax, let's go up here and let's say let tax is equal to 0.16, and then what we'll do is we'll go down here and we'll say that shipping is zero still, we don't charge for shipping. And then we're going to go down here and we're going to say in the total that it is equal to subtotal plus tax.

Alright, let's go ahead and let's see what this looks like in the browser and see if we get any errors. Let's go to Chrome, let's hit all, let's add in a couple, let's add in four so it fills it up the way it should, and then lets hit check out and you'll see now that we have 95 with 16 cents tax is equal to 10.11 so we have our subtotal and if you add this all up it will equal 9.95 okay, then add the .16 and it's $10.11.

So that's how you do that, let's quickly go ahead and let's go back into our cart component and do that in the cart component okay. So what we're going to have to do is go into review.js and let's just copy all this logic, because it's going to be exactly the same, so lines 21 through 24 on my screen. Let's head over to shopCart.js and what we're going to do in here is we are going to find where we're putting it okay. We're saying price right here, cart-footer__price.

What we want to do is get that in there somehow okay. We have mapStateToProps in here, we're getting the cartProducts which can be really easy. All we need to do is go into our cartContent okay, and then we need to get it in here okay. So we already have the products, let's paste that in and instead of saying this.props.cartProducts we just need to say products.

Okay, now what we need to do is pass it into cart-footer but you'll realize, you'll see that we are already passing in products, so what we can do is either put this map statement in there or we can just pass in the price. So what I want to do is I want to actually move this entire thing right here, these four lines, and put them in cart footer. That way we can just have it in here and calculate the logic in here, that makes more sense because it's part of the footer.

Then what we can do is get rid of price and then we can rename it down here to subtotal. Okay, so we should be good there, let's go ahead and see what this looks like now. Let's hit all, and let's add in a product, and you'll see we have the price. Now it's $7.96 because we have four stickers in here, if we remove one of these or add another, if we go in here and we go to advanced oop and add one you'll see it's now $9.95, so it's adding up, it's just without the tax. If you hit checkout it's got the subtotal $9.95, it's got the tax of 16 cents and the Shipping's zero dollars for a total of $10.11.

Alright, so that's all set up. It's all good, that finishes off our order review and now we can finally move on to another component okay. So in the next set of videos what we're going to do is we're going to handle the shipping address okay, and then after the shipping address we will get the model in there and the payment information and we'll be done with the application.

Alright, so let's commit our code and I'll see you in the next video.

Terminal

git status
git add .
git commit -m "calculating order subtotal and total"

Okay, I'll see you in the next video.

Resources

Source code