handle download poster and qrcode, fix to show timestamp, add pagination to doctors page

components/doctor/appointmentList/ItemAppointment.js

@@ -5,9 +5,7 @@ import GreenCalendarTurn from "@/components/icons/GreenCalendarTurn";
 import { Button } from "@mui/material";
 import Image from "next/image";
 import Link from "next/link";
-import moment from "moment-jalaali";
-
-moment.loadPersian({ dialect: "persian-modern" });
+import { convertTimestampToPersianDateSimple } from "@/helper";
 
 function ItemAppointment({ turn, loading }) {
   return (
@@ -48,9 +46,7 @@ function ItemAppointment({ turn, loading }) {
           <TextLoading width={100} height={15} loading={loading}>
             <p className="text-[#05BA58] text-[12px] font-medium">
               {Number(turn?.free_turn)
-                ? `اولین نوبت آزاد: ${moment(turn?.free_turn * 1000).format(
-                    "dddd jD jMMMM [ساعت] HH:mm"
-                  )}`
+                ? `اولین نوبت آزاد: ${convertTimestampToPersianDateSimple(turn?.free_turn)}`
                 : "نوبت ندارد"}
             </p>
           </TextLoading>

components/doctor/detailDoctor/Share.js

@@ -25,8 +25,7 @@ function Share({ data }) {
         <ShareDI />
         <p className="hidden lg:flex">اشتراک گذاری</p>
       </Button>
-      {/* <div className="fixed top-0 left-0 opacity-0 pointer-events-none -z-10"> */}
-      <div className="">
+      <div className="fixed min-w-[600px] min-h-[700px] w-[600px] h-[700px] top-0 left-0 opacity-0 pointer-events-none -z-10">
         <div ref={hiddenRef}>
           <Poster data={data} />
         </div>

components/doctor/detailDoctor/cards/AboutDcotor.js

@@ -41,7 +41,7 @@ function AboutDcotor({ doctor }) {
       </div>
       <div className="mt-[12px] lg:mt-[8px] mb-6 md:mb-7 lg:mb-8">
         <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
-          تخصص ها
+          خدمات
         </p>
         <ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4 flex-wrap">
           {doctor?.expertise?.map((item, idx) => (

components/doctor/index.js

@@ -19,7 +19,7 @@ function DoctorPage({ doctor, comments }) {
           </div>
         </CustomLoading>
         <div className="flex lg:hidden">
-          <Share />
+          <Share data={doctor} />
         </div>
       </div>
       <div className="flex items-start justify-center gap-6 mt-[30px]">

components/doctor/poster/QrCode.js

@@ -1,15 +0,0 @@
-import Image from "next/image";
-import CodeSample from "@/public/assets/images/default-qr-code.png";
-
-function QrCode() {
-  return (
-    <div className="flex items-center flex-col justify-center mt-[100%]">
-      <Image className="mt-[100%]" src={CodeSample} width={167} height={167} />
-      <p className="text-[#3987D4] font-semibold text-[16px] mt-[32px]">
-        nobat724/ahwaz.com
-      </p>
-    </div>
-  );
-}
-
-export default QrCode;

components/doctor/poster/QrImg.js

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+import QRCode from "qrcode";
+import { getStateInfoClient } from "@/lib/getStateInfoClient";
+
+export default function QrImg() {
+  const [host, setHost] = useState("");
+  const [qrCodeData, setQrCodeData] = useState("");
+
+  useEffect(() => {
+    const info = getStateInfoClient();
+    const linkHost = info.host;
+    const linkURL = info.fullUrl;
+
+    setHost(linkHost);
+
+    if (linkURL) {
+      QRCode.toDataURL(linkURL).then(setQrCodeData);
+    }
+  }, []);
+
+  return (
+    <div className="flex items-center flex-col justify-center mt-[100%]">
+      {qrCodeData ? (
+        <img src={qrCodeData} width={167} height={167} />
+      ) : (
+        <p>در حال بارگذاری...</p>
+      )}
+      <p className="text-[#3987D4] min-h-[24px] font-semibold text-[16px] mt-[32px]">
+        {host || ""}
+      </p>
+    </div>
+  );
+}

components/doctor/poster/Services.js

@@ -9,7 +9,7 @@ function Services({ data }) {
         <p className="text-[#E7EEF6] text-[20px] font-semibold">خدمات:</p>
       </div>
       <ul className="flex flex-col justify-start items-start gap-[16px] mt-[16px] font-normal ">
-        {data?.specialties?.map((item, idx) => (
+        {data?.expertise?.map((item, idx) => (
           <li key={idx} className="flex items-center justify-start gap-[4px]">
             <CircleOrangeSm />
             <p className="text-[16px] font-normal text-[#E7EEF6]">{item.name}</p>

components/doctor/poster/index.js

@@ -4,7 +4,7 @@ import Services from "./Services";
 import Address from "./Address";
 import Telefon from "./Telefon";
 import ImageProfile from "./ImageProfile";
-import QrCode from "./QrCode";
+import QrImg from "./QrImg";
 
 function Poster({ data }) {
   return (
@@ -19,18 +19,18 @@ function Poster({ data }) {
         </p>
         <p className="text-[24px] mt-[20px] text-[#E7EEF6] font-bold text-right">
           تخصص:
-          {data?.expertise?.map(
+          {data?.specialties?.map(
             (item, idx) =>
-              `${item.name} ${data.expertise.length === idx + 1 ? "" : "|"} `
+              `${item.name} ${data.specialties.length === idx + 1 ? "" : "|"} `
           )}
         </p>
         <Services data={data} />
         <Address data={data} />
         <Telefon data={data} />
       </div>
-      <div className="flex flex-col justify-between items-end">
+      <div className="flex flex-col justify-between items-end min-w-[200px]">
         <ImageProfile data={data} />
-        <QrCode />
+        <QrImg />
       </div>
     </div>
   );