mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

poll for subscription change instead of fully reloading the page

Browse Source
This commit is contained in:
m5r 2021-10-03 18:20:59 +02:00
parent 3a3d526e77
commit bca848bdb8
2 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/settings/hooks/use-paddle.ts
View File

@ -1,5 +1,5 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useRouter, getConfig } from "blitz"; import { getConfig } from "blitz";
declare global { declare global {
interface Window { interface Window {
@ -12,8 +12,6 @@ const { publicRuntimeConfig } = getConfig();
const vendor = parseInt(publicRuntimeConfig.paddle.vendorId, 10); const vendor = parseInt(publicRuntimeConfig.paddle.vendorId, 10);
export default function usePaddle({ eventCallback }: { eventCallback: (data: any) => void }) { export default function usePaddle({ eventCallback }: { eventCallback: (data: any) => void }) {
const router = useRouter();
useEffect(() => { useEffect(() => {
if (!window.Paddle) { if (!window.Paddle) {
const script = document.createElement("script"); const script = document.createElement("script");
@ -22,10 +20,6 @@ export default function usePaddle({ eventCallback }: { eventCallback: (data: any
vendor, vendor,
eventCallback(data: any) { eventCallback(data: any) {
eventCallback(data); eventCallback(data);
if (data.event === "Checkout.Complete") {
setTimeout(() => router.reload(), 1000);
}
}, },
}); });
}; };

22
app/settings/hooks/use-subscription.ts
View File

@ -1,5 +1,5 @@
import { useEffect, useRef } from "react"; import { useEffect, useRef, useState } from "react";
import { useQuery, useMutation, useRouter, useSession } from "blitz"; import { useQuery, useMutation, useSession } from "blitz";
import type { Subscription } from "db"; import type { Subscription } from "db";
import getSubscription from "../queries/get-subscription"; import getSubscription from "../queries/get-subscription";
@ -15,11 +15,14 @@ type Params = {
export default function useSubscription({ initialData }: Params = {}) { export default function useSubscription({ initialData }: Params = {}) {
const session = useSession(); const session = useSession();
const { user } = useCurrentUser(); 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 [payments] = useQuery(getPayments, null);
const [updateSubscriptionMutation] = useMutation(updateSubscription); const [updateSubscriptionMutation] = useMutation(updateSubscription);
const router = useRouter();
const resolve = useRef<() => void>(); const resolve = useRef<() => void>();
const promise = useRef<Promise<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(() => { useEffect(() => {
promise.current = new Promise((r) => (resolve.current = r)); promise.current = new Promise((r) => (resolve.current = r));
}, []); }, []);
@ -60,6 +66,7 @@ export default function useSubscription({ initialData }: Params = {}) {
} }
Paddle.Checkout.open(checkoutOpenParams); Paddle.Checkout.open(checkoutOpenParams);
setIsWaitingForSubChange(true);
return promise.current; return promise.current;
} }
@ -68,6 +75,7 @@ export default function useSubscription({ initialData }: Params = {}) {
const checkoutOpenParams = { override: updateUrl }; const checkoutOpenParams = { override: updateUrl };
Paddle.Checkout.open(checkoutOpenParams); Paddle.Checkout.open(checkoutOpenParams);
setIsWaitingForSubChange(true);
return promise.current; return promise.current;
} }
@ -76,6 +84,7 @@ export default function useSubscription({ initialData }: Params = {}) {
const checkoutOpenParams = { override: cancelUrl }; const checkoutOpenParams = { override: cancelUrl };
Paddle.Checkout.open(checkoutOpenParams); Paddle.Checkout.open(checkoutOpenParams);
setIsWaitingForSubChange(true);
return promise.current; return promise.current;
} }
@ -85,9 +94,12 @@ export default function useSubscription({ initialData }: Params = {}) {
}; };
async function changePlan({ planId }: ChangePlanParams) { async function changePlan({ planId }: ChangePlanParams) {
if (planId === -1) {
return cancelSubscription({ cancelUrl: subscription!.cancelUrl });
}
try { try {
await updateSubscriptionMutation({ planId }); await updateSubscriptionMutation({ planId });
router.reload();
} catch (error) { } catch (error) {
console.log("error", error); console.log("error", error);
} }