Revert "feat(fee_credits): Ability to grant payment fee credits"

clients/apps/app/components/Notifications/Notification.tsx

@@ -1,7 +1,6 @@
 import { Box } from '@/components/Shared/Box'
 import { useTheme } from '@/design-system/useTheme'
 import {
-  MaintainerAccountCreditsGrantedNotificationPayload,
   MaintainerAccountReviewedNotificationPayload,
   MaintainerAccountUnderReviewNotificationPayload,
   MaintainerCreateAccountNotificationPayload,
@@ -24,7 +23,6 @@
     | MaintainerCreateAccountNotificationPayload
     | MaintainerNewPaidSubscriptionNotificationPayload
     | MaintainerNewProductSaleNotificationPayload
-    | MaintainerAccountCreditsGrantedNotificationPayload
 }
 
 export const Notification = ({
@@ -77,8 +75,6 @@
             color={theme.colors.text}
           />
         )
-      case 'MaintainerAccountCreditsGrantedNotification':
-        return <MaterialIcons name="bolt" size={20} color={theme.colors.text} />
       default:
         return (
           <MaterialIcons
@@ -102,8 +98,6 @@
         return 'Account Reviewed'
       case 'MaintainerCreateAccountNotification':
         return 'New Account Created'
-      case 'MaintainerAccountCreditsGrantedNotification':
-        return 'Credits Granted'
       default:
         return 'New Notification'
     }
@@ -127,14 +121,10 @@
         return 'Your account has been reviewed'
       case 'MaintainerCreateAccountNotification':
         return 'A new account has been created'
-      case 'MaintainerAccountCreditsGrantedNotification':
-        const { organization_name, amount } =
-          payload as MaintainerAccountCreditsGrantedNotificationPayload
-        return `${organization_name} has received ${formatCurrencyAndAmount(amount)} in fee credits!`
       default:
         return 'A new notification has been created'
     }
