From 4f3ec5c5dbccb1aa24408bad3fce8913ee40ef91 Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 22 May 2024 17:01:42 +0200 Subject: [PATCH] fix: design and bugs --- package-lock.json | 18 +++++----- package.json | 4 +-- .../billing/alerts/limitReached.svelte | 4 +-- .../billing/alerts/markedForDeletion.svelte | 3 +- .../alerts/missingPaymentMethod.svelte | 3 +- .../billing/alerts/paymentAuthRequired.svelte | 4 +-- .../billing/alerts/paymentMandate.svelte | 4 +-- .../billing/alerts/projectsAtRisk.svelte | 4 +-- .../billing/estimatedTotalBox.svelte | 13 ++++--- .../components/billing/paymentModal.svelte | 1 + .../billing/selectPaymentMethod.svelte | 35 ++++++++++++------- src/lib/components/card.svelte | 1 + .../layout/wizardSecondaryContainer.svelte | 2 +- src/lib/stores/billing.ts | 2 ++ .../console/create-organization/+page.svelte | 2 +- .../change-plan/+page.svelte | 2 +- 16 files changed, 58 insertions(+), 44 deletions(-) diff --git a/package-lock.json b/package-lock.json index fe2801929..83d39ffc4 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.17.0", - "@appwrite.io/pink-icons": "0.17.0", + "@appwrite.io/pink": "0.20.0", + "@appwrite.io/pink-icons": "0.20.0", "@popperjs/core": "^2.11.8", "@sentry/svelte": "^7.66.0", "@sentry/tracing": "^7.66.0", @@ -166,19 +166,19 @@ } }, "node_modules/@appwrite.io/pink": { - "version": "0.17.0", - "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.17.0.tgz", - "integrity": "sha512-1FkVVqdqU5d0FlGIyLisCoLR3JaqGlQs3+BJydo6Mr9/bRWKcg4O9nw+e1P1Lx8StnVnDEM5CRCQdzyPQSNByw==", + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.20.0.tgz", + "integrity": "sha512-17anov7EL+Ic/4fNtCYgG3wA+hoeBXn/j+ZjkfZFfX3g66M8XzVTaQfsAH+EMZ3YjvWuKlHtn+bY4BkGwvMIzQ==", "dependencies": { - "@appwrite.io/pink-icons": "0.17.0", + "@appwrite.io/pink-icons": "0.20.0", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.11.2" } }, "node_modules/@appwrite.io/pink-icons": { - "version": "0.17.0", - "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.17.0.tgz", - "integrity": "sha512-JcYjVI+nPO8BTJzKlUH2RKyUYg/3pEy81dr3TrQB0HlsrngDq3akhaNCfnQzLg9Kicdl+Cr4Gq920Ha6zA4FQQ==" + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.20.0.tgz", + "integrity": "sha512-nfDy7qE6FQWVO1eC+3nwGjXkj/Zm2V50rhvyj0/HKq8RyWNWFGX31BZoMSim01vl/N5irBilpkaER6mLPp7oEw==" }, "node_modules/@babel/code-frame": { "version": "7.24.2", diff --git a/package.json b/package.json index 1ebbf9ccb..866390627 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,8 @@ "e2e": "playwright test tests/e2e" }, "dependencies": { - "@appwrite.io/pink": "0.17.0", - "@appwrite.io/pink-icons": "0.17.0", + "@appwrite.io/pink": "0.20.0", + "@appwrite.io/pink-icons": "0.20.0", "@appwrite.io/console": "^0.6.1", "@popperjs/core": "^2.11.8", "@sentry/svelte": "^7.66.0", diff --git a/src/lib/components/billing/alerts/limitReached.svelte b/src/lib/components/billing/alerts/limitReached.svelte index 7666658e4..7cb72e1d0 100644 --- a/src/lib/components/billing/alerts/limitReached.svelte +++ b/src/lib/components/billing/alerts/limitReached.svelte @@ -5,11 +5,11 @@ import { BillingPlan } from '$lib/constants'; import { Button } from '$lib/elements/forms'; import { HeaderAlert } from '$lib/layout'; - import { readOnly, tierToPlan, upgradeURL } from '$lib/stores/billing'; + import { hideBillingHeaderRoutes, readOnly, tierToPlan, upgradeURL } from '$lib/stores/billing'; import { organization } from '$lib/stores/organization'; -{#if $organization?.$id && $organization?.billingPlan === BillingPlan.STARTER && $readOnly && !$page.url.pathname.includes('/console/account')} +{#if $organization?.$id && $organization?.billingPlan === BillingPlan.STARTER && $readOnly && !hideBillingHeaderRoutes.includes($page.url.pathname)} diff --git a/src/lib/components/billing/alerts/markedForDeletion.svelte b/src/lib/components/billing/alerts/markedForDeletion.svelte index e6323850b..6ff3cd426 100644 --- a/src/lib/components/billing/alerts/markedForDeletion.svelte +++ b/src/lib/components/billing/alerts/markedForDeletion.svelte @@ -1,10 +1,11 @@ -{#if $organization?.markedForDeletion && !$page.url.pathname.includes('/console/account')} +{#if $organization?.markedForDeletion && !hideBillingHeaderRoutes.includes($page.url.pathname)} All existing projects in the {$organization.name} organization have been paused. This organization diff --git a/src/lib/components/billing/alerts/missingPaymentMethod.svelte b/src/lib/components/billing/alerts/missingPaymentMethod.svelte index b39fd7508..b1bfe7f1b 100644 --- a/src/lib/components/billing/alerts/missingPaymentMethod.svelte +++ b/src/lib/components/billing/alerts/missingPaymentMethod.svelte @@ -3,10 +3,11 @@ import { BillingPlan } from '$lib/constants'; import { Button } from '$lib/elements/forms'; import { HeaderAlert } from '$lib/layout'; + import { hideBillingHeaderRoutes } from '$lib/stores/billing'; import { orgMissingPaymentMethod } from '$routes/console/store'; -{#if ($orgMissingPaymentMethod.billingPlan === BillingPlan.PRO || $orgMissingPaymentMethod.billingPlan === BillingPlan.SCALE) && !$orgMissingPaymentMethod.paymentMethodId && !$orgMissingPaymentMethod.backupPaymentMethodId && !$page.url.pathname.includes('/console/account')} +{#if ($orgMissingPaymentMethod.billingPlan === BillingPlan.PRO || $orgMissingPaymentMethod.billingPlan === BillingPlan.SCALE) && !$orgMissingPaymentMethod.paymentMethodId && !$orgMissingPaymentMethod.backupPaymentMethodId && !hideBillingHeaderRoutes.includes($page.url.pathname)} diff --git a/src/lib/components/billing/alerts/paymentAuthRequired.svelte b/src/lib/components/billing/alerts/paymentAuthRequired.svelte index d8819b492..d1491bf61 100644 --- a/src/lib/components/billing/alerts/paymentAuthRequired.svelte +++ b/src/lib/components/billing/alerts/paymentAuthRequired.svelte @@ -2,14 +2,14 @@ import { page } from '$app/stores'; import { Button } from '$lib/elements/forms'; import { HeaderAlert } from '$lib/layout'; - import { actionRequiredInvoices } from '$lib/stores/billing'; + import { actionRequiredInvoices, hideBillingHeaderRoutes } from '$lib/stores/billing'; import { organization } from '$lib/stores/organization'; import { VARS } from '$lib/system'; const endpoint = VARS.APPWRITE_ENDPOINT ?? `${$page.url.origin}/v1`; -{#if $actionRequiredInvoices && $actionRequiredInvoices?.invoices?.length && !$page.url.pathname.includes('/console/account')} +{#if $actionRequiredInvoices && $actionRequiredInvoices?.invoices?.length && !hideBillingHeaderRoutes.includes($page.url.pathname)} Please authorize your upcoming payment for {$organization.name}. Your bank requires this security measure to proceed with payment. diff --git a/src/lib/components/billing/alerts/paymentMandate.svelte b/src/lib/components/billing/alerts/paymentMandate.svelte index 9799ddcc3..8a7c7356a 100644 --- a/src/lib/components/billing/alerts/paymentMandate.svelte +++ b/src/lib/components/billing/alerts/paymentMandate.svelte @@ -2,7 +2,7 @@ import { page } from '$app/stores'; import { Button } from '$lib/elements/forms'; import { HeaderAlert } from '$lib/layout'; - import { paymentMissingMandate } from '$lib/stores/billing'; + import { hideBillingHeaderRoutes, paymentMissingMandate } from '$lib/stores/billing'; import { organization } from '$lib/stores/organization'; import { sdk } from '$lib/stores/sdk'; import { confirmSetup } from '$lib/stores/stripe'; @@ -16,7 +16,7 @@ } -{#if $paymentMissingMandate && $paymentMissingMandate.country === 'in' && $paymentMissingMandate.mandateId === null && !$page.url.pathname.includes('/console/account')} +{#if $paymentMissingMandate && $paymentMissingMandate.country === 'in' && $paymentMissingMandate.mandateId === null && !hideBillingHeaderRoutes.includes($page.url.pathname)} The payment method for {$organization.name} needs to be verified. diff --git a/src/lib/components/billing/alerts/projectsAtRisk.svelte b/src/lib/components/billing/alerts/projectsAtRisk.svelte index 348fe3ebd..a6c656a95 100644 --- a/src/lib/components/billing/alerts/projectsAtRisk.svelte +++ b/src/lib/components/billing/alerts/projectsAtRisk.svelte @@ -4,10 +4,10 @@ import { Button } from '$lib/elements/forms'; import { diffDays, toLocaleDate } from '$lib/helpers/date'; import { HeaderAlert } from '$lib/layout'; - import { failedInvoice } from '$lib/stores/billing'; + import { failedInvoice, hideBillingHeaderRoutes } from '$lib/stores/billing'; -{#if $failedInvoice && !$page.url.pathname.includes('/console/account')} +{#if $failedInvoice && !hideBillingHeaderRoutes.includes($page.url.pathname)} {@const daysPassed = diffDays(new Date($failedInvoice.dueAt), new Date())} diff --git a/src/lib/components/billing/estimatedTotalBox.svelte b/src/lib/components/billing/estimatedTotalBox.svelte index 6ead40362..932700919 100644 --- a/src/lib/components/billing/estimatedTotalBox.svelte +++ b/src/lib/components/billing/estimatedTotalBox.svelte @@ -5,7 +5,6 @@ import { formatCurrency } from '$lib/helpers/numbers'; import type { Coupon } from '$lib/sdk/billing'; import { plansInfo, type Tier } from '$lib/stores/billing'; - import { Box } from '..'; export let billingPlan: Tier; export let collaborators: string[]; @@ -26,9 +25,12 @@ ? grossCost - couponData.credits : 0 : grossCost; + $: trialEndDate = new Date( + billingPayDate.getTime() + currentPlan.trialDays * 24 * 60 * 60 * 1000 + ); - +

{currentPlan.name} plan

{formatCurrency(currentPlan.price)}

@@ -83,15 +85,12 @@

- {@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())}`}.

- + - +
diff --git a/src/lib/components/billing/paymentModal.svelte b/src/lib/components/billing/paymentModal.svelte index 56bcdab20..16388b948 100644 --- a/src/lib/components/billing/paymentModal.svelte +++ b/src/lib/components/billing/paymentModal.svelte @@ -92,6 +92,7 @@ + diff --git a/src/lib/components/billing/selectPaymentMethod.svelte b/src/lib/components/billing/selectPaymentMethod.svelte index ec1e37570..873814887 100644 --- a/src/lib/components/billing/selectPaymentMethod.svelte +++ b/src/lib/components/billing/selectPaymentMethod.svelte @@ -84,7 +84,10 @@ {:else} - +

@@ -99,17 +102,23 @@ {#if showPaymentModal && isCloud && hasStripePublicKey} - - {#if showTaxId} -

- -
- {/if} - + + + {#if showTaxId} +
+ +
+ {/if} + + {/if} diff --git a/src/lib/components/card.svelte b/src/lib/components/card.svelte index 378aea133..4cf714226 100644 --- a/src/lib/components/card.svelte +++ b/src/lib/components/card.svelte @@ -49,6 +49,7 @@ class:is-border-dashed={isDashed} class:is-danger={danger} class:is-allowed-focus={href} + {...$$restProps} {style} on:click on:keyup={clickOnEnter} diff --git a/src/lib/layout/wizardSecondaryContainer.svelte b/src/lib/layout/wizardSecondaryContainer.svelte index 7952cbbe8..976e849e8 100644 --- a/src/lib/layout/wizardSecondaryContainer.svelte +++ b/src/lib/layout/wizardSecondaryContainer.svelte @@ -6,7 +6,6 @@ diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts index 1a1507675..bd6b2881b 100644 --- a/src/lib/stores/billing.ts +++ b/src/lib/stores/billing.ts @@ -367,3 +367,5 @@ export const upgradeURL = derived( page, ($page) => `${base}/console/organization-${$page.data?.organization?.$id}/change-plan` ); + +export const hideBillingHeaderRoutes = ['/console/create-organization', '/console/account']; diff --git a/src/routes/console/create-organization/+page.svelte b/src/routes/console/create-organization/+page.svelte index 0eaba2d31..561cfb0ea 100644 --- a/src/routes/console/create-organization/+page.svelte +++ b/src/routes/console/create-organization/+page.svelte @@ -197,7 +197,7 @@ id="name" required /> - +

For more details on our plans, visit our . diff --git a/src/routes/console/organization-[organization]/change-plan/+page.svelte b/src/routes/console/organization-[organization]/change-plan/+page.svelte index 92bbc10cb..0986933be 100644 --- a/src/routes/console/organization-[organization]/change-plan/+page.svelte +++ b/src/routes/console/organization-[organization]/change-plan/+page.svelte @@ -256,7 +256,7 @@ Change plan

- +

For more details on our plans, visit our .