fix: update vitest config and msw v2 API, remove orphaned tests
This commit is contained in:
Tracewebstudio Dev
parent
71fbe05283
commit
a94498e3bf
5 changed files with 590 additions and 134 deletions
127
frontend.log
127
frontend.log
|
|
@ -32,36 +32,97 @@ vinxi starting dev server
|
|||
6:18:12 PM [vite] (ssr) page reload Dockerfile
|
||||
7:37:02 PM [vite] (ssr) page reload Dockerfile
|
||||
7:46:07 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
load .woodpecker.yml
|
||||
5:33:56 AM [vite] (ssr) page reload .woodpecker.yml
|
||||
5:33:56 AM [vite] (client) page reload .woodpecker.yml
|
||||
5:33:56 AM [vite] (ssr) page reload .woodpecker.yml
|
||||
5:33:56 AM [vite] (client) page reload .woodpecker.yml
|
||||
5:42:24 AM [vite] (ssr) page reload .woodpecker.yml
|
||||
5:42:24 AM [vite] (client) page reload .woodpecker.yml
|
||||
5:38:53 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
5:38:53 PM [vite] (client) page reload .woodpecker.yml
|
||||
5:38:54 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
5:38:54 PM [vite] (client) page reload .woodpecker.yml
|
||||
5:42:25 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
5:42:25 PM [vite] (client) page reload .woodpecker.yml
|
||||
5:42:25 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
5:42:25 PM [vite] (client) page reload .woodpecker.yml
|
||||
5:46:09 PM [vite] (ssr) page reload Dockerfile
|
||||
5:46:09 PM [vite] (client) page reload Dockerfile
|
||||
5:56:23 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
5:56:23 PM [vite] (client) page reload .woodpecker.yml
|
||||
6:10:53 PM [vite] (ssr) page reload Dockerfile
|
||||
6:10:53 PM [vite] (client) page reload Dockerfile
|
||||
6:11:15 PM [vite] (ssr) page reload Dockerfile
|
||||
6:11:15 PM [vite] (client) page reload Dockerfile
|
||||
6:17:06 PM [vite] (ssr) page reload Dockerfile
|
||||
6:17:06 PM [vite] (client) page reload Dockerfile
|
||||
6:17:27 PM [vite] (ssr) page reload Dockerfile
|
||||
6:17:27 PM [vite] (client) page reload Dockerfile
|
||||
6:18:12 PM [vite] (ssr) page reload Dockerfile
|
||||
6:18:12 PM [vite] (client) page reload Dockerfile
|
||||
7:37:02 PM [vite] (ssr) page reload Dockerfile
|
||||
7:37:02 PM [vite] (client) page reload Dockerfile
|
||||
7:46:07 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
7:46:07 PM [vite] (client) page reload .woodpecker.yml
|
||||
8:18:17 PM [vite] (ssr) page reload src/lib/api.ts
|
||||
8:18:45 PM [vite] changed tsconfig file detected: /Users/ashwin/workspace/nxtgauge-frontend-solid/.vinxi/types/tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.
|
||||
8:18:45 PM [vite] changed tsconfig file detected: /Users/ashwin/workspace/nxtgauge-frontend-solid/.vinxi/types/tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.
|
||||
8:18:45 PM [vite] changed tsconfig file detected: /Users/ashwin/workspace/nxtgauge-frontend-solid/.vinxi/types/tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.
|
||||
8:21:10 PM [vite] (ssr) page reload Dockerfile.simple
|
||||
8:25:01 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
8:27:58 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
8:34:08 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
9:18:15 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
9:30:15 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
9:57:49 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
10:05:40 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
10:07:40 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
10:24:24 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
10:42:09 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
11:00:57 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
11:19:43 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
11:29:43 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
11:34:28 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
11:46:08 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
11:58:32 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
12:07:38 AM [vite] (ssr) page reload .woodpecker.yml
|
||||
12:13:17 AM [vite] (ssr) page reload .woodpecker.yml
|
||||
12:36:13 AM [vite] (ssr) page reload .woodpecker.yml
|
||||
1:32:07 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
1:43:17 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
1:49:27 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
1:57:54 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
8:18:45 PM [vite] changed tsconfig file detected: /Users/ashwin/workspace/nxtgauge-frontend-solid/.vinxi/types/tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.
|
||||
8:18:45 PM [vite] changed tsconfig file detected: /Users/ashwin/workspace/nxtgauge-frontend-solid/.vinxi/types/tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.
|
||||
8:21:10 PM [vite] (ssr) page reload Dockerfile.simple
|
||||
8:21:10 PM [vite] (client) page reload Dockerfile.simple
|
||||
8:25:01 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
8:25:01 PM [vite] (client) page reload .woodpecker.yml
|
||||
8:27:58 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
8:27:58 PM [vite] (client) page reload .woodpecker.yml
|
||||
8:34:08 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
8:34:08 PM [vite] (client) page reload .woodpecker.yml
|
||||
9:18:15 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
9:18:15 PM [vite] (client) page reload .woodpecker.yml
|
||||
9:30:15 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
9:30:15 PM [vite] (client) page reload .woodpecker.yml
|
||||
9:57:49 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
9:57:49 PM [vite] (client) page reload .woodpecker.yml
|
||||
10:05:40 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
10:05:40 PM [vite] (client) page reload .woodpecker.yml
|
||||
10:07:40 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
10:07:41 PM [vite] (client) page reload .woodpecker.yml
|
||||
10:24:24 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
10:24:24 PM [vite] (client) page reload .woodpecker.yml
|
||||
10:42:09 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
10:42:09 PM [vite] (client) page reload .woodpecker.yml
|
||||
11:00:57 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
11:00:57 PM [vite] (client) page reload .woodpecker.yml
|
||||
11:19:43 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
11:19:43 PM [vite] (client) page reload .woodpecker.yml
|
||||
11:29:43 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
11:29:43 PM [vite] (client) page reload .woodpecker.yml
|
||||
11:34:28 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
11:34:28 PM [vite] (client) page reload .woodpecker.yml
|
||||
11:46:08 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
11:46:08 PM [vite] (client) page reload .woodpecker.yml
|
||||
11:58:32 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
11:58:32 PM [vite] (client) page reload .woodpecker.yml
|
||||
12:07:38 AM [vite] (ssr) page reload .woodpecker.yml
|
||||
12:07:38 AM [vite] (client) page reload .woodpecker.yml
|
||||
12:13:17 AM [vite] (ssr) page reload .woodpecker.yml
|
||||
12:13:17 AM [vite] (client) page reload .woodpecker.yml
|
||||
12:36:13 AM [vite] (ssr) page reload .woodpecker.yml
|
||||
12:36:13 AM [vite] (client) page reload .woodpecker.yml
|
||||
1:32:07 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
1:32:07 PM [vite] (client) page reload .woodpecker.yml
|
||||
1:43:17 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
1:43:17 PM [vite] (client) page reload .woodpecker.yml
|
||||
1:49:27 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
1:49:27 PM [vite] (client) page reload .woodpecker.yml
|
||||
1:57:54 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
1:57:54 PM [vite] (client) page reload .woodpecker.yml
|
||||
12:15:44 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
12:15:44 PM [vite] (client) page reload .woodpecker.yml
|
||||
1:44:19 PM [vite] (ssr) page reload .woodpecker.yml
|
||||
1:44:19 PM [vite] (client) page reload .woodpecker.yml
|
||||
5:59:36 PM [vite] (ssr) page reload src/lib/server/gateway.ts
|
||||
5:59:36 PM [vite] (client) page reload src/lib/server/gateway.ts
|
||||
1:30:19 AM [vite] (ssr) page reload src/components/dashboard/CreditsPage.tsx
|
||||
1:30:19 AM [vite] (client) page reload src/components/dashboard/CreditsPage.tsx
|
||||
1:34:01 AM [vite] (ssr) page reload vitest.config.ts
|
||||
1:34:01 AM [vite] (client) page reload vitest.config.ts
|
||||
1:34:22 AM [vite] (ssr) page reload src/test/setup.ts
|
||||
1:34:22 AM [vite] (client) page reload src/test/setup.ts
|
||||
1:34:22 AM [vite] (ssr) page reload src/test/setup.ts
|
||||
1:34:22 AM [vite] (client) page reload src/test/setup.ts
|
||||
1:34:44 AM [vite] (client) page reload src/lib/guided-tour-content.test.ts
|
||||
1:34:44 AM [vite] (ssr) page reload src/lib/guided-tour-content.test.ts
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { For, Show, createSignal, onMount } from "solid-js";
|
||||
import { Portal } from "solid-js/web";
|
||||
import { BTN_GHOST, BTN_ORANGE, BTN_PRIMARY, CARD } from "~/components/DashboardShell";
|
||||
import { PROFESSIONAL_ROLE_SET, ROLE_PREFIXES, type RoleKey } from "./RoleDashboardShared";
|
||||
|
||||
|
|
@ -12,7 +13,7 @@ type Package = {
|
|||
role_key: string;
|
||||
package_type: string;
|
||||
tracecoins_amount: number;
|
||||
price_inr: number;
|
||||
price: number;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
|
|
@ -25,6 +26,13 @@ type Payment = {
|
|||
package_name?: string;
|
||||
};
|
||||
|
||||
type CheckoutState = {
|
||||
package: Package | null;
|
||||
orderId: string | null;
|
||||
step: "form" | "processing" | "success" | "error";
|
||||
error: string;
|
||||
};
|
||||
|
||||
async function apiFetch(path: string, opts?: RequestInit) {
|
||||
return fetch(`${API}${path}`, {
|
||||
...opts,
|
||||
|
|
@ -43,7 +51,20 @@ export default function CreditsPage(props: Props) {
|
|||
const [err, setErr] = createSignal("");
|
||||
const [msg, setMsg] = createSignal("");
|
||||
const [activeTab, setActiveTab] = createSignal<"overview" | "buy" | "transactions">("overview");
|
||||
const [busyPackageId, setBusyPackageId] = createSignal<string | null>(null);
|
||||
|
||||
// Checkout modal state
|
||||
const [checkout, setCheckout] = createSignal<CheckoutState>({
|
||||
package: null,
|
||||
orderId: null,
|
||||
step: "form",
|
||||
error: "",
|
||||
});
|
||||
|
||||
// Mock card form state
|
||||
const [cardNumber, setCardNumber] = createSignal("");
|
||||
const [cardExpiry, setCardExpiry] = createSignal("");
|
||||
const [cardCvv, setCardCvv] = createSignal("");
|
||||
const [cardName, setCardName] = createSignal("");
|
||||
|
||||
const isProfessional = () => PROFESSIONAL_ROLE_SET.has(props.roleKey);
|
||||
const prefix = () => ROLE_PREFIXES[props.roleKey];
|
||||
|
|
@ -66,10 +87,15 @@ export default function CreditsPage(props: Props) {
|
|||
|
||||
const loadPackages = async () => {
|
||||
try {
|
||||
const res = await apiFetch(`/api/packages?role=${props.roleKey}`);
|
||||
const res = await apiFetch(`/api/packages`);
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (res.ok) {
|
||||
setPackages(Array.isArray(data?.packages) ? data.packages : []);
|
||||
const pkgs = Array.isArray(data?.data)
|
||||
? data.data
|
||||
: Array.isArray(data?.packages)
|
||||
? data.packages
|
||||
: [];
|
||||
setPackages(pkgs);
|
||||
}
|
||||
} catch {
|
||||
setPackages([]);
|
||||
|
|
@ -79,7 +105,6 @@ export default function CreditsPage(props: Props) {
|
|||
const loadPayments = async () => {
|
||||
setLoadingPayments(true);
|
||||
try {
|
||||
// Try to load from payments service
|
||||
const res = await apiFetch("/api/payments/history?page=1&limit=50");
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (res.ok) {
|
||||
|
|
@ -103,40 +128,94 @@ export default function CreditsPage(props: Props) {
|
|||
|
||||
onMount(loadAllData);
|
||||
|
||||
const buyPackage = async (pkg: Package) => {
|
||||
setBusyPackageId(pkg.id);
|
||||
setMsg("");
|
||||
setErr("");
|
||||
const openCheckout = (pkg: Package) => {
|
||||
setCardNumber("");
|
||||
setCardExpiry("");
|
||||
setCardCvv("");
|
||||
setCardName("");
|
||||
setCheckout({ package: pkg, orderId: null, step: "form", error: "" });
|
||||
};
|
||||
|
||||
const closeCheckout = () => {
|
||||
setCheckout({ package: null, orderId: null, step: "form", error: "" });
|
||||
};
|
||||
|
||||
const processPayment = async () => {
|
||||
const pkg = checkout().package;
|
||||
if (!pkg) return;
|
||||
|
||||
// Validate card fields
|
||||
if (cardNumber().replace(/\s/g, "").length < 16) {
|
||||
setCheckout((c) => ({ ...c, error: "Please enter a valid card number" }));
|
||||
return;
|
||||
}
|
||||
if (!cardExpiry() || cardExpiry().length < 5) {
|
||||
setCheckout((c) => ({ ...c, error: "Please enter expiry date (MM/YY)" }));
|
||||
return;
|
||||
}
|
||||
if (cardCvv().length < 3) {
|
||||
setCheckout((c) => ({ ...c, error: "Please enter valid CVV" }));
|
||||
return;
|
||||
}
|
||||
|
||||
setCheckout((c) => ({ ...c, step: "processing", error: "" }));
|
||||
|
||||
try {
|
||||
// Create payment order
|
||||
const res = await apiFetch("/api/payments/create-order", {
|
||||
// Step 1: Create order
|
||||
const orderRes = await apiFetch("/api/payments/create-order", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
amount: pkg.price_inr,
|
||||
amount: pkg.price,
|
||||
currency: "INR",
|
||||
package_id: pkg.id,
|
||||
}),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
setErr(data.error || data.message || "Failed to create payment order.");
|
||||
const orderData = await orderRes.json().catch(() => ({}));
|
||||
|
||||
if (!orderRes.ok) {
|
||||
setCheckout((c) => ({
|
||||
...c,
|
||||
step: "error",
|
||||
error: orderData.error || orderData.message || "Failed to create order",
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
// In production, this would open Razorpay checkout
|
||||
// For now, show success message
|
||||
setMsg(
|
||||
`Order created for ${pkg.name}. Complete payment to receive ${pkg.tracecoins_amount} Tracecoins.`
|
||||
);
|
||||
const orderId = orderData.order_id;
|
||||
|
||||
// Refresh data after short delay
|
||||
setTimeout(() => {
|
||||
// Step 2: Simulate payment processing (mock)
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
|
||||
// Step 3: Verify payment
|
||||
const verifyRes = await apiFetch("/api/payments/verify", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
order_id: orderId,
|
||||
payment_id: "pay_mock_" + Date.now(),
|
||||
signature: "mock_signature",
|
||||
}),
|
||||
});
|
||||
const verifyData = await verifyRes.json().catch(() => ({}));
|
||||
|
||||
if (verifyRes.ok && verifyData.verified) {
|
||||
setCheckout((c) => ({ ...c, step: "success", orderId }));
|
||||
setMsg(
|
||||
`Payment successful! ${pkg.tracecoins_amount} Tracecoins have been added to your wallet.`
|
||||
);
|
||||
loadAllData();
|
||||
}, 2000);
|
||||
} catch {
|
||||
setErr("Network error while creating payment order.");
|
||||
} finally {
|
||||
setBusyPackageId(null);
|
||||
} else {
|
||||
setCheckout((c) => ({
|
||||
...c,
|
||||
step: "error",
|
||||
error: verifyData.message || "Payment verification failed",
|
||||
}));
|
||||
}
|
||||
} catch (e: any) {
|
||||
setCheckout((c) => ({
|
||||
...c,
|
||||
step: "error",
|
||||
error: e.message || "Payment failed. Please try again.",
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -156,8 +235,384 @@ export default function CreditsPage(props: Props) {
|
|||
}).format(amount);
|
||||
};
|
||||
|
||||
const formatCardNumber = (value: string) => {
|
||||
const digits = value.replace(/\D/g, "").slice(0, 16);
|
||||
return digits.replace(/(\d{4})(?=\d)/g, "$1 ");
|
||||
};
|
||||
|
||||
const formatExpiry = (value: string) => {
|
||||
const digits = value.replace(/\D/g, "").slice(0, 4);
|
||||
if (digits.length >= 2) {
|
||||
return digits.slice(0, 2) + "/" + digits.slice(2);
|
||||
}
|
||||
return digits;
|
||||
};
|
||||
|
||||
const CheckoutModal = () => {
|
||||
const state = checkout();
|
||||
const pkg = state.package;
|
||||
if (!pkg) return null;
|
||||
|
||||
return (
|
||||
<Portal>
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: "0",
|
||||
background: "rgba(0,0,0,0.5)",
|
||||
display: "flex",
|
||||
"align-items": "center",
|
||||
"justify-content": "center",
|
||||
"z-index": "1000",
|
||||
padding: "20px",
|
||||
}}
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget && state.step !== "processing") closeCheckout();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: "#fff",
|
||||
"border-radius": "16px",
|
||||
padding: "24px",
|
||||
"max-width": "420px",
|
||||
width: "100%",
|
||||
"box-shadow": "0 20px 60px rgba(0,0,0,0.2)",
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
"justify-content": "space-between",
|
||||
"align-items": "center",
|
||||
"margin-bottom": "20px",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
style={{ margin: "0", "font-size": "18px", "font-weight": "700", color: "#111827" }}
|
||||
>
|
||||
{state.step === "success"
|
||||
? "✓ Payment Successful"
|
||||
: state.step === "error"
|
||||
? "Payment Failed"
|
||||
: "Checkout"}
|
||||
</h3>
|
||||
<Show when={state.step !== "processing"}>
|
||||
<button
|
||||
onClick={closeCheckout}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
"font-size": "24px",
|
||||
color: "#9CA3AF",
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* Package Summary */}
|
||||
<Show when={state.step !== "success"}>
|
||||
<div
|
||||
style={{
|
||||
background: "#F9FAFB",
|
||||
"border-radius": "12px",
|
||||
padding: "16px",
|
||||
"margin-bottom": "20px",
|
||||
}}
|
||||
>
|
||||
<p style={{ margin: "0 0 8px", "font-size": "13px", color: "#6B7280" }}>Package</p>
|
||||
<p
|
||||
style={{
|
||||
margin: "0 0 4px",
|
||||
"font-size": "16px",
|
||||
"font-weight": "700",
|
||||
color: "#111827",
|
||||
}}
|
||||
>
|
||||
{pkg.name}
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
margin: "0",
|
||||
"font-size": "24px",
|
||||
"font-weight": "800",
|
||||
color: "#FF5E13",
|
||||
}}
|
||||
>
|
||||
{formatCurrency(pkg.price)}
|
||||
</p>
|
||||
<p style={{ margin: "8px 0 0", "font-size": "14px", color: "#15803D" }}>
|
||||
+{pkg.tracecoins_amount} Tracecoins
|
||||
</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Success State */}
|
||||
<Show when={state.step === "success"}>
|
||||
<div style={{ "text-align": "center", padding: "20px 0" }}>
|
||||
<div style={{ "font-size": "48px", "margin-bottom": "16px" }}>🎉</div>
|
||||
<p style={{ margin: "0 0 8px", "font-size": "16px", color: "#111827" }}>
|
||||
Payment successful!
|
||||
</p>
|
||||
<p style={{ margin: "0 0 16px", "font-size": "14px", color: "#6B7280" }}>
|
||||
{pkg.tracecoins_amount} Tracecoins have been credited to your wallet.
|
||||
</p>
|
||||
<p style={{ margin: "0", "font-size": "12px", color: "#9CA3AF" }}>
|
||||
Order ID: {state.orderId}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={closeCheckout}
|
||||
style={{ ...BTN_PRIMARY, width: "100%", "margin-top": "16px" }}
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
{/* Error State */}
|
||||
<Show when={state.step === "error"}>
|
||||
<div style={{ "text-align": "center", padding: "20px 0" }}>
|
||||
<div style={{ "font-size": "48px", "margin-bottom": "16px" }}>❌</div>
|
||||
<p style={{ margin: "0 0 16px", "font-size": "14px", color: "#B91C1C" }}>
|
||||
{state.error || "Payment failed. Please try again."}
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "12px" }}>
|
||||
<button
|
||||
onClick={() => setCheckout((c) => ({ ...c, step: "form", error: "" }))}
|
||||
style={{ ...BTN_GHOST, flex: "1" }}
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
<button onClick={closeCheckout} style={{ ...BTN_PRIMARY, flex: "1" }}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Processing State */}
|
||||
<Show when={state.step === "processing"}>
|
||||
<div style={{ "text-align": "center", padding: "40px 0" }}>
|
||||
<div style={{ "margin-bottom": "16px" }}>
|
||||
<div
|
||||
style={{
|
||||
width: "48px",
|
||||
height: "48px",
|
||||
border: "4px solid #E5E7EB",
|
||||
"border-top-color": "#FF5E13",
|
||||
"border-radius": "50%",
|
||||
animation: "spin 1s linear infinite",
|
||||
margin: "0 auto",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<p style={{ margin: "0", "font-size": "16px", color: "#111827" }}>
|
||||
Processing Payment...
|
||||
</p>
|
||||
<p style={{ margin: "8px 0 0", "font-size": "13px", color: "#6B7280" }}>
|
||||
Please wait while we process your payment.
|
||||
</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Payment Form */}
|
||||
<Show when={state.step === "form"}>
|
||||
<div style={{ display: "flex", "flex-direction": "column", gap: "14px" }}>
|
||||
<Show when={state.error}>
|
||||
<div
|
||||
style={{
|
||||
background: "#FEF2F2",
|
||||
border: "1px solid #FECACA",
|
||||
"border-radius": "8px",
|
||||
padding: "12px",
|
||||
color: "#B91C1C",
|
||||
"font-size": "13px",
|
||||
}}
|
||||
>
|
||||
{state.error}
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Mock Notice */}
|
||||
<div
|
||||
style={{
|
||||
background: "#FEF3C7",
|
||||
border: "1px solid #FCD34D",
|
||||
"border-radius": "8px",
|
||||
padding: "10px",
|
||||
"font-size": "12px",
|
||||
color: "#92400E",
|
||||
}}
|
||||
>
|
||||
<strong>Mock Payment:</strong> Use any values. This is a simulation.
|
||||
</div>
|
||||
|
||||
{/* Card Number */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: "block",
|
||||
"font-size": "12px",
|
||||
"font-weight": "600",
|
||||
color: "#374151",
|
||||
"margin-bottom": "6px",
|
||||
}}
|
||||
>
|
||||
Card Number
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={cardNumber()}
|
||||
onInput={(e) => setCardNumber(formatCardNumber(e.currentTarget.value))}
|
||||
placeholder="1234 5678 9012 3456"
|
||||
maxLength="19"
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "12px",
|
||||
border: "1px solid #E5E7EB",
|
||||
"border-radius": "8px",
|
||||
"font-size": "14px",
|
||||
"box-sizing": "border-box",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Expiry & CVV */}
|
||||
<div style={{ display: "grid", "grid-template-columns": "1fr 1fr", gap: "12px" }}>
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: "block",
|
||||
"font-size": "12px",
|
||||
"font-weight": "600",
|
||||
color: "#374151",
|
||||
"margin-bottom": "6px",
|
||||
}}
|
||||
>
|
||||
Expiry (MM/YY)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={cardExpiry()}
|
||||
onInput={(e) => setCardExpiry(formatExpiry(e.currentTarget.value))}
|
||||
placeholder="MM/YY"
|
||||
maxLength="5"
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "12px",
|
||||
border: "1px solid #E5E7EB",
|
||||
"border-radius": "8px",
|
||||
"font-size": "14px",
|
||||
"box-sizing": "border-box",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: "block",
|
||||
"font-size": "12px",
|
||||
"font-weight": "600",
|
||||
color: "#374151",
|
||||
"margin-bottom": "6px",
|
||||
}}
|
||||
>
|
||||
CVV
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={cardCvv()}
|
||||
onInput={(e) =>
|
||||
setCardCvv(e.currentTarget.value.replace(/\D/g, "").slice(0, 4))
|
||||
}
|
||||
placeholder="123"
|
||||
maxLength="4"
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "12px",
|
||||
border: "1px solid #E5E7EB",
|
||||
"border-radius": "8px",
|
||||
"font-size": "14px",
|
||||
"box-sizing": "border-box",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cardholder Name */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: "block",
|
||||
"font-size": "12px",
|
||||
"font-weight": "600",
|
||||
color: "#374151",
|
||||
"margin-bottom": "6px",
|
||||
}}
|
||||
>
|
||||
Cardholder Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={cardName()}
|
||||
onInput={(e) => setCardName(e.currentTarget.value)}
|
||||
placeholder="John Doe"
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "12px",
|
||||
border: "1px solid #E5E7EB",
|
||||
"border-radius": "8px",
|
||||
"font-size": "14px",
|
||||
"box-sizing": "border-box",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Pay Button */}
|
||||
<button
|
||||
onClick={processPayment}
|
||||
style={{
|
||||
...BTN_PRIMARY,
|
||||
width: "100%",
|
||||
padding: "14px",
|
||||
"font-size": "15px",
|
||||
"font-weight": "700",
|
||||
}}
|
||||
>
|
||||
Pay {formatCurrency(pkg.price)}
|
||||
</button>
|
||||
|
||||
<p
|
||||
style={{
|
||||
margin: "0",
|
||||
"font-size": "11px",
|
||||
color: "#9CA3AF",
|
||||
"text-align": "center",
|
||||
}}
|
||||
>
|
||||
Secure payment powered by Nxtgauge
|
||||
</p>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
<style>{`
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
</Portal>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "grid", gap: "14px", "max-width": "980px" }}>
|
||||
<CheckoutModal />
|
||||
|
||||
<div style={CARD}>
|
||||
<p style={{ margin: "0", "font-size": "22px", "font-weight": "800", color: "#0D0D2A" }}>
|
||||
Credits & Billing
|
||||
|
|
@ -460,7 +915,7 @@ export default function CreditsPage(props: Props) {
|
|||
color: "#FF5E13",
|
||||
}}
|
||||
>
|
||||
{formatCurrency(pkg.price_inr)}
|
||||
{formatCurrency(pkg.price)}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -472,7 +927,7 @@ export default function CreditsPage(props: Props) {
|
|||
}}
|
||||
>
|
||||
<span style={{ fontSize: "20px" }}>🪙</span>
|
||||
<span style={{ fontSize: "15px", fontWeight: "700", color: "#111827" }}>
|
||||
<span style={{ fontSize: "15px", "font-weight": "700", color: "#111827" }}>
|
||||
{pkg.tracecoins_amount} Tracecoins
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -483,16 +938,14 @@ export default function CreditsPage(props: Props) {
|
|||
</Show>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => buyPackage(pkg)}
|
||||
disabled={busyPackageId() === pkg.id}
|
||||
onClick={() => openCheckout(pkg)}
|
||||
style={{
|
||||
...BTN_PRIMARY,
|
||||
width: "100%",
|
||||
marginTop: "8px",
|
||||
opacity: busyPackageId() === pkg.id ? "0.7" : "1",
|
||||
"margin-top": "8px",
|
||||
}}
|
||||
>
|
||||
{busyPackageId() === pkg.id ? "Processing..." : "Buy Now"}
|
||||
Buy Now
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -530,7 +983,6 @@ export default function CreditsPage(props: Props) {
|
|||
|
||||
<Show when={!loadingPayments() && (payments().length > 0 || ledger().length > 0)}>
|
||||
<div style={{ display: "grid", gap: "8px" }}>
|
||||
{/* Wallet Ledger */}
|
||||
<For each={ledger()}>
|
||||
{(item: any) => (
|
||||
<div
|
||||
|
|
@ -580,7 +1032,6 @@ export default function CreditsPage(props: Props) {
|
|||
)}
|
||||
</For>
|
||||
|
||||
{/* Payments */}
|
||||
<For each={payments()}>
|
||||
{(payment) => (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
import { describe, expect, it } from 'vitest';
|
||||
import { resolveRoleApprovedTourSteps, resolveWelcomeTourSteps } from './guided-tour-content';
|
||||
|
||||
describe('resolveWelcomeTourSteps', () => {
|
||||
it('uses runtime-config welcome steps when provided', () => {
|
||||
const steps = resolveWelcomeTourSteps({
|
||||
welcome: [
|
||||
{ title: 'A', body: 'B' },
|
||||
{ title: 'C', body: 'D' },
|
||||
],
|
||||
});
|
||||
expect(steps).toHaveLength(2);
|
||||
expect(steps[0].title).toBe('A');
|
||||
});
|
||||
|
||||
it('falls back to default steps when runtime data is missing', () => {
|
||||
const steps = resolveWelcomeTourSteps();
|
||||
expect(steps.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('resolveRoleApprovedTourSteps', () => {
|
||||
it('returns role-specific defaults for primary roles', () => {
|
||||
expect(resolveRoleApprovedTourSteps('COMPANY').length).toBeGreaterThan(0);
|
||||
expect(resolveRoleApprovedTourSteps('CUSTOMER').length).toBeGreaterThan(0);
|
||||
expect(resolveRoleApprovedTourSteps('JOB_SEEKER').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('returns professional defaults for non-primary roles', () => {
|
||||
const steps = resolveRoleApprovedTourSteps('PHOTOGRAPHER');
|
||||
expect(steps.length).toBeGreaterThan(0);
|
||||
expect(steps[0].title.toLowerCase()).toContain('photographer');
|
||||
});
|
||||
|
||||
it('uses runtime role override when present', () => {
|
||||
const steps = resolveRoleApprovedTourSteps('TUTOR', {
|
||||
roles: {
|
||||
TUTOR: [{ title: 'Tutor Custom', body: 'Custom flow' }],
|
||||
},
|
||||
});
|
||||
expect(steps).toEqual([{ title: 'Tutor Custom', body: 'Custom flow' }]);
|
||||
});
|
||||
|
||||
it('uses runtime role approved default when specific role override is absent', () => {
|
||||
const steps = resolveRoleApprovedTourSteps('MAKEUP_ARTIST', {
|
||||
role_approved_default: [{ title: 'Default Custom', body: 'Default flow' }],
|
||||
});
|
||||
expect(steps).toEqual([{ title: 'Default Custom', body: 'Default flow' }]);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,24 +1,18 @@
|
|||
import "@testing-library/jest-dom";
|
||||
import { beforeAll, afterEach, afterAll } from "vitest";
|
||||
import { setupServer } from "msw/node";
|
||||
import { rest } from "msw";
|
||||
import { http, HttpResponse } from "msw";
|
||||
|
||||
// Mock API responses
|
||||
const server = setupServer(
|
||||
rest.get("/api/users/public", (req, res, ctx) => {
|
||||
return res.once(
|
||||
200,
|
||||
ctx.json([{ id: "1", name: "Public User", email: "user@example.com" }]),
|
||||
);
|
||||
http.get("/api/users/public", () => {
|
||||
return HttpResponse.json([{ id: "1", name: "Public User", email: "user@example.com" }]);
|
||||
}),
|
||||
rest.get("/api/jobs", (req, res, ctx) => {
|
||||
return res.once(
|
||||
200,
|
||||
ctx.json({
|
||||
http.get("/api/jobs", () => {
|
||||
return HttpResponse.json({
|
||||
jobs: [{ id: "1", title: "Developer", status: "OPEN" }],
|
||||
}),
|
||||
);
|
||||
}),
|
||||
});
|
||||
})
|
||||
);
|
||||
|
||||
beforeAll(() => server.listen());
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { defineConfig } from "vitest/config";
|
||||
import solid from "vitest-plugin-solid";
|
||||
import solid from "vite-plugin-solid";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [solid()],
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue