admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

improve stripe user experience

Browse source
This commit is contained in:
MarconLP 2023-07-13 00:24:10 +02:00
parent 8190036885
commit 66ecab957b
No known key found for this signature in database
GPG key ID: A08A9C8B623F5EA5
3 changed files with 103 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Paywall.tsx
View file

@ -26,9 +26,13 @@ export default function Paywall() {
} }
const handleCheckout = async () => { const handleCheckout = async () => {
const { checkoutUrl } = await createCheckoutSession({ billedAnnually }); const { checkoutUrl } = await createCheckoutSession({
billedAnnually,
recordModalOpen,
});
if (checkoutUrl) { if (checkoutUrl) {
if (recordModalOpen) { if (recordModalOpen) {
setOpen(false);
window.open(checkoutUrl, "_blank", "noreferrer,width=500,height=500"); window.open(checkoutUrl, "_blank", "noreferrer,width=500,height=500");
} else { } else {
void router.push(checkoutUrl); void router.push(checkoutUrl);

47
src/pages/videos.tsx
View file

@ -17,6 +17,8 @@ import Paywall from "~/components/Paywall";
import paywallAtom from "~/atoms/paywallAtom"; import paywallAtom from "~/atoms/paywallAtom";
import { usePostHog } from "posthog-js/react"; import { usePostHog } from "posthog-js/react";
import Image from "next/image"; import Image from "next/image";
import { useSearchParams } from "next/navigation";
import { useEffect } from "react";
const VideoList: NextPage = () => { const VideoList: NextPage = () => {
const [, setRecordOpen] = useAtom(recordVideoModalOpen); const [, setRecordOpen] = useAtom(recordVideoModalOpen);
@ -26,11 +28,15 @@ const VideoList: NextPage = () => {
const { status, data: session } = useSession(); const { status, data: session } = useSession();
const { data: videos, isLoading } = api.video.getAll.useQuery(); const { data: videos, isLoading } = api.video.getAll.useQuery();
const posthog = usePostHog(); const posthog = usePostHog();
const searchParams = useSearchParams();
if (status === "unauthenticated") { if (status === "unauthenticated") {
void router.replace("/sign-in"); void router.replace("/sign-in");
} }
const checkoutCanceledQueryParam = searchParams.get("checkoutCanceled");
const closeQueryParam = searchParams.get("close");
const openRecordModal = () => { const openRecordModal = () => {
if ( if (
!navigator?.mediaDevices?.getDisplayMedia && !navigator?.mediaDevices?.getDisplayMedia &&
@ -64,6 +70,20 @@ const VideoList: NextPage = () => {
} }
}; };
const closeWindow =
(typeof window !== "undefined" &&
window.innerWidth === 500 &&
window.innerHeight === 499) ||
closeQueryParam === "true";
useEffect(() => {
if (checkoutCanceledQueryParam === "false" && closeQueryParam === "false") {
setTimeout(() => {
void router.push("/videos").then(() => router.reload());
}, 5000);
}
}, [checkoutCanceledQueryParam, closeQueryParam]);
return ( return (
<> <>
<Head> <Head>
@ -107,6 +127,31 @@ const VideoList: NextPage = () => {
</div> </div>
</div> </div>
<div className="flex w-full grow items-start justify-center overflow-auto bg-[#fbfbfb] pt-14"> <div className="flex w-full grow items-start justify-center overflow-auto bg-[#fbfbfb] pt-14">
{closeWindow || checkoutCanceledQueryParam === "false" ? (
<>
{checkoutCanceledQueryParam === "false" ? (
<div className="flex flex-col">
<span className="text-lg font-semibold text-zinc-700">
Successfully upgraded
</span>
{closeQueryParam === "true" ? (
<span className="mt-1 text-base text-zinc-500">
You can now close this window
</span>
) : (
<span className="mt-1 text-base text-zinc-500">
You will be redirected shortly
</span>
)}
</div>
) : (
<span className="text-lg font-semibold text-zinc-700">
You can now close this window
</span>
)}
</>
) : (
<>
{videos && videos?.length <= 0 ? ( {videos && videos?.length <= 0 ? (
<div className="flex items-center justify-center px-8"> <div className="flex items-center justify-center px-8">
<div className="flex flex-col"> <div className="flex flex-col">
@ -156,6 +201,8 @@ const VideoList: NextPage = () => {
) : null} ) : null}
</div> </div>
)} )}
</>
)}
</div> </div>
</main> </main>
</> </>

8
src/server/api/routers/stripe.ts
View file

@ -5,7 +5,9 @@ import { z } from "zod";
export const stripeRouter = createTRPCRouter({ export const stripeRouter = createTRPCRouter({
createCheckoutSession: protectedProcedure createCheckoutSession: protectedProcedure
.input(z.object({ billedAnnually: z.boolean() })) .input(
z.object({ billedAnnually: z.boolean(), recordModalOpen: z.boolean() })
)
.mutation( .mutation(
async ({ ctx: { prisma, stripe, session, req, posthog }, input }) => { async ({ ctx: { prisma, stripe, session, req, posthog }, input }) => {
if ( if (
@ -45,7 +47,9 @@ export const stripeRouter = createTRPCRouter({
quantity: 1, quantity: 1,
}, },
], ],
success_url: `${baseUrl}/videos?checkoutSuccess=true`, success_url: input.recordModalOpen
? `${baseUrl}/videos?checkoutCanceled=false&close=true`
: `${baseUrl}/videos?checkoutCanceled=false&close=false`,
cancel_url: `${baseUrl}/videos?checkoutCanceled=true`, cancel_url: `${baseUrl}/videos?checkoutCanceled=true`,
subscription_data: { subscription_data: {
metadata: { metadata: {