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.
 
 
 

246 lines
6.9 KiB

import React from "react";
import { connect } from "react-redux";
import {
userAddress,
userFactor,
publicApi,
menu,
dialog,
} from "../../../../../redux/actions";
import { Link, useNavigate } from "react-router-dom";
//components
import Empty from "../../../../../components/Empty";
import Button from "../../../../../components/Button";
import FloatingButton from "../../../../../components/FloatingButton";
import { add } from "lodash";
const ProfileAddress = ({
addresses,
update,
getList,
userId,
userAddressId,
getFactorInfo,
loading,
closeBottomSheet,
mobile,
isMobile,
isDark,
headerOptions,
setHeaderOptions,
setMenu,
menu,
deleteAddress,
setDialog,
}) => {
const navigation = useNavigate();
React.useEffect(() => {
setHeaderOptions(headerOptions);
getFactorInfo({ userId });
getList();
}, []);
return (
<div className="flex-1 flex flex-col relative">
{addresses.length > 0 ? (
<div className="w-full mt-2 px-4">
<div className="p-0 m-0 flex flex-col">
{addresses.map((address, index) => (
<Location
address={address}
key={index}
active={userAddressId === address?.id}
isDark={isDark}
userId={userId}
update={update}
setMenu={setMenu}
menu={menu}
deleteAddress={deleteAddress}
setDialog={setDialog}
/>
))}
</div>
</div>
) : (
<Empty text="هیچ آدرسی ثبت نشده :(" />
)}
{/* <FloatingButton
action={() => navigation("/createAddress")}
position={{ bottom: 100, right: 16 }}
size={16}
/> */}
<FloatingButton
action={() => navigation("/createAddress", { state: { panel: true } })}
// action={() => {}}
position={{ bottom: 100, left: 16 }}
/>
</div>
);
};
const Location = ({
address,
active,
isDark,
userId,
update,
setMenu,
menu,
deleteAddress,
setDialog,
}) => {
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={`bg-opacity-5 border border-solid flex flex-row items-center w-full px-3 py-2 rounded-md relative ${
active ? "bg-blueC0 border-blueC0" : "bg-gray-300 border-gray-300"
}`}
onClick={() =>
active ? {} : update({ userAddressId: address.id, userId })
}
>
<div
className={`absolute left-8 top-0 transform transition-all origin-bottom-left ${
locationMenu ? "scale-100" : "scale-0"
} -translate-y-1/2 bg-white roundd-md flex flex-col gap-1 p-1 shadow-all divide-y divide-solid divide-gray-200`}
style={{ zIndex: 70 }}
onClick={(e) => e.stopPropagation()}
>
<Link
to={"/editAddress/" + address.id}
className="py-3 pr-2 pl-10 text-sm font-bold"
onClick={() => setMenu()}
>
ویرایش
</Link>
<button
className="py-3 pr-2 pl-10 border-none m-0 text-sm text-red19 font-bold"
onClick={() => delAddress(address.id)}
>
حذف
</button>
</div>
<div className={"flex flex-col flex-1 mr-2"}>
{active && (
<div className={"w-full flex flex-row justify-between mb-3"}>
<div className={"flex flex-row items-center"}>
<strong className={"text-base font-bold text-gray1"}>
آدرس انتخابی شما
</strong>
<span className={"text-xs text-gray1 mr-2.5"}>فعال</span>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
onClick={(e) => clickOnMenu(e)}
>
<g fill="#07612c" data-name="vuesax/linear/more">
<path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" />
<path
data-name="Vector"
d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z"
/>
</g>
</svg>
</div>
)}
<div className={`flex w-full ${active ? "" : "flex-row"}`}>
<div className={"flex flex-col flex-1 mb-4"}>
<span className={"text-sm leading-6"}>
{"آدرس:" + " " + address.address}
</span>
<span className={"text-sm leading-6 mt-1.5"}>
{"نام:" + " " + address.firstName + " " + address.lastName}
</span>
<span className={"text-sm leading-6 mt-1.5"}>
{"کد پستی:" + " " + address.postalCode}
</span>
<span className={"text-sm leading-6 mt-1.5"}>
{"شماره تماس:" + " " + address.cellphone}
</span>
</div>
{!active && (
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
onClick={(e) => clickOnMenu(e)}
>
<g fill={"#aaa"} data-name="vuesax/linear/more">
<path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" />
<path
data-name="Vector"
d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z"
/>
</g>
</svg>
)}
</div>
<Button
title="نمایش روی نقشه"
backgroundColor={isDark ? "bg-transparent" : "bg-blueC0"}
border={{
color: isDark ? "#ffffff55" : "#196EC055",
width: "0px",
}}
width="100%"
color={isDark ? "text-blueC0" : "text-white"}
onClick={() => {}}
/>
</div>
</div>
);
};
const mapStateToProps = (state) => ({
userId: state.user.status?.id,
userAddressId: state.userFactor.info?.userAddressId,
loading: state.userFactor.loading,
addresses: state.userAddress.list,
mobile: state.publicApi.mobile,
isDark: state.publicApi.isDark,
menu: state.menu.open,
});
const mapDispatchToProps = {
getFactorInfo: userFactor.info,
update: userFactor.update,
getList: userAddress.list,
setHeaderOptions: publicApi.setHeaderOptions,
setMenu: menu.set,
deleteAddress: userAddress.del,
setDialog: dialog.set,
};
export default connect(mapStateToProps, mapDispatchToProps)(ProfileAddress);