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:

Import the enum from the package:

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:

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

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).

Example: log dialog actions and handle confirm

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

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

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

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. For the full App API, see App API.