grading-widget

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

2. В файле, где ты хочешь использовать библиотеку грейдирования добавь пустой div с id = widgetTagName и инициализируй билиотеку
``

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 => {
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 => {
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, // необязательный параметр. Функция, срабатывающая, когда токен умирает. Из родительского приложения нужно отправлять новый токен, если этого метода нет, то можно возвращать 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, // обязательный параметр, вызывает аналитику
}
``

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