update project plan

src/lib/stores/billing.ts

@@ -1,4 +1,4 @@
-import type { Client } from '@aw-labs/appwrite-console';
+import type { Client, Payload } from '@aw-labs/appwrite-console';
 
 export class Billing {
     client: Client;
@@ -15,7 +15,23 @@ export class Billing {
             'POST',
             uri,
             {
-                'Content-Type': 'application/json'
+                'content-type': 'application/json'
+            },
+            params
+        );
+    }
+
+    async updateProjectPlan(projectId: string, billingPlan: string) {
+        const path = `/project/${projectId}/plan`;
+        const params: Payload = {
+            billingPlan
+        };
+        const uri = new URL(this.client.config.endpoint + path);
+        return await this.client.call(
+            'patch',
+            uri,
+            {
+                'content-type': 'application/json'
             },
             params
         );

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

@@ -118,7 +118,7 @@
             </CardGrid>
         </Form>
 
-        <form id="payment-form" on:submit={savePaymentDetails}>
+        <Form on:submit={savePaymentDetails}>
             <CardGrid>
                 <Heading tag="h6" size="7">Create Payment Method</Heading>
                 <div id="payment-element">
@@ -130,7 +130,7 @@
                     <Button on:click={createPaymentMethod}>Create Payment Method</Button>
                 </svelte:fragment>
             </CardGrid>
-        </form>
+        </Form>
 
         <CardGrid danger>
             <div>

src/routes/console/project-[project]/settings/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { cloudSdk, sdkForConsole } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
@@ -16,6 +16,7 @@
     import { trackEvent } from '$lib/actions/analytics';
 
     let name: string = null;
+    let plan: string = null;
     let showDelete = false;
     let updating = false;
     const endpoint = sdkForConsole.client.config.endpoint;
@@ -23,6 +24,7 @@
 
     onMount(async () => {
         name ??= $project.name;
+        plan ??= $project.billingPlan;
     });
 
     async function updateName() {
@@ -43,9 +45,28 @@
         }
     }
 
+    async function updatePlan() {
+        updating = true;
+        try {
+            await cloudSdk.billing.updateProjectPlan($project.$id, plan);
+            invalidate(Dependencies.PROJECT);
+            addNotification({
+                type: 'success',
+                message: 'Project plan has been updated'
+            });
+            trackEvent('submit_project_update_plan');
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
     $: {
         // When project name is updated, finalize the updating flow
         $project.name;
+        $project.billingPlan;
         updating = false;
     }
 
@@ -118,6 +139,28 @@
             </CardGrid>
         </Form>
 
+        <Form on:submit={updatePlan}>
+            <CardGrid>
+                <Heading tag="h6" size="7">Update Plan</Heading>
+
+                <svelte:fragment slot="aside">
+                    <FormList>
+                        <InputText
+                            id="plan"
+                            label="plan"
+                            bind:value={plan}
+                            required
+                            placeholder="Select plan" />
+                    </FormList>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled={plan === $project.billingPlan || updating} submit
+                        >Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+
         <CardGrid>
             <Heading tag="h6" size="7">Services</Heading>
             <p class="text">Choose services you wish to enable or disable.</p>