Customers architecture

clients/apps/web/package.json

@@ -59,6 +59,7 @@
     "d3": "^7.9.0",
     "d3-scale-chromatic": "^3.1.0",
     "date-fns": "^3.6.0",
+    "event-source-plus": "^0.1.8",
     "eventemitter3": "^5.0.1",
     "framer-motion": "^10.18.0",
     "geist": "^1.3.1",

clients/apps/web/src/app/(main)/(topbar)/(backer)/purchases/file-downloads/ClientPage.tsx

@@ -1,10 +1,14 @@
 'use client'
 
-import { DownloadableItem as InnerDownloadableItem } from '@/components/Benefit/Downloadables/SubscriberWidget'
+import { DownloadableItem as InnerDownloadableItem } from '@/components/Benefit/Downloadables/DownloadablesBenefitGrant'
 import Pagination from '@/components/Pagination/Pagination'
 import { PurchasesQueryParametersContext } from '@/components/Purchases/PurchasesQueryParametersContext'
 import PurchaseSidebar from '@/components/Purchases/PurchasesSidebar'
-import { useUserBenefit, useUserDownloadables } from '@/hooks/queries'
+import {
+  useCustomerBenefitGrants,
+  useCustomerDownloadables,
+} from '@/hooks/queries'
+import { api } from '@/utils/api'
 import { FileDownloadOutlined } from '@mui/icons-material'
 import { DownloadableRead } from '@polar-sh/sdk'
 import Link from 'next/link'
@@ -30,7 +34,7 @@ export default function ClientPage() {
     [setPurchaseParameters],
   )
 
