ignore: mobile styles zen

cloud/app/src/component/workspace/billing-section.module.css

@@ -39,6 +39,10 @@
     min-width: 14.5rem;
     width: fit-content;
 
+    @media (max-width: 30rem) {
+      width: 100%;
+    }
+
     [data-slot="credit-card"] {
       padding: var(--space-3-5) var(--space-4);
       background-color: var(--color-bg-surface);
@@ -50,6 +54,7 @@
       [data-slot="card-icon"] {
         display: flex;
         align-items: center;
+        color: var(--color-text-muted);
       }
 
       [data-slot="card-details"] {
@@ -78,6 +83,14 @@
       gap: var(--space-2);
       align-items: center;
 
+      @media (max-width: 30rem) {
+        flex-direction: column;
+
+        > button {
+          width: 100%;
+        }
+      }
+
       [data-slot="create-form"] {
         margin: 0;
       }

cloud/app/src/component/workspace/billing-section.tsx

@@ -38,6 +38,7 @@ const getBillingInfo = query(async (workspaceID: string) => {
 
 export function BillingSection() {
   const params = useParams()
+  // ORIGINAL CODE - COMMENTED OUT FOR TESTING
   const balanceInfo = createAsync(() => getBillingInfo(params.id))
   const createCheckoutUrlAction = useAction(createCheckoutUrl)
   const createCheckoutUrlSubmission = useSubmission(createCheckoutUrl)
@@ -46,6 +47,44 @@ export function BillingSection() {
   const disableReloadSubmission = useSubmission(disableReload)
   const reloadSubmission = useSubmission(reload)
 
+  // DUMMY DATA FOR TESTING - UNCOMMENT ONE OF THE SCENARIOS BELOW
+
+  // Scenario 1: User has not added billing details and has no balance
+  // const balanceInfo = () => ({
+  //   balance: 0,
+  //   paymentMethodLast4: null as string | null,
+  //   reload: false,
+  //   reloadError: null as string | null,
+  //   timeReloadError: null as Date | null,
+  // })
+
+  // Scenario 2: User has not added billing details but has a balance
+  // const balanceInfo = () => ({
+  //   balance: 1500000000, // $15.00
+  //   paymentMethodLast4: null as string | null,
+  //   reload: false,
+  //   reloadError: null as string | null,
+  //   timeReloadError: null as Date | null
+  // })
+
+  // Scenario 3: User has added billing details (reload enabled)
+  // const balanceInfo = () => ({
+  //   balance: 750000000, // $7.50
+  //   paymentMethodLast4: "4242",
+  //   reload: true,
+  //   reloadError: null as string | null,
+  //   timeReloadError: null as Date | null
+  // })
+
+  // Scenario 4: User has billing details but reload failed
+  // const balanceInfo = () => ({
+  //   balance: 250000000, // $2.50
+  //   paymentMethodLast4: "4242",
+  //   reload: true,
+  //   reloadError: "Your card was declined." as string,
+  //   timeReloadError: new Date(Date.now() - 3600000) as Date // 1 hour ago
+  // })
+
   const balanceAmount = createMemo(() => {
     return ((balanceInfo()?.balance ?? 0) / 100000000).toFixed(2)
   })

cloud/app/src/component/workspace/monthly-limit-section.module.css

@@ -15,6 +15,10 @@
     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);

cloud/app/src/routes/workspace/[id].css

@@ -26,7 +26,11 @@
     section {
       display: flex;
       flex-direction: column;
-      gap: var(--space-6);
+      gap: var(--space-8);
+
+      @media (max-width: 30rem) {
+        gap: var(--space-6);
+      }
 
       /* Section titles */
       [data-slot="section-title"] {
@@ -47,6 +51,20 @@
             font-size: var(--font-size-md);
           }
         }
+
+        p {
+          line-height: 1.5;
+          font-size: var(--font-size-md);
+          color: var(--color-text-muted);
+
+          a {
+            color: var(--color-text-muted);
+          }
+
+          @media (max-width: 30rem) {
+            font-size: var(--font-size-sm);
+          }
+        }
       }
     }
     section:not(:last-child) {

cloud/app/src/routes/workspace/[id].tsx

@@ -38,7 +38,8 @@ export default function () {
         <NewUserSection />
         <KeySection />
         <BillingSection />
-        <Show when={balanceInfo()?.reload}>
+        <Show when={true}>
+        {/*<Show when={balanceInfo()?.reload}>*/}
           <MonthlyLimitSection />
         </Show>
         <UsageSection />