diff --git a/resources/js/pages/subscription/paywall.tsx b/resources/js/pages/subscription/paywall.tsx index 92effc54..3e9d8496 100644 --- a/resources/js/pages/subscription/paywall.tsx +++ b/resources/js/pages/subscription/paywall.tsx @@ -1,3 +1,4 @@ +import { SupportDialog } from '@/components/support-dialog'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { useCountUp } from '@/hooks/use-count-up'; @@ -15,6 +16,7 @@ import { CheckIcon, FolderIcon, LandmarkIcon, + LifeBuoy, LockIcon, PiggyBankIcon, ReceiptIcon, @@ -363,8 +365,10 @@ function PricingSection({ canManageConnectionsForFreePlan: boolean; offer: ExperimentOffer; }) { + const { auth } = usePage().props; const [selectedPlan, setSelectedPlan] = useState(defaultPlan); - const [freeButtonVisible, setFreeButtonVisible] = useState(false); + const [escapeVisible, setEscapeVisible] = useState(false); + const [supportOpen, setSupportOpen] = useState(false); const locale = useLocale(); const selectedPlanData = planEntries.find( @@ -376,25 +380,23 @@ function PricingSection({ : ''; useEffect(() => { - if (!canUseFreePlan) { - return; - } - const timer = setTimeout(() => setFreeButtonVisible(true), 5000); + const delay = canUseFreePlan ? 5000 : 7000; + const timer = setTimeout(() => setEscapeVisible(true), delay); return () => clearTimeout(timer); }, [canUseFreePlan]); const continueForFree = () => router.visit(dashboard().url); - const freeRevealClasses = freeButtonVisible + const revealClasses = escapeVisible ? 'opacity-100' : 'pointer-events-none opacity-0'; return (
- {canUseFreePlan && ( + {canUseFreePlan ? (
+ ) : ( +
+ +
)} {selectedPlanData && ( @@ -459,11 +476,11 @@ function PricingSection({
)} - {canUseFreePlan && ( + {canUseFreePlan ? (
+ ) : ( +
+ +
)} + + ); }