UPDATES: ambassador DAO components and configuration

- Refactored the ambassador DAO components for improved readability and consistency.
- Updated the Next.js configuration to streamline server external packages and image remote patterns.
- Enhanced the user interface by adjusting styles and structure in various components.
- Removed unnecessary console logs and improved error handling in API requests.
- Added new onboarding options for users without roles in the AuthButton component.

These changes enhance the overall functionality and user experience of the ambassador DAO.

Author: tofmat

app/(home)/ambassador-dao/onboard/page.tsx

@@ -336,7 +336,6 @@ const TalentForm = () => {
       },
       {
         onSuccess: () => {
-          console.log("success");
           if (isEditProfilePage) {
             return;
           } else {

app/(home)/ambassador-dao/page.tsx

@@ -5,97 +5,107 @@ import { Suspense } from "react";
 import Team1 from "@/public/ambassador-dao-images/Avalanche-team1.png";
 import Team1Logo from "@/public/ambassador-dao-images/team1.svg";
 
-import React from "react";
+import React, { useState } from "react";
 
 import MainContent from "@/components/ambassador-dao/dashboard/MainContent";
 import { useFetchUserDataQuery } from "@/services/ambassador-dao/requests/auth";
 import FullScreenLoader from "@/components/ambassador-dao/full-screen-loader";
 import { AmbassadorCard } from "@/components/ambassador-dao/dashboard/SideContent";
+import { AuthModal } from "@/components/ambassador-dao/sections/auth-modal";
 
 const WelcomeSection = ({ user }: { user: any }) => {
   return (
-    <div className="relative bg-welcome overflow-hidden backdrop-blur-[200px] h-full max-h-[340px] sm:max-h-[256px] py-16">
-      <div className="max-w-7xl mx-auto my-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row sm:justify-between sm:items-center">
-        <div className="relative z-10">
+    <div className='relative bg-welcome overflow-hidden backdrop-blur-[200px] h-full max-h-[340px] sm:max-h-[256px] py-16'>
+      <div className='max-w-7xl mx-auto my-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row sm:justify-between sm:items-center'>
+        <div className='relative z-10'>
           {user && (
             <>
-              <h1 className="text-2xl sm:text-4xl font-normal text-[var(--white-text-color)] mb-2">
+              <h1 className='text-2xl sm:text-4xl font-normal text-[var(--white-text-color)] mb-2'>
                 Welcome back, {user?.first_name}
               </h1>
-              <p className="text-md sm:text-xl text-[var(--secondary-text-color)]">
+              <p className='text-md sm:text-xl text-[var(--secondary-text-color)]'>
                 We're so glad to have you on Team 1
               </p>
             </>
           )}
 
           {!user && (
             <>
-              <h1 className="text-2xl sm:text-4xl text-[var(--white-text-color)] mb-2">
+              <h1 className='text-2xl sm:text-4xl text-[var(--white-text-color)] mb-2'>
                 Welcome to Team 1
               </h1>
-              <p className="text-md sm:text-xl text-[var(--secondary-text-color)]">
+              <p className='text-md sm:text-xl text-[var(--secondary-text-color)]'>
                 Where talent connects with opportunity in the Avalanche
                 ecosystem
               </p>
             </>
           )}
         </div>
-
-        <div className="flex mt-4 sm:mt-0 items-end justify-end">
-          <div className="hidden dark:block">
-            <Image
-              src={Team1}
-              alt="Avalanche Logo (Dark Mode)"
-              className="h-full object-cover"
-              width={110}
-              height={115}
-            />
+        {!user && (
+          <div className='flex mt-4 sm:mt-0 items-end justify-end'>
+            <div className='hidden dark:block'>
+              <Image
+                src={Team1}
+                alt='Avalanche Logo (Dark Mode)'
+                className='h-full object-cover'
+                width={110}
+                height={115}
+              />
+            </div>
+            <div className='block dark:hidden'>
+              <Image
+                src={Team1Logo}
+                alt='Avalanche Logo (Light Mode)'
+                className='h-full object-cover'
+                width={110}
+                height={115}
+              />
+            </div>
           </div>
-          <div className="block dark:hidden">
-            <Image
-              src={Team1Logo}
-              alt="Avalanche Logo (Light Mode)"
-              className="h-full object-cover"
-              width={110}
-              height={115}
-            />
-          </div>
-        </div>
+        )}
       </div>
     </div>
   );
 };
 
 const AmbasssadorDao = () => {
   const { data: user, isLoading } = useFetchUserDataQuery();
-
+  const [openAuthModal, setOpenAuthModal] = useState(false);
   if (isLoading) {
     return <FullScreenLoader />;
   }
 
   return (
-    <div className="bg-[#fff] dark:bg-[#000] text-[var(--white-text-color)] min-h-screen">
+    <div className='bg-[#fff] dark:bg-[#000] text-[var(--white-text-color)] min-h-screen'>
       <WelcomeSection user={user} />
-      <div className="max-w-[1220px] bg-[var(--drop-shadow)] mx-auto px-8 py-8 rounded-xl grid grid-cols-1 md:grid-cols-2 gap-4 -mt-8  shadow-sm backdrop-blur-xs border-[1px] border-[#FFFFFF66] dark:border-none">
-        {user?.role !== "AMBASSADOR" && (
-          <AmbassadorCard
-            title="Become a Member"
-            description="Reach 70,000+  talent from one single dashboard"
-            link="/"
-          />
-        )}
-        {user?.role !== "AMBASSADOR" && (
-          <AmbassadorCard
-            title="Become a Client"
-            description="Post projects and hire top talent for your business needs"
-            link="/"
-          />
-        )}
-      </div>
+      {!user && (
+        <div className='max-w-[1220px] bg-[var(--drop-shadow)] mx-auto px-8 py-8 rounded-xl grid grid-cols-1 md:grid-cols-2 gap-4 -mt-8  shadow-sm backdrop-blur-xs border-[1px] border-[#FFFFFF66] dark:border-none'>
+          {user?.role !== "AMBASSADOR" && (
+            <AmbassadorCard
+              title='Become a Member'
+              description='Reach 70,000+  talent from one single dashboard'
+              onClick={() => setOpenAuthModal(true)}
+            />
+          )}
+          {user?.role !== "AMBASSADOR" && (
+            <AmbassadorCard
+              title='Become a Client'
+              description='Post projects and hire top talent for your business needs'
+              onClick={() => setOpenAuthModal(true)}
+            />
+          )}
+        </div>
+      )}
 
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 xl:px-8 py-12">
+      <main className='max-w-7xl mx-auto px-4 sm:px-6 xl:px-8 py-12'>
         <Suspense fallback={<div>Loading...</div>}>
           <MainContent user={user} />
+
+          <AuthModal
+            isOpen={openAuthModal}
+            onClose={() => setOpenAuthModal(false)}
+            stopRedirection={false}
+          />
         </Suspense>
       </main>
     </div>

components/ambassador-dao/How-it-works.tsx

@@ -83,4 +83,4 @@ const [openAuthModal, setOpenAuthModal] = useState(false);
   );
 };
 
-export default HowItWorks;
+export default HowItWorks;

components/ambassador-dao/auth-button.tsx

@@ -9,7 +9,13 @@ import {
 } from "@/services/ambassador-dao/requests/auth";
 import Image from "next/image";
 import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover";
-import { ListIcon, LogOut, User2Icon } from "lucide-react";
+import {
+  ListIcon,
+  LogOut,
+  User2Icon,
+  UserCheck2,
+  UserIcon,
+} from "lucide-react";
 import { useRouter } from "next/navigation";
 
 export const AuthButton = () => {
@@ -37,6 +43,21 @@ export const AuthButton = () => {
                 </PopoverTrigger>
                 <PopoverContent className='w-auto p-0' align='start'>
                   <div className='w-42  bg-[#fafafa] dark:bg-[#09090B] rounded-md flex flex-col space-y-1'>
+                    {(!user.role || !user.first_name) && (
+                      <>
+                        <div
+                          onClick={() => router.push("/ambassador-dao/onboard")}
+                          className='px-3 py-2 flex items-center gap-2 cursor-pointer hover:bg-opacity-50 dark:bg-[#000]'
+                        >
+                          <UserCheck2
+                            color='var(--white-text-color)'
+                            size={16}
+                          />
+                          Onboard
+                        </div>
+                        <hr />
+                      </>
+                    )}
                     {user.role === "SPONSOR" ? (
                       <>
                         <div

components/ambassador-dao/dashboard/BountiesSection.tsx

@@ -54,7 +54,6 @@ const BountiesSection = ({
     onResetFilters;
   };
 
-  console.log(filters)
   return (
     <section className="border border-[var(--default-border-color)] rounded-md py-10 px-6 mb-12">
       <div className="flex justify-between">

components/ambassador-dao/dashboard/SideContent.tsx

@@ -10,10 +10,10 @@ import HowItWorks from "../How-it-works";
 
 const UserProfileCard = ({ userData }: any) => {
   return (
-    <div className="shadow-sm border border-[var(--default-border-color)] rounded-lg p-4 mb-6">
-      <div className="flex flex-wrap items-center">
-        <div className="w-10 h-10 rounded-full bg-gray-600 mr-3 flex items-center justify-center">
-          <span className="text-white">
+    <div className='shadow-sm border border-[var(--default-border-color)] rounded-lg p-4 mb-6'>
+      <div className='flex flex-wrap items-center'>
+        <div className='w-10 h-10 rounded-full bg-gray-600 mr-3 flex items-center justify-center'>
+          <span className='text-white'>
             {userData?.first_name && userData?.last_name
               ? `${userData.first_name.charAt(0)}${userData.last_name.charAt(
                   0
@@ -23,17 +23,17 @@ const UserProfileCard = ({ userData }: any) => {
               : ""}
           </span>
         </div>
-        <div className="text-sm">
-          <h3 className="font-medium text-wrap">
+        <div className='text-sm'>
+          <h3 className='font-medium text-wrap'>
             {userData?.first_name} {userData?.last_name}{" "}
             {!userData?.first_name && userData?.email}
           </h3>
-          <p className="text-xs text-[var(--secondary-text-color)]">
+          <p className='text-xs text-[var(--secondary-text-color)]'>
             {userData?.username ? `@${userData?.username}` : ""}
           </p>
         </div>
-        <div className="ml-auto">
-          <span className="px-3 py-1 rounded-full text-sm">
+        <div className='ml-auto'>
+          <span className='px-3 py-1 rounded-full text-sm'>
             {userData?.job_title}
           </span>
         </div>
@@ -45,15 +45,15 @@ const UserProfileCard = ({ userData }: any) => {
 export const AmbassadorCard = ({
   title,
   description,
-  link,
+  onClick,
 }: {
   title: string;
   description: string;
-  link: string;
+  onClick: () => void;
 }) => {
-  const openInNewTab = (url: string) => {
-    window.open(url, "_blank", "noopener,noreferrer");
-  };
+  //   const openInNewTab = (url: string) => {
+  //     window.open(url, "_blank", "noopener,noreferrer");
+  //   };
 
   return (
     <>
@@ -62,18 +62,18 @@ export const AmbassadorCard = ({
         className={`max-w-[592px] ${
           title === "Become a Member" ? "red-card-bg" : "blue-card-bg"
         } rounded-lg p-4 mb-4 relative overflow-hidden cursor-pointer border border-[var(--default-border-color)]`}
-        onClick={() => openInNewTab(link)}
+        onClick={onClick}
       >
-        <div className="relative z-10 text-[var(--white-text-color)]">
-          <h3 className="font-medium mb-1 text-lg md:text-xl text-[var(--white-text-color)]">
+        <div className='relative z-10 text-[var(--white-text-color)]'>
+          <h3 className='font-medium mb-1 text-lg md:text-xl text-[var(--white-text-color)]'>
             {title}
           </h3>
-          <p className="text-sm opacity-80 text-[var(--secondary-text-color)]">
+          <p className='text-sm opacity-80 text-[var(--secondary-text-color)]'>
             {description}
           </p>
         </div>
-        <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
-          <ArrowUpRight color="white" className="h-6 w-6" />
+        <div className='absolute right-3 top-1/2 transform -translate-y-1/2'>
+          <ArrowUpRight color='white' className='h-6 w-6' />
         </div>
       </div>
     </>
@@ -84,14 +84,14 @@ const LeaderboardCard = () => {
   return (
     <Link href={"/ambassador-dao/leaderboard"}>
       {" "}
-      <div className="rounded-md trophy mb-4 relative overflow-hidden cursor-pointer dark:border-none border border-[var(--default-border-color)] h-[72px]">
-        <div className="relative z-10 text-[var(--white-text-color)] p-4">
-          <h3 className="font-medium text-lg md:text-xl mb-1 text-[var(--white-text-color)]">
+      <div className='rounded-md trophy mb-4 relative overflow-hidden cursor-pointer dark:border-none border border-[var(--default-border-color)] h-[72px]'>
+        <div className='relative z-10 text-[var(--white-text-color)] p-4'>
+          <h3 className='font-medium text-lg md:text-xl mb-1 text-[var(--white-text-color)]'>
             Leaderboard
           </h3>
         </div>
-        <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
-          <ArrowUpRight color="var(--white-text-color)" className="h-6 w-6" />
+        <div className='absolute right-3 top-1/2 transform -translate-y-1/2'>
+          <ArrowUpRight color='var(--white-text-color)' className='h-6 w-6' />
         </div>
       </div>
     </Link>
@@ -122,33 +122,34 @@ const SideContent = ({ user }: { user: any }) => {
 
     if (position === 1) {
       return (
-        <Image src={GoldReward} alt="First Place" width={46} height={46} />
+        <Image src={GoldReward} alt='First Place' width={46} height={46} />
       );
     } else if (position === 2) {
       return (
-        <Image src={SilverReward} alt="Second Place" width={46} height={46} />
+        <Image src={SilverReward} alt='Second Place' width={46} height={46} />
       );
     } else if (position === 3) {
       return (
-        <Image src={BronzeReward} alt="Third Place" width={46} height={46} />
+        <Image src={BronzeReward} alt='Third Place' width={46} height={46} />
       );
     } else {
       return (
         <div
-          className="px-6 py-1 flex items-center justify-center rounded-full bg-[#2F2F33] w-fit"
+          className='px-6 py-1 flex items-center justify-center rounded-full bg-[#2F2F33] w-fit'
           style={{
             background: "linear-gradient(90deg, #E84142 0%, #822425 100%)",
           }}
         >
-          <span className="text-[var(--white-text-color)]">{position}</span>
+          <span className='text-[var(--white-text-color)]'>{position}</span>
         </div>
       );
     }
   };
 
   return (
-    <div className="lg:col-span-1">
-      <HowItWorks steps={steps} />
+    <div className='lg:col-span-1'>
+      {!user ? <HowItWorks steps={steps} /> : null}
+
       <LeaderboardCard />
       <>
         {leaderboardData?.data?.slice(0, 3)?.map((user, index) => (
@@ -166,27 +167,27 @@ const SideContent = ({ user }: { user: any }) => {
                   : "",
             }}
           >
-            <div className="col-span-1">{getRankIcon(index, currentPage)}</div>
+            <div className='col-span-1'>{getRankIcon(index, currentPage)}</div>
 
-            <div className="col-span-9 flex items-center gap-4">
+            <div className='col-span-9 flex items-center gap-4'>
               <Image
                 src={DefaultAvatar}
                 alt={user.nickname}
                 width={32}
                 height={32}
-                className="hidden md:block rounded-full"
+                className='hidden md:block rounded-full'
               />
               <span
-                className="text-[var(--white-text-color)] text-xs sm:!text-base capitalize truncate max-w-[150px]"
+                className='text-[var(--white-text-color)] text-xs sm:!text-base capitalize truncate max-w-[150px]'
                 title={user.nickname}
               >
                 {user.nickname}
               </span>
             </div>
 
-            <div className="col-span-2 flex justify-end">
+            <div className='col-span-2 flex justify-end'>
               {user.tag === "ambassador" && (
-                <span className="px-3 py-1 text-xs flex justify-center items-center dark:bg-[#444444] bg-[#e4e4e7] text-[var(--white-text-color)] rounded-md capitalize">
+                <span className='px-3 py-1 text-xs flex justify-center items-center dark:bg-[#444444] bg-[#e4e4e7] text-[var(--white-text-color)] rounded-md capitalize'>
                   {user.tag}
                 </span>
               )}