58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { PaymentMethod, PaymentMethodType } from "@prisma/client";
|
|
import { PAYMENT_METHOD_LABELS, SUPPORTS_QR } from "@/lib/constants";
|
|
import { buildPaymentUri } from "@/lib/payment-uri";
|
|
import { CopyButton } from "@/components/public/copy-button";
|
|
import { QrModal } from "@/components/public/qr-modal";
|
|
|
|
type PublicPaymentMethod = Pick<
|
|
PaymentMethod,
|
|
"id" | "type" | "label" | "value" | "network" | "description" | "isVisible"
|
|
>;
|
|
|
|
type PaymentMethodCardProps = {
|
|
method: PublicPaymentMethod;
|
|
};
|
|
|
|
function isHttpUrl(value: string) {
|
|
try {
|
|
const url = new URL(value);
|
|
return url.protocol === "http:" || url.protocol === "https:";
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
export function PaymentMethodCard({ method }: PaymentMethodCardProps) {
|
|
const typeLabel = PAYMENT_METHOD_LABELS[method.type as PaymentMethodType];
|
|
const qrPayload = buildPaymentUri(method.type, method.value, method.network);
|
|
const linkTarget = isHttpUrl(qrPayload) ? qrPayload : null;
|
|
|
|
return (
|
|
<article className="method-card">
|
|
<div className="method-card-grid">
|
|
<div className="method-card-content">
|
|
<p className="method-card-title">{method.label}</p>
|
|
<p className="method-card-meta">
|
|
{typeLabel}
|
|
{method.network ? ` · ${method.network}` : ""}
|
|
</p>
|
|
<p className="method-card-value">{method.value}</p>
|
|
{method.description ? <p className="method-card-description">{method.description}</p> : null}
|
|
</div>
|
|
|
|
<div className="method-actions">
|
|
<CopyButton value={method.value} />
|
|
{SUPPORTS_QR.has(method.type) ? <QrModal title={`${method.label} QR`} payload={qrPayload} /> : null}
|
|
{linkTarget ? (
|
|
<a href={linkTarget} target="_blank" rel="noreferrer" className="method-action">
|
|
Open
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|