|
|
@ -1,6 +1,6 @@ |
|
|
|
import React, { useState, useEffect } from "react"; |
|
|
|
import React, { useState, useEffect } from "react"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { publicApi, userAddress, dialog } from "../../redux/actions"; |
|
|
|
import { publicApi, userAddress, dialog, user } from "../../redux/actions"; |
|
|
|
import onInput from "../../utils/onInput"; |
|
|
|
import onInput from "../../utils/onInput"; |
|
|
|
import Input from "../../components/Input"; |
|
|
|
import Input from "../../components/Input"; |
|
|
|
import Select from "../../components/Select"; |
|
|
|
import Select from "../../components/Select"; |
|
|
@ -26,7 +26,12 @@ export const Address = ({ |
|
|
|
cityLoading, |
|
|
|
cityLoading, |
|
|
|
isMobile, |
|
|
|
isMobile, |
|
|
|
isDark, |
|
|
|
isDark, |
|
|
|
setDialog |
|
|
|
setDialog, |
|
|
|
|
|
|
|
profilePage, |
|
|
|
|
|
|
|
setProfileFields, |
|
|
|
|
|
|
|
profileFields, |
|
|
|
|
|
|
|
setProfile, |
|
|
|
|
|
|
|
user, |
|
|
|
}) => { |
|
|
|
}) => { |
|
|
|
const [addressFields, setAddressFields] = useState({}); |
|
|
|
const [addressFields, setAddressFields] = useState({}); |
|
|
|
const [mapAddress, setMapAddress] = useState(null); |
|
|
|
const [mapAddress, setMapAddress] = useState(null); |
|
|
@ -42,7 +47,7 @@ export const Address = ({ |
|
|
|
getCity({ |
|
|
|
getCity({ |
|
|
|
provinceId: provinces.filter( |
|
|
|
provinceId: provinces.filter( |
|
|
|
(province) => province.name === addressFields?.provinceId |
|
|
|
(province) => province.name === addressFields?.provinceId |
|
|
|
)[0].id, |
|
|
|
)[0]?.id, |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}, [addressFields]); |
|
|
|
}, [addressFields]); |
|
|
@ -51,6 +56,35 @@ export const Address = ({ |
|
|
|
setAddressFields({ ...addressFields, [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 submit = () => { |
|
|
|
const { |
|
|
|
const { |
|
|
|
firstName, |
|
|
|
firstName, |
|
|
@ -144,7 +178,7 @@ export const Address = ({ |
|
|
|
address: mapAddress, |
|
|
|
address: mapAddress, |
|
|
|
provinceId: provinces.filter( |
|
|
|
provinceId: provinces.filter( |
|
|
|
(province) => province.name === provinceId |
|
|
|
(province) => province.name === provinceId |
|
|
|
)[0].id, |
|
|
|
)[0]?.id, |
|
|
|
cityId: cities.filter((city) => city.name === cityId)[0]?.id, |
|
|
|
cityId: cities.filter((city) => city.name === cityId)[0]?.id, |
|
|
|
postalCode, |
|
|
|
postalCode, |
|
|
|
location: null, |
|
|
|
location: null, |
|
|
@ -170,6 +204,7 @@ export const Address = ({ |
|
|
|
className="flex flex-col lg:flex-row-reverse flex-1 pt-10 lg:pt-0 pb-20 gap-5 lg:divide-x lg:divide-solid lg:divide-gray-200" |
|
|
|
className="flex flex-col lg:flex-row-reverse flex-1 pt-10 lg:pt-0 pb-20 gap-5 lg:divide-x lg:divide-solid lg:divide-gray-200" |
|
|
|
// style={{ minHeight: "calc(100vh - 500px)" }}
|
|
|
|
// style={{ minHeight: "calc(100vh - 500px)" }}
|
|
|
|
> |
|
|
|
> |
|
|
|
|
|
|
|
{!profilePage && ( |
|
|
|
<div className="flex flex-col w-full lg:w-1/2"> |
|
|
|
<div className="flex flex-col w-full lg:w-1/2"> |
|
|
|
<Input |
|
|
|
<Input |
|
|
|
width="100%" |
|
|
|
width="100%" |
|
|
@ -212,7 +247,13 @@ export const Address = ({ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="flex flex-col w-full lg:w-1/2 lg:pl-4"> |
|
|
|
)} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
className={`flex flex-col w-full lg:w-1/2 lg:pl-4 ${ |
|
|
|
|
|
|
|
profilePage ? "mx-auto" : "" |
|
|
|
|
|
|
|
}`}
|
|
|
|
|
|
|
|
> |
|
|
|
<Header |
|
|
|
<Header |
|
|
|
title="اطلاعات هویتی" |
|
|
|
title="اطلاعات هویتی" |
|
|
|
text="( لطفا نام و نام خانوادگی خود را به طور کامل وارد نمایید )" |
|
|
|
text="( لطفا نام و نام خانوادگی خود را به طور کامل وارد نمایید )" |
|
|
@ -223,8 +264,16 @@ export const Address = ({ |
|
|
|
label={"نام"} |
|
|
|
label={"نام"} |
|
|
|
regex={(val) => val} |
|
|
|
regex={(val) => val} |
|
|
|
name="firstName" |
|
|
|
name="firstName" |
|
|
|
onChange={(name, value) => onChange(name, value)} |
|
|
|
onChange={(name, value) => |
|
|
|
value={addressFields?.firstName} |
|
|
|
profilePage |
|
|
|
|
|
|
|
? setProfileFields({ ...profileFields, firstName: value }) |
|
|
|
|
|
|
|
: onChange(name, value) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
value={ |
|
|
|
|
|
|
|
profilePage |
|
|
|
|
|
|
|
? profileFields.firstName || user.firstName |
|
|
|
|
|
|
|
: addressFields?.firstName |
|
|
|
|
|
|
|
} |
|
|
|
align="text-right" |
|
|
|
align="text-right" |
|
|
|
direction="rtl" |
|
|
|
direction="rtl" |
|
|
|
/> |
|
|
|
/> |
|
|
@ -233,12 +282,34 @@ export const Address = ({ |
|
|
|
label={"نام خانوادگی"} |
|
|
|
label={"نام خانوادگی"} |
|
|
|
regex={(val) => val} |
|
|
|
regex={(val) => val} |
|
|
|
name="lastName" |
|
|
|
name="lastName" |
|
|
|
onChange={(name, value) => onChange(name, value)} |
|
|
|
onChange={(name, value) => |
|
|
|
value={addressFields?.lastName} |
|
|
|
profilePage |
|
|
|
|
|
|
|
? setProfileFields({ ...profileFields, lastName: value }) |
|
|
|
|
|
|
|
: onChange(name, value) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
value={ |
|
|
|
|
|
|
|
profilePage |
|
|
|
|
|
|
|
? profileFields.lastName || user.lastName |
|
|
|
|
|
|
|
: addressFields?.lastName |
|
|
|
|
|
|
|
} |
|
|
|
align="text-right" |
|
|
|
align="text-right" |
|
|
|
direction="rtl" |
|
|
|
direction="rtl" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</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 && ( |
|
|
|
{!isMobile && ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<br /> |
|
|
|
<br /> |
|
|
@ -254,10 +325,18 @@ export const Address = ({ |
|
|
|
<Input |
|
|
|
<Input |
|
|
|
width={isMobile ? "100%" : "50%"} |
|
|
|
width={isMobile ? "100%" : "50%"} |
|
|
|
label={"شماره موبایل"} |
|
|
|
label={"شماره موبایل"} |
|
|
|
regex={(val) => onInput.numberOnly(val)} |
|
|
|
regex={(val) => onInput.phonenumber(val)} |
|
|
|
name="cellphone" |
|
|
|
name="cellphone" |
|
|
|
onChange={(name, value) => onChange(name, value)} |
|
|
|
value={ |
|
|
|
value={addressFields?.cellphone} |
|
|
|
profilePage |
|
|
|
|
|
|
|
? profileFields.cellphone || user.cellphone |
|
|
|
|
|
|
|
: addressFields?.cellphone |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
onChange={(name, value) => |
|
|
|
|
|
|
|
profilePage |
|
|
|
|
|
|
|
? setProfileFields({ ...profileFields, cellphone: value }) |
|
|
|
|
|
|
|
: onChange(name, value) |
|
|
|
|
|
|
|
} |
|
|
|
align="text-right" |
|
|
|
align="text-right" |
|
|
|
direction="ltr" |
|
|
|
direction="ltr" |
|
|
|
maxLength={11} |
|
|
|
maxLength={11} |
|
|
@ -267,8 +346,16 @@ export const Address = ({ |
|
|
|
label={"شماره تلفن"} |
|
|
|
label={"شماره تلفن"} |
|
|
|
regex={(val) => onInput.numberOnly(val)} |
|
|
|
regex={(val) => onInput.numberOnly(val)} |
|
|
|
name="phone" |
|
|
|
name="phone" |
|
|
|
onChange={(name, value) => onChange(name, value)} |
|
|
|
value={ |
|
|
|
value={addressFields?.phone} |
|
|
|
profilePage |
|
|
|
|
|
|
|
? profileFields.phone || user.phone |
|
|
|
|
|
|
|
: addressFields?.phone |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
onChange={(name, value) => |
|
|
|
|
|
|
|
profilePage |
|
|
|
|
|
|
|
? setProfileFields({ ...profileFields, phone: value }) |
|
|
|
|
|
|
|
: onChange(name, value) |
|
|
|
|
|
|
|
} |
|
|
|
align="text-right" |
|
|
|
align="text-right" |
|
|
|
direction="ltr" |
|
|
|
direction="ltr" |
|
|
|
maxLength={11} |
|
|
|
maxLength={11} |
|
|
@ -289,10 +376,23 @@ export const Address = ({ |
|
|
|
<Select |
|
|
|
<Select |
|
|
|
options={province} |
|
|
|
options={province} |
|
|
|
name="provinceId" |
|
|
|
name="provinceId" |
|
|
|
onChange={(name, value) => onChange(name, value)} |
|
|
|
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"} |
|
|
|
width={isMobile ? "w-full" : "w-1/2"} |
|
|
|
backgroundColor={ |
|
|
|
backgroundColor={ |
|
|
|
isDark ? "dark:bg-transparent dark:text-white" : "" |
|
|
|
isDark ? "dark:bg-transparent dark:text-white" : "bg-white" |
|
|
|
} |
|
|
|
} |
|
|
|
fill={isDark ? "fill-white" : "fill-gray-600"} |
|
|
|
fill={isDark ? "fill-white" : "fill-gray-600"} |
|
|
|
/> |
|
|
|
/> |
|
|
@ -300,10 +400,23 @@ export const Address = ({ |
|
|
|
<Select |
|
|
|
<Select |
|
|
|
options={city} |
|
|
|
options={city} |
|
|
|
name="cityId" |
|
|
|
name="cityId" |
|
|
|
onChange={(name, value) => onChange(name, value)} |
|
|
|
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"} |
|
|
|
width={isMobile ? "w-full" : "w-1/2"} |
|
|
|
backgroundColor={ |
|
|
|
backgroundColor={ |
|
|
|
isDark ? "dark:bg-transparent dark:text-white" : "" |
|
|
|
isDark ? "dark:bg-transparent dark:text-white" : "bg-white" |
|
|
|
} |
|
|
|
} |
|
|
|
fill={isDark ? "fill-white" : "fill-gray-600"} |
|
|
|
fill={isDark ? "fill-white" : "fill-gray-600"} |
|
|
|
/> |
|
|
|
/> |
|
|
@ -326,22 +439,37 @@ export const Address = ({ |
|
|
|
label={"کد پستی"} |
|
|
|
label={"کد پستی"} |
|
|
|
regex={(val) => onInput.numberOnly(val)} |
|
|
|
regex={(val) => onInput.numberOnly(val)} |
|
|
|
name="postalCode" |
|
|
|
name="postalCode" |
|
|
|
onChange={(name, value) => onChange(name, value)} |
|
|
|
value={ |
|
|
|
value={addressFields?.postalCode} |
|
|
|
profilePage |
|
|
|
|
|
|
|
? profileFields.postalCode || user.postalCode |
|
|
|
|
|
|
|
: addressFields?.postalCode |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
onChange={(name, value) => |
|
|
|
|
|
|
|
profilePage |
|
|
|
|
|
|
|
? setProfileFields({ ...profileFields, postalCode: value }) |
|
|
|
|
|
|
|
: onChange(name, value) |
|
|
|
|
|
|
|
} |
|
|
|
align="text-right" |
|
|
|
align="text-right" |
|
|
|
direction="ltr" |
|
|
|
direction="ltr" |
|
|
|
maxLength={10} |
|
|
|
maxLength={10} |
|
|
|
/> |
|
|
|
/> |
|
|
|
<div className="flex lg:hidden flex-col items-cente w-full mt-3"> |
|
|
|
<div |
|
|
|
|
|
|
|
className={`flex ${ |
|
|
|
|
|
|
|
profilePage ? "mt-10" : "lg:hidden" |
|
|
|
|
|
|
|
} flex-col items-end w-full mt-3`}
|
|
|
|
|
|
|
|
> |
|
|
|
<Button |
|
|
|
<Button |
|
|
|
loading={loading} |
|
|
|
loading={loading} |
|
|
|
title="ثبت آدرس" |
|
|
|
title={ |
|
|
|
|
|
|
|
!profilePage ? "ذخیره اطلاعات و بازگشت به صفحه قبل" : "ارسال" |
|
|
|
|
|
|
|
} |
|
|
|
backgroundColor="bg-blueC0" |
|
|
|
backgroundColor="bg-blueC0" |
|
|
|
border={{ color: "#196EC055", width: "0px" }} |
|
|
|
border={{ color: "#196EC055", width: "0px" }} |
|
|
|
width="100%" |
|
|
|
width={profilePage ? '30%' : '100%'} |
|
|
|
color="text-white" |
|
|
|
color="text-white" |
|
|
|
onClick={() => submit()} |
|
|
|
onClick={() => (profilePage ? submitProfile() : submit())} |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
{!profilePage && ( |
|
|
|
<button |
|
|
|
<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" |
|
|
|
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")} |
|
|
|
onClick={() => setPhase("deliveryForm")} |
|
|
@ -353,6 +481,7 @@ export const Address = ({ |
|
|
|
className="w-3.5 transform rotate-90" |
|
|
|
className="w-3.5 transform rotate-90" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</button> |
|
|
|
</button> |
|
|
|
|
|
|
|
)} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{isMobile && ( |
|
|
|
{isMobile && ( |
|
|
@ -383,9 +512,11 @@ const mapStateToProps = (state) => ({ |
|
|
|
provinces: state.publicApi.provinces, |
|
|
|
provinces: state.publicApi.provinces, |
|
|
|
cities: state.publicApi.cities, |
|
|
|
cities: state.publicApi.cities, |
|
|
|
loading: state.userAddress.loading, |
|
|
|
loading: state.userAddress.loading, |
|
|
|
|
|
|
|
user: state.user.status, |
|
|
|
cityLoading: state.publicApi.loading, |
|
|
|
cityLoading: state.publicApi.loading, |
|
|
|
isMobile: state.publicApi.isMobile, |
|
|
|
isMobile: state.publicApi.isMobile, |
|
|
|
isDark: state.publicApi.isDark, |
|
|
|
isDark: state.publicApi.isDark, |
|
|
|
|
|
|
|
profileFields: state.user.profileFields, |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = { |
|
|
|
const mapDispatchToProps = { |
|
|
@ -393,6 +524,8 @@ const mapDispatchToProps = { |
|
|
|
getCity: publicApi.getCity, |
|
|
|
getCity: publicApi.getCity, |
|
|
|
createAddress: userAddress.add, |
|
|
|
createAddress: userAddress.add, |
|
|
|
setDialog: dialog.set, |
|
|
|
setDialog: dialog.set, |
|
|
|
|
|
|
|
setProfileFields: user.setProfileFields, |
|
|
|
|
|
|
|
setProfile: user.setProfile, |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Address); |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Address); |
|
|
|