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.
 
 
 

206 lines
5.9 KiB

import React from "react";
import { connect } from "react-redux";
import {
userAddress,
userFactor,
dialog,
menu,
} from "../../../../../redux/actions";
//components
import Button from "../../../../../components/Button";
import { Link, useNavigate } from "react-router-dom";
import editButton from "../../../../../assets/icons/edit.svg";
import trash from "../../../../../assets/icons/trash.svg";
const ProfileAddress = ({
addresses,
update,
getList,
userId,
userAddressId,
getFactorInfo,
loading,
setPhase,
isMobile,
isDark,
}) => {
const navigation = useNavigate();
React.useEffect(() => {
getFactorInfo({ userId });
getList();
}, []);
return (
<div
className={`flex-1 ${isMobile ? "" : "w-full"} ${
isMobile ? "p-0" : "px-10"
} mx-auto`}
>
<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 cursor:pointer ${
isDark ? "text-white" : "text-gray70"
} items-center w-full`}
onClick={() =>
navigation("/createAddress", { state: { panel: true } })
}
style={{
border: `1px solid ${isDark ? "#DBDBDB22" : "#DBDBDB"}`,
}}
>
&nbsp;یک آدرس جدید اضافه کنید
<strong className="text-lg transform translate-y-0.5 mr-1">+</strong>
</button>
</div>
<div className={`p-0 m-0 flex flex-col mb-4 w-full `}>
{addresses.map((address, index) => (
<Location
address={address}
key={index}
userId={userId}
active={userAddressId === address?.id}
isDark={isDark}
update={update}
/>
))}
</div>
</div>
);
};
const Location = ({
address,
active,
userId,
isDark,
update,
setMenu,
setDialog,
deleteAddress,
}) => {
const [locationMenu, setLocationMenu] = React.useState(false);
React.useEffect(() => {
if (locationMenu) {
setMenu();
}
}, [locationMenu]);
React.useEffect(() => {
if (!menu) {
setLocationMenu(false);
}
}, [menu]);
const delAddress = (id) => {
setMenu();
setDialog({
text: "آدرس رو حذف کنیم؟",
type: "confirm",
accept: () => deleteAddress({ id }),
open: true,
});
};
const clickOnMenu = (e) => {
setLocationMenu(true);
e.stopPropagation();
};
return (
<div
className={`w-full flex flex-col items-center my-4 px-3 py-4 border border-solid transition-all duration-500 dark:bg-opacity-5 rounded-md cursor-pointer ${
active
? "bg-blueC0 bg-opacity-5 border-blueC0"
: "bg-grayF9 border-gray-200 dark:border-gray-500"
}`}
onClick={() =>
active ? {} : update({ userAddressId: address.id, userId })
}
>
<div className="w-full flex items-center justify-between">
<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>
<div className="flex flex-col flex-1 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>
</div>
)}
<div className={`flex w-full ${active ? "" : "flex-row"}`}>
<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>
</div>
{/* edit / delete button */}
<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>
</div>
<Button
title="مشاهده روی نقشه"
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "0px" }}
width="100%"
color={"text-white"}
onClick={() => {}}
/>
</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,
deleteAddress: userAddress.del,
setMenu: menu.set,
setDialog: dialog.set,
};
export default connect(mapStateToProps, mapDispatchToProps)(ProfileAddress);