reza added some property

src/components/ProductStatusCard/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { userProduct } from "../../redux/actions";
 import { toast } from "react-toastify";
-import separate from '../../utils/separate'
+import separate from "../../utils/separate";
 
 //components;
 import Button from "../Button";
@@ -16,55 +16,79 @@ import tick from "./tick-circle.svg";
 import shop from "./icon-shop.svg";
 
 const ProductStatusCard = ({
-  items,
   price,
-  discountPrice,
+  offerPrice,
   isDark,
   id,
   userId,
   isLogin,
   pushToCart,
   loading,
+  garanty,
+  suggestedCounter,
+  seller,
+  shippingTime,
 }) => {
   return (
     <section className="w-full">
       <div className="bg-grayF9 rounded-md px-4 py-2 divide-y divide-solid divide-gray-200">
-        {items.map((item, index) => (
+        <div className="flex flex-row items-center justify-between py-3">
-          <div
+          <div className="flex flex-row items-center">
-            className="flex flex-row items-center justify-between py-3"
+            <img src={tick} alt="" className="w-8" />
-            key={index}
+            <div className="flex flex-col mr-3">
-          >
+              <div className="text-sm">{`توصیه به خرید توسط ${suggestedCounter} نفر`}</div>
+            </div>
+          </div>
+          <img src={circle} alt="" className="w-5" />
+        </div>
+        {seller && (
+          <div className="flex flex-row items-center justify-between py-3">
             <div className="flex flex-row items-center">
-              <img src={item.icon} alt="" className="w-8" />
+              <img src={shop} alt="" className="w-8" />
-              <div className="flex flex-col mr-3">
+              <div className="flex flex-col mr-3 text-sm">
-                <p className="text-sm">
+                {"فروشنده" + " " + seller}
-                  <span className="font-bold">{item.subtitle}</span>
-                  {item.title}
-                </p>
-                {item.customerSatisfaction && (
-                  <p className="text-xs mt-1">
-                    رضایت خریداران:
-                    <span className="font-bold text-green-500 mr-2">
-                      {item.customerSatisfactionPercent}
-                    </span>
-                  </p>
-                )}
               </div>
             </div>
-            {item.alertIcon && <img src={circle} alt="" className="w-5" />}
+            <img src={circle} alt="" className="w-5" />
           </div>
-        ))}
+        )}
-        <div className="flex flex-col items-center py-3">
+        <div className="flex flex-row items-center justify-between py-3">
-          <p className="text-xl text-blueC0 font-bold">
+          <div className="flex flex-row items-center">
-            {separate(price)}
+            <img src={delivery} alt="" className="w-8" />
-            <span className="text-sm text-gray-700 font-light mr-1">تومان</span>
+            <div className="flex flex-col mr-3">
-          </p>
+              <div className="flex flex-row gap-1 text-sm">
-          <p className="text-xs font-light text-gray-600 mt-2">
+                &nbsp;{shippingTime}
-            با خرید این کالا
+              </div>
-            <span>{discountPrice}</span>
+            </div>
-            صرفه جویی کنید
+          </div>
-          </p>
+          <img src={circle} alt="" className="w-5" />
         </div>
+        {garanty && (
+          <div className="flex flex-row items-center justify-between py-3">
+            <div className="flex flex-row items-center">
+              <img src={shield} alt="" className="w-8" />
+              <div className="flex flex-col mr-3">
+                <div className="flex flex-row gap-1 text-sm">{garanty}</div>
+              </div>
+            </div>
+            <img src={circle} alt="" className="w-5" />
+          </div>
+        )}
+        {offerPrice && (
+          <div className="flex flex-col items-center py-3">
+            <p className="text-xl text-blueC0 font-bold">
+              {separate(price)}
+              <span className="text-sm text-gray-700 font-light mr-1">
+                تومان
+              </span>
+            </p>
+            <p className="text-xs font-light text-gray-600 mt-2">
+              با خرید این کالا
+              <span>{offerPrice}</span>
+              صرفه جویی کنید
+            </p>
+          </div>
+        )}
         <Button
           title="اضافه کردن به سبد خرید"
           backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
@@ -113,43 +137,3 @@ const mapDispatchToProps = {
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ProductStatusCard);
-
-ProductStatusCard.defaultProps = {
-  items: [
-    {
-      icon: tick,
-      title: "توصیه به خرید توسط 4420 نفر",
-      subtitle: null,
-      alertIcon: false,
-      customerSatisfaction: false,
-      customerSatisfactionPercent: null,
-    },
-    {
-      icon: shop,
-      title: " آپادانا ",
-      subtitle: "  فروشنده",
-      alertIcon: true,
-      customerSatisfaction: true,
-      customerSatisfactionPercent: " 91.5 ",
-    },
-    {
-      icon: delivery,
-      title: " 20 روز کاری پس از سفارش ",
-      subtitle: "زمان ارسال",
-      alertIcon: false,
-      customerSatisfaction: false,
-      customerSatisfactionPercent: null,
-    },
-    {
-      icon: shield,
-      title: "اصالت و سلامت فیزیکی",
-      subtitle: "گارانتی ",
-      alertIcon: true,
-      customerSatisfaction: false,
-      customerSatisfactionPercent: null,
-    },
-  ],
-
-  productPrice: " 56/894/000 ",
-  discountPrice: " 540.000 ",
-};

src/views/Product/Desktop/ProductOverAll/index.js

@@ -29,7 +29,7 @@ export const ProductOverAll = ({ book, grades, isDark, loading }) => {
                 <StarRating value={book?.rate || 4} />
               </div>
               <div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
-                بیش از 160 نفر امتیاز داده اند
+                بیش از {book?.product[type]?.suggestedCounter} نفر امتیاز داده اند
               </div>
             </div>
           </div>
@@ -103,7 +103,12 @@ export const ProductOverAll = ({ book, grades, isDark, loading }) => {
         <div className="flex flex-col w-1/3">
           <ProductStatusCard
             price={book?.product[type]?.price}
+            garanty={book?.product[type]?.garantyText}
+            suggestedCounter={book?.product[type]?.suggestedCounter}
+            seller={book?.product[type]?.sellerId}
+            offerPrice={book?.product[type]?.offerPrice}
             id={book?.product[type]?.id}
+            shippingTime={book?.product[type]?.shippingTime}
             loading={loading}
           />
         </div>