# Aurigma Customer's Canvas SDK - Storefront API Client

This module is an Axios API client for Storefront 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-storefront-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 storefront = require("@aurigma/axios-storefront-api-client");
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 storefront.ApiClientConfiguration();
config.apiUrl = apiUrl;
config.setAuthorizationToken(token);

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

const productSpecificationsApiClient =
  new storefront.ProductSpecificationsApiClient(config);
const productSpecifications = await productSpecificationsApiClient.getAll();
```

### Frontend

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

```ts
import {
  ApiClientConfiguration,
  BuildInfoApiClient,
  ProductSpecificationsApiClient,
} from "@aurigma/axios-storefront-api-client";

// A token should be received from your backend
const token = "";
// In general you can use "https://api.customerscanvashub.com" as a base api url.
// But this url may be different for on-premises version of Customer's Canvas
const baseApiUrl = "https://api.customerscanvashub.com";

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

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

const productSpecificationsClient = new ProductSpecificationsApiClient(config);
productSpecificationsClient.getAll().then((data) => console.log(data));
```

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

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