@faststore/core 4.4.1-dev.0 → 4.5.0-dev.1

package/cms/faststore/schema.json

@@ -113,6 +113,9 @@
           },
           {
             "$ref": "#/components/ShoppingAssistant"
+          },
+          {
+            "$ref": "#/components/RecommendationShelf"
           }
         ]
       }
@@ -4425,6 +4428,92 @@
       "writeOnly": false,
       "deprecated": false,
       "$abstract": false
+    },
+    "RecommendationShelf": {
+      "$extends": ["#/$defs/base-component"],
+      "$componentKey": "RecommendationShelf",
+      "$componentTitle": "Recommendation Shelf",
+      "title": "Recommendation Shelf",
+      "description": "Display a carousel of personalized product recommendations from a VTEX Recommendations campaign.",
+      "type": "object",
+      "required": ["campaignVrn"],
+      "properties": {
+        "title": {
+          "title": "Title",
+          "description": "Override the shelf title. If not set, the campaign title will be used.",
+          "type": "string"
+        },
+        "campaignVrn": {
+          "title": "Campaign VRN",
+          "description": "Recommendation campaign VRN (e.g. vrn:recommendations:my-account:rec-persona-v2:abc123).",
+          "type": "string",
+          "pattern": "^vrn:recommendations:[^:]+:(rec-cross-v2|rec-similar-v2|rec-persona-v2|rec-last-v2|rec-top-items-v2|rec-search-v2|rec-next-v2|rec-visual-v2):[^:]+$"
+        },
+        "itemsContext": {
+          "title": "Items context",
+          "description": "Source of the products used as context for the recommendation request. 'Product page' uses the product currently being viewed; 'Cart' uses the items currently in the cart (useful for cross-sell shelves on the cart page). Only affects context-based campaigns such as cross-sell, similar items, visual similarity and next interaction.",
+          "type": "string",
+          "default": "PDP",
+          "enum": ["PDP", "CART"],
+          "enumNames": ["Product page", "Cart"]
+        },
+        "carouselConfiguration": {
+          "title": "Carousel Configuration",
+          "type": "object",
+          "properties": {
+            "itemsPerPageDesktop": {
+              "title": "Items per page (desktop)",
+              "description": "Number of products shown per page on desktop viewports.",
+              "type": "number",
+              "default": 4
+            },
+            "itemsPerPageMobile": {
+              "title": "Items per page (mobile)",
+              "description": "Number of products shown per page on mobile and tablet viewports.",
+              "type": "number",
+              "default": 2
+            },
+            "variant": {
+              "title": "Carousel track variant",
+              "description": "How the carousel navigates between items.",
+              "type": "string",
+              "default": "scroll",
+              "enum": ["slide", "scroll"],
+              "enumNames": ["Slide", "Scroll"]
+            },
+            "infiniteMode": {
+              "title": "Infinite navigation?",
+              "description": "Only applies to the 'slide' variant.",
+              "type": "boolean",
+              "default": false
+            },
+            "controls": {
+              "title": "Navigation controls",
+              "description": "Which navigation elements should be visible.",
+              "type": "string",
+              "default": "complete",
+              "enum": ["complete", "navigationArrows", "paginationBullets"],
+              "enumNames": ["Arrows and bullets", "Arrows only", "Bullets only"]
+            }
+          }
+        },
+        "productCardConfiguration": {
+          "title": "Product Card Configuration",
+          "type": "object",
+          "properties": {
+            "showDiscountBadge": {
+              "title": "Show discount badge?",
+              "type": "boolean",
+              "default": true
+            },
+            "bordered": {
+              "title": "Cards should be bordered?",
+              "type": "boolean",
+              "default": true
+            }
+          }
+        }
+      }
     }
   }
 }

package/discovery.config.default.js

@@ -201,6 +201,9 @@ module.exports = {
     },
     refreshToken: false,
     scrollRestoration: false,
+    // Opt-in flag for VTEX Recommendations. When disabled (default), the store
+    // never starts a personalization session nor calls the Recommendations API.
+    enableRecommendations: false,
     /** Package names to transpile (e.g. ['@vtex/components']). Use a non-empty list to enable Next.js transpilation. */
     transpilePackages: [],
   },

package/discovery.config.js

