diff options
Diffstat (limited to 'apps/web/components/views/profile.tsx')
| -rw-r--r-- | apps/web/components/views/profile.tsx | 69 |
1 files changed, 52 insertions, 17 deletions
diff --git a/apps/web/components/views/profile.tsx b/apps/web/components/views/profile.tsx index e4db2171..c60f4310 100644 --- a/apps/web/components/views/profile.tsx +++ b/apps/web/components/views/profile.tsx @@ -10,7 +10,14 @@ import { Button } from "@repo/ui/components/button" import { Skeleton } from "@repo/ui/components/skeleton" import { HeadingH3Bold } from "@repo/ui/text/heading/heading-h3-bold" import { useCustomer } from "autumn-js/react" -import { CheckCircle, CreditCard, LoaderIcon, User, X } from "lucide-react" +import { + AlertTriangle, + CheckCircle, + CreditCard, + LoaderIcon, + User, + X, +} from "lucide-react" import { motion } from "motion/react" import Link from "next/link" import { useState } from "react" @@ -23,12 +30,16 @@ export function ProfileView() { const { data: status = { - consumer_pro: null, + consumer_pro: { allowed: false, status: null }, }, isLoading: isCheckingStatus, } = fetchSubscriptionStatus(autumn, !autumn.isLoading) - const isPro = status.consumer_pro + const proStatus = status.consumer_pro + const isPro = proStatus?.allowed ?? false + const proProductStatus = proStatus?.status + const isPastDue = proProductStatus === "past_due" + const hasProProduct = proProductStatus !== null const { data: memoriesCheck } = fetchMemoriesFeature( autumn, @@ -176,24 +187,43 @@ export function ProfileView() { </div> <div className="flex-1"> <HeadingH3Bold className="text-foreground text-sm"> - {isPro ? "Pro Plan" : "Free Plan"} - {isPro && ( + {hasProProduct ? "Pro Plan" : "Free Plan"} + {isPastDue ? ( + <span className="ml-2 text-xs bg-red-500/20 text-red-600 dark:text-red-400 px-2 py-0.5 rounded-full"> + Past Due + </span> + ) : isPro ? ( <span className="ml-2 text-xs bg-green-500/20 text-green-600 dark:text-green-400 px-2 py-0.5 rounded-full"> Active </span> - )} + ) : null} </HeadingH3Bold> <p className="text-muted-foreground text-xs"> - {isPro ? "Expanded memory capacity" : "Basic plan"} + {hasProProduct ? "Expanded memory capacity" : "Basic plan"} </p> </div> </div> + {isPastDue && ( + <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-lg flex items-start gap-2"> + <AlertTriangle className="h-4 w-4 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" /> + <div className="flex-1"> + <p className="text-sm text-red-600 dark:text-red-400 font-medium"> + Payment Required + </p> + <p className="text-xs text-red-600/80 dark:text-red-400/80 mt-1"> + Your payment is past due. Please update your payment method to + restore access to Pro features. + </p> + </div> + </div> + )} + {/* Usage Stats */} <div className="space-y-2"> <div className="flex justify-between items-center"> <span className="text-sm text-muted-foreground">Memories</span> - {isPro ? ( + {hasProProduct ? ( <span className="text-sm text-foreground">Unlimited</span> ) : ( <span @@ -203,15 +233,11 @@ export function ProfileView() { </span> )} </div> - {!isPro && ( + {!hasProProduct && ( <div className="w-full bg-muted-foreground/50 rounded-full h-2"> <div className={`h-2 rounded-full transition-all ${ - memoriesUsed >= memoriesLimit - ? "bg-red-500" - : isPro - ? "bg-green-500" - : "bg-blue-500" + memoriesUsed >= memoriesLimit ? "bg-red-500" : "bg-blue-500" }`} style={{ width: `${Math.min((memoriesUsed / memoriesLimit) * 100, 100)}%`, @@ -221,7 +247,7 @@ export function ProfileView() { )} </div> - {isPro && ( + {hasProProduct && ( <div className="flex justify-between items-center"> <span className="text-sm text-muted-foreground">Connections</span> <span className="text-sm text-foreground"> @@ -232,7 +258,16 @@ export function ProfileView() { {/* Billing Actions */} <div className="pt-2"> - {isPro ? ( + {isPastDue ? ( + <Button + className="w-full bg-red-600 hover:bg-red-700 text-white border-0" + onClick={handleManageBilling} + size="sm" + variant="default" + > + Pay Past Due + </Button> + ) : hasProProduct ? ( <Button className="w-full" onClick={handleManageBilling} @@ -266,7 +301,7 @@ export function ProfileView() { )} </div> - {!isPro && ( + {!hasProProduct && ( <div className="space-y-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4"> {/* Free Plan */} |