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.
159 lines
5.4 KiB
159 lines
5.4 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"; |
|
|
|
function Address({ |
|
addresses, |
|
isDark, |
|
isMobile, |
|
setPhase, |
|
update, |
|
userId, |
|
userAddressId, |
|
loading, |
|
}) { |
|
const Location = ({ address, active }) => { |
|
return isMobile ? ( |
|
<button |
|
className={`flex flex-row 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 }) |
|
} |
|
> |
|
{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> |
|
</button> |
|
) : ( |
|
<button |
|
className={`flex flex-row 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-grayF9 border-gray45" |
|
}`} |
|
onClick={() => |
|
userAddressId === address?.id |
|
? {} |
|
: update({ userAddressId: address.id, userId }) |
|
} |
|
> |
|
<div className="flex flex-row flex-8 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 flex-5"> |
|
<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> |
|
</button> |
|
); |
|
}; |
|
return isMobile ? ( |
|
<section className="mt-2"> |
|
<strong className="font-bold text-green7B dark:text-white lg:text-tiny"> |
|
انتخاب آدرس |
|
</strong> |
|
<ul className="list-none p-0 m-0 flex flex-col mt-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 py-3 rounded-md bg-grayF9 dark:bg-blueC0 dark:bg-opacity-10 ${ |
|
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"> |
|
{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);
|
|
|