feat: Submit a team from popup to page

app/layout.tsx

@@ -17,7 +17,7 @@ const AuthBox = dynamic(() => import('@/components/core/login/auth-box'), { ssr:
 const Toaster = dynamic(() => import('../components/core/toaster'), { ssr: false });
 const BroadCastChannel = dynamic(() => import('@/components/core/login/broadcast-channel'), { ssr: false });
 const MemberRegisterDialog = dynamic(() => import('@/components/core/register/member-register-dialog'), { ssr: false });
-const TeamRegisterDialog = dynamic(() => import('@/components/page/team-form-info/team-register-dialog'), { ssr: false });
+// const TeamRegisterDialog = dynamic(() => import('@/components/page/team-form-info/team-register-dialog'), { ssr: false });
 const CookieChecker = dynamic(() => import('@/components/core/login/cookie-checker'), { ssr: false });
 const PostHogPageview = dynamic(() => import('@/providers/analytics-provider').then((d) => d.PostHogPageview), { ssr: false });
 const RatingContainer = dynamic(() => import('@/components/core/office-hours-rating/rating-container'), { ssr: false });
@@ -69,7 +69,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <BroadCastChannel />
           <RatingContainer userInfo={userInfo} isLoggedIn={isLoggedIn} authToken={authToken} />
           <MemberRegisterDialog />
-          <TeamRegisterDialog />
+          {/* <TeamRegisterDialog /> */}
           <CookieChecker isLoggedIn={isLoggedIn} />
         </StyledJsxRegistry>
       </body>

app/teams/add/page.module.css

@@ -0,0 +1,106 @@
+.teamReg {
+    background: white;
+    border-radius: 8px;
+    border: none;
+    height: 87svh;
+    max-height: 1000px;
+    margin: auto;
+    position: relative;
+    width: 100%;
+}
+
+.loginPrompt {
+    background: white;
+    border-radius: 8px;
+    border: none;
+    margin: auto;
+    position: relative;
+    width: 756px;
+    margin-top: 130px;
+}
+
+
+.teamReg__close {
+    display: none;
+}
+
+.teamReg__cn {
+    position: relative;
+    display: flex;
+    border-radius: 8px;
+    border: none;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.teamReg__cn__mobile {
+    display: flex;
+}
+
+.teamReg__cn__desktopinfo {
+    width: 100%;
+    height: fit-content;
+    display: none;
+    background-image: linear-gradient(rgba(30, 58, 138, 1), rgba(29, 78, 216, 1));
+}
+
+.teamReg__cn__bannermobile {
+    display: block;
+    height: 109px;
+    overflow: hidden;
+    background-image: linear-gradient(rgba(30, 58, 138, 1), rgba(29, 78, 216, 1));
+}
+
+.teamReg__cn__desktopinfo__steps {
+    padding: 24px 0;
+}
+
+.teamReg__cn__content {
+    height: 100%;
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+}
+
+@media (min-width: 1024px) {
+    .teamReg{
+        top: 20px;
+        width: 956px;
+        height: 81svh;
+    }
+    .teamReg__cn {
+        flex-direction: row;
+        overflow-y: hidden;
+    }
+
+    .teamReg__cn__mobile {
+        display: none;
+    }
+
+    .teamReg__cn__bannermobile {
+        display: none;
+    }
+
+    .teamReg__cn__desktopinfo {
+        display: block;
+        width: 300px;
+    }
+
+    .teamReg__cn__desktopinfo {
+        height: 100%;
+    }
+
+    .teamReg__cn__content {
+        /* // overflow-y: auto; */
+    }
+
+    .teamReg__close {
+        display: block;
+        cursor: pointer;
+        position: absolute;
+        top: 16px;
+        right: 16px;
+    }
+}

app/teams/add/page.tsx

@@ -0,0 +1,52 @@
+import RegsiterFormLoader from '@/components/core/register/register-form-loader';
+import StepsIndicatorDesktop from '@/components/core/register/steps-indicator-desktop';
+import StepsIndicatorMobile from '@/components/core/register/steps-indicator-mobile';
+import TeamRegisterForm from '@/components/page/team-form-info/team-register-form';
+import TeamRegisterInfo from '@/components/page/team-form-info/team-register-info';
+import styles from './page.module.css';
+import LoginInfo from '@/components/page/team-form-info/team-login-info';
+import { getCookiesFromHeaders } from '@/utils/next-helpers';
+
+export default function AddTeam(props: any) {
+  const steps = ['basic', 'project details', 'social', 'success'];
+
+  const { userInfo } = getPageData();
+
+  const showLoginInfo = !userInfo;
+
+
+  return (
+    <>
+      {!showLoginInfo && (
+        <div className={styles.teamReg}>
+          <div className={styles.teamReg__cn}>
+            <div className={styles.teamReg__cn__mobile}>
+              <StepsIndicatorMobile steps={steps} />
+            </div>
+            <aside className={styles.teamReg__cn__desktopinfo}>
+              <TeamRegisterInfo />
+              <StepsIndicatorDesktop skip={['success']} steps={steps} />
+            </aside>
+            <section className={styles.teamReg__cn__content}>
+              <RegsiterFormLoader />
+              <TeamRegisterForm />
+            </section>
+          </div>
+        </div>
+      )}
+      {showLoginInfo && (
+        <div className={styles.loginPrompt}>
+          <LoginInfo />
+        </div>
+      )}
+    </>
+  );
+}
+
+function getPageData() {
+  const { userInfo } = getCookiesFromHeaders();
+
+  return {
+    userInfo
+  };
+}

components/core/navbar/mobile-nav-drawer.tsx

@@ -1,4 +1,4 @@
-import { EVENTS, HELPER_MENU_OPTIONS, NAV_OPTIONS, TOAST_MESSAGES } from '@/utils/constants';
+import { EVENTS, HELPER_MENU_OPTIONS, NAV_OPTIONS, PAGE_ROUTES, TOAST_MESSAGES } from '@/utils/constants';
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
@@ -29,6 +29,7 @@ export default function MobileNavDrawer(props: Readonly<IMobileNavDrawer>) {
 
   const analytics = useCommonAnalytics();
   const drawerRef = useRef(null);
+  const router = useRouter();
 
   useClickedOutside({ callback: () => onNavMenuClick(), ref: drawerRef });
 
@@ -60,7 +61,8 @@ export default function MobileNavDrawer(props: Readonly<IMobileNavDrawer>) {
 
   const handleSubmitTeam = () => {
     analytics.onSubmitATeamBtnClicked();
-    document.dispatchEvent(new CustomEvent(EVENTS.OPEN_TEAM_REGISTER_DIALOG));
+    router.push(PAGE_ROUTES.ADD_TEAM);
+    // document.dispatchEvent(new CustomEvent(EVENTS.OPEN_TEAM_REGISTER_DIALOG));
     onNavMenuClick();
   };
 

components/core/navbar/nav-bar.tsx

@@ -4,11 +4,11 @@ import useClickedOutside from '@/hooks/useClickedOutside';
 import { getFollowUps } from '@/services/office-hours.service';
 import { IUserInfo } from '@/types/shared.types';
 import { getAnalyticsUserInfo, triggerLoader } from '@/utils/common.utils';
-import { EVENTS, HELPER_MENU_OPTIONS, NAV_OPTIONS } from '@/utils/constants';
+import { EVENTS, HELPER_MENU_OPTIONS, NAV_OPTIONS, PAGE_ROUTES } from '@/utils/constants';
 import cookies from 'js-cookie';
 import Image from 'next/image';
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { SyntheticEvent, useEffect, useRef, useState } from 'react';
 import AllNotifications from './all-notifications';
 import JoinNetwork from './join-network';
@@ -29,6 +29,7 @@ export default function Navbar(props: Readonly<INavbar>) {
   const isLoggedIn = props?.isLoggedIn;
   const analytics = useCommonAnalytics();
   const authToken = props?.authToken;
+  const router = useRouter();
 
   const helpMenuRef = useRef<HTMLDivElement>(null);
   const notificationRef = useRef<HTMLButtonElement>(null);
@@ -96,7 +97,8 @@ export default function Navbar(props: Readonly<INavbar>) {
 
   const handleSubmitTeam = () => {
     analytics.onSubmitATeamBtnClicked();
-    document.dispatchEvent(new CustomEvent(EVENTS.OPEN_TEAM_REGISTER_DIALOG));
+    // document.dispatchEvent(new CustomEvent(EVENTS.OPEN_TEAM_REGISTER_DIALOG));
+    router.push(PAGE_ROUTES.ADD_TEAM);
     setIsHelperMenuOpen(false);
   };
 

components/page/settings/menu.tsx

@@ -6,7 +6,7 @@ import { getAnalyticsUserInfo, triggerLoader } from '@/utils/common.utils';
 import { useRouter } from 'next/navigation';
 
 interface SettingsMenuProps {
-  activeItem?: 'profile' | 'privacy' | 'manage people' | 'manage teams';
+  activeItem?: 'profile' | 'privacy' | 'manage members' | 'manage teams';
   isAdmin?:boolean
   isTeamLead?: boolean
   userInfo: IUserInfo;
@@ -22,7 +22,7 @@ function SettingsMenu({ activeItem, isAdmin = false, isTeamLead = false, userInf
   const teamAdminSettings = [{ name: 'manage teams', url: '/settings/teams', icon: '/icons/team.svg', activeIcon: '/icons/teams-blue.svg' }];
 
   const appAdminSettings = [
-    { name: 'manage people', url: '/settings/members', icon: '/icons/profile.svg', activeIcon: '/icons/profile-blue.svg' },
+    { name: 'manage members', url: '/settings/members', icon: '/icons/profile.svg', activeIcon: '/icons/profile-blue.svg' },
   ];
 
   const onItemClicked = (url: string, name: string) => {

components/page/team-form-info/team-login-info.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+export default function LoginInfo() {
+  const router = useRouter();
+  const onCancel = () => {
+    router.push('/');
+  };
+
+  const onLogin = async () => {
+    router.push(`${window.location.pathname}${window.location.search}#login`, { scroll: false });
+  };
+
+  return (
+    <>
+      <div className="login-info">
+        <div className="login-info__title">Login to submit a team</div>
+        <div className="login-info__subtitle">You need to log in to submit a team.Please login to proceed.</div>
+        <div className='login-info__actions'>
+            <button onClick={onCancel} className="login-info__actions__cancel" type="button">
+              Cancel
+            </button>
+            <button className="login-info__actions__login" onClick={onLogin}>Proceed to Login</button>
+        </div>
+      </div>
+      <style jsx>
+        {`
+          .login-info {
+            display: flex;
+            width: 100%;
+            flex-direction: column;
+            padding: 32px;
+            gap: 20px;
+          }
+
+          .login-info__title {
+            font-size: 24px;
+            font-weight: 700;
+            line-height: 32px;
+          }
+
+          .login-info__subtitle {
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+          }
+
+          .login-info__actions{
+            display:flex;
+            justify-content: flex-end;
+            gap:10px;
+          }
+
+          .login-info__actions__cancel {
+            padding: 10px 24px;
+            border: 1px solid #cbd5e1;
+            border-radius: 8px;
+            background: white;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+          }
+
+          .login-info__actions__login {
+            padding: 10px 24px;
+            border: 1px solid #cbd5e1;
+            border-radius: 8px;
+            background: #156ff7;
+            cursor: pointer;
+            color: white;
+            font-size: 14px;
+            font-weight: 500;
+          }
+        `}
+      </style>
+    </>
+  );
+}