From b17e135cf67fda980e1793a1162018812502d888 Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Tue, 19 Oct 2021 19:59:20 +0200
Subject: [PATCH] reflect when user has cancelled his sub

---
 app/settings/components/billing/plans.tsx | 18 ++++++++----------
 app/settings/hooks/use-subscription.ts    |  6 +++++-
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/settings/components/billing/plans.tsx b/app/settings/components/billing/plans.tsx
index aa3ed15..a576fb3 100644
--- a/app/settings/components/billing/plans.tsx
+++ b/app/settings/components/billing/plans.tsx
@@ -5,17 +5,15 @@ import clsx from "clsx";
 import useSubscription from "../../hooks/use-subscription";
 
 export default function Plans() {
-	const { subscription, subscribe, changePlan } = useSubscription();
-	const hasSubscription = Boolean(subscription);
+	const { hasActiveSubscription, subscription, subscribe, changePlan } = useSubscription();
 
 	return (
 		<div className="mt-6 flex flex-row-reverse flex-wrap-reverse gap-x-4">
 			{pricing.tiers.map((tier) => {
-				const isCurrentTier =
-					!subscription?.paddlePlanId && tier.planId === -1
-						? true
-						: subscription?.paddlePlanId === tier.planId;
-				const cta = isCurrentTier ? "Current plan" : !!subscription ? `Switch to ${tier.title}` : "Subscribe";
+				const isFreeTier = tier.planId === -1;
+				const isCurrentTier = subscription?.paddlePlanId === tier.planId;
+				const isActiveTier = (!hasActiveSubscription && isFreeTier) || (hasActiveSubscription && isCurrentTier);
+				const cta = isActiveTier ? "Current plan" : !!subscription ? `Switch to ${tier.title}` : "Subscribe";
 
 				return (
 					<div
@@ -61,9 +59,9 @@ export default function Plans() {
 						</div>
 
 						<button
-							disabled={isCurrentTier}
+							disabled={isActiveTier}
 							onClick={() => {
-								if (hasSubscription) {
+								if (hasActiveSubscription) {
 									changePlan({ planId: tier.planId });
 									Panelbear.track(`Subscribe to ${tier.title}`);
 								} else {
@@ -72,7 +70,7 @@ export default function Plans() {
 								}
 							}}
 							className={clsx(
-								!isCurrentTier
+								!isActiveTier
 									? "bg-primary-500 text-white hover:bg-primary-600"
 									: "bg-primary-50 text-primary-700 cursor-not-allowed",
 								"mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium",
diff --git a/app/settings/hooks/use-subscription.ts b/app/settings/hooks/use-subscription.ts
index af2c4b7..d8cc555 100644
--- a/app/settings/hooks/use-subscription.ts
+++ b/app/settings/hooks/use-subscription.ts
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { useQuery, useMutation, useSession } from "blitz";
 
 import type { Subscription } from "db";
+import { SubscriptionStatus } from "db";
 import getSubscription from "../queries/get-subscription";
 import usePaddle from "./use-paddle";
 import useCurrentUser from "../../core/hooks/use-current-user";
@@ -34,7 +35,7 @@ export default function useSubscription({ initialData }: Params = {}) {
 	});
 
 	// cancel subscription polling when we get a new subscription
-	useEffect(() => setIsWaitingForSubChange(false), [subscription?.paddleSubscriptionId]);
+	useEffect(() => setIsWaitingForSubChange(false), [subscription?.paddleSubscriptionId, subscription?.status]);
 
 	useEffect(() => {
 		promise.current = new Promise((r) => (resolve.current = r));
@@ -103,8 +104,11 @@ export default function useSubscription({ initialData }: Params = {}) {
 		}
 	}
 
+	const hasActiveSubscription = Boolean(subscription && subscription?.status !== SubscriptionStatus.deleted);
+
 	return {
 		subscription,
+		hasActiveSubscription,
 		subscribe,
 		updatePaymentMethod,
 		cancelSubscription,