Danovin
/
application_17
5
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

update 8 files

Browse Source
master
Reza_ashrafi 2 years ago
parent 624fb8aaa9
commit 30cc3dfa9b
10 changed files with 338 additions and 247 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/assets/icons/bookmark-active-dark.svg
  2. 8
      src/assets/icons/bookmark-active-light.svg
  3. 362
      src/components/Drawer/index.js
  4. 79
      src/components/Navbar/index.js
  5. 30
      src/router.js
  6. 13
      src/views/Blogs/index.js
  7. 17
      src/views/Product/index.js
  8. 1
      src/views/Products/index.js
  9. 2
      src/views/Products/layouts/Mobile/Main.js
  10. 65
      src/views/ShoppingCart/Product/index.js

8
src/assets/icons/bookmark-active-dark.svg
Unescape View File

@ -0,0 +1,8 @@
<svg id="vuesax_linear_archive-add" data-name="vuesax/linear/archive-add" xmlns="http://www.w3.org/2000/svg" width="29.778" height="29.778" viewBox="0 0 29.778 29.778">
<g id="archive-add" transform="translate(0)">
<path id="Vector" d="M6.2,0H0" transform="translate(11.787 13.214)" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0V6.2" transform="translate(14.889 10.187)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M16.75,0H4.789A4.8,4.8,0,0,0,0,4.789V22.272c0,2.233,1.6,3.176,3.561,2.1l6.055-3.362a2.628,2.628,0,0,1,2.32,0l6.055,3.362c1.96,1.092,3.561.149,3.561-2.1V4.789A4.819,4.819,0,0,0,16.75,0Z" transform="translate(4.119 2.482)" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H29.778V29.778H0Z" fill="none" opacity="0"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

8
src/assets/icons/bookmark-active-light.svg
Unescape View File

@ -0,0 +1,8 @@
<svg id="vuesax_linear_archive-add" data-name="vuesax/linear/archive-add" xmlns="http://www.w3.org/2000/svg" width="29.778" height="29.778" viewBox="0 0 29.778 29.778">
<g id="archive-add" transform="translate(0)">
<path id="Vector" d="M6.2,0H0" transform="translate(11.787 13.214)" fill="rgb(19, 123, 79)" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0V6.2" transform="translate(14.889 10.187)" fill="rgb(19, 123, 79)" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M16.75,0H4.789A4.8,4.8,0,0,0,0,4.789V22.272c0,2.233,1.6,3.176,3.561,2.1l6.055-3.362a2.628,2.628,0,0,1,2.32,0l6.055,3.362c1.96,1.092,3.561.149,3.561-2.1V4.789A4.819,4.819,0,0,0,16.75,0Z" transform="translate(4.119 2.482)" fill="rgb(19, 123, 79)" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H29.778V29.778H0Z" fill="rgb(19, 123, 79)" opacity="0"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

362
src/components/Drawer/index.js
Unescape View File

