From b0bb470162089bf1d964a03de0d0b059cc8f3aec Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 11 Nov 2024 15:26:24 +0100
Subject: [PATCH] feat: show on mobile modal

---
 src/lib/components/card.svelte                |  8 +-
 src/lib/elements/forms/inputText.svelte       |  1 +
 .../(components)/addCollaboratorModal.svelte  | 82 +++++++++++++++++++
 .../(components)/connectRepoModal.svelte      | 11 +--
 .../(components)/openOnMobileModal.svelte     | 38 +++++++++
 .../sites/create-site/finish/+page.svelte     | 46 +++++++----
 6 files changed, 160 insertions(+), 26 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte
 create mode 100644 src/routes/(console)/project-[project]/sites/create-site/finish/(components)/openOnMobileModal.svelte

diff --git a/src/lib/components/card.svelte b/src/lib/components/card.svelte
index c0d29e304..dbbc17085 100644
--- a/src/lib/components/card.svelte
+++ b/src/lib/components/card.svelte
@@ -33,18 +33,19 @@
     export let style = '';
     export let padding: $$Props['padding'] = 'm';
     export let radius: $$Props['radius'] = 'm';
+    export let variant: $$Props['variant'] = 'primary';
 
     $: resolvedClasses = [!isTile && 'common-section', classes].filter(Boolean).join(' ');
 </script>
 
 {#if href}
-    <Card.Link class={resolvedClasses} on:click {href} {style} {padding} {radius}>
+    <Card.Link class={resolvedClasses} {href} {style} {padding} {radius} {variant} on:click>
         <Layout.Stack gap="xl">
             <slot />
         </Layout.Stack>
     </Card.Link>
 {:else if isButton}
-    <Card.Button class={resolvedClasses} {style} {padding} {radius} on:click>
+    <Card.Button class={resolvedClasses} {style} {padding} {radius} {variant} on:click>
         <Layout.Stack gap="xl">
             <slot />
         </Layout.Stack>
@@ -55,7 +56,8 @@
         {style}
         border={isDashed ? 'dashed' : 'solid'}
         {padding}
-        {radius}>
+        {radius}
+        {variant}>
         <Layout.Stack gap="xl">
             <slot />
         </Layout.Stack>
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index dba221fa7..4bacd646c 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -50,6 +50,7 @@
     {maxlength}
     {label}
     {nullable}
+    {readonly}
     autofocus={autofocus || undefined}
     autocomplete={autocomplete ? 'on' : 'off'}
     helper={error}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte
new file mode 100644
index 000000000..7639cc1a5
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Alert, Modal } from '$lib/components';
+    import { InputText, InputEmail, Button, FormList } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+    import { organization } from '$lib/stores/organization';
+    import { invalidate } from '$app/navigation';
+    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { isCloud } from '$lib/system';
+    import { roles } from '$lib/stores/billing';
+    import InputSelect from '$lib/elements/forms/inputSelect.svelte';
+    import Roles from '$lib/components/roles/roles.svelte';
+
+    export let showCreate = false;
+
+    const dispatch = createEventDispatcher();
+
+    const url = `${$page.url.origin}${base}/invite`;
+
+    let email: string,
+        name: string,
+        error: string,
+        role: string = 'developer';
+
+    async function create() {
+        try {
+            const team = await sdk.forConsole.teams.createMembership(
+                $organization.$id,
+                [role],
+                email,
+                undefined,
+                undefined,
+                url,
+                name || undefined
+            );
+            await invalidate(Dependencies.ACCOUNT);
+            await invalidate(Dependencies.ORGANIZATION);
+            await invalidate(Dependencies.MEMBERS);
+
+            showCreate = false;
+            addNotification({
+                type: 'success',
+                message: `Invite has been sent to ${email}`
+            });
+            trackEvent(Submit.MemberCreate);
+            dispatch('created', team);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.MemberCreate);
+        }
+    }
+
+    $: if (!showCreate) {
+        error = null;
+        email = null;
+        name = null;
+    }
+</script>
+
+<Modal
+    title="Add collaborators"
+    description="Share your progress and start collaborating by adding members to your organization."
+    {error}
+    bind:show={showCreate}
+    onSubmit={create}>
+    <InputEmail
+        required
+        id="email"
+        label="Email"
+        placeholder="Enter email"
+        autofocus={true}
+        bind:value={email} />
+    <InputSelect popover={Roles} id="role" label="Role" options={roles} bind:value={role} />
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit submissionLoader>Send invite</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/connectRepoModal.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/connectRepoModal.svelte
index 7a5b191ae..be20b2484 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/connectRepoModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/connectRepoModal.svelte
@@ -74,7 +74,11 @@
     });
 </script>
 
-<Modal title="Create site" description="Connect to a new repository or an existing one." bind:show>
+<Modal
+    title="Create site"
+    description="Connect to a new repository or an existing one."
+    bind:show
+    onSubmit={connectRepo}>
     <Layout.Stack gap="xl">
         <Layout.Stack direction="row" gap="xl">
             <InputRadio
