From 5c78482619951aaa8a59f3e6b90607e1790ca00b Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Tue, 25 Jan 2022 16:19:54 +0330 Subject: [PATCH] reza added cart phase2 and faq --- src/components/Button/index.js | 5 +- src/components/Navbar/index.js | 6 +- src/router.js | 18 ++--- src/views/DeliveryForm/Address/index.js | 57 ++++++++++++++-- src/views/DeliveryForm/TransportDate/index.js | 48 +++++++++++-- .../DeliveryForm/TransportMethod/index.js | 51 +++++++++++++- src/views/DeliveryForm/index.js | 64 ++++++++++++------ src/views/Faq/components/NotFound.js | 11 ++- src/views/Faq/components/Question.js | 12 ++-- src/views/Faq/index.js | 43 +++++++----- src/views/ShoppingCart/index.js | 67 ++++++++++++++----- 11 files changed, 294 insertions(+), 88 deletions(-) diff --git a/src/components/Button/index.js b/src/components/Button/index.js index 377752f..c93f23c 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -13,7 +13,7 @@ export default function Button({ }) { return ( + ) : ( + ); }; - return ( + return isMobile ? (
انتخاب آدرس
+ ) : ( +
+ انتخاب آدرس + +
+ + ) : ( + ); }; - return ( + return isMobile ? (
- زمان ارسال را انتخاب کنید + + زمان ارسال را انتخاب کنید +
    {transportDate.times.map((time, index) => (
+ ) : ( +
+ + زمان ارسال را انتخاب کنید + +
    + {transportDate.times.map((time, index) => ( +
+
); } const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, + isMobile: state.publicApi.isMobile, }); export default connect(mapStateToProps)(TransportDate); diff --git a/src/views/DeliveryForm/TransportMethod/index.js b/src/views/DeliveryForm/TransportMethod/index.js index 552e65d..1bd85d0 100644 --- a/src/views/DeliveryForm/TransportMethod/index.js +++ b/src/views/DeliveryForm/TransportMethod/index.js @@ -3,10 +3,10 @@ import { connect } from "react-redux"; import Button from "../../../components/Button"; import Radio from "../../../components/Radio"; -function TransportMethod({ transportMethods, isDark }) { +function TransportMethod({ transportMethods, isDark, isMobile }) { const [activeMethod, setActiveMethod] = useState(transportMethods[0]); const Method = ({ method }) => { - return ( + return isMobile ? ( + ) : ( + ); }; - return ( + return isMobile ? (
لطفا یک روش ارسال انتخاب کنید @@ -52,11 +85,23 @@ function TransportMethod({ transportMethods, isDark }) { ))}
+ ) : ( +
+ + لطفا یک روش ارسال انتخاب کنید + +
    + {transportMethods.map((method, index) => ( + + ))} +
+
); } const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, + isMobile: state.publicApi.isMobile, }); export default connect(mapStateToProps)(TransportMethod); diff --git a/src/views/DeliveryForm/index.js b/src/views/DeliveryForm/index.js index 0633146..a30dfb5 100644 --- a/src/views/DeliveryForm/index.js +++ b/src/views/DeliveryForm/index.js @@ -9,22 +9,6 @@ import PaymentMethods from "./PaymentMethod"; import ExpressIcon from "../../assets/icons/express.svg"; import PishtazIcon from "../../assets/icons/pishtaz.svg"; -const PriceStatus = ({ name, value, type, isDark }) => { - return ( -
- {name} - - {value + " " + "تومان"} - -
- ); -}; - export const DeliveryForm = ({ setHeaderOptions, headerOptions, @@ -33,13 +17,33 @@ export const DeliveryForm = ({ getFactorInfo, userId, isDark, + isMobile, }) => { useEffect(() => { - setHeaderOptions(headerOptions); + if (isMobile) { + setHeaderOptions(headerOptions); + } + getFactorInfo({ userId }); - setHeaderOptions(headerOptions); }, []); - return ( + + const PriceStatus = ({ name, value, type }) => { + return ( +
+ {name} + + {value + " " + "تومان"} + +
+ ); + }; + + return isMobile ? (
@@ -72,6 +76,27 @@ export const DeliveryForm = ({
+ ) : ( +
+
+ + 1 + +
+
+
+ + 2 + + +
+
+ + 3 + + +
+
); }; @@ -79,6 +104,7 @@ const mapStateToProps = (state) => ({ factorInfo: state.userFactor.info, userId: state.user.status.id, isDark: state.publicApi.isDark, + isMobile: state.publicApi.isMobile, }); const mapDispatchToProps = { diff --git a/src/views/Faq/components/NotFound.js b/src/views/Faq/components/NotFound.js index 470abc7..d30c86b 100644 --- a/src/views/Faq/components/NotFound.js +++ b/src/views/Faq/components/NotFound.js @@ -8,18 +8,17 @@ function NotFound({ title, subTitle, link }) { return ( -
- {title && {title}} +
+ {title && {title}} {subTitle}
- + ); } diff --git a/src/views/Faq/components/Question.js b/src/views/Faq/components/Question.js index 0f8680f..6eb639a 100644 --- a/src/views/Faq/components/Question.js +++ b/src/views/Faq/components/Question.js @@ -5,16 +5,14 @@ function Qurestion({}) { return (
setActive(() => !active)} - className="w-full flex flex-col my-1.5 rounded-md px-4 py-3 border-solid bg-grayF9 dark:bg-opacity-5" + className="w-full flex flex-col my-1.5 rounded-sm px-4 py-3 bg-grayF9 dark:bg-opacity-5 lg:my-3 lg:py-5 cursor-pointer" style={{ - // backgroundColor: !active ? "#F9F9F9" : "#F6F9FD", - borderColor: !active ? "#DBDBDB22" : "#196EC0", - borderWidth: 1, - transition : 'all 0.5s' + border: `1px ${!active ? "#DBDBDB99" : "#196EC0"} solid` + // transition : 'all 0.5s' }} >
- + نحوه خرید از سایت چگونه است ؟
@@ -25,7 +23,7 @@ function Qurestion({}) { }} >

{ setHeaderOptions(headerOptions); }, []); @@ -21,27 +21,36 @@ function Faq({ headerOptions, setHeaderOptions }) { style={{ height: "calc(100vh - 145px)" }} >

-
- - {[0, 1, 2, 3, 4].map((item, index) => ( - - ))} - + +
+
+ {isMobile && ( + + )} + {[0, 1, 2, 3, 4].map((item, index) => ( + + ))} +
+
+ +
); } -const mapStateToProps = (state) => ({}); +const mapStateToProps = (state) => ({ + isMobile: state.publicApi.isMobile, +}); const mapDispatchToProps = { setHeaderOptions: publicApi.setHeaderOptions, diff --git a/src/views/ShoppingCart/index.js b/src/views/ShoppingCart/index.js index f985cc9..4d6c415 100644 --- a/src/views/ShoppingCart/index.js +++ b/src/views/ShoppingCart/index.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from "react"; import { userProduct, userFactor, publicApi } from "../../redux/actions"; +import DeliveryForm from "../DeliveryForm"; import Product from "./Product"; import Code from "./Code"; import Button from "../../components/Button"; @@ -26,6 +27,8 @@ function ShoppingCart({ setHeaderOptions, desktopContentTransform, }) { + const [phase, setPhase] = useState("products"); + useEffect(() => { getList(); getFactorInfo({ userId }); @@ -70,11 +73,11 @@ function ShoppingCart({
) : (
- + {name}
- + جمع کل سبد خرید

@@ -149,7 +152,8 @@ function ShoppingCart({ }`} >

- + {phase === "products" &&
} + {phase === "delivery-form" && }
- + جمع کل سبد خرید

@@ -181,22 +185,55 @@ function ShoppingCart({ تومان

-
- -

- هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود -

-
+ {phase === "products" && ( +
+ +

+ هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود +

+
+ )} + {phase === "delivery-form" && ( +
+ + انتخاب شیوه پرداخت + +
+ )} +