update 6 files

2 years ago · c802ab29d6
parent ad888d0a38
commit c802ab29d6
6 changed files with 120 additions and 58 deletions
--- a/src/components/ProductStatusCard/index.js
+++ b/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} ${window.t("نفر")} `}</div>
+              {suggestedCounter ? (
+                <div className="text-sm">{`${window.t(
+                  "توصیه به خرید توسط"
+                )}  ${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>
-                <div className="text-xs">
-                  {`${window.t("پایه")}` + " " + "%" + seller.rate * 20}
-                </div>
+                {seller?.name ? (
+                  <div className="text-tiny">
+                    {"فروشنده" + " " + seller.name}
+                  </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 ">
-            {separate(price)}
-            <span className="text-sm text-gray-700 font-light mr-1">
-              {window.t("تومان")}
-            </span>
-          </p>
-          {offerPrice && (
+          {price ? (
+            <p className="text-6xl text-blueC0 font-bold ">
+              {separate(price)}
+              <span className="text-sm text-gray-700 font-light mr-1">
+                {window.t("تومان")}
+              </span>
+            </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
--- a/src/components/ProductSuggestion/index.js
+++ b/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) => ({
--- a/src/views/Product/Desktop/ProductOverAll/index.js
+++ b/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 }) => {
-  const [type, setType] = useState("1");
+export const ProductOverAll = ({
+  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">
-              {"پایه" + " " + grades[book?.gradeId]}
-            </div>
+            {book?.gradeId ? (
+              <div className="text-blueC0 text-tiny dark:text-greenBA">
+                {"پایه" + " " + 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">
-                بیش از {book?.product[type]?.suggestedCounter} نفر امتیاز داده
-                اند
-              </div>
+              {activeProduct?.suggestedCounter ? (
+                <div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
+                  بیش از {activeProduct?.suggestedCounter} نفر امتیاز داده اند
+                </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}
-            garanty={book?.product[type]?.garantyText}
-            suggestedCounter={book?.product[type]?.suggestedCounter}
-            seller={book?.product[type]?.seller}
-            offerPrice={book?.product[type]?.offerPrice}
-            id={book?.product[type]?.id}
-            shippingTime={book?.product[type]?.shippingTime}
+            price={activeProduct?.price}
+            garanty={activeProduct?.garantyText}
+            suggestedCounter={activeProduct?.suggestedCounter}
+            seller={activeProduct?.seller}
+            offerPrice={activeProduct?.offerPrice}
+            id={activeProduct?.id}
+            shippingTime={activeProduct?.shippingTime}
            loading={loading}
          />
        </div>
      </header>
-      {book?.product[type]?.properties?.length > 0 && (
+      {activeProduct?.properties?.length && (
        <ProductTab
          tabs={[
            {
              title: "مشخصات",
-              components: (
-                <Table specifications={book?.product[type]?.properties} />
-              ),
+              components: <Table specifications={activeProduct?.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 = {
--- a/src/views/Product/Desktop/index.js
+++ b/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} />
--- a/src/views/Product/Rate/index.js
+++ b/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>
+        {allCount ? (
+          <span className="text-base text-gray70 mt-2 dark:text-white">
+            {" "}
+            {`از بین ${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 + "%"}
-            </span>
+            {item?.value ? (
+              <span className="ml-2 text-xs text-blue5F dark:text-white">
+                {item.value + "%"}
+              </span>
+            ) : null}
          </li>
        ))}
      </ul>
--- a/src/views/Product/index.js
+++ b/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>
      )}
    </>