[16237c4] | 1 | import axios from "axios";
|
---|
| 2 | import React, { useContext, useEffect, useReducer } from "react";
|
---|
| 3 | import { Link, useNavigate, useParams } from "react-router-dom";
|
---|
| 4 | import LoadingBox from "../components/LoadingBox";
|
---|
| 5 | import MessageBox from "../components/MessageBox";
|
---|
| 6 | import { Store } from "../Store";
|
---|
| 7 | import { getError } from "../components/utils";
|
---|
| 8 | import { Helmet } from "react-helmet-async";
|
---|
| 9 | import Row from "react-bootstrap/Row";
|
---|
| 10 | import Card from "react-bootstrap/Card";
|
---|
| 11 | import Col from "react-bootstrap/Col";
|
---|
| 12 | import ListGroup from "react-bootstrap/ListGroup";
|
---|
| 13 |
|
---|
| 14 | function reducer(state, action) {
|
---|
| 15 | switch (action.type) {
|
---|
| 16 | case "FETCH_REQUEST":
|
---|
| 17 | return { ...state, loading: true, error: "" };
|
---|
| 18 | case "FETCH_SUCCESS":
|
---|
| 19 | return { ...state, loading: false, order: action.payload, error: "" };
|
---|
| 20 | case "FETCH_FAIL":
|
---|
| 21 | return { ...state, loading: false, error: action.payload };
|
---|
| 22 | default:
|
---|
| 23 | return state;
|
---|
| 24 | }
|
---|
| 25 | }
|
---|
| 26 |
|
---|
| 27 | export default function OrderScreen() {
|
---|
| 28 | const { state } = useContext(Store);
|
---|
| 29 | const { userInfo } = state;
|
---|
| 30 | const params = useParams();
|
---|
| 31 | const { id: orderId } = params;
|
---|
| 32 | const navigate = useNavigate();
|
---|
| 33 |
|
---|
| 34 | const [{ loading, error, order }, dispatch] = useReducer(reducer, {
|
---|
| 35 | loading: true,
|
---|
| 36 | order: {},
|
---|
| 37 | error: "",
|
---|
| 38 | });
|
---|
| 39 |
|
---|
| 40 | useEffect(() => {
|
---|
| 41 | const fetchOrder = async () => {
|
---|
| 42 | try {
|
---|
| 43 | dispatch({ type: "FETCH_REQUEST" });
|
---|
| 44 | const { data } = await axios.get(`/api/orders/${orderId}`, {
|
---|
| 45 | headers: { authorization: `Bearer ${userInfo.token}` },
|
---|
| 46 | });
|
---|
| 47 | dispatch({ type: "FETCH_SUCCESS", payload: data });
|
---|
| 48 | } catch (err) {
|
---|
| 49 | dispatch({ type: "FETCH_FAIL", payload: getError(err) });
|
---|
| 50 | }
|
---|
| 51 | };
|
---|
| 52 | if (!userInfo) {
|
---|
| 53 | return navigate("/login");
|
---|
| 54 | }
|
---|
| 55 | if (!order._id || (order._id && order._id !== orderId)) {
|
---|
| 56 | fetchOrder();
|
---|
| 57 | }
|
---|
| 58 | }, [order, userInfo, orderId, navigate]);
|
---|
| 59 |
|
---|
| 60 | return loading ? (
|
---|
| 61 | <LoadingBox></LoadingBox>
|
---|
| 62 | ) : error ? (
|
---|
| 63 | <MessageBox variant="danger">{error}</MessageBox>
|
---|
| 64 | ) : (
|
---|
| 65 | <div className="pageContainer shipPC">
|
---|
| 66 | <Helmet>
|
---|
| 67 | <title>Нарачка {orderId}</title>
|
---|
| 68 | </Helmet>
|
---|
| 69 | <h1 style={{ marginTop: "20px" }}>Нарачка {orderId}</h1>
|
---|
| 70 | <Row style={{ width: "90%" }}>
|
---|
| 71 | <Col md={8}>
|
---|
| 72 | <Card className="mb-3">
|
---|
| 73 | <Card.Body>
|
---|
| 74 | <Card.Title>Испорака</Card.Title>
|
---|
| 75 | <Card.Text>
|
---|
| 76 | <strong>Име:</strong> {order.shippingAddress.fullName}
|
---|
| 77 | <br />
|
---|
| 78 | <strong>Адреса:</strong> {order.shippingAddress.address},
|
---|
| 79 | {order.shippingAddress.city},{order.shippingAddress.postalCode},
|
---|
| 80 | {order.shippingAddress.country}
|
---|
| 81 | </Card.Text>
|
---|
| 82 | {order.isDelivered ? (
|
---|
| 83 | <MessageBox variant="success">
|
---|
| 84 | Доставено на {order.deliveredAt}
|
---|
| 85 | </MessageBox>
|
---|
| 86 | ) : (
|
---|
| 87 | <MessageBox variant="danger">Не е доставено</MessageBox>
|
---|
| 88 | )}
|
---|
| 89 | </Card.Body>
|
---|
| 90 | </Card>
|
---|
| 91 | <Card className="mb-3">
|
---|
| 92 | <Card.Body>
|
---|
| 93 | <Card.Title>Плаќање</Card.Title>
|
---|
| 94 | <Card.Text>
|
---|
| 95 | <strong>Начин:</strong>{" "}
|
---|
| 96 | {order.paymentMethod === "Karticka"
|
---|
| 97 | ? "Со платежна картичка"
|
---|
| 98 | : "Во готово при достава"}
|
---|
| 99 | </Card.Text>
|
---|
| 100 | {order.isPaid ? (
|
---|
| 101 | <MessageBox variant="success">
|
---|
| 102 | Платено на {order.paidAt}
|
---|
| 103 | </MessageBox>
|
---|
| 104 | ) : (
|
---|
| 105 | <MessageBox variant="danger">Не е платено</MessageBox>
|
---|
| 106 | )}
|
---|
| 107 | </Card.Body>
|
---|
| 108 | </Card>
|
---|
| 109 | <Card className="mb-3">
|
---|
| 110 | <Card.Body>
|
---|
| 111 | <Card.Title>Продукти</Card.Title>
|
---|
| 112 | <ListGroup variant="flush">
|
---|
| 113 | {order.orderItems.map((item) => (
|
---|
| 114 | <ListGroup.Item key={item._id}>
|
---|
| 115 | <div
|
---|
| 116 | style={{
|
---|
| 117 | display: "flex",
|
---|
| 118 | justifyContent: "space-between",
|
---|
| 119 | }}
|
---|
| 120 | >
|
---|
| 121 | <div style={{ display: "flex", alignItems: "center" }}>
|
---|
| 122 | <img
|
---|
| 123 | src={item.image}
|
---|
| 124 | alt={item.name}
|
---|
| 125 | className="img-fluid rounded img-thumbnail"
|
---|
| 126 | style={{ margin: "0px" }}
|
---|
| 127 | ></img>
|
---|
| 128 | <Link to={`/product/${item.slug}`}>{item.name}</Link>
|
---|
| 129 | </div>
|
---|
| 130 |
|
---|
| 131 | <span>{item.quantity}</span>
|
---|
| 132 |
|
---|
| 133 | <span>{item.price} ден</span>
|
---|
| 134 | </div>
|
---|
| 135 | </ListGroup.Item>
|
---|
| 136 | ))}
|
---|
| 137 | </ListGroup>
|
---|
| 138 | </Card.Body>
|
---|
| 139 | </Card>
|
---|
| 140 | </Col>
|
---|
| 141 | <Col md={4}>
|
---|
| 142 | <Card>
|
---|
| 143 | <Card.Body>
|
---|
| 144 | <Card.Title>Нарачка</Card.Title>
|
---|
| 145 | <ListGroup variant="flush">
|
---|
| 146 | <ListGroup.Item>
|
---|
| 147 | <Row>
|
---|
| 148 | <Col>Продукти:</Col>
|
---|
| 149 | <Col>{order.itemsPrice.toFixed(2)} ден</Col>
|
---|
| 150 | </Row>
|
---|
| 151 | </ListGroup.Item>
|
---|
| 152 | <ListGroup.Item>
|
---|
| 153 | <Row>
|
---|
| 154 | <Col>Испорака:</Col>
|
---|
| 155 | <Col>{order.shippingPrice.toFixed(2)} ден</Col>
|
---|
| 156 | </Row>
|
---|
| 157 | </ListGroup.Item>
|
---|
| 158 |
|
---|
| 159 | <ListGroup.Item>
|
---|
| 160 | <Row>
|
---|
| 161 | <Col>
|
---|
| 162 | <strong>Вкупно</strong>
|
---|
| 163 | </Col>
|
---|
| 164 | <Col>
|
---|
| 165 | <strong>{order.totalPrice.toFixed(2)} ден</strong>
|
---|
| 166 | </Col>
|
---|
| 167 | </Row>
|
---|
| 168 | </ListGroup.Item>
|
---|
| 169 | </ListGroup>
|
---|
| 170 | </Card.Body>
|
---|
| 171 | </Card>
|
---|
| 172 | </Col>
|
---|
| 173 | </Row>
|
---|
| 174 | </div>
|
---|
| 175 | );
|
---|
| 176 | }
|
---|