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