feat: nav dropdown for active customer

components/account/sign-in-form.tsx

@@ -16,6 +16,7 @@ import { LoaderButton } from '@/components/loader-button';
 import { signIn, SignInState } from '@/components/account/actions';
 import { useActionState, useEffect, useTransition } from 'react';
 import { useToast } from '@/ui-components/hooks/use-toast';
+import {useRouter} from "next/navigation";
 
 const formSchema = z.object({
   username: z.string().min(3),
@@ -26,6 +27,7 @@ type FormSchema = z.infer<typeof formSchema>;
 
 export function SignInForm() {
   const { toast } = useToast();
+  const router = useRouter()
   const form = useForm<FormSchema>({
     mode: 'all',
     resolver: zodResolver(formSchema)
@@ -46,6 +48,7 @@ export function SignInForm() {
         title: 'Success',
         description: 'Welcome back!'
       });
+      router.replace('/')
     }
   }, [state]);
 

components/account/user-dropdown.tsx

@@ -0,0 +1,31 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/ui-components/ui/dropdown-menu';
+import { UserIcon } from '@heroicons/react/24/outline';
+import { Active_CustomerFragment } from '@/lib/vendure/types';
+
+export async function UserDropdown({ customer }: { customer: Active_CustomerFragment }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <div className="relative cursor-pointer font-medium text-sm flex h-11 w-auto px-4 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
+          <UserIcon className="h-4 transition-all ease-in-out mr-1" />
+          {customer.firstName} {customer.lastName}
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuItem>Dashboard</DropdownMenuItem>
+        <DropdownMenuItem>Orders</DropdownMenuItem>
+        <DropdownMenuItem>Settings</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Sign out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

components/layout/navbar/index.tsx

@@ -1,16 +1,18 @@
 import CartModal from 'components/cart/modal';
 import LogoSquare from 'components/logo-square';
-import { getMenu } from 'lib/vendure';
+import { getActiveCustomer, getMenu } from 'lib/vendure';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
 import Search, { SearchSkeleton } from './search';
 import OpenSignIn from '@/components/account/open-sign-in';
+import { UserDropdown } from '@/components/account/user-dropdown';
 
 const { SITE_NAME } = process.env;
 
 export async function Navbar() {
   const menu = await getMenu();
+  const activeCustomer = await getActiveCustomer();
 
   return (
     <nav className="relative flex items-center justify-between p-4 lg:px-6">
@@ -53,7 +55,7 @@ export async function Navbar() {
           </Suspense>
         </div>
         <div className="flex justify-end gap-2 md:w-1/3">
-          <OpenSignIn />
+          {activeCustomer ? <UserDropdown customer={activeCustomer} /> : <OpenSignIn />}
           <CartModal />
         </div>
       </div>

lib/vendure/index.ts

@@ -22,6 +22,8 @@ import {
   CollectionsQuery,
   FacetValueFilterInput,
   GetActiveChannelQuery,
+  GetActiveCustomerQuery,
+  GetActiveCustomerQueryVariables,
   GetCollectionFacetValuesQuery,
   GetCollectionFacetValuesQueryVariables,
   GetCollectionProductsQuery,
@@ -49,6 +51,7 @@ import { getActiveOrderQuery } from './queries/active-order';
 import { getActiveChannelQuery } from './queries/active-channel';
 import { getFacetsQuery } from './queries/facets';
 import { authenticate } from '@/lib/vendure/mutations/customer';
+import { getActiveCustomerQuery } from '@/lib/vendure/queries/active-customer';
 
 const endpoint = process.env.VENDURE_ENDPOINT || 'http://localhost:3000/shop-api';
 
@@ -345,6 +348,16 @@ export async function authenticateCustomer(username: string, password: string) {
   return res.body.authenticate;
 }
 
+export async function getActiveCustomer() {
+  const res = await vendureFetch<GetActiveCustomerQuery, GetActiveCustomerQueryVariables>({
+    query: getActiveCustomerQuery,
+    tags: [TAGS.customer],
+    headers: await getAuthHeaders()
+  });
+
+  return res.body.activeCustomer;
+}
+
 export async function getPage(slug: string) {
   // TODO: Implement with custom entity
   return undefined;

lib/vendure/queries/active-customer.ts

@@ -0,0 +1,19 @@
+import gql from 'graphql-tag';
+
+export const activeCustomerFragment = gql`
+  fragment active_customer on Customer {
+    id
+    firstName
+    lastName
+    emailAddress
+  }
+`;
+
+export const getActiveCustomerQuery = gql`
+  query getActiveCustomer {
+    activeCustomer {
+      ...active_customer
+    }
+  }
+  ${activeCustomerFragment}
+`;

package.json

@@ -14,6 +14,7 @@
     "@heroicons/react": "^2.2.0",
     "@hookform/resolvers": "^3.10.0",
     "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-select": "^2.1.4",