From bca848bdb812b1872b027b05eec772141c1d5883 Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Sun, 3 Oct 2021 18:20:59 +0200
Subject: [PATCH] poll for subscription change instead of fully reloading the
 page

---
 app/settings/hooks/use-paddle.ts       |  8 +-------
 app/settings/hooks/use-subscription.ts | 22 +++++++++++++++++-----
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/settings/hooks/use-paddle.ts b/app/settings/hooks/use-paddle.ts
index bcf0de8..0c35cbb 100644
--- a/app/settings/hooks/use-paddle.ts
+++ b/app/settings/hooks/use-paddle.ts
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useRouter, getConfig } from "blitz";
+import { getConfig } from "blitz";
 
 declare global {
 	interface Window {
@@ -12,8 +12,6 @@ const { publicRuntimeConfig } = getConfig();
 const vendor = parseInt(publicRuntimeConfig.paddle.vendorId, 10);
 
 export default function usePaddle({ eventCallback }: { eventCallback: (data: any) => void }) {
-	const router = useRouter();
-
 	useEffect(() => {
 		if (!window.Paddle) {
 			const script = document.createElement("script");
@@ -22,10 +20,6 @@ export default function usePaddle({ eventCallback }: { eventCallback: (data: any
 					vendor,
 					eventCallback(data: any) {
 						eventCallback(data);
-
-						if (data.event === "Checkout.Complete") {
-							setTimeout(() => router.reload(), 1000);
-						}
 					},
 				});
 			};
diff --git a/app/settings/hooks/use-subscription.ts b/app/settings/hooks/use-subscription.ts
index ece4264..b45370a 100644
--- a/app/settings/hooks/use-subscription.ts
+++ b/app/settings/hooks/use-subscription.ts
@@ -1,5 +1,5 @@
-import { useEffect, useRef } from "react";
-import { useQuery, useMutation, useRouter, useSession } from "blitz";
+import { useEffect, useRef, useState } from "react";
+import { useQuery, useMutation, useSession } from "blitz";
 
 import type { Subscription } from "db";
 import getSubscription from "../queries/get-subscription";
@@ -15,11 +15,14 @@ type Params = {
 export default function useSubscription({ initialData }: Params = {}) {
 	const session = useSession();
 	const { user } = useCurrentUser();
-	const [subscription] = useQuery(getSubscription, null, { initialData });
+	const [isWaitingForSubChange, setIsWaitingForSubChange] = useState(false);
+	const [subscription] = useQuery(getSubscription, null, {
+		initialData,
+		refetchInterval: isWaitingForSubChange ? 1500 : false,
+	});
 	const [payments] = useQuery(getPayments, null);
 	const [updateSubscriptionMutation] = useMutation(updateSubscription);
 
-	const router = useRouter();
 	const resolve = useRef<() => void>();
 	const promise = useRef<Promise<void>>();
 
@@ -32,6 +35,9 @@ export default function useSubscription({ initialData }: Params = {}) {
 		},
 	});
 
+	// cancel subscription polling when we get a new subscription
+	useEffect(() => setIsWaitingForSubChange(false), [subscription?.paddleSubscriptionId]);
+
 	useEffect(() => {
 		promise.current = new Promise((r) => (resolve.current = r));
 	}, []);
@@ -60,6 +66,7 @@ export default function useSubscription({ initialData }: Params = {}) {
 		}
 
 		Paddle.Checkout.open(checkoutOpenParams);
+		setIsWaitingForSubChange(true);
 
 		return promise.current;
 	}
@@ -68,6 +75,7 @@ export default function useSubscription({ initialData }: Params = {}) {
 		const checkoutOpenParams = { override: updateUrl };
 
 		Paddle.Checkout.open(checkoutOpenParams);
+		setIsWaitingForSubChange(true);
 
 		return promise.current;
 	}
@@ -76,6 +84,7 @@ export default function useSubscription({ initialData }: Params = {}) {
 		const checkoutOpenParams = { override: cancelUrl };
 
 		Paddle.Checkout.open(checkoutOpenParams);
+		setIsWaitingForSubChange(true);
 
 		return promise.current;
 	}
@@ -85,9 +94,12 @@ export default function useSubscription({ initialData }: Params = {}) {
 	};
 
 	async function changePlan({ planId }: ChangePlanParams) {
+		if (planId === -1) {
+			return cancelSubscription({ cancelUrl: subscription!.cancelUrl });
+		}
+
 		try {
 			await updateSubscriptionMutation({ planId });
-			router.reload();
 		} catch (error) {
 			console.log("error", error);
 		}