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,114 @@
+<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 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: string = '';
+
+    export let billingBudget: number;
+
+    let budgetEnabled = false;
+    var estimation: Estimation;
+
+    let getEstimate = async (billingPlan, collaborators, couponId) => {
+        try {
+            error = '';
+            estimation = await sdk.forConsole.billing.estimationCreateOrganization(
+                billingPlan,
+                couponId == '' ? null : couponId,
+                collaborators ?? []
+            );
+        } catch (e) {
+            //
+            error = e.message;
+            console.log(e);
+        }
+    };
+
+    let getUpdatePlanEstimate = async (organizationId, billingPlan, collaborators, couponId) => {
+        try {
+            error = '';
+            estimation = await sdk.forConsole.billing.estimationUpdatePlan(
+                organizationId,
+                billingPlan,
+                couponId && couponId.length > 0 ? couponId : null,
+                collaborators ?? []
+            );
+        } catch (e) {
+            error = e.message;
+            console.log(e);
+        }
+    };
+
+    $: organizationId && organizationId.length > 0
+        ? getUpdatePlanEstimate(organizationId, billingPlan, collaborators, couponId)
+        : getEstimate(billingPlan, collaborators, couponId);
+</script>
+
+{#if error.length}
+    <Alert type="error" dismissible>
+        <span slot="title">
+            {error}
+        </span>
+    </Alert>
+{:else if estimation}
+    <section
+        class="card u-flex u-flex-vertical u-gap-8"
+        style:--p-card-padding="1.5rem"
+        style:--p-card-border-radius="var(--border-radius-small)">
+        <slot />
+        {#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<br />
+            </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.amount)}</span> now. Once
+            your credits run out, you'll be charged
+            <span class="u-bold">{formatCurrency(estimation.amount)}</span> every 30 days.
+        </p>
+
+        <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>
+    </section>
+{/if}

src/lib/components/billing/estimatedTotalBox.svelte

@@ -5,7 +5,11 @@
     import type { Coupon } from '$lib/sdk/billing';
     import { plansInfo, type Tier } from '$lib/stores/billing';
     import { CreditsApplied } from '.';
+    import { BillingPlan } from '$lib/constants';
+    import { tooltip } from '$lib/actions/tooltip';
 
+    // undefined as we only need this on `change-plan`
+    export let currentTier: Tier | undefined = undefined;
     export let billingPlan: Tier;
     export let collaborators: string[];
     export let couponData: Partial<Coupon>;
@@ -14,21 +18,29 @@
     export let isDowngrade = false;
 
     const today = new Date();
+    const isScaleDowngrade = isDowngrade && billingPlan === BillingPlan.PRO;
+    const isScaleUpgrade = !isDowngrade && billingPlan === BillingPlan.SCALE;
     const billingPayDate = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
 
     let budgetEnabled = false;
 
-    $: currentPlan = $plansInfo.get(billingPlan);
-    $: extraSeatsCost = 0; // 0 untile trial period later replace (collaborators?.length ?? 0) * (currentPlan?.addons?.member?.price ?? 0);
-    $: grossCost = currentPlan.price + extraSeatsCost;
+    $: selectedPlan = $plansInfo.get(billingPlan);
+    $: currentOrgPlan = $plansInfo.get(currentTier);
+    $: unUsedBalances = isScaleUpgrade
+        ? currentOrgPlan.price +
+          (collaborators?.length ?? 0) * (currentOrgPlan?.addons?.seats?.price ?? 0)
+        : isScaleDowngrade
+          ? currentOrgPlan.price
+          : 0;
+
+    $: extraSeatsCost = (collaborators?.length ?? 0) * (selectedPlan?.addons?.seats?.price ?? 0);
+    $: grossCost = isScaleUpgrade
+        ? selectedPlan.price + extraSeatsCost - unUsedBalances
+        : selectedPlan.price + extraSeatsCost;
     $: estimatedTotal =
-        couponData?.status === 'active'
-            ? grossCost - couponData.credits >= 0
-                ? grossCost - couponData.credits
-                : 0
-            : grossCost;
+        couponData?.status === 'active' ? Math.max(0, grossCost - couponData.credits) : grossCost;
     $: trialEndDate = new Date(
-        billingPayDate.getTime() + currentPlan.trialDays * 24 * 60 * 60 * 1000
+        billingPayDate.getTime() + selectedPlan.trialDays * 24 * 60 * 60 * 1000
     );
 </script>
 
@@ -37,41 +49,64 @@
     style:--p-card-padding="1.5rem"
     style:--p-card-border-radius="var(--border-radius-small)">
     <slot />
