| 5473 |
stevensc |
1 |
/* eslint-disable react/prop-types */
|
|
|
2 |
import React, { useEffect, useState, useRef } from 'react'
|
|
|
3 |
import { axios } from "../../../../utils";
|
|
|
4 |
import { useForm } from "react-hook-form";
|
|
|
5 |
import { Button, Modal } from "react-bootstrap";
|
|
|
6 |
import { useDispatch } from 'react-redux';
|
|
|
7 |
import { addNotification } from '../../../../redux/notification/notification.actions';
|
|
|
8 |
import Spinner from "../../../../shared/loading-spinner/Spinner";
|
|
|
9 |
import UbicationInput from "../../../../shared/ubication-input/UbicationInput";
|
|
|
10 |
import FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";
|
|
|
11 |
|
|
|
12 |
const LocationModal = ({
|
|
|
13 |
closeModal,
|
|
|
14 |
isModalOpen,
|
|
|
15 |
userIdEncrypted,
|
|
|
16 |
setSettedAddress
|
|
|
17 |
}) => {
|
|
|
18 |
const { register, errors, handleSubmit, setValue, clearErrors, getValues, watch, setError, } = useForm();
|
|
|
19 |
const [modalLoading, setModalLoading] = useState(false);
|
|
|
20 |
const dispatch = useDispatch();
|
|
|
21 |
|
|
|
22 |
const isAddressEmpty = useRef(true);
|
|
|
23 |
const addressKeys = useRef([
|
|
|
24 |
"address1",
|
|
|
25 |
"address2",
|
|
|
26 |
"country",
|
|
|
27 |
"state",
|
|
|
28 |
"city1",
|
|
|
29 |
"city2",
|
|
|
30 |
"postal_code",
|
|
|
31 |
"latitude",
|
|
|
32 |
"longitude",
|
|
|
33 |
]);
|
|
|
34 |
|
|
|
35 |
const handleModalOpen = (event) => {
|
|
|
36 |
event && event.preventDefault();
|
|
|
37 |
Object.keys(getValues()).map(([key]) => setValue(key, ""))
|
|
|
38 |
closeModal();
|
|
|
39 |
};
|
|
|
40 |
|
|
|
41 |
const getAddressHandler = (addresObject) => {
|
|
|
42 |
addressKeys.current.map((addressKey) => {
|
|
|
43 |
setValue(addressKey, "");
|
|
|
44 |
});
|
|
|
45 |
const { address_components } = addresObject;
|
|
|
46 |
if (address_components) {
|
|
|
47 |
address_components.map((address_component) => {
|
|
|
48 |
const address_component_name = address_component.long_name;
|
|
|
49 |
const address_component_type = address_component.types[0];
|
|
|
50 |
switch (address_component_type) {
|
|
|
51 |
case "route":
|
|
|
52 |
setValue("address1", address_component_name);
|
|
|
53 |
break;
|
|
|
54 |
case "sublocality":
|
|
|
55 |
setValue("address2", address_component_name);
|
|
|
56 |
break;
|
|
|
57 |
case "locality":
|
|
|
58 |
setValue("city1", address_component_name);
|
|
|
59 |
break;
|
|
|
60 |
case "administrative_area_level_2":
|
|
|
61 |
setValue("city2", address_component_name);
|
|
|
62 |
break;
|
|
|
63 |
case "administrative_area_level_1":
|
|
|
64 |
setValue("state", address_component_name);
|
|
|
65 |
break;
|
|
|
66 |
case "country":
|
|
|
67 |
setValue("country", address_component_name);
|
|
|
68 |
break;
|
|
|
69 |
case "postal_code":
|
|
|
70 |
setValue("postal_code", address_component_name);
|
|
|
71 |
break;
|
|
|
72 |
case "geometry":
|
|
|
73 |
setValue("latitude", address_component.latitude);
|
|
|
74 |
setValue("longitude", address_component.longitude);
|
|
|
75 |
break;
|
|
|
76 |
default:
|
|
|
77 |
break;
|
|
|
78 |
}
|
|
|
79 |
});
|
|
|
80 |
isAddressEmpty.current = false;
|
|
|
81 |
clearErrors("formatted_address");
|
|
|
82 |
} else {
|
|
|
83 |
isAddressEmpty.current = true;
|
|
|
84 |
}
|
|
|
85 |
setValue("formatted_address", addresObject.formatted_address);
|
|
|
86 |
};
|
|
|
87 |
|
|
|
88 |
const onSubmitHandler = async (data) => {
|
|
|
89 |
setModalLoading(true);
|
|
|
90 |
const formData = new FormData();
|
|
|
91 |
Object.entries(data).map(([key, value]) => {
|
|
|
92 |
formData.append(key, value);
|
|
|
93 |
});
|
|
|
94 |
await axios
|
|
|
95 |
.post(`/profile/my-profiles/location/${userIdEncrypted}`, formData)
|
|
|
96 |
.then((response) => {
|
|
|
97 |
const resData = response.data;
|
|
|
98 |
(resData);
|
|
|
99 |
if (resData.success) {
|
|
|
100 |
setSettedAddress(resData.data.formatted_address);
|
|
|
101 |
handleModalOpen();
|
|
|
102 |
} else {
|
|
|
103 |
const resError = resData.data;
|
|
|
104 |
if (resError.constructor.name === "Object") {
|
|
|
105 |
Object.entries(resError).map(([key, value]) => {
|
|
|
106 |
if (key in getValues()) {
|
|
|
107 |
setError(key, {
|
|
|
108 |
type: "manual",
|
|
|
109 |
message: Array.isArray(value) ? value[0] : value,
|
|
|
110 |
});
|
|
|
111 |
}
|
|
|
112 |
});
|
|
|
113 |
} else {
|
|
|
114 |
dispatch(addNotification({ style: "danger", msg: resError }))
|
|
|
115 |
}
|
|
|
116 |
}
|
|
|
117 |
});
|
|
|
118 |
setModalLoading(false);
|
|
|
119 |
};
|
|
|
120 |
|
|
|
121 |
useEffect(() => {
|
|
|
122 |
addressKeys.current.map((addressKey) => {
|
|
|
123 |
register(addressKey);
|
|
|
124 |
});
|
|
|
125 |
register("formatted_address", {
|
|
|
126 |
required: "por favor seleccione una ubicación correcta",
|
|
|
127 |
});
|
|
|
128 |
}, []);
|
|
|
129 |
|
|
|
130 |
return (
|
|
|
131 |
<Modal
|
|
|
132 |
show={isModalOpen}
|
|
|
133 |
onHide={handleModalOpen}
|
|
|
134 |
style={{ overflowY: "scroll" }}
|
|
|
135 |
>
|
|
|
136 |
<Modal.Header closeButton>
|
|
|
137 |
<Modal.Title>Ubicación</Modal.Title>
|
|
|
138 |
</Modal.Header>
|
|
|
139 |
<form onSubmit={handleSubmit(onSubmitHandler)}>
|
|
|
140 |
<Modal.Body>
|
|
|
141 |
<div className="form-group datefm">
|
|
|
142 |
<UbicationInput
|
|
|
143 |
onGetAddress={getAddressHandler}
|
|
|
144 |
settedQuery={watch("formatted_address")}
|
|
|
145 |
/>
|
|
|
146 |
<i className="fa fa-map-marker"></i>
|
|
|
147 |
{errors.formatted_address && (
|
|
|
148 |
<FormErrorFeedback>
|
|
|
149 |
{errors.formatted_address.message}
|
|
|
150 |
</FormErrorFeedback>
|
|
|
151 |
)}
|
|
|
152 |
</div>
|
|
|
153 |
</Modal.Body>
|
|
|
154 |
<Modal.Footer>
|
|
|
155 |
<Button size="sm" type="submit">Enviar</Button>
|
|
|
156 |
<Button size="sm" variant="danger" onClick={handleModalOpen}>
|
|
|
157 |
Cancelar
|
|
|
158 |
</Button>
|
|
|
159 |
</Modal.Footer>
|
|
|
160 |
</form>
|
|
|
161 |
{modalLoading && <Spinner />}
|
|
|
162 |
</Modal>
|
|
|
163 |
)
|
|
|
164 |
}
|
|
|
165 |
|
|
|
166 |
export default LocationModal
|