Bundle Deal Pricing Block for React

Edit the constants at the top of the file. PRODUCTS lists the two products: each has a name, a description, three features, a monthly per-user price, a button label and an href. BUNDLE has the name, the price, the features and its href. The struck sum, the saving per month and per year, and the percentage in the badge are worked out from the product prices and the bundle price, so they can't disagree with the numbers shown. Add a third product by adding to PRODUCTS; the sum follows, and the "Docs $15 + Sign $20" line names the first two, so change it with them.

Every call to action is a real link. Each is a ShineButton with render set to an a element and nativeButton={false}. Give the bundle its own price in your billing provider rather than a coupon over two subscriptions: one subscription gives one invoice, as the header promises, and the discount can't be split by cancelling one product.

Below the md breakpoint the bundle's list shows its first five features, and a ghost button reads "All 8 features"; pressing it shows the rest and changes to "Show fewer". The button reports aria-expanded and points at the list with aria-controls. VISIBLE_ON_PHONE sets how many show. From md the whole list is always shown in two columns and the button is hidden, so a laptop visitor never sees a disclosure. The bundle's price and button sit above the list, so the call to action is on the first screen of an iPhone.

The struck sum is a real s element with hidden text around it, so a screen reader hears "Normally $35, now" before "$28 per user per month" rather than two unrelated prices. The bundle button's name says what it buys ("Get both for $28 a user"), and the two product buttons say "Get Docs" and "Get Sign". Each product and the bundle is headed by an h3 under the section's h2, and feature lists are real lists. The tint and the badge aren't the only mark of the bundle: it's also first, largest and the only filled button.

Big enough to be noticed and small enough to protect the products' own prices. Here the bundle saves $7 on $35, 20%, and it earns that by including things neither product has alone: signing from inside a doc, one template library and one admin console. A bundle that is only the two products at a lower price invites customers to wait for a sale; one that adds something makes the saving feel like a bonus.

Show a bundle when you sell two or more products that customers often buy together and each stands on its own. The products stay on the page so a customer who needs only one can still buy it, which keeps the bundle an offer rather than a requirement.