@jonsoc/console-app 1.1.34

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

@@ -0,0 +1,142 @@
+.root {
+  [data-slot="title-row"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+  }
+
+  [data-slot="usage"] {
+    display: flex;
+    gap: var(--space-6);
+    margin-top: var(--space-4);
+
+    @media (max-width: 40rem) {
+      flex-direction: column;
+      gap: var(--space-4);
+    }
+  }
+
+  [data-slot="usage-item"] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  [data-slot="usage-header"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  [data-slot="usage-label"] {
+    font-size: var(--font-size-md);
+    font-weight: 500;
+    color: var(--color-text);
+  }
+
+  [data-slot="usage-value"] {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+  }
+
+  [data-slot="progress"] {
+    height: 8px;
+    background-color: var(--color-bg-surface);
+    border-radius: var(--border-radius-sm);
+    overflow: hidden;
+  }
+
+  [data-slot="progress-bar"] {
+    height: 100%;
+    background-color: var(--color-accent);
+    border-radius: var(--border-radius-sm);
+    transition: width 0.3s ease;
+  }
+
+  [data-slot="reset-time"] {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+  }
+
+  [data-slot="setting-row"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    margin-top: var(--space-4);
+
+    p {
+      font-size: var(--font-size-sm);
+      line-height: 1.5;
+      color: var(--color-text-secondary);
+      margin: 0;
+    }
+  }
+
+  [data-slot="toggle-label"] {
+    position: relative;
+    display: inline-block;
+    width: 2.5rem;
+    height: 1.5rem;
+    cursor: pointer;
+    flex-shrink: 0;
+
+    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;
+    }
+  }
+}

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

