hamid
73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
'use client';
|
|
import { FunctionComponent, ReactNode } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { Paper, Stack, Typography } from '@mui/material';
|
|
import Money from '@/components/common/Money';
|
|
import type { MoneyTone } from '@/components/common/Money';
|
|
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');
|
|
|
|
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')} amountIrr={grossPriceIrr} tone="emphasis" />
|
|
<MoneyRow label={t('money_commission')} amountIrr={balinyaarCommissionIrr} deduction />
|
|
<MoneyRow
|
|
label={viewerRole === 'nurse' ? t('money_nurse_earning') : t('money_payout')}
|
|
amountIrr={nursePayoutAmount}
|
|
tone="emphasis"
|
|
/>
|
|
</Stack>
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
function MoneyRow({
|
|
label,
|
|
amountIrr,
|
|
tone,
|
|
deduction = false,
|
|
}: {
|
|
label: string;
|
|
amountIrr: string;
|
|
tone?: MoneyTone;
|
|
deduction?: boolean;
|
|
}): ReactNode {
|
|
return (
|
|
<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 2 }}>
|
|
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
|
{label}
|
|
</Typography>
|
|
<Money amountIrr={amountIrr} size="sm" tone={tone} deduction={deduction} />
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export default BookingMoneySummary;
|