@carlonicora/nextjs-jsonapi 1.37.0 → 1.38.1

package/src/features/billing/stripe-subscription/components/lists/SubscriptionsList.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useState } from "react";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../shadcnui";
+import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../shadcnui";
 import { formatCurrency, formatDate } from "../../../components/utils";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
-import { StripeSubscriptionInterface } from "../../data";
+import { StripeSubscriptionInterface, SubscriptionStatus } from "../../data";
 import { SubscriptionDetails } from "../details/SubscriptionDetails";
 import { SubscriptionStatusBadge } from "../widgets/SubscriptionStatusBadge";
 
@@ -61,12 +61,13 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
               <TableHead>Plan</TableHead>
               <TableHead>Period</TableHead>
               <TableHead className="text-right">Amount</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {subscriptions.map((subscription) => {
               const price = subscription.price;
-              const amount = price?.unitAmount ? formatCurrency(price.unitAmount, price.currency) : "N/A";
+              const amount = price?.unitAmount ? formatCurrency(price.unitAmount, price.currency) : "0";
               const period = `${formatDate(subscription.currentPeriodStart)} - ${formatDate(subscription.currentPeriodEnd)}`;
 
               return (
@@ -84,6 +85,22 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
                   <TableCell className="font-medium">{formatPlanName(price)}</TableCell>
                   <TableCell className="text-muted-foreground text-sm">{period}</TableCell>
                   <TableCell className="text-right font-medium">{amount}</TableCell>
+                  <TableCell className="text-right">
+                    {(subscription.status === SubscriptionStatus.ACTIVE ||
+                      subscription.status === SubscriptionStatus.TRIALING) &&
+                      onChangePlan && (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onChangePlan(subscription);
+                          }}
+                        >
+                          Upgrade
+                        </Button>
+                      )}
+                  </TableCell>
                 </TableRow>
               );
             })}

package/src/features/billing/stripe-subscription/components/wizards/SubscriptionWizard.tsx

@@ -103,6 +103,12 @@ export function SubscriptionWizard({
             onBack={() => actions.goToStep("plan-selection")}
             onAddPaymentMethod={() => actions.goToStep("payment-method")}
             onConfirm={actions.confirmSubscription}
+            promotionCode={state.promotionCode}
+            isValidatingPromoCode={state.isValidatingPromoCode}
+            promoCodeError={state.promoCodeError}
+            onApplyPromoCode={actions.validatePromoCode}
+            onRemovePromoCode={actions.clearPromoCode}
+            isTrialUpgrade={state.isTrialSubscription}
           />
         )}
 

package/src/features/billing/stripe-subscription/components/wizards/WizardStepReview.tsx

@@ -5,6 +5,8 @@ import { Alert, AlertDescription, Button } from "../../../../../shadcnui";
 import { formatCurrency } from "../../../components/utils/currency";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 import { ProrationPreviewInterface } from "../../../stripe-invoice/data/stripe-invoice.interface";
+import { PromotionCodeValidationResult } from "../../../stripe-promotion-code";
+import { PromoCodeInput } from "../../../stripe-promotion-code/components/PromoCodeInput";
 import { StripeSubscriptionInterface } from "../../data";
 
 type WizardStepReviewProps = {
@@ -17,6 +19,14 @@ type WizardStepReviewProps = {
   onBack: () => void;
   onAddPaymentMethod: () => void;
   onConfirm: () => void;
+  // Promotion code props
+  promotionCode: PromotionCodeValidationResult | null;
+  isValidatingPromoCode: boolean;
+  promoCodeError: string | null;
+  onApplyPromoCode: (code: string) => void;
+  onRemovePromoCode: () => void;
+  // Trial upgrade flag
+  isTrialUpgrade: boolean;
 };
 
 export function WizardStepReview({
@@ -29,6 +39,12 @@ export function WizardStepReview({
   onBack,
   onAddPaymentMethod,
   onConfirm,
+  promotionCode,
+  isValidatingPromoCode,
+  promoCodeError,
+  onApplyPromoCode,
+  onRemovePromoCode,
+  isTrialUpgrade,
 }: WizardStepReviewProps) {
   if (!selectedPrice) {
     return (
@@ -44,6 +60,62 @@ export function WizardStepReview({
     return interval === "year" ? "yearly" : "monthly";
   };
 
+  // Calculate discounted price if promotion code is applied
+  const calculateDiscountedPrice = (): number | null => {
+    if (!promotionCode?.valid || !selectedPrice.unitAmount) return null;
+
+    const originalPrice = selectedPrice.unitAmount;
+
+    if (promotionCode.discountType === "percent_off" && promotionCode.discountValue) {
+      return originalPrice * (1 - promotionCode.discountValue / 100);
+    }
+
+    if (promotionCode.discountType === "amount_off" && promotionCode.discountValue) {
+      // amount_off is in cents, same as unitAmount
+      return Math.max(0, originalPrice - promotionCode.discountValue);
+    }
+
+    return null;
+  };
+
+  const discountedPrice = calculateDiscountedPrice();
+
+  // Calculate discounted immediate charge for proration preview
+  const calculateDiscountedImmediateCharge = (): number | null => {
+    if (!promotionCode?.valid || !prorationPreview?.immediateCharge) return null;
+
+    const originalCharge = prorationPreview.immediateCharge;
+
+    if (promotionCode.discountType === "percent_off" && promotionCode.discountValue) {
+      return originalCharge * (1 - promotionCode.discountValue / 100);
+    }
+
+    if (promotionCode.discountType === "amount_off" && promotionCode.discountValue) {
+      return Math.max(0, originalCharge - promotionCode.discountValue);
+    }
+
+    return null;
+  };
+
+  const discountedImmediateCharge = calculateDiscountedImmediateCharge();
+
+  // Format the discount description
+  const getDiscountDescription = (): string | null => {
+    if (!promotionCode?.valid) return null;
+
+    if (promotionCode.discountType === "percent_off" && promotionCode.discountValue) {
+      return `${promotionCode.discountValue}% off`;
+    }
+
+    if (promotionCode.discountType === "amount_off" && promotionCode.discountValue) {
+      return `${formatCurrency(promotionCode.discountValue, promotionCode.currency || selectedPrice.currency)} off`;
+    }
+
+    return null;
+  };
+
+  const discountDescription = getDiscountDescription();
+
   return (
     <div className="space-y-6">
       {/* Selected Plan Summary */}
@@ -55,9 +127,25 @@ export function WizardStepReview({
             {selectedPrice.nickname && <p className="text-sm text-muted-foreground">{selectedPrice.nickname}</p>}
           </div>
           <div className="text-right">
-            <p className="font-semibold text-lg">
-              {formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency)}
-            </p>
+            {discountedPrice !== null ? (
+              <>
+                <p className="text-sm text-muted-foreground line-through">
+                  {formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency)}
+                </p>
+                <p className="font-semibold text-lg text-green-600">
+                  {formatCurrency(discountedPrice, selectedPrice.currency)}
+                </p>
+                {discountDescription && (
+                  <span className="inline-block text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">
+                    {discountDescription}
+                  </span>
+                )}
+              </>
+            ) : (
+              <p className="font-semibold text-lg">
+                {formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency)}
+              </p>
+            )}
             <p className="text-sm text-muted-foreground">{formatInterval(selectedPrice)}</p>
           </div>
         </div>
@@ -65,18 +153,52 @@ export function WizardStepReview({
 
       {/* Proration Preview (for plan changes) */}
       {isChangingPlan && prorationPreview && (
-        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 space-y-2">
-          <h4 className="font-medium text-blue-800">Proration Summary</h4>
-          <p className="text-sm text-blue-700">Your next charge will be adjusted to account for the plan change.</p>
+        <div
+          className={`${isTrialUpgrade ? "bg-amber-50 border-amber-200" : "bg-blue-50 border-blue-200"} border rounded-lg p-4 space-y-2`}
+        >
+          <h4 className={`font-medium ${isTrialUpgrade ? "text-amber-800" : "text-blue-800"}`}>
+            {isTrialUpgrade ? "Trial Upgrade" : "Proration Summary"}
+          </h4>
+          <p className={`text-sm ${isTrialUpgrade ? "text-amber-700" : "text-blue-700"}`}>
+            {isTrialUpgrade
+              ? "Your trial will end immediately and you will be charged the full price."
+              : "Your next charge will be adjusted to account for the plan change."}
+          </p>
           <div className="flex justify-between text-sm">
-            <span className="text-blue-600">Amount due now:</span>
-            <span className="font-medium text-blue-800">
-              {formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency)}
+            <span className={`${isTrialUpgrade ? "text-amber-600" : "text-blue-600"}`}>
+              {isTrialUpgrade ? "Amount to charge now:" : "Amount due now:"}
+            </span>
+            <span className={`font-medium ${isTrialUpgrade ? "text-amber-800" : "text-blue-800"}`}>
+              {discountedImmediateCharge !== null ? (
+                <>
+                  <span className="line-through text-muted-foreground mr-2">
+                    {formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency)}
+                  </span>
+                  <span className="text-green-600">
+                    {formatCurrency(discountedImmediateCharge, prorationPreview.currency)}
+                  </span>
+                </>
+              ) : (
+                formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency)
+              )}
             </span>
           </div>
         </div>
       )}
 
+      {/* Promotion Code */}
+      <div className="border rounded-lg p-4 space-y-3">
+        <h4 className="font-medium">Promotion Code</h4>
+        <PromoCodeInput
+          appliedCode={promotionCode}
+          isValidating={isValidatingPromoCode}
+          error={promoCodeError}
+          onApply={onApplyPromoCode}
+          onRemove={onRemovePromoCode}
+          disabled={isProcessing}
+        />
+      </div>
+
       {/* Payment Method Status */}
       <div className="border rounded-lg p-4">
         <div className="flex justify-between items-center">

package/src/features/billing/stripe-subscription/data/stripe-subscription.interface.ts

@@ -48,6 +48,8 @@ export type StripeSubscriptionInput = {
   trialPeriodDays?: number;
   paymentMethodId?: string;
   metadata?: Record<string, any>;
+  // For CREATE and CHANGE-PLAN - optional promotion code
+  promotionCode?: string;
 };
 
 // ============================================================================

package/src/features/billing/stripe-subscription/data/stripe-subscription.ts

@@ -83,6 +83,9 @@ export class StripeSubscription extends AbstractApiData implements StripeSubscri
   }
 
   createJsonApi(data: StripeSubscriptionInput): any {
+    console.log("[StripeSubscription.createJsonApi] Input data:", JSON.stringify(data, null, 2));
+    console.log("[StripeSubscription.createJsonApi] promotionCode in input:", data.promotionCode);
+
     const response: any = {
       data: {
         type: Modules.StripeSubscription.name,
@@ -130,6 +133,11 @@ export class StripeSubscription extends AbstractApiData implements StripeSubscri
       response.data.attributes.metadata = data.metadata;
     }
 
+    if (data.promotionCode) {
+      response.data.attributes.promotionCode = data.promotionCode;
+    }
+
+    console.log("[StripeSubscription.createJsonApi] Final response:", JSON.stringify(response, null, 2));
     return response;
   }
 }

package/src/features/billing/stripe-subscription/hooks/useSubscriptionWizard.ts

@@ -5,8 +5,9 @@ import { v4 } from "uuid";
 import { StripeCustomerService } from "../../stripe-customer/data/stripe-customer.service";
 import { ProrationPreviewInterface } from "../../stripe-invoice/data/stripe-invoice.interface";
 import { StripePriceInterface } from "../../stripe-price/data/stripe-price.interface";
+import { PromotionCodeValidationResult, StripePromotionCodeService } from "../../stripe-promotion-code";
 import { BillingInterval } from "../components/widgets/IntervalToggle";
-import { StripeSubscriptionInterface, StripeSubscriptionService } from "../data";
+import { StripeSubscriptionInterface, StripeSubscriptionService, SubscriptionStatus } from "../data";
 
 export type WizardStep = "plan-selection" | "review" | "payment-method";
 
@@ -18,6 +19,12 @@ export type WizardState = {
   isProcessing: boolean;
   error: string | null;
   prorationPreview: ProrationPreviewInterface | null;
+  // Promotion code state
+  promotionCode: PromotionCodeValidationResult | null;
+  isValidatingPromoCode: boolean;
+  promoCodeError: string | null;
+  // Trial state
+  isTrialSubscription: boolean;
 };
 
 type WizardAction =
@@ -28,6 +35,10 @@ type WizardAction =
   | { type: "SET_PROCESSING"; isProcessing: boolean }
   | { type: "SET_ERROR"; error: string | null }
   | { type: "SET_PRORATION_PREVIEW"; preview: ProrationPreviewInterface | null }
+  | { type: "SET_PROMOTION_CODE"; code: PromotionCodeValidationResult | null }
+  | { type: "SET_VALIDATING_PROMO_CODE"; isValidating: boolean }
+  | { type: "SET_PROMO_CODE_ERROR"; error: string | null }
+  | { type: "SET_IS_TRIAL_SUBSCRIPTION"; isTrial: boolean }
   | { type: "RESET" };
 
 const initialState: WizardState = {
@@ -38,6 +49,10 @@ const initialState: WizardState = {
   isProcessing: false,
   error: null,
   prorationPreview: null,
+  promotionCode: null,
+  isValidatingPromoCode: false,
+  promoCodeError: null,
+  isTrialSubscription: false,
 };
 
 function wizardReducer(state: WizardState, action: WizardAction): WizardState {
@@ -56,6 +71,14 @@ function wizardReducer(state: WizardState, action: WizardAction): WizardState {
       return { ...state, error: action.error };
     case "SET_PRORATION_PREVIEW":
       return { ...state, prorationPreview: action.preview };
+    case "SET_PROMOTION_CODE":
+      return { ...state, promotionCode: action.code, promoCodeError: null };
+    case "SET_VALIDATING_PROMO_CODE":
+      return { ...state, isValidatingPromoCode: action.isValidating };
+    case "SET_PROMO_CODE_ERROR":
+      return { ...state, promoCodeError: action.error };
+    case "SET_IS_TRIAL_SUBSCRIPTION":
+      return { ...state, isTrialSubscription: action.isTrial };
     case "RESET":
       return initialState;
     default:
@@ -112,6 +135,23 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
       // Check payment method first
       await checkPaymentMethod();
 
+      // Check if current subscription is trial
+      const isTrialUpgrade = subscription?.status === SubscriptionStatus.TRIALING;
+      dispatch({ type: "SET_IS_TRIAL_SUBSCRIPTION", isTrial: isTrialUpgrade });
+
+      // For trial upgrades, require payment method before review
+      if (isTrialUpgrade && !state.hasPaymentMethod) {
+        const methods = await StripeCustomerService.listPaymentMethods();
+        if (methods.length === 0) {
+          dispatch({ type: "SET_STEP", step: "payment-method" });
+          dispatch({
+            type: "SET_ERROR",
+            error: "A payment method is required to upgrade from your trial.",
+          });
+          return;
+        }
+      }
+
       // If editing subscription, get proration preview
       if (subscription && state.selectedPrice.id !== subscription.price?.id) {
         const preview = await StripeSubscriptionService.getProrationPreview({
@@ -128,27 +168,37 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
     } finally {
       dispatch({ type: "SET_PROCESSING", isProcessing: false });
     }
-  }, [state.selectedPrice, subscription, checkPaymentMethod]);
+  }, [state.selectedPrice, state.hasPaymentMethod, subscription, checkPaymentMethod]);
 
   const confirmSubscription = useCallback(async () => {
     if (!state.selectedPrice) return;
 
+    console.log("[useSubscriptionWizard] confirmSubscription called");
+    console.log("[useSubscriptionWizard] state.promotionCode:", JSON.stringify(state.promotionCode, null, 2));
+    console.log("[useSubscriptionWizard] promotionCodeId to send:", state.promotionCode?.promotionCodeId);
+
     dispatch({ type: "SET_PROCESSING", isProcessing: true });
     dispatch({ type: "SET_ERROR", error: null });
 
     try {
       if (subscription) {
         // Change existing subscription
-        await StripeSubscriptionService.changePlan({
+        const changePlanParams = {
           id: subscription.id,
           newPriceId: state.selectedPrice.id,
-        });
+          promotionCode: state.promotionCode?.promotionCodeId,
+        };
+        console.log("[useSubscriptionWizard] changePlan params:", JSON.stringify(changePlanParams, null, 2));
+        await StripeSubscriptionService.changePlan(changePlanParams);
       } else {
         // Create new subscription
-        await StripeSubscriptionService.createSubscription({
+        const createParams = {
           id: v4(),
           priceId: state.selectedPrice.id,
-        });
+          promotionCode: state.promotionCode?.promotionCodeId,
+        };
+        console.log("[useSubscriptionWizard] createSubscription params:", JSON.stringify(createParams, null, 2));
+        await StripeSubscriptionService.createSubscription(createParams);
       }
 
       onSuccessRef.current();
@@ -176,7 +226,7 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
     } finally {
       dispatch({ type: "SET_PROCESSING", isProcessing: false });
     }
-  }, [state.selectedPrice, subscription]);
+  }, [state.selectedPrice, state.promotionCode, subscription]);
 
   const handlePaymentMethodSuccess = useCallback(async () => {
     dispatch({ type: "SET_HAS_PAYMENT_METHOD", hasMethod: true });
@@ -188,6 +238,38 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
     dispatch({ type: "RESET" });
   }, []);
 
+  const validatePromoCode = useCallback(
+    async (code: string) => {
+      dispatch({ type: "SET_VALIDATING_PROMO_CODE", isValidating: true });
+      dispatch({ type: "SET_PROMO_CODE_ERROR", error: null });
+
+      try {
+        const result = await StripePromotionCodeService.validatePromotionCode({
+          code,
+          stripePriceId: state.selectedPrice?.id,
+        });
+
+        if (result.valid) {
+          dispatch({ type: "SET_PROMOTION_CODE", code: result });
+        } else {
+          dispatch({ type: "SET_PROMO_CODE_ERROR", error: result.errorMessage || "Invalid promotion code" });
+        }
+      } catch (error: any) {
+        console.error("[useSubscriptionWizard] Promo code validation error:", error);
+        dispatch({ type: "SET_PROMO_CODE_ERROR", error: error?.message || "Failed to validate promotion code" });
+      } finally {
+        dispatch({ type: "SET_VALIDATING_PROMO_CODE", isValidating: false });
+      }
+    },
+    [state.selectedPrice?.id],
+  );
+
+  const clearPromoCode = useCallback(() => {
+    dispatch({ type: "SET_PROMOTION_CODE", code: null });
+    dispatch({ type: "SET_PROMO_CODE_ERROR", error: null });
+    dispatch({ type: "SET_ERROR", error: null });
+  }, []);
+
   const actions = useMemo(
     () => ({
       selectPrice,
@@ -198,6 +280,8 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
       handlePaymentMethodSuccess,
       checkPaymentMethod,
       reset,
+      validatePromoCode,
+      clearPromoCode,
     }),
     [
       selectPrice,
@@ -208,6 +292,8 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
       handlePaymentMethodSuccess,
       checkPaymentMethod,
       reset,
+      validatePromoCode,
+      clearPromoCode,
     ],
   );
 

package/src/features/index.ts

@@ -7,6 +7,7 @@ export * from "./billing/stripe-price";
 export * from "./billing/stripe-product";
 export * from "./billing/stripe-subscription";
 export * from "./billing/stripe-usage";
+export * from "./billing/stripe-promotion-code";
 export * from "./company";
 export * from "./content";
 export * from "./feature";