-  const { data: downloadables } = useUserDownloadables({
+  const { data: downloadables } = useCustomerDownloadables(api, {
     limit: purchaseParameters.limit,
     page: purchaseParameters.page,
   })
@@ -85,7 +89,12 @@ interface DownloadableItemProps {
 }
 
 const DownloadableItem = ({ downloadable }: DownloadableItemProps) => {
-  const { data: benefit } = useUserBenefit(downloadable.benefit_id)
+  const { data: benefitGrants } = useCustomerBenefitGrants(api, {
+    limit: 1,
+    benefitId: downloadable.benefit_id,
+  })
+  const benefitGrant = benefitGrants?.items[0]
+  const benefit = benefitGrant?.benefit
 
   const organizationLink = useMemo(() => {
     if (benefit?.organization.profile_settings?.enabled) {
@@ -94,7 +103,7 @@ const DownloadableItem = ({ downloadable }: DownloadableItemProps) => {
           className="dark:text-polar-500 dark:hover:text-polar-200 text-sm text-gray-500 hover:text-gray-700"
           href={`/${benefit.organization.slug}`}
         >
-          {benefit?.organization.name}
+          {benefit.organization.name}
         </Link>
       )
     }

clients/apps/web/src/app/(main)/(topbar)/(backer)/purchases/license-keys/ClientPage.tsx

@@ -5,9 +5,13 @@ import { LicenseKeyDetails } from '@/components/Benefit/LicenseKeys/LicenseKeyDe
 import Pagination from '@/components/Pagination/Pagination'
 import { PurchasesQueryParametersContext } from '@/components/Purchases/PurchasesQueryParametersContext'
 import PurchaseSidebar from '@/components/Purchases/PurchasesSidebar'
-import { useUserBenefit, useUserLicenseKeys } from '@/hooks/queries'
+import {
+  useCustomerBenefitGrants,
+  useCustomerLicenseKey,
+} from '@/hooks/queries'
+import { api } from '@/utils/api'
 import { Key } from '@mui/icons-material'
-import { LicenseKeyRead } from '@polar-sh/sdk'
+import { BenefitType, CustomerBenefitGrantLicenseKeys } from '@polar-sh/sdk'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 import Avatar from 'polarkit/components/ui/atoms/avatar'
@@ -31,9 +35,10 @@ export default function ClientPage() {
     [setPurchaseParameters],
   )
 
-  const { data: licenseKeys } = useUserLicenseKeys({
+  const { data: benefitGrants } = useCustomerBenefitGrants(api, {
     limit: purchaseParameters.limit,
     page: purchaseParameters.page,
+    type: BenefitType.LICENSE_KEYS,
   })
 
   return (
@@ -47,7 +52,7 @@ export default function ClientPage() {
           <h3 className="text-2xl">License Keys</h3>
         </div>
 
-        {licenseKeys?.pagination.total_count === 0 ? (
+        {benefitGrants?.pagination.total_count === 0 ? (
           <div className="flex h-full w-full flex-col items-center gap-y-4 py-32 text-6xl">
             <Key
               className="dark:text-polar-600 text-gray-400"
@@ -59,12 +64,15 @@ export default function ClientPage() {
           </div>
         ) : (
           <div className="flex w-full flex-col gap-y-6">
-            {licenseKeys?.items.map((licenseKey) => (
-              <LicenseKeyItem key={licenseKey.id} licenseKey={licenseKey} />
+            {benefitGrants?.items.map((benefitGrant) => (
+              <LicenseKeyItem
+                key={benefitGrant.id}
+                benefitGrant={benefitGrant as CustomerBenefitGrantLicenseKeys}
+              />
             ))}
             <Pagination
               currentPage={purchaseParameters.page}
-              totalCount={licenseKeys?.pagination.total_count || 0}
+              totalCount={benefitGrants?.pagination.total_count || 0}
               pageSize={purchaseParameters.limit}
               onPageChange={onPageChange}
               currentURL={searchParams}
@@ -77,27 +85,31 @@ export default function ClientPage() {
 }
 
 interface LicenseKeyItemProps {
-  licenseKey: LicenseKeyRead
+  benefitGrant: CustomerBenefitGrantLicenseKeys
 }
 
-const LicenseKeyItem = ({ licenseKey }: LicenseKeyItemProps) => {
-  const { data: benefit } = useUserBenefit(licenseKey.benefit_id)
+const LicenseKeyItem = ({ benefitGrant }: LicenseKeyItemProps) => {
+  const { benefit } = benefitGrant
+  const { data: licenseKey } = useCustomerLicenseKey(
+    api,
+    benefitGrant.properties.license_key_id as string,
+  )
 
   const organizationLink = useMemo(() => {
-    if (benefit?.organization.profile_settings?.enabled) {
+    if (benefit.organization.profile_settings?.enabled) {
       return (
         <Link
           className="dark:text-polar-500 dark:hover:text-polar-200 text-sm text-gray-500 hover:text-gray-700"
           href={`/${benefit.organization.slug}`}
         >
-          {benefit?.organization.name}
+          {benefit.organization.name}
         </Link>
       )
     }
 
     return (
       <span className="dark:text-polar-500 text-sm text-gray-500">
-        {benefit?.organization.name}
+        {benefit.organization.name}
       </span>
     )
   }, [benefit])
@@ -117,11 +129,15 @@ const LicenseKeyItem = ({ licenseKey }: LicenseKeyItemProps) => {
         </div>
         <span className="text-xl">{benefit?.description}</span>
       </div>
-      <div className="flex flex-col gap-y-6">
-        <CopyToClipboardInput value={licenseKey.key} />
-        <LicenseKeyDetails className="bg-white" licenseKey={licenseKey} />
-      </div>
-      <LicenseKeyActivations licenseKeyId={licenseKey.id} />
+      {licenseKey && (
+        <>
+          <div className="flex flex-col gap-y-6">
+            <CopyToClipboardInput value={licenseKey.key} />
+            <LicenseKeyDetails licenseKey={licenseKey} />
+          </div>
+          <LicenseKeyActivations api={api} licenseKey={licenseKey} />
+        </>
+      )}
     </ShadowBox>
   )
 }

clients/apps/web/src/app/(main)/(topbar)/(backer)/purchases/products/ClientPage.tsx

@@ -5,9 +5,10 @@ import Pagination from '@/components/Pagination/Pagination'
 import { PurchasesQueryParametersContext } from '@/components/Purchases/PurchasesQueryParametersContext'
 import PurchaseSidebar from '@/components/Purchases/PurchasesSidebar'
 import AmountLabel from '@/components/Shared/AmountLabel'
-import { useUserOrders } from '@/hooks/queries'
+import { useCustomerOrders } from '@/hooks/queries'
+import { api } from '@/utils/api'
 import { Search, ShoppingBagOutlined } from '@mui/icons-material'
-import { ProductPriceType, UserOrder } from '@polar-sh/sdk'
+import { CustomerOrder, ProductPriceType } from '@polar-sh/sdk'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 import Button from 'polarkit/components/ui/atoms/button'
@@ -31,7 +32,7 @@ export default function ClientPage() {
     [setPurchaseParameters],
   )
 
-  const { data: orders } = useUserOrders({
+  const { data: orders } = useCustomerOrders(api, {
     productPriceType: ProductPriceType.ONE_TIME,
     query: purchaseParameters.query,
     limit: purchaseParameters.limit,
@@ -102,7 +103,7 @@ export default function ClientPage() {
   )
 }
 
-const OrderItem = ({ order }: { order: UserOrder }) => {
+const OrderItem = ({ order }: { order: CustomerOrder }) => {
   const organization = order.product.organization
 
   return (

clients/apps/web/src/app/(main)/(topbar)/(backer)/purchases/products/[id]/ClientPage.tsx

@@ -1,40 +1,12 @@
 'use client'
 
-import BenefitDetails from '@/components/Benefit/BenefitDetails'
-import { BenefitRow } from '@/components/Benefit/BenefitRow'
-import { InlineModal } from '@/components/Modal/InlineModal'
-import { useUserBenefits, useUserOrderInvoice } from '@/hooks/queries'
-import { markdownOptions } from '@/utils/markdown'
-import { organizationPageLink } from '@/utils/nav'
+import CustomerPortalOrder from '@/components/CustomerPortal/CustomerPortalOrder'
+import { api } from '@/utils/api'
 import { ArrowBackOutlined } from '@mui/icons-material'
-import { UserBenefit, UserOrder } from '@polar-sh/sdk'
-import Markdown from 'markdown-to-jsx'
+import { CustomerOrder } from '@polar-sh/sdk'
 import Link from 'next/link'
-import Avatar from 'polarkit/components/ui/atoms/avatar'
-import Button from 'polarkit/components/ui/atoms/button'
-import { List, ListItem } from 'polarkit/components/ui/atoms/list'
-import ShadowBox from 'polarkit/components/ui/atoms/shadowbox'
-import { formatCurrencyAndAmount } from 'polarkit/lib/money'
-import { useCallback, useState } from 'react'
-
-const ClientPage = ({ order }: { order: UserOrder }) => {
-  const organization = order.product.organization
-  const { data: benefits } = useUserBenefits({
-    orderId: order.id,
-    limit: 100,
-    sorting: ['type'],
-  })
-
-  const [selectedBenefit, setSelectedBenefit] = useState<UserBenefit | null>(
-    null,
-  )
-
-  const orderInvoiceMutation = useUserOrderInvoice()
-  const openInvoice = useCallback(async () => {
-    const { url } = await orderInvoiceMutation.mutateAsync(order.id)
-    window.open(url, '_blank')
-  }, [orderInvoiceMutation, order])
 
+const ClientPage = ({ order }: { order: CustomerOrder }) => {
   return (
     <div className="flex flex-col gap-y-8">
       <Link
@@ -44,106 +16,7 @@ const ClientPage = ({ order }: { order: UserOrder }) => {
         <ArrowBackOutlined fontSize="inherit" />
         <span>Back to Purchases</span>
       </Link>
-      <div className="flex h-full flex-grow flex-col-reverse gap-12 md:flex-row md:items-start">
-        <div className="flex w-full flex-col gap-8 md:w-2/3">
-          <ShadowBox className="flex flex-col gap-6">
-            {organization && (
-              <Link
-                className="flex flex-row items-center gap-x-4"
-                href={`/${organization.slug}`}
-              >
-                <Avatar
-                  className="h-12 w-12"
-                  avatar_url={organization.avatar_url}
-                  name={organization.name}
-                />
-                <h3 className="text-lg">{organization.name}</h3>
-              </Link>
-            )}
-            <h1 className="text-3xl font-medium">{order.product.name}</h1>
-            {order.product.description ? (
-              <div className="prose dark:prose-invert prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl prose-h4:text-lg prose-h5:text-md prose-h6:text-sm dark:prose-headings:text-polar-50 dark:text-polar-300 max-w-4xl text-gray-800">
-                <Markdown options={markdownOptions}>
-                  {order.product.description}
-                </Markdown>
-              </div>
-            ) : (
-              <></>
-            )}
-          </ShadowBox>
-          {(benefits?.items.length ?? 0) > 0 && (
-            <div className="flex flex-col gap-4">
-              <h3 className="text-lg font-medium">Benefits</h3>
-              <List>
-                {benefits?.items.map((benefit) => (
-                  <ListItem
-                    key={benefit.id}
-                    selected={benefit.id === selectedBenefit?.id}
-                    onSelect={() => setSelectedBenefit(benefit)}
-                  >
-                    <BenefitRow benefit={benefit} order={order} />
-                  </ListItem>
-                ))}
-              </List>
-            </div>
-          )}
-        </div>
-
-        <div className="flex w-full flex-col gap-8 md:max-w-[340px]">
-          <ShadowBox className="flex flex-col gap-8">
-            <h3 className="text-lg font-medium">{order.product.name}</h3>
-            <div className="flex flex-col gap-4">
-              <h1 className="text-4xl font-light">
-                {formatCurrencyAndAmount(order.amount, order.currency, 0)}
-              </h1>
-              <p className="dark:text-polar-500 text-sm text-gray-400">
-                Purchased on{' '}
-                {new Date(order.created_at).toLocaleDateString('en-US', {
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric',
-                })}
-              </p>
-            </div>
-            <div className="flex flex-col gap-2">
-              <Button
-                size="lg"
-                fullWidth
-                onClick={openInvoice}
-                loading={orderInvoiceMutation.isPending}
-                disabled={orderInvoiceMutation.isPending}
-              >
-                Download Invoice
-              </Button>
-              {organization &&
-                organization.profile_settings?.enabled &&
-                !order.product.is_archived && (
-                  <Link
-                    href={organizationPageLink(
-                      organization,
-                      `products/${order.product.id}`,
-                    )}
-                  >
-                    <Button size="lg" variant="ghost" fullWidth>
-                      Go to Product
-                    </Button>
-                  </Link>
-                )}
-            </div>
-          </ShadowBox>
-        </div>
-      </div>
-      <InlineModal
-        isShown={selectedBenefit !== null}
-        hide={() => setSelectedBenefit(null)}
-        modalContent={
-          <div className="px-8 py-10">
-            {selectedBenefit && (
-              <BenefitDetails benefit={selectedBenefit} order={order} />
-            )}
-          </div>
-        }
-      />
+      <CustomerPortalOrder api={api} order={order} />
     </div>
   )
 }

clients/apps/web/src/app/(main)/(topbar)/(backer)/purchases/products/[id]/page.tsx

@@ -1,15 +1,15 @@
 import { getServerSideAPI } from '@/utils/api/serverside'
-import { ResponseError, UserOrder } from '@polar-sh/sdk'
+import { CustomerOrder, ResponseError } from '@polar-sh/sdk'
 import { notFound } from 'next/navigation'
 import ClientPage from './ClientPage'
 
 export default async function Page({ params }: { params: { id: string } }) {
   const api = getServerSideAPI()
 
-  let order: UserOrder
+  let order: CustomerOrder
 
   try {
-    order = await api.usersOrders.get({ id: params.id })
+    order = await api.customerPortalOrders.get({ id: params.id })
   } catch (e) {
     if (e instanceof ResponseError && e.response.status === 404) {
       notFound()