fix: match built-in payment methods exactly

This commit is contained in:
Albert Coady
2026-07-06 15:00:29 +08:00
parent b197ba61ce
commit 22ec77b570
2 changed files with 25 additions and 4 deletions
@@ -82,8 +82,8 @@ const sortedMethods = computed(() => {
})
function methodIcon(type: string): string {
if (type.includes('alipay')) return METHOD_ICONS.alipay
if (type.includes('wxpay')) return METHOD_ICONS.wxpay
if (isAlipayMethod(type)) return METHOD_ICONS.alipay
if (isWxpayMethod(type)) return METHOD_ICONS.wxpay
if (type === 'airwallex') return METHOD_ICONS.airwallex
return METHOD_ICONS[type] || paymentIcon
}
@@ -93,10 +93,18 @@ function methodLabel(method: PaymentMethodOption): string {
}
function methodSelectedClass(type: string): string {
if (type.includes('alipay')) return 'border-[#02A9F1] bg-blue-50 text-gray-900 shadow-sm dark:bg-blue-950 dark:text-gray-100'
if (type.includes('wxpay')) return 'border-[#09BB07] bg-green-50 text-gray-900 shadow-sm dark:bg-green-950 dark:text-gray-100'
if (isAlipayMethod(type)) return 'border-[#02A9F1] bg-blue-50 text-gray-900 shadow-sm dark:bg-blue-950 dark:text-gray-100'
if (isWxpayMethod(type)) return 'border-[#09BB07] bg-green-50 text-gray-900 shadow-sm dark:bg-green-950 dark:text-gray-100'
if (type === 'stripe') return 'border-[#676BE5] bg-indigo-50 text-gray-900 shadow-sm dark:bg-indigo-950 dark:text-gray-100'
if (type === 'airwallex') return 'border-[#FF6B3D] bg-orange-50 text-gray-900 shadow-sm dark:border-[#FF8E3C] dark:bg-orange-950 dark:text-gray-100'
return 'border-primary-500 bg-primary-50 text-gray-900 shadow-sm dark:bg-primary-950 dark:text-gray-100'
}
function isAlipayMethod(type: string): boolean {
return type === 'alipay' || type === 'alipay_direct'
}
function isWxpayMethod(type: string): boolean {
return type === 'wxpay' || type === 'wxpay_direct'
}
</script>
@@ -21,4 +21,17 @@ describe('PaymentMethodSelector', () => {
expect(wrapper.text()).not.toContain('ldc')
expect(wrapper.text()).not.toContain('payment.methods.ldc')
})
it('uses the generic selected style for custom methods that contain built-in names', () => {
const wrapper = mount(PaymentMethodSelector, {
props: {
selected: 'card_alipay',
methods: [{ type: 'card_alipay', display_name: 'Card Pay', fee_rate: 0, available: true }],
},
})
const button = wrapper.get('button')
expect(button.classes()).toContain('border-primary-500')
expect(button.classes()).not.toContain('border-[#02A9F1]')
})
})