From 7f3f19fda0a0d0eeea70c875aab13658128b0fbb Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 16 Jan 2024 11:58:21 +0100
Subject: [PATCH 01/14] fix: coupon code is now uppercase

---
 src/lib/components/billing/couponInput.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/billing/couponInput.svelte b/src/lib/components/billing/couponInput.svelte
index 1f81a3a74a..1d4d4a109c 100644
--- a/src/lib/components/billing/couponInput.svelte
+++ b/src/lib/components/billing/couponInput.svelte
@@ -55,7 +55,7 @@
         <div>
             <span class="icon-exclamation-circle u-color-text-danger" />
             <span>
-                {couponData.code} is not a valid promo code
+                {couponData.code.toUpperCase()} is not a valid promo code
             </span>
         </div>
     {:else if couponData?.status === 'active'}
@@ -64,7 +64,7 @@
                 <span class="icon-tag u-color-text-success" />
                 <slot data={couponData}>
                     <span>
-                        {couponData.code} applied (-${couponData.credits})
+                        {couponData.code.toUpperCase()} applied (-${couponData.credits})
                     </span>
                 </slot>
             </div>

From 831ad0b8c87323f44096010aa846b87e7299f0f8 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 16 Jan 2024 11:58:40 +0100
Subject: [PATCH 02/14] chore: track address creation

---
 .../console/wizard/cloudOrganization/addressDetails.svelte     | 3 +++
 .../wizard/cloudOrganizationChangeTier/addressDetails.svelte   | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/src/routes/console/wizard/cloudOrganization/addressDetails.svelte b/src/routes/console/wizard/cloudOrganization/addressDetails.svelte
index 608833f9c5..00439227e2 100644
--- a/src/routes/console/wizard/cloudOrganization/addressDetails.svelte
+++ b/src/routes/console/wizard/cloudOrganization/addressDetails.svelte
@@ -6,6 +6,7 @@
     import { createOrganization } from './store';
     import type { AddressesList } from '$lib/sdk/billing';
     import { RadioBoxes } from '$lib/components';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
 
     let options = [
         {
@@ -33,7 +34,9 @@
                     addressLine2 ? addressLine2 : undefined
                 );
                 $createOrganization.billingAddressId = response.$id;
+                trackEvent(Submit.BillingAddressCreate);
             } catch (error) {
+                trackError(error, Submit.BillingAddressCreate);
                 throw new Error(error.message);
             }
         }
diff --git a/src/routes/console/wizard/cloudOrganizationChangeTier/addressDetails.svelte b/src/routes/console/wizard/cloudOrganizationChangeTier/addressDetails.svelte
index 5bd9ebaf56..88b2214aaf 100644
--- a/src/routes/console/wizard/cloudOrganizationChangeTier/addressDetails.svelte
+++ b/src/routes/console/wizard/cloudOrganizationChangeTier/addressDetails.svelte
@@ -7,6 +7,7 @@
     import { organization } from '$lib/stores/organization';
     import type { AddressesList } from '$lib/sdk/billing';
     import { RadioBoxes } from '$lib/components';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
 
     let options = [
         {
@@ -34,7 +35,9 @@
                     addressLine2 ? addressLine2 : undefined
                 );
                 $changeOrganizationTier.billingAddressId = response.$id;
+                trackEvent(Submit.BillingAddressCreate);
             } catch (error) {
+                trackError(error, Submit.BillingAddressCreate);
                 throw new Error(error.message);
             }
         }

From 8f017b2b347f7bcba8c92af92fdc2f8aa716d445 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 16 Jan 2024 11:59:10 +0100
Subject: [PATCH 03/14] fix: hide coupon field during downgrade

---
 .../cloudOrganizationChangeTier/confirmDetails.svelte     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/console/wizard/cloudOrganizationChangeTier/confirmDetails.svelte b/src/routes/console/wizard/cloudOrganizationChangeTier/confirmDetails.svelte
