clients: start experimenting with a new lightweight client based on o…

…penapi-fetch

clients/.changeset/config.json

@@ -11,6 +11,7 @@
     "web",
     "@examples/checkout-embed",
     "@examples/checkout-components",
-    "@polar-sh/api"
+    "@polar-sh/api",
+    "@polar-sh/client"
   ]
 }

clients/apps/web/package.json

@@ -33,6 +33,7 @@
     "@observablehq/plot": "^0.6.16",
     "@polar-sh/api": "workspace:*",
     "@polar-sh/checkout": "workspace:^",
+    "@polar-sh/client": "workspace:*",
     "@polar-sh/mdx": "workspace:*",
     "@polar-sh/sdk": "^0.24.0",
     "@polar-sh/ui": "workspace:*",

clients/apps/web/src/app/(main)/(topbar)/layout.tsx

@@ -1,6 +1,6 @@
 import Topbar from '@/components/Layout/Public/Topbar'
 import PublicLayout from '@/components/Layout/PublicLayout'
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getAuthenticatedUser, getUserOrganizations } from '@/utils/user'
 
 export default async function Layout({

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

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'
 import ClientPage from './ClientPage'

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/@breadcrumb/customers/[id]/page.tsx

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getCustomerById } from '@/utils/customer'
 import {
   BreadcrumbLink,

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/@breadcrumb/layout.tsx

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import {
   BreadcrumbLink,

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

@@ -1,4 +1,5 @@
 import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI as getNewServerSideAPI } from '@/utils/client/serverside'
 import { fromISODate, toISODate } from '@/utils/metrics'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { TimeInterval } from '@polar-sh/api'
@@ -25,9 +26,9 @@ export default async function Page({
     product_id?: string | string[]
   }
 }) {
-  const api = getServerSideAPI()
+  const newAPI = getNewServerSideAPI()
   const organization = await getOrganizationBySlugOrNotFound(
-    api,
+    newAPI,
     params.organization,
   )
 
@@ -64,6 +65,7 @@ export default async function Page({
     ? fromISODate(searchParams.end_date)
     : defaultEndDate
 
+  const api = getServerSideAPI()
   const limits = await api.metrics.limits()
   const minDate = fromISODate(limits.min_date)
   const maxDate = addDays(startDate, limits.intervals[interval].max_days - 1)

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/benefits/license-keys/page.tsx

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { DataTableSearchParams, parseSearchParams } from '@/utils/datatable'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'

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

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'
 import ClientPage from './ClientPage'

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

@@ -14,7 +14,7 @@ import {
 } from '@/utils/datatable'
 
 import { AddOutlined, Search } from '@mui/icons-material'
-import { Customer, Organization } from '@polar-sh/api'
+import { components } from '@polar-sh/client'
 import Avatar from '@polar-sh/ui/components/atoms/Avatar'
 import Button from '@polar-sh/ui/components/atoms/Button'
 import {
@@ -29,7 +29,7 @@ import { useRouter } from 'next/navigation'
 import React, { useCallback, useEffect, useState } from 'react'
 
 interface ClientPageProps {
-  organization: Organization
+  organization: components['schemas']['Organization']
   pagination: DataTablePaginationState
   sorting: DataTableSortingState
   query: string | undefined
@@ -130,7 +130,7 @@ const ClientPage: React.FC<ClientPageProps> = ({
   const customers = customersHook.data?.items || []
   const pageCount = customersHook.data?.pagination.max_page ?? 1
 
-  const columns: DataTableColumnDef<Customer>[] = [
+  const columns: DataTableColumnDef<components['schemas']['Customer']>[] = [
     {
       accessorKey: 'email',
       enableSorting: true,

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

@@ -20,7 +20,8 @@ import {
   defaultMetricMarks,
   metricDisplayNames,
 } from '@/utils/metrics'
-import { Customer, Metrics, MetricType, Organization } from '@polar-sh/api'
+import { Metrics, MetricType } from '@polar-sh/api'
+import { components } from '@polar-sh/client'
 import Button from '@polar-sh/ui/components/atoms/Button'
 import { DataTable } from '@polar-sh/ui/components/atoms/DataTable'
 import FormattedDateTime from '@polar-sh/ui/components/atoms/FormattedDateTime'
@@ -52,7 +53,10 @@ const rangeDisplayNames: Record<Range, string> = {
   '24h': '24h',
 }
 
-const getRangeStartDate = (range: Range, customer: Customer) => {
+const getRangeStartDate = (
+  range: Range,
+  customer: components['schemas']['Customer'],
+) => {
   switch (range) {
     case 'all_time':
       return new Date(customer.created_at)
@@ -68,8 +72,8 @@ const getRangeStartDate = (range: Range, customer: Customer) => {
 }
 
 interface ClientPageProps {
-  organization: Organization
-  customer: Customer
+  organization: components['schemas']['Organization']
+  customer: components['schemas']['Customer']
 }
 
 const ClientPage: React.FC<ClientPageProps> = ({ organization, customer }) => {

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/customers/[id]/page.tsx

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getCustomerById } from '@/utils/customer'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'

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

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { DataTableSearchParams, parseSearchParams } from '@/utils/datatable'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/finance/account/page.tsx

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'
 import ClientPage from './ClientPage'

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/finance/incoming/page.tsx

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { DataTableSearchParams, parseSearchParams } from '@/utils/datatable'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/finance/issue-funding/contributors/page.tsx

@@ -1,5 +1,5 @@
 import Contributors from '@/components/Finance/IssueFunding/Contributors'
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'
 

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/finance/issue-funding/page.tsx

@@ -1,5 +1,5 @@
 import Current from '@/components/Finance/IssueFunding/Current'
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'
 

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/finance/issue-funding/rewarded/page.tsx

@@ -1,5 +1,5 @@
 import Rewarded from '@/components/Finance/IssueFunding/Rewarded'
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'
 

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/finance/outgoing/page.tsx

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { DataTableSearchParams, parseSearchParams } from '@/utils/datatable'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/meters/[id]/edit/page.tsx

@@ -1,4 +1,5 @@
 import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI as getNewServerSideAPI } from '@/utils/client/serverside'
 import { getMeterById } from '@/utils/meter'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'
@@ -22,11 +23,12 @@ export default async function Page({
 }: {
   params: { organization: string; id: string }
 }) {
-  const api = getServerSideAPI()
+  const newAPI = getNewServerSideAPI()
   const organization = await getOrganizationBySlugOrNotFound(
-    api,
+    newAPI,
     params.organization,
   )
+  const api = getServerSideAPI()
   const meter = await getMeterById(api, params.id)
 
   return <ClientPage organization={organization} meter={meter} />

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/meters/[id]/page.tsx

@@ -1,4 +1,5 @@
 import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI as getNewServerSideAPI } from '@/utils/client/serverside'
 import { getMeterById } from '@/utils/meter'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'
@@ -22,11 +23,12 @@ export default async function Page({
 }: {
   params: { organization: string; id: string }
 }) {
-  const api = getServerSideAPI()
+  const newAPI = getNewServerSideAPI()
   const organization = await getOrganizationBySlugOrNotFound(
-    api,
+    newAPI,
     params.organization,
   )
+  const api = getServerSideAPI()
   const meter = await getMeterById(api, params.id)
 
   return <ClientPage organization={organization} meter={meter} />

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/meters/new/page.tsx

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'
 import ClientPage from './ClientPage'

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

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { DataTableSearchParams, parseSearchParams } from '@/utils/datatable'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/products/[id]/checkout-links/page.tsx

@@ -1,4 +1,5 @@
 import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI as getNewServerSideAPI } from '@/utils/client/serverside'
 import { DataTableSearchParams, parseSearchParams } from '@/utils/datatable'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { getProductById } from '@/utils/product'
@@ -19,12 +20,13 @@ export default async function Page({
   params: { organization: string; id: string }
   searchParams: DataTableSearchParams
 }) {
-  const api = getServerSideAPI()
+  const newAPI = getNewServerSideAPI()
   const organization = await getOrganizationBySlugOrNotFound(
-    api,
+    newAPI,
     params.organization,
   )
 
+  const api = getServerSideAPI()
   const product = await getProductById(api, params.id)
 
   if (!product) {

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

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'
 import ClientPage from './ClientPage'

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

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { DataTableSearchParams, parseSearchParams } from '@/utils/datatable'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'

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

@@ -17,6 +17,7 @@ import { useOrder } from '@/hooks/queries/orders'
 import { useRefunds } from '@/hooks/queries/refunds'
 import { markdownOptionsJustText } from '@/utils/markdown'
 import { Order, Organization, Product, RefundReason } from '@polar-sh/api'
+import { components } from '@polar-sh/client'
 import Button from '@polar-sh/ui/components/atoms/Button'
 import { DataTable } from '@polar-sh/ui/components/atoms/DataTable'
 import FormattedDateTime from '@polar-sh/ui/components/atoms/FormattedDateTime'
@@ -115,7 +116,11 @@ const ClientPage: React.FC<ClientPageProps> = ({
         </div>
       }
       className="gap-y-8"
-      contextView={<CustomerContextView customer={order.customer} />}
+      contextView={
+        <CustomerContextView
+          customer={order.customer as components['schemas']['Customer']}
+        />
+      }
     >
       <ShadowBox className="dark:divide-polar-700 flex flex-col divide-y divide-gray-200 border-gray-200 bg-transparent p-0">
         <div className="flex flex-col gap-6 p-8">

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/sales/[id]/page.tsx

@@ -1,4 +1,5 @@
 import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI as getNewServerSideAPI } from '@/utils/client/serverside'
 import { getOrderById } from '@/utils/order'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { Metadata } from 'next'
@@ -15,11 +16,12 @@ export default async function Page({
 }: {
   params: { organization: string; id: string }
 }) {
-  const api = getServerSideAPI()
+  const newAPI = getNewServerSideAPI()
   const organization = await getOrganizationBySlugOrNotFound(
-    api,
+    newAPI,
     params.organization,
   )
+  const api = getServerSideAPI()
   const order = await getOrderById(api, params.id)
 
   return <ClientPage organization={organization} order={order} />

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

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { DataTableSearchParams, parseSearchParams } from '@/utils/datatable'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { ProductPriceType } from '@polar-sh/api'

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

@@ -11,6 +11,7 @@ import UpdateSubscriptionModal from '@/components/Subscriptions/UpdateSubscripti
 import { useProduct, useSubscription } from '@/hooks/queries'
 import { markdownOptionsJustText } from '@/utils/markdown'
 import { Organization, Product, Subscription } from '@polar-sh/api'
+import { components } from '@polar-sh/client'
 import Button from '@polar-sh/ui/components/atoms/Button'
 import Pill from '@polar-sh/ui/components/atoms/Pill'
 import ShadowBox from '@polar-sh/ui/components/atoms/ShadowBox'
@@ -91,7 +92,11 @@ const ClientPage: React.FC<ClientPageProps> = ({
         </div>
       }
       className="gap-y-8"
-      contextView={<CustomerContextView customer={subscription.customer} />}
+      contextView={
+        <CustomerContextView
+          customer={subscription.customer as components['schemas']['Customer']}
+        />
+      }
     >
       <ShadowBox className="dark:divide-polar-700 flex flex-col divide-y divide-gray-200 border-gray-200 bg-transparent p-0">
         <div className="flex flex-col gap-6 p-8">

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/sales/subscriptions/[id]/page.tsx

@@ -1,4 +1,5 @@
 import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI as getNewServerSideAPI } from '@/utils/client/serverside'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
 import { getSubscriptionById } from '@/utils/subscription'
 import { Metadata } from 'next'
@@ -15,11 +16,12 @@ export default async function Page({
 }: {
   params: { organization: string; id: string }
 }) {
-  const api = getServerSideAPI()
+  const newAPI = getNewServerSideAPI()
   const organization = await getOrganizationBySlugOrNotFound(
-    api,
+    newAPI,
     params.organization,
   )
+  const api = getServerSideAPI()
   const subscription = await getSubscriptionById(api, params.id)
 
   return <ClientPage organization={organization} subscription={subscription} />

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/sales/subscriptions/page.tsx

@@ -1,7 +1,6 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { DataTableSearchParams, parseSearchParams } from '@/utils/datatable'
 import { getOrganizationBySlugOrNotFound } from '@/utils/organization'
-import { SubscriptionStatus } from '@polar-sh/api'
 import { Metadata } from 'next'
 import ClientPage from './ClientPage'
 
@@ -18,7 +17,7 @@ export default async function Page({
   params: { organization: string }
   searchParams: DataTableSearchParams & {
     product_id?: string
-    status?: Extract<SubscriptionStatus, 'active' | 'canceled'> | 'any'
+    status?: 'active' | 'canceled' | 'any'
   }
 }) {
   const api = getServerSideAPI()