> For the complete documentation index, see [llms.txt](https://docs.carpose.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.carpose.de/events/07_store-and-employee.md).

# 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](/events/01_introduction.md) 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 <a href="#store-select-event" id="store-select-event"></a>

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

**Event Name**: `carpose-store-select`

**Event Data**:

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

**How to Listen**:

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

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

### Store Contact Phone Event <a href="#store-contact-phone-event" id="store-contact-phone-event"></a>

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

**Event Name**: `carpose-store-contact-phone`

**Event Data**:

```json
{
  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**:

```javascript
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 <a href="#store-contact-mail-event" id="store-contact-mail-event"></a>

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

**Event Name**: `carpose-store-contact-mail`

**Event Data**:

```json
{
  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**:

```javascript
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 <a href="#employee-contact-phone-event" id="employee-contact-phone-event"></a>

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

**Event Name**: `carpose-employee-contact-phone`

**Event Data**:

```json
{
  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**:

```javascript
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 <a href="#employee-contact-mail-event" id="employee-contact-mail-event"></a>

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

**Event Name**: `carpose-employee-contact-mail`

**Event Data**:

```json
{
  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**:

```javascript
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 <a href="#floating-button-click-event" id="floating-button-click-event"></a>

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**:

```json
{
  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**:

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

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