@vendure-platform/create 0.5.0 → 0.5.2

package/dist/assets/storefront/src/components/layout/navbar/navbar-collections.tsx

@@ -1,32 +1,32 @@
-import {useTranslations} from 'next-intl';
-import {getTopCollections} from '@/lib/vendure/cached';
-import {getActiveChannelToken} from '@/lib/channel-server';
-import {getRouteLocale} from '@/i18n/server';
+import { NavbarLink } from '@/components/layout/navbar/navbar-link';
 import {
     NavigationMenu,
-    NavigationMenuList,
-    NavigationMenuItem,
-    NavigationMenuTrigger,
     NavigationMenuContent,
+    NavigationMenuItem,
     NavigationMenuLink,
+    NavigationMenuList,
+    NavigationMenuTrigger,
 } from '@/components/ui/navigation-menu';
-import {NavbarLink} from '@/components/layout/navbar/navbar-link';
-import {Link} from '@/i18n/navigation';
-import {cn} from '@/lib/utils';
-import {ResultOf} from '@/graphql';
-import {GetTopCollectionsQuery} from '@/lib/vendure/queries';
+import { ResultOf } from '@/graphql';
+import { Link } from '@/i18n/navigation';
+import { getRouteLocale } from '@/i18n/server';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { cn } from '@/lib/utils';
+import { getTopCollections } from '@/lib/vendure/cached';
+import { GetTopCollectionsQuery } from '@/lib/vendure/queries';
+import { useTranslations } from 'next-intl';
 
 type Collection = ResultOf<typeof GetTopCollectionsQuery>['collections']['items'][number];
 
 const MAX_VISIBLE_GRANDCHILDREN = 5;
 
