Skip to content

Commit 1f808f0

Browse files
ujjavaldesai07ujjavaldesai07
committed
Fixed checkout page to update values as per form selection
1 parent 9dbd473 commit 1f808f0

File tree

21 files changed

+300
-142
lines changed

21 files changed

+300
-142
lines changed

‎client/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@material-ui/core": "^5.0.0-alpha.4",
6+
"@material-ui/core": "latest",
77
"@material-ui/icons": "latest",
8-
"@material-ui/lab": "^4.0.0-alpha.56",
8+
"@material-ui/lab": "latest",
99
"@stripe/react-stripe-js": "^1.1.2",
1010
"@stripe/stripe-js": "^1.8.0",
1111
"axios": "^0.19.2",
@@ -27,7 +27,6 @@
2727
"react-stripe-checkout": "^2.6.3",
2828
"redux": "^4.0.5",
2929
"redux-form": "^8.3.6",
30-
"redux-form-material-ui": "^5.0.0-beta.3",
3130
"redux-thunk": "^2.3.0",
3231
"semantic-ui-css": "^2.4.1",
3332
"stripe": "^8.78.0",

‎client/src/actions/index.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,14 +123,13 @@ export const sendPaymentToken = (token) => async dispatch => {
123123
})
124124

125125
if(response.data.paymentFailed) {
126-
history.push('/checkout/cancel-payment')
126+
history.push(`/checkout/cancel-payment/${response.data.charge_id}`)
127127
} else {
128128
history.push(`/checkout/success-payment/${response.data.charge_id}`)
129129
}
130130

131131
})
132132
.catch(function (error) {
133-
history.push('/checkout/cancel-payment')
134133
console.log(error);
135134
});
136135
}

‎client/src/actions/types.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export const SELECT_PRODUCT_PAGE = "SELECT_PRODUCT_PAGE";
1919
export const SELECT_PRODUCT_DETAIL = "SELECT_PRODUCT_DETAIL";
2020
export const ADD_TO_CART = "ADD_TO_CART";
2121
export const CART_TOTAL = "CART_TOTAL";
22+
export const DELIVERY_CHARGES = "DELIVERY_CHARGES";
2223

2324
export const SAVE_QUERY_STATUS = "SAVE_QUERY_STATUS";
2425
export const ADD_SELECTED_CATEGORY = "ADD_SELECTED_CATEGORY";

‎client/src/components/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const App = () => {
3232
<Route path="/products/:details" exact component={ProductDetail}/>
3333
<Route path="/products" exact component={Product}/>
3434
<Route path="/checkout/success-payment/:id" exact component={SuccessPayment}/>
35-
<Route path="/checkout/cancel-payment" exact component={CancelPayment}/>
35+
<Route path="/checkout/cancel-payment/:id" exact component={CancelPayment}/>
3636
<Route path="*" exact component={BadRequest}/>
3737
</Switch>
3838
</Router>

‎client/src/components/routes/checkout/checkout.js

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,19 @@ import log from 'loglevel';
33
import {Paper, Grid, Hidden} from "@material-ui/core";
44
import PriceDetails from "../priceDetails";
55
import ShippingAddress from "./shippingAddress";
6-
import ShippingOptions from "./shippingOptions";
6+
import {ShippingOptions} from "./shippingOptions";
77
import {makeStyles, withStyles} from '@material-ui/core/styles';
88
import MuiAccordion from '@material-ui/core/Accordion';
99
import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
1010
import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
11-
import {useSelector} from "react-redux";
12-
import {Elements, ElementsConsumer} from "@stripe/react-stripe-js";
11+
import {connect, useSelector} from "react-redux";
1312
import {loadStripe} from "@stripe/stripe-js/pure";
14-
import Payment from "./payment"
1513
import PaymentButton from "./paymentButton";
14+
import {useAddProductsToShoppingBag} from "../../../hooks/useAddProductsToShoppingBag";
15+
import {getDataViaAPI} from "../../../actions";
16+
import {useCartTotal} from "../../../hooks/useCartTotal";
17+
// import {Elements, ElementsConsumer} from "@stripe/react-stripe-js";
18+
// import Payment from "./payment"
1619

1720
const checkoutBgColor = "#80808033"
1821

@@ -73,11 +76,14 @@ const shippingOptionPanel = 'shipOptPanel'
7376
const paymentPanel = "paymentPanel"
7477
const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISH_KEY)
7578

