Skip to content

Commit fbe2438

Browse files
ujjavaldesai07ujjavaldesai07
committed
Added shipping address action, edit and delete support
1 parent 2ca52f2 commit fbe2438

File tree

10 files changed

+224
-122
lines changed

10 files changed

+224
-122
lines changed

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

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -59,17 +59,14 @@ const shippingOptionPanel = 'shipOptPanel'
5959

6060
function Checkout() {
6161
const shippingAddress = useSelector(state => state.shippingAddressReducer)
62-
const [expanded, setExpanded] = React.useState(shippingAddressPanel);
63-
64-
const handleChange = (panel) => (event, newExpanded) => {
65-
setExpanded(newExpanded ? panel : false);
66-
};
6762

6863
const renderTitle = title => {
6964
return (
7065
<Grid item
71-
style={{fontSize: "1.8rem", fontWeight: "bolder",
72-
paddingLeft: "1rem"}}>
66+
style={{
67+
fontSize: "1.8rem", fontWeight: "bolder",
68+
paddingLeft: "1rem"
69+
}}>
7370
{title}
7471
</Grid>
7572
)
@@ -85,8 +82,7 @@ function Checkout() {
8582

8683
<Grid item xs={12} sm={11} md={7}>
8784

88-
<Accordion square expanded={expanded === shippingAddressPanel}
89-
onChange={handleChange(shippingAddressPanel)}>
85+
<Accordion square expanded>
9086
<AccordionSummary aria-controls={`${shippingAddressPanel}-content`}
9187
id={`${shippingAddressPanel}-header`}>
9288
{renderTitle("Shipping Address")}
@@ -96,9 +92,9 @@ function Checkout() {
9692
</AccordionDetails>
9793
</Accordion>
9894

99-
<Accordion square expanded={expanded === shippingOptionPanel}
100-
onChange={handleChange(shippingOptionPanel)}>
101-
<AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
95+
<Accordion square expanded={shippingAddress.submitted}>
96+
<AccordionSummary aria-controls={`${shippingOptionPanel}-content`}
97+
id={`${shippingOptionPanel}-header`}>
10298
{renderTitle("Shipping Options")}
10399
</AccordionSummary>
104100
<AccordionDetails>
@@ -112,11 +108,21 @@ function Checkout() {
112108
<Grid item style={{paddingRight: 20}}/>
113109
</Hidden>
114110

115-
<Grid item sm={11} md={4} style={{height: 300, marginTop: "1rem"}}>
116-
<Paper square style={{width: "inherit"}}>
117-
<PriceDetails buttonName="PLACE ORDER"/>
118-
</Paper>
119-
</Grid>
111+
<Hidden smUp>
112+
<Grid item sm={11} md={4} style={{height: 300, marginTop: "1rem"}}>
113+
<Paper square style={{width: "inherit"}}>
114+
<PriceDetails buttonName="PLACE ORDER"/>
115+
</Paper>
116+
</Grid>
117+
</Hidden>
118+
119+
<Hidden xsDown>
120+
<Grid item sm={11} md={3} style={{height: "fit-content", marginTop: "1rem", position: "sticky", top: 80}}>
121+
<Paper square style={{width: "inherit"}}>
122+
<PriceDetails buttonName="PLACE ORDER"/>
123+
</Paper>
124+
</Grid>
125+
</Hidden>
120126

121127
</Grid>
122128
)

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,21 @@ import React from 'react';
22
import log from 'loglevel';
33
import {Button, Grid, Hidden} from "@material-ui/core";
44

5+
const continueButtonStyle = {
6+
backgroundColor: "#e01a2b",
7+
height: 50,
8+
fontSize: "1rem",
9+
fontWeight: "bolder",
10+
color: "White"
11+
}
12+
513
function ContinueButton(props) {
614

715
const renderContinueDesktopBtn = () => {
816
return (
9-
<Grid item container justify="flex-end" style={{padding: "30px 40px 0 0"}}>
17+
<Grid item container justify="flex-end" style={{padding: "30px 40px 30px 0"}}>
1018
<Button variant="contained" size="large" style={{
11-
backgroundColor: "#e01a2b",
12-
width: "27%", height: 50, fontSize: "1rem", fontWeight: "bolder", color: "White"
19+
...continueButtonStyle, width: "27%"
1320
}} type={props.type} disabled={props.action}>
1421
CONTINUE
1522
</Button>
@@ -19,10 +26,9 @@ function ContinueButton(props) {
1926

2027
const renderContinueMobileBtn = () => {
2128
return (
22-
<Grid container justify="center" style={{paddingTop: 30}}>
29+
<Grid item container justify="center" style={{paddingTop: 30, margin: 0}}>
2330
<Button variant="contained" size="large" style={{
24-
backgroundColor: "#e01a2b",
25-
width: "87%", height: 50, fontSize: "1rem", fontWeight: "bolder", color: "White"
31+
...continueButtonStyle, width: "85%"
2632
}} type={props.type} disabled={props.action}>
2733
CONTINUE
2834
</Button>

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

Lines changed: 92 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component} from 'react';
22
import log from 'loglevel';
3-
import {MenuItem, Grid, Card, CardContent} from "@material-ui/core";
3+
import {MenuItem, Grid, Card, CardContent, Divider} from "@material-ui/core";
44
import ContinueButton from "./continueButton";
55
import {withStyles} from "@material-ui/core/styles";
66
import {Field, reduxForm} from "redux-form";
@@ -10,6 +10,8 @@ import {stateCodes} from "../../../constants/stateCodes";
1010
import DeleteIcon from '@material-ui/icons/Delete';
1111
import Button from '@material-ui/core/Button';
1212
import {setShippingAddress} from "../../../actions"
13+
import IconButton from '@material-ui/core/IconButton';
14+
import Modal from "../../ui/modal";
1315

1416
const styles = theme => ({
1517
root: {
@@ -45,14 +47,20 @@ class ShippingAddressForm extends Component {
4547
constructor(props) {
4648
super(props);
4749
this.state = {
48-
values: null,
50+
addressRemovalConfirmation: false,
4951
}
5052
}
5153

5254
onSubmitHandler = () => {
5355
log.info(`[ShippingAddress] values = ${JSON.stringify(this.props.shippingAddressFormStore)}`)
54-
this.setState({values: this.props.shippingAddressFormStore.values})
55-
this.props.setShippingAddress({values: this.props.shippingAddressFormStore.values, submitted: true})
56+
let formValues = this.props.shippingAddressFormStore.values
57+
58+
let id = `${formValues.firstName}-${formValues.lastName}-${Math.floor(Date.now() / 1000)}`
59+
60+
this.props.setShippingAddress({
61+
values: {...this.props.shippingAddressFormStore.values, "id": id},
62+
submitted: true
63+
})
5664
}
5765

5866
render() {
@@ -61,17 +69,17 @@ class ShippingAddressForm extends Component {
6169

6270
log.info(`[ShippingAddress] Rendering ShippingAddress Component. firstName = ${firstName}`)
6371

64-
const handleChange = (event) => {
65-
log.info(`event.target.value = ${event.target.value}`)
66-
};
67-
68-
const onEditBtnClick = () => {
72+
const handleEditBtnClick = () => {
73+
this.props.setShippingAddress({submitted: false})
74+
}
6975

76+
const handleDeleteAddressClick = (formValues) => () => {
77+
this.setState({addressRemovalConfirmation: true})
7078
}
7179

7280
const renderTextField = (label, name, validationRules) => {
7381
return (
74-
<Grid item container lg={8}>
82+
<Grid item container xs={11} sm={8}>
7583
<Field
7684
name={name}
7785
label={label}
@@ -102,7 +110,7 @@ class ShippingAddressForm extends Component {
102110
const renderShippingForm = () => {
103111
return (
104112
<Grid item style={{width: "100%", height: 670}}>
105-
<Grid item xs={11} sm={8} lg={12}>
113+
<Grid item xs={12} sm={12}>
106114
<form onSubmit={handleSubmit(submitHandler)} className={classes.root}
107115
style={{width: "inherit"}}>
108116
{renderTextField("First Name", "firstName", requiredRule)}
@@ -111,7 +119,7 @@ class ShippingAddressForm extends Component {
111119
[requiredRule, addressLine1Rule])}
112120
{renderTextField("Address Line 2 (optional)", "addressLine2", null)}
113121

114-
<Grid item container lg={8}>
122+
<Grid item container xs={11} sm={8}>
115123
<Grid item container xs={6} style={{paddingRight: 15}}>
116124
<Field
117125
name="zipCode"
@@ -132,7 +140,6 @@ class ShippingAddressForm extends Component {
132140
component={TextField}
133141
variant="outlined"
134142
select
135-
onChange={handleChange}
136143
fullWidth
137144
size="medium"
138145
style={textFieldStyles}
@@ -156,10 +163,11 @@ class ShippingAddressForm extends Component {
156163
}
157164

158165
const renderShippingSummaryAddress = (values) => {
166+
159167
return (
160-
<Grid item lg={5} style={{margin: "2rem 2rem 0 2rem"}}>
161-
<Card style={{height: 200, fontSize: "1.1rem"}}>
162-
<CardContent style={{height: 160}}>
168+
<Grid item lg={4} style={{margin: "2rem"}}>
169+
<Card style={{height: "fit-content", fontSize: "1.1rem"}}>
170+
<CardContent style={{height: "fit-content"}}>
163171

164172
<Grid item style={{marginBottom: "0.5rem"}}>
165173
{`${values.firstName} ${values.lastName}`}
@@ -185,34 +193,86 @@ class ShippingAddressForm extends Component {
185193

186194
</CardContent>
187195

188-
<Grid container justify="flex-end" style={{paddingRight: "0.5rem", paddingBottom: "1rem"}}>
189-
<DeleteIcon fontSize="large"/>
196+
<Grid container style={{padding: "0 0.8rem 1rem 1rem"}}>
197+
<Grid item xs={6} style={{alignSelf: "center"}}>
198+
<Button variant="outlined" color="default" fullWidth style={{
199+
height: "3rem",
200+
fontSize: "1rem"
201+
}} onClick={handleEditBtnClick}>
202+
Edit
203+
</Button>
204+
</Grid>
205+
206+
<Grid item container xs={6} justify={"flex-end"}>
207+
<IconButton onClick={handleDeleteAddressClick(values)}>
208+
<DeleteIcon fontSize="large"/>
209+
</IconButton>
210+
</Grid>
211+
190212
</Grid>
191213
</Card>
192-
193-
<Grid container justify="center" style={{padding: "2rem 3rem 1rem 3rem"}}>
194-
<Button variant="contained" color="secondary" fullWidth style={{
195-
height: "3rem",
196-
fontSize: "1.2rem"
197-
}} onClick={onEditBtnClick}>
198-
Edit
199-
</Button>
200-
</Grid>
201214
</Grid>
202215
)
203216
}
204217

205218
const renderShippingSummaryAddresses = () => {
206219
return (
207220
<Grid container justify="flex-start" style={{height: "fit-content", backgroundColor: "#80808033"}}>
208-
{renderShippingSummaryAddress(this.state.values)}
221+
{renderShippingSummaryAddress(this.props.shippingAddress.values)}
222+
</Grid>
223+
)
224+
}
225+
226+
const renderAddressRemovalConfirmation = () => {
227+
return (
228+
<Grid container direction="column">
229+
<Grid item container direction="column" style={{margin: "1rem"}}>
230+
<Grid item
231+
style={{color: "#3e4152", fontSize: 14, fontWeight: "bolder", paddingBottom: "1rem"}}>
232+
Remove Address
233+
</Grid>
234+
<Grid item style={{color: "#696b79", fontSize: 14, fontWeight: 200}}>
235+
Are you sure you want to remove selected address?
236+
</Grid>
237+
</Grid>
238+
<Grid item>
239+
<Divider style={{width: 300, height: 1}}/>
240+
</Grid>
241+
<Grid item container alignItems="center" style={{textAlignLast: "center"}}>
242+
<Grid item xs={6} onClick={removeModalClickHandler} style={{
243+
color: "red", fontWeight: "bold", cursor: "pointer"
244+
}}>
245+
REMOVE
246+
</Grid>
247+
<Divider orientation="vertical" style={{width: 0, height: 45}}/>
248+
<Grid item xs={5} onClick={closeModalClickHandler}
249+
style={{fontWeight: "bold", cursor: "pointer", paddingLeft: "1.3rem"}}>
250+
CANCEL
251+
</Grid>
252+
</Grid>
209253
</Grid>
210254
)
211255
}
212256

257+
const closeModalClickHandler = () => {
258+
this.setState({addressRemovalConfirmation: false})
259+
}
260+
261+
const removeModalClickHandler = () => {
262+
this.props.reset('shippingAddressForm')
263+
this.props.setShippingAddress({values: null, submitted: false})
264+
this.setState({addressRemovalConfirmation: false})
265+
}
266+
267+
log.info(`this.state.addressRemovalConfirmation = ${this.state.addressRemovalConfirmation}`)
213268
return (
214269
<>
215-
{this.state.values ? renderShippingSummaryAddresses() : renderShippingForm()}
270+
{this.props.shippingAddress.submitted
271+
? renderShippingSummaryAddresses() : renderShippingForm()}
272+
{this.state.addressRemovalConfirmation ?
273+
<Modal renderWarningComponent={renderAddressRemovalConfirmation()}
274+
modalWidth="300px"
275+
closeHandler={closeModalClickHandler}/> : null}
216276
</>
217277
)
218278
}
@@ -221,7 +281,9 @@ class ShippingAddressForm extends Component {
221281
const mapStateToProps = (state) => {
222282
return ({
223283
shippingAddressFormStore: state.form.shippingAddressForm ?
224-
state.form.shippingAddressForm : null
284+
state.form.shippingAddressForm : null,
285+
shippingAddress: state.shippingAddressReducer
286+
225287
})
226288
}
227289

0 commit comments

Comments
 (0)