Overview
This release delivers four builder enhancements: Assign Brand Template with live Algolia-backed customer search and full customer detail fetch; Sales Rep assignment and email from the canvas; an inline Auth panel in the builder for sign-in/sign-up without leaving the flow; and a 2D ruler with draggable guidelines for precise layout.
Assign Brand Template — Algolia Data Fetch
Search Endpoint
The Brand Template panel searches for customers via a Next.js API route that proxies to Algolia. This keeps the Algolia API key server-side and supports facet filters.
| Component | Purpose |
|---|---|
/api/customers/search | Server-side proxy to Algolia REST API |
brand-template.service.ts | searchCustomers(query) — calls the API; getCustomerWithAssets(custNumber) — fetches full details from Game One |
AlgoliaCustomerHit | Type for search results (name, cust_number, location, colors, sales_rep) |
GameOneCustomerResponse | Full customer payload with assets, logos, colors |
Flow
- User types 5+ characters in the Brand Template search field
- Debounced request hits
/api/customers/searchwith query - Algolia returns hits; panel displays
BrandResultCardlist (name, location, color swatches) - User clicks a result →
getCustomerWithAssets()fetches full customer details + assets from Game One - User confirms → colors and logos are applied to the builder session;
sales_repis stored in brand template context
Environment
ALGOLIA_APP_IDandALGOLIA_API_KEYrequired for customer searchNEXT_PUBLIC_GAME_ONE_API_URLfor full customer + asset fetch
Sales Rep Assignment and Email
Assignment Flow
When a brand template is applied, the selected customer's sales rep (name, ID, email) is stored and displayed in the canvas area.
Sales Rep Badge
| Component | Purpose |
|---|---|
SalesRepBadge | Floating badge at bottom-right of canvas; shows rep name and avatar |
SalesRepEmailPopover | Popover with subject + message form; sends email to the rep |
sendRepEmailAction | Server action that dispatches the email via configured transport |
User States
| State | Behavior |
|---|---|
| Authenticated + template applied | Badge shows rep info; "Email" button opens popover to compose and send |
| Authenticated, no template | Badge prompts "Assign your sales rep" (apply a brand template) |
| Guest | Badge prompts "Sign up to assign your sales rep" — opens Auth panel |
Technical Details
template.sales_rep,template.sales_rep_id,template.sales_rep_emailfromBrandTemplateContext- Schema:
repEmail,subject,messagewith Zod validation - Translations:
builder:salesRep.*
Auth Container in Builder
Inline Auth Panel
An Auth panel renders in the same 1/3-width slot used by Builder Steps, Brand Template, and Quotes. It allows guests to sign in or sign up without leaving the builder.
| Component | Purpose |
|---|---|
AuthPanel | Renders SignInMethodsContainer or SignUpMethodsContainer with tab switcher |
AuthPanelProvider | Context: isAuthPanelOpen, authMode, openAuthPanel, closeAuthPanel |
useAuthPanelSafe | Returns context or null (safe for optional use) |
Panel Priority
Only one overlay panel can be open at a time. Priority order:
- AuthPanel — when auth panel is open (highest priority)
- QuotesPanel — My Quotes
- BrandTemplatePanel — Assign Brand Template
- BuilderStepsPanel — Default step content
Triggers
- Sidebar — "Sign In" / "Sign Up" buttons in Quick Actions
- Sales Rep Badge — When guest, "Sign up to assign your sales rep" opens auth in sign-up mode
- Quote Wizard —
QuoteAuthGatehandles auth within the quote flow (separate from AuthPanel)
Behavior
- Listens for Supabase
SIGNED_INevent → closes panel and callsrouter.refresh() - Return path after auth is the current page URL (user stays in builder)
Ruler for 2D Canvas
Canvas Ruler Component
Photoshop/Illustrator-style rulers on the top (horizontal) and left (vertical) edges of the 2D canvas, with draggable guidelines.
| Feature | Detail |
|---|---|
| Rulers | 24px bars with tick marks (minor 10px, medium 50px, major 100px with labels) |
| Guidelines | Cyan lines; drag to reposition; drag back to ruler or double-click to remove |
| Corner | Double-click corner square to clear all guidelines |
| Visibility | Only shown in 2D mode (visible prop) |
| Mouse indicator | Position indicator on ruler edges when hovering over content |
Interaction
- Drag from horizontal ruler → create horizontal guideline
- Drag from vertical ruler → create vertical guideline
- Drag existing guideline → reposition
- Drag guideline back onto ruler → remove
- Double-click guideline → remove
- Double-click corner → clear all
Guidelines are purely visual — they do not snap or constrain canvas objects.
Integration
| File | Role |
|---|---|
canvas-ruler.tsx | CanvasRuler component; drawHorizontalRuler, drawVerticalRuler helpers |
use-guidelines.ts | Hook for guideline state (add, update, remove, clear) |
builder-canvas-panel.tsx | Wraps fabric canvas with CanvasRuler; ruler toolbar toggle in canvas-toolbar.tsx |
Integration Summary
| Area | Key Files |
|---|---|
| Algolia / Brand Template | api/customers/search/route.ts, brand-template.service.ts, brand-template-panel.tsx |
| Sales Rep | sales-rep-badge.tsx, sales-rep-email-popover.tsx, send-rep-email.action.ts |
| Auth | auth-panel.tsx, auth-panel-provider.tsx, builder-layout.tsx |
| Ruler | canvas-ruler.tsx, use-guidelines.ts, builder-canvas-panel.tsx |
