From 7fc2737439d2ae7ad72014fa7e830c201f70e67f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D8=AD=D8=B3=DB=8C=D9=86=20=D9=85=D8=B9=D8=B5=D9=88=D9=85?=
 =?UTF-8?q?=DB=8C=20=D9=BE=D9=88=D8=B1?= <hosseinmasoomi506@gmail.com>
Date: Wed, 11 Sep 2024 12:26:26 +0330
Subject: [PATCH 1/2] test new shop

---
 (                                             |   0
 components/AppsComponent/BrandData/page.jsx   |  42 +++-
 components/AppsComponent/ProductData/page.jsx | 210 +++++++++++++++++-
 src/app/products/[...id]/page.jsx             |  74 +++++-
 style/globals.css                             |  27 +++
 5 files changed, 334 insertions(+), 19 deletions(-)
 create mode 100644 (

diff --git a/( b/(
new file mode 100644
index 0000000..e69de29
diff --git a/components/AppsComponent/BrandData/page.jsx b/components/AppsComponent/BrandData/page.jsx
index 51a8c45..a0ea791 100644
--- a/components/AppsComponent/BrandData/page.jsx
+++ b/components/AppsComponent/BrandData/page.jsx
@@ -2,24 +2,54 @@
 import Footer from "@comp/Footer/page";
 import Navbar from "@comp/Navbar/page";
 import GalleryBox from "plugins/Gallery/page";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 
 import AddToCart from "@comp/Cards/Components/AddToCart/page";
 import Image from "next/image";
 import PersianNumber from "plugins/PersianNumber";
 import logo from "../../../public/images/logo.png";
+import AppContext from "@ctx/AppContext";
+import CardNormal from "@comp/Cards/CardNormal/page";
 
 const BrandData = ({ params, data }) => {
   console.log("data brand", data);
+  const CTX = useContext(AppContext);
+  const hairCosmeticData = CTX.state.hairCosmeticData;
+
+  useEffect(() => {
+    CTX.fetchHairCosmetic();
+  }, []);
   return (
     <>
       <Navbar theme={1} />
       <div className=" py-10">
-        <div className="grid xs:grid-cols-1 rtl gap-6 px-20">
-          <h1>
-            محصولات موجود در وسمه با برند
-            {data?.persianName}
-          </h1>
+        <div className="grid xs:grid-cols-1 rtl gap-6 lg:px-20">
+          <div className="mt-[30px]">
+            <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10 ">
+              <div className="text-center relative mb-20">
+                <div className="absolute xs:mt-[-20px] lg:mt-[-45px] w-full z-0">
+                  <p className="xs:text-[30px] lg:text-[80px]  bet-text font-bold">
+                    {data?.englishName} IN VESMEH
+                  </p>
+                </div>
+                <h1 className="xs:text-[30px] lg:text-[40px] font-bold relative z-10">
+                  وسمه با برند
+                  <span className="text-primary-500"> {data?.persianName}</span>
+                </h1>
+                <p className="mb-0 text-sm text-gray-400">
+                  با تصمین کمترین قیمت در تمامی دستنه بندی ها خرید کنید{" "}
+                </p>
+              </div>
+
+              <div className="grid  xs:grid-cols-1 lg:grid-cols-5 gap-5">
+                {hairCosmeticData?.products?.map((e) => (
+                  <div className="relative">
+                    <CardNormal data={e} priority />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
diff --git a/components/AppsComponent/ProductData/page.jsx b/components/AppsComponent/ProductData/page.jsx
index 34bda6f..a683f51 100644
--- a/components/AppsComponent/ProductData/page.jsx
+++ b/components/AppsComponent/ProductData/page.jsx
@@ -8,6 +8,7 @@ import AddToCart from "@comp/Cards/Components/AddToCart/page";
 import Image from "next/image";
 import PersianNumber from "plugins/PersianNumber";
 import logo from "../../../public/images/logo.png";
+import moment from "jalali-moment";
 
 const ProductData = ({ params, data }) => {
   console.log("data", data);
@@ -331,15 +332,214 @@ const ProductData = ({ params, data }) => {
               </div>
 
               <div id="section3">
-                <h3 className=" text-sm text-gray-400 mt-7 mb-2">
-                  دیدگاه مخاطبان{" "}
-                </h3>
+                <div className="flex">
+                  <h3 className=" text-sm text-gray-400 mt-7 mb-2">
+                    دیدگاه مخاطبان{" "}
+                  </h3>
+                </div>
                 <div className="border p-5  rounded-lg">
-                  <div className="flex justify-center py-5">
+                  <div className="">
+                    <div className="flex relative">
+                      <div className="xs:w-[40px]  lg:w-[60px] xs:h-[40px] lg:h-[60px] relative bg-white rounded-2xl text-center">
+                        <svg
+                          width="40"
+                          height="40"
+                          viewBox="0 0 168 183"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="opacity-30 mx-auto"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M83.9994 0.666992C130.024 0.666992 167.333 37.9753 167.333 84.0003C167.361 103.233 160.71 121.878 148.516 136.75L148.683 136.934L147.583 137.867C139.767 147.11 130.028 154.535 119.046 159.624C108.064 164.714 96.1035 167.345 83.9994 167.334C59.4161 167.334 37.3328 156.692 22.0828 139.775L20.4161 137.859L19.3161 136.942L19.4828 136.742C7.2903 121.872 0.63933 103.23 0.666096 84.0003C0.666096 37.9753 37.9744 0.666992 83.9994 0.666992ZM83.9994 125.667C68.4994 125.667 54.4911 130.6 44.0578 137.384C55.5793 146.025 69.5975 150.687 83.9994 150.667C98.4014 150.687 112.42 146.025 123.941 137.384C112.019 129.745 98.1588 125.68 83.9994 125.667ZM83.9994 17.3337C71.4538 17.3333 59.1627 20.8729 48.5388 27.5457C37.9149 34.2185 29.3895 43.7536 23.9424 55.0551C18.4954 66.3565 16.3478 78.9656 17.7465 91.433C19.1452 103.9 24.0335 115.72 31.8494 125.534C45.3578 115.842 63.7911 109 83.9994 109C104.208 109 122.641 115.842 136.149 125.534C143.965 115.72 148.854 103.9 150.252 91.433C151.651 78.9656 149.503 66.3565 144.056 55.0551C138.609 43.7536 130.084 34.2185 119.46 27.5457C108.836 20.8729 96.5451 17.3333 83.9994 17.3337ZM83.9994 34.0003C92.84 34.0003 101.318 37.5122 107.57 43.7634C113.821 50.0146 117.333 58.4931 117.333 67.3337C117.333 76.1742 113.821 84.6527 107.57 90.9039C101.318 97.1551 92.84 100.667 83.9994 100.667C75.1589 100.667 66.6804 97.1551 60.4292 90.9039C54.178 84.6527 50.6661 76.1742 50.6661 67.3337C50.6661 58.4931 54.178 50.0146 60.4292 43.7634C66.6804 37.5122 75.1589 34.0003 83.9994 34.0003ZM83.9994 50.667C79.5791 50.667 75.3399 52.4229 72.2143 55.5485C69.0887 58.6742 67.3328 62.9134 67.3328 67.3337C67.3328 71.7539 69.0887 75.9932 72.2143 79.1188C75.3399 82.2444 79.5791 84.0003 83.9994 84.0003C88.4197 84.0003 92.6589 82.2444 95.7845 79.1188C98.9101 75.9932 100.666 71.7539 100.666 67.3337C100.666 62.9134 98.9101 58.6742 95.7845 55.5485C92.6589 52.4229 88.4197 50.667 83.9994 50.667Z"
+                            fill="black"
+                          />
+                        </svg>
+                      </div>
+
+                      <div className="mr-2 mt-1 w-full">
+                        <h3 className="font-bold">محدثه سروری پور </h3>
+                        <p className="mb-0 mt-1 text-gray-400 text-sm">
+                          <PersianNumber
+                            number={moment(Date()).format("jYYYY/jMM/jDD")}
+                            style={"text-sm"}
+                          />
+                        </p>
+
+                        <p className="mb-0 text-sm text-gray-600">
+                          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
+                          چاپ و با استفاده از طراحان گرافیک است
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="lg:mr-10 mt-5">
+                    <div className="flex relative">
+                      <div className="xs:w-[40px]  lg:w-[60px] xs:h-[40px] lg:h-[60px] relative bg-primary-300 rounded-2xl text-center">
+                        <div className="w-[45px] mx-auto mt-6">
+                          <Image src={logo} />
+                        </div>
+                      </div>
+
+                      <div className="mr-2 mt-1 w-full">
+                        <h3 className="font-bold xs:text-sm lg:text-base">
+                          پشتیبانی فروشگاه وسمه - آقای حیدریان
+                        </h3>
+                        <p className="mb-0  text-gray-400 text-sm">
+                          <PersianNumber
+                            number={moment(Date()).format("jYYYY/jMM/jDD")}
+                            style={"!text-[12px]"}
+                          />
+                        </p>
+
+                        <p className="mb-0 text-sm text-gray-600">
+                          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
+                          چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
+                          بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
+                          برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع
+                          با هدف بهبود ابزارهای کاربردی می باشد
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="mt-10">
+                    <div className="flex relative">
+                      <div className="xs:w-[40px]  lg:w-[60px] xs:h-[40px] lg:h-[60px] relative bg-white rounded-2xl text-center">
+                        <svg
+                          width="40"
+                          height="40"
+                          viewBox="0 0 168 183"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="opacity-30 mx-auto"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M83.9994 0.666992C130.024 0.666992 167.333 37.9753 167.333 84.0003C167.361 103.233 160.71 121.878 148.516 136.75L148.683 136.934L147.583 137.867C139.767 147.11 130.028 154.535 119.046 159.624C108.064 164.714 96.1035 167.345 83.9994 167.334C59.4161 167.334 37.3328 156.692 22.0828 139.775L20.4161 137.859L19.3161 136.942L19.4828 136.742C7.2903 121.872 0.63933 103.23 0.666096 84.0003C0.666096 37.9753 37.9744 0.666992 83.9994 0.666992ZM83.9994 125.667C68.4994 125.667 54.4911 130.6 44.0578 137.384C55.5793 146.025 69.5975 150.687 83.9994 150.667C98.4014 150.687 112.42 146.025 123.941 137.384C112.019 129.745 98.1588 125.68 83.9994 125.667ZM83.9994 17.3337C71.4538 17.3333 59.1627 20.8729 48.5388 27.5457C37.9149 34.2185 29.3895 43.7536 23.9424 55.0551C18.4954 66.3565 16.3478 78.9656 17.7465 91.433C19.1452 103.9 24.0335 115.72 31.8494 125.534C45.3578 115.842 63.7911 109 83.9994 109C104.208 109 122.641 115.842 136.149 125.534C143.965 115.72 148.854 103.9 150.252 91.433C151.651 78.9656 149.503 66.3565 144.056 55.0551C138.609 43.7536 130.084 34.2185 119.46 27.5457C108.836 20.8729 96.5451 17.3333 83.9994 17.3337ZM83.9994 34.0003C92.84 34.0003 101.318 37.5122 107.57 43.7634C113.821 50.0146 117.333 58.4931 117.333 67.3337C117.333 76.1742 113.821 84.6527 107.57 90.9039C101.318 97.1551 92.84 100.667 83.9994 100.667C75.1589 100.667 66.6804 97.1551 60.4292 90.9039C54.178 84.6527 50.6661 76.1742 50.6661 67.3337C50.6661 58.4931 54.178 50.0146 60.4292 43.7634C66.6804 37.5122 75.1589 34.0003 83.9994 34.0003ZM83.9994 50.667C79.5791 50.667 75.3399 52.4229 72.2143 55.5485C69.0887 58.6742 67.3328 62.9134 67.3328 67.3337C67.3328 71.7539 69.0887 75.9932 72.2143 79.1188C75.3399 82.2444 79.5791 84.0003 83.9994 84.0003C88.4197 84.0003 92.6589 82.2444 95.7845 79.1188C98.9101 75.9932 100.666 71.7539 100.666 67.3337C100.666 62.9134 98.9101 58.6742 95.7845 55.5485C92.6589 52.4229 88.4197 50.667 83.9994 50.667Z"
+                            fill="black"
+                          />
+                        </svg>
+                      </div>
+
+                      <div className="mr-2 mt-1 w-full">
+                        <h3 className="font-bold">حسین معصومی </h3>
+                        <p className="mb-0 mt-1 text-gray-400 text-sm">
+                          <PersianNumber
+                            number={moment(Date()).format("jYYYY/jMM/jDD")}
+                            style={"text-sm"}
+                          />
+                        </p>
+
+                        <p className="mb-0 text-sm text-gray-600">
+                          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم{" "}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="mt-10">
+                    <div className="flex relative">
+                      <div className="xs:w-[40px]  lg:w-[60px] xs:h-[40px] lg:h-[60px] relative bg-white rounded-2xl text-center">
+                        <svg
+                          width="40"
+                          height="40"
+                          viewBox="0 0 168 183"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="opacity-30 mx-auto"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M83.9994 0.666992C130.024 0.666992 167.333 37.9753 167.333 84.0003C167.361 103.233 160.71 121.878 148.516 136.75L148.683 136.934L147.583 137.867C139.767 147.11 130.028 154.535 119.046 159.624C108.064 164.714 96.1035 167.345 83.9994 167.334C59.4161 167.334 37.3328 156.692 22.0828 139.775L20.4161 137.859L19.3161 136.942L19.4828 136.742C7.2903 121.872 0.63933 103.23 0.666096 84.0003C0.666096 37.9753 37.9744 0.666992 83.9994 0.666992ZM83.9994 125.667C68.4994 125.667 54.4911 130.6 44.0578 137.384C55.5793 146.025 69.5975 150.687 83.9994 150.667C98.4014 150.687 112.42 146.025 123.941 137.384C112.019 129.745 98.1588 125.68 83.9994 125.667ZM83.9994 17.3337C71.4538 17.3333 59.1627 20.8729 48.5388 27.5457C37.9149 34.2185 29.3895 43.7536 23.9424 55.0551C18.4954 66.3565 16.3478 78.9656 17.7465 91.433C19.1452 103.9 24.0335 115.72 31.8494 125.534C45.3578 115.842 63.7911 109 83.9994 109C104.208 109 122.641 115.842 136.149 125.534C143.965 115.72 148.854 103.9 150.252 91.433C151.651 78.9656 149.503 66.3565 144.056 55.0551C138.609 43.7536 130.084 34.2185 119.46 27.5457C108.836 20.8729 96.5451 17.3333 83.9994 17.3337ZM83.9994 34.0003C92.84 34.0003 101.318 37.5122 107.57 43.7634C113.821 50.0146 117.333 58.4931 117.333 67.3337C117.333 76.1742 113.821 84.6527 107.57 90.9039C101.318 97.1551 92.84 100.667 83.9994 100.667C75.1589 100.667 66.6804 97.1551 60.4292 90.9039C54.178 84.6527 50.6661 76.1742 50.6661 67.3337C50.6661 58.4931 54.178 50.0146 60.4292 43.7634C66.6804 37.5122 75.1589 34.0003 83.9994 34.0003ZM83.9994 50.667C79.5791 50.667 75.3399 52.4229 72.2143 55.5485C69.0887 58.6742 67.3328 62.9134 67.3328 67.3337C67.3328 71.7539 69.0887 75.9932 72.2143 79.1188C75.3399 82.2444 79.5791 84.0003 83.9994 84.0003C88.4197 84.0003 92.6589 82.2444 95.7845 79.1188C98.9101 75.9932 100.666 71.7539 100.666 67.3337C100.666 62.9134 98.9101 58.6742 95.7845 55.5485C92.6589 52.4229 88.4197 50.667 83.9994 50.667Z"
+                            fill="black"
+                          />
+                        </svg>
+                      </div>
+
+                      <div className="mr-2 mt-1 w-full">
+                        <h3 className="font-bold">ماهان قیصرزاده </h3>
+                        <p className="mb-0 mt-1 text-gray-400 text-sm">
+                          <PersianNumber
+                            number={moment(Date()).format("jYYYY/jMM/jDD")}
+                            style={"text-sm"}
+                          />
+                        </p>
+
+                        <p className="mb-0 text-sm text-gray-600">
+                          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
+                          چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
+                          بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
+                          برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع
+                          با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در
+                          شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و
+                          متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را
+                          برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ
+                          پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید
+                          داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط
+                          سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی
+                          دستاوردهای اصلی
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="lg:mr-10 mt-5">
+                    <div className="flex relative">
+                      <div className="xs:w-[40px]  lg:w-[60px] xs:h-[40px] lg:h-[60px] relative bg-primary-300 rounded-2xl text-center">
+                        <div className=" xs:w-[10px] lg:w-[45px] mx-auto xs:mt-3 lg:mt-6">
+                          <Image src={logo} />
+                        </div>
+                      </div>
+
+                      <div className="mr-2 mt-1 w-full">
+                        <h3 className="font-bold xs:text-sm lg:text-base">
+                          پشتیبانی فروشگاه وسمه - آقای حیدریان
+                        </h3>
+                        <p className="mb-0  text-gray-400 text-sm">
+                          <PersianNumber
+                            number={moment(Date()).format("jYYYY/jMM/jDD")}
+                            style={"!text-[12px]"}
+                          />
+                        </p>
+
+                        <p className="mb-0 text-sm text-gray-600">
+                          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
+                          چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
+                          بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
+                          برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع
+                          با هدف بهبود ابزارهای کاربردی می باشد
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <hr className="my-10" />
+
+                  <div>
+                    <h3 className="font-bold">دیدگاه خود را وارد کنید </h3>{" "}
+                    <textarea
+                      className="form-control mt-2"
+                      name=""
+                      id=""
+                      cols="30"
+                      rows="8"
+                    />
+                    <div className="flex justify-end">
+                      <button className="btn btn-primary text-sm py-3 rounded-3xl">
+                        ارسال دیدگاه ( برای ارسال دیدگاه باید ابتدا ورود کنید){" "}
+                      </button>
+                    </div>
+                  </div>
+                  {/* <div className="flex justify-center py-5">
                     <div className="bg-white shadow   w-fit rounded-full text-sm   p-4">
                       چیزی یافت نشد
                     </div>
-                  </div>
+                  </div> */}
                 </div>{" "}
               </div>
             </div>
diff --git a/src/app/products/[...id]/page.jsx b/src/app/products/[...id]/page.jsx
index 428f506..3d5455b 100644
--- a/src/app/products/[...id]/page.jsx
+++ b/src/app/products/[...id]/page.jsx
@@ -30,15 +30,61 @@ export async function generateMetadata({ params }) {
     `products/${params.id[0]}/${data?.product?.persianName}`,
     process.env.NEXT_PUBLIC_APP_URL
   );
+
+  // Structured Data
+  const productSchema = {
+    "@context": "https://schema.org/",
+    "@type": "Product",
+    name: data?.product?.persianName,
+    image: imageUrl.toString() || "https://example.com/default-image.jpg", // Provide a default image if none exists
+    description:
+      data?.product?.summery ||
+      `خرید ${data?.product?.persianName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`,
+    sku: data?.product?.id,
+    brand: {
+      "@type": "Brand",
+      name: data?.product?.brandName || "نام برند",
+    },
+    offers: {
+      "@type": "Offer",
+      url: metadataUrl.toString(),
+      priceCurrency: "IRR",
+      price: (data?.product?.costWithDiscount / 10).toString() || "0",
+      itemCondition: "https://schema.org/NewCondition",
+      availability:
+        data?.product?.stock > 0
+          ? "https://schema.org/InStock"
+          : "https://schema.org/OutOfStock",
+      seller: {
+        "@type": "Organization",
+        name: "Vesmeh Store",
+      },
+    },
+    aggregateRating: {
+      "@type": "AggregateRating",
+      ratingValue:
+        data?.product?.reviews.length > 0
+          ? (
+              data?.product?.reviews.reduce(
+                (acc, review) => acc + review.rating,
+                0
+              ) / data?.product?.reviews.length
+            ).toFixed(1)
+          : "4.5", // Default rating if no reviews
+      reviewCount: data?.product?.reviews.length.toString() || "0",
+    },
+  };
+
   return {
     title: data?.product?.persianName,
-    description: `خرید ${data?.product?.persianName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`,
+    description:
+      data?.product?.summery ||
+      `خرید ${data?.product?.persianName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`,
     metadataBase: metadataUrl,
     product_id_meta: data?.product?.id,
     alternates: {
       canonical: metadataUrl,
     },
-
     keywords: [
       "آرایشی",
       "بهداشت خانگی",
@@ -46,19 +92,21 @@ export async function generateMetadata({ params }) {
       "لوازم تمیزی",
       "مراقبت شخصی",
     ],
-
     openGraph: {
       title: data?.product?.persianName,
-      description: `  خرید ${data?.product?.persianName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`,
-      images: [imageUrl],
+      description:
+        data?.product?.summery ||
+        `خرید ${data?.product?.persianName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`,
+      images: [imageUrl.toString()],
       url: metadataUrl,
       type: "website",
       locale: "fa-IR",
-      type: "website",
     },
     twitter: {
       site: "@vesmehstore",
-      description: `  خرید ${data?.product?.persianName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`,
+      description:
+        data?.product?.summery ||
+        `خرید ${data?.product?.persianName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`,
       title: data?.product?.persianName,
       creator: "@vesmehstore",
     },
@@ -68,7 +116,17 @@ export async function generateMetadata({ params }) {
       product_price: data?.product?.costWithDiscount / 10,
       product_old_price: data?.product?.cost / 10,
       availability: data?.product?.stock > 0 ? "instock" : "outofstock",
-      guarantee: "guarantee_sample",
+      guarantee: data?.product?.warranty || "ضمانت دارد",
+      ratingValue:
+        data?.product?.reviews.length > 0
+          ? (
+              data?.product?.reviews.reduce(
+                (acc, review) => acc + review.rating,
+                0
+              ) / data?.product?.reviews.length
+            ).toFixed(1)
+          : "4.5", // Default rating if no reviews
+      reviewCount: data?.product?.reviews.length.toString() || "0",
     },
   };
 }
diff --git a/style/globals.css b/style/globals.css
index a40b53f..d779746 100644
--- a/style/globals.css
+++ b/style/globals.css
@@ -236,3 +236,30 @@ body::-webkit-scrollbar-track {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
+
+.bet-text {
+  background: -webkit-linear-gradient(
+    90deg,
+    #ffffff,
+    #ffffff,
+    #0966a5a6,
+    #053758a6
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  opacity: 0.4;
+}
+
+.bet-text-green {
+  background: -webkit-linear-gradient(
+    90deg,
+    #044f8b73,
+    #01276e98,
+    #86859198,
+    #ffffff,
+    #ffffff
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  opacity: 0.3;
+}

From 2e7a2d1740391250b95b7564dd62eba19f94eab1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D8=AD=D8=B3=DB=8C=D9=86=20=D9=85=D8=B9=D8=B5=D9=88=D9=85?=
 =?UTF-8?q?=DB=8C=20=D9=BE=D9=88=D8=B1?= <hosseinmasoomi506@gmail.com>
Date: Sun, 15 Sep 2024 15:37:32 +0330
Subject: [PATCH 2/2] test cmment

---
 components/AppsComponent/ProductData/page.jsx | 52 +++++++++++++++++--
 1 file changed, 49 insertions(+), 3 deletions(-)

diff --git a/components/AppsComponent/ProductData/page.jsx b/components/AppsComponent/ProductData/page.jsx
index a683f51..939eebd 100644
--- a/components/AppsComponent/ProductData/page.jsx
+++ b/components/AppsComponent/ProductData/page.jsx
@@ -9,18 +9,31 @@ import Image from "next/image";
 import PersianNumber from "plugins/PersianNumber";
 import logo from "../../../public/images/logo.png";
 import moment from "jalali-moment";
+import Chapar from "plugins/Chapar";
+import { toast } from "react-toastify";
+import { useRouter } from "next/navigation";
 
 const ProductData = ({ params, data }) => {
   console.log("data", data);
   const [product, setProduct] = useState([]);
   const [specificationsHeader, setSpecificationsHeader] = useState([]);
   const [productBarDetail, setProductBarDetail] = useState(0);
+  const [comment, setComment] = useState("0");
+
+  const router = useRouter();
 
   const fetchPost = async (id) => {
     const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/product/${id}`);
     const post = await res.json();
     setProduct(post.product);
   };
+  const fetchReview = async (id) => {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/product/${id}/review?page=0`
+    );
+    const post = await res.json();
+    setProduct(post.product);
+  };
 
   const displaySpecifications = (specs) => {
     let data = [];
@@ -51,8 +64,37 @@ const ProductData = ({ params, data }) => {
       });
     }
   };
+
+  const createProductReview = async () => {
+    const body = { title: "", comment, rate: "", productId: params.id[0] };
+    try {
+      const data = await Chapar.post(
+        `${process.env.NEXT_PUBLIC_API_URL}/product/review`,
+        body
+      );
+
+      // fetchReview();
+    } catch ({ error, status }) {
+      toast.error(`${error?.response?.data?.message}`, {
+        position: "bottom-right",
+        closeOnClick: true,
+      });
+    }
+  };
+
+  const handleCreateReview = () => {
+    const token = localStorage.getItem("token");
+
+    if (token) {
+      createProductReview();
+    } else {
+      router.push("/login");
+    }
+  };
+
   useEffect(() => {
     fetchPost(params.id[0]);
+    fetchReview(params.id[0]);
   }, []);
 
   useEffect(() => {
@@ -137,13 +179,13 @@ const ProductData = ({ params, data }) => {
                   {data?.product?.files?.length > 0 ? (
                     <Image
                       src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${
-                        product.files && product.files[0].fileLocation
+                        product?.files && product?.files[0].fileLocation
                       }`}
                       width={350}
                       height={350}
                       className=" mx-auto !object-cover"
                       onClick={() => CTX.setIsOpenLightBox(true)}
-                      alt={`${product.persianName} - ${product.englishName}`}
+                      alt={`${product?.persianName} - ${product?.englishName}`}
                       property
                       loading="eager"
                     />
@@ -528,8 +570,12 @@ const ProductData = ({ params, data }) => {
                       id=""
                       cols="30"
                       rows="8"
+                      onChange={(e) => setComment(e.target.value)}
                     />
-                    <div className="flex justify-end">
+                    <div
+                      className="flex justify-end"
+                      onClick={() => handleCreateReview()}
+                    >
                       <button className="btn btn-primary text-sm py-3 rounded-3xl">
                         ارسال دیدگاه ( برای ارسال دیدگاه باید ابتدا ورود کنید){" "}
                       </button>