import React, { useState, useEffect } from "react"; import { connect } from "react-redux"; import { useNavigate } from "react-router-dom"; import { publicApi, userAddress, dialog, user } from "../../redux/actions"; import onInput from "../../utils/onInput"; import location from "../../utils/location"; import Input from "../../components/Input"; import Select from "../../components/Select"; import Button from "../../components/Button"; import ReverseMap from "../../components/ReverseMap"; import Loading from "../../components/Loading"; //assets import dropdownIcon from "../../assets/icons/dropdown-blue.svg"; import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg"; import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg"; export const Address = ({ city, province, getCity, getProvince, provinces, cities, createAddress, loading, setPhase, cityLoading, isMobile, isDark, setDialog, profilePage, editPage, setProfileFields, profileFields, setProfile, user, setHeaderOptions, headerOptions, getAddress, addressInfo, updateAddress, }) => { const [addressFields, setAddressFields] = useState({}); const [mapAddress, setMapAddress] = useState(null); const navigation = useNavigate(); useEffect(() => { if (province.length <= 1) { getProvince(); } if (isMobile) { if (editPage || profilePage) { setHeaderOptions(headerOptions); } else { setHeaderOptions({ shown: true, back: true, title: "آدرس جدید" }); } } if (editPage) { getAddress({ id: location.getId() }); } }, []); useEffect(() => { if (editPage && addressInfo) { const { firstName, lastName, cellphone, phone, provinceId, address, cityId, postalCode, } = addressInfo; setAddressFields({ firstName, lastName, cellphone, phone, provinceId, cityId, postalCode, }); setMapAddress(address); } }, [addressInfo]); useEffect(() => { console.log({ addressFields }); if (addressFields?.provinceId) { getCity({ provinceId: provinces.filter( (province) => province.name === addressFields?.provinceId )[0]?.id, }); } }, [addressFields]); useEffect(() => { console.log({ profileFields }); if (profileFields?.provinceId) { getCity({ provinceId: provinces.filter( (province) => province.name === profileFields?.provinceId )[0]?.id, }); } }, [profileFields]); const onChange = (name, value) => { setAddressFields({ ...addressFields, [name]: value }); }; const submitProfile = () => { const data = { firstName: profileFields?.firstName || user.firstName, lastName: profileFields?.lastName || user.lastName, username: profileFields?.username || user.username, cellphone: user.cellphone, password: profileFields?.password || user.password, postalCode: profileFields?.postalCode || user.postalCode, address: profileFields?.address || user.address, email: profileFields?.email || user.email, phone: profileFields?.phone || user.phone, nationalId: profileFields?.nationalId || user.nationalId, picFileId: profileFields?.picFileId || user.picFileId, gender: profileFields?.gender || user.gender, birthDate: profileFields?.birthDate || user.birthDate, schools: profileFields?.schools || user.schools, gradeIds: profileFields?.gradeIds || user.gradeIds, provinceId: provinces.filter( (province) => province.name === profileFields?.provinceId )[0]?.id || user.provinceId, cityId: cities.filter((city) => city.name === profileFields?.cityId)[0]?.id || user.cityId, docFileIds: profileFields?.docFileIds || user.docFileIds, }; setProfile(data); }; const submit = () => { const { firstName, lastName, cellphone, phone, address, provinceId, cityId, postalCode, } = addressFields; if (!firstName) { setDialog({ text: "نام خود را وارد کنید.", type: "alert", accept: () => {}, open: true, }); return; } if (!lastName) { setDialog({ text: "نام خانوادگی خود را وارد کنید.", type: "alert", accept: () => {}, open: true, }); return; } if (!cellphone) { setDialog({ text: "شماره موبایل خود را وارد کنید.", type: "alert", accept: () => {}, open: true, }); return; } if (!phone) { setDialog({ text: "شماره تلفن خود را وارد کنید.", type: "alert", accept: () => {}, open: true, }); return; } if (!provinceId) { setDialog({ text: "نام استان خود را وارد کنید.", type: "alert", accept: () => {}, open: true, }); return; } if (!cityId) { setDialog({ text: "نام شهرستان خود را وارد کنید.", type: "alert", accept: () => {}, open: true, }); return; } if (!postalCode) { setDialog({ text: "کد پستی خود را وارد کنید.", type: "alert", accept: () => {}, open: true, }); return; } if (!mapAddress) { setDialog({ text: "آدرس خود را از روی نقشه انتخاب کن", type: "alert", accept: () => {}, open: true, }); return; } if (editPage) { updateAddress({ id: addressInfo.id, firstName, lastName, cellphone, phone, address: mapAddress, provinceId: typeof provinceId === "number" ? provinceId : provinces.filter((province) => province.name === provinceId)[0] ?.id, cityId: typeof cityId === "number" ? cityId : cities.filter((city) => city.name === cityId)[0]?.id, postalCode, location: null, }); } else { createAddress({ firstName, lastName, cellphone, phone, address: mapAddress, provinceId: typeof provinceId === "number" ? provinceId : provinces.filter((province) => province.name === provinceId)[0] ?.id, cityId: typeof cityId === "number" ? cityId : cities.filter((city) => city.name === cityId)[0]?.id, postalCode, location: null, }); } if (editPage) { navigation(-1); } else { setPhase("deliveryForm"); } }; const Header = ({ title, text }) => { return (
{text}