76-
function Checkout() {
79+
function Checkout(props) {
7780
const shippingAddress = useSelector(state => state.shippingAddressReducer)
7881
const shippingOption = useSelector(state => state.shippingOptionReducer)
7982
const classes = useGridStyles();
8083

84+
useCartTotal()
85+
useAddProductsToShoppingBag(props.getDataViaAPI)
86+
8187
const renderTitle = title => {
8288
return (
8389
<Grid item
@@ -151,9 +157,7 @@ function Checkout() {
151157
<Grid item sm={11} md={3}
152158
style={{height: "fit-content", marginTop: "1rem", position: "sticky", top: 80}}>
153159
<Paper square style={{width: "inherit"}}>
154-
<PriceDetails buttonName="PLACE ORDER"
155-
156-
/>
160+
<PriceDetails buttonName="PLACE ORDER"/>
157161
<PaymentButton disabled={!shippingOption.submitted}/>
158162
</Paper>
159163
</Grid>
@@ -163,4 +167,4 @@ function Checkout() {
163167
)
164168
}
165169

166-
export default Checkout;
170+
export default connect(null, {getDataViaAPI})(Checkout);

‎client/src/components/routes/checkout/continueButton.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,10 @@ function ContinueButton(props) {
5151
)
5252
}
5353

54-
export default ContinueButton;
54+
function continueButtonPropsAreEqual(prevProps, nextProps) {
55+
return prevProps.action === nextProps.action;
56+
}
57+
58+
const continueButtonMemoWrapper = React.memo(ContinueButton, continueButtonPropsAreEqual);
59+
60+
export default continueButtonMemoWrapper;

‎client/src/components/routes/checkout/paymentButton.js

Lines changed: 37 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,47 @@
1-
import React from 'react'
1+
import React, {Component, useEffect, useState} from 'react'
22
import StripeCheckout from 'react-stripe-checkout';
33
import {Button, Grid} from "@material-ui/core";
44
import {connect} from "react-redux";
55
import {sendPaymentToken} from "../../../actions"
6-
import Cookies from "js-cookie";
7-
import {CART_TOTAL} from "../../../actions/types";
8-
import {PageNotFound} from "../../ui/error/pageNotFound";
6+
import log from 'loglevel';
7+
8+
class PaymentButton extends Component {
9+
10+
_GrandTotal = 0
911

10-
class PaymentButton extends React.Component {
1112
constructor(props) {
1213
super(props);
1314
this.state = {
14-
cartTotal: this.props.cartTotal,
15+
grandTotal: null,
1516
paymentBtnClicked: false
1617
}
1718
}
1819

19-
componentDidMount() {
20-
if (!this.state.cartTotal) {
21-
let cartTotal = Cookies.get(CART_TOTAL)
22-
if (cartTotal) {
23-
this.setState({cartTotal: parseInt(cartTotal) * 100})
24-
} else {
25-
return <PageNotFound/>
26-
}
27-
}
20+
getGrandTotal = () => {
21+
this._GrandTotal = (this.props.cartTotal + this.props.deliveryCharges) * 100
22+
return this._GrandTotal
2823
}
2924

3025
onToken = (token) => {
31-
this.props.sendPaymentToken({...token, "amount": this.state.cartTotal, currency: "USD"})
32-
}
3326

34-
paymentBtnClickHandler = () => {
3527
this.setState({paymentBtnClicked: true})
28+
29+
this.props.sendPaymentToken({
30+
...token,
31+
amount: this._GrandTotal,
32+
currency: "USD",
33+
address: this.props.shippingAddressForm.values,
34+
addToCart: this.props.addToCart,
35+
shippingOption: this.props.shippingOption
36+
})
3637
}
3738

3839
renderButton = () => {
40+
log.info(`[PaymentButton] renderButton....`)
3941
return (
4042
<Grid container justify="center" style={{padding: "2rem 0 2rem 0"}}>
4143
<Grid item lg={9}>
42-
<Button variant="contained" size="medium" onClick={this.paymentBtnClickHandler}
44+
<Button variant="contained" size="medium"
4345
disabled={this.state.paymentBtnClicked || this.props.disabled}
4446
style={{
4547
width: '100%', height: 50, color: 'white',
@@ -59,12 +61,12 @@ class PaymentButton extends React.Component {
5961
return (
6062
<>
6163
{this.state.paymentBtnClicked || this.props.disabled ?
62-
this.renderButton()
63-
: <StripeCheckout
64+
this.renderButton():
65+
<StripeCheckout
6466
token={this.onToken}
6567
stripeKey={process.env.REACT_APP_STRIPE_PUBLISH_KEY}
6668
name="Shoppers Buy"
67-
amount={this.state.cartTotal} // cents
69+
amount={this.getGrandTotal()} // cents
6870
currency="USD">
6971
{this.renderButton()}
7072
</StripeCheckout>}
@@ -75,8 +77,19 @@ class PaymentButton extends React.Component {
7577

7678
const mapStateToProps = (state) => {
7779
return ({
78-
cartTotal: state.cartTotalReducer
80+
cartTotal: state.cartTotalReducer,
81+
shippingAddressForm: state.form.shippingAddressForm ?
82+
state.form.shippingAddressForm : null,
83+
shippingOption: state.shippingOptionReducer,
84+
addToCart: state.addToCartReducer,
85+
deliveryCharges: state.deliveryChargesReducer
7986
})
8087
}
8188

82-
export default connect(mapStateToProps, {sendPaymentToken})(PaymentButton)
89+
function paymentButtonPropsAreEqual(prevProps, nextProps) {
90+
return prevProps.disabled === nextProps.disabled;
91+
}
92+
93+
const wrapperMemo = React.memo(PaymentButton, paymentButtonPropsAreEqual);
94+
95+
export default connect(mapStateToProps, {sendPaymentToken})(wrapperMemo)

‎client/src/components/routes/checkout/shippingAddress.js

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -73,23 +73,17 @@ class ShippingAddressForm extends Component {
7373
render() {
7474
const {classes, submitting, pristine} = this.props;
7575

76-
log.info(`[ShippingAddress] Rendering ShippingAddress Component...`)
77-
7876
const renderShippingSummaryAddresses = () => {
7977
let formValues = this.props.shippingAddressFormStore.values
80-
let contentList = []
81-
82-
contentList.push(`${formValues.firstName} ${formValues.lastName}`)
83-
contentList.push(formValues.addressLine1)
84-
85-
if (formValues.addressLine2) {
86-
contentList.push(formValues.addressLine2)
87-
}
88-
89-
contentList.push(`${formValues.city}, ${formValues.stateCode} ${formValues.zipCode}`)
90-
contentList.push(formValues.email)
91-
contentList.push(`(${formValues.phoneNumber.slice(0, 3)}) ` +
92-
`${formValues.phoneNumber.slice(3, 6)}-${formValues.phoneNumber.slice(6, 10)}`)
78+
let contentList = [
79+
`${formValues.firstName} ${formValues.lastName}`,
80+
formValues.addressLine1,
81+
formValues.addressLine2,
82+
`${formValues.city}, ${formValues.stateCode} ${formValues.zipCode}`,
83+
formValues.email,
84+
`(${formValues.phoneNumber.slice(0, 3)}) ` +
85+
`${formValues.phoneNumber.slice(3, 6)}-${formValues.phoneNumber.slice(6, 10)}`
86+
]
9387

9488
return (
9589
<Grid container justify="flex-start" style={{height: "fit-content", backgroundColor: "#80808033"}}>
@@ -186,7 +180,7 @@ class ShippingAddressForm extends Component {
186180
)
187181
}
188182

189-
log.info(`[ShippingAddress] Rendering Payment Component...`)
183+
log.info(`[ShippingAddress] Rendering ShippingAddress Component...`)
190184

191185
return (
192186
<>
@@ -242,12 +236,12 @@ const mapStateToProps = (state) => {
242236
shippingAddressFormStore: state.form.shippingAddressForm ?
243237
state.form.shippingAddressForm : null,
244238
shippingAddress: state.shippingAddressReducer
245-
246239
})
247240
}
248241

249242
const reduxWrapperForm = reduxForm({
250243
form: 'shippingAddressForm',
244+
destroyOnUnmount: false,
251245
validate,
252246
})(ShippingAddressForm);
253247

0 commit comments

Comments
 (0)