bases de la billing page
This commit is contained in:
m5r
parent
0f2c3daf77
commit
d1b88078fb
18
app/settings/components/paddle-link.tsx
Normal file
18
app/settings/components/paddle-link.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import type { FunctionComponent, MouseEventHandler } from "react";
|
||||
import { HiExternalLink } from "react-icons/hi";
|
||||
|
||||
type Props = {
|
||||
onClick: MouseEventHandler<HTMLButtonElement>;
|
||||
text: string;
|
||||
};
|
||||
|
||||
const PaddleLink: FunctionComponent<Props> = ({ onClick, text }) => (
|
||||
<button className="flex space-x-2 items-center text-left" onClick={onClick}>
|
||||
<HiExternalLink className="w-6 h-6 flex-shrink-0" />
|
||||
<span className="transition-colors duration-150 border-b border-transparent hover:border-primary-500">
|
||||
{text}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
|
||||
export default PaddleLink;
|
||||
@ -19,7 +19,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<main>{children}</main>
|
||||
<main className="flex flex-col flex-grow">{children}</main>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
44
app/settings/hooks/use-paddle.ts
Normal file
44
app/settings/hooks/use-paddle.ts
Normal file
@ -0,0 +1,44 @@
|
||||
import { useEffect } from "react";
|
||||
import { useRouter, getConfig } from "blitz";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
Paddle: any;
|
||||
}
|
||||
}
|
||||
|
||||
const { publicRuntimeConfig } = getConfig();
|
||||
|
||||
const vendor = parseInt(publicRuntimeConfig.paddle.vendorId, 10);
|
||||
|
||||
export default function usePaddle({ eventCallback }: { eventCallback: (data: any) => void }) {
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (!window.Paddle) {
|
||||
const script = document.createElement("script");
|
||||
script.onload = () => {
|
||||
window.Paddle.Setup({
|
||||
vendor,
|
||||
eventCallback(data: any) {
|
||||
eventCallback(data);
|
||||
|
||||
if (data.event === "Checkout.Complete") {
|
||||
setTimeout(() => router.reload(), 1000);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
script.src = "https://cdn.paddle.com/paddle/paddle.js";
|
||||
|
||||
document.head.appendChild(script);
|
||||
return;
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (typeof window === "undefined") {
|
||||
return { Paddle: null };
|
||||
}
|
||||
|
||||
return { Paddle: window.Paddle };
|
||||
}
|
||||
96
app/settings/hooks/use-subscription.ts
Normal file
96
app/settings/hooks/use-subscription.ts
Normal file
@ -0,0 +1,96 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useQuery, useMutation, useRouter, useSession } from "blitz";
|
||||
|
||||
import getSubscription from "../queries/get-subscription";
|
||||
import usePaddle from "./use-paddle";
|
||||
import useCurrentUser from "../../core/hooks/use-current-user";
|
||||
import updateSubscription from "../mutations/update-subscription";
|
||||
|
||||
export default function useSubscription() {
|
||||
const session = useSession();
|
||||
const { user } = useCurrentUser();
|
||||
const [subscription] = useQuery(getSubscription, null, { enabled: Boolean(session.orgId) });
|
||||
const [updateSubscriptionMutation] = useMutation(updateSubscription);
|
||||
|
||||
const router = useRouter();
|
||||
const resolve = useRef<() => void>();
|
||||
const promise = useRef<Promise<void>>();
|
||||
|
||||
const { Paddle } = usePaddle({
|
||||
eventCallback(data) {
|
||||
if (["Checkout.Close", "Checkout.Complete"].includes(data.event)) {
|
||||
resolve.current!();
|
||||
promise.current = new Promise((r) => (resolve.current = r));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
promise.current = new Promise((r) => (resolve.current = r));
|
||||
}, []);
|
||||
|
||||
type BuyParams = {
|
||||
planId: string;
|
||||
coupon?: string;
|
||||
};
|
||||
|
||||
async function subscribe(params: BuyParams) {
|
||||
if (!user || !session.orgId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { planId, coupon } = params;
|
||||
const checkoutOpenParams = {
|
||||
email: user.email,
|
||||
product: planId,
|
||||
allowQuantity: false,
|
||||
passthrough: JSON.stringify({ orgId: session.orgId }),
|
||||
coupon: "",
|
||||
};
|
||||
|
||||
if (coupon) {
|
||||
checkoutOpenParams.coupon = coupon;
|
||||
}
|
||||
|
||||
Paddle.Checkout.open(checkoutOpenParams);
|
||||
|
||||
return promise.current;
|
||||
}
|
||||
|
||||
async function updatePaymentMethod({ updateUrl }: { updateUrl: string }) {
|
||||
const checkoutOpenParams = { override: updateUrl };
|
||||
|
||||
Paddle.Checkout.open(checkoutOpenParams);
|
||||
|
||||
return promise.current;
|
||||
}
|
||||
|
||||
async function cancelSubscription({ cancelUrl }: { cancelUrl: string }) {
|
||||
const checkoutOpenParams = { override: cancelUrl };
|
||||
|
||||
Paddle.Checkout.open(checkoutOpenParams);
|
||||
|
||||
return promise.current;
|
||||
}
|
||||
|
||||
type ChangePlanParams = {
|
||||
planId: string;
|
||||
};
|
||||
|
||||
async function changePlan({ planId }: ChangePlanParams) {
|
||||
try {
|
||||
await updateSubscriptionMutation({ planId });
|
||||
router.reload();
|
||||
} catch (error) {
|
||||
console.log("error", error);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
subscription,
|
||||
subscribe,
|
||||
updatePaymentMethod,
|
||||
cancelSubscription,
|
||||
changePlan,
|
||||
};
|
||||
}
|
||||
@ -1,135 +1,69 @@
|
||||
/* TODO
|
||||
import type { FunctionComponent, MouseEventHandler } from "react";
|
||||
import type { BlitzPage } from "blitz";
|
||||
|
||||
import SettingsLayout from "../../components/settings/settings-layout";
|
||||
import SettingsSection from "../../components/settings/settings-section";
|
||||
import BillingPlans from "../../components/billing/billing-plans";
|
||||
import Divider from "../../components/divider";
|
||||
import { GetServerSideProps, Routes } from "blitz";
|
||||
|
||||
import useSubscription from "../../hooks/use-subscription";
|
||||
|
||||
import { withPageOnboardingRequired } from "../../../lib/session-helpers";
|
||||
import type { Subscription } from "../../database/subscriptions";
|
||||
import { findUserSubscription } from "../../database/subscriptions";
|
||||
|
||||
import appLogger from "../../../lib/logger";
|
||||
import ConnectedLayout from "../../components/connected-layout";
|
||||
import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
|
||||
import SettingsLayout from "../../components/settings-layout";
|
||||
import appLogger from "../../../../integrations/logger";
|
||||
import PaddleLink from "../../components/paddle-link";
|
||||
import SettingsSection from "../../components/settings-section";
|
||||
import Divider from "../../components/divider";
|
||||
|
||||
const logger = appLogger.child({ page: "/account/settings/billing" });
|
||||
|
||||
type Props = {
|
||||
subscription: Subscription | null;
|
||||
};
|
||||
|
||||
const Billing: BlitzPage<Props> = ({ subscription }) => {
|
||||
/!*
|
||||
const Billing: BlitzPage = () => {
|
||||
/*
|
||||
TODO: I want to be able to
|
||||
- renew subscription (after pause/cancel for example) (message like "your subscription expired, would you like to renew ?")
|
||||
- know when is the last time I paid and for how much
|
||||
- know when is the next time I will pay and for how much
|
||||
*!/
|
||||
const { cancelSubscription, updatePaymentMethod } = useSubscription();
|
||||
- renew subscription (after pause/cancel for example) (message like "your subscription expired, would you like to renew ?")
|
||||
- know when is the last time I paid and for how much
|
||||
- know when is the next time I will pay and for how much
|
||||
*/
|
||||
|
||||
useRequireOnboarding();
|
||||
const { subscription, cancelSubscription, updatePaymentMethod } = useSubscription();
|
||||
console.log("subscription", subscription);
|
||||
|
||||
if (!subscription) {
|
||||
return <SettingsSection title="Plan">{/*<BillingPlans />*/}</SettingsSection>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ConnectedLayout>
|
||||
<SettingsLayout>
|
||||
<div className="flex flex-col space-y-6 p-6">
|
||||
{subscription ? (
|
||||
<>
|
||||
<SettingsSection title="Payment method">
|
||||
<PaddleLink
|
||||
onClick={() =>
|
||||
updatePaymentMethod({
|
||||
updateUrl: subscription.updateUrl,
|
||||
})
|
||||
}
|
||||
text="Update payment method on Paddle"
|
||||
/>
|
||||
</SettingsSection>
|
||||
<>
|
||||
<SettingsSection title="Payment method">
|
||||
<PaddleLink
|
||||
onClick={() => updatePaymentMethod({ updateUrl: subscription.updateUrl })}
|
||||
text="Update payment method on Paddle"
|
||||
/>
|
||||
</SettingsSection>
|
||||
|
||||
<div className="hidden lg:block">
|
||||
<Divider />
|
||||
</div>
|
||||
<div className="hidden lg:block">
|
||||
<Divider />
|
||||
</div>
|
||||
|
||||
<SettingsSection title="Plan">
|
||||
<BillingPlans activePlanId={subscription?.planId} />
|
||||
</SettingsSection>
|
||||
<SettingsSection title="Plan">
|
||||
{/*<BillingPlans activePlanId={subscription.paddlePlanId} />*/}
|
||||
</SettingsSection>
|
||||
|
||||
<div className="hidden lg:block">
|
||||
<Divider />
|
||||
</div>
|
||||
<div className="hidden lg:block">
|
||||
<Divider />
|
||||
</div>
|
||||
|
||||
<SettingsSection title="Cancel subscription">
|
||||
<PaddleLink
|
||||
onClick={() =>
|
||||
cancelSubscription({
|
||||
cancelUrl: subscription.cancelUrl,
|
||||
})
|
||||
}
|
||||
text="Cancel subscription on Paddle"
|
||||
/>
|
||||
</SettingsSection>
|
||||
</>
|
||||
) : (
|
||||
<SettingsSection title="Plan">
|
||||
<BillingPlans />
|
||||
</SettingsSection>
|
||||
)}
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
</ConnectedLayout>
|
||||
<SettingsSection title="Cancel subscription">
|
||||
<PaddleLink
|
||||
onClick={() => cancelSubscription({ cancelUrl: subscription.cancelUrl })}
|
||||
text="Cancel subscription on Paddle"
|
||||
/>
|
||||
</SettingsSection>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Billing;
|
||||
|
||||
type PaddleLinkProps = {
|
||||
onClick: MouseEventHandler<HTMLButtonElement>;
|
||||
text: string;
|
||||
};
|
||||
|
||||
const PaddleLink: FunctionComponent<PaddleLinkProps> = ({ onClick, text }) => (
|
||||
<button className="flex space-x-2 items-center text-left" onClick={onClick}>
|
||||
<ExternalLinkIcon className="w-6 h-6 flex-shrink-0" />
|
||||
<span className="transition-colors duration-150 border-b border-transparent hover:border-primary-500">
|
||||
{text}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
|
||||
export const getServerSideProps = withPageOnboardingRequired<Props>(
|
||||
async (context, user) => {
|
||||
// const subscription = await findUserSubscription({ userId: user.id });
|
||||
|
||||
return {
|
||||
props: { subscription: null },
|
||||
};
|
||||
},
|
||||
);
|
||||
*/
|
||||
|
||||
import type { BlitzPage } from "blitz";
|
||||
import { Routes } from "blitz";
|
||||
import { useRouter } from "blitz";
|
||||
import { useEffect } from "react";
|
||||
|
||||
import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
|
||||
import SettingsLayout from "../../components/settings-layout";
|
||||
|
||||
const Billing: BlitzPage = () => {
|
||||
useRequireOnboarding();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
router.push("/messages");
|
||||
});
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
Billing.getLayout = (page) => <SettingsLayout>{page}</SettingsLayout>;
|
||||
|
||||
Billing.authenticate = { redirectTo: Routes.SignIn() };
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
|
||||
return { props: {} };
|
||||
};
|
||||
|
||||
export default Billing;
|
||||
|
||||
9
app/settings/queries/get-subscription.ts
Normal file
9
app/settings/queries/get-subscription.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import type { Ctx } from "blitz";
|
||||
|
||||
import db from "db";
|
||||
|
||||
export default async function getCurrentUser(_ = null, { session }: Ctx) {
|
||||
if (!session.orgId) return null;
|
||||
|
||||
return db.subscription.findFirst({ where: { organizationId: session.orgId } });
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import { Ctx } from "blitz";
|
||||
import type { Ctx } from "blitz";
|
||||
|
||||
import db from "db";
|
||||
|
||||
|
||||
@ -83,6 +83,9 @@ const { SENTRY_DSN, SENTRY_ORG, SENTRY_PROJECT, SENTRY_AUTH_TOKEN, NODE_ENV, GIT
|
||||
panelBear: {
|
||||
siteId: process.env.PANELBEAR_SITE_ID,
|
||||
},
|
||||
paddle: {
|
||||
vendorId: process.env.PADDLE_VENDOR_ID,
|
||||
},
|
||||
},
|
||||
// @ts-ignore
|
||||
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user