@carlonicora/nextjs-jsonapi 5.4.0 → 5.6.0

package/src/features/billing/i18n-keys.ts

@@ -13,6 +13,8 @@ export const BILLING_ADMIN_I18N_KEYS = [
   "billing.admin.products.entity",
   "billing.admin.products.create",
   "billing.admin.products.tabs.details",
+  "billing.admin.products.tabs.products",
+  "billing.admin.products.tabs.codes",
   "billing.admin.products.empty.title",
   "billing.admin.products.empty.description",
   "billing.admin.products.fields.name",
@@ -92,6 +94,74 @@ export const BILLING_ADMIN_I18N_KEYS = [
   "billing.admin.prices.restore.title",
   "billing.admin.prices.restore.description",
   "billing.admin.prices.restore.confirm",
+  "billing.admin.coupons.all_products",
+  "billing.admin.coupons.codes.automatic",
+  "billing.admin.coupons.codes.empty.description",
+  "billing.admin.coupons.codes.empty.title",
+  "billing.admin.coupons.codes.entity",
+  "billing.admin.coupons.codes.never",
+  "billing.admin.coupons.codes.title",
+  "billing.admin.coupons.discount.amount",
+  "billing.admin.coupons.discount.forever",
+  "billing.admin.coupons.discount.once",
+  "billing.admin.coupons.discount.percent",
+  "billing.admin.coupons.discount.repeating",
+  "billing.admin.coupons.duration.forever",
+  "billing.admin.coupons.duration.once",
+  "billing.admin.coupons.duration.repeating",
+  "billing.admin.coupons.empty.description",
+  "billing.admin.coupons.empty.title",
+  "billing.admin.coupons.entity",
+  "billing.admin.coupons.errors.amountOff",
+  "billing.admin.coupons.errors.durationInMonths",
+  "billing.admin.coupons.errors.minimumAmount",
+  "billing.admin.coupons.errors.name",
+  "billing.admin.coupons.errors.percentOff",
+  "billing.admin.coupons.fields.amountOff",
+  "billing.admin.coupons.fields.automatic",
+  "billing.admin.coupons.fields.code",
+  "billing.admin.coupons.fields.codeMaxRedemptions",
+  "billing.admin.coupons.fields.codes",
+  "billing.admin.coupons.fields.currency",
+  "billing.admin.coupons.fields.discount",
+  "billing.admin.coupons.fields.discountType",
+  "billing.admin.coupons.fields.duration",
+  "billing.admin.coupons.fields.durationInMonths",
+  "billing.admin.coupons.fields.expiresAt",
+  "billing.admin.coupons.fields.first_time_warning",
+  "billing.admin.coupons.fields.firstTimeTransaction",
+  "billing.admin.coupons.fields.maxRedemptions",
+  "billing.admin.coupons.fields.minimumAmount",
+  "billing.admin.coupons.fields.name",
+  "billing.admin.coupons.fields.percentOff",
+  "billing.admin.coupons.fields.places",
+  "billing.admin.coupons.fields.products",
+  "billing.admin.coupons.fields.redeemBy",
+  "billing.admin.coupons.fields.status",
+  "billing.admin.coupons.fields.stripeCouponId",
+  "billing.admin.coupons.fields.stripeCustomerId",
+  "billing.admin.coupons.fields.stripeId",
+  "billing.admin.coupons.first_code",
+  "billing.admin.coupons.fixed_notice",
+  "billing.admin.coupons.help.automatic",
+  "billing.admin.coupons.help.products",
+  "billing.admin.coupons.placeholders.amountOff",
+  "billing.admin.coupons.placeholders.code",
+  "billing.admin.coupons.placeholders.durationInMonths",
+  "billing.admin.coupons.placeholders.maxRedemptions",
+  "billing.admin.coupons.placeholders.minimumAmount",
+  "billing.admin.coupons.placeholders.name",
+  "billing.admin.coupons.placeholders.percentOff",
+  "billing.admin.coupons.placeholders.stripeCouponId",
+  "billing.admin.coupons.places.limited",
+  "billing.admin.coupons.places.no_limit",
+  "billing.admin.coupons.places.unlimited",
+  "billing.admin.coupons.refresh.title",
+  "billing.admin.coupons.status.active",
+  "billing.admin.coupons.status.ended",
+  "billing.admin.coupons.title",
+  "billing.admin.coupons.type.amount_off",
+  "billing.admin.coupons.type.percent_off",
 ] as const;
 
 /**
@@ -242,10 +312,12 @@ export const BILLING_UI_I18N_KEYS = [
   "billing.ui.pricing.selected",
   "billing.ui.pricing.standard",
   "billing.ui.promo_code.apply",
+  "billing.ui.promo_code.automatic_label",
   "billing.ui.promo_code.duration_forever",
   "billing.ui.promo_code.duration_once",
   "billing.ui.promo_code.duration_repeating",
   "billing.ui.promo_code.placeholder",
+  "billing.ui.promo_code.use_different",
   "billing.ui.proration.net_due_today",
   "billing.ui.proration.next_invoice",
   "billing.ui.proration.title",
@@ -289,8 +361,11 @@ export const BILLING_UI_I18N_KEYS = [
   "billing.ui.wizard.addons_description",
   "billing.ui.wizard.back",
   "billing.ui.wizard.errors.already_subscribed",
+  "billing.ui.wizard.errors.discount_sold_out",
+  "billing.ui.wizard.errors.discount_unavailable",
   "billing.ui.wizard.errors.invalid_promo_code",
   "billing.ui.wizard.errors.payment_method_required",
+  "billing.ui.wizard.errors.payment_not_confirmed",
   "billing.ui.wizard.errors.prepare_review",
   "billing.ui.wizard.errors.process_subscription",
   "billing.ui.wizard.errors.validate_promo_code",
@@ -299,8 +374,10 @@ export const BILLING_UI_I18N_KEYS = [
   "billing.ui.wizard.next_review",
   "billing.ui.wizard.payment_description",
   "billing.ui.wizard.review.amount_off",
+  "billing.ui.wizard.review.card_on_file",
   "billing.ui.wizard.review.charge_now",
   "billing.ui.wizard.review.confirm_change",
+  "billing.ui.wizard.review.discount_carries_over",
   "billing.ui.wizard.review.due_now",
   "billing.ui.wizard.review.interval_monthly",
   "billing.ui.wizard.review.interval_one_time",
@@ -317,6 +394,8 @@ export const BILLING_UI_I18N_KEYS = [
   "billing.ui.wizard.review.subscribe_now",
   "billing.ui.wizard.review.trial_upgrade",
   "billing.ui.wizard.review.trial_upgrade_description",
+  "billing.ui.wizard.review.trial_upgrade_description_discounted",
+  "billing.ui.wizard.review.use_another_card",
   "billing.ui.wizard.steps.select_plan",
   "billing.ui.wizard.subscribe_description",
 ] as const;

package/src/features/billing/stripe-coupon/components/containers/CouponContainer.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { RoundPageContainer } from "../../../../../components";
+import { Modules } from "../../../../../core";
+import { useCouponContext } from "../../../contexts/CouponContext";
+import { CouponDetails } from "../details/CouponDetails";
+import { CouponCodesList } from "../lists/CouponCodesList";
+
+export function CouponContainer() {
+  const t = useTranslations();
+  const { coupon } = useCouponContext();
+
+  if (!coupon) return null;
+
+  return (
+    <RoundPageContainer
+      module={Modules.StripeCoupon}
+      id={coupon.id}
+      tabs={[
+        {
+          sectionKey: "details",
+          label: t("billing.admin.products.tabs.details"),
+          content: <CouponDetails />,
+        },
+        {
+          sectionKey: "codes",
+          label: t("billing.admin.coupons.codes.title"),
+          // No `fillHeight` and no `fullWidth` on the list: a ContentListTable in
+          // a tab keeps its own bordered card and flows with the panel, exactly
+          // as PricesList does inside ProductContainer. The codes list reads the
+          // page's own CouponProvider, so no nested provider is needed.
+          content: <CouponCodesList couponId={coupon.id} />,
+        },
+      ]}
+    />
+  );
+}

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

@@ -0,0 +1 @@
+export * from "./CouponContainer";

package/src/features/billing/stripe-coupon/components/details/CouponDetails.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { DetailField, SectionHeader } from "../../../../../components";
+import { Badge } from "../../../../../shadcnui";
+import { formatDate, useBillingFormatOptions } from "../../../components/utils";
+import { useCouponContext } from "../../../contexts/CouponContext";
+import { formatCouponDiscount } from "../../utils/format-coupon-discount";
+
+export function CouponDetails() {
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
+  const { coupon } = useCouponContext();
+
+  if (!coupon) return null;
+
+  return (
+    <div className="flex w-full flex-col gap-y-4">
+      <SectionHeader>{t("billing.admin.products.tabs.details")}</SectionHeader>
+      {/* Typography role 10 (helper text). */}
+      <p className="text-muted-foreground text-xs/relaxed">{t("billing.admin.coupons.fixed_notice")}</p>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <DetailField label={t("billing.admin.coupons.fields.name")} value={coupon.name} />
+        <DetailField
+          label={t("billing.admin.coupons.fields.status")}
+          value={
+            coupon.valid ? (
+              <Badge variant="softGreen">{t("billing.admin.coupons.status.active")}</Badge>
+            ) : (
+              <Badge variant="softGray">{t("billing.admin.coupons.status.ended")}</Badge>
+            )
+          }
+        />
+        <DetailField label={t("billing.admin.coupons.fields.discount")} value={formatCouponDiscount(coupon, t, fmt)} />
+        <DetailField
+          label={t("billing.admin.coupons.fields.places")}
+          value={
+            <span className="tabular-nums">
+              {coupon.maxRedemptions !== undefined
+                ? t("billing.admin.coupons.places.limited", {
+                    used: String(coupon.timesRedeemed),
+                    limit: String(coupon.maxRedemptions),
+                  })
+                : t("billing.admin.coupons.places.unlimited", { used: String(coupon.timesRedeemed) })}
+            </span>
+          }
+        />
+        <DetailField
+          label={t("billing.admin.coupons.fields.products")}
+          value={
+            coupon.stripeProductIds.length > 0 ? (
+              <span className="tabular-nums">{coupon.stripeProductIds.join(", ")}</span>
+            ) : (
+              t("billing.admin.coupons.all_products")
+            )
+          }
+        />
+        <DetailField
+          label={t("billing.admin.coupons.fields.redeemBy")}
+          value={coupon.redeemBy ? formatDate(coupon.redeemBy, fmt) : "—"}
+        />
+        <DetailField
+          label={t("billing.admin.coupons.fields.stripeId")}
+          value={<span className="tabular-nums">{coupon.stripeCouponId}</span>}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export * from "./CouponDetails";

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

