Rebase voyager badges multi req

components/login/user-button/UserButton.tsx

@@ -11,13 +11,27 @@ import { signOut, useSession } from 'next-auth/react';
 import Image from 'next/image';
 import Link from 'next/link';
 import SignOutComponent from '../sign-out/SignOut';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { CircleUserRound } from 'lucide-react';
 import { Separator } from '@radix-ui/react-dropdown-menu';
 export function UserButton() {
   const { data: session, status } = useSession() ?? {};
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const isAuthenticated = status === 'authenticated';
+
+  // Dividir el correo por @ para evitar cortes no deseados
+  const formattedEmail = useMemo(() => {
+    const email = session?.user?.email;
+    if (!email) return null;
+
+    const atIndex = email.indexOf('@');
+    if (atIndex === -1) return { localPart: email, domain: null };
+
+    return {
+      localPart: email.substring(0, atIndex),
+      domain: email.substring(atIndex), // Incluye el @
+    };
+  }, [session?.user?.email]);
   const handleSignOut = (): void => {
     // Clean up any stored redirect URLs before logout
     if (typeof window !== "undefined") {
@@ -66,9 +80,18 @@ export function UserButton() {
             shadow-lg p-1 rounded-md w-48'
             >
               <div className="px-2 py-1.5">
-                <p className="text-sm break-words">
-                  {session.user.email || 'No email available'}
-                </p>
+                {formattedEmail ? (
+                  <div className="text-sm">
+                    <div className="break-words">{formattedEmail.localPart}</div>
+                    {formattedEmail.domain && (
+                      <div className="break-words">{formattedEmail.domain}</div>
+                    )}
+                  </div>
+                ) : (
+                  <p className="text-sm break-words">
+                    {session.user.email || 'No email available'}
+                  </p>
+                )}
 
                 <p className="text-sm break-words mt-1">
                   {session.user.name || 'No name available'}

components/profile/reward-board/component/reward-board.tsx

@@ -18,44 +18,44 @@ export default async function RewardBoard() {
   const badges = await getAllBadges();
 
   const academyBadges = badges.filter((badge) => badge.category == "academy")?.sort((a, b) => a.id.localeCompare(b.id));
-  // COMMENTED OUT: Hackathon badges feature disabled
-  // const hackathonBadges: Badge[] = badges.filter((badge) => badge.category == "hackathon")?.sort((a, b) => a.id.localeCompare(b.id));
+  const hackathonBadges: Badge[] = badges.filter((badge) => badge.category == "hackathon")?.sort((a, b) => a.id.localeCompare(b.id));
   // COMMENTED OUT: Points feature disabled
   // const totalPoints = userBadges.reduce((acc, userBadge) => acc + userBadge.points, 0);
-  // const hackathonBadgesUnlocked = hackathonBadges.map((badge) => {
-  //   const userBadge = userBadges.find((userBadge) => userBadge.badge_id == badge.id);
-  //   return {
-  //     ...badge,
-  //     is_unlocked: !!userBadge,
-  //     requirements: userBadge?.requirements || badge.requirements,
-  //   };
-  // });
+  const hackathonBadgesUnlocked = hackathonBadges.map((badge) => {
+  const userBadge = userBadges.find((userBadge) => userBadge.badge_id == badge.id);
+  const allRequirementsCompleted = userBadge?.requirements && userBadge.requirements.length > 0 &&
+     userBadge.requirements.every((requirement) => requirement.unlocked === true);
+   return {
+     ...badge,
+     is_unlocked: !!allRequirementsCompleted,
+     requirements: userBadge?.requirements || badge.requirements,
+   };
+  });
 
   const academyBadgesUnlocked = academyBadges.map((badge) => {
     const userBadge = userBadges.find((userBadge) => userBadge.badge_id == badge.id);
-    // Only consider badge unlocked if status is approved (not pending)
-    const isUnlocked = userBadge?.status === BadgeAwardStatus.approved;
+    const allRequirementsCompleted = userBadge?.requirements && userBadge.requirements.length > 0 &&
+      userBadge.requirements.every((requirement) => requirement.unlocked === true);
     return {
       ...badge,
-      is_unlocked: isUnlocked,
+      is_unlocked: !!allRequirementsCompleted,
       requirements: userBadge?.requirements || badge.requirements,
     };
 
   }).sort(element=>element.is_unlocked ? -1 : 1);
-  // COMMENTED OUT: Hackathon badges feature disabled
-  // const rewards = hackathonBadgesUnlocked.map((reward) => (
-  //   <RewardCard
-  //     key={reward.name}
-  //     icon={reward.image_path}
-  //     name={reward.name}
-  //     description={reward.description}
-  //     category={reward.category}
-  //     is_unlocked={reward.is_unlocked}
-  //     image={reward.image_path}
-  //     requirements={reward.requirements}
-  //     id={reward.id}
-  //   />
-  // ));
+   const rewards = hackathonBadgesUnlocked.map((reward) => (
+     <RewardCard
+       key={reward.name}
+       icon={reward.image_path}
+       name={reward.name}
+       description={reward.description}
+       category={reward.category}
+       is_unlocked={reward.is_unlocked}
+       image={reward.image_path}
+       requirements={reward.requirements}
+       id={reward.id}
+     />
+   ));
 
   const academyRewards = academyBadgesUnlocked.map((reward) => (
 

components/quizzes/components/BadgeNotification.tsx

@@ -20,22 +20,22 @@ export const BadgeNotification = ({
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const [badges, setBadges] = useState<BadgeData[]>([]);
-
+  const badgeDefaultImage = "/wolfie/wolfie-hack.png";
   useEffect(() => {
     if (isCompleted && session) {
       awardBadge()
         .then((badge) => {
-      
+
           if (
             badge.result &&
             Array.isArray(badge.result.badges) &&
             badge.result.badges.length > 0
           ) {
-        
+
             setBadges(badge.result.badges);
             setShowFireworks(true);
             setIsModalOpen(true);
-   
+
           }
         })
         .catch((error) => {
@@ -109,7 +109,7 @@ export const BadgeNotification = ({
                   {badges.map((badge, index) => (
                     <div key={index} className="flex flex-col items-center px-2 py-2 gap-4 w-[250px]">
                       <Image
-                        src={badge.image_path}
+                        src={badge.image_path && badge.image_path != '' ? badge.image_path : badgeDefaultImage as string}
                         alt={badge.name}
                         width={80}
                         height={80}
@@ -136,7 +136,7 @@ export const BadgeNotification = ({
             )}
           </div>
         }
-        className="z-50 inline-block!  w-auto! max-w-[75vw]! border border-red-500"      
+        className="z-50 inline-block!  w-auto! max-w-[75vw]! border border-red-500"
       />
     </div>
   );

components/showcase/assign-badge.tsx

@@ -26,19 +26,17 @@ export const AssignBadge = ({
   const [isLoading, setIsLoading] = useState(false);
   useEffect(() => {
     const fetchBadges = async () => {
-      // COMMENTED OUT: Hackathon badges feature disabled
-      // const response = await axios.get("/api/badge/get-all");
-      // const filteredBadges = response.data.filter(
-      //   (badge: Badge) => badge.category == "hackathon"
-      // );
-      // setOptionsWithLabel(
-      //   filteredBadges.map((option: Badge) => ({
-      //     label: option.name,
-      //     value: option.id,
-      //   }))
-      // );
-      // Return empty array since hackathon badges are disabled
-      setOptionsWithLabel([]);
+
+       const response = await axios.get("/api/badge/get-all");
+       const filteredBadges = response.data.filter(
+         (badge: Badge) => badge.category == "hackathon"
+       );
+       setOptionsWithLabel(
+         filteredBadges.map((option: Badge) => ({
+           label: option.name,
+           value: option.id,
+         }))
+       );
     };
     fetchBadges();
   }, []);