# Embedded / Components

# Shopfront Embedded Bridge Components

The Shopfront Embedded Bridge includes several components that make it easy to perform actions or return data in
Shopfront. This document will show you how to use these components.

## Button
This will create a button to display in the POS. This is only ever used when an event expects a Button as the return
value.

### Constructor

| Field | Type | Description |
| --- | --- | --- |
| label | string | The label to show on the button |
| icon | string? | The icon to show before the label on the button (we force a size of 40px x 40px) |

**Button Constructor**

```javascript
import { Button } from "@shopfront/bridge";

const button = new Button(label, icon);
```

### Methods

**addEventListener**

This will add an event listener to the button.

*Arguments*

| Field | Type | Description |
| --- | --- | --- |
| event | string | The event to listen for (see below) |
| callback | `(data) => void` | The callback to call when the event is fired (see below for data description) |

*Returns*

- void

*Supported Events*

- `click`

| Field | Type | Description |
| --- | --- | --- |
| from | string | The [location](/documentation/Embedded/Receivable-Events#REQUEST_BUTTONS) where the button was clicked (e.g. ORDER_VIEW) |
| user | string | The ID of the user who clicked the button |
| id | string? | The ID of the resource that was clicked where applicable |

**Button.addEventListener**

```javascript
button.addEventListener("click", (data) => {
    if(data.user === "123456") {
        // Perform action
    }
});
```

**removeEventListener**

This will remove an event listener that was previously added to the button.

*Arguments*

| Field | Type | Description |
| --- | --- | --- |
| event | string | The event that was registered |
| callback | `(data) => void` | The function that was registered to be called |

*Returns*

- void

**Button.removeEventListener**

```javascript
const listener = () => {};
button.addEventListener("click", listener);
button.removeEventListener("click", listener);
```

## Redirect
This will redirect the user to the provided address. This is made up of two classes, `Redirect.Internal` and
`Redirect.External`, both of them accept the same arguments, however you can only use `Redirect.Interal` when you are 
redirecting to another page within Shopfront and you can only use `Redirect.External` when you are redirecting out of
Shopfront.

### Constructor

| Field | Type | Description |
| --- | --- | --- |
| to | string or URL | The address to redirect to. If you are using `Redirect.Internal` this must be a string, if you are using `Redirect.External` this must be a [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/URL) |

**Redirect Constructor**

```javascript
import { Redirect } from "@shopfront/bridge";
const redirect = new Redirect.Internal("/products");
application.send(redirect);
```

## Toast
This will show a temporary message at the top of the screen, normally used to indicate success or an error.

### Constructor

| Field | Type | Description |
| --- | --- | --- |
| type | string | The type of toast to show (see below) |
| message | string | The message to show on the toast |

*type*

- `success`
- `info`
- `warning`
- `error`

**Toast Constructor**

```javascript
import { Toast } from "@shopfront/bridge";
const toast = new Toast("success", "The integration was successful");
application.send(toast);
```

## Dialog
This will display an interactive dialog to the user. There is currently no restrictions on when a dialog can be
displayed. However this may change in the future to only be on certain events or on user interaction.

### Constructor

| Field | Type | Description |
| --- | --- | --- |
| type | string | The type of dialog to show (see below) |
| closable | boolean | Whether the dialog is closable by pressing the escape button on the keyboard or clicking in the background |
| header | string | The header of the dialog |
| content | string | The HTML content of the dialog |
| buttons | Array<[Button](/documentation/Embedded/Components#Button)> | The buttons to display on the dialog |

*type*

- `success`
- `information`
- `question`
- `danger`
- `warning`
- `error`
- `edit`
- `frame` (this is a special type that is larger and hides the header and buttons)

**Dialog Constructor**

```javascript
import { Dialog } from "@shopfront/bridge";
const dialog = new Dialog("error", true, "Invalid Data", "<p>The data provided was invalid</p>", new Button("OK"));
application.send(dialog);
```

### Methods

**addEventListener**

This will add an event listener to the dialog.

*Arguments*

| Field | Type | Description |
| --- | --- | --- |
| event | string | The event to listen for (see below) |
| callback | `(data) => void` | The callback to call when the event is fired (see below for data description) |

*Returns*

- void

*Supported Events*

- `close`

| Field | Type | Description |
| --- | --- | --- |
| how | string | How the dialog was closed (see below) |

*how*

- `button`
- `escape`
- `background`

**Dialog.addEventListener**

```javascript
dialog.addEventListener("close", (data) => {
    if(data.how === "button") {
        // Perform action
    }
});
```

**removeEventListener**

This will remove an event listener that was previously added to the dialog.

*Arguments*

| Field | Type | Description |
| --- | --- | --- |
| event | string | The event that was registered |
| callback | `(data) => void` | The function that was registered to be called |

*Returns*

- void

**Dialog.removeEventListener**

```javascript
const listener = () => {};
dialog.addEventListener("close", listener);
dialog.removeEventListener("close", listener);
```