Skip to content

Add plan cancellation and re-subscription functionality #6826

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
merged 1 commit into from
Apr 23, 2025
Merged

Add plan cancellation and re-subscription functionality #6826

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
77 changes: 77 additions & 0 deletions apps/dashboard/src/@/actions/billing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,83 @@ export async function getBillingCheckoutUrl(

export type GetBillingCheckoutUrlAction = typeof getBillingCheckoutUrl;

export async function getPlanCancelUrl(options: {
teamId: string;
redirectUrl: string;
}): Promise<{ status: number; url?: string }> {
const token = await getAuthToken();
if (!token) {
return {
status: 401,
};
}

const res = await fetch(
`${API_SERVER_URL}/v1/teams/${options.teamId}/checkout/cancel-plan-link`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
redirectTo: options.redirectUrl,
}),
},
);

if (!res.ok) {
return {
status: res.status,
};
}

const json = await res.json();

if (!json.result) {
return {
status: 500,
};
}

return {
status: 200,
url: json.result as string,
};
}

export async function reSubscribePlan(options: {
teamId: string;
}): Promise<{ status: number }> {
const token = await getAuthToken();
if (!token) {
return {
status: 401,
};
}

const res = await fetch(
`${API_SERVER_URL}/v1/teams/${options.teamId}/checkout/resubscribe-plan`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({}),
},
);

if (!res.ok) {
return {
status: res.status,
};
}

