import { zodResolver } from "@hookform/resolvers/zod"; import { Button } from "@workspace/ui/components/button"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@workspace/ui/components/form"; import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "@workspace/ui/components/sheet"; import { Combobox } from "@workspace/ui/composed/combobox"; import { EnhancedInput } from "@workspace/ui/composed/enhanced-input"; import { unitConversion } from "@workspace/ui/utils/unit-conversions"; import { useState } from "react"; import { useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { z } from "zod"; import { formatCurrency, getSubscribeDiscounts, getSubscribeUnitPrice, } from "./utils"; const priceSchema = z.object({ promo_rule_id: z.number().min(1), subscribe_id: z.number().min(1), quantity: z.number().min(1), promo_price: z.number().min(1), }); type PriceFormValues = z.infer; interface PriceFormProps { loading?: boolean; rules: API.PromoRule[]; subscribes: API.SubscribeItem[]; onSubmit: (data: API.CreatePromoPriceRequest) => Promise | boolean; } export default function PriceForm({ loading, rules, subscribes, onSubmit, }: PriceFormProps) { const { t } = useTranslation("promo"); const [open, setOpen] = useState(false); const form = useForm({ resolver: zodResolver(priceSchema), defaultValues: { promo_rule_id: 0, subscribe_id: 0, quantity: 0, promo_price: 0, }, }); const subscribeId = form.watch("subscribe_id"); const quantity = form.watch("quantity"); const subscribe = subscribes.find((item) => item.id === subscribeId); const discounts = getSubscribeDiscounts(subscribe); const unitPrice = getSubscribeUnitPrice(subscribe); const originalPrice = unitPrice * quantity; const hasSelectedSubscribe = subscribeId > 0; const hasDiscounts = discounts.length > 0; async function handleSubmit(values: PriceFormValues) { const maxPrice = unitPrice * values.quantity; if (maxPrice > 0 && values.promo_price >= maxPrice) { form.setError("promo_price", { message: t( "form.promoPriceLessThanOriginalPrice", "Promo price must be lower than original price" ), }); return; } const success = await onSubmit({ promo_rule_id: values.promo_rule_id, items: [ { subscribe_id: values.subscribe_id, quantity: values.quantity, promo_price: values.promo_price, }, ], }); if (success) setOpen(false); } return ( {t("createPrice", "Create Promo Price")}
( {t("rule", "Rule")} onChange={field.onChange} options={rules.map((rule) => ({ label: rule.name, value: rule.id, }))} placeholder={t("form.selectRule", "Select rule")} value={field.value} /> )} /> ( {t("subscribe", "Subscribe")} onChange={(value) => { field.onChange(value); form.setValue("quantity", 0, { shouldDirty: true, shouldValidate: true, }); form.clearErrors(["quantity", "promo_price"]); }} options={subscribes .filter((item) => typeof item.id === "number") .map((item) => ({ label: item.name || `#${item.id}`, value: item.id as number, }))} placeholder={t( "form.selectSubscribe", "Select subscribe" )} value={field.value} /> )} /> ( {t("quantity", "Quantity")} onChange={field.onChange} options={discounts.map((item) => ({ label: `${item.quantity} x ${t( subscribe?.unit_time || "Month", subscribe?.unit_time || "Month" )}`, value: item.quantity, }))} placeholder={t( "form.selectQuantity", "Select discount quantity" )} value={field.value} /> {hasSelectedSubscribe && !hasDiscounts && (

{t( "form.noDiscounts", "This subscribe has no discount quantities and cannot be configured." )}

)}
)} /> ( {t("promoPrice", "Promo Price")} unitConversion("centsToDollars", value) } formatOutput={(value) => unitConversion("dollarsToCents", value) } min={0.01} onValueChange={(value) => field.onChange(value)} placeholder={t("form.enterPromoPrice", "Enter price")} type="number" value={field.value} /> {originalPrice > 0 && (

{t("originalPriceHint", "Original price")}:{" "} {formatCurrency(originalPrice)}

)}
)} />
); }