feat: getting subscription endpoint

packages/webapp/src/containers/Subscriptions/BillingPage.tsx

@@ -2,6 +2,7 @@
 import * as R from 'ramda';
 import { Button } from '@blueprintjs/core';
 import withAlertActions from '../Alert/withAlertActions';
+import { BillingPageBoot } from './BillingPageBoot';
 
 function BillingPageRoot({ openAlert }) {
   const handleCancelSubBtnClick = () => {
@@ -13,11 +14,13 @@ function BillingPageRoot({ openAlert }) {
   const handleUpdatePaymentMethod = () => {};
 
   return (
-    <h1>
-      <Button onClick={handleCancelSubBtnClick}>Cancel Subscription</Button>
-      <Button onClick={handleResumeSubBtnClick}>Resume Subscription</Button>
-      <Button>Update Payment Method</Button>
-    </h1>
+    <BillingPageBoot>
+      <h1>
+        <Button onClick={handleCancelSubBtnClick}>Cancel Subscription</Button>
+        <Button onClick={handleResumeSubBtnClick}>Resume Subscription</Button>
+        <Button>Update Payment Method</Button>
+      </h1>
+    </BillingPageBoot>
   );
 }
 

packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx

@@ -1,3 +1,28 @@
-export function BillingPageBoot() {
-  return null;
+import React, { createContext } from 'react';
+import { useGetSubscriptions } from '@/hooks/query/subscription';
+
+interface BillingBootContextValues {
+  isSubscriptionsLoading: boolean;
+  subscriptions: any;
 }
+
+const BillingBoot = createContext<BillingBootContextValues>(
+  {} as BillingBootContextValues,
+);
+
+interface BillingPageBootProps {
+  children: React.ReactNode;
+}
+
+export function BillingPageBoot({ children }: BillingPageBootProps) {
+  const { isLoading: isSubscriptionsLoading, data: subscriptions } =
+    useGetSubscriptions();
+
+  const value = {
+    isSubscriptionsLoading,
+    subscriptions,
+  };
+  return <BillingBoot.Provider value={value}>{children}</BillingBoot.Provider>;
+}
+
+export const useBillingPageBoot = () => React.useContext(BillingBoot);

packages/webapp/src/hooks/query/subscription.tsx

@@ -1,9 +1,12 @@
-// @ts-nocheck
+// @ts-ignore
 import {
   useMutation,
   UseMutationOptions,
   UseMutationResult,
+  useQuery,
   useQueryClient,
+  UseQueryOptions,
+  UseQueryResult,
 } from 'react-query';
 import useApiRequest from '../useRequest';
 
@@ -113,3 +116,29 @@ export function useChangeSubscriptionPlan(
     },
   );
 }
+
+interface GetSubscriptionsQuery {}
+interface GetSubscriptionsResponse {}
+
+/**
+ * Changese the main subscription of the current organization.
+ * @param {UseMutationOptions<ChangeMainSubscriptionPlanValues, Error, ChangeMainSubscriptionPlanResponse>} options -
+ * @returns {UseMutationResult<ChangeMainSubscriptionPlanValues, Error, ChangeMainSubscriptionPlanResponse>}
+ */
+export function useGetSubscriptions(
+  options?: UseQueryOptions<
+    GetSubscriptionsQuery,
+    Error,
+    GetSubscriptionsResponse
+  >,
+): UseQueryResult<GetSubscriptionsResponse, Error> {
+  const apiRequest = useApiRequest();
+
+  return useQuery<GetSubscriptionsQuery, Error, GetSubscriptionsResponse>(
+    ['SUBSCRIPTIONS'],
+    (values) => apiRequest.get(`/subscription`).then((res) => res.data),
+    {
+      ...options,
+    },
+  );
+}