index e3c33693bc..7191ee3774 100644
--- a/src/routes/console/wizard/cloudOrganizationChangeTier/confirmDetails.svelte
+++ b/src/routes/console/wizard/cloudOrganizationChangeTier/confirmDetails.svelte
@@ -97,11 +97,11 @@
         {/if}
 
         <Box class="u-margin-block-start-32 u-flex u-flex-vertical u-gap-16" radius="small">
-            <CouponInput
-                bind:coupon
-                bind:couponData
-                on:validation={(e) => ($changeOrganizationTier.couponCode = e.detail.code)} />
             {#if $changeOrganizationTier.billingPlan !== BillingPlan.STARTER}
+                <CouponInput
+                    bind:coupon
+                    bind:couponData
+                    on:validation={(e) => ($changeOrganizationTier.couponCode = e.detail.code)} />
                 <span class="u-flex u-main-space-between">
                     <p class="text">{plan.name} plan</p>
                     <p class="text">${plan.price}</p>

From 9c89b79f95b9c04ab5eda6585f63be64defdd315 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 16 Jan 2024 11:59:33 +0100
Subject: [PATCH 04/14] feat: add coupon code during creation

---
 .../wizard/cloudOrganization/confirmDetails.svelte  | 13 +++++++++++++
 .../console/wizard/cloudOrganization/store.ts       |  4 +++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/wizard/cloudOrganization/confirmDetails.svelte b/src/routes/console/wizard/cloudOrganization/confirmDetails.svelte
index 58aedf1796..474b07517c 100644
--- a/src/routes/console/wizard/cloudOrganization/confirmDetails.svelte
+++ b/src/routes/console/wizard/cloudOrganization/confirmDetails.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
     import { Box, CreditCardBrandImage } from '$lib/components';
+    import { CouponInput } from '$lib/components/billing';
     import { BillingPlan } from '$lib/constants';
     import { Pill } from '$lib/elements';
     import { toLocaleDate } from '$lib/helpers/date';
     import { WizardStep } from '$lib/layout';
+    import type { Coupon } from '$lib/sdk/billing';
     import { plansInfo } from '$lib/stores/billing';
     import { sdk } from '$lib/stores/sdk';
     import { createOrganization, createOrganizationFinalAction } from './store';
@@ -15,6 +17,13 @@
     const today = new Date();
     const billingPayDate = new Date(today.getTime() + 44 * 24 * 60 * 60 * 1000);
 
+    let coupon: string = null;
+    let couponData: Partial<Coupon> = {
+        code: null,
+        status: null,
+        credits: null
+    };
+
     async function fetchCard() {
         try {
             const card = await sdk.forConsole.billing.getPaymentMethod(
@@ -77,6 +86,10 @@
     {/if}
     <Box class="u-margin-block-start-32 u-flex u-flex-vertical u-gap-16" radius="small">
         {#if $createOrganization.billingPlan !== BillingPlan.STARTER}
+            <CouponInput
+                bind:coupon
+                bind:couponData
+                on:validation={(e) => ($createOrganization.couponCode = e.detail.code)} />
             <span class="u-flex u-main-space-between">
                 <p class="text">{plan.name} plan</p>
                 <p class="text">${plan.price}</p>
diff --git a/src/routes/console/wizard/cloudOrganization/store.ts b/src/routes/console/wizard/cloudOrganization/store.ts
index 0c2e71e7ad..613259fe0b 100644
--- a/src/routes/console/wizard/cloudOrganization/store.ts
+++ b/src/routes/console/wizard/cloudOrganization/store.ts
@@ -15,6 +15,7 @@ export const createOrganization = writable<{
     collaborators?: string[];
     billingBudget?: number;
     taxId?: string;
+    couponCode?: string;
 }>({
     id: null,
     name: null,
@@ -22,5 +23,6 @@ export const createOrganization = writable<{
     paymentMethodId: null,
     collaborators: [],
     billingAddressId: null,
-    taxId: null
+    taxId: null,
+    couponCode: null
 });

From 18df1f10ac6fb56a5a7bb6b8ccfbf39e6ac40b1e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 16 Jan 2024 11:59:54 +0100
Subject: [PATCH 05/14] chore: add missing events

---
 src/routes/console/changeOrganizationTierCloud.svelte | 1 +
 src/routes/console/createOrganizationCloud.svelte     | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/changeOrganizationTierCloud.svelte b/src/routes/console/changeOrganizationTierCloud.svelte
index a76e16e6dd..576d17e7b8 100644
--- a/src/routes/console/changeOrganizationTierCloud.svelte
+++ b/src/routes/console/changeOrganizationTierCloud.svelte
@@ -88,6 +88,7 @@
                         org.$id,
                         $changeOrganizationTier.couponCode
                     );
+                    trackEvent(Submit.CreditRedeem);
                 }
 
                 //Add budget
diff --git a/src/routes/console/createOrganizationCloud.svelte b/src/routes/console/createOrganizationCloud.svelte
index 518c61f9fc..43c3a3f35a 100644
--- a/src/routes/console/createOrganizationCloud.svelte
+++ b/src/routes/console/createOrganizationCloud.svelte
@@ -56,6 +56,12 @@
                 );
             }
 
+            //Add coupon
+            if ($createOrganization?.couponCode) {
+                await sdk.forConsole.billing.addCredit(org.$id, $createOrganization.couponCode);
+                trackEvent(Submit.CreditRedeem);
+            }
+
             //Add collaborators
             if ($createOrganization?.collaborators?.length) {
                 $createOrganization.collaborators.forEach(async (collaborator) => {
@@ -110,7 +116,8 @@
             paymentMethodId: null,
             collaborators: [],
             billingAddressId: null,
-            taxId: null
+            taxId: null,
+            couponCode: null
         };
     });
 

From b345e020530163989d4dbd4bb49fe0818786ef34 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 16 Jan 2024 12:09:51 +0100
Subject: [PATCH 06/14] chore: add track events

---
 .../billing/planSummary.svelte                    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/organization-[organization]/billing/planSummary.svelte b/src/routes/console/organization-[organization]/billing/planSummary.svelte
index 746ae32c17..71e3a12a2a 100644
--- a/src/routes/console/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/console/organization-[organization]/billing/planSummary.svelte
@@ -15,6 +15,7 @@
     import { abbreviateNumber, formatNumberWithCommas } from '$lib/helpers/numbers';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { BillingPlan } from '$lib/constants';
+    import { trackEvent } from '$lib/actions/analytics';
 
     let currentInvoice: Invoice;
     const today = new Date();
@@ -136,7 +137,12 @@
                     </Button>
                     <Button
                         disabled={$organization?.markedForDeletion}
-                        on:click={() => wizard.start(ChangeOrganizationTierCloud)}>
+                        on:click={() => wizard.start(ChangeOrganizationTierCloud)}
+                        on:click={() =>
+                            trackEvent('click_organization_upgrade', {
+                                from: 'button',
+                                source: 'billing_tab'
+                            })}>
                         Upgrade
                     </Button>
                 </div>
@@ -145,7 +151,12 @@
                     <Button
                         text
                         disabled={$organization?.markedForDeletion}
-                        on:click={() => wizard.start(ChangeOrganizationTierCloud)}>
+                        on:click={() => wizard.start(ChangeOrganizationTierCloud)}
+                        on:click={() =>
+                            trackEvent('click_organization_plan_update', {
+                                from: 'button',
+                                source: 'billing_tab'
+                            })}>
                         Change plan
                     </Button>
                     <Button

From 09d94be14a956b4e95901ebad1a8e0d0359002a2 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 16 Jan 2024 13:33:56 +0100
Subject: [PATCH 07/14] chore: add missing event

---
 src/lib/components/support.svelte                  | 13 ++++++++++++-
 src/lib/elements/table/body.svelte                 | 11 ++++++++++-
 .../excesLimitModal.svelte                         | 14 +++++++++++---
 .../members/+page.svelte                           |  5 ++++-
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
index c63200f733..fa36429ff6 100644
--- a/src/lib/components/support.svelte
+++ b/src/lib/components/support.svelte
@@ -11,6 +11,8 @@
     import { isCloud } from '$lib/system';
     import { organization } from '$lib/stores/organization';
     import { BillingPlan } from '$lib/constants';
+    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+    import { trackEvent } from '$lib/actions/analytics';
 
     export let show = false;
 
@@ -43,7 +45,16 @@
             {/if}
         </div>
         {#if $organization?.billingPlan === BillingPlan.STARTER}
-            <Button fullWidth href="https://appwrite.io/pricing" external>
+            <Button
+                fullWidth
+                external
+                on:click={() => {
+                    wizard.start(ChangeOrganizationTierCloud);
+                    trackEvent('click_organization_upgrade', {
+                        from: 'button',
+                        source: 'support_menu'
+                    });
+                }}>
                 <span class="text">Get Premium support</span>
             </Button>
         {:else}
diff --git a/src/lib/elements/table/body.svelte b/src/lib/elements/table/body.svelte
index 7db8b05228..28ecc3a31c 100644
--- a/src/lib/elements/table/body.svelte
+++ b/src/lib/elements/table/body.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { trackEvent } from '$lib/actions/analytics';
     import { getServiceLimit, type PlanServices } from '$lib/stores/billing';
     import { wizard } from '$lib/stores/wizard';
     import { isCloud } from '$lib/system';
@@ -10,6 +11,7 @@
     export let service: PlanServices = null;
     export let name = service;
     export let total: number = null;
+    export let event: string = null;
 
     let columns = 0;
 
@@ -34,7 +36,14 @@
             <span class="u-flex u-gap-24 u-main-center u-cross-center">
                 <slot name="limit" {upgradeMethod} {limit}>
                     <span class="text">Upgrade your plan to add {name} to your organization</span>
-                    <Button secondary on:click={upgradeMethod}>Upgrade plan</Button>
+                    <Button
+                        secondary
+                        on:click={upgradeMethod}
+                        on:click={() =>
+                            trackEvent('click_organization_upgrade', {
+                                from: 'button',
+                                source: event ?? 'table_row_limit_reached'
+                            })}>Upgrade plan</Button>
                 </slot>
             </span>
         </td>
diff --git a/src/routes/console/organization-[organization]/excesLimitModal.svelte b/src/routes/console/organization-[organization]/excesLimitModal.svelte
index b3a58ac1c2..e39b817693 100644
--- a/src/routes/console/organization-[organization]/excesLimitModal.svelte
+++ b/src/routes/console/organization-[organization]/excesLimitModal.svelte
@@ -14,6 +14,7 @@
     import { goto } from '$app/navigation';
     import { last } from '$lib/helpers/array';
     import { BillingPlan } from '$lib/constants';
+    import { trackEvent } from '$lib/actions/analytics';
 
     export let show = false;
     const plan = $plansInfo?.get($organization.billingPlan);
@@ -89,13 +90,20 @@
                     on:click={() => {
                         show = false;
                         goto(`/console/organization-${$organization.$id}/usage`);
-                    }}>View usage</Button>
-
+                    }}>
+                    View usage
+                </Button>
                 <Button
                     on:click={() => {
                         show = false;
                         wizard.start(ChangeOrganizationTierCloud);
-                    }}>Upgrade plan</Button>
+                        trackEvent('click_organization_upgrade', {
+                            from: 'button',
+                            source: 'limit_reached_modal'
+                        });
+                    }}>
+                    Upgrade plan
+                </Button>
             </div>
         </div>
     </svelte:fragment>
