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";
export default function Plans() {
const { subscription, subscribe, changePlan } = useSubscription();
const hasSubscription = Boolean(subscription);
const { hasActiveSubscription, subscription, subscribe, changePlan } = useSubscription();
return (
<div className="mt-6 flex flex-row-reverse flex-wrap-reverse gap-x-4">
{pricing.tiers.map((tier) => {
const isCurrentTier =
!subscription?.paddlePlanId && tier.planId === -1
? true
: subscription?.paddlePlanId === tier.planId;
const cta = isCurrentTier ? "Current plan" : !!subscription ? `Switch to ${tier.title}` : "Subscribe";
const isFreeTier = tier.planId === -1;
const isCurrentTier = subscription?.paddlePlanId === tier.planId;
const isActiveTier = (!hasActiveSubscription && isFreeTier) || (hasActiveSubscription && isCurrentTier);
const cta = isActiveTier ? "Current plan" : !!subscription ? `Switch to ${tier.title}` : "Subscribe";
return (
<div
@ -61,9 +59,9 @@ export default function Plans() {
</div>
<button
disabled={isCurrentTier}
disabled={isActiveTier}
onClick={() => {
if (hasSubscription) {
if (hasActiveSubscription) {
changePlan({ planId: tier.planId });
Panelbear.track(`Subscribe to ${tier.title}`);
} else {
@ -72,7 +70,7 @@ export default function Plans() {
}
}}
className={clsx(
!isCurrentTier
!isActiveTier
? "bg-primary-500 text-white hover:bg-primary-600"
: "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",

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 type { Subscription } from "db";
import { SubscriptionStatus } from "db";
import getSubscription from "../queries/get-subscription";
import usePaddle from "./use-paddle";
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
useEffect(() => setIsWaitingForSubChange(false), [subscription?.paddleSubscriptionId]);
useEffect(() => setIsWaitingForSubChange(false), [subscription?.paddleSubscriptionId, subscription?.status]);
useEffect(() => {
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 {
subscription,
hasActiveSubscription,
subscribe,
updatePaymentMethod,
cancelSubscription,