Integrate subscription API

src/@services/ServiceContext.jsx

@@ -4,6 +4,7 @@ import EigenLayerService from './EigenLayerService';
 import LRTService from './LRTService';
 import OperatorService from './OperatorService';
 import RestakingDashboardService from './RestakingDashboardService';
+import SubscriptionService from './SubscriptionService';
 import { useSession } from '@clerk/clerk-react';
 
 export const ServiceContext = createContext();
@@ -31,5 +32,6 @@ const services = {
   lrtService: new LRTService(context),
   operatorService: new OperatorService(context),
   eigenlayerService: new EigenLayerService(context),
-  rdService: new RestakingDashboardService(context)
+  rdService: new RestakingDashboardService(context),
+  subscriptionService: new SubscriptionService(context)
 };

src/@services/SubscriptionService.js

@@ -0,0 +1,21 @@
+import BaseService from './BaseService';
+
+export default class SubscriptionService extends BaseService {
+  constructor(context) {
+    super(context);
+  }
+
+  async getPaymentLink(key) {
+    const response = await this._post('/subscriptions/get-payment-link', {
+      body: {
+        key
+      }
+    });
+
+    if (response.ok) {
+      return await response.json();
+    }
+
+    throw await this._createError(response);
+  }
+}

src/subscription/SubscriptionPlans.jsx

@@ -1,12 +1,28 @@
 import { Button } from '@nextui-org/react';
+import { reduceState } from '../shared/helpers';
 import { useAuth } from '@clerk/clerk-react';
+import { useMutativeReducer } from 'use-mutative';
+import { useNavigate } from 'react-router-dom';
+import { useServices } from '../@services/ServiceContext';
 
 export default function SubscriptionPlans() {
   const { isSignedIn } = useAuth();
+  const navigate = useNavigate();
+  const { subscriptionService } = useServices();
+  const [state, dispatch] = useMutativeReducer(reduceState, {
+    isError: false
+  });
 
-  const handleSubscribe = () => {
+  const handleSubscribe = async () => {
     if (!isSignedIn) {
-      // TODO: navigate to login page
+      navigate('/login');
+    }
+    try {
+      dispatch({ isError: false });
+      const res = await subscriptionService.getPaymentLink('monthly_support');
+      window.location.href = res.paymentlink;
+    } catch {
+      dispatch({ isError: true });
     }
   };
 
@@ -36,6 +52,11 @@ export default function SubscriptionPlans() {
             heading="Renews monthly"
           />
 
+          {state.isError && (
+            <p className="text-error-800">
+              Some error occured. Please try again later
+            </p>
+          )}
           <Button
             className="mt-4 h-12 w-44 border-secondary text-secondary hover:border-focus hover:text-focus"
             onPress={handleSubscribe}