Skip to main content

Version: 24.04

Open UX Core Library

The Open UX Core Library contains all of the internal library calls and functions needed to interact with Journey Manager.

Installation​

To add the Open UX Core Library to a project, install it via Artifactory:

note

You must obtain your own Artifactory credentials to complete this step.

In the command line or terminal, run the following commands:

  1. Set the default npm registry for Open UX scoped packages.

    npm config set @transact-open-ux:registry https://internal-artifactory.avoka.com/artifactory/api/npm/npm/

  2. Authenticate the npm client to Artifactory.

    npm login --registry https://internal-artifactory.avoka.com/artifactory/api/npm/npm/

    This command prompts you to press Enter then log into Artifactory in the browser with your username and password. Once authenticated in the browser you can return to the command line.

  3. Verify your ~/.npmrc file has content similar to the following:

    @transact-open-ux:registry=https://internal-artifactory.avoka.com/artifactory/api/npm/npm/
    //internal-artifactory.avoka.com/artifactory/api/npm/npm/:_authToken=<_authToken>

  1. Install the @transact-open-ux/core package.

    npm install --save @transact-open-ux/core

If you create a project with the transact create command and don't use a custom template, you won't need to manually install this library. It'll be installed for you.

Build Pipeline​

For the sake of productivity, we recommend setting up a modern build pipeline when developing with Open UX. Typically, a modern build pipeline consists of the following:

  1. A package manager for installing and managing third-party packages. The most popular options are NPM or Yarn, with Yarn quickly becoming the preferred option.
  2. A bundler for writing modular code across a number of files and then bundling those files together for the sake of performance in your production build. There are many bundlers in the world but webpack is the industry standard.
  3. A complier for writing modern JavaScript that works in older browsers. Babel is the defacto choice and the code samples throughout this documentation assume that you're using it.
info

When using Open UX's React template, a build process is included with the template. This means there's no manual setup required to gain these productivity benefits.

Integrating with Journey Manager​

The @transact-open-ux/core library provides API calls that make it easy for an application to communicate with an instance of Journey Manager.

To view the Open UX API application flow, see the "Application Flow" section.

If you are not using the @transact-open-ux/react companion library we recommend using a state management library such as Redux along with Asynchronous middleware to manage your data. This, however, can be accomplished in other ways depending on your JavaScript stack.

Browser and Receipt Support​

By default, the generated library supports all modern browsers.

info

Support for Internet Explorer 9, 10, and 11 requires polyfills.

Receipt Styling​

You can style your receipts by using the @media print media query.

Example:

@media print {
  body {
    background: white;
    font-size: 10pt;
  }

  button {
    display: none;
  }
}

Conditional JavaScript for Receipts​

You can use the isReceipt variable from the Journey Manager Open UX Core library and use this to determine whether to render components or not.

Here's an example using React.

import React from "react";
import Receipt from "./Receipt";
import PageController from "./PageController";
import { isReceipt } from "@transact-open-ux/core";

const App = () => (
  <React.Fragment>
    {isReceipt ? <Receipt /> : <PageController />}
  </React.Fragment>
);

export default App;