# Component groups and resources

The host sends messages grouped by component type. You subscribe by `ComponentGroup` to handle only the messages you care about. This page lists the component groups, the resource types used in Resource messages, and typical usage patterns with examples.

## Component groups

Messages have a `component.group` field. The possible values are the `ComponentGroup` enum:

| Group | Description |
|-------|-------------|
| `ComponentGroup.Dialog` | Modal dialogs: show, confirm, close. Types include Dialog, Confirm, ConfirmRemove, Loader. |
| `ComponentGroup.Feature` | Feature-related updates (e.g. change, new, remove). |
| `ComponentGroup.Navigation` | History (pop, push, replace) and redirect (admin, admin resource, extension, reload, remote). |
| `ComponentGroup.Resource` | Resource lifecycle: create, save, remove, done, error, acknowledge. |
| `ComponentGroup.Checkout` | Checkout state: freeze, refresh, resume, status. |
| `ComponentGroup.Handshake` | Handshake / initialization flow. |

Import the enum from the package:

```typescript
import { ComponentGroup } from '@finqu/app-link';
```

## Resource types

When the host sends Resource messages (e.g. opening a product or order), the payload often includes a resource type. The `ResourceType` enum lists the known types:

| Value | Description |
|-------|-------------|
| `ResourceType.PRODUCT` | product |
| `ResourceType.ORDER` | order |
| `ResourceType.CUSTOMER` | customer |
| `ResourceType.CUSTOMER_GROUP` | customer_group |
| `ResourceType.PRODUCT_CATEGORY` | product_category |
| `ResourceType.PAGE` | page |
| `ResourceType.BLOG` | blog |
| `ResourceType.CAMPAIGN` | campaign |
| `ResourceType.CHANNEL` | channel |
| `ResourceType.PAYMENT_METHOD` | payment_method |
| `ResourceType.SHIPPING_METHOD` | shipping_method |
| `ResourceType.RETURN` | return |

Use these when you need to branch on the kind of resource (e.g. show a product form vs an order form).

```typescript
import { ResourceType } from '@finqu/app-link';

if (message.payload?.type === ResourceType.PRODUCT) {
  // Load product editor
}
```

## Reacting to dialog events

Subscribe to `ComponentGroup.Dialog` to handle dialog show, confirm, and close. The host typically sends `Show` with options (title, content, url, buttons); when the user interacts, you may see `Confirm` or `Close` with payloads. Use the message `id` and `refId` if you need to send callbacks back (see [Messaging](messaging.mdx)).

**Example: log dialog actions and handle confirm**

```typescript
import { App, ComponentGroup } from '@finqu/app-link';

const app = App.create('my-app-id', 'https://admin.example.com');

app.ready(() => {
  app.subscribe(ComponentGroup.Dialog, (message) => {
    switch (message.action) {
      case 'Show':
        console.log('Dialog shown:', message.payload?.title);
        break;
      case 'Confirm':
        console.log('User confirmed');
        // Optionally dispatch a callback message; see host docs
        break;
      case 'Close':
        console.log('Dialog closed');
        break;
      default:
        console.log('Dialog action:', message.action);
    }
  });
});
```

## Handling resource open and save

When the host opens a resource (e.g. product, order), it sends a Resource message with action `Create` (and often payload containing type and id). Your app can load the resource and render the form; when the user saves, the host may expect a `Done` or similar response. Resource actions include: `Acknowledge`, `Create`, `Done`, `Error`, `Remove`, `Save`.

**Example: handle resource Create by type**

```typescript
import { App, ComponentGroup, ResourceType } from '@finqu/app-link';

app.subscribe(ComponentGroup.Resource, (message) => {
  if (message.action === 'Create') {
    const type = message.payload?.type;
    const id = message.payload?.id;

    if (type === ResourceType.PRODUCT) {
      // Load product and show product editor UI
      loadProduct(id);
    } else if (type === ResourceType.ORDER) {
      // Load order and show order view
      loadOrder(id);
    }
  }

  if (message.action === 'Save') {
    // Host may be notifying that save was requested; persist and then respond as per host docs
  }

  if (message.action === 'Done') {
    // Resource flow finished
  }
});
```

## Checkout status

The Checkout group is used for checkout-related state. Actions include `Freeze`, `Refresh`, `Resume`, and `Status`. The host may send `Status` with a payload indicating whether the checkout is valid or invalid.

**Example: react to checkout status**

```typescript
import { App, ComponentGroup } from '@finqu/app-link';

app.subscribe(ComponentGroup.Checkout, (message) => {
  if (message.action === 'Status') {
    const status = message.payload?.status;
    if (status === 'Valid') {
      // Checkout is valid; e.g. enable submit
    } else if (status === 'Invalid') {
      // Checkout is invalid; e.g. show errors
    }
  }
  if (message.action === 'Freeze') {
    // Host may be freezing the checkout UI
  }
  if (message.action === 'Resume') {
    // Host resumed
  }
});
```

## Navigation

Navigation messages (History and Redirect) let the host request history changes or redirects. Subscribe to `ComponentGroup.Navigation` and handle actions such as `Pop`, `Push`, `Replace` for history and `Admin`, `AdminResource`, `Extension`, `Reload`, `Remote` for redirect. The payload will contain the target URL or route as defined by the host.

**Example: handle redirect**

```typescript
app.subscribe(ComponentGroup.Navigation, (message) => {
  if (message.action === 'AdminResource') {
    const url = message.payload?.url;
    if (url) window.location.href = url;
  }
});
```

Implement the exact action names and payloads according to the Finqu Commerce host and your app contract. For more on message shape and callbacks, see [Messaging](messaging.mdx). For the full App API, see [App API](app-api.mdx).