update payment details

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

@@ -1,21 +1,40 @@
 import type { Route } from './+types/route'
 
-import { Fragment, use, useEffect, type ReactNode } from 'react'
-import { useRequest, useToggle } from 'ahooks'
 import { ErrorMessage } from '@hookform/error-message'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useRequest, useToggle } from 'ahooks'
 import {
+  CircleQuestionMarkIcon,
   CopyIcon,
   CopyPlusIcon,
-  Trash2Icon,
-  PlusIcon,
   EllipsisIcon,
-  CircleQuestionMarkIcon
+  PlusIcon,
+  Trash2Icon
 } from 'lucide-react'
-import { redirect, Link, useParams, useFetcher } from 'react-router'
-import { Controller, useFieldArray, useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
 import { pick } from 'ramda'
+import { Fragment, use, useEffect, type ReactNode } from 'react'
+import { Controller, useFieldArray, useForm } from 'react-hook-form'
+import { Link, redirect, useFetcher, useParams } from 'react-router'
 
+import { cloudflareContext } from '@repo/auth/context'
+import { DateTime } from '@repo/ui/components/datetime'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@repo/ui/components/ui/breadcrumb'
+import { Button } from '@repo/ui/components/ui/button'
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@repo/ui/components/ui/card'
 import {
   Command,
   CommandEmpty,
@@ -28,51 +47,32 @@ import {
   HoverCardContent,
   HoverCardTrigger
 } from '@repo/ui/components/ui/hover-card'
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator
-} from '@repo/ui/components/ui/breadcrumb'
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle
-} from '@repo/ui/components/ui/card'
-import { DateTime } from '@repo/ui/components/datetime'
-import { Spinner } from '@repo/ui/components/ui/spinner'
 import { Input } from '@repo/ui/components/ui/input'
-import { Button } from '@repo/ui/components/ui/button'
-import { Separator } from '@repo/ui/components/ui/separator'
+import { Kbd } from '@repo/ui/components/ui/kbd'
+import { Label } from '@repo/ui/components/ui/label'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger
 } from '@repo/ui/components/ui/popover'
-import { Kbd } from '@repo/ui/components/ui/kbd'
-import { Label } from '@repo/ui/components/ui/label'
+import { Separator } from '@repo/ui/components/ui/separator'
+import { Spinner } from '@repo/ui/components/ui/spinner'
+import { useIsMobile } from '@repo/ui/hooks/use-mobile'
 import { createSearch } from '@repo/util/meili'
 import { HttpMethod, request as req } from '@repo/util/request'
-import { useIsMobile } from '@repo/ui/hooks/use-mobile'
-import { cloudflareContext } from '@repo/auth/context'
 
+import { workspaceContext } from '@/middleware/workspace'
+import { cn } from '@repo/ui/lib/utils'
+import { CoursePicker } from './course-picker'
 import {
-  MAX_ITEMS,
   formSchema,
+  MAX_ITEMS,
+  type Enrolled,
   type Schema,
-  type User,
-  type Enrolled
+  type User
 } from './data'
 import { ScheduledForInput } from './scheduled-for'
-import { CoursePicker } from './course-picker'
 import { UserPicker } from './user-picker'
-import { cn } from '@repo/ui/lib/utils'
-import { workspaceContext } from '@/middleware/workspace'
 
 const emptyRow = {
   user: undefined,