ui phase 1

client/src/components/booking/BookingMoneySummary/BookingMoneySummary.tsx

@@ -1,8 +1,9 @@
 'use client';
 import { FunctionComponent, ReactNode } from 'react';
-import { useLocale, useTranslations } from 'next-intl';
+import { useTranslations } from 'next-intl';
 import { Paper, Stack, Typography } from '@mui/material';
-import { formatIrrToToman } from '@/utils';
+import Money from '@/components/common/Money';
+import type { MoneyTone } from '@/components/common/Money';
 import type { BookingViewerRole } from '@/services/bookings/types';
 
 export interface BookingMoneySummaryProps {
@@ -28,10 +29,6 @@ const BookingMoneySummary: FunctionComponent<BookingMoneySummaryProps> = ({
   viewerRole,
 }) => {
   const t = useTranslations('booking');
-  const tc = useTranslations('common');
-  const locale = useLocale();
-
-  const toman = (irr: string) => `${formatIrrToToman(irr, locale)} ${tc('currency_toman')}`;
 
   return (
     <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
@@ -39,12 +36,12 @@ const BookingMoneySummary: FunctionComponent<BookingMoneySummaryProps> = ({
         {t('money_title')}
       </Typography>
       <Stack sx={{ gap: 1 }}>
-        <MoneyRow label={t('money_gross')} value={toman(grossPriceIrr)} emphasize />
-        <MoneyRow label={t('money_commission')} value={toman(balinyaarCommissionIrr)} />
+        <MoneyRow label={t('money_gross')} amountIrr={grossPriceIrr} tone="emphasis" />
+        <MoneyRow label={t('money_commission')} amountIrr={balinyaarCommissionIrr} deduction />
         <MoneyRow
           label={viewerRole === 'nurse' ? t('money_nurse_earning') : t('money_payout')}
-          value={toman(nursePayoutAmount)}
-          accent
+          amountIrr={nursePayoutAmount}
+          tone="emphasis"
         />
       </Stack>
     </Paper>
@@ -53,26 +50,21 @@ const BookingMoneySummary: FunctionComponent<BookingMoneySummaryProps> = ({
 
 function MoneyRow({
   label,
-  value,
-  emphasize = false,
-  accent = false,
+  amountIrr,
+  tone,
+  deduction = false,
 }: {
   label: string;
-  value: string;
-  emphasize?: boolean;
-  accent?: boolean;
+  amountIrr: string;
+  tone?: MoneyTone;
+  deduction?: boolean;
 }): ReactNode {
   return (
     <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 2 }}>
       <Typography variant="body2" sx={{ color: 'text.secondary' }}>
         {label}
       </Typography>
-      <Typography
-        variant="body2"
-        sx={{ fontWeight: emphasize ? 800 : 700, color: accent ? 'var(--bal-secondary-dark)' : 'text.primary' }}
-      >
-        {value}
-      </Typography>
+      <Money amountIrr={amountIrr} size="sm" tone={tone} deduction={deduction} />
     </Stack>
   );
 }