bases de la billing page

app/settings/hooks/use-paddle.ts

@@ -0,0 +1,44 @@
+import { useEffect } from "react";
+import { useRouter, getConfig } from "blitz";
+
+declare global {
+	interface Window {
+		Paddle: any;
+	}
+}
+
+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");
+			script.onload = () => {
+				window.Paddle.Setup({
+					vendor,
+					eventCallback(data: any) {
+						eventCallback(data);
+
+						if (data.event === "Checkout.Complete") {
+							setTimeout(() => router.reload(), 1000);
+						}
+					},
+				});
+			};
+			script.src = "https://cdn.paddle.com/paddle/paddle.js";
+
+			document.head.appendChild(script);
+			return;
+		}
+	}, []);
+
+	if (typeof window === "undefined") {
+		return { Paddle: null };
+	}
+
+	return { Paddle: window.Paddle };
+}

app/settings/hooks/use-subscription.ts

@@ -0,0 +1,96 @@
+import { useEffect, useRef } from "react";
+import { useQuery, useMutation, useRouter, useSession } from "blitz";
+
+import getSubscription from "../queries/get-subscription";
+import usePaddle from "./use-paddle";
+import useCurrentUser from "../../core/hooks/use-current-user";
+import updateSubscription from "../mutations/update-subscription";
+
+export default function useSubscription() {
+	const session = useSession();
+	const { user } = useCurrentUser();
+	const [subscription] = useQuery(getSubscription, null, { enabled: Boolean(session.orgId) });
+	const [updateSubscriptionMutation] = useMutation(updateSubscription);
+
+	const router = useRouter();
+	const resolve = useRef<() => void>();
+	const promise = useRef<Promise<void>>();
+
+	const { Paddle } = usePaddle({
+		eventCallback(data) {
+			if (["Checkout.Close", "Checkout.Complete"].includes(data.event)) {
+				resolve.current!();
+				promise.current = new Promise((r) => (resolve.current = r));
+			}
+		},
+	});
+
+	useEffect(() => {
+		promise.current = new Promise((r) => (resolve.current = r));
+	}, []);
+
+	type BuyParams = {
+		planId: string;
+		coupon?: string;
+	};
+
+	async function subscribe(params: BuyParams) {
+		if (!user || !session.orgId) {
+			return;
+		}
+
+		const { planId, coupon } = params;
+		const checkoutOpenParams = {
+			email: user.email,
+			product: planId,
+			allowQuantity: false,
+			passthrough: JSON.stringify({ orgId: session.orgId }),
+			coupon: "",
+		};
+
+		if (coupon) {
+			checkoutOpenParams.coupon = coupon;
+		}
+
+		Paddle.Checkout.open(checkoutOpenParams);
+
+		return promise.current;
+	}
+
+	async function updatePaymentMethod({ updateUrl }: { updateUrl: string }) {
+		const checkoutOpenParams = { override: updateUrl };
+
+		Paddle.Checkout.open(checkoutOpenParams);
+
+		return promise.current;
+	}
+
+	async function cancelSubscription({ cancelUrl }: { cancelUrl: string }) {
+		const checkoutOpenParams = { override: cancelUrl };
+
+		Paddle.Checkout.open(checkoutOpenParams);
+
+		return promise.current;
+	}
+
+	type ChangePlanParams = {
+		planId: string;
+	};
+
+	async function changePlan({ planId }: ChangePlanParams) {
+		try {
+			await updateSubscriptionMutation({ planId });
+			router.reload();
+		} catch (error) {
+			console.log("error", error);
+		}
+	}
+
+	return {
+		subscription,
+		subscribe,
+		updatePaymentMethod,
+		cancelSubscription,
+		changePlan,
+	};
+}