From c19919ab19d70688477c8aec9131b1a048b0e6db Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 12 Dec 2023 22:27:26 +0100
Subject: [PATCH] feat: open modal on search param set

---
 .../(billing-modal)/preReleaseModal.svelte    | 91 -------------------
 src/routes/console/+page.ts                   |  7 +-
 src/routes/console/onboarding/+page.svelte    | 15 +++
 .../organization-[organization]/+page.svelte  | 11 ++-
 4 files changed, 29 insertions(+), 95 deletions(-)
 delete mode 100644 src/routes/console/(billing-modal)/preReleaseModal.svelte

diff --git a/src/routes/console/(billing-modal)/preReleaseModal.svelte b/src/routes/console/(billing-modal)/preReleaseModal.svelte
deleted file mode 100644
index 2551228ec..000000000
--- a/src/routes/console/(billing-modal)/preReleaseModal.svelte
+++ /dev/null
@@ -1,91 +0,0 @@
-<script lang="ts">
-    import { Box, ModalSideCol } from '$lib/components';
-    import SideLight from './side-light.png';
-    import SideDark from './side-dark.png';
-    import { app } from '$lib/stores/app';
-    import { Button } from '$lib/elements/forms';
-    import { trackEvent } from '$lib/actions/analytics';
-
-    export let show = false;
-</script>
-
-<ModalSideCol bind:show title="Get ready for Appwrite Pro" style="max-width: min(53rem,95%)">
-    <svelte:fragment slot="side">
-        {#if $app.themeInUse === 'dark'}
-            <img
-                src={SideDark}
-                style="object-fit: cover;   object-position: 30% 100%; height: 100%; width: 100%; aspect-ratio: 1 / 1;"
-                alt="appwrite pro"
-                aria-hidden="true"
-                width="376" />
-        {:else}
-            <img
-                src={SideLight}
-                style="object-fit: cover;   object-position: 30% 100%; height: 100%; width: 100%; aspect-ratio: 1 / 1;"
-                alt="appwrite pro"
-                aria-hidden="true"
-                width="376" />
-        {/if}
-    </svelte:fragment>
-
-    <div class="u-flex u-flex-vertical u-gap-16">
-        <p class="text">
-            Appwrite will enable billing before the end of the year, which means access to our long
-            awaited Pro plan. It also means you will be limited to <b
-                >one free organization per account</b
-            >.
-        </p>
-        <p class="text">
-            Consider upgrading and take advantage of the extra resources that come with the Pro
-            plan. You can also use Migrations to self-host some of your projects instead. Learn more
-            in our <a
-                class="link"
-                href="https://appwrite.io/docs/advanced/migrations"
-                target="_blank"
-                rel="noopener noreferrer"
-                on:click={() =>
-                    trackEvent('click_open_website', {
-                        source: 'pre_billing_release_modal',
-                        destination: 'docs_migration'
-                    })}>documentation</a
-            >.
-        </p>
-    </div>
-    <Box>
-        <b class="body-text-1">Pro - $15 per member per billing period</b>
-
-        <ul class="list u-flex-vertical u-gap-8 u-margin-block-start-24">
-            <li class="u-flex u-gap-8 u-cross-center">
-                <span class="icon-check-circle" aria-hidden="true" />
-                <span class="text">Unlimited org. members</span>
-            </li>
-            <li class="u-flex u-gap-8 u-cross-center">
-                <span class="icon-check-circle" aria-hidden="true" />
-                <span class="text">300GB bandwidth</span>
-            </li>
-            <li class="u-flex u-gap-8 u-cross-center">
-                <span class="icon-check-circle" aria-hidden="true" />
-                <span class="text">200,000 monthly active users</span>
-            </li>
-            <li class="u-flex u-gap-8 u-cross-center">
-                <span class="icon-check-circle" aria-hidden="true" />
-                <span class="text">Email support</span>
-            </li>
-            <li class="u-flex u-gap-8 u-cross-center">
-                <span class="icon-check-circle" aria-hidden="true" />
-                <span class="text">And more</span>
-            </li>
-        </ul>
-        <Button
-            fullWidth
-            class="u-margin-block-start-24"
-            href="https://appwrite.io/pricing"
-            on:click={() =>
-                trackEvent('click_open_website', {
-                    source: 'pre_billing_release_modal',
-                    destination: 'pricing'
-                })}>
-            Learn more about Pro
-        </Button>
-    </Box>
-</ModalSideCol>
diff --git a/src/routes/console/+page.ts b/src/routes/console/+page.ts
index 14e5b45e9..94665aae5 100644
--- a/src/routes/console/+page.ts
+++ b/src/routes/console/+page.ts
@@ -2,12 +2,13 @@ import { base } from '$app/paths';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ parent }) => {
+export const load: PageLoad = async ({ parent, url }) => {
     const { organizations, account } = await parent();
+
     if (organizations.total) {
         const teamId = account.prefs.organization ?? organizations.teams[0].$id;
-        throw redirect(303, `${base}/console/organization-${teamId}`);
+        throw redirect(303, `${base}/console/organization-${teamId}${url.search ?? ''}`);
     } else {
-        throw redirect(303, `${base}/console/onboarding`);
+        throw redirect(303, `${base}/console/onboarding${url.search ?? ''}`);
     }
 };
diff --git a/src/routes/console/onboarding/+page.svelte b/src/routes/console/onboarding/+page.svelte
index 324474e39..244d86136 100644
--- a/src/routes/console/onboarding/+page.svelte
+++ b/src/routes/console/onboarding/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Card } from '$lib/components';
     import CustomId from '$lib/components/customId.svelte';
@@ -10,13 +11,27 @@
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { wizard } from '$lib/stores/wizard';
     import { isCloud } from '$lib/system';
     import { ID } from '@appwrite.io/console';
+    import { onMount } from 'svelte';
+    import CreateOrganizationCloud from '../createOrganizationCloud.svelte';
 
     let name: string;
     let id: string;
     let showCustomId = false;
 
+    onMount(() => {
+        if (isCloud) {
+            if ($page.url.searchParams.has('type')) {
+                const paramType = $page.url.searchParams.get('type');
+                if (paramType === 'createPro') {
+                    wizard.start(CreateOrganizationCloud);
+                }
+            }
+        }
+    });
+
     async function createProject() {
         try {
             const org = await createOrganization();
diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte
index 6d99fe57f..20674bb50 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/+page.svelte
@@ -30,6 +30,7 @@
     import { readOnly } from '$lib/stores/billing';
     import type { RegionList } from '$lib/sdk/billing';
     import { onMount } from 'svelte';
+    import CreateOrganizationCloud from '../createOrganizationCloud.svelte';
 
     export let data;
 
@@ -118,7 +119,15 @@
 
     let regions: RegionList;
     onMount(async () => {
-        if (isCloud) regions = await sdk.forConsole.billing.listRegions();
+        if (isCloud) {
+            regions = await sdk.forConsole.billing.listRegions();
+            if ($page.url.searchParams.has('type')) {
+                const paramType = $page.url.searchParams.get('type');
+                if (paramType === 'createPro') {
+                    wizard.start(CreateOrganizationCloud);
+                }
+            }
+        }
     });
 </script>