feat: integrate Stripe payment to invoices

packages/webapp/src/containers/PaymentLink/dialogs/SelectPaymentMethodsDialog/SelectPaymentMethodsBoot.tsx

@@ -1,4 +1,5 @@
-import React, { createContext, useContext, useState, ReactNode } from 'react';
+import { useGetPaymentServices } from '@/hooks/query/payment-services';
+import React, { createContext, useContext, ReactNode } from 'react';
 
 interface SelectPaymentMethodsContextType {}
 
@@ -25,10 +26,16 @@ interface SelectPaymentMethodsProviderProps {
 export const SelectPaymentMethodsBoot: React.FC<
   SelectPaymentMethodsProviderProps
 > = ({ children }) => {
+  const { isLoading: isPaymentServicesLoading, data: paymentServices } =
+    useGetPaymentServices();
+
+  const value = {
+    paymentServices,
+    isPaymentServicesLoading,
+  };
+
   return (
-    <SelectPaymentMethodsContext.Provider
-      value={{ }}
-    >
+    <SelectPaymentMethodsContext.Provider value={value}>
       {children}
     </SelectPaymentMethodsContext.Provider>
   );

packages/webapp/src/hooks/query/payment-services.ts

@@ -0,0 +1,32 @@
+// @ts-nocheck
+import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import useApiRequest from '../useRequest';
+import { transformToCamelCase } from '@/utils';
+
+const PaymentServicesQueryKey = 'PaymentServices';
+
+export interface GetPaymentServicesResponse {
+  
+}
+
+export const useGetPaymentServices = (
+  options?: UseQueryOptions<GetPaymentServicesResponse, Error>,
+): UseQueryResult<GetPaymentServicesResponse, Error> => {
+  const apiRequest = useApiRequest();
+
+  return useQuery<GetPaymentServicesResponse, Error>(
+    [PaymentServicesQueryKey],
+    () =>
+      apiRequest
+        .get('/payment-services')
+        .then(
+          (response) =>
+            transformToCamelCase(
+              response.data?.paymentServices,
+            ) as GetPaymentServicesResponse,
+        ),
+    {
+      ...options,
+    },
+  );
+};