diff --git a/src/components/Dialog/index.js b/src/components/Dialog/index.js index e1e0f03..aa3e99d 100644 --- a/src/components/Dialog/index.js +++ b/src/components/Dialog/index.js @@ -4,14 +4,25 @@ import { dialog } from "../../redux/actions"; export const Dialog = ({ dialog, setDialog }) => { const { text, type, accept } = dialog; + const exit = (e) => { + setDialog({ ...dialog, open: !dialog.open }); + e.stopPropagation(); + } + + const acceptFunc = () => { + setDialog({ ...dialog, open: !dialog.open }); + accept(); + } return (
setDialog({ ...dialog, open: !dialog.open })} + className="w-screen h-full fixed top-0 right-0 bg-gray-500 bg-opacity-10 backdrop-filter backdrop-blur-lg flex justify-center items-center" + style={{zIndex : 70}} + onClick={(e) => exit(e)} >
e.stopPropagation()} > {/* {type === "confirm" && (
exit
@@ -25,7 +36,7 @@ export const Dialog = ({ dialog, setDialog }) => {
diff --git a/src/components/Empty/index.js b/src/components/Empty/index.js index 5767929..a300bcb 100644 --- a/src/components/Empty/index.js +++ b/src/components/Empty/index.js @@ -3,8 +3,11 @@ import { connect } from "react-redux"; export const Empty = ({ text, buttonText, buttonAction }) => { return ( -
- {text} +
+ {text}
); }; diff --git a/src/redux/actions/index.js b/src/redux/actions/index.js index 8bb3521..5142481 100644 --- a/src/redux/actions/index.js +++ b/src/redux/actions/index.js @@ -16,4 +16,5 @@ export {default as scrollAction} from "./scroll"; export {default as qr} from "./qr"; export {default as comment} from "./comment"; export {default as form} from "./form"; -export {default as dialog} from "./dialog"; \ No newline at end of file +export {default as dialog} from "./dialog"; +export {default as menu} from "./menu"; \ No newline at end of file diff --git a/src/redux/actions/menu.js b/src/redux/actions/menu.js new file mode 100644 index 0000000..9450aa9 --- /dev/null +++ b/src/redux/actions/menu.js @@ -0,0 +1,8 @@ +const menu = { + set: + (data = {}) => + async (dispatch) => + await dispatch({ type: "menu/set", data }), +}; + +export default menu; \ No newline at end of file diff --git a/src/redux/actions/userAddress.js b/src/redux/actions/userAddress.js index fc5e4cb..5aa3e3f 100644 --- a/src/redux/actions/userAddress.js +++ b/src/redux/actions/userAddress.js @@ -8,12 +8,12 @@ const userAddress = { info: (data = {}) => async (dispatch) => { - await dispatch({ type: "userAddress/info", data }); + await proxy.get("userAddress/info", data, { dispatch }); }, update: (data = {}, data2 = {}) => async (dispatch) => { - await proxy.put("userAddress/update", data); + await proxy.put("userAddress/update", data, {dispatch}); await proxy.get("userAddress/list", data2, { dispatch }); }, add: @@ -25,7 +25,7 @@ const userAddress = { del: (data = {}, data2 = {}) => async (dispatch) => { - await proxy.delete("userAddress/delete", data); + await proxy.delete("userAddress/delete", data, { dispatch }); await proxy.get("userAddress/list", data2, { dispatch }); }, }; diff --git a/src/redux/actions/userFavorite.js b/src/redux/actions/userFavorite.js index fb140d1..aa1c819 100644 --- a/src/redux/actions/userFavorite.js +++ b/src/redux/actions/userFavorite.js @@ -4,7 +4,7 @@ const userFavorite = { list: (data = {}) => async (dispatch) => { - await proxy.get("userFavorite/list", data, { dispatch }); + await proxy.post("userFavorite/list", data, { dispatch }); }, update: (data = {}, data2 = {}) => diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js index 54e44db..b5776a2 100644 --- a/src/redux/reducers/index.js +++ b/src/redux/reducers/index.js @@ -16,4 +16,5 @@ export {default as scrollAction} from "./scroll"; export {default as qr} from "./qr"; export {default as comment} from "./comment"; export {default as form} from "./form"; -export {default as dialog} from "./dialog"; \ No newline at end of file +export {default as dialog} from "./dialog"; +export {default as menu} from "./menu"; \ No newline at end of file diff --git a/src/redux/reducers/menu.js b/src/redux/reducers/menu.js new file mode 100644 index 0000000..84e62bc --- /dev/null +++ b/src/redux/reducers/menu.js @@ -0,0 +1,15 @@ +const initialState = { + open : false, +}; + +export default function menu(state = initialState, action) { + let { type, data } = action; + switch (type) { + case "menu/set": + return { + open : !state.open + }; + default: + return state; + } +} \ No newline at end of file diff --git a/src/redux/reducers/userFavorite.js b/src/redux/reducers/userFavorite.js index 8ee19a9..8f0eaf2 100644 --- a/src/redux/reducers/userFavorite.js +++ b/src/redux/reducers/userFavorite.js @@ -8,23 +8,23 @@ const initialState = { export default function userAddress(state = initialState, action) { let { type, data } = action; switch (type) { - case "userAddress/list": + case "userFavorite/list": return { ...state, loading: false, list: data, error: null, }; - case "userAddress/update": + case "userFavorite/update": return { ...state, loading: false, error: null }; - case "userAddress/add": + case "userFavorite/add": toast.success('به لیست علاقه‌مندی‌ها اضافه شد.'); return { ...state, loading: false, error: null }; - case "userAddress/delete": + case "userFavorite/delete": return { ...state, loading: false, error: null }; - case "userAddress/loading": + case "userFavorite/loading": return { ...state, loading: true }; - case "userAddress/error": + case "userFavorite/error": toast.error(data.message); return { ...state, loading: false, error: data.message }; default: diff --git a/src/router.js b/src/router.js index 2d79785..539d8c0 100644 --- a/src/router.js +++ b/src/router.js @@ -2,7 +2,7 @@ import React, { useEffect } from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import { Navigate } from "react-router-dom"; import { connect } from "react-redux"; -import { publicApi } from "./redux/actions"; +import { publicApi, menu } from "./redux/actions"; import Navbar from "./components/Navbar"; import BG from "./components/BG"; import BottomNavigation from "./components/BottomNavigation"; @@ -35,11 +35,16 @@ import Address from "./views/Address"; import Favorites from "./views/Favorites"; import Addresses from "./views/Dashboard/layouts/Mobile/ProfileAddress"; -function Router({ isDark, isMobile, headerOptions, dialog }) { +function Router({ isDark, isMobile, headerOptions, dialog, menu, setMenu }) { useEffect(() => { window.addEventListener("scroll", () => {}); }, []); + const prevDefault = (e) => { + setMenu(); + e.stopPropagation(); + }; + return (
+ {menu && ( +
prevDefault(e)} + style={{ zIndex: 60 }} + >
+ )} {dialog.open && } {headerOptions?.shown && } @@ -375,6 +387,41 @@ function Router({ isDark, isMobile, headerOptions, dialog }) { /> } /> + + } + /> + + } + /> } /> - ({ isLogin: state.user.status, headerOptions: state.publicApi.headerOptions, dialog: state.dialog.dialog, + menu: state.menu.open, }); const mapDispatchToProps = { setDesktopContentTransform: publicApi.setDesktopContentTransform, + setMenu: menu.set, }; export default connect(mapStateToProps, mapDispatchToProps)(Router); diff --git a/src/views/Address/index.js b/src/views/Address/index.js index bd37d55..b2dde57 100644 --- a/src/views/Address/index.js +++ b/src/views/Address/index.js @@ -1,7 +1,9 @@ import React, { useState, useEffect } from "react"; import { connect } from "react-redux"; +import { useNavigate } from "react-router-dom"; import { publicApi, userAddress, dialog, user } from "../../redux/actions"; import onInput from "../../utils/onInput"; +import location from "../../utils/location"; import Input from "../../components/Input"; import Select from "../../components/Select"; import Button from "../../components/Button"; @@ -28,25 +30,58 @@ export const Address = ({ isDark, setDialog, profilePage, + editPage, setProfileFields, profileFields, setProfile, user, setHeaderOptions, headerOptions, + getAddress, + addressInfo, + updateAddress, }) => { const [addressFields, setAddressFields] = useState({}); const [mapAddress, setMapAddress] = useState(null); + const navigation = useNavigate(); useEffect(() => { if (province.length <= 1) { getProvince(); } - if(isMobile){ + if (isMobile) { setHeaderOptions(headerOptions); } + if (editPage) { + getAddress({ id: location.getId() }); + } }, []); + useEffect(() => { + if (editPage && addressInfo) { + const { + firstName, + lastName, + cellphone, + phone, + provinceId, + address, + cityId, + postalCode, + } = addressInfo; + setAddressFields({ + firstName, + lastName, + cellphone, + phone, + provinceId, + cityId, + postalCode, + }); + setMapAddress(address); + } + }, [addressInfo]); + useEffect(() => { if (addressFields?.provinceId) { getCity({ @@ -174,22 +209,52 @@ export const Address = ({ }); return; } + if (editPage) { + updateAddress({ + id : addressInfo.id, + firstName, + lastName, + cellphone, + phone, + address: mapAddress, + provinceId: + typeof provinceId === "number" + ? provinceId + : provinces.filter((province) => province.name === provinceId)[0] + ?.id, + cityId: + typeof cityId === "number" + ? cityId + : cities.filter((city) => city.name === cityId)[0]?.id, + postalCode, + location: null, + }); + } else { + createAddress({ + firstName, + lastName, + cellphone, + phone, + address: mapAddress, + provinceId: + typeof provinceId === "number" + ? provinceId + : provinces.filter((province) => province.name === provinceId)[0] + ?.id, + cityId: + typeof cityId === "number" + ? cityId + : cities.filter((city) => city.name === cityId)[0]?.id, + postalCode, + location: null, + }); + } - createAddress({ - firstName, - lastName, - cellphone, - phone, - address: mapAddress, - provinceId: provinces.filter( - (province) => province.name === provinceId - )[0]?.id, - cityId: cities.filter((city) => city.name === cityId)[0]?.id, - postalCode, - location: null, - }); - - setPhase("deliveryForm"); + if (editPage) { + navigation(-1); + } else { + setPhase("deliveryForm"); + } }; const Header = ({ title, text }) => { @@ -470,11 +535,11 @@ export const Address = ({ } backgroundColor="bg-blueC0" border={{ color: "#196EC055", width: "0px" }} - width={profilePage ? '30%' : '100%'} + width={profilePage ? "30%" : "100%"} color="text-white" onClick={() => (profilePage ? submitProfile() : submit())} /> - {!profilePage && ( + {!isMobile && (
-
- ); - }; React.useEffect(() => { setHeaderOptions(headerOptions); @@ -108,12 +45,19 @@ const ProfileAddress = ({
{addresses.length > 0 ? (
-
+
{addresses.map((address, index) => ( ))}
@@ -130,6 +74,150 @@ const ProfileAddress = ({ ); }; +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 ( +
+ active ? {} : update({ userAddressId: address.id, userId }) + } + > +
e.stopPropagation()} + > + setMenu()} + > + ویرایش + + +
+ +
+ {active && ( +
+
+ + آدرس انتخابی شما + + فعال +
+ clickOnMenu(e)} + > + + + + + +
+ )} +
+
+ + {"آدرس:" + " " + address.address} + + + {"نام:" + " " + address.firstName + " " + address.lastName} + + + {"کد پستی:" + " " + address.postalCode} + + + {"شماره تماس:" + " " + address.cellphone} + +
+ {!active && ( + clickOnMenu(e)} + > + + + + + + )} +
+
+
+ ); +}; + const mapStateToProps = (state) => ({ userId: state.user.status?.id, userAddressId: state.userFactor.info?.userAddressId, @@ -137,6 +225,7 @@ const mapStateToProps = (state) => ({ addresses: state.userAddress.list, mobile: state.publicApi.mobile, isDark: state.publicApi.isDark, + menu: state.menu.open, }); const mapDispatchToProps = { @@ -144,6 +233,9 @@ const mapDispatchToProps = { update: userFactor.update, getList: userAddress.list, setHeaderOptions: publicApi.setHeaderOptions, + setMenu: menu.set, + deleteAddress: userAddress.del, + setDialog: dialog.set, }; export default connect(mapStateToProps, mapDispatchToProps)(ProfileAddress);