feat: billing

.env.example

@@ -1,4 +1,6 @@
 VITE_APPWRITE_ENDPOINT=http://localhost/v1
 VITE_APPWRITE_GROWTH_ENDPOINT= 
 VITE_GA_PROJECT=
-VITE_CONSOLE_MODE=self-hosted
+VITE_CONSOLE_MODE=self-hosted
+VITE_STRIPE_PUBLIC_KEY=
+VITE_CONSOLE_MODE=self-hosted

package.json

@@ -24,6 +24,7 @@
         "@popperjs/core": "^2.11.8",
         "@sentry/svelte": "^7.66.0",
         "@sentry/tracing": "^7.66.0",
+        "@stripe/stripe-js": "^2.2.0",
         "ai": "^2.2.11",
         "analytics": "^0.8.9",
         "dayjs": "^1.11.9",
@@ -40,6 +41,8 @@
         "web-vitals": "^3.4.0"
     },
     "devDependencies": {
+        "@melt-ui/pp": "^0.1.4",
+        "@melt-ui/svelte": "^0.61.2",
         "@playwright/test": "^1.37.1",
         "@sveltejs/adapter-static": "^2.0.3",
         "@sveltejs/kit": "^1.24.0",
@@ -65,6 +68,7 @@
         "svelte-check": "^3.5.1",
         "svelte-jester": "^2.3.2",
         "svelte-preprocess": "^5.0.4",
+        "svelte-sequential-preprocessor": "^2.0.1",
         "tslib": "^2.6.2",
         "typescript": "^5.2.2",
         "vite": "^4.4.9",

src/lib/actions/analytics.ts

@@ -256,6 +256,25 @@ export enum Submit {
     FileCreate = 'submit_file_create',
     FileDelete = 'submit_file_delete',
     FileUpdatePermissions = 'submit_file_update_permissions',
+    BudgetCapUpdate = 'submit_budget_cap_update',
+    BudgetAlertsUpdate = 'submit_budget_alert_conditions_update',
+    CreditRedeem = 'submit_credit_redeem',
+    PaymentMethodCreate = 'submit_payment_method_create',
+    PaymentMethodUpdate = 'submit_payment_method_update',
+    PaymentMethodDelete = 'submit_payment_method_delete',
+    BillingAddressCreate = 'submit_billing_address_create',
+    BillingAddressUpdate = 'submit_billing_address_update',
+    BillingAddressDelete = 'submit_billing_address_delete',
+    OrganizationPaymentUpdate = 'submit_organization_payment_update',
+    OrganizationPaymentDelete = 'submit_organization_payment_delete',
+    OrganizationBackupPaymentUpdate = 'submit_organization_backup_payment_update',
+    OrganizationBackupPaymentDelete = 'submit_organization_backup_payment_delete',
+    OrganizationBillingAddressUpdate = 'submit_organization_billing_address_update',
+    OrganizationBillingAddressDelete = 'submit_organization_billing_address_delete',
+    OrganizationUpgrade = 'submit_organization_upgrade',
+    OrganizationDowngrade = 'submit_organization_downgrade',
+    OrganizationBillingTaxIdUpdate = 'submit_organization_billing_tax_id_update',
+    SupportTicket = 'submit_support_ticket',
     InstallationCreate = 'submit_installation_create',
     InstallationDelete = 'submit_installation_delete',
     EmailChangeLocale = 'submit_email_change_locale',

src/lib/components/alert.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
     import type { Buttons } from '../stores/notifications';
+    import { Button } from '$lib/elements/forms';
 
     export let dismissible = false;
     export let type: 'info' | 'success' | 'warning' | 'error' | 'default' = 'info';
@@ -44,20 +45,23 @@
                     <slot name="title" />
                 </h6>
             {/if}
+
             {#if $$slots.default}
                 <p class="alert-message"><slot /></p>
             {/if}
-            {#if ($$slots.buttons || buttons?.length) && !isAction}
-                <div class="alert-buttons u-flex">
-                    <slot name="buttons">
-                        {#each buttons as button}
-                            <button type="button" class="button is-text" on:click={button.method}>
-                                <span class="text">{button.name}</span>
-                            </button>
-                        {/each}
-                    </slot>
-                </div>
-            {/if}
+            <slot name="action">
+                {#if ($$slots.buttons || buttons?.length) && !isAction}
+                    <div class="alert-buttons u-flex">
+                        <slot name="buttons">
+                            {#each buttons as button}
+                                <Button text on:click={button.method}>
+                                    <span class="text">{button.name}</span>
+                                </Button>
+                            {/each}
+                        </slot>
+                    </div>
+                {/if}
+            </slot>
         </div>
         {#if ($$slots.buttons || buttons?.length) && isAction}
             <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">

src/lib/components/box.svelte

@@ -5,7 +5,7 @@
     export { classes as class };
 
     enum radiuses {
-        xsmall = '--border-radius-extra-large',
+        xsmall = '--border-radius-xsmall',
         small = '--border-radius-small',
         medium = '--border-radius-medium',
         large = '--border-radius-large'

src/lib/components/cardContainer.svelte

@@ -2,11 +2,18 @@
     import { page } from '$app/stores';
     import { Empty } from '$lib/components';
     import { CARD_LIMIT } from '$lib/constants';
+    import { getServiceLimit, type PlanServices } from '$lib/stores/billing';
     import { preferences } from '$lib/stores/preferences';
+    import { isCloud } from '$lib/system';
+    import CardPlanLimit from './cardPlanLimit.svelte';
 
     export let offset = 0;
     export let total = 0;
     export let event: string = null;
+    export let service = '';
+    export let serviceId: PlanServices = service as PlanServices;
+
+    $: planLimit = getServiceLimit(serviceId) || Infinity;
 
     $: limit = preferences.get($page.route)?.limit ?? CARD_LIMIT;
 </script>
@@ -18,8 +25,12 @@
     <slot />
 
     {#if total > 3 ? total < limit + offset : total % 2 !== 0}
-        <Empty on:click target={event}>
-            <slot name="empty" />
-        </Empty>
+        {#if isCloud && serviceId && total >= planLimit}
+            <CardPlanLimit {service} />
+        {:else}
+            <Empty on:click target={event}>
+                <slot name="empty" />
+            </Empty>
+        {/if}
     {/if}
 </ul>

src/lib/components/cardGrid.svelte

@@ -10,7 +10,7 @@
         <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
             <slot />
         </div>
-        <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-24">
+        <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16">
             <slot name="aside" />
         </div>
     </div>

src/lib/components/cardPlanLimit.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { wizard } from '$lib/stores/wizard';
+    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+
+    export let service = '';
+</script>
+
+<article class="card u-grid u-cross-center u-width-full-line">
+    <div class="u-flex u-flex-vertical u-gap-24 u-main-center u-cross-center">
+        <p class="text u-text-center">Upgrade your plan to add more {service}</p>
+        <Button secondary on:click={() => wizard.start(ChangeOrganizationTierCloud)}>
+            Change plan
+        </Button>
+    </div>
+</article>

src/lib/components/creditCardBrandImage.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import { sdk } from '$lib/stores/sdk';
+
+    export let brand: string;
+    export let width = 23;
+    export let height = 16;
+
+    function getCreditCardImage(brand: string, width = 46, height = 32) {
+        if (!brand) return '';
+        return sdk.forConsole.avatars.getCreditCard(brand, width, height).toString();
+    }
+</script>
+
+<img style="border-radius: 2.5px" {width} {height} src={getCreditCardImage(brand)} alt={brand} />