Skip to content

Commit 2724496

Browse files
Abhinay1121Abhinay1121
committed
First commit
1 parent 69f6e32 commit 2724496

20 files changed

+13171
-99
lines changed

‎package-lock.json

+12,727
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,12 @@
44
"private": true,
55
"dependencies": {
66
"react": "^16.8.6",
7+
"react-bootstrap": "^0.32.1",
78
"react-dom": "^16.8.6",
8-
"react-scripts": "3.0.1"
9+
"react-redux": "^7.1.0",
10+
"react-scripts": "3.0.1",
11+
"redux": "^4.0.4",
12+
"redux-thunk": "^2.3.0"
913
},
1014
"scripts": {
1115
"start": "react-scripts start",

‎public/index.html

+4-23
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,15 @@
55
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
8-
<!--
9-
manifest.json provides metadata used when your web app is installed on a
10-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
11-
-->
128
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13-
<!--
14-
Notice the use of %PUBLIC_URL% in the tags above.
15-
It will be replaced with the URL of the `public` folder during the build.
16-
Only files inside the `public` folder can be referenced from the HTML.
17-
18-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19-
work correctly both with client-side routing and a non-root public URL.
20-
Learn how to configure a non-root public URL by running `npm run build`.
21-
-->
9+
<link rel="stylesheet"
10+
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
11+
2212
<title>React App</title>
2313
</head>
2414
<body>
2515
<noscript>You need to enable JavaScript to run this app.</noscript>
2616
<div id="root"></div>
27-
<!--
28-
This HTML file is a template.
29-
If you open it directly in the browser, you will see an empty page.
30-
31-
You can add webfonts, meta tags, or analytics to this file.
32-
The build step will place the bundled scripts into the <body> tag.
33-
34-
To begin the development, run `npm start` or `yarn start`.
35-
To create a production bundle, use `npm run build` or `yarn build`.
36-
-->
3717
</body>
3818
</html>
19+
<!-- Latest compiled and minified CSS -->

‎src/App.css

+16-24
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,25 @@
1-
.App {
2-
text-align: center;
1+
.container{
2+
margin-top: 10px;
33
}
44

5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 40vmin;
8-
pointer-events: none;
5+
.purchase-card {
6+
width: 350px;
7+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
8+
padding: 1em;
99
}
1010

11-
.App-header {
12-
background-color: #282c34;
13-
min-height: 100vh;
14-
display: flex;
15-
flex-direction: column;
16-
align-items: center;
17-
justify-content: center;
18-
font-size: calc(10px + 2vmin);
19-
color: white;
11+
.purchase-card > .show-grid {
12+
padding-bottom: 1.5em;
13+
}
14+
.item-details-button:focus {
15+
outline: none;
2016
}
2117

22-
.App-link {
23-
color: #61dafb;
18+
.price-strike {
19+
text-decoration-line:line-through;
20+
color: grey
2421
}
2522

26-
@keyframes App-logo-spin {
27-
from {
28-
transform: rotate(0deg);
29-
}
30-
to {
31-
transform: rotate(360deg);
32-
}
23+
.promo-code-button:focus {
24+
outline: none
3325
}

‎src/App.js

+57-20
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,63 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
1+
import React,{ Component } from 'react';
2+
import { Grid } from 'react-bootstrap';
3+
import SubTotal from './components/SubTotal/SubTotal';
4+
import PickupSavings from './components/PickupSavings/PickupSavings';
5+
import TaxesFees from './components/TaxesFees/TaxesFees';
6+
import EstimatedTotal from './components/EstimatedTotal/EstimatedTotal';
7+
import ItemDetails from './components/ItemDetails/ItemDetails';
8+
import PromoCodeDiscount from './components/PromoCode/PromoCode';
9+
import { connect } from 'react-redux';
10+
import { handleChange } from './actions/promoCodeActions';
311
import './App.css';
412

5-
function App() {
13+
14+
class App extends Component {
15+
constructor(props){
16+
super(props);
17+
this.state ={
18+
total: 100,
19+
PickupSavings: -3.85,
20+
taxes: 0,
21+
estimatedTotal: 0,
22+
disablePromoButton: false
23+
}
24+
}
25+
26+
componentDidMount = () =>{
27+
this.setState({taxes:(this.state.total + this.state.PickupSavings) * 0.0875},
28+
function(){this.setState({estimatedTotal:this.state.total +this.state.PickupSavings +this.state.taxes})})
29+
30+
}
31+
giveDiscountHandler = () => {
32+
if(this.props.promoCode === 'DISCOUNT'){
33+
this.setState(
34+
{estimatedTotal: this.state.estimatedTotal * 0.9},
35+
function(){
36+
this.setState(
37+
{disablePromoButton: true});
38+
})
39+
}
40+
};
41+
render() {
642
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
43+
<div className="container">
44+
<Grid className="purchase-card">
45+
<SubTotal price ={this.state.total.toFixed(2)}/>
46+
<PickupSavings price={this.state.PickupSavings}/>
47+
<TaxesFees taxes ={this.state.taxes.toFixed(2)}/>
48+
<hr />
49+
<EstimatedTotal price ={this.state.estimatedTotal.toFixed(2)}/>
50+
<ItemDetails price={this.state.estimatedTotal.toFixed(2)}/>
51+
<hr />
52+
<PromoCodeDiscount
53+
giveDiscount ={()=>this.giveDiscountHandler()}
54+
isDisabled = {this.state.disablePromoButton}/>
55+
</Grid>
2256
</div>
2357
);
2458
}
25-
26-
export default App;
59+
}
60+
const mapStateToProps = state => ({
61+
promoCode: state.promoCode.value
62+
})
63+
export default connect(mapStateToProps, { handleChange })(App);

‎src/actions/promoCodeActions.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { PROMO_CODE } from './types';
2+
3+
export const handleChange = e => dispatch => {
4+
dispatch({
5+
type: 'PROMO_CODE',
6+
payload: e.target.value
7+
});
8+
};

‎src/actions/types.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const PROMO_CODE ='PROMO_CODE';

‎src/components/EstimatedTotal/EstimatedTotal.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React, {Component} from 'react';
2+
import { Row, Col} from 'react-bootstrap';
3+
4+
5+
export default class EstimatedTotal extends Component {
6+
render(){
7+
return (
8+
<Row>
9+
<Col md={6}><h2
10+
>Est. Total</h2></Col>
11+
<Col md={6}><h2>{`$${this.props.price}`}</h2></Col>
12+
</Row>
13+
)
14+
}
15+
}

‎src/components/ItemDetails/ItemDetails.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { Component} from 'react';
2+
import { Button, Collapse, Well, Media, Row, Col} from 'react-bootstrap';
3+
4+
5+
export default class ItemDetails extends Component {
6+
constructor(props){
7+
super(props);
8+
this.state ={
9+
open: false
10+
}
11+
}
12+
render(){
13+
return(
14+
<div>
15+
<Button className='item-details-button'
16+
bsStyle ="Link" onClick ={()=>this.setState({open:!this.state.open})}>
17+
{this.state.open === false ? 'show' : 'hide'} item details
18+
{this.state.open === false ? '+' :'-'}
19+
</Button>
20+
<Collapse in={this.state.open}>
21+
<div>
22+
<Well>
23+
<Media>
24+
<Media.Left>
25+
<img
26+
width={100}
27+
height ={100}
28+
alt="thumbnail"
29+
src="https://i5.walmartimages.com/asr/4104a16d-4ebb-4387-ae36-2619f3d2f232_1.466980d10b5491837b6578303f1c4967.jpeg?odnWidth=undefined&odnHeight=undefined&odnBg=ffffff"
30+
/>
31+
</Media.Left >
32+
<Media.Body>
33+
<p>Essentials by OFM ESS-3085 racing Style Leather Gaming Chair,Blue</p>
34+
<Row className='show-grid'>
35+
<Col md={6}>
36+
<strong>{`$${this.props.price}`}</strong>
37+
<br />
38+
<strong className ="price-strike">{`$${this.props.price}`}</strong>
39+
</Col>
40+
<Col md={6}>Qty: 1</Col>
41+
</Row>
42+
</Media.Body>
43+
</Media>
44+
</Well>
45+
</div>
46+
</Collapse>
47+
</div>
48+
)
49+
}
50+
}

‎src/components/PickupSavings/PickupSavings.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, {Component} from 'react';
2+
import {Row, Col, Tooltip, OverlayTrigger} from 'react-bootstrap';
3+
4+
var styles = {
5+
pickupSavings: {textDecoration: 'underline'},
6+
totalSavings:{
7+
color:'red',
8+
fontWeight: 800
9+
}
10+
};
11+
12+
13+
14+
export default class PickupSavings extends Component {
15+
render(){
16+
const tooltip =( <Tooltip id="tooltip">
17+
<p>Picking up your order in the store helps cut costs, and we pass the savings on to you</p>
18+
</Tooltip>
19+
);
20+
21+
const sidebar = (
22+
<OverlayTrigger placement="bottom" overlay={tooltip}>
23+
<div style={styles.pickupSavings}>
24+
Pickup Savings
25+
</div>
26+
</OverlayTrigger>
27+
)
28+
29+
return(
30+
<Row className="show-grid">
31+
<Col md={6}>
32+
{sidebar}
33+
</Col>
34+
<Col style={styles.totalSavings} md={6}>{`$${this.props.price}`}</Col>
35+
</Row>
36+
37+
)
38+
}
39+
}

‎src/components/PromoCode/PromoCode.js

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React, {Component } from 'react';
2+
import {
3+
Button,
4+
Collapse,
5+
Well,
6+
Form,
7+
Row,
8+
Col,
9+
FormGroup,
10+
ControlLabel,
11+
FormControl } from 'react-bootstrap';
12+
import { connect } from 'react-redux';
13+
import { handleChange } from '../../actions/promoCodeActions';
14+
15+
class PromoCodeDiscount extends Component{
16+
constructor(props){
17+
super(props);
18+
this.state ={
19+
open :false,
20+
};
21+
}
22+
handleChange = e =>{
23+
this.props.handleChange(e);
24+
};
25+
render(){
26+
return(
27+
<div>
28+
<Button className="promo-code-button"
29+
bsStyle="link"
30+
onClick ={()=>this.setState({open: !this.state.open})}>
31+
{this.state.open === false ? 'Apply': 'Hide'} promo code
32+
{this.state.open === false ? '+' : '-'}
33+
</Button>
34+
<Collapse in={this.state.open}>
35+
<div>
36+
<Well>
37+
<Row className ="show-grid">
38+
<Col md={12}>
39+
<Form>
40+
<FormGroup controlid ="formInlineName">
41+
<ControlLabel>Promo Code</ControlLabel>
42+
<FormControl type="text"
43+
placeholder="Enter promo code"
44+
value={this.props.promoCode}
45+
onChange={this.handleChange}/>
46+
47+
</FormGroup>
48+
<Button
49+
block
50+
bsStyle="success"
51+
className="btn-round"
52+
disabled={this.props.isDisabled}
53+
onClick={this.props.giveDiscount}
54+
55+
56+
>Apply</Button>
57+
58+
</Form>
59+
</Col>
60+
</Row>
61+
</Well>
62+
</div>
63+
</Collapse>
64+
</div>
65+
66+
)
67+
}
68+
}
69+
const mapStateToprops = state => ({
70+
promoCode: state.promoCode.value
71+
});
72+
export default connect(mapStateToprops, {handleChange})(PromoCodeDiscount);

0 commit comments

Comments
 (0)