@carlonicora/nextjs-jsonapi 5.5.0 → 5.6.0

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

@@ -0,0 +1,192 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+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.
+ */
+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(),
+  );
+
+/**
+ * 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)`).
+ */
+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(),
+  );
+
+/** 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 couponCodeSchema = (t: (key: string) => string) =>
+  z
+    .object({
+      code: z.string().optional(),
+      firstTimeTransaction: z.boolean(),
+      minimumAmount: optionalDecimal(),
+      minimumAmountCurrency: z.string().min(1),
+      stripeCustomerId: z.string().optional(),
+      expiresAt: optionalDate(),
+      maxRedemptions: optionalPositiveInt(),
+      automatic: z.boolean(),
+    })
+    .superRefine((values, ctx) => {
+      if (values.minimumAmount !== undefined && values.minimumAmount <= 0)
+        ctx.addIssue({
+          code: "custom",
+          path: ["minimumAmount"],
+          message: t("billing.admin.coupons.errors.minimumAmount"),
+        });
+    });
+
+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.
+ */
+export const couponCodeDefaults = (): z.input<ReturnType<typeof couponCodeSchema>> => ({
+  code: "",
+  firstTimeTransaction: false,
+  minimumAmount: "",
+  minimumAmountCurrency: "eur",
+  stripeCustomerId: "",
+  expiresAt: undefined,
+  maxRedemptions: "",
+  automatic: false,
+});
+
+/** Form values → the code attributes the models serialise. Unset fields are left out. */
+export const toCouponCodeInput = (values: CouponCodeFormValues): Omit<StripeCouponCodeInput, "id" | "couponId"> => {
+  const input: Omit<StripeCouponCodeInput, "id" | "couponId"> = {
+    firstTimeTransaction: values.firstTimeTransaction,
+    automatic: values.automatic,
+  };
+  if (values.code?.trim()) input.code = values.code.trim();
+  if (values.minimumAmount !== undefined) {
+    input.minimumAmount = Math.round(values.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;
+  return input;
+};
+
+export const couponCurrencyOptions = [
+  { id: "usd", text: "USD ($)" },
+  { id: "eur", text: "EUR (€)" },
+  { id: "gbp", text: "GBP (£)" },
+];
+
+type CouponCodeFieldsProps = {
+  form: any;
+  /** "" 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) {
+  const t = useTranslations();
+
+  return (
+    <div className="flex w-full flex-col gap-y-4">
+      <FormInput
+        form={form}
+        id={`${prefix}code`}
+        name={t("billing.admin.coupons.fields.code")}
+        placeholder={t("billing.admin.coupons.placeholders.code")}
+      />
+      {/* The warning sits visibly under the option (spec), not in FormCheckbox's
+          hover tooltip — same layout as FormSwitch's description. */}
+      <div className="flex w-full flex-col">
+        <FormCheckbox
+          form={form}
+          id={`${prefix}firstTimeTransaction`}
+          name={t("billing.admin.coupons.fields.firstTimeTransaction")}
+        />
+        <FieldDescription>{t("billing.admin.coupons.fields.first_time_warning")}</FieldDescription>
+      </div>
+      <div className="grid grid-cols-2 gap-x-4">
+        {/* type="decimal", NOT type="currency": the currency variant hardcodes
+            a Euro symbol (FormInput.tsx:105-106), which contradicts the
+            currency selector sitting next to it. */}
+        <FormInput
+          form={form}
+          id={`${prefix}minimumAmount`}
+          type="decimal"
+          name={t("billing.admin.coupons.fields.minimumAmount")}
+          placeholder={t("billing.admin.coupons.placeholders.minimumAmount")}
+        />
+        <FormSelect
+          form={form}
+          id={`${prefix}minimumAmountCurrency`}
+          name={t("billing.admin.coupons.fields.currency")}
+          values={couponCurrencyOptions}
+        />
+      </div>
+      <FormInput
+        form={form}
+        id={`${prefix}stripeCustomerId`}
+        name={t("billing.admin.coupons.fields.stripeCustomerId")}
+        placeholder="cus_…"
+      />
+      <FormDateTime
+        form={form}
+        id={`${prefix}expiresAt`}
+        name={t("billing.admin.coupons.fields.expiresAt")}
+        minDate={new Date()}
+        allowEmpty
+      />
+      <FormInput
+        form={form}
+        id={`${prefix}maxRedemptions`}
+        type="number"
+        name={t("billing.admin.coupons.fields.codeMaxRedemptions")}
+        placeholder={t("billing.admin.coupons.placeholders.maxRedemptions")}
+      />
+      <FormSwitch
+        form={form}
+        id={`${prefix}automatic`}
+        name={t("billing.admin.coupons.fields.automatic")}
+        description={t("billing.admin.coupons.help.automatic")}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,333 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+import {
+  DetailField,
+  EditorSheet,
+  EntityMultiSelector,
+  FormDateTime,
+  FormInput,
+  FormSelect,
+  SectionHeader,
+} from "../../../../../components";
+import { Modules } from "../../../../../core";
+import { useI18nRouter } from "../../../../../i18n";
+import { formatDate, useBillingFormatOptions } from "../../../components/utils";
+import { useCouponContext } from "../../../contexts/CouponContext";
+import { StripeProductInterface } from "../../../stripe-product/data/stripe-product.interface";
+import { StripeProductService } from "../../../stripe-product/data/stripe-product.service";
+import { StripeCouponInput, StripeCouponInterface } from "../../data/stripe-coupon.interface";
+import { formatCouponDiscount } from "../../utils/format-coupon-discount";
+import {
+  CouponCodeFields,
+  couponCodeDefaults,
+  couponCodeSchema,
+  couponCurrencyOptions,
+  optionalDate,
+  optionalDecimal,
+  optionalPositiveInt,
+  toCouponCodeInput,
+} from "./CouponCodeFields";
+
+export type CouponEditorProps = {
+  coupon?: StripeCouponInterface;
+  propagateChanges?: (coupon: StripeCouponInterface) => void;
+  onSuccess?: () => void | Promise<void>;
+  trigger?: ReactNode;
+  forceShow?: boolean;
+  onClose?: () => void;
+  dialogOpen?: boolean;
+  onDialogOpenChange?: (open: boolean) => void;
+};
+
+function CouponEditorInternal({
+  coupon,
+  propagateChanges,
+  onSuccess,
+  trigger,
+  forceShow,
+  onClose,
+  dialogOpen,
+  onDialogOpenChange,
+}: CouponEditorProps) {
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
+  const router = useI18nRouter();
+  const { createCoupon, renameCoupon } = useCouponContext();
+  const isEdit = !!coupon;
+
+  // Mirrors StripeCouponPostAttributesDTO. Edit mode is a rename: Stripe allows
+  // changing only a coupon's name after creation, so the schema is the name alone.
+  const formSchema = useMemo(() => {
+    const name = z.string().min(1, { message: t("billing.admin.coupons.errors.name") });
+    if (isEdit) return z.object({ id: z.string(), name });
+
+    return z
+      .object({
+        id: z.uuidv4(),
+        name,
+        stripeCouponId: z.string().optional(),
+        discountType: z.enum(["percent_off", "amount_off"]),
+        percentOff: optionalDecimal(),
+        amountOff: optionalDecimal(),
+        currency: z.string().min(1),
+        duration: z.enum(["once", "repeating", "forever"]),
+        durationInMonths: optionalPositiveInt(),
+        products: z.array(z.object({ id: z.string(), name: z.string().optional() })),
+        redeemBy: optionalDate(),
+        maxRedemptions: optionalPositiveInt(),
+        firstCode: couponCodeSchema(t),
+      })
+      .superRefine((values, ctx) => {
+        if (
+          values.discountType === "percent_off" &&
+          (values.percentOff === undefined || values.percentOff < 0.01 || values.percentOff > 100)
+        )
+          ctx.addIssue({
+            code: "custom",
+            path: ["percentOff"],
+            message: t("billing.admin.coupons.errors.percentOff"),
+          });
+        if (values.discountType === "amount_off" && (values.amountOff === undefined || values.amountOff <= 0))
+          ctx.addIssue({
+            code: "custom",
+            path: ["amountOff"],
+            message: t("billing.admin.coupons.errors.amountOff"),
+          });
+        if (values.duration === "repeating" && values.durationInMonths === undefined)
+          ctx.addIssue({
+            code: "custom",
+            path: ["durationInMonths"],
+            message: t("billing.admin.coupons.errors.durationInMonths"),
+          });
+      });
+  }, [t, isEdit]);
+
+  const getDefaultValues = useCallback(
+    (): any =>
+      coupon
+        ? { id: coupon.id, name: coupon.name }
+        : {
+            id: v4(),
+            name: "",
+            stripeCouponId: "",
+            discountType: "percent_off",
+            percentOff: "",
+            amountOff: "",
+            currency: "eur",
+            duration: "forever",
+            // "" not undefined for every FormInput: see couponCodeDefaults.
+            durationInMonths: "",
+            products: [],
+            redeemBy: undefined,
+            maxRedemptions: "",
+            firstCode: couponCodeDefaults(),
+          },
+    [coupon],
+  );
+
+  const form = useForm<any>({
+    resolver: zodResolver(formSchema as any) as any,
+    defaultValues: getDefaultValues(),
+  });
+
+  const watchDiscountType = form.watch("discountType");
+  const watchDuration = form.watch("duration");
+
+  const discountTypeOptions = [
+    { id: "percent_off", text: t("billing.admin.coupons.type.percent_off") },
+    { id: "amount_off", text: t("billing.admin.coupons.type.amount_off") },
+  ];
+
+  const durationOptions = [
+    { id: "once", text: t("billing.admin.coupons.duration.once") },
+    { id: "repeating", text: t("billing.admin.coupons.duration.repeating") },
+    { id: "forever", text: t("billing.admin.coupons.duration.forever") },
+  ];
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t("billing.admin.coupons.entity")}
+      entityName={coupon?.name}
+      isEdit={isEdit}
+      module={Modules.StripeCoupon}
+      size="lg"
+      propagateChanges={propagateChanges}
+      onSuccess={onSuccess}
+      onNavigate={(url) => router.push(url)}
+      onSubmit={async (values: any) => {
+        if (isEdit) return await renameCoupon({ id: coupon.id, name: values.name });
+
+        const payload: StripeCouponInput = {
+          id: values.id,
+          name: values.name,
+          discountType: values.discountType,
+          duration: values.duration,
+          firstCode: toCouponCodeInput(values.firstCode),
+        };
+        if (values.stripeCouponId?.trim()) payload.stripeCouponId = values.stripeCouponId.trim();
+        if (values.discountType === "percent_off") payload.percentOff = values.percentOff;
+        else {
+          payload.amountOff = Math.round(values.amountOff * 100);
+          payload.currency = values.currency;
+        }
+        if (values.duration === "repeating") payload.durationInMonths = values.durationInMonths;
+        if (values.products.length > 0) payload.productIds = values.products.map((p: { id: string }) => p.id);
+        if (values.redeemBy) payload.redeemBy = values.redeemBy;
+        if (values.maxRedemptions !== undefined) payload.maxRedemptions = values.maxRedemptions;
+
+        return await createCoupon(payload);
+      }}
+      onReset={getDefaultValues}
+      trigger={trigger}
+      forceShow={forceShow}
+      onClose={onClose}
+      dialogOpen={dialogOpen}
+      onDialogOpenChange={onDialogOpenChange}
+    >
+      <div className="flex w-full flex-col gap-y-4">
+        <FormInput
+          form={form}
+          id="name"
+          name={t("billing.admin.coupons.fields.name")}
+          placeholder={t("billing.admin.coupons.placeholders.name")}
+          isRequired
+        />
+
+        {isEdit ? (
+          <>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <DetailField
+                label={t("billing.admin.coupons.fields.discount")}
+                value={formatCouponDiscount(coupon, t, fmt)}
+              />
+              <DetailField
+                label={t("billing.admin.coupons.fields.redeemBy")}
+                value={coupon.redeemBy ? formatDate(coupon.redeemBy, fmt) : "—"}
+              />
+              <DetailField
+                label={t("billing.admin.coupons.fields.maxRedemptions")}
+                value={
+                  <span className="tabular-nums">
+                    {coupon.maxRedemptions ?? t("billing.admin.coupons.places.no_limit")}
+                  </span>
+                }
+              />
+              <DetailField
+                label={t("billing.admin.coupons.fields.stripeId")}
+                value={<span className="tabular-nums">{coupon.stripeCouponId}</span>}
+              />
+            </div>
+            {/* Typography role 10 (helper text). */}
+            <p className="text-muted-foreground text-xs/relaxed">{t("billing.admin.coupons.fixed_notice")}</p>
+          </>
+        ) : (
+          <>
+            <FormInput
+              form={form}
+              id="stripeCouponId"
+              name={t("billing.admin.coupons.fields.stripeCouponId")}
+              placeholder={t("billing.admin.coupons.placeholders.stripeCouponId")}
+            />
+
+            <FormSelect
+              form={form}
+              id="discountType"
+              name={t("billing.admin.coupons.fields.discountType")}
+              values={discountTypeOptions}
+            />
+
+            {watchDiscountType === "percent_off" ? (
+              <FormInput
+                form={form}
+                id="percentOff"
+                type="decimal"
+                name={t("billing.admin.coupons.fields.percentOff")}
+                placeholder={t("billing.admin.coupons.placeholders.percentOff")}
+                isRequired
+              />
+            ) : (
+              <div className="grid grid-cols-2 gap-x-4">
+                {/* type="decimal", NOT type="currency": the currency variant hardcodes
+                    a Euro symbol (FormInput.tsx:105-106), which contradicts the
+                    currency selector sitting next to it. */}
+                <FormInput
+                  form={form}
+                  id="amountOff"
+                  type="decimal"
+                  name={t("billing.admin.coupons.fields.amountOff")}
+                  placeholder={t("billing.admin.coupons.placeholders.amountOff")}
+                  isRequired
+                />
+                <FormSelect
+                  form={form}
+                  id="currency"
+                  name={t("billing.admin.coupons.fields.currency")}
+                  values={couponCurrencyOptions}
+                  isRequired
+                />
+              </div>
+            )}
+
+            <FormSelect
+              form={form}
+              id="duration"
+              name={t("billing.admin.coupons.fields.duration")}
+              values={durationOptions}
+            />
+
+            {watchDuration === "repeating" && (
+              <FormInput
+                form={form}
+                id="durationInMonths"
+                type="number"
+                name={t("billing.admin.coupons.fields.durationInMonths")}
+                placeholder={t("billing.admin.coupons.placeholders.durationInMonths")}
+                isRequired
+              />
+            )}
+
+            <EntityMultiSelector<StripeProductInterface>
+              id="products"
+              form={form}
+              label={t("billing.admin.coupons.fields.products")}
+              description={t("billing.admin.coupons.help.products")}
+              retriever={(params) => StripeProductService.listProducts(params)}
+              module={Modules.StripeProduct}
+              getLabel={(product) => product.name}
+            />
+
+            <FormDateTime
+              form={form}
+              id="redeemBy"
+              name={t("billing.admin.coupons.fields.redeemBy")}
+              minDate={new Date()}
+              allowEmpty
+            />
+
+            <FormInput
+              form={form}
+              id="maxRedemptions"
+              type="number"
+              name={t("billing.admin.coupons.fields.maxRedemptions")}
+              placeholder={t("billing.admin.coupons.placeholders.maxRedemptions")}
+            />
+
+            <SectionHeader>{t("billing.admin.coupons.first_code")}</SectionHeader>
+            <CouponCodeFields form={form} prefix="firstCode." />
+          </>
+        )}
+      </div>
+    </EditorSheet>
+  );
+}
+
+export default function CouponEditor(props: CouponEditorProps) {
+  return <CouponEditorInternal {...props} />;
+}

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

