From 21a4d714a4642c366cd549813611a376db2bdbe1 Mon Sep 17 00:00:00 2001 From: Darshan Date: Tue, 18 Mar 2025 10:54:01 +0530 Subject: [PATCH] update: component to scroll to, better scroll logic. --- src/lib/elements/forms/button.svelte | 6 +- .../billing/budgetAlert.svelte | 205 ++++++++---------- .../billing/budgetCap.svelte | 147 +++++++------ .../budgetLimitAlert.svelte | 17 +- 4 files changed, 187 insertions(+), 188 deletions(-) diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte index fc643e0af..b27dd441d 100644 --- a/src/lib/elements/forms/button.svelte +++ b/src/lib/elements/forms/button.svelte @@ -70,7 +70,8 @@ class={resolvedClasses} style="pointer-events: {internalDisabled ? 'none' : 'auto'};" aria-label={ariaLabel} - use:multiAction={actions}> + use:multiAction={actions} + {...$$restProps}> {:else} @@ -81,7 +82,8 @@ class={resolvedClasses} aria-label={ariaLabel} type={submit ? 'submit' : 'button'} - use:multiAction={actions}> + use:multiAction={actions} + {...$$restProps}> {#if $isSubmitting && submissionLoader} { - formHolderElement?.scrollIntoView({ - block: 'nearest' - }); - }); - } -
-
- - Billing alerts + + + Billing alerts -

- {#if !$currentPlan.budgeting} - Get notified by email when your organization meets a percentage of your budget - cap. {tierToPlan($organization.billingPlan).name} organizations will receive one - notification at 75% resource usage. - {:else} - Get notified by email when your organization meets or exceeds a percentage of - your specified billing alert(s). - {/if} -

- - {#if !$currentPlan.budgeting} +

+ {#if !$currentPlan.budgeting} + Get notified by email when your organization meets a percentage of your budget cap. {tierToPlan($organization.billingPlan).name} organizations will receive one notification + at 75% resource usage. + {:else} + Get notified by email when your organization meets or exceeds a percentage of your + specified billing alert(s). + {/if} +

+ + {#if !$currentPlan.budgeting} + + Billing alerts are a Pro plan feature + + Upgrade to a Pro plan to manage when you receive billing alerts for your organization. + + {:else} + - Billing alerts are a Pro plan feature - - Upgrade to a Pro plan to manage when you receive billing alerts for your organization. + You can set a maximum of 4 billing alerts per organization. - {:else} - - - You can set a maximum of 4 billing alerts per organization. - -
- (search = selectedAlert.toString())} /> -
- -
+
+ (search = selectedAlert.toString())} /> +
+
- +
+ - {#if alerts.length} - - - Alert at budget cap % - - - - {#each alerts.sort() as alert} - - - {alert}% - - - - - - {/each} - -
- {/if} + {#if alerts.length} + + + Alert at budget cap % + + + + {#each alerts.sort() as alert} + + + {alert}% + + + + + + {/each} + +
{/if} - + {/if} + - - {#if $organization?.billingPlan === BillingPlan.FREE || $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION} - - {:else} - - {/if} - - - -
+ + {#if $organization?.billingPlan === BillingPlan.FREE || $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION} + + {:else} + + {/if} + + + diff --git a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte index 3f3a5517f..007de8d7a 100644 --- a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte +++ b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte @@ -8,8 +8,10 @@ import { addNotification } from '$lib/stores/notifications'; import { organization, currentPlan } from '$lib/stores/organization'; import { sdk } from '$lib/stores/sdk'; - import { onMount } from 'svelte'; + import { onMount, tick } from 'svelte'; import BudgetAlert from './budgetAlert.svelte'; + import { page } from '$app/stores'; + import { scrollToUpdateBudget } from './store'; let capActive = false; let budget: number; @@ -47,72 +49,91 @@ $: if (!capActive) { budget = null; } + + let formHolderElement: HTMLDivElement; + + $: if ($scrollToUpdateBudget) { + // clean the url in the search bar. + history.replaceState(null, '', $page.url.pathname); + + tick().then(() => { + const elementTop = formHolderElement.getBoundingClientRect().top + window.scrollY; + // Offset 60 to prevent misalignment. + window.scrollTo({ top: elementTop - 60 }); + }); + } -
- - Budget cap +
+ + + Budget cap -

- Restrict your resource usage by setting a budget cap. Cap usage is reset at the - beginning of each billing cycle. -

- - {#if !$currentPlan.budgeting} - - - Budget caps are a Pro plan feature - - Upgrade to a Pro plan to set a budget cap for your organization. For more information - on what you can do with a Pro plan, - view our pricing guide. - - {:else} - - - - Budget cap limits do not include the base amount of your plan. +

+ Restrict your resource usage by setting a budget cap. Cap usage is reset at the + beginning of each billing cycle. +

+ + {#if !$currentPlan.budgeting} + + + Budget caps are a Pro plan feature - - {#if capActive} - - {/if} - - {/if} - + Upgrade to a Pro plan to set a budget cap for your organization. For more information + on what you can do with a Pro plan, + view our pricing guide. + + {:else} + + + + Budget cap limits do not include the base amount of your plan. + + + {#if capActive} + + {/if} + + {/if} + - - {#if $organization?.billingPlan === BillingPlan.FREE} - - {:else} - - {/if} - - - + + {#if $organization?.billingPlan === BillingPlan.FREE} + + {:else} + + {/if} + + + +
0} /> diff --git a/src/routes/(console)/organization-[organization]/budgetLimitAlert.svelte b/src/routes/(console)/organization-[organization]/budgetLimitAlert.svelte index 5d51ce528..b03026f97 100644 --- a/src/routes/(console)/organization-[organization]/budgetLimitAlert.svelte +++ b/src/routes/(console)/organization-[organization]/budgetLimitAlert.svelte @@ -6,18 +6,9 @@ import { HeaderAlert } from '$lib/layout'; import { hideBillingHeaderRoutes, readOnly, showBudgetAlert } from '$lib/stores/billing'; import { base } from '$app/paths'; - import { goto } from '$app/navigation'; - $: isSameUrl = $page.url.pathname === redirectUrl; - $: redirectUrl = `${base}/organization-${$organization.$id}/billing`; - - function scrollOrNavigate() { - if (isSameUrl) { - document.querySelector('#update-budget-section')?.scrollIntoView({ block: 'nearest' }); - } else { - goto(`${redirectUrl}#update-budget`); - } - } + $: redirectUrl = `${base}/organization-${$organization.$id}/billing#update-budget`; + $: isSameUrl = $page.url.pathname === new URL(redirectUrl, window.location.origin).pathname; {#if $showBudgetAlert && $organization?.$id && $organization?.billingPlan !== BillingPlan.FREE && $readOnly && !hideBillingHeaderRoutes.includes($page.url.pathname)} @@ -30,7 +21,9 @@ -