hamid
58 lines
2.3 KiB
TypeScript
58 lines
2.3 KiB
TypeScript
'use client';
|
|
import { FunctionComponent, useState } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { Box, Stack, Tab, Tabs } from '@mui/material';
|
|
import { AppIcon, PageHeader } from '@/components';
|
|
import WalletPaymentHistory from './WalletPaymentHistory';
|
|
import WalletInstallments from './WalletInstallments';
|
|
import WalletRefunds from './WalletRefunds';
|
|
import WalletReceipts from './WalletReceipts';
|
|
|
|
type WalletTab = 'payments' | 'installments' | 'refunds' | 'receipts';
|
|
|
|
/**
|
|
* /wallet — the customer money hub (ui-phase-6). Four sections replace the old installments-only shell so
|
|
* a card-paying customer (the default path) finally sees something other than a permanently empty tab:
|
|
* «پرداختها» (payment history), «اقساط» (the unchanged f11 D5 installment tracker), «استردادها» (refunds,
|
|
* REQ-048), «رسیدها» (client-derived invoice links). All four read at the shell's shared `CONTENT_MAX_WIDTH`
|
|
* — no local width override.
|
|
*/
|
|
const WalletScreen: FunctionComponent = () => {
|
|
const t = useTranslations('bnpl');
|
|
const [tab, setTab] = useState<WalletTab>('payments');
|
|
|
|
return (
|
|
<Stack sx={{ gap: 2 }}>
|
|
<PageHeader title={t('wallet_hub_title')} />
|
|
|
|
<Tabs
|
|
value={tab}
|
|
onChange={(_event, value: WalletTab) => setTab(value)}
|
|
variant="scrollable"
|
|
scrollButtons="auto"
|
|
allowScrollButtonsMobile
|
|
sx={{ borderBottom: '1px solid', borderColor: 'divider' }}
|
|
>
|
|
<Tab value="payments" label={t('tab_payments')} icon={<AppIcon icon="payment" size={18} />} iconPosition="start" />
|
|
<Tab
|
|
value="installments"
|
|
label={t('tab_installments')}
|
|
icon={<AppIcon icon="installments" size={18} />}
|
|
iconPosition="start"
|
|
/>
|
|
<Tab value="refunds" label={t('tab_refunds')} icon={<AppIcon icon="refunds" size={18} />} iconPosition="start" />
|
|
<Tab value="receipts" label={t('tab_receipts')} icon={<AppIcon icon="document" size={18} />} iconPosition="start" />
|
|
</Tabs>
|
|
|
|
<Box role="tabpanel">
|
|
{tab === 'payments' ? <WalletPaymentHistory /> : null}
|
|
{tab === 'installments' ? <WalletInstallments /> : null}
|
|
{tab === 'refunds' ? <WalletRefunds /> : null}
|
|
{tab === 'receipts' ? <WalletReceipts /> : null}
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default WalletScreen;
|