import React, { useState, useEffect } from "react"; import { connect } from "react-redux"; import { useNavigate, useLocation } 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"; import Radio from "../../components/Radio"; //assets import dropdownIcon from "../../assets/icons/white-dropdown.svg"; import lightGreenArrow from "../../assets/icons/light-green-arrow.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(); console.log({ provinces }); useEffect(() => { setHeaderOptions(headerOptions); if (province.length <= 1) { getProvince(); } if (isMobile) { if (editPage || profilePage) { setHeaderOptions(headerOptions); } else { setHeaderOptions({ shown: true, back: true, title: window.t("اطلاعات هویتی"), }); } } 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(() => { if (addressFields?.provinceId) { console.log({ addressFields }); getCity({ provinceId: addressFields?.provinceId, }); } }, [addressFields]); useEffect(() => { if (profileFields?.provinceId) { getCity({ provinceId: profileFields?.provinceId, }); } }, [profileFields]); const onChange = (name, value) => { console.log({ name, value }); setAddressFields({ ...addressFields, [name]: value }); }; const submitProfile = () => { if (user.cellphone && user.cellphone.length < 11) { setDialog({ text: window.t("شماره موبایل خود را وارد کنید."), type: "alert", accept: () => {}, open: true, }); return; } const postalCode = profileFields?.postalCode || user.postalCode; if (postalCode && postalCode.length < 10) { setDialog({ text: window.t("شماره کد پستی خود را وارد کنید."), type: "alert", accept: () => {}, open: true, }); return; } 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, 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: profileFields?.provinceId || user.provinceId, cityId: profileFields?.cityId || user.cityId, docFileIds: profileFields?.docFileIds || user.docFileIds, }; setProfile(data); }; const [activeCheckbox, setActiveCheckbox] = useState(true); const submit = () => { const { firstName, lastName, cellphone, phone, address, provinceId, cityId, postalCode, } = addressFields; if (!activeCheckbox && !firstName) { setDialog({ text: window.t("نام خود را وارد کنید."), type: "alert", accept: () => {}, open: true, }); return; } if (!activeCheckbox && !lastName) { setDialog({ text: window.t("نام خانوادگی خود را وارد کنید."), type: "alert", accept: () => {}, open: true, }); return; } if (!activeCheckbox && (!cellphone || cellphone.length < 11)) { setDialog({ text: window.t("شماره موبایل خود را وارد کنید."), type: "alert", accept: () => {}, open: true, }); return; } if (!activeCheckbox && !phone) { setDialog({ text: window.t("شماره تلفن خود را وارد کنید."), type: "alert", accept: () => {}, open: true, }); return; } if (!provinceId) { setDialog({ text: window.t("نام استان خود را وارد کنید."), type: "alert", accept: () => {}, open: true, }); return; } if (!cityId) { setDialog({ text: window.t("نام شهرستان خود را وارد کنید."), type: "alert", accept: () => {}, open: true, }); return; } if (!postalCode || postalCode.length < 10) { setDialog({ text: window.t("کد پستی خود را وارد کنید."), type: "alert", accept: () => {}, open: true, }); return; } if (!mapAddress) { setDialog({ text: window.t("آدرس خود را از روی نقشه انتخاب کن"), type: "alert", accept: () => {}, open: true, }); return; } if (editPage) { updateAddress({ id: addressInfo.id, firstName, lastName, cellphone, phone, address: mapAddress, provinceId, cityId, postalCode, location: null, }); } else { createAddress({ firstName, lastName, cellphone, phone, address: mapAddress, provinceId, cityId, postalCode, location: null, }); } if (editPage) { navigation(-1); } else { setPhase("deliveryForm"); } }; const Header = ({ title, text }) => { return (
{title}

{text}

); }; console.log({ state: location?.state }); return (
{!profilePage && (
onInput.numberOnly(val)} name="address" onChange={(name, value) => setMapAddress(value)} value={mapAddress} align="text-right" direction="rtl" />
setMapAddress(val)} />
)}
{!profilePage && ( <>
{/* my self */}
{ setActiveCheckbox(true); }} >

{window.t("برای خودم")}

{/* someone else */}
{ setActiveCheckbox(false); }} >

{window.t("گیرنده فرد دیگری است")}

)} {profilePage || activeCheckbox === false ? ( <>
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" />
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} />
) : null} {profilePage && ( onInput.phonenumber(val)} name="nationalId" onChange={(name, value) => setProfileFields({ ...profileFields, nationalId: value }) } value={profileFields.nationalId || user.nationalId} align="text-right" direction="ltr" /> )} {!isMobile && <>} {!isMobile && <>}
({ value: e.id, name: e.name }))} name="cityId" defaultValue={ profilePage ? profileFields.cityId || cities[0]?.id : cities[0]?.id } onChange={(name, value) => value === window.t("شهر") ? {} : 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} />
)}
); }; 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);