From 642772d9fdd9e08046dfee3897efd5b394456d05 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Wed, 12 Jun 2024 22:24:29 +0200
Subject: [PATCH] Update layout.tsx and WarningToast.tsx components

---
 app/layout.tsx              | 17 ++++++++---
 components/WarningToast.tsx | 57 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 56e290e..73b6481 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,12 +4,13 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import Navbar from "@/components/Navbar";
 import React from "react";
-import WarningToast from "@/components/WarningToast";
+import { InfoToastWithButton, WarningToast } from "@/components/WarningToast";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "proxmox VE Helper-Scripts | Scripts for Streamlining Your Homelab with Proxmox VE",
+  title:
+    "proxmox VE Helper-Scripts | Scripts for Streamlining Your Homelab with Proxmox VE",
   generator: "Next.js",
   applicationName: "Proxmox VE Helper-Scripts",
   referrer: "origin-when-cross-origin",
@@ -25,8 +26,7 @@ export const metadata = {
   authors: [{ name: "tteck" }, { name: "Bram" }],
   creator: "tteck, Bram Suurd",
   publisher: "tteck, Bram Suurd",
-  description:
-    "Scripts for Streamlining Your Homelab with Proxmox VE",
+  description: "Scripts for Streamlining Your Homelab with Proxmox VE",
   favicon: "/app/favicon.ico",
   formatDetection: {
     email: false,
@@ -81,6 +81,15 @@ export default function RootLayout({
                   timeoutDuration={1000}
                   message="Starting from July 2024, the scripts in the repository will require Proxmox Virtual Environment 8.1 or newer."
                   amountOfVisits={2}
+                  toastButtonMessage=""
+                />
+                <InfoToastWithButton
+                  toastName="toast.feedback"
+                  toastDuration={7500}
+                  timeoutDuration={12500}
+                  message="Feel like the site is missing something? feel free to give feedback! it helps us improve the site."
+                  amountOfVisits={1}
+                  toastButtonMessage="Give Feedback 🌟"
                 />
               </div>
             </div>
diff --git a/components/WarningToast.tsx b/components/WarningToast.tsx
index 0e76eff..65c9d55 100644
--- a/components/WarningToast.tsx
+++ b/components/WarningToast.tsx
@@ -1,6 +1,8 @@
 "use client";
 import { useEffect, useRef, useCallback } from "react";
 import { toast } from "sonner";
+import { Button } from "./ui/button";
+import Link from "next/link";
 
 interface WarningToastProps {
   toastName: string;
@@ -8,9 +10,10 @@ interface WarningToastProps {
   toastDuration: number;
   message: string;
   amountOfVisits: number;
+  toastButtonMessage: string;
 }
 
-export default function WarningToast({
+export function WarningToast({
   toastName,
   timeoutDuration,
   toastDuration,
@@ -44,3 +47,55 @@ export default function WarningToast({
 
   return null;
 }
+
+export function InfoToastWithButton({
+  toastName,
+  timeoutDuration,
+  toastDuration,
+  message,
+  amountOfVisits,
+  toastButtonMessage
+}: WarningToastProps) {
+  const toastShown = useRef(false);
+
+  const showWarningToast = useCallback(() => {
+    toast.info(
+            <div className="flex flex-col gap-3">
+              <p className="lg">
+                {message}
+              </p>
+              <div>
+                <Button className="text-white">
+                  <Link
+                    href="https://insigh.to/b/proxmox-ve-helper-scripts"
+                    data-umami-event="Give Feedback"
+                    target="_blank"
+                  >
+                    {toastButtonMessage}
+                  </Link>
+                </Button>
+              </div>
+            </div>,
+            { duration: toastDuration },
+          );
+  }, [message, toastDuration, toastButtonMessage]);
+
+  useEffect(() => {
+    if (toastShown.current) return;
+    toastShown.current = true;
+
+    const count = localStorage.getItem(toastName);
+    if (count === null) {
+      localStorage.setItem(toastName, "1");
+      setTimeout(showWarningToast, timeoutDuration);
+    } else {
+      const visitCount = parseInt(count, 10);
+      if (visitCount < amountOfVisits) {
+        localStorage.setItem(toastName, (visitCount + 1).toString());
+        setTimeout(showWarningToast, timeoutDuration);
+      }
+    }
+  }, [toastName, timeoutDuration, amountOfVisits, showWarningToast]);
+
+  return null;
+}