pricing: phase 2: estimate billing page

scripts/tsc-with-whitelist.sh

@@ -9,6 +9,7 @@ web-admin/src/routes/[organization]/-/settings/+layout.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/billing/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/billing/payment/+page.ts: error TS2307
+web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/billing/upgrade/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/usage/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/upgrade-callback/+page.ts: error TS2307

web-admin/src/features/billing/Payment.svelte

@@ -1,67 +1,112 @@
 <script lang="ts">
-  import {
-    createAdminServiceGetBillingSubscription,
-    createAdminServiceGetOrganization,
-  } from "@rilldata/web-admin/client";
+  import { createAdminServiceGetOrganization } from "@rilldata/web-admin/client";
   import {
     getPaymentIssueErrorText,
     needsPaymentSetup,
   } from "@rilldata/web-admin/features/billing/issues/getMessageForPaymentIssues";
   import { fetchPaymentsPortalURL } from "@rilldata/web-admin/features/billing/plans/selectors";
   import { useCategorisedOrganizationBillingIssues } from "@rilldata/web-admin/features/billing/selectors";
-  import SettingsContainer from "@rilldata/web-admin/features/organizations/settings/SettingsContainer.svelte";
-  import { Button } from "@rilldata/web-common/components/button";
   import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
-  import { isEnterprisePlan, isManagedPlan } from "./plans/utils";
 
   let { organization }: { organization: string } = $props();
 
   let org = $derived(createAdminServiceGetOrganization(organization));
-  let subscriptionQuery = $derived(
-    createAdminServiceGetBillingSubscription(organization),
-  );
-  let plan = $derived($subscriptionQuery?.data?.subscription?.plan);
   let categorisedIssues = $derived(
     useCategorisedOrganizationBillingIssues(organization),
   );
