mirror of
https://github.com/aljazceru/opencode.git
synced 2025-12-24 03:04:21 +01:00
zen: support stripe link
This commit is contained in:
Frank
@@ -100,6 +100,17 @@ export function IconCreditCard(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
|
||||
)
|
||||
}
|
||||
|
||||
export function IconStripe(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
|
||||
return (
|
||||
<svg {...props} viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M15.827 12.506c0 .672-.31 1.175-.771 1.175-.293 0-.468-.106-.589-.237l-.007-1.855c.13-.143.31-.247.596-.247.456-.001.771.51.771 1.164zm3.36-1.253c-.312 0-.659.236-.659.798h1.291c0-.562-.325-.798-.632-.798zm4.813-5.253v12c0 1.104-.896 2-2 2h-20c-1.104 0-2-.896-2-2v-12c0-1.104.896-2 2-2h20c1.104 0 2 .896 2 2zm-17.829 7.372c0-1.489-1.909-1.222-1.909-1.784 0-.195.162-.271.424-.271.38 0 .862.116 1.242.321v-1.176c-.414-.165-.827-.228-1.241-.228-1.012.001-1.687.53-1.687 1.414 0 1.382 1.898 1.158 1.898 1.754 0 .231-.201.305-.479.305-.414 0-.947-.171-1.366-.399v1.192c.464.2.935.283 1.365.283 1.038.001 1.753-.512 1.753-1.411zm2.422-3.054h-.949l-.001-1.084-1.219.259-.005 4.006c0 .739.556 1.285 1.297 1.285.408 0 .71-.074.876-.165v-1.016c-.16.064-.948.293-.948-.443v-1.776h.948v-1.066zm2.596 0c-.166-.06-.75-.169-1.042.369l-.078-.369h-1.079v4.377h1.248v-2.967c.295-.388.793-.313.952-.262v-1.148zm1.554 0h-1.253v4.377h1.253v-4.377zm0-1.664l-1.253.266v1.017l1.253-.266v-1.017zm4.314 3.824c0-1.454-.826-2.244-1.703-2.243-.489 0-.805.23-.978.392l-.065-.309h-1.099v5.828l1.249-.265.003-1.413c.179.131.446.316.883.316.893 0 1.71-.719 1.71-2.306zm3.943.045c0-1.279-.619-2.288-1.805-2.288-1.188 0-1.911 1.01-1.911 2.281 0 1.506.852 2.267 2.068 2.267.597 0 1.045-.136 1.384-.324v-1.006c-.34.172-.731.276-1.227.276-.487 0-.915-.172-.971-.758h2.444l.018-.448z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconChevron(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
|
||||
return (
|
||||
<svg {...props} width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
@@ -32,7 +32,8 @@ export async function POST(input: APIEvent) {
|
||||
.update(BillingTable)
|
||||
.set({
|
||||
paymentMethodID,
|
||||
paymentMethodLast4: paymentMethod.card!.last4,
|
||||
paymentMethodLast4: paymentMethod.card?.last4 ?? null,
|
||||
paymentMethodType: paymentMethod.type,
|
||||
})
|
||||
.where(eq(BillingTable.customerID, customerID))
|
||||
})
|
||||
@@ -77,7 +78,8 @@ export async function POST(input: APIEvent) {
|
||||
balance: sql`${BillingTable.balance} + ${centsToMicroCents(Billing.CHARGE_AMOUNT)}`,
|
||||
customerID,
|
||||
paymentMethodID: paymentMethod.id,
|
||||
paymentMethodLast4: paymentMethod.card!.last4,
|
||||
paymentMethodLast4: paymentMethod.card?.last4 ?? null,
|
||||
paymentMethodType: paymentMethod.type,
|
||||
reload: true,
|
||||
reloadError: null,
|
||||
timeReloadError: null,
|
||||
|
||||
@@ -70,6 +70,12 @@
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
[data-slot="type"] {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 400;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { json, query, action, useParams, useAction, createAsync, useSubmission } from "@solidjs/router"
|
||||
import { createMemo, Show } from "solid-js"
|
||||
import { createMemo, Match, Show, Switch } from "solid-js"
|
||||
import { Billing } from "@opencode-ai/console-core/billing.js"
|
||||
import { withActor } from "~/context/auth.withActor"
|
||||
import { IconCreditCard } from "~/component/icon"
|
||||
import { IconCreditCard, IconStripe } from "~/component/icon"
|
||||
import styles from "./billing-section.module.css"
|
||||
import { Database, eq } from "@opencode-ai/console-core/drizzle/index.js"
|
||||
import { BillingTable } from "@opencode-ai/console-core/schema/billing.sql.js"
|
||||
@@ -61,6 +61,7 @@ export function BillingSection() {
|
||||
// Scenario 1: User has not added billing details and has no balance
|
||||
// const balanceInfo = () => ({
|
||||
// balance: 0,
|
||||
// paymentMethodType: null as string | null,
|
||||
// paymentMethodLast4: null as string | null,
|
||||
// reload: false,
|
||||
// reloadError: null as string | null,
|
||||
@@ -70,6 +71,7 @@ export function BillingSection() {
|
||||
// Scenario 2: User has not added billing details but has a balance
|
||||
// const balanceInfo = () => ({
|
||||
// balance: 1500000000, // $15.00
|
||||
// paymentMethodType: null as string | null,
|
||||
// paymentMethodLast4: null as string | null,
|
||||
// reload: false,
|
||||
// reloadError: null as string | null,
|
||||
@@ -79,6 +81,7 @@ export function BillingSection() {
|
||||
// Scenario 3: User has added billing details (reload enabled)
|
||||
// const balanceInfo = () => ({
|
||||
// balance: 750000000, // $7.50
|
||||
// paymentMethodType: "card",
|
||||
// paymentMethodLast4: "4242",
|
||||
// reload: true,
|
||||
// reloadError: null as string | null,
|
||||
@@ -88,12 +91,23 @@ export function BillingSection() {
|
||||
// Scenario 4: User has billing details but reload failed
|
||||
// const balanceInfo = () => ({
|
||||
// balance: 250000000, // $2.50
|
||||
// paymentMethodType: "card",
|
||||
// paymentMethodLast4: "4242",
|
||||
// reload: true,
|
||||
// reloadError: "Your card was declined." as string,
|
||||
// timeReloadError: new Date(Date.now() - 3600000) as Date // 1 hour ago
|
||||
// })
|
||||
|
||||
// Scenario 5: User has Link payment method
|
||||
// const balanceInfo = () => ({
|
||||
// balance: 500000000, // $5.00
|
||||
// paymentMethodType: "link",
|
||||
// paymentMethodLast4: null as string | null,
|
||||
// reload: true,
|
||||
// reloadError: null as string | null,
|
||||
// timeReloadError: null as Date | null
|
||||
// })
|
||||
|
||||
const balanceAmount = createMemo(() => {
|
||||
return ((balanceInfo()?.balance ?? 0) / 100000000).toFixed(2)
|
||||
})
|
||||
@@ -136,13 +150,25 @@ export function BillingSection() {
|
||||
<div data-slot="payment">
|
||||
<div data-slot="credit-card">
|
||||
<div data-slot="card-icon">
|
||||
<IconCreditCard style={{ width: "32px", height: "32px" }} />
|
||||
<Switch fallback={<IconCreditCard style={{ width: "32px", height: "32px" }} />}>
|
||||
<Match when={balanceInfo()?.paymentMethodType === "link"}>
|
||||
<IconStripe style={{ width: "32px", height: "32px" }} />
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
<div data-slot="card-details">
|
||||
<Show when={balanceInfo()?.paymentMethodLast4} fallback={<span data-slot="number">----</span>}>
|
||||
<span data-slot="secret">••••</span>
|
||||
<span data-slot="number">{balanceInfo()?.paymentMethodLast4}</span>
|
||||
</Show>
|
||||
<Switch
|
||||
fallback={
|
||||
<Show when={balanceInfo()?.paymentMethodLast4} fallback={<span data-slot="number">----</span>}>
|
||||
<span data-slot="secret">••••</span>
|
||||
<span data-slot="number">{balanceInfo()?.paymentMethodLast4}</span>
|
||||
</Show>
|
||||
}
|
||||
>
|
||||
<Match when={balanceInfo()?.paymentMethodType === "link"}>
|
||||
<span data-slot="type">Linked to Stripe</span>
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
<div data-slot="button-row">
|
||||
|
||||
Reference in New Issue
Block a user