Spaces:
Runtime error
Runtime error
Refactor VideoTemplateEditor component: remove AI editing features and related state management, streamline template loading, and update styles for improved layout. Enhance CSS for responsive design and visual consistency across various components, including dropdowns, sync stats, and quiz elements. Remove deprecated premium badge styles and adjust layout for chat components.
66de9c8 | import { useEffect, useState } from "react"; | |
| import { Link } from "react-router-dom"; | |
| import { api } from "../api/client"; | |
| import { CheckIcon } from "./icons/Icons"; | |
| type Plan = { | |
| id: string; | |
| name: string; | |
| tagline: string; | |
| price_monthly_usd: number; | |
| price_annual_monthly_usd?: number; | |
| price_annual_usd?: number; | |
| annual_savings_pct?: number; | |
| features: string[]; | |
| }; | |
| type Cycle = "monthly" | "annual"; | |
| const ANNUAL_DISCOUNT = 0.25; | |
| // Mirrors backend app/services/plans.py so the page renders before (or without) the API. | |
| const FALLBACK: Plan[] = [ | |
| { | |
| id: "free", | |
| name: "Free", | |
| tagline: "For trying Notestack on your archive", | |
| price_monthly_usd: 0, | |
| features: [ | |
| "Up to 5 posts indexed, from any source", | |
| "Grounded research chat with citations", | |
| "1 audio overview, any length", | |
| "1 video", | |
| "2 Launch Kits", | |
| "2 infographics", | |
| "2 reports a month", | |
| ], | |
| }, | |
| { | |
| id: "writer", | |
| name: "Writer", | |
| tagline: "For writers publishing every week", | |
| price_monthly_usd: 24.99, | |
| features: [ | |
| "Up to 100 posts indexed, from any source", | |
| "10x more audio overviews than Free (60 min a month)", | |
| "10 videos a month", | |
| "20 Launch Kits a month", | |
| "30 reports a month", | |
| "30 infographics a month", | |
| "Voice cloning with consent", | |
| ], | |
| }, | |
| { | |
| id: "studio", | |
| name: "Studio", | |
| tagline: "For publications and power users", | |
| price_monthly_usd: 48.99, | |
| features: [ | |
| "Up to 250 posts indexed, from any source", | |
| "40x more audio overviews than Free (240 min a month)", | |
| "20 videos a month", | |
| "50 Launch Kits a month", | |
| "Unlimited reports", | |
| "Unlimited infographics", | |
| "Voice cloning with consent", | |
| ], | |
| }, | |
| ]; | |
| export function money(n: number): string { | |
| return Number.isInteger(n) ? `$${n}` : `$${n.toFixed(2)}`; | |
| } | |
| /** Nearest .99 price, mirroring plans.to_99 on the backend. */ | |
| function to99(amount: number): number { | |
| return amount <= 0 ? 0 : Math.max(0.99, Math.round(amount + 0.01) - 0.01); | |
| } | |
| export function annualMonthly(plan: Plan): number { | |
| return plan.price_annual_monthly_usd ?? to99(plan.price_monthly_usd * (1 - ANNUAL_DISCOUNT)); | |
| } | |
| function savingsPct(plan: Plan): number { | |
| if (!plan.price_monthly_usd) return 0; | |
| return plan.annual_savings_pct ?? Math.round((1 - annualMonthly(plan) / plan.price_monthly_usd) * 100); | |
| } | |
| export function annualTotal(plan: Plan): number { | |
| return plan.price_annual_usd ?? Math.round(annualMonthly(plan) * 12 * 100) / 100; | |
| } | |
| export default function PricingTiers() { | |
| const [plans, setPlans] = useState<Plan[]>(FALLBACK); | |
| const [billingEnabled, setBillingEnabled] = useState(false); | |
| const [cycle, setCycle] = useState<Cycle>("annual"); | |
| const bestSaving = Math.max(0, ...plans.map(savingsPct)); | |
| useEffect(() => { | |
| api<{ billing_enabled: boolean; plans: Plan[] }>("/api/billing/plans") | |
| .then((r) => { | |
| if (Array.isArray(r.plans) && r.plans.length > 0) setPlans(r.plans); | |
| setBillingEnabled(r.billing_enabled); | |
| }) | |
| .catch(() => { | |
| /* keep fallback */ | |
| }); | |
| }, []); | |
| return ( | |
| <div className="pricing"> | |
| <div className="pricing-top"> | |
| <div className="cycle-toggle" role="radiogroup" aria-label="Billing cycle"> | |
| <button type="button" role="radio" aria-checked={cycle === "monthly"} className={cycle === "monthly" ? "on" : ""} onClick={() => setCycle("monthly")}> | |
| Monthly | |
| </button> | |
| <button type="button" role="radio" aria-checked={cycle === "annual"} className={cycle === "annual" ? "on" : ""} onClick={() => setCycle("annual")}> | |
| Annual {bestSaving > 0 && <span className="save mono">Save {bestSaving}%</span>} | |
| </button> | |
| </div> | |
| </div> | |
| <div className="pricing-grid"> | |
| {plans.map((plan) => { | |
| const featured = plan.id === "writer"; | |
| const free = plan.price_monthly_usd === 0; | |
| const annual = cycle === "annual" && !free; | |
| return ( | |
| <article key={plan.id} className={`card tier${featured ? " tier-featured active" : ""}`}> | |
| {featured && <span className="badge tier-flag">Most popular</span>} | |
| <h3>{plan.name}</h3> | |
| <p className="muted tier-tagline">{plan.tagline}</p> | |
| <p className="tier-price"> | |
| {free ? ( | |
| <span className="tier-amount">Free</span> | |
| ) : ( | |
| <> | |
| {annual && <span className="tier-was muted">{money(plan.price_monthly_usd)}</span>} | |
| <span className="tier-amount">{money(annual ? annualMonthly(plan) : plan.price_monthly_usd)}</span> | |
| <span className="muted">/month</span> | |
| </> | |
| )} | |
| </p> | |
| <p className="mono muted tier-billing"> | |
| {free ? "Free forever" : annual ? `${money(annualTotal(plan))} billed yearly` : "Billed monthly"} | |
| </p> | |
| <ul className="tier-features"> | |
| {plan.features.map((f) => ( | |
| <li key={f}> | |
| <CheckIcon size={16} /> | |
| <span>{f}</span> | |
| </li> | |
| ))} | |
| </ul> | |
| <Link | |
| to={billingEnabled && !free ? `/app?upgrade=${plan.id}` : "/auth?mode=signup"} | |
| className={`btn ${featured ? "btn-primary" : ""} tier-cta`} | |
| > | |
| {billingEnabled && !free ? `Choose ${plan.name}` : "Start free"} | |
| </Link> | |
| </article> | |
| ); | |
| })} | |
| </div> | |
| </div> | |
| ); | |
| } | |