Skip to main content

B2B capabilities

The SDK and UI libraries are built for B2B as well as B2C. The features below span the data layer, the components and the Accelerator.

Checked against propeller-v2-react-ui 0.32.0, propeller-v2-vue-ui 0.31.1 and the boilerplates of 18 October 2026.

Shop modes and portal modes​

Two settings control B2B behavior. The shop mode (set when you scaffold) decides which account features ship. The portal mode decides what anonymous visitors see.

Shop modes (--mode in the Accelerator):

Shop modeAccount featuresRegister form
b2bAdds quotes, purchase authorization and ContactsContact only
b2cThe account pages every shop hasCustomer only
hybridAdds quotes, purchase authorization and Contacts, shown to Contacts onlyBoth

Portal modes (the portalMode value on PropellerProvider, and a setting in the boilerplates, see Settings):

Portal modeAnonymous visitors see
openCatalog and prices
semi-closedCatalog, but prices and catalog actions hidden until login
closedNothing until login

semi-closed suits B2B catalogs where pricing is customer-specific and should appear only after login. Components honor the portal mode: price, add to cart, the price filter and price sorting hide or disable accordingly.

A signed-in user's profile loads a moment after the page. To keep semi-closed pages from briefly showing their logged-out state in that moment, pass isAuthenticated: true to PropellerProvider as soon as you know a session exists.

Company and Contact model​

Propeller's B2B model has Contacts that belong to Companies, where a Company carries pricesheets, Orderlists and addresses. The useCompany hook and the CompanySwitcher component let a Contact switch the active Company, which drives pricing, addresses and authorization. Registration callbacks let you assign a new Contact to a Company, link a pricesheet or add the Contact to an Orderlist. See Understanding companies, contacts and customers.

Purchase authorization and quotes​

For approval-driven buying, the library ships purchase authorization components and hooks (PurchaseAuthorizationConfigurator, PurchaseAuthorizationRequests and the matching hooks) and quote actions (QuoteActions). They ship in the b2b and hybrid shop modes.

When you build your own checkout button, apply the same limit the components use: isCheckoutAllowed(user, companyId, cart) from the core layer returns false when the cart is over the Contact's authorization limit and needs approval.

Price on request​

A product can be priced on request: its price display mode (priceData.display) is ON_REQUEST, and the customer is not quoted a price in the shop. See Price display modes for how the API reports it.

The UI libraries handle this state:

  • ProductPrice, ProductCard, ClusterCard and SearchBar show a "price on request" label instead of an amount, and a product card offers "Request a price" instead of add to cart.
  • On the product page, RequestPriceButton replaces add to cart and puts the product on a request list. Anonymous visitors get a log-in action instead, because a quote is addressed to someone.
  • usePriceRequest keeps the request list in the browser's local storage, apart from the cart, and PriceRequestList shows it as an editable table of products and quantities with one comment field.
  • isPriceOnRequest(product) tells your own code whether a product is priced on request. For a cluster it answers for the cluster's default product.

The API has no mutation for sending a price request, so you supply the delivery through the onSubmit option of usePriceRequest. The Accelerator boilerplates send the request by email from their /api/price-request route: set the mail settings (SMTP_*) and PRICE_REQUEST_TO_EMAIL, the address that receives the requests.

Clusters​

Propeller models configurable products as Clusters with Cluster Options. The ClusterCard, ClusterConfigurator, ClusterInfo and ClusterOptions components, and the useClusterConfigurator hook, handle variant selection and option configuration. See Understanding products and categories.

Machines and spare parts​

For industrial and equipment catalogs, Propeller models a machine as a product that has orderable spare parts and sometimes child machines. The MachineGrid and MachineCard components list and present machines the way ProductGrid and ProductCard do for products, and the useMachines and useSpareParts hooks load a machine's listing and its spare parts. See the component reference.

In the Accelerator boilerplates, the machines section shows the installed machines of the signed-in Contact's Company. It reads their ids from the Company attribute MY_INSTALLATIONS (a comma-separated list) and needs the machine source setting (BOILERPLATE_MACHINE_SOURCE on Next.js) to look them up. Without these, the machines overview stays empty.

Procurement systems​

Buyers who order from an e-procurement system, such as SAP Ariba or Coupa, can shop in the storefront and send the cart back to their system. See PunchOut.

Customer-specific pricing​

When a Contact is signed in, the GraphQL route forwards their token and the API returns prices for their Company's pricesheet. In semi-closed portal mode, anonymous visitors see the catalog without prices, and customer-specific prices appear after login. See Customer-specific pricing.

See also​

Last updated on