# Signatu Policy React

This library contains [React](https://github.com/facebook/react) client components for Signatu Consent. It uses the Signatu consent service, and the library will interact with `signatu.com`.

## Installation

### npm

```sh
npm install @signatu/consent-react
```

## Demo

A live demo [is available on signatu.com](https://signatu.com/demo). The components will require that you supply your `Access Token`
and `API Key` to activate. You can also run the demo locally: `npm run start:dev`.

## Usage

The library contains the following components:

* `ConsentCheckbox`: Consent request using checkbox.
* `ConsentButtons`: Consent request using buttons.
* `TrackerConsent`: consent component for `Tracker` data - e.g., from a [Signatu Trackerdetect](https://signatu.com/products/trackerdetect).
* `DataProcessingGroup`: consent component for a Data Processing Group managed in Signatu. Creates a dashboard of all the `DataProcessingSpec` elements in the group. 
* `DataProcessingSpec`: consent component for a single Data Processing Spec managed in Signatu. 
* `DataProcessingConsent`: consent component for `PolicyDataProcessing` data - e.g., from a Privacy Policy generated with Signatu.
* `PolicyConsentDashboard`: consent component to generate a dashboard of all (or subset) of consent targets in a signatu Privacy Policy.
* `CookieBanner`: banner for consent to cookie / 3rd party usage.

The library also provides a function that generates [higher-order components](https://reactjs.org/docs/higher-order-components.html) from these base components:

* `makeConsentPopup()`: wrap any of the above components in a lightbox popup.
* `makeCondConsentPopup()`: wrap any of the above components in a conditional popup that will open only if the user previously has taken no action.

### Theming

The consent components support theming. Read more about themes in [@signatu/styles](https://github.com/signatu/styles). The theme support requires you to wrap the components with a `ThemeProvider`, as described in [@signatu/styles](https://github.com/signatu/styles).

### Properties

The components support (a subset of) the following props:

* `subject: string` - the subject principal. 
* `issuer: string` - The issuer principal, typically the URL of the Data Controller website. 
* `target: string` - what is being consented to, e.g., a URL.
* `source: string` (optional) - where the consent request was placed, e.g., a the URL of the webpage. 
* `scope: string` (optional) - the scope of the consent within the `target`. In a policy this is typically the clause ID, in a Data Processing Group this is the Data Processing Spec ID. 
* `language: string` (optional) - ISO 639-1 language code of the language to render. Default: `en`.
* `optOut: boolean` - if set, default the `action` to `true` if no `ConsentEvent` is found. Default is `false`.
* `delegate: string` (optional) - the delegate principal, e.g., a customer service representative ID. 
* `type: ConsentActionType`(optional) - `BUTTONS` or `CHECKBOX`. Defaults to `CHECKBOX`.
* `text: string | JSX.Element` (optional) - consent request text or element.
* `title: string | JSX.Element` (optional) - consent request title text or element
* `subtitle: string | JSX.Element` (optional) - Consent request subtitle text or element.
* `onLoaded(consent?: ConsentEvent): void` (optional) - callback function called when the Consent Event is loaded from Signatu.
* `onAction(consent: ConsentEvent): void` (optional) - callback function called when user has taken action - i.e., accepted or refused.

### Example usage

```jsx
import React from 'React';

import {Consent} from '@signatu/consent';
import {
      makeConsentPopup,
      ConsentCheckbox,
      ConsentButtons,
      DataProcessingConsent,
      TrackerConsent,
      PolicyConsentDashboard
} from '@signatu/consent-react';

import { ThemeProvider, createTheme } from '@signatu/styles';

const config = {
      apiKey: 'MY_API_KEY',
      accessToken: 'MY_ACCESS_TOKEN'
}

/** Make a popup of the ConsentButtons component */
const ConsentCheckboxPopup = makeConsentPopup(ConsentCheckbox)

/* Now embed the components */
const myTheme = createTheme({
      palette: {
            primary: {
                  main: "blue"
            }
      }
})

<ThemeProvider theme={myTheme}>
      <ConsentCheckbox
            id="checkbox_consent"
            config={config}
            subject={Consent.anonUserId()}
            issuer="signatu.com"
            target="signatu.com/demo">
                  <div>Contents of the consent message</div>
      </ConsentCheckbox>

      <ConsentCheckboxPopup
            id="buttons_consent"
            config={config}
            subject={Consent.anonUserId()}
            issuer="signatu.com"
            target="signatu.com/demo/buttons">
                  <div>Contents of the consent message</div>
      </ConsentCheckboxPopup>

      <DataProcessingConsent
            config={config}
            title="Direct Marketing"
            subtitle={<div>You can use elements as title and subtitle as well</div>}
            subject={Consent.anonUserId()}
            issuer="signatu.com"
            target="signatu.com/demo"
            language='en'
            dataprocessing={processing}
            >
      </DataProcessingConsent>

      <TrackerConsent
            config={config}
            tracker='googleanalytics'
            title='Google Analytics'
            subject={Consent.anonUserId()}
            issuer="signatu.com"
            target={`signatu.com/trackers`}
            scope='googleanalytics'
            onAction={(consent: ConsentEvent) => {}}
            onLoaded={(consent?: ConsentEvent) => {}}>
                  <div>
                        We use {this.state.selectedTracker.name} to analyze our web traffic to enable us to improve the user experience.
                  </div>
      </TrackerConsent>

      <PolicyConsentDashboard
            config={consentConfig}
            title="Policy Dashboard"
            subtitle={<span>You can withdraw your consent at any time in your <a href="https://signatu.com/app/account">Account Page</a>.</span>}
            elementIds={/** Array of element IDs to include. If not specified include all clauses */}
            subject={Consent.anonUserId()}
            policyId="123"
            language='en'
      />
</ThemeProvider>
```

### Typescript

Typescript types are included with the library.

## Further information

Go to [signatu.com](https://signatu.com) or send us an email on [support@signatu.com](mailto:support@signatu.com).

## License

This library is [MIT Licensed](LICENSE).
