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