Skip to content

Brand Auto-Complete with Add for Products

As a Host, I want to use an auto-complete field for Brand when adding or editing products, So that I can quickly select existing brands or add new ones without typing the full brand name, ensuring brand name consistency across products.

  • Given I am adding or editing a product
  • When I focus on the Brand field
  • Then I see an auto-complete dropdown that:
    • Displays existing brands that match my input as I type
    • Shows all existing brands from products already in my inventory
    • Filters results in real-time as I type
    • Highlights matching text in suggestions
  • And when I select an existing brand from the dropdown
  • Then the Brand field is populated with the selected brand name
  • And when I type a brand name that doesn’t exist
  • Then I can add the new brand:
    • Either by pressing Enter or clicking an “Add [brand name]” option
    • The new brand is saved and immediately available for future use
    • The Brand field is populated with the newly added brand
  • And the brand suggestions are:
    • Case-insensitive for matching
    • Sorted alphabetically
    • Deduplicated (no duplicate brand names)
    • Scoped to the current venue/bar context

⏳ NOT YET IMPLEMENTED

Medium - Improves user experience and data consistency when adding products

  • Product (brand field)
  • Brand (potential new entity or derived from Product.brand values)
  • AddProductToInventory (C50) - May need enhancement to handle brand creation
  • Potential new command: CreateBrand or brand creation handled within product creation flow
  • This feature should work seamlessly with both manual product addition and barcode scanning workflows
  • Brand data could be:
    • Stored as a separate Brand entity (normalized approach)
    • Or derived from unique Product.brand values (simpler approach, suitable for MVP)
  • Consider implementing similar auto-complete patterns for other product fields (Category, Type) if this proves successful
  • The auto-complete component should be reusable for other fields that benefit from this pattern