@@ -0,0 +1,79 @@
+"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 { EditorSheet } from "../../../../../components";
+import { Modules } from "../../../../../core";
+import { useI18nRouter } from "../../../../../i18n";
+import { useCouponContext } from "../../../contexts/CouponContext";
+import { CouponCodeFields, couponCodeDefaults, couponCodeSchema, toCouponCodeInput } from "./CouponCodeFields";
+
+export type CouponCodeEditorProps = {
+  couponId: string;
+  onSuccess?: () => void | Promise<void>;
+  trigger?: ReactNode;
+  forceShow?: boolean;
+  onClose?: () => void;
+  dialogOpen?: boolean;
+  onDialogOpenChange?: (open: boolean) => void;
+};
+
+/**
+ * Create-only: Stripe allows changing a promotion code's `active` flag and
+ * little else, so a code is never edited here. "Apply automatically" and
+ * deactivate / reactivate live on the row (CouponCodeActions).
+ */
+function CouponCodeEditorInternal({
+  couponId,
+  onSuccess,
+  trigger,
+  forceShow,
+  onClose,
+  dialogOpen,
+  onDialogOpenChange,
+}: CouponCodeEditorProps) {
+  const t = useTranslations();
+  const router = useI18nRouter();
+  const { createCode } = useCouponContext();
+
+  const formSchema = useMemo(() => z.object({ id: z.uuidv4() }).and(couponCodeSchema(t)), [t]);
+
+  const getDefaultValues = useCallback(() => ({ id: v4(), ...couponCodeDefaults() }), []);
+
+  const form = useForm<any>({
+    resolver: zodResolver(formSchema as any) as any,
+    defaultValues: getDefaultValues(),
+  });
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t("billing.admin.coupons.codes.entity")}
+      isEdit={false}
+      module={Modules.StripeCouponCode}
+      size="md"
+      // A code has no page of its own: without onSuccess EditorSheet would
+      // navigate to `/administration/coupons/<codeId>`, which does not exist.
+      // The context's createCode already reloads the coupon and the codes list.
+      onSuccess={onSuccess ?? (() => {})}
+      onNavigate={(url) => router.push(url)}
+      onSubmit={async (values: any) => await createCode({ id: values.id, couponId, ...toCouponCodeInput(values) })}
+      onReset={getDefaultValues}
+      trigger={trigger}
+      forceShow={forceShow}
+      onClose={onClose}
+      dialogOpen={dialogOpen}
+      onDialogOpenChange={onDialogOpenChange}
+    >
+      <CouponCodeFields form={form} />
+    </EditorSheet>
+  );
+}
+
+export default function CouponCodeEditor(props: CouponCodeEditorProps) {
+  return <CouponCodeEditorInternal {...props} />;
+}

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>
+  );
+}