fix: some svelte check errors

src/lib/components/regionCard.svelte

@@ -4,7 +4,6 @@
     export let value: string | number | boolean;
     export let disabled = false;
     export let padding = 1;
-    export let icon: string = null;
     export let fullHeight = true;
     export let borderRadius: 'xsmall' | 'small' | 'medium' | 'large' = 'small';
 

src/lib/elements/table/body.svelte

@@ -11,6 +11,7 @@
 </div>
 {#if isCloud && limitReached && name}
     <tr class="table-row">
+        <!--svelte-ignore all-->
         <td class="table-col" colspan="100%">
             <span class="u-flex u-gap-24 u-main-center u-cross-center">
                 <span class="text">Upgrade your plan to add {name} to your organization</span>

src/lib/stores/billing.ts

@@ -1,7 +1,6 @@
 import type { Client } from '@appwrite.io/console';
 import type { Organization } from './organization';
 import type { PaymentMethod } from '@stripe/stripe-js';
-import type { P } from 'vitest/dist/types-fafda418';
 
 export type PaymentMethodData = {
     $id: string;
@@ -441,16 +440,15 @@ export const tierFree = {
     description: 'For personal, passion projects.'
 };
 
-export const tierStarter = {
-    price: 10,
-    name: 'Starter',
-    description: 'For small organizations that want flexibility.'
-};
-
 export const tierPro = {
-    price: 20,
+    price: 15,
     name: 'Pro',
-    description: 'For organizations that need the ability scale easily.'
+    description: 'For pro developers and production projects that need the ability to scale.'
+};
+export const tierScale = {
+    price: 685,
+    name: 'Scale',
+    description: 'For scaling teams that need dedicated support.'
 };
 
 export const apperanceLight = {

src/routes/console/createOrganizationCloud.svelte

@@ -30,12 +30,6 @@
                 $createOrganization.paymentMethodId
             );
 
-            //Add credit
-            if ($createOrganization?.promoCodes?.length) {
-                $createOrganization.promoCodes.forEach(async (code) => {
-                    await sdk.forConsole.billing.addCredit(org.$id, code);
-                });
-            }
             //Add budget
             if ($createOrganization?.billingBudget) {
                 await sdk.forConsole.billing.updateBudget(

src/routes/console/organization-[organization]/billing/+page.ts

@@ -2,12 +2,12 @@ import { Dependencies } from '$lib/constants';
 import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, parent, depends }) => {
+export const load: PageLoad = async ({ parent, depends }) => {
     await parent();
     depends(Dependencies.PAYMENT_METHODS);
 
     return {
-        // paymentMethods: await sdk.forConsole.billing.listPaymentMethods(params.organization)
+        paymentMethods: await sdk.forConsole.billing.listPaymentMethods()
         // budget: await sdk.forConsole.billing.(params.organization)
     };
 };

src/routes/console/organization-[organization]/billing/paymentModal.svelte

@@ -2,7 +2,7 @@
     // import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
     import { InputText, Button, FormList } from '$lib/elements/forms';
-    import { paymentMethods, publicKey } from './store';
+    import { paymentMethods } from './store';
     import {
         loadStripe,
         type Stripe,
@@ -15,7 +15,12 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { app } from '$lib/stores/app';
-    import { apperanceDark, apperanceLight } from '$lib/stores/billing';
+    import {
+        apperanceDark,
+        apperanceLight,
+        publicStripeKey,
+        type PaymentList
+    } from '$lib/stores/billing';
 
     export let show = false;
 
@@ -26,13 +31,24 @@
 
     let clientSecret: string;
     let paymentMethod: PaymentMethod;
+    let isStripeInitialized = false;
+    let methods: PaymentList;
 
     onMount(async () => {
-        stripe = await loadStripe(publicKey);
+        methods = await sdk.forConsole.billing.listPaymentMethods();
+        if (methods?.total) {
+            $organization.paymentMethodId = methods[0].id;
+        } else if (!isStripeInitialized) initialize();
+    });
+
+    async function initialize() {
+        stripe = await loadStripe(publicStripeKey);
+        isStripeInitialized = true;
+
         try {
             clientSecret = $paymentMethods?.paymentMethods[0]?.clientSecret;
             if (!clientSecret) {
-                paymentMethod = await sdk.forConsole.billing.createPaymentMethod($organization.$id);
+                paymentMethod = await sdk.forConsole.billing.createPaymentMethod();
             }
             const options = {
                 clientSecret: clientSecret ? clientSecret : paymentMethod.clientSecret,
@@ -45,7 +61,7 @@
         } catch (e) {
             error = e.message;
         }
-    });
+    }
 
     async function createForm() {
         const paymentElement = elements.create('payment');
@@ -61,16 +77,14 @@
                 },
                 redirect: 'if_required'
             });
-            paymentMethod = await sdk.forConsole.billing.createPaymentMethod($organization.$id);
+            paymentMethod = await sdk.forConsole.billing.createPaymentMethod();
             const { setupIntent } = await stripe.retrieveSetupIntent(paymentMethod.clientSecret);
             if (setupIntent && setupIntent.status === 'succeeded') {
                 await sdk.forConsole.billing.setOrganizationPaymentMethod(
                     $organization.$id,
-                    paymentMethod.$id,
-                    setupIntent.payment_method as string
+                    paymentMethod.$id
                 );
                 await invalidate(Dependencies.PAYMENT_METHODS);
-                show = false;
                 console.log('test');
                 // const paymentElement = elements.getElement('payment');
                 // paymentElement.destroy();
@@ -81,6 +95,10 @@
             // trackError(StripeError, Submit.ProjectCreate);
         }
     }
