@jonsoc/console-app 1.1.34

package/src/routes/workspace/[id]/billing/payment-section.module.css

@@ -0,0 +1,93 @@
+.root {
+  [data-slot="payments-table"] {
+    overflow-x: auto;
+  }
+
+  [data-slot="payments-table-element"] {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--font-size-sm);
+
+    thead {
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    th {
+      padding: var(--space-3) var(--space-4);
+      text-align: left;
+      font-weight: normal;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+    }
+
+    td {
+      padding: var(--space-3) var(--space-4);
+      border-bottom: 1px solid var(--color-border-muted);
+      color: var(--color-text-muted);
+      font-family: var(--font-mono);
+
+      &[data-slot="payment-date"] {
+        color: var(--color-text);
+      }
+
+      &[data-slot="payment-id"] {
+        font-family: var(--font-mono);
+        font-weight: 400;
+        color: var(--color-text-muted);
+        max-width: 200px;
+        word-break: break-word;
+      }
+
+      &[data-slot="payment-amount"] {
+        color: var(--color-text);
+
+        &[data-refunded="true"] {
+          text-decoration: line-through;
+        }
+      }
+
+      &[data-slot="payment-receipt"] {
+        span {
+          display: inline-block;
+          padding: var(--space-3) var(--space-4);
+          font-size: var(--font-size-sm);
+          line-height: 1.5;
+        }
+
+        button {
+          font-size: var(--font-size-sm);
+        }
+      }
+    }
+
+    tbody tr {
+      &:last-child td {
+        border-bottom: none;
+      }
+    }
+
+    @media (max-width: 40rem) {
+      th,
+      td {
+        padding: var(--space-2) var(--space-3);
+        font-size: var(--font-size-xs);
+      }
+
+      th {
+        &:nth-child(2)
+
+        /* Payment ID */ {
+          display: none;
+        }
+      }
+
+      td {
+        &:nth-child(2)
+
+        /* Payment ID */ {
+          display: none;
+        }
+      }
+    }
+  }
+}

package/src/routes/workspace/[id]/billing/payment-section.tsx

@@ -0,0 +1,122 @@
+import { Billing } from "@jonsoc/console-core/billing.js"
+import { query, action, useParams, createAsync, useAction } from "@solidjs/router"
+import { For, Match, Show, Switch } from "solid-js"
+import { withActor } from "~/context/auth.withActor"
+import { formatDateUTC, formatDateForTable } from "../../common"
+import styles from "./payment-section.module.css"
+
+const getPaymentsInfo = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(async () => {
+    return await Billing.payments()
+  }, 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)
+
+  // DUMMY DATA FOR TESTING
+  // const payments = () => [
+  //   {
+  //     id: "pi_3QK1x2FT9vXn4A6r1234567890",
+  //     paymentID: "pi_3QK1x2FT9vXn4A6r1234567890",
+  //     timeCreated: new Date(Date.now() - 86400000 * 1).toISOString(), // 1 day ago
+  //     amount: 2100000000, // $21.00 ($20 + $1 fee)
+  //   },
+  //   {
+  //     id: "pi_3QJ8k7FT9vXn4A6r0987654321",
+  //     paymentID: "pi_3QJ8k7FT9vXn4A6r0987654321",
+  //     timeCreated: new Date(Date.now() - 86400000 * 15).toISOString(), // 15 days ago
+  //     amount: 2100000000, // $21.00
+  //   },
+  //   {
+  //     id: "pi_3QI5m1FT9vXn4A6r5678901234",
+  //     paymentID: "pi_3QI5m1FT9vXn4A6r5678901234",
+  //     timeCreated: new Date(Date.now() - 86400000 * 32).toISOString(), // 32 days ago
+  //     amount: 2100000000, // $21.00
+  //   },
+  //   {
+  //     id: "pi_3QH2n9FT9vXn4A6r3456789012",
+  //     paymentID: "pi_3QH2n9FT9vXn4A6r3456789012",
+  //     timeCreated: new Date(Date.now() - 86400000 * 47).toISOString(), // 47 days ago
+  //     amount: 2100000000, // $21.00
+  //   },
+  //   {
+  //     id: "pi_3QG7p4FT9vXn4A6r7890123456",
+  //     paymentID: "pi_3QG7p4FT9vXn4A6r7890123456",
+  //     timeCreated: new Date(Date.now() - 86400000 * 63).toISOString(), // 63 days ago
+  //     amount: 2100000000, // $21.00
+  //   },
+  // ]
+
+  return (
+    <Show when={payments() && payments()!.length > 0}>
+      <section class={styles.root}>
+        <div data-slot="section-title">
+          <h2>Payments History</h2>
+          <p>Recent payment transactions.</p>
+        </div>
+        <div data-slot="payments-table">
+          <table data-slot="payments-table-element">
+            <thead>
+              <tr>
+                <th>Date</th>
+                <th>Payment ID</th>
+                <th>Amount</th>
+                <th>Receipt</th>
+              </tr>
+            </thead>
+            <tbody>
+              <For each={payments()!}>
+                {(payment) => {
+                  const date = new Date(payment.timeCreated)
+                  const amount =
+                    payment.enrichment?.type === "subscription" && payment.enrichment.couponID ? 0 : payment.amount
+                  return (
+                    <tr>
+                      <td data-slot="payment-date" title={formatDateUTC(date)}>
+                        {formatDateForTable(date)}
+                      </td>
+                      <td data-slot="payment-id">{payment.id}</td>
+                      <td data-slot="payment-amount" data-refunded={!!payment.timeRefunded}>
+                        ${((amount ?? 0) / 100000000).toFixed(2)}
+                        <Switch>
+                          <Match when={payment.enrichment?.type === "credit"}> (credit)</Match>
+                          <Match when={payment.enrichment?.type === "subscription"}> (subscription)</Match>
+                        </Switch>
+                      </td>
+                      <td data-slot="payment-receipt">
+                        {payment.paymentID ? (
+                          <button
+                            onClick={async () => {
+                              const receiptUrl = await downloadReceiptAction(params.id!, payment.paymentID!)
+                              if (receiptUrl) {
+                                window.open(receiptUrl, "_blank")
+                              }
+                            }}
+                            data-slot="receipt-button"
+                          >
+                            View
+                          </button>
+                        ) : (
+                          <span>-</span>
+                        )}
+                      </td>
+                    </tr>
+                  )
+                }}
+              </For>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </Show>
+  )
+}

