diff --git a/packages/docusaurus/src/pages/pricing.tsx b/packages/docusaurus/src/pages/pricing.tsx index acdb374..1c80b72 100644 --- a/packages/docusaurus/src/pages/pricing.tsx +++ b/packages/docusaurus/src/pages/pricing.tsx @@ -1,8 +1,19 @@ import { useState } from "react"; import Layout from "@theme/Layout"; +type Discount = { + code: string; + percentage: number; + message: string; +}; + const PricingComponent = () => { const [siteCount, setSiteCount] = useState(3); + const [discount, setDiscount] = useState({ + code: "A2MJEYMW", + percentage: 25, + message: "Launch discount! 25% off first 12 months." + }); const handleSiteCountChange = (e) => { const value = parseInt(e.target.value); @@ -23,8 +34,24 @@ const PricingComponent = () => { } }; - const calculatePrice = () => { - return 125 + siteCount * 5; + const calculateBasePrice = () => { + return 125; + }; + + const calculateSitePrice = () => { + return siteCount * 5; + }; + + const calculateTotalPrice = () => { + const basePrice = calculateBasePrice(); + const sitePrice = calculateSitePrice(); + const total = basePrice + sitePrice; + + if (discount) { + return total * (1 - discount.percentage / 100); + } + + return total; }; return ( @@ -233,14 +260,45 @@ const PricingComponent = () => { + {discount && ( +
+ {discount.message} +
+ )} +
- ${calculatePrice()} + {discount && ( + + ${calculateBasePrice() + calculateSitePrice()} + + )} + ${calculateTotalPrice()} /month
- Base price $125 + ${siteCount} x $5 per site + {discount ? ( + <> + Original price $ + {(calculateBasePrice() + calculateSitePrice()).toFixed(2)}{" "} + discounted by {discount.percentage}% + + ) : ( + <>Base price $125 + ${siteCount} x $5 per site + )}
+
Bulk pricing available.{" "} Contact us @@ -248,7 +306,7 @@ const PricingComponent = () => {