# Aurigma Customer's Canvas SDK - Design Atoms API Client

This module is an Axios API client for Design Atoms API service which is a part of [**Customer's Canvas**](https://customerscanvas.com) web-to-print system. It is supposed that you are familiar with its services and understand how to use its APIs. To learn more about Customer's Canvas and its services, refer the [Getting Started section of its documentation](https://customerscanvas.com/dev/getting-started/intro.html).

The API client is automatically generated with [NSwag tool](https://github.com/RicoSuter/NSwag). If for any reasons this API client does not work well for you, feel free to generate it yourself using Swagger document published at [Customer's Canvas API Gateway](https://api.customerscanvashub.com/).

## Pre-requisites

To be able to use this package, you need to meet the following requirements:

- You must have an account at Customer's Canvas.
- You need to use it in Javascript\Typescript applications.

For other platforms, see the [Backend services](https://customerscanvas.com/dev/getting-started/about-backend-services.html) article in Customer's Canvas documentation.

## Usage

Install it as a regular npm package:

```
npm install @aurigma/axios-design-atoms-api-client
```

### NodeJs

Receive an access token through your backend as explained in the [documentation](https://customerscanvas.com/dev/getting-started/about-backend-services.html#authorization) and deliver it to your app.

```js
const designAtomsApiClient = require("@aurigma/axios-design-atoms-api-client").DesignAtomsApiClient;
const axios = require("axios").default;

// You need to create external app in BackOffice with required scopes to receive clientId\clientSecret
// https://customerscanvas.com/dev/getting-started/about-backend-services.html#authorization
const clientId = "";
const clientSecret = "";
const apiUrl = "https://api.customerscanvashub.com/";

const getToken = async (clientId, clientSecret) => {
  const requestConfig = {
    method: "post",
    url: apiUrl + "connect/token",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    data: new URLSearchParams({
      client_id: clientId,
      client_secret: clientSecret,
      grant_type: "client_credentials",
    }),
  };

  const response = await axios(requestConfig);
  return response.data["access_token"];
};

const token = await getToken(clientId, clientSecret);
```

And then you can call ApiClients methods with this token:

```js
const config = new designAtomsApiClient.ApiClientConfiguration();
config.apiUrl = apiUrl;
config.setAuthorizationToken(token);

const buildInfoClient = new designAtomsApiClient.BuildInfoApiClient(config);
const buildInfo = await buildInfoClient.getInfo();

console.log(token);
console.log(buildInfo);
```

### Frontend

You should retrieve access token from your backend, how it's explained above.

```ts
import { DesignAtomsApiClient } from "@aurigma/axios-design-atoms-api-client";

// get token on backend by clientId\clientSecret. Never use clientId\clientSecret on frontend!
// https://customerscanvas.com/dev/getting-started/about-backend-services.html#authorization
const token = "";

const config = new DesignAtomsApiClient.ApiClientConfiguration();
config.apiUrl = "";
config.setAuthorizationToken(token);

const buildInfoClient = new DesignAtomsApiClient.BuildInfoApiClient(config)
buildInfoClient.getInfo().then(data => console.log(data));
```

To find out what other clients are available in this module, refer [Design Atoms API Reference](https://customerscanvas.com/dev/backend/backend/api/DesignAtoms.OpenApi2.html).

> NOTE: The class name for each client is formed as <i>ClientName</i>ApiClient, e.g. `BuildInfo` -> `BuildInfoApiClient`, etc.