File: resources/js/composables/useOnboarding.js

import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';
import { useSettings } from './useSettings';

export function useOnboarding() {
    const { getSetting, updateSetting } = useSettings();

    const startTour = () => {
        const driverObj = driver({
            showProgress: true,
            animate: true,
            nextBtnText: '???????',
            prevBtnText: '????',
            doneBtnText: '?????????',
            onDestroyStarted: () => {
                driverObj.destroy();
                updateSetting('onboarding.completed', 'true').catch(() => {});
            },
            steps: [
                {
                    popover: {
                        title: '????????????!',
                        description: 'Ticker ? ?????? ?????? ?????????????? ???????????. ????? ???????? ??????? ?????????.',
                    },
                },
                {
                    element: '[data-tour="sidebar"]',
                    popover: {
                        title: '?????????',
                        description: '???????? ????????? ????????? ?????? ????? ????????????. ? ?? ? ????????? ?? ??????????? ???????.',
                    },
                },
                {
                    element: '[data-tour="sidebar-actions"]',
                    popover: {
                        title: '???????????',
                        description: '?????? ??????? ???? ?????????? (A), ????? ?????????? (S), ??????????? ????????? (R) ?? ??????????? (K).',
                    },
                },
                {
                    element: '[data-tour="header"]',
                    popover: {
                        title: '??????',
                        description: '?? ?????????? ????????? ??????. T ??????? ???????????? ????.',
                    },
                },
                {
                    element: '[data-tour="todo-list"]',
                    popover: {
                        title: '??????????',
                        description: '???????? ??????? ??????? ??????????. ???????? ???????, ?????????? ?? ??????.',
                    },
                },
                {
                    element: '[data-tour="todo-list"]',
                    popover: {
                        title: '?????????',
                        description: '?????????? ???? 4 ???????: backlog, todo, ????????? ?? ???????????. ????? ??????????? ??????? ????????????????.',
                    },
                },
                {
                    element: '[data-tour="time-log-list"]',
                    popover: {
                        title: '????? ????????',
                        description: '???????? ??????? ????????? ??????? ????. ??????????? ??????????? ????????? ???????? ?????????.',
                    },
                },
                {
                    element: '[data-tour="time-log-progress"]',
                    popover: {
                        title: '??????? ???? ????????',
                        description: '????????? ???? ???????? 8-???????? ??????? ???? ?????????????.',
                    },
                },
                {
                    popover: {
                        title: '??????????? ????????????',
                        description: 'A ? ????? ????????, S ? ????? ????????, T ? ????, W ? ?????? ????, ?/? ? ??????? ????, D ? ????? ????',
                    },
                },
                {
                    element: '[data-tour="nav-pages"]',
                    popover: {
                        title: '?????? ????????',
                        description: '?????? ????? ???????? ?????????? ??????? ????????. W ??????? ?????????.',
                    },
                },
                {
                    element: '[data-tour="settings-btn"]',
                    popover: {
                        title: '???????????',
                        description: '?? ??????? ???????, ?????, ????? ????? ?? ????????????.',
                    },
                },
                {
                    popover: {
                        title: '???? ????!',
                        description: '??????????? ?????????! ?? ????? ??????? ????? ?????, ???????????? ??????.',
                    },
                },
            ],
        });

        driverObj.drive();
    };

    const checkAndStartTour = () => {
        const completed = getSetting('onboarding.completed');
        if (completed.value !== 'true') {
            setTimeout(() => startTour(), 500);
        }
    };

    return {
        startTour,
        checkAndStartTour,
    };
}