Merge main for fix-sdk-context

.github/workflows/publish.yml

@@ -42,6 +42,7 @@ jobs:
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"
                       "PUBLIC_STRIPE_KEY=${{ secrets.PUBLIC_STRIPE_KEY }}"
                       "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}"
+                      "SENTRY_RELEASE=${{ github.event.release.tag_name }}"
     publish-cloud-stage:
         runs-on: ubuntu-latest
         steps:

Dockerfile

@@ -6,6 +6,7 @@ ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN npm i -g corepack@latest
 RUN corepack enable
+RUN corepack prepare [email protected] --activate
 
 ADD ./package.json /app/package.json
 ADD ./pnpm-lock.yaml /app/pnpm-lock.yaml
@@ -24,12 +25,14 @@ ARG PUBLIC_APPWRITE_ENDPOINT
 ARG PUBLIC_GROWTH_ENDPOINT
 ARG PUBLIC_STRIPE_KEY
 ARG SENTRY_AUTH_TOKEN
+ARG SENTRY_RELEASE
 
 ENV PUBLIC_APPWRITE_ENDPOINT=$PUBLIC_APPWRITE_ENDPOINT
 ENV PUBLIC_GROWTH_ENDPOINT=$PUBLIC_GROWTH_ENDPOINT
 ENV PUBLIC_CONSOLE_MODE=$PUBLIC_CONSOLE_MODE
 ENV PUBLIC_STRIPE_KEY=$PUBLIC_STRIPE_KEY
 ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
+ENV SENTRY_RELEASE=$SENTRY_RELEASE
 ENV NODE_OPTIONS=--max_old_space_size=8192
 
 RUN pnpm run sync && pnpm run build
@@ -39,4 +42,4 @@ FROM nginx:1.25-alpine
 EXPOSE 80
 
 COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
-COPY --from=build /app/build /usr/share/nginx/html/console
+COPY --from=build /app/build /usr/share/nginx/html/console

package.json

@@ -25,7 +25,7 @@
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
-        "@ai-sdk/svelte": "^1.1.22",
+        "@ai-sdk/svelte": "^1.1.24",
         "analytics": "^0.8.14",
         "cron-parser": "^4.9.0",
         "dayjs": "^1.11.13",

playwright.config.ts

