From 48a281f6301e5597e759cf9a81603a0a0b050251 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 5 Jul 2024 15:55:09 +0200
Subject: [PATCH 1/3] feat: gradient banner

---
 .../billing/alerts/newDevUpgradePro.svelte    | 42 +++++++++++++++++++
 .../billing/alerts/upgradeToPro.svelte        | 34 ---------------
 .../components/billing/gradientBanner.svelte  | 22 +---------
 src/lib/stores/billing.ts                     | 24 +++++++----
 src/routes/console/+layout.svelte             |  5 ++-
 src/routes/console/apply-credit/+page.svelte  |  7 +++-
 6 files changed, 68 insertions(+), 66 deletions(-)
 create mode 100644 src/lib/components/billing/alerts/newDevUpgradePro.svelte
 delete mode 100644 src/lib/components/billing/alerts/upgradeToPro.svelte

diff --git a/src/lib/components/billing/alerts/newDevUpgradePro.svelte b/src/lib/components/billing/alerts/newDevUpgradePro.svelte
new file mode 100644
index 000000000..f4568f661
--- /dev/null
+++ b/src/lib/components/billing/alerts/newDevUpgradePro.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { BillingPlan } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { organization } from '$lib/stores/organization';
+    import { activeHeaderAlert } from '$routes/console/store';
+    import GradientBanner from '../gradientBanner.svelte';
+
+    let show = true;
+
+    function handleClose() {
+        show = false;
+        const now = new Date().getTime();
+        localStorage.setItem($activeHeaderAlert.id, now.toString());
+        trackEvent('close_upgrade_banner', {
+            source: 'upgrade_banner'
+        });
+    }
+</script>
+
+{#if show && $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && !$page.url.pathname.includes('/console/account')}
+    <GradientBanner on:close={handleClose}>
+        <div class="u-flex u-gap-16 u-main-center u-cross-center u-flex-vertical-mobile">
+            <span class="body-text-1">Get $50 Cloud credits for Appwrite Pro.</span>
+            <Button
+                secondary
+                fullWidthMobile
+                class="u-line-height-1"
+                href={`${base}/console/apply-credit?code=appw50&org=${$organization.$id}`}
+                on:click={() => {
+                    trackEvent('click_organization_upgrade', {
+                        from: 'button',
+                        source: 'upgrade_banner'
+                    });
+                }}>
+                Claim credits
+            </Button>
+        </div>
+    </GradientBanner>
+{/if}
diff --git a/src/lib/components/billing/alerts/upgradeToPro.svelte b/src/lib/components/billing/alerts/upgradeToPro.svelte
deleted file mode 100644
index ff1c34eef..000000000
--- a/src/lib/components/billing/alerts/upgradeToPro.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { trackEvent } from '$lib/actions/analytics';
-    import { BillingPlan } from '$lib/constants';
-    import { upgradeURL } from '$lib/stores/billing';
-    import { organization } from '$lib/stores/organization';
-    import GradientBanner from '../gradientBanner.svelte';
-
-    let show = true;
-
-    function handleClose() {
-        show = false;
-        const now = new Date().getTime();
-        localStorage.setItem('upgradeBanner', now.toString());
-        trackEvent('close_upgrade_banner', {
-            source: 'upgrade_banner'
-        });
-    }
-</script>
-
-{#if show && $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && !$page.url.pathname.includes('/console/account')}
-    <GradientBanner
-        on:close={handleClose}
-        on:click={() => {
-            trackEvent('click_organization_upgrade', {
-                from: 'button',
-                source: 'upgrade_banner'
-            });
-        }}
-        href={$upgradeURL}
-        buttonText="Upgrade">
-        Appwrite Pro is now available!
-    </GradientBanner>
-{/if}
diff --git a/src/lib/components/billing/gradientBanner.svelte b/src/lib/components/billing/gradientBanner.svelte
index 2511d234f..1a4249f2a 100644
--- a/src/lib/components/billing/gradientBanner.svelte
+++ b/src/lib/components/billing/gradientBanner.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
-    import { Button } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
 
-    export let buttonText: string;
-    export let href: string = null;
-
     const dispatch = createEventDispatcher();
 </script>
 
@@ -18,23 +14,7 @@
         </div>
     </div>
     <div class="top-banner-content u-color-text-primary">
-        {#if href}
-            <a
-                class="u-flex u-gap-16 u-main-center u-cross-center u-flex-vertical-mobile"
-                {href}
-                target="_blank"
-                rel="noopener noreferrer">
-                <span class="body-text-1 u-bold"><slot /></span>
-                <Button secondary fullWidthMobile on:click class="u-line-height-1"
-                    >{buttonText}</Button>
-            </a>
-        {:else}
-            <div class="u-flex u-gap-16 u-main-center u-cross-center u-flex-vertical-mobile">
-                <span class="body-text-1 u-bold"><slot /></span>
-                <Button secondary fullWidthMobile on:click class="u-line-height-1"
-                    >{buttonText}</Button>
-            </div>
-        {/if}
+        <slot />
     </div>
     <button
         on:click|preventDefault={() => dispatch('close')}
diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index 8c032cffc..fd949a24d 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -27,9 +27,11 @@ import PaymentMandate from '$lib/components/billing/alerts/paymentMandate.svelte
 import MissingPaymentMethod from '$lib/components/billing/alerts/missingPaymentMethod.svelte';
 import LimitReached from '$lib/components/billing/alerts/limitReached.svelte';
 import { trackEvent } from '$lib/actions/analytics';
-import UpgradeToPro from '$lib/components/billing/alerts/upgradeToPro.svelte';
+import newDevUpgradePro from '$lib/components/billing/alerts/newDevUpgradePro.svelte';
 import { last } from '$lib/helpers/array';
 import { sizeToBytes, type Size } from '$lib/helpers/sizeConvertion';
+import { user } from './user';
+import { browser } from '$app/environment';
 
 export type Tier = 'tier-0' | 'tier-1' | 'tier-2';
 
@@ -367,19 +369,25 @@ export async function checkForMissingPaymentMethod() {
     }
 }
 
-export async function checkForUpgradeBanner(org: Organization) {
-    if (org?.billingPlan !== BillingPlan.FREE) return;
+// Display upgrade banner for new users after 1 week for 30 days
+export async function checkForNewDevUpgradePro(org: Organization) {
+    if (org?.billingPlan !== BillingPlan.FREE || !browser) return;
+
     const orgs = await sdk.forConsole.billing.listOrganization([
         Query.notEqual('billingPlan', BillingPlan.FREE)
     ]);
     if (orgs?.total) return;
-    const localData = localStorage.getItem('upgradeBanner');
-    const hideUpgradeBanner = localData ? parseInt(localData) : 0;
+
     const now = new Date().getTime();
-    if (now - hideUpgradeBanner >= 1000 * 60 * 60 * 24 * 14) {
+    const account = get(user);
+    const accountCreated = new Date(account.$createdAt).getTime();
+    if (now - accountCreated < 1000 * 60 * 60 * 24 * 7) return;
+    const isDismissed = !!localStorage.getItem('newDevUpgradePro');
+    if (isDismissed) return;
+    if (now - accountCreated < 1000 * 60 * 60 * 24 * 37) {
         headerAlert.add({
-            id: 'upgradeBanner',
-            component: UpgradeToPro,
+            id: 'newDevUpgradePro',
+            component: newDevUpgradePro,
             show: true,
             importance: 1
         });
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index 7cdee0e84..d7e145e9a 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -22,7 +22,7 @@
         checkForMarkedForDeletion,
         checkForMandate,
         checkForMissingPaymentMethod,
-        checkForUpgradeBanner,
+        checkForNewDevUpgradePro,
         plansInfo
     } from '$lib/stores/billing';
     import { goto } from '$app/navigation';
@@ -267,11 +267,12 @@
         if (isCloud) {
             await checkForUsageLimit(org);
             checkForMarkedForDeletion(org);
+            await checkForNewDevUpgradePro(org);
+
             if (org?.billingPlan !== BillingPlan.FREE) {
                 await paymentExpired(org);
                 await checkPaymentAuthorizationRequired(org);
                 await checkForMandate(org);
-                await checkForUpgradeBanner(org);
 
                 if ($plansInfo.get(org.billingPlan)?.trialDays) {
                     calculateTrialDay(org);
diff --git a/src/routes/console/apply-credit/+page.svelte b/src/routes/console/apply-credit/+page.svelte
index d1dd1ce47..187881562 100644
--- a/src/routes/console/apply-credit/+page.svelte
+++ b/src/routes/console/apply-credit/+page.svelte
@@ -32,6 +32,7 @@
     const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,63}$/i;
     let previousPage: string = `${base}/console`;
     let showExitModal = false;
+    let canSelectOrg = true;
 
     afterNavigate(({ from }) => {
         if (from?.url?.pathname) {
@@ -74,6 +75,10 @@
         if (!$organizationList?.total || campaign?.onlyNewOrgs) {
             selectedOrgId = newOrgId;
         }
+        if ($page.url.searchParams.has('org')) {
+            selectedOrgId = $page.url.searchParams.get('org');
+            canSelectOrg = false;
+        }
     });
 
     async function loadPaymentMethods() {
@@ -207,7 +212,7 @@
     <WizardSecondaryContent>
         <Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
             <FormList>
-                {#if $organizationList?.total && !campaign?.onlyNewOrgs}
+                {#if $organizationList?.total && !campaign?.onlyNewOrgs && canSelectOrg}
                     <InputSelect
                         bind:value={selectedOrgId}
                         label="Select organization"

From 9e3e302717a48bd89f7f4ac32352846f0554c992 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 8 Jul 2024 15:17:45 +0200
Subject: [PATCH 2/3] chore: temp disable conditions

---
 src/lib/stores/billing.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index 5e54db955..9a7673ecb 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -391,6 +391,7 @@ export async function checkForMissingPaymentMethod() {
     }
 }
 
+//TODO: re-enable conditions
 // Display upgrade banner for new users after 1 week for 30 days
 export async function checkForNewDevUpgradePro(org: Organization) {
     if (org?.billingPlan !== BillingPlan.FREE || !browser) return;
@@ -403,7 +404,7 @@ export async function checkForNewDevUpgradePro(org: Organization) {
     const now = new Date().getTime();
     const account = get(user);
     const accountCreated = new Date(account.$createdAt).getTime();
-    if (now - accountCreated < 1000 * 60 * 60 * 24 * 7) return;
+    // if (now - accountCreated < 1000 * 60 * 60 * 24 * 7) return;
     const isDismissed = !!localStorage.getItem('newDevUpgradePro');
     if (isDismissed) return;
     if (now - accountCreated < 1000 * 60 * 60 * 24 * 37) {

From 26f294a57810bb223835ddcdc161b456c31300af Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 12 Jul 2024 11:19:28 +0200
Subject: [PATCH 3/3] feat: events

---
 .../components/billing/alerts/newDevUpgradePro.svelte  | 10 ++++++----
 src/lib/stores/billing.ts                              |  3 +--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/billing/alerts/newDevUpgradePro.svelte b/src/lib/components/billing/alerts/newDevUpgradePro.svelte
index f4568f661..32446f91c 100644
--- a/src/lib/components/billing/alerts/newDevUpgradePro.svelte
+++ b/src/lib/components/billing/alerts/newDevUpgradePro.svelte
@@ -15,14 +15,15 @@
         const now = new Date().getTime();
         localStorage.setItem($activeHeaderAlert.id, now.toString());
         trackEvent('close_upgrade_banner', {
-            source: 'upgrade_banner'
+            source: 'cloud_credits_banner',
+            campaign: 'WelcomeManual'
         });
     }
 </script>
 
 {#if show && $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && !$page.url.pathname.includes('/console/account')}
     <GradientBanner on:close={handleClose}>
-        <div class="u-flex u-gap-16 u-main-center u-cross-center u-flex-vertical-mobile">
+        <div class="u-flex u-gap-24 u-main-center u-cross-center u-flex-vertical-mobile">
             <span class="body-text-1">Get $50 Cloud credits for Appwrite Pro.</span>
             <Button
                 secondary
@@ -30,9 +31,10 @@
                 class="u-line-height-1"
                 href={`${base}/console/apply-credit?code=appw50&org=${$organization.$id}`}
                 on:click={() => {
-                    trackEvent('click_organization_upgrade', {
+                    trackEvent('click_credits_redeem', {
                         from: 'button',
-                        source: 'upgrade_banner'
+                        source: 'cloud_credits_banner',
+                        campaign: 'WelcomeManual'
                     });
                 }}>
                 Claim credits
diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index 9a7673ecb..5e54db955 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -391,7 +391,6 @@ export async function checkForMissingPaymentMethod() {
     }
 }
 
-//TODO: re-enable conditions
 // Display upgrade banner for new users after 1 week for 30 days
 export async function checkForNewDevUpgradePro(org: Organization) {
     if (org?.billingPlan !== BillingPlan.FREE || !browser) return;
@@ -404,7 +403,7 @@ export async function checkForNewDevUpgradePro(org: Organization) {
     const now = new Date().getTime();
     const account = get(user);
     const accountCreated = new Date(account.$createdAt).getTime();
-    // if (now - accountCreated < 1000 * 60 * 60 * 24 * 7) return;
+    if (now - accountCreated < 1000 * 60 * 60 * 24 * 7) return;
     const isDismissed = !!localStorage.getItem('newDevUpgradePro');
     if (isDismissed) return;
     if (now - accountCreated < 1000 * 60 * 60 * 24 * 37) {