From bcb940f3f1a3b638bffbebe0e148fdc55185514b Mon Sep 17 00:00:00 2001 From: Ashwin Kumar Date: Thu, 2 Apr 2026 18:11:54 +0200 Subject: [PATCH] Update buy and packages pages to load real data from API - wallet/buy.tsx: createResource fetches /api/packages?role= instead of hardcoded bundles - packages.tsx: replaced stub with real package list from API; shows type badge, price, tracecoin amount Co-Authored-By: Claude Sonnet 4.6 --- src/routes/dashboard/packages.tsx | 113 ++++++++++++++++++-- src/routes/dashboard/wallet/buy.tsx | 155 +++++++++++++++++----------- 2 files changed, 201 insertions(+), 67 deletions(-) diff --git a/src/routes/dashboard/packages.tsx b/src/routes/dashboard/packages.tsx index bc99a71..f07596f 100644 --- a/src/routes/dashboard/packages.tsx +++ b/src/routes/dashboard/packages.tsx @@ -1,15 +1,110 @@ +import { createResource, Show, For } from 'solid-js'; import { A } from '@solidjs/router'; +import { authState } from '~/lib/auth'; + +const API = '/api/gateway'; + +type Package = { + id: string; + name: string; + role_key: string; + package_type: string; + tracecoins_amount: number; + price_inr: number; + description?: string; +}; + +const PACKAGE_TYPE_LABELS: Record = { + TRACECOIN_BUNDLE: 'Tracecoin Bundle', + JOB_POSTING: 'Job Posting', + CONTACT_VIEWS: 'Contact Views', +}; export default function DashboardPackagesPage() { + const rc = () => authState().runtime_config; + const role = () => rc()?.role ?? ''; + + const [packages] = createResource(role, async (roleKey) => { + if (!roleKey) return []; + try { + const params = new URLSearchParams({ role: roleKey }); + const res = await fetch(`${API}/api/packages?${params}`); + if (!res.ok) return []; + const data = await res.json(); + return (Array.isArray(data) ? data : (data.packages ?? [])) as Package[]; + } catch { + return []; + } + }); + return ( -
-

Packages

-

- Package purchase flow is being finalized in the Rust payments module. -

-

- You can review your current wallet in Wallet. -

-
+
+
+

Packages

+

+ Available packages for your account type. +

+
+ + +

Loading packages…

+ + + +
+

No packages available for your role at this time.

+

+ You can manage your Tracecoins in Wallet. +

+
+ + + 0}> +
+ + {(pkg) => ( +
+
+ + {PACKAGE_TYPE_LABELS[pkg.package_type] ?? pkg.package_type} + +

{pkg.name}

+
+ + +

{pkg.description}

+ + +
+ + ₹{(pkg.price_inr / 100).toLocaleString('en-IN')} + +
+ + 0}> +

+ 🪙 {pkg.tracecoins_amount} Tracecoins included +

+ + + +
+ )} + +
+ +
); } diff --git a/src/routes/dashboard/wallet/buy.tsx b/src/routes/dashboard/wallet/buy.tsx index be38d01..30b1c25 100644 --- a/src/routes/dashboard/wallet/buy.tsx +++ b/src/routes/dashboard/wallet/buy.tsx @@ -1,14 +1,34 @@ -import { For } from 'solid-js'; +import { createResource, Show, For } from 'solid-js'; import { authState } from '~/lib/auth'; +const API = '/api/gateway'; + +type Package = { + id: string; + name: string; + role_key: string; + package_type: string; + tracecoins_amount: number; + price_inr: number; + description?: string; +}; + export default function BuyTracecoins() { const rc = () => authState().runtime_config; + const role = () => rc()?.role ?? ''; - const BUNDLES = [ - { id: 'basic', name: 'Basic Pack', coins: 100, price: 500, popular: false, description: 'Perfect for beginners' }, - { id: 'pro', name: 'Professional Pack', coins: 300, price: 1200, popular: true, description: 'Best value for active pros' }, - { id: 'elite', name: 'Elite Pack', coins: 1000, price: 3500, popular: false, description: 'Power user savings' }, - ]; + const [packages] = createResource(role, async (roleKey) => { + if (!roleKey) return []; + try { + const params = new URLSearchParams({ role: roleKey }); + const res = await fetch(`${API}/api/packages?${params}`); + if (!res.ok) return []; + const data = await res.json(); + return (Array.isArray(data) ? data : (data.packages ?? [])) as Package[]; + } catch { + return []; + } + }); return (
@@ -19,59 +39,78 @@ export default function BuyTracecoins() {

-
- - {(bundle) => ( -
- {bundle.popular && ( -
- Most Popular + +

Loading packages…

+ + + +
+ No packages available for your role at this time. +
+ + + 0}> +
+ + {(pkg, i) => { + const isPopular = () => i() === 1; + return ( +
+ +
+ Most Popular +
+ + +

{pkg.name}

+ +

+ {pkg.description} +

+ + +
+ 🪙 {pkg.tracecoins_amount} +
+
Tracecoins
+ +
+ ₹{(pkg.price_inr / 100).toLocaleString('en-IN')} +
+ +
- )} - -

{bundle.name}

-

{bundle.description}

- -
- 🪙 {bundle.coins} -
-
Tracecoins
- -
- ₹{(bundle.price).toLocaleString('en-IN')} -
- - -
- )} - -
+ ); + }} + +
+

Safe & Secure Payments