fix: update EstimatedTotalBox to display data from estimation

Author: stnguyen90

src/lib/components/billing/discountsApplied.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { formatCurrency } from '$lib/helpers/numbers';
+    import type { Coupon } from '$lib/sdk/billing';
+    export let label: string;
+    export let value: number;
+    export let couponData: Partial<Coupon> = {
+        code: null,
+        status: null,
+        credits: null
+    };
+
+    let adjustedValue = value;
+
+    $: if (label?.toLowerCase() === 'credits' && couponData?.status === 'active') {
+        adjustedValue = value - (couponData?.credits || 0);
+    } else {
+        adjustedValue = value;
+    }
+</script>
+
+{#if adjustedValue > 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>
+                <span>
+                    {label}
+                </span>
+            </p>
+        </div>
+        {#if value >= 100}
+            <p class="inline-tag">Credits applied</p>
+        {:else}
+            <span class="u-color-text-success">-{formatCurrency(adjustedValue)}</span>
+        {/if}
+    </span>
+{/if}

src/lib/components/billing/estimatedTotalBox.svelte

@@ -7,6 +7,7 @@
     import { CreditsApplied } from '.';
     import { sdk } from '$lib/stores/sdk';
     import { AppwriteException } from '@appwrite.io/console';
+    import DiscountsApplied from './discountsApplied.svelte';
 
     export let billingPlan: Tier;
     export let collaborators: string[];
@@ -35,7 +36,8 @@
                 if (
                     e.type === 'billing_coupon_not_found' ||
                     e.type === 'billing_coupon_already_used' ||
-                    e.type === 'billing_credit_unsupported'
+                    e.type === 'billing_credit_unsupported' ||
+                    e.type === 'billing_coupon_not_eligible'
                 ) {
                     couponData = {
                         code: null,
@@ -65,7 +67,8 @@
                 if (
                     e.type === 'billing_coupon_not_found' ||
                     e.type === 'billing_coupon_already_used' ||
-                    e.type === 'billing_credit_unsupported'
+                    e.type === 'billing_credit_unsupported' ||
+                    e.type === 'billing_coupon_not_eligible'
                 ) {
                     couponData = {
                         code: null,
@@ -80,13 +83,6 @@
     $: organizationId
         ? getUpdatePlanEstimate(organizationId, billingPlan, collaborators, couponData?.code)
         : getEstimate(billingPlan, collaborators, couponData?.code);
-
-    $: estimatedTotal =
-        couponData?.status === 'active'
-            ? estimation?.grossAmount - couponData.credits >= 0
-                ? estimation?.grossAmount - couponData.credits
-                : 0
-            : estimation?.grossAmount;
 </script>
 
 {#if estimation}
@@ -102,6 +98,9 @@
                         >{formatCurrency(item.value)}</Typography.Text>
                 </Layout.Stack>
             {/each}
+            {#each estimation.discounts ?? [] as item}
+                <DiscountsApplied {couponData} {...item} />
+            {/each}
 
             {#if couponData?.status === 'active'}
                 <CreditsApplied bind:couponData {fixedCoupon} />
@@ -110,15 +109,15 @@
             <Layout.Stack direction="row" justifyContent="space-between">
                 <Typography.Text>Total due</Typography.Text>
                 <Typography.Text>
-                    {formatCurrency(estimatedTotal)}
+                    {formatCurrency(estimation.grossAmount)}
                 </Typography.Text>
             </Layout.Stack>
 
             <Typography.Text>
-                You'll pay <b>{formatCurrency(estimatedTotal)}</b>
+                You'll pay <b>{formatCurrency(estimation.grossAmount)}</b>
                 now.
                 {#if couponData?.code}Once your credits run out,{:else}Then{/if} you'll be charged
-                <b>{formatCurrency(estimation.grossAmount)}</b> every 30 days.
+                <b>{formatCurrency(estimation.amount)}</b> every 30 days.
             </Typography.Text>
 
             <InputChoice