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

reflect when user has cancelled his sub

Browse Source
This commit is contained in:
m5r 2021-10-19 19:59:20 +02:00
parent 931384b468
commit b17e135cf6
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/settings/components/billing/plans.tsx
View File

@ -5,17 +5,15 @@ import clsx from "clsx";
import useSubscription from "../../hooks/use-subscription"; import useSubscription from "../../hooks/use-subscription";
export default function Plans() { export default function Plans() {
const { subscription, subscribe, changePlan } = useSubscription(); const { hasActiveSubscription, subscription, subscribe, changePlan } = useSubscription();
const hasSubscription = Boolean(subscription);
return ( return (
<div className="mt-6 flex flex-row-reverse flex-wrap-reverse gap-x-4"> <div className="mt-6 flex flex-row-reverse flex-wrap-reverse gap-x-4">
{pricing.tiers.map((tier) => { {pricing.tiers.map((tier) => {
const isCurrentTier = const isFreeTier = tier.planId === -1;
!subscription?.paddlePlanId && tier.planId === -1 const isCurrentTier = subscription?.paddlePlanId === tier.planId;
? true const isActiveTier = (!hasActiveSubscription && isFreeTier) || (hasActiveSubscription && isCurrentTier);
: subscription?.paddlePlanId === tier.planId; const cta = isActiveTier ? "Current plan" : !!subscription ? `Switch to ${tier.title}` : "Subscribe";
const cta = isCurrentTier ? "Current plan" : !!subscription ? `Switch to ${tier.title}` : "Subscribe";
return ( return (
<div <div
@ -61,9 +59,9 @@ export default function Plans() {
</div> </div>
<button <button
disabled={isCurrentTier} disabled={isActiveTier}
onClick={() => { onClick={() => {
if (hasSubscription) { if (hasActiveSubscription) {
changePlan({ planId: tier.planId }); changePlan({ planId: tier.planId });
Panelbear.track(`Subscribe to ${tier.title}`); Panelbear.track(`Subscribe to ${tier.title}`);
} else { } else {
@ -72,7 +70,7 @@ export default function Plans() {
} }
}} }}
className={clsx( className={clsx(
!isCurrentTier !isActiveTier
? "bg-primary-500 text-white hover:bg-primary-600" ? "bg-primary-500 text-white hover:bg-primary-600"
: "bg-primary-50 text-primary-700 cursor-not-allowed", : "bg-primary-50 text-primary-700 cursor-not-allowed",
"mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium", "mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium",

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

@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
import { useQuery, useMutation, useSession } from "blitz"; import { useQuery, useMutation, useSession } from "blitz";
import type { Subscription } from "db"; import type { Subscription } from "db";
import { SubscriptionStatus } from "db";
import getSubscription from "../queries/get-subscription"; import getSubscription from "../queries/get-subscription";
import usePaddle from "./use-paddle"; import usePaddle from "./use-paddle";
import useCurrentUser from "../../core/hooks/use-current-user"; import useCurrentUser from "../../core/hooks/use-current-user";
@ -34,7 +35,7 @@ export default function useSubscription({ initialData }: Params = {}) {
}); });
// cancel subscription polling when we get a new subscription // cancel subscription polling when we get a new subscription
useEffect(() => setIsWaitingForSubChange(false), [subscription?.paddleSubscriptionId]); useEffect(() => setIsWaitingForSubChange(false), [subscription?.paddleSubscriptionId, subscription?.status]);
useEffect(() => { useEffect(() => {
promise.current = new Promise((r) => (resolve.current = r)); promise.current = new Promise((r) => (resolve.current = r));
@ -103,8 +104,11 @@ export default function useSubscription({ initialData }: Params = {}) {
} }
} }
const hasActiveSubscription = Boolean(subscription && subscription?.status !== SubscriptionStatus.deleted);
return { return {
subscription, subscription,
hasActiveSubscription,
subscribe, subscribe,
updatePaymentMethod, updatePaymentMethod,
cancelSubscription, cancelSubscription,