reza changed cart buttons

src/components/ButtonBetween/index.js

@@ -1,14 +1,39 @@
 import React from "react";
 import { connect } from "react-redux";
 
-export const ButtonBetween = ({ item, status, onClick, width }) => {
-  return (
+export const ButtonBetween = ({ item, status, onClick, width, active, toggle }) => {
+  return toggle ? (
     <button
-      className={
-        "flex justify-between items-center bg-green-50 bg-opacity-80 rounded-sm border-2 border-solid border-green-500"
-      }
+      className={`flex justify-between items-center ${
+        active ? "bg-green-50 border-green-500" : "bg-gray-50 border-gray-400"
+      } bg-opacity-80 rounded-sm border-2 border-solid`}
       onClick={() => onClick()}
-      style={{ width, padding : '18px 8px' }}
+      style={{ width, padding: "18px 8px" }}
+    >
+      <strong
+        className={`text-tiny ${
+          active ? "text-green-700" : "text-gray-700"
+        } font-semibold`}
+      >
+        {item}
+      </strong>
+      {status && (
+        <span
+          className={`pr-3 border-r border-solid ${
+            active
+              ? "border-green-600 text-green-700"
+              : "border-gray-400 text-gray-500"
+          }  text-tiny  font-semibold`}
+        >
+          {status}
+        </span>
+      )}
+    </button>
+  ) : (
+    <button
+      className={`flex justify-between items-center bg-green-50 bg-opacity-80 rounded-sm border-2 border-solid border-green-500`}
+      onClick={() => onClick()}
+      style={{ width, padding: "18px 8px" }}
     >
       <strong className="text-tiny text-green-700 font-semibold">{item}</strong>
       {status && (

src/views/DeliveryForm/Address/index.js

@@ -86,7 +86,7 @@ function Address({
     );
   };
   return isMobile ? (
-    <section className="mt-2">
+    <section className="mt-2 w-full">
       <strong className="font-bold text-green7B dark:text-white lg:text-tiny">
         انتخاب آدرس
       </strong>
@@ -101,7 +101,7 @@ function Address({
       </ul>
       <div className="w-full flex flex-row justify-between items-center mt-4">
         <button
-          className={`flex justify-center text-tiny py-3 rounded-md bg-grayF9 dark:bg-blueC0 dark:bg-opacity-10 ${
+          className={`flex justify-center text-tiny py-3 rounded-md bg-grayF9 dark:bg-blueC0 dark:bg-opacity-10 w-full ${
             isDark ? "text-white" : "text-gray70"
           } items-center w-full`}
           onClick={() => setPhase("address")}

src/views/DeliveryForm/TransportDate/index.js

@@ -1,40 +1,21 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
 
+//components
+import ButtonBetween from "../../../components/ButtonBetween";
+
 function TransportDate({ transportDate, isMobile }) {
   const [activeDate, setActiveDate] = useState(transportDate?.times[0]);
   const Time = ({ time }) => {
     return isMobile ? (
-      <button
-        className={`flex flex-col border-2 border-solid items-center px-2 py-3 rounded-md mt-4 relative transition-all duration-500 ${
-          activeDate === time
-            ? "bg-blueC0 bg-opacity-5 border-blueC0 dark:bg-opacity-5"
-            : "bg-grayF9 border-gray-200 dark:border-gray-500 dark:bg-opacity-5"
-        }`}
+      <ButtonBetween
+        item={time.time}
+        status={"تکمیل ظرفیت"}
+        width="100%"
         onClick={() => setActiveDate(time)}
-        style={{ width: "48%" }}
-      >
-        <strong
-          className={`text-tiny transition-all duration-500 dark:text-white ${
-            activeDate === time
-              ? "text-green7B dark:text-blueC0"
-              : "text-blue52 dark:text-gray-400"
-          }`}
-        >
-          {time.time}
-        </strong>
-        {time.status === "completed" && (
-          <span
-            className={`lg:text-xs text-sm mt-1 transition-all duration-500 dark:text-white ${
-              activeDate === time
-                ? "text-green7B dark:text-blueC0"
-                : "text-blue52 dark:text-gray-400"
-            }`}
-          >
-            تکمیل ظرفیت
-          </span>
-        )}
-      </button>
+        active={activeDate === time}
+        toggle={true}
+      />
     ) : (
       <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 cursor-not-allowed ${
@@ -68,7 +49,7 @@ function TransportDate({ transportDate, isMobile }) {
       <strong className="font-bold text-green7B dark:text-white lg:text-tiny">
         زمان ارسال را انتخاب کنید
       </strong>
-      <ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap w-full">
+      <ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap w-full gap-4 mt-4">
         {transportDate.times.map((time, index) => (
           <Time time={time} key={index} />
         ))}

src/views/DeliveryForm/TransportMethod/index.js

@@ -2,7 +2,10 @@ import React, { useEffect } from "react";
 import separate from "../../../utils/separate";
 import { connect } from "react-redux";
 import { transport } from "../../../redux/actions";
+
+//components
 import Loading from "../../../components/Loading";
+import ButtonBetween from "../../../components/ButtonBetween";
 
 function TransportMethod({
   list,
@@ -13,23 +16,18 @@ function TransportMethod({
   userId,
   loading,
 }) {
-
   useEffect(() => {
     if (list.length === 0) {
       getList();
     }
   }, []);
 
-  const Method = ({ method }) => {
+  const Method = ({ method, active }) => {
     return isMobile ? (
-      <button
-        className={`flex flex-col border-2 border-solid items-center w-full px-2 py-2 rounded-md mt-4 relative transition-all duration-500 ${
-          factorInfo?.transportId === method?.id
-            ? "bg-blueC0 border-blueC0 bg-opacity-5 dark:bg-opacity-5"
-            : "bg-grayF9 border-gray-200 dark:border-gray-500 dark:bg-opacity-5"
-        }`}
+      <ButtonBetween
+        width={"100%"}
         onClick={() =>
-          factorInfo?.transportId !== method?.id
+          !active
             ? setTransport(
                 { factorId: factorInfo?.id, transportId: method?.id },
                 { userId },
@@ -37,42 +35,11 @@ function TransportMethod({
               )
             : {}
         }
-      >
-        {loading && factorInfo?.transportId !== method?.id ? (
-          <Loading
-            size={2}
-            color={
-              factorInfo?.transportId === method?.id
-                ? "bg-green-500"
-                : "bg-gray-500"
-            }
-          />
-        ) : (
-          <strong
-            className={`text-tiny transition-all duration-500 ${
-              factorInfo?.transportId === method?.id
-                ? "text-green7B dark:text-blueC0"
-                : "text-blue52 dark:text-gray-400"
-            }`}
-          >
-            {method.name}
-          </strong>
-        )}
-        <span
-          className={`lg:text-xs text-tiny mt-2 transition-all duration-500 ${
-            factorInfo?.transportId === method?.id
-              ? "text-green7B dark:text-blueC0"
-              : "text-blue52 dark:text-gray-400"
-          }`}
-        >
-          هزینه ارسال &nbsp; {separate(method.price)}
-        </span>
-        {/* <img
-          src={method.icon}
-          alt={method.name}
-          className="w-7 absolute left-3 top-1/2 transform -translate-y-1/2"
-        /> */}
-      </button>
+        item={"ارسال با" + " " + method.name}
+        status={separate(method.price) + " " + "تومان"}
+        active={active}
+        toggle={true}
+      />
     ) : (
       <button
         className={`flex flex-col border border-solid items-center px-2 py-3 rounded-md mt-4 relative transition-all duration-500 w-2/5 ${
@@ -81,7 +48,7 @@ function TransportMethod({
             : "bg-grayF9 border-grayDB dark:bg-opacity-5"
         }`}
         onClick={() =>
-          factorInfo?.transportId !== method?.id
+          !active
             ? setTransport(
                 { factorId: factorInfo?.id, transportId: method?.id },
                 { userId },
@@ -90,19 +57,12 @@ function TransportMethod({
             : {}
         }
       >
-        {loading && factorInfo?.transportId !== method?.id ? (
-          <Loading
-            size={4}
-            color={
-              factorInfo?.transportId === method?.id
-                ? "bg-green-500"
-                : "bg-gray-500"
-            }
-          />
+        {loading && !active ? (
+          <Loading size={4} color={active ? "bg-green-500" : "bg-gray-500"} />
         ) : (
           <strong
             className={`text-tiny transition-all duration-500 ${
-              factorInfo?.transportId === method?.id
+              active
                 ? "text-green7B dark:text-white"
                 : "text-blue52 dark:text-white"
             }`}
@@ -113,7 +73,7 @@ function TransportMethod({
 
         <span
           className={`text-sm transition-all duration-500 mt-2 ${
-            factorInfo?.transportId === method?.id
+            active
               ? "text-green7B dark:text-white"
               : "text-blue52 dark:text-white"
           }`}
@@ -128,9 +88,13 @@ function TransportMethod({
       <strong className="text-green7B font-bold dark:text-white text-base">
         لطفا یک روش ارسال انتخاب کنید
       </strong>
-      <ul className="list-none p-0 m-0 flex flex-col w-full">
+      <ul className="list-none p-0 m-0 flex flex-col gap-4 w-full mt-5">
         {list.map((method, index) => (
-          <Method method={method} key={index} />
+          <Method
+            method={method}
+            key={index}
+            active={factorInfo?.transportId === method?.id}
+          />
         ))}
       </ul>
     </section>
@@ -141,7 +105,11 @@ function TransportMethod({
       </strong>
       <ul className="list-none p-0 m-0 flex flex-row gap-5 flex-wrap">
         {list.map((method, index) => (
-          <Method method={method} key={index} />
+          <Method
+            method={method}
+            key={index}
+            active={factorInfo?.transportId === method?.id}
+          />
         ))}
       </ul>
     </section>

src/views/ShoppingCart/index.js

@@ -197,17 +197,17 @@ function ShoppingCart({
               <div className="flex flex-col w-full border-t border-gray-300 border-b">
                 <PriceStatus
                   name="مبلغ سبد خرید"
-                  value={factorInfo?.sumPrice}
+                  value={productsLength ? factorInfo?.sumPrice : 0}
                   type="normal"
                 />
                 <PriceStatus
                   name="میزان تخفیف"
-                  value={factorInfo?.offPrice}
+                  value={productsLength ? factorInfo?.offPrice : 0}
                   type="error"
                 />
                 <PriceStatus
                   name="مالیات بر ارزش افزوده"
-                  value={factorInfo?.sumPrice * 0.009}
+                  value={productsLength ? factorInfo?.sumPrice * 0.009 : 0}
                   type="error"
                 />
               </div>
@@ -216,7 +216,7 @@ function ShoppingCart({
                   جمع کل سبد خرید
                 </strong>
                 <p className="font-medium text-greenBA text-lg dark:text-white">
-                  {separate(factorInfo?.payPrice) + " " + "تومان"}
+                  {separate(productsLength ? factorInfo?.payPrice : 0) + " " + "تومان"}
                 </p>
               </div>
               <div