@@ -0,0 +1,45 @@
+"use client";
+
+import { RefreshCwIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { errorToast } from "../../../../../components/errors";
+import { Button } from "../../../../../shadcnui";
+import { useCouponContext } from "../../../contexts/CouponContext";
+import { StripeCouponInterface } from "../../data/stripe-coupon.interface";
+
+type CouponRefresherProps = {
+  coupon: StripeCouponInterface;
+};
+
+/**
+ * Re-reads the coupon and its codes from Stripe and writes the usage counts to
+ * our copy. Counts go stale only for subscriptions made outside our endpoints
+ * (the Stripe dashboard); this button fixes that.
+ */
+export function CouponRefresher({ coupon }: CouponRefresherProps) {
+  const t = useTranslations();
+  const { refreshCounts } = useCouponContext();
+  const [pending, setPending] = useState<boolean>(false);
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      disabled={pending}
+      onClick={async () => {
+        setPending(true);
+        try {
+          await refreshCounts(coupon.id);
+        } catch (error) {
+          errorToast({ title: t("billing.admin.coupons.refresh.title"), error });
+        } finally {
+          setPending(false);
+        }
+      }}
+    >
+      <RefreshCwIcon />
+      {t("billing.admin.coupons.refresh.title")}
+    </Button>
+  );
+}

