[16237c4] | 1 | import React, { useContext, useEffect, useState } from "react";
|
---|
| 2 | import { Helmet } from "react-helmet-async";
|
---|
| 3 | import Form from "react-bootstrap/Form";
|
---|
| 4 | import Button from "react-bootstrap/Button";
|
---|
| 5 | import Container from "react-bootstrap/Container";
|
---|
| 6 | import { useNavigate } from "react-router-dom";
|
---|
| 7 | import { Store } from "../Store";
|
---|
| 8 | import CheckoutSteps from "../components/CheckoutSteps";
|
---|
| 9 |
|
---|
| 10 | function ShippingAddressScreen() {
|
---|
| 11 | const navigate = useNavigate();
|
---|
| 12 | const { state, dispatch: ctxDispatch } = useContext(Store);
|
---|
| 13 | const {
|
---|
| 14 | userInfo,
|
---|
| 15 | cart: { shippingAddress },
|
---|
| 16 | } = state;
|
---|
| 17 | const [fullName, setFullName] = useState(shippingAddress.fullName || "");
|
---|
| 18 | const [address, setAddress] = useState(shippingAddress.address || "");
|
---|
| 19 | const [city, setCity] = useState(shippingAddress.city || "");
|
---|
| 20 | const [postalCode, setPostalCode] = useState(
|
---|
| 21 | shippingAddress.postalCode || ""
|
---|
| 22 | );
|
---|
| 23 | const [country, setCountry] = useState(shippingAddress.country || "");
|
---|
| 24 |
|
---|
| 25 | useEffect(() => {
|
---|
| 26 | if (!userInfo) {
|
---|
| 27 | navigate("/signin");
|
---|
| 28 | }
|
---|
| 29 | }, [userInfo, navigate]);
|
---|
| 30 |
|
---|
| 31 | const submitHandler = (e) => {
|
---|
| 32 | e.preventDefault();
|
---|
| 33 | ctxDispatch({
|
---|
| 34 | type: "SAVE_SHIPPING_ADDRESS",
|
---|
| 35 | payload: {
|
---|
| 36 | fullName,
|
---|
| 37 | address,
|
---|
| 38 | city,
|
---|
| 39 | postalCode,
|
---|
| 40 | country,
|
---|
| 41 | },
|
---|
| 42 | });
|
---|
| 43 | localStorage.setItem(
|
---|
| 44 | "shippingAddress",
|
---|
| 45 | JSON.stringify({
|
---|
| 46 | fullName,
|
---|
| 47 | address,
|
---|
| 48 | city,
|
---|
| 49 | postalCode,
|
---|
| 50 | country,
|
---|
| 51 | })
|
---|
| 52 | );
|
---|
| 53 | navigate("/payment");
|
---|
| 54 | };
|
---|
| 55 |
|
---|
| 56 | return (
|
---|
| 57 | <div className="pageContainer shipPC">
|
---|
| 58 | <CheckoutSteps step1 step2 />
|
---|
| 59 | <Container className="main">
|
---|
| 60 | <Helmet>
|
---|
| 61 | <title>Адреса</title>
|
---|
| 62 | </Helmet>
|
---|
| 63 |
|
---|
| 64 | <h1 className="my-3">Адреса</h1>
|
---|
| 65 |
|
---|
| 66 | <Form onSubmit={submitHandler} className="formCointainer">
|
---|
| 67 | <Form.Group>
|
---|
| 68 | <Form.Label>Име и Презиме</Form.Label>
|
---|
| 69 | <Form.Control
|
---|
| 70 | value={fullName}
|
---|
| 71 | onChange={(e) => setFullName(e.target.value)}
|
---|
| 72 | required
|
---|
| 73 | ></Form.Control>
|
---|
| 74 | </Form.Group>
|
---|
| 75 | <Form.Group>
|
---|
| 76 | <Form.Label>Адреса</Form.Label>
|
---|
| 77 | <Form.Control
|
---|
| 78 | value={address}
|
---|
| 79 | onChange={(e) => setAddress(e.target.value)}
|
---|
| 80 | required
|
---|
| 81 | ></Form.Control>
|
---|
| 82 | </Form.Group>
|
---|
| 83 | <Form.Group>
|
---|
| 84 | <Form.Label>Град</Form.Label>
|
---|
| 85 | <Form.Control
|
---|
| 86 | value={city}
|
---|
| 87 | onChange={(e) => setCity(e.target.value)}
|
---|
| 88 | required
|
---|
| 89 | ></Form.Control>
|
---|
| 90 | </Form.Group>
|
---|
| 91 | <Form.Group>
|
---|
| 92 | <Form.Label>Поштенски код</Form.Label>
|
---|
| 93 | <Form.Control
|
---|
| 94 | value={postalCode}
|
---|
| 95 | onChange={(e) => setPostalCode(e.target.value)}
|
---|
| 96 | required
|
---|
| 97 | ></Form.Control>
|
---|
| 98 | </Form.Group>
|
---|
| 99 | <Form.Group>
|
---|
| 100 | <Form.Label>Држава</Form.Label>
|
---|
| 101 | <Form.Control
|
---|
| 102 | value={country}
|
---|
| 103 | onChange={(e) => setCountry(e.target.value)}
|
---|
| 104 | required
|
---|
| 105 | ></Form.Control>
|
---|
| 106 | </Form.Group>
|
---|
| 107 | <div className="submitBtnContainer">
|
---|
| 108 | <Button variant="danger" size="lg" type="submit">
|
---|
| 109 | Продолжи
|
---|
| 110 | </Button>
|
---|
| 111 | </div>
|
---|
| 112 | </Form>
|
---|
| 113 | </Container>
|
---|
| 114 | </div>
|
---|
| 115 | );
|
---|
| 116 | }
|
---|
| 117 |
|
---|
| 118 | export default ShippingAddressScreen;
|
---|