hamid
67 lines
2.7 KiB
TypeScript
67 lines
2.7 KiB
TypeScript
'use client';
|
|
import { FunctionComponent } from 'react';
|
|
import { useLocale, useTranslations } from 'next-intl';
|
|
import { Stack, Typography } from '@mui/material';
|
|
import StatusChip from '../StatusChip';
|
|
import Money from '@/components/common/Money';
|
|
import SurfaceCard from '@/components/common/SurfaceCard';
|
|
import { formatShamsiDate } from '@/utils';
|
|
import { installmentStatusKind, type BnplInstallmentRow, type BnplInstallmentStatus } from '@/services/bnpl/types';
|
|
|
|
export interface InstallmentScheduleRowProps {
|
|
row: BnplInstallmentRow;
|
|
/** Render the provider-reported status chip (D5 Wallet). The D4 schedule preview omits it. */
|
|
showStatus?: boolean;
|
|
}
|
|
|
|
/** i18n key for each provider-reported installment status (labels are keys off the code, never derived). */
|
|
const STATUS_LABEL_KEY: Record<BnplInstallmentStatus, string> = {
|
|
paid: 'status_paid',
|
|
due_soon: 'status_due_soon',
|
|
upcoming: 'status_upcoming',
|
|
overdue: 'status_overdue',
|
|
};
|
|
|
|
/**
|
|
* One repayment row — the down-payment (due «امروز») or an installment (Shamsi due date), with the
|
|
* **served** amount (Toman via the money util). Reused by the D4 schedule table and the D5 Wallet due list;
|
|
* `showStatus` adds the provider-reported status chip (D5). No money is computed here — display only.
|
|
* @component InstallmentScheduleRow
|
|
*/
|
|
const InstallmentScheduleRow: FunctionComponent<InstallmentScheduleRowProps> = ({ row, showStatus = false }) => {
|
|
const t = useTranslations('bnpl');
|
|
const locale = useLocale();
|
|
|
|
const label =
|
|
row.kind === 'down_payment' ? t('down_payment') : t('installment_n', { n: row.sequence });
|
|
const dueLabel = row.kind === 'down_payment' ? t('today') : formatShamsiDate(`${row.dueDate}T00:00:00`, locale);
|
|
|
|
return (
|
|
<SurfaceCard padding="sm" data-row-kind={row.kind}>
|
|
<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1.5 }}>
|
|
<Stack sx={{ gap: 0.25 }}>
|
|
<Typography variant="body2" sx={{ fontWeight: 700 }}>
|
|
{label}
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
|
{dueLabel}
|
|
</Typography>
|
|
</Stack>
|
|
<Stack sx={{ alignItems: 'flex-end', gap: 0.5 }}>
|
|
<Money
|
|
amountIrr={row.amountIrr}
|
|
size="sm"
|
|
tone={row.kind === 'down_payment' ? 'emphasis' : 'default'}
|
|
sx={{ fontWeight: 700 }}
|
|
/>
|
|
{showStatus && row.status ? (
|
|
<StatusChip status={installmentStatusKind(row.status)} label={t(STATUS_LABEL_KEY[row.status])} />
|
|
) : null}
|
|
</Stack>
|
|
</Stack>
|
|
</SurfaceCard>
|
|
);
|
|
};
|
|
|
|
export default InstallmentScheduleRow;
|