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