Store and Employee

This page documents the carpose-store-*, carpose-employee-* and carpose-ui-* events dispatched by the Carposé application.

All events below are dispatched in the v2 envelope on document.body.

Store

Every store event carries the same base payload shape: { id, name }.

Note: carpose-store-select is dispatched only from the store map marker (Store/Map.tsx). The plain store list (Store/List.tsx) has no click handler on its rows, so browsing a list of stores does not by itself emit a select event — only interacting with a map marker does.

Store Select Event

Dispatched when a user selects a store marker on the store map.

Event Name: carpose-store-select

Event Data:

{
  message: "Store select",
  type: "store",
  action: "select",
  component: "store-map",
  version: 2,
  data: {
    id: "store-42",
    name: "Autohaus Musterstadt"
  }
}

How to Listen:

document.body.addEventListener('carpose-store-select', function(event) {
  const store = event.detail.data;

  console.log('Store selected:', store.name);
});

Store Contact Phone Event

Dispatched when a user clicks a tel: contact link for a store.

Event Name: carpose-store-contact-phone

Event Data:

{
  message: "Store contact phone",
  type: "store",
  feature: "contact",
  action: "phone",
  channel: "phone",
  component: "store-list",
  version: 2,
  data: {
    id: "store-42",
    name: "Autohaus Musterstadt"
  }
}

How to Listen:

document.body.addEventListener('carpose-store-contact-phone', function(event) {
  const store = event.detail.data;

  console.log('Phone contact initiated for store:', store.name);
});

Store Contact Mail Event

Dispatched when a user clicks a mailto: contact link for a store.

Event Name: carpose-store-contact-mail

Event Data:

{
  message: "Store contact mail",
  type: "store",
  feature: "contact",
  action: "mail",
  channel: "mail",
  component: "store-list",
  version: 2,
  data: {
    id: "store-42",
    name: "Autohaus Musterstadt"
  }
}

How to Listen:

document.body.addEventListener('carpose-store-contact-mail', function(event) {
  const store = event.detail.data;

  console.log('Mail contact initiated for store:', store.name);
});

Employee

Note: there is no carpose-employee-select. Employee cards are static — only their tel: and mailto: links are interactive, so those are the only employee events that exist.

Employee Contact Phone Event

Dispatched when a user clicks a tel: contact link for an employee.

Event Name: carpose-employee-contact-phone

Event Data:

{
  message: "Employee contact phone",
  type: "employee",
  feature: "contact",
  action: "phone",
  channel: "phone",
  component: "employee-list",
  version: 2,
  data: {
    id: "employee-7",
    firstname: "Max",
    lastname: "Mustermann"
  }
}

How to Listen:

document.body.addEventListener('carpose-employee-contact-phone', function(event) {
  const employee = event.detail.data;

  console.log('Phone contact initiated for employee:', employee.firstname, employee.lastname);
});

Employee Contact Mail Event

Dispatched when a user clicks a mailto: contact link for an employee.

Event Name: carpose-employee-contact-mail

Event Data:

{
  message: "Employee contact mail",
  type: "employee",
  feature: "contact",
  action: "mail",
  channel: "mail",
  component: "employee-list",
  version: 2,
  data: {
    id: "employee-7",
    firstname: "Max",
    lastname: "Mustermann"
  }
}

How to Listen:

document.body.addEventListener('carpose-employee-contact-mail', function(event) {
  const employee = event.detail.data;

  console.log('Mail contact initiated for employee:', employee.firstname, employee.lastname);
});

UI

Floating Button Click Event

Dispatched when a user clicks a configured floating link button (a generic, non-vehicle/offer/store/employee floating action).

Event Name: carpose-ui-floating-button-click

Event Data:

{
  message: "Floating button click",
  type: "ui",
  action: "floating-button-click",
  component: "floating-buttons",
  version: 2,
  data: {
    label: "Zum Konfigurator",
    url: "https://example.com/configurator"
  }
}

How to Listen:

document.body.addEventListener('carpose-ui-floating-button-click', function(event) {
  const { label, url } = event.detail.data;

  console.log('Floating button clicked:', label, url);
});