From 133361b9e0d1dac46317f97bcde24a1793860f27 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Tue, 8 Feb 2022 10:46:49 +0330 Subject: [PATCH] reza added some options --- src/App.scss | 4 + src/components/Footer/Bazar.svg | 8 + src/components/Footer/IOS.svg | 8 + src/components/Footer/index.js | 181 ++++++++++++------ src/components/Input/index.js | 3 +- src/components/Navbar/index.js | 2 +- src/components/Product/index.js | 55 +++--- src/components/Select/index.js | 6 +- src/components/VodProduct/index.js | 8 +- src/redux/reducers/content.js | 23 +++ src/redux/reducers/index.js | 1 + src/redux/reducers/public.js | 22 ++- src/views/Address/index.js | 97 +++++++++- src/views/Dashboard/index.js | 4 +- .../Main/UserItems/ProductSuggestion/index.js | 46 +++++ .../Dashboard/layouts/Main/UserItems/index.js | 30 ++- src/views/Dashboard/layouts/Main/index.js | 18 +- src/views/Home/Desktop/index.js | 11 +- .../Home/Portrait/Private/MyBooks/index.js | 57 +++--- .../Home/Portrait/Private/Videos/index.js | 54 +++--- src/views/Products/index.js | 8 +- src/views/Products/layouts/Main.js | 6 +- 22 files changed, 451 insertions(+), 201 deletions(-) create mode 100644 src/components/Footer/Bazar.svg create mode 100644 src/components/Footer/IOS.svg create mode 100644 src/redux/reducers/content.js create mode 100644 src/views/Dashboard/layouts/Main/UserItems/ProductSuggestion/index.js diff --git a/src/App.scss b/src/App.scss index 95cf680..4ba4d46 100644 --- a/src/App.scss +++ b/src/App.scss @@ -18,6 +18,10 @@ direction: rtl; } +.scrolling-carousel button{ + display: none; +} + @font-face { font-family: Black; src: url("./assets/font/IranSansX/Farsi/Black.ttf"); diff --git a/src/components/Footer/Bazar.svg b/src/components/Footer/Bazar.svg new file mode 100644 index 0000000..b1f4dd5 --- /dev/null +++ b/src/components/Footer/Bazar.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Footer/IOS.svg b/src/components/Footer/IOS.svg new file mode 100644 index 0000000..aef3093 --- /dev/null +++ b/src/components/Footer/IOS.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index c836f52..7756b3e 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -1,59 +1,70 @@ import React from "react"; +import { Link } from "react-router-dom"; import _ from "lodash"; // import enamadlogo from './enamad-pic.svg'; -import callIcon from '../../assets/icons/vuesax-linear-call-calling.svg'; -import samandehi from './samandehi-pic.svg'; +import callIcon from "../../assets/icons/vuesax-linear-call-calling.svg"; +import samandehi from "./samandehi-pic.svg"; +import iosIcon from "./IOS.svg"; +import bazarIcon from "./Bazar.svg"; import lightBlueLine from "./light-blue-line.svg"; - - -const FooterDesign1 = ({ color, bg, links, hasHeader }) => { - +const FooterDesign1 = ({ color, bg, items, hasHeader }) => { const enamad = ''; return ( <> - {hasHeader ? -
+ {hasHeader ? ( +
+
+
+
+ +
+

+ 7 روز هفته{" "} + 24 ساعته +

+

+ منتظر شنیدن صدای گرمتان هستیم +

+
+
-
- -
-

- 7 روز هفته 24 ساعته -

-

منتظر شنیدن صدای گرمتان هستیم

+
+

654412 021

+

Info[at]danovin.ir

+
+
+
+ + + +
- -
-

654412 021

-

Info[at]danovin.ir

-
-
- : null} + ) : null}
-
- <> - { - links.map((section, index) =>
    - { - section.map((link, index) =>
  • - {link} -
    • ) - } -
) - } - +
+ {items.map((item, index) => ( +
+ {item.name} +
    + {item.links.map((link, index) => ( +
  • + + {link.name} + +
    • + ))} +
+
+ ))}
{ __html: enamad, }} className="w-28 p-2 rounded-md bg-gray-300 mx-6" - > - -
- + >
+
{/* line @@ -73,7 +86,6 @@ const FooterDesign1 = ({ color, bg, links, hasHeader }) => { alt="" className="hidden sm:block absolute bottom-5 left-20" /> */} -
); @@ -82,26 +94,71 @@ const FooterDesign1 = ({ color, bg, links, hasHeader }) => { export default FooterDesign1; FooterDesign1.defaultProps = { - links: [ - ["لینک های اصلی", "فروشگاه", "درباره ما", "پرسش های متوالی"], - [ - "خدمات مشتریان", - "شرایط و ضوابط استفاده", - " راهنمای خرید", - "همکاری تجاری" - ], - [ - "کاربری", - "حساب کاربری", - "سبد خرید", - "داشبورد کاربری" - ], - [ - "رضایت مشتریان", - "رسیدگی به شکایات", - "پیگیری سفارشات" - ], - + items: [ + { + name: "لینک‌های اصلی", + links: [ + { + name: "فروشگاه", + link: "/products", + }, + { + name: "درباره‌ما", + link: "/about-us", + }, + { + name: "پرسش‌های متداول", + link: "/faq", + }, + ], + }, + { + name: "خدمات مشتریان", + links: [ + { + name: "شرایط و ضوابط استفاده", + link: "#", + }, + { + name: "راهنمای خرید", + link: "#", + }, + { + name: "همکاری تجاری", + link: "#", + }, + ], + }, + { + name: "کاربری", + links: [ + { + name: "حساب کاربری", + link: "#", + }, + { + name: "سبد خرید", + link: "/cart", + }, + { + name: "داشبورد کاربری", + link: "/dashboard", + }, + ], + }, + { + name: "رضایت مشتریان", + links: [ + { + name: "رسیدگی به شکایات", + link: "/contact-us", + }, + { + name: "پیگیری سفارشات", + link: "/orders", + }, + ], + }, ], bg: "bg-white", color: "text-gray-600", diff --git a/src/components/Input/index.js b/src/components/Input/index.js index f8be420..9201d8f 100644 --- a/src/components/Input/index.js +++ b/src/components/Input/index.js @@ -52,6 +52,7 @@ export default function Input(props) { ["input flex flex-col relative my-2 dark:bg-opacity-10 w-full", langDetector(lang, "fa", "en")], " " )} + style={{width}} > {/*
)} - {1 && ( + {!isLogin && ( { const [isHovering, setIsHovering] = useState(false); return ( - -
+
setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} > {/* product image */}
{/* icons on image */} -
+
{discountPricePercent && ( -
+

23%

@@ -87,24 +86,22 @@ const ProductDesign = ({
{/* img */}
- {verticalImg && ( - - )} +
{/* product content */} -
-
+
+

@@ -119,9 +116,7 @@ const ProductDesign = ({

)} {productCat && ( - + {"پایه" + " " + grades[product.gradeId]} )} @@ -137,9 +132,7 @@ const ProductDesign = ({ )} {/* price */} {priceHolder && ( -
+
val} + regex={(val) => val} name="firstName" onChange={(name, value) => onChange(name, value)} value={addressFields?.firstName} @@ -40,6 +53,7 @@ export const Address = ({}) => { direction="rtl" /> val} name="lastName" @@ -49,13 +63,78 @@ export const Address = ({}) => { direction="rtl" />
+
+
+
+
+ onInput.numberOnly(val)} + name="cellphone" + onChange={(name, value) => onChange(name, value)} + value={addressFields?.cellphone} + align="text-right" + direction="ltr" + /> + onInput.numberOnly(val)} + name="tellphone" + onChange={(name, value) => onChange(name, value)} + value={addressFields?.lastName} + align="text-right" + direction="ltr" + /> +
+
+
+
+
+ onChange(name, value)} + /> +
+
+ onInput.numberOnly(val)} + name="tellphone" + onChange={(name, value) => onChange(name, value)} + value={addressFields?.lastName} + align="text-right" + direction="ltr" + />
); }; -const mapStateToProps = (state) => ({}); +const mapStateToProps = (state) => ({ + province: state.publicApi.province, + city: state.publicApi.city, +}); -const mapDispatchToProps = {}; +const mapDispatchToProps = { + getProvince: publicApi.getProvince, + getCity: publicApi.getCity, +}; export default connect(mapStateToProps, mapDispatchToProps)(Address); diff --git a/src/views/Dashboard/index.js b/src/views/Dashboard/index.js index c94060c..399b202 100644 --- a/src/views/Dashboard/index.js +++ b/src/views/Dashboard/index.js @@ -7,9 +7,9 @@ export const Dashboard = ({ isMobile }) => { return isMobile ? (
) : ( -
+
- + {/* */}
diff --git a/src/views/Dashboard/layouts/Main/UserItems/ProductSuggestion/index.js b/src/views/Dashboard/layouts/Main/UserItems/ProductSuggestion/index.js new file mode 100644 index 0000000..ff9772b --- /dev/null +++ b/src/views/Dashboard/layouts/Main/UserItems/ProductSuggestion/index.js @@ -0,0 +1,46 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import { Carousel } from "@trendyol-js/react-carousel"; +import Product from '../../../../../../components/Product'; +import arrow from "../../../../../../assets/icons/slider-arrow.svg"; + +function Suggestion({ products, grades, isMobile }) { + return ( +
+ + پیشنهادات ما به شما + + {products.length > 0 && ( +
+ + } + leftArrow={ + + } + > + {products.map((product, index) => ( + + ))} + +
+ )} +
+ ); +} + +export default Suggestion; diff --git a/src/views/Dashboard/layouts/Main/UserItems/index.js b/src/views/Dashboard/layouts/Main/UserItems/index.js index 5758342..8984184 100644 --- a/src/views/Dashboard/layouts/Main/UserItems/index.js +++ b/src/views/Dashboard/layouts/Main/UserItems/index.js @@ -1,21 +1,35 @@ -import React from "react"; +import React, {useEffect} from "react"; import { connect } from "react-redux"; +import {book} from '../../../../../redux/actions'; import MyBooks from "../../../../Home/Portrait/Private/MyBooks"; import Videos from "../../../../Home/Portrait/Private/Videos"; +import ProductSuggestion from './ProductSuggestion'; - -export const UserItems = ({}) => { +export const UserItems = ({list, grades, getList, isMobile}) => { + useEffect(() => { + if(list.length <= 0){ + getList(); + } + },[]); return ( -
- - +
+ +
+ +
); }; -const mapStateToProps = (state) => ({}); +const mapStateToProps = (state) => ({ + list : state.book.list, + grades: state.publicApi.grades, + isMobile: state.publicApi.isMobile +}); -const mapDispatchToProps = {}; +const mapDispatchToProps = { + getList : book.list, +}; export default connect(mapStateToProps, mapDispatchToProps)(UserItems); \ No newline at end of file diff --git a/src/views/Dashboard/layouts/Main/index.js b/src/views/Dashboard/layouts/Main/index.js index bc0608e..e32dff1 100644 --- a/src/views/Dashboard/layouts/Main/index.js +++ b/src/views/Dashboard/layouts/Main/index.js @@ -1,20 +1,26 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { connect } from "react-redux"; +import {publicApi} from '../../../../redux/actions'; import Orders from "../../../Orders"; import UserItems from "../Main/UserItems"; -export const Main = ({}) => { +export const Main = ({setHeaderOptions}) => { + useEffect(() => { + setHeaderOptions({shown: true}); + },[]); const views = { - orders: , + // orders: , userItems: }; - const [page, setPage] = useState("orders"); - return
{views[page]}
; + const [page, setPage] = useState("userItems"); + return
{views[page]}
; }; const mapStateToProps = (state) => ({}); -const mapDispatchToProps = {}; +const mapDispatchToProps = { + setHeaderOptions: publicApi.setHeaderOptions, +}; export default connect(mapStateToProps, mapDispatchToProps)(Main); diff --git a/src/views/Home/Desktop/index.js b/src/views/Home/Desktop/index.js index cb7f54f..4368207 100644 --- a/src/views/Home/Desktop/index.js +++ b/src/views/Home/Desktop/index.js @@ -1,8 +1,5 @@ import React, { useState, useEffect } from "react"; import { connect } from "react-redux"; -import { Link } from "react-router-dom"; -import filterIcon from "../../../assets/images/vuesax-linear-filter-tick.svg"; -import Banners from "../../../components/Banners"; import SalesContainer from "./SalesContainer"; import { book, publicApi, product } from "../../../redux/actions"; @@ -10,9 +7,8 @@ import Part2 from "./Part2"; import HomeImg from "../../../assets/images/HomeImg.png"; import Part4 from "./Part4"; import Design2D from "../../../components/Design2D"; -import { get } from "lodash"; -const DesktopHome = ({ grades, getBooks, books, getVODs, listVOD }) => { +const DesktopHome = ({ grades, getBooks, books }) => { const banners = [ { flex: 4, @@ -57,7 +53,6 @@ const DesktopHome = ({ grades, getBooks, books, getVODs, listVOD }) => { useEffect(() => { getBooks(); - getVODs(); },[]); return ( @@ -76,7 +71,7 @@ const DesktopHome = ({ grades, getBooks, books, getVODs, listVOD }) => {
- +
); }; @@ -88,12 +83,10 @@ const mapStateToProps = (state) => ({ gradeFilterBooks: state.book.gradeFilterBooks, selectedGrade: state.book.selectedGrade, grades: state.publicApi.grades, - listVOD: state.product.listVOD }); const mapDispatchToProps = { getBooks: book.list, - getVODs: product.listVOD, gradeFilter: book.gradeFilter, setHeaderOptions: publicApi.setHeaderOptions, }; diff --git a/src/views/Home/Portrait/Private/MyBooks/index.js b/src/views/Home/Portrait/Private/MyBooks/index.js index b9b13c3..0995229 100644 --- a/src/views/Home/Portrait/Private/MyBooks/index.js +++ b/src/views/Home/Portrait/Private/MyBooks/index.js @@ -1,17 +1,13 @@ import React, { useEffect } from "react"; import { Link } from "react-router-dom"; import { connect } from "react-redux"; -import { book } from "../../../../../redux/actions"; -import Progress from '../../../../../components/Progress'; +import { ScrollingCarousel } from "@trendyol-js/react-carousel"; +import Progress from "../../../../../components/Progress"; -function MyBooks({ list, getList, grades, isMobile }) { - useEffect(() => { - getList(); - }, []); - - const Book = ({ book}) => { +function MyBooks({ books, getList, grades, isMobile }) { + const Book = ({ book }) => { return ( -
  • +
  • -

    {book.name}

    -

    {`پایه ${grades[book.gradeId]}`}

    +

    + {book.name} +

    +

    {`پایه ${ + grades[book.gradeId] + }`}

    • @@ -33,24 +33,33 @@ function MyBooks({ list, getList, grades, isMobile }) { }; return ( -
    +
    - کتابهای من -
      - {list?.slice(0,5)?.map((book, index) => ( - - ))} -
    + + کتابهای من + + {isMobile ? ( +
      + {books?.slice(0, 5)?.map((book, index) => ( + + ))} +
    + ) : ( +
    + + {books?.map((book, index) => ( + + ))} + +
    + )}
    ); } - const mapStateToProps = (state) => ({ - list: state.book.list, - grades : state.publicApi.grades, - isMobile: state.publicApi.isMobile + isMobile: state.publicApi.isMobile, }); -export default connect(mapStateToProps, { getList: book.list })(MyBooks); +export default connect(mapStateToProps)(MyBooks); diff --git a/src/views/Home/Portrait/Private/Videos/index.js b/src/views/Home/Portrait/Private/Videos/index.js index 1412160..87f67f3 100644 --- a/src/views/Home/Portrait/Private/Videos/index.js +++ b/src/views/Home/Portrait/Private/Videos/index.js @@ -1,37 +1,33 @@ import React, { useEffect } from "react"; import { Link } from "react-router-dom"; +import { ScrollingCarousel } from "@trendyol-js/react-carousel"; import { connect } from "react-redux"; -import { book } from "../../../../../redux/actions"; import Progress from "../../../../../components/Progress"; import arrowBlueIcon from "../../../../../assets/icons/arrow-right-blue.svg"; import arrowWhiteIcon from "../../../../../assets/icons/arrow-left-white.svg"; -function Videos({ list, getList, grades, isDark, isMobile }) { - useEffect(() => { - getList(); - }, []); - - const Book = ({ book }) => { +function Videos({ videos, grades, isDark, isMobile }) { + const Video = ({ video }) => { return ( -
  • - +
  • + -

    - {book.name} +

    + {'دوره ویدئویی' + ' ' + video.name}

    -

    {`پایه ${ - grades[book.gradeId] - }`}

    + {/*

    {`پایه ${ + grades[video.gradeId] + }`}

    */}
    • @@ -39,7 +35,7 @@ function Videos({ list, getList, grades, isDark, isMobile }) { }; return (
    -
    +
    دوره‌های ویدئویی شما @@ -50,21 +46,27 @@ function Videos({ list, getList, grades, isDark, isMobile }) { className={`transform lg:hidden ${isDark ? "w-7" : "rotate-180"}`} />
    -
      - {list.slice(0,5)?.map((book, index) => ( - - ))} -
    + {isMobile ? ( +
      + {videos.slice(0, 5)?.map((video, index) => ( +
    + ) : ( + + {videos?.map((video, index) => ( + + )}
    ); } const mapStateToProps = (state) => ({ - list: state.book.list, - grades: state.publicApi.grades, isDark: state.publicApi.isDark, - isMobile: state.publicApi.isMobile + isMobile: state.publicApi.isMobile, }); -export default connect(mapStateToProps, { getList: book.list })(Videos); +export default connect(mapStateToProps)(Videos); diff --git a/src/views/Products/index.js b/src/views/Products/index.js index e624b30..190d561 100644 --- a/src/views/Products/index.js +++ b/src/views/Products/index.js @@ -5,14 +5,12 @@ import Search from "../../components/Search"; import Select from "../../components/Select"; import Sidebar from "./layouts/Sidebar"; import Main from "./layouts/Main"; -import { book, publicApi, product } from "../../redux/actions"; +import { book, publicApi } from "../../redux/actions"; //assets import searchLight from "../../assets/icons/search-light.svg"; export const Products = ({ - getVODs, - listVOD, isDark, isMobile, books, @@ -37,7 +35,6 @@ export const Products = ({ useEffect(() => { getList(); - getVODs(); setHeaderOptions(headerOptions); }, []); @@ -164,8 +161,6 @@ export const Products = ({
    @@ -192,7 +187,6 @@ const mapDispatchToProps = { getList: book.list, gradeFilter: book.gradeFilter, setHeaderOptions: publicApi.setHeaderOptions, - getVODs: product.listVOD, }; export default connect(mapStateToProps, mapDispatchToProps)(Products); diff --git a/src/views/Products/layouts/Main.js b/src/views/Products/layouts/Main.js index c5fb540..91e08c2 100644 --- a/src/views/Products/layouts/Main.js +++ b/src/views/Products/layouts/Main.js @@ -11,7 +11,6 @@ import posterImage from "../../../assets/images/poster.svg"; import arrow from "../../../assets/icons/slider-arrow.svg"; export const Main = ({ - listVOD, books, grades, gradeFilter, @@ -62,7 +61,7 @@ export const Main = ({ ))}
    - {listVOD?.length > 0 && ( + {books?.length > 0 && (
    } > - {listVOD?.map((video, index) => ( + {books?.map((video, index) => (