-    <span class="u-flex u-main-space-between">
-        <p class="text">{currentPlan.name} plan</p>
-        <p class="text">{formatCurrency(currentPlan.price)}</p>
-    </span>
-    <span class="u-flex u-main-space-between">
+    <div class="u-flex u-main-space-between">
+        <p class="text">{selectedPlan.name} plan</p>
+        <p class="text">{formatCurrency(selectedPlan.price)}</p>
+    </div>
+
+    <div class="u-flex u-main-space-between">
         <p class="text" class:u-bold={isDowngrade}>Additional seats ({collaborators?.length})</p>
         <p class="text" class:u-bold={isDowngrade}>
-            {formatCurrency(extraSeatsCost)}
+            {formatCurrency(
+                isScaleDowngrade
+                    ? (collaborators?.length ?? 0) * (selectedPlan?.addons?.seats?.price ?? 0)
+                    : extraSeatsCost
+            )}
         </p>
-    </span>
+    </div>
+
+    {#if isScaleUpgrade}
+        {@const currentPlanName = currentOrgPlan.name}
+        <div class="u-flex u-main-space-between">
+            <div class="text">
+                <span>Unused {currentPlanName} plan balance</span>
+                <span
+                    use:tooltip={{
+                        placement: 'bottom',
+                        content: `This discount reflects the unused portion of your ${currentPlanName} plan and add-ons. Future credits for extra seats and features will apply automatically.`
+                    }}
+                    class="icon-info">
+                </span>
+            </div>
+            <p class="text">-{formatCurrency(unUsedBalances)}</p>
+        </div>
+    {/if}
+
     {#if couponData?.status === 'active'}
         <CreditsApplied bind:couponData {fixedCoupon} />
     {/if}
     <div class="u-sep-block-start" />
-    <span class="u-flex u-main-space-between">
+    <div class="u-flex u-main-space-between">
         <p class="text">
             Upcoming charge<br /><span class="u-color-text-gray"
-                >Due on {!currentPlan.trialDays
+                >Due on {!selectedPlan.trialDays
                     ? toLocaleDate(billingPayDate.toString())
                     : toLocaleDate(trialEndDate.toString())}</span>
         </p>
         <p class="text">
             {formatCurrency(estimatedTotal)}
         </p>
-    </span>
+    </div>
 
     <p class="text u-margin-block-start-16">
         You'll pay <span class="u-bold">{formatCurrency(estimatedTotal)}</span> now, with your first
         billing cycle starting on
         <span class="u-bold"
-            >{!currentPlan.trialDays
+            >{!currentOrgPlan.trialDays
                 ? toLocaleDate(billingPayDate.toString())
                 : toLocaleDate(trialEndDate.toString())}</span
         >. Once your credits run out, you'll be charged
-        <span class="u-bold">{formatCurrency(currentPlan.price)}</span> plus usage fees every 30 days.
+        <span class="u-bold">{formatCurrency(currentOrgPlan.price)}</span> plus usage fees every 30 days.
     </p>
 
     <FormList class="u-margin-block-start-24">

src/lib/components/billing/index.ts

@@ -7,3 +7,5 @@ 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/planSelection.svelte

@@ -76,31 +76,25 @@
                 </svelte:fragment>
             </LabelCard>
         </li>
-        {#if $organization?.billingPlan === BillingPlan.SCALE}
-            <li>
-                <LabelCard
-                    name="plan"
-                    bind:group={billingPlan}
-                    value={BillingPlan.SCALE}
-                    padding={1.5}>
-                    <svelte:fragment slot="custom">
-                        <div class="u-flex u-flex-vertical u-gap-4 u-width-full-line">
-                            <h4 class="body-text-2 u-bold">
-                                {tierScale.name}
-                                {#if $organization?.billingPlan === BillingPlan.SCALE && !isNewOrg}
-                                    <span class="inline-tag">Current plan</span>
-                                {/if}
-                            </h4>
-                            <p class="u-color-text-offline u-small">
-                                {tierScale.description}
-                            </p>
-                            <p>
-                                {formatCurrency(scalePlan?.price ?? 0)} per month + usage
-                            </p>
-                        </div>
-                    </svelte:fragment>
-                </LabelCard>
-            </li>
-        {/if}
+        <li>
+            <LabelCard name="plan" bind:group={billingPlan} value={BillingPlan.SCALE} padding={1.5}>
+                <svelte:fragment slot="custom">
+                    <div class="u-flex u-flex-vertical u-gap-4 u-width-full-line">
+                        <h4 class="body-text-2 u-bold">
+                            {tierScale.name}
+                            {#if $organization?.billingPlan === BillingPlan.SCALE && !isNewOrg}
+                                <span class="inline-tag">Current plan</span>
+                            {/if}
+                        </h4>
+                        <p class="u-color-text-offline u-small">
+                            {tierScale.description}
+                        </p>
+                        <p>
+                            {formatCurrency(scalePlan?.price ?? 0)} per month + usage
+                        </p>
+                    </div>
+                </svelte:fragment>
+            </LabelCard>
+        </li>
     </ul>
 {/if}

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}