Skip to content

Commit 5fbbacb

Browse files
vladyslav-fenchakvladyslav-fenchak
committed
Merge remote-tracking branch 'origin/0.0.3' into issue-280-update-minos-common
2 parents f94e08c + 139156a commit 5fbbacb

File tree

11 files changed

+450
-43
lines changed

11 files changed

+450
-43
lines changed

‎external/front/src/App.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import {useCart} from "react-use-cart";
2121
import {CartIcon} from "./components/icons";
2222
import Cart from "./pages/cart";
2323
import Checkout from "./pages/checkout";
24+
import Orders from "./pages/orders";
25+
import OrderDetail from "./pages/orders/detail";
2426

2527
function App() {
2628
const user = AuthService.getCurrentUser();
@@ -72,7 +74,7 @@ function App() {
7274

7375
{currentUser && (
7476
<li className="nav-item">
75-
<Link to={"/user"} className="nav-link">
77+
<Link to={"/orders"} className="nav-link">
7678
My Orders
7779
</Link>
7880
</li>
@@ -135,6 +137,8 @@ function App() {
135137
<Route path="/admin" component={BoardAdmin}/>
136138
<Route path="/cart" component={Cart}/>
137139
<Route path="/checkout" component={Checkout}/>
140+
<Route path="/orders" component={Orders}/>
141+
<Route path="/order/:id" component={OrderDetail}/>
138142
</Switch>
139143
</div>
140144

‎external/front/src/App.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,4 +86,8 @@
8686
margin-right: 5px;
8787
}
8888
}
89+
}
90+
91+
.bg-light-blue {
92+
background-color: #f6faff;
8993
}

‎external/front/src/components/tickets/detail.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, {useEffect, useState} from 'react';
2+
import TicketService from "../../services/ticket";
3+
import {formatNumber} from "../../helpers/utils";
4+
5+
function TicketDetail(params) {
6+
const [ticket, setTicket] = useState(undefined);
7+
8+
9+
function GetTicket() {
10+
TicketService.get(params.uuid).then(
11+
(response) => {
12+
setTicket(response.data)
13+
},
14+
error => {
15+
console.log(error)
16+
}
17+
);
18+
}
19+
20+
useEffect(() => {
21+
GetTicket()
22+
}, [ticket]);
23+
24+
25+
if (ticket === undefined) {
26+
return (
27+
<div>
28+
<div>Loading ...</div>
29+
</div>
30+
);
31+
} else {
32+
return (
33+
<div className="mt-4">
34+
<span className="badge rounded-pill bg-info">Order details</span>
35+
<ul className="list-group mt-4">
36+
{ticket.entries.map((item) => (
37+
<li className="list-group-item d-flex justify-content-between align-items-center">
38+
<h5><a href={"/product/" + item.product_uuid}>{item.title}</a></h5>
39+
<h5><span className="badge bg-primary rounded-pill">x{item.quantity}</span></h5>
40+
<h5>{formatNumber(item.quantity * item.unit_price)}</h5>
41+
</li>
42+
))}
43+
44+
<li className="list-group-item d-flex justify-content-between align-items-center bg-light">
45+
Subtotal
46+
<span>{formatNumber(params.total_amount)}</span>
47+
</li>
48+
49+
<li className="list-group-item d-flex justify-content-between align-items-center bg-light">
50+
Discount
51+
<span>{formatNumber(0)}</span>
52+
</li>
53+
54+
<li className="list-group-item d-flex justify-content-between align-items-center bg-light">
55+
Shipping
56+
<span>{formatNumber(0)}</span>
57+
</li>
58+
<li className="list-group-item d-flex justify-content-between align-items-center bg-light">
59+
<h4>Total</h4>
60+
<h4 className="text-success">{formatNumber(params.total_amount)}</h4>
61+
</li>
62+
</ul>
63+
</div>
64+
);
65+
}
66+
67+
68+
}
69+
70+
export default TicketDetail;

‎external/front/src/helpers/utils.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
export const formatNumber = number => {
22
return new Intl.NumberFormat('ea-ES', { style: 'currency', currency: 'EUR' }).format(number);
3+
}
4+
5+
export const buildDate = date => {
6+
return new Date(date / 1e3);
37
}

‎external/front/src/pages/checkout/index.js‎

Lines changed: 143 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,20 @@ import React, {useState} from 'react';
33
import Products from './Products';
44
import {formatNumber} from '../../helpers/utils';
55
import {useCart} from "react-use-cart";
6-
import PaymentService from '../../services/payment'
6+
import PaymentService from '../../services/order'
77
import {PaymentInputsWrapper, usePaymentInputs} from 'react-payment-inputs';
88
import images from 'react-payment-inputs/images';
99

10-
function Checkout() {
10+
function Checkout(props) {
11+
const [shipmentName, setShipmentName] = useState(undefined);
12+
const [shipmentLastName, setShipmentLastName] = useState(undefined);
13+
const [shipmentEmail, setShipmentEmail] = useState(undefined);
14+
const [shipmentAddress, setShipmentAddress] = useState(undefined);
15+
const [shipmentCountry, setShipmentCountry] = useState(undefined);
16+
const [shipmentCity, setShipmentCity] = useState(undefined);
17+
const [shipmentProvince, setShipmentProvince] = useState(undefined);
18+
const [shipmentZip, setShipmentZip] = useState(undefined);
19+
const [cardHolder, setCardHolder] = useState(undefined);
1120
const [cardNumber, setCardNumber] = useState(undefined);
1221
const [cardExpiryDate, setCardExpiryDate] = useState(undefined);
1322
const [cardCVC, setCardCVC] = useState(undefined);
@@ -26,19 +35,37 @@ function Checkout() {
2635
} = useCart();
2736

2837
function Pay() {
38+
39+
let data = {
40+
cart: "5b1a5558-0006-43cc-8476-85fe91a12e86",
41+
customer: "05693c6d-6a41-4bae-a8f5-68b4b15bfd9d",
42+
payment_detail: {
43+
card_holder: cardHolder,
44+
card_number: cardNumber,
45+
card_expire: cardExpiryDate,
46+
card_cvc: cardCVC
47+
},
48+
shipment_detail: {
49+
name: shipmentName,
50+
last_name: shipmentLastName,
51+
email: shipmentEmail,
52+
address: shipmentAddress,
53+
country: shipmentCountry,
54+
city: shipmentCity,
55+
province: shipmentProvince,
56+
zip: shipmentZip,
57+
}
58+
}
59+
2960
if (cardNumber) {
30-
PaymentService.create(cardNumber, cartTotal).then(
61+
PaymentService.create(data).then(
3162
response => {
32-
console.log(response.uuid)
63+
props.history.push('/orders')
3364
},
3465
error => {
3566
console.log(error)
3667
})
3768
}
38-
39-
console.log(cardNumber)
40-
console.log(cardExpiryDate)
41-
console.log(cardCVC)
4269
}
4370

4471
function handleCardNumber(event) {
@@ -55,6 +82,42 @@ function Checkout() {
5582
setCardCVC(event.target.value)
5683
}
5784

85+
function handleCardHolder(event) {
86+
setCardHolder(event.target.value)
87+
}
88+
89+
function handleShipmentName(event) {
90+
setShipmentName(event.target.value)
91+
}
92+
93+
function handleShipmentLastName(event) {
94+
setShipmentLastName(event.target.value)
95+
}
96+
97+
function handleShipmentEmail(event) {
98+
setShipmentEmail(event.target.value)
99+
}
100+
101+
function handleShipmentCountry(event) {
102+
setShipmentCountry(event.target.value)
103+
}
104+
105+
function handleShipmentAddress(event) {
106+
setShipmentAddress(event.target.value)
107+
}
108+
109+
function handleShipmentCity(event) {
110+
setShipmentCity(event.target.value)
111+
}
112+
113+
function handleShipmentProvince(event) {
114+
setShipmentProvince(event.target.value)
115+
}
116+
117+
function handleShipmentZip(event) {
118+
setShipmentZip(event.target.value)
119+
}
120+
58121
return (
59122
<div>
60123
<div>
@@ -80,30 +143,94 @@ function Checkout() {
80143
<p className="mb-1">Total Items</p>
81144
<h4 className=" mb-3 txt-right">{totalItems}</h4>
82145
</div>
83-
84146
</div>
85-
86-
87147
</div>
88148
{
89149
totalItems > 0 &&
90150
<div className="col-sm-6 p-3">
151+
<h3>Shipment info</h3>
152+
<div className="card card-body mb-3">
153+
<div className="form-row">
154+
<div className="form-group col-md-6">
155+
<label htmlFor="inputEmail4">Name</label>
156+
<input type="email" className="form-control" id="inputEmail4"
157+
onChange={(e) => {handleShipmentName(e)}}
158+
placeholder="Name"/>
159+
</div>
160+
<div className="form-group col-md-6">
161+
<label htmlFor="inputPassword4">Last name</label>
162+
<input type="text" className="form-control" id="inputPassword4"
163+
onChange={(e) => {handleShipmentLastName(e)}}
164+
placeholder="Last name"/>
165+
</div>
166+
</div>
167+
<div className="form-row">
168+
<div className="form-group col-md-6">
169+
<label htmlFor="inputEmail4">Email</label>
170+
<input type="email" className="form-control" id="inputEmail4"
171+
onChange={(e) => {handleShipmentEmail(e)}}
172+
placeholder="Email"/>
173+
</div>
174+
<div className="form-group col-md-6">
175+
<label htmlFor="inputPassword4">Country</label>
176+
<select id="inputState" className="form-control"
177+
onChange={(e) => {handleShipmentCountry(e)}}
178+
>
179+
<option selected>Choose...</option>
180+
<option value="Spain">Spain</option>
181+
</select>
182+
</div>
183+
</div>
184+
<div className="form-group">
185+
<label htmlFor="inputAddress">Address</label>
186+
<input type="text" className="form-control" id="inputAddress"
187+
onChange={(e) => {handleShipmentAddress(e)}}
188+
placeholder="1234 Main St"/>
189+
</div>
190+
<div className="form-row">
191+
<div className="form-group col-md-6">
192+
<label htmlFor="inputCity">City</label>
193+
<input type="text" className="form-control" id="inputCity"
194+
onChange={(e) => {handleShipmentCity(e)}}
195+
/>
196+
</div>
197+
<div className="form-group col-md-4">
198+
<label htmlFor="inputState">Province</label>
199+
<select id="inputState" className="form-control"
200+
onChange={(e) => {handleShipmentProvince(e)}}
201+
>
202+
<option selected>Choose...</option>
203+
<option value="Madrid">Madrid</option>
204+
</select>
205+
</div>
206+
<div className="form-group col-md-2">
207+
<label htmlFor="inputZip">Zip</label>
208+
<input type="text" className="form-control" id="inputZip"
209+
onChange={(e) => {handleShipmentZip(e)}}
210+
/>
211+
</div>
212+
</div>
213+
</div>
214+
<h3>Credit card info</h3>
91215
<div className="card card-body">
216+
<div className="form-group">
217+
<label htmlFor="exampleInputEmail1">Card Holder</label>
218+
<input type="email" className="form-control" id="exampleInputEmail1"
219+
onChange={(e) => {handleCardHolder(e)}}
220+
aria-describedby="emailHelp" placeholder="Name and surname"/>
221+
</div>
92222
<PaymentInputsWrapper {...wrapperProps}>
93223
<svg {...getCardImageProps({images})} />
94224
<input {...getCardNumberProps({onChange: handleCardNumber})} />
95225
<input {...getExpiryDateProps({onChange: handleExpiryDate})} />
96226
<input {...getCVCProps({onChange: handleCVC})} />
97227
</PaymentInputsWrapper>
98-
99-
<hr className="my-4"/>
100-
<div className="text-center">
228+
</div>
229+
<div className="text-center mt-3">
101230
<button type="button"
102231
className="btn btn-primary mb-2"
103232
onClick={() => Pay()}>PAY {formatNumber(cartTotal)}</button>
104233
</div>
105-
106-
</div>
107234
</div>
108235
}
109236

0 commit comments

Comments
 (0)