@carlonicora/nextjs-jsonapi 5.5.0 → 5.7.0

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

@@ -0,0 +1,214 @@
+"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";
+
+/**
+ * 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.
+ */
+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. 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 = () =>
+  rawNumber().superRefine((value, ctx) => {
+    for (const message of issueMessages(decimalCheck, parseOptionalDecimal(value)))
+      ctx.addIssue({ code: "custom", message });
+  });
+
+/**
+ * Optional point in time from `<FormDateTime allowEmpty>`, which writes "" when
+ * the value is cleared (FormDateTime.tsx:136, :241).
+ */
+export const optionalDate = () => z.union([z.date(), z.literal("")]).nullish();
+
+/** Mirrors StripeCouponCodePostAttributesDTO. */
+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) => {
+      const minimumAmount = parseOptionalDecimal(values.minimumAmount);
+      if (minimumAmount !== undefined && 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 parse functions map ""
+ * to undefined, so empty fields are still sent as absent.
+ */
+export const couponCodeDefaults = (): CouponCodeFormValues => ({
+  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();
+  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;
+  const maxRedemptions = parseOptionalPositiveInt(values.maxRedemptions);
+  if (maxRedemptions !== undefined) input.maxRedemptions = maxRedemptions;
+  return input;
+};
+
+export const couponCurrencyOptions = [
+  { id: "usd", text: "USD ($)" },
+  { id: "eur", text: "EUR (€)" },
+  { id: "gbp", text: "GBP (£)" },
+];
+
+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<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">
+      <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={now}
+        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,425 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useMemo, useState } 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 {
+  StripeCouponDiscountInput,
+  StripeCouponDurationInput,
+  StripeCouponInput,
+  StripeCouponInterface,
+} from "../../data/stripe-coupon.interface";
+import { STRIPE_COUPON_DETAIL_PAGE_URL } from "../../stripe-coupon.module";
+import { formatCouponDiscount } from "../../utils/format-coupon-discount";
+import {
+  CouponCodeFields,
+  couponCodeDefaults,
+  couponCodeSchema,
+  couponCurrencyOptions,
+  optionalDate,
+  optionalDecimal,
+  optionalPositiveInt,
+  parseOptionalDecimal,
+  parseOptionalPositiveInt,
+  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;
+};
+
+type Translator = (key: string) => string;
+
+/**
+ * Edit mode is a rename: Stripe allows changing only a coupon's name after
+ * creation, so the schema is the name alone.
+ */
+const couponRenameSchema = (t: Translator) =>
+  z.object({ id: z.string(), name: z.string().min(1, { message: t("billing.admin.coupons.errors.name") }) });
+
+type CouponRenameValues = z.infer<ReturnType<typeof couponRenameSchema>>;
+
+/** Mirrors StripeCouponPostAttributesDTO. */
+const couponCreateSchema = (t: Translator) =>
+  z
+    .object({
+      id: z.uuidv4(),
+      name: z.string().min(1, { message: t("billing.admin.coupons.errors.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) => {
+      const percentOff = parseOptionalDecimal(values.percentOff);
+      if (values.discountType === "percent_off" && (percentOff === undefined || percentOff < 0.01 || percentOff > 100))
+        ctx.addIssue({
+          code: "custom",
+          path: ["percentOff"],
+          message: t("billing.admin.coupons.errors.percentOff"),
+        });
+      const amountOff = parseOptionalDecimal(values.amountOff);
+      if (values.discountType === "amount_off" && (amountOff === undefined || amountOff <= 0))
+        ctx.addIssue({
+          code: "custom",
+          path: ["amountOff"],
+          message: t("billing.admin.coupons.errors.amountOff"),
+        });
+      if (values.duration === "repeating" && parseOptionalPositiveInt(values.durationInMonths) === undefined)
+        ctx.addIssue({
+          code: "custom",
+          path: ["durationInMonths"],
+          message: t("billing.admin.coupons.errors.durationInMonths"),
+        });
+    });
+
+type CouponCreateValues = z.infer<ReturnType<typeof couponCreateSchema>>;
+
+/** The schema guarantees the value; a missing one is a bug, not user input. */
+function required<T>(value: T | undefined, field: string): T {
+  if (value === undefined) throw new Error(`${field} is not set`);
+  return value;
+}
+
+function toDiscountInput(values: CouponCreateValues): StripeCouponDiscountInput {
+  if (values.discountType === "percent_off")
+    return { discountType: "percent_off", percentOff: required(parseOptionalDecimal(values.percentOff), "percentOff") };
+
+  return {
+    discountType: "amount_off",
+    amountOff: Math.round(required(parseOptionalDecimal(values.amountOff), "amountOff") * 100),
+    currency: values.currency,
+  };
+}
+
+function toDurationInput(values: CouponCreateValues): StripeCouponDurationInput {
+  if (values.duration === "repeating")
+    return {
+      duration: "repeating",
+      durationInMonths: required(parseOptionalPositiveInt(values.durationInMonths), "durationInMonths"),
+    };
+
+  return { duration: values.duration };
+}
+
+/** Form values → the coupon the model serialises. Unset fields are left out. */
+function toCouponInput(values: CouponCreateValues): StripeCouponInput {
+  const payload: StripeCouponInput = {
+    id: values.id,
+    name: values.name,
+    firstCode: toCouponCodeInput(values.firstCode),
+    ...toDiscountInput(values),
+    ...toDurationInput(values),
+  };
+  if (values.stripeCouponId?.trim()) payload.stripeCouponId = values.stripeCouponId.trim();
+  if (values.products.length > 0) payload.productIds = values.products.map((product) => product.id);
+  if (values.redeemBy) payload.redeemBy = values.redeemBy;
+  const maxRedemptions = parseOptionalPositiveInt(values.maxRedemptions);
+  if (maxRedemptions !== undefined) payload.maxRedemptions = maxRedemptions;
+  return payload;
+}
+
+/**
+ * The module with the coupon's own route as pageUrl: the module's pageUrl is the
+ * products page (the coupons list is its Codes tab), so EditorSheet's
+ * navigate / revalidate after a save would otherwise land on
+ * `/administration/products/<couponId>`.
+ */
+function couponPageModule() {
+  return { ...Modules.StripeCoupon, pageUrl: STRIPE_COUPON_DETAIL_PAGE_URL };
+}
+
+function CouponRenameEditor({
+  coupon,
+  propagateChanges,
+  onSuccess,
+  trigger,
+  forceShow,
+  onClose,
+  dialogOpen,
+  onDialogOpenChange,
+}: CouponEditorProps & { coupon: StripeCouponInterface }) {
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
+  const router = useI18nRouter();
+  const { renameCoupon } = useCouponContext();
+
+  const formSchema = useMemo(() => couponRenameSchema(t), [t]);
+
+  const getDefaultValues = useCallback((): CouponRenameValues => ({ id: coupon.id, name: coupon.name }), [coupon]);
+
+  const form = useForm<CouponRenameValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultValues(),
+  });
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t("billing.admin.coupons.entity")}
+      entityName={coupon.name}
+      isEdit
+      module={couponPageModule()}
+      size="lg"
+      propagateChanges={propagateChanges}
+      onSuccess={onSuccess}
+      onNavigate={(url) => router.push(url)}
+      onSubmit={async (values) => await renameCoupon({ id: coupon.id, name: values.name })}
+      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
+        />
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <DetailField
+            label={t("billing.admin.coupons.fields.discount")}
+            value={<span className="tabular-nums">{formatCouponDiscount(coupon, t, fmt)}</span>}
+          />
+          <DetailField
+            label={t("billing.admin.coupons.fields.redeemBy")}
+            value={<span className="tabular-nums">{coupon.redeemBy ? formatDate(coupon.redeemBy, fmt) : "—"}</span>}
+          />
+          <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>
+      </div>
+    </EditorSheet>
+  );
+}
+
+function CouponCreateEditor({
+  propagateChanges,
+  onSuccess,
+  trigger,
+  forceShow,
+  onClose,
+  dialogOpen,
+  onDialogOpenChange,
+}: Omit<CouponEditorProps, "coupon">) {
+  const t = useTranslations();
+  const router = useI18nRouter();
+  const { createCoupon } = useCouponContext();
+  // Read once on mount: render stays pure.
+  const [now] = useState(() => new Date());
+
+  const formSchema = useMemo(() => couponCreateSchema(t), [t]);
+
+  const getDefaultValues = useCallback(
+    (): CouponCreateValues => ({
+      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(),
+    }),
+    [],
+  );
+
+  const form = useForm<CouponCreateValues>({
+    resolver: zodResolver(formSchema),
+    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")}
+      isEdit={false}
+      module={couponPageModule()}
+      size="lg"
+      propagateChanges={propagateChanges}
+      onSuccess={onSuccess}
+      onNavigate={(url) => router.push(url)}
+      onSubmit={async (values) => await createCoupon(toCouponInput(values))}
+      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
+        />
+        <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={now}
+          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 props.coupon ? <CouponRenameEditor {...props} coupon={props.coupon} /> : <CouponCreateEditor {...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";