59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { useSubscription } from './subscription-context';
|
|
|
|
type Props = {
|
|
children: React.ReactNode;
|
|
title?: string; // optional feature/page title
|
|
allowTrialCta?: boolean; // show Start Trial button
|
|
};
|
|
|
|
const SubscriptionGate: React.FC<Props> = ({ children, title = 'This feature', allowTrialCta = true }) => {
|
|
const { isEntitled, isTrialActive, daysLeftInTrial, startTrial, purchase } = useSubscription();
|
|
|
|
if (isEntitled) {
|
|
return <>{children}</>;
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto py-16 px-6">
|
|
<div className="bg-white rounded-2xl shadow-lg p-8 border">
|
|
<h2 className="text-2xl font-bold mb-2">{title} requires a subscription</h2>
|
|
<p className="text-gray-600 mb-6">
|
|
Unlock access to all tools. New users get a <span className="font-semibold">7-day free trial</span>.
|
|
</p>
|
|
|
|
{isTrialActive && (
|
|
<div className="mb-6 text-sm text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-lg px-4 py-3">
|
|
Your trial is active — <span className="font-semibold">{daysLeftInTrial}</span> day(s) left.
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
{allowTrialCta && !isTrialActive && (
|
|
<button
|
|
onClick={() => startTrial(7)}
|
|
className="px-5 py-2.5 rounded-lg bg-slate-900 text-white hover:bg-black transition"
|
|
>
|
|
Start 7-day Free Trial
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={purchase}
|
|
className="px-5 py-2.5 rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-700 transition"
|
|
>
|
|
Purchase Subscription
|
|
</button>
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-500 mt-4">
|
|
You can manage your plan anytime in <span className="font-medium">Account Settings → Subscription</span>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SubscriptionGate;
|