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);

137
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,54 +127,81 @@ 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">
{videos && videos?.length <= 0 ? ( {closeWindow || checkoutCanceledQueryParam === "false" ? (
<div className="flex items-center justify-center px-8"> <>
<div className="flex flex-col"> {checkoutCanceledQueryParam === "false" ? (
<span className="text-lg font-semibold text-zinc-700"> <div className="flex flex-col">
No videos found <span className="text-lg font-semibold text-zinc-700">
</span> Successfully upgraded
<span className="mt-1 text-base text-zinc-500"> </span>
Videos you record will show up here. Already got videos? {closeQueryParam === "true" ? (
Upload them! <span className="mt-1 text-base text-zinc-500">
</span> You can now close this window
<div className="mt-4 flex flex-wrap gap-4"> </span>
<button ) : (
onClick={openRecordModal} <span className="mt-1 text-base text-zinc-500">
className="inline-flex items-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2" You will be redirected shortly
> </span>
Record a video )}
</button>
<button
onClick={openUploadModal}
className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
Upload a video
</button>
</div> </div>
</div> ) : (
</div> <span className="text-lg font-semibold text-zinc-700">
You can now close this window
</span>
)}
</>
) : ( ) : (
<div className="flex-start grid w-full max-w-[1300px] grid-cols-[repeat(auto-fill,250px)] flex-row flex-wrap items-center justify-center gap-14 px-4 pb-16"> <>
{videos && {videos && videos?.length <= 0 ? (
videos.map(({ title, id, createdAt, thumbnailUrl }) => ( <div className="flex items-center justify-center px-8">
<VideoCard <div className="flex flex-col">
title={title} <span className="text-lg font-semibold text-zinc-700">
id={id} No videos found
createdAt={createdAt} </span>
thumbnailUrl={thumbnailUrl} <span className="mt-1 text-base text-zinc-500">
key={id} Videos you record will show up here. Already got videos?
/> Upload them!
))} </span>
<div className="mt-4 flex flex-wrap gap-4">
<button
onClick={openRecordModal}
className="inline-flex items-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
>
Record a video
</button>
<button
onClick={openUploadModal}
className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
Upload a video
</button>
</div>
</div>
</div>
) : (
<div className="flex-start grid w-full max-w-[1300px] grid-cols-[repeat(auto-fill,250px)] flex-row flex-wrap items-center justify-center gap-14 px-4 pb-16">
{videos &&
videos.map(({ title, id, createdAt, thumbnailUrl }) => (
<VideoCard
title={title}
id={id}
createdAt={createdAt}
thumbnailUrl={thumbnailUrl}
key={id}
/>
))}
{isLoading ? ( {isLoading ? (
<> <>
<VideoCardSkeleton /> <VideoCardSkeleton />
<VideoCardSkeleton /> <VideoCardSkeleton />
<VideoCardSkeleton /> <VideoCardSkeleton />
<VideoCardSkeleton /> <VideoCardSkeleton />
</> </>
) : 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: {