Reza_ashrafi
3 years ago
parent
fa7f68e45b
commit
2bffd0fbbf
30 changed files with 534 additions and 166 deletions
@ -0,0 +1,27 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
|
||||||
|
//assets
|
||||||
|
import plusIcon from "./plus.svg"; |
||||||
|
|
||||||
|
export const FloatingButton = ({ action, position, icon }) => { |
||||||
|
return ( |
||||||
|
<button |
||||||
|
onClick={() => action()} |
||||||
|
className={`fixed bg-blueC0 w-20 h-20 rounded-full transform transition-all hover:scale-110 active:scale-90 flex justify-center items-center shadow-xl z-10`} |
||||||
|
style={position} |
||||||
|
> |
||||||
|
<img src={icon} alt="" className="w-7" style={{transform: 'translateX(-0px) translateY(3px)'}} /> |
||||||
|
</button> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({}); |
||||||
|
|
||||||
|
const mapDispatchToProps = {}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(FloatingButton); |
||||||
|
|
||||||
|
FloatingButton.defaultProps = { |
||||||
|
icon: plusIcon, |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 277 B |
@ -0,0 +1,115 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import { userAddress, userFactor } from "../../../../../redux/actions"; |
||||||
|
|
||||||
|
//components
|
||||||
|
import Button from "../../../../../components/Button"; |
||||||
|
import FloatingButton from "../../../../../components/FloatingButton"; |
||||||
|
|
||||||
|
//assets
|
||||||
|
import menuIcon from "./menu.svg"; |
||||||
|
|
||||||
|
const ProfileAddress = ({ |
||||||
|
addresses, |
||||||
|
update, |
||||||
|
getList, |
||||||
|
userId, |
||||||
|
userAddressId, |
||||||
|
getFactorInfo, |
||||||
|
loading, |
||||||
|
isMobile, |
||||||
|
isDark, |
||||||
|
}) => { |
||||||
|
React.useEffect(() => { |
||||||
|
getFactorInfo({ userId }); |
||||||
|
getList(); |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={`flex-1 ${isMobile ? "" : "w-1/2"} mx-auto`}> |
||||||
|
<div className={`p-0 m-0 flex flex-col mb-4`}> |
||||||
|
{addresses.map((address, index) => ( |
||||||
|
<Location |
||||||
|
address={address} |
||||||
|
key={index} |
||||||
|
userId={userId} |
||||||
|
active={userAddressId === address?.id} |
||||||
|
isDark={isDark} |
||||||
|
update={update} |
||||||
|
/> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
<FloatingButton |
||||||
|
action={() => {}} |
||||||
|
position={{ right: isMobile ? "" : 350, bottom: 50 }} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const Location = ({ address, active, userId, isDark, update }) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={`flex items-center w-full px-3 py-4 rounded-md mt-2 border-2 border-solid ${ |
||||||
|
active |
||||||
|
? "border-gray-300 bg-blueC0 bg-opacity-5" |
||||||
|
: "border-green-400 bg-white" |
||||||
|
}`}
|
||||||
|
onClick={() => |
||||||
|
active ? {} : update({ userAddressId: address.id, userId }) |
||||||
|
} |
||||||
|
> |
||||||
|
<div className="flex flex-1 flex-col 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" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<div className="flex w-full"> |
||||||
|
<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> |
||||||
|
<Button |
||||||
|
title="مشاهده روی نقشه" |
||||||
|
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"} |
||||||
|
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "0px" }} |
||||||
|
width="100%" |
||||||
|
color={"text-white"} |
||||||
|
onClick={() => {}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</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, |
||||||
|
}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(ProfileAddress); |
||||||
|
After Width: | Height: | Size: 707 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 925 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 961 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 776 B |
@ -0,0 +1,63 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
//assets
|
||||||
|
import bookImage from "./book.svg"; |
||||||
|
import bookmarkIcon from "./bookmark.svg"; |
||||||
|
|
||||||
|
const Favorites = ({ bookmarkList, isMobile }) => { |
||||||
|
const Bookmark = ({ bookmark }) => { |
||||||
|
return ( |
||||||
|
<div className="lg:w-1/2 xl:w-1/3 p-2 mb-4"> |
||||||
|
<div |
||||||
|
className={`flex justify-between px-3.5 py-2 border-2 border-gray-300 border-solid rounded-md relative`} |
||||||
|
> |
||||||
|
<div className={"flex w-full"}> |
||||||
|
<img src={bookmark.image} alt="" className="w-1/5" /> |
||||||
|
<div className={`flex flex-col mr-2 pt-2`}> |
||||||
|
<strong className="text-base text-gray1">{bookmark.name}</strong> |
||||||
|
<span className="text-sm mt-2 text-green7B font-bold">{bookmark.grade}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<img src={bookmarkIcon} alt="" className="w-7 absolute left-2 top-2" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-row flex-wrap"> |
||||||
|
{bookmarkList.map((bookmark, index) => ( |
||||||
|
<Bookmark key={index} bookmark={bookmark} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
loading: state.userFactor.loading, |
||||||
|
isMobile: state.publicApi.isMobile, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = {}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(Favorites); |
||||||
|
|
||||||
|
Favorites.defaultProps = { |
||||||
|
bookmarkList: [ |
||||||
|
{ |
||||||
|
name: "کتاب آموزشی علوم تجربی", |
||||||
|
grade: "پایه ششم ابتدایی", |
||||||
|
image: bookImage, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "کتاب آموزشی علوم تجربی", |
||||||
|
grade: "پایه ششم ابتدایی", |
||||||
|
image: bookImage, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "کتاب آموزشی علوم تجربی", |
||||||
|
grade: "پایه ششم ابتدایی", |
||||||
|
image: bookImage, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
import React from 'react' |
||||||
|
import { connect } from 'react-redux' |
||||||
|
|
||||||
|
export const Profile = ({}) => { |
||||||
|
return ( |
||||||
|
<div>Profile</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({}) |
||||||
|
|
||||||
|
const mapDispatchToProps = {} |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(Profile) |
||||||
Loading…
Reference in new issue