Merge pull request #1973 from appwrite/fix-estimated-total

fix: update EstimatedTotalBox to display data from estimation

Author: lohanidamodar

src/lib/components/billing/discountsApplied.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import type { Coupon } from '$lib/sdk/billing';
+    import { formatCurrency } from '$lib/helpers/numbers';
+    import { IconTag } from '@appwrite.io/pink-icons-svelte';
+    import { Badge, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+
+    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}
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack inline direction="row" gap="xxs" alignItems="center" alignContent="center">
+            <Icon icon={IconTag} color="--fgcolor-success" size="s" />
+            <Typography.Text>{label}</Typography.Text>
+        </Layout.Stack>
+        {#if value >= 100}
+            <Badge variant="secondary" content="Credits applied" />
+        {:else}
+            <Typography.Text color="--fgcolor-success"
+                >-{formatCurrency(adjustedValue)}</Typography.Text>
+        {/if}
+    </Layout.Stack>
+{/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

src/routes/(console)/organization-[organization]/change-plan/+page.svelte

@@ -302,8 +302,7 @@
                 </Layout.Stack>
             </Fieldset>
 
-            <!-- Show email input if upgrading from free plan -->
-            {#if selectedPlan !== BillingPlan.FREE && data.organization.billingPlan === BillingPlan.FREE}
+            {#if isUpgrade}
                 <Fieldset legend="Payment">
                     <SelectPaymentMethod
                         methods={data.paymentMethods}