# Usercentrics Client

Usercentrics is a consents management service for GDPR. You can setup your users privacy configs via [UC panel](usercentrics.eu). Each app/domain should have a separate set up in the UC panel. Each app/domain identify by its `SETTING ID`.

UC client is a React.js component that only needs your UC `SETTING_ID` for loading/showing/managing your GDPR stuff. This component use React context for providing all data and configs that client needs from UC.

This client support two main types of UC UI appearance, banner and wall. The default appearance is wall but you can change it by setting the appearance value to banner in the UC provider component options prop.

You also can control the content language by setting your language code in options prop. Most of the translations come from UC configs which you can edit them in the dashboard. But we have a small util function for handling those texts translations that are not part of UC base config and we add them to the UI. For now the component support 5 languages in `i18n` util function which you can see a usage of it in `AcceptAndCloseCTA` component. AcceptAndCloseCTA component is not part of UC general UI. It is a good example of what you can do with this library in compare of UC general UI library regarding customisation level.

## Usage

You just need to install the client and then import the data provider and UI component in your app.

```sh
npm install @consumer/usercentrics-client
```

```tsx
import { UsercentricsProvider, Usercentrics } from '@consumer/usercentrics-client';
import dynamic 'next/dynamic';

const DynamicUsercentrics = dynamic({
  loader: import('@consumer/usercentrics-client').then(mod => mod.Usercenrtrics),
  ssr: false, // Never load this on server side
})

const App = () => {
  return (
    <UsercentricsProvider settingId="SETTING_ID">
      <Usercentrics />
    </UsercentricsProvider>
  );
};
```

## Development

This library created on top of [TSDX](https://www.npmjs.com/package/tsdx). There are a few npm scripts that help you to develop and build the library:

- start: watches files and build development bundle
- build: buils production bundle

For developing the library you also have access to a simple Next.js app in the example directory. Example app uses [relative-deps](https://github.com/mweststrate/relative-deps) to link the library. After a new build of the library, run `yarn prepare` inside the example folder to update the library for the example.

- Inside of `./example` run `yarn`
- Run `yarn build` then `yarn start`
- Open the localhost address displayed in the console

## Release notes / semantic versioning

Make sure to follow these [commit message conventions](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#-commit-message-format).
To get a preview of how the upcoming release notes and the new version number will look run `npx semantic-release --dry-run`.

## Deploying

### During development to test in frontend

Use `yarn link` to link the packages locally.

1. Run `yarn link` inside this project
2. Run `yarn build`
3. Switch to where you want to use the package. For example to `end-user-frontend-monorepo`. Run `yarn link @moebel.de/usercentrics-client` in there

Afterwards you should run `yarn unlink @moebel.de/usercentrics-client`

Further reading: [yarn docs](https://classic.yarnpkg.com/lang/en/docs/cli/link/)

### Before merging to master

[Semantic-release](https://www.npmjs.com/package/semantic-release) can take care of the npm release if you follow conventional commits rules. After adding changes to git staging, create a git commit according to [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary).