About
@@ -70,6 +51,65 @@ export default function AccountPage({ user }: { user: User }) {
);
}
+function UserCurrentSubscriptionStatus(user: User) {
+ const prettyPrintSubscriptionPlan = (userSubscriptionPlan: User['subscriptionPlan']) => {
+ const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
+ if (!userSubscriptionPlan) console.error('User subscription plan is missing');
+ if (userSubscriptionPlan === SubscriptionPlanId.HOBBY) {
+ return capitalizeFirstLetter(SubscriptionPlanId.HOBBY);
+ }
+ if (userSubscriptionPlan === SubscriptionPlanId.PRO) {
+ return capitalizeFirstLetter(SubscriptionPlanId.HOBBY);
+ }
+ };
+
+ const prettyPrintEndOfBillingPeriod = (date: Date | null) => {
+ if (!date) {
+ console.error('User date paid is missing');
+ return '.';
+ }
+ const oneMonthFromNow = new Date(date);
+ oneMonthFromNow.setMonth(oneMonthFromNow.getMonth() + 1);
+ return ': ' + oneMonthFromNow.toLocaleDateString();
+ };
+
+ function getSubscriptionMessage(subscriptionStatus: User['subscriptionStatus']) {
+ const plan = prettyPrintSubscriptionPlan(user.subscriptionPlan);
+ const endOfBillingPeriod = prettyPrintEndOfBillingPeriod(user.datePaid);
+
+ switch (subscriptionStatus) {
+ case 'active' satisfies SubscriptionStatusOptions:
+ return `${plan}`;
+ case 'past_due' satisfies SubscriptionStatusOptions:
+ return `Payment for your ${plan} plan is past due! Please update your subscription payment information.`;
+ case 'canceled' satisfies SubscriptionStatusOptions:
+ return `Your ${plan} plan subscription has been canceled, but remains active until the end of the current billing period${endOfBillingPeriod}`;
+ case 'deleted' satisfies SubscriptionStatusOptions:
+ return `Your previous subscription has been canceled and is no longer active.`;
+ }
+ }
+
+ if (user.subscriptionStatus) {
+ return (
+ <>
+
+ {getSubscriptionMessage(user.subscriptionStatus)}
+
+ {user.subscriptionStatus !== ('deleted' satisfies SubscriptionStatusOptions) ?
:
}
+
+ );
+ }
+
+ return (
+ <>
+
+ Credits remaining: {user.credits}
+
+
+
+ );
+}
+
function BuyMoreButton() {
return (
@@ -87,13 +127,16 @@ function CustomerPortalButton() {
const customerPortalUrl = schema.parse(import.meta.env.REACT_APP_STRIPE_CUSTOMER_PORTAL);
window.open(customerPortalUrl, '_blank');
} catch (err) {
- console.error(err)
+ console.error(err);
}
};
return (
-
From 77f05172b41e8c86cb4e08fc235142a56887ef91 Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Thu, 4 Jul 2024 18:14:52 +0200
Subject: [PATCH 09/26] address filips pro effective typescripting and stuff
---
template/app/src/client/app/AccountPage.tsx | 13 ++--
template/app/src/client/app/PricingPage.tsx | 59 ++++++++-------
template/app/src/server/actions.ts | 53 ++++++--------
template/app/src/server/scripts/dbSeeds.ts | 8 +--
.../app/src/server/stripe/paymentPlans.ts | 38 ++++++++++
template/app/src/server/webhooks/stripe.ts | 41 ++++++++---
.../server/webhooks/stripeEventHandlers.ts | 72 +++++++++----------
...mentDetails.ts => stripePaymentDetails.ts} | 0
template/app/src/shared/constants.ts | 15 ++--
template/app/src/shared/types.ts | 5 +-
10 files changed, 180 insertions(+), 124 deletions(-)
create mode 100644 template/app/src/server/stripe/paymentPlans.ts
rename template/app/src/server/webhooks/{userStripePaymentDetails.ts => stripePaymentDetails.ts} (100%)
diff --git a/template/app/src/client/app/AccountPage.tsx b/template/app/src/client/app/AccountPage.tsx
index 129f7f29..9bf42a8b 100644
--- a/template/app/src/client/app/AccountPage.tsx
+++ b/template/app/src/client/app/AccountPage.tsx
@@ -1,6 +1,6 @@
import type { User } from 'wasp/entities';
import type { SubscriptionStatusOptions } from '../../shared/types';
-import { SubscriptionPlanId } from '../../shared/constants';
+import { SubscriptionPlanId } from '../../shared/constants';
import { Link } from 'wasp/client/router';
import { logout } from 'wasp/client/auth';
import { z } from 'zod';
@@ -55,11 +55,11 @@ function UserCurrentSubscriptionStatus(user: User) {
const prettyPrintSubscriptionPlan = (userSubscriptionPlan: User['subscriptionPlan']) => {
const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
if (!userSubscriptionPlan) console.error('User subscription plan is missing');
- if (userSubscriptionPlan === SubscriptionPlanId.HOBBY) {
- return capitalizeFirstLetter(SubscriptionPlanId.HOBBY);
+ if (userSubscriptionPlan === SubscriptionPlanId.Hobby) {
+ return capitalizeFirstLetter(SubscriptionPlanId.Hobby);
}
- if (userSubscriptionPlan === SubscriptionPlanId.PRO) {
- return capitalizeFirstLetter(SubscriptionPlanId.HOBBY);
+ if (userSubscriptionPlan === SubscriptionPlanId.Pro) {
+ return capitalizeFirstLetter(SubscriptionPlanId.Hobby);
}
};
@@ -77,12 +77,13 @@ function UserCurrentSubscriptionStatus(user: User) {
const plan = prettyPrintSubscriptionPlan(user.subscriptionPlan);
const endOfBillingPeriod = prettyPrintEndOfBillingPeriod(user.datePaid);
+ // TODO: refactor this as a Record
instead of a switch statement?
switch (subscriptionStatus) {
case 'active' satisfies SubscriptionStatusOptions:
return `${plan}`;
case 'past_due' satisfies SubscriptionStatusOptions:
return `Payment for your ${plan} plan is past due! Please update your subscription payment information.`;
- case 'canceled' satisfies SubscriptionStatusOptions:
+ case 'cancel_at_period_end' satisfies SubscriptionStatusOptions:
return `Your ${plan} plan subscription has been canceled, but remains active until the end of the current billing period${endOfBillingPeriod}`;
case 'deleted' satisfies SubscriptionStatusOptions:
return `Your previous subscription has been canceled and is no longer active.`;
diff --git a/template/app/src/client/app/PricingPage.tsx b/template/app/src/client/app/PricingPage.tsx
index ceb969e1..7402ceae 100644
--- a/template/app/src/client/app/PricingPage.tsx
+++ b/template/app/src/client/app/PricingPage.tsx
@@ -1,41 +1,44 @@
import { useAuth } from 'wasp/client/auth';
import { stripePayment } from 'wasp/client/operations';
-import { type PaymentPlanId } from '../../shared/types';
-import { CreditsPlanId, SubscriptionPlanId } from '../../shared/constants';
+import { PaymentPlanId } from '../../shared/constants';
import { AiFillCheckCircle } from 'react-icons/ai';
import { useState } from 'react';
import { useHistory } from 'react-router-dom';
import { cn } from '../../shared/utils';
import { z } from 'zod';
+const bestDealPaymentPlanId: PaymentPlanId = PaymentPlanId.SubscriptionPro;
+
type PaymentPlan = {
name: string;
id: PaymentPlanId;
+ mode: 'subscription' | 'payment';
price: string;
description: string;
features: string[];
- bestDeal?: boolean;
};
-export const paymentPlans: PaymentPlan[] = [
+export const paymentPlanArr: PaymentPlan[] = [
{
name: 'Hobby',
- id: SubscriptionPlanId.HOBBY,
+ id: PaymentPlanId.SubscriptionHobby,
+ mode: 'subscription',
price: '$9.99',
description: 'All you need to get started',
features: ['Limited monthly usage', 'Basic support'],
},
{
name: 'Pro',
- id: SubscriptionPlanId.PRO,
+ id: PaymentPlanId.SubscriptionPro,
+ mode: 'subscription',
price: '$19.99',
description: 'Our most popular plan',
features: ['Unlimited monthly usage', 'Priority customer support'],
- bestDeal: true,
},
{
name: '10 Credits',
- id: CreditsPlanId.TEN_CREDITS,
+ id: PaymentPlanId.Credits10,
+ mode: 'payment',
price: '$9.99',
description: 'One-time purchase of 10 credits for your account',
features: ['Use credits for e.g. OpenAI API calls', 'No expiration date'],
@@ -96,18 +99,18 @@ const PricingPage = () => {
4242 4242 4242 4242 4242
- {paymentPlans.map((tier) => (
+ {paymentPlanArr.map((plan) => (
- {tier.bestDeal && (
+ {plan.id === bestDealPaymentPlanId && (
{
)}
-
- {tier.name}
+
+ {plan.name}
-
{tier.description}
+
{plan.description}
- {tier.price}
+ {plan.price}
- {tier.id !== CreditsPlanId.TEN_CREDITS && '/month'}
+ {plan.mode === 'subscription' && '/month'}
- {tier.features.map((feature) => (
+ {plan.features.map((feature) => (
-
{feature}
@@ -146,8 +149,10 @@ const PricingPage = () => {
className={cn(
'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-yellow-400',
{
- 'bg-yellow-500 text-white hover:text-white shadow-sm hover:bg-yellow-400': tier.bestDeal,
- 'text-gray-600 ring-1 ring-inset ring-purple-200 hover:ring-purple-400': !tier.bestDeal,
+ 'bg-yellow-500 text-white hover:text-white shadow-sm hover:bg-yellow-400':
+ plan.id === bestDealPaymentPlanId,
+ 'text-gray-600 ring-1 ring-inset ring-purple-200 hover:ring-purple-400':
+ plan.id !== bestDealPaymentPlanId,
}
)}
>
@@ -155,15 +160,17 @@ const PricingPage = () => {
) : (