105 lines
4.5 KiB
TypeScript
105 lines
4.5 KiB
TypeScript
import { FormPercentageField } from "@/components";
|
|
import { useLocalization } from "@/lib/hooks";
|
|
import { Card, CardContent, CardDescription, CardTitle, Separator } from "@/ui";
|
|
import { CurrencyData } from "@shared/contexts";
|
|
import { t } from "i18next";
|
|
import { useMemo } from "react";
|
|
import { useFormContext } from "react-hook-form";
|
|
|
|
export const QuotePricesResume = () => {
|
|
const { watch, register, formState } = useFormContext();
|
|
const { formatNumber } = useLocalization();
|
|
|
|
const currency_code = watch("currency_code");
|
|
const subtotal_price = formatNumber(watch("subtotal_price"));
|
|
const discount_price = formatNumber(watch("discount_price"));
|
|
const tax_price = formatNumber(watch("tax_price"));
|
|
const total_price = formatNumber(watch("total_price"));
|
|
|
|
const currency_symbol = useMemo(() => {
|
|
const currencyOrError = CurrencyData.createFromCode(currency_code);
|
|
return currencyOrError.isSuccess ? currencyOrError.object.symbol : "";
|
|
}, [currency_code]);
|
|
|
|
return (
|
|
<Card className='w-full bg-muted'>
|
|
<CardContent className='flex flex-row items-end gap-2 p-4 border-t'>
|
|
<div className='grid flex-1 h-16 grid-cols-1 auto-rows-max'>
|
|
<div className='grid gap-1 font-semibold text-right text-muted-foreground'>
|
|
<CardDescription className='text-sm'>
|
|
{t("quotes.form_fields.subtotal_price.label")}
|
|
</CardDescription>
|
|
<CardTitle className='flex items-baseline justify-end text-2xl tabular-nums'>
|
|
{subtotal_price}
|
|
<span className='ml-1 text-lg tracking-normal'>{currency_symbol}</span>
|
|
</CardTitle>
|
|
</div>
|
|
</div>
|
|
<Separator orientation='vertical' className='w-px h-16 mx-2' />
|
|
<div className='grid flex-1 h-16 grid-cols-2 gap-6 auto-rows-max'>
|
|
<div className='grid gap-1 font-medium text-muted-foreground'>
|
|
<CardDescription className='text-sm'>
|
|
{t("quotes.form_fields.discount.label")}
|
|
</CardDescription>
|
|
<FormPercentageField
|
|
scale={2}
|
|
disabled={formState.disabled}
|
|
placeholder={t("quotes.form_fields.discount.placeholder")}
|
|
{...register("discount", {
|
|
required: false,
|
|
})}
|
|
/>
|
|
</div>
|
|
<div className='grid gap-1 font-semibold text-muted-foreground'>
|
|
<CardDescription className='text-sm text-right'>
|
|
{t("quotes.form_fields.discount_price.label")}
|
|
</CardDescription>
|
|
<CardTitle className='flex items-baseline justify-end text-2xl tabular-nums'>
|
|
{discount_price}
|
|
<span className='ml-1 text-lg tracking-normal'>{currency_symbol}</span>
|
|
</CardTitle>
|
|
</div>
|
|
</div>
|
|
<Separator orientation='vertical' className='w-px h-16 mx-2' />
|
|
<div className='grid flex-1 h-16 grid-cols-2 gap-6 auto-rows-max'>
|
|
<div className='grid gap-1 font-medium text-muted-foreground'>
|
|
<CardDescription className='text-sm'>
|
|
{t("quotes.form_fields.tax.label")}
|
|
</CardDescription>
|
|
|
|
<FormPercentageField
|
|
scale={2}
|
|
disabled={formState.disabled}
|
|
placeholder={t("quotes.form_fields.tax.placeholder")}
|
|
{...register("tax", {
|
|
required: false,
|
|
})}
|
|
/>
|
|
</div>
|
|
<div className='grid gap-1 font-semibold text-muted-foreground'>
|
|
<CardDescription className='text-sm text-right'>
|
|
{t("quotes.form_fields.tax_price.label")}
|
|
</CardDescription>
|
|
<CardTitle className='flex items-baseline justify-end gap-1 text-2xl tabular-nums'>
|
|
{tax_price}
|
|
<span className='text-base font-medium tracking-normal'>{currency_symbol}</span>
|
|
</CardTitle>
|
|
</div>
|
|
</div>{" "}
|
|
<Separator orientation='vertical' className='w-px h-16 mx-2' />
|
|
<div className='grid flex-1 h-16 grid-cols-1 auto-rows-max'>
|
|
<div className='grid gap-0'>
|
|
<CardDescription className='text-sm font-semibold text-right text-foreground'>
|
|
{t("quotes.form_fields.total_price.label")}
|
|
</CardDescription>
|
|
<CardTitle className='flex items-baseline justify-end gap-1 text-3xl tabular-nums'>
|
|
{total_price}
|
|
<span className='ml-1 text-lg tracking-normal'>{currency_symbol}</span>
|
|
</CardTitle>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|