Инструмент поиска складских запасов

Инструмент Stock Locator Tool — это React-компонент, который отображает цены и наличие в реальном времени для указанного номера детали производителя: уровни складских запасов, ценовые диапазоны и ссылки на дистрибьюторов. Он работает на базе API Octopart. Встраивайте его на страницы товаров, в инструменты закупок или в любое React-приложение.

Предварительные требования

• Проект на React

• Токен доступа OAuth 2.0 с областью действия supply.domain — тот же токен, который используется для прямых запросов к API (см. Authorization)

Установка

npm i @altiumnexar/stock-locator-tool

Базовое использование

import { StockLocatorTool } from "@altiumnexar/stock-locator-tool";

function MyPage() {
  return (
    <StockLocatorTool
      searchParameters={{ token: "YOUR_ACCESS_TOKEN" }}
    />
  );
}

Здесь отображается полноценный интерфейс поиска, в котором пользователи могут ввести любой MPN, чтобы увидеть актуальные предложения и наличие на складе.

Режим одной детали

Чтобы заранее подставить деталь и скрыть строку поиска — удобно для страницы сведений о товаре:

<StockLocatorTool
  searchParameters={{
    token: "YOUR_ACCESS_TOKEN",
    q: "LM358DR",
    disableSearch: true,
  }}
/>

Обработка токена

Срок действия токенов доступа истекает через 24 часа. Во время разработки можно временно жестко прописать токен. В рабочей среде получайте токен с вашего бэкенда через client_credentials grant и обновляйте его до истечения срока действия. Никогда не раскрывайте Client Secret в клиентском коде.

Дополнительные сведения

В репозитории GitHub описаны все доступные props:

• searchParameters — регион, валюта, фильтры authorized/in-stock, видимость строки поиска, лимит предложений и многое другое

• styles — светлая/темная тема, шрифт и полная справка по пользовательским токенам цветов

• hideColumns — управление тем, какие столбцы отображаются в таблице предложений