From 07db6cd4e2569172ccbc341994f10ec34f6514e7 Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 8 May 2024 14:59:54 +0200 Subject: [PATCH] feat: add comparison box --- package-lock.json | 4 +- .../billing/estimatedTotalBox.svelte | 114 +++++++++++++++ src/lib/components/billing/index.ts | 2 + .../billing/planComparisonBox.svelte | 50 +++++++ src/lib/components/secondaryTabs.svelte | 3 +- .../console/create-organization/+page.svelte | 133 ++---------------- 6 files changed, 185 insertions(+), 121 deletions(-) create mode 100644 src/lib/components/billing/estimatedTotalBox.svelte create mode 100644 src/lib/components/billing/planComparisonBox.svelte diff --git a/package-lock.json b/package-lock.json index 328b25876..f9918446f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,8 +7,8 @@ "name": "@appwrite/console", "dependencies": { "@appwrite.io/console": "^0.6.1", - "@appwrite.io/pink": "0.11.0", - "@appwrite.io/pink-icons": "0.11.0", + "@appwrite.io/pink": "0.16.0", + "@appwrite.io/pink-icons": "0.16.0", "@popperjs/core": "^2.11.8", "@sentry/svelte": "^7.66.0", "@sentry/tracing": "^7.66.0", diff --git a/src/lib/components/billing/estimatedTotalBox.svelte b/src/lib/components/billing/estimatedTotalBox.svelte new file mode 100644 index 000000000..a20d951b2 --- /dev/null +++ b/src/lib/components/billing/estimatedTotalBox.svelte @@ -0,0 +1,114 @@ + + + + +

{currentPlan.name} plan

+

{formatCurrency(currentPlan.price)}

+ + +

Additional seats ({collaborators?.length})

+

+ {formatCurrency(extraSeatsCost)} +

+ + {#if couponData?.status === 'active'} + +
+

+

+ +
+ {#if couponData.credits > 100} +

+ Credits applied +

+ {:else} + -{formatCurrency(couponData.credits)} + {/if} + + {/if} +
+ +

Estimated total

+

+ {formatCurrency(estimatedTotal)} +

+ + + {@const trialEndDate = new Date( + billingPayDate.getTime() + currentPlan.trialDays * 24 * 60 * 60 * 1000 + )} +

+ Your payment method will be charged this amount plus usage fees every 30 days {!currentPlan.trialDays + ? `starting ${toLocaleDate(billingPayDate.toString())}` + : ` after your trial period ends on ${toLocaleDate(trialEndDate.toString())}`}. +

+ + + {#if budgetEnabled} +
+ +
+ {/if} + + + diff --git a/src/lib/components/billing/index.ts b/src/lib/components/billing/index.ts index 7fb76c11d..83da97477 100644 --- a/src/lib/components/billing/index.ts +++ b/src/lib/components/billing/index.ts @@ -2,3 +2,5 @@ export { default as PaymentBoxes } from './paymentBoxes.svelte'; export { default as CouponInput } from './couponInput.svelte'; export { default as SelectPaymentMethod } from './selectPaymentMethod.svelte'; export { default as UsageRates } from './usageRates.svelte'; +export { default as EstimatedTotalBox } from './estimatedTotalBox.svelte'; +export { default as PlanComparisonBox } from './planComparisonBox.svelte'; diff --git a/src/lib/components/billing/planComparisonBox.svelte b/src/lib/components/billing/planComparisonBox.svelte new file mode 100644 index 000000000..d9ae9326e --- /dev/null +++ b/src/lib/components/billing/planComparisonBox.svelte @@ -0,0 +1,50 @@ + + + + + (selectedTab = 'tier-0')}> + Starter + + (selectedTab = 'tier-1')}> + Pro + + + +
+ {#if selectedTab === 'tier-0'} +

{plan.name} plan

+
    +
  • + Limited to {plan.databases} Database, {plan.buckets} Buckets, {plan.functions} Functions + per project +
    • +
  • Limited to 1 organization member
    • +
  • {plan.bandwidth}GB bandwidth
    • +
  • {plan.storage}GB storage
    • +
  • {formatNum(plan.executions)} executions
    • +
+ {:else if selectedTab === 'tier-1'} +

{plan.name} plan

+
    +
  • Everything in the Starter plan, plus:
    • +
  • Unlimited databases, buckets, functions
    • +
  • {plan.bandwidth}GB bandwidth
    • +
  • {plan.storage}GB storage
    • +
  • {formatNum(plan.executions)} executions
    • +
  • Email support
    • +
+ {/if} +
+ diff --git a/src/lib/components/secondaryTabs.svelte b/src/lib/components/secondaryTabs.svelte index 4cc2a0db6..835f1a1cc 100644 --- a/src/lib/components/secondaryTabs.svelte +++ b/src/lib/components/secondaryTabs.svelte @@ -1,9 +1,10 @@ -
    +
    diff --git a/src/routes/console/create-organization/+page.svelte b/src/routes/console/create-organization/+page.svelte index 546fde48e..29a1b8d58 100644 --- a/src/routes/console/create-organization/+page.svelte +++ b/src/routes/console/create-organization/+page.svelte @@ -3,22 +3,15 @@ import { base } from '$app/paths'; import { page } from '$app/stores'; import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; - import { tooltip } from '$lib/actions/tooltip'; - import { Box, LabelCard } from '$lib/components'; - import { SelectPaymentMethod } from '$lib/components/billing'; + import { LabelCard } from '$lib/components'; + import { + EstimatedTotalBox, + PlanComparisonBox, + SelectPaymentMethod + } from '$lib/components/billing'; import ValidateCreditModal from '$lib/components/billing/validateCreditModal.svelte'; import { BillingPlan, Dependencies } from '$lib/constants'; - import { - Button, - Form, - FormList, - InputChoice, - InputNumber, - InputTags, - InputText, - Label - } from '$lib/elements/forms'; - import { toLocaleDate } from '$lib/helpers/date'; + import { Button, Form, FormList, InputTags, InputText, Label } from '$lib/elements/forms'; import { formatCurrency } from '$lib/helpers/numbers'; import { WizardSecondaryContainer, @@ -39,9 +32,6 @@ (org) => (org as Organization)?.billingPlan === BillingPlan.STARTER ); const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,63}$/i; - const today = new Date(); - const billingPayDate = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000); - let previousPage: string = `${base}/console`; afterNavigate(({ from }) => { @@ -63,7 +53,7 @@ credits: null }; let taxId: string; - let budgetEnabled = false; + let billingBudget: number; let showCreditModal = false; @@ -190,15 +180,6 @@ $: if (billingPlan === BillingPlan.PRO) { loadPaymentMethods(); } - $: currentPlan = $plansInfo.get(billingPlan); - $: extraSeatsCost = (collaborators?.length ?? 0) * (currentPlan?.addons?.member?.price ?? 0); - $: grossCost = currentPlan.price + extraSeatsCost; - $: estimatedTotal = - couponData?.status === 'active' - ? grossCost - couponData.credits >= 0 - ? grossCost - couponData.credits - : 0 - : grossCost; @@ -293,97 +274,13 @@ {#if billingPlan !== BillingPlan.STARTER} - - -

    {currentPlan.name} plan

    -

    {formatCurrency(currentPlan.price)}

    -     - -

    Additional seats ({collaborators?.length})

    -

    - {formatCurrency(extraSeatsCost)} -

    -     - {#if couponData?.status === 'active'} - -
    -

    -

    - -
    - {#if couponData.credits > 100} -

    - Credits applied -

    - {:else} - -{formatCurrency(couponData.credits)} - {/if} -     - {/if} -
    - -

    Estimated total

    -

    - {formatCurrency(estimatedTotal)} -

    -     - - {@const trialEndDate = new Date( - billingPayDate.getTime() + currentPlan.trialDays * 24 * 60 * 60 * 1000 - )} -

    - Your payment method will be charged this amount plus usage fees every 30 - days {!currentPlan.trialDays - ? `starting ${toLocaleDate(billingPayDate.toString())}` - : ` after your trial period ends on ${toLocaleDate(trialEndDate.toString())}`}. -

    - - - {#if budgetEnabled} -
    - -
    - {/if} -     -     - + + {:else} + {/if}