confirm plan switch with a modal

app/core/hooks/use-subscription.ts

@@ -93,12 +93,9 @@ export default function useSubscription({ initialData }: Params = {}) {
 	};
 
 	async function changePlan({ planId }: ChangePlanParams) {
-		if (planId === -1) {
-			return cancelSubscription({ cancelUrl: subscription!.cancelUrl });
-		}
-
 		try {
 			await updateSubscriptionMutation({ planId });
+			setIsWaitingForSubChange(true);
 		} catch (error) {
 			console.log("error", error);
 		}

app/settings/components/billing/plans.tsx

@@ -1,14 +1,21 @@
+import { useState } from "react";
 import * as Panelbear from "@panelbear/panelbear-js";
 import clsx from "clsx";
 
 import type { Subscription } from "db";
 import { SubscriptionStatus } from "db";
 import useSubscription from "app/core/hooks/use-subscription";
+import SwitchPlanModal from "./switch-plan-modal";
+
+export type Plan = typeof pricing["tiers"][number];
 
 export default function Plans() {
 	const { hasActiveSubscription, subscription, subscribe, changePlan } = useSubscription();
+	const [nextPlan, setNextPlan] = useState<Plan | null>(null);
+	const [isSwitchPlanModalOpen, setIsSwitchPlanModalOpen] = useState(false);
 
 	return (
+		<>
 			<div className="mt-6 flex flex-row flex-wrap gap-2">
 				{pricing.tiers.map((tier) => {
 					const isCurrentTier = subscription?.paddlePlanId === tier.planId;
@@ -43,10 +50,10 @@ export default function Plans() {
 								disabled={isActiveTier}
 								onClick={() => {
 									if (hasActiveSubscription) {
-									changePlan({ planId: tier.planId });
-									Panelbear.track(`Subscribe to ${tier.title}`);
+										setNextPlan(tier);
+										setIsSwitchPlanModalOpen(true);
 									} else {
-									subscribe({ planId: tier.planId, coupon: "groot429" });
+										subscribe({ planId: tier.planId });
 										Panelbear.track(`Subscribe to ${tier.title}`);
 									}
 								}}
@@ -63,6 +70,18 @@ export default function Plans() {
 					);
 				})}
 			</div>
+
+			<SwitchPlanModal
+				isOpen={isSwitchPlanModalOpen}
+				nextPlan={nextPlan}
+				confirm={(nextPlan: Plan) => {
+					changePlan({ planId: nextPlan.planId });
+					Panelbear.track(`Subscribe to ${nextPlan.title}`);
+					setIsSwitchPlanModalOpen(false);
+				}}
+				closeModal={() => setIsSwitchPlanModalOpen(false)}
+			/>
+		</>
 	);
 }
 

app/settings/components/billing/switch-plan-modal.tsx

@@ -0,0 +1,52 @@
+import type { FunctionComponent } from "react";
+import { useRef } from "react";
+
+import Modal, { ModalTitle } from "app/core/components/modal";
+import type { Plan } from "./plans";
+
+type Props = {
+	isOpen: boolean;
+	nextPlan: Plan | null;
+	confirm: (nextPlan: Plan) => void;
+	closeModal: () => void;
+};
+
+const SwitchPlanModal: FunctionComponent<Props> = ({ isOpen, nextPlan, confirm, closeModal }) => {
+	const confirmButtonRef = useRef<HTMLButtonElement>(null);
+
+	return (
+		<Modal initialFocus={confirmButtonRef} isOpen={isOpen} onClose={closeModal}>
+			<div className="md:flex md:items-start">
+				<div className="mt-3 text-center md:mt-0 md:ml-4 md:text-left">
+					<ModalTitle>Are you sure you want to switch to {nextPlan?.title}?</ModalTitle>
+					<div className="mt-2 text-gray-500">
+						<p>
+							You&#39;re about to switch to the <strong>{nextPlan?.title}</strong> plan. You will be
+							billed immediately a prorated amount and the next billing date will be recalculated from
+							today.
+						</p>
+					</div>
+				</div>
+			</div>
+			<div className="mt-5 md:mt-4 md:flex md:flex-row-reverse">
+				<button
+					ref={confirmButtonRef}
+					type="button"
+					className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-primary-500 font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 md:mt-0 md:w-auto"
+					onClick={() => confirm(nextPlan!)}
+				>
+					Yes, I&#39;m sure
+				</button>
+				<button
+					type="button"
+					className="md:mr-2 mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 md:mt-0 md:w-auto"
+					onClick={closeModal}
+				>
+					Nope, cancel it
+				</button>
+			</div>
+		</Modal>
+	);
+};
+
+export default SwitchPlanModal;

app/settings/pages/settings/billing.tsx

@@ -20,12 +20,6 @@ type Props = {
 };
 
 const Billing: BlitzPage<Props> = (props) => {
-	/*
-	TODO: I want to be able to
-		- upgrade to yearly
-		- downgrade to monthly
-	*/
-
 	const { count: paymentsCount } = usePaymentsHistory();
 	const { subscription, cancelSubscription, updatePaymentMethod } = useSubscription({
 		initialData: props.subscription,
@@ -37,8 +31,8 @@ const Billing: BlitzPage<Props> = (props) => {
 				<SettingsSection>
 					{subscription.status === SubscriptionStatus.deleted ? (
 						<p>
-							Your {subscription.paddlePlanId} subscription is cancelled and will expire on{" "}
-							{subscription.cancellationEffectiveDate!.toLocaleDateString()}.
+							Your {plansName[subscription.paddlePlanId]?.toLowerCase()} subscription is cancelled and
+							will expire on {subscription.cancellationEffectiveDate!.toLocaleDateString()}.
 						</p>
 					) : (
 						<>
@@ -72,6 +66,11 @@ const Billing: BlitzPage<Props> = (props) => {
 	);
 };
 
+const plansName: Record<number, string> = {
+	727544: "Yearly",
+	727540: "Monthly",
+};
+
 Billing.getLayout = (page) => <SettingsLayout>{page}</SettingsLayout>;
 
 export const getServerSideProps: GetServerSideProps<Props> = async ({ req, res }) => {

integrations/paddle.ts

@@ -93,12 +93,14 @@ export async function updateSubscriptionPlan({
 	productId,
 	shouldProrate = true,
 	shouldKeepModifiers = true,
+	shouldMakeImmediatePayment = true,
 }: PaddleSdkUpdateSubscriptionRequest<Metadata>) {
 	return paddleSdk.updateSubscription({
 		subscriptionId,
 		productId,
 		shouldProrate,
 		shouldKeepModifiers,
+		shouldMakeImmediatePayment,
 	});
 }