-function MegaMenuContent({collection}: { collection: Collection }) {
+function MegaMenuContent({ collection }: { collection: Collection }) {
     const t = useTranslations('Navigation');
     const children = collection.children ?? [];
 
     // Group children by whether they have grandchildren
-    const categoriesWithSubs = children.filter(c => c.children && c.children.length > 0);
-    const simpleCategories = children.filter(c => !c.children || c.children.length === 0);
+    const categoriesWithSubs = children.filter((c) => c.children && c.children.length > 0);
+    const simpleCategories = children.filter((c) => !c.children || c.children.length === 0);
 
     return (
         <NavigationMenuContent>
@@ -37,16 +37,16 @@ function MegaMenuContent({collection}: { collection: Collection }) {
                         href={`/collection/${collection.slug}`}
                         prefetch={false}
                         className={cn(
-                            "block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors",
-                            "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-                            "col-span-full border-b pb-3 mb-1"
+                            'block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors',
+                            'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+                            'col-span-full border-b pb-3 mb-1',
                         )}
                     >
                         <div className="text-sm font-medium leading-none">
-                            {t('viewAllCollection', {name: collection.name})}
+                            {t('viewAllCollection', { name: collection.name })}
                         </div>
                         <p className="text-muted-foreground line-clamp-2 text-sm leading-snug mt-1">
-                            {t('browseAllCollection', {name: collection.name})}
+                            {t('browseAllCollection', { name: collection.name })}
                         </p>
                     </Link>
                 </NavigationMenuLink>
@@ -85,7 +85,9 @@ function MegaMenuContent({collection}: { collection: Collection }) {
                                             prefetch={false}
                                             className="text-muted-foreground text-sm hover:text-foreground hover:underline"
                                         >
-                                            {t('moreGrandchildren', {count: child.children.length - MAX_VISIBLE_GRANDCHILDREN})}
+                                            {t('moreGrandchildren', {
+                                                count: child.children.length - MAX_VISIBLE_GRANDCHILDREN,
+                                            })}
                                         </Link>
                                     </NavigationMenuLink>
                                 </li>
@@ -96,10 +98,12 @@ function MegaMenuContent({collection}: { collection: Collection }) {
 
                 {/* Simple categories without subcategories */}
                 {simpleCategories.length > 0 && (
-                    <div className={cn(
-                        "space-y-1",
-                        categoriesWithSubs.length > 0 && "col-span-full border-t pt-3 mt-2"
-                    )}>
+                    <div
+                        className={cn(
+                            'space-y-1',
+                            categoriesWithSubs.length > 0 && 'col-span-full border-t pt-3 mt-2',
+                        )}
+                    >
                         <div className="flex flex-wrap gap-2">
                             {simpleCategories.map((child) => (
                                 <NavigationMenuLink key={child.id} asChild>
@@ -107,8 +111,8 @@ function MegaMenuContent({collection}: { collection: Collection }) {
                                         href={`/collection/${child.slug}`}
                                         prefetch={false}
                                         className={cn(
-                                            "inline-block rounded-md px-3 py-1.5 text-sm",
-                                            "bg-muted hover:bg-accent hover:text-accent-foreground transition-colors"
+                                            'inline-block rounded-md px-3 py-1.5 text-sm',
+                                            'bg-muted hover:bg-accent hover:text-accent-foreground transition-colors',
                                         )}
                                     >
                                         {child.name}
@@ -123,7 +127,7 @@ function MegaMenuContent({collection}: { collection: Collection }) {
     );
 }
 
-function CollectionMenuItem({collection, className}: { collection: Collection; className?: string }) {
+function CollectionMenuItem({ collection, className }: { collection: Collection; className?: string }) {
     const hasChildren = collection.children && collection.children.length > 0;
 
     if (hasChildren) {
@@ -139,9 +143,7 @@ function CollectionMenuItem({collection, className}: { collection: Collection; c
 
     return (
         <NavigationMenuItem className={className}>
-            <NavbarLink href={`/collection/${collection.slug}`}>
-                {collection.name}
-            </NavbarLink>
+            <NavbarLink href={`/collection/${collection.slug}`}>{collection.name}</NavbarLink>
         </NavigationMenuItem>
     );
 }
@@ -162,7 +164,7 @@ export async function NavbarCollections() {
     return <NavbarCollectionsView collections={collections} />;
 }
 
-function NavbarCollectionsView({collections}: { collections: Collection[] }) {
+function NavbarCollectionsView({ collections }: { collections: Collection[] }) {
     const t = useTranslations('Navigation');
 
     // Split collections into responsive groups
@@ -180,10 +182,7 @@ function NavbarCollectionsView({collections}: { collections: Collection[] }) {
             <NavigationMenuList>
                 {/* Always visible at lg+ */}
                 {alwaysVisible.map((collection) => (
-                    <CollectionMenuItem
-                        key={collection.id}
-                        collection={collection}
-                    />
+                    <CollectionMenuItem key={collection.id} collection={collection} />
                 ))}
 
                 {/* Visible at xl+, hidden at lg */}
@@ -220,8 +219,8 @@ function NavbarCollectionsView({collections}: { collections: Collection[] }) {
                                                 href={`/collection/${collection.slug}`}
                                                 prefetch={false}
                                                 className={cn(
-                                                    "block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors",
-                                                    "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                                                    'block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors',
+                                                    'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
                                                 )}
                                             >
                                                 {collection.name}
@@ -245,8 +244,8 @@ function NavbarCollectionsView({collections}: { collections: Collection[] }) {
                                                 <Link
                                                     href={`/collection/${collection.slug}`}
                                                     className={cn(
-                                                        "block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors",
-                                                        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                                                        'block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors',
+                                                        'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
                                                     )}
                                                 >
                                                     {collection.name}
@@ -271,8 +270,8 @@ function NavbarCollectionsView({collections}: { collections: Collection[] }) {
                                                 <Link
                                                     href={`/collection/${collection.slug}`}
                                                     className={cn(
-                                                        "block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors",
-                                                        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                                                        'block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors',
+                                                        'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
                                                     )}
                                                 >
                                                     {collection.name}

package/dist/assets/storefront/src/components/layout/navbar/navbar-link.tsx

@@ -1,15 +1,12 @@
 'use client';
 
-import {useSelectedLayoutSegment} from 'next/navigation';
-import {ComponentProps} from 'react';
-import {Link} from '@/i18n/navigation';
-import {
-    NavigationMenuLink,
-    navigationMenuTriggerStyle,
-} from '@/components/ui/navigation-menu';
-import {cn} from '@/lib/utils';
+import { NavigationMenuLink, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu';
+import { Link } from '@/i18n/navigation';
+import { cn } from '@/lib/utils';
+import { useSelectedLayoutSegment } from 'next/navigation';
+import { ComponentProps } from 'react';
 
-export function NavbarLink({href, ...rest}: ComponentProps<typeof Link>) {
+export function NavbarLink({ href, ...rest }: ComponentProps<typeof Link>) {
     const selectedLayoutSegment = useSelectedLayoutSegment();
     const pathname = selectedLayoutSegment ? `/${selectedLayoutSegment}` : '/';
     const isActive = pathname === href;
@@ -25,4 +22,4 @@ export function NavbarLink({href, ...rest}: ComponentProps<typeof Link>) {
             />
         </NavigationMenuLink>
     );
-}
+}

package/dist/assets/storefront/src/components/layout/navbar/navbar-user.tsx

@@ -1,7 +1,7 @@
 import { BusinessUnitSwitcher } from '@/components/commerce/business-unit-switcher';
 import { CompanySwitcher } from '@/components/commerce/company-switcher';
 import { LoginButton } from '@/components/layout/navbar/login-button';
-import { PersonalNavMenuItems, CompanyNavMenuItems } from '@/components/layout/navbar/nav-menu-items';
+import { CompanyNavMenuItems, PersonalNavMenuItems } from '@/components/layout/navbar/nav-menu-items';
 import { Button, buttonVariants } from '@/components/ui/button';
 import {
     DropdownMenu,
@@ -12,6 +12,10 @@ import {
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { readFragment } from '@/graphql';
+import { cn } from '@/lib/utils';
+import { getMyCompanies } from '@/lib/vendure/actions';
+import type { VendureContext } from '@/lib/vendure/api';
+import { client, getVendureContext } from '@/lib/vendure/api';
 import {
     ActiveCustomerFragment,
     CompanyBusinessUnitFragment,
@@ -20,14 +24,10 @@ import {
     CompanyRoleFragment,
     CompanyUserFragment,
 } from '@/lib/vendure/fragments';
-import { client, getVendureContext } from '@/lib/vendure/api';
-import type { VendureContext } from '@/lib/vendure/api';
-import { getMyCompanies } from '@/lib/vendure/actions';
 import { GetActiveCustomerQuery, GetCompanyAccountQuery } from '@/lib/vendure/queries';
-import { cacheLife, cacheTag } from 'next/cache';
-import {getTranslations} from 'next-intl/server';
 import { User } from 'lucide-react';
-import {cn} from '@/lib/utils';
+import { getTranslations } from 'next-intl/server';
+import { cacheLife, cacheTag } from 'next/cache';
 
 async function getNavbarUserData(ctx: VendureContext) {
     'use cache: private';
@@ -40,9 +40,7 @@ async function getNavbarUserData(ctx: VendureContext) {
     ]);
 
     const [custRes, custErr] = customerResult;
-    const customer = custErr
-        ? null
-        : readFragment(ActiveCustomerFragment, custRes.data.activeCustomer);
+    const customer = custErr ? null : readFragment(ActiveCustomerFragment, custRes.data.activeCustomer);
 
     if (!customer) return { customer: null, companyAccount: null };
 
@@ -60,14 +58,16 @@ async function getNavbarUserData(ctx: VendureContext) {
             company,
             companyUser: {
                 ...rawUser,
-                companyRoles: rawUser.companyRoles.map(r => {
+                companyRoles: rawUser.companyRoles.map((r) => {
                     const role = readFragment(CompanyRoleFragment, r);
                     return {
                         ...role,
-                        permissions: role.permissions.map(p => readFragment(CompanyPermissionFragment, p)),
+                        permissions: role.permissions.map((p) => readFragment(CompanyPermissionFragment, p)),
                     };
                 }),
-                businessUnits: rawUser.businessUnits.map(bu => readFragment(CompanyBusinessUnitFragment, bu)),
+                businessUnits: rawUser.businessUnits.map((bu) =>
+                    readFragment(CompanyBusinessUnitFragment, bu),
+                ),
             },
             activeBusinessUnit,
             permissions: [...account.permissions],
@@ -78,10 +78,7 @@ async function getNavbarUserData(ctx: VendureContext) {
 }
 
 export async function NavbarUser() {
-    const [ctx, t] = await Promise.all([
-        getVendureContext(),
-        getTranslations('Navigation'),
-    ]);
+    const [ctx, t] = await Promise.all([getVendureContext(), getTranslations('Navigation')]);
     const [{ customer, companyAccount }, companies] = await Promise.all([
         getNavbarUserData(ctx),
         getMyCompanies(),
@@ -100,9 +97,9 @@ export async function NavbarUser() {
 
     return (
         <DropdownMenu>
-            <DropdownMenuTrigger className={cn(buttonVariants({ variant: "ghost" }))}>
-                    <User className="h-5 w-5" />
-                    {t('greeting', {name: customer.firstName})}
+            <DropdownMenuTrigger className={cn(buttonVariants({ variant: 'ghost' }))}>
+                <User className="h-5 w-5" />
+                {t('greeting', { name: customer.firstName })}
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-56">
                 {companies.length > 1 && companyAccount && (
@@ -134,9 +131,7 @@ export async function NavbarUser() {
                     </>
                 )}
                 <PersonalNavMenuItems />
-                {companyAccount && (
-                    <CompanyNavMenuItems permissions={companyAccount.permissions} />
-                )}
+                {companyAccount && <CompanyNavMenuItems permissions={companyAccount.permissions} />}
                 <DropdownMenuSeparator />
                 <DropdownMenuItem asChild>
                     <LoginButton isLoggedIn={true} />

package/dist/assets/storefront/src/components/layout/navbar/theme-switcher.tsx

@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import {useTheme} from "next-themes";
-import {useEffect, useState} from "react";
-import {Moon, Sun} from "lucide-react";
-import {Button} from "@/components/ui/button";
+import { Button } from '@/components/ui/button';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
 
 export function ThemeSwitcher() {
     const [mounted, setMounted] = useState(false);
-    const {theme, setTheme} = useTheme();
+    const { theme, setTheme } = useTheme();
 
     useEffect(() => {
         // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional SSR hydration pattern
@@ -23,15 +23,15 @@ export function ThemeSwitcher() {
         );
     }
 
-    const isDark = theme === "dark";
+    const isDark = theme === 'dark';
 
     return (
         <Button
             variant="ghost"
             size="icon"
             className="h-9 w-9"
-            onClick={() => setTheme(isDark ? "light" : "dark")}
-            aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+            onClick={() => setTheme(isDark ? 'light' : 'dark')}
+            aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
         >
             {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
         </Button>

package/dist/assets/storefront/src/components/layout/navbar.tsx

@@ -1,35 +1,32 @@
-import Image from "next/image";
-import {Link} from "@/i18n/navigation";
-import {NavbarCart} from '@/components/layout/navbar/navbar-cart';
-import {NavbarUser} from '@/components/layout/navbar/navbar-user';
-import {ThemeSwitcher} from '@/components/layout/navbar/theme-switcher';
-import {LanguagePicker} from '@/components/layout/navbar/language-picker';
-import {ChannelPickerWrapper} from '@/components/layout/navbar/channel-picker-wrapper';
-import {CurrencyPickerWrapper} from '@/components/layout/navbar/currency-picker-wrapper';
-import {SearchInput} from '@/components/layout/search-input';
-import {MobileNav} from '@/components/layout/navbar/mobile-nav';
-import {DraftModeBorderStyle, DraftModeIndicator} from '@/components/layout/draft-mode-indicator';
-import {AwaitingApprovalBanner} from '@/components/providers/awaiting-approval-banner';
-import {getHasCompany} from '@/lib/vendure/actions';
-import {getTranslations} from 'next-intl/server';
-import {Suspense} from "react";
-import {getBranding} from '@/config/branding';
+import { DraftModeBorderStyle, DraftModeIndicator } from '@/components/layout/draft-mode-indicator';
+import { ChannelPickerWrapper } from '@/components/layout/navbar/channel-picker-wrapper';
+import { CurrencyPickerWrapper } from '@/components/layout/navbar/currency-picker-wrapper';
+import { LanguagePicker } from '@/components/layout/navbar/language-picker';
+import { MobileNav } from '@/components/layout/navbar/mobile-nav';
+import { NavbarCart } from '@/components/layout/navbar/navbar-cart';
+import { NavbarUser } from '@/components/layout/navbar/navbar-user';
+import { ThemeSwitcher } from '@/components/layout/navbar/theme-switcher';
+import { SearchInput } from '@/components/layout/search-input';
+import { AwaitingApprovalBanner } from '@/components/providers/awaiting-approval-banner';
+import { getBranding } from '@/config/branding';
+import { Link } from '@/i18n/navigation';
+import { getHasCompany } from '@/lib/vendure/actions';
+import { getTranslations } from 'next-intl/server';
+import Image from 'next/image';
+import { Suspense } from 'react';
 
 // Groups all async navbar children so they stream as a single chunk.
 // Without this, each async component gets its own implicit Suspense
 // boundary, causing staggered rendering and CLS within the fixed header.
 async function AsyncNavbarContent() {
-    const [hasCompany, t] = await Promise.all([
-        getHasCompany(),
-        getTranslations('Navigation'),
-    ]);
+    const [hasCompany, t] = await Promise.all([getHasCompany(), getTranslations('Navigation')]);
     const defaultNavLinks = [
-        {href: '/catalog', label: t('catalog')},
-        {href: '/account/quick-order', label: t('quickOrder')},
-        {href: '/account/orders', label: t('orders')},
-        {href: '/account/quotes', label: t('quotes')},
+        { href: '/catalog', label: t('catalog') },
+        { href: '/account/quick-order', label: t('quickOrder') },
+        { href: '/account/orders', label: t('orders') },
+        { href: '/account/quotes', label: t('quotes') },
     ];
-    const companyNavLink = {href: '/account/company', label: t('company')};
+    const companyNavLink = { href: '/account/company', label: t('company') };
     const branding = getBranding();
     const navLinks = branding.navLinks ?? defaultNavLinks;
     const appendCompany = hasCompany && !branding.hideCompanyNavLink;
@@ -41,7 +38,7 @@ async function AsyncNavbarContent() {
             </div>
             <div className="flex items-center justify-between flex-1 ml-4">
                 <nav className="hidden lg:flex items-center gap-1">
-                    {allLinks.map(({href, label}) => (
+                    {allLinks.map(({ href, label }) => (
                         <Link
                             key={href}
                             href={href}
@@ -54,14 +51,14 @@ async function AsyncNavbarContent() {
                 </nav>
                 <div className="flex items-center gap-2">
                     <div className="hidden lg:flex">
-                        <SearchInput/>
+                        <SearchInput />
                     </div>
                     <ChannelPickerWrapper />
                     <CurrencyPickerWrapper />
                     {!branding.hideLanguagePicker && <LanguagePicker />}
                     <ThemeSwitcher />
-                    <NavbarCart/>
-                    <NavbarUser/>
+                    <NavbarCart />
+                    <NavbarUser />
                     <DraftModeIndicator />
                 </div>
             </div>
@@ -103,8 +100,16 @@ export function Navbar() {
                 <div className="flex items-center h-14">
                     <div className="flex items-center gap-4 flex-shrink-0">
                         <Link href="/" prefetch={false} className="flex-shrink-0 flex items-center gap-3">
-                            <Image src={logo.src} alt={logo.alt} width={logo.width} height={logo.height} className="h-5 w-auto" />
-                            <span className="hidden sm:inline text-sm font-bold text-foreground tracking-tight">{siteName}</span>
+                            <Image
+                                src={logo.src}
+                                alt={logo.alt}
+                                width={logo.width}
+                                height={logo.height}
+                                className="h-5 w-auto"
+                            />
+                            <span className="hidden sm:inline text-sm font-bold text-foreground tracking-tight">
+                                {siteName}
+                            </span>
                         </Link>
                     </div>
                     <Suspense fallback={<AsyncNavbarSkeleton />}>

package/dist/assets/storefront/src/components/layout/search-input.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { useSearchParams } from 'next/navigation';
-import { useTranslations } from 'next-intl';
-import { useRouter } from '@/i18n/navigation';
-import { Search } from 'lucide-react';
+import { InstantSearchDropdown } from '@/components/commerce/instant-search-dropdown';
 import { Input } from '@/components/ui/input';
-import { useSearchBar } from '@/lib/search-bar-context';
 import { KbdShortcut } from '@/components/ui/kbd-shortcut';
-import { InstantSearchDropdown } from '@/components/commerce/instant-search-dropdown';
+import { useRouter } from '@/i18n/navigation';
+import { useSearchBar } from '@/lib/search-bar-context';
+import { Search } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 export function SearchInput() {
     const t = useTranslations('Navigation');
@@ -33,10 +33,13 @@ export function SearchInput() {
         setSearchValue(searchParams.get('q') || '');
     }, [searchParams]);
 
-    const handleSubmit = useCallback((term: string) => {
-        if (!term.trim()) return;
-        router.push(`/search?q=${encodeURIComponent(term.trim())}`);
-    }, [router]);
+    const handleSubmit = useCallback(
+        (term: string) => {
+            if (!term.trim()) return;
+            router.push(`/search?q=${encodeURIComponent(term.trim())}`);
+        },
+        [router],
+    );
 
     const handleFormSubmit = (e: React.FormEvent) => {
         e.preventDefault();
@@ -45,27 +48,27 @@ export function SearchInput() {
 
     return (
         <div className={hasInlineSearch ? 'hidden' : ''}>
-        <InstantSearchDropdown
-            inputRef={inputRef}
-            searchValue={searchValue}
-            onSearchValueChange={setSearchValue}
-            onSubmit={handleSubmit}
-            dropdownClassName="w-[32rem] right-0 left-auto"
-        >
-            <form onSubmit={handleFormSubmit} className="relative">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                <Input
-                    ref={setRef}
-                    type="search"
-                    placeholder={t('searchByNameSkuKeyword')}
-                    className="pl-9 pr-16 w-64"
-                    value={searchValue}
-                    onChange={(e) => setSearchValue(e.target.value)}
-                    autoComplete="off"
-                />
-                <KbdShortcut className="absolute right-3 top-1/2 -translate-y-1/2" />
-            </form>
-        </InstantSearchDropdown>
+            <InstantSearchDropdown
+                inputRef={inputRef}
+                searchValue={searchValue}
+                onSearchValueChange={setSearchValue}
+                onSubmit={handleSubmit}
+                dropdownClassName="w-[32rem] right-0 left-auto"
+            >
+                <form onSubmit={handleFormSubmit} className="relative">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input
+                        ref={setRef}
+                        type="search"
+                        placeholder={t('searchByNameSkuKeyword')}
+                        className="pl-9 pr-16 w-64"
+                        value={searchValue}
+                        onChange={(e) => setSearchValue(e.target.value)}
+                        autoComplete="off"
+                    />
+                    <KbdShortcut className="absolute right-3 top-1/2 -translate-y-1/2" />
+                </form>
+            </InstantSearchDropdown>
         </div>
     );
 }

package/dist/assets/storefront/src/components/providers/awaiting-approval-banner.tsx

@@ -1,10 +1,10 @@
-import {cacheLife, cacheTag} from 'next/cache';
-import {ClipboardCheck, ArrowRight} from 'lucide-react';
-import {getTranslations} from 'next-intl/server';
-import {Link} from '@/i18n/navigation';
-import {client, getVendureContext} from '@/lib/vendure/api';
-import type {VendureContext} from '@/lib/vendure/api';
-import {GetActiveOrderQuery} from '@/lib/vendure/queries';
+import { Link } from '@/i18n/navigation';
+import type { VendureContext } from '@/lib/vendure/api';
+import { client, getVendureContext } from '@/lib/vendure/api';
+import { GetActiveOrderQuery } from '@/lib/vendure/queries';
+import { ArrowRight, ClipboardCheck } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';
+import { cacheLife, cacheTag } from 'next/cache';
 
 async function getAwaitingApprovalOrderCode(ctx: VendureContext): Promise<string | null> {
     'use cache: private';
@@ -37,18 +37,20 @@ export async function AwaitingApprovalBanner() {
                 >
                     <div className="container mx-auto px-4 py-2 flex items-center justify-between gap-4 flex-wrap">
                         <div className="flex items-center gap-3 min-w-0">
-                            <ClipboardCheck className="h-5 w-5 flex-shrink-0 text-amber-600 dark:text-amber-400"/>
+                            <ClipboardCheck className="h-5 w-5 flex-shrink-0 text-amber-600 dark:text-amber-400" />
                             <p className="text-sm">
                                 <span className="font-semibold">{t('orderPendingApproval')}:</span>{' '}
                                 <code className="font-mono font-semibold px-1.5 py-0.5 rounded bg-amber-500/20">
                                     {code}
                                 </code>{' '}
-                                <span className="text-muted-foreground">{t('awaitingApprovalBannerBody')}</span>
+                                <span className="text-muted-foreground">
+                                    {t('awaitingApprovalBannerBody')}
+                                </span>
                             </p>
                         </div>
                         <span className="text-sm font-semibold inline-flex items-center gap-1.5 flex-shrink-0 text-amber-600 dark:text-amber-400">
                             {t('viewRequest')}
-                            <ArrowRight className="h-4 w-4"/>
+                            <ArrowRight className="h-4 w-4" />
                         </span>
                     </div>
                 </Link>

package/dist/assets/storefront/src/components/providers/cart-count-server.tsx

@@ -1,31 +1,33 @@
-import {cacheLife, cacheTag} from 'next/cache';
-import {CartStatusSync} from '@/lib/cart-count-context';
-import {client, getVendureContext} from '@/lib/vendure/api';
-import type {VendureContext} from '@/lib/vendure/api';
-import {GetActiveOrderQuery} from '@/lib/vendure/queries';
+import { CartStatusSync } from '@/lib/cart-count-context';
+import type { VendureContext } from '@/lib/vendure/api';
+import { client, getVendureContext } from '@/lib/vendure/api';
+import { GetActiveOrderQuery } from '@/lib/vendure/queries';
+import { cacheLife, cacheTag } from 'next/cache';
 
-async function getCartStatus(ctx: VendureContext): Promise<{count: number; awaitingApprovalOrderCode: string | null}> {
+async function getCartStatus(
+    ctx: VendureContext,
+): Promise<{ count: number; awaitingApprovalOrderCode: string | null }> {
     'use cache: private';
     cacheLife('minutes');
     cacheTag('cart');
     cacheTag('active-order');
 
     const [result, error] = await client.query(GetActiveOrderQuery, undefined, ctx);
-    if (error) return {count: 0, awaitingApprovalOrderCode: null};
+    if (error) return { count: 0, awaitingApprovalOrderCode: null };
 
     const order = result.data.activeOrder;
-    if (!order) return {count: 0, awaitingApprovalOrderCode: null};
+    if (!order) return { count: 0, awaitingApprovalOrderCode: null };
     if (order.state === 'AwaitingApproval') {
-        return {count: 0, awaitingApprovalOrderCode: order.code};
+        return { count: 0, awaitingApprovalOrderCode: order.code };
     }
     // Only count lines when the order is in AddingItems (editable cart).
-    if (order.state !== 'AddingItems') return {count: 0, awaitingApprovalOrderCode: null};
+    if (order.state !== 'AddingItems') return { count: 0, awaitingApprovalOrderCode: null };
 
-    return {count: order.lines.length, awaitingApprovalOrderCode: null};
+    return { count: order.lines.length, awaitingApprovalOrderCode: null };
 }
 
 export async function CartCountServer() {
     const ctx = await getVendureContext();
-    const {count, awaitingApprovalOrderCode} = await getCartStatus(ctx);
+    const { count, awaitingApprovalOrderCode } = await getCartStatus(ctx);
     return <CartStatusSync count={count} awaitingApprovalOrderCode={awaitingApprovalOrderCode} />;
 }