Skip to content

Fix: change-plan from account route #1777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
stnguyen90 merged 3 commits into from
Apr 29, 2025
Merged

Fix: change-plan from account route #1777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3f60b98
fix: change-plan from account.
ItzNotABug Apr 3, 2025
a29036a
fix: type.
ItzNotABug Apr 3, 2025
31d2785
address comment.
ItzNotABug Apr 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 17 additions & 5 deletions src/lib/components/support.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,29 @@
import { isSupportOnline, showSupportModal } from '$routes/(console)/wizard/support/store';
import { trackEvent } from '$lib/actions/analytics';
import { localeShortTimezoneName, utcHourToLocaleHour } from '$lib/helpers/date';
import { upgradeURL } from '$lib/stores/billing';
import { plansInfo } from '$lib/stores/billing';
import { Card } from '$lib/components/index';
import { app } from '$lib/stores/app';
import { currentPlan } from '$lib/stores/organization';
import { currentPlan, type Organization, organizationList } from '$lib/stores/organization';
import { isCloud } from '$lib/system';
import { base } from '$app/paths';
export let show = false;
export let showHeader = true;
$: hasPremiumSupport = $currentPlan?.premiumSupport ?? false;
$: hasPremiumSupport = $currentPlan?.premiumSupport ?? allOrgsHavePremiumSupport ?? false;
$: allOrgsHavePremiumSupport = $organizationList.teams.every(
(team) => $plansInfo.get((team as Organization).billingPlan)?.premiumSupport
);
// there can only be one free organization
$: freeOrganization = $organizationList.teams.find(
(team) => !$plansInfo.get((team as Organization).billingPlan)?.premiumSupport
);
$: upgradeURL = `${base}/organization-${freeOrganization.$id}/change-plan`;
$: supportTimings = `${utcHourToLocaleHour('16:00')} - ${utcHourToLocaleHour('00:00')} ${localeShortTimezoneName()}`;
Expand Down Expand Up @@ -54,7 +66,7 @@
}
];
const showCloudSupport = (index) => {
const showCloudSupport = (index: number) => {
return (index === 0 && isCloud) || index > 0;
};
</script>
Expand Down Expand Up @@ -82,7 +94,7 @@
<div class="u-flex u-gap-12 u-cross-center">
{#if !hasPremiumSupport}
<Button
href={$upgradeURL}
href={upgradeURL}
on:click={() => {
trackEvent('click_organization_upgrade', {
from: 'button',
Expand Down
43 changes: 24 additions & 19 deletions src/routes/(console)/organization-[organization]/change-plan/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,13 @@
WizardSecondaryFooter
} from '$lib/layout';
import { type Coupon, type PaymentList } from '$lib/sdk/billing';
import { isOrganization, plansInfo, tierToPlan, type Tier } from '$lib/stores/billing';
import { isOrganization, plansInfo, type Tier, tierToPlan } from '$lib/stores/billing';
import { addNotification } from '$lib/stores/notifications';
import {
currentPlan,
organization,
organizationList,
type Organization
type Organization,
organizationList
} from '$lib/stores/organization';
import { sdk } from '$lib/stores/sdk';
import { confirmPayment } from '$lib/stores/stripe';
Expand Down Expand Up @@ -83,8 +83,7 @@
if ($page.url.searchParams.has('code')) {
const coupon = $page.url.searchParams.get('code');
try {
const response = await sdk.forConsole.billing.getCouponAccount(coupon);
couponData = response;
couponData = await sdk.forConsole.billing.getCouponAccount(coupon);
} catch (e) {
couponData = {
code: null,
Expand Down Expand Up @@ -137,7 +136,7 @@
async function downgrade() {
try {
await sdk.forConsole.billing.updatePlan(
$organization.$id,
selectedOrg.$id,
billingPlan,
paymentMethodId,
null
Expand All @@ -155,7 +154,7 @@
reason: feedbackDowngradeOptions.find(
(option) => option.value === feedbackDowngradeReason
)?.label,
orgId: $organization.$id,
orgId: selectedOrg.$id,
userId: $user.$id,
message: feedbackMessage ?? ''
})
Expand All @@ -168,7 +167,7 @@
type: 'success',
isHtml: true,
message: `
<b>${$organization.name}</b> plan has been successfully updated.`
<b>${selectedOrg.name}</b> plan has been successfully updated.`
});
trackEvent(Submit.OrganizationDowngrade, {
Expand Down Expand Up @@ -211,7 +210,7 @@
async function upgrade() {
try {
//Add collaborators
// Add collaborators
let newCollaborators = [];
if (collaborators?.length) {
newCollaborators = collaborators.filter(
Expand All @@ -220,7 +219,7 @@
);
}
const org = await sdk.forConsole.billing.updatePlan(
$organization.$id,
selectedOrg.$id,
billingPlan,
paymentMethodId,
null,
Expand Down Expand Up @@ -274,9 +273,15 @@
}
}
$: isSamePlan = billingPlan === $currentPlan.$id;
$: isUpgrade = isSamePlan ? false : $plansInfo.get(billingPlan)?.order > $currentPlan.order;
$: isDowngrade = isSamePlan ? false : $plansInfo.get(billingPlan)?.order < $currentPlan.order;
$: selectedOrg =
$organization ??
($organizationList.teams.find(
(team) => team.$id === $page.params.organization
) as Organization);
$: currentOrgPlan = $currentPlan ?? $plansInfo.get(selectedOrg?.billingPlan);
$: isSamePlan = billingPlan === currentOrgPlan.$id;
$: isUpgrade = isSamePlan ? false : $plansInfo.get(billingPlan)?.order > currentOrgPlan.order;
$: isDowngrade = isSamePlan ? false : $plansInfo.get(billingPlan)?.order < currentOrgPlan.order;
$: if (billingPlan !== BillingPlan.FREE) {
loadPaymentMethods();
}
Expand Down Expand Up @@ -313,10 +318,10 @@
<Alert type="warning" class="u-margin-block-start-24">
<svelte:fragment slot="title">
Your organization will switch to {tierToPlan(billingPlan).name} plan on {toLocaleDate(
$organization.billingNextInvoiceDate
selectedOrg.billingNextInvoiceDate
)}.
</svelte:fragment>
You will retain access to {tierToPlan($organization.billingPlan).name} plan features
You will retain access to {tierToPlan(selectedOrg.billingPlan).name} plan features
until your billing period ends. {#if extraMembers > 0}After that,
<b
>you will be charged {formatCurrency(
Expand All @@ -328,7 +333,7 @@
{/if}
{/if}
<!-- Show email input if upgrading from free plan -->
{#if billingPlan !== BillingPlan.FREE && $organization.billingPlan !== billingPlan && $organization.billingPlan !== BillingPlan.CUSTOM && isUpgrade}
{#if billingPlan !== BillingPlan.FREE && selectedOrg.billingPlan !== billingPlan && selectedOrg.billingPlan !== BillingPlan.CUSTOM && isUpgrade}
<FormList class="u-margin-block-start-16">
<InputTags
bind:tags={collaborators}
Expand Down Expand Up @@ -369,14 +374,14 @@
{/if}
</Form>
<svelte:fragment slot="aside">
{#if billingPlan !== BillingPlan.FREE && $organization.billingPlan !== billingPlan && $organization.billingPlan !== BillingPlan.CUSTOM && isUpgrade}
{#if billingPlan !== BillingPlan.FREE && selectedOrg.billingPlan !== billingPlan && selectedOrg.billingPlan !== BillingPlan.CUSTOM && isUpgrade}
<EstimatedTotal
bind:billingBudget
bind:couponData
organizationId={$organization.$id}
organizationId={selectedOrg.$id}
{billingPlan}
{collaborators} />
{:else if $organization.billingPlan !== BillingPlan.CUSTOM}
{:else if selectedOrg.billingPlan !== BillingPlan.CUSTOM}
<PlanComparisonBox downgrade={isDowngrade} />
{/if}
</svelte:fragment>
Expand Down