clients/web: use new Checkout API when subscribing

polarsource · May 24, 2024 · 5922753 · 5922753
1 parent 34fc90b
commit 5922753
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 216 deletions.
diff --git a/...c/app/(topbar)/subscribe/success/page.tsx → ...rc/app/(topbar)/checkout/success/page.tsx b/...c/app/(topbar)/subscribe/success/page.tsx → ...rc/app/(topbar)/checkout/success/page.tsx
@@ -1,7 +1,7 @@
-import SubscriptionSuccess from '@/components/Subscriptions/SubscriptionSuccess'
+import CheckoutSuccess from '@/components/Checkout/CheckoutSuccess'
 import { PublicPageOrganizationContextProvider } from '@/providers/organization'
 import { getServerSideAPI } from '@/utils/api/serverside'
-import { Organization, ResponseError, SubscribeSession } from '@polar-sh/sdk'
+import { Checkout, Organization, ResponseError } from '@polar-sh/sdk'
 import { notFound } from 'next/navigation'
 
 export default async function Page({
@@ -11,10 +11,10 @@ export default async function Page({
 }) {
   const api = getServerSideAPI()
 
-  let subscribeSession: SubscribeSession | undefined
+  let checkout: Checkout | undefined
 
   try {
-    subscribeSession = await api.subscriptions.getSubscribeSession({
+    checkout = await api.checkouts.getCheckout({
       id: searchParams.session_id,
     })
   } catch (e) {
@@ -25,18 +25,10 @@ export default async function Page({
     }
   }
 
-  if (!subscribeSession) {
-    notFound()
-  }
-
-  if (!subscribeSession.subscription_tier.organization_id) {
-    notFound()
-  }
-
   let organization: Organization | undefined
   try {
     organization = await api.organizations.get({
-      id: subscribeSession.subscription_tier.organization_id,
+      id: checkout.product.organization_id,
     })
   } catch (e) {
     if (e instanceof ResponseError && e.response.status === 404) {
@@ -46,13 +38,9 @@ export default async function Page({
     }
   }
 
-  if (!organization) {
-    notFound()
-  }
-
   return (
     <PublicPageOrganizationContextProvider organization={organization}>
-      <SubscriptionSuccess subscribeSession={subscribeSession} />
+      <CheckoutSuccess checkout={checkout} organization={organization} />
     </PublicPageOrganizationContextProvider>
   )
 }
diff --git a/clients/apps/web/src/app/[organization]/(sidebar)/donate/status/ClientPage.tsx b/clients/apps/web/src/app/[organization]/(sidebar)/donate/status/ClientPage.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import revalidate from '@/app/actions'
-import SubscriptionTierCelebration from '@/components/Subscriptions/SubscriptionTierCelebration'
+import CheckoutCelebration from '@/components/Checkout/CheckoutCelebration'
 import { useAuth } from '@/hooks/auth'
 import { useSendMagicLink } from '@/hooks/magicLink'
-import { Organization, SubscriptionTierType } from '@polar-sh/sdk'
+import { Organization } from '@polar-sh/sdk'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import Button from 'polarkit/components/ui/atoms/button'
@@ -54,7 +54,7 @@ const ClientPage = ({
     <>
       <div className="mx-auto flex flex-col gap-16 p-4 md:mt-8 md:w-[768px] md:p-0">
         <div className="flex flex-col items-center justify-center gap-4 text-center">
-          <SubscriptionTierCelebration type={SubscriptionTierType.INDIVIDUAL} />
+          <CheckoutCelebration />
           <p className="text-muted-foreground">Thank you!</p>
         </div>
 

diff --git a/clients/apps/web/src/app/[organization]/(sidebar)/subscriptions/ClientPage.tsx b/clients/apps/web/src/app/[organization]/(sidebar)/subscriptions/ClientPage.tsx
@@ -75,7 +75,7 @@ const ClientPage: React.FC<OrganizationSubscriptionsPublicPageProps> = ({
                     organization={organization}
                     recurringInterval={recurringInterval}
                     subscriptionTier={tier}
-                    subscribePath="/api/subscribe"
+                    checkoutPath="/api/checkout"
                   />
                 ))}
             </SubscriptionTierCard>

diff --git a/clients/apps/web/src/app/[organization]/subscribe/ClientPage.tsx b/clients/apps/web/src/app/[organization]/subscribe/ClientPage.tsx
@@ -109,7 +109,7 @@ export default function ClientPage({
               organization={organization}
               subscriptionTier={selectedTier}
               recurringInterval={recurringInterval}
-              subscribePath="/api/subscribe"
+              checkoutPath="/api/checkout"
               variant="default"
             />
           ))}

diff --git a/...s/apps/web/src/app/api/subscribe/route.ts → ...ts/apps/web/src/app/api/checkout/route.ts b/...s/apps/web/src/app/api/subscribe/route.ts → ...ts/apps/web/src/app/api/checkout/route.ts
@@ -9,22 +9,16 @@ export async function GET(request: NextRequest) {
   const api = getServerSideAPI()
 
   const searchParams = request.nextUrl.searchParams
-  const subscriptionTierId = searchParams.get('tier') as string
   const priceId = searchParams.get('price') as string
-  const organizationId = searchParams.get('organization_id') as
-    | string
-    | undefined
 
   // Build success URL with custom domain support
   const host = requestHost(request)
-  const successURL = `${host.protocol}://${host.host}/subscribe/success?session_id={CHECKOUT_SESSION_ID}`
+  const successURL = `${host.protocol}://${host.host}/checkout/success?session_id={CHECKOUT_SESSION_ID}`
 
   try {
-    const { url } = await api.subscriptions.createSubscribeSession({
-      subscribeSessionCreate: {
-        tier_id: subscriptionTierId,
-        price_id: priceId,
-        organization_subscriber_id: organizationId,
+    const { url } = await api.checkouts.createCheckout({
+      checkoutCreate: {
+        product_price_id: priceId,
         success_url: successURL,
       },
     })

diff --git a/...criptions/SubscriptionTierCelebration.tsx → ...mponents/Checkout/CheckoutCelebration.tsx b/...criptions/SubscriptionTierCelebration.tsx → ...mponents/Checkout/CheckoutCelebration.tsx
@@ -1,23 +1,7 @@
-import { SubscriptionTierType } from '@polar-sh/sdk'
-import { useMemo } from 'react'
+interface CheckoutCelebrationProps {}
 
-interface SubscriptionTierCelebrationProps {
-  type: SubscriptionTierType
-}
-
-const SubscriptionTierCelebration: React.FC<
-  SubscriptionTierCelebrationProps
-> = ({ type }) => {
-  const [gradientColorStart, gradientColorEnd] = useMemo(() => {
-    switch (type) {
-      case SubscriptionTierType.FREE:
-        return ['#3381FF', '#0054DB']
-      case SubscriptionTierType.INDIVIDUAL:
-        return ['#65ebc0', '#29dea5']
-      case SubscriptionTierType.BUSINESS:
-        return ['#d2a1ff', '#9d4cff']
-    }
-  }, [type])
+const CheckoutCelebration: React.FC<CheckoutCelebrationProps> = () => {
+  const [gradientColorStart, gradientColorEnd] = ['#d2a1ff', '#9d4cff']
 
   return (
     <svg
@@ -125,4 +109,4 @@ const SubscriptionTierCelebration: React.FC<
   )
 }
 
-export default SubscriptionTierCelebration
+export default CheckoutCelebration
diff --git a/...nts/Subscriptions/SubscriptionSuccess.tsx → ...c/components/Checkout/CheckoutSuccess.tsx b/...nts/Subscriptions/SubscriptionSuccess.tsx → ...c/components/Checkout/CheckoutSuccess.tsx
@@ -2,7 +2,7 @@
 
 import { useAuth } from '@/hooks'
 import { useSendMagicLink } from '@/hooks/magicLink'
-import { SubscribeSession } from '@polar-sh/sdk'
+import { Checkout, Organization } from '@polar-sh/sdk'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import Button from 'polarkit/components/ui/atoms/button'
@@ -15,17 +15,15 @@ import {
 } from 'polarkit/components/ui/atoms/card'
 import { useCallback, useState } from 'react'
 import { resolveBenefitIcon } from '../Benefit/utils'
-import SubscriptionTierCelebration from './SubscriptionTierCelebration'
+import CheckoutCelebration from './CheckoutCelebration'
 
-export const SubscriptionSuccess = (props: {
-  subscribeSession: SubscribeSession
+export const CheckoutSuccess = (props: {
+  checkout: Checkout
+  organization: Organization
 }) => {
   const {
-    subscribeSession: {
-      customer_email: email,
-      organization_name: organizationName,
-      subscription_tier: subscriptionTier,
-    },
+    checkout: { customer_email: email, product },
+    organization,
   } = props
   const router = useRouter()
   const { currentUser } = useAuth()
@@ -41,38 +39,37 @@ export const SubscriptionSuccess = (props: {
 
     setEmailSigninLoading(true)
     try {
-      sendMagicLink(email, `/${organizationName}`)
+      sendMagicLink(email, `/${organization.name}`)
     } catch (err) {
       // TODO: error handling
     } finally {
       setEmailSigninLoading(false)
     }
-  }, [email, router, organizationName, sendMagicLink])
+  }, [email, router, organization, sendMagicLink])
 
   return (
     <>
       <div className="mx-auto flex flex-col gap-16 p-4 md:mt-8 md:w-[768px] md:p-0">
         <div className="flex flex-col items-center justify-center gap-4 text-center">
-          <SubscriptionTierCelebration type={subscriptionTier.type} />
+          <CheckoutCelebration />
           <p className="text-muted-foreground">Thank you!</p>
           <h1 className="text-3xl">
-            You&apos;re now a {subscriptionTier.name} subscriber
+            Your purchase of {product.name} is complete
           </h1>
         </div>
 
         <div className="flex justify-center">
           <Card className="w-full md:w-1/2">
             <CardHeader>
               <CardTitle className="text-xl font-medium">
-                Thank you for supporting {organizationName}!
+                Thank you for supporting {organization.name}!
               </CardTitle>
               <p className="text-muted-foreground text-sm">
-                You&apos;re now eligible for the benefits in the{' '}
-                {subscriptionTier.name} tier.
+                You&apos;re now eligible for the benefits of {product.name}.
               </p>
             </CardHeader>
             <CardContent className="flex flex-col gap-y-1">
-              {subscriptionTier.benefits.map((benefit) => (
+              {product.benefits.map((benefit) => (
                 <div
                   key={benefit.id}
                   className="flex flex-row items-start text-blue-500 dark:text-blue-400"
@@ -88,15 +85,15 @@ export const SubscriptionSuccess = (props: {
             </CardContent>
             <CardFooter className="flex justify-center">
               {currentUser && (
-                <Link className="grow" href={`/${organizationName}`}>
-                  <Button className="w-full">Go to {organizationName}</Button>
+                <Link className="grow" href={`/${organization.name}`}>
+                  <Button className="w-full">Go to {organization.name}</Button>
                 </Link>
               )}
               {!currentUser && (
                 <div className="flex flex-col gap-4">
                   <p className="text-muted-foreground text-sm">
                     You now have an account with Polar! Sign in now to manage
-                    your subscriptions and benefits.
+                    your purchases and benefits.
                   </p>
                   <Button
                     className="w-full"
@@ -116,4 +113,4 @@ export const SubscriptionSuccess = (props: {
   )
 }
 
-export default SubscriptionSuccess
+export default CheckoutSuccess
diff --git a/clients/apps/web/src/components/Organization/FreeTierSubscribe.tsx b/clients/apps/web/src/components/Organization/FreeTierSubscribe.tsx
@@ -17,9 +17,9 @@ import Input from 'polarkit/components/ui/atoms/input'
 import { Form, FormField, FormMessage } from 'polarkit/components/ui/form'
 import { useCallback, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
+import CheckoutCelebration from '../Checkout/CheckoutCelebration'
 import { Modal } from '../Modal'
 import SubscriptionGroupIcon from '../Subscriptions/SubscriptionGroupIcon'
-import SubscriptionTierCelebration from '../Subscriptions/SubscriptionTierCelebration'
 
 interface AuthenticatedFreeTierSubscribeProps {
   organization: Organization
@@ -211,7 +211,7 @@ export const AnonymousFreeTierSubscribe = ({
           <div className="flex min-h-[240px] w-full flex-col items-center justify-center gap-y-6 px-16 py-10">
             {success && (
               <>
-                <SubscriptionTierCelebration type={product.type} />
+                <CheckoutCelebration />
                 <p className="text-muted-foreground text-center">Thank you!</p>
                 <h2 className="text-center text-lg">
                   You&apos;re now subscribed to {organization.name}

diff --git a/clients/apps/web/src/components/Profile/HighlightedTiersEditor/HighlightedTiersEditor.tsx b/clients/apps/web/src/components/Profile/HighlightedTiersEditor/HighlightedTiersEditor.tsx
@@ -133,7 +133,7 @@ export const HighlightedTiersEditor = ({
                         organization={organization}
                         subscriptionTier={tier}
                         recurringInterval={recurringInterval}
-                        subscribePath="/api/subscribe"
+                        checkoutPath="/api/checkout"
                       />
                     )}
                   </>

diff --git a/.../apps/web/src/components/Profile/SubscriptionTierEditor/DraggableSubscriptionTierCard.tsx b/.../apps/web/src/components/Profile/SubscriptionTierEditor/DraggableSubscriptionTierCard.tsx
@@ -48,7 +48,7 @@ export const DraggableSubscriptionTierCard = ({
               organization={organization}
               subscriptionTier={subscriptionTier}
               recurringInterval={recurringInterval}
-              subscribePath="/api/subscribe"
+              checkoutPath="/api/checkout"
             />
           )}
         </>

diff --git a/clients/apps/web/src/components/Subscriptions/SubscribeNowWithModal.tsx b/clients/apps/web/src/components/Subscriptions/SubscribeNowWithModal.tsx
@@ -20,10 +20,10 @@ import Input from 'polarkit/components/ui/atoms/input'
 import { Form, FormField, FormMessage } from 'polarkit/components/ui/form'
 import { useCallback, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
+import CheckoutCelebration from '../Checkout/CheckoutCelebration'
 import { CloseButton, Modal, ModalHeader } from '../Modal'
 import { useModal } from '../Modal/useModal'
 import Spinner from '../Shared/Spinner'
-import SubscriptionTierCelebration from './SubscriptionTierCelebration'
 
 const SubscribeNowWithModal = ({
   organization,
@@ -179,9 +179,7 @@ const LoggedInSubscribeModalContent = ({
 
         {isSubscribed ? (
           <div className="flex flex-col items-center gap-y-4">
-            {subscription ? (
-              <SubscriptionTierCelebration type={subscription?.product.type} />
-            ) : null}
+            {subscription ? <CheckoutCelebration /> : null}
 
             <p className="text-muted-foreground text-center">Thank you!</p>
             <p>
@@ -266,7 +264,7 @@ const AnonymousSubscribeModalContent = ({
         <div className="flex w-full flex-col items-center justify-center gap-y-6">
           <CloseButton hide={hide} className="absolute right-5 top-3" />
 
-          <SubscriptionTierCelebration type={freeSubscriptionTier.type} />
+          <CheckoutCelebration />
           <p className="text-muted-foreground text-center">Thank you!</p>
           <h2 className="text-center text-lg">
             You&apos;re now subscribed to {organization.name}