diff --git a/src/routes/console/organization-[organization]/members/+page.svelte b/src/routes/console/organization-[organization]/members/+page.svelte
index 8497dac36c..e7e121f987 100644
--- a/src/routes/console/organization-[organization]/members/+page.svelte
+++ b/src/routes/console/organization-[organization]/members/+page.svelte
@@ -70,7 +70,10 @@
                 <TableCellHead width={90} />
                 <TableCellHead width={30} />
             </TableHeader>
-            <TableBody service="members" total={data.organizationMembers.total}>
+            <TableBody
+                service="members"
+                total={data.organizationMembers.total}
+                event="members_list">
                 {#each data.organizationMembers.memberships as member}
                     <TableRow>
                         <TableCell title="Name">

From 0d61428cf51f9c4ad14d0bef97ff37437f410954 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 16 Jan 2024 13:36:23 +0100
Subject: [PATCH 08/14] fix: add coupon credits to total calculation

---
 .../wizard/cloudOrganization/confirmDetails.svelte | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/wizard/cloudOrganization/confirmDetails.svelte b/src/routes/console/wizard/cloudOrganization/confirmDetails.svelte
index 474b07517c..63194d59e9 100644
--- a/src/routes/console/wizard/cloudOrganization/confirmDetails.svelte
+++ b/src/routes/console/wizard/cloudOrganization/confirmDetails.svelte
@@ -98,11 +98,23 @@
                 <p class="text">Additional members ({collaboratorsNumber})</p>
                 <p class="text">${collaboratorPrice * collaboratorsNumber}</p>
             </span>
+            {#if couponData?.status === 'active'}
+                <span class="u-flex u-main-space-between">
+                    <p class="text">Credits applied ({couponData.credits})</p>
+                    <p class="text">-${couponData.credits}</p>
+                </span>
+            {/if}
             <div class="u-sep-block-start" />
         {/if}
         <span class="u-flex u-main-space-between">
             <p class="text">Estimated total</p>
-            <p class="text">${totalExpences}</p>
+            <p class="text">
+                ${couponData?.status === 'active'
+                    ? totalExpences - couponData.credits >= 0
+                        ? totalExpences - couponData.credits
+                        : 0
+                    : totalExpences}
+            </p>
         </span>
 
         {#if $createOrganization.billingPlan !== BillingPlan.STARTER}

From ad64c7371d45eeb72943971983ef7a4b70471466 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 17 Jan 2024 11:12:46 +0100
Subject: [PATCH 09/14] chore: add method

---
 src/lib/layout/header.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index da3aa7e7b9..9dbc534c5c 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -121,7 +121,13 @@
         {#if isCloud && $organization?.billingPlan === BillingPlan.STARTER && !$page.url.pathname.startsWith('/console/account')}
             <Button
                 disabled={$organization?.markedForDeletion}
-                on:click={() => wizard.start(ChangeOrganizationTierCloud)}>
+                on:click={() => {
+                    wizard.start(ChangeOrganizationTierCloud);
+                    trackEvent('click_organization_upgrade', {
+                        from: 'button',
+                        source: 'top_nav'
+                    });
+                }}>
                 Upgrade
             </Button>
         {/if}

From 8198e553d75ae0d09778c9f87f56dfd098beaba6 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 17 Jan 2024 14:38:45 +0100
Subject: [PATCH 10/14] chore: add missing events

---
 src/lib/layout/containerHeader.svelte            | 16 +++++++++++++---
 .../usage/[[invoice]]/+page.svelte               | 10 +++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index e2d60b2bec..80585507ed 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -18,6 +18,7 @@
     import { ContainerButton } from '.';
     import { Button } from '$lib/elements/forms';
     import { BillingPlan } from '$lib/constants';
+    import { trackEvent } from '$lib/actions/analytics';
 
     export let isFlex = true;
     export let title: string;
@@ -92,8 +93,12 @@
                     <span class="text">
                         You've reached the {services} limit for the {tier} plan. <Button
                             link
-                            on:click={upgradeMethod}>Upgrade</Button> your organization for additional
-                        resources.
+                            on:click={upgradeMethod}
+                            on:click={() =>
+                                trackEvent('click_organization_upgrade', {
+                                    from: 'button',
+                                    source: 'inline_alert'
+                                })}>Upgrade</Button> your organization for additional resources.
                     </span>
                 </Alert>
             {/if}
@@ -124,7 +129,12 @@
                                 {title.toLocaleLowerCase()} per project on the {tier} plan.
                                 {#if $organization?.billingPlan === BillingPlan.STARTER}<Button
                                         link
-                                        on:click={upgradeMethod}>Upgrade</Button>
+                                        on:click={upgradeMethod}
+                                        on:click={() =>
+                                            trackEvent('click_organization_upgrade', {
+                                                from: 'button',
+                                                source: 'resource_limit_tag'
+                                            })}>Upgrade</Button>
                                     for addtional {title.toLocaleLowerCase()}.
                                 {/if}
                             </p>
diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte
index 475e23ed5b..ccd10c321d 100644
--- a/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte
+++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -13,6 +13,7 @@
     import { accumulateFromEndingTotal, total } from '$lib/layout/usage.svelte';
     import type { OrganizationUsage } from '$lib/sdk/billing';
     import { BillingPlan } from '$lib/constants';
+    import { trackEvent } from '$lib/actions/analytics';
 
     export let data;
 
@@ -42,7 +43,14 @@
         <Heading tag="h2" size="5">Usage</Heading>
 
         {#if $organization?.billingPlan === BillingPlan.STARTER}
-            <Button on:click={() => wizard.start(ChangeOrganizationTierCloud)}>
+            <Button
+                on:click={() => {
+                    wizard.start(ChangeOrganizationTierCloud);
+                    trackEvent('click_organization_upgrade', {
+                        from: 'button',
+                        source: 'organization_usage'
+                    });
+                }}>
                 <span class="text">Upgrade</span>
             </Button>
         {/if}

From ead4c42a955f87af94aaa02798be459b4686abc4 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 18 Jan 2024 15:26:35 +0100
Subject: [PATCH 11/14] fix: budget cap

---
 .../billing/budgetCap.svelte                      | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/organization-[organization]/billing/budgetCap.svelte b/src/routes/console/organization-[organization]/billing/budgetCap.svelte
index 137c70ba4f..f44070bdd7 100644
--- a/src/routes/console/organization-[organization]/billing/budgetCap.svelte
+++ b/src/routes/console/organization-[organization]/billing/budgetCap.svelte
@@ -8,6 +8,8 @@
     import { addNotification } from '$lib/stores/notifications';
     import { organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
+    import { wizard } from '$lib/stores/wizard';
+    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
     import { onMount } from 'svelte';
 
     let capActive = false;
@@ -92,7 +94,18 @@
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
-            <Button disabled={$organization?.billingBudget === budget} submit>Update</Button>
+            {#if $organization?.billingPlan === BillingPlan.STARTER}
+                <Button
+                    on:click={() => {
+                        wizard.start(ChangeOrganizationTierCloud);
+                        trackEvent('click_organization_upgrade', {
+                            from: 'button',
+                            source: 'billing_budget_cap'
+                        });
+                    }}>Upgrade to Pro</Button>
+            {:else}
+                <Button disabled={$organization?.billingBudget === budget} submit>Update</Button>
+            {/if}
         </svelte:fragment>
     </CardGrid>
 </Form>

From bd265cc3a6f143734f72acd8472dd76a72039cd8 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 22 Jan 2024 14:51:01 +0100
Subject: [PATCH 12/14] fix: add credit wizard

---
 src/lib/components/billing/couponInput.svelte         |  2 +-
 .../billing/availableCredit.svelte                    |  7 ++++---
 .../billing/wizard/addCredit.svelte                   | 11 ++++++++++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/billing/couponInput.svelte b/src/lib/components/billing/couponInput.svelte
index 1d4d4a109c..482f216f89 100644
--- a/src/lib/components/billing/couponInput.svelte
+++ b/src/lib/components/billing/couponInput.svelte
@@ -68,7 +68,7 @@
                     </span>
                 </slot>
             </div>
-            <Button text on:click={removeCoupon}>Remove</Button>
+            <Button round text on:click={removeCoupon}><span class="icon-x"></span></Button>
         </div>
     {/if}
 </FormList>
diff --git a/src/routes/console/organization-[organization]/billing/availableCredit.svelte b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
index 753e389d77..73df3b96c5 100644
--- a/src/routes/console/organization-[organization]/billing/availableCredit.svelte
+++ b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
@@ -71,9 +71,10 @@
     <p class="text">Appwrite credit will automatically be applied to your next invoice.</p>
     <svelte:fragment slot="aside">
         <div class="u-flex u-cross-center u-main-space-between">
-            <h4 class="body-text-1 u-bold">
-                Credit balance <span class="inline-tag">${balance}</span>
-            </h4>
+            <div class="u-flex u-gap-8 u-cross-center">
+                <h4 class="body-text-1 u-bold">Credit balance</h4>
+                <span class="inline-tag">${balance}</span>
+            </div>
             {#if creditList?.total}
                 <Button secondary on:click={handleCredits}>
                     <span class="icon-plus" aria-hidden="true"></span>
diff --git a/src/routes/console/organization-[organization]/billing/wizard/addCredit.svelte b/src/routes/console/organization-[organization]/billing/wizard/addCredit.svelte
index 3e4a3707bd..ddc5292c2f 100644
--- a/src/routes/console/organization-[organization]/billing/wizard/addCredit.svelte
+++ b/src/routes/console/organization-[organization]/billing/wizard/addCredit.svelte
@@ -4,6 +4,7 @@
     import type { Coupon } from '$lib/sdk/billing';
     import { sdk } from '$lib/stores/sdk';
     import { wizard } from '$lib/stores/wizard';
+    import { onMount } from 'svelte';
     import { addCreditWizardStore } from '../store';
 
     let coupon: string;
@@ -18,6 +19,7 @@
         try {
             const response = await sdk.forConsole.billing.getCoupon(coupon);
             couponData = response;
+            $addCreditWizardStore.coupon = coupon;
             coupon = null;
         } catch (error) {
             couponData.code = coupon;
@@ -26,6 +28,13 @@
             throw new Error(error);
         }
     }
+
+    onMount(() => {
+        if ($addCreditWizardStore.coupon) {
+            coupon = $addCreditWizardStore.coupon;
+            validateCoupon();
+        }
+    });
 </script>
 
 <WizardStep beforeSubmit={validateCoupon}>
@@ -41,6 +50,6 @@
             $addCreditWizardStore.coupon = e.detail.code;
         }}
         let:data>
-        <span>{data.code} has been successfully added</span>
+        <span>{data.code.toUpperCase()} has been successfully added</span>
     </CouponInput>
 </WizardStep>

From e300174f6b810c236d78ab4b57929dfbd1ec88ef Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 22 Jan 2024 16:52:04 +0100
Subject: [PATCH 13/14] chore: add missing data private

---
 src/lib/components/radioBoxes.svelte | 2 +-
 src/lib/layout/notification.svelte   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/radioBoxes.svelte b/src/lib/components/radioBoxes.svelte
index 74e84a85ae..4e3b4bf924 100644
--- a/src/lib/components/radioBoxes.svelte
+++ b/src/lib/components/radioBoxes.svelte
@@ -13,7 +13,7 @@
     {#if total}
         {#each elements as element}
             {@const value = element[variableName]?.toString()}
-            <div class="box">
+            <div class="box" data-private>
                 <InputRadio
                     id={`${name}-${value}`}
                     {value}
diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte
index c8b629a066..5968f9cd36 100644
--- a/src/lib/layout/notification.svelte
+++ b/src/lib/layout/notification.svelte
@@ -36,7 +36,7 @@
             class={icon ? `icon-${icon}` : ''}
             aria-hidden="true" />
     </div>
-    <div class="alert-sticky-content">
+    <div class="alert-sticky-content" data-private>
         {#if title}
             <h4 class="alert-sticky-title">{title}</h4>
         {/if}

From 70589436c96eb3f5fd98ab2191dc73cac185eac9 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 24 Jan 2024 16:55:41 +0100
Subject: [PATCH 14/14] fix: button type

---
 .../console/organization-[organization]/billing/budgetCap.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/console/organization-[organization]/billing/budgetCap.svelte b/src/routes/console/organization-[organization]/billing/budgetCap.svelte
index f44070bdd7..b2f710b166 100644
--- a/src/routes/console/organization-[organization]/billing/budgetCap.svelte
+++ b/src/routes/console/organization-[organization]/billing/budgetCap.svelte
@@ -96,6 +96,7 @@
         <svelte:fragment slot="actions">
             {#if $organization?.billingPlan === BillingPlan.STARTER}
                 <Button
+                    secondary
                     on:click={() => {
                         wizard.start(ChangeOrganizationTierCloud);
                         trackEvent('click_organization_upgrade', {