From 75780c4137dd909478fd4b2da1502931dbd3ea40 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 5 May 2023 18:00:34 +0200
Subject: [PATCH] feat: settings billing page (WIP)

---
 src/lib/components/index.ts                   |  1 +
 src/lib/components/regionCard.svelte          | 35 +++++++++++++
 .../wizard/step1.svelte                       | 10 +++-
 .../wizard/step2.svelte                       | 52 +++++++++----------
 .../settings/billing/+page.svelte             | 10 ++++
 .../settings/billing/budgetCap.svelte         | 31 +++++++++++
 .../settings/billing/bugetAlert.svelte        |  0
 .../settings/billing/overview.svelte          |  0
 8 files changed, 111 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/components/regionCard.svelte
 create mode 100644 src/routes/console/project-[project]/settings/billing/+page.svelte
 create mode 100644 src/routes/console/project-[project]/settings/billing/budgetCap.svelte
 create mode 100644 src/routes/console/project-[project]/settings/billing/bugetAlert.svelte
 create mode 100644 src/routes/console/project-[project]/settings/billing/overview.svelte

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index e978959bf..6cfea4d81 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -49,6 +49,7 @@ export { default as Heading } from './heading.svelte';
 export { default as Output } from './output.svelte';
 export { default as ViewSelector } from './viewSelector.svelte';
 export { default as LabelCard } from './labelCard.svelte';
+export { default as RegionCard } from './regionCard.svelte';
 export { default as Limit } from './limit.svelte';
 export { default as PaginationWithLimit } from './paginationWithLimit.svelte';
 export { default as ClickableList } from './clickableList.svelte';
diff --git a/src/lib/components/regionCard.svelte b/src/lib/components/regionCard.svelte
new file mode 100644
index 000000000..924dbc8c0
--- /dev/null
+++ b/src/lib/components/regionCard.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    export let name: string;
+    export let group: string;
+    export let value: string | number | boolean;
+    export let disabled = false;
+    export let padding = 1;
+    export let icon: string = null;
+    export let fullHeight = true;
+    export let borderRadius: 'xsmall' | 'small' | 'medium' | 'large' = 'small';
+
+    enum Radius {
+        xsmall = '--border-radius-xsmall',
+        small = '--border-radius-small',
+        medium = '--border-radius-medium',
+        large = '--border-radius-large'
+    }
+</script>
+
+<label
+    class="card u-cursor-pointer u-flex u-flex-vertical u-gap-16"
+    class:is-allow-focus={!disabled}
+    class:is-disabled={disabled}
+    class:u-height-100-percent={fullHeight}
+    style:--card-padding={`${padding}rem`}
+    style:--card-border-radius={`var(${Radius[borderRadius]})`}>
+    <input
+        class="is-small u-margin-block-start-2"
+        type="radio"
+        {name}
+        {disabled}
+        {value}
+        bind:group
+        on:click />
+    <slot />
+</label>
diff --git a/src/routes/console/organization-[organization]/wizard/step1.svelte b/src/routes/console/organization-[organization]/wizard/step1.svelte
index 05f20aa87..5b7929519 100644
--- a/src/routes/console/organization-[organization]/wizard/step1.svelte
+++ b/src/routes/console/organization-[organization]/wizard/step1.svelte
@@ -33,7 +33,15 @@
         {/if}
     </FormList>
 
-    <p class="text common-section">Plan</p>
+    <p class="body-text-1 u-bold common-section">Plan</p>
+    <p class="text">
+        For more details on our plans, visit our <a
+            class="link"
+            href="http://#"
+            target="_blank"
+            rel="noopener noreferrer">pricing page</a
+        >.
+    </p>
     <ul
         class="grid-box u-margin-block-start-16"
         style="--p-grid-item-size:16em; --p-grid-item-size-small-screens:16rem; --grid-gap: 1rem;">
