Skip to main content
Version: 0.0.12

Quick Start

This section will guide you through the process of installing and using the kampmann-calcgateway-frontend package in the most basic form. Please refer to the following sections for more detailed information.

Installation​

To install the kampmann-calcgateway-frontend package, you need to have Node.js and npm (or yarn) installed on your machine. Run the following command to install the package:

npm install kampmann-calcgateway-frontend

Basic Usage​

import {CalcGatewayForm, useGetUIControls} from 'kampmann-calcgateway-frontend'
import { useEffect, useState } from 'react'

//Import the styles - these are prefixed classes to avoid conflicts with your own styles
import 'kampmann-calcgateway-frontend/dist/style.css'

function App() {

  //This state is passed as a callback to the CalcGatewayForm component and will store the Request Form result
  const [result, setResult] = useState({})

  //This is the request body that will be used to fetch the UI Controls from the backend
  const reqBody = {
    ProductIds: [],
    ProductGroupIds: [51050],
    ProductFamilyIds: [],
    InterfaceI18n: {
      Language: RequestLanguage.DE,
      Region: RequestRegion.DE,
      UnitSystem: RequestUnitSystem.METRIC,
    },
    CalculationI18n: {
      Language: RequestLanguage.DE,
      Region: RequestRegion.DE,
      UnitSystem: RequestUnitSystem.METRIC,
    },
    includeAccessory: false
  }

  //Log the result when it changes
  useEffect(() => {
    console.log(result)
  }, [result])

  const url = "your/custom/url" // please contact us for your custom url

  /* Fetch the UI Controls from the backend using the useGetUIControls hook
  This hook is just a simple wrapper around the fetch API
  You may use your own fetch implementation if you prefer */
  const {loading, error, data} = useGetUIControls(url, reqBody)

  if (loading) return <p>Loading...</p>;
  if (error) {
    console.error(error)
    return <p>Error :(</p>;
  }

  return (
      <CalcGatewayForm UIControls={data} callback={setResult}  />
  );
}

export default App

Calculating products​

The callback returns an object requestBody that contains an array productIds. To send a valid calculation request, this array has to be filled with product Ids.