|
|
|
|
@ -1,16 +1,17 @@ |
|
|
|
|
import React from "react"; |
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
import { userAddress, userFactor } from "../../../../../redux/actions"; |
|
|
|
|
import { |
|
|
|
|
userAddress, |
|
|
|
|
userFactor, |
|
|
|
|
dialog, |
|
|
|
|
menu, |
|
|
|
|
} from "../../../../../redux/actions"; |
|
|
|
|
|
|
|
|
|
//components
|
|
|
|
|
import Button from "../../../../../components/Button"; |
|
|
|
|
import FloatingButton from "../../../../../components/FloatingButton"; |
|
|
|
|
|
|
|
|
|
import { Link, useNavigate } from "react-router-dom"; |
|
|
|
|
|
|
|
|
|
//assets
|
|
|
|
|
import menuIcon from "./menu.svg"; |
|
|
|
|
|
|
|
|
|
const ProfileAddress = ({ |
|
|
|
|
addresses, |
|
|
|
|
update, |
|
|
|
|
@ -64,30 +65,101 @@ const ProfileAddress = ({ |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const Location = ({ address, active, userId, isDark, update }) => { |
|
|
|
|
const Location = ({ |
|
|
|
|
address, |
|
|
|
|
active, |
|
|
|
|
userId, |
|
|
|
|
isDark, |
|
|
|
|
update, |
|
|
|
|
setMenu, |
|
|
|
|
setDialog, |
|
|
|
|
deleteAddress, |
|
|
|
|
}) => { |
|
|
|
|
const [locationMenu, setLocationMenu] = React.useState(false); |
|
|
|
|
|
|
|
|
|
React.useEffect(() => { |
|
|
|
|
if (locationMenu) { |
|
|
|
|
setMenu(); |
|
|
|
|
} |
|
|
|
|
}, [locationMenu]); |
|
|
|
|
|
|
|
|
|
React.useEffect(() => { |
|
|
|
|
if (!menu) { |
|
|
|
|
setLocationMenu(false); |
|
|
|
|
} |
|
|
|
|
}, [menu]); |
|
|
|
|
|
|
|
|
|
const delAddress = (id) => { |
|
|
|
|
setMenu(); |
|
|
|
|
setDialog({ |
|
|
|
|
text: "آدرس رو حذف کنیم؟", |
|
|
|
|
type: "confirm", |
|
|
|
|
accept: () => deleteAddress({ id }), |
|
|
|
|
open: true, |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const clickOnMenu = (e) => { |
|
|
|
|
setLocationMenu(true); |
|
|
|
|
e.stopPropagation(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
<div |
|
|
|
|
className={`flex items-center w-full px-3 py-4 rounded-md my-4 border-2 border-solid ${ |
|
|
|
|
active |
|
|
|
|
? "border-gray-300 bg-blueC0 bg-opacity-5" |
|
|
|
|
: "border-green-400 bg-white" |
|
|
|
|
? "border-green-400 bg-blueC0 bg-opacity-5" |
|
|
|
|
: "border-gray-300 bg-white" |
|
|
|
|
}`}
|
|
|
|
|
onClick={() => |
|
|
|
|
active ? {} : update({ userAddressId: address.id, userId }) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<div className="flex flex-1 flex-col mr-2"> |
|
|
|
|
<div |
|
|
|
|
className={`absolute left-8 top-0 transform transition-all origin-bottom-left ${ |
|
|
|
|
locationMenu ? "scale-100" : "scale-0" |
|
|
|
|
} -translate-y-1/2 bg-white roundd-md flex flex-col gap-1 p-1 shadow-all divide-y divide-solid divide-gray-200`}
|
|
|
|
|
style={{ zIndex: 70 }} |
|
|
|
|
onClick={(e) => e.stopPropagation()} |
|
|
|
|
> |
|
|
|
|
<Link |
|
|
|
|
to={"/editAddress/" + address.id} |
|
|
|
|
className="py-3 pr-2 pl-10 text-sm font-bold" |
|
|
|
|
onClick={() => setMenu()} |
|
|
|
|
> |
|
|
|
|
ویرایش |
|
|
|
|
</Link> |
|
|
|
|
<button |
|
|
|
|
className="py-3 pr-2 pl-10 border-none m-0 text-sm text-red19 font-bold" |
|
|
|
|
onClick={() => delAddress(address.id)} |
|
|
|
|
> |
|
|
|
|
حذف |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex flex-col flex-1 mr-2"> |
|
|
|
|
{active && ( |
|
|
|
|
<div className="w-full flex justify-between mb-3"> |
|
|
|
|
<div className="flex items-center"> |
|
|
|
|
<strong className="text-base">آدرس انتخابی شما</strong> |
|
|
|
|
<span className="mr-4 text-sm">فعال</span> |
|
|
|
|
</div> |
|
|
|
|
<img src={menuIcon} alt="" className="w-6" /> |
|
|
|
|
<svg |
|
|
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
|
|
width={24} |
|
|
|
|
height={24} |
|
|
|
|
onClick={(e) => clickOnMenu(e)} |
|
|
|
|
> |
|
|
|
|
<g fill="#07612c" data-name="vuesax/linear/more"> |
|
|
|
|
<path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" /> |
|
|
|
|
<path |
|
|
|
|
data-name="Vector" |
|
|
|
|
d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" |
|
|
|
|
/> |
|
|
|
|
</g> |
|
|
|
|
</svg> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
<div className="flex w-full"> |
|
|
|
|
<div className={`flex w-full ${active ? "" : "flex-row"}`}> |
|
|
|
|
<div className="flex flex-col flex-1 mb-4"> |
|
|
|
|
<span className="mb-2 leading-6"> |
|
|
|
|
{"آدرس:" + " " + address.address} |
|
|
|
|
@ -102,6 +174,22 @@ const Location = ({ address, active, userId, isDark, update }) => { |
|
|
|
|
{"شماره تماس:" + " " + address.cellphone} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
{!active && ( |
|
|
|
|
<svg |
|
|
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
|
|
width={24} |
|
|
|
|
height={24} |
|
|
|
|
onClick={(e) => clickOnMenu(e)} |
|
|
|
|
> |
|
|
|
|
<g fill={"#aaa"} data-name="vuesax/linear/more"> |
|
|
|
|
<path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" /> |
|
|
|
|
<path |
|
|
|
|
data-name="Vector" |
|
|
|
|
d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" |
|
|
|
|
/> |
|
|
|
|
</g> |
|
|
|
|
</svg> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
<Button |
|
|
|
|
title="مشاهده روی نقشه" |
|
|
|
|
@ -113,7 +201,6 @@ const Location = ({ address, active, userId, isDark, update }) => { |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
@ -129,6 +216,9 @@ const mapDispatchToProps = { |
|
|
|
|
getFactorInfo: userFactor.info, |
|
|
|
|
update: userFactor.update, |
|
|
|
|
getList: userAddress.list, |
|
|
|
|
deleteAddress: userAddress.del, |
|
|
|
|
setMenu: menu.set, |
|
|
|
|
setDialog: dialog.set, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ProfileAddress); |
|
|
|
|
|
