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.
 
 
 

229 lines
8.1 KiB

import React, { 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={`w-full flex flex-col items-center justify-between mt-2 px-3 py-2 dark:bg-opacity-5 border border-opacity-30 transition-all duration-500 rounded-md ${
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="w-full flex items-center ">
{loading && userAddressId !== address?.id ? (
<Loading size={2} color="bg-gray-400" />
) : (
<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>
// <Radio active={active} />
)}
<div className="flex flex-col flex-1 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">{window.t("حذف")}</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">{window.t("ویرایش")}</button>
<img src={editButton} alt="edit-address" className="w-5 mr-3 " />
</div>
</div>
</button>
) : (
<button
className={`w-full flex items-center justify-between gap-x-3 mt-4 px-3 py-4 dark:bg-opacity-5 border border-opacity-30 transition-all duration-500 rounded-md ${
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-1 items-center gap-x-4 ">
{loading && userAddressId !== address?.id ? (
<Loading size={2} color="bg-gray-400" />
) : (
<div className="">
<div className="w-4 h-4 flex flex-col items-center justify-center bg-gray-200 rounded-full">
<div
className={`w-2 h-2 rounded-full ${
active === true ? "bg-blueC0" : ""
}`}
></div>
</div>
</div>
// <Radio active={active} />
)}
<div className="flex flex-col gap-y-2">
<li className="text-right text-tiny leading-6 text-blue52 dark:text-white">
{window.t(" آدرس:")}
&nbsp;{address.address}
</li>
<li className="text-right text-tiny leading-6 text-blue52 dark:text-white">
{window.t("کد پستی:")}
&nbsp;{address.postalCode}
</li>
</div>
</div>
<div className="flex flex-col">
<li className="text-right text-tiny leading-6 text-blue52 dark:text-white">
{window.t("نام تحویل گیرنده:")}
&nbsp;{address.firstName + " " + address.lastName}
</li>
<li className="text-right text-tiny leading-6 text-blue52 dark:text-white mt-3">
{window.t("شماره تماس:")}
&nbsp;{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">{window.t("حذف")}</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">{window.t("ویرایش")}</button>
<img src={editButton} alt="edit-address" className="w-5 mr-3 " />
</div>
</div>
</button>
);
};
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return isMobile ? (
<section className="mt-2 w-full">
<strong className="font-bold text-green7B dark:text-white lg:text-tiny">
{window.t("انتخاب آدرس")}
</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"}`,
}}
>
&nbsp;
{window.t("یک آدرس جدید اضافه کنید")}
<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">
{window.t("انتخاب آدرس")}
</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"}`,
}}
>
&nbsp;
{window.t("یک آدرس جدید اضافه کنید")}
<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 = {};