feat: enhance poster download functionality by ensuring images load before PDF generation and adding QR readiness check

components/doctor/poster/ImageProfile.js

@@ -1,16 +1,9 @@
-import Image from "next/image";
-import { imageUrl } from "@/helper";
+import DoctorAvatar from "@/app/component/DoctorAvatar";
 
 function ImageProfile({ data }) {
   return (
     <div className="bg-stroke-circle ml-[10px] mt-[57px] p-[9px] rounded-full overflow-hidden">
-      <Image
-        src={imageUrl(data?.img?.[0]?.url)}
-        width={173}
-        height={173}
-        alt="profile-user"
-        className="rounded-full"
-      />
+      <DoctorAvatar doctor={data} size={173} priority className="rounded-full" />
     </div>
   );
 }

components/doctor/poster/QrImg.js

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import QRCode from "qrcode";
 import { getStateInfoClient } from "@/lib/getStateInfoClient";
 
-export default function QrImg() {
+export default function QrImg({ onReady }) {
   const [host, setHost] = useState("");
   const [qrCodeData, setQrCodeData] = useState("");
 
@@ -14,9 +14,14 @@ export default function QrImg() {
     setHost(linkHost);
 
     if (linkURL) {
-      QRCode.toDataURL(linkURL).then(setQrCodeData);
+      QRCode.toDataURL(linkURL).then((url) => {
+        setQrCodeData(url);
+        onReady?.();
+      });
+    } else {
+      onReady?.();
     }
-  }, []);
+  }, [onReady]);
 
   return (
     <div className="flex items-center flex-col justify-center mt-[100%]">

components/doctor/poster/index.js

@@ -1,18 +1,28 @@
+"use client";
+import { useEffect, useState } from "react";
 import Image from "next/image";
 import Services from "./Services";
 import Address from "./Address";
 import Telefon from "./Telefon";
 import ImageProfile from "./ImageProfile";
 import QrImg from "./QrImg";
+import { getStateInfoClient } from "@/lib/getStateInfoClient";
+
+function Poster({ data, onQrReady }) {
+  const [siteName, setSiteName] = useState("");
+
+  useEffect(() => {
+    const { matchedCity, host } = getStateInfoClient();
+    setSiteName(matchedCity?.domain || host || "");
+  }, []);
 
-function Poster({ data }) {
   return (
     <div className="bg-poster overflow-hidden !pt-[32px] p-[24px] relative flex justify-between items-start">
       <div>
         <div className="flex items-center justify-start gap-[5px]">
           <Image src="/assets/images/logo.png" width={30} height={30} alt="logo" />
           <p className="text-[#E7EEF6] text-[16px] font-bold !-translate-y-1">
-            nobat724.com
+            {siteName}
           </p>
         </div>
         <p className="mt-[40px] text-[#E7EEF6] text-[20px] font-bold text-right">
@@ -31,7 +41,7 @@ function Poster({ data }) {
       </div>
       <div className="flex flex-col justify-between items-end min-w-[200px]">
         <ImageProfile data={data} />
-        <QrImg />
+        <QrImg onReady={onQrReady} />
       </div>
     </div>
   );