backend phase 15 & frontend phase 8
This commit is contained in:
hamid
@@ -0,0 +1,14 @@
|
||||
'use client';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { BookingDetailView } from '@/components/booking';
|
||||
|
||||
/**
|
||||
* Customer booking detail (`/bookings/{id}`) — the read-only both-roles view in the **customer** shell:
|
||||
* server-truth status timeline, session schedule, and money summary. Care instructions are gated to the
|
||||
* assigned nurse, so the customer sees the "visible to your nurse only" affordance (the query never fires).
|
||||
*/
|
||||
export default function CustomerBookingDetailPage() {
|
||||
const params = useParams<{ id: string }>();
|
||||
const id = Number(params.id);
|
||||
return <BookingDetailView bookingId={Number.isInteger(id) && id > 0 ? id : -1} viewerRole="customer" />;
|
||||
}
|
||||
@@ -1,8 +1,104 @@
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
import { PlaceholderScreen } from '@/components';
|
||||
'use client';
|
||||
import { useLocale, useTranslations } from 'next-intl';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Box, Paper, Skeleton, Stack, Typography } from '@mui/material';
|
||||
import { AppButton, AppIcon, StatusChip } from '@/components';
|
||||
import { BOOKING_STATUS_KIND } from '@/components/booking/statusKind';
|
||||
import { ROUTES } from '@/constants';
|
||||
import { formatIrrToToman, formatShamsiDate } from '@/utils';
|
||||
import { useBookingList } from '@/services/bookings';
|
||||
import type { BookingListItemDto } from '@/services/bookings/types';
|
||||
|
||||
export default async function BookingsPage() {
|
||||
const t = await getTranslations('nav');
|
||||
const tShell = await getTranslations('shell');
|
||||
return <PlaceholderScreen icon="bookings" title={t('bookings')} description={tShell('placeholder_body')} />;
|
||||
/**
|
||||
* Customer رزروها — the "My bookings" list. Reads `useBookingList('customer')`; each row opens the
|
||||
* booking detail (`/bookings/{id}`). This is the customer entry to the f8 booking-detail surface (the C5
|
||||
* `converted` state also lands here). Amounts render in Toman via the money util.
|
||||
*/
|
||||
export default function CustomerBookingsPage() {
|
||||
const t = useTranslations('booking');
|
||||
const { data, isLoading, isError } = useBookingList('customer');
|
||||
const items = data?.items ?? [];
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Box>
|
||||
<Typography variant="h5" component="h1">
|
||||
{t('list_title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||||
{t('list_subtitle')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{isLoading ? (
|
||||
<Stack sx={{ gap: 2 }}>
|
||||
{[0, 1].map((key) => (
|
||||
<Skeleton key={key} variant="rounded" height={120} />
|
||||
))}
|
||||
</Stack>
|
||||
) : isError ? (
|
||||
<Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||||
{t('list_error')}
|
||||
</Typography>
|
||||
</Paper>
|
||||
) : items.length === 0 ? (
|
||||
<Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px dashed', borderColor: 'divider', borderRadius: 2 }}>
|
||||
<AppIcon icon="bookings" size={40} color="var(--bal-text-secondary)" />
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mt: 1 }}>
|
||||
{t('list_empty_title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.5 }}>
|
||||
{t('list_empty_body')}
|
||||
</Typography>
|
||||
</Paper>
|
||||
) : (
|
||||
<Stack sx={{ gap: 2 }}>
|
||||
{items.map((item) => (
|
||||
<BookingRow key={item.id} item={item} />
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function BookingRow({ item }: { item: BookingListItemDto }) {
|
||||
const t = useTranslations('booking');
|
||||
const tc = useTranslations('common');
|
||||
const locale = useLocale();
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
|
||||
<Stack sx={{ gap: 1.5 }}>
|
||||
<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'flex-start', gap: 1.5, flexWrap: 'wrap' }}>
|
||||
<Stack sx={{ gap: 0.25, minWidth: 0 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
|
||||
{item.counterpartyName}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||||
{formatShamsiDate(item.scheduledDate, locale)} · {t('session_count', { count: item.sessionCount })}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<StatusChip status={BOOKING_STATUS_KIND[item.status]} label={t(`bstatus_${item.status}`)} />
|
||||
</Stack>
|
||||
|
||||
<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1.5, flexWrap: 'wrap' }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700 }}>
|
||||
{t('list_total')}: {formatIrrToToman(item.amountIrr, locale)} {tc('currency_toman')}
|
||||
</Typography>
|
||||
<AppButton
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
endIcon="bookings"
|
||||
onClick={() => router.push(`/${locale}${ROUTES.BOOKINGS}/${item.id}`)}
|
||||
sx={{ m: 0 }}
|
||||
>
|
||||
{t('view_booking')}
|
||||
</AppButton>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
'use client';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { BookingDetailView } from '@/components/booking';
|
||||
|
||||
/**
|
||||
* Nurse booking detail (`/nurse/visits/{id}`) — the both-roles view in the **nurse** shell, where the
|
||||
* assigned nurse gets the per-session EVV check-in/out controls and the gated care-instructions card
|
||||
* (two-stage disclosure). Reached from the ویزیت امروز day surface.
|
||||
*/
|
||||
export default function NurseBookingDetailPage() {
|
||||
const params = useParams<{ id: string }>();
|
||||
const id = Number(params.id);
|
||||
return <BookingDetailView bookingId={Number.isInteger(id) && id > 0 ? id : -1} viewerRole="nurse" />;
|
||||
}
|
||||
@@ -1,8 +1,98 @@
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
import { PlaceholderScreen } from '@/components';
|
||||
'use client';
|
||||
import { useLocale, useTranslations } from 'next-intl';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Box, Paper, Skeleton, Stack, Typography } from '@mui/material';
|
||||
import { AppButton, AppIcon } from '@/components';
|
||||
import { SessionCard, useEvvController } from '@/components/booking';
|
||||
import { ROUTES } from '@/constants';
|
||||
import { useSessionEvv, useTodaySessions } from '@/services/bookings';
|
||||
import type { BookingSessionListItemDto } from '@/services/bookings/types';
|
||||
|
||||
export default async function NurseVisitsPage() {
|
||||
const t = await getTranslations('nav');
|
||||
const tShell = await getTranslations('shell');
|
||||
return <PlaceholderScreen icon="visits" title={t('visits')} description={tShell('placeholder_body')} />;
|
||||
/**
|
||||
* Nurse ویزیت امروز (E3 top) — the day's operational surface. Lists today's sessions from
|
||||
* `useTodaySessions`; each renders the shared `SessionCard` with the per-session EVV check-in/out control
|
||||
* (driven by one `useEvvController`) and the advisory EVV banner once checked in. A GPS mismatch is
|
||||
* advisory, never a block. Each card also deep-links to the full booking detail (`/nurse/visits/{id}`),
|
||||
* where the gated care instructions live. Visit-note authoring + task checklist are deferred to f13.
|
||||
*/
|
||||
export default function NurseVisitsPage() {
|
||||
const t = useTranslations('booking');
|
||||
const { data, isLoading } = useTodaySessions();
|
||||
const evv = useEvvController();
|
||||
const items = data?.items ?? [];
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 640 }}>
|
||||
<Box>
|
||||
<Typography variant="h5" component="h1">
|
||||
{t('evv_visits_title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||||
{t('evv_visits_subtitle')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{isLoading ? (
|
||||
<Stack sx={{ gap: 2 }}>
|
||||
{[0, 1].map((key) => (
|
||||
<Skeleton key={key} variant="rounded" height={150} />
|
||||
))}
|
||||
</Stack>
|
||||
) : items.length === 0 ? (
|
||||
<Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px dashed', borderColor: 'divider', borderRadius: 2 }}>
|
||||
<AppIcon icon="visits" size={40} color="var(--bal-text-secondary)" />
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary', mt: 1 }}>
|
||||
{t('evv_no_visits')}
|
||||
</Typography>
|
||||
</Paper>
|
||||
) : (
|
||||
<Stack sx={{ gap: 2 }}>
|
||||
{items.map((item) => (
|
||||
<TodayVisitCard key={item.sessionId} item={item} evv={evv} />
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function TodayVisitCard({ item, evv }: { item: BookingSessionListItemDto; evv: ReturnType<typeof useEvvController> }) {
|
||||
const t = useTranslations('booking');
|
||||
const locale = useLocale();
|
||||
const router = useRouter();
|
||||
|
||||
// Fetch the EVV detail only once the session has activity, so the banner has the server check-in time.
|
||||
const hasEvvActivity = item.evvStatus !== 'pending';
|
||||
const { data: evvDetail } = useSessionEvv(item.sessionId, { enabled: hasEvvActivity });
|
||||
|
||||
return (
|
||||
<Stack sx={{ gap: 0.75 }}>
|
||||
<SessionCard
|
||||
title={item.patientName}
|
||||
sessionIndex={item.sessionIndex}
|
||||
scheduledDate={item.scheduledDate}
|
||||
scheduledTimeStart={item.scheduledTimeStart}
|
||||
scheduledTimeEnd={item.scheduledTimeEnd}
|
||||
status={item.status}
|
||||
evvStatus={item.evvStatus}
|
||||
checkInAt={evvDetail?.checkInAt ?? null}
|
||||
checkOutAt={evvDetail?.checkOutAt ?? null}
|
||||
checkInAddressMatch={evvDetail?.checkInAddressMatch ?? null}
|
||||
showEvvControls
|
||||
evvPending={evv.busySessionId === item.sessionId}
|
||||
acquiringLocation={evv.acquiringSessionId === item.sessionId}
|
||||
onCheckIn={() => evv.checkIn({ sessionId: item.sessionId, bookingId: item.bookingId })}
|
||||
onCheckOut={() => evv.checkOut({ sessionId: item.sessionId, bookingId: item.bookingId })}
|
||||
/>
|
||||
<AppButton
|
||||
variant="text"
|
||||
color="primary"
|
||||
endIcon="bookings"
|
||||
onClick={() => router.push(`/${locale}${ROUTES.NURSE_VISITS}/${item.bookingId}`)}
|
||||
sx={{ m: 0, alignSelf: 'flex-start' }}
|
||||
>
|
||||
{t('view_booking')}
|
||||
</AppButton>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { ThemeProvider } from '../../../theme';
|
||||
|
||||
jest.mock('next-intl', () => ({
|
||||
useTranslations: () => (key: string) => key,
|
||||
useLocale: () => 'en',
|
||||
}));
|
||||
jest.mock('notistack', () => ({ useSnackbar: () => ({ enqueueSnackbar: jest.fn() }) }));
|
||||
|
||||
import BookingDetailView from './BookingDetailView';
|
||||
import { bookingsApi } from '@/services/bookings/apis';
|
||||
|
||||
function renderView(viewerRole: 'customer' | 'nurse') {
|
||||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||||
return render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ThemeProvider>
|
||||
<BookingDetailView bookingId={5001} viewerRole={viewerRole} />
|
||||
</ThemeProvider>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
describe('<BookingDetailView/> — two-stage disclosure gate', () => {
|
||||
afterEach(() => jest.restoreAllMocks());
|
||||
|
||||
it('customer: never fetches care instructions and shows the "visible to your nurse only" affordance', async () => {
|
||||
const careSpy = jest.spyOn(bookingsApi, 'getCareInstructions');
|
||||
renderView('customer');
|
||||
|
||||
// Wait for the booking to load and the locked affordance to render.
|
||||
await waitFor(() => expect(screen.getByText('care_locked_title')).toBeInTheDocument());
|
||||
|
||||
// The hard gate: the client must not even request the clinical record for the customer.
|
||||
expect(careSpy).not.toHaveBeenCalled();
|
||||
expect(screen.queryByText('care_title')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('assigned nurse: fetches and renders the gated care instructions on a confirmed booking', async () => {
|
||||
const careSpy = jest.spyOn(bookingsApi, 'getCareInstructions');
|
||||
renderView('nurse');
|
||||
|
||||
await waitFor(() => expect(careSpy).toHaveBeenCalledWith(5001, 'nurse'));
|
||||
// The nurse never sees the customer's locked placeholder.
|
||||
expect(screen.queryByText('care_locked_title')).not.toBeInTheDocument();
|
||||
await waitFor(() => expect(screen.getByText('care_title')).toBeInTheDocument());
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,279 @@
|
||||
'use client';
|
||||
import { FunctionComponent } from 'react';
|
||||
import { useLocale, useTranslations } from 'next-intl';
|
||||
import { Chip, Paper, Skeleton, Stack, Typography } from '@mui/material';
|
||||
import AppIcon from '@/components/common/AppIcon';
|
||||
import { formatShamsiDate } from '@/utils';
|
||||
import { useBookingDetail, useCareInstructions } from '@/services/bookings';
|
||||
import {
|
||||
isBookingConfirmedOrBeyond,
|
||||
type BookingDetailDto,
|
||||
type BookingViewerRole,
|
||||
} from '@/services/bookings/types';
|
||||
import BookingStatusTimeline from '../BookingStatusTimeline';
|
||||
import SessionList from '../SessionList';
|
||||
import BookingMoneySummary from '../BookingMoneySummary';
|
||||
import CareInstructionsCard from '../CareInstructionsCard';
|
||||
import { useEvvController } from '../useEvvController';
|
||||
|
||||
export interface BookingDetailViewProps {
|
||||
bookingId: number;
|
||||
/** `customer` sees the read-only timeline + sessions + money; `nurse` adds EVV controls + gated care. */
|
||||
viewerRole: BookingViewerRole;
|
||||
}
|
||||
|
||||
/** Best-effort read of the frozen variant display name from the booking's variant snapshot. */
|
||||
function variantName(snapshotJson: string): string | null {
|
||||
try {
|
||||
const parsed = JSON.parse(snapshotJson) as { displayName?: string };
|
||||
return parsed?.displayName ?? null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The both-roles booking detail — the hinge screen. Fetches `useBookingDetail`, renders the server-truth
|
||||
* `BookingStatusTimeline`, the `SessionList`, and the `BookingMoneySummary`. Role-conditioned: the
|
||||
* **assigned nurse** additionally gets the per-session EVV controls and the gated `CareInstructionsCard`;
|
||||
* the **customer** sees the read-only view and a "visible to your nurse only" affordance in place of the
|
||||
* clinical record.
|
||||
*
|
||||
* **Two-stage disclosure is a hard UI gate:** the care-instructions query is `enabled` **only** for the
|
||||
* nurse view on a `confirmed`+ booking — for the customer it never fires (a 404 would be a defect path,
|
||||
* not the design). Money is display-only; the timeline is never advanced client-side.
|
||||
* @component BookingDetailView
|
||||
*/
|
||||
const BookingDetailView: FunctionComponent<BookingDetailViewProps> = ({ bookingId, viewerRole }) => {
|
||||
const t = useTranslations('booking');
|
||||
const isNurse = viewerRole === 'nurse';
|
||||
|
||||
const { data: booking, isLoading, isError } = useBookingDetail(bookingId, viewerRole);
|
||||
const careEnabled = isNurse && !!booking && isBookingConfirmedOrBeyond(booking.status);
|
||||
const care = useCareInstructions(bookingId, { enabled: careEnabled });
|
||||
const evv = useEvvController();
|
||||
|
||||
if (isLoading) return <DetailSkeleton />;
|
||||
if (isError || !booking) return <NotFoundCard title={t('bd_not_found_title')} body={t('bd_not_found_body')} />;
|
||||
|
||||
const service = variantName(booking.variantSnapshotJson);
|
||||
|
||||
return (
|
||||
<Stack sx={{ gap: 3, maxWidth: 640, mx: 'auto', width: '100%' }} data-viewer-role={viewerRole}>
|
||||
{/* Header — carries the terracotta accent + "نمای پرستار" chip on the nurse view. */}
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 2.5,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
borderRadius: 2,
|
||||
...(isNurse ? { borderTopWidth: 3, borderTopColor: 'var(--bal-secondary)' } : {}),
|
||||
}}
|
||||
>
|
||||
<Stack sx={{ gap: 1 }}>
|
||||
<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'flex-start', gap: 1.5, flexWrap: 'wrap' }}>
|
||||
<Typography variant="h6" component="h1">
|
||||
{service ?? t('bd_title')}
|
||||
</Typography>
|
||||
{isNurse ? (
|
||||
<Chip
|
||||
size="small"
|
||||
label={t('evv_nurse_view')}
|
||||
sx={{ bgcolor: 'var(--bal-secondary-soft)', color: 'var(--bal-secondary-dark)', fontWeight: 700 }}
|
||||
/>
|
||||
) : null}
|
||||
</Stack>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||||
{t('bd_ref', { id: booking.id })}
|
||||
</Typography>
|
||||
<Stack direction="row" sx={{ gap: 3, flexWrap: 'wrap', mt: 0.5 }}>
|
||||
<HeaderFact label={t('summary_patient')} value={booking.patientName} />
|
||||
<HeaderFact label={t('unnamed_nurse')} value={booking.nurseName} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
|
||||
<BookingStatusTimeline status={booking.status} />
|
||||
</Paper>
|
||||
|
||||
<StatusNote booking={booking} />
|
||||
|
||||
<Stack sx={{ gap: 1.5 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
|
||||
{t('sessions_title')}
|
||||
</Typography>
|
||||
<SessionList
|
||||
sessions={booking.sessions}
|
||||
showEvvControls={isNurse}
|
||||
showPayout={isNurse}
|
||||
busySessionId={evv.busySessionId}
|
||||
acquiringSessionId={evv.acquiringSessionId}
|
||||
onCheckIn={isNurse ? (s) => evv.checkIn({ sessionId: s.id, bookingId: booking.id }) : undefined}
|
||||
onCheckOut={isNurse ? (s) => evv.checkOut({ sessionId: s.id, bookingId: booking.id }) : undefined}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<BookingMoneySummary
|
||||
grossPriceIrr={booking.grossPriceIrr}
|
||||
balinyaarCommissionIrr={booking.balinyaarCommissionIrr}
|
||||
nursePayoutAmount={booking.nursePayoutAmount}
|
||||
viewerRole={viewerRole}
|
||||
/>
|
||||
|
||||
<CareSection viewerRole={viewerRole} careEnabled={careEnabled} care={care} />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
function HeaderFact({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<Stack sx={{ gap: 0.25 }}>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
{value}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
/** The per-status content note — confirmed/in-progress/completed(+dispute window)/disputed/cancelled. */
|
||||
function StatusNote({ booking }: { booking: BookingDetailDto }) {
|
||||
const t = useTranslations('booking');
|
||||
const locale = useLocale();
|
||||
|
||||
const lines: string[] = [];
|
||||
let tone: 'info' | 'warning' | 'neutral' = 'info';
|
||||
let icon = 'info';
|
||||
|
||||
switch (booking.status) {
|
||||
case 'confirmed':
|
||||
lines.push(t('confirmed_note'));
|
||||
break;
|
||||
case 'in_progress':
|
||||
lines.push(t('in_progress_note'));
|
||||
break;
|
||||
case 'completed':
|
||||
case 'closed':
|
||||
lines.push(t('completed_note'));
|
||||
icon = 'verified';
|
||||
break;
|
||||
case 'disputed':
|
||||
lines.push(t('disputed_note'));
|
||||
tone = 'warning';
|
||||
icon = 'warning';
|
||||
break;
|
||||
case 'cancelled':
|
||||
lines.push(t('cancelled_note'));
|
||||
tone = 'neutral';
|
||||
icon = 'rejected';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (booking.disputeWindowEndsAt && (booking.status === 'completed' || booking.status === 'closed')) {
|
||||
lines.push(t('dispute_window_note', { date: formatShamsiDate(booking.disputeWindowEndsAt, locale) }));
|
||||
}
|
||||
|
||||
if (lines.length === 0) return null;
|
||||
|
||||
const bg =
|
||||
tone === 'warning' ? 'var(--bal-secondary-soft)' : tone === 'neutral' ? 'var(--bal-divider)' : 'var(--bal-primary-soft)';
|
||||
const color = tone === 'warning' ? 'var(--bal-secondary-dark)' : 'var(--bal-text-secondary)';
|
||||
|
||||
return (
|
||||
<Stack direction="row" sx={{ gap: 1, alignItems: 'flex-start', p: 1.5, borderRadius: 2, bgcolor: bg }}>
|
||||
<AppIcon icon={icon} size={18} color={color} />
|
||||
<Stack sx={{ gap: 0.25 }}>
|
||||
{lines.map((line) => (
|
||||
<Typography key={line} variant="body2" sx={{ color: 'text.secondary' }}>
|
||||
{line}
|
||||
</Typography>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
/** The care-instructions region — the gated nurse card, or the customer's "visible to your nurse" note. */
|
||||
function CareSection({
|
||||
viewerRole,
|
||||
careEnabled,
|
||||
care,
|
||||
}: {
|
||||
viewerRole: BookingViewerRole;
|
||||
careEnabled: boolean;
|
||||
care: ReturnType<typeof useCareInstructions>;
|
||||
}) {
|
||||
const t = useTranslations('booking');
|
||||
|
||||
if (viewerRole !== 'nurse') {
|
||||
// Customer: never renders the clinical record and never fires the query.
|
||||
return (
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{ p: 2.5, border: '1px dashed', borderColor: 'divider', borderRadius: 2 }}
|
||||
>
|
||||
<Stack direction="row" sx={{ gap: 1.25, alignItems: 'flex-start' }}>
|
||||
<AppIcon icon="lock" size={20} color="var(--bal-text-secondary)" />
|
||||
<Stack sx={{ gap: 0.25 }}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
|
||||
{t('care_locked_title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||||
{t('care_locked_body')}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
if (!careEnabled) return null;
|
||||
if (care.isLoading) return <Skeleton variant="rounded" height={180} />;
|
||||
if (care.isError || !care.data) {
|
||||
return (
|
||||
<Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||||
{t('care_error')}
|
||||
</Typography>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
return <CareInstructionsCard data={care.data} />;
|
||||
}
|
||||
|
||||
function NotFoundCard({ title, body }: { title: string; body: string }) {
|
||||
return (
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 2, maxWidth: 640, mx: 'auto' }}
|
||||
>
|
||||
<AppIcon icon="error" size={44} color="var(--bal-text-secondary)" />
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mt: 1, mb: 0.5 }}>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||||
{body}
|
||||
</Typography>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailSkeleton() {
|
||||
return (
|
||||
<Stack sx={{ gap: 3, maxWidth: 640, mx: 'auto', width: '100%' }}>
|
||||
<Skeleton variant="rounded" height={110} />
|
||||
<Skeleton variant="rounded" height={96} />
|
||||
<Skeleton variant="rounded" height={72} />
|
||||
<Skeleton variant="rounded" height={140} />
|
||||
<Skeleton variant="rounded" height={120} />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default BookingDetailView;
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default } from './BookingDetailView';
|
||||
export type { BookingDetailViewProps } from './BookingDetailView';
|
||||
@@ -0,0 +1,42 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ThemeProvider } from '../../../theme';
|
||||
|
||||
jest.mock('next-intl', () => ({
|
||||
useTranslations: () => (key: string) => key,
|
||||
useLocale: () => 'en',
|
||||
}));
|
||||
|
||||
import BookingMoneySummary from './BookingMoneySummary';
|
||||
|
||||
function renderSummary(viewerRole: 'customer' | 'nurse') {
|
||||
return render(
|
||||
<ThemeProvider>
|
||||
<BookingMoneySummary
|
||||
grossPriceIrr="45000000"
|
||||
balinyaarCommissionIrr="5400000"
|
||||
nursePayoutAmount="39600000"
|
||||
viewerRole={viewerRole}
|
||||
/>
|
||||
</ThemeProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
describe('<BookingMoneySummary/> component', () => {
|
||||
it('renders the three amounts as grouped Toman (IRR ÷ 10), never re-summed', () => {
|
||||
renderSummary('customer');
|
||||
expect(screen.getByText(/4,500,000/)).toBeInTheDocument(); // gross
|
||||
expect(screen.getByText(/540,000/)).toBeInTheDocument(); // commission
|
||||
expect(screen.getByText(/3,960,000/)).toBeInTheDocument(); // payout
|
||||
});
|
||||
|
||||
it('labels the payout row for the customer', () => {
|
||||
renderSummary('customer');
|
||||
expect(screen.getByText('money_payout')).toBeInTheDocument();
|
||||
expect(screen.queryByText('money_nurse_earning')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('labels the payout row as the nurse earning in the nurse view', () => {
|
||||
renderSummary('nurse');
|
||||
expect(screen.getByText('money_nurse_earning')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,80 @@
|
||||
'use client';
|
||||
import { FunctionComponent, ReactNode } from 'react';
|
||||
import { useLocale, useTranslations } from 'next-intl';
|
||||
import { Paper, Stack, Typography } from '@mui/material';
|
||||
import { formatIrrToToman } from '@/utils';
|
||||
import type { BookingViewerRole } from '@/services/bookings/types';
|
||||
|
||||
export interface BookingMoneySummaryProps {
|
||||
/** IRR digit-strings; `gross = commission + payout`, guaranteed server-side. **Never** summed/re-split here. */
|
||||
grossPriceIrr: string;
|
||||
balinyaarCommissionIrr: string;
|
||||
nursePayoutAmount: string;
|
||||
/** Drives the payout row label (nurse sees «درآمد شما»; customer sees «سهم پرستار»). */
|
||||
viewerRole: BookingViewerRole;
|
||||
}
|
||||
|
||||
/**
|
||||
* The confirmed booking money summary: service cost / Balinyaar fee (کارمزد) / nurse payout — each
|
||||
* rendered exactly as the server sent it (IRR digit-strings) through the money util as grouped Toman.
|
||||
* **Display-only:** no client-side sum, derive, or re-split; the tax line + escrow notice are the
|
||||
* checkout surface (deferred to f9). The payout row label adapts to the viewer.
|
||||
* @component BookingMoneySummary
|
||||
*/
|
||||
const BookingMoneySummary: FunctionComponent<BookingMoneySummaryProps> = ({
|
||||
grossPriceIrr,
|
||||
balinyaarCommissionIrr,
|
||||
nursePayoutAmount,
|
||||
viewerRole,
|
||||
}) => {
|
||||
const t = useTranslations('booking');
|
||||
const tc = useTranslations('common');
|
||||
const locale = useLocale();
|
||||
|
||||
const toman = (irr: string) => `${formatIrrToToman(irr, locale)} ${tc('currency_toman')}`;
|
||||
|
||||
return (
|
||||
<Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 1.5 }}>
|
||||
{t('money_title')}
|
||||
</Typography>
|
||||
<Stack sx={{ gap: 1 }}>
|
||||
<MoneyRow label={t('money_gross')} value={toman(grossPriceIrr)} emphasize />
|
||||
<MoneyRow label={t('money_commission')} value={toman(balinyaarCommissionIrr)} />
|
||||
<MoneyRow
|
||||
label={viewerRole === 'nurse' ? t('money_nurse_earning') : t('money_payout')}
|
||||
value={toman(nursePayoutAmount)}
|
||||
accent
|
||||
/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
function MoneyRow({
|
||||
label,
|
||||
value,
|
||||
emphasize = false,
|
||||
accent = false,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
emphasize?: boolean;
|
||||
accent?: boolean;
|
||||
}): ReactNode {
|
||||
return (
|
||||
<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 2 }}>
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontWeight: emphasize ? 800 : 700, color: accent ? 'var(--bal-secondary-dark)' : 'text.primary' }}
|
||||
>
|
||||
{value}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default BookingMoneySummary;
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default } from './BookingMoneySummary';
|
||||
export type { BookingMoneySummaryProps } from './BookingMoneySummary';
|
||||
@@ -0,0 +1,40 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ThemeProvider } from '../../../theme';
|
||||
|
||||
jest.mock('next-intl', () => ({
|
||||
useTranslations: () => (key: string) => key,
|
||||
useLocale: () => 'en',
|
||||
}));
|
||||
|
||||
import BookingStatusTimeline from './BookingStatusTimeline';
|
||||
|
||||
function renderTimeline(status: Parameters<typeof BookingStatusTimeline>[0]['status']) {
|
||||
return render(
|
||||
<ThemeProvider>
|
||||
<BookingStatusTimeline status={status} />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
describe('<BookingStatusTimeline/> component', () => {
|
||||
it('renders the 4-step happy-path stepper with the current-status chip', () => {
|
||||
renderTimeline('confirmed');
|
||||
// The stepper renders every step label; pending_payment appears only in the stepper.
|
||||
expect(screen.getByText('bstatus_pending_payment')).toBeInTheDocument();
|
||||
expect(screen.getByText('bstatus_in_progress')).toBeInTheDocument();
|
||||
// confirmed appears in both the chip and the stepper.
|
||||
expect(screen.getAllByText('bstatus_confirmed').length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
it('reflects the server status without advancing the client (in_progress)', () => {
|
||||
const { container } = renderTimeline('in_progress');
|
||||
expect(container.querySelector('[data-booking-status="in_progress"]')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders cancelled distinctly — no misleading progress stepper', () => {
|
||||
renderTimeline('cancelled');
|
||||
expect(screen.getAllByText('bstatus_cancelled').length).toBeGreaterThanOrEqual(1);
|
||||
// The stepper is replaced by a terminal row, so its step labels are absent.
|
||||
expect(screen.queryByText('bstatus_pending_payment')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,59 @@
|
||||
'use client';
|
||||
import { FunctionComponent } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Stack, Typography } from '@mui/material';
|
||||
import AppIcon from '@/components/common/AppIcon';
|
||||
import StatusChip from '@/components/StatusChip';
|
||||
import StepperHeader from '@/components/StepperHeader';
|
||||
import {
|
||||
BOOKING_TIMELINE_ORDER,
|
||||
bookingTimelineActiveIndex,
|
||||
type BookingStatus,
|
||||
} from '@/services/bookings/types';
|
||||
import { BOOKING_STATUS_KIND } from '../statusKind';
|
||||
|
||||
export interface BookingStatusTimelineProps {
|
||||
/** Server truth — the single source. The timeline never advances/infers a step client-side. */
|
||||
status: BookingStatus;
|
||||
}
|
||||
|
||||
/**
|
||||
* The both-roles booking status timeline — the grown-up version of the f7 C5 3-step tracker. It renders
|
||||
* the canonical happy path `pending_payment → confirmed → in_progress → completed` over the shared
|
||||
* StepperHeader, with the current-status chip above it. Terminal branches are shown **distinctly**:
|
||||
* `cancelled` replaces the stepper with a neutral terminal row (a progress bar would mislead); `disputed`
|
||||
* / `closed` keep the stepper (they follow completion) and surface through the chip. **Reflects
|
||||
* `BookingDetailDto.status` exactly** — it is never advanced on the client.
|
||||
* @component BookingStatusTimeline
|
||||
*/
|
||||
const BookingStatusTimeline: FunctionComponent<BookingStatusTimelineProps> = ({ status }) => {
|
||||
const t = useTranslations('booking');
|
||||
const steps = BOOKING_TIMELINE_ORDER.map((s) => t(`bstatus_${s}`));
|
||||
|
||||
return (
|
||||
<Stack sx={{ gap: 1.5 }} data-booking-status={status}>
|
||||
<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1.5, flexWrap: 'wrap' }}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 700, color: 'text.secondary' }}>
|
||||
{t('timeline_title')}
|
||||
</Typography>
|
||||
<StatusChip status={BOOKING_STATUS_KIND[status]} label={t(`bstatus_${status}`)} />
|
||||
</Stack>
|
||||
|
||||
{status === 'cancelled' ? (
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{ gap: 1, alignItems: 'center', px: 1.5, py: 1.25, borderRadius: 2, bgcolor: 'var(--bal-primary-soft)' }}
|
||||
>
|
||||
<AppIcon icon="rejected" size={20} color="var(--bal-text-secondary)" />
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: 'text.secondary' }}>
|
||||
{t('bstatus_cancelled')}
|
||||
</Typography>
|
||||
</Stack>
|
||||
) : (
|
||||
<StepperHeader steps={steps} activeStep={bookingTimelineActiveIndex(status)} />
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default BookingStatusTimeline;
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default } from './BookingStatusTimeline';
|
||||
export type { BookingStatusTimelineProps } from './BookingStatusTimeline';
|
||||
@@ -0,0 +1,57 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ThemeProvider } from '../../../theme';
|
||||
|
||||
jest.mock('next-intl', () => ({
|
||||
useTranslations: () => (key: string) => key,
|
||||
useLocale: () => 'en',
|
||||
}));
|
||||
|
||||
import CareInstructionsCard from './CareInstructionsCard';
|
||||
import type { CareInstructionsDto } from '@/services/bookings/types';
|
||||
|
||||
const FULL: CareInstructionsDto = {
|
||||
bookingId: 5001,
|
||||
currentConditions: 'Type 2 diabetes, hypertension',
|
||||
medications: 'Metformin 500 · Losartan 25',
|
||||
allergies: 'Penicillin',
|
||||
specialInstructions: 'Check blood sugar before meals.',
|
||||
emergencyContactName: 'Zahra Mousavi',
|
||||
emergencyContactPhone: '09121234567',
|
||||
};
|
||||
|
||||
function renderCard(data: CareInstructionsDto) {
|
||||
return render(
|
||||
<ThemeProvider>
|
||||
<CareInstructionsCard data={data} />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
describe('<CareInstructionsCard/> component', () => {
|
||||
it('renders every decrypted clinical field', () => {
|
||||
renderCard(FULL);
|
||||
expect(screen.getByText('Type 2 diabetes, hypertension')).toBeInTheDocument();
|
||||
expect(screen.getByText('Metformin 500 · Losartan 25')).toBeInTheDocument();
|
||||
expect(screen.getByText('Penicillin')).toBeInTheDocument();
|
||||
expect(screen.getByText('Check blood sugar before meals.')).toBeInTheDocument();
|
||||
expect(screen.getByText('Zahra Mousavi · 09121234567')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows the "not recorded" placeholder for a null field', () => {
|
||||
renderCard({ ...FULL, allergies: null });
|
||||
expect(screen.getByText('care_none')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows the empty state when nothing was recorded', () => {
|
||||
renderCard({
|
||||
bookingId: 5001,
|
||||
currentConditions: null,
|
||||
medications: null,
|
||||
allergies: null,
|
||||
specialInstructions: null,
|
||||
emergencyContactName: null,
|
||||
emergencyContactPhone: null,
|
||||
});
|
||||
expect(screen.getByText('care_empty')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,109 @@
|
||||
'use client';
|
||||
import { FunctionComponent, ReactNode } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Divider, Paper, Stack, Typography } from '@mui/material';
|
||||
import AppIcon from '@/components/common/AppIcon';
|
||||
import type { CareInstructionsDto } from '@/services/bookings/types';
|
||||
|
||||
export interface CareInstructionsCardProps {
|
||||
/** The decrypted stage-2 record — supplied only by the gated read (assigned nurse / admin, confirmed+). */
|
||||
data: CareInstructionsDto;
|
||||
}
|
||||
|
||||
/**
|
||||
* The decrypted care-instructions card — conditions / medications / allergies / special instructions /
|
||||
* emergency contact. This is the **read side** of the two-stage clinical disclosure: it is only ever
|
||||
* mounted by the booking-detail view once the viewer is confirmed to be the assigned nurse (or admin) on
|
||||
* a `confirmed`+ booking. The card itself is presentational; the gate (and the "never even fetch" rule)
|
||||
* lives in the view + `useCareInstructions`.
|
||||
* @component CareInstructionsCard
|
||||
*/
|
||||
const CareInstructionsCard: FunctionComponent<CareInstructionsCardProps> = ({ data }) => {
|
||||
const t = useTranslations('booking');
|
||||
|
||||
const emergency =
|
||||
data.emergencyContactName || data.emergencyContactPhone
|
||||
? [data.emergencyContactName, data.emergencyContactPhone].filter(Boolean).join(' · ')
|
||||
: null;
|
||||
|
||||
const isEmpty =
|
||||
!data.currentConditions &&
|
||||
!data.medications &&
|
||||
!data.allergies &&
|
||||
!data.specialInstructions &&
|
||||
!emergency;
|
||||
|
||||
return (
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 2.5,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
borderRadius: 2,
|
||||
borderInlineStartWidth: 4,
|
||||
borderInlineStartColor: 'var(--bal-primary)',
|
||||
}}
|
||||
>
|
||||
<Stack sx={{ gap: 0.5, mb: 1.5 }}>
|
||||
<Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
|
||||
<AppIcon icon="clinical" size={20} color="var(--bal-primary)" />
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
|
||||
{t('care_title')}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||||
{t('care_subtitle')}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
{isEmpty ? (
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||||
{t('care_empty')}
|
||||
</Typography>
|
||||
) : (
|
||||
<Stack divider={<Divider />} sx={{ gap: 1.5 }}>
|
||||
<CareRow icon="clinical" label={t('care_conditions')} value={data.currentConditions} noneLabel={t('care_none')} />
|
||||
<CareRow icon="medication" label={t('care_medications')} value={data.medications} noneLabel={t('care_none')} />
|
||||
<CareRow icon="warning" label={t('care_allergies')} value={data.allergies} noneLabel={t('care_none')} />
|
||||
<CareRow icon="info" label={t('care_instructions_label')} value={data.specialInstructions} noneLabel={t('care_none')} />
|
||||
<CareRow icon="emergency" label={t('care_emergency')} value={emergency} noneLabel={t('care_none')} ltrValue />
|
||||
</Stack>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
function CareRow({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
noneLabel,
|
||||
ltrValue = false,
|
||||
}: {
|
||||
icon: string;
|
||||
label: string;
|
||||
value: string | null;
|
||||
noneLabel: string;
|
||||
ltrValue?: boolean;
|
||||
}): ReactNode {
|
||||
return (
|
||||
<Stack direction="row" sx={{ gap: 1.25, alignItems: 'flex-start' }}>
|
||||
<AppIcon icon={icon} size={18} color="var(--bal-text-secondary)" />
|
||||
<Stack sx={{ gap: 0.25, minWidth: 0 }}>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 700 }}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
{...(ltrValue && value ? { dir: 'ltr' as const } : {})}
|
||||
sx={{ color: value ? 'text.primary' : 'text.secondary', whiteSpace: 'pre-line' }}
|
||||
>
|
||||
{value || noneLabel}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default CareInstructionsCard;
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default } from './CareInstructionsCard';
|
||||
export type { CareInstructionsCardProps } from './CareInstructionsCard';
|
||||
@@ -0,0 +1,38 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ThemeProvider } from '../../../theme';
|
||||
|
||||
// next-intl mocked to echo keys; locale = en so the clock formats with ASCII digits.
|
||||
jest.mock('next-intl', () => ({
|
||||
useTranslations: () => (key: string) => key,
|
||||
useLocale: () => 'en',
|
||||
}));
|
||||
|
||||
import EvvStatusBanner from './EvvStatusBanner';
|
||||
|
||||
function renderBanner(match: boolean | null) {
|
||||
return render(
|
||||
<ThemeProvider>
|
||||
<EvvStatusBanner checkInAtIso="2026-07-10T09:02:00.000Z" addressMatch={match} />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
describe('<EvvStatusBanner/> component', () => {
|
||||
it('shows the in-range confirmation when the address matched', () => {
|
||||
renderBanner(true);
|
||||
expect(screen.getByText('evv_banner_in_range')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows the advisory out-of-range variant (warning tone, not error) when the address mismatched', () => {
|
||||
const { container } = renderBanner(false);
|
||||
expect(screen.getByText('evv_banner_out_of_range')).toBeInTheDocument();
|
||||
// Advisory: the warning tone, never the error tone.
|
||||
const banner = container.querySelector('[data-evv-match="false"]') as HTMLElement;
|
||||
expect(banner).toHaveAttribute('data-evv-tone', 'warning');
|
||||
});
|
||||
|
||||
it('shows the neutral no-GPS variant when the position was unavailable', () => {
|
||||
renderBanner(null);
|
||||
expect(screen.getByText('evv_banner_no_gps')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,82 @@
|
||||
'use client';
|
||||
import { FunctionComponent } from 'react';
|
||||
import { useLocale, useTranslations } from 'next-intl';
|
||||
import { Stack, Typography } from '@mui/material';
|
||||
import AppIcon from '@/components/common/AppIcon';
|
||||
import { formatClock } from '../format';
|
||||
|
||||
/**
|
||||
* The advisory address-match result driving the banner variant:
|
||||
* - `true` → in range · «موقعیت تایید شد (EVV)» (success-tokened)
|
||||
* - `false` → out of range, under review · «موقعیت خارج از محدوده (در حال بررسی)» (**warning**-tokened, NOT error)
|
||||
* - `null` → GPS unavailable/denied · «موقعیت ثبت نشد» (neutral/info-tokened)
|
||||
*/
|
||||
export type EvvMatchState = boolean | null;
|
||||
|
||||
export interface EvvStatusBannerProps {
|
||||
/** The server `checkInAt` — the banner clock renders from this, never a client clock. */
|
||||
checkInAtIso: string;
|
||||
/** Advisory match; a mismatch is a warning banner, **never a block**. */
|
||||
addressMatch: EvvMatchState;
|
||||
}
|
||||
|
||||
type BannerTone = 'success' | 'warning' | 'info';
|
||||
|
||||
interface BannerStyle {
|
||||
tone: BannerTone;
|
||||
bg: string;
|
||||
fg: string;
|
||||
icon: string;
|
||||
messageKey: 'evv_banner_in_range' | 'evv_banner_out_of_range' | 'evv_banner_no_gps';
|
||||
}
|
||||
|
||||
// Colors resolve from the semantic --bal-* tokens (both schemes), so the banner switches with the color
|
||||
// scheme. Out-of-range uses the **warning** token (amber), never the error token — a mismatch is advisory.
|
||||
function styleFor(match: EvvMatchState): BannerStyle {
|
||||
if (match === true) {
|
||||
return { tone: 'success', bg: 'var(--bal-success)', fg: 'var(--bal-success-contrast)', icon: 'verified', messageKey: 'evv_banner_in_range' };
|
||||
}
|
||||
if (match === false) {
|
||||
return { tone: 'warning', bg: 'var(--bal-warning)', fg: 'var(--bal-warning-contrast)', icon: 'warning', messageKey: 'evv_banner_out_of_range' };
|
||||
}
|
||||
return { tone: 'info', bg: 'var(--bal-info)', fg: 'var(--bal-info-contrast)', icon: 'gps', messageKey: 'evv_banner_no_gps' };
|
||||
}
|
||||
|
||||
/**
|
||||
* The EVV check-in banner — «ورود ثبت شد {time} · موقعیت تایید شد (EVV)» in range, the advisory
|
||||
* out-of-range variant when the GPS mismatched, and a neutral variant when GPS was unavailable. A
|
||||
* tokenised status banner (never an error), shown wherever an open/closed check-in exists (the
|
||||
* booking-detail session card and the nurse day surface both use it). Presentational — time and match are
|
||||
* supplied by the caller from server truth.
|
||||
* @component EvvStatusBanner
|
||||
*/
|
||||
const EvvStatusBanner: FunctionComponent<EvvStatusBannerProps> = ({ checkInAtIso, addressMatch }) => {
|
||||
const t = useTranslations('booking');
|
||||
const locale = useLocale();
|
||||
const style = styleFor(addressMatch);
|
||||
const time = formatClock(checkInAtIso, locale);
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
data-evv-match={String(addressMatch)}
|
||||
data-evv-tone={style.tone}
|
||||
sx={{
|
||||
gap: 1,
|
||||
alignItems: 'center',
|
||||
px: 1.5,
|
||||
py: 1,
|
||||
borderRadius: 2,
|
||||
backgroundColor: style.bg,
|
||||
color: style.fg,
|
||||
}}
|
||||
>
|
||||
<AppIcon icon={style.icon} size={18} color={style.fg} />
|
||||
<Typography variant="body2" sx={{ fontWeight: 700, color: style.fg }}>
|
||||
{t(style.messageKey, { time })}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default EvvStatusBanner;
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default } from './EvvStatusBanner';
|
||||
export type { EvvStatusBannerProps, EvvMatchState } from './EvvStatusBanner';
|
||||
@@ -0,0 +1,64 @@
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { ThemeProvider } from '../../../theme';
|
||||
|
||||
jest.mock('next-intl', () => ({
|
||||
useTranslations: () => (key: string) => key,
|
||||
useLocale: () => 'en',
|
||||
}));
|
||||
|
||||
import SessionCard, { SessionCardProps } from './SessionCard';
|
||||
|
||||
const BASE: SessionCardProps = {
|
||||
sessionIndex: 1,
|
||||
scheduledDate: '2026-08-01',
|
||||
scheduledTimeStart: '09:00:00',
|
||||
scheduledTimeEnd: '13:00:00',
|
||||
status: 'scheduled',
|
||||
};
|
||||
|
||||
function renderCard(props: Partial<SessionCardProps> = {}) {
|
||||
return render(
|
||||
<ThemeProvider>
|
||||
<SessionCard {...BASE} {...props} />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
describe('<SessionCard/> component', () => {
|
||||
it('renders the visit index and a per-session status chip', () => {
|
||||
const { container } = renderCard();
|
||||
expect(screen.getByText('session_index')).toBeInTheDocument();
|
||||
expect(screen.getByText('sstatus_scheduled')).toBeInTheDocument();
|
||||
expect(container.querySelector('[data-session-status="scheduled"]')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows no EVV controls for the customer view', () => {
|
||||
renderCard({ showEvvControls: false });
|
||||
expect(screen.queryByText('evv_check_in')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('offers check-in for a scheduled session in the nurse view and fires onCheckIn', () => {
|
||||
const onCheckIn = jest.fn();
|
||||
renderCard({ showEvvControls: true, onCheckIn });
|
||||
const button = screen.getByText('evv_check_in');
|
||||
fireEvent.click(button);
|
||||
expect(onCheckIn).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('offers check-out once checked in', () => {
|
||||
renderCard({ showEvvControls: true, status: 'in_progress', evvStatus: 'checked_in', checkInAt: '2026-08-01T09:02:00.000Z' });
|
||||
expect(screen.getByText('evv_check_out')).toBeInTheDocument();
|
||||
// The in-range banner renders from the server check-in time (default match null → no-gps variant here).
|
||||
expect(screen.getByText('evv_banner_no_gps')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows the in-range EVV banner when the address matched', () => {
|
||||
renderCard({ status: 'in_progress', evvStatus: 'checked_in', checkInAt: '2026-08-01T09:02:00.000Z', checkInAddressMatch: true });
|
||||
expect(screen.getByText('evv_banner_in_range')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows the acquiring-location label while capturing GPS', () => {
|
||||
renderCard({ showEvvControls: true, acquiringLocation: true });
|
||||
expect(screen.getByText('evv_acquiring_location')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,147 @@
|
||||
'use client';
|
||||
import { FunctionComponent } from 'react';
|
||||
import { useLocale, useTranslations } from 'next-intl';
|
||||
import { Paper, Stack, Typography } from '@mui/material';
|
||||
import { AppButton } from '@/components/common';
|
||||
import StatusChip from '@/components/StatusChip';
|
||||
import { formatIrrToToman, formatShamsiDate } from '@/utils';
|
||||
import type { BookingSessionStatus, VisitVerificationStatus } from '@/services/bookings/types';
|
||||
import EvvStatusBanner from '../EvvStatusBanner';
|
||||
import { formatClock, formatElapsed, formatTimeRange } from '../format';
|
||||
import { SESSION_STATUS_KIND } from '../statusKind';
|
||||
|
||||
export interface SessionCardProps {
|
||||
/** Optional heading above the visit row — the patient name on the nurse's day feed (omitted in the detail). */
|
||||
title?: string;
|
||||
sessionIndex: number;
|
||||
/** ISO date `YYYY-MM-DD`. */
|
||||
scheduledDate: string;
|
||||
/** `HH:mm:ss`. */
|
||||
scheduledTimeStart: string;
|
||||
scheduledTimeEnd: string;
|
||||
status: BookingSessionStatus;
|
||||
evvStatus?: VisitVerificationStatus;
|
||||
/** Server `checkInAt`/`checkOutAt` — the banner + elapsed render from these, never a client clock. */
|
||||
checkInAt?: string | null;
|
||||
checkOutAt?: string | null;
|
||||
/** Advisory match: `true` in range · `false` out-of-range (under review) · `null` GPS unavailable. */
|
||||
checkInAddressMatch?: boolean | null;
|
||||
/** IRR digit-string — this session's payout share; shown in the nurse view when `showPayout`. */
|
||||
visitPayoutAmount?: string | null;
|
||||
showPayout?: boolean;
|
||||
/** Render the nurse EVV check-in/out CTA (state-machine driven). */
|
||||
showEvvControls?: boolean;
|
||||
/** This session's EVV mutation is in flight. */
|
||||
evvPending?: boolean;
|
||||
/** Acquiring GPS for this session (pre-mutation). */
|
||||
acquiringLocation?: boolean;
|
||||
onCheckIn?: () => void;
|
||||
onCheckOut?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* One visit row: the Shamsi schedule, a per-session status chip, the EVV banner once checked in, and —
|
||||
* for the assigned nurse — the check-in/out CTA driven by the session + EVV state machine (`scheduled` →
|
||||
* «ثبت ورود» · `in_progress`/checked-in → «ثبت خروج» · `completed` → elapsed duration · `missed` → no
|
||||
* action). A single-visit booking renders exactly this same card. Presentational: the container supplies
|
||||
* the EVV handlers + busy flags; a GPS mismatch never disables the flow (advisory, not a block).
|
||||
* @component SessionCard
|
||||
*/
|
||||
const SessionCard: FunctionComponent<SessionCardProps> = ({
|
||||
title,
|
||||
sessionIndex,
|
||||
scheduledDate,
|
||||
scheduledTimeStart,
|
||||
scheduledTimeEnd,
|
||||
status,
|
||||
evvStatus,
|
||||
checkInAt,
|
||||
checkOutAt,
|
||||
checkInAddressMatch = null,
|
||||
visitPayoutAmount,
|
||||
showPayout = false,
|
||||
showEvvControls = false,
|
||||
evvPending = false,
|
||||
acquiringLocation = false,
|
||||
onCheckIn,
|
||||
onCheckOut,
|
||||
}) => {
|
||||
const t = useTranslations('booking');
|
||||
const tc = useTranslations('common');
|
||||
const locale = useLocale();
|
||||
|
||||
const dateLabel = formatShamsiDate(scheduledDate, locale);
|
||||
const timeLabel = formatTimeRange(scheduledTimeStart, scheduledTimeEnd, locale);
|
||||
const showBanner = (evvStatus === 'checked_in' || evvStatus === 'completed') && Boolean(checkInAt);
|
||||
const elapsed = formatElapsed(checkInAt ?? null, checkOutAt ?? null, locale);
|
||||
const busy = acquiringLocation || evvPending;
|
||||
|
||||
return (
|
||||
<Paper
|
||||
elevation={0}
|
||||
data-session-status={status}
|
||||
sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}
|
||||
>
|
||||
<Stack sx={{ gap: 1.25 }}>
|
||||
{title ? (
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
|
||||
{title}
|
||||
</Typography>
|
||||
) : null}
|
||||
<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: title ? 600 : 700, color: title ? 'text.secondary' : 'text.primary' }}>
|
||||
{t('session_index', { n: sessionIndex })}
|
||||
</Typography>
|
||||
<StatusChip status={SESSION_STATUS_KIND[status]} label={t(`sstatus_${status}`)} />
|
||||
</Stack>
|
||||
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||||
{dateLabel} · <Typography component="span" dir="ltr" sx={{ fontVariantNumeric: 'tabular-nums' }}>{timeLabel}</Typography>
|
||||
</Typography>
|
||||
|
||||
{showBanner ? <EvvStatusBanner checkInAtIso={checkInAt as string} addressMatch={checkInAddressMatch} /> : null}
|
||||
|
||||
{checkOutAt ? (
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||||
{t('evv_checked_out_at', { time: formatClock(checkOutAt, locale) })}
|
||||
{elapsed ? ` · ${t('session_elapsed', { duration: elapsed })}` : ''}
|
||||
</Typography>
|
||||
) : null}
|
||||
|
||||
{showPayout && visitPayoutAmount ? (
|
||||
<Typography variant="caption" sx={{ color: 'var(--bal-secondary-dark)', fontWeight: 600 }}>
|
||||
{t('session_payout')}: {formatIrrToToman(visitPayoutAmount, locale)} {tc('currency_toman')}
|
||||
</Typography>
|
||||
) : null}
|
||||
|
||||
{showEvvControls && status === 'scheduled' ? (
|
||||
<AppButton
|
||||
color="secondary"
|
||||
variant="contained"
|
||||
startIcon={acquiringLocation ? 'gps' : 'check_in'}
|
||||
disabled={busy}
|
||||
onClick={onCheckIn}
|
||||
sx={{ m: 0, alignSelf: 'flex-start', py: 1 }}
|
||||
>
|
||||
{acquiringLocation ? t('evv_acquiring_location') : evvPending ? t('evv_checking_in') : t('evv_check_in')}
|
||||
</AppButton>
|
||||
) : null}
|
||||
|
||||
{showEvvControls && status === 'in_progress' && evvStatus === 'checked_in' ? (
|
||||
<AppButton
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
startIcon={acquiringLocation ? 'gps' : 'check_out'}
|
||||
disabled={busy}
|
||||
onClick={onCheckOut}
|
||||
sx={{ m: 0, alignSelf: 'flex-start', py: 1 }}
|
||||
>
|
||||
{acquiringLocation ? t('evv_acquiring_location') : evvPending ? t('evv_checking_out') : t('evv_check_out')}
|
||||
</AppButton>
|
||||
) : null}
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
export default SessionCard;
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default } from './SessionCard';
|
||||
export type { SessionCardProps } from './SessionCard';
|
||||
@@ -0,0 +1,47 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ThemeProvider } from '../../../theme';
|
||||
|
||||
jest.mock('next-intl', () => ({
|
||||
useTranslations: () => (key: string) => key,
|
||||
useLocale: () => 'en',
|
||||
}));
|
||||
|
||||
import SessionList from './SessionList';
|
||||
import type { BookingSessionDto } from '@/services/bookings/types';
|
||||
|
||||
function makeSession(id: number, sessionIndex: number): BookingSessionDto {
|
||||
return {
|
||||
id,
|
||||
sessionIndex,
|
||||
scheduledDate: '2026-08-01',
|
||||
scheduledTimeStart: '09:00:00',
|
||||
scheduledTimeEnd: '13:00:00',
|
||||
status: 'scheduled',
|
||||
visitPayoutAmount: '13200000',
|
||||
payoutEligibleAt: null,
|
||||
evvStatus: 'pending',
|
||||
checkInAt: null,
|
||||
checkOutAt: null,
|
||||
checkInAddressMatch: null,
|
||||
};
|
||||
}
|
||||
|
||||
function renderList(sessions: BookingSessionDto[]) {
|
||||
return render(
|
||||
<ThemeProvider>
|
||||
<SessionList sessions={sessions} />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
describe('<SessionList/> component', () => {
|
||||
it('renders one card per session', () => {
|
||||
renderList([makeSession(1, 1), makeSession(2, 2), makeSession(3, 3)]);
|
||||
expect(screen.getAllByText('session_index')).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('renders exactly one card for a single-visit booking (no special case)', () => {
|
||||
renderList([makeSession(1, 1)]);
|
||||
expect(screen.getAllByText('session_index')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,60 @@
|
||||
'use client';
|
||||
import { FunctionComponent } from 'react';
|
||||
import { Stack } from '@mui/material';
|
||||
import type { BookingSessionDto } from '@/services/bookings/types';
|
||||
import SessionCard from '../SessionCard';
|
||||
|
||||
export interface SessionListProps {
|
||||
sessions: BookingSessionDto[];
|
||||
/** Render the nurse EVV check-in/out CTA on each card. */
|
||||
showEvvControls?: boolean;
|
||||
showPayout?: boolean;
|
||||
/** The session whose EVV mutation is in flight (per-card busy state). */
|
||||
busySessionId?: number | null;
|
||||
/** The session currently acquiring GPS (pre-mutation). */
|
||||
acquiringSessionId?: number | null;
|
||||
onCheckIn?: (session: BookingSessionDto) => void;
|
||||
onCheckOut?: (session: BookingSessionDto) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* The session schedule list — one `SessionCard` per `BookingSessionDto`. A **single-visit booking renders
|
||||
* exactly one card through this same path** (no special case). Per-session busy state is derived from the
|
||||
* container's controller so only the acting card shows the spinner.
|
||||
* @component SessionList
|
||||
*/
|
||||
const SessionList: FunctionComponent<SessionListProps> = ({
|
||||
sessions,
|
||||
showEvvControls = false,
|
||||
showPayout = false,
|
||||
busySessionId = null,
|
||||
acquiringSessionId = null,
|
||||
onCheckIn,
|
||||
onCheckOut,
|
||||
}) => (
|
||||
<Stack sx={{ gap: 1.5 }}>
|
||||
{sessions.map((session) => (
|
||||
<SessionCard
|
||||
key={session.id}
|
||||
sessionIndex={session.sessionIndex}
|
||||
scheduledDate={session.scheduledDate}
|
||||
scheduledTimeStart={session.scheduledTimeStart}
|
||||
scheduledTimeEnd={session.scheduledTimeEnd}
|
||||
status={session.status}
|
||||
evvStatus={session.evvStatus}
|
||||
checkInAt={session.checkInAt}
|
||||
checkOutAt={session.checkOutAt}
|
||||
checkInAddressMatch={session.checkInAddressMatch}
|
||||
visitPayoutAmount={session.visitPayoutAmount}
|
||||
showPayout={showPayout}
|
||||
showEvvControls={showEvvControls}
|
||||
evvPending={busySessionId === session.id}
|
||||
acquiringLocation={acquiringSessionId === session.id}
|
||||
onCheckIn={onCheckIn ? () => onCheckIn(session) : undefined}
|
||||
onCheckOut={onCheckOut ? () => onCheckOut(session) : undefined}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
|
||||
export default SessionList;
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default } from './SessionList';
|
||||
export type { SessionListProps } from './SessionList';
|
||||
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* Shared time formatters for the booking composites. Timestamps cross the wire as UTC ISO; these render
|
||||
* a locale clock (Persian digits for `fa`) for the EVV banner + session schedule. Kept internal to the
|
||||
* booking components — money/date-of formatting lives in `@/utils`; this is only the clock/duration view.
|
||||
*/
|
||||
|
||||
/** `HH:MM` for a UTC ISO instant in the active locale (Persian digits for `fa`). */
|
||||
export function formatClock(iso: string, locale: string): string {
|
||||
const date = new Date(iso);
|
||||
if (Number.isNaN(date.getTime())) return '';
|
||||
return new Intl.DateTimeFormat(locale === 'fa' ? 'fa-IR' : 'en-US', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
/** `HH:MM` for a `HH:mm:ss` wire time, in the active locale. */
|
||||
export function formatTimeOfDay(time: string, locale: string): string {
|
||||
const [h, m] = time.split(':');
|
||||
if (h == null || m == null) return time;
|
||||
const nf = new Intl.NumberFormat(locale === 'fa' ? 'fa-IR' : 'en-US', {
|
||||
minimumIntegerDigits: 2,
|
||||
useGrouping: false,
|
||||
});
|
||||
return `${nf.format(Number(h))}:${nf.format(Number(m))}`;
|
||||
}
|
||||
|
||||
/** The `HH:MM`-range label for a session's scheduled window, in the active locale. */
|
||||
export function formatTimeRange(start: string, end: string, locale: string): string {
|
||||
return `${formatTimeOfDay(start, locale)} – ${formatTimeOfDay(end, locale)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* The elapsed on-site duration between two UTC ISO instants, as `H:MM` in the active locale. Returns
|
||||
* `null` when either endpoint is missing (e.g. an open check-in with no check-out yet).
|
||||
*/
|
||||
export function formatElapsed(startIso: string | null, endIso: string | null, locale: string): string | null {
|
||||
if (!startIso || !endIso) return null;
|
||||
const start = new Date(startIso).getTime();
|
||||
const end = new Date(endIso).getTime();
|
||||
if (Number.isNaN(start) || Number.isNaN(end) || end < start) return null;
|
||||
const totalMinutes = Math.round((end - start) / 60_000);
|
||||
const hours = Math.floor(totalMinutes / 60);
|
||||
const minutes = totalMinutes % 60;
|
||||
const nf = new Intl.NumberFormat(locale === 'fa' ? 'fa-IR' : 'en-US', { useGrouping: false });
|
||||
const nfPad = new Intl.NumberFormat(locale === 'fa' ? 'fa-IR' : 'en-US', {
|
||||
minimumIntegerDigits: 2,
|
||||
useGrouping: false,
|
||||
});
|
||||
return `${nf.format(hours)}:${nfPad.format(minutes)}`;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Booking composites (f8) — the shared visual layer for the post-payment engagement: the both-roles
|
||||
* booking detail, the server-truth status timeline, the session schedule + per-session EVV, the advisory
|
||||
* EVV banner, and the gated care-instructions card. Kept at the shared level (co-located tests) so f9
|
||||
* (checkout) and f13 (records) extend them rather than re-derive the layout. Import from `@/components/booking`.
|
||||
*/
|
||||
export { default as BookingDetailView } from './BookingDetailView';
|
||||
export type { BookingDetailViewProps } from './BookingDetailView';
|
||||
export { default as BookingStatusTimeline } from './BookingStatusTimeline';
|
||||
export type { BookingStatusTimelineProps } from './BookingStatusTimeline';
|
||||
export { default as SessionList } from './SessionList';
|
||||
export type { SessionListProps } from './SessionList';
|
||||
export { default as SessionCard } from './SessionCard';
|
||||
export type { SessionCardProps } from './SessionCard';
|
||||
export { default as EvvStatusBanner } from './EvvStatusBanner';
|
||||
export type { EvvStatusBannerProps, EvvMatchState } from './EvvStatusBanner';
|
||||
export { default as CareInstructionsCard } from './CareInstructionsCard';
|
||||
export type { CareInstructionsCardProps } from './CareInstructionsCard';
|
||||
export { default as BookingMoneySummary } from './BookingMoneySummary';
|
||||
export type { BookingMoneySummaryProps } from './BookingMoneySummary';
|
||||
export { useEvvController } from './useEvvController';
|
||||
export type { EvvTarget } from './useEvvController';
|
||||
@@ -0,0 +1,22 @@
|
||||
import type { StatusKind } from '@/components/StatusChip';
|
||||
import type { BookingSessionStatus, BookingStatus } from '@/services/bookings/types';
|
||||
|
||||
/** Booking status → the shared semantic StatusChip kind (used by the timeline + the bookings list). */
|
||||
export const BOOKING_STATUS_KIND: Record<BookingStatus, StatusKind> = {
|
||||
pending_payment: 'pending',
|
||||
confirmed: 'info',
|
||||
in_progress: 'active',
|
||||
completed: 'verified',
|
||||
disputed: 'rejected',
|
||||
closed: 'neutral',
|
||||
cancelled: 'neutral',
|
||||
};
|
||||
|
||||
/** Session status → the shared semantic StatusChip kind (used by the session card + the today feed). */
|
||||
export const SESSION_STATUS_KIND: Record<BookingSessionStatus, StatusKind> = {
|
||||
scheduled: 'info',
|
||||
in_progress: 'active',
|
||||
completed: 'verified',
|
||||
missed: 'rejected',
|
||||
cancelled: 'neutral',
|
||||
};
|
||||
@@ -0,0 +1,96 @@
|
||||
'use client';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import { ApiError } from '@/lib/api/errors';
|
||||
import { useCheckInVisit, useCheckOutVisit } from '@/services/bookings';
|
||||
import { locationProvider } from '@/services/bookings/evv/locationProvider';
|
||||
|
||||
export interface EvvTarget {
|
||||
sessionId: number;
|
||||
bookingId: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Orchestrates an EVV check-in/out for a session: capture GPS through the `ILocationProvider` seam, then
|
||||
* post via the `useCheckInVisit`/`useCheckOutVisit` mutations (which invalidate the detail/today/EVV
|
||||
* queries so the timeline, session row, and banner re-render from server truth). Tracks the acting
|
||||
* session so only its card shows the "acquiring…" / pending state.
|
||||
*
|
||||
* **GPS is never a hard stop** — a denied/unavailable fix (`null`) still checks in (flagged), with an
|
||||
* advisory toast. A mismatch is advisory server-side (the banner warns). Only domain 4xx are toasted here
|
||||
* (409 not-startable, 400 no-open-check-in); `clientFetch` already toasts 401/403/5xx/network.
|
||||
*/
|
||||
export function useEvvController() {
|
||||
const t = useTranslations('booking');
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
const checkInMut = useCheckInVisit();
|
||||
const checkOutMut = useCheckOutVisit();
|
||||
const [acquiringSessionId, setAcquiringSessionId] = useState<number | null>(null);
|
||||
const [busySessionId, setBusySessionId] = useState<number | null>(null);
|
||||
|
||||
const capture = useCallback(async (sessionId: number) => {
|
||||
setAcquiringSessionId(sessionId);
|
||||
const pos = await locationProvider.getCurrentPosition();
|
||||
setAcquiringSessionId(null);
|
||||
return pos;
|
||||
}, []);
|
||||
|
||||
const checkIn = useCallback(
|
||||
async ({ sessionId, bookingId }: EvvTarget) => {
|
||||
const pos = await capture(sessionId);
|
||||
setBusySessionId(sessionId);
|
||||
try {
|
||||
await checkInMut.mutateAsync({
|
||||
input: {
|
||||
bookingSessionId: sessionId,
|
||||
latitude: pos?.latitude ?? null,
|
||||
longitude: pos?.longitude ?? null,
|
||||
capturedAt: new Date().toISOString(),
|
||||
},
|
||||
bookingId,
|
||||
});
|
||||
enqueueSnackbar(t('evv_checked_in_toast'), { variant: 'success' });
|
||||
// GPS denied/unavailable is advisory, not a block — surface it without failing the check-in.
|
||||
if (!pos) enqueueSnackbar(t('evv_gps_denied_note'), { variant: 'warning' });
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError && error.status === 409) {
|
||||
enqueueSnackbar(t('evv_not_startable'), { variant: 'warning' });
|
||||
}
|
||||
} finally {
|
||||
setBusySessionId(null);
|
||||
}
|
||||
},
|
||||
[capture, checkInMut, enqueueSnackbar, t],
|
||||
);
|
||||
|
||||
const checkOut = useCallback(
|
||||
async ({ sessionId, bookingId }: EvvTarget) => {
|
||||
const pos = await capture(sessionId);
|
||||
setBusySessionId(sessionId);
|
||||
try {
|
||||
await checkOutMut.mutateAsync({
|
||||
input: {
|
||||
bookingSessionId: sessionId,
|
||||
latitude: pos?.latitude ?? null,
|
||||
longitude: pos?.longitude ?? null,
|
||||
capturedAt: new Date().toISOString(),
|
||||
},
|
||||
bookingId,
|
||||
});
|
||||
enqueueSnackbar(t('evv_checked_out_toast'), { variant: 'success' });
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError && (error.status === 400 || error.code === 'no_open_check_in')) {
|
||||
enqueueSnackbar(t('evv_no_open_check_in'), { variant: 'warning' });
|
||||
} else if (error instanceof ApiError && error.status === 409) {
|
||||
enqueueSnackbar(t('evv_check_out_error'), { variant: 'warning' });
|
||||
}
|
||||
} finally {
|
||||
setBusySessionId(null);
|
||||
}
|
||||
},
|
||||
[capture, checkOutMut, enqueueSnackbar, t],
|
||||
);
|
||||
|
||||
return { acquiringSessionId, busySessionId, checkIn, checkOut };
|
||||
}
|
||||
@@ -61,6 +61,15 @@ import TuneIcon from '@mui/icons-material/TuneOutlined';
|
||||
// Booking requests — the pre-payment intent flow (f7/b8): nurse inbox + the pay-&-continue handoff
|
||||
import RequestsIcon from '@mui/icons-material/AssignmentOutlined';
|
||||
import PaymentIcon from '@mui/icons-material/CreditCardOutlined';
|
||||
// Bookings, sessions & EVV — the post-payment engagement (f8/b9): check-in/out, GPS, care instructions
|
||||
import CheckInIcon from '@mui/icons-material/LoginOutlined';
|
||||
import CheckOutIcon from '@mui/icons-material/LogoutOutlined';
|
||||
import GpsIcon from '@mui/icons-material/MyLocationOutlined';
|
||||
import ScheduleIcon from '@mui/icons-material/ScheduleOutlined';
|
||||
import ClinicalIcon from '@mui/icons-material/HealthAndSafetyOutlined';
|
||||
import MedicationIcon from '@mui/icons-material/MedicationOutlined';
|
||||
import EmergencyIcon from '@mui/icons-material/LocalPhoneOutlined';
|
||||
import LockIcon from '@mui/icons-material/LockOutlined';
|
||||
|
||||
/**
|
||||
* List of all available Icon names
|
||||
@@ -133,4 +142,12 @@ export const ICONS /* Note: Setting type disables property autocomplete :( was -
|
||||
tune: TuneIcon,
|
||||
requests: RequestsIcon,
|
||||
payment: PaymentIcon,
|
||||
check_in: CheckInIcon,
|
||||
check_out: CheckOutIcon,
|
||||
gps: GpsIcon,
|
||||
schedule: ScheduleIcon,
|
||||
clinical: ClinicalIcon,
|
||||
medication: MedicationIcon,
|
||||
emergency: EmergencyIcon,
|
||||
lock: LockIcon,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import { clientFetch } from '@/lib/api/client';
|
||||
import { unwrap, type ApiEnvelope, type Paginated } from '@/lib/api/types';
|
||||
import { BOOKINGS_PAGE_SIZE } from '../constants';
|
||||
import type {
|
||||
BookingDetailDto,
|
||||
BookingListItemDto,
|
||||
BookingListParams,
|
||||
BookingSessionListItemDto,
|
||||
BookingsApi,
|
||||
CareInstructionsDto,
|
||||
CheckInVisitInput,
|
||||
CheckOutVisitInput,
|
||||
TodaySessionsParams,
|
||||
VisitVerificationDto,
|
||||
} from '../types';
|
||||
|
||||
const BOOKINGS = '/api/v1/bookings';
|
||||
const SESSIONS = '/api/v1/booking_sessions';
|
||||
|
||||
/**
|
||||
* Real HTTP implementation of the `BookingsApi` seam (b9 contract `dev/contracts/domains/bookings-evv.md`,
|
||||
* swagger `dev/contracts/openapi/swagger.v1.json`). Routes are action-style + snake_case; ids come from
|
||||
* the **route**; bodies/fields are camelCase and `clientFetch` returns the raw envelope, so we `unwrap()`.
|
||||
*
|
||||
* NOT the primary implementation this phase (`USE_BOOKINGS_MOCK = true`): a booking only exists after the
|
||||
* (mock-primary) request flow converts + is paid (b10), so `bookings/list` has nothing to return yet.
|
||||
* The server infers the viewer from auth + tenancy (nurse view masks `addressSnapshotJson`; the
|
||||
* care-instructions read 404s for anyone but the assigned nurse/admin), so the `viewerRole` args a mock
|
||||
* needs are ignored here. The EVV commands send only the coordinates — the server timestamps the
|
||||
* authoritative `checkInAt`, so the client's `capturedAt` is not sent. One config flip selects this.
|
||||
*/
|
||||
export const bookingsClientApi: BookingsApi = {
|
||||
getBookingDetail: async (id: number) =>
|
||||
unwrap(await clientFetch<ApiEnvelope<BookingDetailDto>>(`${BOOKINGS}/get/${id}`)),
|
||||
|
||||
listBookings: async (params: BookingListParams): Promise<Paginated<BookingListItemDto>> => {
|
||||
const query = new URLSearchParams();
|
||||
query.set('role', params.role);
|
||||
if (params.status) query.set('status', params.status);
|
||||
query.set('page', String(params.page ?? 1));
|
||||
query.set('pageSize', String(params.pageSize ?? BOOKINGS_PAGE_SIZE));
|
||||
return unwrap(await clientFetch<ApiEnvelope<Paginated<BookingListItemDto>>>(`${BOOKINGS}/list?${query.toString()}`));
|
||||
},
|
||||
|
||||
listTodaySessions: async (params: TodaySessionsParams): Promise<Paginated<BookingSessionListItemDto>> => {
|
||||
const query = new URLSearchParams();
|
||||
if (params.date) query.set('date', params.date);
|
||||
query.set('page', String(params.page ?? 1));
|
||||
query.set('pageSize', String(params.pageSize ?? BOOKINGS_PAGE_SIZE));
|
||||
return unwrap(
|
||||
await clientFetch<ApiEnvelope<Paginated<BookingSessionListItemDto>>>(`${SESSIONS}/today?${query.toString()}`),
|
||||
);
|
||||
},
|
||||
|
||||
getSessionEvv: async (sessionId: number) =>
|
||||
unwrap(await clientFetch<ApiEnvelope<VisitVerificationDto>>(`${SESSIONS}/evv/${sessionId}`)),
|
||||
|
||||
getCareInstructions: async (bookingId: number) =>
|
||||
unwrap(await clientFetch<ApiEnvelope<CareInstructionsDto>>(`${BOOKINGS}/care_instructions/${bookingId}`)),
|
||||
|
||||
checkInVisit: async (input: CheckInVisitInput) =>
|
||||
unwrap(
|
||||
await clientFetch<ApiEnvelope<VisitVerificationDto>>(`${SESSIONS}/check_in/${input.bookingSessionId}`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ latitude: input.latitude, longitude: input.longitude }),
|
||||
}),
|
||||
),
|
||||
|
||||
checkOutVisit: async (input: CheckOutVisitInput) =>
|
||||
unwrap(
|
||||
await clientFetch<ApiEnvelope<VisitVerificationDto>>(`${SESSIONS}/check_out/${input.bookingSessionId}`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ latitude: input.latitude, longitude: input.longitude }),
|
||||
}),
|
||||
),
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
import { USE_BOOKINGS_MOCK } from '../constants';
|
||||
import type { BookingsApi } from '../types';
|
||||
import { bookingsClientApi } from './clientApi';
|
||||
import { bookingsMockApi } from './mockApi';
|
||||
|
||||
/**
|
||||
* The selected `BookingsApi` implementation — the single seam the hooks import. Selection is by config
|
||||
* (`USE_BOOKINGS_MOCK`), never by scattered `if (mock)` checks.
|
||||
*/
|
||||
export const bookingsApi: BookingsApi = USE_BOOKINGS_MOCK ? bookingsMockApi : bookingsClientApi;
|
||||
@@ -0,0 +1,382 @@
|
||||
import { sleep } from '@/utils';
|
||||
import { ApiError } from '@/lib/api/errors';
|
||||
import type { Paginated } from '@/lib/api/types';
|
||||
import {
|
||||
BOOKINGS_PAGE_SIZE,
|
||||
MOCK_EVV_REFERENCE_LAT,
|
||||
MOCK_EVV_REFERENCE_LNG,
|
||||
MOCK_EVV_TOLERANCE_METERS,
|
||||
} from '../constants';
|
||||
import type {
|
||||
BookingDetailDto,
|
||||
BookingListItemDto,
|
||||
BookingListParams,
|
||||
BookingSessionDto,
|
||||
BookingSessionListItemDto,
|
||||
BookingsApi,
|
||||
BookingViewerRole,
|
||||
CareInstructionsDto,
|
||||
CheckInVisitInput,
|
||||
CheckOutVisitInput,
|
||||
TodaySessionsParams,
|
||||
VisitVerificationDto,
|
||||
} from '../types';
|
||||
|
||||
const MOCK_LATENCY_MS = 350;
|
||||
|
||||
/** Dispute window the mock stamps at completion — the payout-eligibility gate is server truth, mocked here. */
|
||||
const DISPUTE_WINDOW_HOURS = 72;
|
||||
|
||||
const NURSE_ID = 1;
|
||||
const NURSE_NAME = 'مریم رضایی';
|
||||
|
||||
/** `YYYY-MM-DD` for a day offset from today (mock seed dates — runs client-side, so `new Date()` is fine). */
|
||||
function isoDate(daysFromToday: number): string {
|
||||
const d = new Date();
|
||||
d.setDate(d.getDate() + daysFromToday);
|
||||
return d.toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
/** Haversine distance in metres — the mock stand-in for the server's address-match math. */
|
||||
function distanceMeters(lat1: number, lng1: number, lat2: number, lng2: number): number {
|
||||
const R = 6_371_000;
|
||||
const toRad = (deg: number) => (deg * Math.PI) / 180;
|
||||
const dLat = toRad(lat2 - lat1);
|
||||
const dLng = toRad(lng2 - lng1);
|
||||
const a =
|
||||
Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2;
|
||||
return 2 * R * Math.asin(Math.sqrt(a));
|
||||
}
|
||||
|
||||
function makeSession(id: number, sessionIndex: number, daysFromToday: number, payoutIrr: string): BookingSessionDto {
|
||||
return {
|
||||
id,
|
||||
sessionIndex,
|
||||
scheduledDate: isoDate(daysFromToday),
|
||||
scheduledTimeStart: '09:00:00',
|
||||
scheduledTimeEnd: '13:00:00',
|
||||
status: 'scheduled',
|
||||
visitPayoutAmount: payoutIrr,
|
||||
payoutEligibleAt: null,
|
||||
evvStatus: 'pending',
|
||||
checkInAt: null,
|
||||
checkOutAt: null,
|
||||
checkInAddressMatch: null,
|
||||
};
|
||||
}
|
||||
|
||||
// Shared, module-level store so both the customer view and the nurse view read the same booking, and an
|
||||
// EVV check-in/out flips the timeline/session/banner for both. Seeded with one multi-session booking and
|
||||
// one single-visit booking (proving the single-visit path renders one session row through the same card),
|
||||
// both assigned to the seeded nurse and scheduled with a today session so check-in is demoable out of box.
|
||||
let bookings: BookingDetailDto[] = [];
|
||||
const verifications: Record<number, VisitVerificationDto> = {};
|
||||
const care: Record<number, CareInstructionsDto> = {};
|
||||
|
||||
function seed(): void {
|
||||
const addr5001 = JSON.stringify({
|
||||
title: 'منزل',
|
||||
city: 'تهران',
|
||||
district: 'سعادتآباد',
|
||||
line: 'خیابان نمونه، کوچه دوم، پلاک ۱۲',
|
||||
postalCode: '1998887766',
|
||||
});
|
||||
const addr5002 = JSON.stringify({
|
||||
title: 'آپارتمان',
|
||||
city: 'تهران',
|
||||
district: 'ونک',
|
||||
line: 'خیابان ملاصدرا، پلاک ۴۵، واحد ۷',
|
||||
postalCode: '1991112233',
|
||||
});
|
||||
|
||||
bookings = [
|
||||
{
|
||||
id: 5001,
|
||||
bookingRequestId: 9001,
|
||||
status: 'confirmed',
|
||||
nurseId: NURSE_ID,
|
||||
nurseName: NURSE_NAME,
|
||||
patientId: 901,
|
||||
patientName: 'حاجآقا موسوی',
|
||||
variantId: 11,
|
||||
variantSnapshotJson: JSON.stringify({ displayName: 'مراقبت سالمند — شیفت روز', priceUnit: 'per_day' }),
|
||||
customerAddressId: 801,
|
||||
addressSnapshotJson: addr5001,
|
||||
grossPriceIrr: '45000000',
|
||||
balinyaarCommissionIrr: '5400000',
|
||||
nursePayoutAmount: '39600000',
|
||||
pspFeeAmount: '900000',
|
||||
platformFeeRate: 0.12,
|
||||
sessionCount: 3,
|
||||
scheduledDate: isoDate(0),
|
||||
scheduledTimeStart: '09:00:00',
|
||||
scheduledTimeEnd: '13:00:00',
|
||||
confirmedAt: new Date().toISOString(),
|
||||
completedAt: null,
|
||||
cancelledAt: null,
|
||||
cancelledBy: null,
|
||||
cancellationReason: null,
|
||||
cancellationPolicyCode: null,
|
||||
cancellationRefundPercentage: null,
|
||||
refundableAmountIrr: null,
|
||||
disputeWindowEndsAt: null,
|
||||
createdAt: new Date().toISOString(),
|
||||
sessions: [
|
||||
makeSession(70011, 1, 0, '13200000'),
|
||||
makeSession(70012, 2, 1, '13200000'),
|
||||
makeSession(70013, 3, 2, '13200000'),
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 5002,
|
||||
bookingRequestId: 9002,
|
||||
status: 'confirmed',
|
||||
nurseId: NURSE_ID,
|
||||
nurseName: NURSE_NAME,
|
||||
patientId: 902,
|
||||
patientName: 'خانم احمدی',
|
||||
variantId: 12,
|
||||
variantSnapshotJson: JSON.stringify({ displayName: 'مراقبت پس از جراحی', priceUnit: 'per_session' }),
|
||||
customerAddressId: 802,
|
||||
addressSnapshotJson: addr5002,
|
||||
grossPriceIrr: '18000000',
|
||||
balinyaarCommissionIrr: '2160000',
|
||||
nursePayoutAmount: '15840000',
|
||||
pspFeeAmount: '360000',
|
||||
platformFeeRate: 0.12,
|
||||
sessionCount: 1,
|
||||
scheduledDate: isoDate(0),
|
||||
scheduledTimeStart: '15:00:00',
|
||||
scheduledTimeEnd: '19:00:00',
|
||||
confirmedAt: new Date().toISOString(),
|
||||
completedAt: null,
|
||||
cancelledAt: null,
|
||||
cancelledBy: null,
|
||||
cancellationReason: null,
|
||||
cancellationPolicyCode: null,
|
||||
cancellationRefundPercentage: null,
|
||||
refundableAmountIrr: null,
|
||||
disputeWindowEndsAt: null,
|
||||
createdAt: new Date().toISOString(),
|
||||
sessions: [{ ...makeSession(70021, 1, 0, '15840000'), scheduledTimeStart: '15:00:00', scheduledTimeEnd: '19:00:00' }],
|
||||
},
|
||||
];
|
||||
|
||||
care[5001] = {
|
||||
bookingId: 5001,
|
||||
currentConditions: 'دیابت نوع ۲، فشار خون بالا',
|
||||
medications: 'متفورمین ۵۰۰ (صبح و شب) · لوزارتان ۲۵ (صبح)',
|
||||
allergies: 'حساسیت به پنیسیلین',
|
||||
specialInstructions: 'قند خون پیش از هر وعده اندازهگیری شود؛ یک پیادهروی کوتاه بعدازظهر توصیه شده است.',
|
||||
emergencyContactName: 'زهرا موسوی',
|
||||
emergencyContactPhone: '09121234567',
|
||||
};
|
||||
care[5002] = {
|
||||
bookingId: 5002,
|
||||
currentConditions: 'دورهٔ نقاهت پس از عمل زانو',
|
||||
medications: 'مسکن طبق دستور پزشک',
|
||||
allergies: null,
|
||||
specialInstructions: 'در جابهجایی و تعویض پانسمان کمک شود؛ از فشار روی زانوی عملشده پرهیز شود.',
|
||||
emergencyContactName: 'علی احمدی',
|
||||
emergencyContactPhone: '09120009988',
|
||||
};
|
||||
}
|
||||
|
||||
seed();
|
||||
|
||||
function cloneBooking(b: BookingDetailDto): BookingDetailDto {
|
||||
return { ...b, sessions: b.sessions.map((s) => ({ ...s })) };
|
||||
}
|
||||
|
||||
function findBooking(id: number): BookingDetailDto {
|
||||
const b = bookings.find((row) => row.id === id);
|
||||
// Tenancy is not modelled in the single-session mock; a missing booking 404s (no leak either way).
|
||||
if (!b) throw new ApiError(404, 'Booking not found', 'not_found');
|
||||
return b;
|
||||
}
|
||||
|
||||
function findSession(sessionId: number): { booking: BookingDetailDto; session: BookingSessionDto } {
|
||||
for (const booking of bookings) {
|
||||
const session = booking.sessions.find((s) => s.id === sessionId);
|
||||
if (session) return { booking, session };
|
||||
}
|
||||
throw new ApiError(404, 'Session not found', 'not_found');
|
||||
}
|
||||
|
||||
/** The nurse view omits the full address snapshot (two-stage disclosure — coarse context only). */
|
||||
function forViewer(b: BookingDetailDto, viewerRole: BookingViewerRole | undefined): BookingDetailDto {
|
||||
const clone = cloneBooking(b);
|
||||
if (viewerRole === 'nurse') clone.addressSnapshotJson = null;
|
||||
return clone;
|
||||
}
|
||||
|
||||
function toListItem(b: BookingDetailDto, role: BookingListParams['role']): BookingListItemDto {
|
||||
return {
|
||||
id: b.id,
|
||||
status: b.status,
|
||||
counterpartyName: role === 'nurse' ? b.patientName : b.nurseName,
|
||||
scheduledDate: b.scheduledDate,
|
||||
sessionCount: b.sessionCount,
|
||||
// Contract: gross for the customer, the nurse's payout for the nurse.
|
||||
amountIrr: role === 'nurse' ? b.nursePayoutAmount : b.grossPriceIrr,
|
||||
disputeWindowEndsAt: b.disputeWindowEndsAt,
|
||||
createdAt: b.createdAt,
|
||||
};
|
||||
}
|
||||
|
||||
function pendingVerification(session: BookingSessionDto): VisitVerificationDto {
|
||||
return {
|
||||
id: session.id,
|
||||
bookingSessionId: session.id,
|
||||
status: session.evvStatus,
|
||||
checkInAt: session.checkInAt,
|
||||
checkInLat: null,
|
||||
checkInLng: null,
|
||||
checkOutAt: session.checkOutAt,
|
||||
checkOutLat: null,
|
||||
checkOutLng: null,
|
||||
checkInAddressMatch: session.checkInAddressMatch,
|
||||
checkInDistanceMeters: null,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* In-memory mock behind the `BookingsApi` seam. Seeds confirmed bookings + sessions + care + EVV and
|
||||
* drives the check-in/out state machine so the timeline, session chips, and EVV banner all transition
|
||||
* without a live b9 backend. Mirrors the real shapes + status/EVV/masking/gating semantics for a one-line
|
||||
* swap once conversion (b10) is live client-side (`USE_BOOKINGS_MOCK = false`).
|
||||
*/
|
||||
export const bookingsMockApi: BookingsApi = {
|
||||
getBookingDetail: async (id, viewerRole) => {
|
||||
await sleep(MOCK_LATENCY_MS);
|
||||
return forViewer(findBooking(id), viewerRole);
|
||||
},
|
||||
|
||||
listBookings: async (params: BookingListParams): Promise<Paginated<BookingListItemDto>> => {
|
||||
await sleep(MOCK_LATENCY_MS);
|
||||
const matched = bookings
|
||||
.filter((b) => (params.status ? b.status === params.status : true))
|
||||
.sort((a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt))
|
||||
.map((b) => toListItem(b, params.role));
|
||||
const page = params.page ?? 1;
|
||||
const pageSize = params.pageSize ?? BOOKINGS_PAGE_SIZE;
|
||||
const start = (page - 1) * pageSize;
|
||||
return { items: matched.slice(start, start + pageSize), total: matched.length, page, pageSize };
|
||||
},
|
||||
|
||||
listTodaySessions: async (params: TodaySessionsParams): Promise<Paginated<BookingSessionListItemDto>> => {
|
||||
await sleep(MOCK_LATENCY_MS);
|
||||
const day = params.date ?? isoDate(0);
|
||||
const items: BookingSessionListItemDto[] = [];
|
||||
for (const booking of bookings) {
|
||||
for (const session of booking.sessions) {
|
||||
if (session.scheduledDate !== day) continue;
|
||||
items.push({
|
||||
sessionId: session.id,
|
||||
bookingId: booking.id,
|
||||
sessionIndex: session.sessionIndex,
|
||||
patientName: booking.patientName,
|
||||
scheduledDate: session.scheduledDate,
|
||||
scheduledTimeStart: session.scheduledTimeStart,
|
||||
scheduledTimeEnd: session.scheduledTimeEnd,
|
||||
status: session.status,
|
||||
evvStatus: session.evvStatus,
|
||||
});
|
||||
}
|
||||
}
|
||||
items.sort((a, b) => a.scheduledTimeStart.localeCompare(b.scheduledTimeStart));
|
||||
const page = params.page ?? 1;
|
||||
const pageSize = params.pageSize ?? BOOKINGS_PAGE_SIZE;
|
||||
const start = (page - 1) * pageSize;
|
||||
return { items: items.slice(start, start + pageSize), total: items.length, page, pageSize };
|
||||
},
|
||||
|
||||
getSessionEvv: async (sessionId: number) => {
|
||||
await sleep(MOCK_LATENCY_MS);
|
||||
const existing = verifications[sessionId];
|
||||
if (existing) return { ...existing };
|
||||
const { session } = findSession(sessionId);
|
||||
return pendingVerification(session);
|
||||
},
|
||||
|
||||
getCareInstructions: async (bookingId: number, viewerRole) => {
|
||||
await sleep(MOCK_LATENCY_MS);
|
||||
const booking = findBooking(bookingId);
|
||||
// The gated boundary — anyone but the assigned nurse/admin 404s (never leaks). The client UI gate
|
||||
// means this is a defence-in-depth path the customer should never even reach.
|
||||
if (viewerRole !== 'nurse') throw new ApiError(404, 'Not found', 'not_found');
|
||||
const record = care[booking.id];
|
||||
if (!record) throw new ApiError(404, 'Not found', 'not_found');
|
||||
return { ...record };
|
||||
},
|
||||
|
||||
checkInVisit: async (input: CheckInVisitInput) => {
|
||||
await sleep(MOCK_LATENCY_MS);
|
||||
const { booking, session } = findSession(input.bookingSessionId);
|
||||
if (session.status !== 'scheduled') throw new ApiError(409, 'Session is not startable', 'not_startable');
|
||||
|
||||
const now = new Date().toISOString();
|
||||
const hasCoords = input.latitude != null && input.longitude != null;
|
||||
const meters = hasCoords
|
||||
? distanceMeters(input.latitude as number, input.longitude as number, MOCK_EVV_REFERENCE_LAT, MOCK_EVV_REFERENCE_LNG)
|
||||
: null;
|
||||
// Advisory: true in range · false out-of-range (under review) · null when GPS was unavailable.
|
||||
const match = meters == null ? null : meters <= MOCK_EVV_TOLERANCE_METERS;
|
||||
|
||||
session.status = 'in_progress';
|
||||
session.evvStatus = 'checked_in';
|
||||
session.checkInAt = now;
|
||||
session.checkInAddressMatch = match;
|
||||
if (booking.status === 'confirmed') booking.status = 'in_progress';
|
||||
|
||||
const verification: VisitVerificationDto = {
|
||||
id: session.id,
|
||||
bookingSessionId: session.id,
|
||||
status: 'checked_in',
|
||||
checkInAt: now,
|
||||
checkInLat: input.latitude,
|
||||
checkInLng: input.longitude,
|
||||
checkOutAt: null,
|
||||
checkOutLat: null,
|
||||
checkOutLng: null,
|
||||
checkInAddressMatch: match,
|
||||
checkInDistanceMeters: meters == null ? null : Math.round(meters),
|
||||
};
|
||||
verifications[session.id] = verification;
|
||||
return { ...verification };
|
||||
},
|
||||
|
||||
checkOutVisit: async (input: CheckOutVisitInput) => {
|
||||
await sleep(MOCK_LATENCY_MS);
|
||||
const { booking, session } = findSession(input.bookingSessionId);
|
||||
if (session.evvStatus !== 'checked_in') throw new ApiError(400, 'No open check-in to close', 'no_open_check_in');
|
||||
|
||||
const now = new Date().toISOString();
|
||||
session.status = 'completed';
|
||||
session.evvStatus = 'completed';
|
||||
session.checkOutAt = now;
|
||||
|
||||
const disputeEnd = new Date(Date.now() + DISPUTE_WINDOW_HOURS * 3_600_000).toISOString();
|
||||
// Payout eligibility is server truth (gated by the dispute window). The mock stamps it; the client
|
||||
// renders it and never recomputes it.
|
||||
session.payoutEligibleAt = disputeEnd;
|
||||
|
||||
const allSettled = booking.sessions.every((s) => s.status === 'completed' || s.status === 'cancelled');
|
||||
if (allSettled) {
|
||||
booking.status = 'completed';
|
||||
booking.completedAt = now;
|
||||
booking.disputeWindowEndsAt = disputeEnd;
|
||||
}
|
||||
|
||||
const verification = verifications[session.id] ?? pendingVerification(session);
|
||||
const updated: VisitVerificationDto = {
|
||||
...verification,
|
||||
status: 'completed',
|
||||
checkOutAt: now,
|
||||
checkOutLat: input.latitude,
|
||||
checkOutLng: input.longitude,
|
||||
};
|
||||
verifications[session.id] = updated;
|
||||
return { ...updated };
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
import { serverFetch } from '@/lib/api/server';
|
||||
import { unwrap, type ApiEnvelope } from '@/lib/api/types';
|
||||
import type { BookingDetailDto } from '../types';
|
||||
|
||||
const BOOKINGS = '/api/v1/bookings';
|
||||
|
||||
/**
|
||||
* Server-side reads for the bookings domain — used to **prefetch the booking detail in an RSC** and hand
|
||||
* it to the client tree via `initialData`, removing a client round-trip on first paint (f0 pattern). Only
|
||||
* the detail is prefetched; the EVV mutations and the gated care-instructions read stay on the client.
|
||||
*
|
||||
* Not wired into the pages while the domain is mock-primary (an RSC cannot read the in-memory mock store);
|
||||
* it becomes the first-paint source the moment `USE_BOOKINGS_MOCK` flips to `false`. Kept separate from
|
||||
* `clientApi.ts` — Next.js enforces the `serverFetch`/`clientFetch` environment boundary at build time.
|
||||
*/
|
||||
export const bookingsServerApi = {
|
||||
getBookingDetail: async (id: number): Promise<BookingDetailDto> =>
|
||||
unwrap(await serverFetch<ApiEnvelope<BookingDetailDto>>(`${BOOKINGS}/get/${id}`)),
|
||||
};
|
||||
@@ -0,0 +1,64 @@
|
||||
/**
|
||||
* When true, the bookings domain is served by the in-memory mock (`apis/mockApi.ts`) behind the
|
||||
* `BookingsApi` seam.
|
||||
*
|
||||
* **Mock is primary this phase.** The b9 endpoints are fully specified in swagger, but a booking only
|
||||
* exists after `bookings/convert` runs against an `accepted_awaiting_payment` **request** that was paid —
|
||||
* and both upstreams are not real on the client yet: `services/bookingRequests` is mock-primary
|
||||
* (f7, `USE_BOOKING_REQUESTS_MOCK`) and card capture (b10) isn't wired. So a real `bookings/list` would
|
||||
* return nothing to render. The mock seeds confirmed bookings + sessions + care + EVV and drives the
|
||||
* check-in/out state machine so the timeline/session/banner transitions demo end-to-end. The real
|
||||
* `clientApi` maps the routes 1:1; flip to `false` once conversion (b10) is live client-side — a single
|
||||
* config change, no hook/component edits (see `dev/shared-working-context/reports/frontend-phase-8-report.md`).
|
||||
*/
|
||||
export const USE_BOOKINGS_MOCK = true;
|
||||
|
||||
/**
|
||||
* The booking detail changes on status transitions (payment → confirmed → in_progress → completed) and
|
||||
* on EVV mutations. Keep the stale window modest and **invalidate on every EVV mutation** so the timeline
|
||||
* reflects server truth immediately rather than waiting it out.
|
||||
*/
|
||||
export const BOOKING_DETAIL_STALE_TIME = 30 * 1000;
|
||||
export const BOOKING_DETAIL_GC_TIME = 5 * 60 * 1000;
|
||||
|
||||
/** The bookings list changes only on new conversions/transitions — a short stale window is plenty. */
|
||||
export const BOOKING_LIST_STALE_TIME = 30 * 1000;
|
||||
|
||||
/** A nurse's "today" feed changes as they clock in/out — kept fresh, invalidated on every EVV mutation. */
|
||||
export const TODAY_SESSIONS_STALE_TIME = 15 * 1000;
|
||||
|
||||
/** Per-session EVV detail is immutable once completed; a short window covers the checked-in interval. */
|
||||
export const SESSION_EVV_STALE_TIME = 15 * 1000;
|
||||
|
||||
/** Care instructions are effectively static per booking (edited rarely by the customer) — session-cached. */
|
||||
export const CARE_INSTRUCTIONS_STALE_TIME = 5 * 60 * 1000;
|
||||
|
||||
/** api-conventions default page size; a bookings/today page. */
|
||||
export const BOOKINGS_PAGE_SIZE = 20;
|
||||
|
||||
/**
|
||||
* EVV GPS capture mode for the `ILocationProvider` seam (`evv/locationProvider.ts`).
|
||||
*
|
||||
* - `off` → the **real** browser Geolocation provider.
|
||||
* - `in_range` → mock returns coordinates that fall inside the seeded booking's tolerance (match `true`).
|
||||
* - `out_of_range` → mock returns far coordinates (advisory match `false`).
|
||||
* - `denied` → mock returns `null` (permission denied / unavailable) — the nurse still checks in.
|
||||
*
|
||||
* Default: while the bookings domain is mock-primary, real browser GPS would never fall near the seeded
|
||||
* Tehran address, so the happy path defaults to `in_range` so «موقعیت تایید شد» is demoable out of the box.
|
||||
* Override with `NEXT_PUBLIC_EVV_MOCK_GPS`; set to `off` (or flip `USE_BOOKINGS_MOCK`) for real capture.
|
||||
*/
|
||||
export type EvvGpsMode = 'off' | 'in_range' | 'out_of_range' | 'denied';
|
||||
|
||||
export const EVV_GPS_MODE: EvvGpsMode =
|
||||
(process.env.NEXT_PUBLIC_EVV_MOCK_GPS as EvvGpsMode | undefined) ?? (USE_BOOKINGS_MOCK ? 'in_range' : 'off');
|
||||
|
||||
/**
|
||||
* The seeded booking's reference location + advisory tolerance, shared by the mock `ILocationProvider`
|
||||
* (its `in_range` coords sit on this point) and the mock `BookingsApi` (it computes the advisory
|
||||
* `checkInAddressMatch` against this point). Real address-match math lives server-side behind the
|
||||
* backend geocoding seam — this is mock-only. A Tehran (Saadat-Abad) point, matching the seeded address.
|
||||
*/
|
||||
export const MOCK_EVV_REFERENCE_LAT = 35.7869;
|
||||
export const MOCK_EVV_REFERENCE_LNG = 51.3699;
|
||||
export const MOCK_EVV_TOLERANCE_METERS = 150;
|
||||
@@ -0,0 +1,77 @@
|
||||
import {
|
||||
EVV_GPS_MODE,
|
||||
MOCK_EVV_REFERENCE_LAT,
|
||||
MOCK_EVV_REFERENCE_LNG,
|
||||
type EvvGpsMode,
|
||||
} from '../constants';
|
||||
|
||||
/**
|
||||
* `ILocationProvider` — the one client seam this phase introduces. It wraps the browser Geolocation API
|
||||
* for EVV GPS capture so the check-in/out flow is testable without a device and so the
|
||||
* denied/unavailable path can be exercised deterministically.
|
||||
*
|
||||
* `getCurrentPosition` **never rejects** — a denied/unavailable/timed-out fix resolves to `null`. The
|
||||
* product rule is that a GPS problem is **advisory, never a hard stop**: the caller submits the check-in
|
||||
* with `null` coordinates (flagged server-side) rather than blocking the visit. Selection between the
|
||||
* real and mock implementations is by `EVV_GPS_MODE` (`NEXT_PUBLIC_EVV_MOCK_GPS`), never scattered checks.
|
||||
*
|
||||
* Registered in `dev/shared-working-context/reports/mocks-registry.md`. Server-side GPS/address-match
|
||||
* math lives behind the backend's geocoding seam — this seam only *captures* the position.
|
||||
*/
|
||||
export interface GeoPosition {
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
}
|
||||
|
||||
export interface ILocationProvider {
|
||||
/** Resolves the current position, or `null` when it can't be obtained (denied/unavailable/timeout). */
|
||||
getCurrentPosition(): Promise<GeoPosition | null>;
|
||||
}
|
||||
|
||||
const GEOLOCATION_TIMEOUT_MS = 10_000;
|
||||
|
||||
/** Real provider — `navigator.geolocation.getCurrentPosition`, resolving `null` on any failure. */
|
||||
const realLocationProvider: ILocationProvider = {
|
||||
getCurrentPosition: () =>
|
||||
new Promise<GeoPosition | null>((resolve) => {
|
||||
if (typeof navigator === 'undefined' || !navigator.geolocation) {
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(pos) => resolve({ latitude: pos.coords.latitude, longitude: pos.coords.longitude }),
|
||||
() => resolve(null), // denied / unavailable / timeout — advisory, never a throw
|
||||
{ enableHighAccuracy: true, timeout: GEOLOCATION_TIMEOUT_MS, maximumAge: 0 },
|
||||
);
|
||||
}),
|
||||
};
|
||||
|
||||
const MOCK_LATENCY_MS = 500;
|
||||
|
||||
// ~5 km offset from the reference — comfortably outside any sane tolerance (advisory mismatch).
|
||||
const OUT_OF_RANGE_DEGREE_OFFSET = 0.05;
|
||||
|
||||
/** Mock provider — canned coordinates per mode, with a small latency to exercise the "acquiring…" state. */
|
||||
function makeMockLocationProvider(mode: Exclude<EvvGpsMode, 'off'>): ILocationProvider {
|
||||
return {
|
||||
getCurrentPosition: () =>
|
||||
new Promise<GeoPosition | null>((resolve) => {
|
||||
setTimeout(() => {
|
||||
if (mode === 'denied') {
|
||||
resolve(null);
|
||||
} else if (mode === 'out_of_range') {
|
||||
resolve({
|
||||
latitude: MOCK_EVV_REFERENCE_LAT + OUT_OF_RANGE_DEGREE_OFFSET,
|
||||
longitude: MOCK_EVV_REFERENCE_LNG + OUT_OF_RANGE_DEGREE_OFFSET,
|
||||
});
|
||||
} else {
|
||||
resolve({ latitude: MOCK_EVV_REFERENCE_LAT, longitude: MOCK_EVV_REFERENCE_LNG });
|
||||
}
|
||||
}, MOCK_LATENCY_MS);
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
/** The selected provider — the single seam the EVV controller imports. */
|
||||
export const locationProvider: ILocationProvider =
|
||||
EVV_GPS_MODE === 'off' ? realLocationProvider : makeMockLocationProvider(EVV_GPS_MODE);
|
||||
@@ -0,0 +1,21 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { bookingsApi } from '../apis';
|
||||
import { bookingKeys } from '../keys';
|
||||
import { BOOKING_DETAIL_GC_TIME, BOOKING_DETAIL_STALE_TIME } from '../constants';
|
||||
import type { BookingViewerRole } from '../types';
|
||||
|
||||
/**
|
||||
* The booking header + money summary + embedded sessions + timeline status. `viewerRole` drives the
|
||||
* mock's address masking (the real server infers it from auth). A modest `staleTime` keeps the timeline
|
||||
* fresh across status transitions; EVV mutations **invalidate** this key so the timeline and session rows
|
||||
* reflect server truth immediately. Enabled only when an id is present.
|
||||
*/
|
||||
export function useBookingDetail(id: number | undefined, viewerRole: BookingViewerRole) {
|
||||
return useQuery({
|
||||
queryKey: bookingKeys.bookingDetail(id ?? -1),
|
||||
queryFn: () => bookingsApi.getBookingDetail(id as number, viewerRole),
|
||||
enabled: id != null && id > 0,
|
||||
staleTime: BOOKING_DETAIL_STALE_TIME,
|
||||
gcTime: BOOKING_DETAIL_GC_TIME,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { bookingsApi } from '../apis';
|
||||
import { bookingKeys } from '../keys';
|
||||
import { BOOKING_LIST_STALE_TIME, BOOKINGS_PAGE_SIZE } from '../constants';
|
||||
import type { BookingListParams, BookingListRole, BookingStatus } from '../types';
|
||||
|
||||
/**
|
||||
* The role-scoped "My bookings" list (`bookings/list`). The customer رزروها tab reads `role='customer'`;
|
||||
* the nurse reads `role='nurse'`. The role + status filter are part of the query key so each scope is a
|
||||
* distinct cache entry. A conversion/transition invalidates `bookingKeys.lists()`.
|
||||
*/
|
||||
export function useBookingList(
|
||||
role: BookingListRole,
|
||||
options?: { status?: BookingStatus; page?: number; pageSize?: number },
|
||||
) {
|
||||
const params: BookingListParams = {
|
||||
role,
|
||||
status: options?.status,
|
||||
page: options?.page ?? 1,
|
||||
pageSize: options?.pageSize ?? BOOKINGS_PAGE_SIZE,
|
||||
};
|
||||
return useQuery({
|
||||
queryKey: bookingKeys.list(params),
|
||||
queryFn: () => bookingsApi.listBookings(params),
|
||||
staleTime: BOOKING_LIST_STALE_TIME,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { bookingsApi } from '../apis';
|
||||
import { bookingKeys } from '../keys';
|
||||
import { BOOKING_DETAIL_STALE_TIME } from '../constants';
|
||||
import type { BookingSessionDto, BookingViewerRole } from '../types';
|
||||
|
||||
/**
|
||||
* The session schedule for a booking. Sessions are **embedded** in the booking detail (the contract
|
||||
* exposes no standalone per-booking session-list endpoint), so this shares the `bookingDetail(id)` query
|
||||
* key + queryFn and `select`s `sessions` — it dedupes with `useBookingDetail` and never fires a second
|
||||
* request. Invalidating `bookingDetail(id)` (which the EVV mutations do) refreshes it automatically.
|
||||
*/
|
||||
export function useBookingSessions(id: number | undefined, viewerRole: BookingViewerRole) {
|
||||
return useQuery({
|
||||
queryKey: bookingKeys.bookingDetail(id ?? -1),
|
||||
queryFn: () => bookingsApi.getBookingDetail(id as number, viewerRole),
|
||||
enabled: id != null && id > 0,
|
||||
staleTime: BOOKING_DETAIL_STALE_TIME,
|
||||
select: (detail): BookingSessionDto[] => detail.sessions,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { bookingsApi } from '../apis';
|
||||
import { bookingKeys } from '../keys';
|
||||
import { CARE_INSTRUCTIONS_STALE_TIME } from '../constants';
|
||||
|
||||
/**
|
||||
* The gated stage-2 care-instructions read (`bookings/care_instructions/{id}`) — the two-stage clinical
|
||||
* disclosure boundary. **`enabled` is the hard UI gate:** the caller passes `enabled` only when the
|
||||
* booking is `confirmed`+ **and** the viewer is the assigned nurse (or admin). When disabled the query
|
||||
* **never fires** — the client must not even request instructions it has no right to (a 403/404 from the
|
||||
* server is a defect path, not the design). Always reads with the `nurse` viewer role.
|
||||
*/
|
||||
export function useCareInstructions(bookingId: number | undefined, options: { enabled: boolean }) {
|
||||
return useQuery({
|
||||
queryKey: bookingKeys.careInstructions(bookingId ?? -1),
|
||||
queryFn: () => bookingsApi.getCareInstructions(bookingId as number, 'nurse'),
|
||||
enabled: options.enabled && bookingId != null && bookingId > 0,
|
||||
staleTime: CARE_INSTRUCTIONS_STALE_TIME,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { bookingsApi } from '../apis';
|
||||
import { bookingKeys } from '../keys';
|
||||
import type { CheckInVisitInput } from '../types';
|
||||
|
||||
/**
|
||||
* Nurse EVV check-in. On success it **invalidates** the booking detail (timeline + the embedded session
|
||||
* flips to `in_progress`), the today feed (the row's CTA state), and the bookings lists, and primes the
|
||||
* per-session EVV cache with the returned verification so the banner is instant. No client-side status or
|
||||
* money math — the server response is the single source. `bookingId` is passed alongside the input so the
|
||||
* invalidation is surgical (the verification payload carries only the session id).
|
||||
*
|
||||
* A GPS mismatch is advisory (`checkInAddressMatch = false`) and still succeeds — the banner warns, it
|
||||
* never blocks. Fetch-layer errors (401/403/5xx) are toasted by `clientFetch`; the caller surfaces only
|
||||
* domain-specific 4xx (e.g. a `409` not-startable).
|
||||
*/
|
||||
export function useCheckInVisit() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ input }: { input: CheckInVisitInput; bookingId: number }) => bookingsApi.checkInVisit(input),
|
||||
onSuccess: (verification, { input, bookingId }) => {
|
||||
queryClient.setQueryData(bookingKeys.sessionEvv(input.bookingSessionId), verification);
|
||||
queryClient.invalidateQueries({ queryKey: bookingKeys.bookingDetail(bookingId) });
|
||||
queryClient.invalidateQueries({ queryKey: bookingKeys.sessionEvv(input.bookingSessionId) });
|
||||
queryClient.invalidateQueries({ queryKey: bookingKeys.todayLists() });
|
||||
queryClient.invalidateQueries({ queryKey: bookingKeys.lists() });
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { bookingsApi } from '../apis';
|
||||
import { bookingKeys } from '../keys';
|
||||
import type { CheckOutVisitInput } from '../types';
|
||||
|
||||
/**
|
||||
* Nurse EVV check-out — must follow an open check-in (a `400 no_open_check_in` otherwise, surfaced by the
|
||||
* caller, not the fetch layer). On success the session flips to `completed` and, when it's the last
|
||||
* session, the booking completes + the dispute window opens — all server-driven. It invalidates the same
|
||||
* keys as check-in so the timeline, session row, and today feed reflect the new server state; no
|
||||
* client-side payout-eligibility math (`payoutEligibleAt` is server truth).
|
||||
*/
|
||||
export function useCheckOutVisit() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ input }: { input: CheckOutVisitInput; bookingId: number }) => bookingsApi.checkOutVisit(input),
|
||||
onSuccess: (verification, { input, bookingId }) => {
|
||||
queryClient.setQueryData(bookingKeys.sessionEvv(input.bookingSessionId), verification);
|
||||
queryClient.invalidateQueries({ queryKey: bookingKeys.bookingDetail(bookingId) });
|
||||
queryClient.invalidateQueries({ queryKey: bookingKeys.sessionEvv(input.bookingSessionId) });
|
||||
queryClient.invalidateQueries({ queryKey: bookingKeys.todayLists() });
|
||||
queryClient.invalidateQueries({ queryKey: bookingKeys.lists() });
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { bookingsApi } from '../apis';
|
||||
import { bookingKeys } from '../keys';
|
||||
import { SESSION_EVV_STALE_TIME } from '../constants';
|
||||
|
||||
/**
|
||||
* Per-session EVV detail (`booking_sessions/evv/{id}`) — the `checkInAt` + advisory `checkInAddressMatch`
|
||||
* the EVV banner renders on the nurse's day surface (the booking-detail card reads these from the
|
||||
* embedded session instead, so it doesn't need this). `enabled` lets the day surface fetch it only for
|
||||
* sessions that already have EVV activity. EVV mutations `setQueryData` this key so the banner is instant.
|
||||
*/
|
||||
export function useSessionEvv(sessionId: number | undefined, options?: { enabled?: boolean }) {
|
||||
return useQuery({
|
||||
queryKey: bookingKeys.sessionEvv(sessionId ?? -1),
|
||||
queryFn: () => bookingsApi.getSessionEvv(sessionId as number),
|
||||
enabled: (options?.enabled ?? true) && sessionId != null && sessionId > 0,
|
||||
staleTime: SESSION_EVV_STALE_TIME,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { bookingsApi } from '../apis';
|
||||
import { bookingKeys } from '../keys';
|
||||
import { BOOKINGS_PAGE_SIZE, TODAY_SESSIONS_STALE_TIME } from '../constants';
|
||||
import type { TodaySessionsParams } from '../types';
|
||||
|
||||
/**
|
||||
* The nurse's "today" session feed (`booking_sessions/today`) — the ویزیت امروز surface. Kept fresh (short
|
||||
* `staleTime`) and **invalidated on every EVV mutation** so a check-in/out flips the row's CTA state
|
||||
* without a manual refresh. `date` omitted = the server's today.
|
||||
*/
|
||||
export function useTodaySessions(options?: { date?: string; page?: number; pageSize?: number }) {
|
||||
const params: TodaySessionsParams = {
|
||||
date: options?.date,
|
||||
page: options?.page ?? 1,
|
||||
pageSize: options?.pageSize ?? BOOKINGS_PAGE_SIZE,
|
||||
};
|
||||
return useQuery({
|
||||
queryKey: bookingKeys.today(params),
|
||||
queryFn: () => bookingsApi.listTodaySessions(params),
|
||||
staleTime: TODAY_SESSIONS_STALE_TIME,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* Bookings domain barrel — re-exports **hooks only** (per the `services/{domain}` convention). Import
|
||||
* types/keys/apis/evv directly from their files when needed. This is the **post-payment** engagement half
|
||||
* (booking detail, sessions, EVV, gated care); the **pre-payment** request half lives in
|
||||
* `services/bookingRequests`.
|
||||
*/
|
||||
export { useBookingDetail } from './hooks/useBookingDetail';
|
||||
export { useBookingSessions } from './hooks/useBookingSessions';
|
||||
export { useBookingList } from './hooks/useBookingList';
|
||||
export { useTodaySessions } from './hooks/useTodaySessions';
|
||||
export { useSessionEvv } from './hooks/useSessionEvv';
|
||||
export { useCareInstructions } from './hooks/useCareInstructions';
|
||||
export { useCheckInVisit } from './hooks/useCheckInVisit';
|
||||
export { useCheckOutVisit } from './hooks/useCheckOutVisit';
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { BookingListParams, TodaySessionsParams } from './types';
|
||||
|
||||
/**
|
||||
* React Query key factory for the bookings domain (hierarchical, per the `services/{domain}` pattern).
|
||||
*
|
||||
* Sessions are **embedded** in `BookingDetailDto.sessions` (the contract exposes no standalone
|
||||
* per-booking session-list endpoint), so `bookingSessions(id)` is an intentional **alias** of
|
||||
* `bookingDetail(id)` — the session list is a `select` over the one detail query, never a second fetch.
|
||||
* Invalidating `bookingDetail(id)` therefore refreshes the timeline **and** the sessions in one shot.
|
||||
* `sessionEvv`/`today` are their own endpoints and their own keys.
|
||||
*/
|
||||
export const bookingKeys = {
|
||||
all: ['bookings'] as const,
|
||||
|
||||
lists: () => [...bookingKeys.all, 'list'] as const,
|
||||
list: (params: BookingListParams) =>
|
||||
[...bookingKeys.lists(), params.role, params.status ?? 'all', params.page ?? 1, params.pageSize ?? 0] as const,
|
||||
|
||||
details: () => [...bookingKeys.all, 'detail'] as const,
|
||||
bookingDetail: (id: number) => [...bookingKeys.details(), id] as const,
|
||||
/** Alias of `bookingDetail` — sessions live inside the detail payload (no separate endpoint). */
|
||||
bookingSessions: (id: number) => bookingKeys.bookingDetail(id),
|
||||
|
||||
todayLists: () => [...bookingKeys.all, 'today'] as const,
|
||||
today: (params: TodaySessionsParams) =>
|
||||
[...bookingKeys.todayLists(), params.date ?? 'today', params.page ?? 1, params.pageSize ?? 0] as const,
|
||||
|
||||
evv: () => [...bookingKeys.all, 'evv'] as const,
|
||||
sessionEvv: (sessionId: number) => [...bookingKeys.evv(), sessionId] as const,
|
||||
|
||||
care: () => [...bookingKeys.all, 'care'] as const,
|
||||
careInstructions: (bookingId: number) => [...bookingKeys.care(), bookingId] as const,
|
||||
};
|
||||
@@ -0,0 +1,263 @@
|
||||
import type { PageParams, Paginated } from '@/lib/api/types';
|
||||
|
||||
/**
|
||||
* Bookings domain — the **post-payment engagement** layer of the lifecycle (b9). An
|
||||
* `accepted_awaiting_payment` request that is paid converts (`bookings/convert`) into a `bookings` row
|
||||
* with N `booking_sessions`, an encrypted `booking_care_instructions`, and per-session EVV
|
||||
* (`visit_verifications`). This is the sibling of the **pre-payment** `services/bookingRequests` domain
|
||||
* (b8) — a distinct contract (`dev/contracts/domains/bookings-evv.md`), distinct routes
|
||||
* (`/api/v1/bookings/*` + `/api/v1/booking_sessions/*`), distinct shapes — **not** a rename of it.
|
||||
*
|
||||
* Shapes mirror the b9 swagger 1:1 (camelCase; `clientFetch` unwraps the `ApiEnvelope<T>`, so these are
|
||||
* the post-`unwrap()` payloads). Load-bearing semantics (contract + phase §5):
|
||||
* - **Money is display-only and never computed.** `grossPriceIrr = balinyaarCommissionIrr +
|
||||
* nursePayoutAmount` is guaranteed server-side; render the three IRR **digit-strings** as-is through
|
||||
* the money util — never sum, re-split, or derive them client-side.
|
||||
* - **The status timeline is server truth.** `BookingDetailDto.status` is the single source; never
|
||||
* advance/infer a step client-side. After an EVV mutation, invalidate and re-render from the server.
|
||||
* - **Two-stage clinical disclosure.** `CareInstructionsDto` is decrypted and returned **only** to the
|
||||
* assigned nurse (or admin) on a `confirmed`+ booking; the client must not even request it otherwise.
|
||||
* - **EVV mismatch is advisory, never a block.** `checkInAddressMatch` (`true` in range · `false`
|
||||
* out-of-range/under-review · `null` GPS unavailable) drives a banner, never a gate.
|
||||
* - **Payout-eligibility is server truth.** `payoutEligibleAt` is gated by the dispute window
|
||||
* server-side; render it, never recompute it.
|
||||
*/
|
||||
|
||||
/** `BookingStatus` — the seven-state booking lifecycle (contract enum, stable string codes). */
|
||||
export type BookingStatus =
|
||||
| 'pending_payment'
|
||||
| 'confirmed'
|
||||
| 'in_progress'
|
||||
| 'completed'
|
||||
| 'disputed'
|
||||
| 'closed'
|
||||
| 'cancelled';
|
||||
|
||||
/** `BookingSessionStatus` — per-visit lifecycle (contract enum). */
|
||||
export type BookingSessionStatus = 'scheduled' | 'in_progress' | 'completed' | 'missed' | 'cancelled';
|
||||
|
||||
/** `VisitVerificationStatus` — the EVV state of a session (contract enum). */
|
||||
export type VisitVerificationStatus = 'pending' | 'checked_in' | 'completed';
|
||||
|
||||
/** Which "my bookings" scope to read — `all` is admin-only server-side (contract `list?role=`). */
|
||||
export type BookingListRole = 'customer' | 'nurse' | 'all';
|
||||
|
||||
/**
|
||||
* The viewer's actor role for a booking-detail read. Drives (a) the mock's address-snapshot masking
|
||||
* (the nurse view omits it) and (b) the client-side care-instructions **UI gate**. The real server
|
||||
* infers the view from auth + tenancy; this is passed for the mock and the gate. Admin is out of scope
|
||||
* this phase (its console is f15).
|
||||
*/
|
||||
export type BookingViewerRole = 'customer' | 'nurse';
|
||||
|
||||
/**
|
||||
* The happy-path timeline order rendered by `BookingStatusTimeline`. Terminal branches
|
||||
* (`disputed`/`closed`/`cancelled`) are shown distinctly, off this line — see `isBookingTerminalBranch`.
|
||||
*/
|
||||
export const BOOKING_TIMELINE_ORDER: readonly BookingStatus[] = [
|
||||
'pending_payment',
|
||||
'confirmed',
|
||||
'in_progress',
|
||||
'completed',
|
||||
] as const;
|
||||
|
||||
/** `disputed`/`closed`/`cancelled` leave the happy path — rendered as a distinct terminal state. */
|
||||
export function isBookingTerminalBranch(status: BookingStatus): boolean {
|
||||
return status === 'disputed' || status === 'closed' || status === 'cancelled';
|
||||
}
|
||||
|
||||
/**
|
||||
* `confirmed` or beyond — the booking has been paid/converted. Gates the care-instructions read
|
||||
* (two-stage disclosure) and the "upcoming sessions" content. `pending_payment` and `cancelled` are
|
||||
* **not** confirmed+; `disputed`/`closed`/`completed` are (they follow confirmation).
|
||||
*/
|
||||
export function isBookingConfirmedOrBeyond(status: BookingStatus): boolean {
|
||||
return (
|
||||
status === 'confirmed' ||
|
||||
status === 'in_progress' ||
|
||||
status === 'completed' ||
|
||||
status === 'disputed' ||
|
||||
status === 'closed'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* The active step index for the 4-step timeline. A terminal branch reports the step it left from
|
||||
* (`cancelled` from wherever, rendered distinctly), so callers should check `isBookingTerminalBranch`
|
||||
* first and only use this for the happy path.
|
||||
*/
|
||||
export function bookingTimelineActiveIndex(status: BookingStatus): number {
|
||||
const idx = BOOKING_TIMELINE_ORDER.indexOf(status);
|
||||
if (idx >= 0) return idx;
|
||||
// disputed/closed follow completion → sit the line at "completed"; cancelled is rendered distinctly
|
||||
// (off the line) by the timeline, so its index is only a harmless fallback.
|
||||
if (status === 'disputed' || status === 'closed') return BOOKING_TIMELINE_ORDER.indexOf('completed');
|
||||
return BOOKING_TIMELINE_ORDER.indexOf('confirmed');
|
||||
}
|
||||
|
||||
/** A per-visit session (embedded in `BookingDetailDto.sessions`; `BookingSessionSummaryDto` on the wire). */
|
||||
export interface BookingSessionDto {
|
||||
id: number;
|
||||
sessionIndex: number;
|
||||
/** ISO date `YYYY-MM-DD`. */
|
||||
scheduledDate: string;
|
||||
/** `HH:mm:ss`. */
|
||||
scheduledTimeStart: string;
|
||||
scheduledTimeEnd: string;
|
||||
status: BookingSessionStatus;
|
||||
/** IRR digit-string — this session's share of the nurse payout (Σ over sessions = nursePayoutAmount). */
|
||||
visitPayoutAmount: string;
|
||||
/** Server truth: set at check-out, gated by the dispute window. `null` until eligible. Never computed. */
|
||||
payoutEligibleAt: string | null;
|
||||
evvStatus: VisitVerificationStatus;
|
||||
/** Server `checked_in_at` — the banner renders its Shamsi/clock from this, never a client clock. */
|
||||
checkInAt: string | null;
|
||||
checkOutAt: string | null;
|
||||
/** Advisory: `true` in range · `false` out-of-range (under review) · `null` GPS unavailable. */
|
||||
checkInAddressMatch: boolean | null;
|
||||
}
|
||||
|
||||
/** The booking header + money summary + embedded sessions (`bookings/get`, `convert`, `transition`). */
|
||||
export interface BookingDetailDto {
|
||||
id: number;
|
||||
bookingRequestId: number;
|
||||
status: BookingStatus;
|
||||
nurseId: number;
|
||||
nurseName: string;
|
||||
patientId: number;
|
||||
patientName: string;
|
||||
variantId: number;
|
||||
variantSnapshotJson: string;
|
||||
customerAddressId: number;
|
||||
/** Full snapshot for the customer/admin; **`null` in the nurse view** (masked server-side). */
|
||||
addressSnapshotJson: string | null;
|
||||
/** The three money amounts — IRR digit-strings; `gross = commission + payout`, guaranteed server-side. */
|
||||
grossPriceIrr: string;
|
||||
balinyaarCommissionIrr: string;
|
||||
nursePayoutAmount: string;
|
||||
/** PSP fee (nullable) — a checkout concern, surfaced here for completeness. */
|
||||
pspFeeAmount: string | null;
|
||||
/** Snapshotted commission rate (decimal). */
|
||||
platformFeeRate: number;
|
||||
sessionCount: number;
|
||||
scheduledDate: string;
|
||||
scheduledTimeStart: string;
|
||||
scheduledTimeEnd: string;
|
||||
confirmedAt: string | null;
|
||||
completedAt: string | null;
|
||||
cancelledAt: string | null;
|
||||
cancelledBy: string | null;
|
||||
cancellationReason: string | null;
|
||||
cancellationPolicyCode: string | null;
|
||||
cancellationRefundPercentage: number | null;
|
||||
refundableAmountIrr: string | null;
|
||||
/** Set when the booking completes; the payout gate reads from this. `null` before completion. */
|
||||
disputeWindowEndsAt: string | null;
|
||||
createdAt: string;
|
||||
sessions: BookingSessionDto[];
|
||||
}
|
||||
|
||||
/** A row in the role-scoped "My bookings" list (`bookings/list`). `amountIrr` = gross (customer) / payout (nurse). */
|
||||
export interface BookingListItemDto {
|
||||
id: number;
|
||||
status: BookingStatus;
|
||||
counterpartyName: string;
|
||||
scheduledDate: string;
|
||||
sessionCount: number;
|
||||
amountIrr: string;
|
||||
disputeWindowEndsAt: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
/** A row in the nurse's "today" session feed (`booking_sessions/today`) with EVV CTA state. */
|
||||
export interface BookingSessionListItemDto {
|
||||
sessionId: number;
|
||||
bookingId: number;
|
||||
sessionIndex: number;
|
||||
patientName: string;
|
||||
scheduledDate: string;
|
||||
scheduledTimeStart: string;
|
||||
scheduledTimeEnd: string;
|
||||
status: BookingSessionStatus;
|
||||
evvStatus: VisitVerificationStatus;
|
||||
}
|
||||
|
||||
/**
|
||||
* Per-session EVV detail (`booking_sessions/evv/{id}`). Raw GPS (`*Lat`/`*Lng`/`checkInDistanceMeters`)
|
||||
* is gated to the owning nurse + admin server-side. The banner needs only `checkInAt` +
|
||||
* `checkInAddressMatch`; the coordinates are informational.
|
||||
*/
|
||||
export interface VisitVerificationDto {
|
||||
id: number;
|
||||
bookingSessionId: number;
|
||||
status: VisitVerificationStatus;
|
||||
checkInAt: string | null;
|
||||
checkInLat: number | null;
|
||||
checkInLng: number | null;
|
||||
checkOutAt: string | null;
|
||||
checkOutLat: number | null;
|
||||
checkOutLng: number | null;
|
||||
checkInAddressMatch: boolean | null;
|
||||
checkInDistanceMeters: number | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* The decrypted stage-2 clinical/logistical context (`bookings/care_instructions/{id}`). Encrypted at
|
||||
* rest; **present only in the gated read** to the assigned nurse (or admin) post-confirmation. All fields
|
||||
* are free-text and nullable (the write path is `bookings/submit_care_instructions/{id}`, customer/admin).
|
||||
*/
|
||||
export interface CareInstructionsDto {
|
||||
bookingId: number;
|
||||
currentConditions: string | null;
|
||||
medications: string | null;
|
||||
allergies: string | null;
|
||||
specialInstructions: string | null;
|
||||
emergencyContactName: string | null;
|
||||
emergencyContactPhone: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* EVV check-in command. `latitude`/`longitude` are **nullable** — a GPS-denied nurse still checks in
|
||||
* (flagged, never blocked). `capturedAt` is the client capture instant; the server timestamps the
|
||||
* authoritative `checkInAt`, so the real client sends only the coordinates (the contract command carries
|
||||
* `latitude`/`longitude`/`sessionId`). Kept on the input for the mock's banner + audit fidelity.
|
||||
*/
|
||||
export interface CheckInVisitInput {
|
||||
bookingSessionId: number;
|
||||
latitude: number | null;
|
||||
longitude: number | null;
|
||||
/** ISO instant the client captured position; server time is authoritative. */
|
||||
capturedAt: string;
|
||||
}
|
||||
|
||||
/** EVV check-out command — same shape; must follow an open check-in (a `400` otherwise). */
|
||||
export type CheckOutVisitInput = CheckInVisitInput;
|
||||
|
||||
/** `bookings/list` query params (role-scoped, paginated, optional status filter). */
|
||||
export interface BookingListParams extends PageParams {
|
||||
role: BookingListRole;
|
||||
status?: BookingStatus;
|
||||
}
|
||||
|
||||
/** `booking_sessions/today` query params (a nurse's day; default = all today). */
|
||||
export interface TodaySessionsParams extends PageParams {
|
||||
/** ISO date `YYYY-MM-DD`; omitted = the server's "today". */
|
||||
date?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The bookings API seam — the real HTTP client and the in-memory mock both implement this interface;
|
||||
* selection is by config (`USE_BOOKINGS_MOCK`), never scattered `if (mock)` checks.
|
||||
*
|
||||
* `getBookingDetail`/`getCareInstructions` take an optional `viewerRole` that only the mock uses (address
|
||||
* masking + the care-instructions 404 boundary); the real client infers the view from auth and ignores it.
|
||||
*/
|
||||
export interface BookingsApi {
|
||||
getBookingDetail(id: number, viewerRole?: BookingViewerRole): Promise<BookingDetailDto>;
|
||||
listBookings(params: BookingListParams): Promise<Paginated<BookingListItemDto>>;
|
||||
listTodaySessions(params: TodaySessionsParams): Promise<Paginated<BookingSessionListItemDto>>;
|
||||
getSessionEvv(sessionId: number): Promise<VisitVerificationDto>;
|
||||
getCareInstructions(bookingId: number, viewerRole?: BookingViewerRole): Promise<CareInstructionsDto>;
|
||||
checkInVisit(input: CheckInVisitInput): Promise<VisitVerificationDto>;
|
||||
checkOutVisit(input: CheckOutVisitInput): Promise<VisitVerificationDto>;
|
||||
}
|
||||
@@ -33,6 +33,8 @@
|
||||
--bal-secondary-light: #e6a98a;
|
||||
--bal-secondary-dark: #bf6f4d;
|
||||
--bal-secondary-contrast: #2a1a12;
|
||||
/* Soft terracotta tint — the "نمای پرستار" nurse-view chip + EVV/financial affordances */
|
||||
--bal-secondary-soft: rgba(217, 140, 106, 0.14);
|
||||
|
||||
/* Surfaces */
|
||||
--bal-bg-default: #faf9f5;
|
||||
@@ -71,6 +73,8 @@
|
||||
--bal-secondary-light: #f0bfa3;
|
||||
--bal-secondary-dark: #d98c6a;
|
||||
--bal-secondary-contrast: #2a1a12;
|
||||
/* Soft terracotta tint — the "نمای پرستار" nurse-view chip + EVV/financial affordances */
|
||||
--bal-secondary-soft: rgba(230, 169, 138, 0.18);
|
||||
|
||||
/* Surfaces — deep teal */
|
||||
--bal-bg-default: #0f1c19;
|
||||
|
||||
Reference in New Issue
Block a user