@alvarium/check-in-widget

Check In Widget

This widget lists the check-ins for a given user. Then it allows the user to complete the check-in by clicking on the button.

Installation

Using UNPKG

<check-in-widget
  endpoint='https://alvdev.gw2.alvarium.io'
  userId='46efb827-6301-4f36-ba24-5948ec4b14a7'
  token='eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjYw'
  locale='es'
  components='{"photo": "/admin/widgets/photo","bank_account": "/admin/widgets/bank-accounts","document": "/admin/widgets/document", "address": "/admin/widgets/address"}'
></check-in-widget>

<link rel="stylesheet" href="https://unpkg.com/@alvarium/check-in-widget/dist/style.css" />
<script src="https://unpkg.com/@alvarium/check-in-widget/dist/index.js"></script>

Using NPM / Yarn in React projects

First you should install the package using npm or yarn:

npm

npm install @alvarium/check-in-widget

yarn

yarn add @alvarium/check-in-widget

Then you should include the CheckIn import, the style.css file and the component in your code like this:

import { CheckIn } from '@alvarium/check-in-widget/dist/lib'
import '@alvarium/check-in-widget/dist/lib/style.css'

<CheckIn
  endpoint='https://alvdev.gw2.alvarium.io'
  token='eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjYw'
  locale='es'
  userId='46efb827-6301-4f36-ba24-5948ec4b14a7'
  components='{
    "photo": "https://alvdev.gw2.alvarium.io/admin/widgets/photo",
    "bank_account": "https://alvdev.gw2.alvarium.io/admin/widgets/bank-accounts",
    "document": "https://alvdev.gw2.alvarium.io/admin/widgets/document",
    "address": "https://alvdev.gw2.alvarium.io/admin/widgets/address"
  }'
  deviceId='46efb827-6301-4f36-ba24-5948ec4b14a7'
/>

The component accepts the following props:

Prop	Required	Type	Description
endpoint	*	string	The Alvarium endpoint
deviceId	*	string	The device id of the tablet
userId	*	string	The user id
token	*	string	The token
locale	*	string	The locale
components	*	string	The components url to be rendered

Development

Install dependencies

yarn install

Run the project

yarn start

Build the project for unpkg distribution

yarn build

Build the library for npm distribution

yarn build:lib

Build both distributions for publishing

yarn build:all