45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { FC, ReactNode } from "react";
|
|
import { Bill, BillingLocation } from "../lib/db-types";
|
|
import { useFormState } from "react-dom";
|
|
import { Main } from "./Main";
|
|
import { deleteBillById } from "../lib/actions/billActions";
|
|
import Link from "next/link";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export interface BillDeleteFormProps {
|
|
bill: Bill,
|
|
location: BillingLocation
|
|
}
|
|
|
|
export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) => {
|
|
|
|
const { year, month } = location.yearMonth;
|
|
const handleAction = deleteBillById.bind(null, location._id, bill._id, year, month);
|
|
const [ state, dispatch ] = useFormState(handleAction, null);
|
|
const t = useTranslations("bill-delete-form");
|
|
|
|
return(
|
|
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
|
<div className="card-body">
|
|
<form action={dispatch}>
|
|
<p className="py-6 px-6">
|
|
{
|
|
t.rich("text", {
|
|
bill_name:bill.name,
|
|
location_name:location.name,
|
|
strong: (chunks:ReactNode) => `<strong>${chunks}</strong>`,
|
|
})
|
|
}
|
|
</p>
|
|
<div className="pt-4 text-center">
|
|
<button className="btn btn-primary">{t("confirm-button")}</button>
|
|
<Link className="btn btn-neutral ml-3" href={`/bill/${location._id}-${bill._id}/edit/`}>{t("cancel-button")}</Link>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|