From 21290c9bcbe218458964b4849326d9fbedc34691 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Voron?= <fvoron@gmail.com>
Date: Thu, 16 May 2024 13:15:28 +0200
Subject: [PATCH] clients/web: fix TransactionsList to work with updated schema

---
 .../(backer)/finance/incoming/ClientPage.tsx  |  7 ++----
 .../(backer)/finance/outgoing/ClientPage.tsx  |  2 +-
 .../(topbar)/finance/incoming/ClientPage.tsx  |  4 ++--
 .../(topbar)/finance/outgoing/ClientPage.tsx  |  2 +-
 .../Transactions/TransactionsList.stories.tsx | 23 +++++++++----------
 .../Transactions/TransactionsList.tsx         | 16 ++++++-------
 6 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/clients/apps/web/src/app/(topbar)/(backer)/finance/incoming/ClientPage.tsx b/clients/apps/web/src/app/(topbar)/(backer)/finance/incoming/ClientPage.tsx
index 9d4256d168..6ca0015ef3 100644
--- a/clients/apps/web/src/app/(topbar)/(backer)/finance/incoming/ClientPage.tsx
+++ b/clients/apps/web/src/app/(topbar)/(backer)/finance/incoming/ClientPage.tsx
@@ -77,9 +77,6 @@ export default function ClientPage({
     personalOrganization?.account_id,
   )
 
-  const dependenciesIsLoading =
-    personalOrganization === undefined || accountIsLoading
-
   const balancesHook = useSearchTransactions({
     accountId: organizationAccount?.id,
     type: TransactionType.BALANCE,
@@ -147,7 +144,7 @@ export default function ClientPage({
               onPaginationChange={setPagination}
               sorting={sorting}
               onSortingChange={setSorting}
-              isLoading={dependenciesIsLoading || balancesHook}
+              isLoading={accountIsLoading || balancesHook.isLoading}
             />
           </TabsContent>
           <TabsContent value="payouts">
@@ -158,7 +155,7 @@ export default function ClientPage({
               onPaginationChange={setPagination}
               sorting={sorting}
               onSortingChange={setSorting}
-              isLoading={dependenciesIsLoading || payoutsHooks}
+              isLoading={accountIsLoading || payoutsHooks.isLoading}
             />
           </TabsContent>
         </Tabs>
diff --git a/clients/apps/web/src/app/(topbar)/(backer)/finance/outgoing/ClientPage.tsx b/clients/apps/web/src/app/(topbar)/(backer)/finance/outgoing/ClientPage.tsx
index 53cd92aeaf..342022af24 100644
--- a/clients/apps/web/src/app/(topbar)/(backer)/finance/outgoing/ClientPage.tsx
+++ b/clients/apps/web/src/app/(topbar)/(backer)/finance/outgoing/ClientPage.tsx
@@ -87,7 +87,7 @@ export default function ClientPage({
           onPaginationChange={setPagination}
           sorting={sorting}
           onSortingChange={setSorting}
-          isLoading={transactionsHook}
+          isLoading={transactionsHook.isLoading}
         />
       </ShadowBoxOnMd>
     </div>
diff --git a/clients/apps/web/src/app/maintainer/[organization]/(topbar)/finance/incoming/ClientPage.tsx b/clients/apps/web/src/app/maintainer/[organization]/(topbar)/finance/incoming/ClientPage.tsx
index fdf6b34786..dd7f04354b 100644
--- a/clients/apps/web/src/app/maintainer/[organization]/(topbar)/finance/incoming/ClientPage.tsx
+++ b/clients/apps/web/src/app/maintainer/[organization]/(topbar)/finance/incoming/ClientPage.tsx
@@ -141,7 +141,7 @@ export default function ClientPage({
               onPaginationChange={setPagination}
               sorting={sorting}
               onSortingChange={setSorting}
-              isLoading={accountIsLoading || balancesHook}
+              isLoading={accountIsLoading || balancesHook.isLoading}
             />
           </TabsContent>
           <TabsContent value="payouts">
@@ -152,7 +152,7 @@ export default function ClientPage({
               onPaginationChange={setPagination}
               sorting={sorting}
               onSortingChange={setSorting}
-              isLoading={accountIsLoading || payoutsHooks}
+              isLoading={accountIsLoading || payoutsHooks.isLoading}
             />
           </TabsContent>
         </Tabs>
diff --git a/clients/apps/web/src/app/maintainer/[organization]/(topbar)/finance/outgoing/ClientPage.tsx b/clients/apps/web/src/app/maintainer/[organization]/(topbar)/finance/outgoing/ClientPage.tsx
index d4e153a8a0..8392469698 100644
--- a/clients/apps/web/src/app/maintainer/[organization]/(topbar)/finance/outgoing/ClientPage.tsx
+++ b/clients/apps/web/src/app/maintainer/[organization]/(topbar)/finance/outgoing/ClientPage.tsx
@@ -81,7 +81,7 @@ export default function ClientPage({
           onPaginationChange={setPagination}
           sorting={sorting}
           onSortingChange={setSorting}
-          isLoading={transactionsHook}
+          isLoading={transactionsHook.isLoading}
         />
       </ShadowBoxOnMd>
     </div>
diff --git a/clients/apps/web/src/components/Transactions/TransactionsList.stories.tsx b/clients/apps/web/src/components/Transactions/TransactionsList.stories.tsx
index 8df6b50d84..a781338cab 100644
--- a/clients/apps/web/src/components/Transactions/TransactionsList.stories.tsx
+++ b/clients/apps/web/src/components/Transactions/TransactionsList.stories.tsx
@@ -9,7 +9,7 @@ import {
   TransactionProduct,
   TransactionProductPrice,
   TransactionRepository,
-  TransactionSubscription,
+  TransactionSale,
 } from '@polar-sh/sdk'
 import type { Meta, StoryObj } from '@storybook/react'
 import TransactionsList from './TransactionsList'
@@ -112,13 +112,6 @@ const product: TransactionProduct = {
   organization,
 }
 
-const subscription: TransactionSubscription = {
-  created_at: '',
-  id: '',
-  status: 'incomplete',
-  product,
-}
-
 const product_price: TransactionProductPrice = {
   created_at: '',
   id: '',
@@ -129,15 +122,21 @@ const product_price: TransactionProductPrice = {
   is_archived: false,
 }
 
-const txSubscription: Transaction = {
+const sale: TransactionSale = {
+  created_at: '',
+  id: '',
+  product,
+  product_price,
+}
+
+const txSale: Transaction = {
   ...tx,
-  subscription,
-  product_price: product_price,
+  sale,
 }
 
 export const Default: Story = {
   args: {
-    transactions: [tx, txDonation, txIssueReward, txSubscription],
+    transactions: [tx, txDonation, txIssueReward, txSale],
     isLoading: false,
   },
 }
diff --git a/clients/apps/web/src/components/Transactions/TransactionsList.tsx b/clients/apps/web/src/components/Transactions/TransactionsList.tsx
index e9a8171cd5..2d043a50b1 100644
--- a/clients/apps/web/src/components/Transactions/TransactionsList.tsx
+++ b/clients/apps/web/src/components/Transactions/TransactionsList.tsx
@@ -27,13 +27,13 @@ import { useMemo } from 'react'
 import ProductPill from '../Products/ProductPill'
 
 const getTransactionMeta = (transaction: Transaction) => {
-  if (transaction.subscription) {
+  if (transaction.sale) {
     return {
-      type: 'Subscription',
-      organization: transaction.subscription?.product.organization,
+      type: transaction.sale.subscription_id ? 'Subscription' : 'Purchase',
+      organization: transaction.sale.product.organization,
       meta: {
-        subscription_tier: transaction.subscription.product,
-        price: transaction.product_price,
+        product: transaction.sale.product,
+        price: transaction.sale.product_price,
       },
     }
   } else if (transaction.issue_reward) {
@@ -96,15 +96,15 @@ const TransactionMeta: React.FC<TransactionMetaProps> = ({ transaction }) => {
         {transactionMeta.meta && (
           <>
             <div>—</div>
-            {'subscription_tier' in transactionMeta.meta && (
+            {'product' in transactionMeta.meta && (
               <>
                 <div>
                   <Link
                     className=" text-blue-500 dark:text-blue-400"
-                    href={`/${transactionMeta.meta.subscription_tier.organization?.name}/subscriptions`}
+                    href={`/${transactionMeta.organization?.name}/subscriptions`}
                   >
                     <ProductPill
-                      product={transactionMeta.meta.subscription_tier}
+                      product={transactionMeta.meta.product}
                       price={transactionMeta.meta.price}
                     />
                   </Link>