ui phase 1

client/src/app/[locale]/(private-routes)/(customer)/wallet/WalletInstallments.tsx

@@ -2,8 +2,8 @@
 import { FunctionComponent } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { Box, Paper, Skeleton, Stack, Typography } from '@mui/material';
-import { AppButton, AppIcon, InstallmentScheduleRow, PlaceholderScreen } from '@/components';
-import { formatIrrToToman, formatShamsiDate } from '@/utils';
+import { AppButton, AppIcon, InstallmentScheduleRow, Money, PlaceholderScreen } from '@/components';
+import { formatShamsiDate } from '@/utils';
 import { useWalletInstallments } from '@/services/bnpl';
 import type { WalletInstallmentPlan } from '@/services/bnpl/types';
 
@@ -62,7 +62,6 @@ const WalletInstallments: FunctionComponent = () => {
 
 function InstallmentPlanSection({ plan }: { plan: WalletInstallmentPlan }) {
   const t = useTranslations('bnpl');
-  const tc = useTranslations('common');
   const locale = useLocale();
   const providerName = t(`provider_${plan.providerCode}`);
 
@@ -81,9 +80,7 @@ function InstallmentPlanSection({ plan }: { plan: WalletInstallmentPlan }) {
         <Typography variant="caption" sx={{ opacity: 0.85 }}>
           {t('outstanding_balance')}
         </Typography>
-        <Typography variant="h5" sx={{ fontWeight: 800, mt: 0.25 }}>
-          {formatIrrToToman(plan.outstandingBalanceIrr, locale)} {tc('currency_toman')}
-        </Typography>
+        <Money amountIrr={plan.outstandingBalanceIrr} size="lg" sx={{ fontWeight: 800, mt: 0.25 }} />
         <Typography variant="caption" sx={{ opacity: 0.85, display: 'block', mt: 0.5 }}>
           {plan.serviceLabel}
         </Typography>
@@ -95,9 +92,7 @@ function InstallmentPlanSection({ plan }: { plan: WalletInstallmentPlan }) {
                 {t('next_installment')} · {formatShamsiDate(`${plan.nextDueDate}T00:00:00`, locale)}
               </Typography>
               {plan.nextAmountIrr ? (
-                <Typography variant="subtitle2" sx={{ fontWeight: 800 }}>
-                  {formatIrrToToman(plan.nextAmountIrr, locale)} {tc('currency_toman')}
-                </Typography>
+                <Money amountIrr={plan.nextAmountIrr} size="sm" sx={{ fontWeight: 800 }} />
               ) : null}
             </Box>
             {plan.earlyPayUrl ? (