From cd38e9105db7e604712e4992d57ab2ca81d5b325 Mon Sep 17 00:00:00 2001 From: Luke Vella Date: Thu, 24 Apr 2025 10:35:23 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Use=20user=20tier=20to=20d?= =?UTF-8?q?etermine=20subscription=20status=20(#1686)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/forms/poll-settings.tsx | 7 ++- apps/web/src/components/poll/manage-poll.tsx | 8 +-- apps/web/src/components/user-dropdown.tsx | 5 -- apps/web/src/components/user-provider.tsx | 4 +- apps/web/src/contexts/plan.tsx | 56 ------------------- 5 files changed, 9 insertions(+), 71 deletions(-) delete mode 100644 apps/web/src/contexts/plan.tsx diff --git a/apps/web/src/components/forms/poll-settings.tsx b/apps/web/src/components/forms/poll-settings.tsx index 97f4baecc..96df0d654 100644 --- a/apps/web/src/components/forms/poll-settings.tsx +++ b/apps/web/src/components/forms/poll-settings.tsx @@ -17,7 +17,8 @@ import { Trans } from "react-i18next"; import { PayWallDialog } from "@/components/pay-wall-dialog"; import { ProBadge } from "@/components/pro-badge"; -import { usePlan } from "@/contexts/plan"; + +import { useUser } from "../user-provider"; export type PollSettingsFormData = { requireParticipantEmail: boolean; @@ -66,9 +67,9 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => { const form = useFormContext(); const posthog = usePostHog(); const paywallDialog = useDialog(); - const plan = usePlan(); + const { user } = useUser(); - const isFree = plan === "free"; + const isFree = user.tier !== "pro"; return ( <> diff --git a/apps/web/src/components/poll/manage-poll.tsx b/apps/web/src/components/poll/manage-poll.tsx index ed15bd4d7..644e57468 100644 --- a/apps/web/src/components/poll/manage-poll.tsx +++ b/apps/web/src/components/poll/manage-poll.tsx @@ -32,10 +32,10 @@ import { PayWallDialog } from "@/components/pay-wall-dialog"; import { FinalizePollDialog } from "@/components/poll/manage-poll/finalize-poll-dialog"; import { ProBadge } from "@/components/pro-badge"; import { Trans } from "@/components/trans"; -import { usePlan } from "@/contexts/plan"; import { usePoll } from "@/contexts/poll"; import { trpc } from "@/trpc/client"; +import { useUser } from "../user-provider"; import { DeletePollDialog } from "./manage-poll/delete-poll-dialog"; import { useCsvExporter } from "./manage-poll/use-csv-exporter"; @@ -125,6 +125,7 @@ const ManagePoll: React.FunctionComponent<{ }> = ({ disabled }) => { const poll = usePoll(); const queryClient = trpc.useUtils(); + const { user } = useUser(); const reopen = trpc.polls.reopen.useMutation({ onMutate: () => { queryClient.polls.get.setData({ urlId: poll.id }, (oldPoll) => { @@ -143,7 +144,6 @@ const ManagePoll: React.FunctionComponent<{ const duplicateDialog = useDialog(); const finalizeDialog = useDialog(); const paywallDialog = useDialog(); - const plan = usePlan(); const posthog = usePostHog(); const { exportToCsv } = useCsvExporter(); @@ -203,7 +203,7 @@ const ManagePoll: React.FunctionComponent<{ { - if (plan === "free") { + if (user.tier !== "pro") { paywallDialog.trigger(); posthog?.capture("trigger paywall", { poll_id: poll.id, @@ -233,7 +233,7 @@ const ManagePoll: React.FunctionComponent<{ { - if (plan === "free") { + if (user.tier !== "pro") { paywallDialog.trigger(); posthog?.capture("trigger paywall", { poll_id: poll.id, diff --git a/apps/web/src/components/user-dropdown.tsx b/apps/web/src/components/user-dropdown.tsx index e6163037b..180551b43 100644 --- a/apps/web/src/components/user-dropdown.tsx +++ b/apps/web/src/components/user-dropdown.tsx @@ -31,14 +31,12 @@ import { OptimizedAvatarImage } from "@/components/optimized-avatar-image"; import { RegisterLink } from "@/components/register-link"; import { Trans } from "@/components/trans"; import { IfCloudHosted, IfSelfHosted } from "@/contexts/environment"; -import { Plan, usePlan } from "@/contexts/plan"; import { isFeedbackEnabled } from "@/utils/constants"; import { IfAuthenticated, IfGuest, useUser } from "./user-provider"; export const UserDropdown = ({ className }: { className?: string }) => { const { user, logout } = useUser(); - usePlan(); // prefetch plan data return ( { ) : null} -
- -
diff --git a/apps/web/src/components/user-provider.tsx b/apps/web/src/components/user-provider.tsx index 945ba9092..f7a3eddd6 100644 --- a/apps/web/src/components/user-provider.tsx +++ b/apps/web/src/components/user-provider.tsx @@ -4,7 +4,6 @@ import { useRouter } from "next/navigation"; import { signIn, signOut } from "next-auth/react"; import React from "react"; -import { useSubscription } from "@/contexts/plan"; import { useTranslation } from "@/i18n/client"; import { isOwner } from "@/utils/permissions"; @@ -77,13 +76,12 @@ export const UserProvider = ({ children?: React.ReactNode; user?: RegisteredUser | GuestUser; }) => { - const subscription = useSubscription(); const { t } = useTranslation(); const router = useRouter(); const posthog = usePostHog(); const isGuest = !user || user.tier === "guest"; - const tier = isGuest ? "guest" : subscription?.active ? "pro" : "hobby"; + const tier = isGuest ? "guest" : user.tier; React.useEffect(() => { if (user) { diff --git a/apps/web/src/contexts/plan.tsx b/apps/web/src/contexts/plan.tsx deleted file mode 100644 index ae7b06a71..000000000 --- a/apps/web/src/contexts/plan.tsx +++ /dev/null @@ -1,56 +0,0 @@ -"use client"; -import { Badge } from "@rallly/ui/badge"; -import React from "react"; - -import { ProBadge } from "@/components/pro-badge"; -import { Trans } from "@/components/trans"; -import { trpc } from "@/trpc/client"; -import { isSelfHosted } from "@/utils/constants"; - -export const useSubscription = () => { - const { data } = trpc.user.subscription.useQuery(undefined, { - enabled: !isSelfHosted, - }); - - if (isSelfHosted) { - return { - active: true, - }; - } - - return data; -}; - -export const usePlan = () => { - const data = useSubscription(); - - const isPaid = data?.active === true; - - return isPaid ? "paid" : "free"; -}; - -export const IfSubscribed = ({ children }: React.PropsWithChildren) => { - const plan = usePlan(); - - return plan === "paid" ? <>{children} : null; -}; - -export const IfFreeUser = ({ children }: React.PropsWithChildren) => { - const subscription = useSubscription(); - - return subscription?.active === false ? <>{children} : null; -}; - -export const Plan = () => { - const plan = usePlan(); - - if (plan === "paid") { - return ; - } - - return ( - - - - ); -};