bec-react-utils

A utility library for BECOM Electronics React applications. Provides services, types, and utilities for communicating with Profound UI (PUI) backends and integrating with the RDF (Rich Display Framework) messaging layer.

Installation

npm install bec-react-utils

Peer Dependencies

This library requires the following packages to be installed in your project:

npm install axios bec-react-types

Services

getApi()

Returns a pre-configured Axios instance that targets the Profound UI universal endpoint (/profoundui/universal/). It automatically appends the current PUI auth token to every request.

import { getApi } from "bec-react-utils";

const api = getApi();
const response = await api<MyType>("some/endpoint");

getPuiAuth() / setPuiAuthRef(value: string)

Gets or sets the current PUI authentication token stored in a module-level ref. Call setPuiAuthRef once during app initialisation (e.g. after receiving a getInfo message from the RDF layer).

import { getPuiAuth, setPuiAuthRef } from "bec-react-utils";

setPuiAuthRef("MY_AUTH_TOKEN");
console.log(getPuiAuth()); // "MY_AUTH_TOKEN"

getBtrmRef() / setBtrmRef(value: number)

Gets or sets the current BTRM (Betrieb/Mandant) value stored in a module-level ref.

import { getBtrmRef, setBtrmRef } from "bec-react-utils";

setBtrmRef(42);
console.log(getBtrmRef()); // 42

LoadCompaniesService()

Fetches the list of available companies from the preplogon/comp endpoint. Returns an array of ICompany objects or an ApplicationError on failure.

import { LoadCompaniesService } from "bec-react-utils";

const result = await LoadCompaniesService();

if ("errorCode" in result) {
  // handle ApplicationError
} else {
  // result is ICompany[]
}

LoadFunctions()

Fetches the list of available functions for the current Betrieb/Mandant from the functions/?mand=<btrm> endpoint. The BTRM value is read automatically from the module-level ref (set via setBtrmRef). Returns an array of FunctionBoxItem objects from bec-react-types, or an ApplicationError on failure.

import { LoadFunctions } from "bec-react-utils";

const result = await LoadFunctions();

if ("errorCode" in result) {
  // handle ApplicationError
} else {
  // result is FunctionBoxItem[]
}

RDF Communication

Utilities for exchanging messages between your React app and a parent Profound UI RDF frame.

RegisterRDFCommunication(callback)

Registers a window message listener. The callback receives action and payload (JSON string) from each incoming message. Safe to call multiple times — only one listener is ever registered.

import { RegisterRDFCommunication } from "bec-react-utils";

RegisterRDFCommunication((action, payload) => {
  if (action === "getInfo") {
    const info = JSON.parse(payload);
    setPuiAuthRef(info.AUTH);
    setBtrmRef(info.BTRM);
  }
});

UnRegisterRDFCommunication()

Removes the RDF message listener.

import { UnRegisterRDFCommunication } from "bec-react-utils";

UnRegisterRDFCommunication();

SendRDFCommand(command, payload?)

Posts a command message to the parent frame via window.parent.postMessage. In development mode (import.meta.env.MODE === "development"), commands are intercepted and simulated locally instead.

| Command | Description | |---------|-------------| | "getInfo" | Requests app info (AUTH, BTRM, ACCESS) from the parent frame | | "fnct" | Opens a function by name | | "print" | Triggers a print action | | "scrshot" | Takes a screenshot | | "close" | Closes the application |

import { SendRDFCommand } from "bec-react-utils";

SendRDFCommand("getInfo");
SendRDFCommand("fnct", "ORDERS");

Utils

logger

A singleton logger with configurable log levels. Logs are stored in memory and can be retrieved programmatically.

Log levels (in order): "debug" | "info" | "warn" | "error" | "none"

import { logger } from "bec-react-utils";

logger.setLevel("debug"); // show all logs
logger.debug("Loaded", { count: 5 });
logger.info("Ready");
logger.warn("Something looks off");
logger.error("Something went wrong");

const allLogs = logger.getLogs(); // returns LogEntry[]

Setting the level to "none" suppresses all output.

Types

| Type | Description | |------|-------------| | ICompany | { compid: string; compname: string } — a company record | | ICompanyResponse | Response shape from the companies endpoint | | IFunctionsResponse | Response shape for function box queries, uses FunctionBoxItem from bec-react-types | | IInfoPayload | { BTRM: number; AUTH: string } — the app info payload from RDF | | IMessageDetail | { action: string; payload: object } — a raw RDF message | | IMessageEventDetail | Wrapper around IMessageDetail for typed window message events |