The product card switches its call to action with one boolean

The ProductCard component renders every package across all five services. It takes one prop — a product object from the catalog. The interesting part is the call to action at the bottom. The component calls isPurchasable once and stores the result in a const called canBuy. If canBuy is true, the link says Buy now with a solid accent-coloured background and black text. If canBuy is false, the link says Get a quote with a transparent background, a glass border, and white text. Two completely different visual treatments from one boolean. The isPurchasable function checks two things — the product type must be fixed and the pricePence must be a positive number. A mixing session at two hundred and fifty pounds passes both checks and gets the solid Buy now button. A web application with quote-based pricing fails the type check and gets the outline Get a quote button. The link itself always points to the same route — /checkout/ followed by the product ID. The checkout page handles the divergence from there. A purchasable product loads the CheckoutWizard with Stripe Elements. A quote product loads the QuoteRequest component with the package details and two hash-link buttons that open the sidebar accordion. Same card, same link pattern, same route. The boolean only changes the button's visual weight. A filled button says you can act right now. An outlined button says this needs a conversation first. The card also uses flex-1 on the features list so the call to action always sits at the bottom of the card regardless of how many features the product has. Cards with three features and cards with six features align their buttons on the same baseline when rendered side by side in the grid.