You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

624 lines
18 KiB

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 (
<div className="flex flex-col lg:flex-row lg:items-center gap-2 lg:mb-4 mt-2 lg:mt-0">
<strong className="text-green4F text-base dark:text-white">
{title}
</strong>
<p className="mt-1 inline flex-1 text-sm text-gray70 dark:text-white">
{text}
</p>
</div>
);
};
return (
<div
className="flex flex-col lg:flex-row-reverse px-4 flex-1 lg:pt-0 pb-20 gap-5 lg:divide-x lg:divide-solid lg:divide-gray-200"
// style={{ minHeight: "calc(100vh - 500px)" }}
>
{!profilePage && (
<div className="flex flex-col w-full lg:w-1/2">
<Input
width="100%"
label={"ادرس انتخاب شده در نقشه"}
regex={(val) => onInput.numberOnly(val)}
name="address"
onChange={(name, value) => setMapAddress(value)}
value={mapAddress}
align="text-right"
direction="rtl"
/>
<div
className="w-full overflow-hidden rounded-md mt-6"
style={{ height: isMobile ? "calc(100vh / 4)" : "calc(100vh / 2)" }}
>
<ReverseMap setAddress={(val) => setMapAddress(val)} />
</div>
<div className="hidden lg:flex w-full items-end mt-8 flex-col">
<div className="flex flex-col items-cente w-2/5">
<Button
loading={loading}
title="ثبت آدرس"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "0px" }}
width="100%"
color="text-white"
onClick={() => submit()}
/>
<button
className="bg-transparent mt-4 text-tiny py-3 flex flex-row justify-center items-center border border-solid border-blueC0 text-green7B rounded-full"
onClick={() => setPhase("deliveryForm")}
>
بازگشت
<img
src={dropdownIcon}
alt=""
className="w-3.5 transform rotate-90"
/>
</button>
</div>
</div>
</div>
)}
<div
className={`flex flex-col w-full lg:w-1/2 lg:pl-4 ${
profilePage ? "mx-auto" : ""
}`}
>
<Header
title="اطلاعات هویتی"
text="( لطفا نام و نام خانوادگی خود را به طور کامل وارد نمایید )"
/>
<div className="flex flex-col lg:flex-row items-center lg:gap-5 w-full">
<Input
width={isMobile ? "100%" : "50%"}
label={"نام"}
regex={(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"
/>
<Input
width={isMobile ? "100%" : "50%"}
label={"نام خانوادگی"}
regex={(val) => 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"
/>
</div>
{profilePage && (
<Input
width={isMobile ? "100%" : "50%"}
label={"کد ملی"}
regex={(val) => onInput.phonenumber(val)}
name="nationalId"
onChange={(name, value) =>
setProfileFields({ ...profileFields, nationalId: value })
}
value={profileFields.nationalId || user.nationalId}
align="text-right"
direction="ltr"
/>
)}
{!isMobile && (
<>
<br />
<br />
</>
)}
<Header
title="شماره تماس"
text="( شماره موبایل و شماره تلفن ثابت خود را
به همراه پیش شماره وارد کنید )"
/>
<div className="flex flex-col lg:flex-row items-center lg:gap-5 w-full">
<Input
width={isMobile ? "100%" : "50%"}
label={"شماره موبایل"}
regex={(val) => 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}
/>
<Input
width={isMobile ? "100%" : "50%"}
label={"شماره تلفن"}
regex={(val) => 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}
/>
</div>
{!isMobile && (
<>
<br />
<br />
</>
)}
<Header
title="آدرس"
text="( لطفا نام استان و شهرستان و آدرس
خود را با دقت تکمیل نمایید )"
/>
<div className="flex flex-col lg:flex-row items-center gap-3 lg:gap-5 w-full mt-3">
{console.log(city)}
<Select
options={province}
name="provinceId"
defaultValue={
profilePage
? provinces?.filter(
(province) => province?.id === profileFields.provinceId
)[0]?.name || province[0]
: city[0]
}
onChange={(name, value) =>
value === "استان"
? {}
: profilePage
? setProfileFields({ ...profileFields, provinceId: 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"}
/>
{!cityLoading ? (
// <div>fdfds</div>
<Select
options={city}
name="cityId"
defaultValue={
profilePage
? cities?.filter(
(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"}
/>
) : (
<div className="flex justify-between border-gray-300 border border-solid rounded-md w-1/2 py-3.5 px-2">
<Loading size={3.5} color="bg-gray-500" />
<svg
className={`'bg-gray-400 h-5 w-5`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
</svg>
</div>
)}
</div>
<br />
<Input
width={isMobile ? "100%" : "50%"}
label={"کد پستی"}
regex={(val) => 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}
/>
<div
className={`flex ${
profilePage ? "mt-10" : "lg:hidden"
} flex-col items-end w-full mt-3`}
>
<Button
loading={loading}
title={
!profilePage ? "ذخیره اطلاعات و بازگشت به صفحه قبل" : "ارسال"
}
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "0px" }}
width={profilePage ? "30%" : "100%"}
color="text-white"
onClick={() => (profilePage ? submitProfile() : submit())}
/>
{!isMobile && (
<button
className="bg-transparent mt-4 text-base py-3 flex flex-row justify-center items-center border-2 border-solid border-blueC0 text-green7B dark:text-blueC0 rounded-full"
onClick={() => setPhase("deliveryForm")}
>
بازگشت
<img
src={dropdownIcon}
alt=""
className="w-3.5 transform rotate-90"
/>
</button>
)}
</div>
</div>
{/* {isMobile && (
<div
className="fixed top-0 left-0 flex justify-between items-center py-3 px-4 w-full"
style={{
backgroundColor: isDark ? "#061B30" : "white",
}}
>
<strong className="text-green4F text-lg font-semibold dark:text-white">
آدرس جدید
</strong>
<img
src={isDark ? arrowWhiteIcon : arrowBlueIcon}
alt="back"
className={`w-6 transform ${isDark ? " rotate-0" : "rotate-180"}`}
onClick={() => setPhase("deliveryForm")}
/>
</div>
)} */}
</div>
);
};
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);