wip: zen

1 files changed, 22 insertions, 1 deletions

diff --git a/cloud/app/src/component/workspace/payment-section.tsx b/cloud/app/src/component/workspace/payment-section.tsx
index a346cb55f..d45b01c08 100644
--- a/cloud/app/src/component/workspace/payment-section.tsx
+++ b/cloud/app/src/component/workspace/payment-section.tsx
@@ -1,5 +1,5 @@
 import { Billing } from "@opencode/cloud-core/billing.js"
-import { query, useParams, createAsync } from "@solidjs/router"
+import { query, action, useParams, createAsync, useAction } from "@solidjs/router"
 import { For } from "solid-js"
 import { withActor } from "~/context/auth.withActor"
 import { formatDateUTC, formatDateForTable } from "./common"
@@ -12,9 +12,15 @@ const getPaymentsInfo = query(async (workspaceID: string) => {
   }, workspaceID)
 }, "payment.list")
 
+const downloadReceipt = action(async (workspaceID: string, paymentID: string) => {
+  "use server"
+  return withActor(() => Billing.generateReceiptUrl({ paymentID }), workspaceID)
+}, "receipt.download")
+
 export function PaymentSection() {
   const params = useParams()
   const payments = createAsync(() => getPaymentsInfo(params.id))
+  const downloadReceiptAction = useAction(downloadReceipt)
 
   return (
     payments() &&
@@ -31,6 +37,7 @@ export function PaymentSection() {
                 <th>Date</th>
                 <th>Payment ID</th>
                 <th>Amount</th>
+                <th>Receipt</th>
               </tr>
             </thead>
             <tbody>
@@ -44,6 +51,20 @@ export function PaymentSection() {
                       </td>
                       <td data-slot="payment-id">{payment.id}</td>
                       <td data-slot="payment-amount">${((payment.amount ?? 0) / 100000000).toFixed(2)}</td>
+                      <td data-slot="payment-receipt">
+                        <button
+                          onClick={async () => {
+                            const receiptUrl = await downloadReceiptAction(params.id, payment.paymentID!)
+                            if (receiptUrl) {
+                              window.open(receiptUrl, "_blank")
+                            }
+                          }}
+                          data-slot="receipt-button"
+                          style="cursor: pointer;"
+                        >
+                          download
+                        </button>
+                      </td>
                     </tr>
                   )
                 }}