From 00a406655b642e26dffc0bb265feb5b1ade10ca0 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@jamesritchie.co.uk>
Date: Fri, 1 Dec 2023 15:13:17 +0000
Subject: [PATCH] Created a new hook for confetti on the subscribed page

---
 .../app/hooks/useNewCustomerSubscribed.ts     | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 apps/webapp/app/hooks/useNewCustomerSubscribed.ts

diff --git a/apps/webapp/app/hooks/useNewCustomerSubscribed.ts b/apps/webapp/app/hooks/useNewCustomerSubscribed.ts
new file mode 100644
index 000000000..2c81d18bf
--- /dev/null
+++ b/apps/webapp/app/hooks/useNewCustomerSubscribed.ts
@@ -0,0 +1,55 @@
+import { useEffect } from "react";
+
+export function useNewCustomerSubscribed() {
+  useEffect(() => {
+    if ("confetti" in window && typeof window.confetti !== "undefined") {
+      const duration = 3.5 * 1000;
+      const animationEnd = Date.now() + duration;
+      const defaults = {
+        startVelocity: 30,
+        spread: 360,
+        ticks: 60,
+        zIndex: 0,
+        colors: [
+          "#E7FF52",
+          "#41FF54",
+          "rgb(245 158 11)",
+          "rgb(22 163 74)",
+          "rgb(37 99 235)",
+          "rgb(67 56 202)",
+          "rgb(219 39 119)",
+          "rgb(225 29 72)",
+          "rgb(217 70 239)",
+        ],
+      };
+      function randomInRange(min: number, max: number): number {
+        return Math.random() * (max - min) + min;
+      }
+      // @ts-ignore
+      const interval = setInterval(function () {
+        const timeLeft = animationEnd - Date.now();
+
+        if (timeLeft <= 0) {
+          return clearInterval(interval);
+        }
+
+        const particleCount = 60 * (timeLeft / duration);
+        // since particles fall down, start a bit higher than random
+        // @ts-ignore
+        window.confetti(
+          Object.assign({}, defaults, {
+            particleCount,
+            origin: { x: randomInRange(0.1, 0.4), y: Math.random() - 0.2 },
+          })
+        );
+        // @ts-ignore
+        window.confetti(
+          Object.assign({}, defaults, {
+            particleCount,
+            origin: { x: randomInRange(0.6, 0.9), y: Math.random() - 0.2 },
+          })
+        );
+      }, 250);
+    }
+  }, []);
+}