@ -10,7 +10,7 @@ import homeDarkIcon from "./home-dark.svg";
import logoutIcon from "./logout.svg"; import logoutIcon from "./logout.svg";
import logoutDarkIcon from "./logout-dark.svg"; import logoutDarkIcon from "./logout-dark.svg";
import dangerIcon from "./mobile-danger.svg"; import dangerIcon from "./mobile-danger.svg";
import dangerDarkIcon from "./mobile-danger-dark.svg"; // import dangerDarkIcon from "./mobile-danger-dark.svg";
import activationIcon from "./activation.svg"; import activationIcon from "./activation.svg";
import activationDarkIcon from "./activation-dark.svg"; import activationDarkIcon from "./activation-dark.svg";
import contactIcon from "./contact.svg"; import contactIcon from "./contact.svg";
@ -24,7 +24,7 @@ import cartDarkIcon from "./mobile-basket-dark.svg";
import faqIcon from "./faq.svg"; import faqIcon from "./faq.svg";
import faqDarkIcon from "./faq-dark.svg"; import faqDarkIcon from "./faq-dark.svg";
import arrowLeftVideo from "../../assets/icons/dropdown-white.svg"; // import arrowLeftVideo from "../../assets/icons/dropdown-white.svg";
import sunIcon from "./sun.svg"; import sunIcon from "./sun.svg";
import moonIcon from "./moon.svg"; import moonIcon from "./moon.svg";
@ -40,186 +40,192 @@ const MyDrawer = ({
setDialog, setDialog,
logout, logout,
}) => { }) => {
const [addUserDropdown, setAddUserDropdown] = useState(false); // const [addUserDropdown, setAddUserDropdown] = useState(false);
const publicLink = [
{ const privateLink = React.useMemo(() => {
name: window.t("صفحه اصلی"), return [
link: "/", {
icon: ( name: window.t("صفحه اصلی"),
<img link: "/",
src={homeIcon} icon: (
className="opacity-50 dark:bg-white" <img
alt={window.t("صفحه اصلی")} src={isDark ? homeDarkIcon : homeIcon}
/> className="opacity-50"
), alt={window.t("صفحه اصلی")}
toast: "", />
message: "", ),
}, toast: "",
{ message: "",
name: window.t("ورود یا ثبت نام"), onClick: () => {
link: "/signup", setDrawerOpen(false);
icon: ( },
<img
src={logoutIcon}
className="opacity-50 dark:bg-white"
alt={window.t("کتاب‌های من")}
/>
),
toast: "",
message: "",
},
{
name: window.t("پشتیبانی"),
link: "/contact-us",
icon: (
<img
src={dangerIcon}
className="opacity-50 dark:bg-white"
alt={window.t("پشتیبانی")}
/>
),
toast: "",
message: "",
},
];
const privateLink = [
{
name: window.t("صفحه اصلی"),
link: "/",
icon: (
<img
src={isDark ? homeDarkIcon : homeIcon}
className="opacity-50"
alt={window.t("صفحه اصلی")}
/>
),
toast: "",
message: "",
onClick: () => {
setDrawerOpen(false);
}, },
}, {
{ name: window.t("سبد خرید"),
name: window.t("سبد خرید"), link: "/cart",
link: "/cart", icon: (
icon: ( <img
<img src={isDark ? cartDarkIcon : cartIcon}
src={isDark ? cartDarkIcon : cartIcon} className="opacity-50"
className="opacity-50" alt={window.t("سبد خرید")}
alt={window.t("سبد خرید")} />
/> ),
), toast: "",
toast: "", message: "",
message: "", onClick: () => {
onClick: () => { setDrawerOpen(false);
setDrawerOpen(false); },
}, },
}, {
{ name: window.t("فعال سازی کتاب"),
name: window.t("فعال سازی کتاب"), link: "/activation",
link: "/activation", icon: (
icon: ( <img
<img src={isDark ? activationDarkIcon : activationIcon}
src={isDark ? activationDarkIcon : activationIcon} className="opacity-50"
className="opacity-50" alt={window.t("فعال سازی کتاب")}
alt={window.t("فعال سازی کتاب")} />
/> ),
), toast: "",
toast: "", message: "",
message: "", onClick: () => {
onClick: () => { setDrawerOpen(false);
setDrawerOpen(false); },
}, },
}, {
{ name: window.t("واقعیت افزوده"),
name: window.t("واقعیت افزوده"), link: "/ar",
link: "/ar", icon: (
icon: ( <img
<img src={isDark ? arDarkIcon : arIcon}
src={isDark ? arDarkIcon : arIcon} className="opacity-50"
className="opacity-50" alt={window.t("واقعیت افزوده")}
alt={window.t("واقعیت افزوده")} />
/> ),
), toast: "",
toast: "", message: "",
message: "", onClick: () => {
onClick: () => { setDrawerOpen(false);
setDrawerOpen(false); },
}, },
}, {
{ name: window.t("سفارشات"),
name: window.t("سفارشات"), link: "/orders",
link: "/orders", icon: (
icon: ( <img
<img src={isDark ? ordersDarkIcon : ordersIcon}
src={isDark ? ordersDarkIcon : ordersIcon} className="opacity-50"
className="opacity-50" alt={window.t("سفارشات")}
alt={window.t("سفارشات")} />
/> ),
), toast: "",
toast: "", message: "",
message: "", onClick: () => {
onClick: () => { setDrawerOpen(false);
setDrawerOpen(false); },
}, },
}, {
{ name: window.t("سوالات متداول"),
name: window.t("سوالات متداول"), link: "/faq",
link: "/faq", icon: (
icon: ( <img
<img src={isDark ? faqDarkIcon : faqIcon}
src={isDark ? faqDarkIcon : faqIcon} className="opacity-50"
className="opacity-50" alt={window.t("سوالات متداول")}
alt={window.t("سوالات متداول")} />
/> ),
), toast: "",
toast: "", message: "",
message: "", onClick: () => {
onClick: () => { setDrawerOpen(false);
setDrawerOpen(false); },
}, },
}, {
{ name: window.t("پشتیبانی"),
name: window.t("پشتیبانی"), link: "/contact",
link: "/contact", icon: (
icon: ( <img
<img src={isDark ? contactDarkIcon : contactIcon}
src={isDark ? contactDarkIcon : contactIcon} className="opacity-50"
className="opacity-50" alt={window.t("پشتیبانی")}
alt={window.t("پشتیبانی")} />
/> ),
), toast: "",
toast: "", message: "",
message: "", onClick: () => {
onClick: () => { setDrawerOpen(false);
setDrawerOpen(false); },
}, },
}, {
{ name: window.t("خروج از حساب کاربری"),
name: window.t("خروج از حساب کاربری"), link: "/",
link: "/", icon: (
icon: ( <img
<img src={isDark ? logoutDarkIcon : logoutIcon}
src={isDark ? logoutDarkIcon : logoutIcon} className="opacity-50"
className="opacity-50" alt={window.t("خروج از حساب کاربری")}
alt={window.t("خروج از حساب کاربری")} />
/> ),
), toast: "",
toast: "", message: "",
message: "", onClick: () => {
onClick: () => { setDialog({
setDialog({ open: true,
open: true, type: "confirm",
type: "confirm", accept: () => {
accept: () => { logout();
logout(); },
}, text: window.t("قصد خروج از حساب کاربری رو داری؟"),
text: window.t("قصد خروج از حساب کاربری رو داری؟"), });
}); setDrawerOpen(false);
setDrawerOpen(false); },
}, },
}, ];
]; },[isDark, user]);
const publicLink = React.useMemo(() => {
return [
{
name: window.t("صفحه اصلی"),
link: "/",
icon: (
<img
src={homeIcon}
className="opacity-50 dark:bg-white"
alt={window.t("صفحه اصلی")}
/>
),
toast: "",
message: "",
},
{
name: window.t("ورود یا ثبت نام"),
link: "/signup",
icon: (
<img
src={logoutIcon}
className="opacity-50 dark:bg-white"
alt={window.t("کتاب‌های من")}
/>
),
toast: "",
message: "",
},
{
name: window.t("پشتیبانی"),
link: "/contact-us",
icon: (
<img
src={dangerIcon}
className="opacity-50 dark:bg-white"
alt={window.t("پشتیبانی")}
/>
),
toast: "",
message: "",
},
];
},[isDark, user]);
return ( return (
<Drawer <Drawer
@ -256,21 +262,21 @@ const MyDrawer = ({
{user?.cellphone} {user?.cellphone}
</span> </span>
</div> </div>
<img {/* <img
src={arrowLeftVideo} src={arrowLeftVideo}
alt="" alt=""
className={`transform ${ className={`transform ${
addUserDropdown ? "rotate-90" : "-rotate-90" addUserDropdown ? "rotate-90" : "-rotate-90"
} cursor-pointer`} } cursor-pointer`}
onClick={() => setAddUserDropdown(() => !addUserDropdown)} onClick={() => setAddUserDropdown(() => !addUserDropdown)}
/> /> */}
</div> </div>
</header> </header>
<ul {/* <ul
className={`flex flex-col ${ className={`flex flex-col ${
addUserDropdown ? "h-20" : "h-0" addUserDropdown ? "h-20" : "h-0"
} transition-all duration-500`} } transition-all duration-500`}
></ul> ></ul> */}
<ul className="h-full flex flex-col py-6 px-4 gap-6"> <ul className="h-full flex flex-col py-6 px-4 gap-6">
{(!user ? publicLink : privateLink).map((item, key) => ( {(!user ? publicLink : privateLink).map((item, key) => (
<Link to={item.link} key={key} onClick={() => item.onClick()}> <Link to={item.link} key={key} onClick={() => item.onClick()}>

79
src/components/Navbar/index.js
Unescape View File

@ -9,6 +9,7 @@ import _ from "lodash";
import Drawer from "../Drawer"; import Drawer from "../Drawer";
import Search from "../Search"; import Search from "../Search";
import SearchResult from "./SearchResult"; import SearchResult from "./SearchResult";
import Loading from "../Loading";
//assets //assets
import cartIcon from "./cart-blue.svg"; import cartIcon from "./cart-blue.svg";
@ -24,18 +25,24 @@ import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg";
import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg"; import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg";
import dotsMenuDarkIcon from "../../assets/icons/dots-menu-dark.svg"; import dotsMenuDarkIcon from "../../assets/icons/dots-menu-dark.svg";
import bookmarkDeactiveDarkIcon from "../../assets/icons/bookmark-deactive-dark.svg"; import bookmarkDeactiveDarkIcon from "../../assets/icons/bookmark-deactive-dark.svg";
import bookmarkActiveDarkIcon from "../../assets/icons/bookmark-active-dark.svg";
import dotsMenuLightIcon from "../../assets/icons/dots-menu-light.svg"; import dotsMenuLightIcon from "../../assets/icons/dots-menu-light.svg";
import bookmarkDeactiveLightIcon from "../../assets/icons/bookmark-deactive-light.svg"; import bookmarkDeactiveLightIcon from "../../assets/icons/bookmark-deactive-light.svg";
import bookmarkActiveLightIcon from "../../assets/icons/bookmark-active-light.svg";
function Navbar({ function Navbar({
getCartProducts, getCartProducts,
getUserFavorite,
cartProductsLength, cartProductsLength,
pages, pages,
isDark, isDark,
isMobile, isMobile,
isLogin, user,
headerOptions, headerOptions,
addToFavorite, addToFavorite,
deleteBookmark,
bookmarkLoading,
userFavoriteList,
language, language,
}) { }) {
const navigation = useNavigate(); const navigation = useNavigate();
@ -46,11 +53,22 @@ function Navbar({
const [search, setSearch] = useState(null); const [search, setSearch] = useState(null);
const [drawerOpen, setDrawerOpen] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false);
const isActiveBookmark = React.useMemo(() => {
return userFavoriteList?.find((object) =>
headerOptions?.productId
? object?.productId === headerOptions?.productId
: object?.contentId === headerOptions?.contentId
);
}, [headerOptions, userFavoriteList]);
console.log(Boolean(isActiveBookmark));
useEffect(() => { useEffect(() => {
if (window.scrollY === 0) { if (window.scrollY === 0) {
setTop(() => true); setTop(() => true);
} }
if (isMobile) { if (isMobile) {
// getUserFavorite();
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
if (window.scrollY === 0) { if (window.scrollY === 0) {
setTop(() => true); setTop(() => true);
@ -62,13 +80,11 @@ function Navbar({
}, []); }, []);
useEffect(() => { useEffect(() => {
if (!isMobile && isLogin) { if (!isMobile && user) {
console.log(111);
// console.log/("gl3");
getCartProducts(); getCartProducts();
} }
}, [isLogin]); }, [user]);
return ( return (
<div <div
@ -77,7 +93,9 @@ function Navbar({
backgroundColor: !top ? (isDark ? "#061B30" : "white") : "", backgroundColor: !top ? (isDark ? "#061B30" : "white") : "",
}} }}
> >
<div className="w-full lg:w-11/12 lg:mx-auto relative flex items-center justify-between py-3 px-4 bg-white"> <div className="w-full lg:w-11/12 lg:mx-auto relative flex items-center justify-between py-3 px-4" style={{
backgroundColor: isDark ? "#061B30" : "white"
}}>
{/* desktop */} {/* desktop */}
<div className=" items-center hidden lg:flex"> <div className=" items-center hidden lg:flex">
<Link <Link
@ -193,16 +211,35 @@ function Navbar({
</Link> </Link>
</> </>
)} )}
{bookmark && ( {bookmark ? (
<img bookmarkLoading ? (
src={ <Loading size={2} color="bg-green-500" />
isDark ? bookmarkDeactiveDarkIcon : bookmarkDeactiveLightIcon ) : isActiveBookmark ? (
} <img
alt="bookmark" src={
className="w-7 flex lg:hidden" isDark ? bookmarkActiveDarkIcon : bookmarkActiveLightIcon
onClick={() => addToFavorite({ [bookmark]: location.getId() })} }
/> alt="bookmark"
)} className="w-7 flex lg:hidden"
onClick={() =>
deleteBookmark({
id: userFavoriteList?.find(
(object) => object?.productId === headerOptions?.productId
)?.id,
})
}
/>
) : (
<img
src={
isDark ? bookmarkDeactiveDarkIcon : bookmarkDeactiveLightIcon
}
alt="bookmark"
className="w-7 flex lg:hidden"
onClick={() => addToFavorite({ [bookmark]: location.getId() })}
/>
)
) : null}
{menu && ( {menu && (
<img <img
src={isDark ? dotsMenuDarkIcon : dotsMenuLightIcon} src={isDark ? dotsMenuDarkIcon : dotsMenuLightIcon}
@ -242,7 +279,7 @@ function Navbar({
onClick={() => setOverLayer(true)} onClick={() => setOverLayer(true)}
/> />
{isLogin && ( {user && (
<div className="hidden lg:flex justify-end items-center gap-4"> <div className="hidden lg:flex justify-end items-center gap-4">
<Link to="/cart" className="relative"> <Link to="/cart" className="relative">
<img src={cartIcon} alt="" className="w-8" /> <img src={cartIcon} alt="" className="w-8" />
@ -256,7 +293,7 @@ function Navbar({
</div> </div>
)} )}
{!isLogin ? ( {!user ? (
<Link <Link
to="/signup" to="/signup"
className="bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm" className="bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
@ -284,15 +321,19 @@ const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark, isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile, isMobile: state.publicApi.isMobile,
headerOptions: state.publicApi.headerOptions, headerOptions: state.publicApi.headerOptions,
isLogin: state.user.status, user: state.user.status,
cartProductsLength: state.userProduct.list?.filter( cartProductsLength: state.userProduct.list?.filter(
(product) => product.condition < 2 (product) => product.condition < 2
)?.length, )?.length,
bookmarkLoading: state.userFavorite.loading,
userFavoriteList: state.userFavorite.list,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
getCartProducts: userProduct.list, getCartProducts: userProduct.list,
addToFavorite: userFavorite.add, addToFavorite: userFavorite.add,
deleteBookmark: userFavorite.del,
getUserFavorite: userFavorite.list
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Navbar); export default connect(mapStateToProps, mapDispatchToProps)(Navbar);

30
src/router.js
Unescape View File

@ -161,7 +161,17 @@ function Router({
path="/products" path="/products"
exact exact
element={ element={
<Products headerOptions={{ shown: isMobile ? false : true }} /> <Products
headerOptions={{
logo: true,
hamburgerMenu: true,
qr: true,
title: false,
back: false,
shown: true,
menu: false,
}}
/>
} }
/> />
<Route <Route
@ -523,15 +533,15 @@ function Router({
exact exact
element={ element={
<Blogs <Blogs
// headerOptions={{ headerOptions={{
// logo: true, logo: true,
// hamburgerMenu: true, hamburgerMenu: true,
// qr: true, qr: true,
// title: false, title: false,
// back: false, back: false,
// shown: true, shown: true,
// menu: false, menu: false,
// }} }}
/> />
} }
/> />

13
src/views/Blogs/index.js
Unescape View File

@ -20,23 +20,16 @@ export const Blogs = ({
getList, getList,
blogs, blogs,
setHeaderOptions, setHeaderOptions,
headerOptions,
activeHashtag, activeHashtag,
}) => { }) => {
useEffect(() => { useEffect(() => {
if (isMobile) { setHeaderOptions(headerOptions);
setHeaderOptions({
shown: true,
hamburgerMenu: true,
qr: true,
});
} else {
setHeaderOptions({ shown: true });
}
getList(); getList();
}, []); }, []);
useEffect(() => { useEffect(() => {
window.scrollTo(0, 0); window.scroll({ top: 0, behavior: "smooth" });
}, []); }, []);
return ( return (

17
src/views/Product/index.js
Unescape View File

@ -29,6 +29,7 @@ export const Product = ({
userId, userId,
pushToCart, pushToCart,
headerOptions, headerOptions,
bookmarkLoading,
setHeaderOptions, setHeaderOptions,
}) => { }) => {
const [type, setType] = useState("physical"); const [type, setType] = useState("physical");
@ -37,7 +38,6 @@ export const Product = ({
useEffect(() => { useEffect(() => {
getInfo({ id: location.getId(), vod: true }); getInfo({ id: location.getId(), vod: true });
setHeaderOptions(headerOptions);
if (!isMobile) { if (!isMobile) {
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
if (window.scrollY >= 64) { if (window.scrollY >= 64) {
@ -49,6 +49,12 @@ export const Product = ({
} }
}, []); }, []);
useEffect(() => {
if (book) {
setHeaderOptions({ ...headerOptions, productId: book?.id });
window.scroll({ top: 0, behavior: "smooth" });
}
}, [book]);
return ( return (
<> <>
{/* Portrait */} {/* Portrait */}
@ -88,9 +94,11 @@ export const Product = ({
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-tiny leading-5 font-medium text-green7B dark:text-white"> <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-tiny leading-5 font-medium text-green7B dark:text-white">
{"فیزیکی - دیجیتالی"} <br /> در دسترس {"فیزیکی - دیجیتالی"} <br /> در دسترس
</li> </li>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-tiny leading-5 font-medium text-green7B dark:text-white"> {book?.rate ? (
{book?.rate} <br /> امتیاز <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-tiny leading-5 font-medium text-green7B dark:text-white">
</li> {book?.rate} <br /> امتیاز
</li>
) : null}
</ul> </ul>
<h2 className="text-green7B text-base font-semibold mt-10 dark:text-greenBA"> <h2 className="text-green7B text-base font-semibold mt-10 dark:text-greenBA">
نسخه محصول را انتخاب کنید نسخه محصول را انتخاب کنید
@ -196,6 +204,7 @@ const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile, isMobile: state.publicApi.isMobile,
isDark: state.publicApi.isDark, isDark: state.publicApi.isDark,
userId: state.user.status?.id, userId: state.user.status?.id,
bookmarkLoading: state.userFavorite.loading,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

1
src/views/Products/index.js
Unescape View File

@ -23,6 +23,7 @@ export const Products = ({
useEffect(() => { useEffect(() => {
getList({ vod: true }); getList({ vod: true });
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
window.scroll({top: 0, behavior : 'smooth'});
}, []); }, []);
return ( return (

2
src/views/Products/layouts/Mobile/Main.js
Unescape View File

@ -137,7 +137,7 @@ export const Main = ({ books, filterOptions, grades }) => {
}; };
return ( return (
<div className="h-full overflow-y-scroll w-full flex flex-wrap py-32"> <div className="h-full overflow-y-scroll w-full flex flex-wrap pt-20 pb-32">
{filterOptions?.productType === "دوره ویدئویی" && Items(2)} {filterOptions?.productType === "دوره ویدئویی" && Items(2)}
{filterOptions?.productType === "کتاب دیجیتال" && Items(0)} {filterOptions?.productType === "کتاب دیجیتال" && Items(0)}
{filterOptions?.productType === "کتاب فیزیکی" && Items(1)} {filterOptions?.productType === "کتاب فیزیکی" && Items(1)}

65
src/views/ShoppingCart/Product/index.js
Unescape View File

@ -10,6 +10,14 @@ import exitIcon from "../../../assets/icons/exit.svg";
import deleteIcon from "../../../assets/icons/delete.svg"; import deleteIcon from "../../../assets/icons/delete.svg";
function Product({ product, grades, pushToCart, isMobile, loading }) { function Product({ product, grades, pushToCart, isMobile, loading }) {
const [selectedItem, setSelectedItem] = React.useState(null);
React.useEffect(() => {
if (!loading) {
setSelectedItem(null);
}
}, [loading]);
return isMobile ? ( return isMobile ? (
<div className="flex justify-between py-5 border-b border-solid border-grayDB dark:border-gray45"> <div className="flex justify-between py-5 border-b border-solid border-grayDB dark:border-gray45">
<div className="flex "> <div className="flex ">
@ -34,7 +42,8 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
src={exitIcon} src={exitIcon}
className="w-4" className="w-4"
alt="" alt=""
onClick={() => onClick={() => {
setSelectedItem(product?.productId);
pushToCart( pushToCart(
{ {
productId: product?.productId, productId: product?.productId,
@ -43,26 +52,27 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
}, },
{}, {},
{ id: product?.factorId } { id: product?.factorId }
) );
} }}
/> />
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
{product.productType === 2 && ( {product.productType === 2 ? (
<div className="flex items-center mb-3"> <div className="flex items-center mb-3">
<button <button
className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0" className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0"
onClick={() => onClick={() => {
setSelectedItem(product?.productId);
pushToCart({ pushToCart({
productId: product?.productId, productId: product?.productId,
userId: product?.userId, userId: product?.userId,
count: 1, count: 1,
}) });
} }}
> >
+ +
</button> </button>
<span className="mx-2.5 font-semibold text-4xl text-blueC0"> <span className="mx-2.5 font-semibold text-4xl text-blueC0">
{loading ? ( {loading && selectedItem === product?.productId ? (
<Loading size={2} color="bg-green-500" /> <Loading size={2} color="bg-green-500" />
) : ( ) : (
product.count product.count
@ -72,7 +82,8 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
<> <>
{product.count === 1 ? ( {product.count === 1 ? (
<img <img
onClick={() => onClick={() => {
setSelectedItem(product?.productId);
pushToCart( pushToCart(
{ {
productId: product?.productId, productId: product?.productId,
@ -82,22 +93,23 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
}, },
{}, {},
{ id: product?.factorId } { id: product?.factorId }
) );
} }}
src={deleteIcon} src={deleteIcon}
alt="delete" alt="delete"
className="border border-blue-800 border-solid p-1 w-8 bg-red-100 rounded-md cursor-pointer" className="border border-red-800 border-solid p-1 w-8 bg-red-100 rounded-md cursor-pointer"
/> />
) : ( ) : (
<button <button
className="rounded-md pt-2 pb-1.5 px-3 font-bold border border-solid border-blueC0 text-blueC0 dark:border-blueC0 dark:text-blueC0" className="rounded-md pt-2 pb-1.5 px-3 font-bold border border-solid border-blueC0 text-blueC0 dark:border-blueC0 dark:text-blueC0"
onClick={() => onClick={() => {
setSelectedItem(product?.productId);
pushToCart({ pushToCart({
productId: product?.productId, productId: product?.productId,
userId: product?.userId, userId: product?.userId,
count: -1, count: -1,
}) });
} }}
> >
- -
</button> </button>
@ -105,7 +117,7 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
</> </>
} }
</div> </div>
)} ) : null}
<strong className="font-bold text-md text-blue5F dark:text-white"> <strong className="font-bold text-md text-blue5F dark:text-white">
{separate(product.product.price * product.count)}&nbsp;تومان {separate(product.product.price * product.count)}&nbsp;تومان
</strong> </strong>
@ -147,13 +159,14 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
<div className="w-1/4 flex items-center"> <div className="w-1/4 flex items-center">
<button <button
className="rounded-md pt-1 px-1.5 border border-solid border-blueC0 text-blueC0 text-lg font-bold" className="rounded-md pt-1 px-1.5 border border-solid border-blueC0 text-blueC0 text-lg font-bold"
onClick={() => onClick={() => {
setSelectedItem(product?.productId);
pushToCart({ pushToCart({
productId: product?.productId, productId: product?.productId,
userId: product?.userId, userId: product?.userId,
count: 1, count: 1,
}) });
} }}
> >
+ +
</button> </button>
@ -164,7 +177,8 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
<> <>
{product.count === 1 ? ( {product.count === 1 ? (
<img <img
onClick={() => onClick={() => {
setSelectedItem(product?.productId);
pushToCart( pushToCart(
{ {
productId: product?.productId, productId: product?.productId,
@ -173,8 +187,8 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
}, },
{}, {},
{ id: product?.factorId } { id: product?.factorId }
) );
} }}
src={deleteIcon} src={deleteIcon}
alt="delete" alt="delete"
className="border border-red-300 border-solid p-1 w-7 bg-red-100 rounded-md cursor-pointer" className="border border-red-300 border-solid p-1 w-7 bg-red-100 rounded-md cursor-pointer"
@ -182,13 +196,14 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
) : ( ) : (
<button <button
className="rounded-md px-2 font-bold border border-solid border-blueC0 text-blueC0 dark:border-blueC0 dark:text-blueC0 text-2xl" className="rounded-md px-2 font-bold border border-solid border-blueC0 text-blueC0 dark:border-blueC0 dark:text-blueC0 text-2xl"
onClick={() => onClick={() => {
setSelectedItem(product?.productId);
pushToCart({ pushToCart({
productId: product?.productId, productId: product?.productId,
userId: product?.userId, userId: product?.userId,
count: -1, count: -1,
}) });
} }}
> >
- -
</button> </button>

Write Preview
Loading…
Cancel
Save