feat: create org wizard, update pink, small fixes

package-lock.json

@@ -8,7 +8,7 @@
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
                 "@appwrite.io/console": "0.1.0",
-                "@appwrite.io/pink": "0.0.6-rc.11",
+                "@appwrite.io/pink": "0.0.6-rc.14",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.44.2",
                 "@sentry/tracing": "^7.44.2",
@@ -157,9 +157,9 @@
             }
         },
         "node_modules/@appwrite.io/pink": {
-            "version": "0.0.6-rc.11",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.11.tgz",
-            "integrity": "sha512-wHuWZM1SbBV7GQymBcBGDgtN5teu2OeMl9vB+IM6Ctg+Jkqjlc8QyO8Ef6Om8EFuSJCEzxCugMQPM0Ohtt/V2g==",
+            "version": "0.0.6-rc.14",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.14.tgz",
+            "integrity": "sha512-KSfuW/MIc9aXaSjHmOB0TSyd2G/nTX8Yj49LOqOw41v649tVNfPGutvI6eTULCKve24HTYSspnHLil5Eb4Kk2Q==",
             "dependencies": {
                 "@appwrite.io/pink-icons": "*",
                 "normalize.css": "^8.0.1",

package.json

@@ -20,7 +20,7 @@
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
         "@appwrite.io/console": "0.1.0",
-        "@appwrite.io/pink": "0.0.6-rc.11",
+        "@appwrite.io/pink": "0.0.6-rc.14",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",
         "@sentry/tracing": "^7.44.2",

src/routes/console/account/organizations/+page.svelte

@@ -28,7 +28,7 @@
     function isCloudOrg(
         data: Partial<Models.TeamList<Models.Preferences>> | Organization
     ): data is Organization {
-        return isCloud ? true : false;
+        return isCloud && 'billingPlan' in data ? true : false;
     }
 
     let addOrganization = false;

src/routes/console/createOrganizationCloud.svelte

@@ -43,9 +43,9 @@
                 $createOrganization.collaborators.forEach(async (collaborator) => {
                     await sdk.forConsole.teams.createMembership(
                         org.$id,
-                        [collaborator.role],
+                        ['collaborator'],
                         `${$page.url.origin}/console/organization-${org.$id}`,
-                        collaborator.email
+                        collaborator
                     );
                 });
             }

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { Box, CardGrid, Heading } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDate } from '$lib/helpers/date';

src/routes/console/wizard/step2.svelte

@@ -7,7 +7,6 @@
     import { createOrganization } from './store';
     import UsageRates from './usageRates.svelte';
     import type { PaymentList, PaymentMethodData } from '$lib/sdk/billing';
-    import { paymentMethods } from '../account/payments/store';
     import { loadStripe, type Stripe, type StripeElements } from '@stripe/stripe-js';
     import { organization } from '$lib/stores/organization';
     import { invalidate } from '$app/navigation';
@@ -30,9 +29,14 @@
 
     onMount(async () => {
         methods = await sdk.forConsole.billing.listPaymentMethods();
+        console.log(methods);
         if (methods?.total) {
-            $createOrganization.paymentMethodId = methods[0].id;
-        } else if (!isStripeInitialized) initialize();
+            clientSecret = methods.paymentMethods[0]?.clientSecret;
+
+            $createOrganization.paymentMethodId = methods.paymentMethods[0].$id;
+        } else if (!isStripeInitialized) {
+            initialize();
+        }
     });
 
     async function initialize() {
@@ -41,7 +45,7 @@
         isStripeInitialized = true;
 
         try {
-            clientSecret = $paymentMethods?.paymentMethods[0]?.clientSecret;
+            clientSecret = methods.paymentMethods[0]?.clientSecret;
             if (!clientSecret) {
                 paymentMethod = await sdk.forConsole.billing.createPaymentMethod();
             }
@@ -73,7 +77,9 @@
                 },
                 redirect: 'if_required'
             });
+            console.log(clientSecret);
             if (!clientSecret) {
+                console.log('test2');
                 paymentMethod = await sdk.forConsole.billing.createPaymentMethod();
             }
             const { setupIntent } = await stripe.retrieveSetupIntent(paymentMethod.clientSecret);
@@ -96,6 +102,12 @@
     $: if ($createOrganization.paymentMethodId === null && !isStripeInitialized) {
         initialize();
     }
+
+    $: if ($createOrganization.paymentMethodId) {
+        isStripeInitialized = false;
+    }
+
+    $: console.log($createOrganization.paymentMethodId);
 </script>
 
 <WizardStep beforeSubmit={handleSubmit}>
@@ -112,7 +124,7 @@
                             label={`${method.brand} ending in ${method.last4}`}
                             value={method.$id}
                             name="payment"
-                            group={$createOrganization.paymentMethodId} />
+                            bind:group={$createOrganization.paymentMethodId} />
                     </div>
                 {/each}
             {/if}
@@ -124,7 +136,7 @@
                         label="Add new payment method"
                         value={null}
                         name="payment"
-                        group={$createOrganization.paymentMethodId} />
+                        bind:group={$createOrganization.paymentMethodId} />
                 {/if}
                 {#if $createOrganization.paymentMethodId === null}
                     <FormList>

src/routes/console/wizard/step4.svelte

@@ -14,10 +14,14 @@
     const billingPayDate = new Date(today.getTime() + 44 * 24 * 60 * 60 * 1000);
 
     async function fetchCard() {
-        const card = await sdk.forConsole.billing.getPaymentMethod(
-            $createOrganization.paymentMethodId
-        );
-        return card ? card : null;
+        try {
+            const card = await sdk.forConsole.billing.getPaymentMethod(
+                $createOrganization.paymentMethodId
+            );
+            return card;
+        } catch (error) {
+            console.log(error);
+        }
     }
 </script>
 
@@ -42,7 +46,9 @@
     <div class="u-margin-block-start-32">
         <p class="body-text-1 u-bold">Payment</p>
         {#await fetchCard()}
-            <div class="loader is-small" />
+            <div class="u-flex u-margin-block-start-4">
+                <div class="loader is-small" />
+            </div>
         {:then card}
             <p class="text">Card ending in {card.last4} {card.brand}</p>
         {/await}