remove cc button on invalid order

apps/admin.saladeaula.digital/app/routes/_.$orgid.payments.$id._index/enrollments.tsx

@@ -39,8 +39,7 @@ import type { Enrollment, Seat } from './route'
 
 const dtOptions: Intl.DateTimeFormatOptions = {
   hour: '2-digit',
-  minute: '2-digit',
-  second: '2-digit'
+  minute: '2-digit'
 }
 
 export function Enrollments({

apps/admin.saladeaula.digital/app/routes/_.$orgid.payments.$id._index/route.tsx

@@ -154,6 +154,9 @@ type Order = Order_ & {
   interest_amount: number
   due_date: string
   created_at: string
+  paid_at?: string
+  canceled_at?: string
+  expired_at?: string
   subtotal: number
   discount: number
   address: Address
@@ -196,6 +199,9 @@ export default function Route({ loaderData: { order } }: Route.ComponentProps) {
     enrollments = [],
     seats = [],
     items = [],
+    created_at,
+    expired_at,
+    paid_at,
     subtotal
   } = order
 
@@ -251,9 +257,44 @@ export default function Route({ loaderData: { order } }: Route.ComponentProps) {
             <Item variant="outline" className="items-start">
               <ItemContent>
                 <ItemTitle>Forma de pagamento</ItemTitle>
-                <div className="text-muted-foreground text-sm leading-normal font-normal text-balance">
+                <div className="text-muted-foreground text-sm leading-normal font-normal text-balance space-y-2.5">
+                  <div>
                     {Component && <Component {...order} invoice={invoice} />}
                   </div>
+
+                  <ul>
+                    {paid_at && (
+                      <li>
+                        Pago em{' '}
+                        <DateTime
+                          options={{ hour: '2-digit', minute: '2-digit' }}
+                        >
+                          {paid_at}
+                        </DateTime>
+                      </li>
+                    )}
+
+                    {expired_at && (
+                      <li>
+                        Expirado em{' '}
+                        <DateTime
+                          options={{ hour: '2-digit', minute: '2-digit' }}
+                        >
+                          {expired_at}
+                        </DateTime>
+                      </li>
+                    )}
+
+                    <li>
+                      Comprado em{' '}
+                      <DateTime
+                        options={{ hour: '2-digit', minute: '2-digit' }}
+                      >
+                        {created_at}
+                      </DateTime>
+                    </li>
+                  </ul>
+                </div>
               </ItemContent>
 
               {payment_attempts.length > 0 ? (
@@ -454,7 +495,7 @@ function CreditCardPaymentMethod({
         </li>
         <li>(Crédito) **** {credit_card.last4}</li>
         <li>
-          {stats?.last_attempt_succeeded === false ? (
+          {stats?.last_attempt_succeeded === false && status === 'PENDING' ? (
             <Badge variant="outline" className="text-red-400 px-1.5">
               <AlertCircleIcon /> Negado
             </Badge>
@@ -468,7 +509,9 @@ function CreditCardPaymentMethod({
         {installments}x <Currency>{total / Number(installments)}</Currency>
       </p>
 
-      {stats?.last_attempt_succeeded === false && invoice?.invoice_id ? (
+      {stats?.last_attempt_succeeded === false &&
+      status === 'PENDING' &&
+      invoice?.invoice_id ? (
         <div className="lg:flex justify-center mt-2">
           <CreditCardPaymentDialog
             id={id}