Skip to content

Commit 671af09

Browse files
author
WebDeveloperGuide
committed
Revise Some Page Design,
Shipping page is added Payment page design added.
1 parent 95af184 commit 671af09

File tree

15 files changed

+376
-29
lines changed

15 files changed

+376
-29
lines changed

‎web_panel/src/App.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ import About from './pages/About';
55
import Login from './pages/Login';
66
import RegisterPage from './pages/RegisterPage';
77
import ForgotPassword from './pages/ForgotPassword';
8+
import Shipping from './pages/Shipping';
9+
import Payment from './pages/Payment';
810
import NotFound from './pages/NotFound';
11+
import PrivateRouter from "./PrivateRouter";
912
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
1013
import Toast from "./components/Toast";
1114
import 'react-toastify/dist/ReactToastify.css';
@@ -20,6 +23,8 @@ function App() {
2023
<Route path="/products" component={ProductsPage}/>
2124
<Route path="/product/:id" component={ProductDetailPage}/>
2225
<Route path="/about" component={About}/>
26+
<PrivateRouter path="/shipping" component={Shipping} />
27+
<PrivateRouter path="/payment" component={Payment} />
2328
<Route path="/login" component={Login}/>
2429
<Route path="/register" component={RegisterPage}/>
2530
<Route path="/forgot-password" component={ForgotPassword}/>

‎web_panel/src/PrivateRouter.js

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,21 @@
11
import React from "react";
2-
import { useSelector } from "react-redux";
2+
import {useSelector} from 'react-redux';
33
import { Redirect, Route } from "react-router-dom";
44

55
function PrivateRouter({ component: Component, ...rest }) {
6-
const userLogin = useSelector((state) => state.userLogin);
7-
const { userInfo } = userLogin;
8-
let isAdmin = 0;
9-
if (userInfo){
10-
isAdmin = (userInfo.data[0].isAdmin === true) ? 1 : 0;
11-
}
12-
6+
const userInfo = useSelector((state)=> state.userPanelLogin.userInfo);
7+
let token = 0;
8+
if(typeof userInfo !== 'undefined' && userInfo !== null){
9+
token = userInfo.token;
10+
}
1311
return (
1412
<Route
1513
{...rest}
16-
component={(props) => {
17-
if (isAdmin === 1) {
18-
//If page is on home page with only / then redirect to dashboard route
19-
return (props.location.pathname === '/') ?
20-
<Redirect to={`/dashboard`} /> :
21-
<Component {...props} />;
14+
component={(props) => {
15+
if (token) {
16+
return <Component {...props} />;
2217
} else {
23-
return <Redirect to={`/login`} />;
18+
return <Redirect to={"/login"} />;
2419
}
2520
}}
2621
/>

‎web_panel/src/components/CartTotal.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import {useSelector} from 'react-redux';
3+
import {Link} from 'react-router-dom';
34

45
const CartTotal = () => {
56
const cart = useSelector((state) => state.cart);
@@ -9,7 +10,7 @@ const CartTotal = () => {
910
<>
1011
<footer>
1112
<h3 className="cart-total text-slanted">total : ${cartTotal}</h3>
12-
<button className="cart-checkout btn">checkout</button>
13+
<Link to="/shipping"><button className="cart-checkout btn">checkout</button></Link>
1314
</footer>
1415
</>
1516
)

‎web_panel/src/components/Navbar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const NavBar = () => {
1010
const dispatch = useDispatch();
1111
const showCartStatus = useSelector((state)=> state.cart.showCart);
1212
const cartItems = useSelector((state)=> state.cart.cartItems);
13-
const userInfo = useSelector((state)=> state.userLogin.userInfo);
13+
const userInfo = useSelector((state)=> state.userPanelLogin.userInfo);
1414
let isLoggedin = false;
1515
let userName = '';
1616

‎web_panel/src/index.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -971,4 +971,36 @@ a, a:hover {
971971
box-shadow:none;
972972
background-color: transparent;
973973
border-color:transparent;
974+
}
975+
976+
.content-card{
977+
background: #fff;
978+
border-radius: 5px;
979+
position: relative;
980+
padding: 25px 30px 30px;
981+
box-shadow: 0 1px 11px rgb(168 168 168 / 27%);
982+
text-align: center;
983+
}
984+
985+
.auth-page-container button{
986+
width: 100%;
987+
margin-top: 15px;
988+
padding: 10px 0;
989+
}
990+
991+
.shipping-page-container .input-group-append.is-invalid{
992+
border: 1px solid red;
993+
}
994+
995+
.shipping-page-container .inline-errormsg, .payment-page-container .inline-errormsg{
996+
margin-left:0;
997+
text-align: left;
998+
}
999+
1000+
.shipping-page-content{
1001+
max-width: 550px;
1002+
}
1003+
1004+
.input-group-address{
1005+
width: 150px;
9741006
}

‎web_panel/src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import store from './redux/store';
66
import axios from 'axios';
77
import './index.css';
88

9-
const {userLogin: { userInfo }} = store.getState();
9+
const {userPanelLogin: { userInfo }} = store.getState();
1010
axios.defaults.baseURL = process.env.REACT_APP_API_BASEURL;
1111
axios.defaults.headers.post['Content-Type'] = 'application/json';
1212

‎web_panel/src/pages/ForgotPassword.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ const ForgotPassword = () => {
1414
<section className="section section-center">
1515
<div className="container h-100">
1616
<div className="d-flex justify-content-center h-100">
17-
<div className="user_card">
18-
<div className="d-flex justify-content-center form_container">
17+
<div className="user_card content-card">
18+
<h4 className="content-heading">Forgot Password</h4>
19+
<div className="d-flex justify-content-center form_container auth-page-container">
1920
<form>
2021
<div className="input-group mb-3">
2122
<div className="input-group-append">

‎web_panel/src/pages/Login.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ const LoginPage = ({history}) => {
1313
const [submitted, setSubmitted] = useState(false);
1414
const dispatch = useDispatch();
1515

16-
const userLogin = useSelector((state) => state.userLogin);
17-
const { userInfo } = userLogin;
16+
const userPanelLogin = useSelector((state) => state.userPanelLogin);
17+
const { userInfo } = userPanelLogin;
1818

1919
const [formState,setFormState] = useState({
2020
values:{}
@@ -56,12 +56,13 @@ const LoginPage = ({history}) => {
5656
<section className="section section-center">
5757
<div className="container h-100">
5858
<div className="d-flex justify-content-center h-100">
59-
<div className="user_card">
59+
<div className="user_card content-card">
60+
<h4 className="content-heading">Login</h4>
6061
<div className="d-flex justify-content-center form_container auth-page-container">
6162
<form onSubmit={handleSubmit} autoComplete="off">
6263
<div className="input-group">
6364
<div className={'input-group-append' + (submitted && !formState.values.email ? ' is-invalid' : '')}>
64-
<span className="input-group-text"><i className="fas fa-user" /></span>
65+
<span className="input-group-text"><i className="fas fa-envelope" /></span>
6566
</div>
6667
<input type="email" className={'form-control form-control-lg' + (submitted && !formState.values.email ? ' is-invalid' : '')}
6768
name="email"

‎web_panel/src/pages/Payment.js

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React,{useState,useEffect} from 'react';
2+
import {useDispatch,useSelector} from 'react-redux';
3+
import NavBar from '../components/Navbar';
4+
import PageHeading from '../components/PageHeading';
5+
import ProductDetail from '../components/ProductDetail';
6+
import Sidebar from '../components/Sidebar';
7+
import Cart from '../components/Cart';
8+
import {Link} from 'react-router-dom';
9+
import {showCart, saveShippingAddress} from '../redux/actions/cartActions';
10+
11+
const PaymentPage = ({history}) => {
12+
13+
const [submitted, setSubmitted] = useState(false);
14+
const dispatch = useDispatch();
15+
16+
const shippingAddress = useSelector((state) => state.cart.shippingAddress);
17+
const { street1, street2, city, state, zip, country } = shippingAddress;
18+
19+
if (Object.keys(shippingAddress).length === 0) {
20+
history.push("/shipping");
21+
}
22+
23+
const [formState,setFormState] = useState({
24+
values:{}
25+
});
26+
27+
const handleChange = (event) => {
28+
setFormState(formState =>({
29+
...formState,
30+
values:{
31+
...formState.values,
32+
[event.target.name]:
33+
event.target.type === 'checkbox'
34+
? event.target.checked
35+
: event.target.value
36+
}
37+
38+
}));
39+
}
40+
41+
const handleSubmit = (e) => {
42+
e.preventDefault();
43+
setSubmitted(true);
44+
const { name_on_card,card_number, expire, cvc } = formState.values;
45+
46+
if (name_on_card && card_number && expire && cvc) {
47+
dispatch(saveShippingAddress(formState.values));
48+
//history.push("/payment");
49+
}
50+
}
51+
52+
useEffect(() => {
53+
dispatch(showCart(false))
54+
}, []);
55+
56+
return(
57+
<>
58+
<NavBar/>
59+
<PageHeading title="Home / Payment"/>
60+
<section className="section section-center">
61+
<div className="container h-100">
62+
<div className="d-flex justify-content-center h-100">
63+
<div className="user_card content-card payment-page-content">
64+
<h4 className="content-heading">Payment Detail</h4>
65+
<div className="d-flex justify-content-center form_container auth-page-container payment-page-container">
66+
<form onSubmit={handleSubmit} autoComplete="off">
67+
<div className="input-group">
68+
<div className={'input-group-append' + (submitted && !formState.values.name_on_card ? ' is-invalid' : '')}>
69+
<span className="input-group-text"><i className="fas fa-user" /></span>
70+
</div>
71+
<input type="text" className={'form-control form-control-lg' + (submitted && !formState.values.name_on_card ? ' is-invalid' : '')}
72+
name="name_on_card"
73+
placeholder="Name on Card"
74+
onChange={handleChange}
75+
value={formState.values.name_on_card || ''}
76+
/>
77+
78+
</div>
79+
{submitted && !formState.values.name_on_card &&
80+
<div className="inline-errormsg">Name is required</div>
81+
}
82+
<div className="input-group mt-3">
83+
<div className={'input-group-append' + (submitted && !formState.values.card_number ? ' is-invalid' : '')}>
84+
<span className="input-group-text"><i className="fas fa-credit-card" /></span>
85+
</div>
86+
<input type="text" className={'form-control form-control-lg' + (submitted && !formState.values.name_on_card ? ' is-invalid' : '')}
87+
name="card_number"
88+
placeholder="Card Number"
89+
onChange={handleChange}
90+
value={formState.values.card_number || ''}
91+
/>
92+
</div>
93+
{submitted && !formState.values.card_number &&
94+
<div className="inline-errormsg">Card number is required</div>
95+
}
96+
<div className="input-group mt-3">
97+
<div className="input-group-address mr-2">
98+
<input type="text" className={'form-control form-control-lg' + (submitted && !formState.values.expire ? ' is-invalid' : '')}
99+
name="expire"
100+
placeholder="MM/YY"
101+
onChange={handleChange}
102+
value={formState.values.expire || ''}
103+
/>
104+
{submitted && !formState.values.expire &&
105+
<div className="inline-errormsg">Expire is required</div>
106+
}
107+
</div>
108+
<div className="input-group-address mr-2">
109+
<input type="text" className={'form-control form-control-lg' + (submitted && !formState.values.cvc ? ' is-invalid' : '')}
110+
name="cvc"
111+
placeholder="CVC"
112+
onChange={handleChange}
113+
value={formState.values.cvc || ''}
114+
/>
115+
{submitted && !formState.values.cvc &&
116+
<div className="inline-errormsg">CVC is required</div>
117+
}
118+
</div>
119+
</div>
120+
<div className="d-flex justify-content-center mt-3 login_container">
121+
<button className="btn login_btn">Proceed</button>
122+
</div>
123+
</form>
124+
</div>
125+
</div>
126+
</div>
127+
</div>
128+
</section>
129+
<Sidebar/>
130+
<Cart/>
131+
</>
132+
)
133+
}
134+
135+
136+
export default PaymentPage;

‎web_panel/src/pages/RegisterPage.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,10 @@ const RegisterPage = ({history}) => {
5959
<section className="section section-center">
6060
<div className="container h-100">
6161
<div className="d-flex justify-content-center h-100">
62-
<div className="user_card">
62+
<div className="user_card content-card">
63+
<h4 className="content-heading">Register</h4>
6364
<div className="d-flex justify-content-center form_container auth-page-container">
64-
<form className="pt-3" onSubmit={handleSubmit} autoComplete="off">
65+
<form onSubmit={handleSubmit} autoComplete="off">
6566
<div className="input-group">
6667
<div className={'input-group-append' + (submitted && !formState.values.name ? ' is-invalid' : '')}>
6768
<span className="input-group-text"><i className="fas fa-user" /></span>

0 commit comments

Comments
 (0)