hamid
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
'use client';
|
|
import { FunctionComponent } from 'react';
|
|
import { useLocale, useTranslations } from 'next-intl';
|
|
import { Skeleton, Stack, Typography } from '@mui/material';
|
|
import { AppButton, EmptyState, ErrorState, Money, SurfaceCard } from '@/components';
|
|
import { bookingInvoicePath } from '@/constants';
|
|
import { formatShamsiDateTime } from '@/utils';
|
|
import { useWalletHistoryRows } from './useWalletHistoryRows';
|
|
|
|
/**
|
|
* The wallet «رسیدها» section — no receipts endpoint exists; every succeeded, booking-linked payment
|
|
* (card or BNPL down-payment) derives its invoice deep-link client-side (a UI join over the same rows the
|
|
* «پرداختها» tab renders, filtered to `succeeded` + a known `bookingId` — no money math).
|
|
*/
|
|
const WalletReceipts: FunctionComponent = () => {
|
|
const t = useTranslations('bnpl');
|
|
const tp = useTranslations('payment');
|
|
const tc = useTranslations('common');
|
|
const locale = useLocale();
|
|
const { rows, isLoading, bothErrored, refetch } = useWalletHistoryRows();
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<Stack sx={{ gap: 1.5 }}>
|
|
<Skeleton variant="rounded" height={72} />
|
|
</Stack>
|
|
);
|
|
}
|
|
if (bothErrored) {
|
|
return <ErrorState message={t('wallet_error_body')} retryLabel={tc('retry')} onRetry={refetch} />;
|
|
}
|
|
|
|
const receipts = rows.filter((row) => row.status === 'succeeded' && row.bookingId != null);
|
|
|
|
if (receipts.length === 0) {
|
|
return <EmptyState icon="document" title={t('receipts_empty_title')} body={t('receipts_empty_body')} />;
|
|
}
|
|
|
|
return (
|
|
<Stack sx={{ gap: 1.5 }}>
|
|
{receipts.map((row) => (
|
|
<SurfaceCard key={row.key} padding="sm">
|
|
<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 2 }}>
|
|
<Stack sx={{ gap: 0.25 }}>
|
|
<Money amountIrr={row.amountIrr} tone="emphasis" size="sm" sx={{ fontWeight: 700 }} />
|
|
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
|
{formatShamsiDateTime(row.createdAt, locale)}
|
|
</Typography>
|
|
</Stack>
|
|
<AppButton
|
|
variant="outlined"
|
|
color="primary"
|
|
size="small"
|
|
startIcon="document"
|
|
to={`/${locale}${bookingInvoicePath(row.bookingId as number)}`}
|
|
>
|
|
{tp('view_invoice_cta')}
|
|
</AppButton>
|
|
</Stack>
|
|
</SurfaceCard>
|
|
))}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default WalletReceipts;
|