update credit card mask

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.buy/route.tsx

@@ -25,6 +25,7 @@ import { createSearch } from '@repo/util/meili'
 import { cloudflareContext } from '@repo/auth/context'
 import { Label } from '@repo/ui/components/ui/label'
 import { Skeleton } from '@repo/ui/components/skeleton'
+import type { PaymentMethod } from '@repo/ui/routes/orders/data'
 
 import { Wizard, WizardStep } from '@/components/wizard'
 import { Step, StepItem, StepSeparator } from '@/components/step'
@@ -34,6 +35,7 @@ import { Bulk, type Item } from './bulk'
 import { Payment, type CreditCard } from './payment'
 import { Review } from './review'
 import type { Coupon } from './discount'
+import { useFetcher } from 'react-router'
 
 export type WizardState = {
   index: number
@@ -41,7 +43,7 @@ export type WizardState = {
   items: Item[]
   enrollments: Enrollment[]
   coupon?: Coupon
-  payment_method?: 'PIX' | 'BANK_SLIP' | 'CREDIT_CARD'
+  payment_method?: PaymentMethod
   credit_card?: CreditCard
 }
 
@@ -74,12 +76,14 @@ export async function loader({ context }: Route.LoaderArgs) {
 
 export async function action({ request }: Route.ActionArgs) {
   const body = (await request.json()) as object
+
   console.log(body)
 }
 
 export default function Route({
   loaderData: { courses }
 }: Route.ComponentProps) {
+  const fetcher = useFetcher()
   const [mounted, setMounted] = useState(false)
   const [state, setState] = useLocalStorageState<WizardState>('wizard_cart', {
     defaultValue: emptyWizard
@@ -96,6 +100,13 @@ export default function Route({
       }))
   }
 
+  const onSubmit = async (data: WizardState) => {
+    await fetcher.submit(JSON.stringify(data), {
+      method: 'post',
+      encType: 'application/json'
+    })
+  }
+
   useMount(() => {
     setMounted(true)
   })
@@ -206,7 +217,7 @@ export default function Route({
 
               {/* Review */}
               <WizardStep name="review">
-                <Review state={state} />
+                <Review state={state} onSubmit={onSubmit} />
               </WizardStep>
             </Wizard>
           </CardContent>