From 46c263cac57dd1e370a0f10a20dfba61981bb8e2 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 12 Feb 2025 15:25:22 +0100
Subject: [PATCH] Continue wizard if platform is already added

---
 src/lib/components/navbar.svelte              |  2 +-
 src/lib/helpers/platform.ts                   | 27 ++++++++++
 src/lib/stores/wizard.ts                      |  8 ++-
 src/routes/(console)/+layout.svelte           |  2 +-
 .../organization-[organization]/+page.svelte  | 25 +--------
 .../get-started/+page.svelte                  |  5 +-
 .../project-[project]/overview/onboard.svelte | 53 +++++++++++++++----
 .../overview/platforms/+page.svelte           | 18 ++++++-
 .../overview/platforms/createFlutter.svelte   |  2 +-
 9 files changed, 102 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 393218919..a21c048e7 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -108,7 +108,7 @@
             <img src={logo.src} alt={logo.alt} />
         </a>
         <Breadcrumbs {organizations} />
-        {#if selectedProject.pingCount === 0}
+        {#if selectedProject && selectedProject.pingCount === 0}
             <div class="only-desktop">
                 <Button.Anchor
                     href={`${base}/project-${selectedProject.$id}/get-started`}
diff --git a/src/lib/helpers/platform.ts b/src/lib/helpers/platform.ts
index 98920c7c6..33662adb7 100644
--- a/src/lib/helpers/platform.ts
+++ b/src/lib/helpers/platform.ts
@@ -1,3 +1,30 @@
 export function isMac(): boolean {
     return window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 }
+
+export const getPlatformInfo = (platform: string) => {
+    let name: string, icon: string;
+    if (platform.includes('flutter')) {
+        name = 'Flutter';
+        icon = 'flutter';
+    } else if (platform.includes('react-native')) {
+        name = 'React Native';
+        icon = 'react-native';
+    } else if (platform.includes('apple')) {
+        name = 'Apple';
+        icon = 'apple';
+    } else if (platform.includes('android')) {
+        name = 'Android';
+        icon = 'android';
+    } else if (platform.includes('unity')) {
+        name = 'Unity';
+        icon = 'unity';
+    } else if (platform.includes('web')) {
+        name = 'Web';
+        icon = 'code';
+    } else {
+        name = 'Unknown';
+        icon = 'unknown';
+    }
+    return { name, icon };
+};
diff --git a/src/lib/stores/wizard.ts b/src/lib/stores/wizard.ts
index 9a565b011..76e509bf9 100644
--- a/src/lib/stores/wizard.ts
+++ b/src/lib/stores/wizard.ts
@@ -13,6 +13,7 @@ export type WizardStore = {
     nextDisabled: boolean;
     step: number;
     interceptorNotificationEnabled: boolean;
+    props: Record<string, unknown>;
 };
 
 function createWizardStore() {
@@ -25,7 +26,8 @@ function createWizardStore() {
         media: null,
         nextDisabled: false,
         step: 1,
-        finalAction: null
+        finalAction: null,
+        props: {}
     });
 
     return {
@@ -34,7 +36,8 @@ function createWizardStore() {
         start: (
             component: typeof SvelteComponent<unknown>,
             media: string = null,
-            step: number = 1
+            step: number = 1,
+            props: Record<string, unknown> = {}
         ) =>
             update((n) => {
                 n.show = true;
@@ -46,6 +49,7 @@ function createWizardStore() {
                 n.cover = null;
                 n.nextDisabled = false;
                 n.finalAction = null;
+                n.props = props;
                 trackEvent('wizard_start');
                 return n;
             }),
diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index e5969da70..8907538d8 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -352,7 +352,7 @@
 </Shell>
 
 {#if $wizard.show && $wizard.component}
-    <svelte:component this={$wizard.component} />
+    <svelte:component this={$wizard.component} {...$wizard.props} />
 {:else if $wizard.cover}
     <svelte:component this={$wizard.cover} />
 {/if}
diff --git a/src/routes/(console)/organization-[organization]/+page.svelte b/src/routes/(console)/organization-[organization]/+page.svelte
index 9c332022e..6647afd93 100644
--- a/src/routes/(console)/organization-[organization]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/+page.svelte
@@ -35,36 +35,13 @@
     import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
     import { Icon } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { getPlatformInfo } from '$lib/helpers/platform';
 
     export let data;
 
     let addOrganization = false;
     let showCreate = false;
 
-    const getPlatformInfo = (platform: string) => {
-        let name: string, icon: string;
-        if (platform.includes('flutter')) {
-            name = 'Flutter';
-            icon = 'flutter';
-        } else if (platform.includes('apple')) {
-            name = 'Apple';
-            icon = 'apple';
-        } else if (platform.includes('android')) {
-            name = 'Android';
-            icon = 'android';
-        } else if (platform.includes('unity')) {
-            name = 'Unity';
-            icon = 'unity';
-        } else if (platform.includes('web')) {
-            name = 'Web';
-            icon = 'code';
-        } else {
-            name = 'Unknown';
-            icon = 'unknown';
-        }
-        return { name, icon };
-    };
-
     function allServiceDisabled(project: Models.Project): boolean {
         let disabled = true;
         services.load(project);
diff --git a/src/routes/(console)/project-[project]/get-started/+page.svelte b/src/routes/(console)/project-[project]/get-started/+page.svelte
index 7642ec0fa..23575fdbe 100644
--- a/src/routes/(console)/project-[project]/get-started/+page.svelte
+++ b/src/routes/(console)/project-[project]/get-started/+page.svelte
@@ -9,4 +9,7 @@
     <title>Console - Appwrite</title>
 </svelte:head>
 
-<Onboard {projectId} hasPlatforms={$page.data.project.platforms.length > 0} />
+<Onboard
+    {projectId}
+    platforms={$page.data.project.platforms}
+    pingCount={$page.data.project.pingCount} />
diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte
index c1236379b..093266172 100644
--- a/src/routes/(console)/project-[project]/overview/onboard.svelte
+++ b/src/routes/(console)/project-[project]/overview/onboard.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
     import { Step, Link, Icon, Layout, Card, Typography } from '@appwrite.io/pink-svelte';
-    import { addPlatform } from './platforms/+page.svelte';
+    import { addPlatform, continuePlatform } from './platforms/+page.svelte';
     import { app } from '$lib/stores/app';
     import {
         IconArrowRight,
-        IconDeno,
         IconNodeJs,
         IconPhp,
         IconPython
@@ -26,19 +25,39 @@
     import { wizard } from '$lib/stores/wizard';
     import { isSmallViewport } from '$lib/stores/viewport';
     import { AvatarGroup } from '$lib/components';
+    import type { Models } from '@appwrite.io/console';
+    import { onMount } from 'svelte';
+    import { getPlatformInfo } from '$lib/helpers/platform';
 
     function createKey() {
         wizard.start(Wizard);
     }
 
     export let projectId: string;
-    export let hasPlatforms: boolean;
+    export let platforms: Models.Platform[] = [];
+    export let pingCount = 0;
+
+    function openPlatformWizard(type: number, platform?: Models.Platform) {
+        console.log('type', type);
+        console.log('platform', platform);
+        if (platform) {
+            continuePlatform(type, platform.name, platform.key, platform.type);
+        } else {
+            addPlatform(type);
+        }
+    }
+
+    let platformMap = new Map();
+    platforms.forEach((platform) => {
+        const platformInfo = getPlatformInfo(platform.type);
+        platformMap.set(platformInfo.name, platform);
+    });
 </script>
 
 <div style:container-type="inline-size">
     <div class="console-container">
         <div class="dashboard-content">
-            {#if !hasPlatforms}
+            {#if platforms.length === 0 || pingCount === 0}
                 <Step.List>
                     <Step.Item state="previous"
                         ><div>
@@ -66,7 +85,11 @@
                                 <Layout.Stack
                                     gap="l"
                                     direction={$isSmallViewport ? 'column' : 'row'}>
-                                    <Card.Button on:click={() => addPlatform(0)} padding="s"
+                                    <Card.Button
+                                        on:click={() => {
+                                            openPlatformWizard(0, platformMap.get('Web'));
+                                        }}
+                                        padding="s"
                                         ><Layout.Stack gap="xl"
                                             ><div class="card-top-image web-image-light"></div>
                                             <div class="card-top-image web-image-dark"></div>
@@ -82,7 +105,7 @@
                                         </Layout.Stack></Card.Button>
                                     <Card.Button
                                         on:click={() => {
-                                            addPlatform(1);
+                                            openPlatformWizard(4, platformMap.get('React Native'));
                                         }}
                                         padding="s"
                                         ><Layout.Stack gap="xl"
@@ -105,7 +128,11 @@
                                 <Layout.Stack
                                     gap="l"
                                     direction={$isSmallViewport ? 'column' : 'row'}>
-                                    <Card.Button on:click={() => addPlatform(3)} padding="s">
+                                    <Card.Button
+                                        on:click={() => {
+                                            openPlatformWizard(3, platformMap.get('Apple'));
+                                        }}
+                                        padding="s">
                                         <Layout.Stack gap="xxl">
                                             <img
                                                 class="platform-image"
@@ -123,7 +150,11 @@
                                                 </div></Layout.Stack>
                                         </Layout.Stack>
                                     </Card.Button>
-                                    <Card.Button on:click={() => addPlatform(2)} padding="s">
+                                    <Card.Button
+                                        on:click={() => {
+                                            openPlatformWizard(2, platformMap.get('Android'));
+                                        }}
+                                        padding="s">
                                         <Layout.Stack gap="xxl">
                                             <img
                                                 class="platform-image"
@@ -142,7 +173,11 @@
                                                 </div></Layout.Stack>
                                         </Layout.Stack>
                                     </Card.Button>
-                                    <Card.Button on:click={() => addPlatform(1)} padding="s">
+                                    <Card.Button
+                                        on:click={() => {
+                                            openPlatformWizard(1, platformMap.get('Flutter'));
+                                        }}
+                                        padding="s">
                                         <Layout.Stack gap="xxl">
                                             <img
                                                 class="platform-image"
diff --git a/src/routes/(console)/project-[project]/overview/platforms/+page.svelte b/src/routes/(console)/project-[project]/overview/platforms/+page.svelte
index 954c6a57c..781b62ff3 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/+page.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/+page.svelte
@@ -6,7 +6,7 @@
     import CreateApple from './createApple.svelte';
     import CreateFlutter from './createFlutter.svelte';
     import CreateReactNative from './createReactNative.svelte';
-    import { versions } from './wizard/store';
+    import { createPlatform, versions } from './wizard/store';
 
     export enum Platform {
         Web,
@@ -18,9 +18,25 @@
 
     export async function addPlatform(type: Platform) {
         await versions.load();
+        createPlatform.reset();
         wizard.start(platforms[type]);
     }
 
+    export async function continuePlatform(
+        platform: Platform,
+        name: string,
+        key: string,
+        type: string
+    ) {
+        await versions.load();
+        createPlatform.set({
+            name: name,
+            key: key,
+            type: type
+        });
+        wizard.start(platforms[platform], null, 1, { isPlatformCreated: true });
+    }
+
     const platforms = {
         [Platform.Flutter]: CreateFlutter,
         [Platform.Android]: CreateAndroid,
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
index adbd189a9..bd33a0a84 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
@@ -29,7 +29,7 @@
     import { LabelCard } from '$lib/components';
 
     let showExitModal = false;
-    let isPlatformCreated = false;
+    export let isPlatformCreated = false;
     let isCreatingPlatform = false;
     let connectionSuccessful = false;
     const projectId = $page.params.project;