Problem
The billing/settings page has no component to display a saved payment method. Members cannot see their saved card details or remove/update their payment method.
Proposed Solution
Create frontend/cntr/PaymentMethodCard/PaymentMethodCard.tsx. Props: method: { type: 'card' | 'bank', last4: string, brand?: string, expiryMonth?: number, expiryYear?: number }, onRemove: () => void, onUpdate: () => void. Renders the card details with masked digits (•••• •••• •••• {last4}), brand label, expiry as MM/YY, and "Update" / "Remove" buttons. Remove button shows an inline confirmation before calling onRemove. All implementation must live inside frontend/cntr/.
Acceptance Criteria
Problem
The billing/settings page has no component to display a saved payment method. Members cannot see their saved card details or remove/update their payment method.
Proposed Solution
Create
frontend/cntr/PaymentMethodCard/PaymentMethodCard.tsx. Props:method: { type: 'card' | 'bank', last4: string, brand?: string, expiryMonth?: number, expiryYear?: number },onRemove: () => void,onUpdate: () => void. Renders the card details with masked digits (•••• •••• •••• {last4}), brand label, expiry as MM/YY, and "Update" / "Remove" buttons. Remove button shows an inline confirmation before callingonRemove. All implementation must live insidefrontend/cntr/.Acceptance Criteria
frontend/cntr/PaymentMethodCard/PaymentMethodCard.tsxMM/YY(e.g., "09/27")onRemoveonUpdateimmediatelyfrontend/cntr/PaymentMethodCard/PaymentMethodCard.test.tsx