Prototype guide · vehicle purchasing in HubSpot

1. What this is

It is a prototype that simulates a Supply Opportunity record inside HubSpot. It shows how the app would behave before it is built. It is not the real HubSpot: nothing is saved, no email is sent, and the data (vehicles, prices, license plates) is made up.

The record has two tabs of ours: Vehicle information (vehicles, photos and pricing) and Proposal (proposals). Everything else (header, stage, contacts, attachments) is HubSpot's own and we haven't redesigned it.

2. Finding your way around

The record (centre of the screen): click a vehicle to see its photos, pricing and details. «‹ All vehicles» takes you back to the table.
Prototype controls (bottom right, dark box): not part of HubSpot. It is your remote control to try things without having to trigger them. Open and close it with the arrow.
Pink bar at the top: «↺ Reset demo» puts everything back to the start. The other two switches are for the developer.
For the developer (you can ignore this): «Component names» shows pink labels with the HubSpot component of each block, and «Accessibility notes» shows blue labels with accessibility notes. Both start off; switch them on only if you need them.
Tips: when you click a scenario, a green box appears above the panel saying what to do. Close it with the ×.

If anything looks odd, click «↺ Reset demo».

3. Guided scenarios

«Prototype controls» has buttons that take you straight to each situation. Try them in this order:

