sync

packages/console/app/src/routes/workspace/[id]/billing/billing-section.tsx

@@ -93,7 +93,7 @@ export function BillingSection() {
             </span>
             <span data-slot="balance-label">Current Balance</span>
           </div>
-          <Show when={balanceInfo()?.paymentMethodType}>
+          <Show when={balanceInfo()?.customerID}>
             <div data-slot="balance-right-section">
               <button
                 data-color="primary"
@@ -149,7 +149,7 @@ export function BillingSection() {
             </div>
           </Show>
         </div>
-        <Show when={!balanceInfo()?.paymentMethodType}>
+        <Show when={!balanceInfo()?.customerID}>
           <button
             data-slot="enable-billing-button"
             data-color="primary"

packages/console/app/src/routes/workspace/[id]/billing/index.tsx

@@ -16,7 +16,7 @@ export default function () {
       <div data-slot="sections">
         <Show when={userInfo()?.isAdmin}>
           <BillingSection />
-          <Show when={billingInfo()?.paymentMethodType}>
+          <Show when={billingInfo()?.customerID}>
             <ReloadSection />
             <MonthlyLimitSection />
             <PaymentSection />

packages/console/app/src/routes/workspace/[id]/billing/reload-section.module.css

@@ -1,4 +1,11 @@
 .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;

packages/console/app/src/routes/workspace/[id]/billing/reload-section.tsx

@@ -26,7 +26,14 @@ const setReload = action(async (form: FormData) => {
         .update(BillingTable)
         .set({
           reload: reloadValue,
-          ...(reloadValue ? { reloadError: null, timeReloadError: null } : {}),
+          ...(reloadValue
+            ? {
+                reloadTrigger: Billing.CHARGE_THRESHOLD_DOLLAR,
+                reloadAmount: Billing.CHARGE_AMOUNT_DOLLAR,
+                reloadError: null,
+                timeReloadError: null,
+              }
+            : {}),
         })
         .where(eq(BillingTable.workspaceID, workspaceID)),
     ),
@@ -51,10 +58,7 @@ export function ReloadSection() {
     <section class={styles.root}>
       <div data-slot="section-title">
         <h2>Auto Reload</h2>
-        <p>Automatically reload your balance when it gets low.</p>
-      </div>
-      <div data-slot="section-content">
-        <div data-slot="setting-row">
+        <div data-slot="title-row">
           <Show
             when={balanceInfo()?.reload}
             fallback={
@@ -79,6 +83,8 @@ export function ReloadSection() {
             </button>
           </form>
         </div>
+      </div>
+      <div data-slot="section-content">
         <Show when={balanceInfo()?.reload && balanceInfo()?.reloadError}>
           <div data-slot="reload-error">
             <p>