Merge branch 'development' into add-in-progress-computation

packages/sogrim-app/src/components/Banner/BannerCards/DegreeMainStatus.tsx

@@ -13,13 +13,15 @@ import { useStore } from "../../../hooks/useStore";
 import { observer } from "mobx-react-lite";
 import useUpdateUserSettings from "../../../hooks/apiHooks/useUpdateUserSettings";
 import { useAuth } from "../../../hooks/useAuth";
+import Confetti from "react-confetti";
 
 const DegreeMainStatusComp: React.FC = () => {
   const {
     dataStore: {
       userDetails,
       userSettings,
       updateComputeInProgressInUserSettings,
+      isDegreeComplete,
     },
   } = useStore();
 
@@ -56,14 +58,22 @@ const DegreeMainStatusComp: React.FC = () => {
     if (userSettings) {
       setComputeInProgress(userSettings.compute_in_progress);
     }
+
+    if (isDegreeComplete()) {
+      setConfetti(true);
+      setConfettiRecycle(true);
+      setTimeout(() => {
+        setConfettiRecycle(false);
+      }, 3000);
+    }
   }, [
+    error,
+    isDegreeComplete,
+    isError,
     pointsDone,
     userDetails,
-    userDetails?.degree_status?.course_statuses,
+    userDetails?.degree_status.course_statuses,
     userSettings,
-    userSettings?.compute_in_progress,
-    isError,
-    error,
   ]);
 
   const progress =