package/src/features/billing/stripe-coupon/components/forms/index.ts

@@ -0,0 +1,6 @@
+export * from "./CouponCodeFields";
+export * from "./CouponRefresher";
+export { default as CouponEditor } from "./CouponEditor";
+export type { CouponEditorProps } from "./CouponEditor";
+export { default as CouponCodeEditor } from "./CouponCodeEditor";
+export type { CouponCodeEditorProps } from "./CouponCodeEditor";

package/src/features/billing/stripe-coupon/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./containers";
+export * from "./details";
+export * from "./forms";
+export * from "./lists";
+export * from "./widgets";

package/src/features/billing/stripe-coupon/components/lists/CouponCodesList.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { TicketIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode, useEffect } from "react";
+import { ContentListTable } from "../../../../../components";
+import { Modules } from "../../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../../hooks";
+import { EmptyState } from "../../../../../shadcnui";
+import { useCouponContext } from "../../../contexts/CouponContext";
+import { StripeCouponCodeFields } from "../../data/stripe-coupon-code.fields";
+import { StripeCouponCodeInterface } from "../../data/stripe-coupon-code.interface";
+import { StripeCouponCodeService } from "../../data/stripe-coupon-code.service";
+import CouponCodeEditor from "../forms/CouponCodeEditor";
+
+type CouponCodesListProps = {
+  couponId: string;
+};
+
+export function CouponCodesList({ couponId }: CouponCodesListProps) {
+  const t = useTranslations();
+  const { catalogueVersion } = useCouponContext();
+
+  const data: DataListRetriever<StripeCouponCodeInterface> = useDataListRetriever({
+    retriever: (params) => StripeCouponCodeService.listByCoupon({ ...params, couponId }),
+    retrieverParams: {},
+    module: Modules.StripeCouponCode,
+  });
+
+  // Switching "Apply automatically" on one code clears it on the others in the
+  // same server write, so every flag change re-reads the whole list.
+  useEffect(() => {
+    if (catalogueVersion > 0) void data.refresh();
+  }, [catalogueVersion]);
+
+  const functions: ReactNode[] = [<CouponCodeEditor key="create-code" couponId={couponId} />];
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[
+        StripeCouponCodeFields.code,
+        StripeCouponCodeFields.places,
+        StripeCouponCodeFields.expiresAt,
+        StripeCouponCodeFields.automatic,
+        StripeCouponCodeFields.status,
+        StripeCouponCodeFields.actions,
+      ]}
+      tableGeneratorType={Modules.StripeCouponCode}
+      functions={functions}
+      title={t("billing.admin.coupons.codes.title")}
+      emptyState={
+        <EmptyState
+          icon={TicketIcon}
+          title={t("billing.admin.coupons.codes.empty.title")}
+          description={t("billing.admin.coupons.codes.empty.description")}
+        />
+      }
+    />
+  );
+}