Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 00:32:43 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: hide billing if the feature flag hasn't been passed

Browse Source
This commit is contained in:
Mythie
2023-05-21 23:00:54 +10:00
parent b5ec3cc817
commit 1e505088ad
2 changed files with 55 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/components/billing-plans.tsx
View File

@ -1,11 +1,11 @@
import { useMemo, useState } from "react";
import { useState } from "react";
import { classNames } from "@documenso/lib";
import { STRIPE_PLANS, fetchCheckoutSession, useSubscription } from "@documenso/lib/stripe";
import { Button } from "@documenso/ui";
import { Switch } from "@headlessui/react";
export const BillingPlans = () => {
const { subscription, hasSubscription, isLoading } = useSubscription();
const { subscription, isLoading } = useSubscription();
const [isAnnual, setIsAnnual] = useState(true);
return (
@ -22,7 +22,7 @@ export const BillingPlans = () => {
onChange={setIsAnnual}
className={classNames(
isAnnual ? "bg-neon-600" : "bg-gray-200",
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-neon-600 focus:ring-offset-2"
"focus:ring-neon-600 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
)}>
<span
aria-hidden="true"

107
apps/web/components/settings.tsx
View File

@ -4,18 +4,12 @@ import Link from "next/link";
import { useRouter } from "next/router";
import { updateUser } from "@documenso/features";
import { getUser } from "@documenso/lib/api";
import {
STRIPE_PLANS,
fetchCheckoutSession,
fetchPortalSession,
isSubscriptionsEnabled,
useSubscription,
} from "@documenso/lib/stripe";
import { SubscriptionStatus } from '@prisma/client'
import { fetchPortalSession, isSubscriptionsEnabled, useSubscription } from "@documenso/lib/stripe";
import { Button } from "@documenso/ui";
import { CreditCardIcon, KeyIcon, UserCircleIcon } from "@heroicons/react/24/outline";
import { useSession } from "next-auth/react";
import { BillingPlans } from "./billing-plans";
import { CreditCardIcon, KeyIcon, UserCircleIcon } from "@heroicons/react/24/outline";
import { SubscriptionStatus } from "@prisma/client";
import { useSession } from "next-auth/react";
const subNavigation = [
{
@ -29,14 +23,17 @@ const subNavigation = [
href: "/settings/password",
icon: KeyIcon,
current: false,
},
{
}
];
if (process.env.NEXT_PUBLIC_ALLOW_SUBSCRIPTIONS === "true") {
subNavigation.push({
name: "Billing",
href: "/settings/billing",
icon: CreditCardIcon,
current: false,
},
];
});
}
function classNames(...classes: any) {
return classes.filter(Boolean).join(" ");
@ -189,9 +186,7 @@ export default function Setttings() {
</div>
<div
hidden={
subNavigation.find((e) => e.current)?.name !== subNavigation?.[2]?.name
}
hidden={!subNavigation.at(2) || subNavigation.find((e) => e.current)?.name !== subNavigation.at(2)?.name}
className="min-h-[251px] divide-y divide-gray-200 lg:col-span-9">
{/* Billing section */}
<div className="py-6 px-4 sm:p-6 lg:pb-8">
@ -204,48 +199,50 @@ export default function Setttings() {
</p>
)}
{isSubscriptionsEnabled() && <>
<p className="mt-1 text-sm text-gray-500">
Your subscription is currently{" "}
<strong>{subscription?.status && subscription?.status !== SubscriptionStatus.INACTIVE ? "Active" : "Inactive"}</strong>.
</p>
{isSubscriptionsEnabled() && (
<>
<p className="mt-1 text-sm text-gray-500">
Your subscription is currently{" "}
<strong>
{subscription?.status &&
subscription?.status !== SubscriptionStatus.INACTIVE
? "Active"
: "Inactive"}
</strong>
.
</p>
{subscription?.status === SubscriptionStatus.PAST_DUE && (
<p className="mt-1 text-sm text-red-500">
Your subscription is past due. Please update your payment details to continue
using the service without interruption.
</p>
)}
{subscription?.status === SubscriptionStatus.PAST_DUE && (
<p className="mt-1 text-sm text-red-500">
Your subscription is past due. Please update your payment details to
continue using the service without interruption.
</p>
)}
<p className="mt-1 text-sm text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est consectetur magnam
illo aperiam expedita porro eos eum nam sapiente.
</p>
<div className="mt-8">
<div className="grid grid-cols-1 lg:grid-cols-2">
<BillingPlans />
</div>
<div className="mt-8">
<div className="grid grid-cols-1 lg:grid-cols-2">
<BillingPlans />
</div>
{subscription && (
<Button
onClick={() => {
if (isSubscriptionsEnabled() && subscription?.customerId) {
fetchPortalSession({
id: subscription.customerId,
}).then((res) => {
if (res.success) {
window.location.href = res.url;
{subscription && (
<Button
onClick={() => {
if (isSubscriptionsEnabled() && subscription?.customerId) {
fetchPortalSession({
id: subscription.customerId,
}).then((res) => {
if (res.success) {
window.location.href = res.url;
}
});
}
});
}
}}>
Manage my subscription
</Button>
)}
</div>
</>}
}}>
Manage my subscription
</Button>
)}
</div>
</>
)}
</div>
</div>
</div>