return {
status: 200,
};
}
export type GetBillingPortalUrlOptions = {
teamSlug: string | undefined;
redirectUrl: string;
Expand Down
19 changes: 16 additions & 3 deletions apps/dashboard/src/@/components/blocks/pricing-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { CheckIcon, CircleDollarSignIcon } from "lucide-react";
import Link from "next/link";
import type React from "react";
import { TEAM_PLANS } from "utils/pricing";
import { RenewSubscriptionButton } from "../../../components/settings/Account/Billing/renew-subscription/renew-subscription-button";
import { useTrack } from "../../../hooks/analytics/useTrack";
import { remainingDays } from "../../../utils/date-utils";
import type { GetBillingCheckoutUrlAction } from "../../actions/billing";
Expand All @@ -16,20 +17,27 @@ import { CheckoutButton } from "../billing";

type PricingCardCta = {
hint?: string;
title: string;

onClick?: () => void;
} & (
| {
type: "link";
href: string;
label: string;
}
| {
type: "checkout";
label: string;
}
| {
type: "renew";
}
);

type PricingCardProps = {
getTeam: () => Promise<Team>;
teamSlug: string;
teamId: string;
billingStatus: Team["billingStatus"];
billingPlan: keyof typeof TEAM_PLANS;
cta?: PricingCardCta;
Expand All @@ -41,7 +49,9 @@ type PricingCardProps = {
};

export const PricingCard: React.FC<PricingCardProps> = ({
getTeam,
teamSlug,
teamId,
billingStatus,
billingPlan,
cta,
Expand Down Expand Up @@ -131,6 +141,9 @@ export const PricingCard: React.FC<PricingCardProps> = ({

{cta && (
<div className="flex flex-col gap-3">
{cta.type === "renew" && (
<RenewSubscriptionButton teamId={teamId} getTeam={getTeam} />
)}
{billingPlanToSkuMap[billingPlan] && cta.type === "checkout" && (
<CheckoutButton
billingStatus={billingStatus}
Expand All @@ -143,7 +156,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
sku={billingPlanToSkuMap[billingPlan]}
getBillingCheckoutUrl={getBillingCheckoutUrl}
>
{cta.title}
{cta.label}
</CheckoutButton>
)}

Expand All @@ -154,7 +167,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
asChild
>
<Link href={cta.href} target="_blank" onClick={handleCTAClick}>
{cta.title}
{cta.label}
</Link>
</Button>
)}
Expand Down
20 changes: 16 additions & 4 deletions apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/InviteTeamMembers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,8 @@ export function InviteTeamMembersUI(props: {
teamSlug={props.team.slug}
getBillingCheckoutUrl={props.getBillingCheckoutUrl}
trackEvent={props.trackEvent}
getTeam={props.getTeam}
teamId={props.team.id}
/>
</SheetContent>
</Sheet>
Expand Down Expand Up @@ -148,6 +150,8 @@ function InviteModalContent(props: {
billingStatus: Team["billingStatus"];
getBillingCheckoutUrl: GetBillingCheckoutUrlAction;
trackEvent: (params: TrackingParams) => void;
getTeam: () => Promise<Team>;
teamId: string;
}) {
const [planToShow, setPlanToShow] = useState<
"starter" | "growth" | "accelerate" | "scale"
Expand All @@ -159,7 +163,7 @@ function InviteModalContent(props: {
billingStatus={props.billingStatus}
teamSlug={props.teamSlug}
cta={{
title: "Get Started",
label: "Get Started",
type: "checkout",
onClick() {
props.trackEvent({
Expand All @@ -171,6 +175,8 @@ function InviteModalContent(props: {
},
}}
getBillingCheckoutUrl={props.getBillingCheckoutUrl}
getTeam={props.getTeam}
teamId={props.teamId}
/>
);

Expand All @@ -180,7 +186,7 @@ function InviteModalContent(props: {
billingStatus={props.billingStatus}
teamSlug={props.teamSlug}
cta={{
title: "Get Started",
label: "Get Started",
type: "checkout",
onClick() {
props.trackEvent({
Expand All @@ -193,6 +199,8 @@ function InviteModalContent(props: {
}}
highlighted
getBillingCheckoutUrl={props.getBillingCheckoutUrl}
getTeam={props.getTeam}
teamId={props.teamId}
/>
);

Expand All @@ -202,7 +210,7 @@ function InviteModalContent(props: {
billingStatus={props.billingStatus}
teamSlug={props.teamSlug}
cta={{
title: "Get started",
label: "Get started",
type: "checkout",
onClick() {
props.trackEvent({
Expand All @@ -214,6 +222,8 @@ function InviteModalContent(props: {
},
}}
getBillingCheckoutUrl={props.getBillingCheckoutUrl}
getTeam={props.getTeam}
teamId={props.teamId}
/>
);

Expand All @@ -223,7 +233,7 @@ function InviteModalContent(props: {
billingStatus={props.billingStatus}
teamSlug={props.teamSlug}
cta={{
title: "Get started",
label: "Get started",
type: "checkout",
onClick() {
props.trackEvent({
Expand All @@ -235,6 +245,8 @@ function InviteModalContent(props: {
},
}}
getBillingCheckoutUrl={props.getBillingCheckoutUrl}
getTeam={props.getTeam}
teamId={props.teamId}
/>
);

Expand Down
19 changes: 0 additions & 19 deletions ...c/app/(app)/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,25 +30,6 @@ export function PlanInfoCardClient(props: {

return res.data.result;
}}
cancelPlan={async (params) => {
const res = await apiServerProxy<{
data: {
result: "success";
};
}>({
pathname: `/v1/teams/${props.team.id}/checkout/cancel-plan`,
headers: {
"Content-Type": "application/json",
},
method: "PUT",
body: JSON.stringify(params),
});

if (!res.ok) {
console.error(res.error);
throw new Error(res.error);
}
}}
/>
);
}
22 changes: 13 additions & 9 deletions .../app/(app)/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,11 +115,6 @@ function Story(props: {
url: "https://example.com",
});

const cancelPlanStub = async () => {
await new Promise((resolve) => setTimeout(resolve, 1000));
return;
};

const teamTeamStub = async () =>
({
...team,
Expand All @@ -134,7 +129,19 @@ function Story(props: {
subscriptions={zeroUsageOnDemandSubs}
getBillingPortalUrl={getBillingPortalUrlStub}
getBillingCheckoutUrl={getBillingCheckoutUrlStub}
cancelPlan={cancelPlanStub}
getTeam={teamTeamStub}
/>
</BadgeContainer>

<BadgeContainer label="Scheduled to cancel in 10 days">
<PlanInfoCardUI
team={{
...team,
planCancellationDate: addDays(new Date(), 10).toISOString(),
}}
subscriptions={zeroUsageOnDemandSubs}
getBillingPortalUrl={getBillingPortalUrlStub}
getBillingCheckoutUrl={getBillingCheckoutUrlStub}
getTeam={teamTeamStub}
/>
</BadgeContainer>
Expand All @@ -145,7 +152,6 @@ function Story(props: {
subscriptions={trialPlanZeroUsageOnDemandSubs}
getBillingPortalUrl={getBillingPortalUrlStub}
getBillingCheckoutUrl={getBillingCheckoutUrlStub}
cancelPlan={cancelPlanStub}
getTeam={teamTeamStub}
/>
</BadgeContainer>
Expand All @@ -156,7 +162,6 @@ function Story(props: {
subscriptions={subsWith1Usage}
getBillingPortalUrl={getBillingPortalUrlStub}
getBillingCheckoutUrl={getBillingCheckoutUrlStub}
cancelPlan={cancelPlanStub}
getTeam={teamTeamStub}
/>
</BadgeContainer>
Expand All @@ -167,7 +172,6 @@ function Story(props: {
subscriptions={subsWith4Usage}
getBillingPortalUrl={getBillingPortalUrlStub}
getBillingCheckoutUrl={getBillingCheckoutUrlStub}
cancelPlan={cancelPlanStub}
getTeam={teamTeamStub}
/>
</BadgeContainer>
Expand Down
Loading
Loading