update 6 files

src/components/ProductStatusCard/index.js

@@ -35,15 +35,17 @@ const ProductStatusCard = ({
 }) => {
   const { bookmark } = headerOptions;
   return (
-    <section className="w-full" style={{ minWidth: 350 }}>
+    <section className="w-full transition-all" style={{ minWidth: 350 }}>
       <div className="bg-grayF9 rounded-md px-4 py-2 divide-y divide-solid divide-gray-200">
         <div className="flex items-center justify-between py-3">
           <div className="flex items-center">
             <img src={tick} alt="" className="w-8" />
             <div className="flex flex-col mr-3">
-              <div className="text-sm">{`${window.t(
+              {suggestedCounter ? (
-                "توصیه به خرید توسط"
+                <div className="text-sm">{`${window.t(
-              )}  ${suggestedCounter} ${window.t("نفر")} `}</div>
+                  "توصیه به خرید توسط"
+                )}  ${suggestedCounter} ${window.t("نفر")} `}</div>
+              ) : null}
             </div>
           </div>
         </div>
@@ -53,10 +55,16 @@ const ProductStatusCard = ({
             <div className="flex items-center">
               <img src={shop} alt="" className="w-8" />
               <div className="flex flex-1 flex-col mr-3 text-sm gap-2">
-                <div className="text-tiny">{"فروشنده" + " " + seller.name}</div>
+                {seller?.name ? (
-                <div className="text-xs">
+                  <div className="text-tiny">
-                  {`${window.t("پایه")}` + " " + "%" + seller.rate * 20}
+                    {"فروشنده" + " " + seller.name}
-                </div>
+                  </div>
+                ) : null}
+                {seller?.rate ? (
+                  <div className="text-xs">
+                    {`${window.t("پایه")}` + " " + "%" + seller.rate * 20}
+                  </div>
+                ) : null}
               </div>
             </div>
             <img src={circle} alt="" className="w-5" />
@@ -68,7 +76,7 @@ const ProductStatusCard = ({
             <img src={delivery} alt="" className="w-8" />
             <div className="flex flex-col mr-3">
               <div className="flex gap-1 text-sm">
-                &nbsp;{shippingTime}
+                &nbsp;{shippingTime || " "}
               </div>
             </div>
           </div>
@@ -102,13 +110,16 @@ const ProductStatusCard = ({
         )}
 
         <div className="flex flex-col items-center py-3">
-          <p className="text-6xl text-blueC0 font-bold ">
+          {price ? (
-            {separate(price)}
+            <p className="text-6xl text-blueC0 font-bold ">
-            <span className="text-sm text-gray-700 font-light mr-1">
+              {separate(price)}
-              {window.t("تومان")}
+              <span className="text-sm text-gray-700 font-light mr-1">
-            </span>
+                {window.t("تومان")}
-          </p>
+              </span>
-          {offerPrice && (
+            </p>
+          ) : null}
+
+          {offerPrice && price ? (
             <p className="text-xs font-light text-gray-600 mt-2">
               {window.t("با خرید این کالا")}
               <span className="text-sm font-bold">
@@ -119,7 +130,7 @@ const ProductStatusCard = ({
               </span>
               {window.t("صرفه جویی کنید")}
             </p>
-          )}
+          ) : null}
         </div>
 
         <Button

src/components/ProductSuggestion/index.js

@@ -40,7 +40,7 @@ const ProductSuggestion = ({
     }
   }, [similarList]);
 
-  return (
+  return similarList?.length ? (
     <section className="mt-10 border-2  border-gray-300 py-10 rounded-lg bg-grayF9">
       <h2 className="text-center text-lg font-bold text-productPrice mb-10">
         {window.t("این کالاها برای خرید به شما پیشنهام می دهیم")}
@@ -135,7 +135,7 @@ const ProductSuggestion = ({
         />
       </div>
     </section>
-  );
+  ) : null;
 };
 
 const mapStateToProps = (state) => ({

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

@@ -12,8 +12,43 @@ import Table from "../../../Video/components/Desktop/Table";
 //assets
 import arrow from "../../../../assets/icons/dropdown-blue.svg";
 
-export const ProductOverAll = ({ book, grades, isDark, loading }) => {
+export const ProductOverAll = ({
-  const [type, setType] = useState("1");
+  book,
+  grades,
+  isDark,
+  loading,
+  availableForSell,
+}) => {
+  const [activeProduct, setActiveProduct] = useState(null);
+
+  const physicalAvailableForSell = React.useMemo(() => {
+    return availableForSell?.find((product) => product === 2);
+  }, [availableForSell]);
+
+  const digitalAvailableForSell = React.useMemo(() => {
+    return availableForSell?.find((product) => product === 1);
+  }, [availableForSell]);
+
+  const videoAvailableForSell = React.useMemo(() => {
+    return availableForSell?.find((product) => product === 4);
+  }, [availableForSell]);
+
+  const physicalProduct = React.useMemo(() => {
+    return book?.product?.find((product) => product?.productType === 2);
+  }, [book]);
+
+  const digitalProduct = React.useMemo(() => {
+    return book?.product?.find((product) => product?.productType === 1);
+  }, [book]);
+
+  const videoProduct = React.useMemo(() => {
+    return book?.product?.find((product) => product?.productType === 4);
+  }, [book]);
+
+  React.useEffect(() => {
+    setActiveProduct(physicalProduct);
+  }, [book]);
+
   return (
     <div className="w-full flex flex-col">
       <header className={`w-full flex justify-between gap-5`}>
@@ -21,19 +56,23 @@ export const ProductOverAll = ({ book, grades, isDark, loading }) => {
         <div className="flex flex-col w-1/2 divide-y divide-solid divide-gray-200">
           <div className="w-full flex flex-col pr-2 py-2  border-0">
             <h1 className="text-blue5F mb-3 font-semibold text-lg dark:text-white leading-7">
-              {book?.product[type]?.name}
+              {activeProduct?.name ? activeProduct.name : " "}
             </h1>
-            <div className="text-blueC0 text-tiny dark:text-greenBA">
+            {book?.gradeId ? (
-              {"پایه" + " " + grades[book?.gradeId]}
+              <div className="text-blueC0 text-tiny dark:text-greenBA">
-            </div>
+                {"پایه" + " " + grades[book?.gradeId]}
+              </div>
+            ) : null}
+
             <div className="flex justify-end items-center">
               <div className="p-2">
                 <StarRating value={book?.rate || 4} />
               </div>
-              <div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
+              {activeProduct?.suggestedCounter ? (
-                بیش از {book?.product[type]?.suggestedCounter} نفر امتیاز داده
+                <div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
-                اند
+                  بیش از {activeProduct?.suggestedCounter} نفر امتیاز داده اند
-              </div>
+                </div>
+              ) : null}
             </div>
           </div>
           <div className="py-4">
@@ -53,9 +92,9 @@ export const ProductOverAll = ({ book, grades, isDark, loading }) => {
                 }}
                 width="38%"
                 color={isDark ? "text-white" : "text-green7B"}
-                active={type === "1"}
+                active={activeProduct === physicalProduct}
                 selectable={true}
-                onClick={() => setType("1")}
+                onClick={() => setActiveProduct(physicalProduct)}
                 borderType="dashed"
                 customStyle=""
                 twPaddings="py-4 px-12"
@@ -70,9 +109,9 @@ export const ProductOverAll = ({ book, grades, isDark, loading }) => {
                 }}
                 width="38%"
                 selectable={true}
-                active={type === "0"}
+                active={activeProduct === digitalProduct}
                 color={isDark ? "text-white" : "text-green7B"}
-                onClick={() => setType("0")}
+                onClick={() => setActiveProduct(digitalProduct)}
                 borderType="dashed"
                 radius={false}
                 twPaddings="py-4 px-12"
@@ -115,25 +154,23 @@ export const ProductOverAll = ({ book, grades, isDark, loading }) => {
         </div>
         <div className="flex flex-col w-1/3 ">
           <ProductStatusCard
-            price={book?.product[type]?.price}
+            price={activeProduct?.price}
-            garanty={book?.product[type]?.garantyText}
+            garanty={activeProduct?.garantyText}
-            suggestedCounter={book?.product[type]?.suggestedCounter}
+            suggestedCounter={activeProduct?.suggestedCounter}
-            seller={book?.product[type]?.seller}
+            seller={activeProduct?.seller}
-            offerPrice={book?.product[type]?.offerPrice}
+            offerPrice={activeProduct?.offerPrice}
-            id={book?.product[type]?.id}
+            id={activeProduct?.id}
-            shippingTime={book?.product[type]?.shippingTime}
+            shippingTime={activeProduct?.shippingTime}
             loading={loading}
           />
         </div>
       </header>
-      {book?.product[type]?.properties?.length > 0 && (
+      {activeProduct?.properties?.length && (
         <ProductTab
           tabs={[
             {
               title: "مشخصات",
-              components: (
+              components: <Table specifications={activeProduct?.properties} />,
-                <Table specifications={book?.product[type]?.properties} />
-              ),
             },
             {
               title: "نقد و بررسی",
@@ -164,6 +201,7 @@ const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
   userId: state.user.status.id,
   loading: state.userProduct.loading,
+  availableForSell: state.config.availableForSell,
 });
 
 const mapDispatchToProps = {

src/views/Product/Desktop/index.js

@@ -8,7 +8,7 @@ import Comments from "../../../components/Comments";
 import Comment from "../Comment";
 import QandA from "../../../components/QandA";
 
-const DesktopProductLayout = () => {
+const DesktopProductLayout = ({ physicalProduct, rate }) => {
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
@@ -19,7 +19,12 @@ const DesktopProductLayout = () => {
         <ProductSuggestions />
       </div>
       <div className="w-2/5 my-8">
-        <Rate desktop />
+        <Rate
+          desktop
+          value={rate}
+          productId={physicalProduct?.id}
+          rateDetail={physicalProduct?.rateDetail}
+        />
       </div>
       <div className="w-4/5 ">
         <Comments indent={false} />

src/views/Product/Rate/index.js

@@ -46,23 +46,25 @@ function Rate({ desktop, productId, rateDetail }) {
       <div className="flex flex-col items-center justify-center h-full ml-4">
         {desktop ? (
           <h1 className={`text-gray-600 mb-2 font-bold dark:text-white`}>
-            {rate}
+            {rate || " "}
           </h1>
         ) : (
           <strong
             className={`text-blue5F mb-2 font-bold dark:text-white`}
             style={{ fontSize: "calc(100vw / 10)" }}
           >
-            {rate}
+            {rate || " "}
           </strong>
         )}
         <div className="">
           <StarRating value={rate} />
         </div>
-        <span className="text-base text-gray70 mt-2 dark:text-white">
+        {allCount ? (
-          {" "}
+          <span className="text-base text-gray70 mt-2 dark:text-white">
-          {`از بین ${allCount} نفر`}
+            {" "}
-        </span>
+            {`از بین ${allCount} نفر`}
+          </span>
+        ) : null}
       </div>
       <ul className="p-0 m-0 list-none flex flex-col flex-1">
         {[
@@ -92,16 +94,18 @@ function Rate({ desktop, productId, rateDetail }) {
             className="w-full flex flex-row-reverse items-center justify-between"
           >
             <span className="mr-2 text-xs text-blue5F dark:text-white">
-              {item.name}
+              {item.name || " "}
             </span>
             {desktop ? (
               <Progress deskTop percent={item.value} />
             ) : (
               <Progress percent={item.value} />
             )}
-            <span className="ml-2 text-xs text-blue5F dark:text-white">
+            {item?.value ? (
-              {item.value + "%"}
+              <span className="ml-2 text-xs text-blue5F dark:text-white">
-            </span>
+                {item.value + "%"}
+              </span>
+            ) : null}
           </li>
         ))}
       </ul>

src/views/Product/index.js

@@ -85,6 +85,10 @@ export const Product = ({
   }, [userProducts, book]);
 
   useEffect(() => {
+    if(!isMobile){
+      setHeaderOptions(headerOptions);
+
+    }
     getInfo({ id: location.getId(), vod: true });
     if (!isMobile) {
       window.addEventListener("scroll", () => {
@@ -104,7 +108,7 @@ export const Product = ({
   }, [userProductLoading]);
 
   useEffect(() => {
-    if (book) {
+    if (book && isMobile) {
       setHeaderOptions({ ...headerOptions, productId: book?.id });
       window.scroll({ top: 0, behavior: "smooth" });
     }
@@ -333,7 +337,7 @@ export const Product = ({
         </div>
       ) : (
         <div className="flex flex-col items-center justify-center lg:py-24">
-          <DesktopProductLayout />
+          <DesktopProductLayout physicalProduct={physicalProduct} rate={book?.rate || 0} />
         </div>
       )}
     </>