diff --git a/src/routes/console/organization-[organization]/wizard/step2.svelte b/src/routes/console/organization-[organization]/wizard/step2.svelte
index 320f9415a..67fec33be 100644
--- a/src/routes/console/organization-[organization]/wizard/step2.svelte
+++ b/src/routes/console/organization-[organization]/wizard/step2.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { LabelCard } from '$lib/components';
+    import { RegionCard } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
@@ -45,36 +45,34 @@
         style="--p-grid-item-size:12em; --p-grid-item-size-small-screens:12rem; --grid-gap: 1rem;">
         {#each regions as region}
             <li>
-                <LabelCard
+                <RegionCard
                     name="region"
                     bind:group={$createProject.region}
                     value={region.name}
                     disabled={region.disabled}>
-                    <svelte:fragment slot="custom">
-                        <div
-                            class="u-flex u-flex-vertical u-gap-12 u-justify-main-center u-cross-center u-margin-inline-auto">
-                            {#if region.disabled}
-                                <img
-                                    src={getFlag(region.flag)}
-                                    alt={region.name}
-                                    width="40"
-                                    height="30" />
-                                {region.label}
-                                <Pill button>
-                                    <span class="icon-bell" aria-hidden="true" />
-                                    <span class="text">Notify me</span>
-                                </Pill>
-                            {:else}
-                                <img
-                                    src={getFlag(region.flag)}
-                                    alt={region.name}
-                                    width="40"
-                                    height="30" />
-                                {region.label}
-                            {/if}
-                        </div>
-                    </svelte:fragment>
-                </LabelCard>
+                    <div
+                        class="u-flex u-flex-vertical u-gap-12 u-justify-main-center u-cross-center u-margin-inline-auto">
+                        {#if region.disabled}
+                            <img
+                                src={getFlag(region.flag)}
+                                alt={region.name}
+                                width="40"
+                                height="30" />
+                            <p class:u-opacity-50={region.disabled}>{region.label}</p>
+                            <Pill button>
+                                <span class="icon-bell" aria-hidden="true" />
+                                <span class="text">Notify me</span>
+                            </Pill>
+                        {:else}
+                            <img
+                                src={getFlag(region.flag)}
+                                alt={region.name}
+                                width="40"
+                                height="30" />
+                            {region.label}
+                        {/if}
+                    </div>
+                </RegionCard>
             </li>
         {/each}
     </ul>
diff --git a/src/routes/console/project-[project]/settings/billing/+page.svelte b/src/routes/console/project-[project]/settings/billing/+page.svelte
new file mode 100644
index 000000000..e6264c6a2
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/billing/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    import { Heading } from '$lib/components';
+    import { Container } from '$lib/layout';
+    import BudgetCap from './budgetCap.svelte';
+</script>
+
+<Container>
+    <Heading tag="h2" size="5">Billing</Heading>
+    <BudgetCap />
+</Container>
diff --git a/src/routes/console/project-[project]/settings/billing/budgetCap.svelte b/src/routes/console/project-[project]/settings/billing/budgetCap.svelte
new file mode 100644
index 000000000..2d1b9749d
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/billing/budgetCap.svelte
@@ -0,0 +1,31 @@
+<script>
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button, Form, FormList, InputNumber, InputSwitch } from '$lib/elements/forms';
+
+    function update() {
+        console.log('test');
+    }
+</script>
+
+<Form onSubmit={update}>
+    <CardGrid>
+        <Heading tag="h2" size="6">Budget Cap</Heading>
+        <p class="text">
+            Restrict your resource usage by setting a budget cap. <a
+                class="link"
+                href="http://#"
+                target="_blank"
+                rel="noopener noreferrer">Learn more about usage rates</a
+            >.
+        </p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputSwitch label="Budget cap" />
+                <InputNumber label="Budget cap ($USD)" placeholder="Enter budget cap" />
+            </FormList>
+        </svelte:fragment>
+        <svelte:fragment slot="actions">
+            <Button disabled submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/settings/billing/bugetAlert.svelte b/src/routes/console/project-[project]/settings/billing/bugetAlert.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/routes/console/project-[project]/settings/billing/overview.svelte b/src/routes/console/project-[project]/settings/billing/overview.svelte
new file mode 100644
index 000000000..e69de29bb