# Quote Module Collection

Custom-coded HubSpot CPQ quote modules created by [worksby.design](https://worksby.design).

---

## Requirements

- HubSpot CMS Hub (Professional or Enterprise)
- [HubSpot CLI](https://developers.hubspot.com/docs/cms/developer-reference/local-development-cli) installed and authenticated to your portal

---

## Installation

From inside this folder, run:

```bash
hs project upload
```

The modules will be available in the Quote Template editor immediately after upload.

---

## Modules

| Module | Purpose |
|---|---|
| **Quote Header** | Formal document header — logo, quote reference, issue and expiry dates, prepared for/by |
| **Quote Cover** | Branded hero section — buyer company name, quote title, sender card, status badge, expiry countdown |
| **Quote Navigation** | Sticky section navigation bar — auto-discovers sections from other modules |
| **Quote Introduction** | Executive summary — editable message, optional video embed, sender bio card |
| **Quote Line Items** | Custom line items table — SKU-based filtering, recurring billing badges, subtotal row. While editing a quote, hover the table for "Add line item" / "Edit all line items" buttons (top-right) that open HubSpot's own product picker and line-item editor |
| **Quote Products Anchor** | Zero-height anchor — only needed when using HubSpot's built-in line items module instead of Quote Line Items |
| **Quote Pricing Summary** | Subtotal, discount, tax, and total; payment terms and accepted payment methods |
| **Quote Timeline** | "What happens next" — configurable post-signing milestones |
| **Quote Terms** | Terms & conditions sections — collapsible on web, fully expanded in PDF |
| **Quote Signature** | Signer status cards, sign CTA button, PDF signature lines, accepted banner |
| **Fancy Example** | Developer reference module — demonstrates every field type and layout pattern |
| **Debug: Quote Context** | Developer utility — dumps live quote data as JSON for inspection; remove before going live |

---

## Recommended module order

### With Quote Line Items (recommended)

```
Quote Header
Quote Cover
Quote Navigation
Quote Introduction
Quote Line Items
Quote Pricing Summary
Quote Timeline
Quote Terms
Quote Signature
```

### With HubSpot's built-in line items module

```
Quote Header
Quote Cover
Quote Navigation
Quote Introduction
Quote Products Anchor    ← place immediately above the built-in line items module
[HubSpot line items module]
Quote Pricing Summary
Quote Timeline
Quote Terms
Quote Signature
```

---

## Brand colours

All modules read your primary brand colour automatically from your HubSpot brand kit (`brand_settings.primaryColor`). No manual configuration is needed.

To override the colour for a specific module, set the **Primary colour** field in that module's style settings.

---

## SKU filtering (Quote Line Items)

You can place multiple Quote Line Items modules on a single template and filter each one by SKU prefix:

- **Include only — SKU starts with**: only shows items whose SKU matches one of the listed prefixes (comma-separated)
- **Exclude — SKU starts with**: hides items whose SKU matches any of the listed prefixes

Example — split a quote into two tables:

```
Quote Line Items  heading="Software"          includeSkuPrefixes="sw-"
Quote Line Items  heading="Professional Services"  includeSkuPrefixes="svc-"
```

Set **Register as Products nav anchor** to `true` on the first table only.

---

## Editing line items (Quote Line Items)

While editing a quote (or the template), hover the Quote Line Items table: **Add line item** and **Edit all line items** buttons appear at its top right and open HubSpot's native product picker and line-item editor. These buttons exist only inside the HubSpot editor — buyers never see them on the published quote or in the PDF.

Two module fields control them: **Editor: line item buttons** (turn them off entirely) and **Editor: always show buttons** (show permanently instead of on hover). If they ever stop opening the panels after a HubSpot update, just switch them off — the table itself is unaffected.

---

## PDF behaviour

All modules render a fully readable static version for PDF export. Interactive features (countdown timer, sticky nav, accordion terms, sign button) are web-only enhancements layered on top — they do not affect the PDF.

Quote Navigation is hidden entirely in PDF output.

---

## Support

Questions or issues? Reach us at [hello@worksby.design](mailto:hello@worksby.design) or visit [worksby.design](https://worksby.design).
