saferoute-widgets-react v1.0.4

Пакет для интеграции виджетов SafeRoute в React-приложение.

Включает в себя все 3 виджета: корзинный, карточный и трекинг-виджет.

Информация о виджетах с демонстрацией.

• Установка
• Константы
  • Общие константы
  • Константы корзинного виджета
  • Константы трекинг-виджета
• Подключение корзинного виджета
• Подключение карточного виджета
• Подключение трекинг-виджета

Установка

NPM

npm i saferoute-widgets-react

Yarn

yarn add saferoute-widgets-react

В случае использования на сервере nodejs, можете воспользоваться нашим пакетом saferoute-api, включающим в себя функции для работы с API виджетов.

Константы

Общие константы

Язык интерфейса:

• LANGUAGES.RU - русский
• LANGUAGES.EN - английский

Валюта:

• CURRENCIES.RUB - рубль
• CURRENCIES.USD - американский доллар
• CURRENCIES.EURO - евро

Тип доставки:

• DELIVERY_TYPES.PICKUP - самовывоз
• DELIVERY_TYPES.COURIER - курьерская доставка
• DELIVERY_TYPES.POST - почта

Константы корзинного виджета

События виджета:

• CART_WIDGET_EVENTS.START
• CART_WIDGET_EVENTS.CHANGE
• CART_WIDGET_EVENTS.SELECT
• CART_WIDGET_EVENTS.STEP_CHANGE
• CART_WIDGET_EVENTS.RESTART
• CART_WIDGET_EVENTS.DONE
• CART_WIDGET_EVENTS.ERROR

Выбранный тип оплаты:

• CART_WIDGET_PAY_TYPES.COD - оплата при получении
• CART_WIDGET_PAY_TYPES.ACQUIRING - оплата он-лайн через виджет
• CART_WIDGET_PAY_TYPES.OTHER - оплата другим способом оплаты

Тип кнопки подтверждения на последнем шаге:

• CART_WIDGET_DONE_BUTTONS.CONFIRM - "Подтвердить"
• CART_WIDGET_DONE_BUTTONS.NEXT - "Далее"

Шаг:

• CART_WIDGET_STEPS.DELIVERY_SELECT - выбор доставки
• CART_WIDGET_STEPS.FORM - форма ввода контактов
• CART_WIDGET_STEPS.CONFIRMATION - подтверждение данных
• CART_WIDGET_STEPS.PAY - оплата

Константы трекинг-виджета

По чему производить немедленный трекинг:

• TRACKING_WIDGET_TRACK_BY.ID - ID заказа в SafeRoute
• TRACKING_WIDGET_TRACK_BY.CMS_ID - ID заказа в CMS интернет-магазина
• TRACKING_WIDGET_TRACK_BY.TRACK_NUMBER - трек-номер в службе доставки

Подключение корзинного виджета

Документация к виджету

import React, { useCallback, useState } from 'react';

import {
  CartWidget,
  CartWidgetParams,
  CartWidgetSelectEventData,
  CartWidgetChangeEventData,
  CartWidgetDoneEventData,
  CART_WIDGET_STEPS,
} from 'saferoute-widgets-react';

const CartWidgetTest: React.FC = () => {
  const [params, setParams] = useState<CartWidgetParams>({
    apiScript: 'http://localhost:8081/widget-api',
    products: [{ count: 1, price: 100 }],
  });

  const onStart = useCallback(() => {
    // Обработчик события 'start'
  }, []);
  
  const onRestart = useCallback(() => {
    // Обработчик события 'restart'
  }, []);
  
  const onSelect = useCallback((data: CartWidgetSelectEventData) => {
    // Обработчик события 'select'
  }, []);
  
  const onChange = useCallback((data: CartWidgetChangeEventData) => {
    // Обработчик события 'change'
  }, []);
  
  const onStepChange = useCallback((step: CART_WIDGET_STEPS) => {
    // Обработчик события 'stepChange'
  }, []);
  
  const onError = useCallback((errors: string[]) => {
    // Обработчик события 'error'
  }, []);
  
  const onDone = useCallback((data: CartWidgetDoneEventData) => {
    // Обработчик события 'done'
  }, []);

  return (
    <CartWidget
      params={params}
      onStart={onStart}
      onRestart={onRestart}
      onSelect={onSelect}
      onChange={onChange}
      onStepChange={onStepChange}
      onDone={onDone}
      onError={onError}
    />
  );
};

export default React.memo(CartWidgetTest);

Подключение карточного виджета

Документация к виджету

import React, { useRef } from 'react';

import { CardWidget, CardWidgetParams } from 'saferoute-widgets-react';

const CardWidgetTest: React.FC = () => {
  const params = useRef<CardWidgetParams>({
    apiScript: 'http://localhost:8081/widget-api',
  });

  return <CardWidget params={params.current} />;
};

export default React.memo(CardWidgetTest);

Подключение трекинг-виджета

Документация к виджету

import React, { useRef } from 'react';

import { TrackingWidget, TrackingWidgetParams } from 'saferoute-widgets-react';

const TrackingWidgetTest: React.FC = () => {
  const params = useRef<TrackingWidgetParams>({
    apiScript: 'http://localhost:8081/widget-api',
  });

  return <TrackingWidget params={params.current} />;
};

export default React.memo(TrackingWidgetTest);