@@ -0,0 +1,269 @@
+import { action, useParams, useAction, useSubmission, json, query, createAsync } from "@solidjs/router"
+import { createStore } from "solid-js/store"
+import { Show } from "solid-js"
+import { Billing } from "@jonsoc/console-core/billing.js"
+import { Database, eq, and, isNull, sql } from "@jonsoc/console-core/drizzle/index.js"
+import { BillingTable, SubscriptionTable } from "@jonsoc/console-core/schema/billing.sql.js"
+import { Actor } from "@jonsoc/console-core/actor.js"
+import { Black } from "@jonsoc/console-core/black.js"
+import { withActor } from "~/context/auth.withActor"
+import { queryBillingInfo } from "../../common"
+import styles from "./black-section.module.css"
+import waitlistStyles from "./black-waitlist-section.module.css"
+
+const querySubscription = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(async () => {
+    const row = await Database.use((tx) =>
+      tx
+        .select({
+          rollingUsage: SubscriptionTable.rollingUsage,
+          fixedUsage: SubscriptionTable.fixedUsage,
+          timeRollingUpdated: SubscriptionTable.timeRollingUpdated,
+          timeFixedUpdated: SubscriptionTable.timeFixedUpdated,
+          subscription: BillingTable.subscription,
+        })
+        .from(BillingTable)
+        .innerJoin(SubscriptionTable, eq(SubscriptionTable.workspaceID, BillingTable.workspaceID))
+        .where(and(eq(SubscriptionTable.workspaceID, Actor.workspace()), isNull(SubscriptionTable.timeDeleted)))
+        .then((r) => r[0]),
+    )
+    if (!row?.subscription) return null
+
+    return {
+      plan: row.subscription.plan,
+      useBalance: row.subscription.useBalance ?? false,
+      rollingUsage: Black.analyzeRollingUsage({
+        plan: row.subscription.plan,
+        usage: row.rollingUsage ?? 0,
+        timeUpdated: row.timeRollingUpdated ?? new Date(),
+      }),
+      weeklyUsage: Black.analyzeWeeklyUsage({
+        plan: row.subscription.plan,
+        usage: row.fixedUsage ?? 0,
+        timeUpdated: row.timeFixedUpdated ?? new Date(),
+      }),
+    }
+  }, workspaceID)
+}, "subscription.get")
+
+function formatResetTime(seconds: number) {
+  const days = Math.floor(seconds / 86400)
+  if (days >= 1) {
+    const hours = Math.floor((seconds % 86400) / 3600)
+    return `${days} ${days === 1 ? "day" : "days"} ${hours} ${hours === 1 ? "hour" : "hours"}`
+  }
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  if (hours >= 1) return `${hours} ${hours === 1 ? "hour" : "hours"} ${minutes} ${minutes === 1 ? "minute" : "minutes"}`
+  if (minutes === 0) return "a few seconds"
+  return `${minutes} ${minutes === 1 ? "minute" : "minutes"}`
+}
+
+const cancelWaitlist = action(async (workspaceID: string) => {
+  "use server"
+  return json(
+    await withActor(async () => {
+      await Database.use((tx) =>
+        tx
+          .update(BillingTable)
+          .set({
+            subscriptionPlan: null,
+            timeSubscriptionBooked: null,
+            timeSubscriptionSelected: null,
+          })
+          .where(eq(BillingTable.workspaceID, workspaceID)),
+      )
+      return { error: undefined }
+    }, workspaceID).catch((e) => ({ error: e.message as string })),
+    { revalidate: [queryBillingInfo.key, querySubscription.key] },
+  )
+}, "cancelWaitlist")
+
+const enroll = action(async (workspaceID: string) => {
+  "use server"
+  return json(
+    await withActor(async () => {
+      await Billing.subscribe({ seats: 1 })
+      return { error: undefined }
+    }, workspaceID).catch((e) => ({ error: e.message as string })),
+    { revalidate: [queryBillingInfo.key, querySubscription.key] },
+  )
+}, "enroll")
+
+const createSessionUrl = action(async (workspaceID: string, returnUrl: string) => {
+  "use server"
+  return json(
+    await withActor(
+      () =>
+        Billing.generateSessionUrl({ returnUrl })
+          .then((data) => ({ error: undefined, data }))
+          .catch((e) => ({
+            error: e.message as string,
+            data: undefined,
+          })),
+      workspaceID,
+    ),
+    { revalidate: [queryBillingInfo.key, querySubscription.key] },
+  )
+}, "sessionUrl")
+
+const setUseBalance = action(async (form: FormData) => {
+  "use server"
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  const useBalance = form.get("useBalance")?.toString() === "true"
+
+  return json(
+    await withActor(async () => {
+      await Database.use((tx) =>
+        tx
+          .update(BillingTable)
+          .set({
+            subscription: useBalance
+              ? sql`JSON_SET(subscription, '$.useBalance', true)`
+              : sql`JSON_REMOVE(subscription, '$.useBalance')`,
+          })
+          .where(eq(BillingTable.workspaceID, workspaceID)),
+      )
+      return { error: undefined }
+    }, workspaceID).catch((e) => ({ error: e.message as string })),
+    { revalidate: [queryBillingInfo.key, querySubscription.key] },
+  )
+}, "setUseBalance")
+
+export function BlackSection() {
+  const params = useParams()
+  const billing = createAsync(() => queryBillingInfo(params.id!))
+  const subscription = createAsync(() => querySubscription(params.id!))
+  const sessionAction = useAction(createSessionUrl)
+  const sessionSubmission = useSubmission(createSessionUrl)
+  const cancelAction = useAction(cancelWaitlist)
+  const cancelSubmission = useSubmission(cancelWaitlist)
+  const enrollAction = useAction(enroll)
+  const enrollSubmission = useSubmission(enroll)
+  const useBalanceSubmission = useSubmission(setUseBalance)
+  const [store, setStore] = createStore({
+    sessionRedirecting: false,
+    cancelled: false,
+    enrolled: false,
+  })
+
+  async function onClickSession() {
+    const result = await sessionAction(params.id!, window.location.href)
+    if (result.data) {
+      setStore("sessionRedirecting", true)
+      window.location.href = result.data
+    }
+  }
+
+  async function onClickCancel() {
+    const result = await cancelAction(params.id!)
+    if (!result.error) {
+      setStore("cancelled", true)
+    }
+  }
+
+  async function onClickEnroll() {
+    const result = await enrollAction(params.id!)
+    if (!result.error) {
+      setStore("enrolled", true)
+    }
+  }
+
+  return (
+    <>
+      <Show when={subscription()}>
+        {(sub) => (
+          <section class={styles.root}>
+            <div data-slot="section-title">
+              <h2>Subscription</h2>
+              <div data-slot="title-row">
+                <p>You are subscribed to JonsOC Black for ${sub().plan} per month.</p>
+                <button
+                  data-color="primary"
+                  disabled={sessionSubmission.pending || store.sessionRedirecting}
+                  onClick={onClickSession}
+                >
+                  {sessionSubmission.pending || store.sessionRedirecting ? "Loading..." : "Manage Subscription"}
+                </button>
+              </div>
+            </div>
+            <div data-slot="usage">
+              <div data-slot="usage-item">
+                <div data-slot="usage-header">
+                  <span data-slot="usage-label">5-hour Usage</span>
+                  <span data-slot="usage-value">{sub().rollingUsage.usagePercent}%</span>
+                </div>
+                <div data-slot="progress">
+                  <div data-slot="progress-bar" style={{ width: `${sub().rollingUsage.usagePercent}%` }} />
+                </div>
+                <span data-slot="reset-time">Resets in {formatResetTime(sub().rollingUsage.resetInSec)}</span>
+              </div>
+              <div data-slot="usage-item">
+                <div data-slot="usage-header">
+                  <span data-slot="usage-label">Weekly Usage</span>
+                  <span data-slot="usage-value">{sub().weeklyUsage.usagePercent}%</span>
+                </div>
+                <div data-slot="progress">
+                  <div data-slot="progress-bar" style={{ width: `${sub().weeklyUsage.usagePercent}%` }} />
+                </div>
+                <span data-slot="reset-time">Resets in {formatResetTime(sub().weeklyUsage.resetInSec)}</span>
+              </div>
+            </div>
+            <form action={setUseBalance} method="post" data-slot="setting-row">
+              <p>Use your available balance after reaching the usage limits</p>
+              <input type="hidden" name="workspaceID" value={params.id} />
+              <input type="hidden" name="useBalance" value={sub().useBalance ? "false" : "true"} />
+              <label data-slot="toggle-label">
+                <input
+                  type="checkbox"
+                  checked={sub().useBalance}
+                  disabled={useBalanceSubmission.pending}
+                  onChange={(e) => e.currentTarget.form?.requestSubmit()}
+                />
+                <span></span>
+              </label>
+            </form>
+          </section>
+        )}
+      </Show>
+      <Show when={billing()?.timeSubscriptionBooked}>
+        <section class={waitlistStyles.root}>
+          <div data-slot="section-title">
+            <h2>Waitlist</h2>
+            <div data-slot="title-row">
+              <p>
+                {billing()?.timeSubscriptionSelected
+                  ? `We're ready to enroll you into the $${billing()?.subscriptionPlan} per month JonsOC Black plan.`
+                  : `You are on the waitlist for the $${billing()?.subscriptionPlan} per month JonsOC Black plan.`}
+              </p>
+              <button
+                data-color="danger"
+                disabled={cancelSubmission.pending || store.cancelled}
+                onClick={onClickCancel}
+              >
+                {cancelSubmission.pending ? "Leaving..." : store.cancelled ? "Left" : "Leave Waitlist"}
+              </button>
+            </div>
+          </div>
+          <Show when={billing()?.timeSubscriptionSelected}>
+            <div data-slot="enroll-section">
+              <button
+                data-slot="enroll-button"
+                data-color="primary"
+                disabled={enrollSubmission.pending || store.enrolled}
+                onClick={onClickEnroll}
+              >
+                {enrollSubmission.pending ? "Enrolling..." : store.enrolled ? "Enrolled" : "Enroll"}
+              </button>
+              <p data-slot="enroll-note">
+                When you click Enroll, your subscription starts immediately and your card will be charged.
+              </p>
+            </div>
+          </Show>
+        </section>
+      </Show>
+    </>
+  )
+}

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

