clients/web: move things for Customers API

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>
       )
     }
@@ -111,7 +120,7 @@ const DownloadableItem = ({ downloadable }: DownloadableItemProps) => {
   return (
     <ShadowBox className="dark:bg-polar-800 flex flex-col gap-y-6 border-none bg-white">
       <div className="flex flex-col gap-y-2">
-        <span className="text-xl">{benefit?.description}</span>
+        <span className="text-xl">{benefit.description}</span>
         <div className="flex flex-row items-center gap-x-2">
           <Avatar
             className="h-6 w-6 text-xs"

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])
@@ -107,7 +119,7 @@ const LicenseKeyItem = ({ licenseKey }: LicenseKeyItemProps) => {
   return (
     <ShadowBox className="dark:bg-polar-800 flex flex-col gap-y-6 border-none bg-white">
       <div className="flex flex-col gap-y-2">
-        <span className="text-xl">{benefit?.description}</span>
+        <span className="text-xl">{benefit.description}</span>
         <div className="flex flex-row items-center gap-x-2">
           <Avatar
             className="h-6 w-6 text-xs"
@@ -117,11 +129,15 @@ const LicenseKeyItem = ({ licenseKey }: LicenseKeyItemProps) => {
           {organizationLink}
         </div>
       </div>
-      <div className="flex flex-col gap-y-6">
-        <CopyToClipboardInput value={licenseKey.key} />
-        <LicenseKeyDetails 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,37 +1,35 @@
 '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 { BenefitGrant } from '@/components/Benefit/BenefitGrant'
+import {
+  useCustomerBenefitGrants,
+  useCustomerOrderInvoice,
+} from '@/hooks/queries'
+import { api } from '@/utils/api'
 import { markdownOptions } from '@/utils/markdown'
 import { organizationPageLink } from '@/utils/nav'
 import { ArrowBackOutlined } from '@mui/icons-material'
-import { UserBenefit, UserOrder } from '@polar-sh/sdk'
+import { CustomerOrder } from '@polar-sh/sdk'
 import Markdown from 'markdown-to-jsx'
 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'
+import { useCallback } from 'react'
 
-const ClientPage = ({ order }: { order: UserOrder }) => {
+const ClientPage = ({ order }: { order: CustomerOrder }) => {
   const organization = order.product.organization
-  const { data: benefits } = useUserBenefits({
+  const { data: benefitGrants } = useCustomerBenefitGrants(api, {
     orderId: order.id,
     limit: 100,
     sorting: ['type'],
   })
 
-  const [selectedBenefit, setSelectedBenefit] = useState<UserBenefit | null>(
-    null,
-  )
-
-  const orderInvoiceMutation = useUserOrderInvoice()
+  const orderInvoiceMutation = useCustomerOrderInvoice(api)
   const openInvoice = useCallback(async () => {
-    const { url } = await orderInvoiceMutation.mutateAsync(order.id)
+    const { url } = await orderInvoiceMutation.mutateAsync({ id: order.id })
     window.open(url, '_blank')
   }, [orderInvoiceMutation, order])
 
@@ -71,17 +69,13 @@ const ClientPage = ({ order }: { order: UserOrder }) => {
               <></>
             )}
           </ShadowBox>
-          {(benefits?.items.length ?? 0) > 0 && (
+          {(benefitGrants?.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} />
+                {benefitGrants?.items.map((benefitGrant) => (
+                  <ListItem key={benefitGrant.id}>
+                    <BenefitGrant api={api} benefitGrant={benefitGrant} />
                   </ListItem>
                 ))}
               </List>
@@ -133,17 +127,6 @@ const ClientPage = ({ order }: { order: UserOrder }) => {
           </ShadowBox>
         </div>
       </div>
-      <InlineModal
-        isShown={selectedBenefit !== null}
-        hide={() => setSelectedBenefit(null)}
-        modalContent={
-          <div className="px-8 py-10">
-            {selectedBenefit && (
-              <BenefitDetails benefit={selectedBenefit} order={order} />
-            )}
-          </div>
-        }
-      />
     </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()

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

@@ -4,9 +4,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 { useUserSubscriptions } from '@/hooks/queries'
+import { useCustomerSubscriptions } from '@/hooks/queries'
+import { api } from '@/utils/api'
 import { Search, ShoppingBagOutlined } from '@mui/icons-material'
-import { UserSubscription } from '@polar-sh/sdk'
+import { CustomerSubscription } from '@polar-sh/sdk'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 import { Switch } from 'polarkit/components/ui/atoms'
@@ -33,7 +34,7 @@ export default function ClientPage() {
     [setPurchaseParameters],
   )
 
-  const { data: subscriptions } = useUserSubscriptions({
+  const { data: subscriptions } = useCustomerSubscriptions(api, {
     active: purchaseParameters.inactive ? undefined : true,
     query: purchaseParameters.query,
     limit: purchaseParameters.limit,
@@ -135,7 +136,7 @@ const StatusWrapper = ({
 const SubscriptionItem = ({
   subscription,
 }: {
-  subscription: UserSubscription
+  subscription: CustomerSubscription
 }) => {
   const organization = subscription.product.organization