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.
206 lines
5.9 KiB
206 lines
5.9 KiB
import React from "react"; |
|
import { connect } from "react-redux"; |
|
import { |
|
userAddress, |
|
userFactor, |
|
dialog, |
|
menu, |
|
} from "../../../../../redux/actions"; |
|
|
|
//components |
|
import Button from "../../../../../components/Button"; |
|
|
|
import { Link, useNavigate } from "react-router-dom"; |
|
|
|
import editButton from "../../../../../assets/icons/edit.svg"; |
|
import trash from "../../../../../assets/icons/trash.svg"; |
|
|
|
const ProfileAddress = ({ |
|
addresses, |
|
update, |
|
getList, |
|
userId, |
|
userAddressId, |
|
getFactorInfo, |
|
loading, |
|
setPhase, |
|
isMobile, |
|
isDark, |
|
}) => { |
|
const navigation = useNavigate(); |
|
|
|
React.useEffect(() => { |
|
getFactorInfo({ userId }); |
|
getList(); |
|
}, []); |
|
|
|
return ( |
|
<div |
|
className={`flex-1 ${isMobile ? "" : "w-full"} ${ |
|
isMobile ? "p-0" : "px-10" |
|
} mx-auto`} |
|
> |
|
<div className="w-full flex flex-row justify-between items-center mt-4"> |
|
<button |
|
className={`flex justify-center text-tiny lg:text-sm rounded-md py-3 bg-grayF9 dark:bg-blueC0 dark:bg-opacity-30 cursor:pointer ${ |
|
isDark ? "text-white" : "text-gray70" |
|
} items-center w-full`} |
|
onClick={() => |
|
navigation("/createAddress", { state: { panel: true } }) |
|
} |
|
style={{ |
|
border: `1px solid ${isDark ? "#DBDBDB22" : "#DBDBDB"}`, |
|
}} |
|
> |
|
یک آدرس جدید اضافه کنید |
|
<strong className="text-lg transform translate-y-0.5 mr-1">+</strong> |
|
</button> |
|
</div> |
|
<div className={`p-0 m-0 flex flex-col mb-4 w-full `}> |
|
{addresses.map((address, index) => ( |
|
<Location |
|
address={address} |
|
key={index} |
|
userId={userId} |
|
active={userAddressId === address?.id} |
|
isDark={isDark} |
|
update={update} |
|
/> |
|
))} |
|
</div> |
|
</div> |
|
); |
|
}; |
|
|
|
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={`w-full flex flex-col items-center my-4 px-3 py-4 border border-solid transition-all duration-500 dark:bg-opacity-5 rounded-md cursor-pointer ${ |
|
active |
|
? "bg-blueC0 bg-opacity-5 border-blueC0" |
|
: "bg-grayF9 border-gray-200 dark:border-gray-500" |
|
}`} |
|
onClick={() => |
|
active ? {} : update({ userAddressId: address.id, userId }) |
|
} |
|
> |
|
<div className="w-full flex items-center justify-between"> |
|
<div className="w-4 h-4 flex flex-col items-center justify-center ml-1 bg-gray-200 rounded-full"> |
|
<div |
|
className={`w-2 h-2 rounded-full ${ |
|
active === true ? "bg-blueC0" : "" |
|
}`} |
|
></div> |
|
</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> |
|
</div> |
|
)} |
|
<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} |
|
</span> |
|
<span className="mb-2 leading-6"> |
|
{"نام:" + " " + address.firstName + " " + address.lastName} |
|
</span> |
|
<span className="mb-2 leading-6"> |
|
{"کد پستی:" + " " + address.postalCode} |
|
</span> |
|
<span className="mb-2 leading-6"> |
|
{"شماره تماس:" + " " + address.cellphone} |
|
</span> |
|
</div> |
|
</div> |
|
</div> |
|
{/* edit / delete button */} |
|
<div className="flex flex-col items-center gap-y-2"> |
|
<div |
|
style={{ border: "solid 1px #fca5a5" }} |
|
class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer" |
|
> |
|
<button class="text-sm">حذف</button> |
|
<img src={trash} alt="delete-address" className="w-5 mr-3" /> |
|
</div> |
|
<div |
|
style={{ border: "solid 1px #12CF7F" }} |
|
class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer" |
|
> |
|
<button class="text-sm">ویرایش</button> |
|
<img src={editButton} alt="edit-address" className="w-5 mr-3 " /> |
|
</div> |
|
</div> |
|
</div> |
|
<Button |
|
title="مشاهده روی نقشه" |
|
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"} |
|
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "0px" }} |
|
width="100%" |
|
color={"text-white"} |
|
onClick={() => {}} |
|
/> |
|
</div> |
|
); |
|
}; |
|
|
|
const mapStateToProps = (state) => ({ |
|
userId: state.user.status?.id, |
|
userAddressId: state.userFactor.info?.userAddressId, |
|
addresses: state.userAddress.list, |
|
isMobile: state.publicApi.isMobile, |
|
isDark: state.publicApi.isDark, |
|
}); |
|
|
|
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);
|
|
|