feat: Stripe payment integration

packages/webapp/src/containers/Preferences/Integrations/IntegrationsPage.tsx

@@ -1,5 +1,5 @@
-import { StripeIntegration } from '@/containers/StripePayment/StripeIntegration';
+import { StripeIntegration2 } from '@/containers/StripePayment/StripeIntegration';
 
 export default function IntegrationsPage() {
-  return <StripeIntegration />
+  return <StripeIntegration2 />
 }

packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsBoot.tsx

@@ -0,0 +1,40 @@
+import React, { createContext, ReactNode, useContext } from 'react';
+import { useGetPaymentServicesState } from '@/hooks/query/payment-services';
+
+type PaymentMethodsContextType = {
+  isPaymentMethodsStateLoading: boolean;
+  paymentMethodsState: any;
+};
+
+const PaymentMethodsContext = createContext<PaymentMethodsContextType>(
+  {} as PaymentMethodsContextType,
+);
+
+type PaymentMethodsProviderProps = {
+  children: ReactNode;
+};
+
+const PaymentMethodsBoot = ({ children }: PaymentMethodsProviderProps) => {
+  const { data: paymentMethodsState, isLoading: isPaymentMethodsStateLoading } =
+    useGetPaymentServicesState();
+
+  const value = { isPaymentMethodsStateLoading, paymentMethodsState };
+
+  return (
+    <PaymentMethodsContext.Provider value={value}>
+      {children}
+    </PaymentMethodsContext.Provider>
+  );
+};
+
+const usePaymentMethodsBoot = () => {
+  const context = useContext<PaymentMethodsContextType>(PaymentMethodsContext);
+  if (context === undefined) {
+    throw new Error(
+      'usePaymentMethods must be used within a PaymentMethodsProvider',
+    );
+  }
+  return context;
+};
+
+export { PaymentMethodsBoot, usePaymentMethodsBoot };

packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage.tsx

@@ -1,20 +1,23 @@
 // @ts-nocheck
 import styled from 'styled-components';
+import { Button, Classes, Intent, Text } from '@blueprintjs/core';
 import { Box, Card, Group, Stack } from '@/components';
 import { StripeLogo } from '@/icons/StripeLogo';
-import { Button, Classes, Intent, Text } from '@blueprintjs/core';
+import { PaymentMethodsBoot } from './PreferencesPaymentMethodsBoot';
 
 export default function PreferencesPaymentMethodsPage() {
   return (
     <PaymentMethodsRoot>
-      <Text className={Classes.TEXT_MUTED} style={{ marginBottom: 20 }}>
-        Accept payments from all the major debit and credit card networks
-        through the supported payment gateways.
-      </Text>
+      <PaymentMethodsBoot>
+        <Text className={Classes.TEXT_MUTED} style={{ marginBottom: 20 }}>
+          Accept payments from all the major debit and credit card networks
+          through the supported payment gateways.
+        </Text>
 
-      <Stack>
-        <StripePaymentMethod />
-      </Stack>
+        <Stack>
+          <StripePaymentMethod />
+        </Stack>
+      </PaymentMethodsBoot>
     </PaymentMethodsRoot>
   );
 }