-  let paymentIssues = $derived($categorisedIssues.data?.payment);
-  let neverSubscribed = $derived(!!$categorisedIssues.data?.neverSubscribed);
-  let onTrial = $derived(!!$categorisedIssues.data?.trial);
-  let onManagedPlan = $derived(plan && isManagedPlan(plan.name));
-  let onEnterprisePlan = $derived(plan && isEnterprisePlan(plan.name));
-  // For enterprise and managed orgs, hide when payment details haven't been
-  // entered yet (setup done via CLI). Once set up, show the Manage button.
-  // neverSubscribed orgs are always hidden since the billing page is not shown.
-  let pendingSetup = $derived(
-    neverSubscribed ||
-      ((onManagedPlan || onEnterprisePlan) &&
-        needsPaymentSetup(paymentIssues ?? [])),
+  let hasPaymentCustomer = $derived(
+    !!$org.data?.organization?.paymentCustomerId,
   );
-
-  async function handleManagePayment() {
+  let paymentIssues = $derived($categorisedIssues.data?.payment);
+  async function handleManageCards() {
     const setup = paymentIssues?.length
       ? needsPaymentSetup(paymentIssues)
       : false;
     window.open(
       await fetchPaymentsPortalURL(organization, window.location.href, setup),
-      "_self",
+      "_blank",
     );
   }
 </script>
 
-<!-- Presence of paymentCustomerId signifies that the org's payment is managed through stripe -->
-{#if !$categorisedIssues.isLoading && $org.data?.organization?.paymentCustomerId && !onTrial && !pendingSetup}
-  <SettingsContainer title="Payment Method">
-    <div class="flex flex-row items-center gap-x-1">
+<section>
+  <h2 class="section-header">Payment methods</h2>
+  <div class="section-card">
+    <div class="card-content">
       {#if paymentIssues?.length}
-        <CancelCircle className="text-red-600" size="14px" />
-        {getPaymentIssueErrorText(paymentIssues)} Please click Manage below to correct.
+        <div class="flex items-center gap-x-2">
+          <CancelCircle className="text-red-600" size="14px" />
+          <span class="text-sm text-red-600">
+            {getPaymentIssueErrorText(paymentIssues)}
+          </span>
+        </div>
+      {:else if hasPaymentCustomer}
+        <!-- TODO: Show card details (brand, last4, expiry) from Stripe API -->
+        <div class="flex items-center gap-x-3">
+          <div class="card-icon">
+            <svg
+              class="w-5 h-5 text-fg-secondary"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                d="M2.5 4A1.5 1.5 0 001 5.5v1h18v-1A1.5 1.5 0 0017.5 4h-15zM19 8.5H1v6A1.5 1.5 0 002.5 16h15a1.5 1.5 0 001.5-1.5v-6zM3 12a1 1 0 011-1h3a1 1 0 110 2H4a1 1 0 01-1-1z"
+              />
+            </svg>
+          </div>
+          <div>
+            <p class="text-sm font-medium text-fg-primary">
+              Payment method on file
+            </p>
+            <p class="text-xs text-fg-tertiary">Manage your cards via Stripe</p>
+          </div>
+        </div>
       {:else}
-        Your payment method is valid and good to go.
+        <span class="text-sm text-fg-tertiary">No payment method on file.</span>
       {/if}
     </div>
-    {#snippet action()}
-      <Button type="secondary" onClick={handleManagePayment}>Manage</Button>
-    {/snippet}
-  </SettingsContainer>
-{/if}
+    {#if hasPaymentCustomer}
+      <button class="manage-btn" onclick={handleManageCards}>
+        Manage in Stripe
+        <svg
+          class="w-3.5 h-3.5"
+          viewBox="0 0 12 12"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <path d="M2.5 9.5l7-7M4 2.5h6v6" />
+        </svg>
+      </button>
+    {/if}
+  </div>
+</section>
+
+<style lang="postcss">
+  .section-header {
+    @apply text-lg font-medium text-fg-primary mb-3;
+  }
+
+  .section-card {
+    @apply flex items-center justify-between border rounded-lg p-4 bg-surface-background;
+    box-shadow:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.06),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+  }
+
+  .card-content {
+    @apply flex items-center;
+  }
+
+  .card-icon {
+    @apply flex items-center justify-center w-8 h-8 bg-surface-subtle rounded;
+  }
+
+  .manage-btn {
+    @apply flex items-center gap-1.5 text-sm font-medium text-primary-600 border border-primary-500 rounded-sm px-4 py-2 bg-transparent cursor-pointer;
+  }
+
+  .manage-btn:hover {
+    @apply bg-primary-50;
+  }
+</style>

web-admin/src/features/billing/contact/BillingContactSetting.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
   import ChangeBillingContactDialog from "@rilldata/web-admin/features/billing/contact/ChangeBillingContactDialog.svelte";
   import { getOrganizationBillingContactUser } from "@rilldata/web-admin/features/billing/contact/selectors";
-  import SettingsContainer from "@rilldata/web-admin/features/organizations/settings/SettingsContainer.svelte";
   import AvatarListItem from "@rilldata/web-common/components/avatar/AvatarListItem.svelte";
-  import { Button } from "@rilldata/web-common/components/button";
 
   let { organization }: { organization: string } = $props();
 
@@ -14,30 +12,58 @@
   let isUpdateBillingContactDialogOpen = $state(false);
 </script>
 
-<SettingsContainer title="Billing Contact">
-  <div class="flex flex-row items-center gap-x-1">
-    {#if $billingContactUser}
-      <AvatarListItem
-        name={$billingContactUser.displayName}
-        email={$billingContactUser.email}
-        photoUrl={$billingContactUser.photoUrl}
-      />
-    {:else}
-      This org has no billing contact.
-    {/if}
-  </div>
-  {#snippet action()}
-    <Button
-      type="secondary"
-      onClick={() => (isUpdateBillingContactDialogOpen = true)}
+<section>
+  <h2 class="section-header">Billing Contact</h2>
+  <div class="section-card">
+    <div class="card-content">
+      {#if $billingContactUser}
+        <AvatarListItem
+          name={$billingContactUser.displayName}
+          email={$billingContactUser.email}
+          photoUrl={$billingContactUser.photoUrl}
+        />
+      {:else}
+        <span class="text-sm text-fg-tertiary"
+          >This org has no billing contact.</span
+        >
+      {/if}
+    </div>
+    <button
+      class="manage-btn"
+      onclick={() => (isUpdateBillingContactDialogOpen = true)}
     >
       Change billing contact
-    </Button>
-  {/snippet}
-</SettingsContainer>
+    </button>
+  </div>
+</section>
 
 <ChangeBillingContactDialog
   bind:open={isUpdateBillingContactDialogOpen}
   {organization}
   currentBillingContact={$billingContactUser?.email}
 />
+
+<style lang="postcss">
+  .section-header {
+    @apply text-lg font-medium text-fg-primary mb-3;
+  }
+
+  .section-card {
+    @apply flex items-center justify-between border rounded-lg p-4 bg-surface-background;
+    box-shadow:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.06),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+  }
+
+  .card-content {
+    @apply flex items-center;
+  }
+
+  .manage-btn {
+    @apply flex items-center gap-1.5 text-sm font-medium text-primary-600 border border-primary-500 rounded-sm px-4 py-2 bg-transparent cursor-pointer;
+  }
+
+  .manage-btn:hover {
+    @apply bg-primary-50;
+  }
+</style>

web-admin/src/features/billing/plans/CancelledTeamPlan.svelte

@@ -13,10 +13,12 @@
     organization,
     plan,
     showUpgradeDialog,
+    billingPortalUrl,
   }: {
     organization: string;
     plan: V1BillingPlan;
     showUpgradeDialog: boolean;
+    billingPortalUrl: string | undefined;
   } = $props();
 
   let categorisedIssues = $derived(
@@ -52,6 +54,16 @@
         and your subscription has ended.
       {/if}
     </div>
+    {#if billingPortalUrl}
+      <div>
+        <a
+          href={billingPortalUrl}
+          target="_blank"
+          rel="noreferrer noopener"
+          class="invoice-link">View Invoice</a
+        >
+      </div>
+    {/if}
     {#if plan}
       <!-- if there is no plan then quotas will be set to 0. It doesnt make sense to show this then -->
       <PlanQuotas {organization} />
@@ -77,3 +89,12 @@
     endDate={cancelledSubIssue?.metadata.subscriptionCancelled?.endDate}
   />
 {/if}
+
+<style lang="postcss">
+  .invoice-link {
+    @apply text-sm text-primary-500 no-underline mt-2 inline-block;
+  }
+  .invoice-link:hover {
+    @apply text-primary-600 underline;
+  }
+</style>

web-admin/src/features/billing/plans/POCPlan.svelte

@@ -10,10 +10,12 @@
     organization,
     hasPayment,
     plan,
+    billingPortalUrl,
   }: {
     organization: string;
     hasPayment: boolean;
     plan: V1BillingPlan;
+    billingPortalUrl: string | undefined;
   } = $props();
 
   let open = $state(false);
@@ -22,6 +24,16 @@
 <SettingsContainer title={plan?.displayName}>
   <div>
     <div>You're currently on a custom contract.</div>
+    {#if billingPortalUrl}
+      <div>
+        <a
+          href={billingPortalUrl}
+          target="_blank"
+          rel="noreferrer noopener"
+          class="invoice-link">View Invoice</a
+        >
+      </div>
+    {/if}
     <PlanQuotas {organization} />
   </div>
   {#snippet contact()}
@@ -38,3 +50,12 @@
 </SettingsContainer>
 
 <StartTeamPlanDialog bind:open {organization} type="base" />
+
+<style lang="postcss">
+  .invoice-link {
+    @apply text-sm text-primary-500 no-underline mt-2 inline-block;
+  }
+  .invoice-link:hover {
+    @apply text-primary-600 underline;
+  }
+</style>