clients/web: migrate customer portal to new client

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

@@ -9,9 +9,9 @@ import {
   useCustomerBenefitGrants,
   useCustomerDownloadables,
 } from '@/hooks/queries'
-import { api } from '@/utils/api'
+import { api } from '@/utils/client'
 import { FileDownloadOutlined } from '@mui/icons-material'
-import { DownloadableRead } from '@polar-sh/api'
+import { components } from '@polar-sh/client'
 import Avatar from '@polar-sh/ui/components/atoms/Avatar'
 import CopyToClipboardInput from '@polar-sh/ui/components/atoms/CopyToClipboardInput'
 import ShadowBox from '@polar-sh/ui/components/atoms/ShadowBox'
@@ -86,13 +86,13 @@ export default function ClientPage() {
 }
 
 interface DownloadableItemProps {
-  downloadable: DownloadableRead
+  downloadable: components['schemas']['DownloadableRead']
 }
 
 const DownloadableItem = ({ downloadable }: DownloadableItemProps) => {
   const { data: benefitGrants } = useCustomerBenefitGrants(api, {
     limit: 1,
-    benefitId: downloadable.benefit_id,
+    benefit_id: downloadable.benefit_id,
   })
   const benefitGrant = benefitGrants?.items[0]
   const benefit = benefitGrant?.benefit

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

@@ -10,7 +10,7 @@ import {
   useCustomerBenefitGrants,
   useCustomerLicenseKey,
 } from '@/hooks/queries'
-import { api } from '@/utils/api'
+import { api } from '@/utils/client'
 import { Key } from '@mui/icons-material'
 import { BenefitType, CustomerBenefitGrantLicenseKeys } from '@polar-sh/api'
 import Avatar from '@polar-sh/ui/components/atoms/Avatar'

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

@@ -6,9 +6,9 @@ import { PurchasesQueryParametersContext } from '@/components/Purchases/Purchase
 import PurchaseSidebar from '@/components/Purchases/PurchasesSidebar'
 import AmountLabel from '@/components/Shared/AmountLabel'
 import { useCustomerOrders } from '@/hooks/queries'
-import { api } from '@/utils/api'
+import { api } from '@/utils/client'
 import { Search, ShoppingBagOutlined } from '@mui/icons-material'
-import { CustomerOrder, ProductPriceType } from '@polar-sh/api'
+import { components } from '@polar-sh/client'
 import Button from '@polar-sh/ui/components/atoms/Button'
 import Input from '@polar-sh/ui/components/atoms/Input'
 import ShadowBox from '@polar-sh/ui/components/atoms/ShadowBox'
@@ -33,7 +33,7 @@ export default function ClientPage() {
   )
 
   const { data: orders } = useCustomerOrders(api, {
-    productPriceType: ProductPriceType.ONE_TIME,
+    product_price_type: 'one_time',
     query: purchaseParameters.query,
     limit: purchaseParameters.limit,
     page: purchaseParameters.page,
@@ -103,7 +103,11 @@ export default function ClientPage() {
   )
 }
 
-const OrderItem = ({ order }: { order: CustomerOrder }) => {
+const OrderItem = ({
+  order,
+}: {
+  order: components['schemas']['CustomerOrder']
+}) => {
   const organization = order.product.organization
 
   return (

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

@@ -1,12 +1,16 @@
 'use client'
 
 import CustomerPortalOrder from '@/components/CustomerPortal/CustomerPortalOrder'
-import { api } from '@/utils/api'
+import { api } from '@/utils/client'
 import { ArrowBackOutlined } from '@mui/icons-material'
-import { CustomerOrder } from '@polar-sh/api'
+import { components } from '@polar-sh/client'
 import Link from 'next/link'
 
-const ClientPage = ({ order }: { order: CustomerOrder }) => {
+const ClientPage = ({
+  order,
+}: {
+  order: components['schemas']['CustomerOrder']
+}) => {
   return (
     <div className="flex flex-col gap-y-8">
       <Link

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

@@ -1,22 +1,17 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
-import { CustomerOrder, ResponseError } from '@polar-sh/api'
+import { getServerSideAPI } from '@/utils/client/serverside'
+import { unwrap } from '@polar-sh/client'
 import { notFound } from 'next/navigation'
 import ClientPage from './ClientPage'
 
 export default async function Page({ params }: { params: { id: string } }) {
   const api = getServerSideAPI()
-
-  let order: CustomerOrder
-
-  try {
-    order = await api.customerPortalOrders.get({ id: params.id })
-  } catch (e) {
-    if (e instanceof ResponseError && e.response.status === 404) {
-      notFound()
-    } else {
-      throw e
-    }
-  }
+  const order = await unwrap(
+    api.GET('/v1/customer-portal/orders/{id}', {
+      params: { path: { id: params.id } },
+      cache: 'no-store',
+    }),
+    { 404: notFound },
+  )
 
   return <ClientPage order={order} />
 }

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

@@ -6,9 +6,9 @@ import PurchaseSidebar from '@/components/Purchases/PurchasesSidebar'
 import AmountLabel from '@/components/Shared/AmountLabel'
 import { SubscriptionStatusLabel } from '@/components/Subscriptions/utils'
 import { useCustomerSubscriptions } from '@/hooks/queries'
-import { api } from '@/utils/api'
+import { api } from '@/utils/client'
 import { Search, ShoppingBagOutlined } from '@mui/icons-material'
-import { CustomerSubscription } 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 Input from '@polar-sh/ui/components/atoms/Input'
@@ -97,13 +97,13 @@ export default function ClientPage() {
             </div>
           ) : (
             <>
-              {subscriptions?.items.map((order) => (
+              {subscriptions?.items.map((subscription) => (
                 <Link
-                  key={order.id}
+                  key={subscription.id}
                   className="flex w-full flex-row items-center justify-between"
-                  href={`/purchases/subscriptions/${order.id}`}
+                  href={`/purchases/subscriptions/${subscription.id}`}
                 >
-                  <SubscriptionItem subscription={order} />
+                  <SubscriptionItem subscription={subscription} />
                 </Link>
               ))}
               <Pagination
@@ -124,7 +124,7 @@ export default function ClientPage() {
 const SubscriptionItem = ({
   subscription,
 }: {
-  subscription: CustomerSubscription
+  subscription: components['schemas']['CustomerSubscription']
 }) => {
   const organization = subscription.product.organization
 

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

@@ -1,15 +1,15 @@
 'use client'
 
 import CustomerPortalSubscription from '@/components/CustomerPortal/CustomerPortalSubscription'
-import { api } from '@/utils/api'
+import { api } from '@/utils/client'
 import { ArrowBackOutlined } from '@mui/icons-material'
-import { CustomerSubscription } from '@polar-sh/api'
+import { components } from '@polar-sh/client'
 import Link from 'next/link'
 
 const ClientPage = ({
   subscription,
 }: {
-  subscription: CustomerSubscription
+  subscription: components['schemas']['CustomerSubscription']
 }) => {
   return (
     <div className="flex flex-col gap-y-8">

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

@@ -1,22 +1,23 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
-import { CustomerSubscription, ResponseError } from '@polar-sh/api'
+import { getServerSideAPI } from '@/utils/client/serverside'
+import { unwrap } from '@polar-sh/client'
 import { notFound } from 'next/navigation'
 import ClientPage from './ClientPage'
 
 export default async function Page({ params }: { params: { id: string } }) {
   const api = getServerSideAPI()
-
-  let subscription: CustomerSubscription
-
-  try {
-    subscription = await api.customerPortalSubscriptions.get({ id: params.id })
-  } catch (e) {
-    if (e instanceof ResponseError && e.response.status === 404) {
-      notFound()
-    } else {
-      throw e
-    }
-  }
+  const subscription = await unwrap(
+    api.GET('/v1/customer-portal/subscriptions/{id}', {
+      params: {
+        path: {
+          id: params.id,
+        },
+      },
+      cache: 'no-store',
+    }),
+    {
+      404: notFound,
+    },
+  )
 
   return <ClientPage subscription={subscription} />
 }

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

@@ -1,4 +1,4 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getStorefrontOrNotFound } from '@/utils/storefront'
 import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'

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

@@ -4,6 +4,7 @@ import {
   urlSearchFromObj,
 } from '@/components/Organization/filters'
 import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI as getNewServerSideAPI } from '@/utils/client/serverside'
 import { getStorefrontOrNotFound } from '@/utils/storefront'
 import type { Metadata } from 'next'
 import ClientPage from './ClientPage'
@@ -19,7 +20,7 @@ export async function generateMetadata({
 }: {
   params: { organization: string }
 }): Promise<Metadata> {
-  const api = getServerSideAPI()
+  const api = getNewServerSideAPI()
   const { organization } = await getStorefrontOrNotFound(
     api,
     params.organization,
@@ -63,14 +64,15 @@ export default async function Page({
   params: { organization: string }
   searchParams: FilterSearchParams
 }) {
-  const api = getServerSideAPI()
+  const newAPI = getNewServerSideAPI()
   const { organization } = await getStorefrontOrNotFound(
-    api,
+    newAPI,
     params.organization,
   )
 
   const filters = buildFundingFilters(urlSearchFromObj(searchParams))
 
+  const api = getServerSideAPI()
   const issues = await api.funding.search(
     {
       organizationId: organization.id,

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

@@ -3,9 +3,9 @@ import TopbarRight from '@/components/Layout/Public/TopbarRight'
 import PublicLayout from '@/components/Layout/PublicLayout'
 import { StorefrontNav } from '@/components/Organization/StorefrontNav'
 import { StorefrontHeader } from '@/components/Profile/StorefrontHeader'
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { getStorefrontOrNotFound } from '@/utils/storefront'
-import { UserRead } from '@polar-sh/api'
+import { getAuthenticatedUser } from '@/utils/user'
 import React from 'react'
 
 export default async function Layout({
@@ -22,11 +22,7 @@ export default async function Layout({
     params.organization,
   )
 
-  let authenticatedUser: UserRead | undefined
-
-  try {
-    authenticatedUser = await api.users.getAuthenticated()
-  } catch (e) {}
+  const authenticatedUser = await getAuthenticatedUser()
 
   return (
     <PublicLayout className="gap-y-0 py-6 md:py-12" wide>

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

@@ -1,9 +1,10 @@
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI as getNewServerSideAPI } from '@/utils/client/serverside'
 import { ListResourceIssueFunding } from '@polar-sh/api'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import ClientPage from './ClientPage'
 
+import { getServerSideAPI } from '@/utils/api/serverside'
 import { getStorefrontOrNotFound } from '@/utils/storefront'
 
 const cacheConfig = {
@@ -17,7 +18,7 @@ export async function generateMetadata({
 }: {
   params: { organization: string }
 }): Promise<Metadata> {
-  const api = getServerSideAPI()
+  const api = getNewServerSideAPI()
   const { organization } = await getStorefrontOrNotFound(
     api,
     params.organization,
@@ -60,16 +61,17 @@ export default async function Page({
 }: {
   params: { organization: string }
 }) {
-  const api = getServerSideAPI()
+  const newAPI = getNewServerSideAPI()
 
   let listIssueFunding: ListResourceIssueFunding | undefined
 
   const { organization, products } = await getStorefrontOrNotFound(
-    api,
+    newAPI,
     params.organization,
   )
 
   try {
+    const api = getServerSideAPI()
     const loadListIssueFunding = await api.funding.search(
       {
         organizationId: organization.id,

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

@@ -1,12 +1,12 @@
 import { getServerURL } from '@/utils/api'
-import { getServerSideAPI } from '@/utils/api/serverside'
+import { getServerSideAPI } from '@/utils/client/serverside'
 import { isCrawler } from '@/utils/crawlers'
 import { getStorefrontOrNotFound } from '@/utils/storefront'
-import { CheckoutPublic } from '@polar-sh/api'
 import {
   CheckoutFormProvider,
   CheckoutProvider,
 } from '@polar-sh/checkout/providers'
+import { unwrap } from '@polar-sh/client'
 import type { Metadata } from 'next'
 import { headers } from 'next/headers'
 import { notFound } from 'next/navigation'
@@ -83,16 +83,14 @@ export default async function Page({
     return <></>
   }
 
-  let checkout: CheckoutPublic
-  try {
-    checkout = await api.checkouts.clientCreate({
+  const checkout = await unwrap(
+    api.POST('/v1/checkouts/client/', {
       body: {
         product_price_id: product.prices[0].id,
+        from_legacy_checkout_link: false,
       },
-    })
-  } catch (err) {
-    throw err
-  }
+    }),
+  )
 
   return (
     <CheckoutProvider