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 (
{title}

{text}

); }; return (
{!profilePage && (
onInput.numberOnly(val)} name="address" onChange={(name, value) => setMapAddress(value)} value={mapAddress} align="text-right" direction="rtl" />
setMapAddress(val)} />
)}
val} name="firstName" onChange={(name, value) => profilePage ? setProfileFields({ ...profileFields, firstName: value }) : onChange(name, value) } value={ profilePage ? profileFields.firstName || user.firstName : addressFields?.firstName } align="text-right" direction="rtl" /> val} name="lastName" onChange={(name, value) => profilePage ? setProfileFields({ ...profileFields, lastName: value }) : onChange(name, value) } value={ profilePage ? profileFields.lastName || user.lastName : addressFields?.lastName } align="text-right" direction="rtl" />
{profilePage && ( onInput.phonenumber(val)} name="nationalId" onChange={(name, value) => setProfileFields({ ...profileFields, nationalId: value }) } value={profileFields.nationalId || user.nationalId} align="text-right" direction="ltr" /> )} {!isMobile && ( <>

)}
onInput.phonenumber(val)} name="cellphone" value={ profilePage ? profileFields.cellphone || user.cellphone : addressFields?.cellphone } onChange={(name, value) => profilePage ? setProfileFields({ ...profileFields, cellphone: value }) : onChange(name, value) } align="text-right" direction="ltr" maxLength={11} /> onInput.numberOnly(val)} name="phone" value={ profilePage ? profileFields.phone || user.phone : addressFields?.phone } onChange={(name, value) => profilePage ? setProfileFields({ ...profileFields, phone: value }) : onChange(name, value) } align="text-right" direction="ltr" maxLength={11} />
{!isMobile && ( <>

)}
{console.log(city)} city?.id === profileFields.cityId )[0]?.name || city[0] : city[0] } onChange={(name, value) => value === "شهر" ? {} : profilePage ? setProfileFields({ ...profileFields, cityId: value }) : onChange(name, value) } width={isMobile ? "w-full" : "w-1/2"} backgroundColor={ isDark ? "dark:bg-transparent dark:text-white" : "bg-white" } fill={isDark ? "fill-white" : "fill-gray-600"} /> ) : (
)}

onInput.numberOnly(val)} name="postalCode" value={ profilePage ? profileFields.postalCode || user.postalCode : addressFields?.postalCode } onChange={(name, value) => profilePage ? setProfileFields({ ...profileFields, postalCode: value }) : onChange(name, value) } align="text-right" direction="ltr" maxLength={10} />
)}
{/* {isMobile && (
آدرس جدید back setPhase("deliveryForm")} />
)} */}
); }; const mapStateToProps = (state) => ({ province: state.publicApi.province, city: state.publicApi.city, provinces: state.publicApi.provinces, cities: state.publicApi.cities, loading: state.userAddress.loading, user: state.user.status, cityLoading: state.publicApi.loading, isMobile: state.publicApi.isMobile, isDark: state.publicApi.isDark, profileFields: state.user.profileFields, addressInfo: state.userAddress.info, }); const mapDispatchToProps = { getProvince: publicApi.getProvince, getCity: publicApi.getCity, createAddress: userAddress.add, updateAddress: userAddress.update, getAddress: userAddress.info, setDialog: dialog.set, setProfileFields: user.setProfileFields, setProfile: user.setProfile, setHeaderOptions: publicApi.setHeaderOptions, }; export default connect(mapStateToProps, mapDispatchToProps)(Address);