@carlonicora/nextjs-jsonapi 5.5.0 → 5.7.0

package/src/features/billing/contexts/CouponContext.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from "react";
+import { SharedProvider } from "../../../contexts/SharedContext";
+import { JsonApiHydratedDataInterface, Modules, rehydrate } from "../../../core";
+import { usePageUrlGenerator } from "../../../hooks";
+import { BreadcrumbItemData } from "../../../interfaces";
+import { getRoleId } from "../../../roles";
+import { useCurrentUserContext } from "../../user/contexts";
+import { CouponRefresher } from "../stripe-coupon/components/forms/CouponRefresher";
+import CouponEditor from "../stripe-coupon/components/forms/CouponEditor";
+import {
+  StripeCouponCodeFlagsInput,
+  StripeCouponCodeInput,
+  StripeCouponCodeInterface,
+} from "../stripe-coupon/data/stripe-coupon-code.interface";
+import { StripeCouponCodeService } from "../stripe-coupon/data/stripe-coupon-code.service";
+import {
+  StripeCouponInput,
+  StripeCouponInterface,
+  StripeCouponRenameInput,
+} from "../stripe-coupon/data/stripe-coupon.interface";
+import { StripeCouponService } from "../stripe-coupon/data/stripe-coupon.service";
+
+export interface CouponContextType {
+  coupon: StripeCouponInterface | undefined;
+  setCoupon: (value: StripeCouponInterface | undefined) => void;
+  reloadCoupon: () => Promise<void>;
+  createCoupon: (input: StripeCouponInput) => Promise<StripeCouponInterface>;
+  renameCoupon: (input: StripeCouponRenameInput) => Promise<StripeCouponInterface>;
+  refreshCounts: (id?: string) => Promise<void>;
+  createCode: (input: StripeCouponCodeInput) => Promise<StripeCouponCodeInterface>;
+  updateCodeFlags: (input: StripeCouponCodeFlagsInput) => Promise<StripeCouponCodeInterface>;
+  /** Bumped by every mutation. Mounted lists re-fetch on it. */
+  catalogueVersion: number;
+  refreshCatalogue: () => void;
+}
+
+const CouponContext = createContext<CouponContextType | undefined>(undefined);
+
+export type CouponProviderProps = {
+  children: ReactNode;
+  dehydratedCoupon?: JsonApiHydratedDataInterface;
+  /**
+   * Publish breadcrumbs + title into SharedProvider. Pass `false` when this
+   * provider is mounted INSIDE another entity's page (the Codes tab of the
+   * products page mounts CouponProvider that way): SharedProvider replaces its
+   * value for the subtree rather than merging (SharedContext.tsx:35-37), so a
+   * nested provider that publishes chrome would blank the host page's title.
+   */
+  publishChrome?: boolean;
+};
+
+const defaultContextValue: CouponContextType = {
+  coupon: undefined,
+  setCoupon: () => {},
+  reloadCoupon: async () => {},
+  createCoupon: async () => {
+    throw new Error("createCoupon requires a CouponProvider");
+  },
+  renameCoupon: async () => {
+    throw new Error("renameCoupon requires a CouponProvider");
+  },
+  refreshCounts: async () => {},
+  createCode: async () => {
+    throw new Error("createCode requires a CouponProvider");
+  },
+  updateCodeFlags: async () => {
+    throw new Error("updateCodeFlags requires a CouponProvider");
+  },
+  catalogueVersion: 0,
+  refreshCatalogue: () => {},
+};
+
+export const CouponProvider = ({ children, dehydratedCoupon, publishChrome = true }: CouponProviderProps) => {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+  const { hasRole } = useCurrentUserContext();
+
+  const [coupon, setCoupon] = useState<StripeCouponInterface | undefined>(
+    dehydratedCoupon ? rehydrate<StripeCouponInterface>(Modules.StripeCoupon, dehydratedCoupon) : undefined,
+  );
+  const [catalogueVersion, setCatalogueVersion] = useState<number>(0);
+
+  const refreshCatalogue = useCallback(() => setCatalogueVersion((value) => value + 1), []);
+
+  const reloadCoupon = useCallback(async () => {
+    if (!coupon?.id) return;
+    setCoupon(await StripeCouponService.getCoupon({ id: coupon.id }));
+  }, [coupon?.id]);
+
+  const createCoupon = useCallback(
+    async (input: StripeCouponInput) => {
+      const saved = await StripeCouponService.createCoupon(input);
+      refreshCatalogue();
+      return saved;
+    },
+    [refreshCatalogue],
+  );
+
+  const renameCoupon = useCallback(
+    async (input: StripeCouponRenameInput) => {
+      const saved = await StripeCouponService.renameCoupon(input);
+      setCoupon(saved);
+      refreshCatalogue();
+      return saved;
+    },
+    [refreshCatalogue],
+  );
+
+  const refreshCounts = useCallback(
+    async (id?: string) => {
+      const target = id ?? coupon?.id;
+      if (!target) return;
+      const saved = await StripeCouponService.refreshCounts({ id: target });
+      if (coupon?.id === target) setCoupon(saved);
+      refreshCatalogue();
+    },
+    [coupon?.id, refreshCatalogue],
+  );
+
+  const createCode = useCallback(
+    async (input: StripeCouponCodeInput) => {
+      const saved = await StripeCouponCodeService.createCode(input);
+      await reloadCoupon();
+      refreshCatalogue();
+      return saved;
+    },
+    [reloadCoupon, refreshCatalogue],
+  );
+
+  const updateCodeFlags = useCallback(
+    async (input: StripeCouponCodeFlagsInput) => {
+      const saved = await StripeCouponCodeService.updateFlags(input);
+      await reloadCoupon();
+      refreshCatalogue();
+      return saved;
+    },
+    [reloadCoupon, refreshCatalogue],
+  );
+
+  const value = useMemo<CouponContextType>(
+    () => ({
+      coupon,
+      setCoupon,
+      reloadCoupon,
+      createCoupon,
+      renameCoupon,
+      refreshCounts,
+      createCode,
+      updateCodeFlags,
+      catalogueVersion,
+      refreshCatalogue,
+    }),
+    [
+      coupon,
+      reloadCoupon,
+      createCoupon,
+      renameCoupon,
+      refreshCounts,
+      createCode,
+      updateCodeFlags,
+      catalogueVersion,
+      refreshCatalogue,
+    ],
+  );
+
+  if (!publishChrome) return <CouponContext.Provider value={value}>{children}</CouponContext.Provider>;
+
+  const breadcrumb = (): BreadcrumbItemData[] => {
+    const items: BreadcrumbItemData[] = [
+      {
+        name: t("billing.admin.products.tabs.codes"),
+        // Linked only when it is NOT the current page. The Codes list is a tab
+        // of the products page, so the link carries its `?section=`.
+        ...(coupon
+          ? { href: generateUrl({ page: Modules.StripeProduct, additionalParameters: { section: "codes" } }) }
+          : {}),
+      },
+    ];
+    if (coupon) items.push({ name: coupon.name });
+    return items;
+  };
+
+  const title = () => {
+    const response: any = { type: t("billing.admin.coupons.title") };
+    if (!coupon) return response;
+
+    response.element = coupon.name;
+
+    if (hasRole(getRoleId().Administrator)) {
+      response.functions = [
+        <CouponRefresher key="couponRefresher" coupon={coupon} />,
+        <CouponEditor key="couponEditor" coupon={coupon} propagateChanges={setCoupon} />,
+      ];
+    }
+
+    return response;
+  };
+
+  return (
+    <SharedProvider value={{ breadcrumbs: breadcrumb(), title: title() }}>
+      <CouponContext.Provider value={value}>{children}</CouponContext.Provider>
+    </SharedProvider>
+  );
+};
+
+export const useCouponContext = (): CouponContextType => useContext(CouponContext) ?? defaultContextValue;

package/src/features/billing/contexts/index.ts

@@ -1,2 +1,3 @@
+export * from "./CouponContext";
 export * from "./PriceContext";
 export * from "./ProductContext";

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,72 @@
+"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={<span className="tabular-nums">{formatCouponDiscount(coupon, t, fmt)}</span>}
+        />
+        <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={<span className="tabular-nums">{coupon.redeemBy ? formatDate(coupon.redeemBy, fmt) : "—"}</span>}
+        />
+        <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,80 @@
+"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]);
+  type CouponCodeEditorValues = z.infer<typeof formSchema>;
+
+  const getDefaultValues = useCallback((): CouponCodeEditorValues => ({ id: v4(), ...couponCodeDefaults() }), []);
+
+  const form = useForm<CouponCodeEditorValues>({
+    resolver: zodResolver(formSchema),
+    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 `<module pageUrl>/<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) => 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} />;
+}