Skip to content

Commit 0f4de44

Browse files
HarshMN2345HarshMN2345
committed
fix: Disable billing plan actions during upgrade with tooltip on hoveræ
1 parent 38d4805 commit 0f4de44

2 files changed

Lines changed: 110 additions & 100 deletions

File tree

‎src/routes/(console)/organization-[organization]/billing/planSummary.svelte‎

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
Icon,
1515
Layout,
1616
Divider,
17-
Badge
17+
Badge,
18+
Tooltip
1819
} from '@appwrite.io/pink-svelte';
1920
import { humanFileSize } from '$lib/helpers/sizeConvertion';
2021
import { formatNum } from '$lib/helpers/string';
@@ -72,6 +73,7 @@
7273
const baseAmount = $derived(currentAggregation?.amount ?? currentPlan?.price ?? 0);
7374
const creditsApplied = $derived(Math.min(baseAmount, availableCredit ?? 0));
7475
const totalAmount = $derived(Math.max(baseAmount - creditsApplied, 0));
76+
const isUpgrading = $derived($organization?.status === 'upgrading');
7577
7678
function formatHumanSize(bytes: number): string {
7779
const size = humanFileSize(bytes || 0);
@@ -588,62 +590,62 @@
588590

589591
<!-- Actions -->
590592
<div class="actions-container">
591-
{#if !currentPlan.requiresPaymentMethod}
592-
<Layout.Stack
593-
direction="row"
594-
alignItems="center"
595-
justifyContent="flex-end"
596-
gap="s"
597-
wrap="wrap"
598-
class="u-width-full-line actions-mobile">
599-
{#if !currentPlan?.usagePerProject}
600-
<Button text href={`${base}/organization-${$organization?.$id}/usage`}>
601-
View estimated usage
602-
</Button>
603-
{/if}
593+
<Layout.Stack
594+
direction="row"
595+
alignItems="center"
596+
justifyContent="flex-end"
597+
gap="s"
598+
wrap="wrap"
599+
class="u-width-full-line actions-mobile">
600+
<Tooltip disabled={!isUpgrading}>
601+
<div>
602+
{#if !currentPlan.requiresPaymentMethod}
603+
<Button
604+
text
605+
disabled={$organization?.markedForDeletion || isUpgrading}
606+
href={getChangePlanUrl($organization?.$id)}
607+
on:click={() =>
608+
trackEvent(Click.OrganizationClickUpgrade, {
609+
from: 'button',
610+
source: 'billing_tab'
611+
})}>
612+
Upgrade
613+
</Button>
614+
{:else if $organization?.billingPlanDowngrade !== null}
615+
<Button
616+
text
617+
disabled={isUpgrading}
618+
on:click={() => (showCancel = true)}>
619+
Cancel change
620+
</Button>
621+
{:else}
622+
<Button
623+
text
624+
disabled={$organization?.markedForDeletion || isUpgrading}
625+
href={getChangePlanUrl($organization?.$id)}
626+
on:click={() =>
627+
trackEvent(Click.OrganizationClickUpgrade, {
628+
from: 'button',
629+
source: 'billing_tab'
630+
})}>
631+
Change plan
632+
</Button>
633+
{/if}
634+
</div>
635+
<svelte:fragment slot="tooltip">
636+
Your payment is still being processed, check with your payment
637+
provider.
638+
</svelte:fragment>
639+
</Tooltip>
640+
{#if !currentPlan?.usagePerProject}
604641
<Button
605-
disabled={$organization?.markedForDeletion}
606-
href={getChangePlanUrl($organization?.$id)}
607-
on:click={() =>
608-
trackEvent(Click.OrganizationClickUpgrade, {
609-
from: 'button',
610-
source: 'billing_tab'
611-
})}>
612-
Upgrade
642+
text={!currentPlan.requiresPaymentMethod}
643+
secondary={currentPlan.requiresPaymentMethod}
644+
href={`${base}/organization-${$organization?.$id}/usage`}>
645+
View estimated usage
613646
</Button>
614-
</Layout.Stack>
615-
{:else}
616-
<Layout.Stack
617-
direction="row"
618-
alignItems="center"
619-
justifyContent="flex-end"
620-
gap="s"
621-
wrap="wrap"
622-
class="u-width-full-line actions-mobile">
623-
{#if $organization?.billingPlanDowngrade !== null}
624-
<Button text on:click={() => (showCancel = true)}>Cancel change</Button>
625-
{:else}
626-
<Button
627-
text
628-
disabled={$organization?.markedForDeletion}
629-
href={getChangePlanUrl($organization?.$id)}
630-
on:click={() =>
631-
trackEvent(Click.OrganizationClickUpgrade, {
632-
from: 'button',
633-
source: 'billing_tab'
634-
})}>
635-
Change plan
636-
</Button>
637-
{/if}
638-
{#if !currentPlan?.usagePerProject}
639-
<Button
640-
secondary
641-
href={`${base}/organization-${$organization?.$id}/usage`}>
642-
View estimated usage
643-
</Button>
644-
{/if}
645-
</Layout.Stack>
646-
{/if}
647+
{/if}
648+
</Layout.Stack>
647649
</div>
648650
</EstimatedCard>
649651
{/key}

‎src/routes/(console)/organization-[organization]/billing/planSummaryOld.svelte‎

Lines changed: 53 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
const isTrial =
3232
new Date($organization?.billingStartDate).getTime() - today.getTime() > 0 &&
3333
$organization?.billingTrialDays; /* number of trial days. */
34+
$: isUpgrading = $organization?.status === 'upgrading';
3435
3536
const extraUsage = currentInvoice ? currentInvoice.amount - currentPlan?.price : 0;
3637
</script>
@@ -41,9 +42,11 @@
4142
A breakdown of your estimated upcoming payment for the current billing period. Totals displayed
4243
exclude accumulated credits and applicable taxes.
4344
<svelte:fragment slot="aside">
44-
<p class="text u-bold">
45-
Due at: {toLocaleDate($organization?.billingNextInvoiceDate)}
46-
</p>
45+
<Layout.Stack gap="xs">
46+
<p class="text u-bold">
47+
Due at: {toLocaleDate($organization?.billingNextInvoiceDate)}
48+
</p>
49+
</Layout.Stack>
4750
<Card.Base variant="secondary" padding="s">
4851
<Layout.Stack>
4952
<Layout.Stack direction="row" justifyContent="space-between">
@@ -165,50 +168,55 @@
165168
</Card.Base>
166169
</svelte:fragment>
167170
<svelte:fragment slot="actions">
168-
{#if !currentPlan.requiresPaymentMethod}
169-
<div
170-
class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line u-main-end">
171-
{#if !currentPlan?.usagePerProject}
172-
<Button text href={`${base}/organization-${$organization?.$id}/usage`}>
173-
View estimated usage
174-
</Button>
175-
{/if}
171+
<div
172+
class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line u-main-end">
173+
<Tooltip disabled={!isUpgrading}>
174+
<div>
175+
{#if !currentPlan.requiresPaymentMethod}
176+
<Button
177+
disabled={$organization?.markedForDeletion || isUpgrading}
178+
href={getChangePlanUrl($organization?.$id)}
179+
on:click={() =>
180+
trackEvent(Click.OrganizationClickUpgrade, {
181+
from: 'button',
182+
source: 'billing_tab'
183+
})}>
184+
Upgrade
185+
</Button>
186+
{:else if $organization?.billingPlanDowngrade !== null}
187+
<Button
188+
text
189+
disabled={isUpgrading}
190+
on:click={() => (showCancel = true)}>
191+
Cancel change
192+
</Button>
193+
{:else}
194+
<Button
195+
text
196+
disabled={$organization?.markedForDeletion || isUpgrading}
197+
href={getChangePlanUrl($organization?.$id)}
198+
on:click={() =>
199+
trackEvent(Click.OrganizationClickUpgrade, {
200+
from: 'button',
201+
source: 'billing_tab'
202+
})}>
203+
Change plan
204+
</Button>
205+
{/if}
206+
</div>
207+
<svelte:fragment slot="tooltip">
208+
Your payment is still being processed, check with your payment provider.
209+
</svelte:fragment>
210+
</Tooltip>
211+
{#if !currentPlan?.usagePerProject}
176212
<Button
177-
disabled={$organization?.markedForDeletion}
178-
href={getChangePlanUrl($organization?.$id)}
179-
on:click={() =>
180-
trackEvent(Click.OrganizationClickUpgrade, {
181-
from: 'button',
182-
source: 'billing_tab'
183-
})}>
184-
Upgrade
213+
text={!currentPlan.requiresPaymentMethod}
214+
secondary={currentPlan.requiresPaymentMethod}
215+
href={`${base}/organization-${$organization?.$id}/usage`}>
216+
View estimated usage
185217
</Button>
186-
</div>
187-
{:else}
188-
<div
189-
class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line u-main-end">
190-
{#if $organization?.billingPlanDowngrade !== null}
191-
<Button text on:click={() => (showCancel = true)}>Cancel change</Button>
192-
{:else}
193-
<Button
194-
text
195-
disabled={$organization?.markedForDeletion}
196-
href={getChangePlanUrl($organization?.$id)}
197-
on:click={() =>
198-
trackEvent(Click.OrganizationClickUpgrade, {
199-
from: 'button',
200-
source: 'billing_tab'
201-
})}>
202-
Change plan
203-
</Button>
204-
{/if}
205-
{#if !currentPlan?.usagePerProject}
206-
<Button secondary href={`${base}/organization-${$organization?.$id}/usage`}>
207-
View estimated usage
208-
</Button>
209-
{/if}
210-
</div>
211-
{/if}
218+
{/if}
219+
</div>
212220
</svelte:fragment>
213221
</CardGrid>
214222
{/if}

0 commit comments

Comments
 (0)