blur phone call history if on free plan

This commit is contained in:
m5r 2021-10-19 23:56:16 +02:00
parent fd003f461b
commit 59b13bd0ea
5 changed files with 61 additions and 7 deletions

View File

@ -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>
);
}

View File

@ -6,7 +6,7 @@ import clsx from "clsx";
export default function Footer() { export default function Footer() {
return ( return (
<footer <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" }} style={{ flex: "0 0 50px" }}
> >
<NavLink label="Calls" path="/calls" icon={<IoCall className="w-6 h-6" />} /> <NavLink label="Calls" path="/calls" icon={<IoCall className="w-6 h-6" />} />

View File

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

View File

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

View File

@ -3,14 +3,15 @@ import type { BlitzPage } from "blitz";
import { Routes } from "blitz"; import { Routes } from "blitz";
import AppLayout from "app/core/layouts/layout"; import AppLayout from "app/core/layouts/layout";
import PhoneCallsList from "../components/phone-calls-list";
import MissingTwilioCredentials from "app/core/components/missing-twilio-credentials"; import MissingTwilioCredentials from "app/core/components/missing-twilio-credentials";
import useCurrentUser from "app/core/hooks/use-current-user"; 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 PhoneCalls: BlitzPage = () => {
const { hasFilledTwilioCredentials, hasPhoneNumber } = useCurrentUser(); const { hasFilledTwilioCredentials, hasPhoneNumber, hasActiveSubscription } = useCurrentUser();
if (!hasFilledTwilioCredentials || !hasPhoneNumber) { if (!hasFilledTwilioCredentials || !hasPhoneNumber) {
return ( 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 ( return (
<> <>
<PageTitle className="pl-12" title="Calls" /> <PageTitle className="pl-12" title="Calls" />