let user know when his cancelled sub is going to expire

app/settings/api/queue/subscription-cancelled.ts

@@ -4,12 +4,13 @@ import type { PaddleSdkSubscriptionCancelledEvent } from "@devoxa/paddle-sdk";
 
 import db from "db";
 import appLogger from "integrations/logger";
+import type { Metadata } from "integrations/paddle";
 import { translateSubscriptionStatus } from "integrations/paddle";
 
 const logger = appLogger.child({ queue: "subscription-cancelled" });
 
 type Payload = {
-	event: PaddleSdkSubscriptionCancelledEvent<{ organizationId: string }>;
+	event: PaddleSdkSubscriptionCancelledEvent<Metadata>;
 };
 
 export const subscriptionCancelledQueue = Queue<Payload>("api/queue/subscription-cancelled", async ({ event }) => {
@@ -35,6 +36,7 @@ export const subscriptionCancelledQueue = Queue<Payload>("api/queue/subscription
 			lastEventTime,
 			currency: event.currency,
 			unitPrice: event.unitPrice,
+			cancellationEffectiveDate: event.cancelledFrom,
 		},
 	});
 });

app/settings/api/queue/subscription-created.ts

@@ -5,12 +5,13 @@ import type { PaddleSdkSubscriptionCreatedEvent } from "@devoxa/paddle-sdk";
 import db, { MembershipRole } from "db";
 import appLogger from "integrations/logger";
 import { sendEmail } from "integrations/ses";
+import type { Metadata } from "integrations/paddle";
 import { translateSubscriptionStatus } from "integrations/paddle";
 
 const logger = appLogger.child({ queue: "subscription-created" });
 
 type Payload = {
-	event: PaddleSdkSubscriptionCreatedEvent<{ organizationId: string }>;
+	event: PaddleSdkSubscriptionCreatedEvent<Metadata>;
 };
 
 export const subscriptionCreatedQueue = Queue<Payload>("api/queue/subscription-created", async ({ event }) => {

app/settings/pages/settings/billing.tsx

@@ -24,7 +24,8 @@ const Billing: BlitzPage<Props> = (props) => {
 	TODO: I want to be able to
 		- upgrade to yearly
 		- downgrade to monthly
-		- resubscribe (after pause/cancel for example) (message like "your subscription expired, would you like to renew ?")
+		- know how much time I have left until my cancelled subscription runs out --- DONE
+		- resubscribe (message like "your subscription expired, would you like to renew ?")
 	*/
 
 	useRequireOnboarding();
@@ -37,8 +38,14 @@ const Billing: BlitzPage<Props> = (props) => {
 		<>
 			{subscription ? (
 				<SettingsSection>
+					{subscription.status === SubscriptionStatus.deleted ? (
+						<p>
+							Your {subscription.paddlePlanId} subscription is cancelled and will expire on{" "}
+							{subscription.cancellationEffectiveDate!.toLocaleDateString()}.
+						</p>
+					) : (
+						<>
 							<p>Current plan: {subscription.paddlePlanId}</p>
-
 							<PaddleLink
 								onClick={() => updatePaymentMethod({ updateUrl: subscription.updateUrl })}
 								text="Update payment method"
@@ -47,6 +54,8 @@ const Billing: BlitzPage<Props> = (props) => {
 								onClick={() => cancelSubscription({ cancelUrl: subscription.cancelUrl })}
 								text="Cancel subscription"
 							/>
+						</>
+					)}
 				</SettingsSection>
 			) : null}
 

app/settings/queries/get-subscription.ts

@@ -8,7 +8,7 @@ export default resolver.pipe(resolver.authorize(), async (_ = null, { session })
 	return db.subscription.findFirst({
 		where: {
 			organizationId: session.orgId,
-			status: { not: SubscriptionStatus.deleted },
+			OR: [{ status: { not: SubscriptionStatus.deleted } }, { cancellationEffectiveDate: { gt: new Date() } }],
 		},
 	});
 });

db/migrations/20211003184129_add_subscription_cancellation_effective_date/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Subscription" ADD COLUMN     "cancellationEffectiveDate" DATE;

db/schema.prisma

@@ -49,6 +49,7 @@ model Subscription {
   unitPrice                 Int
   nextBillDate              DateTime           @db.Date
   lastEventTime             DateTime           @db.Timestamp
+  cancellationEffectiveDate DateTime?          @db.Date
 
   organization   Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)
   organizationId String

integrations/paddle.ts

@@ -24,7 +24,7 @@ export const paddleSdk = new PaddleSdk({
 export type Metadata = { organizationId: string };
 
 export function translateSubscriptionStatus(
-	status: PaddleSdkSubscriptionCreatedEvent<unknown>["status"],
+	status: PaddleSdkSubscriptionCreatedEvent<Metadata>["status"],
 ): SubscriptionStatus {
 	switch (status) {
 		case PaddleSdkSubscriptionStatus.ACTIVE: