# grading-widget

> Что нужно знать для использования библиотеки в своем проекте 1. Для установки: npm i grading-widget

Latest version **1.6.4** (published 2026-09-17) · 0 weekly downloads

## Install

```sh
npm install grading-widget
pnpm add grading-widget
yarn add grading-widget
bun add grading-widget
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.6.4 |
| Published | 2026-09-17 |
| First published | 2023-01-09 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 955.3 KB |
| Known vulnerabilities | 0 (+3 in 2 direct dependencies) |
| Install scripts | no |
| Author | Nadezhda Babenko |
| Maintainers | dastan_abdraym, bixxter, zhanmukhamed, stoktaganov |

## Links

- npm: https://www.npmjs.com/package/grading-widget
- npm.io page: https://npm.io/package/grading-widget

## Dependencies (11)

- [vue](https://npm.io/package/vue.md) ^3.2.45
- [uuid](https://npm.io/package/uuid.md) ^9.0.0
- [axios](https://npm.io/package/axios.md) ^1.7.7
- [dayjs](https://npm.io/package/dayjs.md) ^1.11.7
- [pinia](https://npm.io/package/pinia.md) ^2.0.28
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [vue-i18n](https://npm.io/package/vue-i18n.md) ^9.13.1
- [@sentry/vue](https://npm.io/package/@sentry/vue.md) ^7.28.1
- [sweet-scroll](https://npm.io/package/sweet-scroll.md) ^4.0.0
- [@sentry/tracing](https://npm.io/package/@sentry/tracing.md) ^7.28.1
- [canvas-confetti](https://npm.io/package/canvas-confetti.md) ^1.6.0

## Recent versions

- 1.6.4 (latest) — 2026-09-17
- 1.6.3 — 2025-11-05
- 1.6.1 — 2025-03-06
- 1.6.0 — 2025-02-06
- 1.5.0 — 2024-09-18
- 1.4.3 — 2024-09-05
- 1.4.1 — 2024-09-04
- 1.3.1 — 2024-07-25
- 1.3.0 — 2024-07-03
- 1.2.1 — 2024-04-04
- 1.1.0-7.1 — 2023-10-24
- 1.1.0-7 — 2023-10-09
- 1.1.0-6 — 2023-08-21
- 1.1.0-5 — 2023-08-07
- 1.1.0-4 — 2023-07-31
- … 156 more at https://npm.io/package/grading-widget/versions

## README

# grading-widget

Что нужно знать для использования библиотеки в своем проекте
1. Для установки: npm i grading-widget

2. В файле, где ты хочешь использовать библиотеку грейдирования добавь пустой div с id = widgetTagName и инициализируй билиотеку
```
<template>
    <div id="grading-widget"></div>
</template>
import { openGrading, removeGrading } from '@/utils/plugins/grading';
export default {
    setup() {
        openGrading(filialId, orderId, amount);
        onBeforeUnmount(() => {
            removeGrading();
        }
    }
}
```

3. Создай отдельный файл grading.ts, где опиши нижеследующую логику.
Библиотека имеет 3 метода: 
init() - отправляет запрос hasGradingRequest(filialId) для понимания, нужно ли отображать виджет
mount() - если в ответе на запрос hasGradingRequest пришел ответ без ошибки - монтирует компонент грейдирования
destroy() - необходимо указывать в хуке onBeforeUnmount 

```
import { AuthService } from '@/services/auth';
import i18n from '@/utils/plugins/i18n';
import 'grading-widget/dist/grading-widget.css';

let onGradingDestroy: (() => void) | null = null;
const appEnv = import.meta.env.VITE_ENV;
const gradingEnv = appEnv === 'production' ? 'production' : 'stage';

async function onForbidden() {
	return Promise.reject(new Error('Нет токена')); // добавить, когда будет готов метод
}

function openGrading(filialId: number, orderId: number, amount: number) {
	let myGradeLibraryInstance: {
		init: () => boolean;
		destroy: () => void;
		mount: () => void;
	};

	const filialIdStr = filialId.toString();
	const orderIdStr = orderId.toString();
	const amountStr = amount.toString();

	import('grading-widget').then(async MyGradeLibrary => {
		myGradeLibraryInstance = MyGradeLibrary.default({
			filialId: filialIdStr,
			orderId: orderIdStr,
			amount: amountStr,
			onForbidden,
			token: AuthService.state.accessToken,
			showCongrats: true,
			environment: gradingEnv,
			lang: i18n.global.locale.value,
			onError: (msg: string) => console.log(msg),
			widgetTagName: '#grading-widget'
		});

		if (await myGradeLibraryInstance.init()) {
			myGradeLibraryInstance.mount();
		}

		onGradingDestroy = myGradeLibraryInstance.destroy;
	});
}

function removeGrading() {
	if (onGradingDestroy) {
		onGradingDestroy();
		onGradingDestroy = null;
	}
}
export { openGrading, removeGrading };
```

4. Библиотека отправляет следующие запросы:
```
// отправляет запрос на получение данных по грейдированию
const grading = (
  filialId: string,
  orderId: string,
  amount: number | string,
): Promise<IPayedRestaurant> => {
  return gradingApiClient().get(
    `/member-ladder/grading/thank-you-page/${filialId}?order_id=${orderId}&amount=${amount}`,
  ).then((response) =>  {
      return response.data.data;
  })
};
// проверяет есть ли грейдирование по указанному filialId
const hasGrading = ( 
    filialId: string,
): Promise<IHasGrading> => {
    return gradingApiClient().get(
        `/member-ladder/grading/terminal/${filialId}`,
    ).then((response) =>  {
        return response.data.data;
    })
};
```

5. Библиотека принимает следующие пропс, которые являются обязательными:
```
interface IMyGradeLibrary {
   filialId: string,
   orderId: string,
   amount: string, // Сумма оплаты
   environment: string, // Принимает process.env.VUE_APP_ENVIRONMENT основного приложения
   lang: string, // Текущий язык основного приложения, который будет отображен
   token: string,
   onForbidden: () => Promise<string>, // необязательный параметр. Функция, срабатывающая, когда токен умирает. Из родительского приложения нужно отправлять новый токен, если этого метода нет, то можно возвращать return Promise.reject();  
   showCongrats: boolean, // Контролирует нужно ли отображать анимации поздравлений и отображения прогресса по уровням
   onError: (message) => void, // Обработка ошибок
   widgetTagName: string, // передает в библиотеку Грейдирования id тега div, который ты используешь в своем проекте как контейнер для отрисовки компонента библиотеки
   logToConsole: (key, message) => void, // необязательный параметр, показывает в родительском приложении консоль библиотеки грейдирования
   animationWasEnded: () => void, // необязательный параметр, который принимает метод, который должен срабатывать, когда закончились все анимации и отображен финальный вид виджета
   logAmplitudeEvent: (event: string, payload: any) => void | Promise<void>, // обязательный параметр, вызывает аналитику
}
```

6. Примеры виджета в действии и его подключения ты можешь найти в проектах takeway-web и chocopay-web

---
_Source: https://npm.io/package/grading-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._