hamid/baya-monorepo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui phase 1

Browse Source
This commit is contained in:
hamid
2026-07-17 17:10:39 +03:30
parent f1cba6cf74
commit 370c1beefa
151 changed files with 4254 additions and 1840 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/RefundStatusCard/RefundStatusCard.tsx
+22 -15
View File
@@ -2,12 +2,13 @@
import { FunctionComponent } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { Divider, Paper, Stack, Typography } from '@mui/material';
import StepperHeader from '@/components/StepperHeader';
import StatusTimeline, { type TimelineNode, type TimelineNodeState } from '@/components/common/StatusTimeline';
import StatusChip, { StatusKind } from '@/components/StatusChip';
import Money from '@/components/common/Money';
import PriceBreakdown from '@/components/PriceBreakdown';
import RefundEtaBanner from '@/components/RefundEtaBanner';
import AppAlert from '@/components/common/AppAlert';
import { formatIrrToToman } from '@/utils';
import { formatShamsiDate } from '@/utils';
import {
CUSTOMER_REFUND_STEP_ORDER,
refundCustomerStep,
@@ -38,14 +39,23 @@ const STEP_KIND: Record<CustomerRefundStep, StatusKind> = {
*/
const RefundStatusCard: FunctionComponent<RefundStatusCardProps> = ({ refund }) => {
const t = useTranslations('refunds');
const tc = useTranslations('common');
const locale = useLocale();
const step = refundCustomerStep(refund.refundStatus);
const isFailed = step === 'failed';
// Succeeded → mark all steps complete (activeStep past the last); otherwise sit on the mapped step.
// Succeeded → mark all steps complete (past the last index); otherwise sit on the mapped step.
const activeStep =
refund.refundStatus === 'succeeded' ? CUSTOMER_REFUND_STEP_ORDER.length : refundStepIndex(refund.refundStatus);
const timelineNodes: TimelineNode[] = CUSTOMER_REFUND_STEP_ORDER.map((s, index) => {
const state: TimelineNodeState = index < activeStep ? 'completed' : index === activeStep ? 'current' : 'pending';
const timestamp =
s === 'submitted' && refund.createdAt
? formatShamsiDate(refund.createdAt, locale)
: s === 'completed' && refund.completedAt
? formatShamsiDate(refund.completedAt, locale)
: undefined;
return { key: s, label: t(`step_${s}`), state, timestamp };
});
const hasDecomposition = refund.platformFeeRefundedIrr != null && refund.nursePayoutRefundedIrr != null;
@@ -70,25 +80,22 @@ const RefundStatusCard: FunctionComponent<RefundStatusCardProps> = ({ refund })
</AppAlert>
) : (
<>
<Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
<Stack sx={{ gap: 1.5, alignItems: 'center' }}>
<StatusChip status={STEP_KIND[step]} label={t(`rstatus_${step}`)} />
<StepperHeader
steps={[t('step_submitted'), t('step_on_its_way'), t('step_completed')]}
activeStep={activeStep}
/>
<Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
<Stack sx={{ gap: 2 }}>
<Stack sx={{ alignItems: 'center' }}>
<StatusChip status={STEP_KIND[step]} label={t(`rstatus_${step}`)} />
</Stack>
<StatusTimeline nodes={timelineNodes} />
</Stack>
</Paper>
<Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
<Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
<Stack sx={{ gap: 1.25 }}>
<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'baseline', gap: 2 }}>
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
{t('total_refunded_label')}
</Typography>
<Typography variant="subtitle1" sx={{ fontWeight: 800, color: 'var(--bal-secondary)' }}>
{formatIrrToToman(refund.totalRefundedIrr, locale)} {tc('currency_toman')}
</Typography>
<Money amountIrr={refund.totalRefundedIrr} size="md" tone="emphasis" />
</Stack>
{refund.externalRevertReference && (
<>