feat: 🎸 Adds credits to billing flows (#45)

## Why?

- Enables payment of pro plan with crypto
- If the user has credits it tries creating a subscription to the pro
plan, which should deduct from credits.
> Note that currently the pro plan has a free trial, which is going to
be removed.
- Displays credits in billing information
- Allows toping credits

## How?


## Tickets?

- [Ticket 1](the-ticket-url-here)
- [Ticket 2](the-ticket-url-here)
- [Ticket 3](the-ticket-url-here)

## Contribution checklist?

- [x] The commit messages are detailed
- [x] The `build` command runs locally
- [ ] Assets or static content are linked and stored in the project
- [ ] You've reviewed spelling using a grammar checker
- [ ] For documentation, guides or references, you've tested the
commands and steps
- [ ] You've done enough research before writing

## Security checklist?

- [ ] Sensitive data has been identified and is being protected properly
- [ ] Injection has been prevented (parameterized queries, no eval or
system calls)
- [ ] The Components are escaping output (to prevent XSS)

## References?

Optionally, provide references such as links

## Preview?



https://github.com/user-attachments/assets/3c27b643-e2eb-4d2e-8078-07728fd25886

Author: angarita-dev

.changeset/sharp-walls-hide.md

@@ -0,0 +1,5 @@
+---
+"@fleek-platform/dashboard": patch
+---
+
+Adds credit support

src/components/Billing/HorizontalPlanCard.tsx

@@ -11,7 +11,7 @@ export const HorizontalPlanCard: React.FC<HorizontalPlanCardProps> = ({
   ...headerProps
 }) => {
   return (
-    <Box variant="container">
+    <Box variant="container" className="h-full justify-between">
       <Header {...headerProps} />
       {children}
     </Box>

src/components/LegacyPlanUpgradeModal/LegacyPlanUpgradeModal.tsx

@@ -29,10 +29,19 @@ export const LegacyPlanUpgradeModal = () => {
   const checkout = useFleekCheckout();
   const toast = useToast();
   const [isLoading, setLoading] = useState(false);
-  const { billingPlanType, loading: billingPlanTypeLoading } = useBillingContext();
+  const {
+    billingPlanType,
+    loading: billingPlanTypeLoading,
+    subscription,
+    team,
+  } = useBillingContext();
 
   useEffect(() => {
-    if (billingPlanTypeLoading || billingPlanType !== 'none' && billingPlanType !== 'free') return;
+    if (
+      billingPlanTypeLoading ||
+      (billingPlanType !== 'none' && billingPlanType !== 'free')
+    )
+      return;
     const shown = localStorage.getItem(shownKey);
     if (shown) return;
     setIsOpen(true);
@@ -53,7 +62,13 @@ export const LegacyPlanUpgradeModal = () => {
     setLoading(true);
     try {
       const response = await checkout.mutateAsync();
-      window.location.href = response.url;
+
+      if (response.type === 'CHECKOUT') {
+        window.location.href = response.content.url;
+      }
+
+      await Promise.all([subscription.refetch(), team.refetch()]);
+      toast.success({ message: 'Subscribed successfully!' });
     } catch (error) {
       toast.error({ error, log: 'Error upgrading plan. Please try again' });
     }

src/components/ftw/RootLayout/RootLayout.tsx

@@ -32,6 +32,8 @@ import { LayoutHead } from '../../LayoutHead/LayoutHead';
 import { AccountDropdown } from '../AccountDropdown/AccountDropdown';
 import { Announcement } from '../Announcement/Announcement';
 import { BreadcrumbItem, Breadcrumbs } from '../Breadcrumbs/Breadcrumbs';
+import { useCredits, useCreditsCheckout } from '@/hooks/useCredits';
+import { usePermissions } from '@/hooks/usePermissions';
 
 export type NavigationItem = {
   icon: IconName;
@@ -174,6 +176,38 @@ const VersionTagsWrapper: React.FC = () => {
   return <VersionTags />;
 };
 
+const Credits = () => {
+  const { credits, isCreditsLoading } = useCredits();
+  const { handleAddCredits, isCreatingCheckout } = useCreditsCheckout();
+
+  return (
+    <Box className="flex-row justify-between items-center border border-neutral-6 bg-neutral-2 rounded-t-lg p-3">
+      <Text
+        className="text-neutral-12"
+        variant="tertiary"
+        size="sm"
+        weight={500}
+      >
+        {isCreditsLoading ? (
+          <Skeleton variant="text" />
+        ) : (
+          credits.positiveFormatted
+        )}
+      </Text>
+      <Button
+        className="py-0 h-auto"
+        variant="outline"
+        intent="ghost"
+        onClick={handleAddCredits as () => void}
+      >
+        <Text className="text-neutral-11" variant="tertiary" size="sm">
+          {isCreatingCheckout ? <Icon name="spinner" /> : 'Buy credits'}
+        </Text>
+      </Button>
+    </Box>
+  );
+};
+
 type SidebarProps = {
   slotSidebar: React.ReactNode;
   navigation: NavigationItem[];
@@ -185,6 +219,10 @@ const Sidebar: React.FC<SidebarProps> = ({
   navigation,
   isNavigationLoading,
 }) => {
+  const hasBillingPermission = usePermissions({
+    action: [constants.PERMISSION.BILLING.MANAGE],
+  });
+
   return (
     <Box
       className="w-[15.938rem] pt-4 pb-2.5 px-3 gap-2 justify-between shrink-0 h-full"
@@ -235,16 +273,27 @@ const Sidebar: React.FC<SidebarProps> = ({
       <Box className="gap-2.5">
         <VersionTagsWrapper />
         <Announcement />
-        <Box className="border border-neutral-6 py-2 pt-2.5 rounded-lg">
-          <FeedbackModalLink />
-          <ExternalLinkWrapper href={constants.EXTERNAL_LINK.FLEEK_DOCS}>
-            Documentation
-          </ExternalLinkWrapper>
-          <ExternalLinkWrapper href={constants.EXTERNAL_LINK.FLEEK_SUPPORT}>
-            Support
-          </ExternalLinkWrapper>
-          <Box className="h-[1px] my-2.5 mx-3 bg-neutral-6" />
-          <AccountDropdown />
+
+        <Box className="gap-0">
+          {hasBillingPermission && <Credits />}
+          <Box
+            className={cn(
+              'border-neutral-6 py-2 pt-2.5 rounded-b-lg',
+              hasBillingPermission
+                ? 'border-b border-x rounded-b-lg'
+                : 'border rounded-lg',
+            )}
+          >
+            <FeedbackModalLink />
+            <ExternalLinkWrapper href={constants.EXTERNAL_LINK.FLEEK_DOCS}>
+              Documentation
+            </ExternalLinkWrapper>
+            <ExternalLinkWrapper href={constants.EXTERNAL_LINK.FLEEK_SUPPORT}>
+              Support
+            </ExternalLinkWrapper>
+            <Box className="h-[1px] my-2.5 mx-3 bg-neutral-6" />
+            <AccountDropdown />
+          </Box>
         </Box>
       </Box>
     </Box>

src/fragments/Projects/Settings/Sections/Billing/BillingPlan/BillingPlan.tsx

@@ -13,7 +13,6 @@ import { constants } from '@/constants';
 import { useCancelMockedMutation } from '@/hooks/useCancelSubscription';
 import { useFleekCheckout } from '@/hooks/useFleekCheckout';
 import { usePermissions } from '@/hooks/usePermissions';
-import { useRouter } from '@/hooks/useRouter';
 import { useToast } from '@/hooks/useToast';
 import { useBillingContext } from '@/providers/BillingProvider';
 import type { BillingPlanType } from '@/types/Billing';
@@ -23,11 +22,12 @@ import { dateFormat } from '@/utils/dateFormats';
 
 import { CancelPlanModal } from './CancelPlanModal';
 import { getDefined } from '@/defined';
+import { useCreditsCheckout } from '@/hooks/useCredits';
 
 export const BillingPlan: React.FC<LoadingProps> = ({ isLoading }) => {
   const toast = useToast();
-  const router = useRouter();
-  const { subscription, billingPlanType, paymentMethod } = useBillingContext();
+  const { subscription, billingPlanType, paymentMethod, team } =
+    useBillingContext();
 
   const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
 
@@ -53,7 +53,14 @@ export const BillingPlan: React.FC<LoadingProps> = ({ isLoading }) => {
       // TODO: This fails for some reason
       // router.replace(response.url);
 
-      window.location.href = response.url;
+      if (response.type === 'CHECKOUT') {
+        window.location.href = response.content.url;
+
+        return;
+      }
+
+      await Promise.all([subscription.refetch(), team.refetch()]);
+      toast.success({ message: 'Subscribed successfully!' });
     } catch (error) {
       toast.error({ error, log: 'Error upgrading plan. Please try again' });
     }
@@ -71,17 +78,6 @@ export const BillingPlan: React.FC<LoadingProps> = ({ isLoading }) => {
     }
   };
 
-  const endPlanDate = useMemo(() => {
-    if (subscription.data?.endDate) {
-      return dateFormat({
-        dateISO: subscription.data.endDate,
-        format: DateTime.DATE_FULL,
-      });
-    }
-
-    return '';
-  }, [subscription.data?.endDate]);
-
   const endPeriodDate = useMemo(() => {
     if (subscription.data?.periodEndDate) {
       return dateFormat({
@@ -93,57 +89,19 @@ export const BillingPlan: React.FC<LoadingProps> = ({ isLoading }) => {
     return '';
   }, [subscription.data?.periodEndDate]);
 
-  const shouldShowCancellationBanner = useMemo(() => {
-    if (subscription.data?.endDate) {
-      const targetTime = DateTime.fromISO(subscription.data.endDate);
-      const currentTime = DateTime.now();
-      const diff = targetTime.diff(currentTime);
-
-      return Math.floor(diff.as('months')) <= 1;
-    }
-
-    return null;
-  }, [subscription.data?.endDate]);
-
-  const trialEndDate = useMemo(() => {
-    if (subscription.data?.trialEndDate) {
-      return dateFormat({
-        dateISO: subscription.data.trialEndDate,
-        format: DateTime.DATE_FULL,
-      });
-    }
-
-    return '';
-  }, [subscription.data?.trialEndDate]);
-
   const { title, description, price } = getPlanData(
     billingPlanType,
     endPeriodDate,
   );
 
   return (
-    <>
+    <Box className="w-full">
       <CancelPlanModal
         isOpen={isCancelModalOpen}
         onOpenChange={setIsCancelModalOpen}
         onCancelPlan={handleCancelPlan}
         dueDate={endPeriodDate}
       />
-      {shouldShowCancellationBanner && !isLoading && (
-        <AlertBox size="sm" className="font-medium">
-          Your Pro Plan is expiring. You will be converted to a Free plan on{' '}
-          {endPlanDate}.
-        </AlertBox>
-      )}
-
-      {billingPlanType === 'trial' && !isLoading && (
-        <AlertBox size="sm" className="font-medium">
-          Your trial period expires on {trialEndDate}.{' '}
-          {paymentMethod.data?.id
-            ? 'You will be billed after that date.'
-            : 'Be sure to add your billing info before your trial ends.'}
-        </AlertBox>
-      )}
       <Billing.HorizontalPlanCard
         isLoading={isLoading}
         title={title}
@@ -172,7 +130,7 @@ export const BillingPlan: React.FC<LoadingProps> = ({ isLoading }) => {
           </Box>
         </SettingsBox.ActionRow>
       </Billing.HorizontalPlanCard>
-    </>
+    </Box>
   );
 };
 
@@ -192,6 +150,7 @@ const ButtonsContainer: React.FC<ButtonsContainerProps> = ({
   onCancelPlan,
 }) => {
   const [isLoading, setIsLoading] = useState(false);
+  const { handleAddCredits, isCreatingCheckout } = useCreditsCheckout();
   const hasManageBillingPermission = usePermissions({
     action: [constants.PERMISSION.BILLING.MANAGE],
   });
@@ -244,6 +203,13 @@ const ButtonsContainer: React.FC<ButtonsContainerProps> = ({
           {billingPlanType === 'trial' ? 'Add billing info' : 'Upgrade to Pro'}
         </Button>
       </PermissionsTooltip>
+      <Button
+        size="sm"
+        onClick={handleAddCredits as () => void}
+        loading={isCreatingCheckout}
+      >
+        Add credits
+      </Button>
     </>
   );
 };
@@ -283,3 +249,60 @@ const getPlanData = (plan: BillingPlanType, endPlanDate?: string): PlanData => {
     },
   }[plan];
 };
+
+export const Banners = ({ isLoading }: LoadingProps) => {
+  const { subscription, billingPlanType, paymentMethod } = useBillingContext();
+  const shouldShowCancellationBanner = useMemo(() => {
+    if (subscription.data?.endDate) {
+      const targetTime = DateTime.fromISO(subscription.data.endDate);
+      const currentTime = DateTime.now();
+      const diff = targetTime.diff(currentTime);
+
+      return Math.floor(diff.as('months')) <= 1;
+    }
+
+    return null;
+  }, [subscription.data?.endDate]);
+
+  const trialEndDate = useMemo(() => {
+    if (subscription.data?.trialEndDate) {
+      return dateFormat({
+        dateISO: subscription.data.trialEndDate,
+        format: DateTime.DATE_FULL,
+      });
+    }
+
+    return '';
+  }, [subscription.data?.trialEndDate]);
+
+  const endPlanDate = useMemo(() => {
+    if (subscription.data?.endDate) {
+      return dateFormat({
+        dateISO: subscription.data.endDate,
+        format: DateTime.DATE_FULL,
+      });
+    }
+
+    return '';
+  }, [subscription.data?.endDate]);
+
+  return (
+    <>
+      {shouldShowCancellationBanner && !isLoading && (
+        <AlertBox size="sm" className="font-medium">
+          Your Pro Plan is expiring. You will be converted to a Free plan on{' '}
+          {endPlanDate}.
+        </AlertBox>
+      )}
+
+      {billingPlanType === 'trial' && !isLoading && (
+        <AlertBox size="sm" className="font-medium">
+          Your trial period expires on {trialEndDate}.{' '}
+          {paymentMethod.data?.id
+            ? 'You will be billed after that date.'
+            : 'Be sure to add your billing info before your trial ends.'}
+        </AlertBox>
+      )}
+    </>
+  );
+};