feat: Introduce PRO plan with a new pricing section, add a refund policy page, and update related legal documents and navigation.

thakurdotdev · thakurdotdev · commit 8c38e0a52be9 · 2026-02-15T17:37:54.000+05:30
diff --git a/client/src/Pages/Plans/index.jsx b/client/src/Pages/Plans/index.jsx
@@ -1,6 +1,7 @@
 import { useQueryClient } from "@tanstack/react-query"
 import { Check, Crown, Sparkles, Zap } from "lucide-react"
 import { useContext, useEffect, useState } from "react"
+import { Link, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 import { paymentKeys } from "@/api/payment"
 import { ChatContext } from "@/Context/ChatContext"
@@ -40,10 +41,15 @@ const planMeta = {
 }
 
 export default function PlansPage() {
-  const { user } = useContext(Context)
-  const { socket } = useContext(ChatContext)
+  const userCtx = useContext(Context)
+  const chatCtx = useContext(ChatContext)
+  const user = userCtx?.user || null
+  const socket = chatCtx?.socket || null
+  const navigate = useNavigate()
   const queryClient = useQueryClient()
-  const { data: entitlement, isLoading: entitlementLoading } = useEntitlementQuery()
+  const { data: entitlement, isLoading: entitlementLoading } = useEntitlementQuery({
+    enabled: !!user,
+  })
   const { data: dbPlans, isLoading: plansLoading } = usePlansQuery()
   const createOrderMutation = useCreatePaymentOrderMutation()
   const [processingPlan, setProcessingPlan] = useState(null)
@@ -91,6 +97,11 @@ export default function PlansPage() {
   const handleUpgrade = async (planCode) => {
     if (planCode === "FREE" || currentPlan === planCode) return
 
+    if (!user) {
+      navigate("/login?returnTo=/plans")
+      return
+    }
+
     setProcessingPlan(planCode)
 
     try {
@@ -146,7 +157,7 @@ export default function PlansPage() {
   }))
 
   return (
-    <div className="container mx-auto px-4 py-8 max-w-5xl">
+    <div className="container mx-auto px-4 py-28 max-w-5xl">
       <div className="text-center mb-10">
         <h1 className="text-3xl font-bold mb-3 flex items-center justify-center gap-2">
           <Sparkles className="h-8 w-8 text-primary" />
@@ -222,9 +233,30 @@ export default function PlansPage() {
       </div>
 
       <p className="text-center text-xs text-muted-foreground mt-8">
-        Payments are processed securely via Razorpay. Your subscription will be activated after
-        payment confirmation.
+        Payments are processed securely via Razorpay. All purchases are final and non-refundable.
       </p>
+      <div className="flex items-center justify-center gap-4 mt-3 text-xs text-muted-foreground">
+        <Link
+          to="/refund-policy"
+          className="hover:text-foreground underline underline-offset-2 transition-colors"
+        >
+          Refund Policy
+        </Link>
+        <span className="text-border">•</span>
+        <Link
+          to="/terms-of-services"
+          className="hover:text-foreground underline underline-offset-2 transition-colors"
+        >
+          Terms of Service
+        </Link>
+        <span className="text-border">•</span>
+        <Link
+          to="/privacy-policy"
+          className="hover:text-foreground underline underline-offset-2 transition-colors"
+        >
+          Privacy Policy
+        </Link>
+      </div>
     </div>
   )
 }
diff --git a/client/src/Routes.jsx b/client/src/Routes.jsx
@@ -1,8 +1,7 @@
 import React, { lazy, Suspense } from "react"
 import { Loader2 } from "lucide-react"
-import { useNavigate } from "react-router-dom"
+import { Navigate, useLocation } from "react-router-dom"
 import { useIsMobile } from "./hooks/use-mobile"
-import { useLocation } from "react-router-dom"
 import { useSidebar } from "./components/ui/sidebar"
 import Navbar from "./components/Navbar"
 import { AppSidebar } from "./components/AppSidebar"
@@ -36,6 +35,7 @@ const Chat = lazy(() => import("./components/Chat/Chat"))
 const Home = lazy(() => import("./components/LandingPage/Home"))
 const PrivacyPolicy = lazy(() => import("./components/LandingPage/PrivacyPolicy"))
 const TermsOfService = lazy(() => import("./components/LandingPage/TermOfService"))
+const RefundPolicy = lazy(() => import("./components/LandingPage/RefundPolicy"))
 const NotFoundPage = lazy(() => import("./components/NotFound"))
 const Dashboard = lazy(() => import("./components/Posts/Dashboard"))
 const PostDetail = lazy(() => import("./components/Posts/PostDetail"))
@@ -82,7 +82,6 @@ export const privateRoutes = [
   { path: "/music/my-playlist/:id", element: <UserPlaylistDetails /> },
   { path: "/music/history", element: <HistoryPage /> },
   { path: "/music/sync", element: <GroupMusic /> },
-  { path: "/plans", element: <PlansPage /> },
   { path: "/payments/history", element: <PaymentHistoryPage /> },
 ]
 
@@ -94,12 +93,13 @@ export const publicRoutes = [
   { path: "/passkey-login", element: <PasskeyLogin /> },
   { path: "/privacy-policy", element: <PrivacyPolicy /> },
   { path: "/terms-of-services", element: <TermsOfService /> },
+  { path: "/refund-policy", element: <RefundPolicy /> },
+  { path: "/plans", element: <PlansPage /> },
   { path: "*", element: <NotFoundPage /> },
 ]
 
 // Protected Routes Component
 export const ProtectedRoutes = () => {
-  const navigate = useNavigate()
   const { user, loading } = useContext(Context)
   const { open } = useSidebar()
   const isMobile = useIsMobile()
@@ -111,12 +111,11 @@ export const ProtectedRoutes = () => {
   }
 
   if (!user?.email) {
-    return navigate(`/login?returnTo=${location.pathname}`)
+    return <Navigate to={`/login?returnTo=${location.pathname}`} replace />
   }
 
   if (!user?.verified) {
-    toast.error("Please verify your email first")
-    return navigate("/verify", { state: { email: user?.email } })
+    return <Navigate to="/verify" state={{ email: user?.email }} replace />
   }
 
   return (
diff --git a/client/src/components/LandingPage/Footer.jsx b/client/src/components/LandingPage/Footer.jsx
@@ -22,6 +22,9 @@ const Footer = memo(() => {
             <a href="#features" className="text-white/40 hover:text-white transition-colors">
               Features
             </a>
+            <Link to="/plans" className="text-white/40 hover:text-white transition-colors">
+              Pricing
+            </Link>
             <a href="#download" className="text-white/40 hover:text-white transition-colors">
               Download
             </a>
@@ -34,6 +37,9 @@ const Footer = memo(() => {
             >
               Terms
             </Link>
+            <Link to="/refund-policy" className="text-white/40 hover:text-white transition-colors">
+              Refund Policy
+            </Link>
           </div>
 
           {/* Social */}
diff --git a/client/src/components/LandingPage/Home.jsx b/client/src/components/LandingPage/Home.jsx
@@ -1,5 +1,7 @@
 import {
   ArrowRight,
+  Check,
+  Crown,
   Download,
   Headphones,
   Loader2,
@@ -8,6 +10,7 @@ import {
   Share2,
   Users,
   Video,
+  Zap,
 } from "lucide-react"
 import { lazy, memo, Suspense } from "react"
 import { Link } from "react-router-dom"
@@ -239,6 +242,75 @@ const MobileApp = memo(() => (
   </section>
 ))
 
+const Pricing = memo(() => (
+  <section id="pricing" className="py-24 px-6">
+    <div className="max-w-4xl mx-auto">
+      <div className="text-center mb-16">
+        <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-4">
+          Simple <span className="text-emerald-400">pricing</span>
+        </h2>
+        <p className="text-white/50 max-w-xl mx-auto">Start free. Upgrade when you need more.</p>
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
+        <div className="relative p-8 rounded-3xl bg-white/3 border border-white/8 hover:border-white/20 transition-all">
+          <h3 className="text-xl font-bold text-white mb-1">Free</h3>
+          <p className="text-white/40 text-sm mb-6">Get started with the basics</p>
+          <div className="text-4xl font-bold text-white mb-8">
+            ₹0 <span className="text-base font-normal text-white/40">forever</span>
+          </div>
+          <ul className="space-y-3">
+            {[
+              "Music streaming",
+              "Create playlists",
+              "Up to 2 members in groups",
+              "3 songs in group queue",
+            ].map((f) => (
+              <li key={f} className="flex items-center gap-2 text-sm text-white/60">
+                <Check className="h-4 w-4 text-emerald-400 shrink-0" />
+                {f}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="relative p-8 rounded-3xl bg-white/3 border border-emerald-500/30 hover:border-emerald-500/50 transition-all">
+          <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-emerald-500 text-xs font-semibold text-black flex items-center gap-1">
+            <Crown className="h-3 w-3" /> Popular
+          </div>
+          <h3 className="text-xl font-bold text-white mb-1 flex items-center gap-2">
+            <Zap className="h-5 w-5 text-yellow-500" /> PRO
+          </h3>
+          <p className="text-white/40 text-sm mb-6">Unlock everything</p>
+          <div className="text-4xl font-bold text-white mb-8">
+            ₹299 <span className="text-base font-normal text-white/40">/year</span>
+          </div>
+          <ul className="space-y-3">
+            {[
+              "Everything in Free",
+              "Up to 10 members in groups",
+              "50 songs in group queue",
+              "Real-time group chat",
+              "Priority support",
+            ].map((f) => (
+              <li key={f} className="flex items-center gap-2 text-sm text-white/60">
+                <Check className="h-4 w-4 text-emerald-400 shrink-0" />
+                {f}
+              </li>
+            ))}
+          </ul>
+          <Link to="/plans">
+            <Button className="w-full mt-8 h-12 rounded-xl bg-white text-black hover:bg-white/90 font-semibold">
+              Upgrade to PRO
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  </section>
+))
+
 const FinalCTA = memo(() => (
   <section className="py-24 px-6">
     <div className="max-w-3xl mx-auto text-center">
@@ -278,6 +350,7 @@ const Home = () => {
         <Hero />
         <Features />
         <MobileApp />
+        <Pricing />
         <Suspense
           fallback={
             <div className="h-32 flex items-center justify-center">
diff --git a/client/src/components/LandingPage/PrivacyPolicy.jsx b/client/src/components/LandingPage/PrivacyPolicy.jsx
@@ -7,7 +7,7 @@ const PrivacyPolicy = () => {
       <div className="max-w-4xl mx-auto px-6 py-14 lg:px-8 shadow-lg rounded-lg">
         <header className="border-b pb-6 mb-6">
           <h1 className="text-3xl font-bold ">Privacy Policy</h1>
-          <p className="mt-2 text-gray-600">Last Updated: January 10, 2025</p>
+          <p className="mt-2 text-gray-600">Last Updated: February 15, 2026</p>
         </header>
 
         <main className="space-y-6  leading-relaxed">
@@ -29,7 +29,12 @@ const PrivacyPolicy = () => {
               </li>
               <li>
                 <strong>Usage Data:</strong> Information about how you interact with our website,
-                such as pages visited and features used.
+                such as pages visited, features used, and music listening history.
+              </li>
+              <li>
+                <strong>Payment Information:</strong> Transaction details processed through
+                Razorpay. We do not store your payment card details — all payment data is handled
+                securely by Razorpay.
               </li>
             </ul>
           </section>
@@ -40,6 +45,8 @@ const PrivacyPolicy = () => {
             <ul className="list-disc list-inside space-y-2 mt-2">
               <li>To provide and maintain the SyncVibe platform.</li>
               <li>To improve user experience and add new features.</li>
+              <li>To process payments and manage your subscription.</li>
+              <li>To personalize your music recommendations.</li>
               <li>To communicate with you about updates, promotions, and support.</li>
             </ul>
           </section>
diff --git a/client/src/components/LandingPage/RefundPolicy.jsx b/client/src/components/LandingPage/RefundPolicy.jsx
@@ -0,0 +1,91 @@
+const RefundPolicy = () => {
+  document.title = "Refund Policy - SyncVibe"
+  window.scrollTo(0, 0)
+
+  return (
+    <div className="py-10">
+      <div className="max-w-4xl mx-auto px-6 py-14 lg:px-8 shadow-lg rounded-lg">
+        <header className="border-b pb-6 mb-6">
+          <h1 className="text-3xl font-bold ">Refund & Cancellation Policy</h1>
+          <p className="mt-2 text-gray-600">Last Updated: February 15, 2026</p>
+        </header>
+
+        <main className="space-y-6  leading-relaxed">
+          <section>
+            <h2 className="text-xl font-semibold ">1. No Refunds</h2>
+            <p className="mt-2">
+              All purchases made on SyncVibe, including PRO plan subscriptions, are{" "}
+              <strong>final and non-refundable</strong>. Once a payment has been successfully
+              processed, no refunds will be issued under any circumstances.
+            </p>
+            <p className="mt-2">
+              By completing a purchase, you acknowledge and agree that you have reviewed the
+              features and benefits of the plan before making the payment, and you accept this
+              no-refund policy.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold ">2. Cancellation of Subscription</h2>
+            <p className="mt-2">
+              SyncVibe PRO is a one-time purchase and does not auto-renew. There is no recurring
+              subscription to cancel. Your PRO access remains active for the duration of the
+              purchased plan period.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold ">3. Duplicate Payments</h2>
+            <p className="mt-2">
+              If you are charged more than once for the same purchase due to a technical error,
+              please contact us within 7 days of the transaction. We will investigate and process a
+              refund for the duplicate charge only.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold ">4. Failed Transactions</h2>
+            <p className="mt-2">
+              If a payment fails or is not completed, no charge will be applied to your account. If
+              your account was debited but the transaction was not completed on our end, please
+              contact us with your transaction details, and we will resolve the issue within 5-7
+              business days.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold ">5. Payment Gateway</h2>
+            <p className="mt-2">
+              All payments are processed securely through Razorpay. SyncVibe does not store your
+              payment card details. For any payment-related disputes, you may also contact
+              Razorpay's support directly.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold ">6. Service Modifications</h2>
+            <p className="mt-2">
+              SyncVibe reserves the right to modify, suspend, or discontinue any features or
+              services at any time. In such cases, no refunds will be issued for the remaining
+              duration of any active plan.
+            </p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold ">7. Contact Us</h2>
+            <p className="mt-2">
+              If you have any questions about this Refund & Cancellation Policy or need assistance
+              with a payment issue, please contact us at{" "}
+              <a href="mailto:info@thakur.dev" className="text-blue-600 hover:underline">
+                info@thakur.dev
+              </a>
+              .
+            </p>
+          </section>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export default RefundPolicy
diff --git a/client/src/components/LandingPage/TermOfService.jsx b/client/src/components/LandingPage/TermOfService.jsx
