From 16b2278bab073d9ba5724d0e6f64655212604497 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 2 Jun 2025 16:56:32 -0700
Subject: [PATCH 1/3] fix: update EstimatedTotalBox to display data from
 estimation

---
 .../billing/discountsApplied.svelte           | 37 +++++++++++++++++++
 .../billing/estimatedTotalBox.svelte          | 23 ++++++------
 2 files changed, 48 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/components/billing/discountsApplied.svelte

diff --git a/src/lib/components/billing/discountsApplied.svelte b/src/lib/components/billing/discountsApplied.svelte
new file mode 100644
index 000000000..eed7a2bc7
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/billing/estimatedTotalBox.svelte b/src/lib/components/billing/estimatedTotalBox.svelte
index 438120824..dd7878890 100644
--- a/src/lib/components/billing/estimatedTotalBox.svelte
+++ b/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

From 3c8ca4b57f7ab5b9feb5bf37a3a0d81044e48489 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 2 Jun 2025 17:07:38 -0700
Subject: [PATCH 2/3] fix: update Change plan to show Payment box when
 upgrading

This will allow adding credits when upgrading.
---
 .../organization-[organization]/change-plan/+page.svelte       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte b/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
index efe13f1a3..b96c875c8 100644
--- a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
+++ b/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}

From d70488d1082991eca689345ec660957f90985e8a Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 3 Jun 2025 09:50:09 +0530
Subject: [PATCH 3/3] fix: use pink2 components.

---
 .../billing/discountsApplied.svelte           | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/billing/discountsApplied.svelte b/src/lib/components/billing/discountsApplied.svelte
index eed7a2bc7..3ff2d7add 100644
--- a/src/lib/components/billing/discountsApplied.svelte
+++ b/src/lib/components/billing/discountsApplied.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
-    import { formatCurrency } from '$lib/helpers/numbers';
     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> = {
@@ -19,19 +22,16 @@
 </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>
+    <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}
-            <p class="inline-tag">Credits applied</p>
+            <Badge variant="secondary" content="Credits applied" />
         {:else}
-            <span class="u-color-text-success">-{formatCurrency(adjustedValue)}</span>
+            <Typography.Text color="--fgcolor-success"
+                >-{formatCurrency(adjustedValue)}</Typography.Text>
         {/if}
-    </span>
+    </Layout.Stack>
 {/if}