From 9b93d22d225eaef3e4aa0880fe4c21b8977c4aaa Mon Sep 17 00:00:00 2001 From: "IGNY8 VPS (Salman)" Date: Tue, 20 Jan 2026 01:32:48 +0000 Subject: [PATCH] addon comin sonn adn pricign apge updates --- docs/90-REFERENCE/MANAGED-ADDON-PLAN.md | 146 ++++++++++++++++++ .../ui/pricing-table/PricingTable.tsx | 10 +- frontend/src/icons/index.ts | 1 + frontend/src/marketing/pages/Pricing.tsx | 126 ++++++++++----- 4 files changed, 240 insertions(+), 43 deletions(-) create mode 100644 docs/90-REFERENCE/MANAGED-ADDON-PLAN.md diff --git a/docs/90-REFERENCE/MANAGED-ADDON-PLAN.md b/docs/90-REFERENCE/MANAGED-ADDON-PLAN.md new file mode 100644 index 00000000..4a566b39 --- /dev/null +++ b/docs/90-REFERENCE/MANAGED-ADDON-PLAN.md @@ -0,0 +1,146 @@ +# Managed Add-on Plans (Marketing + App) + +**Date:** 2026-01-20 + +## Goals +- Offer managed services as an optional add-on per site. +- Keep core SaaS plans unchanged while enabling add-on selection at pricing, signup, and billing. +- Provide clear separation between **Core Plans** and **Managed Add-ons** in backend, frontend, and billing UI. + +--- + +## Proposed Managed Add-on Tiers +- **Managed Lite** — **$100/site/month** +- **Managed Pro** — **$399/site/month** + +### Managed Features (shared) +- Onboarding & setup: site integration, automation schedule, content settings. +- Monthly SEO content plan: keyword import from library/clustering, topic strategy, content calendar. +- Content QA & optimization: review queue checks, SEO meta validation, internal link suggestions. +- Publishing ops: scheduled publishing, status monitoring, retry/failure handling. +- Reporting: monthly performance + usage summary (credits, content velocity, publishing outcomes). +- Support & tuning: strategy optimization/tweaks, automation adjustments, issue triage. + +### Pro extras +- Proactive monitoring and escalation. +- Priority response. +- Expanded strategy iteration (more frequent adjustments). + +--- + +## Marketing Site (https://igny8.com/pricing) + +### Layout changes +1. **Keep Core Plans section unchanged**. +2. Add a **big + icon** directly below the pricing table. +3. Add **one single horizontal card** for Managed Add-on: + - Visible badge: **COMING SOON** + - Card title: “Managed Add-on (Per Site)” + - Short summary of major features (1 line) + - **Toggle switch** inside the card for **Managed Lite / Managed Pro** + - Show price per site for the selected toggle +4. No other sections or FAQs added. + +### Suggested UX copy +- “Managed Add-on (Per Site) — Coming Soon” +- “Choose Lite or Pro” + +--- + +## Signup Page (https://app.igny8.com/signup) + +### Layout changes +Add **Step 2: Managed Add-ons (Optional)** after plan selection. +- Toggle per site: “Add managed services to selected site(s)” +- If user selects a plan with multiple sites: + - Show checkboxes for each site slot. + - Default: none selected. +- Inline price calculator: + - “Managed Lite x N sites = $X/mo” + - “Managed Pro x N sites = $X/mo” + +### UX notes +- Keep signup friction low. +- If user skips add-on, allow adding later from Billing. + +--- + +## App Billing & Plans (Account → Plans & Billing) + +### New UI sections +1. **Current Plan** remains unchanged. +2. Add **“Managed Add-ons”** section: + - Show current add-on tier (if any) and assigned sites. + - Show monthly add-on price and next renewal date. +3. Add **“Upgrade Add-ons”** tab or sub-panel: + - Choose Managed Lite/Pro. + - Assign to site(s). + - Update monthly total. + +### Existing users +- If a user already subscribed to a managed add-on: + - Display in **Plan** tab summary. + - Include in billing history and invoice breakdown. + +--- + +## Backend Model Changes + +### Option A (Minimal changes in Plan model) +Add fields to `Plan`: +- `plan_type` (choices: `core`, `managed`) — distinguishes SaaS vs add-on. +- `per_site` (bool, default false) — marks managed add-ons. +- `managed_tier` (optional slug: `lite`, `pro`). + +Add optional relation to `Account` or `Site`: +- New model `SiteManagementAddon`: + - `site` (FK) + - `plan` (FK to Plan where `plan_type=managed`) + - `status`, `current_period_start`, `current_period_end` + - `external_subscription_id` + +### Option B (Separate ManagedPlan model) +Create `ManagedPlan` model (clone of Plan fields needed for pricing + name). +Keep `Plan` for core SaaS only. + +**Recommendation:** Option A (fewer tables, uses existing pricing pipeline). + +--- + +## Backend Billing Logic +- Managed add-ons are **per site**. +- Create separate Stripe subscription items per site, or a single subscription with quantity = number of managed sites. +- Billing summary should show: + - Core plan price + - Managed add-on subtotal (N sites x price) + - Total monthly + +--- + +## Frontend Data Contracts + +### API additions +- `GET /api/v1/auth/plans/?type=core` (core plans only) +- `GET /api/v1/auth/plans/?type=managed` (managed add-ons) +- `GET /api/v1/account/managed-addons/` (current user add-ons + site assignments) +- `POST /api/v1/account/managed-addons/` (assign add-on to site(s)) +- `PUT /api/v1/account/managed-addons/{id}/` (upgrade/downgrade add-on tier) + +--- + +## Pricing Copy (Core Plans) +Suggested renames to keep consistency: +- Starter → **Launch** +- Growth → **Growth** (keep) +- Scale → **Scale** (keep) + +--- + +## Rollout Checklist +- Add plan_type + per_site fields + migration. +- Add managed add-on seed data (Lite/Pro). +- Add managed add-on endpoints + serializer filtering. +- Update pricing page layout (marketing). +- Update signup flow (managed add-on step). +- Update billing page (Managed Add-ons section). +- Update invoices to show core + managed breakdown. diff --git a/frontend/src/components/ui/pricing-table/PricingTable.tsx b/frontend/src/components/ui/pricing-table/PricingTable.tsx index d5d2ab15..08ffe649 100644 --- a/frontend/src/components/ui/pricing-table/PricingTable.tsx +++ b/frontend/src/components/ui/pricing-table/PricingTable.tsx @@ -53,6 +53,10 @@ export default function PricingTable({ className = '', }: PricingTableProps) { const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'annually'>('monthly'); + const maxAnnualDiscount = Math.max( + 0, + ...plans.map((plan) => plan.annualDiscountPercent || 0) + ); const handlePlanClick = (plan: PricingPlan) => { if (plan.disabled) return; @@ -117,7 +121,7 @@ export default function PricingTable({ onClick={() => setBillingPeriod('monthly')} className={`relative z-10 flex h-11 w-[130px] items-center justify-center font-medium transition-all duration-200 rounded-full cursor-pointer ${ billingPeriod === 'monthly' - ? 'text-white' + ? 'text-white hover:text-white hover:bg-transparent' : 'text-gray-500 hover:text-gray-700 dark:hover:text-white/80 dark:text-gray-400' }`} > @@ -130,7 +134,7 @@ export default function PricingTable({ onClick={() => setBillingPeriod('annually')} className={`relative z-10 flex h-11 w-[130px] items-center justify-center font-medium transition-all duration-200 rounded-full cursor-pointer ${ billingPeriod === 'annually' - ? 'text-white' + ? 'text-white hover:text-white hover:bg-transparent' : 'text-gray-500 hover:text-gray-700 dark:hover:text-white/80 dark:text-gray-400' }`} > @@ -147,7 +151,7 @@ export default function PricingTable({ d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> - Save {Math.round(plans[0]?.annualDiscountPercent || 15)}% with annual billing + Save upto {Math.round(maxAnnualDiscount)}% with annual billing )} diff --git a/frontend/src/icons/index.ts b/frontend/src/icons/index.ts index 1ef2dd8e..aa9a1146 100644 --- a/frontend/src/icons/index.ts +++ b/frontend/src/icons/index.ts @@ -166,6 +166,7 @@ export { EyeIcon as Maximize2Icon }; // Maximize alias export { AngleRightIcon as ChevronRightIcon }; // Chevron right alias export { BoxCubeIcon as Building2Icon }; // Building alias export { BoxIcon as CreditCardIcon }; // Credit card alias +export { BoxIconLine as CardIcon }; // Card icon alias export { BoxIcon as WalletIcon }; // Wallet alias export { AlertIcon as BellIcon }; // Bell notification alias export { PlugInIcon as TestTubeIcon }; // Test tube alias diff --git a/frontend/src/marketing/pages/Pricing.tsx b/frontend/src/marketing/pages/Pricing.tsx index eec1e418..bc19e261 100644 --- a/frontend/src/marketing/pages/Pricing.tsx +++ b/frontend/src/marketing/pages/Pricing.tsx @@ -20,6 +20,7 @@ const Pricing: React.FC = () => { const [plans, setPlans] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); + const [managedTier, setManagedTier] = useState<'lite' | 'pro'>('lite'); useEffect(() => { const fetchPlans = async () => { @@ -301,7 +302,7 @@ const Pricing: React.FC = () => { Limited Time