+
+    $: if ($organization.paymentMethodId === null && !isStripeInitialized) {
+        initialize();
+    }
 </script>
 
 <Modal {error} onSubmit={handleSubmit} size="big" bind:show>

src/routes/console/organization-[organization]/invoices/+page.svelte

@@ -3,7 +3,6 @@
     import {
         DropList,
         DropListItem,
-        DropListLink,
         EmptySearch,
         Heading,
         PaginationInline

src/routes/console/organization-[organization]/usage/[[period]]/+page.ts

@@ -1,68 +1,5 @@
 import { sdk } from '$lib/stores/sdk';
-import { Query } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
-import { error } from '@sveltejs/kit';
-
-const MOCKDATA = [
-    {
-        name: 'test',
-        projectUsage: [
-            {
-                name: 'Bandwidth',
-                icon: 'chart-bar',
-                unit: 'GB',
-                max: 16,
-                used: 8,
-                status: null
-            },
-            {
-                name: 'Storage',
-                icon: 'folder',
-                unit: 'GB',
-                max: 3.5,
-                used: 3.7,
-                status: 'error'
-            },
-            {
-                name: 'Compute',
-                icon: 'lightning-bolt',
-                unit: 'hrs',
-                max: 2,
-                used: 1.8,
-                status: 'warning'
-            }
-        ]
-    },
-    {
-        name: 'Lol',
-        projectUsage: [
-            {
-                name: 'Bandwidth',
-                icon: 'chart-bar',
-                unit: 'GB',
-                max: 16,
-                used: 8,
-                status: null
-            },
-            {
-                name: 'Storage',
-                icon: 'folder',
-                unit: 'GB',
-                max: 10.5,
-                used: 3.7,
-                status: null
-            },
-            {
-                name: 'Compute',
-                icon: 'lightning-bolt',
-                unit: 'hrs',
-                max: 2,
-                used: 1.5,
-                status: null
-            }
-        ]
-    }
-];
 
 export const load: PageLoad = async ({ params }) => {
     const usage = await sdk.forConsole.billing.listUsage(params.organization);

src/routes/console/project-[project]/settings/usage/[[period]]/+page.ts

@@ -1,20 +1,18 @@
-// import type { Models } from '@appwrite.io/console';
-// import { sdk } from '$lib/stores/sdk';
-// import type { PageLoad } from './$types';
-// import { error } from '@sveltejs/kit';
+import type { Models } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
 
-// export const load: PageLoad = async ({ params }) => {
-//     try {
-//         const response = await sdk.forProject.functions.getFunctionUsage(
-//             params.function,
-//             params.period ?? '30d'
-//         );
+export const load: PageLoad = async ({ params }) => {
+    try {
+        const response = await sdk.forProject.project.getUsage(params.period ?? '30d');
 
-//         return {
-//             count: response.executionsTotal as unknown as Models.Metric[],
-//             errors: response.buildsFailure as unknown as Models.Metric[]
-//         };
-//     } catch (e) {
-//         throw error(e.code, e.message);
-//     }
-// };
+        return {
+            response
+            // count: response.executionsTotal as unknown as Models.Metric[],
+            // errors: response.buildsFailure as unknown as Models.Metric[]
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};

src/routes/console/wizard/step1.svelte

@@ -3,7 +3,7 @@
     import { Pill } from '$lib/elements';
     import { InputText, FormList } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
-    import { tierFree, tierPro, tierStarter } from '$lib/stores/billing';
+    import { tierFree, tierPro, tierScale } from '$lib/stores/billing';
     import { organizationList } from '$lib/stores/organization';
     import { createOrganization } from './store';
 
@@ -63,21 +63,7 @@
                 </LabelCard>
             </li>
         {/if}
-        <li>
-            <LabelCard name="plan" bind:group={$createOrganization.billingPlan} value="tier-1">
-                <svelte:fragment slot="custom">
-                    <div class="u-flex u-flex-vertical u-gap-4 u-width-full-line">
-                        <h4 class="body-text-2 u-bold">
-                            {tierStarter.name} - ${tierStarter.price}/month per organization member
-                        </h4>
-                        <p class="u-color-text-gray u-small">
-                            {tierStarter.description}
-                        </p>
-                    </div>
-                    <Pill>14 DAY FREE TRIAL</Pill>
-                </svelte:fragment>
-            </LabelCard>
-        </li>
+
         <li>
             <LabelCard name="plan" bind:group={$createOrganization.billingPlan} value="tier-2">
                 <svelte:fragment slot="custom">
@@ -94,5 +80,20 @@
                 </svelte:fragment>
             </LabelCard>
         </li>
+        <li>
+            <LabelCard name="plan" bind:group={$createOrganization.billingPlan} value="tier-2">
+                <svelte:fragment slot="custom">
+                    <div class="u-flex u-flex-vertical u-gap-4 u-width-full-line">
+                        <h4 class="body-text-2 u-bold">
+                            {tierScale.name} - ${tierScale.price}/month + exta usage
+                        </h4>
+                        <p class="u-color-text-gray u-small">
+                            {tierScale.description}
+                        </p>
+                    </div>
+                    <Pill>14 DAY FREE TRIAL</Pill>
+                </svelte:fragment>
+            </LabelCard>
+        </li>
     </ul>
 </WizardStep>

src/routes/console/wizard/step2.svelte

@@ -1,18 +1,10 @@
 <script lang="ts">
-    import {
-        Button,
-        Form,
-        FormList,
-        InputNumber,
-        InputRadio,
-        InputText
-    } from '$lib/elements/forms';
+    import { FormList, InputNumber, InputRadio, InputText } from '$lib/elements/forms';
     import InputChoice from '$lib/elements/forms/inputChoice.svelte';
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { createOrganization } from './store';
-    import { Collapsible, CollapsibleItem } from '$lib/components';
     import UsageRates from './usageRates.svelte';
     import type { PaymentList } from '$lib/stores/billing';
     import { paymentMethods } from '../account/payments/store';
@@ -30,12 +22,10 @@
 
     let methods: PaymentList;
     let name: string;
-    let promo: string;
-    let redeemedCodes = [];
     let budgetEnabled = false;
     let showRates = false;
 
-    let error: string;
+    // let error: string;
     let elements: StripeElements;
     let stripe: Stripe;
     let clientSecret: string;
@@ -49,16 +39,6 @@
         } else if (!isStripeInitialized) initialize();
     });
 
-    async function removeCode() {
-        redeemedCodes = redeemedCodes.filter((code) => code !== promo);
-        promo = '';
-    }
-    async function redeem() {
-        redeemedCodes.push(promo);
-        redeemedCodes = redeemedCodes;
-        promo = '';
-    }
-
     async function initialize() {
         stripe = await loadStripe(publicStripeKey);
         isStripeInitialized = true;
@@ -95,7 +75,7 @@
                 },
                 redirect: 'if_required'
             });
-            paymentMethod = await sdk.forConsole.billing.createPaymentMethod($organization.$id);
+            paymentMethod = await sdk.forConsole.billing.createPaymentMethod();
             const { setupIntent } = await stripe.retrieveSetupIntent(paymentMethod.clientSecret);
             if (setupIntent && setupIntent.status === 'succeeded') {
                 await sdk.forConsole.billing.setOrganizationPaymentMethod(
@@ -165,51 +145,6 @@
             </div>
         </div>
 
-        <Collapsible>
-            <CollapsibleItem>
-                <svelte:fragment slot="title">Add credit</svelte:fragment>
-                <svelte:fragment slot="subtitle">(optional)</svelte:fragment>
-                <p class="text">
-                    Appwrite credit will automatically be applied to your next invoice.
-                </p>
-                <Form onSubmit={redeem}>
-                    <FormList>
-                        <InputText
-                            id="credit"
-                            label="Promo code"
-                            placeholder="APPWRITE123"
-                            bind:value={promo}>
-                            <Button secondary submit>Redeem</Button>
-                        </InputText>
-                    </FormList>
-                </Form>
-                {#if redeemedCodes?.length}
-                    <div class="u-flex u-margin-block-start-8">
-                        <div class="tags">
-                            <ul class="tags-list">
-                                {#each redeemedCodes as code}
-                                    <li class="tags-item">
-                                        <div class="input-tag">
-                                            <span class="tag-text">{code}</span>
-                                            <button
-                                                type="button"
-                                                class="input-tag-delete-button"
-                                                aria-label={`delete ${code} tag`}
-                                                on:click={() => removeCode(code)}>
-                                                <span class="icon-x" aria-hidden="true" />
-                                            </button>
-                                        </div>
-                                    </li>
-                                {/each}
-                            </ul>
-                        </div>
-                    </div>
-                {/if}
-            </CollapsibleItem>
-        </Collapsible>
-
-        <div class="u-sep-block-start" />
-
         <InputChoice
             type="switchbox"
             id="budget"

src/routes/console/wizard/step3.svelte

@@ -88,7 +88,7 @@
                                 <input
                                     type="checkbox"
                                     name="role"
-                                    id={collaborator.email}
+                                    id={`${collaborator.email}`}
                                     bind:checked={collaborator.role} />
                             </TableCell>
                             <TableCell>

src/routes/console/wizard/store.ts

@@ -14,7 +14,6 @@ export const createOrganization = writable<{
     paymentMethodId: string;
     billingBudget?: number;
     collaborators?: Collborator[];
-    promoCodes?: string[];
 }>({
     id: null,
     name: null,