@vendure-platform/create 0.2.1-nightly.202605191555 → 0.2.2

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

@@ -5,16 +5,6 @@ import createNextIntlPlugin from 'next-intl/plugin';
 const vendurePort = process.env.VENDURE_PORT ?? '3500';
 const storefrontPort = process.env.STOREFRONT_PORT ?? '3001';
 
-const activeScenario = process.env.NEXT_PUBLIC_SCENARIO ?? 'default';
-
-// Build-time CSS swap: `@/styles/globals` resolves to the active scenario's
-// globals.css. Today only the `vendure-branded` scenario has its own (which
-// imports `@vendure-io/design-tokens`); every other scenario falls back to
-// the shared storefront globals.css.
-const scenarioGlobalsCss = activeScenario === 'vendure-branded'
-    ? path.resolve(__dirname, 'src/scenarios/vendure-branded/globals.css')
-    : path.resolve(__dirname, 'src/app/[locale]/globals.css');
-
 const withNextIntl = createNextIntlPlugin('./src/i18n/request.ts');
 
 const nextConfig: NextConfig = {
@@ -50,15 +40,7 @@ const nextConfig: NextConfig = {
         NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL ?? `http://localhost:${storefrontPort}`,
         ...(process.env.VENDURE_CHANNEL_TOKEN ? { VENDURE_CHANNEL_TOKEN: process.env.VENDURE_CHANNEL_TOKEN } : {}),
         REVALIDATION_SECRET: process.env.REVALIDATION_SECRET,
-        NEXT_PUBLIC_SCENARIO: process.env.NEXT_PUBLIC_SCENARIO ?? 'default',
-    },
-    webpack: (config) => {
-        config.resolve = config.resolve ?? {};
-        config.resolve.alias = {
-            ...(config.resolve.alias ?? {}),
-            '@/styles/globals.css': scenarioGlobalsCss,
-        };
-        return config;
+        NEXT_PUBLIC_SCENARIO: process.env.NEXT_PUBLIC_SCENARIO ?? 'customer',
     },
     images: {
         // This is necessary to display images from your local Vendure instance

package/dist/assets/storefront/package.json

@@ -37,8 +37,7 @@
         "@radix-ui/react-toggle": "^1.1.10",
         "@radix-ui/react-toggle-group": "^1.1.11",
         "@radix-ui/react-tooltip": "^1.2.8",
-        "@vendure-io/design-tokens": "^1.1.2",
-        "@vendure-platform/storefront-client": "^0.2.1-nightly.202605191555",
+        "@vendure-platform/storefront-client": "^0.2.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
@@ -67,7 +66,6 @@
         "@types/node": "^20.19.25",
         "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
-        "baseline-browser-mapping": "^2.9.14",
         "eslint": "^9.39.1",
         "eslint-config-next": "16.0.0",
         "tailwindcss": "^4.1.17",

package/dist/assets/storefront/src/components/commerce/packaging-unit-selector.tsx

@@ -59,7 +59,12 @@ export function PackagingUnitSelector({
 
                     // Effective pieces at minQuantity: e.g. 1 box × 50 = 50 pieces
                     const effectivePieces = pu.minQuantity * pu.conversionFactor;
-                    const perPiecePrice = getTierAdjustedPiecePrice(baseVariantPrice, sortedTiers, effectivePieces);
+                    // Prefer the packaging-unit's own tier ladder so any
+                    // packaging-unit-gated discounts are reflected on the card.
+                    const puTiers = pu.priceTiers
+                        ? [...pu.priceTiers].filter(t => t.minQuantity != null).sort((a, b) => a.minQuantity! - b.minQuantity!)
+                        : sortedTiers;
+                    const perPiecePrice = getTierAdjustedPiecePrice(baseVariantPrice, puTiers, effectivePieces);
                     const displayPrice = Math.round(perPiecePrice * pu.conversionFactor);
 
                     const stockLevel = pu.effectiveStockLevel;

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

@@ -217,8 +217,8 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
         if (!selectedVariant) return null;
         const factor = selectedPackagingUnit?.conversionFactor ?? 1;
         const effectiveQuantity = quantity * factor;
+        const tiers = selectedPackagingUnit?.priceTiers ?? selectedVariant.priceTiers;
         let perPiecePrice = selectedVariant.price;
-        const tiers = selectedVariant.priceTiers;
         if (tiers) {
             const sorted = [...tiers].filter(t => t.minQuantity != null).sort((a, b) => a.minQuantity! - b.minQuantity!);
             for (const tier of sorted) {
@@ -506,11 +506,11 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
             </div>
 
             {/* Volume Pricing — reference material, post-action */}
-            {selectedVariant?.priceTiers && (
+            {(selectedPackagingUnit?.priceTiers ?? selectedVariant?.priceTiers) && (
                 <div className="mt-6">
                     <PriceTiers
-                        tiers={selectedVariant.priceTiers}
-                        basePrice={selectedVariant.price}
+                        tiers={(selectedPackagingUnit?.priceTiers ?? selectedVariant?.priceTiers) as PriceTier[]}
+                        basePrice={selectedVariant?.price ?? 0}
                         quantity={quantity}
                         onTierClick={(minQty) => setQuantityInput(String(minQty))}
                         conversionFactor={selectedPackagingUnit?.conversionFactor}