# Tamedia Paywall Integration as React Component

A way to integrate the Tamedia paywall into your projects, in case you have to.

## Installation

```bash
yarn add @ta-interaktiv/react-paywall
```

## Usage

This component is already integrated into [@ta-interaktiv/react-masthead][]
and enabled by default.
As long as you use the masthead as part of your project, you should be good
to go. In other cases, refer to the example [below](#tamediapaywall).

### Example outside of Masthead

```javascript
import * as React from 'react'
import { Paywall as TamediaPaywall } from '@ta-interaktiv/react-paywall'
import { json } from 'd3-fetch'

export class MyComponent extends React.Component {
  state = {
    paywallConfiguration: {},
    paywallStatus: 0
  }

  render() {
    return (
      <div>
        {this.state.paywallStatus > 0
        && Object.entries(this.state.paywallConfiguration).length > 0
        && (<TamediaPaywall
            isEnabled={true}
            paywallConfiguration={this.state.paywallConfiguration}
            paywallStatus={this.state.paywallStatus}
          />)
        }
      </div>
    )
  }

  componentDidMount() {
    // Get data from the Newsnet API, likely using d3-fetch
    // and set it using setState

    json(`//api-endpoint`).then(data => {
      this.setState({
        paywallConfiguration: data.paywall,
        paywallStatus: data.configs.paywall_status
      })
    }
  }
}
```

[@ta-interaktiv/react-masthead]: https://www.npmjs.com/package/@ta-interaktiv/react-masthead

### In-App Behaviour

This component tracks the URL of the project. In case the `appwebview` query
parameter is present, the component will **not** render the paywall, is in
this case this should be handled by the app itself.

## Documentation

[Can be found here.](https://gitlab.com/ta-interaktiv/packages/tree/master/packages/react-paywall/docs)