clients: move checkout components to a dedicated package

clients/apps/web/package.json

@@ -34,6 +34,7 @@
     "@polar-sh/api": "workspace:*",
     "@polar-sh/checkout": "workspace:^",
     "@polar-sh/mdx": "workspace:*",
+    "@polar-sh/sdk": "^0.21.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-toast": "^1.2.2",
     "@react-three/drei": "^9.117.3",
@@ -154,4 +155,4 @@
     "minimumChangeThreshold": 0,
     "showDetails": true
   }
-}
+}

clients/apps/web/src/app/(main)/[organization]/(header)/products/[productId]/ClientPage.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import { Checkout } from '@/components/Checkout/Checkout'
+import Checkout from '@/components/Checkout/Checkout'
 import { CheckoutPublic, Organization } from '@polar-sh/api'
 import { useTheme } from 'next-themes'
 
 export default function ClientPage({
-  organization,
   checkout,
 }: {
   organization: Organization
@@ -14,8 +13,8 @@ export default function ClientPage({
   const { resolvedTheme } = useTheme()
   return (
     <Checkout
-      checkout={checkout}
-      organization={organization}
+      clientSecret={checkout.client_secret}
+      prefilledParameters={{}}
       theme={resolvedTheme as 'light' | 'dark'}
     />
   )

clients/apps/web/src/app/(main)/[organization]/(header)/products/[productId]/page.tsx

@@ -1,4 +1,3 @@
-import CheckoutProductInfo from '@/components/Checkout/CheckoutProductInfo'
 import { getServerSideAPI } from '@/utils/api/serverside'
 import { isCrawler } from '@/utils/crawlers'
 import { getStorefrontOrNotFound } from '@/utils/storefront'
@@ -75,11 +74,11 @@ export default async function Page({
     notFound()
   }
 
-  /* Avoid creating a checkout for crawlers, just render a simple product info page */
+  /* Avoid creating a checkout for crawlers */
   const headersList = headers()
   const userAgent = headersList.get('user-agent')
   if (userAgent && isCrawler(userAgent)) {
-    return <CheckoutProductInfo organization={organization} product={product} />
+    return <></>
   }
 
   let checkout: CheckoutPublic

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/benefits/ClientPage.tsx

@@ -217,7 +217,7 @@ const BenefitRow = ({ benefit, organization }: BenefitRowProps) => {
         className="flex flex-row items-start gap-x-3 align-middle"
       >
         <span className="dark:bg-polar-700 flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-blue-50 text-2xl text-blue-500 dark:text-white">
-          {resolveBenefitIcon(benefit, 'inherit', 'h-3 w-3')}
+          {resolveBenefitIcon(benefit.type, 'inherit', 'h-3 w-3')}
         </span>
         <span className="text-sm">{benefit.description}</span>
       </div>

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/products/benefits/ClientPage.tsx

@@ -193,7 +193,7 @@ const BenefitRow = ({ benefit, organization }: BenefitRowProps) => {
         className="flex flex-row items-start gap-x-3 align-middle"
       >
         <span className="dark:bg-polar-700 flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-blue-50 text-2xl text-blue-500 dark:text-white">
-          {resolveBenefitIcon(benefit, 'inherit', 'h-3 w-3')}
+          {resolveBenefitIcon(benefit.type, 'inherit', 'h-3 w-3')}
         </span>
         <span className="text-sm">{benefit.description}</span>
       </div>

clients/apps/web/src/app/checkout/[clientSecret]/ClientPage.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import Checkout from '@/components/Checkout/Checkout'
+import type { CheckoutPublic } from '@polar-sh/sdk/models/components/checkoutpublic'
+
+const ClientPage = ({
+  checkout,
+  embed,
+  theme,
+  prefilledParameters,
+}: {
+  checkout: CheckoutPublic
+  embed: boolean
+  prefilledParameters: Record<string, string>
+  theme?: 'light' | 'dark'
+}) => {
+  return (
+    <Checkout
+      clientSecret={checkout.clientSecret}
+      prefilledParameters={prefilledParameters}
+      theme={theme}
+      embed={embed}
+    />
+  )
+}
+
+export default ClientPage

clients/apps/web/src/app/checkout/[clientSecret]/page.tsx

@@ -1,9 +1,9 @@
-import { Checkout } from '@/components/Checkout/Checkout'
-import CheckoutLayout from '@/components/Checkout/CheckoutLayout'
-import { getServerSideAPI } from '@/utils/api/serverside'
-import { getCheckoutByClientSecret } from '@/utils/checkout'
-import { CheckoutStatus } from '@polar-sh/api'
-import { redirect } from 'next/navigation'
+import { getServerURL } from '@/utils/api'
+import { PolarCore } from '@polar-sh/sdk/core'
+import { checkoutsCustomClientGet } from '@polar-sh/sdk/funcs/checkoutsCustomClientGet'
+import { ResourceNotFound } from '@polar-sh/sdk/models/errors'
+import { notFound } from 'next/navigation'
+import ClientPage from './ClientPage'
 
 export default async function Page({
   params: { clientSecret },
@@ -16,23 +16,28 @@ export default async function Page({
   >
 }) {
   const embed = _embed === 'true'
-  const api = getServerSideAPI()
+  const client = new PolarCore({ serverURL: getServerURL() })
 
-  const checkout = await getCheckoutByClientSecret(api, clientSecret)
+  const {
+    ok,
+    value: checkout,
+    error,
+  } = await checkoutsCustomClientGet(client, { clientSecret })
 
-  if (checkout.status !== CheckoutStatus.OPEN) {
-    redirect(checkout.success_url)
+  if (!ok) {
+    if (error instanceof ResourceNotFound) {
+      notFound()
+    } else {
+      throw error
+    }
   }
 
   return (
-    <CheckoutLayout checkout={checkout} embed={embed} theme={theme}>
-      <Checkout
-        organization={checkout.organization}
-        checkout={checkout}
-        theme={theme}
-        embed={embed}
-        prefilledParameters={prefilledParameters}
-      />
-    </CheckoutLayout>
+    <ClientPage
+      checkout={checkout}
+      theme={theme}
+      embed={embed}
+      prefilledParameters={prefilledParameters}
+    />
   )
 }

clients/apps/web/src/components/Benefit/BenefitGrant.tsx

@@ -232,7 +232,7 @@ export const BenefitGrant = ({ api, benefitGrant }: BenefitGrantProps) => {
       <div className="flex flex-row items-center gap-x-4">
         <div className="flex flex-row items-center gap-x-2 text-xs text-blue-500 dark:text-white">
           <span className="dark:bg-polar-700 flex h-8 w-8 flex-row items-center justify-center rounded-full bg-blue-50 text-sm">
-            {resolveBenefitIcon(benefit, 'small')}
+            {resolveBenefitIcon(benefit.type, 'small')}
           </span>
         </div>
         <div className="flex flex-col">

clients/apps/web/src/components/Benefit/utils.tsx

@@ -5,7 +5,7 @@ import {
   KeyOutlined,
   WebOutlined,
 } from '@mui/icons-material'
-import { BenefitBase, BenefitType } from '@polar-sh/api'
+import { BenefitType } from '@polar-sh/api'
 import { twMerge } from 'tailwind-merge'
 
 export type CreatableBenefit = BenefitType
@@ -33,11 +33,11 @@ export const resolveBenefitCategoryIcon = (
 }
 
 export const resolveBenefitIcon = (
-  benefit: BenefitBase,
+  type: BenefitType,
   fontSize: 'small' | 'inherit' | 'large' | 'medium' = 'small',
   className?: string,
 ) => {
-  return resolveBenefitCategoryIcon(benefit?.type, fontSize, className)
+  return resolveBenefitCategoryIcon(type, fontSize, className)
 }
 
 export const resolveBenefitTypeDisplayName = (type: BenefitType) => {