banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tip): refine single-screen payment layout

Browse Source
This commit is contained in:
chenhang
2026-07-21 15:15:50 +08:00
parent fa08cc114f
commit 612c4139af
5 changed files with 509 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/_components/payment/payment-method-selector.tsx
+16 -8
View File
@@ -24,6 +24,7 @@ const PAYMENT_METHODS: readonly {
export interface PaymentMethodSelectorProps {
config: PaymentMethodConfig;
value: PayChannel;
density?: "default" | "compact";
disabled?: boolean;
caption?: string;
className?: string;
@@ -34,6 +35,7 @@ export interface PaymentMethodSelectorProps {
export function PaymentMethodSelector({
config,
value,
density = "default",
disabled = false,
caption = "Stripe by default",
className,
@@ -41,6 +43,7 @@ export function PaymentMethodSelector({
onChange,
}: PaymentMethodSelectorProps) {
if (!config.showPaymentMethodSelector) return null;
const isCompact = density === "compact";
const paymentMethods =
config.initialPayChannel === "ezpay"
@@ -51,26 +54,31 @@ export function PaymentMethodSelector({
return (
<section
className={`flex flex-col gap-[clamp(8px,1.852vw,10px)] ${className ?? ""}`.trim()}
className={`flex flex-col ${isCompact ? "gap-1.5" : "gap-[clamp(8px,1.852vw,10px)]"} ${className ?? ""}`.trim()}
data-density={density}
aria-labelledby="payment-method-title"
>
<div className="flex items-baseline justify-between gap-sm px-xs">
<div
className={`flex items-baseline justify-between gap-sm ${isCompact ? "px-0.5" : "px-xs"}`}
>
<h2
id="payment-method-title"
className="m-0 text-(length:--responsive-card-title,var(--font-size-lg)) font-bold leading-[1.2] text-auth-text-primary"
className={`m-0 font-bold leading-[1.2] text-auth-text-primary ${isCompact ? "text-sm" : "text-(length:--responsive-card-title,var(--font-size-lg))"}`}
style={{ fontFamily: "var(--font-athelas), var(--font-system)" }}
>
Payment Method
</h2>
<span className="whitespace-nowrap text-(length:--responsive-caption,var(--font-size-sm)) leading-[1.2] text-text-secondary">
{caption}
</span>
{!isCompact ? (
<span className="whitespace-nowrap text-(length:--responsive-caption,var(--font-size-sm)) leading-[1.2] text-text-secondary">
{caption}
</span>
) : null}
</div>
<div className="grid grid-cols-2 gap-sm">
{paymentMethods.map((method) => {
const selected = method.channel === value;
const classes = [
"flex min-h-[clamp(54px,11.481vw,62px)] cursor-pointer items-center justify-center rounded-(--responsive-card-radius-sm,18px) px-[clamp(12px,2.593vw,14px)] py-[clamp(9px,1.852vw,10px)] text-center font-[inherit] text-[#3c3b3b] transition-[border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-72",
`flex cursor-pointer items-center justify-center text-center font-[inherit] text-[#3c3b3b] transition-[border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-72 ${isCompact ? "min-h-11 rounded-2xl px-2 py-1.5" : "min-h-[clamp(54px,11.481vw,62px)] rounded-(--responsive-card-radius-sm,18px) px-[clamp(12px,2.593vw,14px)] py-[clamp(9px,1.852vw,10px)]"}`,
selected
? "border-2 border-[#f657a0] bg-[#fff4f9] shadow-[0_8px_18px_rgba(217,47,127,0.24),0_0_0_3px_rgba(217,47,127,0.18)] -translate-y-0.5"
: "border border-[rgba(246,87,160,0.18)] bg-white shadow-[0_5px_7px_0_rgba(247,89,168,0.08)]",
@@ -97,7 +105,7 @@ export function PaymentMethodSelector({
aria-hidden="true"
width={122}
height={29}
className="block max-h-8.5 w-[min(100%,92px)] object-contain"
className={`block object-contain ${isCompact ? "max-h-7 w-[min(100%,80px)]" : "max-h-8.5 w-[min(100%,92px)]"}`}
/>
) : (
<span className="text-(length:--responsive-body,16px) font-bold leading-[1.1] text-[#1e1e1e]">