@@ -149,10 +153,7 @@
             </Layout.Stack>
         {:else if repositoryBehaviour === 'new'}
             <Button text size="s" on:click={() => (show = false)}>Cancel</Button>
-            <Button
-                size="s"
-                on:click={connectRepo}
-                disabled={!repositoryName || !$installation?.$id}>
+            <Button size="s" submit disabled={!repositoryName || !$installation?.$id}>
                 Create
             </Button>
         {/if}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/openOnMobileModal.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/openOnMobileModal.svelte
new file mode 100644
index 000000000..90d67c59a
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/openOnMobileModal.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import Card from '$lib/components/card.svelte';
+    import { Button, InputText } from '$lib/elements/forms';
+    import { copy } from '$lib/helpers/copy';
+    import { sdk } from '$lib/stores/sdk';
+    import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
+    import { Image, Input, Layout } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
+    export let show = false;
+    export let siteURL: string;
+
+    let image = '';
+    onMount(() => {
+        image = sdk.forProject.avatars.getQR(siteURL, 352);
+    });
+</script>
+
+<Modal
+    title="Open on mobile"
+    description="Open the preview of your site on any mobile or tablet device"
+    bind:show>
+    <Layout.Stack gap="l">
+        <Card>
+            <Layout.Stack justifyContent="center" alignItems="center">
+                <Image src={image} height={176} width={176} alt="QR code" />
+            </Layout.Stack>
+        </Card>
+        <InputText id="copy" value={siteURL} readonly>
+            <svelte:fragment slot="end">
+                <Input.Action icon={IconDuplicate} on:click={() => copy(siteURL)} />
+            </svelte:fragment>
+        </InputText>
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
index f6fad3986..7a71b365e 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
@@ -13,10 +13,14 @@
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { calculateTime } from '$lib/helpers/timeConversion';
     import ConnectRepoModal from './(components)/connectRepoModal.svelte';
+    import OpenOnMobileModal from './(components)/openOnMobileModal.svelte';
 
     export let data: PageData;
 
     let showConnectRepositry = false;
+    let showOpenOnMobile = false;
+    let showInviteCollaborator = false;
+    let showAddDomain = false;
 
     $: size = humanFileSize(data.deployment.buildSize);
 </script>
@@ -103,21 +107,23 @@
 
         {#if !data.deployment.providerCommitHash}
             <Layout.Stack direction="row">
-                <Card isTile radius="s" isButton on:click={() => (showConnectRepositry = true)}>
-                    <Layout.Stack gap="s">
-                        <Layout.Stack
-                            direction="row"
-                            justifyContent="space-between"
-                            alignItems="center">
-                            <Typography.Title size="s">Connect to repository</Typography.Title>
-                            <Icon icon={IconArrowSmRight} />
+                {#if !data.site.installationId}
+                    <Card isTile radius="s" isButton on:click={() => (showConnectRepositry = true)}>
+                        <Layout.Stack gap="s">
+                            <Layout.Stack
+                                direction="row"
+                                justifyContent="space-between"
+                                alignItems="center">
+                                <Typography.Title size="s">Connect to repository</Typography.Title>
+                                <Icon icon={IconArrowSmRight} />
+                            </Layout.Stack>
+                            <Typography.Text variant="m-400">
+                                Connect to a new repository or an existing one.
+                            </Typography.Text>
                         </Layout.Stack>
-                        <Typography.Text variant="m-400">
-                            Connect to a new repository or an existing one.
-                        </Typography.Text>
-                    </Layout.Stack>
-                </Card>
-                <Card isTile radius="s" isButton>
+                    </Card>
+                {/if}
+                <Card isTile radius="s" isButton on:click={() => (showAddDomain = true)}>
                     <Layout.Stack gap="s">
                         <Layout.Stack
                             direction="row"
@@ -131,7 +137,7 @@
                         </Typography.Text>
                     </Layout.Stack>
                 </Card>
-                <Card isTile radius="s" isButton>
+                <Card isTile radius="s" isButton on:click={() => (showInviteCollaborator = true)}>
                     <Layout.Stack gap="s">
                         <Layout.Stack
                             direction="row"
@@ -145,7 +151,7 @@
                         </Typography.Text>
                     </Layout.Stack>
                 </Card>
-                <Card isTile radius="s" isButton>
+                <Card isTile radius="s" isButton on:click={() => (showOpenOnMobile = true)}>
                     <Layout.Stack gap="s">
                         <Layout.Stack
                             direction="row"
@@ -166,11 +172,15 @@
         <Button
             size="s"
             fullWidthMobile
-            href="{`${base}/project-${$page.params.project}/sites/site-${$page.params.site}`}}"
-            >Close</Button>
+            href="{`${base}/project-${$page.params.project}/sites/site-${$page.params.site}`}}">
+            Close
+        </Button>
     </svelte:fragment>
 </Wizard>
 
 {#if showConnectRepositry}
     <ConnectRepoModal bind:show={showConnectRepositry} site={data.site} />
 {/if}
+{#if showOpenOnMobile}
+    <OpenOnMobileModal bind:show={showOpenOnMobile} siteURL={data.deployment.domain} />
+{/if}