@@ -0,0 +1,23 @@
+.root {
+  [data-slot="title-row"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+  }
+
+  [data-slot="enroll-section"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  [data-slot="enroll-button"] {
+    align-self: flex-start;
+  }
+
+  [data-slot="enroll-note"] {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+  }
+}

package/src/routes/workspace/[id]/billing/index.tsx

@@ -0,0 +1,32 @@
+import { MonthlyLimitSection } from "./monthly-limit-section"
+import { BillingSection } from "./billing-section"
+import { ReloadSection } from "./reload-section"
+import { PaymentSection } from "./payment-section"
+import { BlackSection } from "./black-section"
+import { Show } from "solid-js"
+import { createAsync, useParams } from "@solidjs/router"
+import { queryBillingInfo, querySessionInfo } from "../../common"
+
+export default function () {
+  const params = useParams()
+  const sessionInfo = createAsync(() => querySessionInfo(params.id!))
+  const billingInfo = createAsync(() => queryBillingInfo(params.id!))
+
+  return (
+    <div data-page="workspace-[id]">
+      <div data-slot="sections">
+        <Show when={sessionInfo()?.isAdmin}>
+          <Show when={billingInfo()?.subscriptionID || billingInfo()?.timeSubscriptionBooked}>
+            <BlackSection />
+          </Show>
+          <BillingSection />
+          <Show when={billingInfo()?.customerID}>
+            <ReloadSection />
+            <MonthlyLimitSection />
+            <PaymentSection />
+          </Show>
+        </Show>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,96 @@
+.root {
+  [data-slot="balance"] {
+    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);
+    min-width: 15rem;
+    width: fit-content;
+
+    @media (max-width: 30rem) {
+      width: 100%;
+    }
+
+    [data-slot="amount"] {
+      padding: var(--space-3-5) var(--space-4);
+      background-color: var(--color-bg-surface);
+      border-radius: var(--border-radius-sm);
+      display: flex;
+      align-items: baseline;
+      gap: var(--space-1);
+      justify-content: flex-end;
+
+      [data-slot="currency"] {
+        position: relative;
+        bottom: 2px;
+        font-size: var(--font-size-lg);
+        color: var(--color-text-muted);
+        font-weight: 400;
+      }
+
+      [data-slot="value"] {
+        font-size: var(--font-size-3xl);
+        font-weight: 500;
+        color: var(--color-text);
+      }
+    }
+
+    [data-slot="create-form"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
+      margin-top: var(--space-1);
+
+      [data-slot="input-container"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-1);
+      }
+
+      @media (max-width: 30rem) {
+        gap: var(--space-2);
+      }
+
+      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="form-actions"] {
+        display: flex;
+        gap: var(--space-2);
+        justify-content: flex-end;
+      }
+
+      [data-slot="form-error"] {
+        color: var(--color-danger);
+        font-size: var(--font-size-sm);
+        line-height: 1.4;
+      }
+    }
+  }
+
+  [data-slot="usage-status"] {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    margin: 0;
+    line-height: 1.4;
+  }
+}

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