package/src/routes/workspace/[id]/billing/reload-section.module.css

@@ -0,0 +1,261 @@
+.root {
+  [data-slot="title-row"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+  }
+
+  [data-slot="section-content"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  [data-slot="setting-row"] {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+
+    p {
+      flex: 1;
+      font-size: var(--font-size-sm);
+      line-height: 1.5;
+      color: var(--color-text-secondary);
+      margin: 0;
+
+      b {
+        font-weight: 600;
+      }
+    }
+
+    [data-slot="create-form"] {
+      margin: 0;
+    }
+  }
+
+  [data-slot="create-form"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+    margin-top: var(--space-4);
+
+    [data-slot="form-field"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+
+      label {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+      }
+
+      [data-slot="field-label"] {
+        font-size: var(--font-size-sm);
+        font-weight: 500;
+        color: var(--color-text-muted);
+      }
+
+      [data-slot="toggle-container"] {
+        display: flex;
+        align-items: center;
+      }
+
+      input[data-component="input"] {
+        flex: 1;
+        padding: var(--space-2) var(--space-3);
+        border: 1px solid var(--color-border);
+        border-radius: var(--border-radius-sm);
+        background-color: var(--color-bg);
+        color: var(--color-text);
+        font-size: var(--font-size-sm);
+        font-family: var(--font-mono);
+
+        &:focus {
+          outline: none;
+          border-color: var(--color-accent);
+        }
+
+        &::placeholder {
+          color: var(--color-text-disabled);
+        }
+      }
+    }
+
+    [data-slot="input-row"] {
+      display: flex;
+      flex-direction: row;
+      gap: var(--space-3);
+
+      @media (max-width: 40rem) {
+        flex-direction: column;
+        gap: var(--space-2);
+      }
+    }
+
+    [data-slot="input-field"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-1);
+      flex: 1;
+
+      p {
+        line-height: 1.2;
+        margin: 0;
+        color: var(--color-text-muted);
+        font-size: var(--font-size-sm);
+      }
+
+      input[data-component="input"] {
+        flex: 1;
+        padding: var(--space-2) var(--space-3);
+        border: 1px solid var(--color-border);
+        border-radius: var(--border-radius-sm);
+        background-color: var(--color-bg);
+        color: var(--color-text);
+        font-size: var(--font-size-sm);
+        line-height: 1.5;
+        min-width: 0;
+
+        &:focus {
+          outline: none;
+          border-color: var(--color-accent);
+          box-shadow: 0 0 0 3px var(--color-accent-alpha);
+        }
+
+        &::placeholder {
+          color: var(--color-text-disabled);
+        }
+
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+          background-color: var(--color-bg-surface);
+        }
+      }
+
+      [data-slot="field-with-connector"] {
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+
+        [data-slot="field-connector"] {
+          font-size: var(--font-size-sm);
+          color: var(--color-text-muted);
+          white-space: nowrap;
+        }
+
+        input[data-component="input"] {
+          flex: 1;
+          min-width: 80px;
+        }
+      }
+    }
+
+    [data-slot="form-actions"] {
+      display: flex;
+      gap: var(--space-2);
+      margin-top: var(--space-1);
+    }
+
+    [data-slot="form-error"] {
+      color: var(--color-danger);
+      font-size: var(--font-size-sm);
+      line-height: 1.4;
+      margin-top: calc(var(--space-1) * -1);
+    }
+
+    [data-slot="model-toggle-label"] {
+      position: relative;
+      display: inline-block;
+      width: 2.5rem;
+      height: 1.5rem;
+      cursor: pointer;
+
+      input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      span {
+        position: absolute;
+        inset: 0;
+        background-color: #ccc;
+        border: 1px solid #bbb;
+        border-radius: 1.5rem;
+        transition: all 0.3s ease;
+        cursor: pointer;
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 0.125rem;
+          width: 1.25rem;
+          height: 1.25rem;
+          background-color: white;
+          border: 1px solid #ddd;
+          border-radius: 50%;
+          transform: translateY(-50%);
+          transition: all 0.3s ease;
+        }
+      }
+
+      input:checked + span {
+        background-color: #21ad0e;
+        border-color: #148605;
+
+        &::before {
+          transform: translateX(1rem) translateY(-50%);
+        }
+      }
+
+      &:hover span {
+        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+      }
+
+      input:checked:hover + span {
+        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
+      }
+
+      &:has(input:disabled) {
+        cursor: not-allowed;
+      }
+
+      input:disabled + span {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  [data-slot="reload-error"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    margin-top: var(--space-4);
+
+    p {
+      color: var(--color-danger);
+      font-size: var(--font-size-sm);
+      line-height: 1.4;
+      margin: 0;
+      flex: 1;
+    }
+
+    [data-slot="create-form"] {
+      display: flex;
+      gap: var(--space-2);
+      margin: 0;
+      flex-shrink: 0;
+      padding: 0;
+      border: none;
+    }
+  }
+}

package/src/routes/workspace/[id]/billing/reload-section.tsx

@@ -0,0 +1,213 @@
+import { json, action, useParams, createAsync, useSubmission } from "@solidjs/router"
+import { createEffect, Show, createMemo } from "solid-js"
+import { createStore } from "solid-js/store"
+import { withActor } from "~/context/auth.withActor"
+import { Billing } from "@jonsoc/console-core/billing.js"
+import { Database, eq } from "@jonsoc/console-core/drizzle/index.js"
+import { BillingTable } from "@jonsoc/console-core/schema/billing.sql.js"
+import styles from "./reload-section.module.css"
+import { queryBillingInfo } from "../../common"
+
+const reload = action(async (form: FormData) => {
+  "use server"
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  return json(await withActor(() => Billing.reload(), workspaceID), {
+    revalidate: queryBillingInfo.key,
+  })
+}, "billing.reload")
+
+const setReload = action(async (form: FormData) => {
+  "use server"
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  const reloadValue = form.get("reload")?.toString() === "true"
+  const amountStr = form.get("reloadAmount")?.toString()
+  const triggerStr = form.get("reloadTrigger")?.toString()
+
+  const reloadAmount = amountStr && amountStr.trim() !== "" ? parseInt(amountStr) : null
+  const reloadTrigger = triggerStr && triggerStr.trim() !== "" ? parseInt(triggerStr) : null
+
+  if (reloadValue) {
+    if (reloadAmount === null || reloadAmount < Billing.RELOAD_AMOUNT_MIN)
+      return { error: `Reload amount must be at least $${Billing.RELOAD_AMOUNT_MIN}` }
+    if (reloadTrigger === null || reloadTrigger < Billing.RELOAD_TRIGGER_MIN)
+      return { error: `Balance trigger must be at least $${Billing.RELOAD_TRIGGER_MIN}` }
+  }
+
+  return json(
+    await Database.use((tx) =>
+      tx
+        .update(BillingTable)
+        .set({
+          reload: reloadValue,
+          ...(reloadAmount !== null ? { reloadAmount } : {}),
+          ...(reloadTrigger !== null ? { reloadTrigger } : {}),
+          ...(reloadValue
+            ? {
+                reloadError: null,
+                timeReloadError: null,
+              }
+            : {}),
+        })
+        .where(eq(BillingTable.workspaceID, workspaceID)),
+    ),
+    { revalidate: queryBillingInfo.key },
+  )
+}, "billing.setReload")
+
+export function ReloadSection() {
+  const params = useParams()
+  const billingInfo = createAsync(() => queryBillingInfo(params.id!))
+  const setReloadSubmission = useSubmission(setReload)
+  const reloadSubmission = useSubmission(reload)
+  const [store, setStore] = createStore({
+    show: false,
+    reload: false,
+    reloadAmount: "",
+    reloadTrigger: "",
+  })
+
+  const processingFee = createMemo(() => {
+    const reloadAmount = billingInfo()?.reloadAmount
+    if (!reloadAmount) return "0.00"
+    return (((reloadAmount + 0.3) / 0.956) * 0.044 + 0.3).toFixed(2)
+  })
+
+  createEffect(() => {
+    if (!setReloadSubmission.pending && setReloadSubmission.result && !(setReloadSubmission.result as any).error) {
+      setStore("show", false)
+    }
+  })
+
+  function show() {
+    while (true) {
+      setReloadSubmission.clear()
+      if (!setReloadSubmission.result) break
+    }
+    const info = billingInfo()!
+    setStore("show", true)
+    setStore("reload", info.reload ? true : true)
+    setStore("reloadAmount", info.reloadAmount.toString())
+    setStore("reloadTrigger", info.reloadTrigger.toString())
+  }
+
+  function hide() {
+    setStore("show", false)
+  }
+
+  return (
+    <section class={styles.root}>
+      <div data-slot="section-title">
+        <h2>Auto Reload</h2>
+        <div data-slot="title-row">
+          <Show
+            when={billingInfo()?.reload}
+            fallback={
+              <p>
+                Auto reload is <b>disabled</b>. Enable to automatically reload when balance is low.
+              </p>
+            }
+          >
+            <p>
+              Auto reload is <b>enabled</b>. We'll reload <b>${billingInfo()?.reloadAmount}</b> (+${processingFee()}{" "}
+              processing fee) when balance reaches <b>${billingInfo()?.reloadTrigger}</b>.
+            </p>
+          </Show>
+          <button data-color="primary" type="button" onClick={() => show()}>
+            {billingInfo()?.reload ? "Edit" : "Enable"}
+          </button>
+        </div>
+      </div>
+      <Show when={store.show}>
+        <form action={setReload} method="post" data-slot="create-form">
+          <div data-slot="form-field">
+            <label>
+              <span data-slot="field-label">Enable Auto Reload</span>
+              <div data-slot="toggle-container">
+                <label data-slot="model-toggle-label">
+                  <input
+                    type="checkbox"
+                    name="reload"
+                    value="true"
+                    checked={store.reload}
+                    onChange={(e) => setStore("reload", e.currentTarget.checked)}
+                  />
+                  <span></span>
+                </label>
+              </div>
+            </label>
+          </div>
+
+          <div data-slot="input-row">
+            <div data-slot="input-field">
+              <p>Reload $</p>
+              <input
+                data-component="input"
+                name="reloadAmount"
+                type="number"
+                min={billingInfo()?.reloadAmountMin.toString()}
+                step="1"
+                value={store.reloadAmount}
+                onInput={(e) => setStore("reloadAmount", e.currentTarget.value)}
+                placeholder={billingInfo()?.reloadAmount.toString()}
+                disabled={!store.reload}
+              />
+            </div>
+            <div data-slot="input-field">
+              <p>When balance reaches $</p>
+              <input
+                data-component="input"
+                name="reloadTrigger"
+                type="number"
+                min={billingInfo()?.reloadTriggerMin.toString()}
+                step="1"
+                value={store.reloadTrigger}
+                onInput={(e) => setStore("reloadTrigger", e.currentTarget.value)}
+                placeholder={billingInfo()?.reloadTrigger.toString()}
+                disabled={!store.reload}
+              />
+            </div>
+          </div>
+
+          <Show when={setReloadSubmission.result && (setReloadSubmission.result as any).error}>
+            {(err: any) => <div data-slot="form-error">{err()}</div>}
+          </Show>
+          <input type="hidden" name="workspaceID" value={params.id} />
+          <div data-slot="form-actions">
+            <button type="button" data-color="ghost" onClick={() => hide()}>
+              Cancel
+            </button>
+            <button type="submit" data-color="primary" disabled={setReloadSubmission.pending}>
+              {setReloadSubmission.pending ? "Saving..." : "Save"}
+            </button>
+          </div>
+        </form>
+      </Show>
+      <Show when={billingInfo()?.reload && billingInfo()?.reloadError}>
+        <div data-slot="section-content">
+          <div data-slot="reload-error">
+            <p>
+              Reload failed at{" "}
+              {billingInfo()?.timeReloadError!.toLocaleString("en-US", {
+                month: "short",
+                day: "numeric",
+                hour: "numeric",
+                minute: "2-digit",
+                second: "2-digit",
+              })}
+              . Reason: {billingInfo()?.reloadError?.replace(/\.$/, "")}. Please update your payment method and try
+              again.
+            </p>
+            <form action={reload} method="post" data-slot="create-form">
+              <input type="hidden" name="workspaceID" value={params.id} />
+              <button data-color="ghost" type="submit" disabled={reloadSubmission.pending}>
+                {reloadSubmission.pending ? "Retrying..." : "Retry"}
+              </button>
+            </form>
+          </div>
+        </div>
+      </Show>
+    </section>
+  )
+}