@tillhub/numpad-with-barcodes

Numpad that detects input from barcode scanners

Install

npm install --save @tillhub/numpad-with-barcodes

Usage

import React, { Component } from 'react'

import Numpad from '@tillhub/numpad-with-barcodes'

class Example extends Component {
  render () {
    return (
      <Numpad />
    )
  }
}

Properties

The component accepts optional properties. It is fully controlled, meaning that it passes changes in the input field to outside, and also expects to be passed the current value as a prop. The same applies to product - this implies that all product search, product selection, handling has to be done outside by the caller of NumPad. As NumPad does not store the product in state, it cannot compare old to new product - increasing value upon scan has also be handled by the caller.

Property	type	required	example	default	description
handleChange	function	yes	text => console.log(text)	n/a	This function will be called with the current text in the input field. It is triggered on every click in the keypad and on every change in the input field.
handleSelectProduct	function	yes	text => console.log(text)	n/a	This function will be called with the selected product object from the suggestions box.
searchProduct	function	yes	barcode => console.log('search product with barcode', barcode)	n/a	This function (async optional) will be called with the result after a barcode has been scanned. The component expects a return value of either an object with product information or null.
product	object	no	see section 'Product' below	null	In order for the NumPad to display product information, the product object has to have specific keys. More details below in 'Product' section.
pickedQty	string	no	'15.5'	'0'	The input field will be initiated with this value.
orderedQty	number	no	'45'	null	The quantity that was ordered - will be displayed in product information
disabled	boolean	no	true	false	If set to true, the input field and the keypad will be greyed out and disabled.
withoutInputField	boolean	no	true	false	If set to true, the input field will merely display values but not accept manual entry.
decimalSeparator	string	no	','	'.'	Pass in optional decimal separator. For now, only ',' is allowed as an alternative to '.'.
width	string	no	'800px'	'400px'	Determines the width of the input field and keypad. Both will have equal width.
additionalCounterInfo	node	no	of 500	null	Node will be displayed between the input field and the keypad. For example to indicate a total, e.g. 'of 500'.
additionalProductInfo	node	no	Current Stock: 230	null	Node will be displayed under the product information field.
text	object	no	See Product text options	See Product text options	Object of text fields to to desplay as field titles

import React, { Component } from 'react'
import NumPad from '@tillhub/numpad-with-barcodes'
import mockProducts from './mockProducts'

export default class App extends Component {
  state = {
    product: null,
    qty: '0'
  }

  handleClick = () => {
    // e.g. save something to API and clear product
    this.setState({ product: null })
  }

  fetchProduct = (barcode) => {
    const result = mockProducts.find(product => product.barcode === barcode)
    return new Promise(resolve => window.setTimeout(() => resolve(result), 1000))
  }

  handleBarcode = async barcode => {
    try {
      const product = await this.fetchProduct(barcode)

      if (!product || !product.id) {
        return this.setState({ product: null, qty: '0' })
      }

      // if same product has been scanned increase qty
      // otherwise start from 1
      let newQty = '1'
      if (this.state.product) {
        if (this.state.product.id === product.id) {
          newQty = (parseFloat(this.state.qty) + 1).toString()
        }
      }
      this.setState({ product, qty: newQty })
    } catch (err) {
      console.log(err)
      return this.setState({ product: null, qty: '0' })
    }
  }

  renderCurrentStock = () =>
    <div>Current Stock: {this.state.product && this.state.product.stock && this.state.product.stock.qty}</div>

  renderTotal = () =>
    <div style={{ marginBottom: '20px' }}>OUT OF {(this.state.product && this.state.product.order_qty) || '0'}</div>

  render() {
    return (
      <div>
        <NumPad
          handleChange={value => this.setState({ qty: value })}
          decimalSeparator=','
          handleBarcode={this.handleBarcode}
          additionalProductInfo={this.renderCurrentStock()}
          additionalCounterInfo={this.renderTotal()}
          product={this.state.product}
          pickedQty={this.state.qty || '0'} // default to '0' if you never want to show an empty input field
        />
        <button onClick={this.handleClick} style={{ marginTop: '20px' }}>Save</button>
      </div>
    )
  }
}

Product

NumPad expects product to be passed as a prop and this means all product search needs to be done by the caller of the NumPad. The product information needs to be passed as an object with specific keys.

// Product object example

{
  "id": "961cdd18-7d6e-4262-8da5-0908737cf8a0",
  "custom_id": "BEM31F011-G13",
  "name": "KISS PROOF LIP CRÈME - Liquid Lipstick - hibiscus",
  "barcode": "5694230071210",
  "stock": {
    "qty": 30
  },
  "order_qty": 100
}

Product text options and defaults.

text: {
  search: 'Search',
  scan: 'Please start scanning...',
  orderedQty: 'Ordered Qty',
  stock: 'Stock',
  product: 'Current Item'
}