@@ -0,0 +1,133 @@
+import { json, action, useParams, createAsync, useSubmission } from "@solidjs/router"
+import { createEffect, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { withActor } from "~/context/auth.withActor"
+import { Billing } from "@jonsoc/console-core/billing.js"
+import styles from "./monthly-limit-section.module.css"
+import { queryBillingInfo } from "../../common"
+
+const setMonthlyLimit = action(async (form: FormData) => {
+  "use server"
+  const limit = form.get("limit")?.toString()
+  if (!limit) return { error: "Limit is required." }
+  const numericLimit = parseInt(limit)
+  if (numericLimit < 0) return { error: "Set a valid monthly limit." }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required." }
+  return json(
+    await withActor(
+      () =>
+        Billing.setMonthlyLimit(numericLimit)
+          .then((data) => ({ error: undefined, data }))
+          .catch((e) => ({ error: e.message as string })),
+      workspaceID,
+    ),
+    { revalidate: queryBillingInfo.key },
+  )
+}, "billing.setMonthlyLimit")
+
+export function MonthlyLimitSection() {
+  const params = useParams()
+  const submission = useSubmission(setMonthlyLimit)
+  const [store, setStore] = createStore({ show: false })
+  const billingInfo = createAsync(() => queryBillingInfo(params.id!))
+
+  let input: HTMLInputElement
+
+  createEffect(() => {
+    if (!submission.pending && submission.result && !submission.result.error) {
+      hide()
+    }
+  })
+
+  function show() {
+    // submission.clear() does not clear the result in some cases, ie.
+    //  1. Create key with empty name => error shows
+    //  2. Put in a key name and creates the key => form hides
+    //  3. Click add key button again => form shows with the same error if
+    //     submission.clear() is called only once
+    while (true) {
+      submission.clear()
+      if (!submission.result) break
+    }
+    setStore("show", true)
+    input.focus()
+  }
+
+  function hide() {
+    setStore("show", false)
+  }
+
+  return (
+    <section class={styles.root}>
+      <div data-slot="section-title">
+        <h2>Monthly Limit</h2>
+        <p>Set a monthly usage limit for your account.</p>
+      </div>
+      <div data-slot="section-content">
+        <div data-slot="balance">
+          <div data-slot="amount">
+            {billingInfo()?.monthlyLimit ? <span data-slot="currency">$</span> : null}
+            <span data-slot="value">{billingInfo()?.monthlyLimit ?? "-"}</span>
+          </div>
+          <Show
+            when={!store.show}
+            fallback={
+              <form action={setMonthlyLimit} method="post" data-slot="create-form">
+                <div data-slot="input-container">
+                  <input
+                    required
+                    ref={(r) => (input = r)}
+                    data-component="input"
+                    name="limit"
+                    type="number"
+                    placeholder="50"
+                  />
+                  <Show when={submission.result && submission.result.error}>
+                    {(err) => <div data-slot="form-error">{err()}</div>}
+                  </Show>
+                </div>
+                <input type="hidden" name="workspaceID" value={params.id} />
+                <div data-slot="form-actions">
+                  <button type="reset" data-color="ghost" onClick={() => hide()}>
+                    Cancel
+                  </button>
+                  <button type="submit" data-color="primary" disabled={submission.pending}>
+                    {submission.pending ? "Setting..." : "Set"}
+                  </button>
+                </div>
+              </form>
+            }
+          >
+            <button data-color="primary" onClick={() => show()}>
+              {billingInfo()?.monthlyLimit ? "Edit Limit" : "Set Limit"}
+            </button>
+          </Show>
+        </div>
+        <Show when={billingInfo()?.monthlyLimit} fallback={<p data-slot="usage-status">No usage limit set.</p>}>
+          <p data-slot="usage-status">
+            Current usage for {new Date().toLocaleDateString("en-US", { month: "long", timeZone: "UTC" })} is $
+            {(() => {
+              const dateLastUsed = billingInfo()?.timeMonthlyUsageUpdated
+              if (!dateLastUsed) return "0"
+
+              const current = new Date().toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "long",
+                timeZone: "UTC",
+              })
+              const lastUsed = dateLastUsed.toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "long",
+                timeZone: "UTC",
+              })
+              if (current !== lastUsed) return "0"
+              return ((billingInfo()?.monthlyUsage ?? 0) / 100000000).toFixed(2)
+            })()}
+            .
+          </p>
+        </Show>
+      </div>
+    </section>
+  )
+}