Initial commit
This commit is contained in:
273
components/dashboard/payment-methods-list.tsx
Normal file
273
components/dashboard/payment-methods-list.tsx
Normal file
@@ -0,0 +1,273 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState, useTransition } from "react";
|
||||
import { PaymentMethodType } from "@prisma/client";
|
||||
import {
|
||||
deletePaymentMethodAction,
|
||||
movePaymentMethodAction,
|
||||
togglePaymentMethodVisibilityAction,
|
||||
updatePaymentMethodAction
|
||||
} from "@/actions/payment-methods";
|
||||
import { PAYMENT_METHOD_LABELS, PAYMENT_METHOD_TYPES, USDT_NETWORKS } from "@/lib/constants";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select } from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
type PaymentMethodsListProps = {
|
||||
methods: MethodItem[];
|
||||
};
|
||||
|
||||
type MethodItem = {
|
||||
id: string;
|
||||
type: PaymentMethodType;
|
||||
label: string;
|
||||
value: string;
|
||||
network: string | null;
|
||||
description: string | null;
|
||||
sortOrder: number;
|
||||
isVisible: boolean;
|
||||
};
|
||||
|
||||
type EditorState = {
|
||||
id: string;
|
||||
type: PaymentMethodType;
|
||||
label: string;
|
||||
value: string;
|
||||
network: string;
|
||||
description: string;
|
||||
isVisible: boolean;
|
||||
};
|
||||
|
||||
function toEditor(method: MethodItem): EditorState {
|
||||
return {
|
||||
id: method.id,
|
||||
type: method.type,
|
||||
label: method.label,
|
||||
value: method.value,
|
||||
network: method.network ?? "",
|
||||
description: method.description ?? "",
|
||||
isVisible: method.isVisible
|
||||
};
|
||||
}
|
||||
|
||||
export function PaymentMethodsList({ methods }: PaymentMethodsListProps) {
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [isError, setIsError] = useState(false);
|
||||
const [editor, setEditor] = useState<EditorState | null>(null);
|
||||
|
||||
const indexed = useMemo(() => methods.map((method, index) => ({ method, index })), [methods]);
|
||||
|
||||
function runAction(executor: () => Promise<{ success: boolean; message: string }>) {
|
||||
setMessage(null);
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await executor();
|
||||
setMessage(result.message);
|
||||
setIsError(!result.success);
|
||||
|
||||
if (result.success) {
|
||||
setEditor(null);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleMove(id: string, direction: "up" | "down") {
|
||||
runAction(async () => {
|
||||
const formData = new FormData();
|
||||
formData.set("id", id);
|
||||
formData.set("direction", direction);
|
||||
return movePaymentMethodAction(formData);
|
||||
});
|
||||
}
|
||||
|
||||
function handleToggle(id: string) {
|
||||
runAction(async () => {
|
||||
const formData = new FormData();
|
||||
formData.set("id", id);
|
||||
return togglePaymentMethodVisibilityAction(formData);
|
||||
});
|
||||
}
|
||||
|
||||
function handleDelete(id: string) {
|
||||
runAction(async () => {
|
||||
const formData = new FormData();
|
||||
formData.set("id", id);
|
||||
return deletePaymentMethodAction(formData);
|
||||
});
|
||||
}
|
||||
|
||||
function handleUpdate() {
|
||||
if (!editor) {
|
||||
return;
|
||||
}
|
||||
|
||||
runAction(async () => {
|
||||
const formData = new FormData();
|
||||
formData.set("id", editor.id);
|
||||
formData.set("type", editor.type);
|
||||
formData.set("label", editor.label);
|
||||
formData.set("value", editor.value);
|
||||
formData.set("network", editor.network);
|
||||
formData.set("description", editor.description);
|
||||
if (editor.isVisible) {
|
||||
formData.set("isVisible", "on");
|
||||
}
|
||||
return updatePaymentMethodAction(formData);
|
||||
});
|
||||
}
|
||||
|
||||
if (methods.length === 0) {
|
||||
return (
|
||||
<div className="rounded-lg border border-dashed border-border p-4 text-sm text-muted">
|
||||
No payment methods yet. Add one above.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="space-y-4">
|
||||
<h2 className="terminal-heading">Current Methods</h2>
|
||||
|
||||
{message ? <p className={isError ? "text-sm text-red-300" : "text-sm text-accent"}>{message}</p> : null}
|
||||
|
||||
{indexed.map(({ method, index }) => {
|
||||
const editing = editor?.id === method.id;
|
||||
|
||||
return (
|
||||
<article key={method.id} className="terminal-card space-y-4">
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-base font-semibold text-text">
|
||||
{method.label} <span className="text-muted">({PAYMENT_METHOD_LABELS[method.type]})</span>
|
||||
</p>
|
||||
<p className="mt-2 break-all text-sm text-muted">{method.value}</p>
|
||||
{method.network ? <p className="mt-1 text-xs text-muted">Network: {method.network}</p> : null}
|
||||
{method.description ? <p className="mt-1 text-xs text-muted">{method.description}</p> : null}
|
||||
{!method.isVisible ? <p className="mt-1 text-xs text-amber-200">Hidden on public profile</p> : null}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button className="dashboard-action-small" disabled={isPending || index === 0} onClick={() => handleMove(method.id, "up")}>↑</Button>
|
||||
<Button className="dashboard-action-small" disabled={isPending || index === methods.length - 1} onClick={() => handleMove(method.id, "down")}>↓</Button>
|
||||
<Button className="dashboard-action-small" disabled={isPending} onClick={() => handleToggle(method.id)}>
|
||||
{method.isVisible ? "Hide" : "Show"}
|
||||
</Button>
|
||||
<Button className="dashboard-action-small" disabled={isPending} onClick={() => setEditor(editing ? null : toEditor(method))}>
|
||||
{editing ? "Cancel" : "Edit"}
|
||||
</Button>
|
||||
<Button className="dashboard-action-small" variant="danger" disabled={isPending} onClick={() => handleDelete(method.id)}>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editing && editor ? (
|
||||
<div className="space-y-4 border-t border-border/70 pt-4">
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<label className="space-y-2 text-sm">
|
||||
<span className="form-label">Type</span>
|
||||
<Select
|
||||
value={editor.type}
|
||||
onChange={(event) =>
|
||||
setEditor((previous) =>
|
||||
previous
|
||||
? {
|
||||
...previous,
|
||||
type: event.target.value as PaymentMethodType,
|
||||
network: event.target.value === "USDT" ? previous.network : ""
|
||||
}
|
||||
: previous
|
||||
)
|
||||
}
|
||||
>
|
||||
{PAYMENT_METHOD_TYPES.map((methodType) => (
|
||||
<option key={methodType} value={methodType}>
|
||||
{PAYMENT_METHOD_LABELS[methodType]}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</label>
|
||||
|
||||
<label className="space-y-2 text-sm">
|
||||
<span className="form-label">Label</span>
|
||||
<Input
|
||||
value={editor.label}
|
||||
onChange={(event) =>
|
||||
setEditor((previous) => (previous ? { ...previous, label: event.target.value } : previous))
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label className="space-y-2 text-sm">
|
||||
<span className="form-label">Value</span>
|
||||
<Input
|
||||
value={editor.value}
|
||||
onChange={(event) =>
|
||||
setEditor((previous) => (previous ? { ...previous, value: event.target.value } : previous))
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-2 text-sm">
|
||||
<span className="form-label">Network</span>
|
||||
{editor.type === "USDT" ? (
|
||||
<Select
|
||||
value={editor.network}
|
||||
onChange={(event) =>
|
||||
setEditor((previous) => (previous ? { ...previous, network: event.target.value } : previous))
|
||||
}
|
||||
>
|
||||
<option value="">Select a network</option>
|
||||
{USDT_NETWORKS.map((network) => (
|
||||
<option key={network} value={network}>
|
||||
{network}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
) : (
|
||||
<Input
|
||||
value={editor.network}
|
||||
onChange={(event) =>
|
||||
setEditor((previous) => (previous ? { ...previous, network: event.target.value } : previous))
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
|
||||
<label className="space-y-2 text-sm">
|
||||
<span className="form-label">Description</span>
|
||||
<Textarea
|
||||
rows={2}
|
||||
value={editor.description}
|
||||
onChange={(event) =>
|
||||
setEditor((previous) => (previous ? { ...previous, description: event.target.value } : previous))
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center gap-3 text-sm text-muted">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editor.isVisible}
|
||||
onChange={(event) =>
|
||||
setEditor((previous) => (previous ? { ...previous, isVisible: event.target.checked } : previous))
|
||||
}
|
||||
className="h-4 w-4 rounded border-border bg-panel text-accent focus:ring-accent"
|
||||
/>
|
||||
Visible on public profile
|
||||
</label>
|
||||
|
||||
<Button className="dashboard-action" variant="primary" disabled={isPending} onClick={handleUpdate}>
|
||||
{isPending ? "Saving..." : "Save changes"}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user