|
|
|
|
@ -11,6 +11,8 @@ 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, |
|
|
|
|
@ -23,6 +25,8 @@ export const Address = ({ |
|
|
|
|
loading, |
|
|
|
|
setPhase, |
|
|
|
|
cityLoading, |
|
|
|
|
isMobile, |
|
|
|
|
isDark, |
|
|
|
|
}) => { |
|
|
|
|
const [addressFields, setAddressFields] = useState({}); |
|
|
|
|
const [mapAddress, setMapAddress] = useState(null); |
|
|
|
|
@ -73,8 +77,8 @@ export const Address = ({ |
|
|
|
|
type: "alert", |
|
|
|
|
setOpen: (val) => setDialog({ ...dialog, open: val }), |
|
|
|
|
accept: () => {}, |
|
|
|
|
bg: "bg-black bg-opacity-60", |
|
|
|
|
color: "text-white", |
|
|
|
|
bg: "bg-white dark:bg-black dark:bg-opacity-30", |
|
|
|
|
color: "text-gray70 dark:text-white", |
|
|
|
|
open: true, |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
@ -85,8 +89,8 @@ export const Address = ({ |
|
|
|
|
type: "alert", |
|
|
|
|
setOpen: (val) => setDialog({ ...dialog, open: val }), |
|
|
|
|
accept: () => {}, |
|
|
|
|
bg: "bg-black bg-opacity-60", |
|
|
|
|
color: "text-white", |
|
|
|
|
bg: "bg-white dark:bg-black dark:bg-opacity-30", |
|
|
|
|
color: "text-gray70 dark:text-white", |
|
|
|
|
open: true, |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
@ -97,8 +101,8 @@ export const Address = ({ |
|
|
|
|
type: "alert", |
|
|
|
|
setOpen: (val) => setDialog({ ...dialog, open: val }), |
|
|
|
|
accept: () => {}, |
|
|
|
|
bg: "bg-black bg-opacity-60", |
|
|
|
|
color: "text-white", |
|
|
|
|
bg: "bg-white dark:bg-black dark:bg-opacity-30", |
|
|
|
|
color: "text-gray70 dark:text-white", |
|
|
|
|
open: true, |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
@ -109,8 +113,8 @@ export const Address = ({ |
|
|
|
|
type: "alert", |
|
|
|
|
setOpen: (val) => setDialog({ ...dialog, open: val }), |
|
|
|
|
accept: () => {}, |
|
|
|
|
bg: "bg-black bg-opacity-60", |
|
|
|
|
color: "text-white", |
|
|
|
|
bg: "bg-white dark:bg-black dark:bg-opacity-30", |
|
|
|
|
color: "text-gray70 dark:text-white", |
|
|
|
|
open: true, |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
@ -121,8 +125,8 @@ export const Address = ({ |
|
|
|
|
type: "alert", |
|
|
|
|
setOpen: (val) => setDialog({ ...dialog, open: val }), |
|
|
|
|
accept: () => {}, |
|
|
|
|
bg: "bg-black bg-opacity-60", |
|
|
|
|
color: "text-white", |
|
|
|
|
bg: "bg-white dark:bg-black dark:bg-opacity-30", |
|
|
|
|
color: "text-gray70 dark:text-white", |
|
|
|
|
open: true, |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
@ -133,8 +137,8 @@ export const Address = ({ |
|
|
|
|
type: "alert", |
|
|
|
|
setOpen: (val) => setDialog({ ...dialog, open: val }), |
|
|
|
|
accept: () => {}, |
|
|
|
|
bg: "bg-black bg-opacity-60", |
|
|
|
|
color: "text-white", |
|
|
|
|
bg: "bg-white dark:bg-black dark:bg-opacity-30", |
|
|
|
|
color: "text-gray70 dark:text-white", |
|
|
|
|
open: true, |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
@ -145,8 +149,8 @@ export const Address = ({ |
|
|
|
|
type: "alert", |
|
|
|
|
setOpen: (val) => setDialog({ ...dialog, open: val }), |
|
|
|
|
accept: () => {}, |
|
|
|
|
bg: "bg-black bg-opacity-60", |
|
|
|
|
color: "text-white", |
|
|
|
|
bg: "bg-white dark:bg-black dark:bg-opacity-30", |
|
|
|
|
color: "text-gray70 dark:text-white", |
|
|
|
|
open: true, |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
@ -157,8 +161,8 @@ export const Address = ({ |
|
|
|
|
type: "alert", |
|
|
|
|
setOpen: (val) => setDialog({ ...dialog, open: val }), |
|
|
|
|
accept: () => {}, |
|
|
|
|
bg: "bg-black bg-opacity-60", |
|
|
|
|
color: "text-white", |
|
|
|
|
bg: "bg-white dark:bg-black dark:bg-opacity-30", |
|
|
|
|
color: "text-gray70 dark:text-white", |
|
|
|
|
open: true, |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
@ -183,18 +187,22 @@ export const Address = ({ |
|
|
|
|
|
|
|
|
|
const Header = ({ title, text }) => { |
|
|
|
|
return ( |
|
|
|
|
<div className="flex flex-row items-center gap-2 mb-4"> |
|
|
|
|
<strong className="text-blue5F text-base">{title}</strong> |
|
|
|
|
<p className="mt-1 inline flex-1 text-sm text-gray70">{text}</p> |
|
|
|
|
<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-row-reverse flex-1 pb-20 gap-5 divide-x divide-solid 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)" }}
|
|
|
|
|
> |
|
|
|
|
<div className="flex flex-col w-1/2 px-4"> |
|
|
|
|
<div className="flex flex-col-reverse w-full lg:w-1/2"> |
|
|
|
|
<Input |
|
|
|
|
width="100%" |
|
|
|
|
label={"ادرس انتخاب شده در نقشه"} |
|
|
|
|
@ -207,11 +215,11 @@ export const Address = ({ |
|
|
|
|
/> |
|
|
|
|
<div |
|
|
|
|
className="w-full overflow-hidden rounded-md mt-6" |
|
|
|
|
style={{ height: "calc(100vh / 2)" }} |
|
|
|
|
style={{ height: isMobile ? "calc(100vh / 4)" : "calc(100vh / 2)" }} |
|
|
|
|
> |
|
|
|
|
<ReverseMap setAddress={(val) => setMapAddress(val)} /> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex w-full items-end mt-8 flex-col"> |
|
|
|
|
<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} |
|
|
|
|
@ -236,14 +244,14 @@ export const Address = ({ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex flex-col w-1/2 pl-4"> |
|
|
|
|
<div className="flex flex-col w-full lg:w-1/2 lg:pl-4"> |
|
|
|
|
<Header |
|
|
|
|
title="اطلاعات هویتی" |
|
|
|
|
text="( لطفا نام و نام خانوادگی خود را به طور کامل وارد نمایید )" |
|
|
|
|
/> |
|
|
|
|
<div className="flex flex-row items-center gap-5 w-full"> |
|
|
|
|
<div className="flex flex-col lg:flex-row items-center lg:gap-5 w-full"> |
|
|
|
|
<Input |
|
|
|
|
width="50%" |
|
|
|
|
width={isMobile ? "100%" : "50%"} |
|
|
|
|
label={"نام"} |
|
|
|
|
regex={(val) => val} |
|
|
|
|
name="firstName" |
|
|
|
|
@ -253,7 +261,7 @@ export const Address = ({ |
|
|
|
|
direction="rtl" |
|
|
|
|
/> |
|
|
|
|
<Input |
|
|
|
|
width="50%" |
|
|
|
|
width={isMobile ? "100%" : "50%"} |
|
|
|
|
label={"نام خانوادگی"} |
|
|
|
|
regex={(val) => val} |
|
|
|
|
name="lastName" |
|
|
|
|
@ -263,16 +271,20 @@ export const Address = ({ |
|
|
|
|
direction="rtl" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
{!isMobile && ( |
|
|
|
|
<> |
|
|
|
|
<br /> |
|
|
|
|
<br /> |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
<Header |
|
|
|
|
title="شماره تماس" |
|
|
|
|
text="( شماره موبایل و شماره تلفن ثابت خود را
|
|
|
|
|
به همراه پیش شماره وارد کنید )" |
|
|
|
|
/> |
|
|
|
|
<div className="flex flex-row items-center gap-5 w-full"> |
|
|
|
|
<div className="flex flex-col lg:flex-row items-center lg:gap-5 w-full"> |
|
|
|
|
<Input |
|
|
|
|
width="50%" |
|
|
|
|
width={isMobile ? "100%" : "50%"} |
|
|
|
|
label={"شماره موبایل"} |
|
|
|
|
regex={(val) => onInput.numberOnly(val)} |
|
|
|
|
name="cellphone" |
|
|
|
|
@ -283,7 +295,7 @@ export const Address = ({ |
|
|
|
|
maxLength={11} |
|
|
|
|
/> |
|
|
|
|
<Input |
|
|
|
|
width="50%" |
|
|
|
|
width={isMobile ? "100%" : "50%"} |
|
|
|
|
label={"شماره تلفن"} |
|
|
|
|
regex={(val) => onInput.numberOnly(val)} |
|
|
|
|
name="phone" |
|
|
|
|
@ -294,24 +306,38 @@ export const Address = ({ |
|
|
|
|
maxLength={11} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
{!isMobile && ( |
|
|
|
|
<> |
|
|
|
|
<br /> |
|
|
|
|
<br /> |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
<Header |
|
|
|
|
title="آدرس" |
|
|
|
|
text="( لطفا نام استان و شهرستان و آدرس |
|
|
|
|
خود را با دقت تکمیل نمایید )" |
|
|
|
|
/> |
|
|
|
|
<div className="flex flex-row items-center gap-5 w-full mt-3"> |
|
|
|
|
<div className="flex flex-col lg:flex-row items-center gap-3 lg:gap-5 w-full mt-3"> |
|
|
|
|
<Select |
|
|
|
|
options={province} |
|
|
|
|
name="provinceId" |
|
|
|
|
onChange={(name, value) => onChange(name, value)} |
|
|
|
|
width={isMobile ? "w-full" : "w-1/2"} |
|
|
|
|
backgroundColor={ |
|
|
|
|
isDark ? "dark:bg-transparent dark:text-white" : "" |
|
|
|
|
} |
|
|
|
|
fill={isDark ? "fill-white" : "fill-gray-600"} |
|
|
|
|
/> |
|
|
|
|
{!cityLoading ? ( |
|
|
|
|
<Select |
|
|
|
|
options={city} |
|
|
|
|
name="cityId" |
|
|
|
|
onChange={(name, value) => onChange(name, value)} |
|
|
|
|
width={isMobile ? "w-full" : "w-1/2"} |
|
|
|
|
backgroundColor={ |
|
|
|
|
isDark ? "dark:bg-transparent dark:text-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"> |
|
|
|
|
@ -328,7 +354,7 @@ export const Address = ({ |
|
|
|
|
</div> |
|
|
|
|
<br /> |
|
|
|
|
<Input |
|
|
|
|
width="50%" |
|
|
|
|
width={isMobile ? "100%" : "50%"} |
|
|
|
|
label={"کد پستی"} |
|
|
|
|
regex={(val) => onInput.numberOnly(val)} |
|
|
|
|
name="postalCode" |
|
|
|
|
@ -338,7 +364,47 @@ export const Address = ({ |
|
|
|
|
direction="ltr" |
|
|
|
|
maxLength={10} |
|
|
|
|
/> |
|
|
|
|
<div className="flex lg:hidden flex-col items-cente w-full mt-3"> |
|
|
|
|
<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-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> |
|
|
|
|
)} |
|
|
|
|
{dialog.open && <Dialog dialog={dialog} />} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
@ -351,6 +417,8 @@ const mapStateToProps = (state) => ({ |
|
|
|
|
cities: state.publicApi.cities, |
|
|
|
|
loading: state.userAddress.loading, |
|
|
|
|
cityLoading: state.publicApi.loading, |
|
|
|
|
isMobile: state.publicApi.isMobile, |
|
|
|
|
isDark: state.publicApi.isDark, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = { |
|
|
|
|
|
Reza_ashrafi
3 years ago
