fix: Disable billing plan actions during upgrade with tooltip on hover #2861
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -31,6 +31,7 @@ | |
| const isTrial = | ||
| new Date($organization?.billingStartDate).getTime() - today.getTime() > 0 && | ||
| $organization?.billingTrialDays; /* number of trial days. */ | ||
| $: isUpgrading = $organization?.status === 'upgrading'; | ||
|
|
||
| const extraUsage = currentInvoice ? currentInvoice.amount - currentPlan?.price : 0; | ||
| </script> | ||
|
|
@@ -41,9 +42,11 @@ | |
| A breakdown of your estimated upcoming payment for the current billing period. Totals displayed | ||
| exclude accumulated credits and applicable taxes. | ||
| <svelte:fragment slot="aside"> | ||
| <Layout.Stack gap="xs"> | ||
| <p class="text u-bold"> | ||
| Due at: {toLocaleDate($organization?.billingNextInvoiceDate)} | ||
| </p> | ||
| </Layout.Stack> | ||
| <Card.Base variant="secondary" padding="s"> | ||
| <Layout.Stack> | ||
| <Layout.Stack direction="row" justifyContent="space-between"> | ||
|
|
@@ -165,50 +168,55 @@ | |
| </Card.Base> | ||
| </svelte:fragment> | ||
| <svelte:fragment slot="actions"> | ||
| <div | ||
| class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line u-main-end"> | ||
| <Tooltip disabled={!isUpgrading}> | ||
| <div> | ||
| {#if !currentPlan.requiresPaymentMethod} | ||
| <Button | ||
| disabled={$organization?.markedForDeletion || isUpgrading} | ||
| href={getChangePlanUrl($organization?.$id)} | ||
| on:click={() => | ||
| trackEvent(Click.OrganizationClickUpgrade, { | ||
| from: 'button', | ||
| source: 'billing_tab' | ||
| })}> | ||
| Upgrade | ||
| </Button> | ||
| {:else if $organization?.billingPlanDowngrade !== null} | ||
| <Button | ||
| text | ||
| disabled={isUpgrading} | ||
| on:click={() => (showCancel = true)}> | ||
| Cancel change | ||
| </Button> | ||
|
Comment on lines
+186
to
+192
Contributor
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
# Check type definitions and usage of billingPlanDowngrade
echo "=== SDK type definition for billingPlanDowngrade ==="
rg -n 'billingPlanDowngrade' --type=ts -C3
echo ""
echo "=== Usage in Svelte files ==="
rg -n 'billingPlanDowngrade' --glob '*.svelte' -C3
echo ""
echo "=== Check in models/types files ==="
fd -e ts -e d.ts | xargs rg -l 'billingPlanDowngrade' | head -20Repository: appwrite/console Length of output: 6644 🏁 Script executed: #!/bin/bash
# Look for type definitions and models
echo "=== Search for organization type definition ==="
fd -e d.ts -e ts | xargs rg -l 'billingPlanDowngrade' | grep -E '(types|models|schema)' | head -20
echo ""
echo "=== Check store initialization ==="
rg -n 'organization.*=.*store' --type=ts -C2 | head -30
echo ""
echo "=== Look for organization model/interface definition ==="
rg -n 'interface.*Organization|type.*Organization' --type=ts -C3 | grep -A5 -B5 'billingPlan' | head -40
echo ""
echo "=== Check how organization store is populated ==="
rg -n 'billingPlanDowngrade' src -C5 | grep -E '^\s*(export|const|let|interface|type)' | head -20Repository: appwrite/console Length of output: 252 🏁 Script executed: #!/bin/bash
# Search for stores and organization definition
echo "=== Look for stores directory ==="
find . -name '*store*' -type f | grep -E '\.(ts|js)$' | head -20
echo ""
echo "=== Look for organization in lib files ==="
rg -n 'export.*organization' --type=ts src/lib | head -20
echo ""
echo "=== Check the actual SDK types from Appwrite ==="
rg -n 'Organization' --type=ts src | grep -E 'import|from.*appwrite' | head -20
echo ""
echo "=== Look at layout files to see how organization is passed ==="
rg -n 'organization' src/routes/\(console\)/layout.ts -C5 | head -50Repository: appwrite/console Length of output: 3966 🏁 Script executed: #!/bin/bash
# Read the organization store definition
echo "=== src/lib/stores/organization.ts ==="
cat -n src/lib/stores/organization.ts
echo ""
echo "=== src/routes/(console)/organization-[organization]/billing/store.ts ==="
cat -n src/routes/\(console\)/organization-\[organization\]/billing/store.ts
echo ""
echo "=== Check Models.Organization import ==="
rg -n 'Models\.Organization|from.*models|from.*appwrite' src/lib/stores/organization.ts src/lib/stores/billing.ts | head -20Repository: appwrite/console Length of output: 5232 🏁 Script executed: #!/bin/bash
# Check if other code uses strict !== null or loose checks for similar fields
echo "=== Check null checking patterns in billing files ==="
rg -n '!== null|== null' src/routes/\(console\)/organization-\[organization\]/billing/ --type=svelte | head -20
echo ""
echo "=== Check how billingPlanDowngrade is used after the check ==="
rg -n 'billingPlanDowngrade' src/routes/\(console\)/organization-\[organization\]/billing/planSummaryOld.svelte -A5 -B5
echo ""
echo "=== Look at how the field is accessed elsewhere ==="
rg -n 'billingPlanDowngrade' src/routes/\(console\)/organization-\[organization\]/billing/+page.svelte -A3 -B3Repository: appwrite/console Length of output: 1392 🏁 Script executed: #!/bin/bash
# Check how billingPlanDowngrade is checked in planSummary.svelte as well
echo "=== planSummary.svelte usage ==="
grep -n 'billingPlanDowngrade' src/routes/\(console\)/organization-\[organization\]/billing/planSummary.svelte | head -20
echo ""
echo "=== Check cancelDowngradeModal.svelte ==="
head -50 src/routes/\(console\)/organization-\[organization\]/billing/cancelDowngradeModal.svelte
echo ""
echo "=== Check if there's type definition or comments about billingPlanDowngrade ==="
rg -n 'billingPlanDowngrade' src -C2 | grep -E '(\/\/|\/\*|\*\/|type|interface|optional)' | head -20
echo ""
echo "=== Understand the ternary logic in +page.ts more closely ==="
sed -n '80,90p' src/routes/\(console\)/organization-\[organization\]/billing/+page.tsRepository: appwrite/console Length of output: 2433 Use loose equality The strict check Recommended fix- {:else if $organization?.billingPlanDowngrade !== null}
+ {:else if $organization?.billingPlanDowngrade != null}🤖 Prompt for AI Agents |
||
| {:else} | ||
| <Button | ||
| text | ||
| disabled={$organization?.markedForDeletion || isUpgrading} | ||
| href={getChangePlanUrl($organization?.$id)} | ||
| on:click={() => | ||
| trackEvent(Click.OrganizationClickUpgrade, { | ||
| from: 'button', | ||
| source: 'billing_tab' | ||
| })}> | ||
| Change plan | ||
| </Button> | ||
| {/if} | ||
| </div> | ||
| <svelte:fragment slot="tooltip"> | ||
| Your payment is still being processed, check with your payment provider. | ||
| </svelte:fragment> | ||
| </Tooltip> | ||
| {#if !currentPlan?.usagePerProject} | ||
| <Button | ||
| text={!currentPlan.requiresPaymentMethod} | ||
| secondary={currentPlan.requiresPaymentMethod} | ||
| href={`${base}/organization-${$organization?.$id}/usage`}> | ||
| View estimated usage | ||
| </Button> | ||
| {/if} | ||
| </div> | ||
| </svelte:fragment> | ||
| </CardGrid> | ||
| {/if} | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
instead of usual label in button, may be the label should also change to
Change in progressorPayment processingorUpgrade is progress?