update credit card mask

packages/ui/src/routes/orders/columns.tsx

@@ -11,7 +11,7 @@ import { HelpCircleIcon } from 'lucide-react'
 import { cn } from '@repo/ui/lib/utils'
 import { Badge } from '@repo/ui/components/ui/badge'
 
-import { labels, methods, statuses, type Order } from './data'
+import { labels, paymentMethods, statuses, type Order } from './data'
 
 export type { Order }
 
@@ -21,7 +21,7 @@ export const columns: ColumnDef<Order>[] = [
     header: 'Forma de pag.',
     cell: ({ row }) => {
       const paymentMethod = row.getValue('payment_method') as string
-      return <>{methods[paymentMethod] ?? paymentMethod}</>
+      return <>{paymentMethods[paymentMethod] ?? paymentMethod}</>
     }
   },
   {

packages/ui/src/routes/orders/data.tsx

@@ -8,13 +8,15 @@ import {
   type LucideIcon
 } from 'lucide-react'
 
+export type PaymentMethod = 'PIX' | 'BANK_SLIP' | 'CREDIT_CARD' | 'MANUAL'
+
 // This type is used to define the shape of our data.
 // You can use a Zod schema here if you want.
 export type Order = {
   id: string
   total: number
   status: 'PENDING' | 'PAID' | 'DECLINED' | 'EXPIRED' | 'REFUNDED' | 'CANCELED'
-  payment_method: 'PIX' | 'CREDIT_CARD' | 'BANK_SLIP' | 'MANUAL'
+  payment_method: PaymentMethod
   name: string
   email: string
 }
@@ -64,7 +66,7 @@ export const labels: Record<string, string> = {
   CANCELED: 'Cancelado'
 }
 
-export const methods: Record<string, string> = {
+export const paymentMethods: Record<string, string> = {
   PIX: 'Pix',
   CREDIT_CARD: 'Cartão de crédito',
   BANK_SLIP: 'Boleto bancário',