Presupuestador_web/client/src/app/quotes/components/QuotePricesResume.tsx

import { FormPercentageField } from "@/components";
import { useLocalization } from "@/lib/hooks";
import { Card, CardContent, CardDescription, CardTitle, Separator } from "@/ui";
import { CurrencyData, MoneyValue, Percentage } from "@shared/contexts";
import { t } from "i18next";
import { useMemo } from "react";
import { useFormContext, useWatch } from "react-hook-form";

const calculateQuoteTotals = (prices: any) => {
  console.debug("calculateQuoteTotals", prices);

  const discountOrError = Percentage.create(
    prices[1] || {
      amount: null,
      scale: 2,
    }
  );

  if (discountOrError.isFailure) {
    throw discountOrError.error;
  }
  const discount = discountOrError.object;

  const taxOrError = Percentage.create(
    prices[2] || {
      amount: null,
      scale: 2,
    }
  );

  if (taxOrError.isFailure) {
    throw taxOrError.error;
  }
  const tax = taxOrError.object;

  const subtotalOrError = MoneyValue.create(
    prices[0] || {
      amount: null,
      scale: 2,
    }
  );

  if (subtotalOrError.isFailure) {
    throw subtotalOrError.error;
  }

  const subtotalPrice = subtotalOrError.object;

  const discountPrice = subtotalPrice.percentage(discount.toNumber()).convertScale(2);

  const priceBeforeTaxes = subtotalPrice.subtract(discountPrice).convertScale(2);

  const taxesPrice = priceBeforeTaxes.percentage(tax.toNumber()).convertScale(2);

  const totalPrice = priceBeforeTaxes.add(taxesPrice).convertScale(2);

  return {
    subtotalPrice: subtotalPrice.toObject(),
    discount: discount.toObject(),
    discountPrice: discountPrice.toObject(),
    priceBeforeTaxes: priceBeforeTaxes.toObject(),
    tax: tax.toObject(),
    taxesPrice: taxesPrice.toObject(),
    totalPrice: totalPrice.toObject(),
  };
};

export const QuotePricesResume = ({ currency }: { currency: CurrencyData }) => {
  const { formState, control } = useFormContext();
  const { formatNumber } = useLocalization();

  const pricesWatch = useWatch({ control, name: ["subtotal_price", "discount", "tax"] });

  const totals = calculateQuoteTotals(pricesWatch);

  const subtotal_price = formatNumber(totals.subtotalPrice);
  const discount_price = formatNumber(totals.discountPrice);
  const tax_price = formatNumber(totals.taxesPrice);
  const total_price = formatNumber(totals.totalPrice);

  const currency_symbol = useMemo(() => currency.symbol || "", [currency]);

  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")}
              name='discount'
              onChange={(value) => {
                console.log("discount", value);
              }}
            />
          </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")}
              name='tax'
            />
          </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>
  );
};