Merge pull request #478 from hngprojects/auth-fixes

fix: update export button visibility logic and adjust save button con…

Author: Jomagene

src/app/(dashboard)/dashboard/details/page.tsx

@@ -136,14 +136,15 @@ const AddDetails = () => {
             filter={filter}
           />
         </div>
-        <div className="md:my-10 py-3 bg-[#F0F3F5] rounded-lg md:p-10  max-w-[699px] w-full max-md:w-[90%] flex items-center justify-center">
+        <div className="md:my-10 py-3 bg-[#F0F3F5] rounded-lg md:p-10  max-w-[699px] w-full max-md:w-[90%] flex items-center justify-center " >
           <Image
             src={pageAdData.final_url? pageAdData.final_url : pageAdData.image_url} 
             height={310}
             width={335}
             alt={"ad Image"}
-            className="w-full h-auto rounded-lg"
+            className="w-full h-auto rounded-lg bg-transparent"
             unoptimized
+            id='containerRef'
           />
         </div>
       </section>

src/domains/external/components/common/desktop-ad-preview-navigation.tsx

@@ -71,31 +71,44 @@ export const DesktopAdPreviewNavigation: React.FC<
         (type === "community" && !isPublished))) ||
     (type === "community" && !isPublished);
 
+
   const downloadImage = async (format: "png" | "jpg") => {
+    setIsDownloading(true);
     try {
       const element = document.getElementById("containerRef");
+      // console.log("Element found:", element);
+
       if (element) {
-        html2canvas(element, { useCORS: true, allowTaint: true })
-          .then((canvas) => {
-            const link = document.createElement("a");
-            link.download = `${imageName}.${format}`;
-            link.href = canvas.toDataURL(`image/${format}`);
-            link.click();
-          })
-          .catch((error) => {
-            console.error("Error generating canvas:", error);
-            toast.error("Failed to generate image for download");
-          });
+        const canvas = await html2canvas(element, {
+          useCORS: true,
+          allowTaint: true,
+          logging: true,
+        });
+
+        // console.log("Canvas created:", canvas);
+
+        const link = document.createElement("a");
+        const fileName = `${imageName}.${format}`;
+        link.download = fileName;
+        link.href = canvas.toDataURL(`image/${format}`);
+        // console.log("Data URL created:", link.href.substring(0, 50) + "...");
+
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+
+      } else {
+        // console.error("Element with ID 'containerRef' not found");
+        toast.error("Could not find the ad content to download");
       }
     } catch (error) {
-      console.error("Error downloading image:", error);
+      console.error("Error in downloadImage:", error);
       toast.error("Failed to download image");
     } finally {
       setIsDownloading(false);
       setIsExportDropdownOpen(false);
     }
   };
-
   React.useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -250,7 +263,7 @@ export const DesktopAdPreviewNavigation: React.FC<
         </button>
 
         <div className="flex gap-4">
-          {(showSaveButton || queryType == "community") && (
+          {(showSaveButton || queryType !== "community") && (
             <div className="relative" ref={saveDropdownRef}>
               <button
                 onClick={() => setIsSaveDropdownOpen(!isSaveDropdownOpen)}
@@ -294,7 +307,7 @@ export const DesktopAdPreviewNavigation: React.FC<
             </div>
           )}
 
-          {type === "image-form" && status === "completed" && (
+          {status === "completed" && (
             <ShareModal
               adUrl={`https://genz.ad/stand-alone/${imageId}`}
               imageUrl={generatedImageUrl}
@@ -309,8 +322,7 @@ export const DesktopAdPreviewNavigation: React.FC<
             </ShareModal>
           )}
 
-          {(type === "demo" ||
-            (type === "image-form" && status === "completed")) && (
+          {queryType !== "community" && (
             <div className="relative" ref={exportDropdownRef}>
               <button
                 disabled={isDownloading || isLoading}
@@ -332,7 +344,7 @@ export const DesktopAdPreviewNavigation: React.FC<
                 >
                   <div className="py-1">
                     <button
-                      // onClick={() => downloadImage("png")}
+                      // onClick={() => console.log("Download as PNG")}
                       onClick={() => downloadImage("png")}
                       disabled={isDownloading || isLoading}
                       className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"