Feat: invoice cycle changes

src/lib/commandCenter/searchers/organizations.ts

@@ -4,7 +4,7 @@ import { sdk } from '$lib/stores/sdk';
 import type { Searcher } from '../commands';
 
 export const orgSearcher = (async (query: string) => {
-    const { teams } = await sdk.forConsole.teams.list();
+    const { teams } = await sdk.forConsole.billing.listOrganization();
     return teams
         .filter((organization) => organization.name.toLowerCase().includes(query.toLowerCase()))
         .map((organization) => {

src/lib/components/billing/discountsApplied.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { tooltip } from '$lib/actions/tooltip';
+    import { formatCurrency } from '$lib/helpers/numbers';
+
+    export let label: string;
+    export let value: number;
+</script>
+
+{#if value > 0}
+    <span class="u-flex u-main-space-between">
+        <div class="u-flex u-cross-center u-gap-4">
+            <p class="text">
+                <span class="icon-tag u-color-text-success" aria-hidden="true" />
+                <span use:tooltip={{ content: label }}>
+                    {label}
+                </span>
+            </p>
+        </div>
+        {#if value >= 100}
+            <p class="inline-tag">Credits applied</p>
+        {:else}
+            <span class="u-color-text-success">-{formatCurrency(value)}</span>
+        {/if}
+    </span>
+{/if}

src/lib/components/billing/estimatedTotal.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+    import { FormList, InputChoice, InputNumber } from '$lib/elements/forms';
+    import { formatCurrency } from '$lib/helpers/numbers';
+    import type { Estimation } from '$lib/sdk/billing';
+    import { sdk } from '$lib/stores/sdk';
+    import Alert from '../alert.svelte';
+    import Card from '../card.svelte';
+    import DiscountsApplied from './discountsApplied.svelte';
+
+    export let organizationId: string | undefined = undefined;
+    export let billingPlan: string;
+    export let collaborators: string[];
+    export let couponId: string;
+    export let fixedCoupon = false;
+    export let error = '';
+
+    export let billingBudget: number;
+
+    let budgetEnabled = false;
+    let estimation: Estimation;
+
+    async function getEstimate(billingPlan: string, collaborators: string[], couponId: string) {
+        try {
+            estimation = await sdk.forConsole.billing.estimationCreateOrganization(
+                billingPlan,
+                couponId === '' ? null : couponId,
+                collaborators ?? []
+            );
+            error = '';
+        } catch (e) {
+            error = e.message;
+        }
+    }
+
+    async function getUpdatePlanEstimate(
+        organizationId: string,
+        billingPlan: string,
+        collaborators: string[],
+        couponId: string | undefined
+    ) {
+        try {
+            error = '';
+            estimation = await sdk.forConsole.billing.estimationUpdatePlan(
+                organizationId,
+                billingPlan,
+                couponId && couponId.length > 0 ? couponId : null,
+                collaborators ?? []
+            );
+        } catch (e) {
+            error = e.message;
+        }
+    }
+
+    $: organizationId
+        ? getUpdatePlanEstimate(organizationId, billingPlan, collaborators, couponId)
+        : getEstimate(billingPlan, collaborators, couponId);
+</script>
+
+{#if estimation || error.length}
+    <Card>
+        {#if error.length}
+        <p class="u-color-text-danger">
+                {error}
+        </p>
+        {/if}
+
+        {#if estimation}
+        {#each estimation.items ?? [] as item}
+            <span class="u-flex u-main-space-between">
+                <p class="text">{item.label}</p>
+                <p class="text">{formatCurrency(item.value)}</p>
+            </span>
+        {/each}
+        {#each estimation.discounts ?? [] as item}
+            <DiscountsApplied {...item} />
+        {/each}
+        <div class="u-sep-block-start" />
+        <span class="u-flex u-main-space-between">
+            <p class="text">Total due</p>
+            <p class="text">
+                {formatCurrency(estimation.grossAmount)}
+            </p>
+        </span>
+
+        <p class="text u-margin-block-start-16">
+            You'll pay <span class="u-bold">{formatCurrency(estimation.grossAmount)}</span> now.
+            Once your credits run out, you'll be charged
+            <span class="u-bold">{formatCurrency(estimation.grossAmount)}</span> every 30 days.
+        </p>
+        {/if}
+
+        <FormList class="u-margin-block-start-24">
+            <InputChoice
+                type="switchbox"
+                id="budget"
+                label="Enable budget cap"
+                tooltip="If enabled, you will be notified when your spending reaches 75% of the set cap. Update cap alerts in your organization settings."
+                fullWidth
+                bind:value={budgetEnabled}>
+                {#if budgetEnabled}
+                    <div class="u-margin-block-start-16">
+                        <InputNumber
+                            id="budget"
+                            label="Budget cap (USD)"
+                            placeholder="0"
+                            min={0}
+                            bind:value={billingBudget} />
+                    </div>
+                {/if}
+            </InputChoice>
+        </FormList>
+    </Card>
+{/if}

src/lib/components/billing/index.ts

@@ -2,8 +2,9 @@ export { default as PaymentBoxes } from './paymentBoxes.svelte';
 export { default as CouponInput } from './couponInput.svelte';
 export { default as SelectPaymentMethod } from './selectPaymentMethod.svelte';
 export { default as UsageRates } from './usageRates.svelte';
-export { default as EstimatedTotalBox } from './estimatedTotalBox.svelte';
 export { default as PlanComparisonBox } from './planComparisonBox.svelte';
 export { default as EmptyCardCloud } from './emptyCardCloud.svelte';
 export { default as CreditsApplied } from './creditsApplied.svelte';
 export { default as PlanSelection } from './planSelection.svelte';
+export { default as EstimatedTotal } from './estimatedTotal.svelte';
+export { default as SelectPlan } from './selectPlan.svelte';

src/lib/components/billing/selectPlan.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { BillingPlan } from '$lib/constants';
+    import { formatCurrency } from '$lib/helpers/numbers';
+    import { plansInfo } from '$lib/stores/billing';
+    import { organization } from '$lib/stores/organization';
+    import { LabelCard } from '..';
+
+    export let billingPlan: string;
+    export let anyOrgFree = false;
+    export let isNewOrg = false;
+    let classes: string = '';
+    export { classes as class };
+</script>
+
+{#if billingPlan}
+    <ul class="u-flex u-flex-vertical u-gap-16 u-margin-block-start-8 {classes}">
+        {#each $plansInfo.values() as plan}
+            <li>
+                <LabelCard
+                    name="plan"
+                    bind:group={billingPlan}
+                    disabled={ (plan.$id === BillingPlan.FREE && anyOrgFree) || !plan.selfService}
+                    value={plan.$id}
+                    tooltipShow={plan.$id === BillingPlan.FREE && anyOrgFree}
+                    tooltipText={plan.$id === BillingPlan.FREE
+                        ? 'You are limited to 1 Free organization per account.'
+                        : ''}
+                    padding={1.5}>
+                    <svelte:fragment slot="custom" let:disabled>
+                        <div
+                            class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
+                            class:u-opacity-50={disabled}>
+                            <h4 class="body-text-2 u-bold">
+                                {plan.name}
+                                {#if $organization?.billingPlan === plan.$id && !isNewOrg}
+                                    <span class="inline-tag">Current plan</span>
+                                {/if}
+                            </h4>
+                            <p class="u-color-text-offline u-small">
+                                {plan.desc}
+                            </p>
+                            <p>
+                                {formatCurrency(plan?.price ?? 0)}
+                            </p>
+                        </div>
+                    </svelte:fragment>
+                </LabelCard>
+            </li>
+        {/each}
+    </ul>
+{/if}

src/lib/components/billing/usageRates.svelte

@@ -81,16 +81,16 @@
                     <TableRow>
                         <TableCellText title="resource">{usage.resource}</TableCellText>
                         <TableCellText title="limit">
-                            {plan[usage.id] || 'Unlimited'}
+                            {plan.addons.seats.limit || 0}
                         </TableCellText>
                         {#if !isFree}
                             <TableCellText title="rate">
-                                {formatCurrency(plan.addons.member.price)}/{usage?.unit}
+                                {formatCurrency(plan.addons.seats.price)}/{usage?.unit}
                             </TableCellText>
                         {/if}
                     </TableRow>
                 {:else}
-                    {@const addon = plan.addons[usage.id]}
+                    {@const addon = plan.usage[usage.id]}
                     <TableRow>
                         <TableCellText title="resource">{usage.resource}</TableCellText>
                         <TableCellText title="limit">