@carlonicora/nextjs-jsonapi 5.6.0 → 5.7.0

package/src/features/billing/stripe-coupon/components/forms/CouponCodeFields.tsx

@@ -1,57 +1,74 @@
 "use client";
 
 import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { FieldValues, UseFormReturn } from "react-hook-form";
 import { z } from "zod";
 import { FormCheckbox, FormDateTime, FormInput, FormSelect, FormSwitch } from "../../../../../components";
 import { FieldDescription } from "../../../../../shadcnui";
 import { StripeCouponCodeInput } from "../../data/stripe-coupon-code.interface";
 
 /**
- * Optional whole number of at least 1. The fields render as
- * `<FormInput type="number">`, which hands back `+""` (0) for a cleared input,
- * so 0, "" and NaN all mean "not set" — every limit here has a floor of 1.
+ * What a number or decimal `<FormInput>` holds: "" until something is typed, a
+ * number from `type="number"` (`+""` is 0 when cleared, NaN on garbage), a
+ * string from `type="decimal"` (may use a comma as the separator).
+ *
+ * The schemas below validate this raw value and never transform it, so the
+ * form's values have one type before and after validation. The `parse*`
+ * functions turn it into the number that is sent, on submit.
  */
-export const optionalPositiveInt = () =>
-  z.preprocess(
-    (value) =>
-      value === undefined ||
-      value === null ||
-      value === "" ||
-      value === 0 ||
-      (typeof value === "number" && Number.isNaN(value))
-        ? undefined
-        : typeof value === "string"
-          ? parseInt(value, 10)
-          : value,
-    z.number().int().min(1).optional(),
-  );
+type RawNumber = string | number | null | undefined;
+
+const rawNumber = () => z.union([z.string(), z.number()]).nullish();
+
+/** The issues `schema` reports for `value`, as plain messages. */
+function issueMessages(schema: z.ZodType, value: unknown): string[] {
+  const result = schema.safeParse(value);
+  return result.success ? [] : result.error.issues.map((issue) => issue.message);
+}
+
+/**
+ * Optional whole number of at least 1. 0, "" and NaN all mean "not set": every
+ * limit here has a floor of 1.
+ */
+export function parseOptionalPositiveInt(value: RawNumber): number | undefined {
+  if (value === undefined || value === null || value === "" || value === 0) return undefined;
+  if (typeof value === "number") return Number.isNaN(value) ? undefined : value;
+  return parseInt(value, 10);
+}
 
 /**
- * Optional decimal in MAJOR units, from `<FormInput type="decimal">` (a string
- * that may use a comma as the separator). Converted to minor units on submit,
- * exactly as PriceEditor does (`Math.round(value * 100)`).
+ * Optional decimal in MAJOR units. Converted to minor units on submit, exactly
+ * as PriceEditor does (`Math.round(value * 100)`).
  */
+export function parseOptionalDecimal(value: RawNumber): number | undefined {
+  if (typeof value === "string") return value.trim() === "" ? undefined : parseFloat(value.replace(",", "."));
+  if (value === undefined || value === null || Number.isNaN(value)) return undefined;
+  return value;
+}
+
+const positiveIntCheck = z.number().int().min(1).optional();
+const decimalCheck = z.number().optional();
+
+export const optionalPositiveInt = () =>
+  rawNumber().superRefine((value, ctx) => {
+    for (const message of issueMessages(positiveIntCheck, parseOptionalPositiveInt(value)))
+      ctx.addIssue({ code: "custom", message });
+  });
+
 export const optionalDecimal = () =>
-  z.preprocess(
-    (value) =>
-      typeof value === "string"
-        ? value.trim() === ""
-          ? undefined
-          : parseFloat(value.replace(",", "."))
-        : value === null || (typeof value === "number" && Number.isNaN(value))
-          ? undefined
-          : value,
-    z.number().optional(),
-  );
+  rawNumber().superRefine((value, ctx) => {
+    for (const message of issueMessages(decimalCheck, parseOptionalDecimal(value)))
+      ctx.addIssue({ code: "custom", message });
+  });
 
-/** Mirrors StripeCouponCodePostAttributesDTO. */
 /**
  * Optional point in time from `<FormDateTime allowEmpty>`, which writes "" when
  * the value is cleared (FormDateTime.tsx:136, :241).
  */
