@vendure-platform/create 0.5.0 → 1.0.0-major.202609091053.0.0

package/dist/assets/storefront/src/components/commerce/shopping-list-toggle.tsx

@@ -1,16 +1,12 @@
 'use client';
 
-import { useState, useTransition } from 'react';
-import { Heart, Check, Plus } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from '@/components/ui/popover';
+import type { ShoppingListInfo } from '@/app/[locale]/account/shopping-lists/actions';
 import { addToShoppingList, removeFromShoppingList } from '@/app/[locale]/account/shopping-lists/actions';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Check, Heart, Plus } from 'lucide-react';
+import { useState, useTransition } from 'react';
 import { toast } from 'sonner';
-import type { ShoppingListInfo } from '@/app/[locale]/account/shopping-lists/actions';
 
 interface ShoppingListToggleProps {
     variantId: string;
@@ -18,14 +14,19 @@ interface ShoppingListToggleProps {
     initialIsInAnyList: boolean;
 }
 
-export function ShoppingListToggle({ variantId, shoppingLists, initialIsInAnyList }: ShoppingListToggleProps) {
+export function ShoppingListToggle({
+    variantId,
+    shoppingLists,
+    initialIsInAnyList,
+}: ShoppingListToggleProps) {
     const [lists, setLists] = useState(shoppingLists);
     const [isPending, startTransition] = useTransition();
     const [open, setOpen] = useState(false);
     // Track adds when we have no list data (0 lists → server creates default)
     const [addedToDefault, setAddedToDefault] = useState(false);
 
-    const isInAnyList = addedToDefault || lists.some((list) => list.items.some((item) => item.variantId === variantId));
+    const isInAnyList =
+        addedToDefault || lists.some((list) => list.items.some((item) => item.variantId === variantId));
 
     const handleAdd = (listId: string, listName: string) => {
         startTransition(async () => {
@@ -112,12 +113,7 @@ export function ShoppingListToggle({ variantId, shoppingLists, initialIsInAnyLis
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    size="icon"
-                    disabled={isPending}
-                    aria-label="Add to shopping list"
-                >
+                <Button variant="outline" size="icon" disabled={isPending} aria-label="Add to shopping list">
                     <Heart
                         className={`h-5 w-5 transition-colors ${
                             isInAnyList ? 'fill-red-500 text-red-500' : 'text-muted-foreground'
@@ -137,9 +133,7 @@ export function ShoppingListToggle({ variantId, shoppingLists, initialIsInAnyLis
                             type="button"
                             disabled={isPending}
                             onClick={() =>
-                                isInList
-                                    ? handleRemove(list.id, list.name)
-                                    : handleAdd(list.id, list.name)
+                                isInList ? handleRemove(list.id, list.name) : handleAdd(list.id, list.name)
                             }
                             className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
                         >

package/dist/assets/storefront/src/components/commerce/sort-dropdown.tsx

@@ -1,16 +1,9 @@
 'use client';
 
-
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select';
-import {useSearchParams} from "next/navigation";
-import {usePathname, useRouter} from "@/i18n/navigation";
-import {useTranslations} from 'next-intl';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { usePathname, useRouter } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
 
 export function SortDropdown() {
     const t = useTranslations('Sort');
@@ -19,10 +12,10 @@ export function SortDropdown() {
     const router = useRouter();
 
     const sortOptions = [
-        {value: 'name-asc', label: t('nameAsc')},
-        {value: 'name-desc', label: t('nameDesc')},
-        {value: 'price-asc', label: t('priceAsc')},
-        {value: 'price-desc', label: t('priceDesc')},
+        { value: 'name-asc', label: t('nameAsc') },
+        { value: 'name-desc', label: t('nameDesc') },
+        { value: 'price-asc', label: t('priceAsc') },
+        { value: 'price-desc', label: t('priceDesc') },
     ];
 
     const currentSort = searchParams.get('sort') || 'name-asc';
@@ -37,7 +30,7 @@ export function SortDropdown() {
     return (
         <Select value={currentSort} onValueChange={handleSortChange}>
             <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder={t('placeholder')}/>
+                <SelectValue placeholder={t('placeholder')} />
             </SelectTrigger>
             <SelectContent>
                 {sortOptions.map((option) => (

package/dist/assets/storefront/src/components/commerce/store-credit-summary.tsx

@@ -2,44 +2,42 @@
 
 import { Price } from '@/components/commerce/price';
 import { maskCode } from '@/lib/format';
+import type { StoreCredit } from '@/lib/vendure/queries';
 import { Wallet } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import type { StoreCredit } from '@/lib/vendure/queries';
 
 interface StoreCreditSummaryProps {
-  credits: StoreCredit[];
-  totalAfterCredit: number | null | undefined;
-  currencyCode: string;
+    credits: StoreCredit[];
+    totalAfterCredit: number | null | undefined;
+    currencyCode: string;
 }
 
 export function StoreCreditSummary({ credits, totalAfterCredit, currencyCode }: StoreCreditSummaryProps) {
-  const t = useTranslations('Cart');
-  if (credits.length === 0) return null;
+    const t = useTranslations('Cart');
+    if (credits.length === 0) return null;
 
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center gap-2">
-        <Wallet className="h-5 w-5 text-muted-foreground" />
-        <h4 className="font-medium">{t('storeCreditsApplied')}</h4>
-      </div>
-      <div className="text-sm space-y-1">
-        {credits.map((credit) => (
-          <div key={credit.code} className="flex justify-between">
-            <span className="text-muted-foreground">
-              {maskCode(credit.code)}
-            </span>
-            <span className="text-green-600">
-              -<Price value={credit.amountDeducted} currencyCode={currencyCode} />
-            </span>
-          </div>
-        ))}
-        {totalAfterCredit != null && (
-          <div className="flex justify-between font-medium pt-1">
-            <span>{t('amountToPay')}</span>
-            <Price value={totalAfterCredit} currencyCode={currencyCode} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
+    return (
+        <div className="space-y-3">
+            <div className="flex items-center gap-2">
+                <Wallet className="h-5 w-5 text-muted-foreground" />
+                <h4 className="font-medium">{t('storeCreditsApplied')}</h4>
+            </div>
+            <div className="text-sm space-y-1">
+                {credits.map((credit) => (
+                    <div key={credit.code} className="flex justify-between">
+                        <span className="text-muted-foreground">{maskCode(credit.code)}</span>
+                        <span className="text-green-600">
+                            -<Price value={credit.amountDeducted} currencyCode={currencyCode} />
+                        </span>
+                    </div>
+                ))}
+                {totalAfterCredit != null && (
+                    <div className="flex justify-between font-medium pt-1">
+                        <span>{t('amountToPay')}</span>
+                        <Price value={totalAfterCredit} currencyCode={currencyCode} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
 }

package/dist/assets/storefront/src/components/commerce/subcollection-tiles.tsx

@@ -1,8 +1,8 @@
+import { Link } from '@/i18n/navigation';
+import type { GetCollectionProductsQuery } from '@/lib/vendure/queries';
+import type { ResultOf } from 'gql.tada';
+import { Layers } from 'lucide-react';
 import Image from 'next/image';
-import {Link} from '@/i18n/navigation';
-import {Layers} from 'lucide-react';
-import type {ResultOf} from 'gql.tada';
-import type {GetCollectionProductsQuery} from '@/lib/vendure/queries';
 
 // Derived from the GetCollectionProductsQuery so the shape stays in sync with
 // the actual GraphQL response. The `children` field is `null | undefined |
@@ -14,7 +14,7 @@ interface SubcollectionTilesProps {
     collections: SubcollectionTile[];
 }
 
-export function SubcollectionTiles({collections}: SubcollectionTilesProps) {
+export function SubcollectionTiles({ collections }: SubcollectionTilesProps) {
     if (!collections.length) return null;
 
     return (
@@ -22,10 +22,7 @@ export function SubcollectionTiles({collections}: SubcollectionTilesProps) {
             <ul className="flex gap-3 overflow-x-auto pb-1 -mx-1 px-1 snap-x">
                 {collections.map((c) => (
                     <li key={c.id} className="snap-start shrink-0">
-                        <Link
-                            href={`/collection/${c.slug}`}
-                            className="group block w-[160px]"
-                        >
+                        <Link href={`/collection/${c.slug}`} className="group block w-[160px]">
                             <div className="relative h-[120px] w-full overflow-hidden rounded-md bg-muted border border-border group-hover:border-primary/40 transition-colors">
                                 {c.featuredAsset?.preview ? (
                                     <Image
@@ -40,11 +37,12 @@ export function SubcollectionTiles({collections}: SubcollectionTilesProps) {
                                         <Layers className="h-8 w-8 text-muted-foreground/40" />
                                     </div>
                                 )}
-                                <div aria-hidden className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+                                <div
+                                    aria-hidden
+                                    className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"
+                                />
                                 <div className="absolute inset-x-0 bottom-0 p-2 text-white">
-                                    <p className="text-xs font-medium line-clamp-2 drop-shadow">
-                                        {c.name}
-                                    </p>
+                                    <p className="text-xs font-medium line-clamp-2 drop-shadow">{c.name}</p>
                                 </div>
                             </div>
                         </Link>

package/dist/assets/storefront/src/components/layout/auth-page-shell.tsx

@@ -1,4 +1,4 @@
-import type {ReactNode} from 'react';
+import type { ReactNode } from 'react';
 
 /**
  * Wraps auth-flow pages (sign-in, register, verify, etc.) in a vertically
@@ -6,7 +6,7 @@ import type {ReactNode} from 'react';
  * `--page-top-offset` CSS variable. The content is centered horizontally
  * inside a max-width-md column.
  */
-export function AuthPageShell({children}: {children: ReactNode}) {
+export function AuthPageShell({ children }: { children: ReactNode }) {
     return (
         <div className="flex min-h-[calc(100vh-var(--page-top-offset))] mt-[var(--page-top-offset)] items-center justify-center px-4 py-8">
             <div className="w-full max-w-md space-y-6">{children}</div>

package/dist/assets/storefront/src/components/layout/draft-mode-indicator.tsx

@@ -1,14 +1,9 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Hammer } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { isDraftModeEnabled } from './draft-mode-action';
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from '@/components/ui/tooltip';
 
 export function DraftModeIndicator() {
     const [active, setActive] = useState(false);

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { usePathname } from '@/i18n/navigation';
 import { Hammer } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { isDraftModeEnabled } from './draft-mode-action';
 
 export function DraftModeLink() {
@@ -20,7 +20,9 @@ export function DraftModeLink() {
     return (
         <a
             href={href}
-            className={`transition-colors inline-flex items-center gap-1.5 ${active ? 'text-amber-500 hover:text-amber-600' : 'hover:text-primary'}`}
+            className={`transition-colors inline-flex items-center gap-1.5 ${
+                active ? 'text-amber-500 hover:text-amber-600' : 'hover:text-primary'
+            }`}
         >
             <Hammer className="h-3.5 w-3.5" />
             {active ? 'Disable Draft Mode' : 'Enable Draft Mode'}

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

@@ -1,17 +1,16 @@
-import {cacheLife} from 'next/cache';
-import {getTranslations, setRequestLocale} from 'next-intl/server';
-import {getTopCollections} from '@/lib/vendure/cached';
-import {getActiveCustomer} from '@/lib/vendure/actions';
-import {getActiveChannelToken} from '@/lib/channel-server';
-import Image from "next/image";
-import NextLink from "next/link";
-import {Link} from "@/i18n/navigation";
+import { getBranding } from '@/config/branding';
+import { Link } from '@/i18n/navigation';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { getActiveCustomer } from '@/lib/vendure/actions';
+import { getTopCollections } from '@/lib/vendure/cached';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { cacheLife } from 'next/cache';
+import Image from 'next/image';
+import NextLink from 'next/link';
 import { DraftModeLink } from './draft-mode-link';
-import {getBranding} from '@/config/branding';
 
-
-async function Copyright({allRightsReserved}: {allRightsReserved: string}) {
-    'use cache'
+async function Copyright({ allRightsReserved }: { allRightsReserved: string }) {
+    'use cache';
     cacheLife('days');
 
     const { footer } = getBranding();
@@ -19,11 +18,11 @@ async function Copyright({allRightsReserved}: {allRightsReserved: string}) {
         <div>
             &copy; {new Date().getFullYear()} {footer.copyright}. {allRightsReserved}
         </div>
-    )
+    );
 }
 
-async function FooterCollections({locale, channelToken}: {locale: string; channelToken?: string}) {
-    'use cache'
+async function FooterCollections({ locale, channelToken }: { locale: string; channelToken?: string }) {
+    'use cache';
     cacheLife('days');
 
     const collections = await getTopCollections(locale, channelToken);
@@ -49,7 +48,7 @@ async function FooterCollections({locale, channelToken}: {locale: string; channe
     );
 }
 
-async function FooterAuthLink({label}: {label: string}) {
+async function FooterAuthLink({ label }: { label: string }) {
     const customer = await getActiveCustomer();
     if (customer) {
         return null;
@@ -63,10 +62,10 @@ async function FooterAuthLink({label}: {label: string}) {
     );
 }
 
-export async function Footer({locale}: {locale: string}) {
+export async function Footer({ locale }: { locale: string }) {
     setRequestLocale(locale);
     const [t, channelToken] = await Promise.all([
-        getTranslations({locale, namespace: 'Footer'}),
+        getTranslations({ locale, namespace: 'Footer' }),
         getActiveChannelToken(),
     ]);
     const { footer, logo, logoInverted } = getBranding();
@@ -86,27 +85,47 @@ export async function Footer({locale}: {locale: string}) {
                         <h4 className="text-sm font-semibold mb-4 text-foreground">{t('account')}</h4>
                         <ul className="space-y-2 text-sm text-muted-foreground">
                             <li>
-                                <Link href="/account/orders" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/account/orders"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('orders')}
                                 </Link>
                             </li>
                             <li>
-                                <Link href="/account/quotes" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/account/quotes"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('quotes')}
                                 </Link>
                             </li>
                             <li>
-                                <Link href="/account/company" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/account/company"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('company')}
                                 </Link>
                             </li>
                             <li>
-                                <Link href="/account/addresses" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/account/addresses"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('addresses')}
                                 </Link>
                             </li>
                             <li>
-                                <Link href="/account/profile" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/account/profile"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('profile')}
                                 </Link>
                             </li>
@@ -118,12 +137,20 @@ export async function Footer({locale}: {locale: string}) {
                         <h4 className="text-sm font-semibold mb-4 text-foreground">{t('customerService')}</h4>
                         <ul className="space-y-2 text-sm text-muted-foreground">
                             <li>
-                                <Link href="/search" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/search"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('browseProducts')}
                                 </Link>
                             </li>
                             <li>
-                                <Link href="/register-company" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/register-company"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('openTradeAccount')}
                                 </Link>
                             </li>
@@ -155,11 +182,26 @@ export async function Footer({locale}: {locale: string}) {
 
                 {/* Bottom bar */}
                 <div className="mt-10 pt-6 border-t border-border flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
-                    <Copyright allRightsReserved={t('allRightsReserved')}/>
+                    <Copyright allRightsReserved={t('allRightsReserved')} />
                     <div className="flex items-center gap-4">
                         <DraftModeLink />
-                        <a href={`${(process.env.VENDURE_SHOP_API_URL ?? 'http://localhost:3500/shop-api').replace(/\/shop-api$/, '')}/dev-mailbox/ui`} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">{t('demoMailbox')}</a>
-                        <Image src={footerLogo.src} alt={footerLogo.alt} width={footerLogo.width} height={footerLogo.height} className="h-4 w-auto invert" />
+                        <a
+                            href={`${(
+                                process.env.VENDURE_SHOP_API_URL ?? 'http://localhost:3500/shop-api'
+                            ).replace(/\/shop-api$/, '')}/dev-mailbox/ui`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="hover:text-primary transition-colors"
+                        >
+                            {t('demoMailbox')}
+                        </a>
+                        <Image
+                            src={footerLogo.src}
+                            alt={footerLogo.alt}
+                            width={footerLogo.width}
+                            height={footerLogo.height}
+                            className="h-4 w-auto invert"
+                        />
                     </div>
                 </div>
             </div>

package/dist/assets/storefront/src/components/layout/navbar/actions.ts

@@ -1,17 +1,14 @@
 'use server';
 
-import {readFragment} from '@/graphql';
-import {client} from '@/lib/vendure/api';
-import {SwitchBusinessUnitMutation} from '@/lib/vendure/mutations';
-import {CompanyBusinessUnitFragment} from '@/lib/vendure/fragments';
-import {setCompanyId, setBusinessUnitId, clearBusinessUnitId} from '@/lib/company-context';
-import {revalidatePath, revalidateTag} from 'next/cache';
+import { readFragment } from '@/graphql';
+import { clearBusinessUnitId, setBusinessUnitId, setCompanyId } from '@/lib/company-context';
+import { client } from '@/lib/vendure/api';
+import { CompanyBusinessUnitFragment } from '@/lib/vendure/fragments';
+import { SwitchBusinessUnitMutation } from '@/lib/vendure/mutations';
+import { revalidatePath, revalidateTag } from 'next/cache';
 
 export async function switchBusinessUnitAction(businessUnitId: string) {
-    const [result, error] = await client.mutate(
-        SwitchBusinessUnitMutation,
-        {businessUnitId},
-    );
+    const [result, error] = await client.mutate(SwitchBusinessUnitMutation, { businessUnitId });
     if (error) throw error;
 
     const account = result.data.switchBusinessUnit;
@@ -20,7 +17,7 @@ export async function switchBusinessUnitAction(businessUnitId: string) {
         await setBusinessUnitId(activeBu.id);
     }
 
-    revalidateTag('active-customer', {expire: 0});
+    revalidateTag('active-customer', { expire: 0 });
     revalidatePath('/', 'layout');
 }
 
@@ -28,6 +25,6 @@ export async function switchCompanyAction(companyId: string) {
     await setCompanyId(companyId);
     await clearBusinessUnitId();
 
-    revalidateTag('active-customer', {expire: 0});
+    revalidateTag('active-customer', { expire: 0 });
     revalidatePath('/', 'layout');
 }

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

@@ -1,15 +1,15 @@
 'use client';
 
-import {Clock, ShoppingCart} from "lucide-react";
-import {Button} from "@/components/ui/button";
-import {Link} from "@/i18n/navigation";
-import {useCartCount} from "@/lib/cart-count-context";
-import {useTranslations} from 'next-intl';
+import { Button } from '@/components/ui/button';
+import { Link } from '@/i18n/navigation';
+import { useCartCount } from '@/lib/cart-count-context';
+import { Clock, ShoppingCart } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 export function CartIcon() {
     const t = useTranslations('Navigation');
     const tCart = useTranslations('Cart');
-    const {count, awaitingApprovalOrderCode} = useCartCount();
+    const { count, awaitingApprovalOrderCode } = useCartCount();
     const display = count > 99 ? '99+' : count;
 
     if (awaitingApprovalOrderCode) {
@@ -17,12 +17,12 @@ export function CartIcon() {
         return (
             <Button variant="ghost" size="icon" asChild className="relative">
                 <Link href="/cart" prefetch={false} aria-label={label} title={label}>
-                    <ShoppingCart className="h-5 w-5 text-muted-foreground"/>
+                    <ShoppingCart className="h-5 w-5 text-muted-foreground" />
                     <span
                         className="absolute -top-1 -right-1 bg-amber-500 text-white rounded-full h-4 w-4 flex items-center justify-center"
                         aria-hidden
                     >
-                        <Clock className="h-3 w-3"/>
+                        <Clock className="h-3 w-3" />
                     </span>
                     <span className="sr-only">{label}</span>
                 </Link>
@@ -33,7 +33,7 @@ export function CartIcon() {
     return (
         <Button variant="ghost" size="icon" asChild className="relative">
             <Link href="/cart" prefetch={false}>
-                <ShoppingCart className="h-5 w-5"/>
+                <ShoppingCart className="h-5 w-5" />
                 {count > 0 && (
                     <span
                         className={`absolute -top-1 -right-1 bg-primary text-primary-foreground text-xs font-bold rounded-full flex items-center justify-center ${

package/dist/assets/storefront/src/components/layout/navbar/channel-picker-wrapper.tsx

@@ -1,6 +1,6 @@
-import {getChannelsConfig} from '@/config/scenario';
-import {getActiveChannelToken} from '@/lib/channel-server';
-import {ChannelPicker} from './channel-picker';
+import { getChannelsConfig } from '@/config/scenario';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { ChannelPicker } from './channel-picker';
 
 export async function ChannelPickerWrapper() {
     const channelsConfig = getChannelsConfig();
@@ -10,10 +10,5 @@ export async function ChannelPickerWrapper() {
     // when channelsConfig is set (checked above), so it can never be undefined here.
     const activeToken = (await getActiveChannelToken())!;
 
-    return (
-        <ChannelPicker
-            channels={channelsConfig.available}
-            activeToken={activeToken}
-        />
-    );
+    return <ChannelPicker channels={channelsConfig.available} activeToken={activeToken} />;
 }

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

@@ -1,26 +1,26 @@
 'use client';
 
-import {useTransition} from 'react';
-import {MapPin} from 'lucide-react';
-import {Button} from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {switchChannel} from '@/lib/actions/switch-channel';
-import type {ChannelOption} from '@/config/scenario';
+import type { ChannelOption } from '@/config/scenario';
+import { switchChannel } from '@/lib/actions/switch-channel';
+import { MapPin } from 'lucide-react';
+import { useTransition } from 'react';
 
 interface ChannelPickerProps {
     channels: ChannelOption[];
     activeToken: string;
 }
 
-export function ChannelPicker({channels, activeToken}: ChannelPickerProps) {
+export function ChannelPicker({ channels, activeToken }: ChannelPickerProps) {
     const [isPending, startTransition] = useTransition();
 
-    const active = channels.find(c => c.token === activeToken) ?? channels[0];
+    const active = channels.find((c) => c.token === activeToken) ?? channels[0];
 
     function handleSwitch(token: string) {
         startTransition(async () => {
@@ -31,7 +31,12 @@ export function ChannelPicker({channels, activeToken}: ChannelPickerProps) {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-9 gap-1 px-2 text-xs font-medium" disabled={isPending}>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-9 gap-1 px-2 text-xs font-medium"
+                    disabled={isPending}
+                >
                     <MapPin className="size-3.5" />
                     {active.countryCode}
                     <span className="sr-only">Switch country/channel</span>

package/dist/assets/storefront/src/components/layout/navbar/currency-picker-wrapper.tsx

@@ -1,7 +1,7 @@
-import {getActiveChannelCached} from '@/lib/vendure/cached';
-import {getActiveCurrencyCode} from '@/lib/currency-server';
-import {getActiveChannelToken} from '@/lib/channel-server';
-import {CurrencyPicker} from './currency-picker';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { getActiveCurrencyCode } from '@/lib/currency-server';
+import { getActiveChannelCached } from '@/lib/vendure/cached';
+import { CurrencyPicker } from './currency-picker';
 
 export async function CurrencyPickerWrapper() {
     const channelToken = await getActiveChannelToken();