reza added cart phase2 and faq

src/components/Button/index.js

@@ -13,7 +13,7 @@ export default function Button({
 }) {
   return (
     <button
-      className={`rounded-md py-3 justify-center text-sm cursor-pointer ${
+      className={`rounded-md py-3 justify-center text-sm cursor-pointer lg:py-5 ${
         selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor
       } ${selectable ? (active ? "text-blueC0" : color) : color} ${
         selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity
@@ -32,3 +32,6 @@ export default function Button({
     </button>
   );
 }
+
+
+

src/components/Navbar/index.js

@@ -228,7 +228,7 @@ function Navbar({
       </div>
       <div
         className={`w-full flex flex-col z-20 ${
-          desktopMiddleFix ? "fixed top-0 left-0" : ""
+          desktopMiddleFix ? "" : ""
         }`}
       >
         <div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-4 px-5 z-20 border-b border-gray-200 border-solid ">
@@ -258,10 +258,10 @@ function Navbar({
 
         <div
           className={`flex items-center relative w-full h-10 px-4  border-b border-solid border-gray-200 transform bg-white ${
-            desktopEndTransform ? "-translate-y-10" : ""
+            desktopEndTransform ? "" : ""
           }`}
           style={{
-            transition: "all 0.3s",
+            // transition: "all 0.3s",
           }}
         >
           <div className="ml-10 flex flex-row items-center">

src/router.js

@@ -28,15 +28,15 @@ import Contact from "./views/Contact";
 function Router({ isDark, isMobile, isLogin, headerOptions, setDesktopContentTransform }) {
   useEffect(() => {
     window.addEventListener("scroll", () => {
-      if (!isMobile) {
+      // if (!isMobile) {
-        window.addEventListener("scroll", () => {
+      //   window.addEventListener("scroll", () => {
-          if (window.scrollY >= 64) {
+      //     if (window.scrollY >= 64) {
-            setDesktopContentTransform(true);
+      //       setDesktopContentTransform(true);
-          } else {
+      //     } else {
-            setDesktopContentTransform(false);
+      //       setDesktopContentTransform(false);
-          }
+      //     }
-        });
+      //   });
-      }
+      // }
     });
   }, []);
   return (

src/views/DeliveryForm/Address/index.js

@@ -3,10 +3,10 @@ import { connect } from "react-redux";
 import Button from "../../../components/Button";
 import Radio from "../../../components/Radio";
 
-function Address({ addresses, isDark }) {
+function Address({ addresses, isDark, isMobile }) {
   const [activeAddress, setActiveAddress] = useState(addresses[0]);
   const Location = ({ address }) => {
-    return (
+    return isMobile ? (
       <button
         className={`flex flex-row border-2 border-solid items-center w-full px-3 py-4 rounded-md mt-4 transition-all duration-500 dark:bg-opacity-5 ${
           activeAddress === address
@@ -30,9 +30,38 @@ function Address({ addresses, isDark }) {
           </li>
         </div>
       </button>
+    ) : (
+      <button
+        className={`flex flex-row border border-solid items-center w-full px-3 py-6 rounded-md mt-4 transition-all duration-500 dark:bg-opacity-5 ${
+          activeAddress === address
+            ? "bg-blueFD border-blueC0"
+            : "bg-grayF9 border-gray45"
+        }`}
+      >
+        <div className="flex flex-row gap-3 w-2/3">
+          <Radio />
+          <div className="flex flex-1 flex-col">
+            <li className="text-right text-sm text-blue52 dark:text-white leading-4">
+              آدرس:&nbsp;{address.address}
+            </li>
+
+            <li className="text-right text-sm text-blue52 dark:text-white mt-3">
+              کد پستی:&nbsp;{address.postalCode}
+            </li>
+          </div>
+        </div>
+        <div className="flex flex-col w-1/3">
+          <li className="text-right text-sm text-blue52 dark:text-white">
+            نام تحویل گیرنده:&nbsp;{address.receiver}
+          </li>
+          <li className="text-right text-sm text-blue52 dark:text-white mt-3">
+            شماره تماس:&nbsp;{address.cellphone}
+          </li>
+        </div>
+      </button>
     );
   };
-  return (
+  return isMobile ? (
     <section className="mt-2">
       <strong className="font-medium dark:text-white">انتخاب آدرس</strong>
       <ul className="list-none p-0 m-0 flex flex-col">
@@ -44,7 +73,26 @@ function Address({ addresses, isDark }) {
         <Button
           title="یک آدرس جدید اضافه کنید +"
           backgroundColor="bg-grayF9 dark:bg-blueC0 dark:bg-opacity-30"
-          border={{ color: isDark ? '#DBDBDB22' : "#DBDBDB", width: "1px" }}
+          border={{ color: isDark ? "#DBDBDB22" : "#DBDBDB", width: "1px" }}
+          bgOpacity="bg-opacity-100"
+          width="100%"
+          color={isDark ? "text-white" : "text-gray70"}
+        />
+      </div>
+    </section>
+  ) : (
+    <section className="mt-0.5 w-full">
+      <strong className="font-medium dark:text-white">انتخاب آدرس</strong>
+      <ul className="list-none p-0 m-0 flex flex-col">
+        {addresses.map((address, index) => (
+          <Location address={address} key={index} />
+        ))}
+      </ul>
+      <div className="w-full flex flex-row justify-between items-center mt-4">
+        <Button
+          title="یک آدرس جدید اضافه کنید +"
+          backgroundColor="bg-grayF9 dark:bg-blueC0 dark:bg-opacity-30"
+          border={{ color: isDark ? "#DBDBDB22" : "#DBDBDB", width: "1px" }}
           bgOpacity="bg-opacity-100"
           width="100%"
           color={isDark ? "text-white" : "text-gray70"}
@@ -56,6 +104,7 @@ function Address({ addresses, isDark }) {
 
 const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
+  isMobile: state.publicApi.isMobile,
 });
 
 export default connect(mapStateToProps)(Address);

src/views/DeliveryForm/TransportDate/index.js

@@ -3,10 +3,10 @@ import { connect } from "react-redux";
 import Button from "../../../components/Button";
 import Radio from "../../../components/Radio";
 
-function TransportDate({ transportDate, isDark }) {
+function TransportDate({ transportDate, isDark, isMobile }) {
   const [activeDate, setActiveDate] = useState(transportDate?.times[0]);
   const Time = ({ time }) => {
-    return (
+    return isMobile ? (
       <button
         className={`flex flex-col border border-solid items-center flex-1 mx-1 px-2 py-3 rounded-md mt-4 relative transition-all duration-500 ${
           activeDate === time
@@ -32,22 +32,62 @@ function TransportDate({ transportDate, isDark }) {
           </span>
         )}
       </button>
+    ) : (
+      <button
+        className={`flex flex-col border border-solid items-center mx-1 px-3 py-4 rounded-md mt-4 relative transition-all duration-500 w-1/5 ${
+          activeDate === time
+            ? "bg-blueFD border-blueC0 dark:bg-opacity-5"
+            : "bg-grayF9 border-grayDB dark:bg-opacity-5"
+        }`}
+        onClick={() => setActiveDate(time)}
+      >
+        <strong
+          className={`text-sm transition-all duration-500 dark:text-white ${
+            activeDate === time ? "text-blueC0" : "text-blue52"
+          }`}
+        >
+          {time.time}
+        </strong>
+        {time.status === "completed" && (
+          <span
+            className={`text-xs transition-all duration-500 dark:text-white mt-1 ${
+              activeDate === time ? "text-blueC0" : "text-blue52"
+            }`}
+          >
+            تکمیل ظرفیت
+          </span>
+        )}
+      </button>
     );
   };
-  return (
+  return isMobile ? (
     <section className="mt-8">
-      <strong className="font-medium dark:text-white">زمان ارسال را انتخاب کنید</strong>
+      <strong className="font-medium dark:text-white">
+        زمان ارسال را انتخاب کنید
+      </strong>
       <ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap">
         {transportDate.times.map((time, index) => (
           <Time time={time} key={index} />
         ))}
       </ul>
     </section>
+  ) : (
+    <section className="mt-1 w-full">
+      <strong className="font-medium dark:text-white">
+        زمان ارسال را انتخاب کنید
+      </strong>
+      <ul className="list-none p-0 m-0 flex flex-row flex-wrap w-full">
+        {transportDate.times.map((time, index) => (
+          <Time time={time} key={index} />
+        ))}
+      </ul>
+    </section>
   );
 }
 
 const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
+  isMobile: state.publicApi.isMobile,
 });
 
 export default connect(mapStateToProps)(TransportDate);

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 ? (
       <button
         className={`flex flex-col border border-solid items-center w-full px-2 py-3 rounded-md mt-4 relative transition-all duration-500 ${
           activeMethod === method
@@ -39,9 +39,42 @@ function TransportMethod({ transportMethods, isDark }) {
           className="w-7 absolute left-3 top-1/2 transform -translate-y-1/2"
         />
       </button>
+    ) : (
+      <button
+        className={`flex flex-col border border-solid items-center px-2 py-3 rounded-md mt-4 relative transition-all duration-500 w-1/3 ${
+          activeMethod === method
+            ? "bg-blueFD border-blueC0 dark:bg-opacity-5"
+            : "bg-grayF9 border-grayDB dark:bg-opacity-5"
+        }`}
+        onClick={() => setActiveMethod(method)}
+      >
+        <strong
+          className={`text-sm transition-all duration-500 ${
+            activeMethod === method
+              ? "text-blueC0 dark:text-white"
+              : "text-blue52 dark:text-white"
+          }`}
+        >
+          {method.name}
+        </strong>
+        <span
+          className={`text-xs transition-all duration-500 mt-2 ${
+            activeMethod === method
+              ? "text-blueC0 dark:text-white"
+              : "text-blue52 dark:text-white"
+          }`}
+        >
+          هزینه ارسال &nbsp; {method.cost}
+        </span>
+        <img
+          src={method.icon}
+          alt={method.name}
+          className="w-7 absolute left-3 top-1/2 transform -translate-y-1/2"
+        />
+      </button>
     );
   };
-  return (
+  return isMobile ? (
     <section className="mt-8">
       <strong className="font-medium dark:text-white">
         لطفا یک روش ارسال انتخاب کنید
@@ -52,11 +85,23 @@ function TransportMethod({ transportMethods, isDark }) {
         ))}
       </ul>
     </section>
+  ) : (
+    <section className="mt-1 w-full">
+      <strong className="font-medium dark:text-white">
+        لطفا یک روش ارسال انتخاب کنید
+      </strong>
+      <ul className="list-none p-0 m-0 flex flex-row gap-5 flex-wrap">
+        {transportMethods.map((method, index) => (
+          <Method method={method} key={index} />
+        ))}
+      </ul>
+    </section>
   );
 }
 
 const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
+  isMobile: state.publicApi.isMobile,
 });
 
 export default connect(mapStateToProps)(TransportMethod);

src/views/DeliveryForm/index.js

@@ -9,7 +9,25 @@ import PaymentMethods from "./PaymentMethod";
 import ExpressIcon from "../../assets/icons/express.svg";
 import PishtazIcon from "../../assets/icons/pishtaz.svg";
 
-const PriceStatus = ({ name, value, type, isDark }) => {
+export const DeliveryForm = ({
+  setHeaderOptions,
+  headerOptions,
+  form,
+  factorInfo,
+  getFactorInfo,
+  userId,
+  isDark,
+  isMobile,
+}) => {
+  useEffect(() => {
+    if (isMobile) {
+      setHeaderOptions(headerOptions);
+    }
+
+    getFactorInfo({ userId });
+  }, []);
+
+  const PriceStatus = ({ name, value, type }) => {
     return (
       <div className="w-full flex flex-row justify-between py-2">
         <strong className="font-light text-sm dark:text-white">{name}</strong>
@@ -25,21 +43,7 @@ const PriceStatus = ({ name, value, type, isDark }) => {
     );
   };
 
-export const DeliveryForm = ({
+  return isMobile ? (
-  setHeaderOptions,
-  headerOptions,
-  form,
-  factorInfo,
-  getFactorInfo,
-  userId,
-  isDark,
-}) => {
-  useEffect(() => {
-    setHeaderOptions(headerOptions);
-    getFactorInfo({ userId });
-    setHeaderOptions(headerOptions);
-  }, []);
-  return (
     <div className="w-full flex flex-col px-4 pb-10">
       <Address addresses={form.addresses} />
       <TransportMethod transportMethods={form.transportMethods} />
@@ -72,6 +76,27 @@ export const DeliveryForm = ({
       </div>
       <PaymentMethods paymentMethods={form.paymentMethods} />
     </div>
+  ) : (
+    <div className="w-full flex flex-col px-4 pb-10">
+      <div className="w-full flex flex-row gap-5">
+        <span className="w-6 h-6 rounded-full bg-grayF4 flex justify-center items-center text-sm">
+          1
+        </span>
+        <Address addresses={form.addresses} />
+      </div>
+      <div className="w-full flex flex-row gap-5 mt-8">
+        <span className="w-6 h-6 rounded-full bg-grayF4 flex justify-center items-center text-sm">
+          2
+        </span>
+        <TransportMethod transportMethods={form.transportMethods} />
+      </div>
+      <div className="w-full flex flex-row gap-5 mt-8">
+        <span className="w-6 h-6 rounded-full bg-grayF4 flex justify-center items-center text-sm">
+          3
+        </span>
+        <TransportDate transportDate={form.transportDate} />
+      </div>
+    </div>
   );
 };
 
@@ -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 = {

src/views/Faq/components/NotFound.js

@@ -8,18 +8,17 @@ function NotFound({ title, subTitle, link }) {
   return (
     <Link
       to={link}
-      className="flex flex-row items-center justify-between py-3.5 px-2 rounded-md bg-blueC0 mt-4"
+      className="flex flex-row items-center justify-between py-3.5 px-2 rounded-sm bg-blueC0 mt-4 self-end lg:ml-1/2"
     >
-      <div className="flex flex-col w-3/4">
+      <div className="flex flex-col w-3/4 lg:w-full">
-        {title && <strong className="text-xs text-white">{title}</strong>}
+        {title && <strong className="text-xs text-white lg:text-sm">{title}</strong>}
         <span
-          className={`text-xs text-white font-light ${title ? "mt-2" : ""}`}
+          className={`text-xs text-white font-light lg:text-sm ${title ? "mt-2 lg:mt-3" : ""}`}
-          style={{ fontSize: "calc(100vw / 36)" }}
         >
           {subTitle}
         </span>
       </div>
-      <img src={arrowLeftWhite} alt="" className="w-7" />
+      <img src={arrowLeftWhite} alt="" className="w-7 lg:mr-6" />
     </Link>
   );
 }

src/views/Faq/components/Question.js

@@ -5,16 +5,14 @@ function Qurestion({}) {
   return (
     <div
       onClick={() => 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",
+        border: `1px ${!active ? "#DBDBDB99" : "#196EC0"} solid`
-        borderColor: !active ? "#DBDBDB22" : "#196EC0",
+        // transition : 'all 0.5s'
-        borderWidth: 1,
-        transition : 'all 0.5s'
       }}
     >
       <div className="flex flex-row justify-between items-center">
-        <strong className="flex-1 text-blueC0 text-xs dark:text-white">
+        <strong className="flex-1 text-blueC0 text-xs dark:text-white lg:text-sm font-medium">
           نحوه خرید از سایت چگونه است ؟
         </strong>
       </div>
@@ -25,7 +23,7 @@ function Qurestion({}) {
         }}
       >
         <p
-          className={`text-right text-blueC0 text-xs dark:text-white ${
+          className={`text-right text-blueC0 text-xs dark:text-white lg:text-sm lg:leading-6 ${
             active ? "h-auto opacity-100 pt-2" : "pt-0 h-0 opacity-0"
           }`}
           style={{

src/views/Faq/index.js

@@ -11,7 +11,7 @@ import Search from "../../components/Search";
 import faqBgImage from "./faq-bg.svg";
 import searchLight from "../../assets/icons/search-light.svg";
 
-function Faq({ headerOptions, setHeaderOptions }) {
+function Faq({ headerOptions, setHeaderOptions, isMobile }) {
   useEffect(() => {
     setHeaderOptions(headerOptions);
   }, []);
@@ -21,16 +21,22 @@ function Faq({ headerOptions, setHeaderOptions }) {
       style={{ height: "calc(100vh - 145px)" }}
     >
       <Header bg={faqBgImage} title="پرسش‌های متداول" />
-      <div className="w-full flex flex-col px-4 transform -translate-y-12">
+
+      <div className="w-full flex flex-col px-4 transform -translate-y-12 items-center">
+        <div className="lg:w-1/2 w-full">
+          {isMobile && (
             <Search
               backgroundColor="bg-grayF9 dark:bg-gray2077"
               borderColor="border-grayDB dark:border-gray45"
               textColor="text-blueC0 dark:text-white"
               icon={searchLight}
             />
+          )}
           {[0, 1, 2, 3, 4].map((item, index) => (
             <Question key={index} />
           ))}
+        </div>
+        <div className="w-full flex flex-row lg:w-4/5 justify-end">
           <NotFound
             title={"پرسش خود را در لیست بالا پیدا نکردید؟"}
             subTitle={"برای ما پیام ارسال کنید"}
@@ -38,10 +44,13 @@ function Faq({ headerOptions, setHeaderOptions }) {
           />
         </div>
       </div>
+    </div>
   );
 }
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  isMobile: state.publicApi.isMobile,
+});
 
 const mapDispatchToProps = {
   setHeaderOptions: publicApi.setHeaderOptions,

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({
       </div>
     ) : (
       <div className="w-full flex flex-row justify-between py-4">
-        <strong className="font-light text-base dark:text-white text-blue5F">
+        <strong className="font-light text-tiny dark:text-white text-blue5F">
           {name}
         </strong>
         <span
-          className="font-medium text-xl dark:text-white"
+          className="font-medium text-lg dark:text-white"
           style={{
             color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
           }}
@@ -117,7 +120,7 @@ function ShoppingCart({
         />
       </div>
       <div className="flex flex-row justify-between items-center w-full py-3">
-        <strong className="font-medium text-sm dark:text-white">
+        <strong className="font-light text-sm dark:text-white">
           جمع کل سبد خرید
         </strong>
         <p className="font-medium text-greenBA text-xs dark:text-white">
@@ -149,7 +152,8 @@ function ShoppingCart({
       }`}
     >
       <div className="flex flex-col w-3/4">
-        <Table />
+        {phase === "products" && <Table />}
+        {phase === "delivery-form" && <DeliveryForm />}
       </div>
       <div
         className="flex flex-col w-1/4 p-10 bg-grayF9 border border-solid border-grayDB rounded-md px-4 py-4"
@@ -173,7 +177,7 @@ function ShoppingCart({
           />
         </div>
         <div className="flex flex-row justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid">
-          <strong className="font-medium text-base text-blue5F dark:text-white">
+          <strong className="font-medium text-tiny text-blue5F dark:text-white">
             جمع کل سبد خرید
           </strong>
           <p className="font-medium text-greenBA text-xl dark:text-white">
@@ -181,6 +185,7 @@ function ShoppingCart({
             <span className="font-medium text-greenBA text-sm mr-2">تومان</span>
           </p>
         </div>
+        {phase === "products" && (
           <div
             className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-10 mb-4"
             style={{ backgroundColor: "#196EC01a" }}
@@ -190,13 +195,45 @@ function ShoppingCart({
               هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود
             </p>
           </div>
+        )}
+        {phase === "delivery-form" && (
+          <div className="flex flex-col mt-10">
+            <strong className="text-tiny text-blue52 mb-5 font-medium">
+              انتخاب شیوه پرداخت
+            </strong>
+            <Button
+              title="ادامه فرایند خرید"
+              backgroundColor="bg-transparent"
+              border={{ color: "#77777755", width: "1px" }}
+              width="100%"
+              color="text-blue52"
+              onClick={() =>
+                setPhase(phase === "products" ? "delivery-form" : "")
+              }
+            />
+            <br />
+            <Button
+              title="پرداخت در محل"
+              backgroundColor="bg-transparent"
+              border={{ color: "#77777755", width: "1px" }}
+              width="100%"
+              color="text-blue52"
+              onClick={() =>
+                setPhase(phase === "products" ? "delivery-form" : "")
+              }
+            />
+            <br/>
+            <br/>
+          </div>
+        )}
+
         <Button
           title="ادامه فرایند خرید"
           backgroundColor="bg-blueC0"
           border={{ color: "#196EC055", width: "1px" }}
           width="100%"
           color="text-white"
-          // onClick={() => }
+          onClick={() => setPhase(phase === "products" ? "delivery-form" : "")}
         />
       </div>
     </div>