-export const optionalDate = () =>
-  z.preprocess((value) => (value === "" || value === null ? undefined : value), z.date().optional());
+export const optionalDate = () => z.union([z.date(), z.literal("")]).nullish();
 
+/** Mirrors StripeCouponCodePostAttributesDTO. */
 export const couponCodeSchema = (t: (key: string) => string) =>
   z
     .object({
@@ -65,7 +82,8 @@ export const couponCodeSchema = (t: (key: string) => string) =>
       automatic: z.boolean(),
     })
     .superRefine((values, ctx) => {
-      if (values.minimumAmount !== undefined && values.minimumAmount <= 0)
+      const minimumAmount = parseOptionalDecimal(values.minimumAmount);
+      if (minimumAmount !== undefined && minimumAmount <= 0)
         ctx.addIssue({
           code: "custom",
           path: ["minimumAmount"],
@@ -78,10 +96,10 @@ export type CouponCodeFormValues = z.infer<ReturnType<typeof couponCodeSchema>>;
 /**
  * Every text/number input starts as "" (never undefined): FormInput spreads
  * `field.value` onto a Base UI input, and undefined → value flips it from
- * uncontrolled to controlled (console warning). The schema preprocessors map
- * "" back to undefined, so empty fields are still sent as absent.
+ * uncontrolled to controlled (console warning). The parse functions map ""
+ * to undefined, so empty fields are still sent as absent.
  */
-export const couponCodeDefaults = (): z.input<ReturnType<typeof couponCodeSchema>> => ({
+export const couponCodeDefaults = (): CouponCodeFormValues => ({
   code: "",
   firstTimeTransaction: false,
   minimumAmount: "",
@@ -99,13 +117,15 @@ export const toCouponCodeInput = (values: CouponCodeFormValues): Omit<StripeCoup
     automatic: values.automatic,
   };
   if (values.code?.trim()) input.code = values.code.trim();
-  if (values.minimumAmount !== undefined) {
-    input.minimumAmount = Math.round(values.minimumAmount * 100);
+  const minimumAmount = parseOptionalDecimal(values.minimumAmount);
+  if (minimumAmount !== undefined) {
+    input.minimumAmount = Math.round(minimumAmount * 100);
     input.minimumAmountCurrency = values.minimumAmountCurrency;
   }
   if (values.stripeCustomerId?.trim()) input.stripeCustomerId = values.stripeCustomerId.trim();
   if (values.expiresAt) input.expiresAt = values.expiresAt;
-  if (values.maxRedemptions !== undefined) input.maxRedemptions = values.maxRedemptions;
+  const maxRedemptions = parseOptionalPositiveInt(values.maxRedemptions);
+  if (maxRedemptions !== undefined) input.maxRedemptions = maxRedemptions;
   return input;
 };
 
@@ -115,15 +135,17 @@ export const couponCurrencyOptions = [
   { id: "gbp", text: "GBP (£)" },
 ];
 
-type CouponCodeFieldsProps = {
-  form: any;
+type CouponCodeFieldsProps<T extends FieldValues> = {
+  form: UseFormReturn<T>;
   /** "" for CouponCodeEditor, "firstCode." when nested inside CouponEditor. */
   prefix?: string;
 };
 
 /** The fields of a customer-facing code, shared by CouponEditor (first code) and CouponCodeEditor. */
-export function CouponCodeFields({ form, prefix = "" }: CouponCodeFieldsProps) {
+export function CouponCodeFields<T extends FieldValues>({ form, prefix = "" }: CouponCodeFieldsProps<T>) {
   const t = useTranslations();
+  // Read once on mount: render stays pure.
+  const [now] = useState(() => new Date());
 
   return (
     <div className="flex w-full flex-col gap-y-4">
@@ -171,7 +193,7 @@ export function CouponCodeFields({ form, prefix = "" }: CouponCodeFieldsProps) {
         form={form}
         id={`${prefix}expiresAt`}
         name={t("billing.admin.coupons.fields.expiresAt")}
-        minDate={new Date()}
+        minDate={now}
         allowEmpty
       />
       <FormInput