improve estimatie total

2026-06-06 19:27:48 +00:00 · 2025-01-20 06:41:18 +00:00
parent 67aeaedb9e
commit d64de9039d
2 changed files with 102 additions and 90 deletions
@@ -1,21 +1,17 @@
 <script lang="ts">
-    import { FormList, InputChoice, InputNumber } from "$lib/elements/forms";
-    import { toLocaleDate } from "$lib/helpers/date";
+    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';

-    // import { FormList, InputChoice } from "$lib/elements/forms";
-    import { formatCurrency } from "$lib/helpers/numbers";
-    import type { Estimation } from "$lib/sdk/billing";
-    import { organization } from "$lib/stores/organization";
-    import { sdk } from "$lib/stores/sdk";
-    import DiscountsApplied from "./discountsApplied.svelte";
-
-
-    export let organizationId: string| undefined = undefined;
+    export let organizationId: string | undefined = undefined;
    export let billingPlan: string;
    export let collaborators: string[];
    export let couponId: string;
    export let fixedCoupon = false;
-    export let isDowngrade = false;
+    export let error: string = '';

    export let billingBudget: number;

@@ -24,87 +20,95 @@

    let getEstimate = async (billingPlan, collaborators, couponId) => {
        try {
-
-            estimation = await sdk.forConsole.billing.estimationCreateOrganization(billingPlan, (couponId == "") ? null : couponId, collaborators ?? []);
-        } catch(e) {
+            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 {
-            estimation = await sdk.forConsole.billing.estimationUpdatePlan(organizationId, billingPlan, couponId && couponId.length > 0 ? couponId : null, collaborators ?? []);
+            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);
+    };

+    $: organizationId && organizationId.length > 0
+        ? getUpdatePlanEstimate(organizationId, billingPlan, collaborators, couponId)
+        : getEstimate(billingPlan, collaborators, couponId);
 </script>

-{#if isDowngrade}
-<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 />
-    <p class="text u-margin-block-start-16">
-        Your change will take effect once your current billing cycle ends on <span class="u-bold">{toLocaleDate($organization.billingNextInvoiceDate)}</span>.
-    </p>
-</section>
-
+{#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}
+    <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">{item.label}</p>
-            <p class="text">{formatCurrency(item.value)}</p>
+            <p class="text">
+                Total due<br />
+            </p>
+            <p class="text">
+                {formatCurrency(estimation.grossAmount)}
+            </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>
+        <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}
+        <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}
@@ -21,6 +21,7 @@
        InputTextarea,
        Label
    } from '$lib/elements/forms';
+    import { toLocaleDate } from '$lib/helpers/date.js';
    import { formatCurrency } from '$lib/helpers/numbers';
    import {
        WizardSecondaryContainer,
@@ -76,6 +77,7 @@
    let taxId: string;
    let billingBudget: number;
    let showCreditModal = false;
+    let error: string = '';

    let feedbackDowngradeReason: string;
    let feedbackMessage: string;
@@ -83,6 +85,7 @@

    onMount(async () => {
        if ($page.url.searchParams.has('code')) {
+            couponId = $page.url.searchParams.get('code');
            const coupon = $page.url.searchParams.get('code');
            try {
                const response = await sdk.forConsole.billing.getCoupon(coupon);
@@ -275,7 +278,7 @@
    $: if (billingPlan !== BillingPlan.FREE) {
        loadPaymentMethods();
    }
-    $: isButtonDisabled = $organization.billingPlan === billingPlan;
+    $: isButtonDisabled = $organization.billingPlan === billingPlan || error.length > 0;
 </script>

 <svelte:head>
@@ -360,21 +363,26 @@
        <svelte:fragment slot="aside">
            {#if billingPlan !== BillingPlan.FREE && $organization.billingPlan !== billingPlan && $organization.billingPlan !== BillingPlan.CUSTOM && isUpgrade}
                <EstimatedTotal
-                    {isDowngrade}
-                    {billingBudget}
+                    bind:error={error}
+                    bind:billingBudget={billingBudget}
                    organizationId={$organization.$id}
                    {billingPlan}
                    {collaborators}
                    {couponId} />
            {:else if $organization.billingPlan !== BillingPlan.CUSTOM}
                {#if isDowngrade}
-                <EstimatedTotal
-                    {isDowngrade}
-                    {billingBudget}
-                    organizationId={$organization.$id}
-                    {billingPlan}
-                    {collaborators}
-                    {couponId} />
+                    <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 />
+                        <p class="text u-margin-block-start-16">
+                            Your change will take effect once your current billing cycle ends on <span
+                                class="u-bold"
+                                >{toLocaleDate($organization.billingNextInvoiceDate)}</span
+                            >.
+                        </p>
+                    </section>
                {/if}
                <PlanComparisonBox downgrade={isDowngrade} />
            {/if}
@@ -386,7 +394,7 @@
        <Button
            fullWidthMobile
            on:click={() => formComponent.triggerSubmit()}
-            disabled={$isSubmitting || isButtonDisabled || !selfService}>
+            disabled={$isSubmitting || isButtonDisabled || !selfService ||!!error.length}>
            Change plan
        </Button>
    </WizardSecondaryFooter>