Merge pull request #1038 from appwrite/feat-gradient-alert-banner

feat: gradient alert banner

Author: TorstenDittmann

package-lock.json

@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@appwrite.io/console": "^0.6.2",
-        "@appwrite.io/pink": "0.23.0",
-        "@appwrite.io/pink-icons": "0.23.0",
+        "@appwrite.io/pink": "0.25.0",
+        "@appwrite.io/pink-icons": "0.25.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/svelte": "^7.66.0",
         "@sentry/tracing": "^7.66.0",

package.json

@@ -0,0 +1,44 @@
+<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: '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-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
+                fullWidthMobile
+                class="u-line-height-1"
+                href={`${base}/console/apply-credit?code=appw50&org=${$organization.$id}`}
+                on:click={() => {
+                    trackEvent('click_credits_redeem', {
+                        from: 'button',
+                        source: 'cloud_credits_banner',
+                        campaign: 'WelcomeManual'
+                    });
+                }}>
+                Claim credits
+            </Button>
+        </div>
+    </GradientBanner>
+{/if}

src/lib/components/billing/alerts/newDevUpgradePro.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+</script>
+
+<div class="top-banner">
+    <div class="top-banner-bg">
+        <div class="top-banner-bg-1">
+            <img src="/images/top-banner/bg-pink-desktop.svg" width="1283" height="1278" alt="" />
+        </div>
+        <div class="top-banner-bg-2">
+            <img src="/images/top-banner/bg-mint-desktop.svg" width="1051" height="1271" alt="" />
+        </div>
+    </div>
+    <div class="top-banner-content u-color-text-primary">
+        <slot />
+    </div>
+    <button
+        on:click|preventDefault={() => dispatch('close')}
+        type="button"
+        class="top-banner-button"
+        aria-label="close upgrade message">
+        <span class="icon-x" aria-hidden="true"></span>
+    </button>
+</div>

src/lib/components/billing/gradientBanner.svelte

@@ -58,11 +58,11 @@
     // TODO: remove once pink is updated
     .collapsible-item {
         .collapsible-wrapper.is-disabled {
+            cursor: not-allowed;
+
             &[open] .icon-cheveron-down {
                 rotate: unset;
             }
-
-            cursor: not-allowed;
             * {
                 cursor: not-allowed;
             }

src/lib/components/collapsibleItem.svelte

@@ -121,11 +121,6 @@
         --p-drop-bg-color: var(--color-neutral-105);
         --p-drop-border-color: var(--color-neutral-85);
 
-        body.theme-light & {
-            --p-drop-bg-color: var(--color-neutral-0);
-            --p-drop-border-color: var(--color-neutral-10);
-        }
-
         inset-inline-start: -0.625rem;
         inset-block-end: calc(100% + 0.625rem);
         background-color: hsl(var(--p-drop-bg-color));
@@ -138,6 +133,11 @@
         margin-inline: auto;
         line-height: 1.5;
 
+        body.theme-light & {
+            --p-drop-bg-color: var(--color-neutral-0);
+            --p-drop-border-color: var(--color-neutral-10);
+        }
+
         .tippy-content {
             padding: 1rem;
         }

src/lib/components/permissions/row.svelte

@@ -27,8 +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 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';
 
@@ -388,6 +391,30 @@ export async function checkForMissingPaymentMethod() {
     }
 }
 
+// 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 now = new Date().getTime();
+    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: 'newDevUpgradePro',
+            component: newDevUpgradePro,
+            show: true,
+            importance: 1
+        });
+    }
+}
 export const upgradeURL = derived(
     page,
     ($page) => `${base}/console/organization-${$page.data?.organization?.$id}/change-plan`

src/lib/stores/billing.ts

@@ -22,6 +22,7 @@
         checkForMarkedForDeletion,
         checkForMandate,
         checkForMissingPaymentMethod,
+        checkForNewDevUpgradePro,
         plansInfo
     } from '$lib/stores/billing';
     import { goto } from '$app/navigation';
@@ -266,10 +267,13 @@
         if (isCloud) {
             await checkForUsageLimit(org);
             checkForMarkedForDeletion(org);
+            await checkForNewDevUpgradePro(org);
+
             if (org?.billingPlan !== BillingPlan.FREE) {
                 await paymentExpired(org);
                 await checkPaymentAuthorizationRequired(org);
                 await checkForMandate(org);
+
                 if ($plansInfo.get(org.billingPlan)?.trialDays) {
                     calculateTrialDay(org);
                 }

src/routes/console/+layout.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) {
@@ -75,6 +76,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() {
@@ -197,7 +202,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"