hamed
ecdefa3c24
- Integrated TourButton component into SettingsMenuPage, SkillsPage, SmsWalletPage, StaffPage, StaffSessionDetailPage, StaffTreatmentSessionsPage, SubscriptionPage, TagsSettingsPage, TreatmentCasesPage to enhance user onboarding experience. - Created new tour definitions for appointments, clinics, staff management, financial management, and patient management, ensuring comprehensive guidance for users navigating the admin panel. - Updated documentation to reflect the addition of tours and their implementation details.
46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline';
|
|
import { useTour } from '../../hooks/useTour';
|
|
import { getTour } from '../../lib/tour/registry';
|
|
|
|
/**
|
|
* دکمهٔ «راهنمای این صفحه».
|
|
*
|
|
* وجود تور قبل از هر هوکی بررسی میشود تا صفحهای که راهنما ندارد — یعنی بیشتر
|
|
* صفحات پنل — هیچ درخواستی برای وضعیت تورها نفرستد.
|
|
*/
|
|
export default function TourButton({ tourId, ready = false }: { tourId?: string; ready?: boolean }) {
|
|
const tour = getTour(tourId);
|
|
|
|
if (!tour) return null;
|
|
|
|
return <TourLauncher tourId={tour.id} ready={ready} />;
|
|
}
|
|
|
|
/**
|
|
* `ready` یعنی محتوای صفحه نشسته است و اجرای خودکارِ بار اول مجاز است.
|
|
* صفحهای که دکمه را مستقیم میگذارد و آمادهبودنش را نمیداند، آن را false میگذارد
|
|
* و تور فقط با کلیک اجرا میشود.
|
|
*/
|
|
function TourLauncher({ tourId, ready }: { tourId: string; ready: boolean }) {
|
|
const { start } = useTour(tourId, { ready });
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
aria-label="راهنمای این صفحه"
|
|
title="راهنمای این صفحه"
|
|
onClick={start}
|
|
style={{
|
|
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
|
width: 30, height: 30, borderRadius: 'var(--r-pill)',
|
|
background: 'transparent', border: 'none', cursor: 'pointer',
|
|
color: 'var(--text-3)', flexShrink: 0,
|
|
}}
|
|
onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--primary)')}
|
|
onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-3)')}
|
|
>
|
|
<QuestionMarkCircleIcon style={{ width: 20, height: 20 }} />
|
|
</button>
|
|
);
|
|
}
|