grading-widget v1.2.1
grading-widget
Что нужно знать для использования библиотеки в своем проекте 1. Для установки: npm i grading-widget
- В файле, где ты хочешь использовать библиотеку грейдирования добавь пустой 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();
}
}
}
- Создай отдельный файл 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 };
- Библиотека отправляет следующие запросы:
// отправляет запрос на получение данных по грейдированию
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;
})
};
- Библиотека принимает следующие пропс, которые являются обязательными:
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>, // обязательный параметр, вызывает аналитику
}
- Примеры виджета в действии и его подключения ты можешь найти в проектах takeway-web и chocopay-web
1 month ago
1 month ago
1 month ago
7 months ago
7 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago