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.
202 lines
7.2 KiB
202 lines
7.2 KiB
import React, { useState, useEffect } from "react"; |
|
import { connect } from "react-redux"; |
|
import { userFactor } from "../../../redux/actions"; |
|
|
|
//components |
|
import Radio from "../../../components/Radio"; |
|
import Loading from "../../../components/Loading"; |
|
|
|
import editButton from "../../../assets/icons/edit.svg"; |
|
import trash from "../../../assets/icons/trash.svg"; |
|
|
|
function Address({ |
|
addresses, |
|
isMobile, |
|
setPhase, |
|
update, |
|
userId, |
|
userAddressId, |
|
loading, |
|
isDark, |
|
}) { |
|
const Location = ({ address, active }) => { |
|
return isMobile ? ( |
|
<button |
|
className={`flex flex-col border-2 border-solid items-center w-full px-3 py-2 rounded-md mt-2 transition-all duration-500 dark:bg-opacity-5 ${ |
|
userAddressId === address?.id |
|
? "bg-blueC0 bg-opacity-5 border-blueC0" |
|
: "bg-grayF9 border-gray-200 dark:border-gray-500" |
|
}`} |
|
onClick={() => |
|
userAddressId === address?.id |
|
? {} |
|
: update({ userAddressId: address.id, userId }) |
|
} |
|
> |
|
<div className="flex items-center"> |
|
{loading && userAddressId !== address?.id ? ( |
|
<Loading size={2} color="bg-gray-400" /> |
|
) : ( |
|
<Radio active={active} /> |
|
)} |
|
<div className="flex flex-1 flex-col mr-2"> |
|
<li |
|
className={`text-right text-sm font-semibold leading-5 text-blue52 ${ |
|
userAddressId === address?.id |
|
? "dark:text-blueC0" |
|
: "dark:text-gray-400" |
|
}`} |
|
> |
|
{address.address} |
|
</li> |
|
</div> |
|
</div> |
|
{/* edit / delete button */} |
|
<div className="flex items-center gap-x-4 mt-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> |
|
</button> |
|
) : ( |
|
<button |
|
className={`flex flex-row justify-between border border-solid items-center w-full px-3 py-6 rounded-md mt-4 transition-all duration-500 gap-10 border-opacity-30 dark:bg-opacity-5 ${ |
|
userAddressId === address?.id |
|
? "bg-blueC0 bg-opacity-5 border-blueC0" |
|
: "bg-[#F9F9F9] border-gray-400" |
|
}`} |
|
onClick={() => |
|
userAddressId === address?.id |
|
? {} |
|
: update({ userAddressId: address.id, userId }) |
|
} |
|
> |
|
<div className="flex flex-row flex-1 gap-4"> |
|
{loading && userAddressId !== address?.id ? ( |
|
<Loading size={2} color="bg-gray-400" /> |
|
) : ( |
|
<Radio active={active} /> |
|
)} |
|
<div className="flex flex-col"> |
|
<li className="text-right text-tiny leading-6 text-blue52 dark:text-white"> |
|
آدرس: {address.address} |
|
</li> |
|
|
|
<li className="text-right text-tiny leading-6 text-blue52 dark:text-white mt-3"> |
|
کد پستی: {address.postalCode} |
|
</li> |
|
</div> |
|
</div> |
|
<div className="flex flex-col "> |
|
<li className="text-right text-tiny leading-6 text-blue52 dark:text-white"> |
|
نام تحویل گیرنده: {address.firstName + " " + address.lastName} |
|
</li> |
|
<li className="text-right text-tiny leading-6 text-blue52 dark:text-white mt-3"> |
|
شماره تماس: {address.cellphone} |
|
</li> |
|
</div> |
|
<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> |
|
</button> |
|
); |
|
}; |
|
|
|
return isMobile ? ( |
|
<section className="mt-2 w-full"> |
|
<strong className="font-bold text-green7B dark:text-white lg:text-tiny"> |
|
انتخاب آدرس |
|
</strong> |
|
<ul className="list-none p-0 m-0 flex flex-col gap-y-3"> |
|
{addresses.map((address, index) => ( |
|
<Location |
|
address={address} |
|
key={index} |
|
active={userAddressId === address?.id} |
|
/> |
|
))} |
|
</ul> |
|
<div className="w-full flex flex-row justify-between items-center mt-4"> |
|
<button |
|
className={`flex justify-center text-tiny py-3 rounded-md bg-grayF9 dark:bg-blueC0 dark:bg-opacity-10 w-full ${ |
|
isDark ? "text-white" : "text-gray70" |
|
} items-center w-full`} |
|
onClick={() => setPhase("address")} |
|
style={{ |
|
border: `1px solid ${isDark ? "#DBDBDB22" : "#DBDBDB"}`, |
|
}} |
|
> |
|
یک آدرس جدید اضافه کنید |
|
<strong className="text-lg transform translate-y-0.5 mr-1">+</strong> |
|
</button> |
|
</div> |
|
</section> |
|
) : ( |
|
<section className="mt-0.5 w-full"> |
|
<strong className="font-medium dark:text-white">انتخاب آدرس</strong> |
|
<ul className="list-none p-0 m-0 flex flex-col gap-y-2"> |
|
{addresses.map((address, index) => ( |
|
<Location |
|
address={address} |
|
key={index} |
|
active={userAddressId === address?.id} |
|
/> |
|
))} |
|
</ul> |
|
<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 ${ |
|
isDark ? "text-white" : "text-gray70" |
|
} items-center w-full`} |
|
onClick={() => setPhase("address")} |
|
style={{ |
|
border: `1px solid ${isDark ? "#DBDBDB22" : "#DBDBDB"}`, |
|
}} |
|
> |
|
یک آدرس جدید اضافه کنید |
|
<strong className="text-lg transform translate-y-0.5 mr-1">+</strong> |
|
</button> |
|
</div> |
|
</section> |
|
); |
|
} |
|
|
|
const mapStateToProps = (state) => ({ |
|
isDark: state.publicApi.isDark, |
|
isMobile: state.publicApi.isMobile, |
|
userId: state.user.status?.id, |
|
userAddressId: state.userFactor.info?.userAddressId, |
|
loading: state.userFactor.loading, |
|
}); |
|
|
|
const mapDispatchToProps = { |
|
update: userFactor.update, |
|
}; |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Address); |
|
|
|
Address.defaultProps = {};
|
|
|