## Merchant Admin Frontend

Merchant Admin Frontend is a Single Page Application (SPA) that connects with a running Merchant Backend and lets you manage instances, orders, products and tipping.

## System requirements

- Node: v12.18.4
- pnpm: 5.17.2
- make
- python>=3.8

For the latest version of @gnu-taler npm packages add:

```shell
@gnu-taler:registry=https://gitlab.com/api/v4/packages/npm/
```

into `.npmrc` file in your home folder.

## Compiling from source

Check the requirements and run `./bootstrap` and `./configure`:

```shell
./bootstrap
./configure
```

Then run `make` to install all the nodejs dependencies.

By default the installation prefix will be `/var/www/html` but it can be overridden by `--prefix` in the configuration process:

```shell
./configure --prefix=/another/directory
```

## Running develop

To run a development server run:

```shell
make dev
```

This should start a watch process that will reload the server every time that a file is saved.
Override the PORT variable to run the server in another port.

```shell
make dev PORT=9090
```

The application need to connect to a merchant-backend properly configured to run.

To run a UI development server run:

```shell
make dev-ui
```

UI development server will lookup for *.stories.tsx files and render examples of
pages. This examples are useful for test correctness, accessibility,
internationalization and code coverage.
## Building for deploy

To build and deploy the SPA in your local server run the install script:

```shell
make install
```

Additionally `make dist` will create a zip file with the content to upload into a server:

```shell
make dist
```

This SPA supports building all into a single HTML file for easy deployment.

```shell
make build-single
```

The result will be placed at `packages/frontend/single/index.html`.



## CLI Commands

*   `make compile`: Install dependencies and compile with typescript.

*   `make dev`: Run a development, HMR server. The application will automatically refresh
     every time a file is edited.

*   `make build`: Production-ready build into the `./build` directory. Print bundle size
     information and compare it with previous build using the `size-plugin.json` file.

*   `make serve`: Build and serves the content, useful to test the result.

*   `make lint`: Pass TypeScript files using ESLint.

*   `make check`: Run Jest and Enzyme with
    [`enzyme-adapter-preact-pure`](https://github.com/preactjs/enzyme-adapter-preact-pure) for
    your tests.

*   `make dev-ui`: Run visual components explorer. Useful for components design and development
    without the need of setting up the whole system.

## Runtime dependencies

*   Axios: Promise based HTTP client for the browser and node.js

*   preact: Fast 3kB alternative to React with the same modern API

*   preact-router: URL component router for Preact

*   SWR: React Hooks library for data fetching (stale-while-revalidate)

*   Yup: schema builder for value parsing and validation (to be deprecated)

*   Date-fns: library for manipulating javascript date

*   qrcode-generator: simplest qr implementation based on JIS X 0510:1999

*   @gnu-taler/taler-util: types and tooling