blur phone call history if on free plan

app/core/components/inactive-subscription.tsx

@@ -0,0 +1,35 @@
+import { Routes, useRouter } from "blitz";
+import { IoSettings, IoAlertCircleOutline } from "react-icons/io5";
+
+export default function InactiveSubscription() {
+	const router = useRouter();
+
+	return (
+		<div className="flex items-end justify-center min-h-full overflow-y-hidden pt-4 px-4 pb-4 text-center md:block md:p-0 z-10">
+			<span className="hidden md:inline-block md:align-middle md:h-screen">&#8203;</span>
+			<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all md:my-8 md:align-middle md:max-w-lg md:w-full md:p-6">
+				<div className="text-center my-auto p-4">
+					<IoAlertCircleOutline className="mx-auto h-12 w-12 text-gray-400" aria-hidden="true" />
+					<h3 className="mt-2 text-sm font-medium text-gray-900">
+						You don&#39;t have any active subscription
+					</h3>
+					<p className="mt-1 text-sm text-gray-500 max-w-sm mx-auto break-normal whitespace-normal">
+						You need an active subscription to use this feature.
+						<br />
+						Head over to your settings to pick up a plan.
+					</p>
+					<div className="mt-6">
+						<button
+							type="button"
+							className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-500 focus:outline-none focus:ring-2 focus:ring-offset-2"
+							onClick={() => router.push(Routes.Billing())}
+						>
+							<IoSettings className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+							Choose a plan
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

app/core/layouts/layout/footer.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx";
 export default function Footer() {
 	return (
 		<footer
-			className="grid grid-cols-4 bg-[#F7F7F7] border-t border-gray-400 border-opacity-25 py-3"
+			className="grid grid-cols-4 bg-[#F7F7F7] border-t border-gray-400 border-opacity-25 py-3 z-10"
 			style={{ flex: "0 0 50px" }}
 		>
 			<NavLink label="Calls" path="/calls" icon={<IoCall className="w-6 h-6" />} />

app/messages/components/conversations-list.tsx

@@ -35,7 +35,7 @@ export default function ConversationsList() {
 						<Link href={Routes.ConversationPage({ recipient })}>
 							<a className="flex flex-col">
 								<div className="flex flex-row justify-between">
-									<strong>{formattedPhoneNumber}</strong>
+									<span className="font-medium">{formattedPhoneNumber}</span>
 									<div className="text-gray-700 flex flex-row gap-x-1">
 										{formatRelativeDate(lastMessage.sentAt)}
 										<IoChevronForward className="w-4 h-4 my-auto" />

app/phone-calls/components/phone-calls-list.tsx

@@ -7,8 +7,10 @@ import PhoneInitLoader from "app/core/components/phone-init-loader";
 import EmptyCalls from "../components/empty-calls";
 import usePhoneCalls from "../hooks/use-phone-calls";
 import { formatRelativeDate } from "app/core/helpers/date-formatter";
+import useCurrentUser from "app/core/hooks/use-current-user";
 
 export default function PhoneCallsList() {
+	const { hasActiveSubscription } = useCurrentUser();
 	const [phoneCalls, query] = usePhoneCalls();
 
 	useEffect(() => {
@@ -23,7 +25,7 @@ export default function PhoneCallsList() {
 	}
 
 	if (phoneCalls.length === 0) {
-		return <EmptyCalls />;
+		return hasActiveSubscription ? <EmptyCalls /> : null;
 	}
 
 	return (

app/phone-calls/pages/calls.tsx

@@ -3,14 +3,15 @@ import type { BlitzPage } from "blitz";
 import { Routes } from "blitz";
 
 import AppLayout from "app/core/layouts/layout";
-import PhoneCallsList from "../components/phone-calls-list";
 import MissingTwilioCredentials from "app/core/components/missing-twilio-credentials";
 import useCurrentUser from "app/core/hooks/use-current-user";
-import PageTitle from "../../core/components/page-title";
+import PageTitle from "app/core/components/page-title";
-import Spinner from "../../core/components/spinner";
+import Spinner from "app/core/components/spinner";
+import InactiveSubscription from "app/core/components/inactive-subscription";
+import PhoneCallsList from "../components/phone-calls-list";
 
 const PhoneCalls: BlitzPage = () => {
-	const { hasFilledTwilioCredentials, hasPhoneNumber } = useCurrentUser();
+	const { hasFilledTwilioCredentials, hasPhoneNumber, hasActiveSubscription } = useCurrentUser();
 
 	if (!hasFilledTwilioCredentials || !hasPhoneNumber) {
 		return (
@@ -21,6 +22,22 @@ const PhoneCalls: BlitzPage = () => {
 		);
 	}
 
+	if (!hasActiveSubscription) {
+		return (
+			<>
+				<InactiveSubscription />
+				<div className="filter blur-sm select-none absolute top-0 w-full h-full z-0">
+					<PageTitle title="Calls" />
+					<section className="relative flex flex-grow flex-col">
+						<Suspense fallback={<Spinner />}>
+							<PhoneCallsList />
+						</Suspense>
+					</section>
+				</div>
+			</>
+		);
+	}
+
 	return (
 		<>
 			<PageTitle className="pl-12" title="Calls" />