Button	What you will see
Add a vehicle	The form to add a vehicle. Change the type (Tractor head, Truck…) to see each one's fields, or try a Dutch plate such as 12-BLX-7.
Complete a WhatsApp vehicle	A vehicle that arrived by WhatsApp with incomplete data («Needs review»). Fill in what is missing and save.
Upload photos	Upload photos in «Photo files» (HubSpot's uploader). The slider only shows them after you click «Refresh photos».
Photos from the list	The board of supply opportunities. Clicking a card opens HubSpot's preview on the right; in it, our «Vehicles» card shows each vehicle's main photo. «View record» opens the record, and «‹ Supply opportunities» on the record goes back to the board.
Ask for a price	Asking PM for a price: choose an urgency (below it you can see when PM answers) and click «Ask for price». The urgency can't be changed afterwards.
PM price arrives	PM's answer arrives: a notification in the bell. The open record doesn't update by itself: click «Refresh» or open the notification to see PM's limits and the routes of sale PM offers.
Bidmonitor error	Bidmonitor does not answer. Click «Retry».
Ask for a new price	Asking for a price again when the supplier changes theirs. As the Volvo already has a proposal, it's withdrawn first («Withdrawn»): the supplier can no longer open it. The previous limits stay folded until the new ones arrive.
Create a proposal	The proposal modal. The routes PM doesn't offer are disabled. Try unticking every route to see the rules, then create it: you will see the wait and the proposal as a Draft.
Proposal error	The proposal service does not answer. Click «Retry».
Send a proposal	Review the proposal through its link and click «Mark as ready to send». Now you can send it with «Send by email» (opens HubSpot's email composer) or «Copy link». Then «Mark as sent» moves it to Sent.
Price above PM's max	The purchase price and the prefinance are above PM's maximums: «Create proposal» won't save until you lower them. You can only offer the same or less.
Supplier chooses on the page	If proposals are hosted in HubSpot, the route the supplier picks on the page comes back by itself: «Accepted» with the tag «Chosen on the proposal page».
Expired proposal	A proposal created more than 60 days ago: «Valid until», the «Expired» tag and a notice.
Stage moves by itself	Every vehicle has a price: the stage moves to «Price available» by itself. Once every proposal is sent, it moves to «Proposal sent».
Edit a sent proposal	When you edit a sent proposal, the yellow notice explains that the supplier will see the changes on the same link. It stays Sent.
Record the supplier's answer	On a sent proposal: «Supplier accepted» (you choose the route they picked) or «Supplier rejected». A rejection doesn't close the opportunity: you close it yourselves from the stage.
Close as lost (native)	HubSpot's own dialog (native, not part of the app) when the stage changes to Closed lost: you choose one of your 13 reasons; «Other» needs a comment. On the record, it opens by clicking the stage at the top left.

4. What you have already chosen

With your answers of 6 October, the prototype now shows only the chosen option:

Identical vehicles: A · Quantity. A single line item with a quantity. Mileage (or hours), license plate and VIN are entered per unit.
Proposal modal: simplified. The routes of sale are visible; selling prices, days and costs are folded into «More options».
One proposal, with one link and no versions: when it's edited, the supplier sees the changes on the same link.
Urgency is chosen once, with each level's timing shown. The license plate is stored with the vehicle. Capacity is in m³.
«Purchase» is now «Supply Opportunity». In bundles, the first registration is per unit. The vehicle has a location (address, postal code and country) and no longer a «Source», which belongs to the opportunity. The vehicles table shows a thumbnail of the main photo.
Routes of sale: Sell Direct (Purchase), Sell Direct (Auction), Sell Maximum (Consignment) and Sell Yourself (platform). When adding the vehicle you pick the ones the supplier is interested in and their prices are asked; only the asking price is required, unless the supplier only wants Sell Maximum or Sell Yourself. PM says which routes can be offered and always fills in all their prices; in the proposal, the ones PM doesn't offer are disabled. The auction starts at PM's auction floor price. Sell Yourself has an amount and a fee.
Supplier's answer: if they accept, you record which route they chose; if they reject it, the proposal is marked as rejected and the opportunity stays open until you close it.
Proposal (19 Oct): statuses Draft → Ready to send → Sent; the document with all proposals includes the Ready to send and Sent ones. Valid for 60 days; then Expired. If a new price is requested, it's withdrawn. You can't offer more than PM's maximums. The stage changes by itself when every vehicle has a price and when every proposal is sent.
Photos: from the list and the board, in a card in the preview panel (the developer confirms it's possible; it opens with a small button, so it's an extra). After uploading photos, «Refresh photos» shows them in the slider.

We have also adjusted several screens so they look like what can be built with HubSpot's components: the photo slider, photo upload, the photos and pricing card, and the notices when PM's price arrives.

The selectors in «Prototype controls» (Vehicles table, Proposal tab) are only there to show the states: with data, empty, loading and error.

5. What we need you to confirm

We made some decisions ourselves so the design works. They are in the panel, under «Our proposals · to confirm» (open it with the arrow): each line takes you to the screen where it shows. We take them as approved unless you tell us otherwise:

No.	Question
C28	Proposal rules: at least one route included (confirmed), the recommended one must be included, and the amounts of the included routes are required.
C48	The 60 days of validity count from the day the proposal is created.
C34	In a bundle, each unit has its own license plate. We put it per unit, like the VIN, and in every vehicle type. Is that right?
C35	With a single link, when a sent proposal is edited the supplier sees the changes straight away. We suggest it stays Sent and you let them know with «Send again by email». Does that work for you?
P8	If the license plate registry says something different from what the supplier sent, the lookup only fills in the empty fields and shows you the differences so you can decide. Is that right?

Our ideas

These ideas (numbered in the panel, so we can refer to them) aren't questions, but we'd like your opinion: do you want them, would you change them, or would you drop them?

No.	Idea	What it is and where to see it
I7	Reminder when every proposal is rejected	If the supplier rejects every proposal, a notice at the top of the Proposal tab reminds you that the opportunity is still open and that you close it from the stage.
I2	Notification and «New price» tag	When PM's price arrives: a HubSpot notification in the bell and a «New price» tag in the table until you open the vehicle.
I4	«Mark as sent» and «Send again»	On a Ready to send proposal, «Mark as sent» is always available: after sending it by email or on WhatsApp. On a Sent one, there is «Send again by email».
I5	Offers summary on the proposal card	The proposal card lists the included offers, their amounts and the recommended one, without opening the link.
I6	«Clear» on optional choices	In the form's «Optional information», a «Clear» link appears next to each group of options that has something selected, and empties that field.

6. What is not real

The data is made up and nothing is saved: reloading the page or clicking «Reset demo» puts everything back.
PM's prices, the license plate registry, sending emails and «Copy link» are simulated.
Uploading photos opens HubSpot's native file picker; here it simulates uploading two photos.
The public proposal page (proposal.basworld.com) is not part of this design: the proposal link only says that it would open.
The look is «similar, not exact» to HubSpot: what matters is where each piece goes and how it behaves.
For the developer: colours and type come from the variables of a portal with HubSpot's new theme. Components and their variants come from the @hubspot/ui-extensions 0.17.0 package and the official Figma kit, which uses the old theme (there is no kit for the new theme). Where we couldn't see a component in the new theme (for example Modal danger, ErrorState, StepperInput), the prototype draws it in a neutral way and the annotation says so: what the real component renders is what counts.

7. Words we use

Supply Opportunity	The purchase opportunity with a supplier (the record). Previously called «Purchase».
Line item	One vehicle, or a bundle of identical vehicles. Each one has its own price and proposal.
Bundle	A batch of identical vehicles: quantity and price per unit (5 × €20,000 = €100,000).
PM	The pricing team. They keep working in Bidmonitor; here we only see their answer.
Draft · Sent	The two statuses of a proposal.