- Lifetime Discount on all Plans for First 100 Users! + Upto 33% Lifetime Discount on all Plans for First 25 Users!

@@ -353,12 +354,66 @@ const Pricing: React.FC = () => { }} /> - - {/* What's Included Explanation */} -
-

- Every content piece includes High-Opportunity Keywords, AI clustering, idea generation, standard/premium images, Automation, WP publishing, SEO optimization, and internal linking. -

+ +
+
+
+ + +
+
+ +
+
+
+
+

+ Managed Add-on (Per Site) +

+ + COMING SOON + +
+

+ Setup, monthly planning, QA, publishing ops, reporting, and tuning. +

+
+ +
+
+ + +
+ +
+
+ {managedTier === 'lite' ? '$100' : '$300'} + /site/month +
+
Optional add-on
+
+
+
+
)} @@ -453,6 +508,30 @@ const Pricing: React.FC = () => { )} + {/* AGENCY CTA */} +
+ {/* Radial glow */} +
+ +
+

+ Agency & enterprise plans built for scale. +

+

+ Need more credits, more sites, and lower effective costs? We’ll tailor a plan that fits your volume and workflow. +

+
+ + + Talk to sales + +
+
+
+ {/* INFO BLOCKS SECTION */}
@@ -487,39 +566,6 @@ const Pricing: React.FC = () => {
- - {/* FINAL CTA */} -
- {/* Radial glow */} -
- -
-

- Let's build a plan tailored to your growth. -

-

- Get guidance for automation mapping, migration, and onboarding. -

-
- - - Talk to sales - - - - Start free trial - -
-
-
);