From 7375a59dbeb3c2e2b5e92a6737e598e4ae100ea2 Mon Sep 17 00:00:00 2001 From: Arman Date: Sun, 18 Jun 2023 17:21:29 +0200 Subject: [PATCH] feat: org creation modal and fixes --- src/lib/elements/forms/inputChoice.svelte | 16 +++- src/lib/stores/billing.ts | 53 +++++++++++++ .../console/createOrganizationCloud.svelte | 22 ++++-- .../billing/paymentModal.svelte | 56 +------------- .../createProjectCloud.svelte | 26 +++---- src/routes/console/wizard/step1.svelte | 48 +++++++++--- src/routes/console/wizard/step2.svelte | 75 +++++++++++++++---- src/routes/console/wizard/store.ts | 4 +- 8 files changed, 196 insertions(+), 104 deletions(-) diff --git a/src/lib/elements/forms/inputChoice.svelte b/src/lib/elements/forms/inputChoice.svelte index f3348f148..67fdeef34 100644 --- a/src/lib/elements/forms/inputChoice.svelte +++ b/src/lib/elements/forms/inputChoice.svelte @@ -8,6 +8,7 @@ export let value = false; export let required = false; export let disabled = false; + export let tooltip: string = null; let element: HTMLInputElement; let error: string; @@ -39,7 +40,20 @@ on:invalid={handleInvalid} />
-
{label}
+
+ {label} + + {#if tooltip} + + {/if} +
{#if $$slots}

{/if} diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts index d62ef6b63..8ca747d85 100644 --- a/src/lib/stores/billing.ts +++ b/src/lib/stores/billing.ts @@ -60,3 +60,56 @@ export class Billing { return await this.client.call('patch', uri, { 'content-type': 'application/json' }, params); } } + +export const apperanceLight = { + variables: { + colorPrimary: '#606a7b', + colorText: '#373B4D', + colorBackground: '#FFFFFF', + color: '#606a7b', + colorDanger: '#df1b41', + fontFamily: 'Inter, arial, sans-serif', + borderRadius: '4px' + }, + rules: { + '.Input:hover': { + border: 'solid 1px #C4C6D7', + boxShadow: 'none' + }, + '.Input:focus': { + border: 'solid 1px #C4C6D7', + boxShadow: 'none' + }, + '.Input::placeholder': { + color: '#C4C6D7' + }, + '.Input--invalid': { + border: 'solid 1px var(--colorDanger)', + boxShadow: 'none' + } + } +}; +export const apperanceDark = { + variables: { + colorPrimary: '#606a7b', + colorText: '#C5C7D8', + colorBackground: '#161622', + colorDanger: '#FF453A', + fontFamily: 'Inter, arial, sans-serif', + borderRadius: '4px' + }, + rules: { + '.Input:hover': { + border: 'solid 1px #4F5769', + boxShadow: 'none' + }, + '.Input:focus': { + border: 'solid 1px #4F5769', + boxShadow: 'none' + }, + '.Input--invalid': { + border: 'solid 1px var(--colorDanger)', + boxShadow: 'none' + } + } +}; diff --git a/src/routes/console/createOrganizationCloud.svelte b/src/routes/console/createOrganizationCloud.svelte index 479ffe0ed..92392c5ea 100644 --- a/src/routes/console/createOrganizationCloud.svelte +++ b/src/routes/console/createOrganizationCloud.svelte @@ -47,20 +47,32 @@ $createOrganization = { id: null, name: null, - tier: Tier['PREMIUM'], - region: 'eu-central-1' + tier: Tier['PREMIUM'] }; }); const stepsComponents: WizardStepsType = new Map(); + stepsComponents.set(1, { - label: 'Project details', + label: 'Organization details', component: Step1 }); stepsComponents.set(2, { - label: 'Select region', + label: 'Payment details', + component: Step2 + }); + stepsComponents.set(3, { + label: 'Invite collaborators', + component: Step2 + }); + stepsComponents.set(4, { + label: 'Review & confirm', component: Step2 }); - + diff --git a/src/routes/console/organization-[organization]/billing/paymentModal.svelte b/src/routes/console/organization-[organization]/billing/paymentModal.svelte index 4811940f6..ff7fae0d2 100644 --- a/src/routes/console/organization-[organization]/billing/paymentModal.svelte +++ b/src/routes/console/organization-[organization]/billing/paymentModal.svelte @@ -15,6 +15,7 @@ import { invalidate } from '$app/navigation'; import { Dependencies } from '$lib/constants'; import { app } from '$lib/stores/app'; + import { apperanceDark, apperanceLight } from '$lib/stores/billing'; export let show = false; @@ -26,59 +27,6 @@ let clientSecret: string; let paymentMethod: PaymentMethod; - const apperanceLight = { - variables: { - colorPrimary: '#606a7b', - colorText: '#373B4D', - colorBackground: '#FFFFFF', - color: '#606a7b', - colorDanger: '#df1b41', - fontFamily: 'Inter, arial, sans-serif', - borderRadius: '4px' - }, - rules: { - '.Input:hover': { - border: 'solid 1px #C4C6D7', - boxShadow: 'none' - }, - '.Input:focus': { - border: 'solid 1px #C4C6D7', - boxShadow: 'none' - }, - '.Input::placeholder': { - color: '#C4C6D7' - }, - '.Input--invalid': { - border: 'solid 1px var(--colorDanger)', - boxShadow: 'none' - } - } - }; - const apperanceDark = { - variables: { - colorPrimary: '#606a7b', - colorText: '#C5C7D8', - colorBackground: '#161622', - colorDanger: '#FF453A', - fontFamily: 'Inter, arial, sans-serif', - borderRadius: '4px' - }, - rules: { - '.Input:hover': { - border: 'solid 1px #4F5769', - boxShadow: 'none' - }, - '.Input:focus': { - border: 'solid 1px #4F5769', - boxShadow: 'none' - }, - '.Input--invalid': { - border: 'solid 1px var(--colorDanger)', - boxShadow: 'none' - } - } - }; - onMount(async () => { stripe = await loadStripe(publicKey); try { @@ -151,7 +99,7 @@

- You won’t be charged immediately. You will be charged for your plan on the first day of + You won't be charged immediately. You will be charged for your plan on the first day of each month using the payment method you've specified above.

diff --git a/src/routes/console/organization-[organization]/createProjectCloud.svelte b/src/routes/console/organization-[organization]/createProjectCloud.svelte index 0de523bf0..3d8eb6045 100644 --- a/src/routes/console/organization-[organization]/createProjectCloud.svelte +++ b/src/routes/console/organization-[organization]/createProjectCloud.svelte @@ -12,7 +12,7 @@ import { Submit, trackEvent, trackError } from '$lib/actions/analytics'; import { ID } from '@appwrite.io/console'; import { Tier } from '$lib/system'; - import { createOrganization } from '../wizard/store'; + import { createProject } from './wizard/store'; const teamId = $page.params.organization; const dispatch = createEventDispatcher(); @@ -24,19 +24,19 @@ async function create() { try { const project = await sdk.forConsole.projects.create( - $createOrganization?.id ?? ID.unique(), - $createOrganization.name, + $createProject?.id ?? ID.unique(), + $createProject.name, teamId, 'default' ); dispatch('created', project); trackEvent(Submit.ProjectCreate, { - customId: !!$createOrganization?.id, + customId: !!$createProject?.id, teamId }); addNotification({ type: 'success', - message: `${$createOrganization.name} has been created` + message: `${$createProject.name} has been created` }); await goto(`/console/project-${project.$id}`); } catch (e) { @@ -49,7 +49,7 @@ } onDestroy(() => { - $createOrganization = { + $createProject = { id: null, name: null, tier: Tier['PREMIUM'] @@ -58,21 +58,13 @@ const stepsComponents: WizardStepsType = new Map(); stepsComponents.set(1, { - label: 'Organization details', + label: 'Project details', component: Step1 }); stepsComponents.set(2, { - label: 'Payment details', - component: Step2 - }); - stepsComponents.set(2, { - label: 'Invite collaborators', - component: Step2 - }); - stepsComponents.set(2, { - label: 'Review & confirm', + label: 'Select region', component: Step2 }); - + diff --git a/src/routes/console/wizard/step1.svelte b/src/routes/console/wizard/step1.svelte index e7eac1f1c..59be3f5b6 100644 --- a/src/routes/console/wizard/step1.svelte +++ b/src/routes/console/wizard/step1.svelte @@ -3,9 +3,12 @@ import { Pill } from '$lib/elements'; import { InputText, FormList } from '$lib/elements/forms'; import { WizardStep } from '$lib/layout'; + import { organizationList } from '$lib/stores/organization'; import { createOrganization } from './store'; let showCustomId = false; + + $: anyOrgFree = $organizationList.teams?.find((org) => org?.tier === 'free'); @@ -45,25 +48,46 @@
    -
  • - - Free - $0/month - For personal, passion projects. - -
    • + {#if !anyOrgFree} +
  • + + +
    +

    Free - $0/month

    +

    For personal, passion projects.

    +
    +     +     +
    • + {/if}
  • - Starter - $10/month per organization member - For small organizations that want flexibility. + +
    +

    + Starter - $10/month per organization member +

    +

    + For small organizations that want flexibility. +

    +
    + 14 DAY FREE TRIAL +
  • - - Pro - $20/month per organization member + exta usage + +
    +

    + Pro - $20/month per organization member + exta usage +

    +

    + For organizations that need the ability scale easily. +

    +
    + 14 DAY FREE TRIAL     - For organizations that need the ability scale easily.
diff --git a/src/routes/console/wizard/step2.svelte b/src/routes/console/wizard/step2.svelte index c07572c8d..76f35f0cc 100644 --- a/src/routes/console/wizard/step2.svelte +++ b/src/routes/console/wizard/step2.svelte @@ -1,23 +1,70 @@ - Select region - - Choose a deployment region for your project. This region cannot be changed. - + Payment details + Add a payment method to your organization. -

- Edge Network is enabled on all regions. For more details, check out our Documentation. -

+ +
+ {#each methods as method} +
test
+ + {/each} + +
+ + {#if $createOrganization.payment === null} + + +
+ +
+ {/if} +
+
+ + +

+ Restrict your resource usage by setting a budget cap. Learn more about usage rates. +

+ + diff --git a/src/routes/console/wizard/store.ts b/src/routes/console/wizard/store.ts index 966abd946..c4c6b5d4d 100644 --- a/src/routes/console/wizard/store.ts +++ b/src/routes/console/wizard/store.ts @@ -5,8 +5,10 @@ export const createOrganization = writable<{ id?: string; name: string; tier: Tier; + payment: string; }>({ id: null, name: null, - tier: Tier['PREMIUM'] + tier: Tier['PREMIUM'], + payment: null });