@@ -12,7 +12,7 @@ const config: PlaywrightTestConfig = {
     webServer: {
         timeout: 120000,
         env: {
-            PUBLIC_APPWRITE_ENDPOINT: 'https://console-testing-2.appwrite.org/v1',
+            PUBLIC_APPWRITE_ENDPOINT: 'https://dlbillingic.appwrite.org/v1',
             PUBLIC_CONSOLE_MODE: 'cloud',
             PUBLIC_STRIPE_KEY:
                 'pk_test_51LT5nsGYD1ySxNCyd7b304wPD8Y1XKKWR6hqo6cu3GIRwgvcVNzoZv4vKt5DfYXL1gRGw4JOqE19afwkJYJq1g3K004eVfpdWn'

src/lib/actions/analytics.ts

@@ -6,6 +6,7 @@ import { user } from '$lib/stores/user';
 import { ENV, MODE, VARS, isCloud } from '$lib/system';
 import { AppwriteException } from '@appwrite.io/console';
 import { browser } from '$app/environment';
+import { getReferrerAndUtmSource } from '$lib/helpers/utm';
 
 function plausible(domain: string): AnalyticsPlugin {
     if (!browser) return { name: 'analytics-plugin-plausible' };
@@ -65,6 +66,8 @@ export function trackEvent(name: string, data: object = null): void {
         };
     }
 
+    data = { ...data, ...getReferrerAndUtmSource() };
+
     if (ENV.DEV || ENV.PREVIEW) {
         console.debug(`[Analytics] Event ${name} ${path}`, data);
     } else {

src/lib/charts/bar.svelte

@@ -13,7 +13,6 @@
     {formatted}
     series={series.map((s) => {
         s.type = 'bar';
-        s.stack = 'total';
         s.barMaxWidth = 6;
         s.itemStyle = {
             borderRadius: [10, 10, 0, 0]

src/lib/charts/index.ts

@@ -1,2 +1,3 @@
 export { default as BarChart } from './bar.svelte';
 export { default as LineChart } from './line.svelte';
+export { default as Legend, type LegendData } from './legend.svelte';

src/lib/charts/legend.svelte

@@ -0,0 +1,25 @@
+<script context="module" lang="ts">
+    export type LegendData = {
+        name: string;
+        value: string | number | boolean;
+    };
+</script>
+
+<script lang="ts">
+    import { Colors } from '$lib/charts/config';
+    import { Status } from '$lib/components';
+    import { formatNumberWithCommas } from '$lib/helpers/numbers';
+
+    export let legendData: LegendData[] = [];
+
+    let colors = Object.values(Colors);
+</script>
+
+<div class="u-flex u-cross-center u-gap-16">
+    {#each legendData as { name, value }, index}
+        {@const formattedValue = typeof value === 'number' ? formatNumberWithCommas(value) : value}
+        <Status status="none" statusIconStyle="background-color: {colors[index % colors.length]}">
+            {name} ({formattedValue})
+        </Status>
+    {/each}
+</div>

src/lib/commandCenter/panels/ai.svelte

@@ -180,7 +180,7 @@
     {#if $isLoading || answer}
         <div class="content">
             <div class="u-flex u-gap-8 u-cross-center">
-                <div class="avatar is-size-x-small">{getInitials($user.name)}</div>
+                <div class="avatar is-size-x-small">{getInitials($user.name || $user.email)}</div>
                 <p class="u-opacity-75">{previousQuestion}</p>
             </div>
             <div class="u-flex u-gap-8 u-margin-block-start-24">
@@ -230,7 +230,7 @@
 
     <div class="footer" slot="footer">
         <div class="u-flex u-cross-center u-gap-4">
-            <AvatarInitials size={32} name={$user.name} />
+            <AvatarInitials size={32} name={$user.name || $user.email} />
             <form
                 class="input-text-wrapper u-width-full-line"
                 style="--amount-of-buttons: 1;"

src/lib/commandCenter/searchers/organizations.ts

@@ -2,9 +2,13 @@ import { goto } from '$app/navigation';
 import { base } from '$app/paths';
 import { sdk } from '$lib/stores/sdk';
 import type { Searcher } from '../commands';
+import { isCloud } from '$lib/system';
 
 export const orgSearcher = (async (query: string) => {
-    const { teams } = await sdk.forConsole.teams.list();
+    const { teams } = !isCloud
+        ? await sdk.forConsole.teams.list()
+        : await sdk.forConsole.billing.listOrganization();
+
     return teams
         .filter((organization) => organization.name.toLowerCase().includes(query.toLowerCase()))
         .map((organization) => {

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

@@ -2,7 +2,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { trackEvent } from '$lib/actions/analytics';
-    import { BillingPlan } from '$lib/constants';
+    import { BillingPlan, NEW_DEV_PRO_UPGRADE_COUPON } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
     import { activeHeaderAlert } from '$routes/(console)/store';
@@ -29,7 +29,7 @@
                 secondary
                 fullWidthMobile
                 class="u-line-height-1"
-                href={`${base}/apply-credit?code=appw50&org=${$organization.$id}`}
+                href={`${base}/apply-credit?code=${NEW_DEV_PRO_UPGRADE_COUPON}&org=${$organization.$id}`}
                 on:click={() => {
                     trackEvent('click_credits_redeem', {
                         from: 'button',

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Button } from '$lib/elements/forms';
+    import { HeaderAlert } from '$lib/layout';
+    import { failedInvoice } from '$lib/stores/billing';
+    import { organization } from '$lib/stores/organization';
+
+    $: isOnProjects = $page.route.id.includes('project-[project]');
+</script>
+
+{#if $failedInvoice && $failedInvoice.teamId === $organization.$id && isOnProjects}
+    <HeaderAlert type="error" title="A scheduled payment for {$organization.name} failed">
+        To avoid service disruptions in your projects, please verify your payment details and try
+        again.
+        <svelte:fragment slot="buttons">
+            <Button
+                href={`${base}/organization-${$organization?.$id}/billing`}
+                secondary
+                fullWidthMobile>
+                <span class="text">Go to billing</span>
+            </Button>
+        </svelte:fragment>
+    </HeaderAlert>
+{/if}

src/lib/components/billing/couponInput.svelte

@@ -17,7 +17,7 @@
 
     async function addCoupon() {
         try {
-            const response = await sdk.forConsole.billing.getCoupon(coupon);
+            const response = await sdk.forConsole.billing.getCouponAccount(coupon);
             couponData = response;
             dispatch('validation', couponData);
             coupon = null;

src/lib/components/billing/discountsApplied.svelte

@@ -0,0 +1,47 @@
+<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
+    };
+    export let fixedCoupon = false;
+</script>
+
+{#if value > 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>
+                    {label}
+                </span>
+            </p>
+            {#if !fixedCoupon && label.toLowerCase() === 'credits'}
+                <button
+                    type="button"
+                    class="button is-text is-only-icon"
+                    style="--button-size:1.5rem;"
+                    aria-label="Close"
+                    title="Close"
+                    on:click={() =>
+                        (couponData = {
+                            code: null,
+                            status: null,
+                            credits: null
+                        })}>
+                    <span class="icon-x" aria-hidden="true" />
+                </button>
+            {/if}
+        </div>
+        {#if value >= 100}
+            <p class="inline-tag">Credits applied</p>
+        {:else}
+            <span class="u-color-text-success">-{formatCurrency(value)}</span>
+        {/if}
+    </span>
+{/if}