-  }, [type, payload])
+  }, [type])
 
   return (
     <Box flexDirection="row" gap="spacing-16" style={style}>

clients/apps/app/hooks/polar/notifications.ts

@@ -123,12 +123,6 @@ export type MaintainerNewProductSaleNotificationPayload = {
   organization_name: string
 }
 
-export type MaintainerAccountCreditsGrantedNotificationPayload = {
-  organization_name: string
-  amount: number
-  title: string
-}
-
 export type Notification = {
   id: string
   created_at: string
@@ -138,14 +132,12 @@ export type Notification = {
     | 'MaintainerCreateAccount'
     | 'MaintainerNewPaidSubscription'
     | 'MaintainerNewProductSale'
-    | 'MaintainerAccountCreditsGrantedNotification'
   payload:
     | MaintainerAccountUnderReviewNotificationPayload
     | MaintainerAccountReviewedNotificationPayload
     | MaintainerCreateAccountNotificationPayload
     | MaintainerNewPaidSubscriptionNotificationPayload
     | MaintainerNewProductSaleNotificationPayload
-    | MaintainerAccountCreditsGrantedNotificationPayload
 }
 
 export const useListNotifications = (): UseQueryResult<

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/finance/(wide)/income/IncomePage.tsx

@@ -84,7 +84,7 @@ export default function ClientPage({
   }
 
   return (
-    <div className="flex flex-col gap-y-8">
+    <div className="flex flex-col gap-y-6">
       <AccountBanner organization={organization} />
       {account && (
         <AccountBalance

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

@@ -22,11 +22,9 @@ export default async function Page(props: {
     params.organization,
   )
 
-  const { pagination, sorting } = parseSearchParams(
-    searchParams,
-    [{ id: 'created_at', desc: true }],
-    50,
-  )
+  const { pagination, sorting } = parseSearchParams(searchParams, [
+    { id: 'created_at', desc: true },
+  ])
 
   return (
     <IncomePage

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

@@ -1,5 +1,5 @@
 import { DashboardBody } from '@/components/Layout/DashboardLayout'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <DashboardBody>{children}</DashboardBody>
+  return <DashboardBody wide>{children}</DashboardBody>
 }

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/finance/(wide)/payouts/PayoutsPage.tsx

@@ -269,7 +269,7 @@ export default function ClientPage({
 
   return (
     <PayoutProvider>
-      <div className="flex flex-col gap-y-8">
+      <div className="flex flex-col gap-y-6">
         <AccountBanner organization={organization} />
         {account && (
           <AccountBalance account={account} organization={organization} />

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

@@ -22,11 +22,9 @@ export default async function Page(props: {
     params.organization,
   )
 
-  const { pagination, sorting } = parseSearchParams(
-    searchParams,
-    [{ id: 'created_at', desc: true }],
-    50,
-  )
+  const { pagination, sorting } = parseSearchParams(searchParams, [
+    { id: 'created_at', desc: true },
+  ])
 
   return (
     <PayoutsPage

clients/apps/web/src/components/Notifications/NotificationsPopover.tsx

@@ -239,30 +239,6 @@ const MaintainerCreateAccount = ({
   )
 }
 
-const MaintainerAccountCreditsGranted = ({
-  n,
-}: {
-  n: schemas['MaintainerAccountCreditsGrantedNotification']
-}) => {
-  const { payload } = n
-  return (
-    <Item n={n} iconClasses="bg-blue-200 text-blue-500">
-      {{
-        text: (
-          <>
-            {payload.organization_name} has received{' '}
-            <span className="font-bold">
-              ${getCentsInDollarString(payload.amount)}
-            </span>{' '}
-            in fee credits!
-          </>
-        ),
-        icon: <BoltOutlined fontSize="small" />,
-      }}
-    </Item>
-  )
-}
-
 export const Notification = ({
   n,
 }: {
@@ -278,9 +254,6 @@ export const Notification = ({
 
     case 'MaintainerCreateAccountNotification':
       return <MaintainerCreateAccount n={n} />
-
-    case 'MaintainerAccountCreditsGrantedNotification':
-      return <MaintainerAccountCreditsGranted n={n} />
   }
 }
 

clients/apps/web/src/components/Payouts/AccountBalance.tsx

@@ -2,11 +2,9 @@ import { useTransactionsSummary } from '@/hooks/queries'
 import { Skeleton } from '@mui/material'
 import { schemas } from '@polar-sh/client'
 import Button from '@polar-sh/ui/components/atoms/Button'
+import { ShadowBoxOnMd } from '@polar-sh/ui/components/atoms/ShadowBox'
 import { formatCurrencyAndAmount } from '@polar-sh/ui/lib/money'
-import React, { useCallback } from 'react'
-import { useModal } from '../Modal/useModal'
-import { Well, WellContent, WellFooter, WellHeader } from '../Shared/Well'
-import { FeeCreditGrantsModal } from './FeeCreditGrantsModal'
+import React, { useCallback, useState } from 'react'
 import WithdrawModal from './WithdrawModal'
 
 interface AccountBalanceProps {
@@ -26,99 +24,58 @@ const AccountBalance: React.FC<AccountBalanceProps> = ({
     isLoading,
   } = useTransactionsSummary(account.id)
 
-  const {
-    isShown: isPayoutConfirmModalShown,
-    show: showPayoutConfirmModal,
-    hide: hidePayoutConfirmModal,
-  } = useModal(false)
-  const {
-    isShown: isCreditGrantsModalShown,
-    show: showCreditGrantsModal,
-    hide: hideCreditGrantsModal,
-  } = useModal(false)
+  const [showConfirmModal, setShowConfirmModal] = useState(false)
+  const onWithdraw = useCallback(() => {
+    setShowConfirmModal(true)
+  }, [])
 
   const onWithdrawSuccess = useCallback(
     (payoutId: string) => {
       refetchBalance()
-      hidePayoutConfirmModal()
+      setShowConfirmModal(false)
       if (_onWithdrawSuccess) {
         _onWithdrawSuccess(payoutId)
       }
     },
-    [_onWithdrawSuccess, refetchBalance, hidePayoutConfirmModal],
+    [_onWithdrawSuccess, refetchBalance],
   )
 
   return (
-    <div className="flex flex-col gap-8 md:flex-row">
-      <Well className="flex-1 justify-between rounded-2xl bg-gray-50 p-6">
-        <WellHeader className="flex flex-row items-center justify-between gap-x-6">
-          <h2 className="text-lg font-medium capitalize">Balance</h2>
-          <Button className="self-start" onClick={showPayoutConfirmModal}>
-            Withdraw
-          </Button>
-        </WellHeader>
-        <WellContent>
-          <div className="text-4xl">
-            {isLoading ? (
-              <Skeleton />
-            ) : (
-              <>
-                {summary &&
-                  formatCurrencyAndAmount(
-                    summary.balance.amount,
-                    summary.balance.currency,
-                  )}
-              </>
-            )}
+    <>
+      <ShadowBoxOnMd>
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col gap-y-2">
+            <h2 className="text-lg font-medium capitalize">Balance</h2>
+            <div className="text-4xl">
+              {isLoading ? (
+                <Skeleton />
+              ) : (
+                <>
+                  {summary &&
+                    formatCurrencyAndAmount(
+                      summary.balance.amount,
+                      summary.balance.currency,
+                    )}
+                </>
+              )}
+            </div>
           </div>
-        </WellContent>
-        <WellFooter>
-          <p className="dark:text-polar-500 text-gray-500">
-            You may only withdraw funds above $10.
-          </p>
-        </WellFooter>
-      </Well>
-      <Well className="flex-1 justify-between rounded-2xl bg-gray-50 p-6">
-        <WellHeader className="flex flex-row items-center justify-between gap-x-6">
-          <h2 className="text-lg font-medium capitalize">Fee Credits</h2>
-          <Button
-            className="self-start"
-            variant="secondary"
-            onClick={showCreditGrantsModal}
-          >
-            View Grants
-          </Button>
-        </WellHeader>
-        <WellContent>
-          <div className="text-4xl">
-            {isLoading ? (
-              <Skeleton />
-            ) : (
-              <>
-                {summary &&
-                  formatCurrencyAndAmount(account.credit_balance, 'usd')}
-              </>
-            )}
+          <div className="flex flex-col items-center gap-2">
+            <Button onClick={onWithdraw}>Withdraw</Button>
+            <p className="dark:text-polar-500 text-xs text-gray-500">
+              Minimum {formatCurrencyAndAmount(1000, 'usd', 0)}
+            </p>
           </div>
-        </WellContent>
-        <WellFooter>
-          <p className="dark:text-polar-500 text-gray-500">
-            Fees are first deducted from any available credits.
-          </p>
-        </WellFooter>
-      </Well>
+        </div>
+      </ShadowBoxOnMd>
       <WithdrawModal
         account={account}
         organization={organization}
-        isShown={isPayoutConfirmModalShown}
-        hide={hidePayoutConfirmModal}
+        isShown={showConfirmModal}
+        hide={() => setShowConfirmModal(false)}
         onSuccess={onWithdrawSuccess}
       />
-      <FeeCreditGrantsModal
-        isShown={isCreditGrantsModalShown}
-        hide={hideCreditGrantsModal}
-      />
-    </div>
+    </>
   )
 }