diff --git a/apps/console/app/components/SiteHeader/index.tsx b/apps/console/app/components/SiteHeader/index.tsx index 78ebdf7cd2..fa5fbd8a2a 100644 --- a/apps/console/app/components/SiteHeader/index.tsx +++ b/apps/console/app/components/SiteHeader/index.tsx @@ -2,7 +2,7 @@ * @file app/shared/components/SiteHeader/index.tsx */ -import { Form } from '@remix-run/react' +import { Form, SubmitFunction } from '@remix-run/react' import { gatewayFromIpfs } from '@proofzero/utils' import { Avatar } from '@proofzero/design-system/src/atoms/profile/avatar/Avatar' import { Menu, Transition } from '@headlessui/react' @@ -10,33 +10,45 @@ import { Fragment } from 'react' import { ConsoleLogo } from '../SiteMenu' -import classNames from 'classnames' -import SignOutLink from './sign-out-link' +import { Text } from '@proofzero/design-system/src/atoms/text/Text' +import { HiOutlineBookOpen, HiOutlineLogout } from 'react-icons/hi' +import { TbBook, TbBrandGithub, TbUserCog } from 'react-icons/tb' +import { PostHog } from 'posthog-js' // RollupHeader // ----------------------------------------------------------------------------- -const userNavigation = [ - // { name: 'Copy Address', href: '#' }, - { name: 'Sign out', component: SignOutLink }, -] - type RollupHeaderProps = { avatarUrl: string + displayName: string + passportURL: string + submit: SubmitFunction + posthog?: PostHog } export default function RollupHeader(props: RollupHeaderProps) { return ( -
+
+
+ + + + + + + +
+
@@ -54,23 +66,59 @@ export default function RollupHeader(props: RollupHeaderProps) { leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - - {userNavigation.map((item) => ( - - {({ active }) => ( - - )} - - ))} + + +
+
+ + + {props.displayName} + +
+
+ + { + close() + }} + className="p-3 hover:bg-gray-100 w-full text-left flex gap-3 items-center border-t text-gray-700 cursor-pointer" + > + + Documentation + + { + close() + }} + className="p-3 hover:bg-gray-100 w-full text-left flex gap-3 items-center border-t text-gray-700 cursor-pointer" + > + + User Settings + + { + close() + props.posthog?.reset() + props.submit(null, { method: 'post', action: '/signout/' }) + }} + > + + + Sign Out + +
diff --git a/apps/console/app/components/SiteHeader/sign-out-link.tsx b/apps/console/app/components/SiteHeader/sign-out-link.tsx deleted file mode 100644 index 376249ddb1..0000000000 --- a/apps/console/app/components/SiteHeader/sign-out-link.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { useSubmit } from '@remix-run/react' -import { Text } from '@proofzero/design-system/src/atoms/text/Text' - -import { HiOutlineLogout } from 'react-icons/hi' - -import { usePostHog } from 'posthog-js/react' - -export default function SignOut({ className }: { className: string }) { - let submit = useSubmit() - - const posthog = usePostHog() - - return ( - - ) -} diff --git a/apps/console/app/components/SiteMenu/appSelect.tsx b/apps/console/app/components/SiteMenu/appSelect.tsx index 7c28494864..56ba09ddaa 100644 --- a/apps/console/app/components/SiteMenu/appSelect.tsx +++ b/apps/console/app/components/SiteMenu/appSelect.tsx @@ -103,158 +103,156 @@ function AppListbox({ {({ open }) => ( <> -
- - - {selected.clientId === 'none' && ( - - )} + > + + {selected.clientId === 'none' && ( + + )} - {selected.clientId !== 'none' && ( -
- {!selected.icon && ( -
+ {!selected.icon && ( +
- - {selected.name?.substring(0, 1)} - -
- )} - {selected.icon && ( - app icon + > + + {selected.name?.substring(0, 1)} + +
+ )} + {selected.icon && ( + app icon + )} + {selected.groupID && + paymentFailedIdentityGroups?.includes( + IdentityGroupURNSpace.urn( + selected.groupID + ) as IdentityGroupURN + ) && ( +
)} - {selected.groupID && - paymentFailedIdentityGroups?.includes( - IdentityGroupURNSpace.urn( - selected.groupID - ) as IdentityGroupURN - ) && ( -
- )} -
- )} +
+ )} - + {selected.name} + + + + + + + + + {apps.length ? ( + - {selected.name} - - - - - + - - - {apps.length ? ( - - + + All Applications + + + ) : null} - - All Applications - - - ) : null} + {apps?.map((app) => ( + + {({ selected, active }) => ( + <> +
+
+ {!app.icon && ( +
+ + {app.name?.substring(0, 1)} + +
+ )} + {app.icon && ( + app icon + )} - {apps?.map((app) => ( - - {({ selected, active }) => ( - <> -
-
- {!app.icon && ( -
- - {app.name?.substring(0, 1)} - -
- )} - {app.icon && ( - app icon - )} +
+ + {app.name} + -
+ {app.groupName && ( - {app.name} + {app.groupName} - - {app.groupName && ( - - {app.groupName} - - )} -
+ )}
- - {app.appPlan !== ServicePlanType.FREE ? ( - - {app.appPlan} - - ) : null}
- - )} - - ))} - - + + {app.appPlan !== ServicePlanType.FREE ? ( + + {app.appPlan} + + ) : null} +
+ + )} - - -
+ ))} + + + + + )} diff --git a/apps/console/app/components/SiteMenu/index.tsx b/apps/console/app/components/SiteMenu/index.tsx index e6c1139df2..b257808a04 100644 --- a/apps/console/app/components/SiteMenu/index.tsx +++ b/apps/console/app/components/SiteMenu/index.tsx @@ -31,6 +31,8 @@ import { TbWorld, TbRocket, TbUserCog, + TbBrandGithub, + TbBook, } from 'react-icons/tb' import { Popover, Transition } from '@headlessui/react' @@ -53,7 +55,7 @@ export const ConsoleLogo = () => { return ( console logo @@ -96,20 +98,28 @@ export default function SiteMenu(props: RollupMenuProps) { const submit = useSubmit() + const appPlan = props.apps.find((a) => a.clientId === props.selected)?.appPlan + return ( -
+
{/* Desktop menu */}
-
- +
+
+ {props.selected && ( +
+ {AppSubmenu(props.selected, appPlan)} +
+ )} +
{/* Mobile menu */}
+
+ + + + + + + +
{({ close }) => ( <> - + + + {props.selected && ( +
+ {AppSubmenu(props.selected, appPlan, close)} +
+ )} +
a.clientId === props.selected)?.appPlan - - return ( -
- - - {props.selected && ( -
- {AppSubmenu(props.selected, appPlan, close)} -
- )} -
- ) -} - type ExternalLinksProps = { PASSPORT_URL: string docsURL: string @@ -390,7 +405,7 @@ function ExternalLinks({ }: ExternalLinksProps) { return (
-
+
`${menuItemClass(isActive, false)} `} @@ -403,7 +418,7 @@ function ExternalLinks({
-
+
`${menuItemClass(isActive, false)} `} @@ -420,7 +435,7 @@ function ExternalLinks({
-
+
-
- menuItemClass(isActive, false)} - > - -
- - Documentation - - -
- -
) } diff --git a/apps/console/app/root.tsx b/apps/console/app/root.tsx index 0bbdb47713..3b8714a8cd 100644 --- a/apps/console/app/root.tsx +++ b/apps/console/app/root.tsx @@ -303,12 +303,12 @@ export default function App() { }, []) return ( - + - + {GATag && ( <> {/* */} diff --git a/apps/console/app/routes/__layout.tsx b/apps/console/app/routes/__layout.tsx index a942b6baab..4c36396dcc 100644 --- a/apps/console/app/routes/__layout.tsx +++ b/apps/console/app/routes/__layout.tsx @@ -2,7 +2,7 @@ * @file app/routes/dashboard/index.tsx */ -import { Outlet, useOutletContext } from '@remix-run/react' +import { Outlet, useOutletContext, useSubmit } from '@remix-run/react' import SiteMenu from '~/components/SiteMenu' import SiteHeader from '~/components/SiteHeader' @@ -12,6 +12,7 @@ import { Popover } from '@headlessui/react' import type { LoaderData as OutletContextData } from '~/root' import { ToastWithLink } from '@proofzero/design-system/src/atoms/toast/ToastWithLink' import { IdentityGroupURN } from '@proofzero/urns/identity-group' +import { usePostHog } from 'posthog-js/react' // Component // ----------------------------------------------------------------------------- @@ -32,6 +33,9 @@ export default function DashboardIndexPage() { paymentFailedIdentityGroups, } = context + const submit = useSubmit() + const posthog = usePostHog() + return ( {({ open }) => ( @@ -45,7 +49,13 @@ export default function DashboardIndexPage() { paymentFailedIdentityGroups={paymentFailedIdentityGroups} />
- + {hasUnpaidInvoices && ( + {({ open }) => ( -
+
-
- +
+ {hasUnpaidInvoices && ( () + const submit = useSubmit() + return ( {({ open }) => ( @@ -83,7 +85,13 @@ export default function CreateNewApp() { className="flex flex-col flex-initial min-h-full w-full" > - +