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

package/dist/assets/storefront/next-env.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
+import "./.next/types/root-params.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/dist/assets/storefront/next.config.ts

@@ -9,19 +9,21 @@ const withNextIntl = createNextIntlPlugin('./src/i18n/request.ts');
 const nextConfig: NextConfig = {
     // cacheComponents enables PPR + useCache + dynamicIO.
     //
-    // Combining this with next-intl requires rootParams so that 'use cache'
-    // scopes can read the locale via next/root-params (which becomes an
-    // automatic cache key) instead of headers() — which is forbidden in
-    // cache boundaries.
+    // Combining this with next-intl needs next/root-params so that 'use cache'
+    // scopes can read the locale (which becomes an automatic cache key) instead
+    // of headers(), which is forbidden in cache boundaries. next/root-params is
+    // stable as of Next.js 16.3 and needs no config flag; the 16.2-era
+    // `experimental.rootParams` opt-in no longer exists.
     //
-    // Key constraints (as of Next.js 16.2 / next-intl 4.9):
-    //   1. No root layout above [locale] — the rootParams SWC loader walks
-    //      from the app root and stops at the first layout.tsx it finds.
-    //      If that layout isn't inside a dynamic segment, no root params
-    //      are generated and the next/root-params module exports nothing.
-    //   2. next/root-params can only be imported in route files (layout,
-    //      page). Utility modules must use getLocale() or accept locale
-    //      as a parameter.
+    // Key constraints (as of Next.js 16.3 / next-intl 4.9):
+    //   1. No root layout above [locale]. Root params are the dynamic segments
+    //      that sit above the root layout, so a layout.tsx at the app root
+    //      would leave [locale] below it and next/root-params would export
+    //      nothing.
+    //   2. next/root-params works in any Server Component, including shared
+    //      utility modules, but not in Client Components, Server Actions or
+    //      Route Handlers. Those must use getLocale() or take locale as a
+    //      parameter — see src/i18n/server.ts.
     //   3. Turbopack dev has a pre-existing compilation hang on this project
     //      (not i18n-related), so we use --webpack for dev and build.
     //
@@ -30,7 +32,6 @@ const nextConfig: NextConfig = {
     //   https://aurorascharff.no/posts/implementing-nextjs-16-use-cache-with-next-intl-internationalization/
     cacheComponents: true,
     experimental: {
-        rootParams: true,
         optimizePackageImports: ['lucide-react'],
     },
     env: {

package/dist/assets/storefront/package.json

@@ -37,16 +37,17 @@
         "@radix-ui/react-toggle": "^1.1.10",
         "@radix-ui/react-toggle-group": "^1.1.11",
         "@radix-ui/react-tooltip": "^1.2.8",
-        "@vendure-platform/storefront-client": "^0.5.1",
+        "@vendure-platform/storefront-client": "^1.0.0-major.202609091053.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "date-fns": "^4.1.0",
         "embla-carousel-react": "^8.6.0",
         "gql.tada": "^1.9.0",
+        "graphql": "^16.13.2",
         "input-otp": "^1.4.2",
         "lucide-react": "^0.544.0",
-        "next": "^16.0.10",
+        "next": "^16.3.3",
         "next-intl": "^4.8.3",
         "next-themes": "^0.4.6",
         "react": " ^19.2.0",

package/dist/assets/storefront/src/app/[locale]/account/addresses/page.tsx

@@ -1,4 +1,5 @@
 import { ErrorState } from '@/components/shared/error-state';
+import { pinRootLocale } from '@/i18n/server';
 import { client } from '@/lib/vendure/api';
 import { GetAvailableCountriesQuery, GetCustomerAddressesQuery } from '@/lib/vendure/queries';
 import type { Metadata } from 'next';
@@ -11,6 +12,7 @@ export const metadata: Metadata = {
 };
 
 async function AddressesContent() {
+    await pinRootLocale();
     const t = await getTranslations('Account');
     const [addressesRes, countriesRes] = await Promise.all([
         client.query(GetCustomerAddressesQuery, {}),

package/dist/assets/storefront/src/app/[locale]/account/approvals/page.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { ResultOf } from '@/graphql';
 import { Link, redirect } from '@/i18n/navigation';
+import { pinRootLocale } from '@/i18n/server';
 import { formatDateTime } from '@/lib/format';
 import { getActiveCustomer } from '@/lib/vendure/actions';
 import { client } from '@/lib/vendure/api';
@@ -330,6 +331,7 @@ async function ApprovalsContent({ params }: { params: Promise<{ locale: string }
 }
 
 export default async function ApprovalsPage({ params }: { params: Promise<{ locale: string }> }) {
+    await pinRootLocale();
     const t = await getTranslations('Approvals');
     return (
         <div>

package/dist/assets/storefront/src/app/[locale]/account/company/business-units/page.tsx

@@ -1,6 +1,7 @@
 import { ErrorState } from '@/components/shared/error-state';
 import { readFragment } from '@/graphql';
 import { redirect } from '@/i18n/navigation';
+import { pinRootLocale } from '@/i18n/server';
 import { getCompanyAccount } from '@/lib/vendure/actions';
 import { client } from '@/lib/vendure/api';
 import { CompanyBusinessUnitFragment } from '@/lib/vendure/fragments';
@@ -15,6 +16,7 @@ export const metadata: Metadata = {
 };
 
 async function BusinessUnitsContent() {
+    await pinRootLocale();
     const [t, companyAccount] = await Promise.all([
         getTranslations('Company.businessUnits'),
         getCompanyAccount(),

package/dist/assets/storefront/src/app/[locale]/account/company/page.tsx

@@ -1,6 +1,7 @@
 import { CompanyStateBadge } from '@/components/commerce/company-state-badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { redirect } from '@/i18n/navigation';
+import { pinRootLocale } from '@/i18n/server';
 import { getCompanyAccount, getMyCompanies } from '@/lib/vendure/actions';
 import { Clock } from 'lucide-react';
 import type { Metadata } from 'next';
@@ -13,6 +14,7 @@ export const metadata: Metadata = {
 };
 
 async function CompanyProfileContent() {
+    await pinRootLocale();
     const [t, companyAccount] = await Promise.all([getTranslations('Company'), getCompanyAccount()]);
 
     if (!companyAccount) {

package/dist/assets/storefront/src/app/[locale]/account/company/payment-methods/page.tsx

@@ -1,6 +1,7 @@
 import { ErrorState } from '@/components/shared/error-state';
 import { readFragment } from '@/graphql';
 import { redirect } from '@/i18n/navigation';
+import { pinRootLocale } from '@/i18n/server';
 import { getCompanyAccount } from '@/lib/vendure/actions';
 import { client } from '@/lib/vendure/api';
 import { CompanyPaymentMethodFragment } from '@/lib/vendure/fragments';
@@ -15,6 +16,7 @@ export const metadata: Metadata = {
 };
 
 async function CompanyPaymentMethodsContent() {
+    await pinRootLocale();
     const [t, companyAccount] = await Promise.all([
         getTranslations('Company.paymentMethods'),
         getCompanyAccount(),

package/dist/assets/storefront/src/app/[locale]/account/company/roles/page.tsx

@@ -1,5 +1,6 @@
 import { readFragment } from '@/graphql';
 import { redirect } from '@/i18n/navigation';
+import { pinRootLocale } from '@/i18n/server';
 import { getCompanyAccount } from '@/lib/vendure/actions';
 import { client } from '@/lib/vendure/api';
 import { CompanyPermissionFragment, CompanyRoleFragment } from '@/lib/vendure/fragments';
@@ -14,6 +15,7 @@ export const metadata: Metadata = {
 };
 
 async function CompanyRolesContent() {
+    await pinRootLocale();
     const [t, companyAccount] = await Promise.all([getTranslations('Company.roles'), getCompanyAccount()]);
 
     if (!companyAccount) {

package/dist/assets/storefront/src/app/[locale]/account/company/users/page.tsx

@@ -1,5 +1,6 @@
 import { readFragment } from '@/graphql';
 import { redirect } from '@/i18n/navigation';
+import { pinRootLocale } from '@/i18n/server';
 import { getCompanyAccount } from '@/lib/vendure/actions';
 import { client } from '@/lib/vendure/api';
 import {
@@ -23,6 +24,7 @@ export const metadata: Metadata = {
 };
 
 async function CompanyUsersContent() {
+    await pinRootLocale();
     const [t, companyAccount] = await Promise.all([getTranslations('Company.users'), getCompanyAccount()]);
 
     if (!companyAccount) {

package/dist/assets/storefront/src/app/[locale]/account/profile/page.tsx

@@ -1,3 +1,4 @@
+import { pinRootLocale } from '@/i18n/server';
 import { getActiveCustomer } from '@/lib/vendure/actions';
 import type { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
@@ -11,6 +12,7 @@ export const metadata: Metadata = {
 };
 
 async function ProfileContent() {
+    await pinRootLocale();
     const [customer, t] = await Promise.all([getActiveCustomer(), getTranslations('Account')]);
 
     return (

package/dist/assets/storefront/src/app/[locale]/account/quick-order/page.tsx

@@ -1,4 +1,5 @@
 import { redirect } from '@/i18n/navigation';
+import { pinRootLocale } from '@/i18n/server';
 import { getActiveCustomer } from '@/lib/vendure/actions';
 import type { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
@@ -9,6 +10,7 @@ export const metadata: Metadata = {
 };
 
 export default async function QuickOrderPage() {
+    await pinRootLocale();
     const [customer, t] = await Promise.all([getActiveCustomer(), getTranslations('QuickOrder')]);
     if (!customer) {
         return await redirect('/sign-in');

package/dist/assets/storefront/src/app/[locale]/account/quotes/[id]/page.tsx

@@ -8,12 +8,14 @@ import { QuoteVersionComparison } from '@/components/commerce/quote-version-comp
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
+import { hasCapability } from '@/config/capabilities';
 import { Link, redirect } from '@/i18n/navigation';
 import { getActiveChannelToken } from '@/lib/channel-server';
 import { formatDate } from '@/lib/format';
 import { client } from '@/lib/vendure/api';
 import { getActiveChannelCached } from '@/lib/vendure/cached';
-import { GetMyQuoteDetailQuery } from '@/lib/vendure/queries';
+import { getQuoteNegotiationData } from '@/lib/vendure/capability-ui';
+import { GetMyQuoteDetailQuery, type QuoteComment, type QuoteVersion } from '@/lib/vendure/queries';
 import { AlertTriangle, ChevronLeft, Info } from 'lucide-react';
 import type { Metadata } from 'next';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
@@ -105,10 +107,11 @@ async function QuoteDetailContent({
         return await redirect('/account/quotes');
     }
     const version = quote.currentVersion;
+    const negotiation = getQuoteNegotiationData<QuoteComment, QuoteVersion>(quote);
     const isTerminal = TERMINAL_STATUSES.has(quote.status);
-    const v1 = quote.versions.find((v) => v.versionNumber === 1);
+    const v1 = negotiation.versions.find((item) => item.versionNumber === 1);
     const v1LineItems =
-        v1 && quote.versions.length > 1
+        v1 && negotiation.versions.length > 1
             ? v1.lineItems.map((item) => ({ sku: item.sku, unitPrice: item.unitPrice }))
             : undefined;
 
@@ -167,7 +170,7 @@ async function QuoteDetailContent({
                     {version && (
                         <QuoteVersionComparison
                             currentVersion={version}
-                            versions={quote.versions}
+                            versions={negotiation.versions}
                             currencyCode={currencyCode}
                         />
                     )}
@@ -223,8 +226,8 @@ async function QuoteDetailContent({
 
                     {/* Activity Timeline */}
                     <QuoteActivityTimeline
-                        versions={quote.versions}
-                        comments={quote.comments}
+                        versions={negotiation.versions}
+                        comments={negotiation.comments}
                         currentVersionNumber={version?.versionNumber}
                         currencyCode={currencyCode}
                     />
@@ -276,6 +279,7 @@ async function QuoteDetailContent({
                                     quoteId={quote.id}
                                     status={quote.status}
                                     convertedOrderId={quote.convertedOrderId}
+                                    hasQuoteNegotiation={hasCapability('quote.negotiation')}
                                 />
                             </CardContent>
                         </Card>

package/dist/assets/storefront/src/app/[locale]/cart/order-summary.tsx

@@ -18,8 +18,8 @@ type ActiveOrder = {
     shippingWithTax: number;
     total: number;
     totalWithTax: number;
-    storeCreditsApplied: Array<{ code: string; balance: number; amountDeducted: number }>;
-    totalWithTaxAfterStoreCredit: number;
+    storeCreditsApplied?: Array<{ code: string; balance: number; amountDeducted: number }>;
+    totalWithTaxAfterStoreCredit?: number;
     lines: Array<{
         id: string;
         quantity: number;
@@ -50,7 +50,8 @@ type ActiveOrder = {
 
 export async function OrderSummary({ activeOrder }: { activeOrder: ActiveOrder }) {
     const t = await getTranslations('Cart');
-    const hasCreditsApplied = activeOrder.storeCreditsApplied.length > 0;
+    const storeCreditsApplied = activeOrder.storeCreditsApplied ?? [];
+    const hasCreditsApplied = storeCreditsApplied.length > 0;
     const authToken = await getAuthToken();
     const taxTotal = activeOrder.totalWithTax - activeOrder.total;
     const MIN_QTY_FOR_QUOTE = 50;
@@ -133,7 +134,7 @@ export async function OrderSummary({ activeOrder }: { activeOrder: ActiveOrder }
                     </div>
                 )}
                 {hasCreditsApplied &&
-                    activeOrder.storeCreditsApplied.map((credit) => (
+                    storeCreditsApplied.map((credit) => (
                         <div key={credit.code} className="flex justify-between text-sm text-green-600">
                             <span>{t('storeCredit', { code: maskCode(credit.code) })}</span>
                             <span>
@@ -160,7 +161,9 @@ export async function OrderSummary({ activeOrder }: { activeOrder: ActiveOrder }
                                     />
                                 </span>
                                 <Price
-                                    value={activeOrder.totalWithTaxAfterStoreCredit}
+                                    value={
+                                        activeOrder.totalWithTaxAfterStoreCredit ?? activeOrder.totalWithTax
+                                    }
                                     currencyCode={activeOrder.currencyCode}
                                     taxLabel="incl"
                                 />

package/dist/assets/storefront/src/app/[locale]/cart/promotion-code.tsx

@@ -15,8 +15,8 @@ const MAX_STORE_CREDITS_IN_CART = 100;
 type ActiveOrder = {
     id: string;
     couponCodes?: string[] | null;
-    storeCreditsApplied: Array<{ code: string; balance: number; amountDeducted: number }>;
-    totalWithTaxAfterStoreCredit: number;
+    storeCreditsApplied?: Array<{ code: string; balance: number; amountDeducted: number }>;
+    totalWithTaxAfterStoreCredit?: number;
     currencyCode: string;
 };
 
@@ -27,11 +27,14 @@ export async function PromotionCode({ activeOrder }: { activeOrder: ActiveOrder
         client.query(GetMyStoreCreditsQuery, { options: { take: MAX_STORE_CREDITS_IN_CART } }),
     ]);
     const availableCredits = creditsError ? [] : creditsResult.data.myStoreCredits?.items ?? [];
-    const appliedCodes = new Set(activeOrder.storeCreditsApplied.map((c) => c.code));
+    const storeCreditsApplied = activeOrder.storeCreditsApplied ?? [];
+    const appliedCodes = new Set(storeCreditsApplied.map((c) => c.code));
     const activeCustomerId = activeCustomer?.id;
     // Only show credits the current customer can actually redeem (own + unclaimed)
     // Hide when order is already fully covered by applied credits
-    const orderFullyCovered = activeOrder.totalWithTaxAfterStoreCredit <= 0;
+    const orderFullyCovered =
+        activeOrder.totalWithTaxAfterStoreCredit !== undefined &&
+        activeOrder.totalWithTaxAfterStoreCredit <= 0;
     const redeemableCredits = orderFullyCovered
         ? []
         : availableCredits.filter(
@@ -77,9 +80,9 @@ export async function PromotionCode({ activeOrder }: { activeOrder: ActiveOrder
                 )}
 
                 {/* Applied store credits */}
-                {activeOrder.storeCreditsApplied.length > 0 && (
+                {storeCreditsApplied.length > 0 && (
                     <div className="space-y-2">
-                        {activeOrder.storeCreditsApplied.map((credit) => (
+                        {storeCreditsApplied.map((credit) => (
                             <div
                                 key={credit.code}
                                 className="flex items-center justify-between p-3 border rounded-md bg-green-50 dark:bg-green-950/20"

package/dist/assets/storefront/src/app/[locale]/checkout/page.tsx

@@ -1,6 +1,7 @@
 import { readFragment } from '@/graphql';
 import { redirect } from '@/i18n/navigation';
 import { type Locale } from '@/i18n/routing';
+import { pinRootLocale } from '@/i18n/server';
 import { noIndexRobots } from '@/lib/metadata';
 import { getActiveCustomer, getCompanyAccount } from '@/lib/vendure/actions';
 import { client } from '@/lib/vendure/api';
@@ -145,6 +146,7 @@ async function CheckoutContent({ params }: { params: Promise<{ locale: string }>
 }
 
 export default async function CheckoutPage({ params }: { params: Promise<{ locale: string }> }) {
+    await pinRootLocale();
     const t = await getTranslations('Checkout');
     return (
         <div className="container mx-auto px-4 py-8 mt-[var(--page-top-offset)]">

package/dist/assets/storefront/src/app/[locale]/layout.tsx

@@ -15,9 +15,9 @@ import { getMessages, setRequestLocale } from 'next-intl/server';
 import { Geist, Geist_Mono, Inter_Tight, JetBrains_Mono } from 'next/font/google';
 import { Suspense } from 'react';
 import './globals.css';
-// next/root-params provides cache-safe locale resolution. The SWC transform
-// only runs in route files (layout/page), so this import cannot be moved to
-// a utility module. There must be no layout.tsx above [locale] — see next.config.ts.
+// next/root-params provides cache-safe locale resolution. There must be no
+// layout.tsx above [locale], or [locale] stops being a root param — see
+// next.config.ts.
 import { toOgLocale } from '@/i18n/locale-utils';
 import { routing, type Locale } from '@/i18n/routing';
 import { hasLocale } from 'next-intl';

package/dist/assets/storefront/src/app/[locale]/order-confirmation/[code]/order-confirmation.tsx

@@ -2,78 +2,20 @@ import { Price } from '@/components/commerce/price';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
-import { graphql } from '@/graphql';
 import { Link } from '@/i18n/navigation';
 import { maskCode } from '@/lib/format';
 import { client } from '@/lib/vendure/api';
 import { getLatestApprovalForOrder } from '@/lib/vendure/approval-utils';
+import { GetOrderByCodeForConfirmationQuery } from '@/lib/vendure/queries';
 import { CheckCircle2, Clock, MessageSquare, XCircle } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 
-const GetOrderByCodeQuery = graphql(`
-    query GetOrderByCode($code: String!) {
-        orderByCode(code: $code) {
-            id
-            code
-            state
-            subTotal
-            subTotalWithTax
-            shipping
-            shippingWithTax
-            total
-            totalWithTax
-            currencyCode
-            storeCreditsApplied {
-                code
-                balance
-                amountDeducted
-            }
-            totalWithTaxAfterStoreCredit
-            payments {
-                id
-                method
-                amount
-                state
-                metadata
-            }
-            lines {
-                id
-                productVariant {
-                    id
-                    name
-                    product {
-                        id
-                        name
-                        slug
-                        featuredAsset {
-                            id
-                            preview
-                        }
-                    }
-                }
-                quantity
-                linePrice
-                linePriceWithTax
-            }
-            shippingAddress {
-                fullName
-                streetLine1
-                streetLine2
-                city
-                province
-                postalCode
-                country
-            }
-        }
-    }
-`);
-
 export async function OrderConfirmation({ params }: { params: Promise<{ locale: string; code: string }> }) {
     const { code } = await params;
     const t = await getTranslations('OrderConfirmation');
-    const [result, queryError] = await client.query(GetOrderByCodeQuery, { code });
+    const [result, queryError] = await client.query(GetOrderByCodeForConfirmationQuery, { code });
     if (queryError) {
         notFound();
     }

package/dist/assets/storefront/src/components/commerce/product-card-list.tsx

@@ -4,6 +4,7 @@ import { Price } from '@/components/commerce/price';
 import { Badge } from '@/components/ui/badge';
 import { FragmentOf, readFragment } from '@/graphql';
 import { Link } from '@/i18n/navigation';
+import { getSearchHighlights } from '@/lib/vendure/capability-ui';
 import { ProductCardFragment } from '@/lib/vendure/fragments';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import Image from 'next/image';
@@ -19,6 +20,7 @@ interface ProductCardListProps {
 
 export function ProductCardList({ product: productProp, isExpanded, onToggle }: ProductCardListProps) {
     const product = readFragment(ProductCardFragment, productProp);
+    const highlights = getSearchHighlights(product);
     const prefetchedRef = useRef(false);
 
     const handleMouseEnter = () => {
@@ -70,10 +72,10 @@ export function ProductCardList({ product: productProp, isExpanded, onToggle }:
                     >
                         {product.productName}
                     </Link>
-                    {product.highlights.length > 0 && product.highlights[0].matchedTokens.length > 0 && (
+                    {highlights.length > 0 && highlights[0].matchedTokens.length > 0 && (
                         <HighlightedText
                             text={product.productName}
-                            matchedTokens={product.highlights[0].matchedTokens}
+                            matchedTokens={highlights[0].matchedTokens}
                             className="text-xs text-muted-foreground line-clamp-1 mt-0.5 red"
                         />
                     )}

package/dist/assets/storefront/src/components/commerce/product-card.tsx

@@ -2,6 +2,7 @@ import { Price } from '@/components/commerce/price';
 import { PrefetchLink } from '@/components/shared/prefetch-link';
 import { Badge } from '@/components/ui/badge';
 import { FragmentOf, readFragment } from '@/graphql';
+import { getSearchHighlights } from '@/lib/vendure/capability-ui';
 import { ProductCardFragment } from '@/lib/vendure/fragments';
 import { Package } from 'lucide-react';
 import { useTranslations } from 'next-intl';
@@ -15,6 +16,7 @@ interface ProductCardProps {
 
 export function ProductCard({ product: productProp }: ProductCardProps) {
     const product = readFragment(ProductCardFragment, productProp);
+    const highlights = getSearchHighlights(product);
     const t = useTranslations('Product');
 
     return (
@@ -62,10 +64,10 @@ export function ProductCard({ product: productProp }: ProductCardProps) {
                 <h3 className="font-medium text-sm line-clamp-2 leading-snug group-hover:text-primary transition-colors">
                     {product.productName}
                 </h3>
-                {product.highlights.length > 0 && product.highlights[0].matchedTokens.length > 0 && (
+                {highlights.length > 0 && highlights[0].matchedTokens.length > 0 && (
                     <HighlightedText
                         text={product.productName}
-                        matchedTokens={product.highlights[0].matchedTokens}
+                        matchedTokens={highlights[0].matchedTokens}
                         className="text-xs text-muted-foreground line-clamp-2"
                     />
                 )}

package/dist/assets/storefront/src/components/commerce/quote-action-buttons.tsx

@@ -23,9 +23,24 @@ interface QuoteActionButtonsProps {
     quoteId: string;
     status: string;
     convertedOrderId?: string | null;
+    /**
+     * Whether the deployment is granted `quote.negotiation`.
+     *
+     * Resolved by the server component that renders this one. Reading the
+     * capability hint here instead would inline the deployment's entire granted
+     * capability list into this client chunk, because Next.js replaces
+     * `process.env.NEXT_PUBLIC_*` with its literal value wherever the module
+     * graph reaches the browser.
+     */
+    hasQuoteNegotiation: boolean;
 }
 
-export function QuoteActionButtons({ quoteId, status, convertedOrderId }: QuoteActionButtonsProps) {
+export function QuoteActionButtons({
+    quoteId,
+    status,
+    convertedOrderId,
+    hasQuoteNegotiation,
+}: QuoteActionButtonsProps) {
     const router = useRouter();
     const t = useTranslations('Quotes');
     const [reason, setReason] = useState('');
@@ -174,7 +189,7 @@ export function QuoteActionButtons({ quoteId, status, convertedOrderId }: QuoteA
                     )}
                     {!stockWarning && (
                         <>
-                            {status === 'QUOTED' && (
+                            {status === 'QUOTED' && hasQuoteNegotiation && (
                                 <Textarea
                                     placeholder={t('changeRequestPlaceholder')}
                                     value={reason}
@@ -213,18 +228,20 @@ export function QuoteActionButtons({ quoteId, status, convertedOrderId }: QuoteA
                                 </Button>
                                 {status === 'QUOTED' && (
                                     <>
-                                        <Button
-                                            variant="outline"
-                                            size="sm"
-                                            onClick={() =>
-                                                handleAction(() => requestQuoteChanges(quoteId, reason))
-                                            }
-                                            disabled={isPending || !reason.trim()}
-                                            className="w-full"
-                                        >
-                                            <MessageSquare className="h-4 w-4 mr-1" />
-                                            {t('actionRequestChanges')}
-                                        </Button>
+                                        {hasQuoteNegotiation && (
+                                            <Button
+                                                variant="outline"
+                                                size="sm"
+                                                onClick={() =>
+                                                    handleAction(() => requestQuoteChanges(quoteId, reason))
+                                                }
+                                                disabled={isPending || !reason.trim()}
+                                                className="w-full"
+                                            >
+                                                <MessageSquare className="h-4 w-4 mr-1" />
+                                                {t('actionRequestChanges')}
+                                            </Button>
+                                        )}
                                         <Button
                                             variant="destructive"
                                             size="sm"

package/dist/assets/storefront/src/config/capabilities.ts

@@ -0,0 +1,41 @@
+/**
+ * Build-time capability set for the storefront.
+ *
+ * The server composes its GraphQL schema from the capability modules the
+ * deployment is entitled to, so a document that selects a field belonging to an
+ * absent module fails validation on every request. The storefront therefore has
+ * to know which capability-gated fields it may select before it builds its
+ * documents.
+ *
+ * `NEXT_PUBLIC_VENDURE_CAPABILITIES` is a comma-separated list of the capability
+ * keys the target deployment is granted, baked at build time like
+ * `NEXT_PUBLIC_SCENARIO`. It is a composition hint, not an authorization
+ * boundary: the server remains authoritative and rejects anything this list
+ * gets wrong.
+ *
+ * When the variable is unset every capability is assumed, which keeps existing
+ * full-composition deployments building and running unchanged.
+ */
+const RAW_CAPABILITIES = process.env.NEXT_PUBLIC_VENDURE_CAPABILITIES;
+
+function parseCapabilities(raw: string | undefined): ReadonlySet<string> | null {
+    if (raw == null) {
+        return null;
+    }
+    return new Set(
+        raw
+            .split(',')
+            .map((key) => key.trim())
+            .filter((key) => key.length > 0),
+    );
+}
+
+const GRANTED = parseCapabilities(RAW_CAPABILITIES);
+
+/** True when the deployment is expected to expose `key`'s schema. */
+export function hasCapability(key: string): boolean {
+    return GRANTED == null || GRANTED.has(key);
+}
+
+/** Configurator forms, rules, saved configurations, and the configured order journey. */
+export const hasConfiguratorForms = hasCapability('configurator.forms');