@@ -6,6 +6,15 @@ const deepmerge = require('deepmerge')
 /**
  * @type {typeof defaultConfig & Record<string, any>}
  * */
-const finalConfig = deepmerge(defaultConfig, starterConfig)
+let finalConfig = deepmerge(defaultConfig, starterConfig)
+
+try {
+  finalConfig = deepmerge(finalConfig, require('./discovery.config.local'))
+} catch (error) {
+  if (error?.code !== 'MODULE_NOT_FOUND') {
+    throw error
+  }
+  // Optional local overrides (packages/core/discovery.config.local.js).
+}
 
 module.exports = finalConfig

package/discovery.config.local.example.js

@@ -0,0 +1,62 @@
+/**
+ * Example local overrides for B2B contract switcher development.
+ *
+ * Copy to discovery.config.local.js (gitignored) before running locally.
+ * Run from `packages/core`:
+ *
+ *   cp discovery.config.local.example.js discovery.config.local.js
+ *
+ * Or from the repo root:
+ *
+ *   cp packages/core/discovery.config.local.example.js packages/core/discovery.config.local.js
+ */
+module.exports = {
+  plugins: ['@vtex/faststore-plugin-buyer-portal'],
+
+  api: {
+    storeId: 'b2bfaststoredev',
+    hideUnavailableItems: true,
+  },
+
+  storeUrl: 'https://b2bfaststore.vtexfaststore.com',
+  secureSubdomain: 'https://b2bfaststore.vtexfaststore.com',
+  checkoutUrl:
+    process.env.NODE_ENV === 'development'
+      ? 'http://localhost:3000/checkout/cart'
+      : 'https://b2bfaststore.vtexfaststore.com/checkout',
+  loginUrl: 'https://b2bfaststore.vtexfaststore.com/api/io/login',
+  accountUrl: 'https://b2bfaststore.vtexfaststore.com/api/io/account',
+
+  experimental: {
+    enableFaststoreMyAccount: true,
+    refreshToken: true,
+  },
+
+  vtexHeadlessCms: {
+    webhookUrls: [
+      'https://b2bfaststoredev.myvtex.com/cms-releases/webhook-releases',
+    ],
+  },
+}
+
+// Dev-only: proxy VTEX Identity routes (WebOps handles this in production).
+const { storeId } = module.exports.api
+
+module.exports.rewrites = async () => {
+  if (process.env.NODE_ENV !== 'development') {
+    return { beforeFiles: [] }
+  }
+
+  return {
+    beforeFiles: [
+      {
+        source: '/api/authenticator/:path*',
+        destination: `https://${storeId}.myvtex.com/api/authenticator/:path*`,
+      },
+      {
+        source: '/api/vtexid/:path*',
+        destination: `https://${storeId}.myvtex.com/api/vtexid/:path*`,
+      },
+    ],
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "4.4.1-dev.0",
+  "version": "4.5.0-dev.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -71,11 +71,11 @@
     "style-loader": "^3.3.1",
     "swr": "^2.2.5",
     "use-sync-external-store": "^1.6.0",
-    "@faststore/api": "4.4.1-dev.0",
-    "@faststore/lighthouse": "4.4.1-dev.0",
-    "@faststore/sdk": "4.4.1-dev.0",
-    "@faststore/ui": "4.4.1-dev.0",
-    "@faststore/diagnostics": "4.4.1-dev.0"
+    "@faststore/api": "4.5.0-dev.1",
+    "@faststore/sdk": "4.5.0-dev.1",
+    "@faststore/diagnostics": "4.5.0-dev.1",
+    "@faststore/ui": "4.5.0-dev.1",
+    "@faststore/lighthouse": "4.5.0-dev.1"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",

package/public/icons.svg

@@ -73,6 +73,8 @@
 
   <symbol id="FadersHorizontal" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="135.99902" y1="171.99304" x2="39.99902" y2="171.99317" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="215.99902" y1="171.99317" x2="167.99902" y2="171.99304" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="71.99902" y1="83.99304" x2="39.99902" y2="83.99246" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="215.99902" y1="83.99246" x2="103.99902" y2="83.99304" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="103.99902" y1="59.99304" x2="103.99902" y2="107.99304" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="167.99902" y1="195.99304" x2="167.99902" y2="147.99304" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></symbol>
 
+  <symbol id="FolderOpen" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M32,96V72a8,8,0,0,1,8-8H93.33a8,8,0,0,1,4.8,1.6L128,88H216a8,8,0,0,1,8,8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M40,200H216a16,16,0,0,0,15.7-13L248,96H32L16,187a16,16,0,0,0,15.7,13Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></symbol>
+
   <symbol id="Gift" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><rect x="32" y="80" width="192" height="48" rx="7.99999" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><path d="M208,128v72a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><line x1="128" y1="80" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><path d="M173.25483,68.68629C161.94113,80,128,80,128,80s0-33.94113,11.31371-45.25483a24,24,0,0,1,33.94112,33.94112Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M82.74517,68.68629C94.05887,80,128,80,128,80s0-33.94113-11.31371-45.25483A24,24,0,0,0,82.74517,68.68629Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></symbol>
 
   <symbol id="Globe" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><path d="M128 24a104 104 0 1 0 104 104A104.12 104.12 0 0 0 128 24Zm88 104a87.61 87.61 0 0 1-3.33 24h-38.51a157.44 157.44 0 0 0 0-48h38.51a87.61 87.61 0 0 1 3.33 24Zm-114 40h52a115.11 115.11 0 0 1-26 45 115.27 115.27 0 0 1-26-45Zm-3.9-16a140.84 140.84 0 0 1 0-48h59.88a140.84 140.84 0 0 1 0 48ZM40 128a87.61 87.61 0 0 1 3.33-24h38.51a157.44 157.44 0 0 0 0 48H43.33A87.61 87.61 0 0 1 40 128Zm114-40h-52a115.11 115.11 0 0 1 26-45 115.27 115.27 0 0 1 26 45Zm52.33 0h-35.62a135.28 135.28 0 0 0-22.3-45.6A88.29 88.29 0 0 1 206.37 88Zm-98.74-45.6A135.28 135.28 0 0 0 85.29 88H49.63a88.29 88.29 0 0 1 57.96-45.6ZM49.63 168h35.66a135.28 135.28 0 0 0 22.3 45.6A88.29 88.29 0 0 1 49.63 168Zm98.78 45.6a135.28 135.28 0 0 0 22.3-45.6h35.66a88.29 88.29 0 0 1-57.96 45.6Z"/></symbol>
@@ -109,6 +111,8 @@
 
   <symbol id="SealWarning" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><path d="M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82Zm-11.55,39.29c-4.79,5-9.75,10.17-12.38,16.52-2.52,6.1-2.63,13.07-2.73,19.82-.1,7-.21,14.33-3.32,17.43s-10.39,3.22-17.43,3.32c-6.75.1-13.72.21-19.82,2.73-6.35,2.63-11.52,7.59-16.52,12.38S132,224,128,224s-9.15-4.92-14.11-9.69-10.17-9.75-16.52-12.38c-6.1-2.52-13.07-2.63-19.82-2.73-7-.1-14.33-.21-17.43-3.32s-3.22-10.39-3.32-17.43c-.1-6.75-.21-13.72-2.73-19.82-2.63-6.35-7.59-11.52-12.38-16.52S32,132,32,128s4.92-9.15,9.69-14.11,9.75-10.17,12.38-16.52c2.52-6.1,2.63-13.07,2.73-19.82.1-7,.21-14.33,3.32-17.43S70.51,56.9,77.55,56.8c6.75-.1,13.72-.21,19.82-2.73,6.35-2.63,11.52-7.59,16.52-12.38S124,32,128,32s9.15,4.92,14.11,9.69,10.17,9.75,16.52,12.38c6.1,2.52,13.07,2.63,19.82,2.73,7,.1,14.33.21,17.43,3.32s3.22,10.39,3.32,17.43c.1,6.75.21,13.72,2.73,19.82,2.63,6.35,7.59,11.52,12.38,16.52S224,124,224,128,219.08,137.15,214.31,142.11ZM120,136V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"></path></symbol>
 
+  <symbol id="SignOut" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M112,216H48a16,16,0,0,1-16-16V56A16,16,0,0,1,48,40h64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><polyline points="168 176 216 128 168 80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></polyline><line x1="104" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></symbol>
+
   <symbol id="ShieldCheck" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M40,114.66667V56a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8v58.66667c0,84.01533-71.306,111.85016-85.5438,116.57058a7.54755,7.54755,0,0,1-4.9124,0C111.306,226.51683,40,198.682,40,114.66667Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><polyline points="172 104 113.333 160 84 132" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></polyline></symbol>
 
   <symbol id="ShoppingCart" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M184,184H69.81818L41.92162,30.56892A8,8,0,0,0,34.05066,24H16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="80" cy="204" r="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></circle><circle cx="184" cy="204" r="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></circle><path d="M62.54543,144H188.10132a16,16,0,0,0,15.74192-13.13783L216,64H48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></symbol>

package/src/Layout.tsx

@@ -1,10 +1,16 @@
 import { isValidElement, type PropsWithChildren } from 'react'
 
 import { usePageViewEvent } from './sdk/analytics/hooks/usePageViewEvent'
+import { useStartRecommendationSession } from './sdk/analytics/hooks/useStartRecommendationSession'
 
 function Layout({ children }: PropsWithChildren) {
   const props = isValidElement(children) ? children.props : undefined
   usePageViewEvent(props)
+  // Implemented here because the personalization session must be initiated once
+  // per browser session on each page. Gated behind the
+  // `experimental.enableRecommendations` flag: stores that don't opt into
+  // Recommendations never start a session nor call the Recommendations API.
+  useStartRecommendationSession()
 
   return <>{children}</>
 }

package/src/components/account/Drawer/OrganizationDrawer/ContractSwitcher/ContractSwitcher.tsx

@@ -0,0 +1,376 @@
+import { Button, Icon, IconButton, Loader } from '@faststore/ui'
+import { useState, type ReactNode } from 'react'
+
+import { useAvailableContracts } from 'src/sdk/account/useAvailableContracts'
+import { useSwitchContract } from 'src/sdk/account/useSwitchContract'
+import { useSession } from 'src/sdk/session'
+
+export type ContractSwitcherProps = {
+  /** Returns to the drawer menu view (also used by Cancel). */
+  onBack: () => void
+  /** Closes the whole drawer. */
+  onClose: () => void
+}
+
+/**
+ * Contract that can be displayed by the switcher. `isDefault` is optional so the
+ * component compiles against both the local mock and the real
+ * `useAvailableContracts` hook (which does not expose a default yet).
+ */
+type SwitcherContract = {
+  id: string
+  corporateName: string
+  isActive: boolean
+  isDefault?: boolean
+}
+
+const initialOf = (name: string) => name.trim().charAt(0).toUpperCase()
+
+type ContractSwitcherContentProps = {
+  loading: boolean
+  error: Error | null
+  currentContract: SwitcherContract | null
+  alternatives: SwitcherContract[]
+  ordered: SwitcherContract[]
+  search: string
+  selectedId: string | null
+  switchError: Error | null
+  onSearchChange: (value: string) => void
+  onSearchClear: () => void
+  onSelectContract: (contractId: string) => void
+}
+
+const ContractSwitcherLoading = () => (
+  <div data-fs-contract-switcher-loading aria-busy="true">
+    <Loader />
+  </div>
+)
+
+const ContractSwitcherLoadError = () => (
+  <div data-fs-contract-switcher-message role="alert">
+    <p>We couldn't load your contracts. Please try again.</p>
+  </div>
+)
+
+const ContractSwitcherCurrentSession = ({
+  currentContract,
+}: {
+  currentContract: SwitcherContract | null
+}) => (
+  <div data-fs-contract-switcher-current>
+    <span data-fs-contract-switcher-label>Current session</span>
+    {currentContract && (
+      <div data-fs-contract-switcher-current-card>
+        <span data-fs-contract-switcher-avatar aria-hidden="true">
+          {initialOf(currentContract.corporateName)}
+        </span>
+        <span data-fs-contract-switcher-option-name>
+          {currentContract.corporateName}
+        </span>
+        {currentContract.isDefault && (
+          <Icon
+            data-fs-contract-switcher-default
+            name="Star"
+            width={20}
+            height={20}
+          />
+        )}
+      </div>
+    )}
+  </div>
+)
+
+const ContractSwitcherEmptyAlternatives = () => (
+  <div data-fs-contract-switcher-message data-fs-contract-switcher-empty>
+    <p>No other contracts are available for your organization.</p>
+  </div>
+)
+
+type ContractSwitcherAlternativesProps = {
+  alternatives: SwitcherContract[]
+  ordered: SwitcherContract[]
+  search: string
+  selectedId: string | null
+  onSearchChange: (value: string) => void
+  onSearchClear: () => void
+  onSelectContract: (contractId: string) => void
+}
+
+const ContractSwitcherSearch = ({
+  search,
+  onSearchChange,
+  onSearchClear,
+}: Pick<
+  ContractSwitcherAlternativesProps,
+  'search' | 'onSearchChange' | 'onSearchClear'
+>) => (
+  <div data-fs-contract-switcher-search>
+    <Icon name="MagnifyingGlass" width={20} height={20} />
+    <input
+      type="text"
+      value={search}
+      placeholder="Search"
+      aria-label="Search contracts"
+      onChange={(event) => onSearchChange(event.target.value)}
+    />
+    {search && (
+      <button
+        type="button"
+        data-fs-contract-switcher-search-clear
+        aria-label="Clear search"
+        onClick={onSearchClear}
+      >
+        <Icon name="X" width={18} height={18} />
+      </button>
+    )}
+  </div>
+)
+
+const ContractSwitcherOptionList = ({
+  ordered,
+  selectedId,
+  onSelectContract,
+}: Pick<
+  ContractSwitcherAlternativesProps,
+  'ordered' | 'selectedId' | 'onSelectContract'
+>) => (
+  <ul data-fs-contract-switcher-list>
+    {ordered.map((contract) => {
+      const isSelected = selectedId === contract.id
+
+      return (
+        <li key={contract.id} data-fs-contract-switcher-item>
+          <button
+            type="button"
+            data-fs-contract-switcher-option
+            data-fs-contract-switcher-option-selected={isSelected}
+            aria-pressed={isSelected}
+            onClick={() => onSelectContract(contract.id)}
+          >
+            <span data-fs-contract-switcher-avatar aria-hidden="true">
+              {initialOf(contract.corporateName)}
+            </span>
+            <span data-fs-contract-switcher-option-name>
+              {contract.corporateName}
+            </span>
+            {contract.isDefault && (
+              <Icon
+                data-fs-contract-switcher-default
+                name="Star"
+                width={20}
+                height={20}
+              />
+            )}
+          </button>
+        </li>
+      )
+    })}
+  </ul>
+)
+
+const ContractSwitcherAlternatives = ({
+  alternatives,
+  ordered,
+  search,
+  selectedId,
+  onSearchChange,
+  onSearchClear,
+  onSelectContract,
+}: ContractSwitcherAlternativesProps) => {
+  if (alternatives.length === 0) {
+    return <ContractSwitcherEmptyAlternatives />
+  }
+
+  let listContent: ReactNode
+  if (ordered.length === 0) {
+    listContent = (
+      <div data-fs-contract-switcher-message>
+        <p>No contracts match your search.</p>
+      </div>
+    )
+  } else {
+    listContent = (
+      <ContractSwitcherOptionList
+        ordered={ordered}
+        selectedId={selectedId}
+        onSelectContract={onSelectContract}
+      />
+    )
+  }
+
+  return (
+    <>
+      <p data-fs-contract-switcher-count>
+        Select one of <strong>{alternatives.length}</strong> available
+        contracts:
+      </p>
+      <ContractSwitcherSearch
+        search={search}
+        onSearchChange={onSearchChange}
+        onSearchClear={onSearchClear}
+      />
+      {listContent}
+    </>
+  )
+}
+
+const ContractSwitcherSwitchError = () => (
+  <div data-fs-contract-switcher-message role="alert">
+    <p>
+      We couldn't switch your contract. The previous contract is still active.
+    </p>
+  </div>
+)
+
+const ContractSwitcherContent = ({
+  loading,
+  error,
+  currentContract,
+  alternatives,
+  ordered,
+  search,
+  selectedId,
+  switchError,
+  onSearchChange,
+  onSearchClear,
+  onSelectContract,
+}: ContractSwitcherContentProps) => {
+  if (loading) {
+    return <ContractSwitcherLoading />
+  }
+
+  if (error) {
+    return <ContractSwitcherLoadError />
+  }
+
+  return (
+    <>
+      <ContractSwitcherCurrentSession currentContract={currentContract} />
+      <ContractSwitcherAlternatives
+        alternatives={alternatives}
+        ordered={ordered}
+        search={search}
+        selectedId={selectedId}
+        onSearchChange={onSearchChange}
+        onSearchClear={onSearchClear}
+        onSelectContract={onSelectContract}
+      />
+      {switchError && <ContractSwitcherSwitchError />}
+    </>
+  )
+}
+
+/**
+ * Sub-view of the OrganizationDrawer that lets a B2B buyer change the active
+ * contract within their Organization Unit (REQ-03..06). Replaces the whole
+ * drawer body while open: own header (back / title / close), the current
+ * session, a searchable list of alternatives, and a Cancel / Confirm footer.
+ */
+export const ContractSwitcher = ({
+  onBack,
+  onClose,
+}: ContractSwitcherProps) => {
+  const { contracts, loading, error } = useAvailableContracts(true)
+  const { b2b } = useSession()
+  const {
+    switchContract,
+    loading: switching,
+    error: switchError,
+    enabled: switchEnabled,
+  } = useSwitchContract()
+
+  const [search, setSearch] = useState('')
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const allContracts: SwitcherContract[] = contracts
+  const activeContractId = b2b?.customerId?.trim() ?? ''
+  const currentContract =
+    (activeContractId
+      ? allContracts.find((contract) => contract.id === activeContractId)
+      : null) ??
+    allContracts.find((contract) => contract.isActive) ??
+    allContracts[0] ??
+    null
+
+  const alternatives = allContracts.filter(
+    (contract) => contract.id !== currentContract?.id
+  )
+
+  const query = search.toLowerCase().trim()
+  const filtered = query
+    ? alternatives.filter((contract) =>
+        contract.corporateName.toLowerCase().includes(query)
+      )
+    : alternatives
+
+  const ordered = [...filtered].sort((a, b) => {
+    if (a.isDefault && !b.isDefault) return -1
+    if (b.isDefault && !a.isDefault) return 1
+    return a.corporateName.localeCompare(b.corporateName)
+  })
+
+  const canConfirm =
+    switchEnabled &&
+    selectedId !== null &&
+    selectedId !== currentContract?.id &&
+    ordered.some((contract) => contract.id === selectedId) &&
+    !switching
+
+  const handleConfirm = async () => {
+    if (!selectedId) {
+      return
+    }
+
+    await switchContract(selectedId)
+  }
+
+  return (
+    <section data-fs-contract-switcher>
+      <header data-fs-contract-switcher-header>
+        <IconButton
+          data-fs-contract-switcher-back
+          aria-label="Back to account menu"
+          icon={<Icon name="ArrowLeft" width={20} height={20} />}
+          onClick={onBack}
+        />
+        <h2 data-fs-contract-switcher-title>Change contract</h2>
+        <IconButton
+          data-fs-contract-switcher-close
+          aria-label="Close"
+          icon={<Icon name="X" width={20} height={20} />}
+          onClick={onClose}
+        />
+      </header>
+
+      <div data-fs-contract-switcher-content>
+        <ContractSwitcherContent
+          loading={loading}
+          error={error}
+          currentContract={currentContract}
+          alternatives={alternatives}
+          ordered={ordered}
+          search={search}
+          selectedId={selectedId}
+          switchError={switchError}
+          onSearchChange={setSearch}
+          onSearchClear={() => setSearch('')}
+          onSelectContract={setSelectedId}
+        />
+      </div>
+
+      <footer data-fs-contract-switcher-footer>
+        <Button variant="tertiary" onClick={onBack}>
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          disabled={!canConfirm}
+          loading={switching}
+          onClick={handleConfirm}
+        >
+          Confirm
+        </Button>
+      </footer>
+    </section>
+  )
+}

package/src/components/account/Drawer/OrganizationDrawer/ContractSwitcher/index.ts

@@ -0,0 +1,2 @@
+export { ContractSwitcher } from './ContractSwitcher'
+export type { ContractSwitcherProps } from './ContractSwitcher'