Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 50 additions & 15 deletions frontend/src/routes/pricing.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,12 @@ function PricingPage() {

const targetPlanName = product.name.toLowerCase();
const isTeamPlan = targetPlanName.includes("team");
const isFreePlan = targetPlanName.includes("free");

// For iOS, show "Coming Soon" for all paid plans
if (isIOS && !isFreePlan) {
return "Coming Soon";
}

// Always show Contact Us for team plan when not logged in
if (!isLoggedIn) {
Expand Down Expand Up @@ -287,7 +293,7 @@ function PricingPage() {
}

// For free plan
if (targetPlanName.includes("free")) {
if (isFreePlan) {
if (isCurrentPlan) {
return "Start Chatting";
}
Expand Down Expand Up @@ -422,17 +428,24 @@ function PricingPage() {

const handleButtonClick = useCallback(
(product: Product) => {
if (!isLoggedIn) {
const targetPlanName = product.name.toLowerCase();
const isTeamPlan = targetPlanName.includes("team");
const targetPlanName = product.name.toLowerCase();
const isTeamPlan = targetPlanName.includes("team");
const isFreePlan = targetPlanName.includes("free");

// For iOS, disable subscription actions for paid plans
if (isIOS && !isFreePlan) {
// Do nothing for paid plans on iOS
return;
}

if (!isLoggedIn) {
// For team plan, redirect to email when not logged in
if (isTeamPlan) {
window.location.href = "mailto:support@opensecret.cloud";
return;
}

if (!targetPlanName.includes("free")) {
if (!isFreePlan) {
// For paid plans, redirect to signup with the plan selection
navigate({
to: "/signup",
Expand All @@ -447,9 +460,6 @@ function PricingPage() {
return;
}

const targetPlanName = product.name.toLowerCase();
const isTeamPlan = targetPlanName.includes("team");

// For team plan, ALWAYS redirect to email if not whitelisted
// regardless of current subscription status
if (isTeamPlan) {
Expand All @@ -468,7 +478,7 @@ function PricingPage() {

const currentPlanName = freshBillingStatus?.product_name?.toLowerCase();
const isCurrentlyOnFreePlan = currentPlanName?.includes("free");
const isTargetFreePlan = targetPlanName.includes("free");
const isTargetFreePlan = isFreePlan;

// If on free plan and clicking free plan, go home
if (isCurrentlyOnFreePlan && isTargetFreePlan) {
Expand Down Expand Up @@ -507,11 +517,18 @@ function PricingPage() {
useEffect(() => {
let isSubscribed = true;

// If user is logged in and there's a selected plan, trigger checkout (except on iOS for paid plans)
// If user is logged in and there's a selected plan, trigger checkout
if (isLoggedIn && selected_plan && !isBillingStatusLoading) {
if (loadingProductId) return; // Prevent multiple triggers
const product = products?.find((p) => p.id === selected_plan);

// Skip checkout for paid plans on iOS
if (product && isSubscribed) {
const isFreePlan = product.name.toLowerCase().includes("free");
if (isIOS && !isFreePlan) {
// Don't trigger checkout for paid plans on iOS
return;
}
handleButtonClick(product);
}
Comment thread
AnthonyRonning marked this conversation as resolved.
}
Expand All @@ -537,9 +554,9 @@ function PricingPage() {
<FullPageMain>
<MarketingHeader
title={
<h2 className="text-6xl font-light mb-0">
<span className="text-6xl font-light mb-0">
Simple, <span className="text-[hsl(var(--purple))]">Transparent</span> Pricing
</h2>
</span>
}
subtitle={
<div className="space-y-2">
Expand Down Expand Up @@ -611,9 +628,9 @@ function PricingPage() {
<FullPageMain>
<MarketingHeader
title={
<h2 className="text-6xl font-light mb-0">
<span className="text-6xl font-light mb-0">
Simple, <span className="text-[hsl(var(--purple))]">Transparent</span> Pricing
</h2>
</span>
}
subtitle={
<div className="space-y-2">
Expand Down Expand Up @@ -646,6 +663,18 @@ function PricingPage() {
</div>
)}

{/* iOS Subscription Banner */}
{isIOS && (
<div className="w-full max-w-7xl mx-auto mt-4 px-4 sm:px-6 lg:px-8">
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-900/50 text-amber-800 dark:text-amber-100 rounded-lg p-4 flex items-center gap-3">
<div className="rounded-full bg-amber-100 dark:bg-amber-800 p-1">
<AlertTriangle className="w-5 h-5 text-amber-600 dark:text-amber-200" />
</div>
<p>Subscription purchases are not yet available in app.</p>
</div>
</div>
)}

{!isIOS && (
<div className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-center">
<div className="inline-flex items-center gap-4 px-6 py-2.5 rounded-full bg-[hsl(var(--marketing-card))]/50 backdrop-blur-sm border border-[hsl(var(--marketing-card-border))]">
Expand Down Expand Up @@ -778,7 +807,9 @@ function PricingPage() {
<button
onClick={() => handleButtonClick(product)}
disabled={
loadingProductId === product.id || (useBitcoin && product.name === "Team")
loadingProductId === product.id ||
(useBitcoin && product.name === "Team") ||
(isIOS && !product.name.toLowerCase().includes("free"))
}
className={`w-full
dark:bg-white/90 dark:text-black dark:hover:bg-[hsl(var(--purple))]/80 dark:hover:text-[hsl(var(--foreground))] dark:active:bg-white/80
Expand All @@ -792,6 +823,10 @@ function PricingPage() {
isTeamPlan && !isTeamPlanAvailable && !isIOS
? "!opacity-100 !cursor-pointer hover:!bg-[hsl(var(--purple))]"
: ""
} ${
isIOS && !product.name.toLowerCase().includes("free")
? "opacity-50 cursor-not-allowed hover:bg-background hover:text-foreground dark:hover:bg-white/90 dark:hover:text-black group-hover:bg-background group-hover:text-foreground dark:group-hover:bg-white/90 dark:group-hover:text-black"
: ""
}`}
>
{useBitcoin && product.name === "Team"
Expand Down
Loading