leaflet.pub
a tool for shared writing and social publishing
awarm.space
1"use client";
2
3import { useSearchParams, useRouter, usePathname } from "next/navigation";
4import { useEffect, useState } from "react";
5import { useIdentityData } from "./IdentityProvider";
6import { Modal } from "./Modal";
7
8export function SubscriptionSuccessModal() {
9 let searchParams = useSearchParams();
10 let router = useRouter();
11 let pathname = usePathname();
12 let { identity, mutate } = useIdentityData();
13 let [open, setOpen] = useState(false);
14 let [loading, setLoading] = useState(true);
15
16 let isUpgradeSuccess = searchParams.get("upgrade") === "success";
17
18 useEffect(() => {
19 if (!isUpgradeSuccess) return;
20 setOpen(true);
21 setLoading(true);
22 mutate().then(() => setLoading(false));
23 }, [isUpgradeSuccess]);
24
25 function handleOpenChange(next: boolean) {
26 setOpen(next);
27 if (!next) {
28 let params = new URLSearchParams(searchParams.toString());
29 params.delete("upgrade");
30 let qs = params.toString();
31 router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
32 }
33 }
34
35 if (!isUpgradeSuccess && !open) return null;
36
37 return (
38 <Modal
39 open={open}
40 onOpenChange={handleOpenChange}
41 trigger={<span />}
42 title="Welcome to Pro"
43 className="w-80"
44 >
45 {loading ? (
46 <div className="flex flex-col items-center gap-3 py-4">
47 <div className="h-5 w-5 animate-spin rounded-full border-2 border-border border-t-accent-contrast" />
48 <p className="text-secondary text-sm">
49 Activating your subscription...
50 </p>
51 </div>
52 ) : (
53 <div className="flex flex-col gap-2 py-2">
54 <p className="text-secondary text-sm">
55 Your Pro subscription is active. Thanks for supporting Leaflet!
56 </p>
57 </div>
58 )}
59 </Modal>
60 );
61}